2002 prentice hall, inc. all rights reserved.2 chapter 2 — introduction to hypertext markup...

2002 Prentice Hall, Inc. All rights reserved.2

Chapter 2 — Introduction to HyperText Markup Language 4: Part I

Outline2.1 Introduction2.2 Markup Languages2.3 Editing HTML2.4 Common Elements2.5 Headers2.6 Linking2.7 Images2.8 Special Characters and More Line Breaks2.9 Unordered Lists2.10 Nested and Ordered Lists


2.1 Introduction

• Hypertext Markup Language (HTML)– Markup Language

• Identifies elements of a page

– Rendered by Web Browser


2.2 Markup Languages

• HTML Markup– Elements

• Delimited by tags

– Keywords enclosed by angle brackets

– All tags must be closed

– Not Case Sensitive• All lowercase recommended


2.3 Editing HTML

• HTML Source Code– HTML documents

• Created in text editor

– Notepad in windows

– Vi or Emacs in Unix

• Saved as .html or .htm file extension

– Errors• Not Fatal

• Rendered page may be incorrect


2.3 Editing HTML (cont.)

• HTML Source Code– Home Page

• Named index.html– Browser automatically loads index.html

• First page user sees


2.4 Common Elements

• HTML Elements– Upcoming Example

2002 Prentice Hall, Inc. All rights reserved.

Outline

Fig. 2.1 Basic HTML file.

Line 1

Line 3

Lines 5-6

Line 8

Line 9

Line 12

Line 14

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

2 "http://www.w3.org/TR/html4/strict.dtd">

3 <html>

4

5 

6 

7

8 <head>

9 <title>XML How to Program - Welcome</title>

10 </head>

11

12 <body>

13

14 <p>Welcome to Our Web Site!</p>

15

16 </body>

17 </html>

Document type (required) defines HTML version

Comments are ignored by browser but increase HTML readability.

html tag identifies page as HTML

head tag specifies page information

title tag assigns name to page; title generally displayed at top of browser.

body tag contains page contents.

Paragraph element formats paragraph text


Outline

Fig 21.1

Output


2.5 Headers

• Header Elements– Delineate page sections and sub-sections

– Elements h1 – h6 define headers• Sizes vary between browsers

Outline

Fig. 2.2 Header elements h1 through h6.

Lines 14-19



3 <html>

4

5 

6 

7

8 <head>

9 <title>XML How to Program - Headers</title>

10 </head>

11

12 <body>

13

14 <h1>Level 1 Header</h1> 

15 <h2>Level 2 header</h2> 





20

21 </body>

22 </html>

Header elements define heading levels


Ouput for Fig. 2.2


2.6 Linking

• Hyperlinks– Anchors

• Text or images

• Requires attribute href• Demonstrated in upcoming example

Outline

Fig. 2.3 Linking to other Web pages.

Line 19

Line 19

Line 19



3 <html>

4

5 

6 

7

8 <head>

9 <title>XML How to Program - Links</title>

10 </head>

11

12 <body>

13

14 <h1>Here are my favorite Internet Search Engines</h1>

15

16 <p><strong>Click on the Search Engine address to go to that

17 page.</strong></p>

18

19 <p><a href = "http://www.yahoo.com">Yahoo</a></p>

20

21 <p><a href = "http://www.altavista.com">AltaVista</a></p>

22

23 <p><a href = "http://www.askjeeves.com">Ask Jeeves</a></p>

24

25 <p><a href = "http://www.webcrawler.com">WebCrawler</a></p>

26

27 </body>

28 </html>

Anchor tag

Attribute href of tag a assigned to Web page URL.

Assigns the text Yahoo as the place to anchor the hyperlink.


Output for Fig. 2.3

Outline

Fig. 2.4 Linking to an email address.

Line 14



3 <html>

4

5 

6 

7

8 <head>

9 <title>XML How to Program - Contact Page</title>

10 </head>

11

12 <body>

13

14 <p>My email address is <a href = "mailto:[email protected]">

15 [email protected]</a>. Click on the address and your browser

16 will open an email message and address it to me.</p>

17

18 </body>

19 </html>

mailto: tells Web browser to load default email client with given address


Output for Fig. 2.4


2.7 Images

• Images– May be hyperlink anchors

– Element img attributes• Attribute src

– Image location

• Attribute height– Image height

• Attribute width– Image width

• Attribute alt– Defines text if image cannot be displayed

Outline

Fig. 2.5 Placing images in HTML files.

Line 14



3 <html>

4

5 

6 

7

8 <head>

9 <title>XML How to Program - Welcome</title>

10 </head>

11

12 <body>

13

14 <p><img src = "xmlhtp.jpg" height = "238" width = "183"

15 alt = "Demonstration of the alt attribute"></p>

16

17 </body>

18 </html>

Element img defines image location, size, and alternate text


Output for Fig. 2.5

Outline

Fig. 2.6 Using images as link anchors.

Line 16

Line 17



3 <html>

4

5 

6 

7

8 <head>

9 <title>XML How to Program - Navigation Bar</title>

10 </head>

11

12 <body>

13

14 <p>

15 <a href = "links.html">

16 <img src = "buttons/links.jpg" width = "65" height = "50"

17 alt = "Links Page"></a><br>

18

19 <a href = "list.html">

20 <img src = "buttons/list.jpg" width = "65" height = "50"

21 alt = "List Example Page"></a><br>

22

23 <a href = "contact.html">

24 <img src = "buttons/contact.jpg" width = "65" height = "50"

