HTML Tutorials

Hyper Text Markup Language
HTML Tables


HTML Tables are very user friendly they are used to display a set of records from database or to create a good look for a form.Table is created using "table" tag and it also has the closing tag.

Table has the attribute of height,width,cellpadding,cellspacing and border.
Height is used to set the height of the table
Width is used to set the width of the table
Cellpadding is the space between the cell and the text of the cell
Cellspacing is the space between adjacent cells
Border is used to set the border of table

Table includes table row and table cell indicated as tr and td.
TH tag is used to define the heading of columns
TR tag is used to start a new row and dislpay the data
TD tag is used to define the data of cell

Example

<table border="1" cellpadding="0" cellspacing="0" width="100px" height="50px"><th>Name</th><th>Age</th><tr><td>abc</td><td>22</td></tr><tr><td>xyz</td><td>25</td></tr></table>

This results in following table

Name	Age
abc	22
xyz	25

For every next row the current row has to be closed and new row has to be opened


HTML Forms are used to pass data between client and server


These forms contains input fields like input text box,select box,text area any of these and more.



It is created using form tag with closing form tag as follows



<form name="form_name" method="post" action="url">



It takes name,method,action as its main parameters

Where name is the name of form,

method is the type of form as post or get

and action is the specified url to perform operations using the inout data



POST is used when data has to be hidden while passing between client and server

GET is used for small amount of data and when get is used the data is visible in the url.



HTML Form Elements




There are many HTML Form Elements as follows

1. Input Text Box
2. Password Text Field
3. Radio Buttons
4. Text area
5. Checkboxes
6. Submit Button

Input Text Box



This is used to get the input of user for name,age or city any data.



This is created as follows



<form name="form1"><input type="text" name="name_of_user" id="name_of_user"></form>







Password Field



This is used to get the password of user.




This is created as follows



<form name="form1"><input type="password" name="password_of_user" id="password_of_user"></form>







Radio Buttons



This is used to display an option for user among choices like male,female etc.



This is created as follows



<form name="form1"><input type="radio" name="sex" id="sex" value="m">male<input type="radio" name="sex" id="sex" value="f">Female</form>




maleFemale



Check Boxes



This is used to display an option for user among choices yes or no etc.



This is created as follows



<form name="form1"><input type="checkbox" name="ans" id="ans" value="y">Yes<input type="checkbox" name="ans" id="ans" value="n">No</form>



YesNo



Submit Button




This is used to submit form data to server to save them to database or manipulate them in any way.



This usedas follows



<form name="form1"><input type="checkbox" name="ans" id="ans" value="y">Yes<input type="checkbox" name="ans" id="ans" value="n">No<input type="submit" name="submit" value="Submit"></form>







This is used exclusively with forms which has n nunber of data to be processed.



Text area



This is used to get more data like address etc.




This is created as follows



<form name="form1"><input type="textarea" name="address" id="address" >



This is a text area



This takes rows and cols as its attributes where rows is the height of area and cols is the width of area









HTML Lists are used to list the contents in order.

HTML lists are of 3 types Ordered,Unordered,Definition list.



Ordered lists are created using "ol" tag which displays list items in ordered way of numbers.It also has closing tag.each list item is embeded inside opening and closing of "li" tag



The ordered lis may look like the following

1. Name
2. Age
3. Address

which is the output of following code



<ol><li>Name</li><li>Age</li><li>Address</li></ol>





Unordered lists are created using "ul" tag which displays list items in unordered way of bullets.It also has closing tag.each list item is embeded inside opening and closing of "li" tag




The ordered lis may look like the following

• Name
• Age
• Address

which is the output of following code



<ul type="square"><li>Name</li><li>Age</li><li>Address</li></ul>



The ul tag has following types

disc


square

circle



Definition lists are created using "dl" tag which displays list items as its description.It also has closing tag.each item is embeded inside opening and closing of "dd" tag which is a data description followed by "dt" which defines the item list.



The ordered lis may look like the following

Fruits

- apple

- orange

Laptops

- DELL

- HCL

which is the output of following code



<<dl><dt>Fruits</dt><dd>- apple</dd><dd>- orange</dd><dt>Laptops</dt><dd>- DELL</dd><dd>- HCL</dd></dl>




HTML doc allows to use images in the document these images can be any of the .jpeg,.jpg,.gif or .png format.

It uses img as its specification inside the open and <> close tag.

It has the attributes as height,width and also the style can be written for the image.

It has "alt" as its attribute which specifies the alternate text for the image

Example:

<img src="your-iamge-path/image-name" alt="testing"/>

Which will results in following

HTML Links are used to link the external file source like html or css files.

These files are specified in the href attribute and are embedded to the executing file.



It includes "rel","type","href" as major three parameters

"rel" indicates the relation of the external file as stylesheet or any other help files which has to be included.

"type" indicates the type of the file as text/css or text/javascript


"href" is the parameter to indicate the file name



Example



<link rel="stylesheet" type="text/css" href="style.css">



It also has the attributes as "target" which can be any of the following

_blank

_self

_top

_parent

frame_name


If _blank is specified it opens the url in new window