Tech Honey

The #1 Website for Oracle PL/SQL, OA Framework and HTML

HTML Anchor Tag Coords Attribute

by

HTML Anchor Tag Coords AttributeThe HTML Anchor Tag Coords Attribute is used with the HTML Anchor Tag Shape Attribute to define or specify the shape, size and the location or placement of the link in an <object> or <img> element.

By default, the top left corner coordinates are taken as 0,0.

Syntax of HTML Anchor Tag Coords Attribute

< a coords=”value”>

HTML Anchor Tag Coords Attribute Values

Coords Attribute Value Description of Value
x1,y1,x2,y2 If the shape attribute in the anchor tag is set to “rect” then these coordinates define the top  left and the bottom right corner of the rectangle.
x,y,radius If the shape in the anchor tag is set to “circle” then these coordinates specify the center of the circle and the radius of the circle.
x1,y1,x2,y2, … x(n),y(n) If the shape attribute in the anchor tag is set to “poly” then these coordinates specify the edges of the polygon.

HTML Anchor Tag Coords Attribute Example

HTML Anchor Tag Coords Attribute Code Output 
<p>Click on the shapes to watch them:</p>
<img src=" HTMLAreaTagEx.gif"
alt="Shapes" usemap="#shapemap"
width="145" height="126">
<map name="shapemap">
<a shape="circle" coords="25,30,12"
href="Circle.jpg" target=_blank>
<a shape="rect" coords="62,30,82,40"
href="triangle.jpg" target=_blank >
<a shape="circle" coords="115,35,10"
href="star.jpg" target=_blank >
</map>
Click on the shapes to watch them:
Shapes

In the above Anchor Tag Coords Attribute example, notice the usage of Coords attribute to define the coordinates of link locations.

HTML Anchor Tag Coords Attribute Supporting Browsers

S. No. Browser Supported(Yes/No)
1 Internet Explorer No
2 Firefox Yes
3 Google Chrome No
4 Opera Yes
5 Safari No

Also the coords attribute is not supported in HTML 5.

How To Comment In HTML

by

Well, how to comment in HTML is a simple question with a simpler answer. As in any other language we can add comments in HTML code.

HTML provides comment tag (<!– ..- ->) for commenting a part of code.

The HTML comment tag makes sure that the comment tag and the part of the code commented are not displayed on browser.

Comments can be useful in two ways:

  1. When we don’t want to execute a part of code
  2. When we want to explain a part of code

Let’s understand the use of each way with example.

Example: How to comment in HTML to not execute a part of HTML code

HTML Code Output 
<p> This is a paragraph. </p> <br><!- - This is a comment - - >
<p> This is another paragraph </p>
 This is a paragraph. This is another paragraph

Here we can see that the 2nd line of code having “This is a comment” string is not displayed in the output because it is enclosed by the HTML comment tag (<!—and à)

Example: How to comment in HTML to explain a part of code

HTML Code Output 
<p> This is a paragraph </p>
<br><!- - The below code will create
a horizontal line/rule on the
HTML page to make a segregation of
the page sections  - - >
<hr>
This is a paragraph—————————————————————-

Here we can see that in the HTML output the commented part of the HTML code is not displayed. Also, if someone else reads the HTML source code he/she will be able to understand the reason of creating a horizontal rule/line in the HTML page. Hence we have explained our code using comment tag in HTML.

Also note that the comments are in multiple lines, this means that the HTML comment can span multiple lines until the closing comment tag is encountered.

HTML Comment Tag Supporting Browsers:

S. No. Browser Supported(Yes/No)
1 Internet Explorer Yes
2 Firefox Yes
3 Google Chrome Yes
4 Opera Yes
5 Safari Yes

DOCTYPE in HTML

by

DOCTYPE (<!DOCTYPE) in HTML is basically an instruction to the browser regarding the version of HTML used on the page. DOCTYPE in HTML is not a tag.

The <!DOCTYPE> must be the first thing on any HTML page so that the browser immediately understands how to render the HTML page.

The <!DOCTYPE> must be placed even before the <html> tag on any HTML page.

<!DOCTYPE> before HTML 5 referred to a DTD  where the DTD specified the markup language rules so that the browser can display that HTML page content correctly.

<!DOCTYPE> declarations in HTML

 <!DOCTYPE> in HTML 5 declaration

<!DOCTYPE html>

DOCTYPE in HTML 4.0.1 Strict declaration

– here the DTD contains all the elements and attributes of HTML, but does not have presentational aspect (e.g. font). Also, framesets are not allowed in this declaration.

The <!DOCTYPE> declaration in HTML 4.0.1 Strict is:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

DOCTYPE in HTML 4.0.1 Transitional declaration

– here the DTD contains all the elements and attributes of HTML, and also has presentational aspect (e.g. font). Framesets are however still not allowed in this declaration.

The <!DOCTYPE> declaration in HTML 4.0.1 Transitional is:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

DOCTYPE in HTML 4.0.1 Frameset declaration

– same as HTML 4.0.1 Transitional but also allowed framesets

