HTML

HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages.
·        Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus the link available on  a  webpage are called Hypertext.
·        As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark up" a text document with tags that tell a Web browser how to structure it to display.
Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available in HTML language.
Basic HTML Document:
In its simplest form, following is an example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>







<!DOCTYPE...>
This tag defines the document type and HTML version.
<html>
This tag encloses the complete HTML document and mainly comprises of document header which is represented by<head>...</head> and document body which is represented by <body>...</body> tags.
<head>
This tag represents the document's header which can keep other HTML tags like <title>, <link> etc.
<title>
The <title> tag is used inside the <head> tag to mention the document title.
<body>
This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc.
<h1>
This tag represents the heading.
<p>
This tag represents a paragraph.



 

 

 

 

Heading Tags

Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading.

Example

<!DOCTYPE html>

<html>

<head>

<title>Heading Example</title>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

</body>

</html>

This will produce following result:

 

Paragraph Tag

The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag as shown below in the example:

Example

<!DOCTYPE html>

<html>

<head>

<title>Paragraph Example</title>

</head>

<body>

<p>Here is a first paragraph of text.</p>

<p>Here is a second paragraph of text.</p>

<p>Here is a third paragraph of text.</p>

</body>

</html>

This will produce following result:

Here is a first paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

Line Break Tag

Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use <br> it is not valid in XHTML

Example

<!DOCTYPE html>

<html>

<head>

<title>Line Break  Example</title>

</head>

<body>

<p>Hello<br />

You delivered your assignment ontime.<br />

Thanks<br />

Mahnaz</p>

</body>

</html>

This will produce following result:

Hello

You delivered your assignment ontime.

Thanks

Mahnaz

Centering Content

You can use <center> tag to put any content in the center of the page or any table cell.

Example

<!DOCTYPE html>

<html>

<head>

<title>Centring Content Example</title>

</head>

<body>

<p>This text is not in the center.</p>

<center>

<p>This text is in the center.</p>

</center>

</body>

</html>

This will produce following result:

This text is not in the center.

This text is in the center.

Horizontal Lines

Horizontal lines are used to visually break up sections of a document. The <hr>tag creates a line from the current position in the document to the right margin and breaks the line accordingly.

For example you may want to give a line between two paragraphs as in the given example below:

Example

<!DOCTYPE html>

<html>

<head>

<title>Horizontal Line Example</title>

</head>

<body>

<p>This is paragraph one and should be on top</p>

<hr />

<p>This is paragraph two and should be at bottom</p>

</body>

</html>

This will produce following result:

This is paragraph one and should be on top

________________________________________

This is paragraph two and should be at bottom

Again <hr /> tag is an example of the empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

The <hr /> element has a space between the characters hr and the forward slash. If you omit this space, older browsers will have trouble rendering the horizontak line, while if you miss the forward slash character and just use <hr> it is not valid in XHTML



An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag, where the element name is preceded by a forward slash as shown below with few tags:

Start Tag Content End Tag

<p> This is paragraph content. </p>

<h1> This is heading content. </h1>

<div> This is division content. </div>

<br />

So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element. There are some HTML elements which don't need to be closed, such as <img.../>, <hr /> and <br /> elements. These are known as void elements.

HTML documents consist of a tree of these elements and they specify how HTML documents should be built, and what kind of content should be placed in what part of an HTML document.

HTML Tag vs. Element

An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag.

For example <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>This is paragraph</p> is a paragraph element.

Nested HTML Elements

It is very much allowed to keep one HTML element inside another HTML element:

Example

<!DOCTYPE html>

<html>

<head>

<title>Nested Elements Example</title>

</head>

<body>

<h1>This is <i>italic</i> heading</h1>

<p>This is <u>underlined</u> paragraph</p>

</body>

</html>

This will display following result:

This is italic heading

This is underlined paragraph

If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML.

Bold Text

Anything that appears within <b>...</b> element, is displayed in bold as shown below:

Example

<!DOCTYPE html>

<html>

<head>

<title>Bold Text Example</title>

</head>

<body>

<p>The following word uses a <b>bold</b> typeface.</p>

</body>

</html>

This will produce following result:

The following word uses a bold typeface.

Italic Text

Anything that appears within <i>...</i> element is displayed in italicized as shown below:

Example

<!DOCTYPE html>

<html>

<head>

<title>Italic Text Example</title>

</head>

<body>

<p>The following word uses a <i>italicized</i> typeface.</p>

</body>

</html>

This will produce following result:

The following word uses a italicized typeface.

Underlined Text

Anything that appears within <u>...</u> element, is displayed with underline as shown below:

Example

<!DOCTYPE html>

<html>

