How To Use HTML To Structure A Web Page: Murach's Html5 and CSS3 (3rd Ed.), C3 © 2015, Mike Murach & Associates, Inc

Chapter 3
How to use HTML

to structure a web page
Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3
(3rd Ed.), Slide 1
C3
Objectives
Applied
1. Code a properly structured HTML web page using the HTML5
semantic elements and any of the other elements that are
presented in this chapter.
2. Given the HTML for a web page, code a relative URL that refers
to any file in the folder structure for the website.
Knowledge
1. Describe the use of the title and meta elements in the head section
of an HTML document.
2. Distinguish between a block element and an inline element.
3. Describe the use of these block elements: h1, h2, h3, and p.
4. Describe the use of these inline elements: br, i, b, sup, em, q, and
strong.
5. Describe the use of character entities like
Murach's
HTML5
or ©.
(3rd Ed.), Slide 2
C3
Objectives (cont.)
6. Describe the use of these core attributes: id, class, and title.
7. Describe the use of the div and span elements in the HTML for a
modern website.
8. Describe the use of these HTML5 semantic elements: header,
main, section, article, nav, aside, footer, and figure.
9. Distinguish between absolute and relative URLs, and distinguish
between root-relative and document-relative paths
10. Distinguish between the use of the <a> element and the img
element.
11. Describe the accessibility guidelines for <a> elements and img
elements.
12. Describe the two types of lists that you can create with HTML.
Murach's
HTML5
(3rd Ed.), Slide 3
C3
A browser that shows the title and favicon
A head section with a title and a links to a favicon

<head>
<title>San Joaquin Valley Town Hall |
speakers and luncheons
</title>
<link rel="shortcut icon" href="favicon.ico">
</head>
Murach's
HTML5
(3rd Ed.), Slide 4
C3
SEO guidelines for the title tag
 Always code a title tag in the head section.
 The title should accurately describe the page’s content, and it
should include the one or two keywords that you want the page
ranked for.
 The title should be interesting enough to entice the reader to click
on it when it’s shown in the search results for a search engine.
 The title should be unique for each page in your website.
 Limit the length of your titles to around 65 characters because
most search engines don’t display more than that in their results.
Internet Explorer note

 A favicon isn’t displayed in older versions of Internet Explorer if
the page is served from your local file system. It is only displayed
if the page is served from the web server.
Murach's
HTML5
(3rd Ed.), Slide 5
C3
A head section that includes metadata
<head>
<title>San Joaquin Valley Town Hall |
speakers and luncheons
</title>
<meta charset="utf-8">
<meta name="description" content="A yearly lecture
series with speakers that present new
information on a wide range of subjects">
<meta name="keywords" content="san joaquin,
town hall, speakers, lectures, luncheons">
</head>
Murach's
HTML5
(3rd Ed.), Slide 6
C3
Three attributes of the <meta> tag
 charset
 name
 content
Murach's
HTML5
(3rd Ed.), Slide 7
C3
SEO guidelines for metadata
 Code the description metadata for each page of your website. It
should summarize the contents of the page, it should be unique for
each page, and it can be longer than the title tag. When it is
displayed in the search-engine results, it should encourage users to
click on your link.
 Code the keywords metadata for each page of your website. It
should consist of no more than 10 keywords or phrases, and it
should be unique for each page.
Murach's
HTML5
(3rd Ed.), Slide 8
C3
block elements for headings and paragraphs
 h1
 h2
 h3
 h4
 h5
 h6
 p
Murach's
HTML5
(3rd Ed.), Slide 9
C3
HTML that uses the block elements
<h1>San Joaquin Valley Town Hall Programs</h1>
<h2>Pre-lecture coffee at the Saroyan</h2>
<p>Join us for a complimentary coffee hour, 9:15 to 10:15
a.m. on the day of each lecture. The speakers usually
attend this very special event.</p>
<h2>Post-lecture luncheon at the Saroyan</h2>

