Skip to main content

HTML Work 2

 

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

Go to Assessment -> Tutorial Tests -> Tutorial 2 Test and complete the test. You can have up to five attempts to get the maximum score of 2 marks.



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>&#163; 3-Child(4-12)</li>
<li>&#163; 4-Youth(13-17)</li>
<li>&#163; 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

Popular posts from this blog

E- waste

  1.   What is Electronic Waste? o    Electronic Waste or E-Waste describes discarded electrical or electronic devices. In other words, used electronics that are destined for re-use, re-scale, salvage, recycling, or disposal are also considered e-waste. o    Informal processing of e-waste in developing countries can lead to adverse human health effects and environmental pollution.         2. Sources of Electronic Waste. o    Equipment or devices used for communication like phones, landline phones, fax, etc. o    Electronic devices used for entertainment like TV, DVD & CD players. o    Household equipment’s like a vacuum cleaner, microwave ovens, washing machines, air conditioners, etc. o    Waste generated from the products used for data processing such as computers, computer devices like monitor, speakers, keyboards, printers, etc. o    Audio, visual components suc...
Post a Comment
Read more

HTML WORK 4

  Create a file and save it as  tutorial1.html . Your Web Page should follow the following specifications. Ensure you include all the HTM tags every web page must have: <!doctype html> <html lang="en"></html> <head></head <meta charset="UTF-8"> <title></title> <body></body> 'Tutorial 1' for the title. 'Tutorial 1 (your name)' using a <h1> heading element. A quick presentation of yourself (5 lines - e.g., your course, hobbies, etc) using 2 different formatting tags. Use paragraph elements to separate these lines. A ruler acting as a separator. Under the ruler: Your email address inside an address element The last modified date (just add today’s date). View your web page in a browser. Find your file - double-clicking this file or dragging it into a web browser should open it for viewing. Keep both your tex...
Post a Comment
Read more