<head>

<title>Underlined Text Example</title>

</head>

<body>

<p>The following word uses a <u>underlined</u> typeface.</p>

</body>

</html>

This will produce following result:

The following word uses a underlined typeface.

Strike Text

Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin line through the text as shown below:

Example

<!DOCTYPE html>

<html>

<head>

<title>Strike Text Example</title>

</head>

<body>

<p>The following word uses a <strike>strikethrough</strike> typeface.</p>

</body>

</html>

This will produce following result:

The following word uses a strikethrough typeface.

Monospaced Font

The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the same width.

Example

<!DOCTYPE html>

<html>

<head>

<title>Monospaced Font Example</title>

</head>

<body>

<p>The following word uses a <tt>monospaced</tt> typeface.</p>

</body>

</html>

This will produce following result:

The following word uses a monospaced typeface.

Superscript Text

The content of a <sup>...</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character's height above the other characters.

Example

<!DOCTYPE html>

<html>

<head>

<title>Superscript Text Example</title>

</head>

<body>

<p>The following word uses a <sup>superscript</sup> typeface.</p>

</body>

</html>

This will produce following result:

The following word uses a superscript typeface.

Subscript Text

The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character's height beneath the other characters.

Example

<!DOCTYPE html>

<html>

<head>

<title>Subscript Text Example</title>

</head>

<body>

<p>The following word uses a <sub>subscript</sub> typeface.</p>

</body>

</html>

This will produce following result:

The following word uses a subscript typeface.

Inserted Text

Anything that appears within <ins>...</ins> element is displayed as inserted text.

Example

<!DOCTYPE html>

<html>

<head>

<title>Inserted Text Example</title>

</head>

<body>

<p>I want to drink <del>cola</del> <ins>wine</ins></p>

</body>

</html>

This will produce following result:

I want to drink cola wine

Deleted Text

Anything that appears within <del>...</del> element, is displayed as deleted text.

Example

<!DOCTYPE html>

<html>

<head>

<title>Deleted Text Example</title>

</head>

<body>

<p>I want to drink <del>cola</del> <ins>wine</ins></p>

</body>

</html>

This will produce following result:

I want to drink cola wine

Larger Text

The content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it as shown below:

Example

<!DOCTYPE html>

<html>

<head>

<title>Larger Text Example</title>

</head>

<body>

<p>The following word uses a <big>big</big> typeface.</p>

</body>

</html>

This will produce following result:

The following word uses a big typeface.

Smaller Text

The content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it as shown below:

Example

<!DOCTYPE html>

<html>

<head>

<title>Smaller Text Example</title>

</head>

<body>

<p>The following word uses a <small>small</small> typeface.</p>

</body>

</html>

This will produce following result:

The following word uses a small typeface.

Grouping Content

The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page.

For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all of the elements within that <div> element relate to the footnotes. You might then attach a style to this <div> element so that they appear using a special set of style rules.

Example

<!DOCTYPE html>

<html>

<head>

<title>Div Tag Example</title>

</head>

<body>

<div id="menu" align="middle" >

<a href="/index.htm">HOME</a> | 

<a href="/about/contact_us.htm">CONTACT</a> | 

<a href="/about/index.htm">ABOUT</a>

</div>


<div id="content" align="left" bgcolor="white">

<h5>Content Articles</h5>

<p>Actual content goes here.....</p>

</div>

</body>

</html>

This will produce following result:

HOME | CONTACT | ABOUT

CONTENT ARTICLES

Actual content goes here.....

The <span> element, on the other hand, can be used to group inline elements only. So, if you have a part of a sentence or paragraph which you want to group together, you could use the <span> element as follows

Example

<!DOCTYPE html>

<html>

<head>

<title>Span Tag Example</title>

</head>

<body>

<p>This is the example of <span style="color:green">span tag</span> and the <span style="color:red">div tag</span> alongwith CSS</p>

</body>

</html>

This will produce following result:

This is the example of span tag and the div tag alongwith CSS




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>, you have seen in previous chapter. This chapter will take you through all the important phrase tags, so let's start seeing them one by one.

Emphasized Text

Anything that appears within <em>...</em> element is displayed as emphasized text.

Example

<!DOCTYPE html>

<html>

<head>

<title>Emphasized Text Example</title>

</head>

<body>

<p>The following word uses a <em>emphasized</em> typeface.</p>

</body>

</html>

This will produce following result:

The following word uses a emphasized typeface.

Marked Text

Anything that appears with-in <mark>...</mark> element, is displayed as marked with yellow ink.

Example

<!DOCTYPE html>

<html>

<head>

<title>Marked Text Example</title>

</head>

<body>