<p>Extend the excitement of Town Hall by purchasing
tickets to the luncheons</p>
Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 10
C3
The block elements in a web browser
Murach's
HTML5
(3rd Ed.), 11
C3
SEO guidelines for headings and paragraphs
 Use the heading tags to show the structure and importance of the
content on a page. Always use the h1 tag to identify the most
important information on the page, and only code a single h1 tag
on each page. Then, decrease one level at a time to show
subsequent levels of importance.
 Don’t use heading levels as a way to size text. Instead, use CSS to
size the headings.
Murach's
HTML5
(3rd Ed.), 12
C3
Block elements for special types of text
 pre
 blockquote
 address
Murach's
HTML5
(3rd Ed.), 13
C3
HTML that uses the block elements
<p>How to use JavaScript to display the year:</p>
<pre>
var today = new Date();
document.writeln( today.getFullYear() );
</pre>
<p>Ernest Hemingway wrote:</p>

<blockquote>Cowardice, as distinguished from panic, is
almost always simply a lack of ability to suspend the
functioning of the imagination.
</blockquote>
<p>How to contact Mike Murach & Associates:</p>

<address>1-800-221-5528<br>
<a href="emailto:[email protected]">
[email protected]</a>
</address>
Murach's
HTML5
(3rd Ed.), 14
C3
The block elements in a web browser
Murach's
HTML5
(3rd Ed.), 15
C3
Inline elements for formatting text
 i
 b
 sub
 sup
 br
Murach's
HTML5
(3rd Ed.), 16
C3
Inline elements for identifying content
 abbr
 cite
 code
 dfn
 em
 kbd
 q
 samp
 strong
 var
Murach's
HTML5
(3rd Ed.), 17
C3
HTML that uses some of the inline elements
<p>If you don't get 78% or more on your final,
<em>you won't pass.</em></p>
<p>Save a bundle at our <strong>big yearend

sale</strong>.</p>
<p>When the dialog box is displayed, enter

<kbd>brock21</kbd>.</p>
<p>The chemical symbol for water is H<sub>2</sub>O.</p>
<p><q>To sleep, perchance to dream-ay, there's the

rub.</q></p>
Murach's
HTML5
(3rd Ed.), 18
C3
The inline elements in a web browser
Murach's
HTML5
(3rd Ed.), 19
C3
Common HTML character entities
Entity Character
& &
< <
> >
© ©
® ®
™ ™
¢ ¢
° º
± ±
‘ ‘ (opening single quote)
’ ’ (closing single quote or apostrophe)
“ “ (opening double quote) Murach's
HTML5
(3rd Ed.), 20
C3
Common HTML character entities (cont.)
Entity Character
” ” (closing double quote)
non-breaking space
Murach's
HTML5
(3rd Ed.), 21
C3
Examples of character entities
<p>It’s time to start your Christmas shopping!</p>
<p>President John F. Kennedy said, “And so, my

fellow Americans, ask not what your country can do
for you; ask what you can do for your
country.”</p>
<p> Turning fear into hope,

medical futurist Dr. Alan J. Russell will discuss the
science of regenerating damaged or diseased human body
parts, while offering real hope for the future
of human health.</p>
<p>© 2015 Mike Murach & Associates, Inc.</p>
Murach's
HTML5
(3rd Ed.), 22
C3
The character entities in a web browser
Murach's
HTML5
(3rd Ed.), 23
C3
Core HTML attributes
 id
 class
 title
 lang
Murach's
HTML5
(3rd Ed.), 24
C3
HTML that uses these attributes
<html lang="en">
<body>
<h1>San Joaquin Valley Town Hall</h1>
<p class="first">Welcome to San Joaquin Valley Town
Hall.</p>
<form action="subscribe.php" method="post">
<p>Please enter your e-mail address to subscribe
to our newsletter.</p>
<p class="first field">E-Mail:
<input type="text" name="email" id="email"
title="Enter e-mail here."></p>
<p><input type="submit" value="Subscribe"></p>
</form>
</body>
</html>
Murach's
HTML5
(3rd Ed.), 25
C3
The HTML in a web browser with a tooltip
Murach's
HTML5
(3rd Ed.), 26
C3
Accessibility guideline
 Always code the lang attribute on the html element to identify the
