Question

ITAP1004 Website Development
Assignment











July 2020
Due Date: Session 13
Weightage: 25% (Task 1- 20% and Task 2 -5%)
Individual Assignment
The purpose of assignment is to assess students on the following Learning Outcomes:
LO 1 Explain characteristics of commercial web sites and associated authoring/management issues
LO 2 Analyse the features of a range of software tools used in the development of websites LO 3 Research key features of internet standards and protocols, including World Wide Web standards
LO 4 Develop web pages using standard mark-up and scripting programming languages and models
LO 5 Write program code to produce dynamic database driven web documents
LO 6 Produce design specification documents applicable to a web site authoring task LO 7 Identify and discuss website usability principles and issues

_______________________________________________________________________________ Assignment Description
You are to develop from the beginning a web site about yourself with regards to your course studies and any certifications you have done so far. This web site provides certain required details about your education/studies which you did. You will design and develop your web site with Notepad/Notepad++, HTML, Java Script and CSS.

The purpose of this assignment is for you to build a web site that will contain some details about all of your course degrees you have achieved so far including all the certifications with, e.g., the number of degrees you are holding so far, the number of institutes you enrolled yourself, etc.

This assignment involves creation of three HTML files corresponding to the three pages of your web site and all are connected to an external CSS file. You will need to determine how your site will be designed and then you will develop the pages using HTML, Java Script and CSS.
The pages and CSS file you will develop are explained below.

Home page (.HTML file)
The first page of your site the user sees will be a home page. This page will be a welcome to the site. You will explain to the user what the site is about. The content of the page will include at least two paragraphs. An appropriate heading must be placed at the top of the page indicating what the page or site is about.
The word limit for this page, excluding the heading, is 130 – 150 words. You must keep the number of words within this range.
In the home page, add two links for “Course details” page and “About Me” page.

NOTE: All pages must have links to the other pages.

Past Course details page (.HTML file)
Begin this page with an appropriate heading (as all pages of the site will have) reflecting that this page deals with details about all the unit courses. Do not use “Course details” in the heading but use another title for your heading.

Current Course details page (.HTML file)
This page conveys certain aspects about all the unit course details.
Like the previous page, show a heading at the top of the page. Do not use “Current course details” in the heading text but use some other title.

Cascading Style Sheet
Use CSS file for formatting used for all web pages.

Ensure that you use appropriate names for all files of the site. Avoid file names that reflect that they are about a university assignment, but instead reflect what their purpose is in the site.
Also ensure that file contents are laid out properly and neatly and that all code is indented consistently and properly.
Task 1: Develop a web site about yourself with regards to your course studies and any certifications you have done so far. This web site provides certain required details about your education/studies which you did. You will design and develop your web site with Notepad/Notepad++, HTML, Java Script and CSS. Mention the website usability issues based on the website you have developed.  

Task 2: After developing the website, explain the characteristics of that website and associated authoring/management issues.

Submission Guidelines:

The report should have a consistent, professional, and well-organized appearance.
1. This assessment item requires you to work individually.
2. Late penalty applies on late submission, 10% per day would be deducted.
3. Do not include any images in your site. Using images from other sites where permission is not granted will violate copyright associated with those images. No marks are being awarded for use of images so there is no benefit in including images.
4. It is without a doubt that students could be able copy text or other material from the other sites and include it, as it is, in their own sites. This would be a clear case of plagiarism. Plagiarism is a form of academic dishonesty that in this case would involve theft of material, and this would result in penalization of the student.
5. All content that is used in the student’s site must be totally written in their own words.
6. Students carry out the assignment individually. Students must not share any part of their work with each other.


Marking Guide: 100 Marks
Task Description Marks
Home Page Content 10
Page Viewable (i.e. actually works) in browser 10

Course Details Page Introductory Paragraph 10
Table 10
Page Viewable (i.e. actually works) in browser 5
Current Course Details Page Introductory Paragraph
10
Numbered List
5
Page Viewable (i.e. actually works) in browser
5
CSS One external CSS applied to all pages 10
Other Heading on every page
5
Relevant naming of all files used in site
10
Layout of and indentation within files
10
Total Page Viewable (i.e. actually works) in browser 100

Answer 1

Index.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<style>

</style>
</head>
<body>
  <header id="header" class="">
    <h1>My Portfolio</h1>
    
  </header><!-- /header -->
<div class="home">
<div class="topnav" id="navBar">
  <a href="index.html">Home</a>
  <a href="course.html">Course</a>
  
  <a href="about.html">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
<main>
  <h1>Welcome Here...</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
</div>

  <footer>
    <div class="slink">
      <i class="fab fa-facebook"></i>
      <i class="fab fa-youtube"></i>
      <i class="fab fa-instagram"></i>
    </div>
    <div class="sitelink">
      <a href="index.html" title="Home">Home</a>
      <a href="course.html" title="Course">course</a>
      <a href="about.html" title="about">About</a>
    </div>
    <a href="#header"><button type="button">
      <i class="fas fa-arrow-up"></i>
    </button>
      </a>
  </footer>
  <div class="copyright">
      <p>All Right Resevered 2020</p>
    </div>
