Target Attribute of Anchor Element

Target Attribute:

Target Attribute is used to specify whether the linked webpage/document/file will be:

• opened in the current tab of the browser.
• opened in the new tab, next to the current tab, of the browser.
• opened in the new window (not in new tab).

An example of the target attribute is given as following which covers all the three possible states.

Exemplary Code:

&ltb&gt<a href="url of directed webpage or web site">Hello! I'm testing the Hyper Link tag of HTML. </a></b>
                

Example Result:

Hey click me! I will open in a new tab.
Hey click me! I will open in the current tab.
Hey click me! I will open in a new window.

Image Hyper Link

Anchor Element and Its Important Attributes:

An Anchor Element with Image Element is used to create a Image Hyper-link.
Syntax: <a attribute="value"><img src="any source" alt="img_text" /></a>

Important Attributes:

1. href: takes the URL of the target id as its value.
2. target: describes whether the linked document should get opened in the same or new tab, parent frame or child frame or in a new window.
3. name: takes any valid group of alphanumeric characters as its value.

Examples:

Following are some examples which illustrate how to use an Anchor Element to create a:

1. Image Hyperlink Targeting a Webpage/Document
2. Image Hyperlink Targeting a Section with in a Same Webpage
3. Image Hyperlink Targeting a Section in a Different Webpage

Image Hyperlink Targeting a Webpage/Document:

Exemplary Code:

<a href = "https://www.facebook.com/webdevelopmentwithkhuram/"><img src="W3_Logo_3.png" width="150" height="150"/></a>
                

Example Result:

Explanation of the Example:

1. Anchor Element containing Image Element ,with in it, is used to create an Image Hyperlink.
2. The URL of the target document is given as a value of the href attribute.
3. The picture to be displayed is put in between <a> and </a> tags using <img /> Element.

Image Hyperlink Targeting a Section with in a Same Webpage

Exemplary Code:

<a href="back_to_top"></a> 
<nav>
    <a href="#target_3"><img src="W3_Logo_3.png" alt="" height="30" width="30"/></a>
    <a href="#target_4"><img src="W3_Logo_3.png" alt="" height="30" width="30"/></a>
</nav>
<p>
    This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_3"></a>
<p><h2> This is target 3</h2></p>
<a href="#back_to_top">Top</a>
<p>
    This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_4"></a>
<p><h2> This is target 4</h2></p>
<a href="#back_to_top">Top</a>

Example Result:

|

This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplar text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 1

Top
This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 2

Top

Explanation of the Example:

1. Anchor Element is used to set the "target 1", "target 2" and " back_to_top" targets.
2. name attribute of the Anchor Element takes the values "back_to_top", "target_1" and "target_2" to set the targets.

3. href attribute of the Anchor Element takes names("target 1", "target 2" and " back_to_top") of the target preceded by a '#' symbol as a url.
4. The text to be displayed (such as Home, About Us, Help, Download) is put in between <a> and </a> tags for the links.
5. No text is displayed in between the <a> and </a> tags where the targets are set and the href attribute is not used.

Note: Hash symbol '#' in href indicates that the target is in internal link and can be in the same or in a different document.

Image Hyperlink Targeting a Section in a Different Webpage:

Exemplary Code:

<a href="back_to_top"></a> 
<nav>
    <a href="#target_3"><img src="http://localhost/Blogger/Hyper_Link.html#target_1" alt="" height="30" width="30"/></a>
    <a href="#target_4"><img src="http://localhost/Blogger/Hyper_Link.html#target_2" alt="" height="30" width="30"/></a>
</nav>
<p>
        This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_3"></a>
<p><h2> This is target 3</h2></p>
<a href="#back_to_top">Top</a>
<p>
        This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_4"></a>
<p><h2> This is target 4</h2></p>
<a href="#back_to_top">Top</a>

Example Result:

|

This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 3

Top
This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 4

Top

Explanation of the Example:

1. Anchor Element is used to create a Text Hyperlink.
2. The URL of the target document is given as a value of the href attribute.
3. The text to be displayed (such as Home, About Us, Help, Download) is put in between <a> and </a> tag.

Text Hyper Link

What is Hyperlink & What Hyper-Link Does!

A piece of text or an image that directs a user to another document i.e. webpage, next/previous topics or sections on the same webpage or to an Email Address just by clicking/taping on it is called a Hyperlink.

Difference in the Look of Hypertext and Normal Text:

By default, simple and non-hyper-linked text is in black color and the picture looks same as it looks in any image viewer without any change and nothing happens by clicking such text or image.
While on the other hand, a Hyper-linked text looks different from the non-hyper-linked text. By default Hyper-linked text is in blue color and is underlined and the image looks same as it looks in any image viewer without any change.

Whenever a user drags mouse pointer over (in technical term hover) a Hyper-linked text or image, the mouse pointer gets changed into a hand shape from a normal arrow shape (on windows). When a user clicks a Hyper-linked text its color also gets changed, normally from blue to purple, to indicate that the user has already visited this particular link.

