Working With HTML

Category : 9th Class

 

Working With HTML

 

Introduction

In the contemporary world, Internet is the latest buzzword which is playing as vital role in the overall development of Information Technology. Internet is a network of millions of computers connected to each other through network cables and satellite links, sharing varied information and data around the world. The information on internet is available at different websites represented by www, which can be accessed by millions of users at anytime. Have you ever thought. Which technology is used to create a website? What lies behind the varied information that you get from Websites? Language is the key to all the question. We need a language to create a websites. HTML is the most widely used language to design web page contents for the Internet.

 

History of HTML

The founder of HTML was Tim Berners-Lee. It has become extremely popular and well-known in the 1990's when the Internet had been developing rapidly. HTML, initially known as GML(General Mark-up language).It was a powerful tools that aimed at creating documentation language in which one could mark the title, headings, text, font selection and much more. In 1986, this concept got standardized by ISO and was named SGML (Standard Generalized Mark - up language), which is a higher level markup language that has long been a favourite of the department of defence and many other organizations with a truly large volume of document to manage. Like HTML, it describes formatting and hypertext links an defines different components of a documents. The language HTML was modified many times leading to a number of versions, i.e. HTML version 0 to Version 5, which is the latest one.

 

 

 

  • HTML: It stands for Hyper Text Mark- up Language. HTML is a complete cod package that allows the user to create web pages. It includes text and graphics. We can add link to the web pages.
  • HYPER TEXT: Hypertext is the text used to link various web pages, which on clicking opens a new web page.
  • MARK - UP: It means highlighting the text either by underlying or displaying it different colors.
  • LANGUAGE: It refers to the way of communication between web pages, which has its own syntax and rules.

 

HTML Basic Tags and Their Attributes

An HTML document consists of text, which comprises the content of the document and tags, which define the structure and appearance of the document. The basic structure of an HTML document is simple with the entire document bound by a pair ofandtags.

 

HTML Document Structure:

Every HTML document should follow this general form:

 

<HTML>

<HEAD>

<TITLE>Title of page is written here </TITLE>

</HEAD>

<BODY>The HTML tags that define your page go here </BODY>

</HTML>

 

The <HTML> Tag:

The <HTML> tag identifies the document as an HTML document. This tag tells the web browser that this is an HTML document. HEAD and BODY elements kept inside the HTML element.

 

The <HTML> Tag:

The <HTML> tag contains information about the document, including its title, style definitions and document descriptions. This information is shown in browser in the form of typing, not on the web page, that will only be shown when this information is written in the form of title.

 

The <TITLE> Tag:

This tag contains the document title. The title specified inside <TITLE> tag appears on the browser's title bar.

 

The <BODY> Tag:

The <BODY> tag encloses all the tags, attributes and information to be displayed in the web page.

 

Tag Attributes:

Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag and their values sit inside quotation marks. They look something like:

 

<tag attribute="value:>Silverzone</tag>

 

< BODY> tag has attributes that helps to define the appearance of your document. This tag contain several attributes. The most commonly used are listed below:

 

 

Attribute

Description

alink

Designates the color a link turns when it is selected.

background

Designates the background image on a page.

bgcolor

Designates the background color on a page.

link

Designates the color of a link that has not yet been clicked.

text

Designates the color of text on a page.

vlink

Designates the color of visited links.

Topmargin

Margin from the top of the browser window.

Leftmargin

Margin from the left of the browser window.

 

Working With Tags

HTML is a tag based language that helps in creating web pages. A tag comprises of text enclosed in angle brackets < >. These tags are known as elements. All the tags have their own attributes and default values. Each tag in HTML follows specific rules and syntax. These tag are not case sensitive. The HTML elements can be categorized as:

 

v  Container Elements

v  Empty Elements

 

Container Elements

In HTML, the tag that include both ON and OFF tags are called Container Elements. A tag is opened using opening angle brackets <> and enclosed using closing brackets < / >.

 

Empty Elements

Empty elements contain only ON tags, they don't have OFF tags. These elements do not enclosed any data. Instead they function on their own.

 

Types of Elements

 

Container Elements

 

Heading Tags

