HTML LCTR 3
HTML LCTR 3
Lecture
~MOHAMEDY HIT
MOHAMEDY HIT
HTML Layouts
2
HTML Layouts
• Websites often display content in multiple columns (like a
magazine or newspaper).
MOHAMEDY HIT
3
HTML Layout Using <div> Elements
• The <div> element is often used as a layout tool, because it can easily be positioned with CSS.
• This example uses four <div> elements to create a multiple column layout:
Example
• <body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
MOHAMEDY HIT
Tokyo
</div>
<div id="section">
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div id="footer">
Copyright © W3Schools.com
</div>
4
</body>
The CSS:
• <style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
MOHAMEDY HIT
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center; 5
padding:5px;
}
</style>
Website Layout Using HTML5
• HTML5 offers new semantic elements that define different
parts of a web page:
MOHAMEDY HIT
6
• <header> - Defines a header for a document or a section
• <nav> - Defines a container for navigation links
• <section> - Defines a section in a document
• <article> - Defines an independent self-contained article
• <aside> - Defines content aside from the content (like a
sidebar)
• <footer> - Defines a footer for a document or a section
• <details> - Defines additional details
MOHAMEDY HIT
• <summary> - Defines a heading for the <details> element
7
Example
• <body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo
</nav>
<section>
MOHAMEDY HIT
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the
United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two
millennia,
its history going back to its founding by the Romans, who named it
Londinium.</p>
</section>
<footer>
8
Copyright © W3Schools.com
</footer>
</body>
• The CSS:
• <style>
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
MOHAMEDY HIT
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
} 9
</style>
HTML Layout Using Tables
• The <table> element was not designed to be a layout tool.
The purpose of the <table> element is to display tabular data.
• Layout can be achieved using the <table> element, because table
elements can be styled with CSS:
• Example
• <body>
MOHAMEDY HIT
<table class="lamp">
<tr>
<th>
<img src="/images/lamp.jpg" alt="Note"
style="height:32px;width:32px">
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
</table> 10
</body>
The CSS:
• <style>
table.lamp {
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th, td {
padding:10px;
MOHAMEDY HIT
}
table.lamp th {
width:40px;
}
</style>
MOHAMEDY HIT
Your web page should look good, and be easy to use, regardless
of the device.
12
What is Responsive Web Design?
• Responsive Web Design makes your web page look good on all
devices (desktops, tablets, and phones).
• Responsive Web Design is about using CSS and HTML to resize,
hide, shrink, enlarge, or move the content to make it look
good on any screen:
MOHAMEDY HIT
13
Create Your Own Responsive Design
• One way to create a responsive design, is to create it yourself:
Example
• <!DOCTYPE html>
<html lang="en-us">
<head>
<style>
MOHAMEDY HIT
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head> 14
<body>
<h1>Responsive Web Design Demo</h1>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million
MOHAMEDY HIT
inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population
centers in Europe, 15
with more than 12 million inhabitants.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the
world.</p>
</div>
MOHAMEDY HIT
</body>
</html>
16
Using W3.CSS
• Another way to create a responsive design, is to use a
responsive style sheet, like W3.CSS
• W3.CSS makes it easy to develop sites that look nice at any
size; desktop, laptop, tablet, or phone:
MOHAMEDY HIT
17
Example
• <!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container w3-orange">
MOHAMEDY HIT
<h1>W3.CSS Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom, 18
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers
in Europe,
with more than 12 million inhabitants.</p>
</div>
<div class="w3-third">
MOHAMEDY HIT
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the
world.</p>
</div>
</div> 19
</body>
</html>
HTML Iframes
MOHAMEDY HIT
20
HTML Iframes
• An iframe is used to display a web page within a web page.
MOHAMEDY HIT
21
Iframe Syntax
The syntax for adding an iframe is:
<iframe src="URL"></iframe>
The src attribute specifies the URL (web
MOHAMEDY HIT
address) of the iframe page.
22
Iframe - Set Height and Width
• Use the height and width attributes to specify
the size.
• The attribute values are specified in pixels by
default, but they can also be in percent (like
MOHAMEDY HIT
"80%").
Example
• <iframe src="demo_iframe.htm" width="200"
height="200"></iframe>
23
Iframe - Remove the Border
• By default, an iframe has a black border around
it.
• To remove the border, add the style attribute
and use the CSS border property:
Example
MOHAMEDY HIT
• <iframe src="demo_iframe.htm"
style="border:none"></iframe>
With CSS, you can also change the size, style and
color of the iframe's border:
Example
• <iframe src="demo_iframe.htm" 24
style="border:5px dotted red"></iframe>
Use iframe as a Target for a Link
• An iframe can be used as the target frame for a link.
• The target attribute of the link must refer to the name
attribute of the iframe:
Example
• <iframe src="demo_iframe.htm"
MOHAMEDY HIT
name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com"
target="iframe_a">W3Schools.com</a></p>
MOHAMEDY HIT
.
interactive
26
The HTML <script> Tag
• The <script> tag is used to define a script (JavaScript).
• The <script> element either contains scripting
statements or it points to an external script file through
the src attribute.
• Common uses for JavaScript are image manipulation,
MOHAMEDY HIT
form validation, and dynamic changes of content.
• The script below writes Hello JavaScript! into an HTML
element with id="demo":
Example
• <script>
document.getElementById("demo").innerHTML =
"Hello JavaScript!"; 27
</script>
The HTML <noscript> Tag
• The <noscript> tag is used to provide an alternate content for
users that have disabled scripts in their browser or have a
browser that doesn't support client-side scripting.
• The <noscript> element can contain all the elements that you
can find inside the <body> element of a normal HTML page.
• The content inside the <noscript> element will only be displayed
if scripts are not supported, or are disabled in the user's browser:
MOHAMEDY HIT
Example
• <script>
document.getElementById("demo").innerHTML = "Hello
JavaScript!";
</script>
MOHAMEDY HIT
JavaScript can change HTML attributes:
• document.getElementById("image").src = "picture.gif";
HTML Script Tags
Tag Description
<script> Defines a client-side script
Defines an alternate content for users
<noscript>
that do not support client-side scripts 29
MOHAMEDY HIT
30
The HTML <head> Element
• The <head> element is a container for metadata
(data about data).
• HTML metadata is data about the HTML
document. Metadata is not displayed.
MOHAMEDY HIT
• Metadata typically define document title, styles,
links, scripts, and other meta information.
• The following tags describe metadata: <title>,
<style>, <meta>, <link>, <script>, and <base>.
31
Omitting <html> and <body>?
• In the HTML5 standard, the <html> tag, the <body> tag, and the <head>
tag can be omitted.
• The following code will validate as HTML5:
Example
• <!DOCTYPE html>
<title>Page Title</title>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
MOHAMEDY HIT
Note: W3Schools does not recommend omitting the <html> and <body>
tags.
MOHAMEDY HIT
• <!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body> 33
</html>
The HTML <title> Element
• The <title> element defines the title of the document.
• The <title> element is required in all HTML/XHTML
documents.
• The <title> element:
• defines a title in the browser tab
• provides a title for the page when it is added to favorites
• displays a title for the page in search engine results
MOHAMEDY HIT
• A simplified HTML document:
Example
• <!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
The content of the document......
</body>
34
</html>
The HTML <style> Element
• The <style> element is used to define style information
for an HTML document.
• Inside the <style> element you specify how HTML
elements should render in a browser:
Example
MOHAMEDY HIT
• <style>
body {background-color:yellow;}
p {color:blue;}
</style>
35
The HTML <link> Element
• The <link> element defines the page relationship to an
external resource.
• The <link> element is most often used to link to style
sheets:
MOHAMEDY HIT
Example
• <link rel="stylesheet" href="mystyle.css">
36
The HTML <meta> Element
• The <meta> element is used to specify page description,
keywords, author, and other metadata.
• Metadata is used by browsers (how to display content), by
search engines (keywords), and other web services.
• Define keywords for search engines:
• <meta name="keywords" content="HTML, CSS, XML,
MOHAMEDY HIT
XHTML, JavaScript">
• Define a description of your web page:
• <meta name="description" content="Free Web
tutorials on HTML and CSS">
• Define the character set used:
• <meta charset="UTF-8">
• Define the author of a page: 37
• <meta name="author" content="Hege Refsnes">
• Refresh document every 30 seconds:
• <meta http-equiv="refresh" content="30">
MOHAMEDY HIT
tutorials">
<meta name="keywords"
content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
<meta charset="UTF-8">
38
The HTML <script> Element
• The <script> element is used to define client-side
JavaScripts.
• The script below writes Hello JavaScript! into an HTML
element with id="demo":
Example
MOHAMEDY HIT
• <script>
function myFunction {
document.getElementById("demo").innerHTML =
"Hello JavaScript!";
}
</script>
39
The HTML <base> Element
• The <base> element specifies the base URL and base
target for all relative URLs in a page:
Example
• <base href="http://www.w3schools.com/images/"
MOHAMEDY HIT
target="_blank">
40
HTML head Elements
Tag Description
<head> Defines information about the document
<title> Defines the title of a document
Defines a default address or a default target
MOHAMEDY HIT
<base>
for all links on a page
Defines the relationship between a
<link>
document and an external resource
Defines metadata about an HTML
<meta>
document
<script> Defines a client-side script
41
<style> Defines style information for a document
HTML Entities
Reserved characters in HTML must be replaced with character entities.
MOHAMEDY HIT
Characters, not present on your keyboard, can also be replaced by entities.
42
HTML Entities
• Some characters are reserved in HTML.
• If you use the less than (<) or greater than (>) signs in
your text, the browser might mix them with tags.
• Character entities are used to display reserved characters
in HTML.
MOHAMEDY HIT
• A character entity looks like this:
&entity_name; OR
&#entity_number;
• To display a less than sign we must write: < or <
NOTE: The advantage of using an entity name,
instead of a number, is that the name is easier to
remember. 43
The disadvantage is that browsers may not support all
entity names, but the support for numbers is good.
Non-breaking Space
• A common character entity used in HTML is the non-breaking
space:
• A non-breaking space is a space that will not break into a new
line.
• Two words separated by a non-breaking space will stick
together at the end of a line. This is handy when breaking the
words might be disruptive.
• Examples:
MOHAMEDY HIT
� 10
10 m/s
10 km/h
10 PM
• Another common use of the non-breaking space is to prevent
that browsers truncate spaces in HTML pages.
• If you write 10 spaces in your text, the browser will remove 9
of them. To add real spaces to your text, you can use the 44
character entity.
• NOTE: The non-breaking hyphen (‑) lets you use
a hyphen character that won't break.
Some Other Useful HTML Character Entities
Result Description Entity Name Entity Number
MOHAMEDY HIT
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
© copyright © ©
MOHAMEDY HIT
• Diacritical marks can be used in combination with
alphanumeric characters, to produce a character that is
not present in the character set (encoding) used in the
page.
46
• Here are some examples:
MOHAMEDY HIT
̂ a â â
̃ a ã ã
̀ O Ò Ò
́ O Ó Ó
̂ O Ô Ô 47
̃ O Õ Õ
MOHAMEDY HIT
HTML Symbols
48
HTML Symbol Entities
• HTML entities were described in the previous chapter.
• Many mathematical, technical, and currency symbols,
are not present on a normal keyboard.
• To add these symbols to an HTML page, you can use an
MOHAMEDY HIT
HTML entity name.
• If no entity name exists, you can use an entity number; a
decimal (or hexadecimal) reference.
• NOTE: If you use an HTML entity name or a
hexadecimal number, the character will always display
correctly.
This is independent of what character set (encoding) 49
your page uses
Example
<p>I will display €</p>
<p>I will display €</p>
<p>I will display €</p>
MOHAMEDY HIT
Will display as:
I will display €
I will display €
I will display €
50
Some Mathematical Symbols
Supported by HTML
Char Number Entity Description
∀ ∀ ∀ FOR ALL
∂ ∂ ∂ PARTIAL DIFFERENTIAL
∃ ∃ ∃ THERE EXISTS
MOHAMEDY HIT
∅ ∅ ∅ EMPTY SETS
∇ ∇ ∇ NABLA
∈ ∈ ∈ ELEMENT OF
∉ ∉ ∉ NOT AN ELEMENT OF
MOHAMEDY HIT
GREEK CAPITAL LETTER
Γ Γ Γ
GAMMA
GREEK CAPITAL LETTER
Δ Δ Δ
DELTA
GREEK CAPITAL LETTER
Ε Ε Ε
EPSILON
52
GREEK CAPITAL LETTER
Ζ Ζ Ζ
ZETA
Some Other Entities Supported by HTML
Char Number Entity Description
© © © COPYRIGHT SIGN
MOHAMEDY HIT
↑ ↑ ↑ UPWARDS ARROW
MOHAMEDY HIT
To display an HTML page correctly, a web browser must know
.
the character set (character encoding) to use
54
What is Character Encoding?
• ASCII was the first character encoding standard (also called
character set). It defines 127 different alphanumeric
characters that could be used on the internet.
• ASCII supported numbers (0-9), English letters (A-Z), and some
special characters like ! $ + - ( ) @ < > .
MOHAMEDY HIT
• ANSI (Windows-1252) was the original Windows character set.
It supported 256 different character codes.
• ISO-8859-1 was the default character set for HTML 4. It also
supported 256 different character codes.
• Because ANSI and ISO were limited, the default character
encoding was changed to UTF-8 in HTML5.
• UTF-8 (Unicode) covers almost all of the characters and
symbols in the world. 55
• NOTE: All HTML 4 processors also support UTF-8.
The HTML charset Attribute
• The following table displays the differences
between the character sets described above:
Numb ASCII ANSI 8859 UTF-8 Description
32 space
MOHAMEDY HIT
33 ! ! ! ! exclamation mark
35 # # # # number sign
36 $ $ $ $ dollar sign
37 % % % % percent sign 56
38 & & & & ampersand
39 ' ' ' ' apostrophe
40 ( ( ( ( left parenthesis
41 ) ) ) ) right parenthesis
42 * * * * asterisk
43 + + + + plus sign
MOHAMEDY HIT
44 , , , , comma
45 - - - - hyphen-minus
46 . . . . full stop
47 / / / / solidus
48 0 0 0 0 digit zero 57
49 1 1 1 1 digit one
50 2 2 2 2 digit two
51 3 3 3 3 digit three
52 4 4 4 4 digit four
53 5 5 5 5 digit five
MOHAMEDY HIT
54 6 6 6 6 digit six
55 7 7 7 7 digit seven
56 8 8 8 8 digit eight
57 9 9 9 9 digit nine
58 : : : : colon 58
59 ; ; ; ; semicolon
60 < < < < less-than sign
61 = = = = equals sign
62 > > > > greater-than sign
63 ? ? ? ? question mark
64 @ @ @ @ commercial at
MOHAMEDY HIT
65 A A A A Latin capital letter A
MOHAMEDY HIT
75 K K K K Latin capital letter K
MOHAMEDY HIT
85 U U U U Latin capital letter U
92 \ \ \ \ reverse solidus
MOHAMEDY HIT
94 ^ ^ ^ ^ circumflex accent
95 _ _ _ _ low line
96 ` ` ` ` grave accent
MOHAMEDY HIT
105 i i i i Latin small letter i
MOHAMEDY HIT
114 r r r r Latin small letter r
MOHAMEDY HIT
123 { { { { left curly bracket
126 ~ ~ ~ ~ tilde
127 DEL
128 € euro sign 65
MOHAMEDY HIT
135 ‡ double dagger
modifier letter circumflex
136 ˆ
accent
137 ‰ per mille sign
Latin capital letter S with
138 Š
caron
single left-pointing angle 66
139 ‹
quotation mark
140 Œ Latin capital ligature OE
141 • • • NOT USED
Latin capital letter Z with
142 Ž
caron
143 • • • NOT USED
144 • • • NOT USED
MOHAMEDY HIT
145 ‘ left single quotation mark
MOHAMEDY HIT
single right-pointing angle
155 ›
quotation mark
inverted exclamation
161 ¡ ¡ ¡
mark
MOHAMEDY HIT
164 ¤ ¤ ¤ currency sign
165 ¥ ¥ ¥ yen sign
166 ¦ ¦ ¦ broken bar
168 ¨ ¨ ¨ diaeresis
69
169 © © © copyright sign
170 ª ª ª feminine ordinal indicator
MOHAMEDY HIT
174 ® ® ® registered sign
175 ¯ ¯ ¯ macron
MOHAMEDY HIT
186 º º º masculine ordinal indicator
MOHAMEDY HIT
circumflex
195 Ã Ã Ã Latin capital letter A with tilde
Latin capital letter A with
196 Ä Ä Ä
diaeresis
Latin capital letter A with ring
197 Å Å Å
above
198 Æ Æ Æ Latin capital letter AE 72
Latin capital letter C with
199 Ç Ç Ç
cedilla
200 È È È Latin capital letter E with grave
MOHAMEDY HIT
204 Ì Ì Ì Latin capital letter I with grave
MOHAMEDY HIT
214 Ö Ö Ö
diaeresis
215 × × × multiplication sign
Latin capital letter O with
216 Ø Ø Ø
stroke
217 Ù Ù Ù Latin capital letter U with grave
MOHAMEDY HIT
225 á á á Latin small letter a with acute
MOHAMEDY HIT
Latin small letter e with
235 ë ë ë
diaeresis
MOHAMEDY HIT
245 õ õ õ Latin small letter o with tilde
MOHAMEDY HIT
Latin small letter y with
253 ý ý ý
acute
MOHAMEDY HIT
79
The ANSI Character Set (Windows-1252)
MOHAMEDY HIT
80
The ISO-8859-1 Character Set
• 8859-1 is identical to ASCII for the values from 0 to 127.
• 8859-1 does not use the values from 128 to 159.
• 8859-1 is identical to UTF-8 for the values from 160 to 255.
MOHAMEDY HIT
81
The UTF-8 Character Set
• UTF-8 is identical to ASCII for the values from 0 to 127.
• UTF-8 does not use the values from 128 to 159.
• UTF-8 is identical to both ANSI and 8859-1 for the values from
160 to 255.
MOHAMEDY HIT
• UTF-8 continues from the value 256 with more than 10 000
different characters.
82
HTML Uniform Resource Locators
A URL is another word for a web address.
A URL can be composed of words (w3schools.com), or an Internet Protocol
MOHAMEDY HIT
(IP) address (192.68.20.50).
Most people enter the name when surfing, because names are easier to
remember than numbers.
83
URL - Uniform Resource Locator
URL - Uniform Resource Locator
• Web browsers request pages from web servers by using a
URL.
• When you click on a link in an HTML page, an underlying
<a> tag points to an address on the web.
MOHAMEDY HIT
• A Uniform Resource Locator (URL) is used to address a
document (or other data) on the web.
• A web address, like
http://www.w3schools.com/html/default.asp follows
these syntax rules:
scheme://prefix.domain:port/path/filename
84
Explanation:
• scheme - defines the type of Internet service (most
common is http)
• prefix - defines a domain prefix (default for http is www)
• domain - defines the Internet domain name
(w3schools.com)
• port - defines the port number at the host (default for
MOHAMEDY HIT
http is 80)
• path - defines a path at the server (If omitted: the root
directory of the site)
• filename - defines the name of a document or resource
MOHAMEDY HIT
HyperText Transfer Common web pages. Not
http
Protocol encrypted
Secure HyperText
https Secure web pages. Encrypted
Transfer Protocol
86
ftp File Transfer Protocol Downloading or uploading files
file A file on your computer
URL Encoding
• URLs can only be sent over the Internet using the ASCII
character-set. If a URL contains characters outside the ASCII
set, the URL has to be converted.
• URL encoding converts non-ASCII characters into a format that
can be transmitted over the Internet.
MOHAMEDY HIT
• URL encoding replaces non-ASCII characters with a "%"
followed by hexadecimal digits.
• URLs cannot contain spaces. URL encoding normally replaces a
space with a plus (+) sign, or %20.
87
ASCII Encoding Examples
• Your browser will encode input, according to the character-set used
in your page.
• The default character-set in HTML5 is UTF-8.
MOHAMEDY HIT
© %A9 %C2%A9
® %AE %C2%AE
À %C0 %C3%80
Á %C1 %C3%81
 %C2 %C3%82
à %C3 %C3%83
Ä %C4 %C3%84
Å %C5 %C3%85 88
MOHAMEDY HIT
XHTML is HTML written as XML.
89
What Is XHTML?
XHTML stands for EXtensible HyperText Markup
Language
XHTML is almost identical to HTML
XHTML is stricter than HTML
MOHAMEDY HIT
XHTML is HTML defined as an XML application
XHTML is supported by all major browsers
90
Why XHTML?
• Many pages on the internet contain "bad" HTML.
• This HTML code works fine in most browsers (even if it does not
follow the HTML rules):
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
MOHAMEDY HIT
<p>This is a paragraph
</body>
• Today's market consists of different browser technologies. Some
browsers run on computers, and some browsers run on mobile
phones or other small devices. Smaller devices often lack the
resources or power to interpret "bad" markup.
• XML is a markup language where documents must be marked up
correctly (be "well-formed").
• By combining the strengths of HTML and XML, XHTML was
developed. 91
• XHTML is HTML redesigned as XML.
The Most Important Differences from HTML:
• Document Structure
• XHTML DOCTYPE is mandatory
• The xmlns attribute in <html> is mandatory
• <html>, <head>, <title>, and <body> are mandatory
• XHTML Elements
• XHTML elements must be properly nested
MOHAMEDY HIT
• XHTML elements must always be closed
• XHTML elements must be in lowercase
• XHTML documents must have one root element
• XHTML Attributes
• Attribute names must be in lower case
• Attribute values must be quoted 92
• Attribute minimization is forbidden
<!DOCTYPE ....> Is Mandatory
• An XHTML document must have an XHTML DOCTYPE declaration.
• The <html>, <head>, <title>, and <body> elements must also be
present, and the xmlns attribute in <html> must specify the xml
namespace for the document.
• This example shows an XHTML document with a minimum of
required tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
MOHAMEDY HIT
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
some content
</body> 93
</html>
XHTML Elements Must Be Properly Nested
MOHAMEDY HIT
• In XHTML, all elements must be properly nested within
each other, like this:
• <b><i>This text is bold and italic</i></b>
94
XHTML Elements Must Always Be Closed
• This is wrong:
<p>This is a paragraph
<p>This is another paragraph
• This is correct:
MOHAMEDY HIT
<p>This is a paragraph</p>
<p>This is another paragraph</p>
95
Empty Elements Must Also Be Closed
• This is wrong:
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
MOHAMEDY HIT
• This is correct:
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />
96
XHTML Elements Must Be In Lower Case
• This is wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
MOHAMEDY HIT
• This is correct:
<body>
<p>This is a paragraph</p>
</body>
97
XHTML Attribute Names Must Be In Lower Case
• This is wrong:
<table WIDTH="100%">
• This is correct:
<table width="100%">
MOHAMEDY HIT
98
Attribute Values Must Be Quoted
• This is wrong:
<table width=100%>
• This is correct:
<table width="100%">
MOHAMEDY HIT
99
Attribute Minimization Is Forbidden
• Wrong:
<input type="checkbox" name="vehicle" value="car"
checked />
• Correct:
MOHAMEDY HIT
<input type="checkbox" name="vehicle" value="car"
checked="checked" />
• Wrong:
<input type="text" name="lastname" disabled />
• Correct:
<input type="text" name="lastname" disabled="disabled" 100
/>
How to Convert from HTML to XHTML
Add an XHTML <!DOCTYPE> to the first line of every page
Add an xmlns attribute to the html element of every
page
Change all element names to lowercase
MOHAMEDY HIT
Close all empty elements
Change all attribute names to lowercase
Quote all attribute values
101
MOHAMEDY HIT
102