In this exercise you will build a small web site in Polyglot XHTML5 and CSS 3.
Please read these instructions carefully!
Please also read the corresponding chapter(s) in the current lecture notes (the PDF file) before you start.
Your TU Graz web space should have been activated automatically for you.
The address of your TU Graz web site should look like this:
http://www.student.tugraz.at/koarl.testerl/
where koarl.testerl is the first part of your TU Graz email address, before the @ character.
I will use $HP as a shorthand for your TU Graz web site.
Further information is available at:
http://portal.tugraz.at/portal/page/portal/zid/netzwerk/dienste/homepage/studierende
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.
Your file and directory names must be in all lower case and must not
contain any spaces or special characters (such as Umlauts, tilde ~, or
percent %). Use a hyphen (-) to separate words if you need to
(e.g. generic-photo.jpg).
Mixed case, 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 PSPad, Crimson Editor, Notepad, Emacs, UltraEdit, or Sublime Text.
Microsoft Word, Netscape Composer, FrontPage, Dreamweaver, Adobe Edge, Microsoft Expression, etc. are not plain text editors and their use is strictly forbidden in this course!
Use only valid, conforming Polyglot XHTML5.
Do not disclose any personal information about yourself or someone else. For example, you do not have to tell everyone your Matrikelnummer or phone number.
Create a local file called index.xhtml containing between
100 and 200 words of text about your favourite tourist attraction (or
sight) in Graz in the style of a review. Choose a tourist attraction
which has a proper street address (see below). Write the text in
your own words, do not copy from anywhere else. You may use
this skeleton XHTML5 file, if you wish.
Save the skeleton locally by right-clicking on the link and "Save Link As...". Do not open it in a browser and then use "Save Page As...", since some browsers modify the content without telling you.
Include a photograph of your favourite tourist attraction, which you clearly have permission to use, because one of these applies:
Use appropriate XHTML5 tags to add a caption beneath the photograph, which describes its content.
At the end of the caption, include the following information inside square brackets [...]:
The source of the photograph, with a link to the source.
For example:
The clock tower in Graz. [Photograph by David Iliff, from Wikimedia Commons, used under the terms of CC BY-SA 3.0.]
or
The bell tower in Graz. [Photograph by Marion Schneider, from Wikimedia Commons, placed in the public domain.]
If you took the photograph yourself, it is sufficient to write, for example:
The clock tower in Graz. [Photograph taken by the author.]
For this exercise, choose a tourist attraction which has a proper street address (see below), i.e. probably not one the two above.
Include the street address and at least three other pieces of
information (for example, opening times, number of
seats, smoking status, entrance fee, telephone number, etc.) about
your tourist attraction in a Polyglot XHTML5 table.
If your tourist attraction does not have a street address, use the closest nearby street address you can find.
Include a link from the street address of the tourist attraction to a web site which displays a map of that location (such as Google Maps or Open Street Map). For example: Inffeldgasse 16b or Inffeldgasse 16c.
Create a new file posting.xhtml containing a Polyglot
XHTML5 version of your initial newsgroup posting (new topic). Format
your original text with appropriate Polyglot XHTML5 tags.
Create a new file person.xhtml containing a Polyglot
XHTML5 version of your (entire) web research report about the computer
scientist your tutor sent you for Ex3. Format the text with
appropriate Polyglot XHTML5 tags.
Include all the information from Ex3 about the person, formatted with appropriate Polyglot XHTML5 tags.
Include the reference to the most recent publication by the person in the IEEE Digital Library (from Ex3), formatted with appropriate Polyglot XHTML5 tags. Make the DOI clickable to the generic DOI resolver (dx.doi.org).
Include the reference to the most recent publication by the person in the ACM Digital Library (from Ex3), formatted with appropriate Polyglot XHTML5 tags. Make the DOI clickable to the generic DOI resolver (dx.doi.org).
Include your summary of the person's most recent IEEE paper, formatted with appropriate Polyglot XHTML5 tags.
In the summary, use the blockquote tag for the direct
quotation from your person.
Keep your lines of source code to 80 characters or less.
This does not mean you have to insert
br tags into your XHTML5 every 80 characters
or that you have to use the pre tag.
Simply type shorter lines into your editor and use the Return
key!
If you have a very long URL, which you want to use as a link:
First, try to find a shorter form of the link which still works (e.g. try it without "www.", chop off various options and parameters).
Do not use URL shortening services like tinyurl, shorl, snipurl, etc. There is no guarantee how long these services will exist.
If all else fails, use the link in a single line, even if the line extends to more than 80 characters.
Create relative links from every XHTML5 file
to every other XHTML5 file.
Place these links inside a nav element.
Take care with file extensions. Windows XP, Windows Vista, and Windows 7 hide file extensions by default. You have to explicitly turn on their display.
Do not use any of the following tags in this exercise:
scriptstyleiframecanvasbiusmallstronghrbrDo not use JavaScript. It is not necessary for this exercise and its use is forbidden.
Do not do styling inside the XHTML5 file. Any styling should be inside the external CSS style sheet.
You may include (a few) other images, as you wish.
Each of the following must be used appropriately at least once, somewhere in any one of your three XHTML5 files:
The h1, h2, p,
em, ol, ul,
section, and footer elements.
A Unicode UTF-8 Telephone Receiver symbol (U+1F4DE), for example next to a telephone number (see below).
The easiest way to insert a unicode character is to search for it online, then copy and paste it into your XHTML5 code.
A clickable telephone number using a link with a
tel: URI.
If you cannot find a telephone number for your favourite tourist attraction, then you migth give a different telephone number later in your text, say for the Graz Tourist Office.
Appropriate UTF-8 quotation mark characters to enclose the quotation: “...” for English and „...“ for German texts.
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.
Choose an appropriate resolution for each image, not exceeding 1000 × 1000 pixels.
Each image must not exceed 100 kb in size!
Specify the width and height of each image up front (as described in the lecture notes), either in your XHTML or in your CSS (see below). You may scale the image, but do not skew it (i.e. keep the aspect ratio of the original).
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 MS-P > mkdir inm > cd inm > put index.xhtml > put photo.jpg > put posting.xhtml > put person.xhtml
or something similar.
For details about uploading to your TU Graz web site, see:
http://portal.tugraz.at/portal/page/portal/zid/netzwerk/dienste/homepage/studierende
The files on your web site will look something like this:
$HP/inm/index.xhtml
$HP/inm/posting.xhtml
$HP/inm/person.xhtml
$HP/inm/photo.jpg
where $HP indicates the address of your TU Graz web site.
Make sure all three of your Polyglot XHTML5 pages pass both the W3C Nu Validator and Total Validator:
W3C Nu Markup Checker is an online validator service:
.xhtml)
You can see an example screenshot.
Total Validator works both as a local standalone program and as a Firefox extension:
You can see an example screenshot.
When you validate an XHTML5 file, a single mistake (say forgetting to
use a closing </p> tag) can result in a cascade of
error messages. Attend to them from the top; often several error
messages will disappear with one bugfix.
Create a style sheet named inm.css in the
inm subdirectory.
Your style sheet should (at least) do the following:
Set the text colour to "#010201".
Set the background colour to "#f5f4f4".
Set the font family for h1, h2,
h3, h4, h5, and h6
headings to "Verdana", with any available sans-serif font as a backup.
Set the font weight for h1, h2,
h3, h4, h5,
and h6 headings to bold.
Set the font family for normal text in the body to "Georgia", with any available serif font as a backup.
Use the CSS properties border,
padding, and background-color
to draw a frame around your image(s).
Your style sheet may, if you wish, do other things in addition, but the web pages should remain readable.
Use only valid, conforming CSS3 which works in Firefox 33 or above. We will test your style sheets using Firefox 33 or above, so do not use any CSS which is not supported in Firefox 33.
You can check browser compatibility
at caniuse.com
and other sites.
Do not use any browser-dependent experimental features of CSS3, such
as those beginning with -webkit-, -moz-,
or -ms-.
Do not use any images in your stylesheet.
All style declarations must be in the external style sheet. Do not embed any style declarations into your XHTML5 files.
Link the style sheet to each of your Polyglot XHTML5 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 for CSS3:
I suggest you test your pages using recent versions of both the Firefox and Chrome browsers. IE8 and below do not support XHTML5. IE9 supports XHTML5, but not particularly well.
XHTML5 and CSS3 are quite recent. No browser (or validator) is perfect. Some browsers support more of XHTML5 and CSS3 than other browsers. So, expect to encounter occasional bugs.
The tutors and I will generally be using Firefox 33 or above to view your web pages.
Your INM web site should now consist of the following files:
$HP/inm/index.xhtml
$HP/inm/posting.xhtml
$HP/inm/person.xhtml
$HP/inm/inm.css
plus the image(s) you have used, where $HP indicates the
address of your TU Graz web site.
Only the files which are actually used in your web pages should be
left in your inm subdirectory. Do not leave any other
files (backups, earlier versions, previous formats, junk) lying
around.
These files (your INM web site) must remain the same and unchanged until the end of semester (31 Jan 2015).
