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

Cyber Security And Computer Security

Introduction of Cybersecurity. Cybersecurity is the security of Internet-connected frameworks, counting equipment, computer program, and information from cyber assaults. It is made up of two words one is cyber and the other is security. Cyber is related to innovation which contains frameworks, arranges, and programs or information. While security is related to security which incorporates frameworks security, arranges security, and application and data security. It is the body of advances, forms, and hones planned to secure systems, gadgets, programs, and information from assault, robbery, harm, alteration or unauthorized get to. It may moreover be alluded to as data innovation security.   Introduction of computer security. computer security is the security of computer frameworks and data from hurt, robbery, and unauthorized utilize. The most reason clients get assaulted as often as possible is that they need satisfactory resistance to keep out interlopers, and cybercriminal...
Post a Comment
Read more