2-Lec 2-3- HTMLof software engineering.pptx

1
GETTING STARTED IN
WEB DESIGN

OVERVIEW
• Website creation roles
• Equipment
• Software

Website Creation Roles
Content
Design
Coding:
Frontend
Coding: Backend

Content
Information architecture
Organizes content logically for ease of findability
Content strategy
Ensures that text supports the brand/marketing goals;
may include data modeling and updating schedules as well
as extending brand voice to social media

Design
User Experience (UX)
Makes sure whole experience with the site and the product is
favorable based on user testing
Interaction Design (IxD)
Focuses on how to use the site, including its User Interface
(UI)
Visual Design
Creates the “look and feel” of the site

Coding: Frontend Development
Authoring/Markup (HTML)
Styling (CSS)
JavaScript and DOM Scripting
Frameworks

Coding: Backend Development
Server software (ex: Apache, MS IIS)
Web application languages (ex: PHP, Ruby, .NET)
Database software (ex: MySQL, Oracle)

Other Web Roles
Product manager
Guides product in a way that meets business goals
Project manager
Coordinates team, schedule, and processes
SEO specialist
Ensures site is highly ranked in web searches
Multimedia producer
Creates sound, video, animation, and interactive
media.

OVERVIEW
• The internet vs. the web
• History of the web
• What servers do
• What browsers do
• URLs
• How web pages are constructed

Internet vs. Web
internet
International network of connected computers
protocol
A standardized method for transferring data or documents
over a network (for example, FTP, STMP, HTTP)
web
Information shared over the internet using the Hypertext
Transfer Protocol (HTTP), which is one of many ways to share
information over the internet

A Brief History of the Web
• Started at CERN, a particle physics lab in Geneva,
Switzerland
• 1989: Tim Berners-Lee proposed a system for sharing
documents via “hyperlinks”
• 1990: Prototypes built, first by Tim B-L, then Robert Cailliau
• 1992: Approximately 25 servers worldwide
• 1993: Web opened up for commercial use

The Web Server
server
A program that delivers documents and data on
request
web server
Any computer running web server software

.
IP address
A unique number assigned to a device connected to the internet (IP =
Internet Protocol). Example: 199.27.145.64
Domain Name System (DNS)
A system that allows internet users to refer to servers by name rather
than number
Domain name
A name assigned to a web server (easier to use than IP numbers).
Example: oreilly.com
DNS server
A server that matches domain names to their respective IP addresses
The Web Server (cont’d)

The Browser
• The software that requests data or documents from the
web server
• Also referred to as the client or user agent
• Could be on a desktop machine, smartphone, other
connected device, or an assistive device such as a screen
reader
• The program in the browser that interprets
HTML/CSS/JavaScript is called the rendering engine

Server-side vs. Client-side
Indicates which machine is doing the processing:
• Client-side applications run on the user’s
machine
• Server-side applications use the processing
power of the server

Web Page Addresses (URLs)
URL = Uniform Resource Locator
Every page and resource on the web
has its own URL

1. Identifies the protocol as “web” (HTTP)
2. Identifies the site by its domain name
3. Path through directories on the server to the
target file
Parts of a URL

1. The protocol is implied and will be added by
browser
2. Domain name is identified
3. If there is no path or filename, it means the URL is
pointing to a default file (usually index.html)
What’s Going On with Simple
URLs
http://example.com/
index.html

Anatomy of a Web Page
The page you see in the browser window is nearly always made
up of multiple files, including:
• An HTML document (gives the content structure)
• Style sheets (describes how it should look)
• Images and other media (embedded on the page on the
fly)
• Scripts (add behaviors and functionality)

What Style Sheets Do
Browser’s default
rendering
Simple style sheet
applied

Web Page Assembly Process
1. Request a page using its URL
2. Browser sends HTTP request to server
3. Server returns the file (or a “404 Not Found” message)
4. Browser looks at the HTML document. If there are
external files (like images or style sheets), it contacts the
server again for each resource
5. The server returns the additional files, and the browser
assembles the final page

• Multitude of devices
• Web standards
• Progressive enhancement
• Responsive web design
• Accessibility
• Site performance

A Multitude of Devices
• Your web pages will be viewed on all manner of devices,
large and small, fast and slow, visual and non-visual.
• One of the challenges of being a web designer is
creating a good experience regardless of the browsing
device.
Brad Frost’s depiction of the web viewing
environment.

Web Standards
• The World Wide Web Consortium (W3C) writes
the specifications for web technologies:
w3.org/standards
• Sticking with web standards ensures
consistency across browsers and forward-
compatability.

Progressive Enhancement
Progressive enhancement is a strategy for coping with
unknown browser capabilities.
• Start with baseline experience that provides content and basic
functionality even on minimal browsers and assistive devices
• Layer on styles, scripts, and advanced features for browsers
that can handle them
• Finish with “nice to have” effects (like animation) that aren’t
critical to the brand or functionality

Progressive Enhancement (cont’d)
HTML strategy
Write in a logical order, with elements marked up in a meaningful way
Style strategy
Use universally supported properties as the baseline and add cutting-
edge styles as embellishment
Scripting strategy
Make sure basic functionality (like content display, linking, and forms)
are possible when JavaScript is turned off. Enhance the experience
when JavaScript is available

Responsive Web Design
Responsive web design is a strategy for dealing with
unknown screen size:
• The heart of the method is using one HTML source for all
devices and swapping out the styles based on the size of
the browser window (viewport)
• It is preferred to building separate sites just for mobile
devices (“m.dot” sites)
• It may not be the solution for all sites, but making sites
that adapt to screen size is now common practice

Responsive Web Design (cont’d)
Page layout changes
based on the
width of the screen.

Site Performance
• It is critical that web pages display as quickly as possible.
• Users on mobile devices generally leave a page if it does
not display in 3 seconds.
• Even milliseconds can affect the bottom line on retail sites.

Site Performance Tips
• Make image files as small as possible.
• Streamline HTML markup.
• Keep JavaScript to a minimum.
• Add scripts in a way that they don’t block page rendering.
• Don’t load unnecessary assets.
• Reduce the number of times the browser makes requests of
the server.

Site Performance Tools
• Use a waterfall
chart to see what
assets are
downloading for your
page and how many
milliseconds they take.
• This tool is built into
the Chrome browser
(Developer >
Developer Tools).

4
CREATING A SIMPLE PAGE
(HTML OVERVIEW)

• How markup works: Elements and
attributes
• Minimal HTML document structure
• Identifying text elements: Block and inline
• Troubleshooting and validating HTML

Content Without Markup
Without HTML markup to describe content structure, text
runs together; line breaks are ignored:
Black Goose Bistro
The Restaurant
The Black Goose Bistro offers casual lunch
and dinner fare in a relaxed atmosphere. The
menu changes regularly to highlight the
freshest local ingredients.
Catering
You have fun. We'll handle the cooking. Black
Goose Catering can handle events from snacks
for a meetup to elegant corporate
fundraisers.
Location and Hours
Seekonk, Massachusetts;
Monday through Thursday 11am to 9pm; Friday
and Saturday, 11am to midnight

What Browsers Ignore
• Multiple character spaces (white space)
• Line breaks (carriage returns)
• Tabs
• Unrecognized markup

Markup Basics
Text must be marked up meaningfully and accurately
(semantically) with HTML tags:
• Browsers need markup to display content correctly.
• Markup makes content elements available to scripts and
style rules.
• Markup aids search engines.

Anatomy of an HTML Element
tag
The element name in
angle brackets
element
The content and its markup
(start and end tags)

Some Elements Are Empty
Some elements have no content and provide a simple
directive. They are called empty elements:

Attributes
Attributes are instructions that clarify or modify an element.
They appear in the opening tag after the element name:
<element attribute="value">Content</element>
<a href="http://oreilly.com">O’Reilly site</a>