language for the page.
Murach's
HTML5
(3rd Ed.), 27
C3
The primary HTML5 semantic elements
 header
 main
 section
 article
 nav
 aside
 footer
Accessibility and SEO guideline

 Use the HTML5 semantic elements to indicate the structure of
your pages.
Murach's
HTML5
(3rd Ed.), 28
C3
A page structured with header, main,
and footer elements
<body>
<header>
</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>
Murach's
HTML5
(3rd Ed.), 29
C3
The page displayed in a web browser
Murach's
HTML5
(3rd Ed.), 30
C3
Other HTML5 semantic elements
 time
 figure
 figcaption
Murach's
HTML5
(3rd Ed.), 31
C3
The attributes of the time element
 datetime
 pubdate
A time element
<p>Next year's conference will be on
<time datetime="2015-05-31">May 31st</time>.</p>
Murach's
HTML5
(3rd Ed.), 32
C3
The figure and figcaption elements
<figure>
<code>
var today = new Date();<br>
document.writeln( today.getFullYear() );<br><br>
</code>
<figcaption>
JavaScript code for getting the year
</figcaption>
</figure>
The code displayed in a browser
Murach's
HTML5
(3rd Ed.), 33
C3
A block element for structuring a web page
 div
An inline element for formatting text

 span
Accessibility and SEO guidelines

 Use div tags only when the HTML5 semantic elements don’t
apply.
 Use span tags only when the tags for identifying content don’t
apply.
Murach's
HTML5
(3rd Ed.), 34
C3
A page structured with div and span elements
<body>
<div id="header">
</div>
<div id="main">
<p><span id="welcome">Welcome to San Joaquin
Valley Town Hall.</span> We have some
fascinating speakers for you this season!</p>
</div>
<div id="footer">
Hall.</p>
</div>
</body>
Murach's
HTML5
(3rd Ed.), 35
C3
The page displayed in a web browser
Murach's
HTML5
(3rd Ed.), 36
C3
A simple website folder structure
Murach's
HTML5
(3rd Ed.), 37
C3
Absolute URLs
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)
Murach's
HTML5
(3rd Ed.), 38
C3
Basic attribute of the <a> element
 href
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 about JavaScript, visit the
<a href="http://www.javascript.com/">
official JavaScript web site</a>.</p> Murach's
HTML5
(3rd Ed.), 39
C3
The links in a web browser
SEO and accessibility guideline

 The content of a link should be text that clearly indicates where
the link is going.
Murach's
HTML5
(3rd Ed.), 40
C3
Elements that create ordered and unordered lists
 <ul>
 <ol>
 <li>
Murach's
HTML5
(3rd Ed.), 41
C3
HTML that creates two lists
<p>We have books on a variety of languages, including</p>
<ul>
<li>JavaScript</li>
<li>PHP and MySQL</li>
<li>Servlets and JSP</li>
<li>ASP.NET</li>
</ul>
<p>You will need to complete the following steps:</p>

<ol>
<li>Enter your billing information.</li>
<li>Enter your shipping information.</li>
<li>Confirm your order.</li>
</ol>
Murach's
HTML5
(3rd Ed.), 42
C3
The lists in a web browser
Murach's
HTML5
(3rd Ed.), 43
C3
Attributes of the <img> element
 src
 alt
 height
 width
Murach's
HTML5
(3rd Ed.), 44
C3
An img element
<img src="images/murachlogo.gif" alt=
"Murach Logo" height="75">
<h1>Mike Murach & Associates, Inc.</h1>
The image in a web browser
Murach's
HTML5
(3rd Ed.), 45
C3
The image formats that are supported
by most browsers
 JPEG (Joint Photographic Experts Group)
 GIF (Graphic Interchange Format)
 PNG (Portable Network Graphics)
