You are on page 1of 37

1

Callyn Naidoo

Web
Technology
511

Assignment
3

Contents
Question One:.......................................................................................................................................4
Interface:...........................................................................................................................................4
CODE:................................................................................................................................................4
Question Two:.....................................................................................................................................10
Interface:.........................................................................................................................................10
CODE:...............................................................................................................................................10
Question Three:...................................................................................................................................15
Interface:.........................................................................................................................................15
CODE:...............................................................................................................................................15
Question Four:.....................................................................................................................................23
Interface:.........................................................................................................................................23
CODE:...............................................................................................................................................23
Question Five:......................................................................................................................................29
Interface:.........................................................................................................................................29
CODE:...............................................................................................................................................29
4

Question One:

Interface:

CODE:

<!DOCTYPE HTML>

<html>

<head>

<title>RichFlied Home Page </title>

<style>

footer{

width: 100%;

background-color:darkblue;

padding:3px 0px;
5

text-align:center;

color:gold;

font-family:calibri;

font-size:12px;

#menu-outer{

height:84px;

background-color:drakblue;

.table{

display:table;

margin:0 auto;

ul#horizontal-list{

min-width:100%;

list-style: none;

padding:20px;

width:100%;

background-color:darkblue;

padding:3px 0px;

color:gold;

}
6

ul#horizontal-list li{

display: inline;

li a{

background-color:drakblue;

text-decoration:none;

padding: 80px;

.bgcoldblue {

color: gold;

background-color: darkblue;

.bgcolsdb {

color: gold;

background-color: darkblue;.

border-color: #fff drakblue darkblue darkblue;

width: 80px;

-webkit-appearance: none;

</style>
7

</head>

<body>

<img src="Richflied Logo.jpeg" width="300px" hight="400px" algin="left">

<div id="menu-outer">

<div class="table">

<ul id="horizontal-list">

<li><a href="C:\Users\cally\Desktop\Programs\Campus stuff\BSC\Assignments\Web


Technolgy 511\Home Page.html"><font color ="gold">Home Page</font></a></li>

<li><a href="C:\Users\cally\Desktop\Programs\Campus stuff\BSC\Assignments\Web


Technolgy 511\Payment methods.html"><font color ="gold">Payment
Method</font></a></li>

<li><a href="C:\Users\cally\Desktop\Programs\Campus stuff\BSC\Assignments\Web


Technolgy 511\Media.html"><font color ="gold">Media</font></a></li>

<li><font color
="gold">Campus</font></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<li><font color ="gold">Study With


Us</font></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<li >

<select class="bgcolsdb" >

<option class="bgcoldblue">Programs</option>

<option class="bgcoldblue">HET</option>

<option class="bgcoldblue">FET </option>

<option class="bgcoldblue">TVET </option>

<option class="bgcoldblue">Skills </option>

</select>

</li>
8

<li><a href="C:\Users\cally\Desktop\Programs\Campus stuff\BSC\Assignments\Web


Technolgy 511\Apply now.html"><font color ="gold">Apply Now</font></a></li>

</ul>

</div>

</div>

<br>

<img src="Business Awards.jpeg" width="100%" height="300px" >

<br>

<br>

<h5 align="center"><font color ="gold">Partnerships & Affiliations</font></h5>

<p>

In the current economic situation, it becomes mandatory for institutions to increase their
networking opportunities through affiliations and partnerships. When partnerships are
implemented correctly, the private sector can increase efficiency and choice, and expand
access to education services, particularly for households that tend to be poorly served by
traditional delivery methods.

Richfield’s relations with the private sector, encompass cooperation with business
corporations, small and medium enterprises, professional and economic associations as well
as other organizations of the business community, individuals, communities, parents and
families.

Richfield recognizes that when we collaborate with some of the most ambitious
organizations, we can multiply our impact in areas from education to economic
development to poverty alleviation because of our ISO 9001:2015 accreditation status! We
have enduring partnerships and affiliations with a number of like-minded organizations and
leaders who are eager to help drive global change and deliver true results.

</p>

<br>

<h5><font color ="gold">These affiliations and collaborations assist the Institution in inter
alia :</font></h5>

<ul style="list-style:circle; display:block;">

<li>Availability of exclusive and current online resources</li>


9

<li>Access to a variety of databases</li>

<li>Conferences and seminars that staff can attend or participate in</li>

<li>Networking</li>

<li>Updating on latest cutting edge technology</li>

<li>Placement of Students for Work Integrated Learning(WIL)</li>

<li>Industry and Academic Experts as External Moderators, members of DACUM Panel and
Senate</li>

<li>Programme design, development, improvement and review</li>

</ul>

<footer>

&reg;Website designed by (144900 - Callyn Naidoo)&trade; &nbsp; BSCIT 2020 &copy;All


Rights Reserved

</footer>

</body>

</html>
10

Question Two:

Interface:

CODE:

<!DOCTYPE HTML>

<html>

<head>

<title>Media Page </title>

<style>

footer{

width: 100%;

background-color:darkblue;

padding:3px 0px;

text-align:center;

color:gold;
11

font-family:calibri;

font-size:12px;

#menu-outer{

height:84px;

background-color:drakblue;

.table{

display:table;

margin:0 auto;

ul#horizontal-list{

min-width:100%;

list-style: none;

padding:20px;

width:100%;

background-color:darkblue;

padding:3px 0px;

color:gold;

}
12

ul#horizontal-list li{

display: inline;

li a{

background-color:drakblue;

text-decoration:none;

padding:80px;

ul#horiline-list li{

display: inline;

float: right;

padding:5px;

.bgcoldblue {

color: gold;

background-color: darkblue;

.bgcolsdb {

color: gold;

background-color: darkblue;.

border-color: #fff drakblue darkblue darkblue;

width: 80px;

-webkit-appearance: none;
13

</style>

</head>

<body>

<img src="Richflied Logo.jpeg" width="300px" hight="400px" algin="left">

<div id="menu-outer">

<div class="table">

<ul id="horizontal-list">

<li><a href="C:\Users\cally\Desktop\Programs\Campus stuff\BSC\Assignments\Web


Technolgy 511\Home Page.html"><font color ="gold">Home Page</font></a></li>

<li><a href="C:\Users\cally\Desktop\Programs\Campus stuff\BSC\Assignments\Web


Technolgy 511\Payment methods.html"><font color ="gold">Payment
Method</font></a></li>

<li><a href="C:\Users\cally\Desktop\Programs\Campus stuff\BSC\Assignments\Web


Technolgy 511\Media.html"><font color ="gold">Media</font></a></li>

<li><font color
="gold">Campus</font></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<li><font color ="gold">Study With


Us</font></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<li >

<select class="bgcolsdb" >

<option class="bgcoldblue">Programs</option>

<option class="bgcoldblue">HET</option>

<option class="bgcoldblue">FET </option>

<option class="bgcoldblue">TVET </option>


14

<option class="bgcoldblue">Skills </option>

</select>

</li>

<li><a href="C:\Users\cally\Desktop\Programs\Campus stuff\BSC\Assignments\Web


Technolgy 511\Apply now.html"><font color ="gold">Apply Now</font></a></li>

</ul>

</div>

</div>

<p>

<ul id="horiline-list">

<li><img src="twitter.jpeg" width="40px" hight="40px" algin="right" ></li>

<li><img src="youtube.jpeg" width="40px" hight="40px" algin="right" ></li>

<li><img src="facebook.jpeg" width="40px" hight="40px" algin="right"></li>

</ul>

<video width="500" height="240" controls>

<source src="inimical.mp4" type="video/mp4">

</video>

</p>

<footer>

&reg;Website designed by (144900 - Callyn Naidoo)&trade; &nbsp; BSCIT 2020 &copy;All


Rights Reserved

</footer>

</body>

</html>
15

Question Three:

Interface:

CODE:

<!DOCTYPE HTML>

<html>

<head>

<title>Payment Page </title>

<style>

footer{

width: 100%;

background-color:darkblue;

padding:3px 0px;

text-align:center;

color:gold;

font-family:calibri;
16

font-size:12px;

#menu-outer{

height:84px;

background-color:drakblue;

.table{

display:table;

margin:0 auto;

ul#horizontal-list{

min-width:100%;

list-style: none;

padding:20px;

width:100%;

background-color:darkblue;

padding:3px 0px;

color:gold;

}
17

ul#horizontal-list li{

display: inline;

li a{

background-color:drakblue;

text-decoration:none;

padding:121px;

ul#horiline-list li{

float: right;

margin-top:50px;

list-style:none;

ul#horiline-list li{

float: right;

list-style:none;

.p{

float: left;

margin-top:50px;

.bgcoldblue {
18

color: gold;

background-color: darkblue;

.bgcolsdb {

color: gold;

background-color: darkblue;.

border-color: #fff drakblue darkblue darkblue;

width: 80px;

-webkit-appearance: none;

</style>

</head>

<body>

<img src="Richflied Logo.jpeg" width="300px" hight="400px" algin="left">

<div id="menu-outer">

<div class="table">

<ul id="horizontal-list">

<li><a href="C:\Users\cally\Desktop\Programs\Campus stuff\BSC\Assignments\Web


Technolgy 511\Home Page.html"><font color ="gold">Home Page</font></a></li>

<li><a href="C:\Users\cally\Desktop\Programs\Campus stuff\BSC\Assignments\Web


Technolgy 511\Payment methods.html"><font color ="gold">Payment
Method</font></a></li>

<li><a href="C:\Users\cally\Desktop\Programs\Campus stuff\BSC\Assignments\Web


Technolgy 511\Media.html"><font color ="gold">Media</font></a></li>
19

<li><font color
="gold">Campus</font></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<li><font color ="gold">Study With


Us</font></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<li >

<select class="bgcolsdb" >

<option class="bgcoldblue">Programs</option>

<option class="bgcoldblue">HET</option>

<option class="bgcoldblue">FET </option>

<option class="bgcoldblue">TVET </option>

<option class="bgcoldblue">Skills </option>

</select>

</li>

<li><a href="C:\Users\cally\Desktop\Programs\Campus stuff\BSC\Assignments\Web


Technolgy 511\Apply now.html"><font color ="gold">Apply Now</font></a></li>

</ul>

</div>

</div>

<h5 align="center"><font color ="gold">Payment Methods</font></h5>

<table border="0" width="100%">

<tr>

<td>

<p class="p">

<h5 align="left"><font color ="gold">Edgars or Jet Card:</font></h5>

<br>
20

Visit any of our Campuses that accept Debit and Credit Cards, and you can also pay
with your Edgars or Jet Card! Please note that your Edgars or Jet Thank U Card along with
the Card Holder must be present for the transaction. Proof of ID will be required.

<h5 align="left"><font color ="gold">Debit or Credit Card:</font></h5>

A cardholder begins a credit card transaction by presenting his or her card to a


merchant as payment for goods or services. The merchant uses their credit card machine,
software or gateway to transmit the cardholder’s information and the details of the
transaction to their acquiring bank, or the bank’s processor.

<h5 align="left"><font color ="gold">Snapscan:</font></h5>

Download the Snapscan App to your Mobile Phone or Tablet Device. Open the
SnapScan app, tap on “Scan” and scan the SnapCode displayed at the shop. This identifies
the shop and prompts you to enter the amount you wish to pay. Enter your PIN to secure
and complete the transaction. Richfield will receive a notification containing a confirmation
of payment from SnapScan and your account will be updated accordingly.

<h5 align="left"><font color ="gold">Standard Bank M65 Cash Payment:</font></h5>

Direct Cash Deposits can be made at any branch of Standard Bank using the M65
form which can be obtained from your nearest Campus. This form can only be used at
Standard Bank branches. Don’t forget to ensure that your name AND student number are on
both sections of the form.

<h5 align="left"><font color ="gold">Electronic Funds Transfer (or CDI):</font></h5>

Name of Bank: Standard Bank of South Africa

Name of Account: Richfield Graduate Institute of Technology (PTY) Ltd.

USE YOUR ICAS NUMBER, INITIALS AND SURNAME AS REFERENCE

</p>

</td>

<td>

<ul style="list-style:none">

<li> <img src="jets.jpeg" width="300px" height="100px" align="right" ></li>

<br>

<br>

<br>
21

<br>

<br>

<br>

<li><img src="visa.jpeg" width="300px" height="100px" align="right" ></li>

<br>

<br>

<br>

<br>

<br>

<br>

<li><img src="snapscan.jpeg" width="300px" height="100px" align="right" ></li>

<br>

<br>

<br>

<br>

<br>

<br>

<li><img src="standardbank.jpeg" width="300px" height="100px" align="right"></li>

</ul>

</td>

</tr>

</table>

<br>

<footer>
22

&reg;Website designed by (144900 - Callyn Naidoo)&trade; &nbsp; BSCIT 2020 &copy;All


Rights Reserved

</footer>

</body>

</html>
23

Question Four:

Interface:

CODE:

<!DOCTYPE HTML>

<html>

<head>

<title>RichFlied Home Page </title>

<style>

footer{

width: 100%;

background-color:darkblue;
24

padding:3px 0px;

text-align:center;

color:gold;

font-family:calibri;

font-size:12px;

#menu-outer{

height:84px;

background-color:drakblue;

.table{

display:table;

margin:0 auto;

ul#horizontal-list{

min-width:100%;

list-style: none;

padding:20px;

width:100%;

background-color:darkblue;

padding:3px 0px;

color:gold;
25

ul#horizontal-list li{

display: inline;

li a{

background-color:drakblue;

text-decoration:none;

padding: 80px;

.bgcoldblue {

color: gold;

background-color: darkblue;

.bgcolsdb {

color: gold;

background-color: darkblue;.

border-color: #fff drakblue darkblue darkblue;

width: 80px;

-webkit-appearance: none;

}
26

</style>

</head>

<body>

<img src="Richflied Logo.jpeg" width="300px" hight="400px" algin="left">

<div id="menu-outer">

<div class="table">

<ul id="horizontal-list">

<li><a href="C:\Users\cally\Desktop\Programs\Campus stuff\BSC\Assignments\Web


Technolgy 511\Home Page.html"><font color ="gold">Home Page</font></a></li>

<li><a href="C:\Users\cally\Desktop\Programs\Campus stuff\BSC\Assignments\Web


Technolgy 511\Payment methods.html"><font color ="gold">Payment
Method</font></a></li>

<li><a href="C:\Users\cally\Desktop\Programs\Campus stuff\BSC\Assignments\Web


Technolgy 511\Media.html"><font color ="gold">Media</font></a></li>

<li><font color
="gold">Campus</font></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<li><font color ="gold">Study With


Us</font></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<li >

<select class="bgcolsdb" >

<option class="bgcoldblue">Programs</option>

<option class="bgcoldblue">HET</option>

<option class="bgcoldblue">FET </option>

<option class="bgcoldblue">TVET </option>

<option class="bgcoldblue">Skills </option>

</select>
27

</li>

<li><a href="C:\Users\cally\Desktop\Programs\Campus stuff\BSC\Assignments\Web


Technolgy 511\Apply now.html"><font color ="gold">Apply Now</font></a></li>

</ul>

</div>

</div>

<br>

<img src="Business Awards.jpeg" width="100%" height="300px" >

<br>

<br>

<h5 align="center"><font color ="gold">Partnerships & Affiliations</font></h5>

<p>

In the current economic situation, it becomes mandatory for institutions to increase their
networking opportunities through affiliations and partnerships. When partnerships are
implemented correctly, the private sector can increase efficiency and choice, and expand
access to education services, particularly for households that tend to be poorly served by
traditional delivery methods.

Richfield’s relations with the private sector, encompass cooperation with business
corporations, small and medium enterprises, professional and economic associations as well
as other organizations of the business community, individuals, communities, parents and
families.

Richfield recognizes that when we collaborate with some of the most ambitious
organizations, we can multiply our impact in areas from education to economic
development to poverty alleviation because of our ISO 9001:2015 accreditation status! We
have enduring partnerships and affiliations with a number of like-minded organizations and
leaders who are eager to help drive global change and deliver true results.

</p>

<br>

<h5><font color ="gold">These affiliations and collaborations assist the Institution in inter
alia :</font></h5>

<ul style="list-style:circle; display:block;">


28

<li>Availability of exclusive and current online resources</li>

<li>Access to a variety of databases</li>

<li>Conferences and seminars that staff can attend or participate in</li>

<li>Networking</li>

<li>Updating on latest cutting edge technology</li>

<li>Placement of Students for Work Integrated Learning(WIL)</li>

<li>Industry and Academic Experts as External Moderators, members of DACUM Panel and
Senate</li>

<li>Programme design, development, improvement and review</li>

</ul>

<footer>

&reg;Website designed by (144900 - Callyn Naidoo)&trade; &nbsp; BSCIT 2020 &copy;All


Rights Reserved

</footer>

</body>

</html>
29

Question Five:

Interface:

CODE:
<!DOCTYPE HTML>

<html>

<head>

<title>Apply Now </title>

<style>

footer{

width: 100%;

background-color:darkblue;

padding:3px 0px;

text-align:center;

color:gold;

font-family:calibri;
30

font-size:12px;

#menu-outer{

height:84px;

background-color:drakblue;

.table{

display:table;

margin:0 auto;

ul#horizontal-list{

min-width:100%;

list-style: none;

padding:20px;

width:100%;

background-color:darkblue;

padding:3px 0px;

color:gold;

}
31

ul#horizontal-list li{

display: inline;

li a{

background-color:drakblue;

text-decoration:none;

padding:119px;

#colorlayout{

color:grey;

#coursesytle{

width: 995px;

height: 27px;

.bgcoldblue {

color: gold;

background-color: darkblue;

.bgcolsdb {

color: gold;
32

background-color: darkblue;.

border-color: #fff drakblue darkblue darkblue;

width: 80px;

-webkit-appearance: none;

</style>

</head>

<body>

<img src="Richflied Logo.jpeg" width="300px" hight="400px" algin="left">

<div id="menu-outer">

<div class="table">

<ul id="horizontal-list">

<li><a href="C:\Users\cally\Desktop\Programs\Campus stuff\BSC\Assignments\Web


Technolgy 511\Home Page.html"><font color ="gold">Home Page</font></a></li>

<li><a href="C:\Users\cally\Desktop\Programs\Campus stuff\BSC\Assignments\Web


Technolgy 511\Payment methods.html"><font color ="gold">Payment
Method</font></a></li>

<li><a href="C:\Users\cally\Desktop\Programs\Campus stuff\BSC\Assignments\Web


Technolgy 511\Media.html"><font color ="gold">Media</font></a></li>

<li><font color
="gold">Campus</font></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<li><font color ="gold">Study With


Us</font></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<li >

<select class="bgcolsdb" >


33

<option class="bgcoldblue">Programs</option>

<option class="bgcoldblue">HET</option>

<option class="bgcoldblue">FET </option>

<option class="bgcoldblue">TVET </option>

<option class="bgcoldblue">Skills </option>

</select>

</li>

<li><a href="C:\Users\cally\Desktop\Programs\Campus stuff\BSC\Assignments\Web


Technolgy 511\Apply now.html"><font color ="gold">Apply Now</font></a></li>

</ul>

</div>

</div>

</br>

</br>

<div id = "colorlayout">

<input type="text" id = "Firstname" value=""

name= "Firstname" required ="required" placeholder="First Name" size="170"/>

</br>

</br>

<input type="text" id = "Lastname" value=""

name= "Lastname" required ="required" placeholder="Last Name" size="170"/>

</br>

</br>
34

<input type="text" id = "Email" value=""

name= "Email" required ="required" placeholder="email address" size="170"/>

</br>

</br>

<input type="text" id = "ID" value=""

name= "ID" required ="required" placeholder="ID Number" size="170"/>

</br>

</br>

<input type="text" id = "DOB" value=""

name= "DOB" required ="required" placeholder="Date of birth" size="170"/>

</br>

</br>

<label for = "sel"> Course </label>

&nbsp &nbsp &nbsp &nbsp

<select>

<option> </option>

<option> Hcit</option>

<option> BSC</option>

<option> Fet</option>
35

</select>

</br>

</br>

<label for =" sel"> Highest Education Level </label>

&nbsp &nbsp &nbsp &nbsp

<select>

<option> </option>

</select>

</br>

</br>

<label for ="gender"> Identification Type: </label>

<input type="radio" id = "Pnumber" value=""

name= "Pnumber"required ="required"/>

<label for="male"> Passport Number </label>

<input type="radio" id = "IDnumber" value=""

name= "IDnumber" required ="required"/>

<label for="female"> ID Number </label>

</br>

</br>
36

<label for ="gender"> Gender: </label>

<input type="radio" id = "male" value=""

name= "gender"required ="required"/>

<label for="male"> Male </label>

<input type="radio" id = "female" value=""

name= "gender" required ="required"/>

<label for="female"> Female </label>

</br>

</br>

<label for = "sel"> Population Group</label>

&nbsp &nbsp &nbsp &nbsp

<select>

<option> </option>

<option> </option>

</select>

</br>

</br>

<input type="text" id = "Nationality" value=""

name= "Nationality" required ="required" placeholder="Nationality"size="170"/>

<br/>

<br/>
37

<textarea rows="5" cols="128" required ="required"

style= "resize:none;" placeholder="Address" size="170" ></textarea>

</br>

</br>

<input type = "submit" value="SEND " />

</br>

</br>

</div>

<footer>

&reg;Website designed by (144900 - Callyn Naidoo)&trade; &nbsp; BSCIT 2020 &copy;All


Rights Reserved

</footer>

</body>

</html>

You might also like