The <!DOCTYPE> declaration in HTML 4.0.1 Frameset is:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

DOCTYPE in XHTML 1.0 Strict declaration

– here the DTD contains all the elements and attributes of HTML, but does not have presentational aspect (e.g. font). Framesets are not allowed in this declaration and the markup must be written as a well formed XML.

The <!DOCTYPE> declaration in XHTML 1.0 Strict is:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

DOCTYPE in XHTML 1.0 Transitional declarations

– here the DTD contains all the elements and attributes of HTML, and also have presentational aspect (e.g. font). Framesets are however still not allowed in this declaration and the markup must be written as a well formed XML.

The <!DOCTYPE> declaration in XHTML 1.0 Transitional is:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

DOCTYPE in XHTML 1.0 Frameset

– same as XHTML 1.0 Transitional but also allowed framesets

The <!DOCTYPE> declaration in XHTML 1.0 Frameset is:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

DOCTYPE in XHTML 1.1

-same as XHTML 1.0 Strict but it allowed the programmer to add their own modules

The <!DOCTYPE> declaration in XHTML 1.1 is:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

HTML Anchor Tag

by

HTML Anchor TagHTML Anchor Tag (<a>) is used to create or provide a link to a resource or to another web page or to a different location on the same web page.

The HTML Anchor Tag is written as <a>.

The most common use of the HTML Anchor Tag is to provide a Hyperlink to another webpage and in order to do so we need to use the href attribute of the HTML Anchor Tag.

By default the hyperlinks will appear as follows in all the browsers.

  • Unvisited Link: Underlined and blue in color
  • Visited Link: Underlined and purple in color
  • Active Link: Underlined and red in color

The HTML Anchor Tag won’t be able to do anything on its own; it needs attributes and value to function properly.

Attributes available for the HTML Anchor Tag are:

Attribute Name

Value of Attribute

Description of Attribute
charset char_encoding Defines the character set of the linked document (Not supported in HTML 5)
cords coordinates Defines the co-ordinates of the link (Not supported in HTML 5)
href URL Specifies the URL of the resource or webpage the links points to.
hreflang language_code Defines the language of the linked document.
media media_query Specifies for what media/device the link is optimized.
name section_name Defines the name of the anchor (Not supported in HTML 5)
rel alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag		 Defines the relationship between the current resource/ webpage and the linked resource/webpage.
rev text Defines the relationship between the linked resource/ webpage and the current resource/webpage. (Not supported in HTML 5)
shape default
rect
circle
poly		 Defines the shape of the link (Not supported in HTML 5)
target _blank
_parent
_self
_top
framename		 Defines where to open the linked resource/webpage
type MIME_type Defines the MIME type of the linked resource/webpage

Apart from the above mentioned attributes the HTML Anchor Tag also supports the HTML Global Attributes and HTML Event Attributes.

Example of HTML Anchor Tag

HTML anchor tag Code

Output

 
<a href="http://techhoney.com/"
target="_blank">Link for Techhoney </a>
Link for Techhoney

Here in the above HTML Anchor Tag example we can see that the href attribute has value of “http:/www.techhoney.com” and the target attribute has value of “_blank” which means that once we click on the above hyperlink we will open the home page of www.techhoney.com in a new browser window/tab.

Here the target attribute’s value allows us to open the linked resource/webpage in new browser window/tab.

HTML Anchor Tag Supporting Browsers

S. No. Browser Supported(Yes/No)
1 Internet Explorer Yes
2 Firefox Yes
3 Google Chrome Yes
4 Opera Yes
5 Safari Yes

Important points about HTML anchor tag:

hreflang, media, rel, target, and type attributes cannot be present in the HTML anchor tag if the href attribute is not present.
by default any hyperlink will open in the same browser window until and unless specified with the target attribute.

HTML Abbr Tag

by

HTML abbr TagHTML Abbr Tag (<abbr>) is used to indicate the abbreviation or acronym e.g. “WHO”, or “WWF”.

In other words we can say that whenever we want to give acronym in HTML we use the Abbr Tag.

My marking the abbreviations using the HTML Abbr Tag we give useful information to internet browsers, translation systems, spell checking software, search engine spiders or bots and indexing utilities.

Syntax for HTML Abbr Tag

<abbr title=”Some Title”>
abbreviation
</abbr>

Example of HTML Abbr Tag

HTML abbr Tag code Output 
The website
<abbr title="Tech Honey">TH</abbr>
started in October 2012.
The website TH started in October 2012

Here in the above Abbr Tag example above we can see that the website name “Tech Honey” comes abbreviated as “TH” in output section of the code.

Once we move our mouse pointer over the “TH” abbreviation we will be able to see the text in the title (in our case “Tech Honey”) as a tip in the browser.

HTML Abbr Tag Supporting Browsers

S. No. Browser Supported(Yes/No)
1 Internet Explorer Yes (above IE 6)
2 Firefox Yes
3 Google Chrome Yes
4 Opera Yes
5 Safari Yes

The HTML Abbr Tag supports the HTML Global Attributes and HTML Event Attributes.