Download presentation
Presentation is loading. Please wait.
1
2002 Prentice Hall, Inc. All rights reserved.2 Chapter 2 — Introduction to HyperText Markup Language 4: Part I Outline 2.1Introduction 2.2Markup Languages 2.3Editing HTML 2.4Common Elements 2.5Headers 2.6Linking 2.7Images 2.8Special Characters and More Line Breaks 2.9Unordered Lists 2.10Nested and Ordered Lists
2
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
3
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
4
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
5
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
6
2002 Prentice Hall, Inc. All rights reserved.2 2.4 Common Elements HTML Elements –Upcoming Example
7
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 2.1Basic 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 4 5 6 7 8 9 XML How to Program - Welcome 10 11 12 13 14 Welcome to Our Web Site! 15 16 17 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
8
2002 Prentice Hall, Inc. All rights reserved. Outline Fig 21.1 Output
9
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
10
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 2.2Header 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 4 5 6 7 8 9 XML How to Program - Headers 10 11 12 13 14 Level 1 Header 15 Level 2 header 16 Level 3 header 17 Level 4 header 18 Level 5 header 19 Level 6 header 20 21 22 Header elements define heading levels
11
2002 Prentice Hall, Inc. All rights reserved.2 Ouput for Fig. 2.2
12
2002 Prentice Hall, Inc. All rights reserved.2 2.6 Linking Hyperlinks –Anchors Text or images Requires attribute href Demonstrated in upcoming example
13
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 2.3Linking 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 4 5 6 7 8 9 XML How to Program - Links 10 11 12 13 14 Here are my favorite Internet Search Engines 15 16 Click on the Search Engine address to go to that 17 page. 18 19 Yahoo 20 21 AltaVista 22 23 Ask Jeeves 24 25 WebCrawler 26 27 28 Anchor tag Attribute href of tag a assigned to Web page URL. Assigns the text Yahoo as the place to anchor the hyperlink.
14
2002 Prentice Hall, Inc. All rights reserved.2 Output for Fig. 2.3
15
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 2.4Linking 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 4 5 6 7 8 9 XML How to Program - Contact Page 10 11 12 13 14 My email address is 15 deitel@deitel.com. Click on the address and your browser 16 will open an email message and address it to me. 17 18 19 mailto: tells Web browser to load default email client with given address
16
2002 Prentice Hall, Inc. All rights reserved.2 Output for Fig. 2.4
17
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
18
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 2.5Placing 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 4 5 6 7 8 9 XML How to Program - Welcome 10 11 12 13 14 <img src = "xmlhtp.jpg" height = "238" width = "183" 15 alt = "Demonstration of the alt attribute"> 16 17 18 Element img defines image location, size, and alternate text
19
2002 Prentice Hall, Inc. All rights reserved.2 Output for Fig. 2.5
20
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 2.6Using 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 4 5 6 7 8 9 XML How to Program - Navigation Bar 10 11 12 13 14 15 16 <img src = "buttons/links.jpg" width = "65" height = "50" 17 alt = "Links Page"> 18 19 20 <img src = "buttons/list.jpg" width = "65" height = "50" 21 alt = "List Example Page"> 22 23 24 <img src = "buttons/contact.jpg" width = "65" height = "50" 25 alt = "Contact Page"> 26 27 28 <img src = "buttons/header.jpg" width = "65" height = "50" 29 alt = "Header Page"> Placing img tag within anchor tag specifies image as link anchor. br element causes line break in most browsers.
21
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 2.6Using images as link anchors. (Part 2) 31 32 <img src = "buttons/table.jpg" width = "65" height = "50" 33 alt = "Table Page"> 34 35 36 <img src = "buttons/form.jpg" width = "65" height = "50" 37 alt = "Feedback Form"> 38 39 40 41
22
2002 Prentice Hall, Inc. All rights reserved.2 Output for Fig. 2.6
23
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: –& = & –© = ©
24
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
25
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 2.7Inserting 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 4 5 6 7 8 9 XML How to Program - Contact Page 10 11 12 13 14 15 My email address is 16 deitel@deitel.com. Click on the address and your browser 17 will automatically open an email message and address it to my 18 address. 19 20 21 22 All information on this site is © 23 Deitel & Associates, 1999. Insert special character copyright symbol
26
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 2.7Inserting special characters into HTML. (Part 2) Lines 28-29 Lines 28-30 25... --> 26..., --> 27 --> 28 You may copy up to 3.14 x 10 2 characters 29 worth of information from this site. Just make sure 30 you do not copy more information than is allowable. 31 32 33 No permission is needed if you only need to use 34 < ¼ of the information presented here. 35 36 37 Delete text with strikeout Superscript and Subscript
27
2002 Prentice Hall, Inc. All rights reserved.2 Output for Fig. 2.7
28
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
29
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 2.8Unordered lists in HTML. 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 5 6 7 8 9 XML How to Program - Links 10 11 12 13 14 Here are my favorite Internet Search Engines 15
30
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 2.8Unordered lists in HTML. (Part 2) Lines 20-21 16 17 Click on the Search Engine address to go to that 18 page. 19 20 21 Yahoo 22 23 AltaVista 24 25 Ask Jeeves 26 27 WebCrawler 28 29 30 31 Element ul begins the list, and element li separates each list
31
2002 Prentice Hall, Inc. All rights reserved.2 Output for Fig. 2.8
32
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
33
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 2.9Nested 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 4 5 6 7 8 9 XML How to Program - Lists 10 11 12 13 14 The Best Features of the Internet 15 16 17 You can meet new people from countries around 18 the world. 19 You have access to new media as it becomes public: 20 21 22 tag --> 23 24 New games 25 New applications Start nested list, where each li tag designates top-level element Add another level to nested list
34
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 2.9Nested and ordered lists in HTML. (Part 2) 26 27 28 29 For business 30 For pleasure 31 32 33 34 Around the clock news 35 Search engines 36 Shopping 37 Programming 38 39 40 XML 41 Java 42 HTML 43 Scripts 44 New languages 45 46 47 48 49 50
35
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 2.9Nested and ordered lists in HTML. (Part 3) Line 62 51 52 Links 53 Keeping in touch with old friends 54 It is the technology of the future! 55 56 57 58 My 3 Favorite CEOs 59 60 61 --> 62 63 Bill Gates 64 Steve Jobs 65 Michael Dell 66 67 68 69 Begins ordered list (most browsers assign decimal numbers to top-level elements)
36
2002 Prentice Hall, Inc. All rights reserved.2 Output for Fig. 2.9
Similar presentations
