In this exercise you will build a small web site in XHTML 1.1 and CSS 2.1.
Please read these instructions carefully!
Please also read the corresponding chapter(s) in the current lecture notes (the PDF file) before you start.
Via "Account Status" in "Visitenkarte".
The address of your TU Graz home page will look something like this:
http://www.student.tugraz.at/koarl.testerl/
where koarl.testerl is the TU Graz email address of the student.
I will use $HP as a shorthand for your TU Graz home page.
Further information is available at:
Make sure you also read the university rules of use:
Create a subdirectory inm (lower case) on your home
computer (or on your account on a PC in the university labs, or on a
USB stick) in which you will work.
Change directory to inm.
Use all lower case for all file names and directories.
Your file and directory names must not contain any spaces or special
characters (such as Umlauts or %). Use a hyphen (-) to separate words
if you need to (e.g. city-photo.jpg).
Spaces and special characters in file and directory names can sometimes cause problems depending on which operating system the web browser and/or web server are running.
Work locally using a plain text editor such as Crimson Editor, Notepad, Emacs, PSPad, or UltraEdit.
Microsoft Word, Netscape Composer, FrontPage, Dreamweaver, etc. are not plain text editors and their use is strictly forbidden in this course!
Use only valid, conforming XHTML 1.1.
Create a local file called index.html
containing at least 100 words of text about the city
(or town or area) where you grew up.
You may use this skeleton
XHTML file, if you wish.
Do not disclose any personal information that you would not want the whole world to know about. For example, you do not have to tell everyone your Matrikelnummer.
Include a photograph from the place where you grew up (or some other image), which is either in the public domain or which you own the copyright of.
Include an absolute link to a web site which provides information about the city (or town or area) where you grew up.
Create a new file posting.html containing an XHTML
version of your initial newsgroup posting (new topic). Format your
original text with appropriate XHTML tags.
Create a new file personality.html containing an XHTML
version of your web research on the famous computer scientist your
tutor sent you. Format the text with appropriate XHTML tags.
Include the name of the personality, their place of birth, year of
birth, and what they are most famous for in an XHTML table.
Include the information about whether (and what and where) the person studied, formatted with appropriate XHTML tags.
Include the reference to the most recent publication by the person in the ACM Digital Library, formatted with appropriate XHTML tags. Make the DOI clickable.
Include the summary of the person's publication, formatted with appropriate XHTML tags.
In the summary, use the blockquote tag for the direct
quotation from your famous computer scientist.
Keep your lines of source code to 80 characters or less, so that source code printouts do not extend past the right edge of the paper.
This does not mean you have to insert
br tags into your XHTML every 80 characters!
Create relative links from
index.html to the other two XHTML files.
Take care with file extensions. Windows XP and Vista hide file extensions by default. You have to explicitly turn on their display.
Do not use the br tag in this exercise.
Its use is forbidden.
You may also include other images, as you wish.
Each of the following must appear at least once somewhere in your three XHTML files.
The h1, h2, p,
em, ol, and ul tags.
Use XHTML entities for quotation marks to enclose the quotation.
Use XHTML entities not characters from some special character set. If you do not know what this means, read the lecture notes.
Include images as local inline images (img tag) with
relative URLs. Do not reference images residing on other, remote servers.
You have to upload each image to the web server, in addition to the XHTML file.
Choose an appropriate format for each image.
Each image must not exceed 50 kb in size!
Use the width, height,
and alt attributes in an appropriate way
in the img tag for each image.
[Do not set the width and height of images using CSS.]
Upload your files to a new directory inm
on your TU Graz web site using SFTP or some other means.
For example, with sftp you might use:
sftp user@pluto.tugraz.at Connecting to pluto.tugraz.at... The authenticity of host 'pluto.tugraz.at (129.27.41.4)' can't be established. RSA key fingerprint is 6e:3e:60:da:e0:0c:93:42:be:48:cb:ff:a5:a4:4b:98. Are you sure you want to continue connecting (yes/no)? yes Password: > cd Novell-M > mkdir inm > cd inm > put index.html > put posting.html > put personality.html
or something similar.
For details about uploading to your TU Graz web site, see:
The files on your home page will look something like this:
$HP/inm/index.html
$HP/inm/posting.html
$HP/inm/personality.html
$HP/inm/city-photo.jpg
where $HP indicates the address of your TU Graz home page.
Make sure all of your XHTML pages pass the W3C Validator:
for XHTML 1.1.
Include the following code at the bottom of each of your XHTML pages:
<p> <a href="http://validator.w3.org/check/referer">XHTML 1.1</a> <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS2</a> </p>
Note that these links will only actually work once the page is online and being served by a web server.
Use my code above and not the code suggested by the validator. It is not the same.
Create a style sheet inm.css in the
inm subdirectory.
Your style sheet should (at least) do the following:
h1 and h2
headings to a sans-serif font.
h1 and h2
headings to bold.
Your style sheet may, if you wish, do other things in addition, but the web pages should remain readable.
Use only valid, conforming CSS 2.1.
All style declarations must be in the external style sheet. Do not embed any style declarations into your XHTML files.
Link the style sheet to each of your XHTML pages
using the link element.
Upload your files to the directory inm
on your TU Graz web site using SFTP or some other means.
Make sure your style sheet inm.css passes the W3C
CSS Validator:
Your INM web site should now consist of the following files:
$HP/inm/index.html
$HP/inm/posting.html
$HP/inm/personality.html
$HP/inm/inm.css
plus the image you have used, where $HP indicates the
address of your TU Graz home page.
These files (your INM web site) must remain the same and unchanged until the end of semester (31 Jan 2009).