6 HTML

Dr M. Vijayalakshmi

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:ex@au.edu”>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”):

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=”../parent.html”>Parent</a> <br />

<a href=”stuff/cat.html”>Catalog</a> <br />

<a href=”mailto:bugs@example.com?subject=Bug Report”>Please report bugs here (by e – mail only)</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.

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.

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:

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:

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>

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>

</html>

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>

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>

</html>

The output of using nested framesets is shown in the below Figure 6.6.

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>

<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>

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.

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:

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

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

Web Links

www.nr.edu/itd110/ciw/ppt/09-frames.ppt
www.cs.cf.ac.uk/Dave/Internet/Lectures/Frames_Tables_Forms.ppt
http://w3schools.com/HTML