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
2002 Prentice Hall, Inc. All rights reserved Introduction Hypertext Markup Language (HTML) –Markup Language Identifies elements of a page –Rendered by Web Browser
2002 Prentice Hall, Inc. All rights reserved 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 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 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 Common Elements HTML Elements –Upcoming Example
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 " XML How to Program - Welcome Welcome to Our Web Site! 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 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.2Header elements h1 through h6. Lines <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 " XML How to Program - Headers Level 1 Header 15 Level 2 header 16 Level 3 header 17 Level 4 header 18 Level 5 header 19 Level 6 header 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 Linking Hyperlinks –Anchors Text or images Requires attribute href Demonstrated in upcoming example
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 " XML How to Program - Links Here are my favorite Internet Search Engines Click on the Search Engine address to go to that 17 page Yahoo AltaVista Ask Jeeves WebCrawler 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.4Linking to an address. Line 14 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 " XML How to Program - Contact Page My address is 15 Click on the address and your browser 16 will open an message and address it to me mailto: tells Web browser to load default client with given address
2002 Prentice Hall, Inc. All rights reserved.2 Output for Fig. 2.4
2002 Prentice Hall, Inc. All rights reserved 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.5Placing images in HTML files. Line 14 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 " XML How to Program - Welcome <img src = "xmlhtp.jpg" height = "238" width = "183" 15 alt = "Demonstration of the alt attribute"> 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.6Using images as link anchors. Line 16 Line 17 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 " XML How to Program - Navigation Bar <img src = "buttons/links.jpg" width = "65" height = "50" 17 alt = "Links Page"> <img src = "buttons/list.jpg" width = "65" height = "50" 21 alt = "List Example Page"> <img src = "buttons/contact.jpg" width = "65" height = "50" 25 alt = "Contact Page"> <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.
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 2.6Using images as link anchors. (Part 2) <img src = "buttons/table.jpg" width = "65" height = "50" 33 alt = "Table Page"> <img src = "buttons/form.jpg" width = "65" height = "50" 37 alt = "Feedback Form">
2002 Prentice Hall, Inc. All rights reserved.2 Output for Fig. 2.6
2002 Prentice Hall, Inc. All rights reserved 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 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.7Inserting special characters into HTML. Line 22 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 " XML How to Program - Contact Page My address is 16 Click on the address and your browser 17 will automatically open an message and address it to my 18 address All information on this site is © 23 Deitel & Associates, Insert special character copyright symbol
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 2.7Inserting special characters into HTML. (Part 2) Lines Lines > 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 No permission is needed if you only need to use 34 < ¼ of the information presented here 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 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.8Unordered lists in HTML. 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 " XML How to Program - Links Here are my favorite Internet Search Engines 15
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 2.8Unordered lists in HTML. (Part 2) Lines Click on the Search Engine address to go to that 18 page Yahoo AltaVista Ask Jeeves WebCrawler 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 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.9Nested and ordered lists in HTML. Lines Line 23 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 " XML How to Program - Lists The Best Features of the Internet You can meet new people from countries around 18 the world. 19 You have access to new media as it becomes public: tag --> New games 25 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.9Nested and ordered lists in HTML. (Part 2) For business 30 For pleasure Around the clock news 35 Search engines 36 Shopping 37 Programming XML 41 Java 42 HTML 43 Scripts 44 New languages
2002 Prentice Hall, Inc. All rights reserved. Outline Fig. 2.9Nested and ordered lists in HTML. (Part 3) Line Links 53 Keeping in touch with old friends 54 It is the technology of the future! My 3 Favorite CEOs > Bill Gates 64 Steve Jobs 65 Michael Dell 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