MA10126Further HTML and Web design

Gavin Shaddick

www.bath.ac.uk/~masgs/ma10126.html

A touch of style

• Cascading style sheets (CSS)

• A simple mechanism for adding style (e.g. fonts, colours, spacing) to Web documents.

• Separate format from content

• http://www.w3.org/Style/CSS/

Example: setting the colour of the text and the background

• Purple text, sludge green background– <style type="text/css"> body { color: purple; background-

color: #d8da3d } </style> – The stuff between the <style> and </style> is written in special

notation for style rules. Each rule starts with a tag name followed by a list of style properties bracketed by { and }.

• In this example, the rule matches the body tag. As you will see, the body tag provides the basis for setting the overall look and feel of your Web page.

More style…

• Each style property starts with the property's name, then a colon and lastly the value for this property.

• When there is more than one style property in the list, you need to use a semicolon between each of them to delimit one property from the next.

• In this example, there are two properties - "color" which sets the colour of the text, and "background" which sets the colour of the page background.

Colours

• Colours can be given as names or as numerical values, for instance rgb(255, 204, 204) which is a fleshy pink.

• The 3 numbers correspond to red, green and blue respectively in the range 0 to 255.

• You can also use a hexadecimal notation, the same color can also be written as #FFCCCC.

Hexidecimal (colours)

• The hexadecimal number breaks down into three pairs– the first pair of digits give the red value– the second pair the green value– the last pair the blue value

• Each pair can go from 00 to FF, which in regular base-ten numbering works out to the range 0-255.

More on hexidecimal (colours)• C0--> 75% red

A2--> 63% green80--> 50% blue

• How do you get the percentages ?– Red: C0 hex --> 192 decimal

192/256 = 0.75 (in other words, 75%)

• In order to figure out the hexadecimal value of a given percentage, simply divide it by 100, multiply that by 256, and convert the result to hexadecimal notation. As an example: – 55% red would be

55/100 = 0.550.55 * 256 = 140.8 (round to 141)141 decimal --> 8D hex

Thankfully - an easier way• Common colours can be named, rather than using

hexadecimal numbers.– Black = "#000000"

• Maroon = "#800000" – Green = "#008000"

» Navy = "#000080" » Silver = "#C0C0C0" » Red = "#FF0000" » Lime = "#00FF00" » Blue = "#0000FF" » Gray = "#808080" » Purple = "#800080" » Olive = "#808000" » Teal = "#008080" » White = "#FFFFFF" » Fuchsia = "#FF00FF" » Yellow = "#FFFF00" » Aqua = "#00FFFF"

Different colours

• Different computers/browsers can display a given colour code differently.

• This is true for all graphics, but it can be more noticeable with a solid-color background. – the code representing brown on a Macintosh will show

PC users a colour other than brown, and vice versa

• Keep in mind is that what you see on your screen won't necessarily be what others see on theirs.

Cool colours ?

• Truly ugly pages are now within anyone's reach!

• Suppose you set a page up so that all the links, both active and visited, are coloured black, the same as the normal text. – Therefore, when a user reads the page, they

have no way of seeing at a glance where the links are.

Carrying on…

• http://www.w3.org/Style/Examples/011/firstcss

• http://www.w3.org/MarkUp/Guide/Style.html• http://www.w3.org/Style/CSS/• Validation

– http://jigsaw.w3.org/css-validator/

• Fancy!– http://www.csszengarden.com/

More information on HTML

• See the BUCS web information webpage– http://internal.bath.ac.uk/web/about/

• An introduction to HTML and more…– http://www.cwru.edu/help/introHTML/toc.html– http://www.htmlhelp.com/

• Very comprehensive site with a great name

• http://freespace.virgin.net/sizzling.jalfrezi/

Easy loading

• Remember that the more images and fancy backgrounds you use, the longer it will take your pages to load

• Not everybody is logging on from a network, can be very slow

• Try not to use browser specific ‘plug-ins’– Extra pieces of software required to perform

animation, effects etc….