Scribd
Upload
114 views8 pages

IS221 Lab3 PDF

This lab activity focuses on using XHTML elements like tables and divisions to layout a web page. Students will create a web page that displays information from an IS221 document. The page will have a two-column layout with a side navigation menu and main content area. Students will add tables, images, headings, and lists to structure the content and links to create the menu. The completed page should resemble a provided screenshot.

Uploaded by

Lagilava Paulo
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
114 views8 pages

IS221 Lab3 PDF

This lab activity focuses on using XHTML elements like tables and divisions to layout a web page. Students will create a web page that displays information from an IS221 document. The page will have a two-column layout with a side navigation menu and main content area. Students will add tables, images, headings, and lists to structure the content and links to create the menu. The completed page should resemble a provided screenshot.

Uploaded by

Lagilava Paulo
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/ 8

IS221 - Web Applications Development

Lab 3: XHTML Page Layout - Tables, Divisions and Navigations

Note:
It is recommended that students go over this lab handout and come prepared before attending the
lab class.
This will help students complete the lab activities within the allocated time, and without much
difficulty. Complete any Pre-lab activities before starting with this lab activity.

Please also carry a USB Flash disk with you to the lab class. It is recommended that you save off
all your work onto your flash disk.

In this lab
This lab activity will focus on the XHTML elements that affect the web page layout. The exercise for
this week will require you to create a web page for a document that exists in a different format.

You will gain practice:

Lab 3 1/8
Creating web page layout using <table>s and <div>s
Displaying data in tabular form in XHTML
Using tables for web page layout
Creating a simple navigation menu

Background
The following links contain useful information that will help student’s with this week's lab activities:

w3schools.com (http://www.w3schools.com/)
XHTML 1.0 Tag Reference (http://www.w3schools.com/tags/default.asp) W3C
Markup Validation Service (http://validator.w3.org)

Within this lab, we will attempt to build tables and sections in XHTML. The basic structure of the table
in (X)HTML is divided into rows, with each row consisting of data cells. In addition to traditionally
presenting data in rows and columns, the grid system in tables plays a worthy role in managing the
layout of web based documents.

Lab Objectives
To use tables to define web page layout
To display data in a tabular form in XHTML
To create sections using divisions
To create simple graphical menus using hyperlinks

Lab Requirements
Text Editor: Notepad++ (Recommended) or Notepad
We need a Text editor like Notepad++ to write our HTML code
Web Browser: Mozilla Firefox or Internet Explorer or Google Chrome, etc
A Web browser is needed to view the resulting output of the web page created
USB Flash disk/cloud storage
Please save off all your work onto your external storage device
Notebook or Writing pad
Keep a writing pad handy so that you can note down any important points covered
during the lab class

Lab 3 2/8
XHTML 1.0 Transitional Document Structure
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-US">


<head>
<title>Title goes here...</title>
</head>

<body>
Content goes here...
</body>
</html>

XHTML Syntax Rules


<!DOCTYPE> is Mandatory
XHTML elements (tags) must be in lowercase
Attribute names must be in lower case
Attribute values must be quoted
All XHTML elements must be closed
XHTML elements must be properly nested
The id attribute replaces the name attribute
XHTML documents must be well-formed
Attribute minimization is forbidden

Activity: Creating the IS221 web page


In this activity you will attempt to create a web page to show the information contained in the
IS221.docx file. Your web page will have the following layout:

Lab 3 3/8
1. Create a copy of the Lab2 folder and rename it to Lab3.
2. Save and extract the lab3files.zip file onto the Desktop
3. Copy all the files from the extracted folder and save them into the images folder in Lab 3.
4. Open a new file in Notepad++ and save it as IS221.html.
5. You will create a XHTML 1.0 Transitional page.
Begin with the basic XHTML document structure. The XHTML 1.0 Transitional DOCTYPE is
given below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6. Put IS221 – Web Applications Development as page title.
7. Now create the header section for the IS221 web page using the <div> tag.

Add the <div> tag just after the opening <body> tag.
8. Put an <img> tag to display the usp_logo.jpg image inside the division created.
9. After the USP logo, add IS221 – Web Applications Development as heading 2.
10. Save and view your work in a web browser.
11. Next, add a table to the page with the following specifications:

Tables take the following structure in XHTML:


<table>
<tr>
<td>Row 1, Column 1</td>
</tr>
</table>

This will divide the page into two columns. We will use the left column as the menu section and the
right column as the main content area for the page.

Creating Graphical Menus


1. Set the width of the first <td> in the table to 100 pixels.
2. Next add a hyperlink to the About Me web page that you had previously created.
Write the following code inside the <td>...</td> tag to create a graphical hyperlink to the
aboutme.html file.
<a href="aboutme.html"><img src="images/aboutme.gif" alt="About Me" /> About
Me</a>

3. Save your work and view the result of the code thus far in the browser.
4. Now add two other links to the menu section using the following specs:

Lab 3 4/8
Display Text URL image
USP http://www.usp.ac.fj home.png
XHTML Activity2.html xhtml.gif

5. Set the border attribute of the <img> tags to 0.


6. Add line breaks to put each hyperlink on a new line.

Filling in the Main Content Area


1. In the second <td> of the main table create another table with 1 Row and 2 Columns.
2. Set the width of the first <td> in this table to 80 pixels.
3. Enter Course: inside the first <td>...</td> tag. Enter IS221 – Web Applications
Development inside the second <td>...</td> tags.
4. Save your work and view the result in the browser.
5. Following the previous steps, complete the table to achieve a layout similar to:

and then change the data elements.


6. After completing the previous table, add Lecture Schedule with level 3 heading.
7. Now add another table with a border of 1 pixel and a width of 400 pixels. Fill in the details of
the table to get a result similar to:

8. Use <th> tag for table headings


9. Save your work and view your page on the browser it should look similar to the following
screenshot.

Lab 3 5/8
Achieving a 2-Column Layout
In this section you will use a table to divide the page into a two-column layout.

1. Add Course Description as a level 3 heading.


2. Now add another table of 1 Row and 2 Columns. Set the width to 90% and there will be no
border for the table.
3. Copy the first paragraph under Course Description from the IS221.docx document and paste it
between the first <td>...</td> tag.
4. Copy the second paragraph from the IS221.docx document into the second <td>...</td>
tag.
5. Add a final level 3 heading for Learning Outcomes.
6. Create an ordered list and list the learning outcomes stated in the document.
7. Save your work and refresh the browser to view the updated web page.

The completed page will look similar to the following screenshot.

Lab 3 6/8
1. Add a horizontal rule after the end of the main table.
2. Use a division for the footer section. Put a <div>...</div> tag after the horizontal rule.
3. Add another horizontal rule after the division. The horizontal rules will act as "borders".
4. Create the same three hyperlinks inside the <div>...</div> that you created in the
Creating Graphical Menus section.

You can simply copy and paste the code from that section.
5. Ensure that all the links are on the same line. Use can use nbsp; to put spaces between the
links.
6. Verify that your page validates using the W3C's Markup Validation Service. Correct and fix any
errors, if necessary.

Lab 3 7/8
Compare the results of your web page with the screenshot given in the previous section. Ensure that
all the links in the navigation menu are working correctly. Note that you have now successfully
created your very first website!

Lab 3 8/8

You might also like