This tag is used to define heading levels in an HTML document. It is basically used to emphasize the text. There are six heading levels, H1 to H6. The Heading style displays the text in the largest size and is mainly used for main headings. The lower levels are used for main headings.

 

<HTML>

<HEAD>

<TITLE> Using Heading Styles</TITLE>

</HEAD>

<Hl> Silverzone Foundation</Hl>

<H2> Silverzone Foundation</H2>

<H3> Silverzone Foundation</H3>

<H4> Silverzone Foundation</H4>

<H5> Silverzone Foundation</H5>

<H6> Silverzone Foundation</H6>

</BODY>

</HTML>

 

 

 

Paragraph Tag

To display a long piece of text on a web browser, paragraph element

is used, which marks a block of text as a paragraph. To mark the end of a paragraph,

element is used. A paragraph can be aligned using the attributes named "Align". Various attributes of a paragraph element are displayed below:

 

For Example:

           

<P>

Starts a new paragraph

<P Align = "Center ">

Align the text in center

<P Align = "Right ">

Align the text to the right side

<P Align = "Left ">

Align the text to the left side

<P Align = "Justify ">

Align the text from both left and right margins

           

Line Break Tag

The HTML <br> element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant. It does not have any end tags and it can be used at any place within the body tags of the page. Inside table cells and other simple areas also we can use line break tag <br>.

 

For example:

 

To break lines <br> in a text, <br> use the br element.

 

Horizontal Tag

 

The HTML <hr> tag is used for creating a horizontal line. This is also called Horizontal Rule in HTML. It is used as a separator between blocks of text. Type <HR> where you want to insert a horizontal line in between the text. In <HR> tag types size = "?", replacing "?" with the thickness you want to apply. The size attributes of <HR> is given values in term of pixels. A pixel is equal to dividing an inch into 72 points.

 

Specific Attributes

 

The HTML <hr> tag also supports following additional attributes:

 

Attribute

Value

Description

Align

Left right center

Deprecated-Specifies the alignment of the horizontal rule

noshade

noshade

Deprecated-Removes the usual shading effect that most browsers display.

Size

pixels or %

Deprecated-Specifies the height of the horizontal rule.

width

pixels or %

Deprecated-Specifies the width of the horizontal rule.

 

 

For Example:

 

<html>

<body>

<p>Silver Zone Foundation </p>

<hr align="left" width="50%">

</body>

</html>

 

 

Nonbreaking Spaces

A non-breaking space prevents line breaks from occurring at a particular point in an HTML document. As you know that spaces in an HTML file are ignored when the page is displayed on a web browser, ?$nbsp;? is a special character entity tag used to insert blank space. It is given in Body element. Number of spaces inserted is equal to the number of times the special character is repeated.

 

For Example:

 

<html>

<HEAD> <TITLE>Usmg 'npsp,”Tag </TITLE></HEAD>

<BODY>

<BR><BR>

Silver Zone &nbsp;&nbsp;&nbsp; Foundation &nbsp;&nbsp Silver

Zone Foundation &nbsp; &nbsp;&nbsp;

</BODY>

</HTML>

 

Header Tag

The <header> element represents a container for introductory content or a set of navigational links.

A <header> element typically contains:

 

v  One or more heading elements (<h1> - <h6>)

 

v  Logo or icon

 

v  Authorship information

 

You can have several <header> elements in one document.

 

Note: A <header> tag cannot be placed within a <footer>, <address> or another <header> element.

For Example:

 

 

<html>

<body>

<article>

<header>

<h 1 >Most important heading here< /h 1 >

<h3>Less important heading here</h3>

<p>Silver Zone Foundation </p>

</header>

<p>ii0 </p>

<p>iOM </p>

<p>iOS </p>

</article>

</body>

</html>

 

 

Footer Tag

The <footer> tag defines a footer for a document or section. A <footer> element should contain information about its containing element.

A <footer> element typically contains:

 

v  Authorship information

v  Copyright information

v  Contact information

v  Sitemap

v  Back to top links

v  Related documents

 

You can have several <footer> elements in one document.

 

For Example:

 

<html>

<body>

<footer>

<p>Posted by: Silver Zone Foundation </p>

<p> Contact information: <a

href="someone@example.comM>someone@example.com</a>.</p>

</footer>

<p><strong>Note:</strong> The footer tag is not supported in Internet