<p>The following word has been <mark>marked</mark> with yellow</p>

</body>

</html>

This will produce following result:

The following word has been marked with yellow.

Strong Text

Anything that appears within <strong>...</strong> element is displayed as important text.

Example

<!DOCTYPE html>

<html>

<head>

<title>Strong Text Example</title>

</head>

<body>

<p>The following word uses a <strong>strong</strong> typeface.</p>

</body>

</html>

This will produce following result:

The following word uses a strong typeface.

Text Abbreviation

You can abbreviate a text by putting it inside opening <abbr> and closing</abbr> tags. If present, the title attribute must contain this full description and nothing else.

Example

<!DOCTYPE html>

<html>

<head>

<title>Text Abbreviation</title>

</head>

<body>

<p>My best friend's name is  <abbr title="Abhishek">Abhy</abbr>.</p>

</body>

</html>

This will produce following result:

My best friend's name is Abhy.

Acronym Element

The <acronym> element allows you to indicate that the text between <acronym> and </acronym> tags is an acronym.

At present, the major browsers do not change the appearance of the content of the <acronym> element.

Example

<!DOCTYPE html>

<html>

<head>

<title>Acronym Example</title>

</head>

<body>

<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>

</body>

</html>

This will produce following result:

This chapter covers marking up text in XHTML.

Text Direction

The <bdo>...</bdo> element stands for Bi-Directional Override and it is used to override the current text direction.

Example

<!DOCTYPE html>

<html>

<head>

<title>Text Direction Example</title>

</head>

<body>

<p>This text will go left to right.</p>

<p><bdo dir="rtl">This text will go right to left.</bdo></p>

</body>

</html>

This will produce following result:

This text will go left to right.

This text will go right to left.

Special Terms

The <dfn>...</dfn> element (or HTML Definition Element) allows you to specify that you are introducing a special term. It's usage is similar to italic words in the midst of a paragraph.

Typically, you would use the <dfn> element the first time you introduce a key term. Most recent browsers render the content of a <dfn> element in an italic font.

Example

<!DOCTYPE html>

<html>

<head>

<title>Special Terms Example</title>

</head>

<body>

<p>The following word is a <dfn>special</dfn> term.</p>

</body>

</html>

This will produce following result:

The following word is a special term.

Quoting Text

When you want to quote a passage from another source, you should put it in between <blockquote>...</blockquote> tags.

Text inside a <blockquote> element is usually indented from the left and right edges of the surrounding text, and sometimes uses an italicized font.

Example

<!DOCTYPE html>

<html>

<head>

<title>Blockquote Example</title>

</head>

<body>

<p>The following description of XHTML is taken from the W3C Web site:</p>


<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>

</body>

</html>

This will produce following result:

The following description of XHTML is taken from the W3C Web site:

XHTML 1.0 is the W3C's first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.

Short Quotations

The <q>...</q> element is used when you want to add a double quote within a sentence.

Example

<!DOCTYPE html>

<html>

<head>

<title>Double Quote Example</title>

</head>

<body>

<p>Amit is in Spain, <q>I think I am wrong</q>.</p>

</body>

</html>

This will produce following result:

Amit is in Spain, I think I am wrong.

Text Citations

If you are quoting a text, you can indicate the source placing it between an opening <cite> tag and closing </cite> tag

As you would expect in a print publication, the content of the <cite> element is rendered in italicized text by default.

Example

<!DOCTYPE html>

<html>

<head>

<title>Citations Example</title>

</head>

<body>

<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>

</body>

</html>

This will produce following result:

This HTML tutorial is derived from W3 Standard for HTML.

Computer Code

Any programming code to appear on a Web page should be placed inside<code>...</code> tags. Usually the content of the <code> element is presented in a monospaced font, just like the code in most programming books.

Example

<!DOCTYPE html>

<html>

<head>

<title>Computer Code Example</title>

</head>

<body>

<p>Regular text. <code>This is code.</code> Regular text.</p>

</body>

</html>

This will produce following result:

Regular text. This is code. Regular text.

Keyboard Text

When you are talking about computers, if you want to tell a reader to enter some text, you can use the <kbd>...</kbd> element to indicate what should be typed in, as in this example.

Example

<!DOCTYPE html>

<html>

<head>

<title>Keyboard Text Example</title>

</head>

<body>

<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>

</body>

</html>

This will produce following result:

Regular text. This is inside kbd element Regular text.

Programming Variables

This element is usually used in conjunction with the <pre> and <code>elements to indicate that the content of that element is a variable.

Example

<!DOCTYPE html>

<html>

<head>

<title>Variable Text Example</title>

</head>

<body>

<p><code>document.write("<var>user-name</var>")</code></p>

