HTML

This content is protected and may not be shared, uploaded, or distributed.

Copyright © 2025 Ellis Horowitz & Marco 1

Papa
 What are We Talking About Today?

• Introduction to HTML
– HTML: Markup language for web content
– Evolution: From Tim Berners-Lee to HTML5
• HTML Structure
– Elements & Tags: <p>, <a>, <img>, etc.
– Attributes: Define element properties (e.g., src, href)
• Advanced HTML Features
– Forms, Tables, Multimedia: Enhanced content
– Validation: Ensuring code quality with tools like W3C
Validator

Copyright © 2025 Ellis Horowitz & 2

Marco Papa
 What is HTML?

• HTML stands for Hypertext Markup Language

– It is a markup language, which means it is used
for processing, definition, and display of data
• HTML is a tag-based language, similar to XML
– HTML tags are already defined though

Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
HTML5 2014

Copyright © 2025 Ellis Horowitz & 3

Marco Papa
 What is HTML?(cont’d)

• Hypertext Markup Language (HTML) is a language in

which one can describe:
– The display and format of text
– The display of graphics
– Pointers to other html files
– Pointers to files containing graphics,
digitized video and sound
– Forms that capture information from the viewer
• HTML was developed by Tim Berners-Lee of CERN
around 1990
• HTML is supported by Web browsers (e.g., Internet
Explorer, Firefox, Chrome, Safari, many others)as
well as other applications (such as mail clients,
etc) — which interpret and display the output to
the viewer

Copyright © 2025 Ellis Horowitz & 4

Marco Papa
 First Web Page

• The first web page ever displayed by Tim Berners-

Lee at CERN

Copyright © 2025 Ellis Horowitz & 5

Marco Papa
 First Web Site

• The original web site of the “WWW Project” is

still available at CERN
• [Link]
• Includes documentation on the original browsers
and servers

Copyright © 2025 Ellis Horowitz & 6

Marco Papa
 World Wide Web Motivation

• Originally created in 1989 at CERN (the European

Organization for Nuclear Research) for sharing
research in a faster manner than journal
publications allowed

Copyright © 2025 Ellis Horowitz & 7

Marco Papa
 Text Browser – Lynx

• Developed by Distributed Computing Group within

Academic Computing Services of the University of
Kansas
• Team of students and staff with initial release
in 1992
• [Link]

Copyright © 2025 Ellis Horowitz & 8

Marco Papa
 First Graphical Browser – NCSA Mosaic

• Developed at the National Center for

Supercomputing Applications (NCSA) at the
University of Illinois at Urbana–Champaign
• Marc Andreessen, lead student developer. NCSA
released it in 1993
• [Link]

Copyright © 2025 Ellis Horowitz & 9

Marco Papa
 First Commercial Browser – Netscape

• Netscape Navigator was a proprietary web browser,

and the original browser of the Netscape line
• Co-written by Marc Andreessen, with initial
release in Dec. 1994
• [Link]

Copyright © 2025 Ellis Horowitz & 10

Marco Papa
 First Free Commercial Browser – IE

• Microsoft Internet Explorer (IE) killed Netscape

Navigator as it was bundled with Windows 95
• Licensed from NCSA, with initial release in
August 1995
• [Link]

Copyright © 2025 Ellis Horowitz & 11

Marco Papa
 Web Browsers Timeline
[Link]

Copyright © 2025 Ellis Horowitz & 12

Marco Papa
 Garner Hype Cycle

Copyright © 2025 Ellis Horowitz & Marco Papa 13

 Garner Hype Cycle (cont’d)

• Innovation Trigger
– A potential technology breakthrough kicks things off.
Early proof-of-concept stories and media interest
trigger significant publicity. Often no usable
products exist and commercial viability is unproven.
• Peak of Inflated Expectations
– Early publicity produces a number of success stories —
often accompanied by scores of failures. Some
companies take action; many do not.
• Trough of Disillusionment
– Interest wanes as experiments and implementations fail
to deliver. Producers of the technology shake out or
fail. Investments continue only if the surviving
providers improve their products to the satisfaction
of early adopters.

Copyright © 2025 Ellis Horowitz & 14

Marco Papa
 Garner Hype Cycle (cont’d)

• Slope of Enlightenment
– More instances of how the technology can benefit the
enterprise start to crystallize and become more widely
understood. Second- and third-generation products
appear from technology providers. More enterprises
fund pilots; conservative companies remain cautious.
• Plateau of Productivity
– Mainstream adoption starts to take off. Criteria for
assessing provider viability are more clearly defined.
The technology's broad market applicability and
relevance are clearly paying off.

