Scribd
Upload
121 views

HTML I PDF

The document provides an introduction to HTML and outlines topics that will be covered in the chapter, including editing HTML, creating a first HTML example, adding headers, links, images, special characters, and lists. The chapter objectives are to understand important HTML components, create web pages using HTML, add images and hyperlinks, and mark up lists. Specific HTML elements are also described such as the <html>, <head>, <body>, <a>, <img>, <h1-h6>, <ul>, and <ol> tags.

Uploaded by

TommyWong
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
121 views

HTML I PDF

The document provides an introduction to HTML and outlines topics that will be covered in the chapter, including editing HTML, creating a first HTML example, adding headers, links, images, special characters, and lists. The chapter objectives are to understand important HTML components, create web pages using HTML, add images and hyperlinks, and mark up lists. Specific HTML elements are also described such as the <html>, <head>, <body>, <a>, <img>, <h1-h6>, <ul>, and <ol> tags.

Uploaded by

TommyWong
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/ 24

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. &#38;)

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>&copy;</strong>
Deitel <strong>&amp;</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>&lt; &frac14;</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

You might also like