Lesson 6

Working with Links and Embedded Content

Using the anchor tag, <a>

There are two items involved in creating links:
1. The file of the location (URL) of the file that will be linked;
2. the text to which the link or URL will be attached.
In order to attach links to certain text, you need to use the link tag, <a>, also known as the anchor tag, and
end with a closing tag </a>. However, without the link attribute, which in most cases are the name, href, and
title, your tag is incomplete.
The name attribute refers to the name of the link.
The href attribute is the most important aspect of the link.
The title attribute is the title of the location to which the link will lead.
Links can be attached to any element on a Web page. Text, images, and sometimes multimedia content, are
attached with links.

How to Add Links

To add links to a text or element, it has to be enclosed in the <a> and </a> tags.
To add links to pages within your Web site:
1. Enclose the text that will be linked to files or pages in your Web site in <a> and </a> tags.
2. Add the href attribute to the opening <a> tag by using the location of the page within the project folder.
Example:
<a href=http://www.webaddress.com>Text</a>

or

<a href=D:\folder\page.html>Text</a>

Linking Pages Using Relative Pathnames

When you cite the filename about.html in the previous lesson, the browser will look for that file in the same
folder. The same happens when you publish the Web site. As long as you keep the two folders within the
same folder, you can use the filename in your href attribute. This is called relative pathnames.
Relative pathnames point to files based on their locations in relation to the current file. To use relative
pathnames, you can separate director or folder names with forward slashes (/) and use two dots to refer to
the root directory of the current file.

The table below shows examples of relative pathnames.

Pathnames
Meaning
The
page
is located within the same folder or directory
href=pagename.html
The HTML file is located in the foldername folder or
href=foldername/pagename.html
href=../pagename.html
href=../foldername/pagename.html

directory, and foldername folder is located in the directory

where the page that links to pagename.html is located.
pagename.html is located in the directory one level up from
the current directory.
pagename.html is located in a directory one level up.

Adding Links Using Absolute Pathnames

Absolute pathnames, on the other hand, point to pages and files by starting at the top level of the directory
hierarchy.
Absolute pathnames always begin with a slash, followed by directories in the path from the top level down to
the file that is being linked. The following table shows how absolute pathnames are used.

Pathnames
href=/Web site/pages/pagename.html

href=/d:/Web site/pages/pagename.html
href=/disk name/pages/pagename.html

Meaning
The file, pagename.html is located in the pages folder,
which is in the Web site folder.
The file, pagename.html is located in the pages folder,
which is located in the Web site folder in the d: drive.
The file, pagename.html is located in the pages folder,
which is located in the same hard disk drive called disk
name. This way of using absolute filename is usually done
when you are using Macintosh.

Linking to Other Content on the Web

When you publish your Web site, you are more likely to add links to pages on the Internet. These pages are
not part of your Web site, but they can enhance its quality and the information presented in its pages. You
can link to Web pages or URLs, and to individual files, such as images, documents, and audio files.
Linking to Web pages is the easiest, as discussed at the start of this section, How to Add a Link. Linking to
non-HTML content on the Web is also done similarly. For example, if you are linking to a graphic named
picture.jpg, simply add the full URL to the file to the href attribute.
<a href=http://www.website.com/pictures/picture.jpg>

How to Make Links Open in New Browser Windows

You can set your href attribute to open links in new browser windows. To do this, add target=_blank after
the URL of your link. For example, to open the link www.google.com in another browser window:

<a href=http://google.com target=_blank> Click here to open google </a>

Embedding Graphics, Sounds, and Dynamic Content

There are various graphic formats that you can embed in your Web pages. The recommended graphic
formats are those that are optimized for Web sites because they have smaller file sizes. Graphics or any
content that have large file sizes take too long to download. You can use images ending in .jpg or jpeg,
gif, and png.

How to Embed Graphics

Embedding graphics requires the use of the <img> tag. This tag is combined with the src attribute, which
points to the source of the image that is being inserted into the HTML document. That source is the complete
URL or filepath of the images.
To embed an image located in one of the folders in your computer:
1. Locate and copy the path to the image file. This is similar to using filepaths for Web pages inside your
computer or within the same folder.
2. Insert the filepath in your <img> tag. Follow the example below:

<img src=/c:/Web site/images/image.jpg />

To embed an online image:
1. Copy the complete URL of the image.
If you are using Internet Explorer, right-click on the image, and select File info. In the File info box,
select (highlight) and copy the URL of the image.
If you are using Firefox, right-click on the image, and then select Copy image location. Do the same
if you are using browsers other than Internet Explorer.
2. Insert the URL of the image in your <img> tag. For example:

<img src=http://www.loremipsum.com/image.jpg>
Make it a practice to add ALT attributes to your images. Using ALT provides a description or a name to your
image. For example, an image of a dog in your HTML document may be called My dog. To insert the ALT
attribute in your image, you may write the code as:

<img src=http://www.loremipsum.com/image.jpg alt=My dog>

Adding Multimedia Files

How to Add Audio Files
There are various audio formats that you can embed in your Web pages. These formats include MIDI, WAV,
and MP3 files. You can add them as links, similar to the way you would link to an HTML page or an existing
URL. However, most Web developers embed them in the Web page directly by using the <embed> tag.

To add a sound file to your Web page:

1. Get the filepath location of your audio if the file is located in your computer. If the
2. In your HTML code, add the following <embed> tag:
- If the Web page and the audio file are in your computer, use

<embed src=sound.mp3 />

- If the audio file is already on the Internet, use the following tag:

<embed src=http://www.Web site.com/audiodirectory/sound.mp3 />

You can extend the capabilities of the <embed> tag by setting its attributes. For the embedded audio file, you
can add the following attributes:
AUTOSTART=true The browser starts to play the sound automatically as soon as the user opens your
page.

<embed src=filename.mp3 autostart=true />

<embed src=URL autostart=true />
LOOP=Value It tells the browser how many times the audio must be played.

<embed src=filename.mpe loop=2 />

<embed src=URL loop=2 />
Hidden=true The browser will hide the controls for playing the audio file.

<embed src=filename.mpe hidden=true />

<embed src=URL hidden=true />

How to Add Video Files

Videos can be embedded in a similar manner to audio. You still have to use the <embed> tag and set its
attributes. The most popular video formats that are being embedded in Web pages today include AVI, MOV,
MPG, MP4, and in the case of online videos, such as those found in YouTube.com, FLV. FLV is a flash
format, which is lighter in file size than most other formats.
To embed videos in your page:
1. Identify the filepath of the video file if it is located in your computer, or if it is located in a folder that is
different from the folder where your web page is saved.
2. If the video is online, copy its full URL.
3. Insert the filepath in your <embed> tag.
If the file is in your computer, type:

<embed src=video.avi. />

If the file is online, or on the Internet:

<embed src=http://www.Web site.com/filedirectory/video.avi />

Setting Video Embed Attributes

You should set the attributes of your embedded video. Otherwise, the default settings of the browser will be
used. Some browsers show the controls, while others simply show videos on the Web page.
Modifying attributes allows you to set whether the video will play automatically, loop indefinitely, or leave the
controls to the sites visitor or the viewer. Some files also require special Web browser plug-ins in order to
play the video. The table below shows all the attributes that you can use for your embedded video. All you
have to do is place them after the source attribute.
Attribute
Description
align
Aligns the video in relation to the Web page. Allowable values are absbottom,
absmiddle, baseline, bottom, left, middle, right, texttop, and top.
alt
Alternative text. You can add the name or any description to this attribute. For example:
<embed src=http://www.video.com/video.avi alt=this is my video />
class
Sets the class of the element.
height
Sets the height of the video.
hspace
The horizontal margin between the video and other elements or contents in the
page.
id
The ID of the element. This is useful once you start using CSS or Cascading Style
Sheets.
name
The name of the video or element.
vspace
The vertical margin between the video and its surrounding contents, such as text
or images.
width
The width of the video.
type
The type of the embedded media.
border
The width or size of the border surrounding the video. You can set it, for example,
as 2px (pixels).
plugin
Identifies the required plugin to run the video. To add this value, insert the location
or URL of the site where the plugin can be downloaded. This is especially useful for
embedding flash videos.
Lesson 7

Adding Tables