HTML 1: Overview

Chapter 2

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

Textbook to be published by Pearson ©
Ed2015
in early
Pearson
2014
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
http://www.funwebdev.com
 Brief History of HTML
Did we mention that this will be brief?

• ARPANET of the late 1960s

• jump quickly to the first public specification of
the HTML by Tim Berners-Lee in 1991
• HTML’s codification by the World-Wide Web
Consortium (better known as the W3C) in
1997.
• And now HTML 5 (2014)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 HTML Syntax
What is a markup language?

HTML is defined as a markup language.

• A markup language is simply a way of annotating a
document in such a way to make the annotations
distinct from the text being annotated.
• The term comes from the days of print, when
editors would write instructions on manuscript
pages that might be revision instructions to the
author or copy editor.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Sample ad hoc markup

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Markup
What is it again?

At its simplest, markup is a way to indicate

information about the content
• This “information about content” in HTML is
implemented via tags (aka elements).
• The markup in the previous slide consists of the red
text and the various circles and arrows on the one
page, and the little yellow sticky notes on the other.
• HTML does the same thing but uses textual tags.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 What is the W3C?
Standards

The W3C is the main standards organization for the

World Wide Web.
To promotes compatibility the W3C produces
recommendations (also called specifications).
In 1998, the W3C turned its attention to a new
specification called XHTML 1.0, which was a version of
HTML that used stricter XML (Extensible Markup
Language) syntax rules.
XML is a meta-language, from which are derived
different markup languages such as SVG, SparQL, XSLT,
MathML, etc

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 XHTML
Partying like it’s 1999

The goal of XHTML with its strict rules was to make

page rendering more predictable by forcing web
authors to create web pages without syntax errors.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 XHTML
You too can be strict

The XML-based syntax rules for XHTML are pretty easy

to follow.
The main rules are:
• lowercase tag names,
• attributes always within quotes,
• and all elements must have a closing element (or be
self-closing).

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 XHTML 2.0: a collapse?
Where did it go?

In the mid 2000s, XHTML 2.0 proposed a revolutionary and

substantial change to HTML.
• backwards compatibility with HTML and XHTML 1.0 was
dropped.
• Browsers would become significantly less forgiving of
invalid markup.
• This lack of compatibility with XHTML 1.x and HTML 4
caused some early controversy in the web developer
community. Some parts of the language were subsequently
split out of the specification and worked on as separate
modules. A ninth draft of XHTML 2.0 was expected to
appear in 2009, but on July 2, 2009, the W3C decided to let
the XHTML2 Working Group charter expire by that year's
end, effectively halting any further development of the
draft into a standard…

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 HTML5
The new hotness

By 2009, the W3C stopped work on XHTML 2.0 and

instead adopted HTML5 (finalization in October 2014).

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 HTML5
Three main aims

There are three main aims to HTML5:

• Specify unambiguously how browsers should deal
with invalid markup.
• Provide an open, non-proprietary programming
framework (via Javascript) for creating rich web
applications.
• Be backwards compatible with the existing web.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 HTML5
It evolves

All of the major browser manufacturers have at least

partially embraced HTML5.
Certainly not all browsers and all versions support
every feature of HTML5.
This is in fact by design. HTML in HTML5 is now a living
language: that is, it is a language that evolves and
develops over time.
As such, every browser will support a gradually
increasing subset of HTML5 capabilities

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 HTML5 Support in Browsers
No HTML5
Support

Partial HTML5 Support

Full HTML5 Support

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Section 2 of 6

HTML SYNTAX
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 Elements and Attributes
More syntax

HTML documents are composed of textual content

and HTML elements.
An HTML element can contain text, other elements, or
be empty. It is identified in the HTML document by
tags.
HTML elements can also contain attributes. An HTML
attribute is a name=value pair that provides more
information about the HTML element.
In XHTML, attribute values had to be enclosed in
quotes; in HTML5, the quotes are optional.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 What HTML lets you do

 Insert images using the <img> tag

 Create links with the <a> tag
 Create lists with the <ul>, <ol> and
<li> tags
 Create headings with <h1>, <h2>,