Explorer 8 and earlier versions. </p>

</body>

</html>

 

 

Nav Tag

The HTML <nav> tag specifies a section that contains only navigation links. Links in a <nav> element may point to other webpages or to different sections of the same webpage.

 

For Example:

 

<html>

<head>

<title>HTML Nav Tag</title>

</head>

<body>

<p>Silver Zone Foundation</p>

<nav>

<a href="ii0.htm">ii0</a> |

<a href="iOM.htm">iOM</a> [

<a href="iOEL">iOEL</a> |

<a href="iOS.htm">iOS</a> |

<a href="iFOL.htm">iFOL</a>

</nav>

</body>

</html>

 

 

Dialog Tag

HTML <dialog> tag to create a new popup dialog on a web page. This tag represents a dialog box or other interactive component like window. The <dialog> element uses a Boolean attribute called open that activate element and facilitate user to interact with it.

tag to create a new popup dialog on a web page. This tag represents a dialog box or other interactive component like window. The element uses a Boolean attribute called open that activate element and facilitate user to interact with it.

 

For Example:

 

<html>

<body>

<div>

<dialog id="my First Dialog" style="width:50%;background-

color:#F4FFEF;border:lpx dotted black;">

<p><q>The Study material is highly recommended by the Foundation for better

results in the Olympiad, as

it contains, 80 to 90% of the syllabus of the Olympiad as well as the CBSE/ICSE

and other State Board's

syllabuses.

</q> - <cite>Silver Zone Foundation</cite</p>

<button id="hide">Close</button>

</dialog>

<button id="show">Show Dialog</button>

</div>

 

<!— JavaScript to provide the "Show/Close" functionality -->

< script type="text/JavaScript">

(function() {

var dialog = document.getElementById('myFirstDialog');

document.getElementById(‘show’).onclick = function() {

dialog. Show();

};

document.getElementById('hide').onclick = function() {

dialog. Close();

};

})();

</script>

</body>

</html>

 

 

Aside Tag

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

Commonly Asked Question ?

 

           

  1. Choose the correct HTML element for the largest heading:

(a) <head>                                                      (b) <heading>

(c) <h1>                                                                       (d) <h6>

(e) None of these

Answer (c)

 

  1. Which HTML element is used to specify a footer for a document or section?

(a) <section>                                                    (b) <bottom>

(c) <footer>                                                      (d) <Head>

(e) None of these

Answer (c)

 

  1. To create a blank line in your web page:

(a) press Enter two times

(b) press Shift + Enter

(c) insert <BLINE>

(d) insert <BR> tag

(e) None of these

Answer (d)

 

HTML Formatting Tags Top of Form

 

Bold Tag

The Bold tag is used to emphasize the text. Type <B> before typing the text that you want to display as bold and type </B>  after the text.

 

For Example:

 

<B> SILVERZONE INFORMATICS OLYMPIAD </B>

 

Italic Tag

The italic tag is used to display text in italics, write text in between <I> and </I> tag.

 

For Example:

 

<I> SILVERZONE CYBER OLYMPIAD </I>

 

Underline Tag

The tag underlines the text enclosed in <U> and </U> tags.

 

For Example:

 

<U> SILVERZONE COMPUTER QUIZZES </U>

 

Strike

This element draws a line through the middle of the text, enclosed in <STRIKE> and </STRIKE> element. Tag <S> and d</S> will also have the same effect.

 

 

Subscript

The subscript element displays the text or numbers in subscript format. The enclosed text or number in <SUB> and</SUB> tag appears below the base line and in smaller size.

 

 Superscript

The Superscript element displays the enclosed text or number in Superscript format. The <SUP> and </SUP> tags place the text above the base line which means at the top of the proceeding text in small size. You can observe the effect of these tags in the following program.

 

 

<HTML>

<HEAD>

<TITLE> Chemical & Mathematical Formulae </TITLE></HEAD>

<S> USING CHEMICAL AND MATHEMATICAL FORMULAE </S><BR>

<B><U>Chemical Formulae</U></B><BR>

CO<SUB>2</SUB><BR>

H<SUB>2</SUB>0<BR>

<B><U>Displaying Mathematical Formulae </U></BR>

(A+ B)<SUP>2</SUP>= A <SUP>2</SUP>+B<SUP>2</SUP>+2AB<BR>

(A-B)<SUP> 2</SUP> = A <SUP>2</SUP> + B<SUP>2 </SUP> -

2AB<BR><BR>

</BODY>

</HTML>

 

 

Monospaced Font Tag

 

PRE(Preformatted)

 

Web Browser ignores the spaces and lines within the text while displaying it as a webpage. To retain the spacing of text or to display the preformatted spaces, <PRE> tag is used. It is used to type poems, tabular data and so on. Type <PRE> tag before the text and at the end of it type </PRE>.

 

BIG

To make the text appear larger than the surrounding text, <BIG> arid</BIG> tags are used. 

 

SMALL

To make the text appear smaller in size than the surrounding text, <Small> and </ Small> tags are used. The small tag has the same effect as <Font Size = "1", then HTML ignores the tag. <html>

 

 

<html>

<body>

<p>This text is normal. </p>

<p><big>This text is bigger. </big></p>

<p><small>This text is smaller.</small></p>

<p><strong>Note:</strong> The big element is not supported in

HTML5.</p>

</body>

</html> 

 

 

Commonly Asked Question?

 

           

  1. Which tag is used to display the large font size?

(a) <LARGE></LARGE>                                  (b) <BIG></BIG>

(c) < SIZE ></SIZE>                                        (d) <FONT></FONT>

(e) None of these

Answer (b)

 

  1. Choose the correct HTML tag to make the text bold?

(a) <B>                                                            (b) <BOLD>

(c) <STRONG>                                                 (d) Both (a) and (c)

(e) None of these

Answer (d)

 

  1. Which HTML tag would be used to display power in expression (A+B)2 ?

(a) <SUP>                                                        (b) <SUB>

(c) <B>                                                            (d) <P>

(e) None of these

Answer (a)

 

Grouping Content

 

The elements <span> and <div> are used to group and structure a document and will often be used together with the attributes class and id. These two HTML elements are of central importance with regards to CSS.

 

v  Grouping with

v  Grouping with

 

 

Grouping with <span>

The <span> tag is used to group inline-elements in a document. The <span> tag provides no visual change by itself. The <span> tag provides a way to add a hook to a part of a text or a part of a document.

 

 

<html>

<body>

<p>Silver <span style="color: blue; font-weight: bold">Zone </span> Foundation <span style="color: dark olive green; font-weight: bold">dark green</span> Olympiad</p>

</body>

</html>

 

 

Grouping with <div>

 

The <div> element is often used as a container for other HTML elements. The <div> element has no required attributes, but both style and class are common. When used together with CSS, the <div> element can be used to style blocks of content:

 

 

<html>

<body>

<div style="background-color:Red;color:black;padding:20px;">

<h2>SILVER ZONE FOUNDATION</h2>

<p>Silverzone Foundation is an NGO, which aims in promoting competitive awareness of academics in school children in India and abroad. Over the years we have been in the process of creating this awareness among the students and school authorities by organizing and conducting International Olympiads. Our Olympiads create a platform for students from all ways of life to appear in various levels of competitive exams in the National/International level. We identify the outstanding performers on the basis of merit and give recognition in the form of

Certificates, Medals, Trophies, and Prizes.</p>

</div>»

</body>

</html>

 

 

Pharses Tags

In HTML, a phrase tag is used to indicate that a block of text has structural meaning. For example, using the <abbr> tag indicates that the word or phrase contained within is an abbreviation or acronym. The phrase tags have been designed for specific purposes, though they are displayed in a similar way as other basic tags like <b>, <i>, <pre>, and <tt>.

 

HTML Phrase Tags List

The below table contains complete phrase tags list and their description which is supported by HTML version.

 

 

Tag Name

HTML Tag

Tag Description

Mark

<mark>..</mark>

This is used to marked the text background in yellow color.

Emphasis

<em>..</em>

This is used to emphasis the text.

Strong

<stronp->..</stronp->

This is used to giive importance to the text in web page.

Text Abbreviation

<abbr>..</abbr>

This is used to abbreviate text in web page.

Text Direction

<bdo>..</bdo>

This is used to override text direction in web page.

Quoting

<blockquote>..</ blockquote>

This is used to quote a sentence from another text.

 

Mark Tag

The <mark> element is used to highlight text inside of another element such as a paragraph, list or table. Text to which the <mark> element has been added is considered to be particularly relevant in a specific context.

 

For Example:

 

<p>The appearance of word in <mark>marked</mark>.</p>

 

Emphasis Tag

The em element is used to emphasize text content and displays in italics in all current browsers. It provides semantic meaning about the text it contains, effectively saying, "this text is slightly more important than other text here." This differentiates em from the element, which merely sets the font to italics. In most cases, em is the preferred element to use.

 

For Example:

 

<p>The appearance of word is <em> emphasized </em>.</p>

 

Strong Tag

 This tag is used to give importance to the text in web page. Text in between <strong>...</ strong> tags will display text in bold.

 

For Example:

 

<p>The appearance of word is <strong>strong</strong>.</p>

 

Text Abbreviation

This tag is used to abbreviate text in web page. Text in between <abbr>...</abbr> tags will display abbreviated text.

 

For Example:

           

<p>The appearance of word is <abbr> abbreviated </abbr>.</p>

 

Text Direction

This tag is used to override text direction in web page, this tag stands for Bi-Directional Override. Text in between <bdo>...</bdo> tags will display override text direction. The <bdo>...</bdo> element stands for Bi-Directional Override and it is used to override the current text direction.

 

For Example:

 

<p><bdo dir=”rtI”>This text will display from right to left.</bdo>.</p>

 

 

Quoting

This tag is used to quote a sentence from another text in web page. Text in between <blockquote>...</blockquote> tags will display overrided text direction. Text inside a <blockquote> element is usually indented from the left and right edges of the surrounding text and sometimes uses an italicized font. 

 

For Example:

 

<p>This is un-quoted text displaying here.</p>

<blockquote>The is quoted text and displaying in center of page.</blockquote>

 

Commonly Asked Question?

 

           

  1. The text inside the <TEXT AREA> tag works like:

(a) <P> formatted text                                       (b) <T> formatted text

(c) <PRE> formatted text                                   (d) All of these

(e) None of these

Answer (c)

 

  1. The HTML <div> element is a:

(a) Inline Element                                                (b) Outline Element

(c) Block Level Element                                       (d) All of these

(e) None of these

Answer (c)

 

  1. Choose the correct HTML element to define emphasized text:

(a) <i> (b)                                                        (b) <em>

(c) <italic>                                                        (d) <B>

(e) None of these

Answer (b)

 

HTML Meta Tags

Metadata is data (information) about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords) or other web services.

 

