e-PG Pathshala

Subject: Computer Science

Paper: Web Technology
Module: HTML
Module No: CS/WT/6
Quadrant 1 – e-text

Learning Objectives
The last module explains about Tables and its attributes in HTML. Moreover, the module also
explains about HTML Forms . In this module we will know about Hyperlinks in HTML. We will also learn
about HTML Images, Frames, how to define Frames and the purpose of the Frameset document.

Introduction to Hyperlinks (Anchor Tag)

HTML provides a feature called Links that allows users to navigate from page to page by clicking on
words, phrases and images. These HTML links are called hyperlinks. A hyperlink is a text or an image and
when we click on, we jump to another document. A webpage can contain various links that takes us
directly to other pages and even specific parts of a given page. Thus we can create hyperlinks using text
or images available on a webpage.

Hyperlinks allow visitors to navigate between Web sites.

Hyperlinks are used for linking:

– within the same page. These are called as Named tags.

– To another page in a web site called Relative Link or local link.
– To another page outside a web site and these links are called Absolute link or remote link.
– Email Link

Hyper Links are normally displayed as highlighted and underlined text. When you click on it, it takes you
to another page on the web. The <a> tag is used for creating hyperlinks. The syntax is given as following,
 <a command=“target”>highlighted text</a>

Hyperlinks
Now let us see about how to create the different kinds of links in a webpage. Hyperlinks are created
with an "href" tag (hyperlink reference). In its simplest form the tag looks like this.

• Absolute Link: These are links to another page outside of our web site. These links specify the
entire URL of the page:
<a HREF=http://www.annauniv.edu/>AU We b Site</a>

The output of the above code is,

AU Web Site
• Relative Link: These are links to another page in our site so we do not have to specify the entire
URL.
<a HREF=“index.html”>Go back to main page</a>

The output of the above code is,

Go back to main page
• Targeted Links : A tag includes a target attribute. If we specify target=“_blank”, a new browser
window will be opened.
<a HREF=http://www.annauniv.edu target="_blank”> AU</a>

We will see in detail about these links when we get into frames.
• Email Link: We can mail to someone at:
<a href=“mailto:[email protected]”>Send email to e.x.</a>

As seen earlier there are two distinct types of hyperlink called "absolute" and "relative". Relative links
are divided into two further categories as "document-relative" and "site-root-relative" links.
Document-relative links use directions from the source page to the destination page. It depends on
whether the destination page is in the same directory as the source page or in a folder inside the source
page's folder or in a folder outside the source page's folder. We can use a ../ which signifies "one
directory higher". We can repeat the ../ to make the link more than one level higher which means going
up two levels, to a file.
Site-root-relative links use a single forward-slash / that starts at the document root of the website and
go down the directory path from there.
It is also possible to specify a target window or frame for a hyperlink where the link page can be opened.
If no target is specified, the link will be opened in the same window/frame.
The syntax for the page to be displayed in the same window/frame is given is below, here the target has
to be set as "self"):

<a href="page1.html" target="_self">Go To Page 1</a>

The target window options are,

_self : The link page opens in the same window and same frame.
_top : The link page opens in the same window, taking the full window if there is more than one frame.
_parent : The link page opens in the parent frame.
_blank : The link page opens in a new window.

Hyperlinks - Examples
This is an example of HTML links and the specific code that we can use in the design of a website.
<a href="form.html">Fill Our Form</a> <br />
<a href="../parent.html">Parent</a> <br />
<a href="stuff/cat.html">Catalog</a> <br />
<a href=http://www.xbg.org target="_blank">BASD</a> <br />
<a href="mailto:[email protected]?subject=Bug Report">Please report bugs here (by e -
mail only)</a>
<br />
<a href="apply-now.html"><img src="apply-now-button.jpg” /></a> <br />
<a href="../english/index.html">Switch to English version</a> <br />

In this example, the text "Fill Our Form" becomes a hyperlink to a page called "form.html".
The text "Parent" signifies a link to a page one level higher. The text "Catalog" is a site-root-relative link
that follows the path from directory 'stuff' to cat.html. the text "BASD" opens the page in a new
window. The text "Please report bugs here (by e-mail only)" is a link to an email address with a specified
subject. Next is a link which hovers over an image. The text " Switch to English version" is a link which
goes one level higher and follows the path from the directory 'english' to 'index.html'.
The output of the above code is displayed in Figure 6.1.
 Figure 6.1 Hyperlinks

Links to the Same Document – Example

