Introduction to HTML

1. 1
Web Technology
Client Side Technology

2. 2
We need to answer…
…How is the Internet organised?
…How do we find and retrieve pages on the
Internet?
…How is this data (web pages, etc)
transmitted over the Internet?
…How is what we see in the browser window
defined as a collection of data?
http://www.user-agents.org/

3. 3
Clients and Servers
The Web is a client/server application: Web
browsers are clients which send requests to Web
servers, which send responses back.

4. 4
Fetching Pages over the Internet
Architecturally, the Internet consists of a collection
of layers, each one providing services for the one
above it:
The Internet Layer gets packets to their destinations;
The Transport Layer sends streams of data;
The Application Layer provides high-level services to
applications such as Web browsers.

5. 5
HTTP
HTTP makes use of TCP to open connections between
clients and servers and to pass the requests and responses
between them.
When a user clicks a link or types a web address:
1. A TCP connection is opened between browser and server
2. Then requests and responses are sent back and forth using
HTTP
HTTP is a stateless protocol, meaning each request for data
is dealt with in isolation; once the server sends the
response, it forgets everything about the original request.

6. 6
Fetching Pages over the Internet: HTTP
/ response
HTTP
Hypertext Transfer Protocol
TCP
Transmission Control Protocol
IP
Internet Protocol

7. 7
HTTP in Context
Major steps in a "browser process"
Client Origin
server
HTML
http://origin/..http://origin/..
DNS
server
DNS query
Establish TCP connection
HTTP request
Optional parallel connections
HTTP response
HTTP
transaction

