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

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 hyperlinks  Test a web page for valid HTML syntax

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Unordered List Example My Favorite Colors Blue Teal Read

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

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

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

Description List Example IP Internet Protocol TCP Transmission Control Protocol

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

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

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

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

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

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

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

Hyperlinks  Automatically launch the default mail program configured for the browser  If no browser default is configured, a dialog box is displayed 31

Writing Valid HTML  Check your code for syntax errors Benefit: ○ Valid code  more consistent browser display  W3C HTML Validation Tool  Additional HTML5 Validation Tool

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.