FACULTY OF INFORMATION TECHNOLOGY WEB TECHNOLOGY 511 1st SEMESTER ASSIGNMENT Name & Surname: Nadia khan Qualification: DIT Semester: 1st ICAS No: 402104378 Module Name: Web Tech Date Submitted : 10 May 2021 ASSESSMENT CRITERIA MARK EXAMINER MARKS ALLOCATION MARKS FOR CONTENT QUESTION ONE 30 QUESTION TWO 30 QUESTION THREE 30 Additional Marks Will Be Added Based On Smart 10 Programming, Referencing & Creativity TOTAL MARKS 100 Examiner’s Comments: Moderator’s Comments: Signature of Examiner: Signature of Moderator: MODERATOR MARKS Table of Contents Ouestion 1 ............................................................................................................................................... 3 Question 2 ............................................................................................................................................... 6 Question 3 ............................................................................................................................................. 10 References ............................................................................................................................................ 13 Ouestion 1 HTML CODE <Doctype HTML> <html> <head> <title>Dr Kelly Brown</title> <link rel="stylesheet" href="Question1.css"> <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'> <style type="text/css"> body { font-family:'Raleway'; </Style> <head> <body> <table width="97%" align="right"> <tr> <td colspan="3"> <img src="img-20210506-WA0066 2.jpg" width="29%"/> <td></td> </td> </tr> <tr> <td width ="23%"> <b>Dr Kelly Brown & Wellness Centre</b> </td> <td align="right" colspan="2"> <a href="home.html">Home</a>&nbsp| <a href="aboutus.html">About Us</a>&nbsp| <a href="contactUs.html">Contact Us</a>&nbsp| <a href="appointments.html">Appointments</a> </td> <td width="13%"></td> </tr> <tr> <td colspan="4"> <hr color="red"/> </tr> <tr> <td align="right"colspan="4" /> <h5> Doctor in century </br> City,Cape Town </br> Open today until </br> 16:00 PM</h5> </td> </tr> <tr> <td align="center"/><b>&nbsp;Meet Dr Kelly <dd Align="center"/>&nbsp;Brown</b> <br/><br/> <img src=" dr carl.jpg" width="98%" height ="158%"/> <td align="left" colspan="2" > <p> Dr kelly brown is a general practioner with a love for families and espescially loves working with mothers and children.<br/><br/> She obtained her medical degree,MBChb,in 2009 at the university of pretoria and completed her diploma in child health(DCH) in 2013. She qualified as a South African Certified Lactation Consultant (SACLC)with Wits University in 2016.<br/><br/> Dr Brown is practising from the 56 Century City.Cape Town.,which is a friendly practice. </p> </td> <td width="12%"></td> </tr> <tr height="15%"> <td colspan="4"/><center> <footer> <p> <dd align="center"/> &copy All Rights Reserved Website designed by Nadia Khan 402104378 2020&ensp;&#174; </p> </footer> </tr> </table> </body> </html> CSS CODE footer{ (w3schools, n.d.) color:white; background-color:navy; float:bottom; text-align:center; clear:left; padding-top:12px; padding-bottom:12px; } body{ height:125vh; font-family:Raleway; margin-top:80px; padding:30px; color:navy; } (Tutorialspoint, n.d.) Question 2 HTML CODE <!Doctype html> <html> <head> <title>Appointment booking form</title> <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'> <link type="text/css" rel="stylesheet" href="Question2.css"/> </head> <body> <form method="POST"> <table width="100%"> <tr> <td> <img id="img" src="bg.jpg" width="95%"> </td> <td> <div id ="book"> <h2 id ="head"> Book An Appointment</h2> <hr id="line"/> <input class+"inputbox" id="inputbox" type="text" name="yourfullname" placeholder="your Full Name"/><br> <input class+"inputbox" id="inputbox" type="email" name="youremail" placeholder="your Email"/><br> <input class+"inputbox" id="inputbox" type="text" name="cellphonenumber" placeholder="cellphone Number"/><br> <input class+"inputbox" placeholder="Select Date: Below" type="text" name="appointmentdate" id="inputbox"/> <span id="head2">Appointment Date:</span> </div> <div id = "last"> <input type="date" name="appointmentdate" id="appdate"/> <input type="time" name="appointmenttime" id="apptime"/><br> </div> <div id="Vlast"> <textarea id="message" name="message" placeholder="Message"/></textarea><br><br> <input type="submit" value="send" id="send" background color="green"/> </td> </div> </table> <form> </body> </html> (w3schools, n.d.) (Tutorialspoint, n.d.) CSS CODE #book{ color:Darkblue; margin-bottom:72px; margin-right:216px; margin-left:28px; } #inputbox{ width:120%; padding:15px; margin:10px 0 22px 0; border:none; background-color:whitesmoke; } #body{ font-family:'Raleway';font-size: 20px; color:blue; margin-left:5px } #head2{ margin-left:163px; color:black; } #head{ margin-left:25%; margin-top:0%; } #message{ position:relative; top:-71px; height:200px; width:80%; background-color:whitesmoke; border:none; } #img{ margin-bottom:10%; position:relative; top:-6px; } #send{ width:80%; background-color:green; border:none; color:white; height:40px; position:relative; top:-20px; } #line{ (w3schools, n.d.) position:relative; top:-10px; height:2px; width:10%; margin-:255px; margin-top:2%; background-color:green; border-radius:2px; } #last{ position:relative; top:-71px; left:24%; } #vlast{ margin-bottom:50px; margin-right:20px; margin-left:30px; } (w3schools, n.d.) Question 3 HTML CODE <!Doctype html> <html> <head> <Title>Covid-19 Report</title> <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'> <style> body { font-family:'Raleway'; </style> <style> body{ font-weight:bold; } </style> <style> table,th,td{ border:1px solid #D3D3D3; border-collapse:collapse; } </style> </head> <body> <img src="covid.png" style="margin-left: 10%"/> <marquee>COVID-19 Corana Virus South Africa Resource Portal Update on Covid-19</marquee> <dd align="center">Our recoveries now stand at 678 738 which translates to a recovery rate of 92%</dd> <p1> <table border="2" width="80%" align="center"> <tr style="background-color:green"> <td style="color:white">Province</td> <td style="color:white">Total Deaths</td> <td style="color:white">Total Recoveries</td> <td style="color:white">Active Cases</td> </tr> <tr bgcolor= "#D3D3D3"> <td>Eastern Cape</td> <td>3859</td> <td>92126</td> <td>4725</td> </tr> <tr> <td>Eastern Cape</td> <td>3859</td> <td>92126</td> <td>4725</td> </tr> <tr bgcolor= "#D3D3D3"> <td>Free State</td> <td>1564</td> <td>45780</td> <td>10497</td> </tr> <tr> <td>Eastern Cape</td> <td>3859</td> <td>92126</td> <td>4725</td> </tr> <tr bgcolor= "#D3D3D3"> <td>Gauteng</td> <td>4861</td> <td>221243</td> <td>4061</td> </tr> <tr> <td>KwaZulu-Natal</td> <td>3255</td> <td>115281</td> <td>5350</td> </tr> <tr bgcolor= "#D3D3D3"> <td>Limpopo</td> <td>476</td> <td>16951</td> <td>465</td> </tr> <tr> <td>Mpumalanga</td> <td>607</td> <td>29018</td> <td>608</td> </tr> <tr bgcolor= "#D3D3D3"> <td>North west</td> <td>475</td> <td>29652</td> <td>3693</td> </tr> <tr> <td>Northern Cape</td> <td>475</td> <td>18418</td> <td>3631</td> </tr> <tr bgcolor= "#D3D3D3"> <td>Western Cape</td> <td>4397</td> <td>110269</td> <td>4349</td> </tr> <tr> <td>National</td> <td>19789</td> <td>678738</td> <td>37379</td> </tr> </table> </p1> <br> </br> <P2> <br/>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; Dr Zwelini Mkhize<br/>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Minister of Health<br/>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;ENDS </P2> </body> </html> (w3schools, n.d.) (HTML.COM, n.d.) (Tutorialspoint, n.d.) References HTML.COM, n.d. HTML for beginners the easy way. [Online] Available at: https://html.com [Accessed 1 May 2021]. Tutorialspoint, n.d. HTML Tutorial. [Online] Available at: https://www.tutorialspoint.com [Accessed 2 May 2021]. Tutorialspoint, n.d. HTML-Tables-Tutorialpoint. [Online] Available at: https://www.tutorialpoint.com [Accessed 2 May 2021]. w3schools, n.d. CSS Tutorial. [Online] Available at: https://www.W3schools.com [Accessed 2 May 2021]. W3schools, n.d. HTML Tables. [Online] Available at: https://www.W3schools.com [Accessed 2 May 2021]. w3schools, n.d. HTML Tag Reference-W3Schools. [Online] Available at: https://ww.w3schools.com [Accessed 2 May 2021].