</body>

</html>

This will produce following result:

document.write("user-name")

Program Output

The <samp>...</samp> element indicates sample output from a program, and script etc. Again, it is mainly used when documenting programming or coding concepts.

Example

<!DOCTYPE html>

<html>

<head>

<title>Program Output Example</title>

</head>

<body>

<p>Result produced by the program is <samp>Hello World!</samp></p>

</body>

</html>

This will produce following result:

Result produced by the program is Hello World!

Address Text

The <address>...</address> element is used to contain any address.

Example

<!DOCTYPE html>

<html>

<head>

<title>Address Example</title>

</head>

<body>

<address>388A, Road No 22, Jubilee Hills -  Hyderabad</address>

</body>

</html>

This will produce following result:

388A, Road No 22, Jubilee Hills - Hyderabad



HTML lets you specify metadata - additional important information about a document in a variety of ways. The META elements can be used to include name/value pairs describing properties of the HTML document, such as author, expiry date, a list of keywords, document author etc.

The <meta> tag is used to provide such additional information. This tag is an empty element and so does not have a closing tag but it carries information within its attributes.

You can include one or more meta tags in your document based on what information you want to keep in your document but in general, meta tags do not impact physical appearance of the document so from appearance point of view, it does not matter if you include them or not.

Adding Meta Tags to Your Documents

You can add metadata to your web pages by placing <meta> tags inside the header of the document which is represented by <head> and </head> tags. A meta tag can have following attributes in addition to core attributes:

Attribute Description

Name Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.

content Specifies the property's value.

scheme Specifies a scheme to interpret the property's value (as declared in the content attribute).

http-equiv Used for http response message headers. For example http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.

Specifying Keywords

You can use <meta> tag to specify important keywords related to the document and later these keywords are used by the search engines while indexing your webpage for searching purpose.

Example

Following is an example where we are adding HTML, Meta Tags, Metadata as important keywords about the document.

<!DOCTYPE html>

<html>

<head>

<title>Meta Tags Example</title>

<meta name="keywords" content="HTML, Meta Tags, Metadata" />

</head>

<body>

<p>Hello HTML5!</p>

</body>

</html>

This will produce following result:

Hello HTML5!

Document Description

You can use <meta> tag to give a short description about the document. This again can be used by various search engines while indexing your webpage for searching purpose.

Example

<!DOCTYPE html>

<html>

<head>

<title>Meta Tags Example</title>

<meta name="keywords" content="HTML, Meta Tags, Metadata" />

<meta name="description" content="Learning about Meta Tags." />

</head>

<body>

<p>Hello HTML5!</p>

</body>

</html>


Comment is a piece of code which is ignored by any web browser. It is a good practice to add comments into your HTML code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code. Comments help you and others understand your code and increases code readability.

HTML comments are placed in between <!-- ... --> tags. So any content placed with-in <!-- ... --> tags will be treated as comment and will be completely ignored by the browser.

Example

<!DOCTYPE html>

<html>

<head>  <!-- Document Header Starts -->

<title>This is document title</title>

</head> <!-- Document Header Ends -->

<body>

<p>Document content goes here.....</p>

</body>

</html>

This will produce following result without displaying the content given as a part of comments:

Document content goes here.....

Valid vs Invalid Comments

Comments do not nest which means a comment can not be put inside another comment. Second the double-dash sequence "--" may not appear inside a comment except as part of the closing --> tag. You must also make sure that there are no spaces in the start-of-comment string.

Example

Here given comment is a valid comment and will be wiped off by the browser.

<!DOCTYPE html>

<html>

<head>

<title>Valid Comment Example</title>

</head>

<body>

<!--   This is valid comment -->

<p>Document content goes here.....</p>

</body>

</html>

But following line is not a valid comment and will be displayed by the browser. This is because there is a space between the left angle bracket and the exclamation mark.

<!DOCTYPE html>

<html>

<head>  

<title>Invalid Comment Example</title>

</head> 

<body>

< !--   This is not a valid comment -->

<p>Document content goes here.....</p>

</body>

</html>

This will produce following result:

< !-- This is not a valid comment -->

Document content goes here.....

Multiline Comments

So far we have seen single line comments, but HTML supports multi-line comments as well.

You can comment multiple lines by the special beginning tag <!-- and ending tag --> placed before the first line and end of the last line as shown in the given example below.

Example

<!DOCTYPE html><html>

<head>  

<title>Multiline Comments</title>

</head> 

<body>

<!--   

This is a multiline comment and it can

span through as many as lines you like.

-->

<p>Document content goes here.....</p>

</body>

</html>

This will produce following result:

Document content goes here.....

Using Comment Tag