…, <h6>
 Define metadata with <meta> tag
 And much more…
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 Elements and Attributes
Opening Tag Closing Tag

<a href="http://www.centralpark.com">Central Park</a>

Element Name Attribute Content

May be text or other HTML elements

Trailing Slash

Example empty element <br />

Element Name

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Nesting HTML elements

Often an HTML element will contain other HTML

elements.
In such a case, the container element is said to be a
parent of the contained, or child, element.
Any elements contained within the child are said to be
descendents of the parent element; likewise, any
given child element, may have a variety of ancestors.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Hierarchy of elements
ancestor

<body> parent
child
<p>
This is some <strong>text</strong>
</p>
<h1>Title goes here</h1>
sibling
<div>descendants
<p>
This is <span>important</span>
</p>
</div>
</body>

<body>
descendants children

<p> <h1> <div>

siblings

<strong> <p>
ancestors

<span>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Nesting HTML elements

In order to properly construct a hierarchy of elements,

your browser expects each HTML nested element to
be properly nested.
That is, a child’s ending tag must occur before its
parent’s ending tag.
Correct Nesting

<h1>Share Your <strong>Travels</strong></h1>

<h1>Share Your <strong>Travels</h1></strong>

Incorrect Nesting

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Section 3 of 6

SEMANTIC MARKUP
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 Semantic Markup
What does it mean?

Over the past decade, a strong and broad consensus

has grown around the belief that HTML documents
should only focus on the structure of the document.
Information about how the content should look when
it is displayed in the browser is best left to CSS
(Cascading Style Sheets).

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Semantic Markup

As a consequence, beginning HTML authors are often

counseled to create semantic HTML documents.
That is, an HTML document should not describe how
to visually present content, but only describe its
content’s structural semantics or meaning.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Structure

Structure is a vital way of communicating information

in paper and electronic documents.
All of the tags that we will examine in this
presentation are used to describe the basic structural
information in a document, such as articles, headings,
lists, paragraphs, links, images, navigation, footers, and
so on.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Semantic Markup
Its advantages

Eliminating presentation-oriented markup and writing

semantic HTML markup has a variety of important
advantages:
Maintainability. Semantic markup is easier to update and
change than web pages that contain a great deal of
presentation markup.
Faster. Semantic web pages are typically quicker to author
and faster to download.
Accessibility. Visiting a web page using voice reading
software can be a very frustrating experience if the site
does not use semantic markup.
Search engine optimization. Semantic markup provides
better instructions for search engines: it tells them what
things are important content on the site.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Section 4 of 6

STRUCTURE OF HTML
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 Simplest HTML document
1 <!DOCTYPE html>
<title>A Very Small Document</title>
<p>This is a simple document with not much content</p>

The <title> element (Item ) is used to provide a broad description of the

content. The title is not displayed within the browser window. Instead, the
title is typically displayed by the browser in its window and/or tab.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 A more complete document

1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf-8"> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

1 DOCTYPE
(short for Document Type Definition)

Tells the browser (or any other client software that is

reading this HTML document) what type of document
it is about to process.
Notice that it does not indicate what version of HTML
is contained within the document: it only specifies that
it contains HTML. 1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf-8"> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 HTML, Head, and Body

HTML5 does not require the use of the <html>,

<head>, and <body>.
However, in XHTML they were required, and most web
authors continue to use them.

2 The <html> element is sometimes called the root

element as it contains all the other HTML elements in
the document. 1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf-8"> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Head and Body
HTML pages are divided into two sections: the head
and the body, which correspond to the <head> and
<body> elements.
3 The head contains descriptive elements about the
document

4 The body contains content that will be displayed by

the browser.
1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf-8"> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Inside the head
There are no brains

You will notice that the <head> element contains a

variety of additional elements.
5 The first of these is the <meta> element. Our example
declares that the character encoding for the document
is UTF-8.
1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf-8"> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Inside the head
No brains but metas, styles and javascripts

6 Our example specifies an external CSS style sheet file

that is used with this document.
7 It also references an external Javascript file.

1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf-8"> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Section 5 of 6

QUICK TOUR OF HTML

Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 Why a quick tour?

HTML5 contains many structural and presentation

