Topics: HTML (Hypertext Markup Language)

Chapter 2
HTML
(Hypertext Markup Language)
Part I
Topics
• Introduction
• Editing HTML
• First HTML Example
• Headers
• Linking
• Images
• Unordered Lists
• Nested and Ordered Lists
• Tables
• References
Introduction
• The World-Wide Web used three new
technologies:
– HTML (HyperText Markup Language) used to write
Web pages.
– HTTP (HyperText Transfer Protocol) to transmit those
pages.
– A Web browser client program to receive the data,
interpret it, and display the results.
• HyperText Markup Language
– HTML is not a “Programming Language”
– A markup language
– Separation of the presentation of a document from the
structure of the document’s information
– Based on Technology of the World Wide Web
Consortium (W3C)
1
Introduction
• HTML documents can contain:

- flashy elements: graphics, animations,
video clips, audio sounds, and even
interactive games
• HTML isn't just for Web pages anymore

- create corporate intranets
- flashy e-mail
- news postings
- user interfaces for applications: web forms
Editing HTML
• HTML documents
• Source-code form
• Text editor (e.g. Notepad, Wordpad)
• .html or .htm file-name extension
• Web server
– Apache, Internet Information Services (IIS)
– Stores HTML documents
• Web browser
– Requests HTML documents
Differences between HTML and XHTML
• XHTML Elements Must Be Properly Nested

Improperly nested:
This text is bold and italic
Properly nested:
This text is bold and italic
• XHTML Elements Must Always Be Closed

This is wrong:
This is a paragraph
This is another paragraph
This is correct:
This is a paragraph
This is another paragraph
2
• Empty Elements Must Also Be Closed

This is wrong:
A break: 
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
This is correct:
A break: 
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />
• XHTML Elements Must Be In Lower Case

This is wrong:
<BODY>
This is a paragraph
</BODY>
This is correct:
<body>
This is a paragraph
</body>
First HTML Example
• HTML Structure
– Comments 
– <html> element
• <head> element
– Head section
» Title of the document (<title> tag)
» Style sheets (<link> tag) and scripts (<script> tag), …
• <body> element
– Body section
» Page’s content the browser displays
– Start tag
• attributes (provide additional information about an element)
– name and value (separated by an equal sign)
– End tag
3
First HTML Example

<html>
<head>
<title> Our first document </title>
</head>
<body>
Greetings from your Webmaster!
</body>
</html>
BODY Element Tags and Attributes
• Attributes provide additional information

about HTML elements. There are many
attributes that you can explore later by
yourselves.
• Now, let us explore some of the attributes
that relate to <BODY element.
4
BODY Element Tags and Attributes
<body text="#000000"
bgcolor="#FFFFFF" link="#0000EF"
vlink="#51188E" alink="#FF0000"
background="clouds.gif">
– BGCOLOR="white" - Designates the page background color.

– TEXT="black" - Designates the color of the page's text.
– LINK="blue" - Designates the color of links that have not been
visited.
– ALINK="red" - Designates the color of the link currently being
visited.
– VLINK="green" - Designates the color of visited links.
Color
• Color can be specify in 3 ways:

– Standard colors (blue, red, black, white)
– Hexadecimal (#FFFFFF, #99FF66)
– Decimal (255,255,255 or 0,0,0)
• Example of web color chart:

http://html-color-codes.com/rgb.html
Headers
• Six headers ( header elements)

– h1 through h6
<html>
<head> <TITLE>Headers</TITLE> </head>
<body>
<H1>Level 1 Header</H1>
</body>
</html>
5
Linking
• Hyperlink
– References other sources such as HTML documents
and images
– Both text and images can act as hyperlinks
a> (anchor) element
– Created using the <a
• Attribute href
– Specifies the location of a linked resource
• Link to e-mail addresses using mailto: URL
1 <?xml version = "1.0"?>

"1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 
-->
6 
-->
7
8 <html xmlns
xmlns = "http://www.w3.org/1999/xhtml">
"http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet
<title>Internet and WWW How to Program - Links</title>
Links</title>
11 </head>
12
13 <body>
14
15 <h1>Here
<h1>Here are my favorite sites</h1>
sites</h1>
16
17 Click
Click a name to go to that page.
page.
18
19 
-->
20 <a href = "http://www.deitel.com">
"http://www.deitel.com">Deitel</a>
Deitel</a>
21
22 <a href = "http://www.prenhall.com">
"http://www.prenhall.com">Prentice Hall</a>
Hall</a>
23
24 <a href = "http://www.yahoo.com">
"http://www.yahoo.com">Yahoo!</a>
Yahoo!</a>
25
6
26 <a href = "http://www.usatoday.com">
"http://www.usatoday.com">USA Today</a>
Today</a>
27
28 </body>
29 </html>

"1.0"?>
4
5 
-->
6 
-->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml"
ttp://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet
<title>Internet and WWW How to Program - Contact Page</title>
Page</title>
11 </head>
12
13 <body>
14
15 
16 My email address is
17 <a href = "mailto:[email protected]"
"mailto:[email protected]">
[email protected]">
18 [email protected]
19 </a>
20 . Click the address and your browser will
21 open an e-
e-mail message and address it to me.
22 
23 </body>
24 </html>
7
Images
• Three most popular formats

– Graphics Interchange Format (GIF)
– Joint Photographic Experts Group (JPEG)
– Portable Network Graphics (PNG)
– img element
• src attribute
– Specifies the location of the image file
• width and height
• br element
– Line break

"1.0"?>
4
5 
-->
6 
-->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet
<title>Internet and WWW How to Program - Welcome</title>
Welcome</title>
11 </head>
12
13 <body>
14
15 
16 <img src = "xmlhtp.jpg" height = "238" width = "183"
17 alt = "XML How to Program book cover" />
18 <img src = "jhtp.jpg" height = "238" width = "183"
19 alt = "Java How to Program book cover" />
20 
21 </body>
22 </html>
8
"1.0"?>
4
5 
-->
6 
-->
7
9 <head>
10 <title>Internet
<title>Internet and WWW How to Program - Navigation Bar
11 </title>
12 </head>
13
14 <body>
15
16 
17 <a href = "links.html">
"links.html">
18 <img src = "buttons/links.jpg" width = "65"
19 height = "50" alt = "Links Page" />
20 </a> 
21
22 <a href = "list.html">
"list.html">
23 <img src = "buttons/list.jpg" width = "65"
24 height = "50" alt = "List Example Page" />
25 </a> 
26
27 <a href = "contact.html">
"contact.html">
28 <img src = "buttons/contact.jpg" width = "65"
29 height = "50" alt = "Contact Page" />
30 </a> 
31
32 <a href = "header.html">
"header.html">
33 <img src = "buttons/header.jpg" width = "65"
34 height = "50" alt = "Header Page" />
35 </a> 
36
37 <a href = "table1.html">
"table1.html">
38 <img src = "buttons/table.jpg" width = "65"
39 height = "50" alt = "Table Page" />
40 </a> 
41
42 <a href = "form.html">
"form.html">
43 <img src = "buttons/form.jpg" width = "65"
44 height = "50" alt = "Feedback Form" />
45 </a> 
46 
47
48 </body>
49 </html>
9
Basic Text Formatting
• Blockquotes
– Content of <blockquote>
– To set a block of text off from the normal flow
and appearance of text
– Or, using a simple word, <blockquote>
indents the text as though it were a quote.


Quoted from The Star, July 2009: 

<blockquote>
Water as a resource has been one of the main drivers behind the rapid
industry development and good standard of living. In a rapidly changing
world, there are now challenges of conserving what we have and
overcoming the problems of water too contaminated to consume.
</blockquote>
-------OUTPUT-------
Quoted from The Star, July 2009:
Water as a resource has been one of the main drivers behind

the rapid industry development and good standard of living.
In a rapidly changing world, there are now challenges of
conserving what we have and overcoming the problems of
water too contaminated to consume.
• Font Styles and Sizes (can be nested)
– .. - Sets bold text.

– <big>..</big> - Sets larger than normal text.
– .. - Sets text in italics and denotes emphasis.
– .. - Sets text in italics.
– .. - Makes text smaller than normal.
– <strike>..</strike> - Draws a line through the text as a "strikeout".
– .. - Same as bold but denotes strong emphasis.
– .. -Superscript
– .. -Subscript
– <tt>..</tt> - Monospaced typewriter font.
– .. - Underlined text.
– <var>..</var> - Mark a variable.
10
This is an example of the tag . 
This is an example of the <big><big> tag</big>. 
This is an example of the tag 
This is an example of the tag. 
This is an example of the tag. 
This is an example of the <strike><strike> tag</strike>. 
This is an example of the tag. 
This is an example of the tag. 
This is an example of the tag. 
This is an example of the <tt><tt> tag<tt>. 
This is an example of the tag 
This is an example of the <var><var> tag</var> 
• Note:
– < – to display <
– > – to display >
• Subscripts with 

• Superscripts with 
• Examples:
x23
• Displays x23
• Horizontal rules <hr /> draws a line
across the display, after a line break.
11
Unordered Lists
• Unordered list element ul

– Creates a list in which each item begins with a
bullet symbol (called a disc)
– li (list item)
• Entry in an unordered list

"1.0"?>
4
5 
-->
6 
-->
7
9 <head>
10 <title>Internet
<title>Internet and WWW How to Program - Links</title>
Links</title>
11 </head>
12
13 <body>
14
15 <h1>Here
<h1>Here are my favorite sites</h1>
sites</h1>
16
17 
Click
Click on a name to go to that page.
page.
18
19 
-->
20 <ul>
21
22 
-->
23 <li><a href = "http://www.deitel.com">
"http://www.deitel.com">Deitel</a></li>
Deitel</a></li>
24
25 <li><a href = "http://www.w3.org">
"http://www.w3.org">W3C</a></li>
W3C</a></li>
26
27 <li><a href = "http://www.yahoo.com">
"http://www.yahoo.com">Yahoo!</a></li>
Yahoo!</a></li>
28
29 <li><a href = "http://www.cnn.com">
"http://www.cnn.com">CNN</a></li>
CNN</a></li>
30 </ul>
31 </body>
32 </html>
12
Nested and Ordered Lists
• Represent hierarchical relationships

• Ordered lists (ol)
– Creates a list in which each item begins with a
number

"1.0"?>
4
5 
-->
6 
-->
7
9 <head>
10 <title>Internet
<title>Internet and WWW How to Program - Lists</title>
Lists</title>
11 </head>
12
13 <body>
14
15 <h1>The
<h1>The Best Features of the Internet</h1>
Internet</h1>
16
17 
-->
18 <ul>
19 <li>You
<li>You can meet new people from countries around
20 the world.</li>
world.</li>
21 <li>
22 You have access to new media as it becomes public:
23
24 
-->
25 
-->
26 
-->
27 <ul>
28 <li>New
<li>New games
games</li>
29 <li>
30 New applications
31
32 
-->
33 <ol>
34 <li>For
<li>For business
business</li>
35 <li>For
<li>For pleasure</li>
pleasure</li>
36 </ol>
37 </li>
38
39 <li>Around
<li>Around the clock news</li>
news</li>
40 <li>Search
<li>Search engines</li
engines</li>
</li>
41 <li>Shopping
<li>Shopping</li>
Shopping</li>
42 <li>
43 Programming
44
45 
-->
46 <ol>
47 <li>XML
<li>XML</li>
XML</li>
48 <li>Java
<li>Java</li>
Java</li>
13
49 <li>XHTML
<li>XHTML</li>
XHTML</li>
50 <li>Scripts
<li>Scripts</li>
Scripts</li>
51 <li>New
<li>New languages</li>
languages</li>
52 </ol>
53
54 </li>
55
56 </ul> 
-->
57 </li>
58
59 <li>Links
<li>Links</li>
Links</li>
60 <li>Keeping
<li>Keeping in touch with old friends</li>
friends</li>
61 <li>It
<li>It is the technology of the future!</li>
future!</li>
62
63 </ul> 
-->
64
65 </body>
66 </html>
Table
• A table is a matrix of rows and columns,

each possibly having content
• Each position in a table is called a cell
• Some cells have labels, but most have
data
• A table is specified as the content of a
<table> tag
• A border attribute in the <table> tag
specifies a border between the cells
14
Table
• If border is set to "border", the browser’s

default width border is used
• The border attribute can be set to a
number, which will be the border width
• Without the border attribute, the table will
have no lines!
• Tables are given titles with the <caption>
tag, which can immediately follow <table>
Table
• Each row of a table is specified as the

content of a <tr> tag
• The row headings are specified as the
content of a <th> tag
• The contents of a data cell is specified as
the content of a <td> tag
Table
<table border = "border"> <tr>
<caption> Fruit Juice Drinks <th> Lunch </th>
</caption> <td> 1 </td>
<tr> <td> 0 </td>
<th> </th> <td> 0 </td>
<th> Apple </th> </tr>
<th> Orange </th> <tr>
<th> Screwdriver </th> <th> Dinner </th>
</tr> <td> 0 </td>
<tr> <td> 0 </td>
<th> Breakfast </th> <td> 1 </td>
<td> 0 </td> </tr>
<td> 1 </td>
<td> 0 </td> </table>
</tr>
15
Table
• A table can have two levels of column

labels
• If so, the colspan attribute must be set in
the <th> tag to specify that the label must
span some number of columns
Table
<tr>
<th colspan = "3"> Fruit Juice Drinks
</th>
</tr>
<tr>
<th> Orange </th>
<th> Apple </th>
<th> Screwdriver </th>
</tr>
Table
• If the rows have labels and there is a

spanning column label, the upper left
corner must be made larger, using
rowspan
16
Table
<table border = "border">
<caption> Fruit Juice Drinks
</caption>
<tr>
<td rowspan = "2"> </td>
<th colspan = "3"> Fruit Juice Drinks </th>
</tr>
<tr>
<th> Apple </th>
<th> Orange </th>
<th> Screwdriver </th>
</tr>
…
</table>
References
• Programming The WWW Third Edition

Robert W. Sebesta
Pearson Prentice Hall
ISBN 0-321-31257-0
• http://www.comptechdoc.org/independent/web/html/inde
x.html
• http://www.w3schools.com/XHTML/xhtml_html.asp
17

Topics: HTML (Hypertext Markup Language)

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Topics: HTML (Hypertext Markup Language)

Uploaded by

Copyright:

Available Formats

Chapter 2

• HTML documents can contain:

• HTML isn't just for Web pages anymore

Differences between HTML and XHTML

• XHTML Elements Must Be Properly Nested

• XHTML Elements Must Always Be Closed

• Empty Elements Must Also Be Closed

Differences between HTML and XHTML

• XHTML Elements Must Be In Lower Case

First HTML Example

<!-- An example to illustrate document form

BODY Element Tags and Attributes

• Attributes provide additional information

– BGCOLOR="white" - Designates the page background color.

• Color can be specify in 3 ways:

• Example of web color chart:

• Six headers ( header elements)

1 <?xml version = "1.0"?>

1 <?xml version = "1.0"?>

• Three most popular formats

1 <?xml version = "1.0"?>

Basic Text Formatting

Water as a resource has been one of the main drivers behind

Basic Text Formatting

• Font Styles and Sizes (can be nested)

– <b>..</b> - Sets bold text.

This is an example of the <b>&#60;b&#62; tag </b>.<br>

This is an example of the <big>&#60;big&#62; tag</big>.<br>

This is an example of the <em>&#60;em&#62; tag</em><br>

This is an example of the <i>&#60;i&#62; tag</i>.<br>

This is an example of the <small>&#60;small&#62; tag</small>.<br>

This is an example of the <strike>&#60;strike&#62; tag</strike>.<br>

This is an example of the <strong>&#60;strong&#62; tag<strong>.<br>

This is an example of the <sup>&#60;sup&#62; tag<sup>.<br>

This is an example of the <sub>&#60;sub&#62; tag<sub>.<br>

This is an example of the <tt>&#60;tt&#62; tag<tt>.<br>

This is an example of the <u>&#60;u&#62; tag</u><br>

This is an example of the <var>&#60;var&#62; tag</var><br>

Basic Text Formatting

Basic Text Formatting

• Subscripts with <sub>

• Unordered list element ul

1 <?xml version = "1.0"?>

• Represent hierarchical relationships

1 <?xml version = "1.0"?>

• A table is a matrix of rows and columns,

• If border is set to "border", the browser’s

• Each row of a table is specified as the

• A table can have two levels of column

• If the rows have labels and there is a

• Programming The WWW Third Edition

You might also like

This is an example of the <b><b> tag </b>.<br>

This is an example of the <big><big> tag</big>.<br>

This is an example of the <em><em> tag</em><br>

This is an example of the <i><i> tag</i>.<br>

This is an example of the <small><small> tag</small>.<br>

This is an example of the <strike><strike> tag</strike>.<br>

This is an example of the <strong><strong> tag<strong>.<br>

This is an example of the <sup><sup> tag<sup>.<br>

This is an example of the <sub><sub> tag<sub>.<br>

This is an example of the <tt><tt> tag<tt>.<br>

This is an example of the <u><u> tag</u><br>

This is an example of the <var><var> tag</var><br>