Anchor Element and Its Important Attributes:

An Anchor Element is used to create a Text Hyper-Link or an Image Hyperlink
Syntax: <a attribute="value">Text to be displayed</a>
Important Attributes:

1. href: takes the URL of the target id as its value.
2. target: describes whether the linked document should get opened in the same or new tab, parent frame or child frame or in a new window.
3. name: takes any valid group of alphanumeric characters as its value.

Examples:

Following are some examples which illustrate how to use an Anchor Element to create a:

1. Text Hyperlink Targeting a Webpage/Document
2. Text Hyperlink Targeting a Section with in a same Webpage
3. Text Hyperlink Targeting a Section in a Different Webpage

Text Hyperlink Targeting a Webpage/Document

Exemplary Code:

<a href="http://webdevelopingwithkhuram.blogspot.com/p/html-tutorial.html">Go To WebdevelopmentwithKhuram.blogpost.com</a>
                

Example Result:

Go To WebdevelopmentwithKhuram.blogpost.com

Explanation of the Example:

1. Anchor Element is used here to create a Text Hyperlink.
2. The url of the target document is given as a value of the href attribute.
3. The text to be displayed (such as Home, About Us, Help, Download) is put in between <a> and </a> tag.

Text Hyperlink Targeting a Section with in a same Webpage

Exemplary Code:

<a href="back_to_top"></a> 
<nav>
    <a href="#target_1">Go To Target_1</a>
    <a href="#target_2">Go To Target_2</a>
</nav>
<p>
    This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_1"></a>
<p><h2> This is target 1</h2></p>
<a href="#back_to_top">Top</a>
<p>
    This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_2"></a>
<p><h2> This is target 2</h2></p>
<a href="#back_to_top">Top</a>

Example Result:

Go To Target_1
Go To Target_2

This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 1

Top
This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 2

Top

Explanation of the Example:

1. Anchor Element is used to set the "target 1", "target 2" and " back_to_top" targets.
2. name attribute of the Anchor Element takes the values "back_to_top", "target_1" and "target_2" to set the targets.
3. href attribute of the Anchor Element takes names("target 1", "target 2" and " back_to_top") of the target preceded by a '#' symbol as a url.
4. The text to be displayed (such as Home, About Us, Help, Download) is put in between <a> and </a> tags for the links.
5. No text is displayed in between the <a> and </a> tags where the targets are set and the href attribute is not used.

Note: Hash symbol '#' in href indicates that the target is in internal link and can be in the same or in a different document.

Text Hyperlink Targeting a Section in a Different Webpage

Exemplary Code:

<a href="back_to_top_1"></a> 
<nav>
    <a href="#target_1">Go To Target_1</a>
    <a href="#target_2">Go To Target_2</a>
</nav>
<p>
        This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

</p>
<a name="target_1"></a>
<p><h2> This is target 1</h2></p>
<a href="#back_to_top">Top</a>
<p>
            This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

</p>
<a name="target_2"></a>
<p><h2> This is target 2</h2></p>
<a href="#back_to_top">Top</a>

Example Result:

Go To Target_1 of Other Page
Go To Target_2 of Other Page

This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 2

Top
This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 2

Top

Explanation of the Example:

1. Anchor Element is used to set the "target 1", "target 2" and " back_to_top" targets.
2. name attribute of the Anchor Element takes the values "back_to_top", "target_1" and "target_2" to set the targets.
3. href attribute of the Anchor Element takes the url of the other webpage and the names("target 1" and "target 2") of the target preceded by a '#' symbol as a url (i.e url + target section).
4. The text to be displayed (such as Home, About Us, Help, Download) is put in between <a> and </a> tags for the links.
5. No text is displayed in between the <a> and </a> tags where the targets are set on the targeted webpage and the href attribute is not used.

Note: Hash symbol '#' in href indicates that the target is in internal link and can be in the same or in a different document.

HTML Elements and Tags

How Browsers Renders an HTML Document?

All of you know that an HTML Document is simply a text file rendered by the web browsers. But the question is that how does the browser knows that a particular piece of text should be rendered as a heading and other as a paragraph or a table. The page you are currently browsing also contains heading, paragraphs etc .

Here is the answer: HTML uses Elements to tell the browsers that how the HTML Document should be rendered. How the particular piece of text should be rendered as a heading and other should be rendered as a paragraph, this data should be rendered as a table and that should be rendered as a list etc.

HTML Element:

Most of the HTML Elements are consists of a pair of a Starting Tag and Ending Tag. Every thing from starting tag to ending tag is an HTML Element. We have two type of HTML Elements which are given as follows:

Not-Empty HTML Elements:

An HTML Element which needs to have both the starting and ending pair of tags otherwise browser might be unable to render that Element correctly such as <html></html> and <body></body> etc.

