1. Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1

2. Learning Outcomes  Describe the anatomy of a web page  Format the body of a web page with block-level elements including headings, paragraphs, lists, and blockquotes  Configure the text on a web page with inline elements  Configure text with phrase elements  Configure special entity characters, line breaks, and horizontal rules  Configure a web page using new HTML5 header, nav, and footer elements  Use the anchor element to link from page to page  Configure absolute, relative, and e-mail hyperlinks  Test a web page for valid HTML syntax

3. Page 19 corrected, Hands-On Practice 1.1: index.html My First HTML5 Web Page Hello World 3

4. Head & Body Sections  Head Section Contains information that describes the web page document …head section info goes here  Body Section Contains text and elements that display in the web page document …body section info goes here

5. HTML and tags  title and meta tags are coded between the opening and closing head tags My First HTML5 Web Page Hello World

6. Body element  Everything you see in the browser window has to be in between the body opening and closing tags  So, for this page all you will see is Hello World My First HTML5 Web Page Hello World

7. Semantic Tagging  HTML tags are used to tag content according to the purpose of the content  HTML tags are not used to tag content so that it looks a certain way  Web Designers call this Semantic Tagging  CSS will be used for all presentation  how the content looks or is formatted 7

8. display Property  All HTML elements are either Inline or Block display elements  Inline and Block define how an element is displayed in relation to other adjacent content Display = inline ○ An inline element only takes up as much width as necessary, and does not force line breaks; displayed next to adjacent content. Display = block ○ A block element is an element that takes up the full width available, and has a line break before and after it; displayed on separate line from adjacent content. 8

9. Nesting elements  Is is common practice to code elements nested inside each other as long as the interior nested elements are inline elements Example: this is bold text  Never include block elements inside other block elements unless you are building a list, then the list item tags are always inside the list tags OR the outer element is a div tag 9

10. The Heading Element (block) Heading Level 1 Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6

11. The Paragraph Element (block) tag  Paragraph element …paragraph goes here… Groups sentences and sections of text together. Configures empty space above and below the paragraph

12. The Line Break Element (block) tag  Line Break element Stand-alone tag Called a void element in HTML5 …text goes here This starts on a new line…. Causes the next element or text to display on a new line Read Reviews

13. The Horizontal Rule Element (block) tag  Horizontal Rule element void element Configures a horizontal line on the page In HTML5, it should be used to indicate a thematic break at the paragraph level Read Reviews

14. The Blockquote Element (block)  Blockquote element Indents a block of text for special emphasis Semantically appropriate for long quotations …text goes here…

15. Phrase Elements (inline)  Indicate the context and meaning of the text  Display inline with the text  Common Phrase Elements Text is displayed in bold font Text has strong importance and is displayed in bold Text is displayed in italic font Text has emphasis and is displayed in italic font

16. Proper Nesting CODE: Call for a free quote for your web development needs: 888.555.5555 BROWSER DISPLAY: Call for a free quote for your web development needs: 888.555.5555 An inline element is not allowed to have a block element nested inside of it! 16

17. HTML List Basics  Unordered List  Description List (XHTML Definition List)  Ordered List

18. Unordered List (block)  Displays information with bullet points  Unordered List Element (block) Contains the unordered list  List Item Element (block) Contains an item in the list

19. Unordered List Example My Favorite Colors Blue Teal Read

20. Ordered List  Conveys information in an ordered fashion  Ordered List Element (block) Contains the ordered list type attribute determines numbering scheme of list default is numerals  List Item Element (block) Contains an item in the list

21. Ordered List Example Apply to school Register for course Pay tuition Attend course

22. Description List  Formerly called a definition list in XHTML and HTML 4.0  Uses: Display a list of terms and descriptions Display a list of FAQ and answers  The Description List element (block) tag Contains the definition list  The dt Element (block) tag Contains a term or name  The dd Element (block) tag Contains a definition or description Indents the text

23. Description List Example IP Internet Protocol TCP Transmission Control Protocol

24. Special Entity Characters (inline) Display special characters such as quotes, copyright symbol, etc. Character Code © © < < > > & &

25. The div element (block)  Purpose: Configure a specially formatted division or area of a web page Use for page organization, for example to indicate left, center, or right columns  Block display with line break (empty space) above and below the div  div element is unique because it can contain other block display nested inside it 25

26. HTML5 Structural Elements  Header Element (block) Contains the web page document’s headings  Nav Element (block) Contains web page document’s main navigation  Footer Element (block) Contains the web page document’s footer 26

27. HTML5 Structural Elements Example file, chapter 2\structure.html: document headings go here main navigation goes here main content goes here document footer information goes here 27

28. The Anchor Element (inline) The anchor element Inline display element Specifies a hyperlink reference (href) to a file Text between the and is displayed on the web page. Contact Us href Attribute  Indicates the file name or URL Web page document, photo, pdf, etc. 28

29. More on Hyperlinks  Absolute link Link to other websites Yahoo  Relative link Link to pages on your own site Relative to the current page Home 29

30. Opening a Link in a New Browser Window  The target attribute on the anchor element opens a link in a new browser window or new browser tab. Yahoo! 30

31. Email Hyperlinks  Automatically launch the default mail program configured for the browser  If no browser default is configured, a dialog box is displayed me@hotmail.com 31

32. Writing Valid HTML  Check your code for syntax errors Benefit: ○ Valid code  more consistent browser display  W3C HTML Validation Tool http://validator.w3.org  Additional HTML5 Validation Tool http://html5.validator.nu

33. Summary  This chapter provided an introduction to HTML.  HTML elements used for inline and block display formatting were introduced.  You will use these skills over and over again as you create web pages.