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…>