Pages

Thursday, July 8, 2010

:: HTML Elements Part 10 ::

HTML Lists

HTML Lists offers authors several mechanisms for specifying lists of information. All lists must contain one or more list elements.

For example

<html>
<head>
<title> The tenth lesson </title>
</head>
<body>
<br>Unordered List
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<br>Ordered List
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
<br>Definition List
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>

Lists may contain:
  • Unordered information.
  • Ordered information.
  • Definition information
HTML Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.The list items are marked with bullets (typically small black circles).

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.The list items are marked with numbers.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

HTML Definition Lists

A definition list is a list of items, with a description of each item.The <dl> tag defines a definition list.The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list):

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Conclusion


HTML List Tags

Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines an item in a definition list
<dd> Defines a description of an item in a definition list


Wednesday, July 7, 2010

:: HTML Elements Part 9 ::

HTML Forms

HTML Forms are used to pass data to a server. The most important form element is the the input element. The input element is used to select user information. An input element can be vary in many ways depending on the type attribute. An input element can be of type text field, checkbox , password, radio button, submit button and more. A form can also contain select lists , textarea, fieldset, legend and label elements.There are many attributes of form syntax such as name, method, action .

For example


<html>
<head>
<title> The nineth lesson </title>
</head>
<body>
<form name=”student” action=”student.php” method=”post” >
Input elements
</form&gt;
</body>
</html>

Input elements

Input elements are very important to select user information. Normally, these input elements will be send to server side. The server will take action whether to save the information or display information of users.There are many input elements can be added in HTML Forms. Several of them are textfield, checkbox, password, radio button, submit button and more.

Textfield

Textfield allow user to enter text into one-line input field.

<form>
First name : <input type =”text” name=”firstname”/>
</form>

Checkbox

Checkbox element allow user to select ONE or MORE options of a limited number of choices.

<form>
<input type ="checkbox" name="vehicle" value="Mawar" /> Mawar <br/>
<input type ="checkbox" name="vehicle" value="Teratai" /> Teratai <br/>
</form>

Password field

Password field almost same to the textfield. But when user enter text into one-line input filed, it will display in asterisk character.

<form>
Password : <input type =”passwordt” name=”pass”/>
</form>

Radio button

Radio button allow user to select ONLY ONE option of a limited number of choices.

<form>
<input type ="radio" name="sex" value="male" /> Male <br/>
<input type ="radio" name="sex" value="female" /> Female <br/>
</form>

Submit button

Submit button allow user to pass user information to server side.

<form>
<form name=”student” action=”student.php” method=”post” >
Username : < input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

Drop down list

Drop down list allow user to choose one of many options.

Below is the simple example drop down list.

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

Below is the simple example drop down list with a pre-selected value.

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

Textarea

Textarea allows user to write unlimited number of characters. This textarea will be add in HTML Forms.

<textarea rows="10" cols="30"> The cat was playing in the garden. </textarea>

Conclusion.

HTML Form Tags

Tag Description

<form>

Defines an HTML form for user input

<input />

Defines an input control

<textarea>

Defines a multi-line text input control

<label>

Defines a label for an input element

<fieldset>

Defines a border around elements in a form

<legend>

Defines a caption for a fieldset element

<select>

Defines a select list (drop-down list)

<optgroup>

Defines a group of related options in a select list

<option>

Defines an option in a select list

<button>

Defines a push button


:: HTML Elements Part 8 ::

HTML Tables

HTML Tables uses <table> tag.A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td&gt; tag can contain text, links, images, lists, forms, other tables, etc. Remember , you need to specify border attribute.If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show.

Below is the simple example of table with border.

<html>
<head>
<title> The eighth lesson </title>
</head>
<body>
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>

You can also put header in the table. Header information in a table are defined with the <th> tag.The text in a th element will be bold and centered.

For example :

<html>
<head>
<title> The eighth lesson </title>
</head>
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>

There are other attributes can be put together in table syntax.

Attribute
Description
cellpadding
Give tables a little extra space between the border of the cell and the text
cellspacing
Give tables a little extra space between the cells of a table
colspan
Merge two colums
rowspan Merge two rows

For example

<table border= "1" cellpadding="10">

In conclusion,the HTML Tables requires start and end tags.This syntax can be added in body section.

Forget to put end tags , will make your table not created.