Attributes (cont’d)
There can be more than one attribute in a
tag:
They are separated by spaces and can go in any
order.

Attributes (cont’d)
• Most attributes take values, which follow an = sign; some are
single descriptive words.
• A value might be a number, word, string of text, URL, or
measurement.
• Quotation marks aren’t strictly required but are recommended
for consistency.
• Single or double quotation marks are okay.
• Attribute names and values are defined in the HTML specification.
• Some attributes are required.

Nesting Elements
Putting elements inside other elements is called nesting.
Make sure closing tags don’t overlap:
<div>
<h1>Headline</h1>
<p>This is <em>emphasized</em> text.</p>
</div>

HTML Comments
To leave a note in an HTML document, mark it up as a
comment:

<ul>
…
</ul>

Text between  won’t display in the browser.
Keep in mind that they are still visible in the source.

Minimal Document Structure
It is recommended that HTML documents have the
following minimal structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title here</title>
</head>
<body>

</body>
</html>

Minimal Document Structure (cont’d)
The DOCTYPE declaration lets browsers know that the
document is written according to the HTML5 specification:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
[Page content goes here.]
</body>
</html>

The html element is the root element that contains
all the elements in the document:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

The head element contains elements that pertain to the
document and are not rendered as content, such as
title, metadata, style sheets, and scripts:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

meta elements provide document metadata. In this
case, it says that the document uses an expanded
character set (UTF-8). It could also provide keywords,
author information, publishing status, and more:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

The title element is required. Titles display in the
browser tab and bookmark lists, and are used by search
engines:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Minimal Document Structure (cont’d.)
The body element contains the content of the
document. The content is everything you want to show
up in the browser window:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

A Structured Document
With the document structure in place, there is a
title in the browser tab, but the content is still
unstructured.
<!DOCTYPE html>
<html>
<head>
<title>Black Goose Bistro</title>
</head>
<body>
Black Goose Bistro
The Restaurant
The Black Goose Bistro offers casual
lunch and dinner fare in a relaxed
atmosphere. The menu changes regularly
to highlight the freshest local
ingredients.
…
Location and Hours
Seekonk, Massachusetts;
Monday through Thursday 11am to 9pm;
Friday and Saturday, 11am to midnight
</body>
</html>

Marking Up Content
• The purpose of HTML is to add meaning and structure to the
content. This is called semantic markup.
• It is not intended to describe how the content should look (its
presentation).
• The way elements relate to one another forms an outline-like
structure called the DOM (Document Object Model).
• The DOM is the foundation on which you apply styles and
scripts.

Basic Text Elements
With headings (<h1>) and paragraphs (<p>) identified, the
browser can display the content appropriately:
…
<body>
<h1>Black Goose Bistro</h1>
<h2>The Restaurant</h2>
<p>The Black Goose Bistro
offers casual lunch and
dinner fare in a relaxed
atmosphere. The menu changes
regularly to highlight the
freshest local
ingredients.</p>

</body>

Block and Inline Elements
Block elements
Major components of the page that display like rectangular
blocks stacking up on the page
Example: headings, paragraphs, long quotations
Inline elements
Appear within the text flow of a block element
Example: emphasized text, links, abbreviations

Block and Inline Elements (cont’d)
Block elements (headings, paragraphs) outlined in
RED.
Inline element (emphasized text) outlined in BLUE.

Style Sheets
• HTML only describes structure, not presentation
• Presentation is controlled by style sheets (CSS)
• Browsers have their own style sheets (user agent style
sheets) with default styles for HTML elements
• You can write your own styles to override the default styles

Style Sheets (cont’d)
Margin around
page
Headings bold and
large
Space added above
block elements
Emphasized text
in italic font
The browser parsed the markup and used its built-in style
sheet to format the text elements in the example:

Troubleshooting HTML
Small mistakes and missing characters can cause HTML
documents to “break.”
Common mishaps:
• Missing closing tag (or / in closing tag)
• Missing closing bracket in a tag
• Missing quotation mark around an attribute value
• Not saving your document before viewing changes in
the browser

Troubleshooting (cont’d)
When a slash is omitted, the browser doesn’t know
when the element ends:

Troubleshooting (cont’d)
A missing end bracket makes the browser interpret
all the following characters as part of the tag:

Validating Your Documents
Validate a document to make sure that you have abided by the
HTML rules and that there are no errors:
• Include the DOCTYPE declaration
• Indicate the character encoding
• Include required attributes
• Don’t use non-standard elements
• Don’t mismatch tags
• Nest elements correctly (no overlaps)
• Check for typos and other minor errors

Validating Your Documents
• Use a validator tool
like the one at
html5.validat
or.nu.
• Upload a document
or provide a link,
and the validator
returns an error
report.

• General block elements
• Breaks
• Lists
• Page organizing elements
• Inline elements
• Generic elements
• ARIA introduction
• Escaping characters

Markup Tips
• It is important to mark up content semantically, in a way
that accurately describes the content’s meaning or
function.
• This ensures your content is accessible in the widest range
of viewing environments:
• Desktop and mobile browsers
• Assistive reading devices
• Search engine indexers

Paragraphs
<p> </p>
Paragraphs are the most rudimentary elements in a text document.
<p>Serif typefaces have small slabs at the ends of
letter strokes. In general, serif fonts can make large
amounts of text easier to read.</p>
<p>Sans-serif fonts do not have serif slabs; their
strokes are square on the end. Helvetica and Arial are
examples of sans-serif fonts. In general, sans-serif
fonts appear sleeker and more modern.</p>

Headings
<h#> </h#>
There are six levels of headings (h1 to h6).
<h1>Top-Level Heading</h1>
<p>This is a regular paragraph that will display at the browser's
default font size and weight for comparison.</p>
<h2>Second-Level Heading</h2>
<h3>Third-Level heading</h3>
<p>This is another paragraph for comparison. Of course, you can
change the presentation of all of these elements with your own style
sheets.</p>
<h4>Fourth Level Heading</h4>
<h5>Fifth Level Heading</h5>
<h6>Sixth-Level Heading</h6>
<p>This is another paragraph to show the default relationship of
headings to body paragraphs. Of course, you can change the
presentation of all of these elements with your own style sheets.</p>

Headings (cont’d)
h1
h2
h3
h4
h5
h6

Headings (cont’d)
• Used to create the document outline.
• Help with accessibility and search engine indexing.
• Recommended to start with h1 and add subsequent levels
in logical order.
• Don’t choose headings based on how they look; use a style
sheet to change them.

Long Quotations
(blockquotes)
<p>Renowned type designer, Matthew Carter, has this to say about his
profession:</p>
<blockquote>
<p>Our alphabet hasn't changed in eons; there isn't much latitude in what a
designer can do with the individual letters.</p>
<p>Much like a piece of classical music, the score is written down. It's
not something that is tampered with, and yet, each conductor interprets that
score differently. There is tension in the interpretation.</p>
</blockquote>
<blockquote> </blockquote>

Preformatted Text
<pre> </pre>
Preformatted text preserves white space when it is important for
conveying meaning. By default, pre text displays in a constant-width
font, such as Courier.
<pre>
This is an example
of
text with a lot of
curious
whitespace.
</pre>

Line Breaks
<br>
The empty br element inserts a line break.
<p>So much depends <br>upon <br><br>a red wheel
<br>barrow</p>

Thematic Breaks (Horizontal Rules)
<hr>
Indicates one topic has completed and another one is beginning.
Browsers display a horizontal rule (line) in its place:
<h3>Times</h3>
<p>Description and history of the Times
typeface.</p>
<hr>
<h3>Georgia</h3>
<p>Description and history of the Georgia
typeface.</p>

Lists
There are three types of lists in HTML:
• Unordered lists
• Ordered lists
• Description lists

