Html tutorial: Image

Image is a graphical representation which is often used in web world to Increase the usability and attractiveness of website.In other words, it is or a kind of photographs.

So question is how to include them in your webpage?
well, thats very easy.
image is included by img tag.
Its syntax is <img src="">

Note: you need to specify the source by hyperlink asmentioned in my previous tutorial on html hyperlink tutorial

For example, <img src="http://www.google.com/logos/bardsley.gif">

Result will be like,


You may want to change the dimenstions of image by including height and width besides img tag
For example,<img src="http://www.google.com/logos/bardsley.gif" width="450px" height="200px">

Result will be like,

Here, px denotes pixel. You can also use % for percent but that may not work in all
browsers or explorer. Thats why i suggest to work in pixel only.

Html Tutorial on Hyperlink

Exclusive Html Tutorial on Hyperlink on special demand of my blog regular visitor.

Simple Hyperlink

Code:<a href="http://www.yahoo.com">Yahoo<a>


Output: Yahoo

Explaination: <a> is known as anchor tag and used to inter link different web pages or topics on same webpage.

Giving Title To Hyperlink

Code: <a href="http://www.yahoo.com" title="Tahoo MailBox">Yahoo<a>


Output: Yahoo


Explaination: title in <a> tag is used to give text which gonna appear when cursor is placed on link.

Open in New Tab

Code: <a href="http://www.yahoo.com" title="Tahoo MailBox" target="_blank">Yahoo<a>


Output: Yahoo


Explaination: target=_blank in <a> tag is used to tell browser to open hyperlink in new tab

Open In Same Tab

Code: <a href="http://www.yahoo.com" title="Tahoo MailBox" target="_self" >Yahoo<a>


Output: Yahoo


Explaination: target="_self" in <a> tag is used to tell browser to open the hyperlink in same tab.

Link Language

Code: <a href="http://www.yahoo.com" hreflang="en" title="Tahoo MailBox" target="_blank" rel="nofollow">Yahoo<a>


Output: Yahoo


Explaination: hreflang="en" in anchor tag is used to tell search engine about the language of outgoing
link.This helps in getting better ranking for regional ranking.For example google.co.fr will have better
ranking for french and english links then google.co.in

Outerlink Not To Follow

Code: <a href="http://www.yahoo.com" title="Tahoo MailBox" target="_blank" rel="nofollow">Yahoo<a>


Output: Yahoo


Explaination: rel="nofollow" in <a> tag is used to tell search engine bot that this link is not a part of
your website or blog and you are not responsible for content in it.This is a good pratice in case of you are giving ou links
to unknown or new websites.

Giving name to topics on same webpage

Code: <a name="top">Simple Hyperlink <a>


Explaination: name="text" in <a> is used to give link name to topic on same webpage.
To provide for this link code is
<a href="#text"> .
Note: Always put # before linkname while giving link for topic on
same webpage.This is a good trick if you have long webpages.


Output:
Go to simple hyperlink



Please give your review on this post by comments.