For Example:

 

<meta name="description"

content="A general guide on the use of meta tags in html pages">

 

 

 HTML Comments

The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers sometimes. You want to write notes for yourself in an HTML document, but don't want them to be displayed in the browser window. In such a case, you need to use the comment tag.

 

Syntax:

 

<!— Write your comments here -->

 

HTML Images

Besides text, you can display graphics, drawings, painting, chart, maps or photographs on the web page. These images make the web page more appealing. Images can be used as a navigational tool to help users browser through the internet. The web browser supports various graphic formats. The widely used formats are GIF and JPG formats. To add an image to a web page, type the tag <IMG SRC = "?" with the image file. While specifying the images file, one should be well aware to its location i.e., where the file exists. The IMG is an empty element that has various attributes, which are given in below table:

 

 

Attribute

Value

Description

align

Top bottom middle left right 

Not supported in HTML5.

Specifies the alignment of an image according to surrounding element.

alt

text

Specifies an alternate text for an image

border

Pixels

Not supported in HTML5.

Specifies the width of the border around an image

height

Pixels

Specifies the height of an image

hspace

Pixels

Not supported in HTML5.

Specifies the whitespace on left and right side of an image

longdesc

URL

Specifies a URL to a detailed description of an image

sizes

 

Specifies image sizes for different page layouts

