Scribd
Upload
29 views

Lesson 04 - Adding Links

This document discusses how to add different types of links in webpages, including: - Making links to external webpages and documents on the same server using absolute and relative URLs - Linking to specific points in a page using IDs and fragment identifiers - Opening links in new windows using the target attribute - Creating mailto links to pre-address email messages - Examples are provided for linking within directories on the same server using relative paths like ../ to go up levels

Uploaded by

Jhedel A. Jintalan
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
29 views

Lesson 04 - Adding Links

This document discusses how to add different types of links in webpages, including: - Making links to external webpages and documents on the same server using absolute and relative URLs - Linking to specific points in a page using IDs and fragment identifiers - Opening links in new windows using the target attribute - Creating mailto links to pre-address email messages - Examples are provided for linking within directories on the same server using relative paths like ../ to go up levels

Uploaded by

Jhedel A. Jintalan
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 24

Lesson 04

Adding Links
Objectives
• Making links to external webpages
• Making relative links to documents on your
own server
• Linking to a specific point in a page
• Adding "mailto“ link
• Targeting new windows
Anchor <a>
• element that makes linking possible is the
anchor tag (<a>…</a>).
• To make a selection of text a link, simply
wrap it in opening and closing <a>...</a>
tags and use the href attribute to provide the
URL of the target page.
• To make an image a link, simply put the img
element in the anchor element:
The href Attribute
• Absolute URLs provide the full URL for the
document, including the protocol (http://), the
domain name, and the pathname as
necessary.
• You need to use an absolute URL when
pointing to a document out on the Web (i.e.,
not on your own server).
example: href="http://www.oreilly.com/"
• Relative URLs describe the pathname to a
file relative to the current document. Relative
URLs can be used when you are linking to
another document on your own site (i.e., on
the same server). It doesn’t require the
protocol or domain name—just the
pathname.
example: href="recipes/index.html"
Linking Within Your Own Site
Linking within a directory
• A link to just the filename indicates the linked
file is in the same directory as the current
document.
Linking to a lower directory

• See example in the next page


Linking two directories down
• When linking to a file in a lower directory, the
pathname must contain the names of the
subdirectories you go through to get to the
file. (see figure next page)
Linking to a higher directory
• In Unix, there is a pathname convention just
for this purpose, the “dot-dotslash” (../).
When you begin a pathname with ../, it’s the
same as telling the browser “back up one
directory level” and then follow the path to
the specified file.
• Each ../ at the beginning of the pathname
tells the browser to go up one directory level
to look for the file.
• A link on the couscous.html page back to the
home page (index.html) would look like this:
<p><a href="../../index.html">[Back to home page]</a></p>
• The first ../ backs up to the recipes directory;
the second ../ backs up to the top-level
directory where index.html can be found.
Again, there is no need to write out the
directory names; the ../ does it all.
Note: It’s the same with images
• The src attribute in the img element works
the same as the href attribute in anchors
when it comes to specifying URLs. Since
you’ll most likely be using images from your
own server, the src attributes within your
image elements will be set to relative URLs.
Linking to a specific point in a
page
1. Identifying the destination.
– To create a destination, use the id attribute to
give the target element in the document a unique
name or fragment identifier.
2. Linking to the destination
– Use the a element with the href attribute to
provide the location of the link.
– To indicate that I’m linking to a fragment, I use
the octothorpe symbol (#), also called a hash or
number symbol, before the fragment name.
Targeting a New Browser Window
• To open a new window using markup, use
the target attribute in the anchor (a) element
to tell the browser the name of the window in
which you want the linked document to open.
Set the value of target to _blank or to any
name of your choosing.
Mail Links
• By using the mailto protocol in a link, you
can link to an email address. When the user
clicks on a mailto link, the browser opens a
new mail message preaddressed to that
address in a designated mail program.
Lab Activity
• Perform Lab Sheet 3-1
– Link all the pages of Jen’s Kitchen
• Perform Lab Sheet 3-2
– Make a page link of glossary page from K to P

You might also like