Official (Closed) - Non Sensitive

Page 1 of 6

Fundamentals of Computing Week 2

Polytechnic Foundation Program
2022/23 Semester 2 Session 2
Practical 2 – HTML Attributes, Tables & Text Formatting

OBJECTIVES

At the end of this exercise, you should know:

 How to use HTML attributes

 How to create tables
 How to format text

REFERENCES

 http://www.w3schools.com/html/

SUBMISSION

 Create a folder, Week02 in your FC folder in MS Teams.

 Download the file index.html from BrightSpace and save it in the Week02
folder created above.
 At the end of the session, copy the Week02 folder (which contains all your
work) to your FC folder in MS Teams.

ACTIVITIES

Notes:
 Create a folder Images in Week02 folder.
 Download the image files NP.ico and NPlogo.gif from BrightSpace and
save them in the Images folder.
 Open Visual Studio Code. “Close Folder” if the folder for last week is shown.
Open Week02 folder that you have created.
 Open index.html for editing in Visual Studio Code.
 Test your work using Firefox / Chrome

FC AY22/23 Sem 2 Last update 07/09/22

Week 2 Session 2
Official (Closed) - Non Sensitive

Page 2 of 6

1. Update name of author and creation date

Change the name of author to your name and the creation date to today’s
date.

Save the file and view the document in a browser. You should see an empty
web page with the title:

2. Add Ngee Ann Polytechnic logo and link to the NP website

We will first add the NP logo to the web page and hyperlink it to the NP
website in another window by using the “target” attribute. Use the “alt”
attribute to provide an alternate text for the image if the file is not found.

Note: as the image file is located in the Images folder within the current
HTML folder, we need to specify the relative location as
“Images/NPlogo.gif”.

3. Create Squares and Cubes Table

Type the following code after the logo to create the Squares and Cubes
table from 2 to 4:

FC AY22/23 Sem 2 Last update 07/09/22

Week 2 Session 2
Official (Closed) - Non Sensitive

Page 3 of 6

The output shown in the browser is as follows:

Challenge

Modify the code to display the table as follows:

Hint: Use “style” attribute to set “border-collapse: collapse” for the table.
Use “style” attribute to set “background-color: aqua” for the desired
row and cells.

4. Add Table for your contact information

Let’s use <Table> tag to create your contact information just below the table
that you’ve created in the previous question.

 Our table as shown below has varying rows (3 or 4 rows) and columns
(1 or 2 columns). To begin, create a table element using <table> and
</table> tags. Set the border attribute of the table to "2" to view
borders between rows and columns and the style attribute of the table to
"border-collapse: collapse" to specify the border model.

 Use <caption> tag to add the caption "My Contact" for the table.

 Next, create four rows. To do this, in between the <table> and </table>
tags, place four pairs of <tr> and </tr> tags. Each of these pairs of tags
marks the start and end of each row.

FC AY22/23 Sem 2 Last update 07/09/22

Week 2 Session 2
Official (Closed) - Non Sensitive

Page 4 of 6

 After that, we are going to place the <td> and </td> tags in each tr
element to mark the start and end of each column in each row. Take
note of the merged row/column (use rowspan / colspan attriutes)
requirements for the cells:
 For the first row, create a merged cell by setting colspan="2" in the
<td> tag. Place your name in the td element.
 For the second row, make the left cell span across two rows by
setting rowspan="2" in the <td> tag. Place your address in the td
element.
 Add another pair of <td></td> tags to create the second column for
the same row (second row). Enter your home telephone number in
this td element.
 For the third row, it should contain only the second column as the
first column is merged with the row above. Add a single pair of <td>
and </td> tags in the tr element. Enter your mobile number in this td
element.
 For the fourth row, create a merged cell by setting colspan="2" in
the <td> tag. Place your eMail address in the td element and convert
the eMail address to a hyperlink that opens an eMail software using
the <a> tags.
<a href="mailto:[email protected]">

The output shown in the browser is as follow:

Let’s do an experiment with the table width:

 Set the width attribute in the table element to 600 pixels.

View the document in the web browser and then resize your web
browser window such that its width is less than the width of the table.
What happens to the table?

 Set the width attribute in the table element to 100%. View the
document in the web browser and then resize your web browser
window. Do you observe any difference when compared to the previous
step? How does using "%" change the effect of the width attribute
setting?

FC AY22/23 Sem 2 Last update 07/09/22

Week 2 Session 2
Official (Closed) - Non Sensitive

Page 5 of 6

 Set the width attribute in td elements of the second row so that both
columns take 50% of the table width.

5. Format Text in the contact table

Let’s format the text in the table to make it more presentable.

 Place "My Contact" within a pair of <strong> and </strong> tags to

make it bold with strong important.

 Place each of your personal information (name, address, phone

numbers and email address) within a pair of <i> and </i> tags to make it
italic.

The output shown in the browser is as follow:

Challenge

6. Create your Timetable

Use <Table> tag to create your own timetable just below the table that
you’ve created in the previous question and format it as shown below.

FC AY22/23 Sem 2 Last update 07/09/22

Week 2 Session 2
Official (Closed) - Non Sensitive

Page 6 of 6

Note: As we have not learnt Cascading Style Sheets (css), you may just
use style attribute for each tag when needed.

FC AY22/23 Sem 2 Last update 07/09/22

Week 2 Session 2