Scribd
Upload
15 views7 pages

1 - Lab Giude HTML

The document provides steps to create tables, forms, and other elements in HTML. It includes examples of code to generate tables with various attributes, forms to collect user input, and interfaces for a courier delivery system. Readers are guided through steps to practice basic and advanced HTML skills.

Uploaded by

nisaakmarjamal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views7 pages

1 - Lab Giude HTML

The document provides steps to create tables, forms, and other elements in HTML. It includes examples of code to generate tables with various attributes, forms to collect user input, and interfaces for a courier delivery system. Readers are guided through steps to practice basic and advanced HTML skills.

Uploaded by

nisaakmarjamal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Lab Guide for HTML

Assignment 1: Creating Tables in HTML

Step 1: Type the following code into an html file and save it as “table1.html”.

<!-- Comment: border= “2”, specifies the border width of the table -->
<table border = “2”>
<tr>
<!-- Comment: Tag <th> is for giving a table heading -->
<th> Name </th> <th>Empno</th>
</tr>
<tr>
<td>Jack</td><td>1001</td>
</tr>
<tr>
<td>Jack</td><td>1001</td>
</tr>
</table>

Step 2: Change the border attribute value to “0” and observe what will be the output?
Step 3: Change the table tag to <table border = “2” width= “50%”>
Step 4: Right click on the desktop, select properties menu and setting tag. Find out the
resolution of your PC. (It may be 1024 x 768 pixels)
Step 5: Include a background color for the table. Can you? Save the file as
“tablecolor.html”. <table border = “2” width= “50%” bgcolor= “#CDCA8F”>
Step 6: If it possible to add a background color, try to give a background image for the
table and save the file as “tablebackground.html”.
<table border = “2” width= “50%” background= “s1.jpg”>
Step 7: Include a background color for a particular row.
Hint: Use bgcolor attribute for the <tr> tag.
Step 8: Increase the space between tow cells and save it as “tablespace.html”.
<table border = “2” width= “50%” cellspacing= “10”>
Step 9: Increase the space between the cell and the content.
<table border = “2” width= “50%” cellpadding= “20”>
Step 10: Can you give some color and size for the table elements?
Hint: Use <font> inside a <td> tag. Use CSS for avoiding the repetition of the
HTML tag for providing style.
Step 11: Create the HTML table and save it as “tablespan.html”.

Marks

Sec A Sec B Sec C

<table border= “2” width=”90%” cellpadding= “10” bordercolor= “blue”>


<tr>

1
<!-- Comment: colspan = “3” indicates that the table heading Marks will span three
columns -->
<th colspan= “3”>Marks</th>
</tr>
<tr>
<td>Sec A</td><td>Sec B</td><td>Sec C</td>
</tr>
</table>

Step 12: Create the following HTML table and save it as tablelayout.html

Table Layout Demo


· Home Table are used in websites
· About us for two major purposes.
· Festivals 1. The primary purpose of
· Search arranging information in a
· Contact table.
2. The more widely used
purpose of creating a page
layout with the use of
hidden tables. (border
attribute values set to “0”)

Hint: the above webpage created using a table with one row and three columns. The
border of the table is invisible to the users.

The <center> tag is used align the content to the center of the container. The width
attribute of the <td> tag used to specify the width of the column and valign tag is used to
align the content vertically in a cell. The valign values are top, middle, bottom and
baseline.
1. Replace the first cell content with unordered list of hyper links.
2. Replace the second cell content with an image.
3. Replace the third cell content with a paragraph.

Assignment 2: Creating Interactive form using HTML

Step 1: Type the following code into a HTML page and save it as “login.html”.

<h3> Login Screen</h3>


<!-- Comment: form elements should be inside a form tag -->
<form name= “f1” method= “post” action= “login.php”>
<!-- Comment: size attribute specifies the size of the text box -->
User name<input type= “text” name= “username” size= “20”<br><br>
<!-- Comment: password is similar to text, but display only “*” -->
Password<input type= “password” name= “usepwd” size= “20”> <br><br>
2
<!-- Comment: submit button used to submit the form to the server -->
<input type= “submit” value= “Submit” name=”sub”>
<!-- Comment: reset button used to reset the form elements to the default value -->
<input type= “reset” value= “Reset” name= “res”>
</form>

Verify your output.

The following module is used to generate distribution list for the Nationwide courier
(You will be using this GUI as part of your Project).

Step 2: Create a HTML page named “DistributionList.html” to select the date from the
customer with the following field.

Field and Description


1. Distribution List Date

Button and Description


1. Submit
2. Reset

The output may appear as below:

Step 3: The following module is used to accept order fro the Nationwide courier. (You
will be using this GUI as part of your Project).

Create a HTML page named “AddOrder.html” with the following fields.

3
Input fields:
1. Customer ID
2. Order Date
3. Recipient Name
4. Recipient Address
5. Recipient City – ‘Terengganu’, ‘Kelantan’, ‘Pahang’, ‘Selangor’
6. Weight of Parcel
7. Courier Description

Button and Description


3. Submit
4. Reset

The output may appear as below:

Step 5: The following module is used to deliver the order in Nationwide. (You will be
using this GUI as part of your Project).

Create a new HTML page named “CourierDelivery.html”.

4
Input fields:
1. Order ID
2. Delivery Date
3. Status – ‘Pending’, ‘Delivered’, ‘Rejected’.
4. Description

Button and Description


5. Submit
6. Reset

The Output may appear as below:

5
Assignment 1

6
Assignment 2

You might also like