Uploaded by Nadia Khan

web tech official Assignment

advertisement
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> Meet Dr Kelly
<dd Align="center"/> 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 ®
</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/>        Dr Zwelini
Mkhize<br/>       Minister of
Health<br/>       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].
Download