25 alt = "Contact Page"></a><br>

26

27 <a href = "header.html">

28 <img src = "buttons/header.jpg" width = "65" height = "50"

29 alt = "Header Page"></a><br>

Placing img tag within anchor tag specifies image as link anchor.

br element causes line break in most browsers.


Outline

Fig. 2.6 Using images as link anchors. (Part 2)

31 <a href = "table.html">

32 <img src = "buttons/table.jpg" width = "65" height = "50"

33 alt = "Table Page"></a><br>

34

35 <a href = "form.html">

36 <img src = "buttons/form.jpg" width = "65" height = "50"

37 alt = "Feedback Form"></a><br>

38 </p>

39

40 </body>

41 </html>


Output for Fig. 2.6


2.8 Special Characters and More Line Breaks

• Special Characters– Format: &code;

• code is abbreviated name or hex code

• Examples:– & = &– © = ©


2.8 Special Characters and More Line Breaks (cont.)

• Formatting Elements– Element del

• Designates text as deleted (strike-through)

– Element sup• Designates text as superscript

– Element sub• Designates text as subscript

– Element hr• Inserts a horizontal rule

Outline

Fig. 2.7 Inserting special characters into HTML.

Line 22



3 <html>

4

5 

6 

7

8 <head>

9 <title>XML How to Program - Contact Page</title>

10 </head>

11

12 <body>

13

14 

15 <p>My email address is <a href = "mailto:[email protected]">

16 [email protected]</a>. Click on the address and your browser

17 will automatically open an email message and address it to my

18 address.</p>

19

20 <hr> 

21

22 <p>All information on this site is <strong>©</strong>

23 Deitel <strong>&</strong> Associates, 1999.</p>

Insert special character copyright symbol

Outline

Fig. 2.7 Inserting special characters into HTML. (Part 2)

Lines 28-29

Lines 28-30

25 

26 

27 

28 <p><del>You may copy up to 3.14 x 10<sup>2</sup> characters

29 worth of information from this site.</del> Just make sure

30 you <sub>do not copy more information</sub> than is allowable.

31 </p>

32

33 <p>No permission is needed if you only need to use <strong>

34 < ¼</strong> of the information presented here.</p>

35

36 </body>

37 </html>

Delete text with strikeout

Superscript and Subscript


Output for Fig. 2.7


2.9 Unordered Lists

• Unordered Lists– Element ul

• Creates unordered list

– Each line begins with bullet mark

– Element li• defines each List Entry

Outline

Fig. 2.8 Unordered lists in HTML.



3 <html>

4

5 

6 

7

8 <head>

9 <title>XML How to Program - Links</title>

10 </head>

11

12 <body>

13

14 <h1>Here are my favorite Internet Search Engines</h1>

15


Outline

Fig. 2.8 Unordered lists in HTML. (Part 2)

Lines 20-21

16

17 <p><strong>Click on the Search Engine address to go to that

18 page.</strong></p>

19

20 <ul>

21 <li><a href = "http://www.yahoo.com">Yahoo</a></li>

22

23 <li><a href = "http://www.altavista.com">AltaVista</a></li>

24

25 <li><a href = "http://www.askjeeves.com">Ask Jeeves</a></li>

26

27 <li><a href = "http://www.webcrawler.com">WebCrawler</a></li>

28 </ul>

29

30 </body>

31 </html>

Element ul begins the list, and element li separates each list


Output for Fig. 2.8


2.10 Nested and Ordered Lists

• Nested Lists– Improve Document structure

– Display outline information

• Ordered Lists– Automatically assign rank to each element

Outline

Fig. 2.9 Nested and ordered lists in HTML.

Lines 16-17

Line 23



3 <html>

4

5 

6 

7

8 <head>

9 <title>XML How to Program - Lists</title>

10 </head>

11

12 <body>

13

14 <h1>The Best Features of the Internet</h1>

15

16 <ul>

17 <li>You can meet new people from countries around

18 the world.</li>

19 <li>You have access to new media as it becomes public:

20

21 

22 

23 <ul>

24 <li>New games</li>

25 <li>New applications

Start nested list, where each li tag designates top-level element

Add another level to nested list

Outline

Fig. 2.9 Nested and ordered lists in HTML. (Part 2)

26

27 

28 <ul>

29 <li>For business</li>

30 <li>For pleasure</li>

31 </ul> 

32 </li>

33

34 <li>Around the clock news</li>

35 <li>Search engines</li>

36 <li>Shopping</li>

37 <li>Programming

38

39 <ul>

40 <li>XML</li>

41 <li>Java</li>

42 <li>HTML</li>

43 <li>Scripts</li>

44 <li>New languages</li>

45 </ul>

46

47 </li>

48

49 </ul> 

50 </li>

Outline

Fig. 2.9 Nested and ordered lists in HTML. (Part 3)

Line 62

51

52 <li>Links</li>

53 <li>Keeping in touch with old friends</li>

54 <li>It is the technology of the future!</li>

55

56 </ul> 

57

58 <h1>My 3 Favorite <em>CEOs</em></h1>

59

60 

61 

62 <ol>

63 <li>Bill Gates</li>

64 <li>Steve Jobs</li>

65 <li>Michael Dell</li>

66 </ol>

67

68 </body>

69 </html>

Begins ordered list (most browsers assign decimal numbers to top-level elements)


Output for Fig. 2.9

2002 prentice hall, inc. all rights reserved.2 chapter 2 — introduction to hypertext markup...

Documents