HTML Tags

HTML COMMENTS

HTML comments start with <! -- And end with -->. Each and every thing written within these characters will be ignored by the browsers. These are used to explain the purpose the HTML tags used in the documents. It can be used anywhere in the document. Following is the general syntax:-

<! -- comment text -->

TEXT FORMATTING

PARAGRAPH

HTML provides a <p> tag, which is used to start a new paragraph, escaping one line between new line and previous line. Following is the general syntax:-

<p> this is a new paragraph </p>

HEADING

A web page contain different heading with different sizes, color and fonts. HTML provides different tags for such headings. There are 6 levels of headings h1 to h6, where h1 is the largest in size and h6 is the smallest.

<h1> heading 1 </h1>

<h2> heading 2 </h2>

<h3> heading 3 </h3>

<h4> heading 4 </h4>

<h5> heading 5 </h5>

<h6> heading 6 </h6>

LISTS

It is the collection of one or more items. There are three types of lists.

1.  UNORDERED LISTS – These are created using <ul> tag and each list of items start with <li> tag. Some of the bullet option for <ul> tag are- “disc”, “circle”, “square”.

For e.g. –

<ul>

<li> item 1 </li>

<li> item 2 </li>

<li> item n </li>

</ul>

2.  ORDERED LISTS- These are created using <ol> tag and each list of items start with <li> tag. Some of the numbering options for <ol> tag are- “1”,”A”,”I”.

For e.g. –

<ol>

<li> item 1 </li>

<li> item 2 </li>

<li> item n </li>

</ol>

3.  DEFINITION LISTS – It consists of two parts: a term and its definition. It is created using <dl> tag, term part by <dt> tag and definition part by <dd> tag.

<dl>

   <dt> 1^st term </dt>

   <dd> 1^st definition </dd>

   <dt>  nth term </dt>

   <dd> nth definition </dd>

   <dl>

ADVANCED TAG

TABLE

A table is a two dimensional matrix consisting of rows and columns. It is powerful tool for formatting the web pages it is created using three basic tags-<table>…</table>, <tr>…</tr>, <td>…</td>. All table related tags are included between the <table> and </table> tags. Each row of table is described between the tr tag, and each column is described in the td tag.

HTML Table tags:-

Tag	Meaning
Table	Represents the whole table
Tr	Represents a row
Td	Represents a cell in a row
Th	Column header
Caption	Title of the table

The attributes of table tags are following:-

Align	Manage the horizontal alignments, which can be LEFT,CENTER,RIGHT
Valign	Manage the horizontal alignments, which can be TOP,MIDDLE,BOTTOM
Width	Sets the width of a specific no or pixels
Border	It controls the border to be placed around the table
Cellpadding	It controls the distance between the data in cell and the boundaries of the cell
Cellspacing	Control the spacing between adjacent cell
Colspan	It is inserted inside a <th> or <td> tag, which instruct the browser to make the cell defined by the tag to take up more than one column
Rowspan	It works in same as the Colspan except that it allows a cell to take up more than one row.

Forms

Form tag is important as it creates a section in the html document. It is used to collect the information from the user, it also contains special elements called controls. The forms are created using <form>…</form> tag. Following is the syntax of form:-

<form>

Form elements, markups and other contents are specified here

</form>

Form elements

Data in a form are collected using different types of control element. The control elements are created using <input> tag. There are 10 input types.

1.  Text field-it is used to get single line textual data

<input type=”text” value=”n1”>:Name

Output-

U.K Roy

 :Name   

2.  Password field-It is similar to text field but the characters entered are represented by dots or asterisks. It allows to hide information from others.

 <input type=”password” value=”p1”>:Password

Output-

********

 :Password    

3.  Hidden field- These are not displayed by the browser and users can never interact with them. The users can see the field by viewing the source code.

<input type=”hidden” name=”userid”> value=”U.K Roy”>

4.  Label- It is used to add a label to a form field.

<label for=”Marriage”>

</label>

Output-

Marriage

5.  Checkbox-It is like a toggled switch which is checked or unchecked. It allows user to select one option from set of alternatives.

Which of the following items do you have-

 <input type=”checkbox” value=”c1”>Car  <br>

<input type=”checkbox” value=”c2”> COMPUTER <br>

 <input type=”checkbox” value=”c3”>CAMERA  <br>

Output-

Which of the following items do you have-

ð       Car

ð       COMPUTER

ð       CAMERA

6.  Radio button- It allows user to select one option from set of alternatives.

Gender:

<input type=”radio” name=”r1”>male<br>

<input type=”radio” name=”r1”>female<br>

Output-

Gender-

o   Male

o   Female

7.  Selection list- It is a group of radio buttons or checkboxes which allows user to select one option from set of alternatives.

Gender:

<select>

<option> male

<option> female

</select>

8.  Text area- It is the extension of text field and used to enter large amount of text.

Comment:

<input type=”textarea” rows=”4” cols=”10”>

Enter your comment here...

Output-

Comment:

Enter your comment here...

9.     Button-

·        Submit button-

<input type=”submit” value=”send”>

·        Reset button-

<input type=”reset” value=”restore”>

·        Image button-

<input type=”image” src=”a.jpg”>

10.               File upload- It allow to upload more than one file. These file can be either image, text or other files.

<form action=”upload.jsp” method=”post”>

</form>