elements – too many to completely cover in this
presentation.
Rather than comprehensively cover all these elements,
this presentation will provide a quick overview of the
most common elements.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Sample Document
<body>
<h1>Share Your Travels</h1>
1
<h2>New York - Central Park</h2>
2 <p>Photo by Randy Connolly</p>
<p>This photo of Conservatory Pond in
<a href="http://www.centralpark.com/">Central Park</a> 3
New York City was taken on October 22, 2011 with a
<strong>Canon EOS 30D</strong> camera.
</p> 4
5 <img src="images/central-park.jpg" alt="Central Park" />

<h3>Reviews</h3>
6 <div> 7
<p>By Ricardo on <time>September 15, 2012</time></p>
<p>Easy on the HDR buddy.</p>
</div>

<div>
<p>By Susan on <time>October 1, 2012</time></p>
<p>I love Central Park.</p>
</div>
8

<p><small>Copyright &copy; 2012 Share Your Travels</small></p>

</body> 9

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

1 Headings
<h1>, <h2>, <h3>, etc

HTML provides six levels of

heading (h1, h2, h3, …), with
the higher heading number
indicating a heading of less
importance.
Headings are an essential way
for document authors use to
show their readers the
structure of the document.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Headings

The browser has its

own default styling for
each heading level.
However, these are
easily modified and
customized via CSS.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Headings
Be semantically accurate

In practice, specify a heading level that is semantically

accurate.
Do not choose a heading level because of its default
presentation
• e.g., choosing <h3> because you want your text to
be bold and 16pt

Rather, choose the heading level because it is

appropriate
• e.g., choosing <h3> because it is a third level
heading and not a primary or secondary heading

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

2 Paragraphs
<p>

Paragraphs are the most basic unit of text in an HTML

document.
Notice that the <p> tag is a container and can contain
HTML and other inline HTML elements
inline HTML elements refers to HTML elements that
do not cause a paragraph break but are part of the
regular “flow” of the text.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 3 Links
<a>

Links are created using the <a> element (the “a”

stands for anchor).
A link has two main parts: the destination and the
label.

<a href="http://www.centralpark.com">Central Park</a>

Destination Label (text)

<a href="index.html"><img src="logo.gif" /></a>

Label (image)

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Types of Links

You can use the anchor element to create a wide range of

links:
• Links to external sites (or to individual resources such
as images or movies on an external site).
• Links to other pages or resources within the current
site.
• Links to other places within the current page.
• Links to particular locations on another page.
• Links that are instructions to the browser to start the
user’s email program.
• Links that are instructions to the browser to execute a
Javascript function.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Different link destinations
Link to external site

<a href="http://www.centralpark.com">Central Park</a>

Link to resource on external site

<a href="http://www.centralpark.com/logo.gif">Central Park</a>

Link to another page on same site as this page

<a href="index.html">Home</a>

Link to another place on the same page

<a href="#top">Go to Top of Document</a>

Link to specific place on another page

<a href="productX.html#reviews">Reviews for product X</a>

Link to email

<a href="mailto://person@somewhere.com">Someone</a>

Link to javascript function

<a href="javascript://OpenAnnoyingPopup();">See This</a>

Link to telephone (automatically dials the number

when user clicks on it using a smartphone browser)

<a href="tel:+18009220579">Call toll free (800) 922-0579</a>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 URL Absolute Referencing
For external resources

When referencing a page or resource on an external

site, a full absolute reference is required: that is,

