Skip to main content

HTML WORK3

 

Task 1 - Create your Web Page content

Create a file and save it as tutorial3.html

Your Web Page should follow the following specifications.

Part 1

Your Web Pages should follow the following specifications.

  • Tutorial 3 for the title.
  • 'My Useful Links' as the page heading.
  • Add a background color or a background image to the body of your page using an embedded style sheet.
  • Your page should be composed of at least 3 parts, one of which will be your tutorial work so far. For each part you will have:
    • A subheading
    • A list of useful links with a quick description of each site. You will use a description list for this.
  • The page should contain a series of links at the top which will act as anchors to each of the categories on your page. (Note: you will need some length to your page for the anchors to work).
    • Use an HTML unordered list to structure the links and use CSS to style the list horizontally.
  • Add a back to top link (hint: you want to link back to your starting <h1> tag)
  • Add a small image to act as a back-to-top icon. 


 You can look for some on the web (e.g. https://www.iconfinder.com/).

 Important Note: You must ensure you comply with the image license agreement.

  • A ruler acting as a separator
  • Your email address inside an address element
  • The last modified date (just as hardcoded date)
  • Use CSS link pseudo-classes to style the links differently depending on which of the four states they are in.
  • 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’.

See below for an example of your page layout:

 


 

Part 2 - Create a Fixed Horizontal Navigation Bar

  • Use fixed positioning so that the list of anchor links at the top of your page is a horizontal navigation bar that always appears at the top of the web page when you page down. (Note: you will need some length to your page for this to work).
    • To achieve this create two <div> sections in the body of your document.
      • The first section will contain the navigation bar.
      • The second section will contain the heading, subheadings, and links with descriptions.

See below for an example of the fixed Navigation Bar. Image 2 shows the fixed Navigation Bar when scrolling down the page.

 


Task 2 - Complete the Tutorial 3 Test on Blackboard

  • Go to Assessment -> Tutorial Tests -> Tutorial 3 Test and complete the test. You can have up to five attempts to get the the maximum score of 2 marks


HTML CODE -

<!doctype html>
<html lang = "en">
<head>


<style>
body{background-color:#7480E6}

a{color:blue;}

a:hover{
color:#F9B904;
background-color:blue;
transition:0.4s;
}

.nav ul{
list-style:none;
background:#0F004D;
text-align:left;
padding:10px;
margin:30px;
}

.nav li {
display:inline-block;
}

.nav a{
text-decoration:none;
color:#fff;
width:50px;
display:block;
padding:10px;
font-size:15px;
font-family:Helvetica;
}


</style>



<meta charset="UTF-8">
<title>Tutorial 3</title>

</head>

<body>
<section id="top">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" />

<div class="nav">
<ul>
<li><a href="#Tutorial">Tutorial</a></li>
<li><a href="#UniversityWork">University Work</a></li>
<li><a href="#WebStuff">Web Stuff</a></li>
<li><a href="#SocialMedia">Social Media</a></li>
</ul>
</div>

<h1><b>My Useful Link</b></h1>
<h2 id ="Tutorial"><b>Tutorials</b></h2>
<dl>
<dt><a href="https://learning.westminster.ac.uk/ultra/courses/_81449_1/outline/edit/document/_3178867_1?courseId=_81449_1" target="_blank">Tutorial 1</a></dt>
<dd>This is a link to my first tutorial,where I practiced basic html & CSS.</dd>
<dt><a href="https://learning.westminster.ac.uk/ultra/courses/_81449_1/outline/edit/document/_3184446_1?courseId=_81449_1" target="_blank">Tutorial 2</a></dt>
<dd>This is a link to my second tutorial,where I practiced basic Lists & Tables.</dd>
</dl>
<h2 id ="UniversityWork"><b>University Work</b></h2>
<dl>
<dt><a href="https://www.westminster.ac.uk/current-students/studies/your-student-journey/when-you-arrive/blackboard" target="_blank">Blackboard</a></dt>
<dd>The VLE we use at University</dd>
<dt><a href="https://timetabling.westminster.ac.uk/Web/Timetable" target="_blank">Timetabling</a></dt>
<dd>This is a link to my University Timetable,with all my lectures and tutorials.</dd>
<dt><a href="https://learning.westminster.ac.uk/ultra/courses/_81449_1/outline/edit/document/_3164979_1?courseId=_81449_1" target="_blank">Web Dev Shedule</a></dt>
<dd>A link to my Web Design and Development modules schedule,from which I can access<br>all m lectures and tutorials,and cheak deadline dates. </dd>
<dt><a href="https://www.westminster.ac.uk/current-students" target="_blank">Student Hub</a></dt>
<dd>The Student Hub is the University Web site for currunt students which provides<br>information such as new and events, and link to all the UniversityWeb systems and<br>services.</dd>
</dl>

<h2 id ="WebStuff"><b>Web Stuff</b></h2>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/" target="_blank">MDN Web Docs</a></dt>
<dd>Online resourses for Web Development developed by the Mozilla Developer Network.</dd>
<dt><a href="https://www.w3schools.com/" target="_blank">W3C</a></dt>
<dd>World Wide Web Consortium,which amongst other things develops the various Web standards.</dd>
</dl>

<h2 id ="SocialMedia"><b>Social Media</b></h2>
<dl>
<dt><a href="https://twitter.com/?lang=en" target="_blank">Twitter</a></dt>
<dd>Link to twitter,an online microblogging site which I use to follow what's happening in the web.<br>developer world</dd>
<dt><a href="https://www.facebook.com/" target="_blank">Facebook</a></dt>
<dd>To keep in touch with family and friends.</dd>
<dt><a href="https://www.instagram.com/" target="_blank">Instagram</a></dt>
<dd>For posting pictures about my life.</dd>
</dl>

<div class="tops">
<a href="#top">Back to the Top.
<i class="fa fa-arrow-circle-up"> </i>
</a>

</div>
<hr>
Last modified Date:<b>24/01/2021</b>
<Address>
Email:<b>sajith.2019048@iit.ac.lk</b>
</Address>

</section>
</body>

</html>

Comments

Post a Comment

Popular posts from this blog

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 cybercriminals ar
Post a Comment
Read more