Simon Fraser University
Engaging the World

CourSys

Not logged in. Login

Exercise 3

Fixing Validation Errors

Copy the provided HTML for validation-page.html into a text editor. The page is reasonable HTML, but there are some errors.

Use the HTML Validator to find and fix errors in validation-page.html. In all cases, fix the markup in ways appropriate to the content.

Starting with CSS

Copy the provided HTML for style-page.html. It refers to a stylesheet style1.css: your task here is to create the stylesheet as specified below. You are not allowed to change the HTML to do this question.

Create a text file style1.css in the same folder as style-page.html and validation-page.html. Start with this CSS code:

body {
  font-family: "Helvetica", sans-serif;
}
h2 {
  border: indigo solid medium;
  padding: 0.25em;
}

This will set the font to the whole page to Helvetica if it's available, or some other sans serif font if not. It will also give all <h2> a medium-thick border with a solid line in the colour indigo.

Reload the HTML page and make sure these changes took effect: if not, your stylesheet isn't being loaded properly.

Add rules and property/value changes to your CSS to also make these changes to the appearance of the page. You will need to look up some details in the CSS reference as you go (but we'll point you in the right direction: there is too much in CSS to hope to find what you want without a little experience).

  • Centre the <h2>s with the text-align property.
  • Give the <h2>s a background-color. Find the property in the CSS reference, have a look at the allowed values (under the “Value” heading) and click the link to possible colour values. Find a colour keyword that you like for this background and use it.
  • Change the font-family for the headings (<h1> and <h2>) to something you like. The value here is a list of fonts (in case the user doesn't have your first choice). Remember that the list of fonts must end with one of the five generic font families.
  • The default appearance of lines is a little close together (i.e. the leading is small). Space lines (everywhere in the <body>) more by setting the line-height to something between 1.2 (which seems to be close to the default) and 2.0: whatever looks nice to you.
  • The <abbr> tag doesn’t have a consistent default appearance in all browsers: let's make it look the same everywhere. Set its text-decoration to none (to remove the underline that some browsers give it) and add a border-bottom that is thin dotted.

At the bottom of your style-page.html page from the previous part, add a link to the validation-page.html (after the last </section>):

<p>Please also mark my <a href="">validation example page</a>.</p>

Add an href value which is a relative URL and links to the page you created in the first part. Assuming you upload both .html files in the same folder/directory, the relative URL will just be the filename.

Upload both of your .html files and the .css file to the web server, and make sure the stylesheet and link still work when fetching the pages by HTTP.

Submitting

Submit the URL of your style-page.html page to the CourSys activity Exercise 3 (we will find validation-page.html by following your link).

Updated Thu Dec. 14 2017, 11:31 by ggbaker.