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".