</footer>



<script>
function myFunction() {
  var x = document.getElementById("navBar");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

</body>
</html>

about.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<style>

</style>
</head>
<body>

<div class="topnav" id="myTopnav">
  
  <a href="index.html">Home</a>
  <a href="course.html">Course</a>
  
  <a href="about.html">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
<div class="about">
  <img src="images/img1.jpg" >
  <h2>Your Name</h2>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>



<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

</body>
</html>

course.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<style>

</style>
</head>
<body>

<div class="topnav" id="myTopnav">
  
  <a href="index.html">Home</a>
  <a href="course.html">Course</a>
  
  <a href="about.html">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

  <div class="course">
  <h1>Course I have Done</h1>
  <a href="current.html"><p>Click here for Current Courses</p></a>
  <div class="edu">
    <h3>College Name</h3>
    <h4>Course name</h4>
    <p>Start and End date</p>
    <p>About course</p>
  </div>
  <div class="edu">
    <h3>College Name</h3>
    <h4>Course name</h4>
    <p>Start and End date</p>
    <p>About course</p>
  </div>
  <div class="edu">
    <h3>College Name</h3>
    <h4>Course name</h4>
    <p>Start and End date</p>
    <p>About course</p>
  </div>
  <div class="edu">
    <h3>College Name</h3>
    <h4>Course name</h4>
    <p>Start and End date</p>
    <p>About course</p>
  </div>
 

</div>




<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

</body>
</html>

style.css

body {
  margin: 0;
  padding: 0;
  background-color: #000;
  box-sizing: border-box;
  font-family: monospace, Helvetica, sans-serif;
}
header {
  background-color: #D1269E;
  width: 100%;
  

}
header h1{
  margin: 0;
  text-align: center;
  color: #fff;
  padding: 20px;
}

.topnav {
  overflow: hidden;
  background-color: #fff;
  
}

.topnav a {
  float: left;
  display: block;
  color: #DE03CC;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1.3rem;
  font-weight: 900;
  
}

.topnav a:hover {
  background-color: #DF29BA;
  color: #fff;
  
}

.topnav a.active {
  background-color: #DF29BA;
  color: #fff;
  
}
.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
.home{
  width: 80%;
  background-color: rgba(255, 255, 255, .8);
  margin: auto;
  padding: 20px;
  margin-bottom: 10px;
}

main{
  text-align: center;

}
main h1{
  color:#FC05F9;
}
main p{
  font-size: 20px;
  color: #000;
  text-align: justify;
  margin: 20px;
}
.course{
  background-color: #000;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.course .edu{
  background-color: #fff;
  padding: 15px;
  width: 80%;
  height: auto;
  margin-bottom: 10px;
  border: 1px solid #F807EA;
}
.course h1 ,h3{
  color: #F809D9;
}
.course a{
  text-decoration: none;
  color: #878686;
}
.about{
  background-color: rgba( 255,  255,  255, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 80%;
  margin: auto;
  margin-top: 10px;
  padding: 15px;
  border: 1px solid #EF04F8;
}
.about img{
  width: 200px;
  height: 200px;
  border-radius: 50%;

}
.about h2{
  color: #EF04F8;
}
.about p{
  text-align: justify;
}
footer{
  width: 100%;
  height: auto;
  background: #DB16B8;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
footer .slink .fab{
  background-color: rgba(255, 255, 255, .6);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin: 10px;
}
footer .slink .fab:hover{
  background-color: rgba(255, 255, 255, .4);
}
.sitelink a{
  display: block;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  margin: 10px;
}
footer button{
  background-color: #fff;
  border: none;
  padding: 10px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: #CB04CD;
  font-weight: 900;
  font-size: 1.3rem;
}
footer button:hover{
  box-shadow: inset 2px 2px 8px rgba(0,0,0,.3),inset -2px -2px 8px rgba(0,0,0,.3);
}
.copyright p{
  color: #fff;
  margin:auto ;
  background-color:#DB16B8; 
  border: none;
  text-align: center;
  

}

current.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<style>

</style>
</head>
<body>

<div class="topnav" id="myTopnav">
  
  <a href="index.html">Home</a>
  <a href="course.html">Course</a>
  
  <a href="about.html">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

  <div class="course">
  <h1>Active Course</h1>
  <a href="course.html"><p>Go to Back</p></a>
  <div class="edu">
    <h3>College Name</h3>
    <h4>Course name</h4>
    <p>Start and End date</p>
    <p>About course</p>
  </div>
  <div class="edu">
    <h3>College Name</h3>
    <h4>Course name</h4>
    <p>Start and End date</p>
    <p>About course</p>
  </div>
  <div class="edu">
    <h3>College Name</h3>
    <h4>Course name</h4>
    <p>Start and End date</p>
    <p>About course</p>
  </div>
  <div class="edu">
    <h3>College Name</h3>
    <h4>Course name</h4>
    <p>Start and End date</p>
    <p>About course</p>
  </div>
 

</div>




<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

</body>
</html>