HTML LCTR 3
Uploaded by
jeffrey mvungiHTML LCTR 3
Uploaded by
jeffrey mvungiHTML
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
• This example uses <header>, <nav>, <section>, and <footer>
to create a multiple column layout:
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>
• Warning: Creating layout with tables is not wrong, but it is not 11
recommended! Avoid tables for creating layout
HTML Responsive Web Design
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>
HTML iframe Tag
Tag Description
25
<iframe> Defines an inline frame
HTML JavaScript
JavaScript make HTML pages more dynamic and
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>
<noscript>Sorry, your browser does not support
28
JavaScript!</noscript>
Here are some examples of what JavaScript can do:
JavaScript can change HTML content:
• document.getElementById("demo").innerHTML = "Hello
JavaScript!";
JavaScript can change HTML styles:
• document.getElementById("demo").style.fontSize = "25px";
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
• To learn all about JavaScript, Join my JavaScript lecture or
visit : www.w3school.com!
The HTML <head> Element
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.
• The <html> element is the document root. It is the recommended place
for specifying the page language:
• <!DOCTYPE html>
<html lang="en-US">
• Declaring a language is important for accessibility applications (screen 32
readers) and search engines.
• Omitting <html> and <body> can crash badly-written DOM/XML software.
• Finally, omitting <body> can produce errors in older browsers (IE9).
Omitting <head>
• In the HTML5 standard, the <head> tag can also be omitted.
• By default, browsers will add all elements before <body>, to a
default <head> element.
• You can reduce the complexity of HTML, by omitting the
<head> tag:
Example
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">
Example of <meta> tags:
Example
• <meta name="description" content="Free Web
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
non-breaking space  
< less than < <
> greater than > >
& ampersand & &
MOHAMEDY HIT
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
© copyright © ©
® registered trademark ® ® 45
NOTE: Entity names are case sensitive.
Combining Diacritical Marks
• A diacritical mark is a "glyph" added to a letter.
• Some diacritical marks, like grave ( ̀) and acute ( ́) are
called accents.
• Diacritical marks can appear both above and below a
letter, inside a letter, and between two letters.
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:
Mark Character Construct Result
̀ a à à
́ a á á
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
∋ ∋ ∋ CONTAINS AS MEMBER
∏ ∏ ∏ N-ARY PRODUCT 51
∑ ∑ ∑ N-ARY SUMMATION
Some Greek Letters Supported by HTML
Char Number Entity Description
GREEK CAPITAL LETTER
Α Α Α
ALPHA
GREEK CAPITAL LETTER
Β Β Β
BETA
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
® ® ® REGISTERED SIGN
€ € € EURO SIGN
™ ™ ™ TRADEMARK
← ← ← LEFTWARDS ARROW
MOHAMEDY HIT
↑ ↑ ↑ UPWARDS ARROW
→ → → RIGHTWARDS ARROW
↓ ↓ ↓ DOWNWARDS ARROW
♠ ♠ ♠ BLACK SPADE SUIT
♣ ♣ ♣ BLACK CLUB SUIT
53
♥ ♥ ♥ BLACK HEART SUIT
♦ ♦ ♦ BLACK DIAMOND SUIT
HTML Encoding (Character Sets)
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
34 " " " " quotation 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
66 B B B B Latin capital letter B
67 C C C C Latin capital letter C
68 D D D D Latin capital letter D
59
69 E E E E Latin capital letter E
70 F F F F Latin capital letter F
71 G G G G Latin capital letter G
72 H H H H Latin capital letter H
73 I I I I Latin capital letter I
74 J J J J Latin capital letter J
MOHAMEDY HIT
75 K K K K Latin capital letter K
76 L L L L Latin capital letter L
77 M M M M Latin capital letter M
78 N N N N Latin capital letter N
60
79 O O O O Latin capital letter O
80 P P P P Latin capital letter P
81 Q Q Q Q Latin capital letter Q
82 R R R R Latin capital letter R
83 S S S S Latin capital letter S
84 T T T T Latin capital letter T
MOHAMEDY HIT
85 U U U U Latin capital letter U
86 V V V V Latin capital letter V
87 W W W W Latin capital letter W
88 X X X X Latin capital letter X
61
89 Y Y Y Y Latin capital letter Y
90 Z Z Z Z Latin capital letter Z
91 [ [ [ [ left square bracket
92 \ \ \ \ reverse solidus
93 ] ] ] ] right square bracket
MOHAMEDY HIT
94 ^ ^ ^ ^ circumflex accent
95 _ _ _ _ low line
96 ` ` ` ` grave accent
97 a a a a Latin small letter a
98 b b b b Latin small letter b
62
99 c c c c Latin small letter c
100 d d d d Latin small letter d
101 e e e e Latin small letter e
102 f f f f Latin small letter f
103 g g g g Latin small letter g
104 h h h h Latin small letter h
MOHAMEDY HIT
105 i i i i Latin small letter i
106 j j j j Latin small letter j
107 k k k k Latin small letter k
108 l l l l Latin small letter l
63
109 m m m m Latin small letter m
110 n n n n Latin small letter n
111 o o o o Latin small letter o
112 p p p p Latin small letter p
113 q q q q Latin small letter q
MOHAMEDY HIT
114 r r r r Latin small letter r
115 s s s s Latin small letter s
116 t t t t Latin small letter t
117 u u u u Latin small letter u
118 v v v v Latin small letter v 64
119 w w w w Latin small letter w
120 x x x x Latin small letter x
121 y y y y Latin small letter y
122 z z z z Latin small letter z
MOHAMEDY HIT
123 { { { { left curly bracket
124 | | | | vertical line
125 } } } } right curly bracket
126 ~ ~ ~ ~ tilde
127 DEL
128 € euro sign 65
129 • • • NOT USED
130 ‚ single low-9 quotation mark
131 ƒ Latin small letter f with hook
132 „ double low-9 quotation mark
133 … horizontal ellipsis
134 † dagger
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
146 ’ right single quotation mark
147 “ left double quotation mark
right double quotation 67
148 ”
mark
149 • bullet
150 – en dash
151 — em dash
152 ˜ small tilde
153 ™ trade mark sign
Latin small letter s with
154 š
caron
MOHAMEDY HIT
single right-pointing angle
155 ›
quotation mark
156 œ Latin small ligature oe
157 • • • NOT USED
Latin small letter z with
158 ž
caron
68
Latin capital letter Y with
159 Ÿ
diaeresis
160 no-break space
inverted exclamation
161 ¡ ¡ ¡
mark
162 ¢ ¢ ¢ cent sign
163 £ £ £ pound sign
MOHAMEDY HIT
164 ¤ ¤ ¤ currency sign
165 ¥ ¥ ¥ yen sign
166 ¦ ¦ ¦ broken bar
167 § § § section sign
168 ¨ ¨ ¨ diaeresis
69
169 © © © copyright sign
170 ª ª ª feminine ordinal indicator
left-pointing double angle
171 « « « quotation mark
172 ¬ ¬ ¬ not sign
173 soft hyphen
MOHAMEDY HIT
174 ® ® ® registered sign
175 ¯ ¯ ¯ macron
176 ° ° ° degree sign
177 ± ± ± plus-minus sign
178 ² ² ² superscript two
70
179 ³ ³ ³ superscript three
180 ´ ´ ´ acute accent
181 µ µ µ micro sign
182 ¶ ¶ ¶ pilcrow sign
183 · · · middle dot
184 ¸ ¸ ¸ cedilla
185 ¹ ¹ ¹ superscript one
MOHAMEDY HIT
186 º º º masculine ordinal indicator
right-pointing double angle
187 » » »
quotation mark
188 ¼ ¼ ¼ vulgar fraction one quarter
71
189 ½ ½ ½ vulgar fraction one half
190 ¾ ¾ ¾ vulgar fraction three quarters
191 ¿ ¿ ¿ inverted question mark
Latin capital letter A with
192 À À À
grave
Latin capital letter A with
193 Á Á Á
acute
Latin capital letter A with
194 Â Â Â
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
201 É É É Latin capital letter E with acute
Latin capital letter E with
202 Ê Ê Ê
circumflex
Latin capital letter E with
203 Ë Ë Ë
diaeresis
MOHAMEDY HIT
204 Ì Ì Ì Latin capital letter I with grave
205 Í Í Í Latin capital letter I with acute
Latin capital letter I with
206 Î Î Î
circumflex
Latin capital letter I with
207 Ï Ï Ï
diaeresis
73
208 Ð Ð Ð Latin capital letter Eth
209 Ñ Ñ Ñ Latin capital letter N with tilde
210 Ò Ò Ò Latin capital letter O with grave
211 Ó Ó Ó Latin capital letter O with acute
Latin capital letter O with
212 Ô Ô Ô
circumflex
213 Õ Õ Õ Latin capital letter O with tilde
Latin capital letter O with
MOHAMEDY HIT
214 Ö Ö Ö
diaeresis
215 × × × multiplication sign
Latin capital letter O with
216 Ø Ø Ø
stroke
217 Ù Ù Ù Latin capital letter U with grave
218 Ú Ú Ú Latin capital letter U with acute 74
Latin capital letter U with
219 Û Û Û
circumflex
220 Ü Ü Ü Latin capital letter U with diaeresis
221 Ý Ý Ý Latin capital letter Y with acute
222 Þ Þ Þ Latin capital letter Thorn
223 ß ß ß Latin small letter sharp s
224 à à à Latin small letter a with grave
MOHAMEDY HIT
225 á á á Latin small letter a with acute
226 â â â Latin small letter a with circumflex
227 ã ã ã Latin small letter a with tilde
228 ä ä ä Latin small letter a with diaeresis 75
229 å å å Latin small letter a with ring above
230 æ æ æ Latin small letter ae
231 ç ç ç Latin small letter c with cedilla
232 è è è Latin small letter e with grave
233 é é é Latin small letter e with acute
Latin small letter e with
234 ê ê ê
circumflex
MOHAMEDY HIT
Latin small letter e with
235 ë ë ë
diaeresis
236 ì ì ì Latin small letter i with grave
237 í í í Latin small letter i with acute
Latin small letter i with
238 î î î 76
circumflex
239 ï ï ï Latin small letter i with diaeresis
240 ð ð ð Latin small letter eth
241 ñ ñ ñ Latin small letter n with tilde
242 ò ò ò Latin small letter o with grave
243 ó ó ó Latin small letter o with acute
244 ô ô ô Latin small letter o with circumflex
MOHAMEDY HIT
245 õ õ õ Latin small letter o with tilde
246 ö ö ö Latin small letter o with diaeresis
247 ÷ ÷ ÷ division sign
248 ø ø ø Latin small letter o with stroke
77
249 ù ù ù Latin small letter u with grave
Latin small letter u with
250 ú ú ú
acute
Latin small letter with
251 û û û
circumflex
Latin small letter u with
252 ü ü ü
diaeresis
MOHAMEDY HIT
Latin small letter y with
253 ý ý ý
acute
254 þ þ þ Latin small letter thorn
Latin small letter y with
255 ÿ ÿ ÿ 78
diaeresis
The ASCII Character Set
• ASCII uses the values from 0 to 31 (and 127) for control
characters.
• ASCII uses the values from 32 to 126 for letters, digits,
and symbols.
• ASCII does not use the values from 128 to 255.
MOHAMEDY HIT
79
The ANSI Character Set (Windows-1252)
• ANSI is identical to ASCII for the values from 0 to 127.
• ANSI has a proprietary set of characters for the values from
128 to 159.
• ANSI is identical to UTF-8 for the values from 160 to 255.
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
NOTE: Password protected sites might use https and/or a
username and password like:
https://username:[email protected]/html/ 85
default.asp
Common URL Schemes
• The table below lists some common schemes:
Scheme Short for Used for
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.
Character From Windows-1252 From UTF-8
€ %80 %E2%82%AC
£ %A3 %C2%A3
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
• For a complete reference of all URL encodings, visit w3shool.com
HTML and XHTML
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
• In HTML, some elements can be improperly nested
within each other, like this:
• <b><i>This text is bold and italic</b></i>
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
You might also like
- Big Data Analytics in Oil and Gas Industry - An Emerging Trend100% (1)Big Data Analytics in Oil and Gas Industry - An Emerging Trend8 pages
- Apayao WEb Base Faculty Evaluation System PDFNo ratings yetApayao WEb Base Faculty Evaluation System PDF14 pages
- Rainwater Harvesting Made Easy A Beginners Guide To Build and Maintain Your Own Sustainable Clean Water System For Your Urban... (Perennial Publishing) (Z-Library)100% (1)Rainwater Harvesting Made Easy A Beginners Guide To Build and Maintain Your Own Sustainable Clean Water System For Your Urban... (Perennial Publishing) (Z-Library)121 pages
- BRAHMASTRA ब्रह्मास्त्र (web developement)No ratings yetBRAHMASTRA ब्रह्मास्त्र (web developement)6 pages
- Web Technology - 39072812 - 2025 - 01 - 23 - 16 - 04No ratings yetWeb Technology - 39072812 - 2025 - 01 - 23 - 16 - 0435 pages
- HTML Layouts, Fonts, Styles, Head and MetaNo ratings yetHTML Layouts, Fonts, Styles, Head and Meta19 pages
- C) Write HTML Code For Creating A Table. Also Explain Table Element With Its AttributesNo ratings yetC) Write HTML Code For Creating A Table. Also Explain Table Element With Its Attributes11 pages
- HTML Basic Document: HTML Quick List From W3SchoolsNo ratings yetHTML Basic Document: HTML Quick List From W3Schools13 pages
- Unit IV Advanced Web and Multimedia DesignNo ratings yetUnit IV Advanced Web and Multimedia Design50 pages
- M. Sc. Mathematics With Computer ScienceNo ratings yetM. Sc. Mathematics With Computer Science95 pages
- Designing Rainwater Harvesting Systems Integrating Rainwater Into Building Systems (Celeste Allen Novak) (Z-Library)No ratings yetDesigning Rainwater Harvesting Systems Integrating Rainwater Into Building Systems (Celeste Allen Novak) (Z-Library)304 pages
- OpenCart Theme and Module Development - Sample ChapterNo ratings yetOpenCart Theme and Module Development - Sample Chapter20 pages
- Network Fundamentals - Chapter 4 Exam AnswersNo ratings yetNetwork Fundamentals - Chapter 4 Exam Answers4 pages
- Ebook Tutorial Gimp Bahasa Indonesia: Click Here To Get FileNo ratings yetEbook Tutorial Gimp Bahasa Indonesia: Click Here To Get File3 pages
- Case Study Analysis: Effects of Instruction On The Misconceptions About Programming in BasicNo ratings yetCase Study Analysis: Effects of Instruction On The Misconceptions About Programming in Basic29 pages
- Evaluating The Computational Efficiency and Precision of Pathfinding AlgorithmsNo ratings yetEvaluating The Computational Efficiency and Precision of Pathfinding Algorithms8 pages
- Mission Report Rundugai Tanzania 20091221 FinalNo ratings yetMission Report Rundugai Tanzania 20091221 Final18 pages
- Rain Water Harvesting Systems For Domestic and Agricultural UsesNo ratings yetRain Water Harvesting Systems For Domestic and Agricultural Uses3 pages
- Fact Sheet Resource Efficient Landscapes and IrrigationNo ratings yetFact Sheet Resource Efficient Landscapes and Irrigation4 pages
- The Role of Change Management in Successful Information Management SolutionsNo ratings yetThe Role of Change Management in Successful Information Management Solutions10 pages
