Introduction to HTML
Outline
Introduction
Editing HTML
First HTML Example
W3C HTML Validation Service
Headers
Linking
Images
Special Characters and More Line Breaks
Unordered Lists
Nested and Ordered Lists
Web Resources
1
Objectives
In this chapter, you will learn:
To understand important components of HTML
documents.
To use HTML to create Web pages.
To be able to add images to Web pages.
To understand how to create and use hyperlinks to
navigate Web pages.
To be able to mark up lists of information.
2
1 Introduction
HTML = HyperText Markup Language
A markup language
Separation of the presentation of a document from the
structure of the document’s information
Technology of the World Wide Web Consortium (W3C)
3
2 Editing HTML
HTML documents are in source-code form
It can be edited by using a text editor (e.g. Notepad,
Wordpad, emacs, etc. EditPlus text editor is included
in IPositif CD)
.html or .htm file-name extension
Web server: Stores HTML documents
Web browser: Requests HTML documents
4
3 First HTML Example
HTML Comments: start with <!-- and end with -->
html element: <html>
head element: <head>
Head section of HTML document
Title of the document
Style sheets and scripts
body element: <body>
Body section of HTML document
Page’s content the browser displays
Start tag
End tag
5
<!-- Fig. 4.1: [Link] -->
Comments <!-- Our first Web page -->
<html>
<head>
Head section Start tag
</head>
<body>
Body section end tag
</body>
</html>
6
Example1: First HTML example: [Link]
<!-- Fig. 4.1: [Link] -->
<!-- Our first Web page -->
<html>
<head>
<title>Internet and WWW How to Program - Welcome</title>
</head>
<body>
<p>Welcome to XHTML!</p>
</body>
</html>
7
5 HTML Header Elements
Six headers ( header elements): h1 through h6
<body>
<h1>Level 1 Header</h1>
<h2>Level 2 header</h2>
<h3>Level 3 header</h3>
<h4>Level 4 header</h4>
<h5>Level 5 header</h5>
<h6>Level 6 header</h6>
</body>
Example2: Headers elements h1 trough h6: [Link] 8
6 Linking
Linking is done through Hyperlink
References other sources such as HTML documents and images
Both text and images can act as hyperlinks
Created using the a (anchor) element
Attribute href: specifies the location of a linked resource
Link to e-mail addresses using mailto: URL
<strong> tag is use to create a bold text
9
Example3: Linking to other Web pages: [Link]
<body>
<p><a href = "[Link]
<p><a href = "[Link] Hall</a></p>
<p><a href = "[Link]
<p><a href = "[Link] Today</a></p>
</body>
User click
10
Example 4: Linking to an e-mail address: [Link]
<p>
My e-mail address is
<a href = "[Link] deitel@[Link]</a>
. Click the address and your browser will
open an e-mail message and address it to me.
</p>
Email Client Application
11
7 Images
Three most popular formats
Graphics Interchange Format (GIF)
Joint Photographic Experts Group (JPEG)
Portable Network Graphics (PNG)
Image element: <img />
src attribute: specifies the location of the image file
width and height attribute: measure in pixels
(picture elements)
Empty elements
Terminated by character / inside the closing right angle bracket
(>), or by explicitly including the end tag
12
Example 5: Images in XHTML files: [Link]
<p>
<img src = "[Link]" height = "238" width = "183"
alt = "XML How to Program book cover" />
<img src = "[Link]" height = "238" width = "183"
alt = "Java How to Program book cover" />
</p>
Image [Link] not
available
13
Example 6: Images as link in anchors: [Link]
<a href = "[Link]">
<img src = "buttons/[Link]" width = "65"
height = "50" alt = "Links Page" />
</a><br />
<a href = "[Link]">
<img src = "buttons/[Link]" width = "65"
height = "50" alt = "List Example Page" />
</a><br />
.
.
.
.
[Link]
14
8 Special Characters and More Line Breaks
Character entity references (in the form &code;)
Numeric character references (e.g. &)
del: Strike-out text
sup: superscript text
sub: subscript text
<hr />: Horizontal rule (horizontal line)
15
Example 7: Special characters in HTML: [Link]
<hr /> <!-- inserts a horizontal rule -->
<p>All information on this site is <strong>©</strong>
Deitel <strong>&</strong> Associates, Inc. 2004.</p>
<p><del>You may download 3.14 x 10<sup>2</sup> characters worth of
information from this site.</del> Only <sub>one</sub> download per hour is
permitted.</p>
<p>Note: <strong>< ¼</strong> of the information presented here is
updated daily.</p>.
16
9 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
17
Example 8: Unordered lists in HTML: [Link]
<ul>
<li><a href = "[Link] add four list items
<li><a href = "[Link]
<li><a href = "[Link]
<li><a href = "[Link]
</ul>
18
10 Nested and Ordered Lists
Represent hierarchical relationships
Ordered lists: ol
Creates a list in which each item begins with a number
19
<ul>
Example 9: Nested and ordered lists in HTML: [Link]
<li>New games</li>
<li>New applications nested ordered list
<ol>
<li>For business</li> Another nested ordered list
<li>For pleasure</li>
</ol>
</li>
<li>Around the clock news</li>
<li>Search engines</li>
<li>Shopping</li>
<li>Programming
<ol>
<li>XML</li>
<li>Java</li>
<li>XHTML</li>
<li>Scripts</li>
<li>New languages</li>
</ol>
20
</li>
11 Web Resources
[Link]/TR/xhtml11
[Link]
[Link]/xhtml/[Link]
[Link]
[Link]/webmonkey/00/50/[Link]
[Link]/Authoring/Languages/XML/XHTML
[Link]/TR/2001/REC-xhtml11-20010531
21