We can also create links to navigate within the document and jump to specific parts of a Web page. This
is practical when our website has long pages. Scrolling or navigating within the page is called
bookmarking the page. To make a bookmark in the web page, we must first create the bookmark with
the "id" attribute and then add a link to it from within the same page. When the link is clicked, the page
will scroll to the location with the bookmark.

To create a bookmark with the id attribute, specify id="section1" as shown below,

<h2 id="se ction1">Introduction</h2>
To add a link to the bookmark ("Introduction"), from within the same page specify the same id.
<p><a href="#section1 ">Introduction</a><br />

Following is an example to explain this concept. There are three sections within the web page as
'Introduction', 'Some Background' and 'History of the project'. These sections are created by
bookmarking them with ids such as 'section1', 'section2' and 'section3'. Then we create links by
specifying the ids of the sections in the page.

<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br />
<a href="#section2.1“>History of the proje ct</a><br />
 ...the rest of the table of contents...
<!-- The document text follows here -->
<h2 id="section1">Introduction</h2>
... Section 1 follows here ...
<h2 id="section2">Some background</h2>
... Section 2 follows here ...
<h3 id="section2.1">Project History</h3>
... Section 2.1 follows here ...

The following Figure 6.2 shows the output of the above code for how to link to an element
within a page with a specified id.

Figure 6.2 Link to an element with a specified id within a page

Frames and Framesets

HTML frames are useful when we need to divide the browser window into multiple sections and to load
a separate HTML document in each section. These collections of HTML frames in the browser window
are called as a frameset. The browser window is divided into frames as rows and columns in the same
way as the tables are organized as rows and columns.
HTML frames are used to display documents in multiple views, which may be in independent windows
or in sub windows. Multiple views on a HTML frame offer web designers a way to keep certain
information visible, while other views are scrolled or replaced. Frameset provides us a promising
solution when the data in some parts of a page needs to be changing while the other remains static. For
example within the same window, the page header, banner section and footer section may remain static
for many pages and the main document may be scrolled through or replaced by navigating in another
frame.

• A frameset partitions a web browser window so that multiple web documents can be displayed
simultaneously.
• We divide a document into frames using the <frameset> element
• Only the <frame> element and other <frameset> elements are the items that can be placed
inside a <frameset> element
• The <frameset> element replaces the <body> element that is used in non-frame documents.
• Frames are created in horizontal rows and vertical columns.

The <frameset> Tag

The <frameset> tag is the container tag that requires a closing </frameset> tag. This tag divides the
browser window into rectangular subspaces called frames. The <frameset> element contains one or
more <frameset> or frame elements, along with an optional <noframes> element to provide alternate
content for browsers that do not support frames or have frames disabled. This tag also determines the
frame types as Column frames and Row frames. Based on the sizes specified for the rows and cols
attributes the sub frames are defined with the respective dimensions in the frame set. The rows and cols
attribute takes the dimension as comma-separated list of length that is specified in pixels, or as a
percentage, or as a relative length. The row dimension splits the frames from top to bottom in height
and the cols attribute gives the width of each column from left to right.

Columns Example
The Figure 6.3 shows how the frames are divided into columns by specifying the cols attribute.
This frameset was created by the following code:
<frameset cols="35%,65%"> </frameset>
 Figure 6.3 Example of Column Frame
Rows Example
The Figure 6.4 shows how the frames are divided into rows by specifying the rows attribute.
This frameset was created by the following code:
<frameset rows="180,*"> </frameset>

Figure 6.4 Example of Row Frames

The <frame> Tag

The <frame> tag defines the content in each frame and it is placed between the <frameset> </frameset>
tags. The src attribute specifies the file that will appear in the frame.
In the following example, the page that will appear in the top frame is the file first.html, and the page
that will appear in the lower frame is second.html.
<frameset rows="180,*">
<frame src=“first.html"/>
<frame src=“second.html"/>
</frameset>

Framesets
A complete example of using <frameset> and <frame> elements are shown in the following code. The
browser window is divided into two columns using the cols attribute. The <frame> element defines the
content "navigation.html" to be displayed in the left column and the "intro.html" to be displayed in the
right column. The output of the code is shown in Figure 6.5.
<html>
<head><title>Frames 1</title></head>
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frame name="mainF" src="intro.html">
</frameset>
</html>

Figure 6.5 Example of <frameset> and <frame> element

In the code we can see the <frameset> element replaces the <body> element. The <frameset> has
attributes cols or rows, can be defined in terms of pixels, percentage(%) or unspecified (*) which splits
the window into two or more columns or rows.
Frame attributes
Let us now consider the following example to explain about the frame attributes.
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frame name="mainF" src="intro.html">
</frameset>
The name attribute uniquely identifies the frame. It is used as the target in an anchor (<a>) element.
The src attribute specifies the web page to be placed in the frame initially and it may subsequently
be overwritten also.
The scrolling attribute ("auto", "yes", "no") specifies whether the frame is to have scroll bars.
The frameborder attribute ("0", "1") specifies whether the frame is to have a border.

