View
215
Download
0
Category
Preview:
Citation preview
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
2002 Prentice Hall, Inc. All rights reserved.2
2.1 Introduction
• Hypertext Markup Language (HTML)– Markup Language
• Identifies elements of a page
– Rendered by Web Browser
2002 Prentice Hall, Inc. All rights reserved.2
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
2002 Prentice Hall, Inc. All rights reserved.2
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
2002 Prentice Hall, Inc. All rights reserved.2
2.3 Editing HTML (cont.)
• HTML Source Code– Home Page
• Named index.html– Browser automatically loads index.html
• First page user sees
2002 Prentice Hall, Inc. All rights reserved.2
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 <!-- Fig. 2.1: main.html -->
6 <!-- Our first Web page -->
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
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig 21.1
Output
2002 Prentice Hall, Inc. All rights reserved.2
2.5 Headers
• Header Elements– Delineate page sections and sub-sections
– Elements h1 – h6 define headers• Sizes vary between browsers
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 2.2 Header elements h1 through h6.
Lines 14-19
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4
5 <!-- Fig. 2.2: header.html -->
6 <!-- HTML headers -->
7
8 <head>
9 <title>XML How to Program - Headers</title>
10 </head>
11
12 <body>
13
14 <h1>Level 1 Header</h1> <!-- Level 1 header -->
15 <h2>Level 2 header</h2> <!-- Level 2 header -->
16 <h3>Level 3 header</h3> <!-- Level 3 header -->
17 <h4>Level 4 header</h4> <!-- Level 4 header -->
18 <h5>Level 5 header</h5> <!-- Level 5 header -->
19 <h6>Level 6 header</h6> <!-- Level 6 header -->
20
21 </body>
22 </html>
Header elements define heading levels
2002 Prentice Hall, Inc. All rights reserved.2
Ouput for Fig. 2.2
2002 Prentice Hall, Inc. All rights reserved.2
2.6 Linking
• Hyperlinks– Anchors
• Text or images
• Requires attribute href• Demonstrated in upcoming example
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 2.3 Linking to other Web pages.
Line 19
Line 19
Line 19
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4
5 <!-- Fig. 2.3: links.html -->
6 <!-- Introduction to hyperlinks -->
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.
2002 Prentice Hall, Inc. All rights reserved.2
Output for Fig. 2.3
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 2.4 Linking to an email address.
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 <!-- Fig. 2.4: contact.html -->
6 <!-- Adding email hyperlinks -->
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:deitel@deitel.com">
15 deitel@deitel.com</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
2002 Prentice Hall, Inc. All rights reserved.2
Output for Fig. 2.4
2002 Prentice Hall, Inc. All rights reserved.2
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
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 2.5 Placing images in HTML files.
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 <!-- Fig. 2.5: picture.html -->
6 <!-- Adding images with HTML -->
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
2002 Prentice Hall, Inc. All rights reserved.2
Output for Fig. 2.5
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 2.6 Using images as link anchors.
Line 16
Line 17
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4
5 <!-- Fig. 2.6: nav.html -->
6 <!-- Using images as link anchors -->
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.
2002 Prentice Hall, Inc. All rights reserved.
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>
2002 Prentice Hall, Inc. All rights reserved.2
Output for Fig. 2.6
2002 Prentice Hall, Inc. All rights reserved.2
2.8 Special Characters and More Line Breaks
• Special Characters– Format: &code;
• code is abbreviated name or hex code
• Examples:– & = &– © = ©
2002 Prentice Hall, Inc. All rights reserved.2
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
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 2.7 Inserting special characters into HTML.
Line 22
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4
5 <!-- Fig. 2.7: contact.html -->
6 <!-- Inserting special characters -->
7
8 <head>
9 <title>XML How to Program - Contact Page</title>
10 </head>
11
12 <body>
13
14 <!-- Special characters are entered using the form &code; -->
15 <p>My email address is <a href = "mailto:deitel@deitel.com">
16 deitel@deitel.com</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> <!-- Inserts a horizontal rule -->
21
22 <p>All information on this site is <strong>©</strong>
23 Deitel <strong>&</strong> Associates, 1999.</p>
Insert special character copyright symbol
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 2.7 Inserting special characters into HTML. (Part 2)
Lines 28-29
Lines 28-30
25 <!-- Text can be struck out with a set of <del>...</del> -->
26 <!-- tags, it can be set in subscript with <sub>...</sub>, -->
27 <!-- and it can be set into superscript with <sup...</sup> -->
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
2002 Prentice Hall, Inc. All rights reserved.2
Output for Fig. 2.7
2002 Prentice Hall, Inc. All rights reserved.2
2.9 Unordered Lists
• Unordered Lists– Element ul
• Creates unordered list
– Each line begins with bullet mark
– Element li• defines each List Entry
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 2.8 Unordered lists in HTML.
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4
5 <!-- Fig. 2.8: links.html -->
6 <!-- Unordered list containing hyperlinks -->
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
2002 Prentice Hall, Inc. All rights reserved.
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
2002 Prentice Hall, Inc. All rights reserved.2
Output for Fig. 2.8
2002 Prentice Hall, Inc. All rights reserved.2
2.10 Nested and Ordered Lists
• Nested Lists– Improve Document structure
– Display outline information
• Ordered Lists– Automatically assign rank to each element
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 2.9 Nested and ordered lists in HTML.
Lines 16-17
Line 23
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4
5 <!-- Fig. 2.9: list.html -->
6 <!-- Advanced Lists: nested and ordered -->
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 <!-- This starts a nested list, which uses a modified -->
22 <!-- bullet. The list ends when you close the <ul> tag -->
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
2002 Prentice Hall, Inc. All rights reserved.
Outline
Fig. 2.9 Nested and ordered lists in HTML. (Part 2)
26
27 <!-- Another nested list -->
28 <ul>
29 <li>For business</li>
30 <li>For pleasure</li>
31 </ul> <!-- This ends the double nested list -->
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> <!-- This ends the first level nested list -->
50 </li>
2002 Prentice Hall, Inc. All rights reserved.
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> <!-- This ends the primary unordered list -->
57
58 <h1>My 3 Favorite <em>CEOs</em></h1>
59
60 <!-- Ordered lists are constructed in the same way as -->
61 <!-- unordered lists, except their starting tag is <ol> -->
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)
2002 Prentice Hall, Inc. All rights reserved.2
Output for Fig. 2.9
Recommended