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.

Font Faces and Font Colors in HTML

Different font styles (faces) are used in the webpages as well as in other documents to show the text in different styles and formats. For this purpose HTML provides us element. Using font element we can format the text in different styles, color and size. Let have look at each of the following!

Font Face:

Font face is the name of the Font which you are using currently in for your webpage or part/section of the webpage. Different famous and mostly used font faces are Arial, Comic Sans, Courier, Georgia, Times New Roman and Verdana.

Example:

Code:

<font face="Arial">I’m <b>Arial</b> style text</font><br />
<font face="Courier">I’m <b>Courier</b> style text</font><br />
<font face="Times New Roman">I’m <b>Times New Roman</b> style text</font><br />
<font face="verdana">I’m <b>Verdana</b> style text</font><br />

Result:

I’m Arial style text
I’m Courier style text
I’m Times New Roman style text
I’m Verdana style text

Font Color:

Color property of the Font element is used to display the text in different colors instead of default black. HTML provides some color names-such as red, green, blue, sky blue, white, etc. - which can be used as value of the color property.

Example:

Code:

<font color="green">I’m <strong>Green</strong> colored text</font><br />
<font color="blue">I’m <strong>Blue</strong> colored text</font><br />
<font color="purple">I’m <strong>Purple</strong> colored text</font><br />
<font color="orange">I’m <strong>Orange</strong> colored text</font><br />

Result:

I’m Green colored text.
I’m Blue colored text.
I’m Purple colored text.
I’m Orange colored text.

Font Size:

Size is also a property of the font element which is used to display text in different size. It ranges from 1 to 7 units.

Example:

Code:

<font size="1">I’m size <strong>1</strong> text</font><br />
<font size="2">I’m size <strong>2</strong> text</font><br />
<font size="3">I’m size <strong>3</strong> text;</font><br />
<font size="4">I’m size <strong>4</strong> text</font><br />
<font size="5">I’m size <strong>5</strong> text</font><br />
<font size="6">I’m size <strong>6</strong> text</font><br />
<font size="7">I’m size <strong>7</strong> text</font><br />

Result:

I’m size 1.
I’m size 2.
I’m size 3.
I’m size 4.
I’m size 5.
I’m size 6.
I’m size 7.

Basic Text Formatting in HTML

Basic Text Formatting in HTML

While formatting our documents we often need to format some pieces of text as bold, italic, underline, superscript, subscript and/or strikethrough to show the importance of the text. HTML provides us different tags perform such type of formatting. Let’s have look at each one!

Bold or Strong:

In HTML to format some piece of text as bold we can use and/or elements.

Example:

Code:

<b>I’m bold text</b>
<b>I’m strong text</b>

                

Result:

I’m bold text
I’m strong text

Difference between Bold & Strong:

There are some browsers which are used by the special peoples (disabled) who can see nothing on the screen. Rending of webpages on such browsers is done by reading text loudly. The text wrapped in strong element is read stressfully which indicates that the stressed text is important, while the text wrapped in b element is read normally without producing any stress to inform the listener that there is nothing special here

Italic:

In HTML to format some piece of text as italic we can use elements.

Example:

Code:

<i>I’m italic text</i>
                

Result:

I’m italic text

Underline

In HTML to format some piece of text as underlined we can use elements.

Example:

Code:

<u>I’m underlined text</u>
                

Result:

I’m underlined text

Super/Sub Scripts

In HTML to format some piece of text as underlined we can use elements.

Example:

Code:

He's the 11<sup>th</sup> player of the team.
a<sub>1n</sub>, a<sub>2n</sub>, a<sub>3n</sub>......,a<sub>n</sub>

Result:

He's the 11^th player of the team.
a_1n, a_2n, a_3n......,a_n

Strike Through:

In HTML to format some piece of text as strike through we can use elements.

Example:

Code:

<Strike>I’m strike through text</strike>

Result:

I’m strike through text

Linefeed

Goto Line Break Section in the …………………… Post

Paragraph

In HTML to divide a long topic, under discussion, into different paragraph we use <p> element.

Example:

Code:

<p>I’m a paragraph.</p>
<p>I’m another paragraph.</p>

Result:

I’m a paragraph.

I’m another paragraph.

Note: The ending tag of the paragraph </p> is optional, you can get the accurate result without using it. But if you are using XHTML thne it would be necessary to include the ending tag of Paragraph Element.

The Paragraph Element automatically includes a Line Break Element, so you don't need to include line break to feed a new line after a paragraph.