WORKING WITH

LINKS AND
EMBEDDED CONTENT
HYPERLINKS
• These are the essence of the web.
• It allows users to access various pages on the Internet.
<a> (Anchor Tag)
The <a> (anchor tag) is also called as Hyperlink Tag.

These are the two (2) items involved in creating links:

1. The file or the location (URL) of the file that will be linked;
and
2. The text to which the link or URL will be attached.
<a> (Anchor Tag)
• In order to attach links to certain text, you need to use the
link, <a>, also known as the anchor tag, and end with a
closing tag </a>.

• The link address or URL (Uniform Resource Locator) is

defined by the href attribute while the point of display is
defined by the target attribute.
LINK ATTRIBUTES
Attribute Description
href URL • It specifies the address or destination
of the link or the source of an object;
also known as the link attribute.

target _blank • It specifies where the linked

_self document will open.
_top
framename
hreflang language_code • It specifies the language of the linked
document; used only when the href
attribute is set.
LINK ATTRIBUTES
Attribute Description
download filename • It specifies the hyperlink target to
download; only works with Firefox
and chrome.

media media_query • It specifies the type of media or

device the document is optimized for

type MIME_type • It specifies the linked document’s

MIME type.
LINK ATTRIBUTES
Attribute Description
rel alternate • It specifies how the current document
author and the linked document are related.
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
href Attribute
• href stands for Hypertext Reference.
• This particular attribute is used to specify destination of the
link or source of an object.
• The value this attribute is the address of the destination or the
source of data in the form of a URL – is the unique address
of a website, a document, or any type of data found on the
World Wide Web (WWW).
• The value of a URL is enclosed with a double quotation
mark (“ “).
href Attribute
Examples of href attribute written in URL:

href=“http://battle.caleduc.com/register.html”
href=“http://battle.caleduc.com/categories”
href=“http://battle.caleduc.com/categories/programming.html”
href=“http://battle.caleduc.com/info/programming.html”
href=“info/programming.html”
href=“register.html”
RELATIVE REFERENCES
• These references points to files based on their locations in relation to
the current file.

ABSOLUTE REFERENCES
• These references points pages and files by starting at the top level of
the directory hierarchy.
• It always begin with the protocol, followed by the domain name and
the location of the file or page to be linked.
TARGET ATTRIBUTES

• These attributes specifies where the destination page or

linked document will be displayed.
• _self is the default target value.
• _blank is the common target value.
TARGET VALUES
_blank • This is a target value that the linked
document is shown or opened in a new
browser window.
_self • This is a target value that the linked
document is shown or opened in the
current window.
_top • This is a target value that the linked
document is shown or opened within the
current browser window.
framename • This is a target value that the linked
document is shown or opens in an
iframe..
SYNTAX using target attribute:

<a href=“www.google.com” target=“_blank”> Link to site

</a>
SYNTAX for Hyperlinks

SYNTAX using target attribute:

<a href=“destination URL” target=“target-value”> Link

Example </a>
Three (3) states of LINK:

1. UNVISITED LINK - this is viewed with underlined and

blue.
2. ACTIVE LINK – this is viewed with underlined and red.
3. VISITED LINK – this is viewed with underlined and
purple
Bookmark Links

- These are links that allows a visitor to jump from one section
of a web page to another specific section within the same web
page.
Embedding IMAGES, SOUNDS, and
VIDEOS
- Adding graphics and other content to your web pages makes
it more attractive.
- It also help emphasize the information that you present in
your web page.
INSERTING IMAGES
- Embedding graphics requires the use of <img> tag.
- This tag is combined with the src attribute, which points the
source of the image that is being inserted into the HTML
document, the value for this attribute can be an absolute or
relative reference.
- Alternative text denoted by alt attribute is used to describe
the image.
- File extensions for images to use are .jpg, .gif, .png and .svg.
Syntax for <img> tag

<img src=“file location” alt=“alternative text”>

Example:
• <img src=“logo.png” alt=“CAL logo”>
• <img src=“http://caleduc.com/images/cal_red.png” alt=“CAL logo
on Red”>
Resizing an Image

Use the height and width attributes.

Example:
<img src=“logo.png” alt=“CAL logo” style=“width:10px;
height:40px;”>
Inserting Sounds

• The <audio> tag is used to add audio.

Example syntax:
<audio controls>
<source src=“explode.ogg” type=“audio/ogg”>
<source src=“explode.wav” type=“audio/wav”>
<source src=“explode.mp3” type=“audio/mpeg”>
</audio>
Inserting Sounds

• Controls attribute – adds a control panel with buttons for play,

pause, volume, and others.
• The <source> tag allows you to specify alternative sources and
formats, the browser will choose the first compatible file format.
• The type attribute – specifies the media type for each sources.