Scribd
Upload
21 views

Intro To HTML

The document introduces HTML and its basic components. It outlines how to structure an HTML document using tags like <html>, <head>, and <body>. It provides examples of how to add headings, links, images, and lists to an HTML page. The objectives are to learn the important parts of an HTML document and how to use HTML to create and style web pages.

Uploaded by

Fahmi Ariffin2
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
21 views

Intro To HTML

The document introduces HTML and its basic components. It outlines how to structure an HTML document using tags like <html>, <head>, and <body>. It provides examples of how to add headings, links, images, and lists to an HTML page. The objectives are to learn the important parts of an HTML document and how to use HTML to create and style web pages.

Uploaded by

Fahmi Ariffin2
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 21

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: main.html -->
Comments <!-- Our first Web page -->

<html>
<head>
Head section Start tag
</head>

<body>
Body section end tag
</body>

</html>

6
Example1: First HTML example: main.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>

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: header.html 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: links.html

<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
Example 4: Linking to an e-mail address: contact.html

<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
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: picture.html

<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
Example 6: Images as link in anchors: nav.html

<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

14
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)

15
Example 7: Special characters in HTML: contact2.html

<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>.

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: links2.html

<ul>
<li><a href = "http://www.deitel.com">Deitel</a></li> add four list items

<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>

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: list.html
<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

 www.w3.org/TR/xhtml11
 www.xhtml.org
 www.w3schools.com/xhtml/default.asp
 validator.w3.org
 hotwired.lycos.com/webmonkey/00/50/index2a.html
 wdvl.com/Authoring/Languages/XML/XHTML
 www.w3.org/TR/2001/REC-xhtml11-20010531

21

You might also like