6

ADDING LINKS
 OVERVIEW

• 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.
 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.
 23
WEB IMAGE BASICS
 OVERVIEW

• Where to get images

• PNG, JPEG, GIF, and WebP

• Web image production strategy

• Favicon
 Web Image Formats

• Choose the most appropriate file format for an image to keep its file
size at a minimum:

• JPEG

• PNG

• GIF

• WebP

• NOTE: SVG is another popular web image format, but it is vector-based

and covered separately in Chapter 25.
 JPEG Format
• JPEG (Joint Photographic Experts Group) format is
the best format for photographs or images with smooth
color transitions.
 JPEG Format (cont’d)
• JPEG is a 24-bit RGB format, capable of millions of pixel colors.

• It uses a lossy compression that throws out image data to

reduce the file size. At high compression levels, you may see
blocky artifacts and loss of quality.

• Progressive JPEGs display in a series of passes that display

more quickly and may have a smaller file size.
 PNG Format

• The PNG (Portable Network Graphics) file format

can store several image types:

• 8-bit indexed color: Best for web pages. A

maximum of 256 pixel colors resulting in very small
file sizes

• 24-bit color: Millions of colors, like JPEG

 PNG Format (cont’d)

• PNG uses a lossless compression, with no data

thrown away.

• They can have binary transparency (on/off)

transparency or alpha transparency (multiple level).

• Progressive display PNGs display in a series of

seven passes.
 GIF Format

• GIF (Graphical Interchange Format) was the first image

format for the web:

• It is good for images with flat colors and hard edges.

• It is an 8-bit indexed color format (up to 256 pixel colors).

• GIF compression is lossless (although colors are lost when

converting from RGB to indexed color).

• It uses binary transparency.

• It can store multiple frames for GIF animation.

 WebP Format

• WebP is a new image format from Google:

• Can use either lossless or lossy compression

scheme

• Uses alpha transparency with either compression

scheme

• Can be animated

• Stores metadata such as color profile information

 Choosing an Image Format
If your image... use... because...

Is graphical, with flat colors 8-bit PNG or GIF PNG and GIF excel at compressing flat color.

Is a photograph or contains JPEG JPEG compression works best on images with blended colors.
graduated color Because it is lossy, it generally results in smaller file sizes than 24-bit
PNG.

Is a combination of flat and 8-bit PNG or GIF Indexed color formats are best at preserving and compressing flat color
photographic imagery areas. The pixelation (dithering) that appears in the photographic areas
as a result of reducing to a palette is usually not problematic.

Requires transparency GIF or PNG-8 Both GIF and PNG allow on/off transparency in images.

Requires multiple levels of PNG-24 or PNG-8 Only PNG supports multiple levels of transparency. PNG-24s with
transparency alpha transparency have a much larger file size, but finding tools to
create them is easier. WebP also supports alpha transparency and
may be a better option once it is better supported.

Requires animation GIF GIF is the only supported format that can contain animation frames.
APNG and WebP may be better options in the future.
 Image Asset Strategy

• Priorities to keep in mind when creating and adding

images:

• Keep file sizes of images as small as possible.

• Minimize the number of HTTP requests to the server.

• Don’t download more image data than is needed for

devices with smaller screens.

• Deliver high-quality images to high-density displays.

 7
ADDING IMAGES
 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)

The img element tells the browser to make a server request for
the image and display it in its place:

<p>This summer, try making pizza <img src="pizza.png" alt="">

on your grill.</p>
 The src attribute

<img src="/images/icon/next.png" alt="Next">

• 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.
 The alt Attribute
<p> If you're <img src="/images/smiley.png" alt="happy"> and
you know it, clap your hands.</p>

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

• When an image is used as a link, the alt text serves as the linked text.

• Avoid starting alt text with “An image of” or “Graphic of”.
 width and height Attributes
<img src="flowers.svg" alt="" width="120" height="160">

• 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.
 A link as image

To use an image as a link, put the <img> tag inside the <a> tag:

Example
<p>The image is a link. You can click on it.</p>

<a href="default.php"><img src="smiley.gif" alt="HTML tutorial“></a>

The image is a link. You can click

 10
EMBEDDED MEDIA
 OVERVIEW

• 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 width and height attributes specify the size of the window in
pixels.
 Embedded Video
<video> </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>
 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

 Audio Players
<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">
</audio>