8. 8
Uniform Resource Locators (URLs)
Without a universal addressing mechanism, it would be
impossible to navigate to a site, and page linking would not
be feasible
Uniform Resource Locators (URLs) are used to identify
Web pages — basically a URL is a web address
URLs have 3 components:
A Prefix (usually http:// )
A Hostname: (such as www.cityu.edu.hk)
A Path: (such as /scm/index.htm)

9. 9
Uniform Resource Locators (URLs)
Example:
http://www.cityu.edu.hk/scm/index.htm
Prefix
The transfer protocol
required to request data
from the server
Host name
Identifies a particular
computer somewhere on
the Internet
Path
Identifies a file within a
hierarchical directory
structure on the server

10. 10
Uniform Resource Locators (URLs)
Example:
http://www.cityu.edu.hk/scm/index.htm
Prefix
The transfer protocol
required to request data
from the server
Host name
Identifies a particular
computer somewhere on
the Internet
Path
Identifies a file within a
hierarchical directory
structure on the server

11. 11
IP Addresses and DNS
Every computer connected to the Internet must
have a unique IP address, no matter whether it’s a
client or a server (or both)
An IP address is just a number that identifies a
host on the Internet. Example:
212.171.218.34 or 144.214.5.218
The Domain Name System (DNS) is a database
that matches IP addresses to host names

12. 12
Domain Names
And the Domain Name System (DNS) translates
host names into IP addresses, which are then
used by TCP to establish connections between
HTTP clients and servers.
Domain names are administered in such a way
that they are guaranteed to be unique.
Domain names are organised in a hierarchical
structure….
Internet Corporation for Assigned Names and Numbers (ICANN)
https://www.icann.org/

13. 13
Top Level Domains
www.cityu.edu.hk
www.cityu.hk
www.apple.com
Top Level
Domain (TLD)
Mostly country
domains:
.uk, .au, .hk, etc.
Generic Top Level
Domain (gTLD)
.com
.org
.net
.biz
.info
.name
.ws
.tv(.edu, .gov, .mil restricted to US only)

14. 14
Second Level Domains
www.cityu.edu.hk
www.cityu.hk
www.apple.com
The actual name of
the organisation or
service.
Can contain letters
(a to z),
numbers (0 to 9),
dashes ( - )

15. 15
Third Level, or Sub Domains
www.cityu.edu.hk
sweb.cityu.edu.hk
www.apple.com
store.apple.com
seminars.apple.com
Strings of characters
that designate
different services, or
hosts within the
second level domain.
E.G. “www” for the
core or main website,
“sweb” for SCM’s
sub-network within
CityU.

16. SM5312 week 5: web technology basics 16
http://www.cityu.edu.hk/scm/index.htm
Paths
Prefix
The transfer protocol
required to request data
from the server
Host name
Identifies a particular
computer somewhere on
the Internet
Path
Identifies a file within a
hierarchical directory
structure on the server

17. 17
Home Page Naming
For…
http://www.cityu.edu.hk
…there must be a default HTML page that is displaying as
the home page. In the case of CityU, it is…
http://www.cityu.edu.hk/index.html
…meaning index.html is the default HTML page in the root
directory of the server.

18. 18
Home Page Naming
Web servers will automatically serve up pages file-named
index.html
index.htm
default.htm
default.html
…as long as ONE page by those filenames resides in the
root directory of your site.
If you want to use a page by another name as the home
page of the site, you will have to configure the server
software to point to that page.

19. 19
Web Page Naming (HTML naming Conventions)
All lower-case, no spaces, no special characters
[other than dash ( - ) or underscore ( _ ) ].
products.html
Products.html
products_sept07.html
products sept/07.html
The same applies to the name of folders and sub-
folders within your site.
recommended
ok, but not recommended (esp. in XHTML)
recommended
not recommended

20. Technologies Overview
Client Side Technologies
HTML, CSS, JavaScript
XHTML, DHTML, AJAX, HTML5,FLASH
Server Side Technologies
ASP, PHP, Perl, JSP, Node JS
ASP.NET, Java,C++,C#
MySQL, SQL Server, Access

21. Technologies Overview
Some More Advanced Technologies
XML, XSLT, RSS, Atom
X-Path, XQuery, WSDL
XML-DOM, RDF
Ruby on Rails, GRAIL Framework
REST, SOAP

22. 22

23. 23

24. The publishing language used by the World Wide
Web is
HTML (from Hyper-text Markup Language).
Documents
Document = page = HTM file = topic
Content (text, images)
Tags (display commands)
HTML (Hyper-text Markup Language)

25. That’s how this…
<html>
<head><title>Welcome onboard</title></head>
<body bgcolor=“#f4f4f4">
<h1>Welcome</h1>
<img src=“dcetech.gif" width=“222" height=“80" alt=“DCETECH"
BORDER="0“ />
<h2>A Message from the Speaker </h2>
<p><font color=red>Good evening! Thank you for coming here!</font></p>
<p>Hello and welcome to Web technologies workshop! I'm <b>Ankit
Jain,</b>, 4th
year Computer Engg <a href=“http://dcetech.com"> Head
DCETECH.COM </a>. Dcetech is a student portal and only one of its kind in
India.It is not only a technical oriented site which caters only for
engineers but its for students from any background! Also students from any
educational institution can register and join Dcetech. </p>
. . .
</body>
</html>

26. Turns into this…

27. An HTML page is a tree of html elements
HTML Elements

28. Begin with a (<); end with a (>)
Most tags are paired into beginning and ending
tags; for
example,
<b>Hello</b> world
Hi <i>Ahmed</i> Ali
<hr><br>
<b><i>Hello</i></b> world
HTML Tags

29. Some HTML Tags example
START TAG END TAG
<HTML> </HTML>
<HEAD> </HEAD>
<TITLE> </TITLE>
<BODY> </BODY>
<H1>, <H2>, ... </H1>, </H2>, ...
<IMG ...> </IMG> (optional)
<A ...> </A>
<P> </P>
<BR/> (none; "empty" tag)
<OL> </OL>
<UL> </UL>
<LI> </LI>

30. Basic Structure of HTML document
Example of basic tag positioning
<html>
<head>
<title>Title bar text</title>
</head>
<body>
<p>Look, I'm a paragraph!</p>
</body>
</html>

31. <html>
<head>
<title> Introduction to web
development </title>
</head>
<body>
<p>Welcome to HTML!</p>
</body>
</html>
Basic Structure
Title tags
Body tags

32. 32
What Comes in the Head
Optional elements
<html>
<head>
<title>Title</title>
<base href="..."> Path for relative URLs
<script>...</script> Embedded script
program
<style>...</style> Cascading style sheet
<link...> File associations
<meta...> Document information
<meta Name=“P. Michiardi” Content=“Lecture 1”>
</head>
<body>
</body>
</html>

33. Meta tags are used to store information usually
relevant to browsers and search engines.
<META name="DESCRIPTION" content="AN HTML Tutorial">
<META name="KEYWORDS" content="html, webdesign, javascript">
<META name="GENERATOR" content="Frontpage 3.0">
<META name="AUTHOR" content="Bill Gates">
<META http-equiv="REFRESH" content="5; url=http://www.echoecho.com">
<META http-equiv=“expires" content=“Sun, 31 Jan 2005 17:35:00 GMT ">
Meta tag

34. <body bgcolor=“#FFFFFF” link="#C0C0C0" vlink="#808080"
alink="#FF0000“>
attributes of body section :
link
vlink
alink
Bgcolor
Background
Bgproperties fixed
Topmargin / leftmargin / bottommargin / rightmargin
Body Section

35. Text
Formatting
Resizing
Layout
Listing
Images
Inserting images (GIF and jpg)
Adding a link to an image
Links
To local pages
To pages at other sites
To bookmarks
Tags inside BODY SECTION
• Background
• Colors
• Images
• Fixed Images
• Tables
• Frames
• Forms

36. TEXT FORMAT
<b>text</b> writes text as bold
<i>text</i> writes text in italics
<u>text</u> writes underlined text
_text lowers text and makes it smaller
^text lifts text and makes it smaller
<blink>text</blink> guess yourself! (Note: Netscape only.)
<strike>text</strike> strikes a line through the text
<pre>text</pre> writes text exactly as it is, including spaces.
<strong>text<strong>
makes text bold

37. TEXT SIZE
These are the tags for changing the font size.
<big>text</big> increase the size by one
<small>text</small> decrease the size by one
<h1>text</h1> writes text in biggest heading
<h6>text</h6> writes text in smallest heading
<font
size="1">text</font>
writes text in smallest font size. (8 pt)
<font
size="7">text</font>
writes text in biggest font size (36 pt)

38. TEXT LAYOUT
<p>text</p>
Adds a paragraph break after the text.
(2 linebreaks).
<p align="left">text</p> Left justify text in paragraph.
<p align="center">text</p> Center text in paragraph.
<p align="right">text</p> Right justify text in paragraph.
text<br> Adds a single linebreak where the tag is.
<nobr>text</nobr>
Turns off automatic linebreaks
- even if text is wider than the window.
<center>text</center> Center text.
<div align="center">text</div> Center text.
<div align="left">text</div> Left justify text.
<div align="right">text</div> Right justify text.

39. Images types used in browsers are : GIF & JPG
<img src="http://www.haneen.com.eg/logo.gif">
<img src="logo.gif">
Resizing
<img src=“logo.gif" width="60" height="60">
HTML Images

40. SPACING AROUND
<img src="rainbow.gif" Hspace="30" Vspace="10">
ALIGNMENT OF IMAGES
You can align images according to the text around it
Default, left, right, top, texttop, middle, center
ALTERNATIVE TEXT
<img src=“logo.gif" alt="This is a text that goes with the
image">
HTML Images

41. Possible shapes for areas inside image are
<area shape=rect coords= x1,y1, x2,y2 Href="http://www.domain.com">
<area shape=circle coords= x1,y1, x2,y2 Href="http://www.domain.com">
<area shape=polygon coords= x1,y1, x2,y2, .., xn,yn
Href="http://www.domain.com">
Example
<img src="rainbow.gif" usemap = #example border=0>
<map name=example>
<area shape=Rect Coords=0,0,29,29 Href="http://www.yahoo.com">
<area shape=Rect Coords=30,30,59,59 Href="http://www.hotbot.com">
</map>
Image map

42. Click <a href="http://www.yahoo.com">here</a> to go to yahoo.
COLORS ON TEXT LINKS
<body link="#C0C0C0" vlink="#808080" alink="#FF0000">
LINK TARGETS
<a href="http://www.yahoo.com" target="_blank">
HTML Links

43. Image link
<a href="myfile.htm"><img src="rainbow.gif"></a>
<a href="myfile.htm"><img src="rainbow.gif" border="0"></a>
Link to email
<a href="mailto:youremailaddress">Email Me</a>
<a href="mailto:email@hotmail.com?subject=SweetWords">Send
Email</a>
<a href="mailto:email@hotmail.com?body=Please send me a copy of
your new program!">Send Email</a>
<a href="mailto:email@hotmail.com?subject=SweetWords
&body=Please send me a copy of your new program!">Email Me</a>
HTML Links

44. LINK WITHIN A PAGE
To link to an anchor you need to:
• Create a link pointing to the anchor
• Create the anchor itself.
1.<a name="chapter4"></a>
2.Click <a href="#chapter4">here</a> to read chapter 4.
When you link to anchors on external pages use this syntax
<a href="http://www.yahoo.com#YahoosAnchor">blabla</a>
HTML Links (cont.)

45. BULLETED LISTS
You have the following
bullet options:
disc
circle
square
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
<ul type="disc">
<ul type="circle">
<ul type="square">

46.  You have the following number options:
◦Plain numbers <ol>
◦Capital Letters <ol type="A">
◦Small Letters <ol type="a">
◦Capital Roman Numbers <ol type="I">
◦Small Roman Numbers <ol type="i">
<ol>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
<ol start="5">
NUMBERED LISTS

47. Client Side
Web Technologies
HTML & CSS
Lect. - 2

48. A web page, broken down
Web Browser
Content/Data UI Logic
Styling
Rules
Website

49. A web page, broken down
Web Browser
HTML JavascriptCSS
Website

50. HTML Tag Structure
<textarea rows="4" cols="30">
blah blah blah
</textarea>
Tag (Element) name
Attribute name
Attribute value
Tag contents

51. Hexadecimal Colors
#F62BB5

52. Hexadecimal Colors
R G B
#000000
00 = 0
FF = 255

53. Hexadecimal Colors
R G B
#000000
16^6 = 16,777,216 possible colors

54. HTML-FORMS

55. How form works ?
55

56. 56

57. HTML Forms
Used to send data back to the server to be processed.
<form></form>
Contains:
control elements that get data from the user
label elements
Attributes:
• action url of page where data is sent
• method GET/POST http request method

58. Form - controls
Controls must have name and value attributes to
be submitted.
Controls can be disabled using disabled attribute.
Each control has an initial value and a current
value.

59. Form- Control Types
Buttons:
To submit form:
• <input type=“submit” />
• <button type=“submit”></button>
To reset form:
• <input type=“reset” />
• <button type=“reset”></button>
Just a button with no default behavior
• <input type=“button” />
• <button type=“button”></button>

60. Checkboxes:
On/off switches
• More than one can share the same name to allow to select
several values
• Checked attribute is set to make initial value “on”
• <input type=“checkbox”/>
Form- Control Types

61. TextBox:
Single line text input
• <input type=“text”/>
Password: Similar to TextBox, but input text is rendered
as a series of asterisks or similar characters
But submitted as plain clear text
• <input type=“password” />
Form- Control Types

62. RadioButtons:
On/off switches but are mutually exclusive
More than one share the same name to create a
mutually exclusive group
Checked attribute is set to make initial value “on”
• <input type=“radio”/>
Form- Control Types

63. DropDown Lists/Menus:
To choose one/more from multiple options
• <select name=“……”></select>
To select multiple options use multiple attribute
• <select name=“……” multiple></select>
To define items use
• <option></option>
Option can have name, value and selected attributes
Form- Control Types

64. DropDown Lists/Menus:
To logically group options use optgroup
• <optgroup label=“…..”></optgroup>
• http://www.w3schools.com/tags/tryit.asp?
filename=tryhtml_optgroup
Label attribute is the value that appears in the list
Form- Control Types

65. File select:
Allow users to select files to be submitted to a form
• <input type=“file” />
Form- Control Types

66. Hidden controls:
Not rendered visually
Values are submitted with the other form data
Can help overcome stateless nature of HTTP
• <hidden name=“… ” value=“… ” />
Form- Control Types

67. Textarea controls:
Multiline text input
Value is the content nested in the control
• <textarea>Content </textarea>
• Has rows and cols attributes to set size of textarea.
Form- Control Types

68. Label
Specify a label for controls that don t have an implicit‟
label
For attribute MUST match ID value of the control
attached to it
Useful for speech synthesizers readers
• <label for=“fname”>First Name :</label>
Form- Control Types

69. Structuring Form
Use <fieldset> and <legend> to group related
controls and labels

70. Block vs. Inline Elements
Inline Block
No newlines before or after it Newlines appears before and after it.
Page flow is not broken
Has no width and height Can have a width and height
Takes as much width of the page as the
content
Takes the whole page width
Can contain only inline elements Can contain inline or block elements
Examples:<span>, <a>, <img >, <b>,
<em>,<input<
Examples:<p>, <div<

71. CSS coming up...

72. CSS
Cascade Style Sheets (CSS)

Cascading = styling rules "cascade“

From parent tags to child tags

Rules can override others
Style = style
Sheet = file

73. Basic CSS Structure
( tag name/class/id)
{
(rule);
(rule);
...
}

74. CSS Rules Syntax
Example
Body { background-color:blue;
color:white;
font-size:24pt;
property1: value1;
property2: value2;
}
p { property: value3; color:yellow;

75. Where to add CSS?
Inline style attribute
Applied to a single element
• <p style=“color : pink ; font-size : 30pt ;”
In <head> Applied to an entire single page
• <head>
<style> body{ font-family : arial ;
background-color : black ;
color : white ; }
p { color : pink ; }
</style>
</head>

76. In external sheet (.css)
Applied to any html file linked to it
• <head>
<link rel=“stylesheet” type=“text/css”
href=“style.css” />
</head>
Where to add CSS?

77. CSS Selectors
Simple Selectors
• element, class, ID
• Select by name of element (h1, p, div, span, …..etc. Example:
p { font-size:20pt; }
Group Selectors coma-separated list of selectors

78. Class Selector
Select an element by the class attributes defined
Class is an attribute of most html elements,
specifies one or more class names (space-
separated list)
Example: .maincontent /*select any element with
class=“maincontent” */
H1.headerTitle { font-size : 20pt; } /*select the all
h1 with class=“headerTitle” */
.x { color : red; }

79. ID Selector
Select an element by the ID attributes defined
ID is an attribute of all html elements, it must be
unique throughout a certain html page
Example: #maincontent /*select the element with
id=“maincontent” */ { font-size : 20pt; }
h1#headerTitle /*select the only h1 with
id=“headerTitle” */
#x { color : red; }

80. Attribute Selector
Select an element by the attributes defined in it
Example:
[href] /*select any element with attribute named href*/ {
font-size : 20pt ; }
h1[title] /*select any h1 element with title attribute
defined */ { color : red ; }
a[href =“ http: //www. Google .com”] /*select any a
element with href exactly equal http://www.google.com
*/ { color : blue ; }

81. Combinatory
This selectors specified by relation between
elements
Descendant
Direct Childof (>)
Adjacent Sibling (+)
General Sibling(~)
Examples:
• h1 strong {……..} /*strong descendant of h1 i.e. inside */
• div ol > li p{…….} /*p descendant of li which is a direct child of ol
which is a descendant of div*/
• span + p {……..} /*p that is a direct adjacent sibling to a span*/
• a~p{………} /*p that is sibling of a it may be adjacent or not*/

82. Colors
#-hexadecimal
rgb() and rgba()
hsl() and hsla()
To get full list of color keywords:
http://www.w3schools.com/colors/colors_picker.asp
http://www.colorcombos.com/

83. Units in CSS
pixel (px) absolute value
em: ratio of context size relative to surrounding
text
percentage: percentage of context size

84. CSS Text Formatting
color: name|#hex|rgb()|rgba()|hsl()|hsla();
/*foreground color*/
letter-spacing: normal|length (px,%,em);
line-height: normal|number|length|percentage;
text-align: left|right|center|justify;
text-decoration: none|underline|overline|line-
through|blink;

85. text-indent: length|percentage;
text-transform: capitalize|uppercase|lowercase|none;
text-shadow: rightpx bottompx blurpx color;
direction: ltr | rtl; text-indent: length|percentage;
text-transform: capitalize|uppercase|lowercase|none;
text-shadow: rightpx bottompx blurpx color;
direction: ltr | rtl;
CSS Text FormattingCSS Text Formatting

86. CSS Font
 font-family :list of fontnames to chose from
font-style: normal|italic|obliquefont-variant: normal|
small-caps
font: font-family font-size font-weight font-style
font-variant

87. @font-face {
font-family: 'YourFontName'; /*a name to be
used later*/
src: url('http://domain.com/fonts/font.ttf');
/*URL to font*/ }
Then, trivially, to use the font on a specific
element:
.classname { font-family: 'YourFontName'; }
https://fonts.google.com/
Use @font-face

88. Background formatting
background-attachment : scroll | fixed;
background-color : color;
background-image : none/url (path);
background-position : percent|length|
(top left right bottom center)
background-repeat : repeat | repeat-x|
|repeat-y|no-repeat
background-size : length|percentage|

89. Selection based on parts of elements Identified
by ::first-letter
::before
::after
::first-line
ex:
• p::after { content : ”this content is added after the p”
color:red;
}
PseudoElement Selector

90. Example
Selectors.html
Selectors.css
http://www.w3schools.com/cssref/css_selectors.asp

91. Pseudo Class Selector
Selection based on special effects, Identified by ”:”
Link:
• :visited, :target
User actions:
• :hover, :active, :focus
UI elements states:
• :enabled, :disabled, :checked
Structural :
• :first-child, :last-child, :nth-child(), :empty, :not()

92. Pseudo Class Selector (Cont. d)‟
Example:
a:hover { font-size:20pt; } /*applied when mouse hover
over any link */
a.red:hover { font-size:20pt; } /*applied when mouse
hover over link with class=“red” */
Input[type=“text”]:disabled { color:red; }
/*applied to any textbox which is disabled */

93. Visual Formatting and LayoutVisual Formatting and Layout

94. CSS layout and formatting
After parsing the html into a document tree (DOM)
Each node is rendered as one or more rectangular
boxes
Types of Boxes:
Block Boxes :
• For block elements ex. div, p
• Elements with display : block| list-item| table
Inline Boxes:
• For inline elements ex. span, b, em
• Elements with display : inline | inline-table | inline-block;

95. Block vs. Inline Elements
Inline Block
No newlines before or after it Newlines appears before and after it.
Page flow is not broken
Has no width and height Can have a width and height
Takes as much width of the page as the
content
Takes the whole page width
Can contain only inline elements Can contain inline or block elements
Examples:<span>, <a>, <img >, <b>,
<em>,<input<
Examples:<p>, <div<

96. The BOX Model
Applied to block level elements

97. Applies to block-level elements
Overall dimension of element =
Height/width + padding + border + margin
BOX Model
.box {
width:300px;
height:200px; padding:10px;
margin:15px;
border: 1px solid #000;
}

98. How to center a block?
Centered Text
HTML File
CSS File

99. Positioning
Positioning Schemes:
• Normal Flow (includes relative positioning)
• Floating
• Absolute Position
• Fixed

100. Position : Normal Flow
Elements rendered in order of normal flow

101. Position : Relative
At start works just like Normal Flow
To shift box, use :
• top: px, %, auto,inherit;
• bottom: px, %, auto,inherit;
• left: px, %, auto,inherit;
• right: px, %, auto,inherit;
• W.R.T for the flow, the element in its original position.
• When shifted a hole is left in it’s place.

102. Element is completely removed from document
flow
No effect on next elements
Can overlap other contents
Positioned w.r.t. containing block
To determine position, use :
• top, bottom, left and right
• width and height
Position : Absolute

103. Position : Fixed
Won’t move with scrolling, always fixed
Not supported by IE 6 or earlier
To determine position, use :
• top, bottom, left and right
• width and height

104. Position : Floating
float: none | left | right
Floated elements is shifted to one side
Taken out of the normal flow
Can’t float up or down.

105. Clearing
clear : both | left | right;
To force an element to start below any floated
element
Mainly used to make footer below all floated
column

106. Note
If position : absolute or floated and width:auto
Generated box shrink to dimension of content
Recommended to set width
If width:100%
don’t use margins, paddings or borders to avoid
overflowing or pushing elements wider than available
Recommended use width : auto and apply margin,
padding and border only

107. z-index
z-index : number
Is the positioning along the z-index
Larger z-index elements is rendered in front of lower z-
index elements
Can take –ve values

108. At-rules
Are instructions to the CSS parser
Example:
@import: For importing a css into another
<style>
@import url(‘ /css/mystyle.css’);
@media: Specifies one or more rules to be
applied on a certain media type
</style>

109. what are media types ?!!
Examples of Media Types:
All:
Suitable for all devices
• Braille
• Embossed
• Handheld (typically small screen, limited bandwidth)
• Print( viewed on screen in print preview mode)
• Screen

110. @import
Fully supported by FF, Safari, Opera, Chrome, IE 9+
Format :
• @import {URI | string} [media type,…….];
• To import one css into another
• Example: @import url(/css/screen.css)
• Screen
• @import “mobile.css”
• handheld
• Must precede all rule sets, if it follows one/more rule sets it is
ignored

111. @media
Fully supported by Opera 9.2+, Safary 3+, chrome 2+
Buggy support by IE 6+, FF1+
Format: @media media type,……{ ruleset }
To specify rules to be applied to specific media only

112. media query
CSS 3 extension to media types, limited support
A logical expression, evaluated to true/false, to
test whether device features to determine whether
to apply the css or no
Used in <link> tag, @import, @media at-rules
CSS is only applied if evaluated to true

113. <link rel=“stylesheet” type=“text/css”
href=“/style.css” media=“all />
all output media that are capable of color @media
handheld and (min-width:20em){…….}
Handheld devices with width at least 20em
http://reference.sitepoint.com/css/mediaqueries
Examples

114. ex
Html file

115. How to create a menu?
DEMO
HTML File
CSS File

116. References
http://reference.sitepoint.com/css
http://www.w3.org/TR/CSS21/
http://www.w3.org/TR/CSS2/
http://www.w3.org/TR/2011/NOTE-css-2010-
20110512/
https://developer.mozilla.org/en-US/docs/css
http://www.daaq.net/old/css/index.php?
page=using+css

117. References
http://www.w3.org/TR/html401/
http://www.w3.org/TR/CSS21/
http://www.w3.org/TR/CSS2/
https://developer.mozilla.org/en-US/docs/CSS
http://alistapart.com/articles/howtosizetextincss