• the protocol (typically, http://),

• the domain name,
• any paths, and then finally
• the file name of the desired resource.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 URL Relative Referencing
An essential skill

We also need to be able to successfully reference files

within our site.
This requires learning the syntax for so-called relative
referencing.
When referencing a resource that is on the same
server as your HTML document, then you can use
briefer relative referencing. If the URL does not include
the “http://” then the browser will request the current
server for the file.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 URL Relative Referencing

If all the resources for the site reside within the same
directory (also referred to as a folder), then you can
reference those other resources simply via their
filename.
However, most real-world sites contain too many files
to put them all within a single directory.
For these situations, a relative pathname is required
along with the filename.
The pathname tells the browser where to locate the
file on the server.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Pathnames

Pathnames on the web follow Unix conventions.

• Forward slashes (“/”) are used to separate directory
names from each other and from file names.
• Double-periods (“..”) are used to reference a
directory “above” the current one in the directory
tree.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 URL Relative Referencing
Share-Your-Travels
Relative Link Type Example
/ (root folder)
1 Same Directory To link to example.html from
about.html (in Figure 2.18), use:
index.html
To link to a file within the same
<a href="example.html">
about.html folder, simply use the file name.
1 7
2 Child Directory To link to logo.gif from about.html,
example.html
use:
To link to a file within a subdirectory,
images/ <a href="images/logo.gif">
use the name of the subdirectory
2
logo.gif and a slash before the file name.
Grandchild/Descendant To link to background.gif from
central-park.jpg 3 Directory about.html, use:
css/ <a
To link to a file that is multiple
href="css/images/background.gif"
main.css subdirectories below the current
>
one, construct the full path by
images/
including each subdirectory name
3
background.gif (separated by slashes) before the file
name.
members/
4 Parent/Ancestor Directory To link to about.html from
4 5
index.html index.html in members, use:
Use “../” to reference a folder
<a href="../about.html">
randyc/ above the current one. If trying to
6
reference a file several levels above To link to about.html from
bio.html
the current one, simply string bio.html, use:
together multiple “../”.
<a href="../../about.html">

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 URL Relative Referencing
Share-Your-Travels
5 Sibling Directory To link to logo.gif from index.html in
members, use:
/ (root folder)
Use “../”to move up to the appropriate
<a href="../images/about.html">
level, and then use the same technique as
index.html
for child or grandchild directories. To link to background.gif from bio.html,
about.html use:
1 7
example.html <a
href="../../css/images/background.gif">
images/
6 Root Reference To link to about.html from bio.html, use:
2
logo.gif <a href="/about.html">
An alternative approach for ancestor and
central-park.jpg
sibling references is to use the so-called To link to background.gif from bio.html,
root reference approach. In this approach, use:
css/
begin the reference with the root reference
<a href="/images/background.gif">
main.css (the “/”) and then use the same technique
as for child or grandchild directories. Note
images/
that these will only work on the server!
3
background.gif That is, they will not work when you test it
out on your local machine.
members/
7 Default Document To link to index.html in members from
4 5
index.html about.html, use either:
Web servers allow references to directory
<a href="members">
randyc/ names without file names. In such a case,
6
bio.html
the web server will serve the default Or
document, which is usually a file called
<a href="/members">
index.html (apache) or default.html
(IIS). Again, this will only generally work on
the web server.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Inline Text Elements
Do not disrupt the flow

Inline elements do not disrupt the flow of text (i.e.,

cause a line break).
HTML5 defines over 30 of these elements.
e.g., <a>, <br>, <em>, <strong>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Images

While the <img> tag is the oldest method for

displaying an image, it is not the only way.
For purely decorative images, such as background
gradients and patterns, logos, border art, and so on, it
makes semantic sense to keep such images out of the
markup and in CSS where they more rightly belong.
But when the images are content, such as in the
images in a gallery or the image of a product in a
product details page, then the <img> tag is the
semantically appropriate approach.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Images
Specifies the URL of the image to display Text in title attribute will be displayed in a popup
(note: uses standard relative referencing) tool tip when user moves mouse over image.

<img src="images/central-park.jpg" alt="Central Park" title="Central Park" width="80" height="40" />

Text in alt attribute provides a brief Specifies the width and height of
description of image’s content for users who image in pixels.
are unable to see it.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Lists
HTML provides three types of lists

Unordered lists. Collections of items in no particular

order; these are by default rendered by the browser as
a bulleted list.
Ordered lists. Collections of items that have a set
order; these are by default rendered by the browser as
a numbered list.
Definition lists. Collection of name and definition
pairs. These tend to be used infrequently. Perhaps the
most common example would be a FAQ list.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Lists
<ol>
<li>Introduction</li>
<li>Background</li>
Notice that the list item element <li>My Solution</li>
can contain other HTML <li>
elements <ol>
<li>Methodology</li>
<ul> <li>Results</li>
<li><a href="index.html">Home</a></li> <li>Discussion</li>
<li>About Us</li> </ol>
<li>Products</li> </li>
<li>Contact Us</li> <li>Conclusion</li>
</ul> </ol>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Character Entities

These are special characters for symbols for which

there is either no way easy way to type in via a
keyboard (such as the copyright symbol or accented
characters) or which have a reserved meaning in HTML
(for instance the “<” or “>” symbols).
They can be used in an HTML document by using the
entity name or the entity number.
e.g., &nbsp; and &copy;

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Section 6 of 6

HTML SEMANTIC ELEMENTS

Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 HTML5 Semantic Elements
Why are they needed?

One substantial problem with modern, pre-HTML5

semantic markup:
most complex web sites are absolutely packed solid
with <div> elements.
Unfortunately, all these <div> elements can make the
resulting markup confusing and hard to modify.
Developers typically try to bring some sense and order
to the <div> chaos by using id or class names that
provide some clue as to their meaning.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 XHTML versus HTML5
<body>
<div id="header"> <body>
1 <header>
<div id="logo-headings">
<header> 2 <hgroup>
1 <hgroup>
...
... 2
</div>
...
</hgroup>
<div id="top-navigation">
...
...
<nav>
</div>
...
</div>
3 <nav> </nav> 3
4 </header>
<div id="main">
<div id="main">
<div id="left-navigation">
<nav>
...
...
</div>
</nav>
<div class="content">
5 <section>
<div class="story">
<section> ...
5 <article>
</div>
6 <article> ... 6
</article>
<div class="story">
<article>
...
<figure>
<div class="story-photo">
<img ... class="blog-photo"/>
7 <img ... /> 7
<figcaption>...
<p classs="photo-caption">... <figure>
</figure>
</div>
8 <figcaption> ...
</div>
</article> 8
<div class="related-stuff-on-right">
<aside>
... 9 <aside> ... 9
</div>
</aside>
</div> </section>
<div class="content"> <section>
... ...
</div> </section>
</div> </div>
<div id="footer"> <footer>
10
... ...
10
<footer> </div> </footer>
</body> </body>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

1 10
Header and Footer
<header> <footer>

Most web site pages have a recognizable header and

footer section.
Typically the header contains
• the site logo
• title (and perhaps additional subtitles or taglines)
• horizontal navigation links, and
• perhaps one or two horizontal banners.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

1 10
Header and Footer
<header> <footer>

The typical footer contains less important material,

such as
• smaller text versions of the navigation,
• copyright notices,
• information about the site’s privacy policy, and
• perhaps twitter feeds or links to other social sites.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Header and Footer

Both the HTML5 <header> and <footer> element can

be used not only for page headers and footers, they
can also be used for header and footer elements
within other HTML5 containers, such as <article> or
<section>.

<header>
<img src="logo.gif" alt="logo" />
<h1>Fundamentals of Web Development</h1>
...
</header>
<article>
<header>
<h2>HTML5 Semantic Structure Elements </h2>
<p>By <em>Randy Connolly</em></p>
<p><time>September 30, 2012</time></p>
</header>
...
</article>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 HTML Tables and
Forms

Chapter 4

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

Textbook to be published by Pearson ©
Ed2015
in early
Pearson
2014
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
http://www.funwebdev.com
 Section 1 of 6

INTRODUCING TABLES
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 HTML Tables
A grid of cells

A table in HTML is created using the <table> element

Tables can be used to display:
•Many types of content
•Calendars, financial data, lists, etc…

•Any type of data

•Images
•Text
•Links
•Other tables

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 HTML Tables
Example usages

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Tables Basics
Rows and cells

• an HTML <table> contains any number of rows

(<tr>)
• each row contains any number of table data cells
(<td>)
• Content goes inside of <td></td> tags
<table>
<tr>
<td>The Death of Marat</td>
</tr>
content
</table>

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 A basic Example

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 With Table Headings

th

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Why Table Headings

A table heading <th>

• Browsers tend to make the content within a <th>
element bold
• <th> element for accessibility (it helps those using
screen readers)
• Provides some semantic info about the row being
a row of headers

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Spanning Rows and Columns
Span Span Span a Row

Each row must have the

same number of <td> or
<th> containers. If you
want a given cell to cover
several columns or rows,

use the colspan or

rowspan attributes

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Example Table layouts

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Section 3 of 6

INTRODUCING FORMS
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 HTML Forms
Richer way to interact with server

Forms provide the user with an alternative way to

interact with a web server.
• Forms provide rich mechanisms like:
• Text input

• Password input

• Options Lists

• Radio and check boxes

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Form Structure

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 How forms interact with servers

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Query Strings
At the end of the day, another string

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 URL encoding
Special symbols

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 <form> element

Two essential features of any form, namely the action

and the method attributes.
• The action attribute specifies the URL of the
server-side resource that will process the form data
• The method attribute specifies how the query
string data will be transmitted from the browser to the
server.
• GET

• POST

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 GET vs POST

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 GET vs POST
Advantages and Disadvantages

 Data can be clearly seen in the address bar.

 Data remains in browser history and cache.
 Data can be bookmarked
 Limit on the number of characters in the form
data returned.
POST
 Data can contain binary data.
 Data is hidden from user.
 Submitted data is not stored in cache, history,
or bookmarks.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Section 4 of 6

FORMS CONTROL ELEMENTS

Randy Connolly and Ricardo Hoar Fundamentals of Web Development
 Form-Related HTML Elements
Type Description

<button> Defines a clickable button.

<datalist> An HTML5 element form defines lists to be used with other form elements.

<fieldset> Groups related elements in a form together.

<form> Defines the form container.

<input> Defines an input field. HTML5 defines over 20 different types of input.

<label> Defines a label for a form input element.

<legend> Defines the label for a fieldset group.

<option> Defines an option in a multi-item list.

<optgroup> Defines a group of related options in a multi-item list.

<select> Defines a multi-item list.

<textarea> Defines a multiline text entry box.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Text Input Controls
Type Description
text Creates a single line text entry box. <input type="text" name="title" />

textarea Creates a multiline text entry box. <textarea rows="3" ... />

password Creates a single line text entry box for a password <input type="password" ... />

search Creates a single-line text entry box suitable for a search string. This is an HTML5 element.

<input type="search" … />

email Creates a single-line text entry box suitable for entering an email address. This is an HTML5 element.

<input type="email" … />

tel Creates a single-line text entry box suitable for entering a telephone. This is an HTML5 element.

<input type="tel" … />

url Creates a single-line text entry box suitable for entering a URL. This is an HTML5 element.

<input type="url" … />

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Text Input Controls
Classic

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Text Input Controls
HTML5

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 HTML5 advanced controls
Pattern attribute

datalist

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Select Lists
Chose an option, any option.

• <select> element is used to create a multiline box

for selecting one or more items
• The options are defined using the <option> element

• can be hidden in a dropdown or multiple rows of

the list can be visible

• Option items can be grouped together via the

<optgroup> element.

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Select Lists
Select List Examples

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Which Value to send
Select Lists Cont.

The value attribute of the <option> element is used to

specify what value will be sent back to the server.
The value attribute is optional; if it is not specified,
then the text within the container is sent instead

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Radio Buttons

Radio buttons are useful when you want the user to

select a single item from a small list of choices and you
want all the choices to be visible
• radio buttons are added via the <input type="radio">
element

• The buttons are mutually exclusive (i.e., only one can

be chosen) by sharing the same name attribute

• The checked attribute is used to indicate the default

choice

• the value attribute works in the same manner as with

the <option> element

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Radio Buttons

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Checkboxes

Checkboxes are used for getting yes/no or on/off

responses from the user.
• checkboxes are added via the <input type="checkbox”>
Element

• You can also group checkboxes together by having them

share the same name attribute

• Each checked checkbox will have its value sent to the

server

• Like with radio buttons, the checked attribute can be

used to set the default value of a checkbox

Randy Connolly and Ricardo Hoar Fundamentals of Web Development

 Checkboxes

Randy Connolly and Ricardo Hoar Fundamentals of Web Development