1

Contents
Getting Started.. What is HTML? How to create and View an HTML document? Basic HTML Document Format The HTML Basic tags

Block Level Elements are used to define sections of text like paragraphs. Text level Elements are applied to smaller bits of text (which may be just a few words or a line).

The Font element is used for specifying various font style. THE SIZE Attribute THE COLOR Attribute THE FACE Attribute SIZE The SIZE attribute is represented as <FONT Size = value> .the valid value ranges from 1-7 and the default size is 3 Colour Attribute The colour atrribute changes the color of the text that will appear on the screen . The color can be set by giving the value as # rrgbb, a hexadecimal color value, or it can be set by giving the name of the color. Face Attribute This attribute sets the typeface that will be used to display the text on the screen pr ovided the typeface is already installed on the user machine.

< Font Size =5> changes the font size to 5 </FONT> <FONT SIZE = +2> changes the font size to <BASEFONT SIZE> +2</FONT >,or to 5 if no <BASEFONT SIZE > has been set . <FONT COLOR =#FF0000> This text is red </ FONT> or <FONT COLOR = red > This text is also red </ FONT> <FONT FACE = Arial , lucida Sans > This text will be displayed in either Arial , lucida Sans ,or Times Roman , depending on the fonts </ FONT>

This element is used to contain text quoted from another source . For Example:The poem ends <BLOCK QUOTE> DURING your times of trial and suffering When you have seen only one set of footprints It was then that I carried you </BLOCK QUOTE>

A directory list begins with <DIR> tag immediately followed the empty tag , <LI> , and the list item to be displayed . <DIR> <LI> A_ H <LI> I_ M <LI> M _ R <LI> S_Z </DIR>

The unordered list element is used to present s list of items , which is separated by white space or is marked by bullets. An unordered lists starts with the <UL> tag followed by the list item element represented by <LI> tag. For Example:<UL> < LI> First list item <LI> Second list item <LI> Third list item </ UL>

This element is used when an number of terms and definitions are to included in the html document . This container element comprises two other tags <DT> and <DD>, where DT stands for DATA TERM and DD stands for DATA Definition. Definition list can be created as follows: <DL> <DT> Term <DD> This is the definition of the first term. <DT> Term <DD> This is the definition of the second term. </DL>

The ordered list element is used to present a numbered list of items in the order of importance or the items are sorted by sequence. <OL> <LI> Click the web button to open the url window <LI> Enter the url number in the text field of the open URL window. The Web document you specified displayed. <LI> Click highlighted text to move from one link to another. </OL>

It is used to create a divider between sections of text. Its attributes are as follows:<hr size=3 width=70% align=right color=#ff55ff>

The marquee element allows the author to create a scrolling text marquee. It attributes are as follows:-

1) Align:- This attribute can be set to Top, Middle or

Bottom and specifies that the text around the marquee should align with the top, middle or bottom of the marquee. 2) BgColor Attribute :- This specifies the background color for the marquee, either a #rrggbb or directly by color name. 3) Direction Attribute:- This attribute specifies the direction in which the text will scroll. The default is Left. 4) Height and Width Attribute:- This specifies the height and width of the marquee which u can specify directly by number or in percentage.

5) Loop Attribute:- Number of times it should be repeated. If n= -1 or Loop-Infinite is specified then the marquee will loop infinitely. For example:<marquee height=50 width=50 loop=3 bgcolor=blue Direction=right>

Information Type Elements

This element is used when a document contains a citation that is displayed in a font different from the normal text. For Example:This sentence contains a <cite> citation reference </cite>

The comment element is used when the user needs to include comments in an HTML document that will not be displayed on the screen. This element is written as <!--

Character Formatting Elements

Need For Forms:Forms are used to build interactivity in the web page. Forms may be used to get the feedback from the surfer, complete a transaction etc. A form is a collection of data in specified fields. The fields are of various types like radio buttons, text boxes, pull down menus etc. A field in the form is called controls.

The server level program, which receives the data submitted from the form and processes it is called a CGI(Common Gateway Interface). CGI are of two types CGI Programs and CGI Scripts. If you use a script like Perl, AppleScript which runs on the web server, then you can create a CGI Script. If you use a programming language like C, C++, Java then you can create a CGI program.