Accessibility guidelines
 For images with useful content, always code an alt attribute that
describes the image.
 For images that are used for decoration, code the alt attribute with
no value ("").
Murach's
HTML5
(3rd Ed.), 46
C3
A web page that uses some
of the HTML presented in this chapter
Murach's
HTML5
(3rd Ed.), 47
C3
The HTML file for the web page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>San Joaquin Valley Town Hall</title>
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
<header>
<img src="images/logo.jpg"
alt="Town Hall Logo" width="50">
<h3>Bringing cutting-edge speakers to the valley</h3>
</header>
<main>
<h1>This season's guest speakers</h1>
<nav>
<ul>
<li>October: <a href="speakers/toobin.html">
Jeffrey Toobin</a></li>
Murach's
HTML5
(3rd Ed.), 48
C3
The HTML file for the web page (cont.)
<li>November: <a href="speakers/sorkin.html">
Andrew Ross Sorkin</a></li>
<li>January: <a href="speakers/chua.html">
Amy Chua</a></li>
<li>February: <a href="speakers/sampson.html">
Scott Sampson</a></li>
<li>March: <a href="speakers/eire.html">
Carlos Eire</a></li>
<li>April: <a href="speakers/tynan.html">
Ronan Tynan</a></li>
</ul>
</nav>
<p><em>Contact us by phone</em> at (559) 555-1212

for ticket information.</p>
</main>
<footer>
Hall.</p>
</footer>
</body>
</html>
Murach's
HTML5
(3rd Ed.), 49
C3
Exercise 3-1 Enter the HTML for the home page
Murach's
HTML5
(3rd Ed.), 50
C3
Short 3-1 Create an HTML page for a speaker
Murach's
HTML5
(3rd Ed.), 51
C3
Halloween 3 Create the home page
Murach's
HTML5
(3rd Ed.), 52
C3

How To Use HTML To Structure A Web Page: Murach's Html5 and CSS3 (3rd Ed.), C3 © 2015, Mike Murach & Associates, Inc

Uploaded by

Copyright:

Available Formats

How To Use HTML To Structure A Web Page: Murach's Html5 and CSS3 (3rd Ed.), C3 © 2015, Mike Murach & Associates, Inc

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

How To Use HTML To Structure A Web Page: Murach's Html5 and CSS3 (3rd Ed.), C3 © 2015, Mike Murach & Associates, Inc

Uploaded by

Copyright:

Available Formats

Chapter 3

How to use HTML

A head section with a title and a links to a favicon

Internet Explorer note

<h2>Post-lecture luncheon at the Saroyan</h2>

<p>Ernest Hemingway wrote:</p>

<p>How to contact Mike Murach &amp; Associates:</p>

<p>Save a bundle at our <strong>big yearend

<p>When the dialog box is displayed, enter

<p>The chemical symbol for water is H<sub>2</sub>O.</p>

<p><q>To sleep, perchance to dream-ay, there's the

<p>President John F. Kennedy said, &ldquo;And so, my

<p>&nbsp;&nbsp;&nbsp;&nbsp;Turning fear into hope,

<p>&copy; 2015 Mike Murach &amp; Associates, Inc.</p>

Accessibility and SEO guideline

The code displayed in a browser

An inline element for formatting text

Accessibility and SEO guidelines

Document-relative paths that navigate down

Document-relative paths that navigate up

A link to a web page in the same folder

A link to a web page in a subfolder

A link to a web page based on the root folder

A link to a web page at another website

SEO and accessibility guideline

<p>You will need to complete the following steps:</p>

The image in a web browser

<p><em>Contact us by phone</em> at (559) 555-1212

You might also like

<p>How to contact Mike Murach & Associates:</p>

<p>President John F. Kennedy said, “And so, my

<p> Turning fear into hope,

<p>© 2015 Mike Murach & Associates, Inc.</p>