SmartSurat.com # Smart Education Zone

HTML code is included within angular brackets ( <and> ). Each such block of code is called a Tag.

Document Structure Tags

HTML pages are structured into three functional parts. Analyse the following page :

<TITLE> HTML Basics </TITLE>

</HEAD>

<BODY>

My First Web page.

</BODY>

</HTML>

HTML Tag ( <HTML> )

This tag is always at the top of the HTML page. It is closed with </HTML> at the end of the document. This tells the browser that all content between these tags is HTML content.

Head Tag ( <HEAD> )

This tag identifies the page heading and holds the title of the page. It is closed with </HEAD> before the main content of the page begins. In the sample code, it includes the title of the page. This title is what appears on the browser window. All document headers and meta tags are included in the Head section of the document. You can also include styles and client side JavaScript OR VBScript functions between these tags.

Body Tag ( <BODY> )

This tag indicates the body of the document. It is closed with </BODY> before closing the HTML tag. All content that is displayed on the client browser is included between these tags.

Text Formatting Tags

Various tags provide the infrastructure for formatting text and paragraphs. A few of the common ones are enlisted here.

Paragraph Tag ( <P> )

This tag is used to demarcate paragraphs. The paragraph begins with <P> and the end of the paragraph is closed with </P>. The paragraphs can be aligned to the left, right, center or justified using the align attribute. The paragraph tab adds a carriage return at the end of the paragraph.

Line Break Tag ( <BR> )

This tag is used to insert a line Break. It does not add any additional carriage return between the sections. This tag also does not require any closing tag.

Block Quote Tag ( <BLOCKQUOTE> )

This tag demarcates a quotation. The tag is terminated with </BLOCKQUOTE>. The text within these tags appears indented in relation to the paragraph.

Font Tag ( <FONT> )

This tag is used to set the font to be used to display the text. The tag is closed with </FONT>. The tag's attributes sets the font size and colour of the text between these tags. The FACE attribute sets the font to be used, the SIZE attribute sets its size and COLOR attribute sets its colour.

NOTE : That the font specified has to be present on the client's system for the browser to be able to display it. To work around this limitation, you can specify multiple font names, as illustrated above. The browser checks for these fonts from left to right and uses the first match. The Colour is specified using the HTML colour code or the name of the colour. Also, note that it is not necessary to specify all attributes for the tag. Whenever an attribute is not specified, the default or current text formatting is used.

Bold Tag ( <B> )

This tag is Used to embolden text. The tag is closed with </B>. Any text between these tags appears as bold text.

Italics Tag ( <I> )

This tag is used to italicise text. The tag is closed with </I>. Any text between these tags appears as italic text.

Underline Tag ( <U> )

This tag is used to underline text. The tag is closed with </U> . Any text between these tags appears underlined with a single line.

Strikethrough Tag ( <S> )

This tag is used to strike out text. The tag is closed with </S>. Any text between these tags appears struck out.

Typewriter Tag ( <TT> )

This tag is applies a mono-spaced font to the text. The tag is closed with </TT>. Any text between these tags appears in a fixed width font.

Pre-formatted Tag ( <PRE> )

Browsers always ignore more than one white space and line breaks in the text unless these are specified by using relevant HTML tags. The pre-formatted tag tells the browser that the text within this block is already formatted and should be displayed as it is in the document. The tag is closed with </PRE>.

Heading Tag ( <Hn> )

The heading tags apply pre-defined heading styles to text. the tag is opened with <H1>, <H2>,<H3>, etc., with the formatting relating to Heading 1, Hading 2, Heading 3, etc., respectively. Similar tags are used to close the heading tag. <H1> would be closed with </H1>.

Caption Tag ( <CAPTION> )

This tag creates a row. It is closed with </TR>. A row can hold a heading cell or a data cell. The ALIGN attribute specifies whether the row is aligned to the left, Right or Center. The BGCOLOR attributes sets the background colour filled into the cells of the row.

Table Heading Tag ( <TH> )

This tag creates cells that hold the headings of the across the top row or the left column, or both. It is closed with </TH>. The attributes for this tag are similar to those of the Table Data Tag.

Table Data Tag ( < TD> )

This tag creates cells that hold the data for the table. It is closed with </TD>. The cell can hold any kind of text or images. the ALIGN attribute specifies whether the row is aligned to the Left, Right or Center. The VALIGN attribute sets the vertical alignment to TOP, BOTTOM or MIDDLE. The COLSPAN attribute of this tag specifies how many columns a particular cell spans across. This is used to merge horizontally adjacent cells into one. Similarly, the ROWSPAN attribute of the table data tag specifies how many rows the cell spans across. This is used to merge vertically adjacent cells into one. The BGCOLOR attribute sets the background colour filled into the cell. The BACKGROUND attributes sets the image to be used as the background for the cell.

Forms

Forms provide the most basic form of interactivity between the user and the Web Applications. Forms provide the means for receiving user input in a structured format. Forms can contain different elements like text boxes, dropdown lists, list boxes, checkboxes, radio button, buttons, etc.

Form Tag ( <FORM> )

The Form tag specifies the area that the form covers and creates the container for all the elements of the form. It is closed with </FORM>. The attributes of the form tag define the name of the form, the way the data should be sent to the server and the page to which the data should be sent.

The ACTION attribute sets the page to be called when the form is submitted. Note that you can also specify the target where this page should be loaded, just like with the anchor tag. The form also has an OnSubmit event that is triggered when the form is submitted. You can call a JavaScript OR VBScript function for client-side processing when the event is fired. This is useful for client-side form validation.

When the form is submitted, a variable is created with each element's name and the element's value is assigned to it. These variables are sent to the page defined by the ACTION attribute. If no ACTION is specified, the current page itself is called. If METHOD is not specified, the GET method is used by default.

HTML (Hyper Text Mark-up Language)