The Internet is used by millions of people worldwide. It provides many online facilities, which are as follows:
- E-mail
- Chat
- E-commerce
- E-banking
- Search engines
The Internet provides all these facilities through Web sites, which are loaded on different Web servers. A Web site is a collection of one or more Web pages that are created using Hypertext Markup Language in combination with different languages such as ASP, Java, VBScript, and JavaScript, etc. These languages are used to connect a Web page to a database, to create client/server applications, etc.
Hypertext Markup Language or HTML is a language that is used to create Web pages. These Web pages are linked together with one another to create a Web site. Every Web page in a Web site has its own URL.
Using different HTML tags can create a Web page. Some of the HTML tags are as follows:
Linking tags:
The <a> tag: The <a> tag is used to create a hyperlink. Hyperlink is a text that is used to link the Web pages of a Web site with one another or to the Web pages of another Web site. A hyperlink can be created using the <a> tag. The following example will demonstrate the use of the <a> tag:
<a href="mypage.html">My page</a>
The <map> and <area> tags:
Image maps can be used to connect Web pages of a Web site with one another or to the Web pages of another Web site. An image map is used to divide an image into multiple sections. Each section of the image can be linked to an HTML document. The image maps can be created using the <map> and <area> tags. The following example will demonstrate the use of an image map:
<map name="mymap">
<area shape="rect" coords="60 80 100 40" href="page1.html">
<area shape="rect" coords="120 80 100 40" href="page2.html">
</map>
<img src="myimg.gif" usemap="#mymap">
The formatting tags:
The <b> tag: The <b> tag is a formatting tag that is used to display text in bold.
The <bdo> tag: The <bdo> tag is used to reverse text.
The <big> tag: The <big> tag is used to display text larger than its normal font size of text in a Web page.
The <center> tag: The <center> tag is used to insert text horizontally in the center of a line.
The <cite> tag: The <cite> tag is used to display text in italics.
The <code> tag: The <code> tag is used to write text that is preformatted.
The <del> tag: The <del> tag is used to define text that has been delayed in a document.
The <dfn> tag: The <dfn> tag is used to define a definition term.
The <em> tag: The <em> tag is used to emphasize a particular text.
The <font> tag: The <font> tag is used to define the font face, font size, and font color of a text.
The heading tags:
There are six heading tags in HTML, which are used to provide headings for the topics and subtopics in a document. The heading tags start from <h1> to <h6>. Each of these has different font sizes. The font size of the <h1 > is the largest and it decreases from <h1> to <h6>.
The <i> tag: The <i> tag is used to display text in italics.
The <ins> tag: The <ins> tag is used to define an inserted text in a document.
The <kbd> tag: The <kbd> tag is used to display the keyboard text.
The <p> tag: The <p> tag is used to define a paragraph.
The <pre> tag: The <pre> tag is used to define a pre-formatted text. The text enclosed in this tag preserves the line breaks and spaces.
The <s> and <strike> tags: The <s> and <strike> tags are used to strike out text.
The <small> tag: The <small> tag is used to display text that is smaller than the normal font size of the text in a Web page.
The <strong> tag: The <strong> tag is used to emphasize a text strongly.
The <sub> tag: The <sub> tag is used to display a subscript text.
The <sup> tag: The <sup> tag is used to display the superscript tag.
The <tt> tag: The <tt> tag is used to display a teletype or monospaced text.
The <u> tag: The <u> tag is used to underline a text.
The following example will demonstrate the use of the formatting tags:
<b>This is a bold text.</b>
<bdo dir="rtl">This is a text</bdo>
<big>This is a big text.</big>
<center>This text will be in center</center>
<cite>This is a cite</cite>
<code>This is a code.</code>
<del>This is a deleted text</del>
<dfn>This is a definition term</dfn>
<em>This is an emphasized text.</em>
<font face="verdana" size="4" color="green">This is a font text.</font>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
<i>This is the text in italics.</i>
<p>This is <ins>inserted</ins> text.
<kbd>This is a keyboard text</kbd>
<p>This is first paragraph.
<p>This is second paragraph.
<pre>This is a preformatted text.</pre>
<s>This is an strike out text.</s>
<strike>This is an strike out text.</strike>
<small>This is a small text.</small>
<strong>This is a strong emphasized text</strong>
<p>The chemical formula of water is H<sub>2</sub>O.
<p>James will leave on 27<sup>th</sup> December.
<tt>This is a teletype text</tt>
<u>This is an underlined text</u>
The output is as follows:
This is a bold text.
This is a text
This is a big text.
This text will be in center
This is a cite
This is a code.
This is a deleted text
This is a definition term
This is an emphasized text.
This is a font text
heading 1
heading 2
heading 3
heading 4
heading 5
heading 6
This is the text in italics.
This is inserted text.
This is a keyboard text
This is first paragraph.
This is second paragraph.
This is a preformatted text.
This is an strike out text.
This is an strike out text.
This is a small text.
This is a strong emphasized text
The chemical formula of water is H2O
James will leave on 27th December.
This is a teletype text
This is an underlined text
The container tags:
The <body> tag: The <body> tag is used to create the document of an HTML page. Most of the tags are used inside the <body> tag.
The <frameset> and <frame> tags: The frameset and frame tags are used to divide a window in two or more sections. Each frame in a frameset can contain a separate HTML document. The <frameset> tag is the container of all the frames. These tags cannot be used within the <body> or <head> tags. The following example will demonstrate the use of the <frameset> and <frame> tags:
<frameset cols="50%,50%">
<frame src="page1.html">
<frame src="page1.html">
</frameset>
This code will divide a browser window vertically in two sections.
The <head> tag: The <head> tag contains the information about an HTML document such as title. The code of other languages such as JavaScript, VBScript, etc. can be used within the <head> tag. The <head> tag is inserted just after the <html> tag. The following example will demonstrate the use of the <head> tag:
<head>
<title>Title</title>
</head>
The title given in the <title> tag will be shown on the title bar of a browser window.
The <html> tag: The <html> tag is the first tag of an HTML document. All the other tags are contained within this tag.
The <iframe> tag: The <iframe> tag is used to create an inline frame. The inline frame can contain another document. The following example will demonstrate the use of the <iframe> tag:
<iframe src="page1.html"></iframe>
Miscellaneous tags:
The <br> tag: The <br> tag is used to insert a single line break between two statements or two paragraphs.
The <hr> tag: The <hr> tag is used to draw a horizontal line in a document.
The <img> tag: The <img> tag is used to insert images in an HTML document. The format of the image should be GIF or JPEG.
The following example will demonstrate the use of the miscellaneous tag:
This is first line.<br>This is second line
<p>This is a text.
<hr>
<p>This is a text.
<img src="img1.gif">
The output is as follows:
This is first line.
This is second line
This is a text.
This is a text.
The <meta> tag: The <meta> tag is used to convey hidden information about a document, such as keywords, description, etc., to the server and the client. It also embeds the document information that is used by some search engines to index and categorize documents on the World Wide Web. <meta> tags can be used only within the head section of a Web page. It does not require a closing tag.
The <table> and its elements:
The <caption> tag: The <caption> tag is used to give a caption inside a table. The <caption> should be inserted just after the <table> tag.
The <col> tag: The <col> tag is used for inserting columns in the <table> tag.
The <colgroup> tag: The <colgroup> tag is used within the <table> tag to format a group of columns in a table.
The <table> tag: The <table> tag is used to display the data in tabular form.
The <td> tag: The <td> tag is used to define a cell in a table.
The <th> tag: The <th> tag is used to define a heading in a table.
The <tr> tag: The <tr> tag is used to define a row in a table.
The following example will demonstrate the use of all the tags in a <table > tag:
<table border="1"><caption>This is a caption</caption>
<colgroup span="3">
<col width="50"></col>
<col width="50"></col>
<col width="50"></col>
</colgroup>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td>First column</td>
<td>Second column</td>
<td>Third column</td>
</tr>
</table>
The output is as follows:
This is a caption| Heading 1 | Heading 2 | Heading 3 |
|---|
| First column | Second column | Third column |
The <form> tag and its elements:
The <fieldset> tag: The <fieldset> tag is used to draw a box around the form elements.
The <form> tag: The form tag is used to create the form for user input. The form itself is not visible, but the form elements such as textfields, drop-down menu, checkboxes etc. are visible.
The <input> tag: The input tag is used within the form tag to create the form elements for user input.
The <label> tag: The <label> tag is used to toggle a form element such as checkbox or the radio button.
The <legend> tag: The <legend> tag is used to define a caption for a fieldset.
The <optgroup> tag: The <optgroup> tag can be used for creating a group of elements in a drop-down list.
The <option> tag: The <option> tag is used to add options in a drop-down list.
The <select> tag: The select tag is used to create a drop-down list on a Web page.
The <textarea> tag: The <textarea> tag is used to create a multiple line text field on a Web page.
The <button> tag: The <button> tag is used to create the button object. The button can be a push button, submit button, or reset button.
The following example will demonstrate the use of the <form> tag and its elements:
<form><fieldset><legend>User data</legend><input type="text">
<input type="text"><input type="checkbox" id="c1"><label for="c1">Check 1</label><input type="checkbox" id="c2"><label for="c2">Check 2</label>
<select><optgroup label="Alphabets"></optgroup><option>A</option>
<option>B</option><option>C</option><optgroup label="Numbers"></optgroup><option>1</option><option>2</option>
<option>3</option></select><textarea rows="5" cols="5"></textarea>
<button>Click me</button> </fieldset></form>
The output is as follows:
The list tags:
The <li> tag: The <li> tag is used to define a list items. It can be used with the <ul> and <ol> tags. The following will demonstrate the use of the <li> tag:
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
The output is as follows:
<ol>
<li>item 1</li>
<li>item 2</li>
</ol>
The output is as follows:
- item 1
- item 2