Source:
[Link]
hype-cycle

Copyright © 2025 Ellis Horowitz & 15

Marco Papa
 Versions of HTML
• Version 0, 1990, was the original, minimum set of HTML
• Version 1 adds highlighting and images
• Version 2, November 1995, all V.0 and V.1, plus forms
• Version 3.2, January 1997, released by W3CW, tables
• HTML 4.01, December 1999 Recommendation:
[Link]
• HTML5, October 2014 Recommendation, vocabulary and APIs:
[Link]
• HTML5, December 2017 HTML 5.2 Recommendation:
[Link]
• HTML Living Standard, December 2019:
[Link]
• W3C and WHATWG Agreement
[Link]
• “W3C stops independent publishing of a designated list of specifications related to
HTML and DOM and instead will work to take WHATWG Review Drafts to W3C
Recommendations“
NOTE: some of the examples shown here are extracted from the HTML4.0 specification. This document is copyrighted
according to: "Copyright © World Wide Web Consortium. All Rights Reserved. [Link]

Copyright © 2025 Ellis Horowitz & 16

Marco Papa
 Elements, Tags and Attributes
• An HTML file contains Elements, Tags and Attributes
• HTML Element
– Basic HTML node that adds semantics
– Can be of two types:
• Without content: self-closing start-tag
• With content: start tag, content, end tag
• HTML Tag
– Composed by the name of the Element surrounded by angle brackets
– End Tag has a slash after the opening angle bracket (required in HTML5)
• Attribute
– Specified inside Start Tag
– Controls element properties / behavior or provides metadata

<img src="[Link] />

self-closing tag

Copyright © 2025 Ellis Horowitz & 17

Marco Papa
 My First HTML

1 <!DOCTYPE html>
2 <!-- My first HTML comment -->
3 <html>
4 <head>
5 <title>My First HTML</title>
6 </head>
7 <body>
8 Hello CSCI 571!
9 </body>
10 </html>

Copyright © 2025 Ellis Horowitz & 18

Marco Papa
 General Structure
• HTML documents have a head and a body
– head contains title and other metadata
– body contains page content (paragraphs, etc…)
• A leading line indicates which version of HTML
this document conforms to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "[Link]
html40/[Link]">
<HTML>

<HEAD>
<TITLE>The Solar System</TITLE>
</HEAD>

<BODY>
<P>The nine planets of the solar system are...
</BODY>

</HTML>
Copyright © 2025 Ellis Horowitz & 19
Marco Papa
 Adding Some Markup
<P>The nine planets of the solar system are <B>mercury, venus,
earth, mars, jupiter, saturn, uranus, neptune and
pluto.</B></P>
<P>The very nearest star is about <I>7,000</I> times farther
away than pluto is to our sun. </P>

Copyright © 2025 Ellis Horowitz & 22

Marco Papa
 Browsers Are Tolerant
• Browsers follow the rule of being tolerant of
mistakes in the input
– They ignore markup they don’t understand
• Edge, Safari, Firefox, Chrome are tolerant browsers
– They do not insist that the HTML document begin
and end with <HTML> and contain doctype
– <HEAD> and/or <BODY> tags are not required
– But there is no guarantee that this behavior will
be the same for all browsers and across different
versions

Copyright © 2025 Ellis Horowitz & 23

Marco Papa
 Browsers are Tolerant (examples)

• Suppose the entire document is one line, such as:

<HEAD>Text placed between <ODDTAG> HEAD markers is
not normally displayed.</HEAD>

Firefox Chrome Internet Explorer

Copyright © 2025 Ellis Horowitz & 24

Marco Papa
 HTML Elements
• Each element consists of:
– a start tag,
– content (optional),
– an end tag (optional).
• E.g., <BODY> some text </BODY>
• A slash (/) after the “<“ indicates an end tag
• Some elements do not require end tags, e.g.,
<P> paragraph tag
• Some elements do not require content, e.g.,
<HR>
horizontal rule tag places a straight line across
the page

Copyright © 2025 Ellis Horowitz & 25

Marco Papa
 Attributes
• Elements may have parameters, called attributes
• Attributes are placed in the start tag before
the final ">"
• Attributes have the form name=value
E.g., <H1> is the first heading tag
<H1 id="Chapter1">
Start of Chapter 1
</H1>
• Attribute values are often enclosed in quotes,
either double or single
• Quotes are not required when the value contains
only letters, digits, hyphens, and periods.
• Attribute names are case insensitive,
• but attribute values are usually not

Copyright © 2025 Ellis Horowitz & 26

