COMP1710 : Laboratory 3, version 1.1 : CSS

1. Objectives

This Laboratory is about CSS (Cascading Style sheet). You will learn how to fully externalise the visual representation of a text (graphical attributes) from the text itself.

2. Tasks

2.0.0 Task for before the lab

Make sure that you had read the lecture notes, explored the recommended web site (Westciv) and had a look at the list of other interesting web sites.

2.0 Task0

As for any future lab work, make sure to include in your home directory an index.html file that list and link to the produced work. For instance, there should be a "Task 1" title, with two links towards the demo.html and demoCSS.html pages.

2.1 Task1

You will base your work on your own lab2 work
Duplicate the demo.html into a demoCSS.html. Within the demoCSS.html page, you will remove all reference to the 'font' HTML tag, as to any visual tag dated from HTML3.2 and before (this include the bgcolor attribute of the 'body' tab).You will then put all the necessary information within a CSS encapsulated into the header of the page. At the end, the two pages should look exactly the same. You eventually will introduce two links close to the top of each page in order to allow for a fast switch from one version to the other (make sure that the links are meaningful and also the title of each page ( "Go to the CSS version of the demo page" for instance).

2.2 Task2

Still using previous laboratory 2 pages, you will create a CSS file at the root of your web site and attach it to the remaining pages (all except demo.html and demoCSS.html). That CSS should centre and colour in blue on an light orange background all the level 1 headings, with a thin black bounding box. It should too provide a specific look and feel on the bottom menu bar. Try to get the same design  (or a better one) that what you achieved with the lab 2 (this will be an interesting challenge for those of you who used tables for their previous lab : there should not be any table anymore in this very lab work).

See the Task 3 for some examples of what a css file looks like.

3. Conclusion

After this lab, you should know enough about CSS to change the default look of your web pages without affecting the neutrality of its HTML files.

4. Extra work ... if you want to become an expert ...

Little challenge : look at the following page and try to guess the CSS (without looking at the code, of course !!)

Task3 : Give a new look and feel to the slides, the online and the print version the COMP1710 pages.

Here are the various styles I am using  for the lecture pages'slides and the matching CSS file for the slides, online and print version. You will understand the context in which they are used, general context or what I call 'mode', and rule specific one.

There are 3 modes of use of the slides :

Note that you could guess it by yourself, just by looking at the header part of the html of the slides, from which here is an extract :

<link rel="stylesheet" type="text/css" href="/lecture/comp1710/lectureNotes.css" media="screen" title="Lecture Notes">
<link rel="Alternate StyleSheet" type="text/css" href="/lecture/comp1710/lectureSlides.css" media="screen" title="Lecture Slides">
<link rel="stylesheet" type="text/css" href="/lecture/comp1710/lecturePrint.css" media="print">

You will propose 2 new CSS files (sets of rules), one slide mode and one web mode and demonstrate them in a given set of web pages extracted from the  the lecture web site

4.1 Rules

4.1.1 H1

They should be only one visible H1 per slide. By visible, I mean visible in slide mode. There could be another one or two H1.lecturetexte visible only in web and print mode. Sometims, when a couple of slides are closely related, I use an H3 that immediately precede the H1 to remind the context of the group of slides

4.1.2 H2

H2 is used to list the main points within a slide (up to 4 or 5 visible H2 per slides ?). There could be some 'lecturetexte' text that follows it (and therefore not visible in slide mode)

4.1.3 H3

H3 is a sub point attached to a specific H2 point. There could be some 'lecturetexte' text that follows it (and therefore not visible in slide mode)

4.1.3 H4

H1 H2 and H3 should note span on more than one line. H4 is there for longer citation

4.1.4 H5, H6

H5, H6 are there for minor point that should still be visible on the slides

4.1.5 .lecturetexte

The 'lecturetexte' class is the main one that make the difference between slide and web/print version : Anything that is tagged with the 'lecturetexte' class will be visible in the text and print version and invisible in the slides version

4.1.6 .javacode and .javacodeNew

This class are used to tag programming extract (Example : )

.javacodeNew is used inside a javacode-tagged block to point out some modification to a previous example of code or to insist on some part of the code (Example : )

4.1.7 .htmlCode and .htmlCodeNew

like .javacode, they are used to display monospace type text : HTML code, because the marked text is on average smaller than for code, it could be display with bigger font and/or more margin

4.1.8 .lecturenotes

Those text should not be visible at any time : they are ideas, temporary content and notes that I use to develop the real content itself

4.1.9 .indice and .exposant

This is bad ... I should be using <sup> and <sub> standard tags instead. But because they were not easily accessible from dreamweaver, I used a style sheet instead. I should clean my slide and get rid of these aberrations, but in the meantime, these styles should remain around

Ex of use : H<sub>2</sub>O
E = mc<sup>2</sup>

4.1.10 .math and .mathNonCenter

Mathematical expressions. .math is for block element, .mathNonCenter is for inline text.

4.1.11 .redBox and .surligne

Two ways to insist on some special information

4.1.12 .container, div.figure p and object

Rarely used :

.container :

others :

4.1.13 .slidesep

Separation between each slide on the print version

4.2 New styles

You may want to introduce new tag style

4.4 Pages to dress to demonstrate your style

You will include the following pages, duplicate them and link your 'web' and 'slides' style sheets to each of them and include both HTML and CSS files in your submission.


5. Summary to get 3 marks for this lab session