Tutorial 1: Getting Started with
HTML5
Session 1.2
Objectives
 Mark page headings, paragraphs, block quotes, and addresses.
 Created unordered and ordered lists.
 Apply an external style sheet to a Web page.
 Run a JavaScript program.
Working with Grouping Elements
Heading Elements
 Contain the text of main headings on a Web page.
 Syntax:
<h1>content</h1>
<h2>content</h2>
<h3>content</h3>
<h4>content</h4>
<h5>content</h5>
<h6>content</h6>
 h1 is largest heading in size -> h6 is smallest heading in size
Heading Elements
 Example:
<h1>Our Mission and Objectives</h1>
<h3>Our Mission</h3>
<h3>Our Objectives</h3>
 Grouping headings using hgroup element:
<hgroup>
<h1>CBIS 3219: Web Development</h1>
<h2>HTML 5</h2>
</hgroup>
Practice – Heading Elements
In basic.html, within the page header, insert an h1 heading
with the following content: Insert basiclogo.png.
Below the h1 heading, insert an h2 heading containing the
text Specials This Month. Group the h1 and h2 headings
using the hgroup element.
2. Add two articles within the section element. Within the
first article, insert an h2 heading with the title The Basic
Stick. Within the second article, insert an h2 heading with
the title Specifications.
1.
Paragraph Elements
 Create paragraphs
 Syntax:
<p>content</p>
 Example:
<p>This course provides for the building of browser-oriented
applications for intranet and extranet uses. Students will build
complex applications using web technologies. The course will
include In-depth coverage of markup languages such as the
Hypertext Markup Language (HTML), Dynamic Hypertext
Markup Language (DHTML), and the Extensible Hypertext
Markup Language (XHTML).</p>
Practice – Paragraph Elements
Within the first article, after the “The Basic Stick”
heading, add a paragraph containing the following
text:
The Basic Stick is the perfect stick for
beginners. The stick rotates slowly to
provide extra time for performing stick
tricks, but is flashy enough to impress
your friends. Enjoy the following:
Blockquote Elements
 Enter quotes
 The content of the blockquote elements is indented in the
browser.
 Syntax:
<blockquote>content</blockquote>
 Example:
<h3>Steve Jobs’ inspirational quote:</h3>
<blockquote>Innovation distinguishes between a leader and a
follower.</blockquote>
Practice – Blockquote Elements
Add a block quote containing the four
paragraphs from the stick.txt file after the
existing paragraph element.
Address Elements
 Italicize an address.
 Syntax:
<address>content</address>
 Example:
<address>
Caroline Collier
Georgia College
Campus Box 012
Milledgeville, GA 31061
</address>
Practice – Address Elements
Within the page footer, insert the company’s
address:
The J-Prop Shop
541 West Highland Drive
Auburn, ME 04210
(207) 555 - 9001
Marking List
 Three kinds of lists:
 Unordered lists
 Ordered lists
 Description lists
Unordered Lists
 Bulleted list
 Syntax:
<ul type =“typename”>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
…
</ul>
Where typename is disc, square, or circle.
Unordered lists
 Example:
<ul type= “disc”>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
Ordered Lists
 Present items in a sequential order.
 Syntax:
<ol type= “typename”>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
…
</ol>
Where typename is 1, A, a, I, or i.
Ordered Lists
 Example:
<ol type= “1”>
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
</ol>
Description Lists
 Contain a list of terms, each followed by a description.
 Syntax:
<dl>
<dt>term1</dt>
<dd>description1</dd>
<dt>term2</dt>
<dd>description2</dd>
…
</dl>
Description Lists
 Example:
<dl>
<dt>Madeleines</dt>
<dd>Very small sponge cakes with a distinctive shell-like
shape, originally from Commercy in the northeastern region
of France.</dd>
<dt>Pains au Chocolat</dt>
<dd>A French pastry consisting of a dough, similar to puff
pastry, with one or two pieces of chocolate in the
centre.</dd>
</dl>
Practice -Lists
Directly below the Specifications heading, insert an unordered list
containing two items: Main Stick and Handle Sticks (one pair).
2. Within the Main Stick list item, insert a nested unordered list
containing the following items:
 Weight: 7 oz.
 Length: 24 inches
 Tape: Dura-Coat finish with laser-style color choices
3. Within the Handle Sticks (one pair) list item, insert a nested
unordered list containing the following items:
 Weight: 2 oz.
 Length: 18 inches
 Tape: Soft ivory tape with rubber core
1.
Applying an External Style Sheet
 What is a style sheet or CSS?
 Inline style sheet vs. external style sheet
 The link to the external style sheet should be placed wiithin
the head of the document.
 Syntax:
<link href=“filepath” rel=“stylesheet” type=“text/css” />
Where filepath is the filename and location of the style sheet
file.
Applying an External Style Sheet
<head>
<title>YouTube – Broadcast Yourself</title>
<link href= “youtubestylesheet.css” rel=“stylesheet”
type= “text/css”>
</head>
Practice – Link to External CSS
 Link basic.html to the basicstyles.css style sheet
file.
Running a JavaScript file
 Javascript: Programming language which helps make the Web
pages interactive and dynamic (and sometimes fix problems).
 Internal Javascript code vs. external Javascript file.
 Example of use: HTML5 is not supported by IE 8 and earlier
=> Use a Javascript file to fix the problem
 Syntax:
<script src=“filepath”></script>
 Example:
<script src=“modernizr-1.5.js”></script>
Practice – Running JavaScript file
Link basic.html to the modernizr-1-
5.js script file to enable HTML 5
support for older browsers.
Summary of tags
 <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>
 <p>
 <address>
 <blockquote>
 <dl>, <dt>, <dd>
 <ul>, <ol>, <li>
 <link…/>
 <script>