Links

• Creating links between pages

• Email links
• Linking to other sites
 LINKS
Links are the defining feature of the web because they allow you to move from
one web page to another — enabling the very idea of browsing or surfing.
You will commonly come across the following types of links:
● Links from one website to another
● Links from one page to another on the same website
● Links from one part of a web page to another part of the same page
● Links that open in a new browser window

● Links that start up your email program and address a new email to someone

75
 Writing Links
Links are created using the <a> element. Users can click on anything
between the opening <a> tag and the closing </a> tag. You specify
which page you want to link to using the href attribute.

This is the page

This is The
The link Takes
TexT The user
<a you To
clicks on
href="http://www.google.com">IMDB
</a> closing link
opening link
Tag Tag

77
The text between the opening <a> tag
To write good link text, you can think
Many people navigate websites
and closing </a> tag is known as link
of words people might use when
by scanning the text for links.
text. Where possible, your link text
searching for the page that you are
Clear link text can help visitors
should explain where visitors will be
linking to. (For example, rather than
find what they want. This will
taken if they click on it (rather than just
write "places to stay" you could use
give them a more positive
saying "click here"). Below you can
something more specific such as
impression of your site and may
see the link to IMDB that was created
"hotels in New York.")
encourage them to visit it for
on the previous page.
longer. (It also helps people
using screen reader software.)

LINK 78
S
 LINKING TO OTHER SITES
<a>
Links are created using the <a> element which has an attribute called href.
The value of the href attribute is the page that you want people to go to when they
click on the link.
Users can click on anything that appears between the opening <a> tag and the
closing </a> tag and will be taken to the page specified in the href attribute.
Browsers show links in blue with an underline by default.

<p>Movie Reviews:
LINK
<ul> S

<li><a href="http://www.empireonline.com">Empire</a></li>
<li><a href="http://www.metacritic.com">Metacritic</a> </li> 78

<li><a href="http://www.rottentomatoes.com">RottenTomatoes</a> </li>

 LINKING TO OTHER PAGES ON THE SAME SITE
linking-to-other-pages.html

HtMl
<p>
Relative URLs help when building a site on your computer
<li><a <ul> because you can create links between pages without having to
href="index.html">Home</a></li> set up your domain name or hosting.
<li><a If all the pages of the site are in the same folder,
href="about-us.html">About</a></li>
R es ul then the value of the href attribute is just the name
t
<li><a of the file.
href="movies.html">Movies</a></li>
</ul
<li><a
> If you look at the download code for each chapter,
href="contact.html">Contact</a></li>
</p>
When linking to other pages We will take a closer look at you will see that the index.html file contains
within the same site, you can use relative URLs on pages 83-84 as
reLAtive urLs
relative URLs. These are like a there are several helpful shortcuts links that use relative URLs.
shorthand version of absolute you can use to write links to other
URLs because you do not need to pages on your own website.
specify the domain name.
LINK 80
S
If you have different pages of a site in different folders, then
you can use a slightly more complex syntax to indicate where
the page is in relation to the current page. You will learn
more about these on the pages 81-84.
 Directory structure
On larger websites it's a good idea to organize your code by placing the pages for each different
section of the site into a new folder. Folders on a website are sometimes referred to as
directories.

structure reLAtionshiPs homePAges

The diagram on the right shows The relationship between files The main homepage of a site
the directory structure for a and folders on a website is written in HTML (and the
fictional entertainment listings described using the same homepages of each section in a
The top-level
website calledfolder is known as
ExampleArts. In the diagram
terminology as on the right,
a family tree.you Web
child servers
folder) are usually set up to
is called
the root folder. (In this example, can see some relationships have return the
index.html. index.html file if
the root folder is called been drawn in. no file name is specified.
The examplearts folder is Therefore, if you enter
examplearts.) The root examplearts.c it will return
a parent of the movies, examplearts.com/index
foldersection
Each contains
of all
theofsite
theisother
placed om
music and theater .html, and
files and folders for a
in a separate folder; this website.
helps folders. And the the movies, examplearts.com/
organize the files. music and theater folders music will return
are children of the examplearts
If you are working with a content examplearts folder.
Instead, these systems often use .com/music/
Editing the template file would
management system, blogging one template file for each index.html.
change all of the pages that use
software, or an e-commerce different type of page (such as that template. Do not change any
system, you might not have news articles, blog posts, or code that is not HTML or you
individual files for each page of products). may break the page.
the website.