Marco Papa
 Comments in HTML
• Comments start with
<!--
and end with
-->
• Comments cannot be nested
– White space is permitted between the -- and the
closing angle bracket, >
– It is not permitted between the opening angle
bracket, exclamation point, and the --
• E.g.
<BODY>
<!-- This is a comment
and hence not displayed -->
But this will be displayed
</BODY>
Copyright © 2025 Ellis Horowitz & 27
Marco Papa
 Complete Set of <BODY> tag attributes
• id, assigns a unique name to an element
e.g., <P id=mystart>This is my starting paragraph...
• class, assigns one or more names to an element
• lang, a language code that identifies a natural language
spoken, written, or otherwise used
• title, a short description of the body
• style, inline display information
• bgcolor, background color
• Events include
onload, onunload onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout,
onkeypress onkeydown, onkeyup
• Deprecated elements in include:
background, text, link, vlink, alink
See [Link]

Copyright © 2025 Ellis Horowitz & 28

Marco Papa
 <BODY> Using Style Sheets
• Deprecated example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN”
"[Link]
<HTML>
<HEAD>
<TITLE>A study of population dynamics</TITLE>
</HEAD>
<BODY bgcolor="white" text="black” link=" red" alink="fuchsia" vlink="maroon">
... document body...
</BODY>
</HTML>

• Using Style Sheets

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN” "[Link]
<HTML>
<HEAD>
<TITLE>A study of population dynamics</TITLE>
<STYLE type="text/css">
BODY { background: white; color: black}
A:link { color: red } A:visited { color: maroon } A:active { color: fuchsia }
</STYLE>
</HEAD>
<BODY>
... document body...
</BODY>
</HTML>

Copyright © 2025 Ellis Horowitz & 29

Marco Papa
 Composing HTML
• Conventional editors let you compose HTML directly
– e.g., TextEdit,emacs, vi, NotePad, TextPad, etc.
– use the tools when you are writing HTML directly
• Word Processors include a File SaveAs option which
saves your document in HTML format
– e.g., Microsoft Word
– Do not use!
• There are several free HTML-specific editors, e.g.
– Brackets, [Link]
– Visual Studio Code, [Link]
• There are several commercial HTML/CSS suites, e.g.
– JetBrains WebStorm
– Adobe Dreamweaver CC (Creative Cloud subscription)
• For a complete list see
[Link]
Copyright © 2025 Ellis Horowitz & 30
Marco Papa
 HTML Headings

• Heading tags should be used for different levels

in a document
– The size and look can be changed with CSS, so don’t
use these tags solely to change the size of the font
<!DOCTYPE html>
<html>
<head>
<title>My First Headings</title>
</head>
<body>
<h1>Hello CSCI 571!</h1>
<h2>Web Technologies</h2>
<h3>Prof. Papa</h3>
<h6>Headings are cool</h6>
</body>
</html>
Copyright © 2025 Ellis Horowitz & 31
Marco Papa
 HTML Line Breaks

• Paragraph tags separate logical display blocks

• Line breaks are used for formatting

<!DOCTYPE html>
<html>
<head>
<title>My First Paragraph</title>
</head>
<body>
<p>Hello CSCI 571!</p>
<p>This class will cover<br />web technologies.</p>
</body>
</html>

Copyright © 2025 Ellis Horowitz & 32

Marco Papa
 HTML Lists
• HTML lists are very common in everyday web development.
• Perhaps the most used are
– unordered lists (<ul>) and
– ordered lists (<ol>)
• but there are a few other list options
– definition list (<dl>), and
– the menu (<menu>) element,
– both were deprecated in HTML4, but reintroduced in
HTML5
• All lists follow the same pattern:
– <start tag of list>
– <list item tag>
– <list item tag>
– <list item tag>
– </ end tag of list>

Copyright © 2025 Ellis Horowitz & 33

Marco Papa
 HTML Definition Lists
<DL>
<DT>light year<DD>the distance light travels in
one year
<DT>asteroids<DD>are small, irregular shaped
objects, mostly occurring between Mars and
Jupiter
</DL>

Copyright © 2025 Ellis Horowitz & 34

Marco Papa
 HTML Unordered Lists
<HTML>
<HEAD> <TITLE>Example of Unordered Lists</TITLE> </HEAD>
<BODY>
<H1>planets and moons</H1>
<UL>
<LI>Mars
<UL>
<LI> deimos
<UL>
<LI>orbit: 23,459 km from Mars
<LI>diameter: 12.6 km
<LI>mass: 1.8e15 kg
</UL>
<LI>phobos
</UL>
<LI>Jupiter
<UL><LI>callisto<LI>europa<LI>ganymede<LI>io</UL>
</UL>
</BODY></HTML>
Copyright © 2025 Ellis Horowitz & 35
Marco Papa
Browser Output of Unordered Lists

