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

E- waste

  1.   What is Electronic Waste? o    Electronic Waste or E-Waste describes discarded electrical or electronic devices. In other words, used electronics that are destined for re-use, re-scale, salvage, recycling, or disposal are also considered e-waste. o    Informal processing of e-waste in developing countries can lead to adverse human health effects and environmental pollution.         2. Sources of Electronic Waste. o    Equipment or devices used for communication like phones, landline phones, fax, etc. o    Electronic devices used for entertainment like TV, DVD & CD players. o    Household equipment’s like a vacuum cleaner, microwave ovens, washing machines, air conditioners, etc. o    Waste generated from the products used for data processing such as computers, computer devices like monitor, speakers, keyboards, printers, etc. o    Audio, visual components suc...
Post a Comment
Read more

HTML WORK 4

  Create a file and save it as  tutorial1.html . Your Web Page should follow the following specifications. Ensure you include all the HTM tags every web page must have: <!doctype html> <html lang="en"></html> <head></head <meta charset="UTF-8"> <title></title> <body></body> 'Tutorial 1' for the title. 'Tutorial 1 (your name)' using a <h1> heading element. A quick presentation of yourself (5 lines - e.g., your course, hobbies, etc) using 2 different formatting tags. Use paragraph elements to separate these lines. A ruler acting as a separator. Under the ruler: Your email address inside an address element The last modified date (just add today’s date). View your web page in a browser. Find your file - double-clicking this file or dragging it into a web browser should open it for viewing. Keep both your tex...
Post a Comment
Read more