HTML Essentials
As s ig n men ts
Document Code 25e-BM/HR/HDCV/FSOFT
Version 1.1
Effective Date 20/11/2012
Hanoi, 04/2019
Assignments HTML Essentials Issue/Revision: x/y
RECORD OF CHANGES
No Effective Date Change Description Reason Reviewer Approver
1 25/Jun/2018 Create a new Lab Create new DieuNT1 VinhNV
2 01/May/2019 Update Fsoft Template Update DieuNT1 VinhNV
25e-BM/HR/HDCV/FSOFT v1.1 Internal use 2/6
Assignments HTML Essentials Issue/Revision: x/y
Contents
Unit 3 – HTML Text .........................................................................................................................4
Objectives: ...............................................................................................................................4
Project Structure ......................................................................................................................4
Problem 1: HTML text basics 1 .................................................................................................4
Problem 2: HTML text basics 2 ..................................................Error! Bookmark not defined.
Problem 3: HTML text basics 3 ..................................................Error! Bookmark not defined.
25e-BM/HR/HDCV/FSOFT v1.1 Internal use 3/6
Assignments HTML Essentials Issue/Revision: x/y
CODE: HTML-E.M.A601
TYPE: Medium
LOC: N/A
DURATION: 60 MINUTES
Unit 6 – HTML Table
Objectives:
Understand the syntax of HTML Table: <table>, <tbody>, <thead>, <tr>, ,<td>
Able to use correctly Table attributes such as colspan, col
Project Structure
Create a new folder called HTML-E.M.A601 (this will be your top folder)
Problem:
You are working at a school; currently your students are studying the planets of our solar system,
and you want to provide them with an easy-to-follow set of data to look up facts and figures about
the planets. An HTML data table would be ideal — you need to take the raw data you have
available and turn it into a table, following the steps below.
The finished table should look like this:
Requirements:
The following steps describe what you need to do to complete the table example. All the data you'll
need is contained in the [Link] file. If you have trouble visualising the data, look at the live
example above, or try drawing a diagram.
Open your copy of [Link], and start the table off by giving it an outer container, a table header,
and a table body. You don't need a table footer for this example.
Add the provided caption to your table.
25e-BM/HR/HDCV/FSOFT v1.1 Internal use 4/6
Assignments HTML Essentials Issue/Revision: x/y
Add a row to the table header containing all the column headers.
Create all the content rows inside the table body, remembering to make all the row headings into
headings semantically.
Ensure all the content is placed into the right cells — in the raw data, each row of planet data is
shown next to its associated planet.
Add attributes to make the row and column headers unambiguously associated with the rows,
columns, or rowgroups that they act as headings for.
Add a black border just around the column that contains all the planet name row headers.
Hints and tips
The first cell of the header row needs to be blank, and span two columns.
The group row headings (e.g. Jovian planets) that sit to the left of the planet name row
headings (e.g. Saturn) are a little tricky to sort out — you need to make sure each one spans
the correct number of rows and columns.
One way of associating headers with their rows/columns is a lot easier than the other way.
25e-BM/HR/HDCV/FSOFT v1.1 Internal use 5/6
Assignments HTML Essentials Issue/Revision: x/y
Further Help
If you are stuck and refer to the figure below:
-- THE END --
25e-BM/HR/HDCV/FSOFT v1.1 Internal use 6/6