Copyright © 2025 Ellis Horowitz & 36

Marco Papa
 HTML Ordered Lists
• Has the general form
<OL><LI> first list item<LI> second list item</OL>
• START attribute can initialize the sequence to a number
other than 1
• TYPE attribute can be used to select the numbering
style
Type Name Style
1 arabic 1, 2, 3, ...
a lower alpha a, b, c, ...
A upper alpha A, B, C, ...
i lower roman i, ii, iii
I upper roman I, II, III,
• However, the type attribute is deprecated, and list
styles should be handled through style sheets, e.g.
<STYLE type="text/css">
[Link] {list-style-type: lower-roman}</STYLE>

Copyright © 2025 Ellis Horowitz & 37

Marco Papa
 Example - Ordered Lists
<HTML><HEAD><TITLE>
Example of Ordered Lists</TITLE></HEAD>
<BODY>
<H1>Planets and Moons as Ordered Lists</H1>
<OL START=4>
<LI>Mars
<OL type=A>
<LI>deimos
<OL type=I>
<LI>orbit: 23,459 km from Mars
<LI>diameter: 12.6 km
<LI>mass: 1.8e15 kg
</OL>
<LI>phobos
</OL>
<LI>Jupiter
<OL type=A><LI>callisto<LI>europa<LI>ganymede<LI>io</OL>
</OL>
</BODY></HTML>
Copyright © 2025 Ellis Horowitz & 38
Marco Papa
 Browser Output

Copyright © 2025 Ellis Horowitz & 39

Marco Papa
 HTML Table Elements
• <TABLE>, a tag used to define a table
• <CAPTION>, a tag to label a table
– Its attributes are ALIGN = top, bottom,
left, right
• <TH></TH> or <TD></TD>, tags that identify a
table header cell and table data cell
– Headers are the same as data except they use
bold font and are centered
• <TR>, a tag that identifies a container for a
row of table cells
– Same attributes as TH and TD

Copyright © 2025 Ellis Horowitz & 40

Marco Papa
 Facts about Tables
• Table cells can be text, lists, images, forms,
figures, or even tables
• Table headers are typically rendered in
boldface, and table data is typically rendered
in the regular font and point size
• A table has an optional caption followed by
rows
• Table rows are said to contain table headers
and table data
• The browser will set the number of columns to
be the greatest number of columns in all of the
rows
• Blank cells are used to fill extra columns in
the rows

Copyright © 2025 Ellis Horowitz & 41

Marco Papa
 Example - 3 rows x 2 cols
<HTML>
<HEAD> <TITLE>Table: 3 rows 2 Cols</TITLE> </HEAD>

<BODY>
<H1>Table: 3 Rows 2 Cols</H1>
<TABLE BORDER="2">
<CAPTION>MIME Content-Types</CAPTION>
<TR>
<TD>application/postscript</TD>
<TD>Postscript</TD>
<TR>
<TD>application/rtf</TD>
<TD>MS Rich Text Format</TD>
<TR>
<TD>application/x-pdf</TD>
<TD>Adobe Acrobat Format</TD>
</TABLE>
</BODY>
</HTML>
Copyright © 2025 Ellis Horowitz & 42
Marco Papa
 Browser Output

Copyright © 2025 Ellis Horowitz & 43

Marco Papa
 Table Example Rowspan colspan

<HTML>
<HEAD><TITLE>Table: Rowspan and Colspan</TITLE></HEAD>
<BODY>
<H1>Table: RowSpan and ColSpan</H1>
<TABLE BORDER="2">
<CAPTION>MIME Content-Types</CAPTION>
<TR>
<TH ROWSPAN=4>Items</TH>
<TH colspan=2>Types and Their Meaning</TH>
<TR>
<TD>application/postscript</TD> <TD>Postscript</TD>
<TR>
<TD>application/rtf</TD> <TD>MS Rich Text Format</TD>
<TR>
<TD>application/x-pdf</TD> <TD>Adobe Acrobat Format</TD>
</TABLE>
</BODY>
</HTML>
Copyright © 2025 Ellis Horowitz & 44
Marco Papa
 Browser Output

Copyright © 2025 Ellis Horowitz & 45

Marco Papa
 Arranging Data in a Table

• Originally data in a table could be manipulated using

attributes: align left, align right, align center,
valign top, valign middle and valign bottom

