Chapter 2:

Create
Links And
Design A
Webpage

Madam Norzita binti

Duriat
Attribute

Attributes provide additional information about HTML

elements.
HTML Attributes:
HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value
Example:

<a
href="http://www.w3schools.com">This
is a link</a>
attribute
Formatting

Refer to character sets and special characters.

HTML uses tags like <b> and <i> for
formatting output, like bold or italic text.
Example:
<b> This text is bold </b>
This text is bold Output
Entities

Some characters are reserved in HTML.

It is not possible to use the less than (<) or
greater than (>) signs in your text, because the
browser will mix them with tags.
To actually display reserved characters, we
must use character entities in the HTML source
code.
Use &entity_name; OR &#entity_number;
Example:
Web
structure
Working with Web Site Structures

A storyboard is a diagram of a Web sites structure,

showing all the pages in the site and indicating how they are
linked together
It is important to storyboard your Web site before you start
creating your pages in order to determine which structure
works best for the type of information the site contains
A well-designed structure can ensure that users will be able
to navigate the site without getting lost or missing important
information

New Perspectives on HTML and XHTML, Comprehensive

Linear Structures

In a linear structure, each page is linked with the pages

that follow and precede it in an ordered chain
Linear structure works best for Web pages with a clearly
defined order
In an augmented linear structure, each page contains an
additional link back to an opening page

New Perspectives on HTML and XHTML, Comprehensive

Linear Structures

A linear structure

An augmented
linear structure

New Perspectives on HTML and XHTML, Comprehensive

Hierarchical Structures

In the hierarchical structure, the pages are linked going

from the home page down to more specific pages
Users can easily move from general to specific and back
again
Within this structure, a user can move quickly to a specific
scene within the page, bypassing the need to move through
each scene in the play

New Perspectives on HTML and XHTML, Comprehensive

Hierarchical Structures

New Perspectives on HTML and XHTML, Comprehensive

Mixed Structures

As Web sites become larger and more complex, you often

need to use a combination of several different structures
The overall form can be hierarchical, allowing the user to
move from general to specific; however, the links also allow
users to move through the site in a linear fashion
A site index is a page containing an outline of the entire
site and its contents

New Perspectives on HTML and XHTML, Comprehensive

Mixed Structures

New Perspectives on HTML and XHTML, Comprehensive

Web Site with No Coherent Structure

New Perspectives on HTML and XHTML, Comprehensive

Create
hypertext
link
Creating a Hypertext Link

New Perspectives on HTML and XHTML, Comprehensive

Creating a Hypertext Link

To link to a page, you specify the name of the file

using the href attribute of the <a> tag
Filenames are case sensitive on some operating
systems, including the UNIX and Macintosh, but
not on others
The current standard is to use lowercase filenames
for all files on a Website and to avoid special
characters such as blanks and slashes
You should also keep filenames short to avoid
typing errors
To create link to a file
New Perspectives on HTML and XHTML, Comprehensive
Creating a Hypertext Link

New Perspectives on HTML and XHTML, Comprehensive

Specify
Folder path
Specifying
a Folder
Path

New Perspectives on HTML and XHTML, Comprehensive

Specifying a Folder Path

To create a link to a file located in a different folder than the

current document, you must specify the files location, or
path
An absolute path specifies a files precise location within a
computers entire folder structure
A relative path specifies a files location in relation to the
location of the current document
If the file is in the same location as the current document,
you do not have to specify the folder name
If the file is in a subfolder of the current document, you have
to include the name of the subfolder

New Perspectives on HTML and XHTML, Comprehensive

Specifying a Folder Path

If you want to go one level up the folder tree, you start the
relative path with a double period (..), a forward slash, and
then provide the name of the file
To specify a different folder on the same level, known as a
sibling folder, you move up the folder tree using the
double period (..) and then down the tree using the name of
the sibling folder
You should almost always use relative paths in your links

New Perspectives on HTML and XHTML, Comprehensive

Specifying a Folder Path

New Perspectives on HTML and XHTML, Comprehensive

Linked
images and
image maps
Working with Linked Images
and Image Maps
A standard practice on the Web is to turn the Web sites logo
into a hypertext link pointing to the home page
<a href="reference"><img src="file"
alt="text" /></a>
HTML also allows you to divide an image into different
zones, or hotspots, each linked to a different destination

New Perspectives on HTML and XHTML, Comprehensive

Working with Linked Images
and Image Maps

New Perspectives on HTML and XHTML, Comprehensive

Working with Linked Images
and Image Maps
To define these hotspots, you create an image map that
matches a specified region of the inline image to a specific
destination
To define these hotspots, you create an image map that
matches a specified region of the inline image to a specific
destination

New Perspectives on HTML and XHTML, Comprehensive

Client-Side Image Maps

A client-side image map is inserted in an image map into

the HTML file
The browser locally processes the image map
Because all of the processing is done locally, you can easily
test Web pages
More responsive than server-side maps
The browsers status bar displays the target of each hotspot
Older browsers do not support client-side images

New Perspectives on HTML and XHTML, Comprehensive

Server-Side Image Maps

In a server-side image map, the image map is stored on

the Web server
Server-side image maps are supported by most graphical
browsers
Server-side image maps can be slow to operate
The browsers status bar does not display the target of each
hotspot

New Perspectives on HTML and XHTML, Comprehensive

Defining Hotspots

Define a hotspot using two properties:

Its location in the image
Its shape
Syntax of the hotspot element:
<area shape=shape coords=coordinates href=url
alt=text />

New Perspectives on HTML and XHTML, Comprehensive

Creating a Default Hotspot

<area shape="default" coords="0, 0, x, y" />

where x is the width of the inline image in pixels and y is the
images height
Any spot that is not covered by another hotspot will activate
the default hotspot link

New Perspectives on HTML and XHTML, Comprehensive

Creating a Rectangular Hotspot

Two points define a rectangular hotspot:

the upper-left corner
the lower-right corner
A sample code for a rectangular hotspot is:
<area shape=rect coords=384,61,499,271
href=water.htm>
Coordinates are entered as a series of four numbers
separated by commas
HTML expects that the first two numbers represent the
coordinates for the upper-left corner of the rectangle, and
the second two numbers indicate the location of the lower-
right corner
The hotspot is a hypertext link to water.htm

New Perspectives on HTML and XHTML, Comprehensive

Creating a Circular Hotspot

A circular hotspot is defined by the location of its center

and its radius
A sample code for a circular hotspot is:
<area shape=circle coords=307,137,66
href=karts.htm>
Coordinates are (307, 137), and it has a radius of 66 pixels
The hotspot is a hypertext link to karts.htm

New Perspectives on HTML and XHTML, Comprehensive

Creating a Polygonal Hotspot

To create a polygonal hotspot, you enter the coordinates for

each vertex in the shape
A sample code for a polygonal hotspot is:
<area shape=polygon
coords=13,60,13,270,370,270,370,225,230,225,
230,60 href=rides.htm>
Coordinates are for each vertex in the shape
The hotspot is a hypertext link to rides.htm

New Perspectives on HTML and XHTML, Comprehensive

Creating a Client-Side Image Map

New Perspectives on HTML and XHTML, Comprehensive

Applying an Image Map

New Perspectives on HTML and XHTML, Comprehensive

Uniform
Resource
Locator (url)
Introducing URLs

To create a link to a resource on the Internet, you need to

know its URL
A Uniform Resource Locator (URL) specifies the precise
location of a resource on the Internet
A protocol is a set of rules defining how information is
exchanged between two resources

New Perspectives on HTML and XHTML, Comprehensive

Introducing URLs

Your Web browser communicates with Web servers using the

Hypertext Transfer Protocol (HTTP)
The URLs for all Web pages must start with the scheme
http
Other Internet resources use different protocols and have
different scheme names

New Perspectives on HTML and XHTML, Comprehensive

Internet Protocols

New Perspectives on HTML and XHTML, Comprehensive

Linking to a
website
Linking to a Web Site

A sample URL for a Web page

New Perspectives on HTML and XHTML, Comprehensive

Linking to a Web Site

If a URL includes no path, then it indicates the topmost

folder in the servers directory tree
If a URL does not specify a filename, the server searches for
the default home page
The server name portion of the URL is also called the
domain name
The top level, called an extension, indicates the general
audience supported by the Web server
Example:
<a href="http://www.apogeephoto.com">Apogee Photo</a>

New Perspectives on HTML and XHTML, Comprehensive

Linking to a Web Site

New Perspectives on HTML and XHTML, Comprehensive

Linking to
ftp server
Linking to FTP Servers

FTP servers are another method of storing and sharing files

on the Internet
FTP servers transfer information using a communications
protocol called File Transfer Protocol, or FTP for short
An FTP server requires each user to enter a password and a
username to access its files
<a href=ftp://servername> Content </a>

New Perspectives on HTML and XHTML, Comprehensive

Linking to FTP Servers

New Perspectives on HTML and XHTML, Comprehensive

Linking to a Local File

On occasion, you may see the URL for a file stored locally on
your computer or local area network
If you are accessing a file from your own computer, the
server name might be omitted and replaced by an extra
slash (/)
The file scheme here does not imply any particular
communication protocol; instead the browser retrieves the
document using whatever method is the local standard for
the type of file specified in the URL

New Perspectives on HTML and XHTML, Comprehensive

Linking to
email
address
Linking to an E-Mail Address

Many Web sites use e-mail to allow users to communicate

with a sites owner, sales representative, or technical
support staff
You can turn an e-mail address into a hypertext link, so that
when a user clicks on an address, the browser starts an e-
mail program and automatically inserts the address into the
To field of the new outgoing message
<a href=mailto:email_address>Content</a>

New Perspectives on HTML and XHTML, Comprehensive

Linking to an E-Mail Address

The mailto protocol also allows you to add information to the

e-mail, including the subject line and the text of the
message
mailto:address?header1=value1&header2=value2& ...
mailto:ghayward@camshotscom?Subject=Test&Body=
This%20is%20a%20test%20message
To preserve information about blank spaces, URLs use
escape characters

New Perspectives on HTML and XHTML, Comprehensive

Linking to an E-Mail Address

New Perspectives on HTML and XHTML, Comprehensive

Linking to an E-Mail Address

If you need to include an e-mail address in your Web page,

you can take a few steps to reduce problems with spam:
Replace all e-mail addresses in your page with inline images of
those addresses
Write a program in a language JavaScript to scramble any e-mail
address in the HTML code
Replace the characters of the e-mail address with character
codes
Replace characters with words in your Web pages text

New Perspectives on HTML and XHTML, Comprehensive

Linking to an E-Mail Address

New Perspectives on HTML and XHTML, Comprehensive