1 of 26

.

How to use HTML�to structure a web page

1

.

2 of 26

Elements for Chapter 3

Basic template – �from Ch2, Page 39

Meta data
Favicon
Lang attribute

h1 – h6
p

block element: div
Inline elements: b, em, span
Character entities �(special characters)
URL
Hyperlinks
Lists: ol, ul, and dl
Images

2

Structural elements
header
footer
main
nav
section
article
aside

3 of 26

A browser that shows the title and favicon

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

<head>

<title>San Joaquin Valley Town Hall: � Speakers and Luncheons

</title>

</head>

3

4 of 26

A head section with metadata

<head>

<title>San Joaquin Valley Town Hall: speakers and luncheons

</title>

</head>

4

.

Defined: Meta tags (AKA metadata) are HTML snippets used to describe the content on a web page.

Meta Description will be required on every page of your final project.
Meta Keywords are no longer being used by Google for ranking

5 of 26

SEO guidelines for the <title> tag

Code it in the head section.
Should accurately describe the page’s content.
Should include the one or two focus keywords aimed at good ranking the page.
Should be interesting enough to entice the reader to click when displayed in the search results
Should be unique for each page in your website.�For example, go to goodwill.org and click thru a bit.
Limit the length of your titles to around 65 characters because most search engines cut it off at 65.

5

.

6 of 26

SEO guidelines for Description meta tags

Place on each page
Should summarize the contents of the page, it should be unique for each page, and it can be longer than the title tag.�I think Goodwill.org has a different description for each page too!
When the description is displayed in the search-engine results, it should encourage users to click on your link.

6

7 of 26

Guidelines for heading tags

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 to size text. Use CSS instead.

7

.

<h1>Main Heading</h1>

<h2>Subheading</h2>

<h3>Third level subheading</h3>

<h4>Fourth level subheading</h4>

<h5>Fifth level subheading</h5>

<h6>Sixth level subheading</h6>

8 of 26

HTML block elements (vs. inline)

<h1>San Joaquin Valley Town Hall Programs</h1>

<h2>Pre-lecture coffee at the Saroyan</h2>

<p>Joins 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>

8

.

A block-level element always starts on a new line.
It takes up the full width available

9 of 26

An HTML page with structural elements

<body>

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

</body>

9

.

Accessibility and SEO guideline

Use the HTML structural elements to indicate the structure of your pages. Semantically named to clearly describe meaning to browser and developer.

10 of 26

How to use div elements �to structure the content within a section

<div>

<h2>The first priority</h2>

<p>The elements for the first priority</p>

</div>

<div>

<h2>The second priority</h2>

<p>The elements for the second priority</p>

</div>

</section>

10

.

11 of 26

Why use structure of section, article, div, etc.?

12 of 26

Examples inline elements

<p>When the dialog box is displayed, enter � <kbd>brock21</kbd>.</p>

<p>To quote Hamlet:

<q>Conscience does make cowards of us all.</q>

</p>

<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>The chemical symbol for water is H<sub>2</sub>O.</p>

12

.

13 of 26

HTML with block elements and character entities

<p>Ernest Hemingway wrote:</p>

Cowardice, as distinguished from panic, is almost

always simply a lack of ability to suspend

the functioning of the imagination.

</blockquote>

murachbooks@murach.com</a>

</address>

13

.

14 of 26

A simple website folder structure

14

.

15 of 26

Working with URLs and paths

Absolute URLs

http://www.murach.com/index.html

http://www.murach.com/books/php/toc.html

Root-relative paths

/login.html

/images/logo.gif

Document-relative paths that navigate down

images/logo.gif

books/php/overview.html

Document-relative paths that navigate up

../index.html

../images/logo.gif

15

.

16 of 26

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 about JavaScript, visit the

<a href="http://www.javascript.com/">� official JavaScript web site</a>.</p>

16

.

17 of 26

The link examples in a web browser

SEO and accessibility guideline for links

The content of a link should be text that clearly indicates where the link is going.

17

.

18 of 26

HTML that creates two lists

<p>We have books on a variety of languages, including</p>

<ul>

<li>JavaScript</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>

18

.

19 of 26

The lists in a web browser

19

.

20 of 26

An img element

<h1>Clyde the Cougar<h1>

The image in a web browser

20

.

21 of 26

Common image formats

JPEG (Joint Photographic Experts Group)
GIF (Graphic Interchange Format)
PNG (Portable Network Graphics)
WEBP (Web Picture format, developed by Google

Accessibility guidelines for images

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 ("").

21

.

22 of 26

A simple web page

22

.

23 of 26

The HTML file for the web page

<!DOCTYPE html>

<head>

<title>San Joaquin Valley Town Hall</title>

href="images/favicon.ico">

</head>

<body>

<h2>San Joaquin Valley Town Hall</h2>

<h3>Bringing cutting-edge speakers to the

valley</h3>

</header>

23

.

24 of 26

The HTML file for the web page (continued)

<main>

<h1>This season's guest speakers</h1>

<nav>

<ul>

<li>October:

David Brancaccio</a></li>

...

</ul>

</nav>

<p><em>Contact us by phone</em> at (559) 555-1212 � for ticket information.</p>

</main>

</footer>

</body>

</html>

24

.

25 of 26

Short 3-1 Create an HTML page

25

.

26 of 26

Freshtake Presentation for 1 person

Favicon

Create your own logo using your initial(s)
Favicon: Talk about What, Why, How?
Show us a few of your favorite favicons from websites (no pun intended)

26