valign right
valign top

valign center

• The above attributes are deprecated in HTML5 in favor

of Cascading Style Sheets (CSS) settings
• What does “deprecated” mean?
• See the slides in the lecture on CSS

Copyright © 2025 Ellis Horowitz & 46

Marco Papa
 HTML Character Set
• HTML uses the Universal Character Set (UCS), defined
in [ISO10646]. This standard defines a repertoire of
thousands of characters used by communities all over
the world.
– Its latest specification (Unicode 16.0.0), dated
September 10, 2024, can be found at
[Link]
– Includes Unicode Emoji (with skin tone diversity)
• HTML must also specify how characters are encoded
during transmission.
• Commonly used character encodings on the Web include
– ISO-8859-1 (also referred to as "Latin-1",
– ISO-8859-5 (which supports Cyrillic),
• A browser is informed of the encoding by a line
Content-Type: text/html; charset=EUC-JP

Copyright © 2025 Ellis Horowitz & 47

Marco Papa
 Character references
• Character references in HTML may appear in two forms:
– Numeric character references (either decimal or
hexadecimal)
• &#229; (in decimal) represents the letter "a"
with a small circle above it (used, for
example, in Norwegian).
• &#60; represents left angle bracket
• &#62; represents right angle bracket
• &#38; represents ampersand sign
• &#34; represents double quote
– Character entity references.
• "&lt;" represents the < sign.
• "&gt;" represents the > sign.
• "&amp;" represents the & sign.
• "&quot; represents the " mark.

Copyright © 2025 Ellis Horowitz & 48

Marco Papa
 Example - Character References
<HTML>
<HEAD><TITLE>Example of Character References</TITLE></HEAD>
<BODY>
An unordered list in HTML starts with &lt;UL&gt;, ends
with &#60;/UL&#62; and every list item should begin with
&lt;LI&gt;. The &lt;/LI&gt; is optional. For an attribute such
as START="5&#34; the double quotes are optional.
</BODY>
</HTML>

Copyright © 2025 Ellis Horowitz & 49

Marco Papa
 HTML Hyperlinks (Anchors)
• Hyperlinks are the “novel idea” introduced by Tim
Berners-Lee
• Implemented in HTML with Anchor Tags
• An anchor is a way to designate a link to another
document or to a specific place in the same document
• Begins with <A> and ends with </A>
• The link location is given by the “required” HREF
attribute (Hypertext REFerence); e.g.,
<A HREF="[Link] Home Page</A>
• Hypertext links are displayed using underlining, color,
and/or highlighting
– Depends on the browser defaults or style settings
– Once a link is taken, it should change color
– HREF, stands for Hypertext REFerence
• Link destination can be relative or absolute

Copyright © 2025 Ellis Horowitz & 50

Marco Papa
 HTML Hyperlinks (cont’d)
• Anchor tags allow one page to link to another page
<!DOCTYPE html>
<html>
<head>
<title>My First Hyperlink</title>
</head>
<body>
<p>Hello <a href="[Link] 571</a> Class!</p>
</body>
</html>

Copyright © 2025 Ellis Horowitz & 51

Marco Papa
 Syntax of Anchor Names

• Anchor names are identifiers used in HTML to create

internal links within a webpage. They allow users to
jump to specific sections of a page by using id
attributes in combination with anchor (<a>) links.
• An anchor name is the value of the “id” attribute
when used in the context of anchors.
• Using “name” attribute is deprecated
• Anchor ids must observe the following rules:
– Id Uniqueness: Anchor names must be unique within
a document, since ids must be unique within the
same HTML document.
– String matching: Comparisons between fragment
identifiers and anchor names must be done by exact
(case-sensitive) match.
• See [Link]
US/docs/Web/HTML/Element/a

Copyright © 2025 Ellis Horowitz & 52

Marco Papa
 Defining Anchors Using the id Attribute
• The id attribute may be used to create an anchor at
the start tag of any element (including the A
element).
• Example: the id attribute places an anchor in an H2
element.
You may read more about this in
<A href="#section2">Section Two</A>.
. . . more text . . .
<H2 id="section2">Section Two</H2>
. . . more text
<P>Please refer to <A href="#section2">Section Two</A> above for
more details.
• The id and name attributes share the same name space.
They cannot both define an anchor with the same name
in the same document. Try this example in IE and
Firefox:
<P><A href="#label1">...</A>
...more document... NOTE: browsers work
differently
<P><H2 id="LABEL1">...</A>

Copyright © 2025 Ellis Horowitz & 53

Marco Papa
 Examples of Anchors
• <A href=[Link]> a file in the same directory and same domain as
the current page

• <A href=[Link] a file in directory

mydocs on machine [Link], a WWW site

• <A href=news:[Link]> the newsgroup [Link]

• <A href=[Link] opens an an e-mail window for sending a
message

• <A HREF="[Link] Download RFC1866 </A>

executes the ftp program to fetch a file Given the current position,
this <HREF> moves up one directory, connects to Docs/Style/ and
displays the document [Link], at the document “reference”
anchor.

• <A HREF="../Docs/Style/[Link]#reference"> … </A> Connects to

lycos and runs pursuit with three arguments

• <A HREF="[Link]
bin/pursuit?Hypertext+Markup+Language"> … </A>

Copyright © 2025 Ellis Horowitz & 54

Marco Papa
 Anchor Titles
• The title attribute may be set to add information about
the nature of a link.
• This information may be spoken by a user agent, rendered
as a tooltip, cause a change in cursor image, etc.
<BODY>
...some text...
<P>You'll find a lot more in <A href="[Link]"
title="Go to chapter two">chapter two</A>.
See also this <A href="../images/[Link]"
title="GIF image of solar system">view of the
solar system.</A>
</BODY>

Copyright © 2025 Ellis Horowitz & 55

Marco Papa
Universal Resource Identifier (URI)
Universal Resource Locator (URL)

[Link]
Copyright © 2025 Ellis Horowitz & 56
Marco Papa
Universal Resource Identifier (URI) cont’d
• URIs typically consist of three pieces:
– The scheme of the mechanism used to access the
resource.
– The name of the machine hosting the resource.
– The name of the resource itself, given as a path
E.g., [Link]
• Fragment identifiers are URIs that refer to a location
within a resource
e.g., [Link]
• Relative URIs have a path that refers to a resource on
the same machine as the current document, e.g., ".."
means one level up
• See p. 24 in:
[Link]
• See also:
[Link]

Copyright © 2025 Ellis Horowitz & 57

Marco Papa
 The <LINK> Element
• Should only appear in the HEAD
• It may appear any number of times
• It conveys relationship information that may be
rendered in a variety of ways (e.g., a tool-bar with a
drop-down menu of links, external files)
• Example - The current document is "[Link]". The
rel attribute specifies the relationship of the linked
document with the current document.
<HTML>
<HEAD>
<TITLE>Chapter 2</TITLE>
<LINK rel="Index" href="../[Link]">
<LINK rel="Next" href="[Link]">
<LINK rel="Prev" href="[Link]">
</HEAD>
...the rest of the document...

Copyright © 2025 Ellis Horowitz & 58

Marco Papa
 How is <LINK> Used
• To provide a variety of information to search engines:
– Links to alternate versions of a document, written in
another human language, e.g.
<LINK lang="fr" title="La documentation en Fran&ccedil;ais"
_ type="text/html" rel="alternate" hreflang="fr"
_ href="[Link]
– Links to alternate versions of a document, designed
for different media
<LINK media="print" title="The manual in postscript" _. _
_ type="application/postscript" rel="alternate" _ _
_. href="[Link]
– Links to the starting page of a collection of
documents.
– Links to style sheets and “media queries” used in
Responsive Web Design

Copyright © 2025 Ellis Horowitz & 59

Marco Papa
 Creating Graphics
• Digital cameras & Smartphones
– Snap and the image is digitized and can be
transferred to a computer
– Typical resolutions are 1280x720, 1920x1080
• Graphic editors
– Permit the combination of text, drawing, and color
– For example, Adobe Photoshop
• Scanners
– Convert text and graphics into machine readable
form

Copyright © 2025 Ellis Horowitz & 60

Marco Papa
 Image Formats
• Five image formats are always supported by Web
browsers
– x-pixelmaps (obsolete)
• Similar to x-bitmaps, but 8 bits are given to
each pixel, permitting 256 colors in the image
– Graphic Interchange Format (GIF)
• Support black and white, grayscale, and color
• Patented by Unisys (expired, abandoned)
– Joint Photographic Experts Group (JPEG)
• Designed for photographic images
• Includes image compression
– Portable Network Graphics (PNG)
• An open, extensible image format with Lossless
Compression
• Patent-free replacement for GIF and TIFF
• W3C Recommendation: [Link]
– Scalable Vector Graphic (SVG) – since 2008
Copyright © 2025 Ellis Horowitz & 61
Marco Papa
 HTML Image Element
• The IMG element embeds an image in the current
document, e.g., <IMG SRC="[Link]">
• Some attributes of <IMG> include
– SRC, the HREF or name of the image
– SRCSET & SIZES, HREFs ans sizes for different
screen sizes and types
– Align=top, middle, or bottom to align text around
an image
– height and width to control the dimensions of the
image
– Alt to replace an image with text, if the image is
unavailable or a text browser is used; e.g.,
<IMG SRC="[Link]" ALT="picture of the Eiffel
Tower">

Copyright © 2025 Ellis Horowitz & 62

Marco Papa
 HTML Images (cont’d)
• There are some modern image formats supported
– WEBP (2010, open format, based on VP8 codec)
• Baseline (96% adoption – except IE or old browsers <2020)
– AVIF (2019, open format, based on AV1 codec)
• Baseline 2024 (93% adoption – supported in Edge since 2024)
– JPEG XL (2021, open format)
• Limited availability (12% adoption – Safari only, support
(behind a flag) was dropped by Chrome in 2022)
– HEIF – container for different formats (AVIF, HEIC, JPEG, WXAM)
• Limited availability (12% adoption – Safari only)
• Those formats could save a lot of bandwidth; however, we need to
check if they are supported: <picture> tag + <source type=

<picture>
<source srcset="[Link]" type="image/avif" />
<source srcset="[Link]" type="image/webp" />
<img src="[Link]" alt="photo" />
</picture>

Will use avif if supported, otherwise - webp if supported,

otherwise - jpg

Copyright © 2025 Ellis Horowitz & 63

Marco Papa
 Example - Images
<HTML><HEAD><TITLE>Example of Images</TITLE></HEAD>
<BODY>
<H1>Example of Images</H1>
<table border=5>
<tr>
<td><IMG SRC="[Link]" ALT="Ferrari" BORDER=0 WIDTH=50 HEIGHT=50>
<td><IMG SRC="[Link]" ALT="Ferrari" BORDER=10 WIDTH=50 HEIGHT=50>
<td><IMG SRC="[Link]" ALT="Ferrari" BORDER=10 WIDTH=100 HEIGHT=100>
<td><IMG SRC="[Link]" ALT="Ferrari" BORDER=50 WIDTH=200 HEIGHT=300>
<td><IMG SRC="[Link]" ALT="Ferrari" BORDER=10 WIDTH=50 HEIGHT=50>
</tr>
<tr>
<td>50 x 50, no border</td>
<td>50 x 50, border=10</td>
<td>100 x 100, border=10</td>
<td>200 x 300, border=50</td>
<td>incorrect file name, 50 x 50, border=10</td>
</tr>
</table>
</BODY></HTML>

Copyright © 2025 Ellis Horowitz & 64

Marco Papa
 Browser Output

Copyright © 2025 Ellis Horowitz & 65

Marco Papa
 Active Images
• Active images are images that can be clicked and, just
like an anchor, they act as a hypertext link
<A HREF="[Link]
<IMG SRC="[Link]"> </A>
– Active images have a border around them and the
cursor changes shape when passed over

Copyright © 2025 Ellis Horowitz & 66

Marco Papa
 Image Maps

• Image maps are active images with multiple clickable

regions
• each region can be associated with a specific action
(e.g., retrieve a document, run a program, etc.)
• When the region is activated by the user, e.g., by a
mouse click, the action is taken
• the pixel coordinates are interpreted by the browser
(USEMAP attribute).
• The <map> tag is used to associate the image and the
regions.

Copyright © 2025 Ellis Horowitz & 67

Marco Papa
 An ImageMap Example from Wikipedia
<img class="thumbimage" width="720" height="523"
usemap="#ImageMap_1_2013620197"
src="//[Link]/wikipedia/commons
/b/ba/[Link]" alt="">

<map id="ImageMap_1_2013620197"
name="ImageMap_1_2013620197">
<area title="Dr Johnson – Dictionary writer"
alt="Dr Johnson – Dictionary writer"
coords="133,343,124,287,159,224,189,228,195,291,222,
311,209,343,209,354,243,362,292,466,250,463"
shape="poly" href="/wiki/Samuel_Johnson">
<area title="Boswell – Biographer" alt="Boswell"
coords="76,224,84,255,43,302,62,400,123,423,121,361,
To see the ImageMap work 137,344,122,290,111,234,96,225"
go to shape="poly" href="/wiki/James_Boswell">
[Link] <area title="Sir Joshua Reynolds – Host"
and click on each of the individuals alt="Sir Joshua Reynolds – Host"
at the table coords="190,276,208,240,229,228,247,238,250,258,286,
319,282,323,223,323,220,301,200,295"
shape="poly" href="/wiki/Joshua_Reynolds">
Copyright © 2025 Ellis Horowitz & 68
Marco Papa
 Imagemaps
• Add USEMAP attribute to <IMG> tag to indicate a client-side
imagemap, e.g.
<IMG SRC="images/[Link]” USEMAP=”#bannerbar">
• Different regions of the image are described using <MAP>
tag, e.g.
<MAP NAME="bannerbar">
<AREA SHAPE="RECT" COORDS="10,10,50,50" HREF="[Link]">
<AREA SHAPE="RECT" COORDS="50,10,90,50" HREF="[Link]">
<AREA SHAPE="RECT" COORDS="90,10,130,50" HREF="[Link]">
<AREA NOHREF SHAPE=default>
</MAP>
• Possible values for SHAPE are:
–default: Specifies the entire region.
–rect: Defines a rectangular region.
–circle: Defines a circular region.
–poly: Defines a polygonal region.

Copyright © 2025 Ellis Horowitz & 69

Marco Papa
 HTML Inline Frame
• Used to “embed” a website

<!DOCTYPE html>
<html>
<head>
<title>My First IFRAME</title>
</head>
<body>
<h2>USC's Web Page</h2>

<iframe src="[Link] height="200" width="400" />

</body>
</html>

Copyright © 2025 Ellis Horowitz & 70

Marco Papa
 <META> Element
- Allows you to insert Name/Value pairs describing
document properties, e.g.
<META NAME="Author" CONTENT="Ellis Horowitz">

- USC CS dept home page header

<META name="description"
content="The Computer Science Department at the University
of Southern California, Los Angeles (USC) provides
education leading to the Bachelors, Masters and Ph.D.
degrees in Computer Science.">
<META name="keywords" content="USC, computer science,
computer science research, computer science teaching">
<META name="author" content="Ellis Horowitz">

Copyright © 2025 Ellis Horowitz & 71

Marco Papa
 <META> Element
• Moving a Web page to a new site
<HTML>
<HEAD>
<META HTTP-EQUIV="REFRESH" CONTENT="5; URL=[Link]
<META NAME="GENERATOR" CONTENT="Mozilla/4.04 [en] (Win95; I) [Netscape]">
<TITLE>This site has moved</TITLE>
</HEAD>

<BODY>
<CENTER>This site has moved to a new location which is:
<A HREF="[Link] [Link]
Your browser should automatically move to the correct URL in five seconds.
</CENTER>
</BODY>

</HTML>

Copyright © 2025 Ellis Horowitz & 72

Marco Papa
 Meta Tag and Robot Exclusion
<meta name="robots" content="noindex,nofollow">
<title>...</title> </head> <body> ...
• The content of the Robots META tag contains directives
separated by commas.
• The currently defined directives are
– [NO]INDEX. The INDEX directive specifies if an indexing
robot should index the page.
– [NO]FOLLOW. The FOLLOW directive specifies if a robot is
to follow links on the page.
– The defaults are INDEX and FOLLOW. The values ALL and
NONE set all directives on or off: ALL=INDEX,FOLLOW and
NONE=NOINDEX,NOFOLLOW.
• Some examples:
<meta name="robots" content="index,follow">
<meta name="robots" content="noindex,follow">
<meta name="robots" content="index,nofollow">
<meta name="robots" content="noindex,nofollow"> Note the
"robots" name of the tag and the content are case
insensitive.
Copyright © 2025 Ellis Horowitz & 73
Marco Papa
 Validating Your HTML
• The reasons for validation
– Browsers display HTML differently
– Browsers treat HTML errors differently
• What validators do
– Flag syntax errors with respect to HTML DTD
– Compare your pages to HTML 4.x, XHTML, and even
HTML 5 (experimental)
• Some tools are downloaded to your site; others read
your Web page from a URL
• HTML validation tools can be found at:
[Link]
• W3C Markup Validation Service:
[Link]

Copyright © 2025 Ellis Horowitz & 74

Marco Papa
 W3C Markup Validation Service
• Options: character encoding & Document type

Copyright © 2025 Ellis Horowitz & 75

Marco Papa
 Validating Your HTML
• Sample output

Copyright © 2025 Ellis Horowitz & 76

Marco Papa
 Helpful Links to Play with
• W3 Schools
[Link]
• MDN (Mozilla Developer Network)
[Link]
• MDN Recommended articles
[Link]
• CODEPEN
[Link]
• JS Fiddle
[Link]
• JS BIN
[Link]

Copyright © 2025 Ellis Horowitz & 77

Marco Papa