Unordered Lists
In unordered lists items may appear in any order (examples,
names, options, etc.). Most lists fall into this category.
<ul> </ul> Defines the whole list
<li> </li> Defines each list item

Unordered Lists (cont’d)
<ul>
<li>Serif</li>
<li>Sans-serif</li>
<li>Script</li>
<li>Display</li>
<li>Dingbats</li>
</ul>
You can change the
appearance of the
list dramatically
with style sheet
rules.

Ordered Lists
In ordered lists items occur in a particular order, such as step-
by-step instructions or driving directions.
<ol> </ol> Defines the whole list
<li> </li> Defines each list item

Ordered Lists (cont’d.)
<ol>
<li>Gutenberg develops moveable type
(1450s)</li>
<li>Linotype is introduced (1890s)</li>
<li>Photocomposition catches on (1950s)</li>
<li>Type goes digital (1980s)</li>
</ol>

Description Lists
Description lists are used for any type of name/value
pairs, such as terms/definitions, questions/answers, etc.
<dl> </dl> Defines the whole list
<dt> </dt> Defines a name, such as a term
<dd> </dd> Defines a value, such as a definition

Description Lists (cont’d)
<dl>
<dt>Linotype</dt>
<dd>Line-casting allowed type to be selected, used, then
recirculated
into the machine automatically. This advance increased the speed of
typesetting and printing dramatically.</dd>
<dt>Photocomposition</dt>
<dd>Typefaces are stored on film then projected onto photo-sensitive
paper. Lenses adjust the size of the type.</dd>
</dl>

Page Organizing Elements
HTML5 introduced elements that give meaning to the typical
sections of a web page:
• main
• header
• footer
• section
• article
• aside
• nav

Main Content
<main> </main>
• Identifies the primary content of a page or application
• Helps users with screen readers get to the main content of
the page
• Requires JavaScript workaround in Internet Explorer
<body>
<header>…</header>
<main>
<h1>Humanist Sans
Serif</h1>
…content continues…
</main>
</body>

Headers and Footers
<header> </header>
<footer> </footer>
header identifies the introductory material that comes at
the beginning of a page, section, or article (logo, title,
navigation, etc.).
footer indicates the type of information that comes at the
end of a page, section, or article (author, copyright, etc.)

Headers and Footers (cont’d)
<article>
<header>
<h1>More about WOFF</h1>
<p>by Jennifer Robbins, <timedatetime="2017-11-11">
November 11, 2017</time></p>
</header>

<footer>
<p><small>Copyright ©2017 Jennifer
Robbins.</small></p>
<nav>
<ul>
<li><a href="/">Previous</a></li>
<li><a href="/">Next</a></li>
</ul>
</nav>
</footer>
</article>

Sections
<section> </section>
section identifies thematic section of a page or an article.
It can be used to divide up a whole page or a single article:
<section>
<h2>Typography Books</h2>
<ul>
<li>…</li>
</ul>
</section>
<section>
<h2>Online Tutorials</h2>
<p>These are the best tutorials on the
Web.</p>
<ul>
<li>…</li>
</ul>
</section>

Articles
<article> </article>
article is used for self-contained works that could stand alone or
be used in a different context (such as syndication).
Useful for magazine/newspaper articles, blog posts, comments, etc.
<article>
<h1>Get to Know
Helvetica</h1>
<section>
<h2>History of
Helvetica</h2>
<p>…</p>
</section>
<section>
<h2>Helvetica Today</h2>
<p>…</p>
</section>
</article>

Aside (Sidebar)
<aside> </aside>
aside identifies content that is separate from but tangentially
related to the surrounding content (think of it as a sidebar).
<h1>Web Typography</h1>
<p>Back in 1997, there were competing font formats and tools
for making them…</p>
<p>We now have a number of methods for using beautiful fonts
on web pages…</p>
<aside>
<h2>Web Font Resources</h2>
<ul>
<li><a href="http://typekit.com/">Typekit</a></li>
<li><a href="http://fonts.google.com">Google Fonts</a></li>
</ul>
</aside>

Navigation
<nav> </nav>
nav identifies the primary navigation for a site or lengthy section
or article. It provides more semantic meaning than a simple
unordered list.
<nav>
<ul>
<li><a href="/">Serif</a></li>
<li><a
href="/">Sans-serif</a></li>
<li><a href="/">Script</a></li>
<li><a href="/">Display</a></li>
<li><a href="/">Dingbats</a></li>
</ul>
</nav>

Inline Elements
• Called text-level semantic elements in the spec.
• Describe the types of elements that appear in the flow of
text.
a
em
strong
q
abbr
cite
dfn
code
var
samp

Inline Elements
Emphasis
<em> </em>
Text that should be emphasized. Usually displayed in italics.
<p><em>Arlo</em> is very smart.</p>
<p>Arlo is <em>very</em> smart.</p>
<strong></strong>
Text that is important, serious, or urgent. Usually displayed in bold.
<p>When returning the car, <strong>drop the keys in the red
box by the front desk</strong>.</p>
TIP: Use these elements semantically, not to achieve font styles.
Think of how it would be read with a screen reader.

Inline Elements
Short Quotations
<q> </q>
For quoted phrases in the flow of text. Browsers add
appropriate quotation marks automatically.
<p>Matthew Carter says, <q>Our alphabet hasn't changed in
eons.</q></p>

Inline Elements
Abbreviations and Acronyms
<abbr> </abbr>
The title attribute provides the long version of a shortened
term, which is helpful for search engines and assistive devices.
<abbr title="Points">pts.</abbr>
<abbr title="American Type Founders">ATF</abbr>

Inline Elements
Superscript and Subscript
<sup> </sup>
<sub> </sub>
Causes the selected text to display in a smaller size and
slightly above (sup) or below (sub) the baseline.
<p>H<sub>2</sub>0</p>
<p>E=MC<sup>2</sup></p>

Inline Elements
Citations
<cite> </cite>
Identifies a reference to another document.
<p>Passages of this article were inspired by <cite>The
Complete Manual of Typography</cite> by James
Felici.</p>

Inline Elements
Defining Terms
<dfn> </dfn>
Identifies the first and defining instance of a word in a document.
There is no default rendering, so you need to format them using
style sheets.
<p><dfn>Script typefaces</dfn> are based on
handwriting.</p>

Inline Elements
Code-Related Elements
<code> </code> Code in the flow of text
<var> </var> Variables
<samp> </samp> Program sample
<kbd> </kbd> User-entered keyboard strokes

Inline Elements
New Semantic Definitions for
Old Presentational Inline Elements
<b> </b> Phrases that need to stand out without added emphasis or importance
(bold)
<i> </i> Phrases in a different voice or mood than the
surrounding text (italic)
<s> </s> Text that is incorrect (strike-through)
<u> </u> Underlined text, when underlining has semantic
purpose
<small> </small> Addendum or side note (smaller text size)

Inline Elements
Highlighted Text
<mark> </mark>
For phrases that may be particularly relevant to the reader (for example,
when displaying search results):
<p> ... PART I. ADMINISTRATION OF THE GOVERNMENT. TITLE IX. TAXATION.
CHAPTER 65C. MASS. <mark>ESTATE TAX</mark>. Chapter 65C:
Sect. 2. Computation of <mark>estate tax</mark>.</p>

Inline Elements
Dates and Times
<time> </time>
Provides machine-readable equivalents for dates and times.
The datetime attribute specifies the date/time information in a
standardized time format:
<time datetime="1970-09-05T01:11:00">Sept.5, 1970,
1:11a.m.</time>

Inline Elements
Machine-Readable Information
<data> </data>
Helps computers make sense of content.
The value attribute provides the machine-readable information.
<data value="12">Twelve</data>
<data value="978-1-449-39319-9">CSS: The
Definitive Guide</data>