There are few browsers that support <comment> tag to comment a part of HTML code.

Example

<!DOCTYPE html><html>

<head>

<title>Using Comment Tag</title>

</head>

<body>

<p>This is <comment>not</comment> Internet Explorer.</p>

</body>

</html>

If you are using IE then it will produce following result:

This is Internet Explorer.

But if you are not using IE, then it will produce following result:

This is  Internet Explorer.

Commenting Script Code

Though you will learn Javascript with HTML, in a separate tutorial, but here you must make a note that if you are using Java Script or VB Script in your HTML code then it is recommended to put that script code inside proper HTML comments so that old browsers can work properly.

Example

<!DOCTYPE html><html>

<head>

<title>Commenting Script Code</title>

<script>

<!-- 

   document.write("Hello World!")

//-->

</script>

</head>

<body>

<p>Hello , World!</p>

</body>

</html>

This will produce following result:

Hello World!

Hello , World!


Commenting Style Sheets:


Though you will learn using style sheets with HTML in a separate tutorial, but here you must make a note that if you are using Casecading Style Sheet (CSS) in your HTML code then it is recommended to put that style sheet code inside proper HTML comments so that old browsers can work properly.

Example :

<!DOCTYPE html><html>

<head>

<title>Commenting Style Sheets</title>

<style>

<!--

.example {

  border:1px solid #4a7d49;

}

//-->

</style>

</head>

<body>

<div class="example">Hello , World!</div>

</body>

</html>

This will produce following result:

Hello , World!



Images are very important to beautify as well as to depict many complex concepts in simple way on your web page. This tutorial will take you through simple steps to use images in your web pages.

Insert Image

You can insert any image in your web page by using <img> tag. Following is the simple syntax to use this tag.

<img src="Image URL" ... attributes-list/>

The <img> tag is an empty tag, which means that it can contain only list of attributes and it has no closing tag.

Example

To try following example, let's keep our HTML file test.htm and image file test.png in the same directory:

<!DOCTYPE html>

<html>

<head>

<title>Using Image in Webpage</title>

</head>

<body>

<p>Simple Image Insert</p>

<img src="/html/images/test.png" alt="Test Image" />

</body>

</html>



Set Image Location

Usually we keep our all the images in a separate directory. So let's keep HTML file test.htm in our home directory and create a subdirectory images inside the home directory where we will keep our image test.png.

Example

Assuming our image location is "/html/image/test.png", try the following example:

<!DOCTYPE html>

<html>

<head>

<title>Using Image in Webpage</title>

</head>

<body>

<p>Simple Image Insert</p>

<img src="/html/images/test.png" alt="Test Image" />

</body>

</html>


Set Image Width/Height

You can set image width and height based on your requirement using widthand height attributes. You can specify width and height of the image in terms of either pixels or percentage of its actual size.

Example

<!DOCTYPE html>

<html>

<head>

<title>Set Image Width and Height</title>

</head>

<body>

<p>Setting image width and height</p>

<img src="/html/images/test.png" alt="Test Image" width="150" height="100"/>

</body>

</html>


Set Image Border

By default image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture.

Example

<!DOCTYPE html>

<html>

<head>

<title>Set Image Border</title>

</head>

<body>

<p>Setting image Border</p>

<img src="/html/images/test.png" alt="Test Image" border="3"/>

</body>

</html>


Set Image Alignment

By default image will align at the left side of the page, but you can use alignattribute to set it in the center or right.

Example

<!DOCTYPE html>

<html>

<head>

<title>Set Image Alignment</title>

</head>

<body>

<p>Setting image Alignment</p>

<img src="/html/images/test.png" alt="Test Image" border="3" align="right"/>

</body>

</html>


<!DOCTYPE html>

<html>

<head>

<title>HTML Table Colspan/Rowspan</title>

</head>

<body>

<table border="1">

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>

<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>

<tr><td colspan="3">Row 3 Cell 1</td></tr>

</table>

</body>

</html>

This will produce following result:

Column 1 Column 2 Column 3

Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3

Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1

Tables Backgrounds

You can set table background using one of the following two ways:

bgcolor attribute - You can set background color for whole table or just for one cell.

background attribute - You can set background image for whole table or just for one cell.

You can also set border color also using bordercolor attribute.

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Table Background</title>

</head>

<body>

<table border="1" bordercolor="green" bgcolor="yellow">

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>

<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>

<tr><td colspan="3">Row 3 Cell 1</td></tr>

</table>

</body>

</html>

This will produce following result:

Column 1 Column 2 Column 3

Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3

Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1

Here is an example of using background attribute. Here we will use an image available in /images directory.

<!DOCTYPE html>

<html>

