Transcript MA10126lecture2

MA10126
Further 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; backgroundcolor: #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% green
80--> 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.55
0.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….