8 LINK
1 S
 PArent examplearts grAnDPArent
The examplea folder is a index.html The examplearts folder is
rtsof the musi folder.
parent images
logo.gi a grandparent of the dvd
c movies
fcinema folder.
index.html
listings.html
dvdreviews.html gr AnDchiLD
index.html The dv folder is a grandchild
reviews.html d examplea folder.
of the
music index.html rts
chiLD
The musi folder is a index.html
c examplea
of the child listings.html
rts folder. theater
reviews.html
index.html
listings.html
reviews.html

Every page and every image on a The path to the homepage of this You use URLs when linking to
website has a uRl (or Uniform site is other web pages and when
Resource Locator). The URL is www.examplearts .co including images in your own
made up of the domain name m/index.html. The path site. On the next page, you will
followed by the path to that to the logo for the site is meet a shorthand way to link to
page or image. examplearts.com/images/ files on your own site.
lo g o.g if.
The root folder contains: ● A file Each sub-directory contains: ● A The movies section contains:
is the homepage for the is the homepage for that
called index.html which file called index.html which ● A folder called cinema ●
entire site section
movies, music
● Individual and
folders fortheatre
the reviews page called reviews
● A.ht A folder called DVD.
sections of the site ● Aml listings page called listing
.html (except for the
DVD section) s
LINK 82
S
 reLAtive urLs
Relative URLs can be used when linking to pages within your own
website. They provide a shorthand way of telling the browser where to
find your files.
When you are linking to a page on If all of the files in your site are
your own website, you do not in one folder, you simply use the
need to specify the domain name. file name for that page.
If your site is organized into
You can use relative uRls
separate folders (or directories),
which are a shorthand way to tell
you need to tell the browser how
This is especially
the browser wherehelpful when
a page is in
to get from the page it is
creating a new
relation to websitepage.
the current or learning
currently
If you link toonthetosame
the page
pagethat
from
about HTML because you can
you are linking to.
two different pages you might,
create links between pages when
they are only on your personal therefore, need to write two
computer (before you have got a different
These relative
links makeURLs.
use of the same
Because you do not need to
domain name and uploaded them terminology (borrowed from that
repeat the domain name in each
to the web). of family trees) you met on the
link, they are also quicker to
previous page which introduces
write.
directory structure.

83 LINK
S
reLAtive Link tyPe exAmPLe (from diagram on previous page)

sAme FoLDer
To link to a file in the same folder, just use the file To link to music reviews from the music homepage:
name. (Nothing else is needed.) <a
chiLD FoLDer href="reviews.html">Reviews</a>
For a child folder, use the name of the child folder, To link to music listings from the homepage:
</
followed by a forward slash, then the file name. <a
grAnDchiLD FoLDer a>
href="music/listings.html">List
Use the name of the child folder, followed by a To link to DVD reviews from the homepage:
ings
forward slash, then the name of the grandchild <a
folder, followed by another forward slash, then the href="movies/dvd/reviews.html"
file name.FoLDer
PArent >
Use ../ to indicate the folder above the current one, To link to the homepage from the music reviews:
Reviews</a>
then follow it with the file name. <a
grAnDPArent FoLDer href="../index.html">Home</a>
Repeat the ../ to indicate that you want to go up two To link to the homepage from the DVD reviews:
folders (rather than one), then follow it with the file <a
name. href="../../index.html">Home</a
>
When a website is live (that is, For example, you may see the A forward slash will return the
uploaded to a web server) you name of a child folder without homepage for the entire site,
may see a couple of other the name of a file. In this case and a forward slash followed
techniques used that do not work the web server will usually try by a file name will return that
when the files are on your local to show the homepage for that file providing it is in the root
computer. section. direc tor y.

