Download presentation
Presentation is loading. Please wait.
1
Math 10126 Further HTML and Web design Gavin Shaddick www.bath.ac.uk/~masgs
2
Backgrounds Originally the BODY tag had no attributes Backgrounds were introduced While a good background can make a page look really great, there are few things worse than an obnoxious background You can specify two kinds of background using the BODY tag. The first kind is a solid color; the second, a tiled image.
3
BGCOLOR If all you want for a page's background is a solid colour, then you can specify it using the attribute BGCOLOR The value of bgcolor is a hexadecimal number that represents the color you want. –e.g. –where xxxxxx is a six-digit hexadecimal number such as C0A280. –e.g. gives a medium tan backgrounde.g. gives a medium tan background
4
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.
5
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
6
Different colours Different computers/browsers can display a given color 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 color 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.
7
Thankfully - an easier way Sixteen colors 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"
8
The easier way Therefore, to set the background colour of a document to white, you would use the BODY tag: – You do not preface a named colour with a pound- sign. Why even bother with the hexadecimal notation? –not every browser will recognize the same named colors as every other browser –you can directly specify the exact colour you want
9
Background What if you want something fancier than a solid colour ? This can be accomplished using an image of a single tile, which the browser will repeat indefinitely
10
Zen like background For example, this image could be used as a background Inserting the location of the file containing the figure into the BODY tag – Other examples,
11
Colouring your text Using BODY attributes, it is possible to set –the color values of ordinary text (using text) – the text of hyperlinks (link) – the text of already visited links (vlink) –the color which the browser uses to highlight a link when it's selected by the user (alink, which stands for "activated link").
12
A world with lots of nice colours To set up a page with a black background, white text, and light blue links, the markup would be: – or <BODY bgcolor="#000000" text="#FFFFFF" link="#90C8DB"> or <BODY bgcolor="black" text="white" link="cyan">
13
Or is it ? Truly ugly pages are now within anyone's reach.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 colored 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.
14
Nice colour scheme mate! Colours should make the page more appealing and easier to read, not the opposite It is best to pick an image which is either mostly light, or mostly dark, and set the text colour accordinglyIt is best to pick an image which is either mostly light, or mostly dark, and set the text colour accordingly Remember that some users may have their browsers set to use their own colours and ignore yours.
15
Font tags Using the FONT tag, one can alter the colour of text, or the size, or both at once. This tag could also be used to change the actual font The BODY attributes work on the whole page, this is used for individual words / sentences Use the... and the colour attribute
16
Colours in font tags If we want word "maroon" to be colored maroon in the following sentence: –“References to Silsby&Clarke are in maroon. “ –References to Silsby&Clarke are in maroon. Colours may also be specified using the triple-hex notation The colour you specify in a FONT tag overrides any colours you may have set in the BODY tag of the document
17
Size isn’t everything You can also change the size of the text using the FONT tag. This is done using the size attribute. The values of size are the numbers 1 through 7, and also relative values such as +2 or -1. The default size is 3 – Small – Bigger - Wahoo! –You may notice that the scale for FONT sizes is exactly backwards from headings, where the most important (and, therefore, usually the largest) heading is H1
18
Sub and superscripts You may want to use sub and superscripts This is achieved using the SUB and SUP tags –Markup: H 2 SO 4 + CO 2 = ? –Result: H 2 SO 4 + CO 2 = ?
19
More information on HTML See the BUCS web information webpage –http://www.bath.ac.uk/web/http://www.bath.ac.uk/web/ An introduction to HTML (with many of the examples seen here) –http://www.cwru.edu/help/introHTML/toc.htmlhttp://www.cwru.edu/help/introHTML/toc.html Very comprehensive site with a great name http://freespace.virgin.net/sizzling.jalfrezi/
20
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….Extra pieces of software required to perform animation, effects etc….
Similar presentations
