0% found this document useful (0 votes)
8 views102 pages

HTML LCTR 3

The document provides an overview of HTML layouts, including the use of <div> elements, semantic HTML5 elements, and tables for creating multiple column layouts. It also discusses responsive web design techniques, the use of iframes, and JavaScript integration within HTML. Additionally, it covers the <head> element and various metadata tags essential for web development.

Uploaded by

jeffrey mvungi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
8 views102 pages

HTML LCTR 3

The document provides an overview of HTML layouts, including the use of <div> elements, semantic HTML5 elements, and tables for creating multiple column layouts. It also discusses responsive web design techniques, the use of iframes, and JavaScript integration within HTML. Additionally, it covers the <head> element and various metadata tags essential for web development.

Uploaded by

jeffrey mvungi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 102

HTML

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: &lt; or &#60;
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: &nbsp;
• 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
&nbsp; character entity.
• NOTE: The non-breaking hyphen (&#8209;) 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 &nbsp; &#160;

< less than &lt; &#60;


> greater than &gt; &#62;
& ampersand &amp; &#38;

MOHAMEDY HIT
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
© copyright &copy; &#169;

® registered trademark &reg; &#174; 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&#768; à
́ a a&#769; á

MOHAMEDY HIT
̂ a a&#770; â
̃ a a&#771; ã
̀ O O&#768; Ò
́ O O&#769; Ó
̂ O O&#770; Ô 47
̃ O O&#771; Õ
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 &euro;</p>
<p>I will display &#8364;</p>
<p>I will display &#x20AC;</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
∀ &#8704; &forall; FOR ALL
∂ &#8706; &part; PARTIAL DIFFERENTIAL
∃ &#8707; &exist; THERE EXISTS

MOHAMEDY HIT
∅ &#8709; &empty; EMPTY SETS
∇ &#8711; &nabla; NABLA
∈ &#8712; &isin; ELEMENT OF
∉ &#8713; &notin; NOT AN ELEMENT OF

∋ &#8715; &ni; CONTAINS AS MEMBER


∏ &#8719; &prod; N-ARY PRODUCT 51

∑ &#8721; &sum; N-ARY SUMMATION


Some Greek Letters Supported by HTML
Char Number Entity Description
GREEK CAPITAL LETTER
Α &#913; &Alpha;
ALPHA
GREEK CAPITAL LETTER
Β &#914; &Beta;
BETA

MOHAMEDY HIT
GREEK CAPITAL LETTER
Γ &#915; &Gamma;
GAMMA
GREEK CAPITAL LETTER
Δ &#916; &Delta;
DELTA
GREEK CAPITAL LETTER
Ε &#917; &Epsilon;
EPSILON
52
GREEK CAPITAL LETTER
Ζ &#918; &Zeta;
ZETA
Some Other Entities Supported by HTML
Char Number Entity Description
© &#169; &copy; COPYRIGHT SIGN

® &#174; &reg; REGISTERED SIGN


€ &#8364; &euro; EURO SIGN
™ &#8482; &trade; TRADEMARK
← &#8592; &larr; LEFTWARDS ARROW

MOHAMEDY HIT
↑ &#8593; &uarr; UPWARDS ARROW

→ &#8594; &rarr; RIGHTWARDS ARROW

↓ &#8595; &darr; DOWNWARDS ARROW


♠ &#9824; &spades; BLACK SPADE SUIT
♣ &#9827; &clubs; BLACK CLUB SUIT
53
♥ &#9829; &hearts; BLACK HEART SUIT

♦ &#9830; &diams; 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