Chapter2
Download as PPT, PDF•0 likes•517 views
This chapter introduces HTML and covers key concepts for coding web pages. It describes HTML, XHTML, and HTML5 and their elements. It covers how to structure a web page using the html, head, body, title, and meta elements. It also describes how to configure text elements, links, lists, and special characters in the body of a web page. Finally, it discusses validating HTML code and ensuring web pages are structured properly.
Chapter2
- 1. Copyright © Terry Felke-Morris http://terrymorris.net Web Development & Design Foundations with HTML5 8th Edition CHAPTER 2 KEY CONCEPTS 1 Copyright © Terry Felke-Morris
- 2. Copyright © Terry Felke-Morris http://terrymorris.net Learning Outcomes In this chapter, you will learn how to ... Describe HTML, XHTML, and HTML5 Identify the markup language in a web page document Use the html, head, body, title, and meta elements to code a template for a web page Configure the body of a web page with headings, paragraphs, line breaks, divs, lists, and blockquotes Configure text with phrase elements Configure a web page using new HTML5 header, nav, main, and footer elements Configure special characters Use the anchor element to link from page to page Create absolute, relative, and e-mail hyperlinks Code, save, and display a web page document Test a web page document for valid syntax 2
- 3. Copyright © Terry Felke-Morris http://terrymorris.net What is HTML? HTML: The set of markup symbols or codes placed in a file intended for display on a Web browser page. The World Wide Web Consortium (http://w3c.org) sets the standards for HTML and its related languages. 3
- 4. Copyright © Terry Felke-Morris http://terrymorris.net HTML Elements Each markup code represents an HTML element. Each element has a purpose. Most elements are coded as a pair of tags: an opening tag and a closing tag. Tags are enclosed in angle brackets, "<" and ">" symbols. 4
- 5. Copyright © Terry Felke-Morris http://terrymorris.net What is HTML5 ? Newest version of HTML/XHTML Supported by modern browsers Intended to be backwards compatible Adds new elements Adds new functionality ◦Edit form data ◦Native video and audio ◦And more! 5 Source: W3C http://www.w3.org/html/logo/
- 6. Copyright © Terry Felke-Morris http://terrymorris.net Document Type Definition Document Type Definition (DTD) ◦doctype statement ◦identifies the version of HTML contained in your document. ◦placed at the top of a web page document 6
- 7. Copyright © Terry Felke-Morris http://terrymorris.net DTD Examples XHTML1.0TransitionalDTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> HTML5DTD <!DOCTYPE html> 7
- 8. Copyright © Terry Felke-Morris http://terrymorris.net Example HTML5 Web Page <!DOCTYPE html> <html lang="en"> <head> <title>Page Title Goes Here</title> <meta charset="utf-8"> </head> <body> ... body text and more HTML5 tags go here ... </body> </html> 8
- 9. Copyright © Terry Felke-Morris http://terrymorris.net Head & Body Sections Head Section Contains information that describes the web page document <head> …head section info goes here </head> Body Section Contains text and elements that display in the web page document <body> …body section info goes here </body> 9
- 10. Copyright © Terry Felke-Morris http://terrymorris.net Title Element Meta Element 10
- 11. Copyright © Terry Felke-Morris http://terrymorris.net Heading Element <h1>Heading Level 1</h1> <h2>Heading Level 2</h2> <h3>Heading Level 3</h3> <h4>Heading Level 4</h4> <h5>Heading Level 5</h5> <h6>Heading Level 6</h6> 11
- 12. Copyright © Terry Felke-Morris http://terrymorris.net Paragraph Element Paragraph element <p> …paragraph goes here… </p> ◦Groups sentences and sections of text together. ◦Block Display – Configures empty space above and below 12
- 13. Copyright © Terry Felke-Morris http://terrymorris.net Line Break Element Line Break element ◦Stand-alone, or void tag …text goes here <br> This starts on a new line…. ◦Causes the next element or text to display on a new line 13
- 14. Copyright © Terry Felke-Morris http://terrymorris.net Blockquote Element Blockquote element ◦Indents a block of text for special emphasis <blockquote> …text goes here… </blockquote> ◦Block Display – Configures empty space above and below 14
- 15. Copyright © Terry Felke-Morris http://terrymorris.net Phrase Elements Indicate the context and meaning of the text 15
- 16. Copyright © Terry Felke-Morris http://terrymorris.net Proper Nesting CODE: <p><i>Call for a free quote for your web development needs: <strong>888.555.5555 </strong></i></p> BROWSER DISPLAY: Call for a free quote for your web development needs: 888.555.5555 16
- 17. Copyright © Terry Felke-Morris http://terrymorris.net HTML Lists Unordered List Ordered List Description List formerly called a definition list 17
- 18. Copyright © Terry Felke-Morris http://terrymorris.net Unordered List Displays a bullet, or list marker, before each entry in the list. <ul> Contains the unordered list <li> Contains an item in the list 18
- 19. Copyright © Terry Felke-Morris http://terrymorris.net Unordered List Example <ul> <li>TCP</li> <li>IP</li> <li>HTTP</li> <li>FTP</li> </ul> 19
- 20. Copyright © Terry Felke-Morris http://terrymorris.net Ordered List Displays a numbering or lettering system to itemize the information contained in the list <ol> Contains the ordered list ◦type attribute determines numbering scheme of list, default is numerals <li> Contains an item in the list 20
- 21. Copyright © Terry Felke-Morris http://terrymorris.net Ordered List Example <ol> <li>Apply to school</li> <li>Register for course</li> <li>Pay tuition</li> <li>Attend course</li> </ol> 21
- 22. Copyright © Terry Felke-Morris http://terrymorris.net Description List Useful to display a list of terms and descriptions or a list of FAQ and answers ◦ <dl> Contains the description list ◦ <dt> Contains a term/phrase/sentence Configures empty space above and below the text ◦ <dd> Contains a description of the term/phrase/sentence ◦ Indents the text ◦ Configures empty space above and below the text 22
- 23. Copyright © Terry Felke-Morris http://terrymorris.net Description List Example <dl> <dt>IP</dt> <dd>Internet Protocol</dd> <dt>TCP</dt> <dd>Transmission Control Protocol</dd> </dl> 23
- 24. Copyright © Terry Felke-Morris http://terrymorris.net Checkpoint 1. Describe the features of a heading element and how it configures the text. 2. Describe the difference between ordered lists and unordered lists. 3. Describe the purpose of the blockquote tag. 24
- 25. Copyright © Terry Felke-Morris http://terrymorris.net Special Characters Display special characters such as quotes, copyright symbol, etc. Character Code © © < < > > & & 25
- 26. Copyright © Terry Felke-Morris http://terrymorris.net Div Element Configures a structural block area or “division” on a web page with empty space above and below. Can contain other block display elements, including other div elements <div>Home Services Contact</div> 26
- 27. Copyright © Terry Felke-Morris http://terrymorris.net HTML5 Structural Elements header Element <header></header> Contains the web page document’s headings nav Element <nav></nav> Contains web page document’s main navigation main Element <main></main> Contains the web page document’s main content footer Element <footer></footer> Contains the web page document’s footer 27
- 28. Copyright © Terry Felke-Morris http://terrymorris.net HTML5 Structural Elements <body> <header> document headings go here </header> <nav> main navigation goes here </nav> <main> main content goes here </main> <footer> document footer information goes here </footer> </body> 28
- 29. Copyright © Terry Felke-Morris http://terrymorris.net Anchor Element Specifies a hyperlink reference (href) to a file Text between the <a> and </a> is displayed on the web page. <a href="contact.html">Contact Us</a> href Attribute Indicates the file name or URL 29
- 30. Copyright © Terry Felke-Morris http://terrymorris.net Absolute & Relative Hyperlinks Absolute link ◦Link to a different website <a href="http://yahoo.com">Yahoo</a> Relative link ◦Link to pages on your own site <a href="index.htm">Home</a> 30
- 31. Copyright © Terry Felke-Morris http://terrymorris.net E-Mail Hyperlink Automatically launch the default mail program configured for the browser If no browser default is configured, a message is displayed <a href=“mailto:[email protected]”>[email protected]</a> 31
- 33. Copyright © Terry Felke-Morris http://terrymorris.net Checkpoint 1. Describe the purpose of special characters. 2. Describe when to use an absolute link. Is the http protocol used in the href value? 3. Describe when to use a relative link. Is the http protocol used in the href value? 33
- 34. Copyright © Terry Felke-Morris http://terrymorris.net Writing Valid HTML Check your code for syntax errors ◦Benefit: ◦Valid code more consistent browser display W3C HTML Validation Tool ◦http://validator.w3.org 34
- 35. Copyright © Terry Felke-Morris http://terrymorris.net Summary This chapter introduced you to HTML. You will use these skills over and over again as you create web pages. 35