Task 1

Now you should start modifying your document so it conforms to the instructions below. Please note that the purpose of this task is not to make an estetically pleasing web page:-)

The content is up to you as long as it contains at least the following:

• Headings of at least two levels (<h1>, <h2>, <h3> ...)
• At least two paragraphs   (<p>)
• An unordered list where one of the member list items in itself contains an ordered list. Unordered lists use the tag <ul>, ordered lists use <ol>. See the heading "HTML Lists" on w3school's HTML section.
• A <pre>-formatted text (se the heading HTML Formatting on w3school's HTML section). These are used for example to show programming code, where it is important that all spaces and tabs actually are shown.
• An image. You can either use an image of your own, or use one from some web page on the internet. To use an image rom the web you can either make an absolute link to the external image, or save the image in your web folder by control-clicking on the image in Firefox and choosing save-as in the contextual menu. If you save the image, choose to save it in the lab folder in your public_html folder.
• A table with some kind of content, containing both table headers and table data.

Task 2

You will modify the document you created in part one, to use CSS. Create a file (in BBEdit), name it index.css, and place it in the same folder as the file from part 1. This new file should initially contain:

h1
{
    COLOR: #003366;
}

Next, add the following line as a child element to the head element in your index.html-file

<link rel="stylesheet" type="text/css" href="index.css"/>

This line specifiec that the html file should use the file index.css as it's stylesheet file. If yuo now open your web page in a web browser, your h1-headings should have changed colour to a rather dark shade of blue.

No you can (and shall) validate your stylesheet using the service at http://jigsaw.w3.org/css-validator/

If that works, you should then start modifying your stylesheet so it fulfills the following criteria for each elemet, and validates correctlly:

h1

• Colours #003366 (you have already done this, 00 is the amount of red, 33 is the amount of green and 66 is the amount of blue. The numbers are coded using the hexadecimal system, where FF is the highest possible value, denoting 255 in the decimal system. You will learn more about colour spaces in other courses)
• The font used should be, in order of priority, Arial, Helvetica or sans-serif (which is any font without serifs, which the computer can find)
• Font size 21 points
• Background colour #ffffff (which is 100% red, green and blue, which adds up to white)
• The "weight" of the font should be normal (can otherwise be bold etc)

h2

• Colour #003366
• The font used should be, in order of priority, Verdana, Arial, Helvetica, sans-serif
• The weight should be "bold"
• The font size should be 14 points
• Background colour #ffffff

p

• Colour #000000 (black)
• The font used should be, in order of priority, verdana, arial, helvetica, sans-serif
• Font size 9 points

* (meaning all elements which are not specified otherwise)

• Background colour #ffffff

... and finally a "class"

Finally, you should make a special "class" for certain p-elements where you want to have red text. In order to do this, you must edit the original html document and add the attribute class="some-text-string-you-choose" to the paragraph (<p>) you want to have appearing in red, and then editing your css file to make a rule for p.some-text-string-you-choose where the colour should be "#ff0000".

Finally, check that both your html file and your CSS file validates correctly.