Tutorial 1: Getting Started with HTML5 Session 1.3 Objectives Mark text-level elements including strong and emphasized text Insert inline images and line breaks Specify character set Insert special characters Marking Text-Level Elements Bold and Italic Elements Bold Syntax: <b>text</b> <strong>text</strong> Italic Syntax: <i>text</i> <em>text</em> Example: <p><strong>Special Deals:</strong> Atlanta – London round trip for <em>$299.00</em> until the end of the month.</p> Practice – Bold and Italic Elements 1. Mark the first few words of each of the four paragraphs as strong text, as shown in Figure 148. The following words should be bold: Patented Dura-Coat Enhanced stick flexibility Full customization A personal touch Break Elements Soft return vs. hard return <p> vs. <br /> Syntax: <br /> Example: <p><b>Leon Porter</b><br /> DOB: 03/15/1942<br /> Occupation: Electrician<p> Practice – Break Elements 1. Add a break element between the Main Stick list and the Handle Stick list in the second article. Horizontal Rule Elements Horizontal dividers Syntax: <hr /> Attributes: width and colors Example: See HR.html Practice – Horizontal Rule Elements 1. Add a horizontal rule at the end of the first article. Inserting an Inline Image img elements Types of image files you can insert in a Web page: PNG, JPG, GIF Syntax: <img src= “filepath” /> Additional attributes: border, width, height, alt The importance of alt Example: <img src= “waterfall.jpg” border=“1” width=“150” height=“200” alt=“Angel Falls in Venezuela” /> Practice – Inserting an Inline image Within the h1 heading of the page header, delete the text: Insert basiclogo.png and replace it by the inline image file basiclogo.png. Specify the following alternate text for the image: The J-Prop Shop. 2. Within the section element, insert an aside element. The aside element should contain an inline image pointing to the basicstick.png file and having the text string Our popular basic stick as alternate text. 1. Working with Character Sets and Special Characters Character sets come in a wide variety of sizes, based on the number of symbols required for communication in the chosen Language ASCII (American Standard Code for Information Interchange), Latin-1, ISO 8859-1, Unicode, UTF-8 Specifying Character Set for HTML 4.01 and XHTML: <meta http-equiv=“Content-Type” content=“text/html; charset=character_set”> Specifying Character Set for HTML5: <meta charset=“character_set” /> Practice – Character Sets 1. Add code to specify that the page uses the UTF-8 character. Character Entity References and Special Characters http://www.utexas.edu/learn/html/spchar.html Example: <p>&copy; 2012 Microsoft</p> or <p>&#169; 2012 Microsoft</p> Practice – Special Characters 1. Locate the two occurrences of Dura-Coat in the document. Directly after the word Dura-Coat, insert the registered trademark symbol ®. The character entity name of the ® symbol is reg. 2. Separate the different sections of the address using a solid diamond (character code 9830). Summary of tags <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> <p> <address> <blockquote> <dl>, <dt>, <dd> <ul>, <ol>, <li> <link…/> <script> <b>, <strong>, <i>, <em> <br /> <img…/> <figure>, <figcaption> <meta charset…>