Inline Elements
Inserted and Deleted Content
<ins> </ins>
<del> </del>
Markup for edits indicating parts of a document that have
been inserted or deleted:
Chief Executive Officer: <del title="retired">Peter
Pan</del><ins>Pippi Longstocking</ins>

Generic Elements
<div> </div>
Indicates division of content (generally block-level)
<span> </span>
Indicates a word or phrase
• Generic elements are given semantic meaning with the id
and class attributes.
• They are useful for creating “hooks” for scripts and style
rules.

Div Example
Use the div element to create a logical grouping of content or
elements on the page.
It indicates that they belong together in some sort of
conceptual unit or should be treated as a unit by CSS or
JavaScript.
<div class="listing">
<img src="images/felici-cover.gif" alt="">
<p><cite>The Complete Manual of Typography</cite>, James
Felici</p>
<p>A combination of type history and examples of good and
bad type design.</p>
</div>

Span Example
Use the span element for text and other inline elements for
which no existing inline element currently exists.
In this example, a span is used to add semantic meaning to
telephone numbers:
<ul>
<li>John: <span class="tel">999.8282</span></li>
<li>Paul: <span class="tel">888.4889</span></li>
<li>George: <span
class="tel">888.1628</span></li>
<li>Ringo: <span
class="tel">999.3220</span></li>
</ul>

id and class Attributes
id
Assigns a unique identifier to the element.
class
Classifies elements into a conceptual group.
Use the id attribute to identify.
Use the class attribute to classify.
NOTE: id and class can be used with all HTML elements.

The id Attribute
The value of an id attribute must be used only once in a document.
Here it identifies a listing for a particular book by its ISBN:
<div id="ISBN0321127307">
<img src="felici-cover.gif" alt="">
<p><cite>The Complete Manual of Typography</cite>, James
Felici</p>
<p>A combination of type history …</p>
</div>
Here it identifies a particular section of a document:
<section id="news">

</section>

The class Attribute
A class value may be used by multiple elements to put them in
conceptual groups for scripting or styling.
Here several book listings are classified as a “listing”:
<div id="ISBN0321127307" class="listing">
…
</div>
<div id="ISBN0881792063" class="listing">
…
</div>
An element may belong to more than one class. Separate class values
with character spaces:
<div id="ISBN0321127307" class="listing book nonfiction">

Brief ARIA Introduction
ARIA (Accessible Rich Internet Applications)
is a standardized set of attributes for making pages easier to
navigate and use with assistive devices.
ARIA defines roles, states, and properties that
developers can add to markup and scripts to provide richer
information.
www.w3.org/TR/html-a
ria

ARIA Roles
Roles describe or clarify an element’s function in the
document.
Examples: alert, button, dialog, slider, and
menubar
<div id="status" role="alert">You are no longer
connected to the server.</div>

ARIA States and Properties
• ARIA defines a long list of states and properties that
apply to interactive elements and dynamic content.
• Properties values are likely to be stable
(example: aria-labelledby).
• States have values that are likely to change as the user
interacts with the content (example: aria-selected).

Escaping Characters
Escaping a character means representing it by its named or
numeric character entity in the source.
• Some characters must be escaped because they will be
mistaken for code (example: the < character would be
parsed as the start of an HTML tag).
• Some characters are invisible or just easier to escape than
find on the keyboard.

Character Entity References
Character entities always begin with & and end with ;.
Named entities
Use a predefined name for the character
(example: < for the less-than symbol <)
Numeric entities
Use an assigned numeric value that corresponds to its
position in a coded character set, such as UTF-8
(example: < for the less-than symbol <).
A complete list of HTML named entities and their Unicode code-
points is at
www.w3.org/TR/html5/syntax.html#named-character-references.

Character Description Entity name Decimal Hexadecimal
< Less-than symbol < < <
> Greater-than symbol > > >
" Quote "   "
'
Apostrophe ' ' '
& Ampersand & & &
Escaping HTML Syntax
Characters
Always escape <, >, and & characters in content.
Escape " and ' when they are in attribute values.
(Additional non-required character entities are listed in Chapter 5.)

• The a element
• External links with absolute URLs
• Links with relative pathnames
• Linking within a page (fragments)
• Targeting browser windows
• Mail links

Adding Links
<a> </a>
<a href="URL">Link text or image</a>
The href attribute provides the location (URL) of the
resource.
You can link to any resource:
• HTML documents
• Images
• Movies
• PDFs
• More!

