TABLES Creating Tables: The TABLE tag needs to bracket your table.

All other tags or text included in your table should nest inside the TABLE tag. Example: <HTML> <HEAD> <TITLE> TABLE </TITLE> </HEAD> <BODY> <TABLE> …….. </TABLE> </BODY> </HTML> Web Development & Resource Mgmt. 1

Creating Columns and Rows The TR (Table row) and TD (Table Data) tags are used to create a grid of rows and columns. Example: <TABLE> <TR> <TD> 1 </TD> <TD> IIPM </TD> <TD>AHMEDABAD </TD> <TD> GUJARAT </TD> </TR> <TR> <TD> 2 </TD> <TD> IIPM </TD> <TD> NEW DELHI </TD> <TD> DELHI </TD> </TR> </TABLE>
Web Development & Resource Mgmt. 2

Adding a Border: By default, the table does not contain a border. To include a border to the table, specify a BORDER attribute inside the TABLE tag. Example:
<TABLE BORDER=“1”> <TR><TD>1</TD><TD>IIPM</TD><TD>AHMEDA BAD</TD><TD>GUJARAT</TD> <TR><TD>2</TD><TD>IIPM</TD><TD>NEW DELHI</TD><TD>DELHI</TD> </TABLE>
Web Development & Resource Mgmt. 3

Adding Column Heading The TH (Table heading) tag is used to define a “cell” as a heading rather than as an ordinary data cell. To create the heading (column headings) at the top of the table, first create a row using the TR tag and then, use the TH tag to define the cells instead to using the TD tags. Example:
<TABLE BORDER=“1”> <TR><TH>ROLL NO</TH><TH>FIRST NAME</TH> <TH>LAST NAME</TH><TH> FEES PAID</TH></TR> <TR><TD>1</TD><TD>ADITYA</TD><TD>SING H </TD></TR> Web Development & Resource Mgmt. 4 </TABLE>

Changing font sizes and colours The FONT tag allows you to specify the size and color of a section of a text. Setting Font Sizes The Font tag uses the SIZE attribute to change the size of a font. You can set font sizes using absolute or relative size values. Setting Absolute Font Sizes There are seven “absolute” (or fixed) sizes, numbered from 1 to 7, that you can set using the SIZE attribute of the FONT tag. The default is 3, which is the same as regular paragraph Web Development & 7 is the 5 text; 1 is the smallest andResource Mgmt. largest.

Example:
<BODY> <P> <FONT SIZE=“1”> Font Size 1. </FONT><BR> <FONT SIZE=“2”> Font Size 2. </FONT><BR> <FONT SIZE=“3”> Font Size 3. </FONT><BR> <FONT SIZE=“4”> Font Size 4. </FONT><BR> <FONT SIZE=“5”> Font Size 5. </FONT><BR> Web Development Resource Mgmt. <FONT SIZE=“6”> Font&Size 6.

6

Setting Relative Font Sizes You can set “relative” font sizes. Relative font size changes are indicated by either a plus (+) or (-) sign preceding the SIZE attribute value. For instance, FONT SIZE=“+1” indicates a font size that is one size larger than the base font. Example: <P> <FONT SIZE=“-2”>Font Size -2. Web Development & Resource Mgmt. 7 </FONT>

Changing the FONT Color The FONT tag uses the COLOR attribute to change the color of a font. Setting the Font Color Using Color Names: You can use any one of 16 color names to specify a font color. Besides black and white, you also can specify aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal and yellow. Example: <P><FONT SIZE=7> <FONT COLOR=“AQUA”> You can use any one of 16 color names to specify a Web Development & Resource Mgmt. 8 font color.

Creating Hypertext Links We use the A (Anchor) tag to anchor one or both ends of a hypertext links. We use the HREF (Hypertext Reference) attribute to specify the URL or address of the “object” of the link.
Syntax: <A HREF="http://www.mail.yahoo.com">Linkin g to another page or file </A>
Web Development & Resource Mgmt. 9

ALIGNING the contents in the TABLE
<BODY> <TABLE border="1"> <TR> <TH ALIGN=“LEFT">Money spent on....</TH> <TH ALIGN=“RIGHT">January</TH> <TH ALIGN=“RIGHT">February</TH> </TR> <TR> <TD ALIGN=“LEFT">Clothes</TD> <TD ALIGN=“RIGHT">RS. 241.10</TD> <TD ALIGN=“CENTER">RS. 50.20</TD> </TR> </TABLE> Web Development & Resource Mgmt. </BODY>

10

Nesting Of Tables and List
<table border="1"> <tr> <td> <p>This is a paragraph <p>This is another paragraph </td> <td>This cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table>
</td> </tr>
Web Development & Resource Mgmt. 11

<tr> <td>This cell contains a list <ul> <li>apples <li>bananas <li>pineapples </ul> </td> <td>HELLO</td> </tr> </table>

Web Development & Resource Mgmt.

12

Back Ground Color and Back Ground Image in a Table
<html> <body> <h4>A background color: </h4> <table border="1" bgcolor="red"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
Web Development & Resource Mgmt. 13

<h4>A background image:</h4> <table border="1" background="bgdesert.jpg"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> Web Development & Resource Mgmt. </html>

14

Forms Form elements are elements that allow the user to enter information (like text fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. <form> <input> <input> </form>
Web Development & Resource Mgmt. 15

Input The type of input is specified with the type attribute. The commonly used input types are: •Text Fields •Radio Buttons •Checkboxes
Web Development & Resource Mgmt. 16

Text Fields Text fields are used when you want the user to type letters, numbers, etc. in a form. <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" Web Development & Resource Mgmt. 17 name="lastname">

Radio Buttons Radio Buttons are used when you want the user to select one of a limited number of choices. <form> <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female </form>
Web Development & Resource Mgmt. 18

Checkboxes Checkboxes are used when you want the user to select one or more options of a limited number of choices. <form> I have a laptop: <input type="checkbox" name=“technology" value=“laptop"> <br> I have a mobile: <input type="checkbox" name=“technology" value=“mobile"> <br> I have an ipod: <input type="checkbox" name=“technology" value=“ipod"> </form>
Web Development & Resource Mgmt. 19

Form's Action Attribute and the Submit Button When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. <form name="input" action="html_form_action.asp"> Username: <input type="text" name="user">
Web Development & Resource Mgmt. <input type="submit" value="Submit"> 20

Password <form> Username: <input type="text" name="user"> <br> Password: <input type="password" name="password"> </form>
Web Development & Resource Mgmt. 21

Dropdown box <form> <select name=“bikes"> <option value=“Hero Honda">Hero Honda</option> <option value=“Honda">Honda</option> <option value=“Yamaha">Yamaha</option> <option value=“Pulsar">Pulsar</option> </select> </form>
Web Development & Resource Mgmt. 22

Fieldset around data <fieldset> <legend> Personal Data: </legend> <form action=""> Name <input type="text" size="3"> Age <input type="text" size="3"> </form> </fieldset>
Web Development & Resource Mgmt. 23

Textarea <textarea rows="10" cols="30"> The Indian Institute Of &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp Planning & Mgmt. </textarea>

Web Development & Resource Mgmt.

24

Character Entities A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;). To display a less than sign in an HTML document we must write: &lt; or &#60;

Web Development & Resource Mgmt.

25

Common Character Entities: &nbsp; &lt; &gt; &amp; &quot; &copy; &reg;

Web Development & Resource Mgmt.

26