Scribd
Upload
5 views8 pages

HTML Links

The document provides an introduction to HTML links, explaining their function as connections between web resources and detailing the syntax for creating links using the <a> tag. It covers various attributes such as href and target, and demonstrates how to use images as links. Additionally, it introduces the <link> tag for linking external stylesheets and site icons within the HTML document's head section.

Uploaded by

nalumansitheresa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views8 pages

HTML Links

The document provides an introduction to HTML links, explaining their function as connections between web resources and detailing the syntax for creating links using the <a> tag. It covers various attributes such as href and target, and demonstrates how to use images as links. Additionally, it introduces the <link> tag for linking external stylesheets and site icons within the HTML document's head section.

Uploaded by

nalumansitheresa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 8

INTRODUCTION TO WEB DESIGN

DCIS1204
SEMISTER TWO
YEAR ONE
HTML LINKS

A link is a connection from one Web resource to another. Although a simple concept, the link has
been one of the primary forces driving the success of the Web.
A link has two ends -- called anchors -- and a direction. The link starts at the "source" anchor and
points to the "destination" anchor, which may be any Web resource (e.g., an image, a video clip, a
sound bite, a program, an HTML document, an element within an HTML document, etc.).
The default behavior associated with a link is the retrieval of another Web resource. This behavior
is commonly and implicitly obtained by selecting the link (e.g., by clicking, through keyboard
input, etc.).
Types of links
1. <a> Links(anchor links/tag)
Syntax
In HTML, links are defined with the <a> tag:
<a href="url">link text</a>
HTML LINKS

The Anchor Attributes


The href attribute specifies the destination address (http://www.jumia.com)
The link text is the visible part (Visit our HTML tutorial). When you click on the link text, you will
be led to the specified address.
Example
<a href="http://www.jumia.com/">Visit our site</a>
Note:The link text does not have to be text. It can be an HTML image or any other HTML element.
HTML Links - Colors
When you move the mouse over a link, two things will normally happen:
The mouse arrow will turn into a little hand
The color of the link element will change
HTML LINKS
HTML LINKS

By default, a link will appear like this (in all browsers): unless you set the colors from the
default colors to yours.
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
 HTML Links - The target Attribute
 The target attribute specifies where to open the linked document. You may set the target
document to open from a new window or tab.
 Example
 <a href="http://www.mtac.com/" target="_blank">Visit MTAC</a>
 The example above will open the linked document in a new browser window or in a new tab.
HTML LINKS

HTML Links - Image as Link.


To use image as a link in HTML, use the <img> tag as well as the <a> tag with the href attribute. The <img>
tag is for using an image in a web page and the <a> tag is for adding a link. Under the image tag src attribute,
add the URL of the image. With that, you can also add the height and width.
<!DOCTYPE html>
<html>
<body>
The following image works as a link:<br>
<a href="https://www.qries.com/">
<img src="https://www.qries.com/images/banner_logo.png"
width=150" height="70" alt="Qries">
</a>
</body>
</html>
HTML LINKS

2. HTML <link> tag


The <link> tag is commonly used to link the external Stylesheet for the current document, but it
can also use with link site icons. It is placed on the head section of the document.The HTML
External Resource Link element (<link>) specifies relationships between the current document and
an external resource. This element is most commonly used to link to stylesheets, but is also used to
establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile
devices) among other things.
To link an external stylesheet, you'd include a <link> element inside your <head> like this:
<link href="main.css" rel="stylesheet">
This simple example provides the path to the stylesheet inside an href attribute, and a rel attribute
with a value of stylesheet. The rel stands for "relationship", and is probably one of the key features
of the <link> element — the value denotes how the item being linked to is related to the containing
document.
HTML LINKS

NOTE: There are a number of other common types you'll come across. For example, a link to the
site's favicon:
<link rel="icon" href="favicon.ico">

You might also like