<head>

<title>HTML Table Background</title>

</head>

<body>

<table border="1" bordercolor="green" background="/images/test.png">

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>

<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>

<tr><td colspan="3">Row 3 Cell 1</td></tr>

</table>

</body>

</html>


Table Height and Width

You can set a table width and height using width and height attrubutes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area.

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Table Width/Height</title>

</head>

<body>

<table border="1" width="400" height="150">

<tr>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

</tr>

<tr>

<td>Row 2, Column 1</td>

<td>Row 2, Column 2</td>

</tr>

</table>

</body>

</html>

This will produce following result:

Row 1, Column 1 Row 1, Column 2

Row 2, Column 1 Row 2, Column 2

Table Caption

The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag is deprecated in newer version of HTML/XHTML.

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Table Caption</title>

</head>

<body>

<table border="1" width="100%">

<caption>This is the caption</caption>

<tr>

<td>row 1, column 1</td><td>row 1, columnn 2</td>

</tr>

<tr>

<td>row 2, column 1</td><td>row 2, columnn 2</td>

</tr>

</table>

</body>

</html>

This will produce following result:

This is the caption

row 1, column 1 row 1, columnn 2

row 2, column 1 row 2, columnn 2

Table Header, Body, and Footer

Tables can be divided into three portions: a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.

The three elements for separating the head, body, and foot of a table are:

<thead> - to create a separate table header.

<tbody> - to indicate the main body of the table.

<tfoot> - to create a separate table footer.

A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Table</title>

</head>

<body>

<table border="1" width="100%">

<thead>

<tr>

<td colspan="4">This is the head of the table</td>

</tr>

</thead>

<tfoot>

<tr>

<td colspan="4">This is the foot of the table</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>Cell 1</td>

<td>Cell 2</td>

<td>Cell 3</td>

<td>Cell 4</td>

</tr>

</tbody>

</table>

</body>

</html>

This will produce following result:

This is the head of the table

This is the foot of the table

Cell 1 Cell 2 Cell 3 Cell 4

Nested Tables

You can use one table inside another table. Not only tables you can use almost all the tags inside table data tag <td>.

Example

Following is the example of using another table and other tags inside a table cell.

<!DOCTYPE html>

<html>

<head>

<title>HTML Table</title>

</head>

<body>

<table border="1" width="100%">

<tr>

<td>

   <table border="1" width="100%">

   <tr>

   <th>Name</th>

   <th>Salary</th>

   </tr>

   <tr>

   <td>Ramesh Raman</td>

   <td>5000</td>

   </tr>

   <tr>

   <td>Shabbir Hussein</td>

   <td>7000</td>

   </tr>

   </table>

</td>

</tr>

</table>

</body>

</html>

This will produce following result:

Name Salary

Ramesh Raman 5000

Shabbir Hussein 7000



HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain:

<ul> - An unordered list. This will list items using plain bullets.

<ol> - An ordered list. This will use different schemes of numbers to list your items.

<dl> - A definition list. This arranges your items in the same way as they are arranged in a dictionary.

HTML Unordered Lists

An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Unordered List</title>

</head>

<body>

<ul>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ul>

</body>

</html>

This will produce following result:

Beetroot

Ginger

Potato

Radish

The type Attribute

You can use type attribute for <ul> tag to specify the type of bullet you like. By default it is a disc. Following are the possible options:

<ul type="square">

<ul type="disc">

<ul type="circle">

Example

Following is an example where we used <ul type="square">

<!DOCTYPE html>

<html>

<head>

<title>HTML Unordered List</title>

</head>

<body>

   <ul type="square">

   <li>Beetroot</li>

   <li>Ginger</li>

   <li>Potato</li>

   <li>Radish</li>

   </ul>

</body>

</html>

This will produce following result:

Beetroot

Ginger

Potato

Radish

Example

Following is an example where we used <ul type="disc"> :

<!DOCTYPE html>

<html>

<head>

<title>HTML Unordered List</title>

</head>

<body>

   <ul type="disc">

   <li>Beetroot</li>

   <li>Ginger</li>

   <li>Potato</li>

   <li>Radish</li>

   </ul>

</body>

</html>

This will produce following result:

Beetroot

Ginger

Potato

Radish

Example

Following is an example where we used <ul type="circle"> :

<!DOCTYPE html>

<html>

<head>

<title>HTML Unordered List</title>

</head>

<body>

   <ul type="circle">

   <li>Beetroot</li>

   <li>Ginger</li>

   <li>Potato</li>

   <li>Radish</li>

   </ul>

</body>

</html>

This will produce following result:

o Beetroot

o Ginger

o Potato

o Radish

