Scribd
Upload
80 views6 pages

Name: - Student #: - COMP-CO710: Midterm Exam Winter 2013 - 30 Marks

The document provides instructions for a midterm exam assignment in which students are asked to create 3 HTML files (home.html, predict.html, records.html) and a CSS file (styles.css) based on provided starter files. It outlines specific formatting requirements and elements that must be included in each file, such as comments, links between files, page structure, headings, lists, and styling. Students are also given rules around file names, formatting, and submitting their completed work.

Uploaded by

Hadi Alasaad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
80 views6 pages

Name: - Student #: - COMP-CO710: Midterm Exam Winter 2013 - 30 Marks

The document provides instructions for a midterm exam assignment in which students are asked to create 3 HTML files (home.html, predict.html, records.html) and a CSS file (styles.css) based on provided starter files. It outlines specific formatting requirements and elements that must be included in each file, such as comments, links between files, page structure, headings, lists, and styling. Students are also given rules around file names, formatting, and submitting their completed work.

Uploaded by

Hadi Alasaad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 6

Name : ________________________________ Student # : _________

COMP-CO710 : Midterm Exam Winter 2013 – 30 marks


The only aid is the Syntax sheet attached.
Your professor will provide the link for the starting files at the start of the exam.

Create the following files:

home.html -this is the main starting file (provided as homestart.html)


predict.html -as indicated below (provided as predictstart.html)
records.html -as indicated below (provided as recordsstart.html)
styles.css -stores the common CSS formatting that applies to all pages
(provided as stylestart.css)

Upload your complete solution to the eLearn Midterm Exam dropbox in the COMP
CO710 course.

Rules for HTML & CSS and uploading (4 marks) – ½ mark each
 comment at the top of the code indicating your name and student number in each file
 The styles.css must be linked to all 3 HTML pages
 All style rules must be either in the styles.css file or an embedded stylesheet, as directed.
 HTML must be in lowercase for ALL tags
 All tags should conform to HTML5 standards, with either a closing tag or be self-closing.
 All HTML Tag Attributes all enclosed in " "
 All HTML5 documents include HTML5 elements (nav, footer, header, section, aside) sections
where appropriate
 All files must be named as specified above.
 Must be uploaded to the eLearn dropbox.

Common to all pages (9 marks)


 the title on all pages must be Rocky Mountain House Weather
 The main heading above the image must be Rocky Mountain House, AB
 The body of the document must have a right and left margin of 100 pixels, have a text color of
navy and use a font-family of Arial.
 The width of the nav is 860px. Use this as a guide to determine the widths of the other elements
(approximate)
 A footer must appear as shown on all pages
Rocky Mountain Weather - Constructed by YOUR NAME in March 2013
This must link to your Mohawk college email address
 The menu must be displayed as series of links under the rocky mountain image
(Set the width for this block to 850 pixels)
Complete the following for the menu
o must be displayed with a background color of peachpuff
o the color of each link must be darkorange
o On hover the link colour must be changed to navy, with an underline
o Home link to "home.html"
o Today's weather links to "predict.html"
o Records links to "records.html"
o Environment Canada links to http://weatheroffice.ec.gc.ca/
o All links must be bolded and no underline
o the link must be spaced as shown

HINTS/NOTES:
COMPLETE one file first and then copy the changes to the other two HTML files.
Page 1 of 6
home.html (3 marks)
 Format as shown
 The dotted border colour is darkorange

Page 2 of 6
records.html (4 marks)
 Create a level 1 heading for Weather Records (1/2 mark)
 Create the nested list as shown.
Each unordered list item contains an ordered list with two list elements (2 marks)
 The ordered list items must be displayed with a style type of lower roman. (1/2 mark)
 The almost 4 inches and almost 2 feet must be emphasized. (1/2 mark)
 The degree symbol must be used (Hint:the entity is deg) (1/2 mark)

Page 3 of 6
predict.html (10 marks)

 Place Today's Weather as a Level 1 heading (1/2 mark)


 Display the three predictions for Morning, Afternoon and Evening as three blocks side by side as
shown (hint: use containers) (2 marks)
 Place level 2 headings at the top of each section and display in white with a navy background in
small caps and a letter spacing of .2 em (1 mark)
 Display figure captions for the text “Scattered Flurries”, “Partly Sunny” and “Variable Cloudiness”.
(2 marks)
 Display the information about the day's weather (starting at Temp) in a mono-spaced font so that
you can line up the information. You may do this by adding non-breaking spaces or by using the
pre tag. (1 mark)
 The Feels like temperature must be displayed in Red and with a bold font-weight. (1 mark)
 The deg symbol must be shown on all temperatures. (1/2 mark)
 The < symbol must be displayed using a character entity. (1/2 mark)
 The background color for each forecast section must be #CCCCFF (1/2 mark)
 add margins and/or padding to achieve the general spacing as shown within the forecasts. (1
mark)

Page 4 of 6
Page 5 of 6
Basic HTML Tags
<!DOCTYPE HTML><html><head><body>
<h1> <h2> <h3> <h6> <p> <br> <hr>
<strong> <em> <pre> <blockquote> <cite> <sub> <sup>
<img src="URL" alt="Alternate Text" height="" width="" />
<a href="URL">Link-text goes here</a>
<a href="mailto:emailaddress">Text</a>
<a id="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>
<ul>  <li>Item</li>  <li>Item</li></ul>
<ul>  <li>Item</li>  <li>Item</li></ul>
&lt; &gt; &copy; &deg;
<div id=""> <div class=""> <span id=""> <span class="">
<header> <nav> <section> <aside> <footer>
<!-- This is a comment -->

CSS Styles Tables


<style> <table><tr><td><th>
  p {color: blue; <caption>
} < colspan="" rowspan="" >
</style>
<link href="style.css"
rel="stylesheet" />
color examples: #ff0000 red Forms
rgb(255,0,0)
size units = em, pt, px, %, cm, <form action="" method="" >
in <input type="text|checkbox|radio|
submit|reset" checked>
color: background-color: <select><option value="" selected>
border-color: <textarea rows="" cols="" >
margin: top right bottom left;
margin-left: margin-top: <fieldset>
padding: top right bottom left; <legend>
padding-left: padding-top: <label>
border: style color width;
text-decoration: none/underline Common Attributes: name=""
text-align: left right or center value=""
font-family: font-size:
font-weight: font-style:

display : inline / block


float: left / right
width: height:
clear: both

list-style-type: none;
border-radius: size;
box-shadow: hor vert blur color;

a:hover{} a:active{} a:visited{}

#someID {} .someClass {}

Page 6 of 6

You might also like