LINK 84
S
 emAiL Links
mailto: c h a p t e r-0 4/e m ail- HtMl
<a href="mailto:[email protected]"> Email
lin k s.h t ml
To create a link that starts up the Jon</a>
user's email program and
addresses an email to a specified R es ul
email address, you use the <a> t
element. However, this time the
value
On theofright href
the you canattribute starts
see that an
with mailto:
email link looksandjustislike
followed
any by
the email
other address
link but, when you want the
it is clicked
email
on, thetouser's
be sent to. program will
email
open a new email message and
address it to the person specified
in the link.

85 LINK
S
 oPening ALirntkisc
Line A neW
HtMl
<a href="http://www.imdb.com"
window.html
WinDoW
chapter-04/opening-links-in-a-new-
If you want a link to open in a

target
target="_blank"> new window, you can use the
Internet Movie Database</a> (opens in new window) target attribute on the opening
R es ul <a> tag. The value of this
t One of the most common reasons
attribute should be _blank.
a web page author might want a
link to be opened in a new
window is if it points to another
website. In such cases, they hope
the user will return to the
window
Generallycontaining
you shouldtheir
avoid
site
after
opening
finishing
links in
looking
a new at
window,
the
other
but if one.
you do, it is considered
good practice to inform users
that the link will open a new
window before they click on it.

LINK 86
S
 Linking to A sPeciFic PArt
oF the sAme PAge
At the top of a long page you HtMl
chapter-05/linking-to-a-specifi c-
might want to add a list of part.html
contents that links to the <h1 id="top">Film-Making Terms</h1> <a
corresponding sections lower href="#arc_shot">Arc Shot</a><br /> <a
down. Or you might want to add href="#interlude">Interlude</a><br /> <a
a link from part way down the href="#prologue">Prologue</a><br /><br /> <h2
encircling or moving camera</p>
page back
Before youtocan
thelink
top to
of aitspecific
to save id="arc_shot">Arc Shot</h2> <p>A <p>A
<h2 id="interlude">Interlude</h2> shot inbrief,
which the
usersoffrom
part having
a page, youtoneed
scrollto back subject is photographed
intervening fi lm scene orby an
sequence, not
specifi cally tied to the plot, that appears within
to the top.
identify the points in the page that a id="prologue">Prologue</h2>
fi lm</p>
<h2 <p>A speech,
the link will go to. You do this
preface, introduction,
preceding or brief
the the main scene
action or plot of a fi lm;
using the id attribute (which can
be used on every HTML element). contrast
<p><a to epilogue</p>
You can see that the <h1> and href="#top">Top</a></p>
<h2>
The value elements
of the id in attribute
this example
have been given id
should start with a letter or an that
attributes
identify
underscorethose sections
(not a number of the
or any
page.
other character) and, on a single
page,
To linknototwo id attributes
an element should
that uses an
have
id the same
attribute youvalue.
use the <a>
element again, but the value of the
href attribute starts with the #
symbol, followed by the value of
the id attribute of the element you
want to link to. In this example,
<a href="#top"> links to
87 LINK
the <h1> element at the top of
S
the page whose id attribute has a
value of top.
 Linking to A
PArt oF Another PAge
sAPretciciFLice
R es ul If you want to link to a specific
part of a different page (whether
t
on your own site or a different
website) you can use a similar
As long as the page you are
technique.
linking to has id attributes that
identify specific parts of the
page, you can simply add the
same syntaxthe
Therefore, to href
the end of the will
attribute
link for the
contain thataddress
page. for the page
(either an absolute URL or a
relative URL), followed by the #
symbol, followed by the value of
For example,
the id to that
attribute link is
toused
the on the
bottom
elementof theare
you homepage of the
linking to.
website that accompanies this
book, you would write:
<a href="http:/www.
htmlandcssbookcom/
#bottom">

LINK 88
S