HTML Ordered Lists

If you are required to put your items in a numbered list instead of bulleted then HTML ordered list will be used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>.

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

<ol>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

</body>

</html>

This will produce following result:

1. Beetroot

2. Ginger

3. Potato

4. Radish

The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering you like. By default it is a number. Following are the possible options:

<ol type="1"> - Default-Case Numerals.

<ol type="I"> - Upper-Case Numerals.

<ol type="i"> - Lower-Case Numerals.

<ol type="a"> - Lower-Case Letters.

<ol type="A"> - Upper-Case Letters.

Example

Following is an example where we used <ol type="1">

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

   <ol type="1">

   <li>Beetroot</li>

   <li>Ginger</li>

   <li>Potato</li>

   <li>Radish</li>

   </ol>

</body>

</html>

This will produce following result:

1. Beetroot

2. Ginger

3. Potato

4. Radish

Example

Following is an example where we used <ol type="I">

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

   <ol type="I">

   <li>Beetroot</li>

   <li>Ginger</li>

   <li>Potato</li>

   <li>Radish</li>

   </ol>

</body>

</html>

This will produce following result:

I. Beetroot

II. Ginger

III. Potato

IV. Radish

Example

Following is an example where we used <ol type="i">

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

   <ol type="i">

   <li>Beetroot</li>

   <li>Ginger</li>

   <li>Potato</li>

   <li>Radish</li>

   </ol>

</body>

</html>

This will produce following result:

i. Beetroot

ii. Ginger

iii. Potato

iv. Radish

Example

Following is an example where we used <ol type="A">

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

   <ol type="A">

   <li>Beetroot</li>

   <li>Ginger</li>

   <li>Potato</li>

   <li>Radish</li>

   </ol>

</body>

</html>

This will produce following result:

A. Beetroot

B. Ginger

C. Potato

D. Radish

Example

Following is an example where we used <ol type="a">

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

   <ol type="a">

   <li>Beetroot</li>

   <li>Ginger</li>

   <li>Potato</li>

   <li>Radish</li>

   </ol>

</body>

</html>

This will produce following result:

a. Beetroot

b. Ginger

c. Potato

d. Radish

The start Attribute

You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are the possible options:

<ol type="1" start="4">    - Numerals starts with 4.

<ol type="I" start="4">    - Numerals starts with IV.

<ol type="i" start="4">    - Numerals starts with iv.

<ol type="a" start="4">    - Letters starts with d.

<ol type="A" start="4">    - Letters starts with D.

Example

Following is an example where we used <ol type="i" start="4" >

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

   <ol type="i" start="4">

   <li>Beetroot</li>

   <li>Ginger</li>

   <li>Potato</li>

   <li>Radish</li>

   </ol>

</body>

</html>

This will produce following result:

iv. Beetroot

v. Ginger

vi. Potato

vii. Radish

HTML Definition Lists

HTML and XHTML support a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list.

Definition List makes use of following three tags.

<dl> - Defines the start of the list

<dt> - A term

<dd> - Term definition

</dl> - Defines the end of the list

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Definition List</title>

</head>

<body>

<dl>

<dt><b>HTML</b></dt>

<dd>This stands for Hyper Text Markup Language</dd>

<dt><b>HTTP</b></dt>

<dd>This stands for Hyper Text Transfer Protocol</dd>

</dl>

</body>

</html>

This will produce following result:

HTML

This stands for Hyper Text Markup Language

HTTP

This stands for Hyper Text Transfer Protocol


A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks.

Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. Thus you can create hyperlinks using text or images available on a webpage.

Note: I recommend to go through a short tutorial on Understanding URL

Linking Documents

A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document. Following is the simple syntax to use <a> tag.

<a href="Document URL" ... attributes-list>Link Text</a>

Example

Let's try following example which links http://www.tutorialspoint.com at your page:

<!DOCTYPE html>

<html>

<head>

<title>Hyperlink Example</title>

</head>

<body>

<p>Click following link</p>

<a href="http://www.tutorialspoint.com" target="_self">Tutorials Point</a>

</body>

</html>

This will produce following result, where you can click on the link generatedTutorials Point to reach to the home page of Tutorials Point.

Click following link

Tutorials Point

The target Attribute

We have used target attribute in our previous example. This attribute is used to specify the location where linked document is opened. Following are possible options:

Option Description

_blank Opens the linked document in a new window or tab.

_self Opens the linked document in the same frame.

_parent Opens the linked document in the parent frame.

_top Opens the linked document in the full body of the window.

targetframe Opens the linked document in a named targetframe.

Example

Try following example to understand basic difference in few options given for target attribute.

<!DOCTYPE html>

<html>

<head>