The code of the two HTML files that are displayed in the frames are given below.
navigation.html
The anchor tag <a> has a target attribute that takes the name of the frame used to display the
information. Here in this example all anchors below are targeted to the "mainF" frame.

<html><head><title>Navigation Bar</title></head>
<body><center>
<a href="course.html" target="mainF">HTML Course</a><br><br>
<a href="paragraph.html" target="mainF">Paragraphs</a><br>
<a href="headings.html" target="mainF">Headings</a><br>
<a href="ulists.html" target="mainF">Unordered lists</a><br>
<a href="olists.html" target="mainF">Ordered lists</a><br>
<a href="nlists.html" target="mainF">Nested lists</a><br>
<a href="intro.html" target="mainF">Home</a><br>
</center></body>
</html>

intro.html
The HTML file "intro.html" is a simple document which is initially placed in the "mainF" frame. This is
replaced when a user clicks on a link in the "navF" frame.
<html>
 <head><title>Internet Computing</title></head>
<body>
<h2>Welcome to the HTML Course</h2>
<p>
<h4>Please select the subject of...</h4>
</p>
</body>
</html>

Nested framesets
Nested framesets can be used to divide the window into vertical frames and horizontal frames. We can
nest the <frameset> element to create a grid of frames on our Web page.
Below is an example code to create two vertical frames and two horizontal frames in the right vertical
frame.

<html>
<head><title>Frames 2</title></head>
<frameset cols="140,*">
<frame name="navF“ src="navigation.html">
<frameset rows="30%,70%">
<frame name="upperF" src="intro.html">
<frame name="lowerF" src="course.html">
</frameset>
</frameset>
</html>
The output of using nested framesets is shown in the below Figure 6.6.
 Figure 6.6 Example of Nested Frames

Noframes
Some browsers cannot process frames. Hence in order to display an alternative content in such cases,
we can use the <noframes> element.
<html>
<head><title>Frames 1</title></head>
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frame name="mainF" src="intro.html">
</frameset>
<noframes>
<body>
Something here for browsers not supporting frames
</body>
</noframes>
</html>

<frame> noresize attribute

If a frame has visible borders, the user can resize it by dragging the border . But in order to prevent a
user from doing this, we can add the attribute noresize="noresize" to the <frame> tag.
<frameset cols="50%,50%">
<frame src="frame_a.htm “noresize="noresize">
<frame src="frame_b.htm">
</frameset>

Inline Frames
Inline frames are used to inserts an HTML document inside another. They are also called as "floating
frames“. They are created with the <iframe> tag. The browser reads the <iframe> tag from the file, then
makes a separate request to the server for the embedded file.
Inline frames are useful for web documents in which all content will remain stable, except for one
section (e.g., a weekly special) i.e., the frequently changed section can be an inline frame, which can be
quickly modified when necessary without editing the entire page. They are useful when documents that
you prefer has to be embedded in a page instead of placing on a separate page or providing as a
download (such as text or a PDF).

Simple HTML page with inline frame is given in the below code.

<h1>iFrame Exam ple</h1>

<p><strong>This text is found in frame.html </strong><p/>
<iframe src="embedded.html" scrolling= "yes">
Your browser does not support frames.
</iframe>
<p><strong>This text is also found in iframe.html. </strong></p>
The output of the code is shown in the Figure 6.7.
 Figure 6.7 Example of <iframe>

Images
Images can be inserted in our web page by using <img> tag. Images are placed with <img> tags, with no
closing tag.
The basic syntax is:
<img src=“source_file” title=“tool tip text”>
The attribute src specifies the path to the image stored as a local file or the path to a file in a different
directory under the HTML root directory, or a URL.
The title attribute is used to display the text "tool tip text" when the mouse hovers over the image, or if
for some reason the image won’t display. It is also very useful for the visually impaired.

Image attributes:

src Location of image file (relative or absolute)

alt Substitute text for display (e.g. in text mode)

 height Number of pixels of the height

width Number of pixels of the width

border Size of border, 0 for no border

Following is the simple syntax to use this tag.

<img src="./php.png" alt="PHP Logo" />

Summary
This module explains about HTML Hyperlinks. The module also discusses and explains in detail about
HTML Frames and the purpose of inline frames. Finally it discusses about HTML images.