href Attributes
• Absolute URLs begin with the protocol (ex:
http://).
• Relative URLs provide the path to a file on the same
server as the document containing the link
(ex: /directory/document.html).
• Long URLs can make the markup look complicated,
but the structure is the same:

External Links
• External links go to pages that are not on your server.
• An absolute URL is required, including “http://”
<li><a
href="http://www.foodnetwork.com">The
Food Network</a></li>

Linking on Your Own Site
• When no protocol is provided, the browser looks on the
current server for the resource.
• A relative pathname describes how to get to the
resource starting from the current document.
• Pathnames follow UNIX syntax conventions.

Example Server Directory
Structure
The following relative
pathname discussions
are based on this site
structure.
The root directory is
called jenskitchen.
How it looks in the
MacOS Finder

Linking in the Same Directory
When the linked
document is in the
same directory as
the current
document, just
provide its
filename:
href="about.html"

Linking into a Lower Directory
If the linked file is in a directory, include the directory
name in the path.
href="recipes/salmon.html"

Linking into Two Directories
Include each subdirectory name in the path to the linked
document:
href="recipes/pasta/couscous.html"

Linking to a Higher Directory
To back up a level, the ../ stands in for the name of the
higher directory:
href="../index.html"

Linking Up Two Directory Levels
Include a ../ for each level you need to back up to:
href="../../index.html"

Site Root Relative Paths
Starting the path with a slash / means the pathname starts at
the root directory. You don’t need to write the name of the
directory.
href="/recipes/salmon.html”
NOTE: Site root relative
URLs are more flexible
because they work from
any document on the
site.
DOWNSIDE: They won’t
work on your own
computer because the /
will be relative to your
hard drive. You’ll need
to test it on the actual
web server.

Image src Pathnames
Relative pathnames are also commonly used to point to
image files with the src attribute:
<img src="/images/icons/next.svg" alt="next">

Linking Within a Page (Fragments)
Linking to a specific
point on a web page
is called linking to a
document fragment.
This is useful for
providing links down
to content from the
top of a long
document.

Linking to a Fragment
For example, to create a link from the letter H in a list at the top of
the page to the “H” heading farther down in the document:
Step 1: Identify the target destination.
Use the id attribute to give the target element a unique name:
<h2 id="startH">H</h2>
Step 2: Link to the target (#).
The # symbol before the name indicates that the link goes to a
fragment:
<p>… F | G | <a href="#startH">H</a> | I | … </p>

Targeting Browser Windows
The target attribute in the a tag tells the browser the name of
the window in which you want the linked document to open:
<a href="recipes.html" target="_blank">Recipe book</a>
target="_blank"
Always opens a new browser window.
target="name"
Opens a new window with that name and then opens all
subsequent targeted links with that name in the same window.
It may also open in an embedded frame (iframe) with that name.

Mail Links
Use the “mailto” protocol to make a linked email
address open in a mail program:
<a href="mailto:wonderwoman@example.com">Email
WonderWoman</a> (wonderwoman@example.com)
NOTE: Most browsers are configured to open the
computer’s primary email program, but this may
not work for some users. Be sure the email
address is included on the page and use the
mailto link as progressive enhancement.

• Web image formats
• The img element
• Attributes for the img element
• Adding an SVG to a page

Web Image Formats
Image formats appropriate for web pages:
• PNG
• JPEG
• GIF
• SVG
• WebP (up and coming, not yet widely supported)

Bitmapped vs. Vector Formats
PNG, JPEG,
GIF, and WebP
are bitmapped
formats.
SVG is a vector
format.

The img Element
<img src="" alt="">
• Embed images on the page with the empty img element.
• The src and alt attributes are required.
• img can be used for PNG, JPEG, GIF, and SVG.
NOTE: Special markup is recommended for experimenting with
cutting-edge image formats like WebP.

The img Element (cont’d)
<p>This summer, try making pizza <img src="pizza.png"
alt="">
on your grill.</p>
The img element tells the browser to make a server request
for the image and display it in its place:

The src attribute
• The value is the location (URL) of the image file.
• Use the relative pathname conventions to point to the
image on the server.
PERFORMANCE TIP: Take advantage of caching
(temporary storage). For the same image used repeatedly, using the
same pathname reduces the number of calls to the server.
<img src="/images/icon/next.png"
alt="Next">

The alt Attribute
• The alt attribute provides
alternative text for those
who are not able to see it.
• It is required for every img
element in order for the HTML to
be valid.
• It is used by screen readers,
search engines, and graphical
browsers when the image fails to
load.
<p> If you're <img src="/images/smiley.png" alt="happy"> and
you know it, clap your hands.</p>

Alternative Text Tips
• Alternative text (alt text) should convey the same information and
function as the image.
• If the image is purely decorative and shouldn’t be read aloud,
include the alt attribute with an empty value:
<img src="flowers.svg" alt="">
• Consider what the alt text would sound like when read aloud by a
screen reader. Is it helpful or a hindrance?
• When an image is used as a link, the alt text serves as the linked
text. Write what you’d want the link to say, don’t just describe the
image.
• Avoid starting alt text with “An image of” or “Graphic of”.

width and height Attributes
• The width and height attributes set the dimensions of the
image on the page in number of pixels.
• They help the browser maintain space for the image in the layout
while the files load.
• Don’t use width and height attributes if you are sizing the
image with style sheets or if the size changes in a responsive layout.
• If the attribute values do not match the dimensions of the image,
the image will resize and may be distorted or blurry.
<img src="flowers.svg" alt="" width="120" height="160">

Adding SVG Images
SVG images are unique:
• SVG is a vector format, made up of shapes and paths.
• Those shapes and paths are described in a text file using
the Scalable Vector Graphic markup language.
• The elements in an SVG can be styled with CSS and
scripted for interactivity.
• Because they are vector, SVGs can resize with no loss of
quality.

SVG Example
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 180">
<rect width="300" height="180" fill="purple" rx="20" ry="20"/>
<text x="40" y="114" fill="yellow" font-family="'Verdana-Bold'"
font-size="72">
hello!
</text>
</svg>
Compare the SVG source to the image. The svg element
contains a rectangle (rect element) and a text element:

Adding SVG to a Page
There are several ways to add an SVG image to a web page:
• <img> element
• <object> element
• <svg> element directly in HTML (inline SVG)

Adding SVG with the img Element
You can add an .svg file to the page with the img element:
<img src="/images/circle.svg" alt="">
PROS:
• Easy and familiar
• Universally supported
CONS:
• Can’t manipulate the SVG with scripts or styles.
• The SVG can’t contain any external resources such as
images or fonts.

Embedding SVGs with object
The content of the object element is a fallback text or image that
displays if the SVG is not supported:
<object type="image/svg+xml" data="pizza.svg">
<img src="pizza.png" alt="pizza">
</object>
PROS:
• SVG can be scripted and use eternal files (images and fonts).
CONS:
• You can’t change styles with the same CSS used for the document.
• May be buggy in some browsers.

Inline SVGs with the svg
Element
You can paste the content of the SVG text file directly into the HTML
source. This is called using the SVG inline.
PROS:
• Can take full advantage of scripting and styling the SVG because
the elements in the SVG are part of the DOM for the document.
CONS:
• Code can get extremely long and unwieldy.
• Harder to maintain images embedded in the source
• Can’t take advantage of caching repeated images
• Not universally supported

Example of an Inline SVG
<p>This summer, try making pizza
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" width="100"
height="100">
<circle fill="#D4AB00" cx="36" cy="36" r="36"/>
<circle opacity=".7" fill="#FFF" stroke="#8A291C" cx="36.1" cy="35.9" r="31.2"/>
<circle fill="#A52C1B" cx="38.8" cy="13.5" r="4.8"/>
<circle fill="#A52C1B" cx="32" cy="37.2" r="4.8"/>
<circle fill="#A52C1B" cx="56" cy="28.3" r="4.8"/>
</svg>
on your grill.</p>

• How responsive images work
• High-density displays
• Variable-width images
• Art direction with the picture element
• Alternative image types

About Responsive Images
• Responsive image markup allows us to deliver
images that are appropriate for the user’s
viewing environment.
• How it works:
• You provide multiple image versions.
• You specify sizes and preferences with
responsive image markup.
• The browser makes the final selection.

About Responsive Images (cont’d)
• Responsive image markup addresses four scenarios:
• Sending larger images to high-density screens
• Sending a variety of image sizes for different
screen sizes
• Sending alternately cropped images for small
screens (art direction)
• Providing alternative image formats with smaller
file sizes to supporting browsers

High-Density Displays
(x-descriptor)
• Screens and images are made up of squares of colored
light called pixels. T
• On standard screens, the pixels in an image and CSS
measurements map one-to-one with the device pixels.
• High-density displays fit 2x, 3x, or 4x the number of
device pixels in the same amount of space.
• High-density devices use a measurement called
reference pixels for page layout. Images and CSS
measurements map with the reference pixel grid (not
the tiny device pixels).

High-Density Displays (cont’d)

• In order for images to look sharp and not blurry on
high-density displays, they need to map with the
device pixels.
• Example:
• For an image that displays at 200 pixels wide in the
layout, provide these versions:
• 200px wide image for standard screens
• 400px wide image for 2x high-density screens

• The srcset attribute in the img element lists image
alternatives based on pixel density, specified with an x-
descriptor (#x):
<img src="/images/photo-200px.jpg" alt=""
srcset="/images/photo-400px.jpg 2x,
/images/photo-600px.jpg 3x" >
• The src attribute is required. Use it for the standard image.
• The srcset value is a comma-separated list of alternative
image URLs followed by an x-descriptor.
• A device with a standard screen density gets only the 200px
wide version of the image. Higher densities get larger
images.

• X-descriptors tell the browser to make an image
selection based on screen resolution only.
• Use x-descriptors for images that stay the
same pixel dimensions regardless of the screen
size and layout changes.

Variable-Width Images
(w-descriptor)
• When images resize based on the size of the
screen or browser window (such as in a
responsive layout). Use the srcset attribute
with a w-descriptor and the sizes attribute to
make a viewport-based selection:

Variable-Width Images (cont’d)
<img src="strawberries-640.jpg"
alt="baskets of ripe strawberries"
srcset="strawberries-480.jpg 480w,
strawberries-960.jpg 960w,
strawberries-1280.jpg 1280w,
strawberries-2400.jpg 2400w"
sizes="100vw">
• The src attribute is required and specifies the default image size.
• The value of srcset is a comma-separated list of images and w-
descriptors.
• w-descriptors list the actual image width (in pixels).
• The sizes attribute specifies the size at which the image appears in the
layout. In this example, it is 100% the width of the browser (100 viewport-
width units).

Variable-Width Images (cont’d)
• If the image proportion changes based on the
size of the viewport, use a media condition in
the sizes attribute to test for the screen width

Variable-Width Images (cont’d.)
• <img src="strawberries-640.jpg" alt="baskets of ripe strawberries"
• srcset="strawberries-240.jpg 240w,
• strawberries-480.jpg 480w,
• strawberries-672.jpg 672w"
•
sizes="(max-width: 480px) 100vw,
• (max-width: 960px) 70vw,
•
240px">
• If the viewport is 480 pixels or less, the image fills 100% of the viewport width.
• If the viewport is wider than 480 pixels but less than 960 pixels (max-
width: 960px), the image appears at 70% of the viewport width.
• If the viewport is wider than 960 pixels, the image gets sized to exactly 240
pixels.
• Now that the browser knows the width of the viewport and how big the image
will appear within it, it can select the most appropriate image from the
srcset list to download.

Art Direction Selection
(picture element)
• Details may be lost in images scaled down to fit
small screens.
• To change the image itself rather than just resizing
it, make an art-direction-based selection with the
picture and source elements:
• Provide differently cropped versions.
• Provide both landscape (wide) and portrait (tall)
versions.
• Change or remove text in images to keep it legible.

Art Direction Selection (cont’d)

Art Direction Selection (cont’d)
• <picture>
•
<source media="(min-width: 1024px)" srcset="icecream-
large.jpg">
•
<source media="(min-width: 760px)" srcset="icecream-
medium.jpg">
• <img src="icecream-small.jpg" alt="hand holding ice cream cone and
text that reads Savor the Summer">
• </picture>
• The picture element has no
attributes; it is a wrapper for source
and img elements.
• The img element is required and
must go last in the list.
• source elements test for media
conditions (media attribute) and
provide alternative image options for
each size (srcset).

Alternative Image Formats
(type Attribute)
• New, efficient image formats (WebP, JPEG 2000, and JPEG
XR) are available, but aren’t supported by every browser.
• Use the picture and source elements with the type
attribute for image-format-based selections:
• <picture>
•
<source type="image/webp" srcset="pizza.webp">
•
<source type="image/jxr" srcset="pizza.jxr">
• <img src="pizza.jpg" alt="">
• </picture>
• Browsers use the first image format they support and
don’t download the rest.

Browser Support
• picture, source, srcset, and sizes are
supported by all current browser versions.
• Every technique includes a standards img
element as a reliable fallback.
• For better support, use the Picturefill polyfill
script that makes older browsers support the
new markup (scottjehl.github.io/picturefill).

• How tables are structured
• Table headers
• Cell spanning (rows and columns)
• Table captions
• Row and column groups

Tabular Data
HTML table markup is for data arranged into rows and columns.

HTML Table Structure
Tables are made up of cells arranged into
rows.
A simple
table

HTML Table Structure (cont’d.)
How it looks using markup (table, tr, th, and td):
NOTE: Columns are implied by the number of cells in each row (not
created with column elements).

HTML Table Structure (cont'd)
The same table written in
code:
<table>
<tr>
<th>Menu item</th>
<th>Calories</th>
<th>Fat (g)</th>
</tr>
<tr>
<td>Chicken noodle
soup</td>
<td>120</td>
<td>2</td>
</tr>
<tr>
<td>Caesar salad</td>
<td>400</td>
<td>26</td>
</tr>
</table>
Default browser display:

The table Element
<table> </table>
• Identifies tabular material
• Contains some number of row (tr) elements
• Optionally, may also have a caption element and row
and column group elements

Table Row (tr) Element
<tr> </tr>
• tr stands for “table row.”
• The only thing that can go between tr tags is some
number of th (header) and td (data cell) elements.
• There may be no text content in a row that is not
contained within a header or data cell.

Table Cells
<td> </td>
• td stands for “table data.”
• Cells can contain any type of web content.
• All content in a table must be contained in td tags.

Table Headers
<th> </th>
• th stands for “table header.”
• Headers provide information about the cells in the row or
column they precede.
• They are key tools for making table content accessible.
Screen readers may read headers aloud before each data
cell, providing context that is missing when you can’t see
the table.
• Headers are often rendered in a bold font by default.

Table Columns Are Implied
<table>
<tr>
<th>Burgers</th>
<td>Organic Grass-fed
Beef</td>
<td>Black Bean Veggie</td>
</tr>
<tr>
<th>Fries</th>
<td>Hand-cut Idaho
potato</td>
<td>Seasoned sweet
potato</td>
</tr>
</table>
This table would have 2 rows and 3 columns
(because there are 3 cells defined in each row):

Spanning Cells
Spanning
Stretching a cell to cover several rows or columns
Column span
Stretching a cell to the right over subsequent columns
Row span
Stretching a cell downward over several rows

Column Spans
<table>
<tr>
<th colspan="2">Fat</th>
</tr>
<tr>
<td>Saturated Fat (g)</td>
<td>Unsaturated Fat
(g)</td>
</tr>
</table>
Notice that the first tr element only has one cell in it now. Every row
should have the same number of cells or equivalent colspan values.
Use the colspan attribute to specify the number of columns the cell
should span over:

Row Spans
<table>
<tr>
<th rowspan="3">Serving
Size</th>
<td>Small (8oz.)</td>
</tr>
<tr>
<td>Medium (16oz.)</td>
</tr>
<tr>
<td>Large (24oz.)</td>
</tr>
</table>
The rowspan attribute to specifies the number of rows the cell spans:
Notice that the td elements that were spanned over are no longer
in the source.

Table Caption
<caption> </caption>
• Provides a title or description for the table
• Improves table accessibility
• The caption element must appear first in the table
element.
• The caption displays above the table by default.

Table Caption (cont’d)
<table>
<caption>Nutritional
Information</caption>
<tr>
<th>Menu item</th>
<th>Calories</th>
<th>Fat (g)</th>
</tr>
…table continues…
</table>

Row and Column Groups
• For complicated tables, you can create semantic
groups of rows and/or columns that describe the
table’s structure.
• Row group and column group elements also provide
more “hooks” for scripting and styling.

Row Groups
<thead> </thead>
<tbody> </tbody>
<tfoot> </tfoot>
• Provide additional semantic structure
• Row group elements may contain one or more tr
elements (no direct text content).
• Some browsing agents may repeat the header and footer
rows on tables that span multiple pages.

Row Groups (cont’d)
<table>
…
<thead>

<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
<tfoot>

<tr></tr>
</tfoot>
</table>
NOTE: this table also
utilizes row and column
spans.

Column Groups
<colgroup> </colgroup>
<col> </col>
• Allows you to assign id and class names to columns so
they can be accessed by scripts or styles
• colgroup elements go at the start of the table, after the
caption element if there is one.
• colgroup elements contain no content; they only
provide an indication of column structure

Column Groups (cont’d)
If you need to access
individual columns, identify
them with col elements:
<table>
<caption>…</caption>
<colgroup></colgroup>
<colgroup
span="2"></colgroup>
<colgroup
span="2"></colgroup>

The number of columns in
a group is noted with the
span attribute:
<colgroup></colgroup>
<colgroup>
<col
class="start">
<col class="end">
</colgroup>
<colgroup>
<col
class="start">
<col class="end">
</colgroup>

• How forms work
• The form element
• Text entry controls
• Buttons
• Menus
• Specialized inputs
• Form accessibility
• Form design tips

How Forms Work
Web forms have two components:
• The form on the page that collects input
• An application on the server that processes the
collected information

4. The application
processes the
information.
5. The application returns
a response (for example,
a thank you message or
reloading the page).
1. Browser renders the
form inputs as indicated
in the markup.
2. User enters
information in the form
and hits Submit.
3. The browser encodes
the information entered
and sends it to the
server.
Web Form
Transaction

Web Processing Applications
Web forms may be processed by any of the following
technologies:
• PHP (.php)
• Microsoft ASP (.asp)
• Microsoft ASP.net (.aspx)
• Ruby on Rails
• JavaServer Pages (.jsp)
• Python

The form Element
<form action="URL" method="POST or GET">

</form>
• The form element is a container for all the content in the
form and its input controls.
• The action and method attributes are necessary for
interacting with the processing program.

The action Attribute
The action attribute provides the location of the script or
application that will process the collected form data.
<form action="mailinglist.php" method="POST">

The method Attribute
The method attribute specifies how the encoded information should be
sent to the server (GET or POST):
• GET: The encoded data is tacked onto the URL sent to the server:
get http://www.bandname.com/mailinglist.php?name=Sally
%20Strongarm&email=strongarm%40example.com
• POST: Data is send in a separate transaction and can be encrypted
with HTTPS.
NOTE: POST is the most common method.
<form action="mailinglist.php" method="POST">

Form Control Elements
<input type="text">
<input type="submit">
<input type="checkbox">
<select>
Form control elements (also called widgets) collect
data from the user. A few examples:

Form controls collect data in variable/value pairs.
Examples:
variable = "email"
value = jen@example.com
variable = "color"
value = green
Form Control Elements (cont’d)

Variables (the name Attribute)
• A variable is a bit of information collected by a form
control (example: the user’s last name).
• The required name attribute in the control element provides
the name of the variable for that control:
<input name="lastname">
NOTE: The variable name is also programmed into the web
processing script or app, so the name in the markup must match the
name in the processor.

Values
• The data entered or selected by the user in the form
control is the value that gets sent to the server. It is
paired with the variable for that control.
• You can provide a default value with the value attribute:
Name: <input name="lastname" value="Unknown">
In this example, if the text input is left blank, the value “Unknown”
would be sent to the server for the variable “lastname”.

FORM CONTROL ELEMENTS
Text Entry Input
<input type="text" name="color" value="Red" maxlength="24">
type: Type of input control, in this case a single-line text field
name: Required variable name
value: Default text that appears in the field and is sent to server if the
field is left blank
maxlength, minlength: Sets a character limit for the field
size: The length of the field in number of characters (CSS is more
common for sizing)
<input type="text">

Password Field
<input type="password" name="pswd" maxlength="10">
• Like a text entry field, except the characters are obscured
from view
• The data entered is not encrypted on the way to the server
(unless it uses HTTPS, a secure web protocol).
<input type="password">

Multi-line Text Entry
<textarea name="entry" rows="6" cols="64">This band is totally
awesome!</textarea>
The content of the textarea element is the default value.
rows: The number of rows tall the field is initially drawn (users can write
more)
cols: Width of initial text field, in number of characters
maxlength, minlength: Limits the number of characters that can be
entered
<textarea> </textarea>

• These input types are more semantically rich than a
default text field.
• Browsers may provide keyboards tailored to the input
type.
• Browsers may validate entries on the fly without using
the server application.
Specialized Text Entry Fields
<input type="search">
<input type="email">
<input type="tel">
<input type="url">

Specialized Text Entries (cont’d)
<input type="tel" name=""> <input type="email" name="">
Numerical keyboard provided on
iOS
Opera looks for email address
structure

Submit and Reset Buttons
<input type="submit">
• Submits the collected form data to the server. Does not require
a variable name (name attribute):
<input type="reset" value="Start over">
• Resets the form to its defaults
• Less common with the rise of JavaScript for form handling
• Change the button text with the value attribute.

Custom Buttons
<button> </button>
The button element is used for creating custom buttons
with JavaScript.
<input type="button">
Creates a custom button that has no predefined function and
can be customized with JavaScript
<input type="image" alt="">
Allows an image to be used as a button to replace the Submit
button. It requires a descriptive alt attribute value.

Radio Buttons
<p>How old are you?</p>
<ol>
<li><input type="radio" name="age" value="under24" checked> under
24</li>
<li><input type="radio" name="age" value="25-34"> 25 to 34</li>
<li><input type="radio" name="age" value="35-44"> 35 to 44</li>
<li><input type="radio" name="age" value="over45"> 45+</li>
</ol>
NOTE: You can’t belong to more than one age group, so radio
buttons are the right choice for this list.
Only one radio button
may be selected at a
time.
<input type="radio">

Radio Buttons (cont’d.)
• Applying the same variable name to input elements binds
them together as a mutually exclusive set of options.
• The value for each button must be provided with the
value attribute.
• The checked attribute causes an option to be selected
when the page loads. Only one input may be checked.
<input type="radio" value="">

Checkbox Buttons
NOTE: You can like more than one type of music, so checkbox
buttons are the right choice for this list.
<p>What type of music do you listen to?</p>
<ul>
<li><input type="checkbox" name="genre" value="punk" checked> Punk rock</li>
<li><input type="checkbox" name="genre" value="indie" checked> Indie
rock</li>
<li><input type="checkbox" name="genre" value="hiphop"> Hip Hop</li>
<li><input type="checkbox" name="genre" value="rockabilly"> Rockabilly</li>
</ul>
Multiple checkbox
buttons may be selected.
<input type="checkbox">

Checkbox Buttons (cont’d)
• Applying the same variable name to input elements binds
them together as a group.
• The value for each button must be provided with the
value attribute.
• The checked attribute causes an option to be selected
when the page loads. Multiple buttons in a group may be
checked.
<input type="checkbox" value="">

Drop-down Menus
• The select element creates a drop-down menu when there is
no size attribute (or if size="1").
• The select element contains some number of option
elements.
• The content of the option element is the value sent to the
server (or one can be provided with the value attribute).
<select> </select>
<option> </option>
<optgroup> </optgroup>

Drop-down Menus (cont’d.)
<p>What is your favorite 80s band?
<select name="EightiesFave">
<option>The Cure</option>
<option>Cocteau Twins</option>
<option>Tears for Fears</option>
<option>Thompson Twins</option>
<option value="EBTG">Everything But the
Girl</option>
<option>Depeche Mode</option>
<option>The Smiths</option>
<option>New Order</option>
</select>
</p>
The select menu drops down to reveal options when the
user clicks on it.

Scrolling Menus
• The same markup as drop-down menus, but the size attribute
specifies how many lines to display.
• The multiple attribute allows more than one option to be
selected.
<p>What is your favorite 80s band?
<select name="EightiesFave" size="6"
multiple>
<option>The Cure</option>
...
</select>
</p>

Scrolling Menus (cont’d)
Use the optgroup element to create a conceptual group of options.
The label attribute provides the the heading for the group:
<select name="icecream" size="7"
multiple>
<optgroup label="traditional">
<option>vanilla</option>
<option>chocolate</option>
</optgroup>
<optgroup label="fancy">
<option>Super praline</option>
<option>Nut surprise</option>
<option>Candy corn</option>
</optgroup>
</select>

File Upload Control
• The file input type allows a user to select a document from their
hard drive to be submitted with the form data.
• The method must be set to POST, and the encoding type must be
included.
<form action="/client.php" method="POST" enctype="multipart/form-data">
<label>Send a photo to be used as your online icon <em>(optional)</em><br>
<input type="file" name="photo"></label>
</form>
<input type="file">

Hidden Control
• Sometimes it is necessary to feed values to the processing
script/app that don’t come from the user.
• Hidden controls don’t display in the browser.
<input type="hidden">
<input type="hidden" name="success-link"
value="http://www.example.com/thankyou.html">

Date and Time Controls
A starting value may be provided in standard date-time format.
<input type="date">
<input type="time">
<input type="datetime-local">
<input type="month">
<input type="week">
<input type="date" name="birthday" value="2017-01-
14">

Date and Time Controls (cont’d)
Browsers may display date
and time selection widgets
(not universally supported).
On non-supporting
browsers, date and time
inputs display as usable text-
entry fields.

Numerical Controls
<input type="number">
<input type="range">
Number and range controls
collect numerical data.
Browsers may render
counter or slider widgets.
Both types accept min and
max attributes for setting
limits on the allowed values.

Color Selector
<input type="color">
The color input type is
intended to provide a pop-up
color picker.
It is not well supported. Non-
supporting browsers display
a text-entry field.

Form Accessibility
• Users may not be able to see the form. They may be
listening to it with a screen reader.
• Whereas sighted users can see at a glance how elements
are organized, form accessibility features create semantic
connections between form components.

FORM ACCESSIBILITY
Labels
The label element associates a descriptive label with a form field.
Implicit association
The label text and form control are both contained within the label element:
<li><label>Red <input type="radio" name="color"
value="red"></label></li>
Explicit association
Matches the label with the control's ID reference using the for attribute:
<li><label for="form-colors-red">Red</label> <input
type="radio" name="color" value="red id="form-colors-red"></li>
<label> </label>

FORM ACCESSIBILITY
Fieldsets and Legends
fieldset
Indicates a logical grouping of controls (examples: credit card
name, number, date, etc.). By default, rendered with a box
around the set of controls.
legend
Provides a caption for the enclosed fields. By default, it’s
displayed along the top edge of the fieldset.
<fieldset> </fieldset>
<legend> </legend>

Fieldsets and Legends (cont’d)
<fieldset>
<legend>Customer Information</legend>
<ul>
<li><label>Full name: <input type="text"
name="fullname"></label></li>
<li><label>Email: <input type="text" name="email"></label></li>
<li><label>State: <input type="text" name="state"></label></li>
</ul>
</fieldset>

Form Design Tips
• Avoid unnecessary questions.
• Consider the impact of label placement. Labels above
fields tend to lead to faster completion.
• Choose input types carefully.
• Group related inputs.
• Primary actions (e.g., “Buy”) should be visually dominant to
secondary actions (e.g., “Back”).

• iframes
• Generic object element
• Video players
• Audio players
• Canvas

Window-in-a-Window (iframe)
<iframe> </iframe>
• The iframe element lets you embed a separate HTML
document on a page.
• It displays in its own window-in-a-window (called a
nested browsing context).
• Commonly used to embed videos, maps, and advertising

iframe (cont’d)
<h1>An Inline Frame</h1>
<iframe src="glossary.html" width="400" height="250">
Your browser does not support inline frames. Read
the
<a href="glossary.html">glossary</a>.
</iframe>
• The content of the iframe element is a fallback that displays
if iframe is not supported.
• The width and height attributes specify the size of the
window in pixels.

The object Element
<object> </object>
<param> </param>
<object data="picture.svg" type="image/svg+xml">
<img src="picture.png" alt="">
</object>
• A generic element for embedding media on a web page. The
media may require a plug-in to run.
• The data attribute points to the media file.
• The type attribute is the type of media (its MIME type).
• The content of the object element is a fallback if the media
type isn’t supported.

The object Element (cont’d)
<object type="video/quicktime" data="movies/hekboy.mov"
width="320" height="256">
<param name="autostart" value="false">
<param name="controller" value="true">
</object>
Some media formats may require that the object contain
a number of param elements that set parameters specific to
that type of media.
Example: Starting a video automatically or displaying player
controls

Embedded Video
HTML5 introduced the video
element for embedding a video
player on a web page. There is
also an API for controlling video
play.
<video src="windtunnel.mp4" width="320" height="262"
poster="windtunnel_still.jpg" controls autoplay>
Get the <a href="windtunnel.mp4">MP4 wind tunnel
video</a>
</video>
<video> </video>

Embedded Video (cont’d.)
The content in the video element is a fallback for browsers that don’t
support the HTML5 video element (e.g., providing a link to the video).
video element attributes:
• width/height: Specific dimension in pixels
• poster: Provides location of still image to show before video
plays
• controls: Indicates that the video player controls should be
visible
• autoplay: Makes the video start playing automatically

Video Formats
• Browsers are inconsistent about which video formats they
support (see table).
• Best supported format: MP4 (H.264)
[MPEG-4 video container, H.264 video compression, and AAC
audio compression]
Format Type IE MS
Edge
Chrome Firefox Safari Opera Android
Browser
iOS
Safari
MP4 (H.264) video/mp4 mp4
m4v
9.0+ 12+ 4+ Yes* 3.2+ 25+ 4.4+ 3.2+
WebM (VP8) video/webm
webm webmv
– – 6+ 4.0+ – 15+ 2.3+ –
WebM (VP9) video/webm
webm webmv
– 14+ 29+ 28+ – 16+ 4.4+ –
Ogg Theora video/ogg ogv – – 3.0+ 3.5+ – 13+ 2.3+ –

Video Formats (cont’d.)
<source> </source>
To provide several video format options, list them in
source elements in the video element.
The browser downloads the first file it supports, so put the
videos with the smallest file sizes first.
<video id="video" controls poster="img/poster.jpg">
<source src="clip.webm" type="video/webm">
<source src="clip.mp4" type="video/mp4">
<source src="clip.ogg" type="video/ogg">
<a href="clip.mp4">Download the MP4 of the clip.</a>
</video>

<audio> </audio>
<source> </source>
The audio element embeds an audio player on the page, similar to
video, but with no height, width, or poster attributes:
<audio id="threeoclock" controls preload="auto">
<source src="jetfighter.mp3" type="audio/mp3">
<source src="jetfighter.ogg" type="audio/ogg">
<source src="jetfighter.webm" type="audio/webm">
<p>Download <a href="jetfighter.mp3">"Jet Fighter"</a></p>
</audio>
Audio Players

Audio Formats
Format Type IE MS
Edge
Chrom
e
Firefox Opera Safari iOS
Safari
Android
MP3 audio/mpeg mp3 9.0+ 12+ 3.0+ 22+ 15+ 4+ 4.1 2.3+
WAV audio/wav or audio/wave – 12+ 8.0+ 3.5+ 11.5
+
4+ 3.2+ 2.3+
Ogg
Vorbis
audio/ogg ogg oga – – 4.0+ 3.5+ 11.5
+
– – 2.3+
MPEG-
4/AAC
audio/mp4 m4a 11.0
+
12+ 12.0+ – 15+ 4+ 4.1+ 3.0+
WebM/
Vorbis
audio/webm webm – – 6.0+ 4.0+ 11.5
+
– – 2.3.3+
• Browsers are inconsistent in audio format support (see table).
• Best supported format: MP3

Adding Text Tracks
<track> </track>
The track element provides text that is synchronized with
the audio or video. Useful for:
• Subtitles
• Captions
• Descriptions for sight impaired
• Chapter titles
• Metadata (non-displaying)

Adding Text Tracks (cont’d.)
<video width="640" height="320" controls>
<source src="japanese_movie.mp4" type="video/mp4">
<source src="japanese_movie.webm"
type="video/webm">
<track src="english_subtitles.vtt"
kind="subtitles"
srclang="en"
label="English subtitles"
default>
<track src="french.vtt"
kind="subtitles"
srclang="fr"
label="Sous-titres en français">
</video>
The track element goes inside the video or audio
element you want to annotate.
The src attribute points to a text file in .vtt format.

Canvas
<canvas> </canvas>
• The canvas element embeds a 2-D bitmapped drawing
area that is controlled by JavaScript functions.
• It is useful for games and drawing interfaces.
majong.frvr.co
m
muro.deviantart.co
m

Canvas (cont’d)
//draw face
my_canvas.beginPath();
my_canvas.arc(100, 100, 75, (Math.PI/180)*0, (Math.PI/180)*360,
false);
// circle dimensions
my_canvas.strokeStyle = "black"; // circle outline is black
my_canvas.lineWidth = 3; // outline is three pixels wide
my_canvas.fillStyle = "yellow"; // fill circle with yellow
my_canvas.stroke(); // draw circle
my_canvas.fill(); // fill in circle
my_canvas.closePath();
A sample of the JavaScript used
to draw this simple graphic.

2-Lec 2-3- HTMLof software engineering.pptx

More Related Content

Similar to 2-Lec 2-3- HTMLof software engineering.pptx

Recently uploaded

2-Lec 2-3- HTMLof software engineering.pptx