Chapter 3 Using HTML to Structure a Web Page HTMl Basics Chapter 3 Using HTML to Structure a Web Page
Learning Outcomes Applied Code a properly structured HTML web page using the HTML5 semantic elements and any of the other elements that are presented in this chapter. Given the HTML for a web page, code a relative URL that refers to any file in the folder structure for the website. Knowledge Describe the use of the title and meta elements in the head section of an HTML document. Distinguish between a block element and an inline element. Describe the use of these block elements: h1, h2, h3, and p. Describe the use of these inline elements: br, i, b, sup, em, q, and strong. Describe the use of character entities like or ©.
Learning Outcomes (cont.) Describe the use of the div and span elements in the HTML for a modern website. Describe the use of these HTML5 semantic elements: header, main, section, article, nav, aside, footer, and figure. Distinguish between absolute and relative URLs, and distinguish between root-relative and document-relative paths Distinguish between the use of the <a> element and the img element. Describe the accessibility guidelines for <a> elements and img elements. Describe the two types of lists that you can create with HTML.
Our First Web page: index.html <!DOCTYPE html> <html lang="en"> <head> <title>My First HTML5 Web Page</title> <meta charset="utf-8"> </head> <body> <p>Hello World</p> </body> </html>
Semantic Tagging (review) 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
display Property (review) 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.
Nesting elements (review) Is is common practice to code elements nested inside each other as long as the interior nested elements are inline elements Example: <p><strong>this is bold text</strong></p> 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
Favorites Icon Small icon that displays in the address bar or tab bar of some browsers Also called a favicon, both link tags needed Most Browsers use this standard W3C form of the link <link rel="icon" href="favicon.ico" type="image/x-icon"> Older versions of IE require this non=standard form <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
Heading Elements (block) <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>
Paragraph Element (block) <p> tag <p> …paragraph goes here… </p> Groups sentences and sections of text together. Configures empty space above and below the paragraph
Blockquote Element (block) <blockquote> Indents a block of text for special emphasis Semantically appropriate for LONG quotations <blockquote> …text goes here… </blockquote>
Quote Element (inline) <q> Semantically appropriate for SHORT inline quotations that don’t require paragraph breaks Browser normally surrounds the element with quotation marks (pre IE8 doesn’t follow this standard…UGH!!) <q> …text goes here… </q>
Line Break Element (block) <br> tag Stand-alone tag Called a void element in HTML5 …text goes here <br> This starts on a new line…. Causes the next element or text to display on a new line Read Reviews
Phrase Elements (inline) Indicate the context and meaning of the text Display inline with the text Common Phrase Elements Tag Usage/Default Display <b><b> Text is displayed in bold font** <strong></strong> Text has strong importance; is displayed in bold <i></i> Text is displayed in italic font** <em></em> Text has emphasis; is displayed in italic font <sub></sub> Text is displayed as subscript <sup></sup> Text is displayed as superscript **W3C Specifications: You should not use b and i tags if there is a more descriptive and relevant tag available since they have no real semantic meaning and can be confusing particularly in a multi-lingual website.
Proper Nesting (review) 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 Remember that an inline element (<i> or <strong> in this example) is not allowed to have a block element nested inside of it!
Special Entity Characters (inline) Display special characters such as quotes, copyright symbol, etc. Entity Character & & < < > > © © ® ® ™ ™ ¢ ¢ ‘ ‘ (opening single quote) ’ ’ (closing single quote or apostrophe) “ “ (opening double quote) ” “ (closing double quote) non-breaking space
Image Element (inline) <img> Configures graphics on a web page src Attribute File path and file name of the graphic file alt Attribute Configures alternate text content (description) height Attribute (considered optional for RWD) Height of the graphic in pixels width Attribute (considered optional for RWD) Width of the graphic in pixels Example <img src="images/cake.gif" alt="birthday cake">
HTML5 Semantic Structural Elements (block) (all these are coded inside the Body Element!) Header Element Nav Element Main Element Footer Element Section Element Article Element Aside Element **It is acceptable to code other block elements (like p, h1, blockquote) inside these block elements.
Header (block) HTML5 Semantic Structural Elements <header></header> The header element represents a container for introductory content or a set of navigational links. A header element typically contains: one or more heading elements (<h1> - <h6>) logo or icon authorship information You can have several <header> elements in one document. Note: A <header> tag cannot be placed within a <footer>, <address> or another <header> element.
Nav (block) HTML5 Semantic Structural Elements <nav></nav> Defines a set of navigation links. Notice that NOT all links of a document should be inside a nav element. The nav element is intended only for major block of navigation links.
Main (block) HTML5 Semantic Structural Elements <main></main> Specifies the main content of a document. The content inside the main element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms. There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.
Footer (block) HTML5 Semantic Structural Elements <footer></footer> Defines a footer for a document or section A footer element should contain information about its containing element. A footer element typically contains: authorship information copyright information contact information sitemap back to top links related documents You can have several <footer> elements in one document.
Section (block) HTML5 Semantic Structural Elements <section></section> Defines sections in a document, such as chapters
Article (block) HTML5 Semantic Structural Elements <article></article> Specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site. Potential sources for the article element: Forum post Blog post News story Comment
Aside (block) HTML5 Semantic Structural Elements <aside></aside> Defines some content aside from the content it is placed in Example: <p>My family and I visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside>
Example page with some of the HTML5 Structural tags <body> <header> <h1>San Joaquin Valley Town Hall</h1> </header> <main> <p>Welcome to San Joaquin Valley Town Hall. We have some fascinating speakers for you this season!</p> </main> <footer> <p>© Copyright 2015 San Joaquin Valley Town Hall.</p> </footer> </body>
Other HTML5 Semantic Elements Figure (block) <figure><figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. It is common practice to code the img tag for images inside the figure element Figcaption (block) <figcaption></figcaption> Defines a caption for a figure element Can be placed as the first or last child of (inside) the figure element
Example using figure, figcaption with img <figure> <img src="lighthouse.jpg" alt="Lighthouse"> <figcaption> Island Lighthouse, Built in 1870 </figcaption> </figure>
HTML List Basics Unordered List Description List (previously known as Definition List in HTML4) Ordered List
Unordered List (block) Displays information with bullet points Unordered List Element (block) <ul> Contains the unordered list List Item Element (block) <li> Contains an item in the list
Unordered List Example <h1>My Favorite Colors</h1> <ul> <li>Blue</li> <li>Teal</li> <li>Read</li> </ul>
Ordered List Conveys information in an ordered fashion Ordered List Element (block) <ol> Contains the ordered list type attribute determines numbering scheme of list default is numerals List Item Element (block) <li> Contains an item in the list
Ordered List Example <ol> <li>Apply to school</li> <li>Register for course</li> <li>Pay tuition</li> <li>Attend course</li> </ol>
Description List Uses: Display a list of terms and descriptions Display a list of FAQ and answers The Description List element (block) <dl> tag Contains the definition list The dt Element (block) <dt> tag Contains a term or name The dd Element (block) <dd> tag Contains a definition or description Indents the text
Description List Example <dl> <dt>IP</dt> <dd>Internet Protocol</dd> <dt>TCP</dt> <dd>Transmission Control Protocol</dd> </dl>
div element (block) <div> Configure a specially formatted division or area of a web page Use for page organization, for example to indicate left, center, or right columns Use ONLY when HTML5 semantic structural elements do not apply Used frequently for incorporating CSS Like the HTML5 structural elements it can contain other block display elements nested inside it
Span Element (inline) <span> Configure a specially formatted area displayed in-line with other elements, such as within a paragraph. Use ONLY when HTML5 semantic elements do not apply Used frequently for incorporating CSS inline
Anchor Element (inline) <a> The anchor element Inline display element Specifies a hyperlink reference (href) to a file or a URL 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 Web page document, photo, pdf, etc.
More on Hyperlinks Absolute link Relative link Link to other websites <a href="http://yahoo.com">Yahoo</a> Relative link Link to pages on your own site Relative to the current page <a href="catproduct.html">Cat</a>
Coding URLs for anchor elements href attribute Absolute URL Paths http://www.murach.com/index.html http://www.murach.com/books/php/toc.html Root-relative paths /login.html (refers to root/login.html) /images/logo.gif (refers to root/images/logo.gif) Document-relative paths that navigate down from the root folder images/logo.gif (refers to root/images/logo.gif) books/php/overview.html (refers to root/books/php/overview.html) Document-relative paths that navigate up from the root/books folder ../index.html (refers to root/index.html) ../images/logo.gif (refers to root/images/logo.gif)
More a href link examples A link to a web page in the same folder <p>Go view our <a href="products.html"> product list</a>.</p> A link to a web page in a subfolder of the parent folder <p>Read about the <a href="../company/services.html"> services we provide</a>.</p> A link to a web page based on the root folder <p>View your <a href="/orders/cart.html">shopping cart</a>.</p> A link to a web page at another website <p>To learn more, visit the <a href="http://www.javascript.com/"> official JavaScript web site</a>.</p>
More on Relative Linking Relative links from the canyon.html page in the rooms folder <a href=“javelina.html">Javelina</a> <a href="../index.html">Home</a> <a href="../events/weekend.html">Weekend Events</a>
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. <a href="http://yahoo.com" target="_blank">Yahoo!</a>
Email Hyperlinks Automatically launch the default mail program configured for the browser If no browser default is configured, a dialog box is displayed <a href="mailto:me@hotmail.com">me@hotmail.com</a>
Writing Valid HTML (review) 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