src

URL

Specifies the URL of an image

srcset

URL

Specifies the URL of the image to use in different situation

usemap

#mapname

Specifies an image as a client-side image-map

Vspace

Pixels

Not supported in HTML5.

Specifies the whitespace on top and bottom of an image

width

Pixels

Specifies the width of an image

 

For Example:

 

<html>

<body>

<img src="AbroadTrip2014.jpg" alt= "Silver Zone Olympiad" width="200"

height="300">

</body>

</html>

 

 

Images Link

Creating an Image Link is almost the same as creating a text Link. You can create an Image Link by substitute an image tag in the place of the link text. You simply place the <a href> and the </a> tags on each side of the image. 

 

Syntax:

 

<a href="../html-lmk.htm"><img src="flower.jpg" width="82" height="86" title="White flower" alt='flower"></a>

 

The code has the following parts:

 

 

  • <a> is the link tag.
  • /<attribute sets the URL to link to.
  • <img> is the image start tag.
  • src attribute sets the image file.
  • title attribute sets the image tooltip text.
  • alt is the image tag alt text attribute.
  • style attribute sets with css the width and height of the image.
  • </a> is the link end tag.

 

HTML Lists

If you have a large amount of items and you want to group them together, you can make a list of those items. The items inside a list are known as list elements. There must be more than one list elements in a list a list can be an unordered list, ordered list or a definition list. If you want to create a list of items in bulleted form, you need to create an unordered list. If you want to make a list of items in alphabetical, numerical or roman numerical form, you need to create an ordered list. If you want to make a list of items in the form of a term and its description. You need to create a definition list. You can also customize unordered and ordered lists.

 

 <UL> Unordered List