Form Tag
The <FORM> tag is a block level element and it creates a form area. It is not empty tag set. The attributes that the <FORM> tag takes are: 1) Action: This is used to specify the email address to which the information is to be sent or the URL of the CGI program which will use and process the form information. 2) Method: This specifies that the information filled in the form should be posted to the URL which is given in the ACTION method. It may be through GET and POST. The default is GET. 3) GET is used to append the arguments to the action URL and open in it as if were an anchor. POST sends the data through the HTTP post transaction.

INPUT TAG
1) TEXT: These is used to create a single line text
boxes. It is used to accept name, addresses etc.The width is specified in the size attribute. <FORM MATHOD=GET ACTION=http://ABC.COM> Enter your first name: <INPUT TYPE= TEXT NAME=FIRST SIZE=15> </FORM>

2) PASSWORD: It is used to accept the password from the user. <FORM METHOD=GET ACTION=HTTP://ABC.COM> Enter your password: <INPUT TYPE=PASSWORD NAME=CREDIT> </FORM> 3) Checkboxes: A checkbox is just an empty box by default. You type your label next to the checkbox. Checkboxes are used to provide the user with multiple options for a particular field. E.g. If you want the user to select the favourite hobbies from a list of hobbies, provided a checkbox.

A table can contain not only text data, but also lists, forms, images, paragraphs, preformatted text etc. It is possible to nest tables within one another. In tables there are rows and columns. It is a non empty tag set. The <TABLE> tag is used. Its two other associated tags are <TR> and <TD> <TR> This is the Table Row Element and creates a horizontal row of cells. <TD> Table Data Element. It specifies each individual cell in the table. <TH> Table Heading.

<HTML> <HEAD> <TITLE> CREATING TABLES</TITLE> </HEAD> <BODY> <TABLE> <CAPTION> ANIMALS AND THEIR YOUNG ONES </CAPTION> <TR> <TH>SR.NO</TH> <TH>ANIMAL</TH> <TH>YOUNG ONE</TH> </TR>

<TR>
<TD>1.</TD> <TD>DOG</TD> <TD>PUPPY</TD> </TR> <TR> <TD>2.</TD> <TD>CAT</TD> <TD>KITTEN</TD> </TR> </TABLE> </BODY> </HTML>

The <CAPTION> tag takes the attribute ALIGN, which is used to create the caption at the top or bottom of the table. Its attributes are as follows:TOP or BOTTOM The default value is TOP <CAPTION ALIGN=TOP> Animals and their young ones </CAPTION>

1)
2) 3)

4)

5)

Align attribute: Left, Right and Center. <TABLE ALIGN=CENTER> Width Attribute: It may be in numbers or percentage. Border Attribute: Default border value is one pixel. The border attribute will set the border only to the outside table border and not the individual cells. Cell Spacing: specify the spacing between table cells. <TABLE CELLSPACING=5> will create a space of 5 pixels between the adjacent cells. Cell Padding: It is useful to create space between the border of the cell and the cell data.

Cell spanning is used to merge the cells i.e. rows and columns. The ROWSPAN and COLSPAN attributes are used to merge or span cells. For example: <tr align=center> <td rowspan=2> Animals <td>cat</td> <td>kitten</td> </tr <tr align=center> <td> Animals <td>dog</td> <td>puppy</td> </tr>

The non cell table attributes are as follows:Rules Attribute:

Value NONE ROWS COLS ALL columns. Effect There will be no rules i.e. cells without borders. This is the default value. Rules will appear between columns only. Rules will appear between all rows and all

Frame Attribute: This attribute is useful to add individual border elements or sids to a table. Value Effect ABOVE The top side only. BELOW The bottom side only. BORDER All the four sides. BOX All the sides same as FRAME=BORDER HSIDES Only the horizontal i.e. top and bottom VSIDES Only the vertical i.e. left and right LHS Only the left hand side RHS Only the right hand side VOID No Sides. This is the default value.

<html> <head> <title>nesting tables</title> </head> <body> <table align=center width=50% border=2> <caption> Animals, birds and their young ones </caption> <TR><TD>

<table border cellspacing=2> <tr align=center> <td bgcolor=pink rowspan=2>Animals <td>cat</td> <td>kitten</td> </tr> <tr align=center> <td>dog</td> <td>puppy</td> </tr> </table> </td> <td>

<table border cellspacing=2> <tr align=center> <td bgcolor=pink rowspan=2>birds <td>goose</td> <td>gosling</td> </tr> <tr align=center> <td>duck</td> <td>duckling</td> </tr> </table> </td> </tr> </table></body></html>