bild
Skolan för
elektroteknik
och datavetenskap
XHTML and CSS

Lab 2: XHTML and basic CSS

Note: If you want larger fonts, click apple-plus

Overview

The first part of the lab is about coding an xhtml page by hand. The second part is about adding a layout to the previously made structure, by usign CSS.

Deadline

The final date for handling in the assignment is är 2007-11-15

Purpose

The purpose of this lab is that you should understand the basic underlying structure of the web, namely the markup language html, and the stylesheet language CSS.

Goal

After this first part of the lab, you will be able to:

  • Structure data in xml elements (="tags"), in this case xhtml elements.
  • Make "well formed" xml/xhtml documents
  • Create gramatically correct (valid) xhtml documents
  • Create web pages using headings, lists, paragraphs, links, images and tables without resorting to using a graphical editor
  • Decice in which cases relative links and absolute links are to prefer
  • Validate xhtml documents.

After part two, you will be able to...

  • use the most important parts of CSS to give an xhtml document a certain look-and-feel

Groups

The lab is done in groups of two students, or individually. It can be done on the macs in Lofter and/or Violett/Turkos


Part 1: Coding xhtml

Open your public_html folder and create a new folder you name "DM2553" and in that folder create a new folder named lab2. Open one of the text editors BBEdit or SubEthaEdit, and create a new document you save with the name "index.html" in the lab2-folder. The document should initially contain this xhtml code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   	<meta http-equiv="Content-Type" content="text/html" />
   	<title>A title</title>
   </head>	
   <body>
   	<h1>A heading</h1>
   	<p>a paragraph </p>
   </body>
</html>

 

Open a web browser and navigate to your newly created page which can be found at http://www.student.nada.kth.se/~your-user-name/DM2553/lab2/ (where you change your-user-name to your username).

Next, check if the page validates correctly. Open W3C's validation service at http://validator.w3.org/ which is fairly intuitive. Type in the address to our newly created page in the address-field and click "validate uri". Hopefully you will get a result that the page validated correctly. Next remove the finishing paragraph tag (</p>), save your document and validate again. Now you should get a validation error. Change back so the document validates correctly again.

Now your have set up the files to start with the lab, but in order to be able to go much further you should read and understand the tutorials on html and xhtml found at http://www.w3schools.com/html/default.asp and http://www.w3schools.com/xhtml/default.asp, which you can use as references for the rest of the lab.

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.

The file should validate correctly before you move on.


Part 2: CSS

Purpose

The purpose of this part is that you should learn how to assign a layout to one or many web pages.

Goals

After this part your will hopefully understand :

  • The advantages of separating structure and layout in html
  • Be able to use CSS to achieve layout effects you desire on web pages.

Preparation

Skim through the lecture notes (which we most likely didn't have time to finish during the lecture) and read http://www.w3schools.com/css/default.asp more carefully. Please note that the tutorial contains one error, fonts without serifs are given the attribute value "sans-serif", not "non-serif".

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.

Examination

Finally you should hand in the address to your home page using PingPong. Under "Content" you should find "Lab 2 ". Just write the address to your web page and your css-page, and your name in the comment field, and click "Send".

Copyright © Sidansvarig: Christer Lie <lie@nada.kth.se>
Uppdaterad 2007-11-01