The first type is an unordered list, commonly referred to as a "Bullet" List. The unordered list is used when the list of items are not to be displayed in any particular order. The browser will display the bullets before the list of items. The list begins and ends with <UL> and </UL> Tags respectively. 

 

< LI > List Item

The list item tag, <LI>, precedes the individual items in an unordered and ordered lists. The <LI> tag is an empty element that does not require a closing tag. The appearance of the number should be controlled with the TYPE attribute.

 

<UL> Element

The 'TYPE' attributes specifies the type of bullet that can be used with <UL> element. The three values that can be defined with <UL> tag are disc, square and circle. The default value of <UL> tag is a disc. 

TYPE = "CIRCLE"          Specifies a non-filled circle

TYPE = "SQUARE"       Specifies a filled square bullet

TYPE = "DISC"               Specifies a filled circle

 

Example:

 

<html>

<body>

<h2>An unordered HTML list</h2>

<ul>

<li>ii0</li>

<li>iOM</li>

<li>iOS</li>

<li>iOEL</li>

</ul>

</body>

</html>

 

 

 

 <OL> Element/Ordered List

The ordered list is used to display the list of items in a specific order. By default, numbers are displayed in a web browser when an ordered list is used but the style can be changed using the Type attributes. To specify the item number for a given list item, Value attributes is used. Ordered list automatically starts with the number 1, but you can also start the list with a different number.

 

For Example

<OL START = "T > would start your ordered list's with number 7.

       

 

You can change the number style for ordered list using Type attributes with one of the following option.

 

v  TYPE = "1", Arabic number; by default (1, 2, 3, 4......)

v  TYPE =, "a", Alpha numeric; lowercase (a, b, c, d.....)

v  TYPE = "A", Alpha numeric; Uppercase (A, B, C, D .....)

v  TYPE = "i", Roman numeric; lowercase (i, ii, iii, iv.....)

v  TYPE = "I", Roman numeric; Uppercase (I, II, III, IV.....)

 

Example:

 

<html>

<body>

<h2>An ordered HTML list</h2>

<ol>

<li>ii0</li>

<li>iOM</li>

<li>iOS</li>

<li>iOEL</li>

</ol>

</body>

</html>

 

 

Definition List

A Definition list<DL> is used to present a list of definitions for terms. It consist of pair of DT and DD elements. <DT> element is used to define the term part and <DD>stands for definition description. A definition list starts and ends with a <DL> tag. We can have multiple definitions paired with a single term. 

 

Syntax:

 

<html>

<body>

<dl>

<dt>iOM</dt>

<dd>International Olympiad of MATHEMATICS</dd>

<dt>iOS</dt>

<dd>International Olympiad of Science</dd>

</dl>

</body>

</html> 

 

 

HTML Text Link

