Introduction to HTML
Outline
3.1
3.2
3.3
3.4
3.5
3.6
3.7
3.8
3.9
3.10
3.11
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
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
3.1 Introduction
HTML = HyperText Markup Language
Separation of the presentation of a document from the
structure of the documents information
HTML documents are in source-code form
It can be edited by using a text editor (e.g. Notepad,
Wordpad, emacs, Note++ etc.
It coule be in .html or .htm file-name extension
Web server vs Web browser:
Web server: Stores HTML documents
Web browser: Requests HTML documents
3.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
Pages content the browser displays
Start tag
End tag
4
Comments
<!-- Fig. 4.1: main.html -->
<!-- Our first Web page -->
<html>
<head>
Head section
Start tag
</head>
<body>
end tag
Body section
</body>
</html>
<!-- Fig. 4.1: main.html -->
<!-- Our first Web page -->
<html>
<head>
<title>Internet and WWW How to Program - Welcome</title>
</head>
<body>
<p>Welcome to XHTML!</p>
</body>
</html>
Example of creating your first html file:
(a)
(b)
Make sure you have text editor
Copy the codes in the example 1 and paste it in the text editor
Save the file. Select File -> Save As. At the file name, type name.html
Click the file name.html from the directory where you saved the file.
You will see the browser page similar like the one in previous slide
3.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>
3.6 Linking
Linking is done through Hyperlink
Created using the a (anchor) element
References other sources such as HTML documents and images
Both text and images can act as hyperlinks
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
<body>
<p><a href = "http://www.deitel.com">Deitel</a></p>
<p><a href = "http://www.prenhall.com">Prentice Hall</a></p>
<p><a href = "http://www.yahoo.com">Yahoo!</a></p>
<p><a href = "http://www.usatoday.com">USA Today</a></p>
</body>
User click
10
<p>
My e-mail address is
<a href = "mailto:[email protected]"> [email protected]</a>
. Click the address and your browser will
open an e-mail message and address it to me.
</p>
Email Client Application
11
3.7 Images
Three most popular formats
Image element: <img />
Graphics Interchange Format (GIF)
Joint Photographic Experts Group (JPEG)
Portable Network Graphics (PNG)
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
<p>
<img src = "xmlhtp.jpg" height = "238" width = "183"
alt = "XML How to Program book cover" />
<img src = "jhtp.jpg" height = "238" width = "183"
alt = "Java How to Program book cover" />
</p>
Image jhtp.jpg not
available
13
If the pictures are in the same directory
If the pictures are in the subdirectory
List the ../ for the pointer to go upper level
Ex. src = ../pics/Penguins.jpg
Or you could specify the entire directory path,
starting from the root path
List the sub-directory, then followed by the image
name
Ex. src = pics/Koala.jpg
If the pictures are in the parents directory
Just list the image name
Ex. src = Koala.jpg
In windows, Ex. src =
"C:/Users/Chuang/Documents/Tina CCU Classes/Fall
2014/Webpage
Design/Week2/Course1/pics/Tulips.jpg"
Be aware that in Linux, / needs to change to \
<a href = "links.html">
<img src = "buttons/links.jpg" width = "65"
height = "50" alt = "Links Page" />
</a><br />
<a href = "list.html">
<img src = "buttons/list.jpg" width = "65"
height = "50" alt = "List Example Page" />
</a><br />
.
.
.
.
links.html
15
Ends here on 09/25/2014
16
The target attribute
The target attribute specifies where to open the
linked document
Ex. <a href="http://www.yahoo.com/" target="_blank">Yahoo!</a>
Target Value
Description
_blank
Opens the linked document in a new window or tab
_self
Opens the linked document in the same frame (default)
_parents
Opens the linked document in the parent frame
framename
Opens the linked document in a named frame
17
3.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)
18
<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>.
19
Insert special character tables
Please see
http://www.htmlgoodies.com/beyond/webmas
ter/article.php/3917601/Website-CodingASCII-Special-Characters.htm for more info.
20
3.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
21
<ul>
<li><a href = "http://www.deitel.com">Deitel</a></li>
<li><a href = "http://www.w3.org">W3C</a></li>
<li><a href = "http://www.yahoo.com">Yahoo!</a></li>
<li><a href = "http://www.cnn.com">CNN</a></li>
</ul>
add four list items
22
3.10 Nested and Ordered Lists
Represent hierarchical relationships
Ordered lists: ol
Creates a list in which each item begins with a number
23
<ul>
<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>
</li>
</ul>
24