<title>Hyperlink Example</title>

<base href="http://www.tutorialspoint.com/">

</head>

<body>

<p>Click any of the following links</p>

<a href="/html/index.htm" target="_blank">Opens in New</a> |

<a href="/html/index.htm" target="_self">Opens in Self</a> |

<a href="/html/index.htm" target="_parent">Opens in Parent</a> |

<a href="/html/index.htm" target="_top">Opens in Body</a>

</body>

</html>

This will produce following result, where you can click on different links to understand the difference between various options given for target attribute.

Click any of the following links

Opens in New | Opens in Self | Opens in Parent | Opens in Body

Use of Base Path

When you link HTML documents related to the same website, it is not required to give a complete URL for every link. You can get rid of it if you use <base>tag in your HTML document header. This tag is used to give a base path for all the links. So your browser will concatenate given relative path to this base path and will make a complete URL.

Example

Following example makes use of <base> tag to specify base URL and later we can use relative path to all the links instead of giving complete URL for every link.

<!DOCTYPE html>

<html>

<head>

<title>Hyperlink Example</title>

<base href="http://www.tutorialspoint.com/">

</head>

<body>

<p>Click following link</p>

<a href="/html/index.htm" target="_blank">HTML Tutorial</a>

</body>

</html>

This will produce following result, where you can click on the link generatedHTML Tutorial to reach to the HTML tutorial.

Now given URL <a href="/html/index.htm" is being considered as <a href="http://www.vissicomp.com/html/index.htm".

Click following link

HTML Tutorial

Linking to a Page Section

You can create a link to a particular section of a given webpage by using nameattribute. This is a two step process.

First create a link to the place where you want to reach with-in a webpage and name it using <a...> tag as follows:

<h1>HTML Text Links <a name="top"></a></h1>

Second step is to create a hyperlink to link the document and place where you want to reach:

<a href="/html/html_text_links.htm#top">Go to the Top</a>

This will produce following link, where you can click on the link generated Go to the Top to reach to the top of the HTML Text Link tutorial.

Go to the Top


Setting Link Colors

You can set colors of your links, active links and visited links using link, alinkand vlink attributes of <body> tag.

Example

Save the following in test.htm and open it in any web browser to see how link,alink and vlink attributes work.

<!DOCTYPE html>

<html>

<head>

<title>Hyperlink Example</title>

<base href="http://www.tutorialspoint.com/">

</head>

<body alink="#54A250" link="#040404" vlink="#F40633">

<p>Click following link</p>

<a href="/html/index.htm" target="_blank" >HTML Tutorial</a>

</body>

</html>

This will produce following result. Just check color of the link before clicking on it, next check its color when you activate it and when the link has been visited.

Click following link

HTML Tutorial


We have seen how to create hypertext link using text and we also learnt how to use images in our webpages. Now we will learn how to use images to create hyperlinks.

Example

It's simple to use an image as hyperlink. We just need to use an image inside hyperlink at the place of text as shown below:

<!DOCTYPE html>

<html>

<head>

<title>Image Hyperlink Example</title>

</head>

<body>

<p>Click following link</p>

<a href="http://www.vissicomp.com" target="_self"> 

   <img src="/images/logo.png" alt="Tutorials Point" border="0"/> 

</a>

</body>

</html>



Its not difficult to put an HTML email link on your webpage but it can cause unnecessary spamming problem for your email account. There are people who can run programs to harvest these types of emails and later use them for spamming in various ways.

You can have another options to facilitate people to send you emails. One option could be to use HTML forms to collect user data and then use PHP or CGI script to send an email.

A simple example, check our Contact Us Form. We take user feedback using this form and then we are using one CGI program which is collecting this information and sending us email to one given email ID.

Note: You will learn about HTML Forms in HTML Forms and you will learn about CGI in our another tutorial Perl CGI Programming.

HTML Email Tag

HTML <a> tag provides you option to specifiy an email address to send an email. While using <a> tag as an email tag, you will use mailto:email address along with href attribute. Following is the syntax of using mailtoinstead of using http.

<a href= "mailto:abc@example.com">Send Email</a>

This code will generate following link which you can use to send email.

Send Email 

Now if a user clicks this link, it launches one Email Client ( like Lotus Notes, Outlook Express etc. ) installed on your user's computer. There is another risk to use this option to send email because if user do not have email client installed on their computer then it would not be possible to send email.

Default Settings

You can specify a default email subject and email body alongwith your email address. Following is the example to use default subject and body.

<a href="mailto:abc@example.com?subject=Feedback&body=Message">

Send Feedback

</a>

This code will generate following link which you can use to send email.

Send Feedback


Previous
Next Post »