Empty HTML Elements:

An HTML Elements consists of only Starting Tag and don't need to have an Ending Tag such as Paragraph Element <p> and Image Element<img> .

HTML Tags:

An HTML Tag starts/opens with a left angle bracket (<) and ends/closes with a right angle bracket. There are two types of HTML Tags which are given as follows:

Starting Tag:

A Starting Tag consists of the name of the element and some attributes having values. Empty tags such as <br /> and <hr /> don't contains any attribute.

Ending Tag:

An Ending Tag consists of the name of the element preceded by a forward slash. Empty tags don't have the Ending Tag such as <br /> and <hr />. Instead the Element name is followed by a forward slash in in the Starting Tag.

Example of Bold Element:

Here is an example of an HTML Bold Text Element:

Exemplary Code:

<b>Hello! I'm part of the Bold Element of HTML!</b>
                

Example Result:

Hello! I'm part of the Bold Element of HTML!

In the above example <b> is the Starting Tag and </b> is the Ending Tag of the HTML Bold Text Element. “Hello! I'm testing the Bold Text Element of HTML!” is the phrase which, now, is the part of the HTML Bold Text Element.

Example of Nested Elements:

Here is an example of the nested HTML Elements which is a modification of the  previous example. Point to be noted here is that when you want to nest many HTML Elements you should take care of the order of the Elements. The Element started first will be closed in the end. Look at the following example, the starting tag of the Paragraph Element <p> is the first tag but it's closing tag </p> is the last one.

Exemplary Code:

<p><b><i> Hello! I'm testing the bold & Italic Text Elements of HTML! </i></b></p>

Example Result:

Hello! I'm testing the bold & Italic Text Elements of HTML!

What Is HTML

Background of HTML

Earlier when internet was very new and with a slow data transfer speed it was not possible to browse webpages like we do now a days. The data was transferred over internet in the form of separate files like *.txt, *.doc or any other file instead of a hypertext file (webpage). User had to download the complete file which s/he wanted to. But still it wasn’t sure that user could access files’ data. As after downloading the file, to access its data, user needed the appropriate application to run/execute that file. If the user didn’t have the appropriate application, to run/execute the file, s/he couldn’t access the data of the file.

Also, it was a very much time consuming process to download the file as speed of the internet was very slow and files were very heavy sized due to having formatted data. In this scenario low internet speed was very annoying for the users to download heavy sized files.
These were the real problems as everyone didn’t have the appropriate application or faster internet speed to download or even have a look at (browse) a file on internet. Then it was realized that software (web browser) should be designed which could display a simple hypertext markup files (without any formatting) into well-formatted and well-organized document (webpages). For this purpose HTML and web browsers were developed.
HTML is not a case sensitive language- a language which doesn’t care whether the statements are written in upper or lower case- and HTML tags can be written in either lower or upper case letters and you'll not receive any error. Feel free to write HTML tags in whatever case you want to but it is recommended to write in lower case instead of upper case letters.

Why HTML Is Called Hypertext Markup Language

You’ll be thinking as a hypertext file contains simple text without any formatting then how the webpage looked formatted when we download and see them on a web browser. You’ve raised a valid and a good question. HTML is a called a markup language which means it uses some marks (symbolized letters i.e. some text ). These marks play a vital role in the formatting of a webpages and help the web browser to recognize the specific formatting to be applied on the text or part of text, makes tables and inserts lists and images in a webpage. You’ll further read about tags in the next blog What Are Tags (Marks) in HTML.

Why It Is Called Hypertext Markup Language

Now the actual and core problem was solved. Then further it was realized that these webpages should be interlinked to each other so that users should be provided an easy access to other related webpages of the website being visited. To fulfill these requirements Hyper Link was introduced. Hyper Link is a link assigned to simple text or to an image which directs a user to another webpage or website by clicking on it. You can identify and distinguish a Hyper Link from the simple ordinary text or image by observing the change in the shape of the mouse pointer, from an arrow to hand, and after clicking on it you get another webpage or website on the same or in new window. Due to these marks (a browser reads to format a webpage) and Hyper Links HTML is called Hyper Text Markup Language.

Versions of HTML

HTML has many versions. Its versions start from HTML 2.0 and goes to HTML 4.01. It’s new and upcoming version is HTML 5 which will be released in 2014.

Important Terms:

1. Compiler is a program that converts High Level code into Binary code.
2. Web Browser is a program that reads a simple text (HTML) file-webpage-, which contains marks, and displays it as a well-formatted document with the help of some marks in the text file mixed with the original text/data.
3. Website is a collection of related webpages.
4. Webpage is a document containing every type of data from simple text to videos.
5. HTML tags are paired set of symbol to indicate the start point and end point of specific formatting i.e. bold, italic.
6. Hyper Link is simply a text (or can be an image) and normally is in blue colored and underlined which direct the user to a specific webpage or website.