Links are used to connect one web page to another. When a user clicks a link, he or she is redirected (sent) to the web page specified as the destination web page for the link. In HTML, you can also link different sections of the same or different web pages. A link is highlighted and underlined to differentiate it from ordinary text in the web page. In HTML, you can create a hyperlink by using the anchor <A> tag. The <A> tag uses the HREF attributes to provide the reference of the web page that you want to link. To include a hyperlink on a web page, perform the following steps: 

1. Start the anchor tag with < A.

2. Include the HREF attribute followed by the name of the web page that you want to open with the link.

3.  Place closing right angle brackets (>).

4. Enter the text that you want to display as hypertext after the opening <A> tag.

5. Place the closing anchor tag (</A>).

 

Using HTML, you can do the following two types of linking:

 

  • External Linking: Refers to the type of linking which, on clicking, opens a document or Web page (to which the hyperlink is linked) in a new window.
  • Internal Linking: Allows you to link different sections of the same as well as different Web pages.

 

External Linking

When you click a hyperlink on a Web page, you are directed to the location specified in the hyperlink, which is a section of the same or a different Web page containing the information you want. Therefore, hyperlinks help you navigate to different locations within the same or a different Web page. To create an external link, you need to use the <A> tag and the HREF attribute. You also need to use another important attribute of the <A> tag, TITLE attribute, to specify the title for a document that you link. 

 

Using the HREF Attribute

The term HREF stands for Hypertext Reference. In HTML, the HREF attribute of the tag is used to create a hyperlink. It specifies the destination of the hyperlink. In other words, the attribute take the reference of the destination Web page containing the information you want. Therefore, in the HREF attribute, you have to specify the URL or address of the target Web page to which you will be redirected. The code given in Listing 10 shows the use of the HREF attribute to create a hyperlink:

 

Using the ALINK and VLINK Attributes

The term HREF stands for Hypertext Reference. In HTML, the HREF attribute of the <A> tag is used to create a hyperlink. It specifies the destination of the hyperlink. In other words, the attribute take the reference of the destination Web page containing the information you want. Therefore, in the HREF attribute, you have to specify the URL or address of the target Web page to which you will be redirected. The code given in Listing 10 shows the use of the HREF attribute to create a hyperlink: 

 

Using the TITLE Attribute

The ALINK attribute is used to set the colour for the active links in a web page. The VLINK attribute is used to set the color for the visited links in a Web page. In HTML, ALINK and VLINK are the attributes of the <BODY> tag.

The code given in listing 12 shows the use of ALINK and VLINK attributes: 

 

For Example:

 

<html>

<body>

<p><a href="html_images.asp">HTML Images</a> is a link to a page on this

website.</p>

<H2> SILVER ZONE FOUNDATION </H2>

<p><a href="http://www.silverzone.org/"> SILVER ZONE FOUNDATION

</a> is a link to                                                          .

a website on the World Wide Web.</p>

</body>

</html> 

 

 

 

Internal Linking

Hyperlinks within the same Web page (internal links) may be created if the Web page contains a large amount of content with many subsections. You can create an internal link by using the anchor (<A>) you want to link, that is, the name of the destination, by using the NAME attribute of the <A> tag. This is known as creating the target fragment. The syntax of the first <A> tag (for internal linking) is defined as follows:

 

Syntax:

<A HREF = "#linkname"> link to another section of same document</A>

 

Commonly Asked Questions?

 

         

  1. If the image cannot be displayed then ______ specifies an alternate text for an image.

(a) Text attributes                                               (b) Alt attributes

(c) Value attributes                                              (d) Caption attributes

(e) None of these

Answer (b)

 

  1. URL in HTML stands for_____.

(a) Uni Resource Locator           

(b) Uniform Resource Locator

(c) Universal Resource Locator      

(d) All of these

(e) None of these

Answer (b)

 

  1. How can you make an e-mail link?

(a) <a href="xxx@yyy">           

(b) <mail href="xxx@yyy">

(c) <mail>xxx@yyy</mail>       

(d) <a href="mailto:xxx@yyy">

(e) None of these

Answer (d)

Other Topics



LIMITED OFFER HURRY UP! OFFER AVAILABLE ON ALL MATERIAL TILL TODAY ONLY!

You need to login to perform this action.
You will be redirected in 3 sec spinner

Free
Videos