Task 1 - Create your Web Page content
Create a file and save it
as tutorial2.html
Your Web Page should follow the following specifications.
Part 1
- Tutorial 2 for the title.
- Pool Schedule (your name) as the
page heading
- The schedule is shown below in an HTML
table.
- The first row of the table should contain the prices shown using a list. You may need to use an HTML
entity £ to display the '£' sign correctly. HTML
character entities are used to display reserved characters.
- Demonstrate the use of both rowspan
and colspan in the table.
- A ruler acting as a separator.
- Your email address inside an
address element.
- The last modified date (just add
today's date (hardcoded)).
- See the following image for an example of the layout.
- Remember, you can check if your
markup is syntactically valid using the Validator at https://validator.w3.org/
- Use the ‘Validate by File Upload’
or ‘Validate by Direct Input’.
Part 2
- Use CSS to style the Schedule. For example, give repeated items (such as SwimFit, Lane Swim) matching text or background colors.
- Use an embedded style sheet and do
NOT use inline styles.
- Use a class to identify repeated items and apply color for each class.
- Additional CSS.
- Experiment with padding to make
space around the text within the <td>s.
- Experiment with the different
border-style values: solid, dotted, dashed, double, groove, ridge, inset
and outset.
- Experiment with the border
declarations:
- border-collapse: collapse;
- border-collapse: separate;
- Experiment with the unordered list
styles: square, circle, disc (default), and none.
Task 2 - Complete the Tutorial Test on
Blackboard
HTML Code -
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tutorial 2</title>
<style>
h1{color:#0c0c0c;font-size:2.5em;text-align:left;}
table,th,td{font-family:Arial,Helventica,sans-serif; border:1px solid black; border-collapse:Separate;}
td.SwimFit{background-color:#33FFCC;}
td.LaneSwim{background-color:#33EBFF;}
ul.b{list-style-type:disc;}
</style>
</head>
<body>
<h1>Pool Schedule(Sajith Nirmana)</h1>
<table>
<tr>
<td colspan="6">Prices:
<ul class ="b">
<li>Free- Infants(0-3)</li>
<li>£ 3-Child(4-12)</li>
<li>£ 4-Youth(13-17)</li>
<li>£ 5-Adult</li>
</ul>
</td>
</tr>
<tr>
<th></th>
<th>7:00-8:00 </th>
<th>8:00-9:00 </th>
<th>9:00-11:00</th>
<th>11:00-5:00</th>
<th>5:00-7:00 </th>
</tr>
<tr>
<td><b>Monday</b></td>
<td class="SwimFit">SwimFit</td>
<td class="LaneSwim">Lane Swim</td>
<td>Swimming Lessons</td>
<td rowspan="7">Public Swim</td>
<td>Adult Swim Club</td>
</tr>
<tr>
<td><b>Tuesday</b></td>
<td colspan="2" class="LaneSwim">Lane Swim</td>
<td>Parents and Tots</td>
<td>Junior Swim Club</td>
</tr>
<tr>
<td><b>Wednesday</b></td>
<td class="SwimFit">SwimFit</td>
<td class="LaneSwim">Lane Swim</td>
<td>School Swimming</td>
<td>Adult Swim Club</td>
</tr>
<tr>
<td><b>Thursday</b></td>
<td colspan="2" class="LaneSwim">Lane Swim</td>
<td>Maintenance</td>
<td>Junior Swim Club</td>
</tr>
<tr>
<td><b>Friday</b></td>
<td class="SwimFit">SwimFit</td>
<td class="LaneSwim">Lane Swim</td>
<td>School Swimming</td>
<td rowspan="3">Closed</td>
</tr>
<tr>
<td><b>Saturday</b></td>
<td colspan="2" class="LaneSwim">Lane Swim</td>
<td>Swimming Lessons</td>
</tr>
<tr>
<td><b>Sunday</b></td>
<td colspan="2" class="Closed">Closed</td>
<td>Swimming Lessons</td>
</tr>
</table>
<hr>
<Address>
Email:<b>sajith.2019048@iit.ac.lk</b><br>
</Address>
Last modified Date:<b>03.02.2021</b>
</body>
</html>
Comments
Post a Comment