A color value is a numerical expression that precisely describes a color.
A computer monitor generates colors by emitting red, green, and blue light at different intensities. The web browser tells the monitor to create other colors mathematically with a triplet of numbers called an RGB triplet.
RGB(red,green,blue)
These numbers range from 0 (absence of color) to 255 which is the most intense.
White is rgb(255,255,255) while orange is rgb(255,165,0) and so has no blue, just a mixture of red and green.
These triplets can specify 2^24 (16.7 million) colors (probably more colors than the human eye can distinguish).
Originally, HTML required these numbers to be written as hexadecimal numbers.
We use decimal numbers (base 10) so a hexadecimal number is base 16.
With base 10 we have 10 digits 0-9. The position of the digit with in a number gives its value.
We need to have the same thing for base 16 so we use 0-9, then
A corresponds to 10
B corresponds to 11
C corresponds to 12
D corresponds to 13
E corresponds to 14
F corresponds to 15
A color value in hexadecimal (hex) is of the form #redgreenblue
where each color is a 2 digit hex number.
So RGB (255,255,0) is yellow is #FFFF00
Of course your browser cannot display 16.7 million colors, and some are limited to 256 colors. When a browser has a web page that has a color that isn't in its palette (selection of colors), it uses a process called dithering to combine similar colors from its palette to give an approximate color. This can make the page appear fuzzy and sometimes you can even see individual pixels.
A way to avoid this is to stay with the colors available in the 216 color palette that is known as "web-safe". The intensities in this palette are limited to (0,51,102,153,204,255) decimal or (00,33,66,99,CC,FF) hex. If you want to make your pages look the same no matter which browser or screen resolution it is best to stay within these color values.
You can specify some colors (16) by name in html and xhtml. These are not part of the specification for html/xhtml but should work under most browsers.
| Color Name | RGB triplet | Hexadecimal |
|---|---|---|
| aqua | [0,255,255] | 00FFFF |
| black | [0,0,0] |
000000 |
| blue | [0,0,255] | 0000FF |
| fuschia | [255,0,255] | FF00FF |
| gray | [128,128,128] | 808080 |
| green | [0,128,0] | 008000 |
| lime |
[0,255,0] | 00FF00 |
| maroon |
[128,0,0] | 800000 |
| navy |
[0,0,128] | 000080 |
| Olive |
[128,128,0] | 808000 |
| Purple |
[128,0,128] | 800080 |
| Red | [255,0,0] | FF0000 |
| Silver | [192,192,192] | C0C0C0 |
| Teal | [0,128,128] | 008080 |
| White | [255,255,255] | FFFFFF |
| Yellow | [255,255,0] | FFFF00 |
You can define foreground and background colors for each element on a page.
Foreground color is usually the color of the text in an element, but not always.
The style to define foreground color is
color: color_wanted
where color_wanted is is either a color value or a color name.
The style to define background color is
background-color:color_wanted
If you do not define a color for an element, it will have the color of the element that it is in.
That is, if you specify a foreground color for a page, all the text will have the same foreground color, unless you change it.
<body style="color: red; background-color: blue">
Make sure you separate different styles with a semicolon.
Type attracts attention, sets the style and tone of a document. It colors how readers interpret the words and defines the overall feeling of a page. This is usually done without the user consciously recognizing any particular typeface or font.
This is your personality on paper (or a web page). By changing the font you go from casual to formal, old fashioned to modern or silly to serious.
If you use a typeface or font consistently people will associate it with you/your company.
Type is emotional on a subliminal level. For example, Helvetica is the font used on IRS forms. You may realize that it is the same font the IRS uses, but when you see it you may subconsciously remember that it was associate with a less than pleasant event.
You (the writer/designer of a web page) can use this power to your advantage, to strengthen your message and improve your image. Or you can overlook it and maybe have it work against your message.
The right typeface or font can encourage people to read your message and allow you to communicate with many more users.
It should be appropriate for the web site. Don't choose something silly for a bank or an insurance site. And don't use something like Helvetica for a dog training site.
Body copy or body text is the main content. Display type, display text or headline text is used for structure or decoration.
Typeface is a particular design for characters, like Courier, Times New Roman or Ariel.
Font is a particular typeface at a particular size in a particular style (bold, italic etc).
While they are technically different for this class I tend to use them interchangeably.
A font family is all the variations on a particular typeface (bold, light, italic, etc)
| Font Categories | Explanation | Examples | |
|---|---|---|---|
| Serif | Has a slab at the beginning and ending of main strokes. It is supposedly more legible in print. | Times New Roman Georgia | |
| San-serif | No slab. Supposedly more legible on the screen, especially at smaller sizes. | Tahoma Verdana |
You should not mix and match font attributes like different typefaces, different sizes and different colors. This will give you a visually confusing page.
Pick a style and stick with it. Make a choice for a reason!
Different sizes (larger for headings) make sense in certain situations as does italics or color.
Contrast in typography
Size -> big versus small
Weight -> bold versus not bold
Color -> you get the idea
Form -> Italic or ALL CAPS or not
Structure -> serif versus san-serif or one typeface versus a different one
Texture -> how a block of type arranges itself into a shape, heavy or lighter in feel.
Direction -> Whether the text is angled, a tall skinny block, or a short wide block.
Various -> Interrupted rhythm or spacing or isolated words, embellishment like drop shadow or embossed.
Align-left
Align-center
Align-right
Align-justify
Georgia and Verdana were specifically designed for the screen.
They are larger and have more uniform spacing between letters.
They are larger and have more uniform spacing between letters.
By default, a browser displays text in a web page in a single font (usually Times New Roman). You can change this, but be careful because not all people will have your specialized font on their machine!
Browsers recognize five generic fonts: serif, sans-serif, monospace, cursive, and fantasy.
The style to specify a font family is
font-family: fonts
A generic font is a name for the general description of a font's appearance. A specific font is a font that is actually installed on the user's computer.
You (the person writing the html) don't always know which font a browser will use so you can specify a list of fonts for the browser to try, in order of preference. You should always end the list with a generic font so that if the browser cannot find the font you want it will use the generic font.
font-family:Arial,Garamond,serif
You can set the font size – this is a bit more precise than using bigger or smaller. A particular font size looks larger on a PC than it will on a MAC.
The style is
font-size:length
where length can be specified 4 different ways: with a unit of measurement, a keyword, a percentage, or a keyword that expresses the size relative to the size of the containing element.
font-size: 0.5in
font-size: 36pt
font-size: 3pc
Size can be specified as absolute or relative units.
| Size | Meaning |
|---|---|
| mm | millimeters |
| cm | centimeters |
| in | inches |
| pt | points |
| pc | picas |
Relationships:
72 points in an inch
12 points in a pica
6 picas in an inch
Size values can be whole numbers (0,1,2..) or decimals (0.5,1.6...).
So 0.5in == 36pt == 3pc which is all one half inch. Notice that
there is no space between the number and the size unit.
These work very well when you know the properties of the output
device. But that is difficult to do with a web page that might be
displayed on a variety of machines and browsers and might even be
printed.
On a MAC text resolution is 72 pixels and graphics resolution is 72 pixels so 12 point type is 12 pixels high.
On a PC default text resolution is 96 pixels and 12 point type is 16 pixels high. (Don't ask.)
So, how do you fix? Use relative units. This will express font size relative to the size of a standard character on the output device (monitor, printer etc).
Two relative units:
"em" is equal to the width of the capital letter M
"ex" is equal to the height of a lowercase letter x
You can use relative units to make your page scalable. This means it allows the page to look the same no matter what the user's output device is or how it is configured.
You can also use pixels (px) but the exact size of a pixel again depends upon the monitor/printer and it's resolution. Because the pixel is the basic unit for screens, if no unit is given the default is the pixel.
font-size:20 is the same as font-size:20px
Browsers will adjust the font size so when you print a page, it
looks the same as it did in the browser, even though printers use
different units of measurement (usually dpi or dots per inch) than
monitors.
You can also use seven keywords to change the size of your text. Each browser is set up to display text with a particular size for each of the keywords.
They are: xx-small,s-small, small, medium, large, x-large, xx-large
In addition smaller or larger can be used to make a font one size larger or smaller than the current size.
Html and xhtml allow you to do some other typographic things such as kerning (the amount of space between pairs of letters) and tracking (the amount of space between words and phrases).
The style to control this is:
letter-spacing:value
word-spacing:value
where value is the size of the space and you specify these with the same units you use for font sizes. The default unit is also a pixel (px) and the default value is 0.
A positive value increases the size of the spacing and a negative value reduces the spacing.
Leading is the space between lines of text and you can set it with the style
line-height: length
Where length can be a specific length or a percentage of the font size. If no unit is given, the browser interprets the number as a ratio of the line height to the font size. The standard ratio is 1.2 to 1 (1.2:1) which means the line height is 1.2 times the font size. If you want double spacing you could
line-height:2
You can indent the first line of a text block (like for paragraphs) by using the style
text-indent: value
Where value is either a length in absolute or relative units or a
percentage of the width of the text block.
Some additional font options
| Style | Explanation |
|---|---|
| font-style: type | Where type is normal, italic or oblique |
| font-weight: weight | Where weight is the level of bold formatting. Values are from 100 to 900 in increments of 100. However, not all browsers can distinguish 9 different boldness. Assume normal is 400 and bold is 700 |
| text-decoration: type | Where type is none, underline,overline,line-through,or blink. You can combine these |
| text-transform: type | Where type is capitalize, uppercase,lowercase, or none |
| font-variant: type | Where type is normal (default) or small caps. |
| vertical-align: type | Where type can be done with a keyword (baseline, bottom, middle, sub, super, text-bottom, text-top, top) or a length or percentage |
You can use all of these in a single style declaration like this:
font: font-style font-variant font-weight font-size/line-height
font-family
For example:
font: italic small-caps bold 16pt/24pt Arial san-serif
You don't have to use all of these, but if you use this you must code them in this order.
All of these go on block level elements (the body tag, a paragraph tag etc) but what do you do when you want just a single word or phrase to be different?
<span > content </span>
<span style="font-size:x-small">small</span>
Web browsers generally support 2 image formats, gif and jpg.
gif – graphics interchange format
jpg – joint photograpic experts group (also known as jpeg
gif
gif is the most common format
limited to 256 colors
two sub-formats; gif87 and gif89 which has more features
Interlacing refers to the way that graphics software saves an
image. Noninterlaced gifs are saved and loaded one line at a time
starting from the top. If the picture is large, this can take a
long time and the rest of the page sometimes doesn't load until the
picture has finished. This is irritating.
An interlaced gif is saved and loaded in stages so that it starts out as a blurry image and gradually comes into focus.
This is usually better because with a larger image the user can get an idea of what it is right away. But there is a drawback – it makes the file even larger.
You can make a gif image smaller by reducing the palette of colors.
(We'll talk about Fireworks that comes with Macromedia in a few
weeks, there are other photo editing programs that you can use as
well.)
A gif can have a transparent color; that is a color that is not displayed when the image is viewed. In the place of the transparent color the browser displays the background color of the page.
An animated gif is composed of several images that are displayed one after another. You can download them or create them yourself, but don't use them too much. They can be distracting and irritating. Also, an animated GIF is larger and therefore takes more time to load than an ordinary static GIF.
jpg
jpg – joint photograpic experts group images can have up to
16,7 million colors. Even so, they are usually smaller than a
comparable gif. Jpg's don't allow for animation or transparent
colors.
In general, use gif for illustrations and jpg's for photos.
Png -portable network graphics is another format that is being used
more often. It has animation, interlacing, and transparency but
also the compression of jpg's so they are smaller than gif's. Older
browsers don't support this format. It is the default file type for
fireworks.
The default alignment for images is none, which puts them to the left in the browser and the surrounding text is either above or below it, but not next to it. You can change this with the style
float:right
When a browser encounters float it puts the element (in this case
an image) on the specified margin and wraps the other content
around it. You can use any block level element (like
<p>).
To stop the float, you use
clear: position
clear:right
would clear the above.
You can also set specific margins around an image:
margin-top:length
margin-right:length
margin-bottom:length
margin-left:length
Where length is given in one of the units previously discussed (px, pc, pt, mm, cm, in). It can also be negative, which can give an interesting effect.
Or you can combine all of them together with:
margin: top right bottom left
(clockwise around the image starting from the top)
If you put in a single value it will be used on all 4 sides, if you use 2 numbers the first will be the margin on the top and bottom and the second will be the margin for left and right.
You can specify the image size, but by default the browser will display it at the actual size. If you change the size, it doesn't change the real size, just the size of the displayed image so it is not really a good idea to do this. If you want an image to be smaller it is better to use some photo editing software. Then your page will load faster. You can put the actual size on the image tag. This means the browser doesn't have to calculate the size, and technically is good coding practice.
You can also make an image the background for your page.
Background-image:url(filename)
Server-side image map – the map is stored on a web server, when you click on a hot spot the coordinates are send to a program running on the server to determine which link to activate.
Client-side image map – the map is inserted into the html file that contains the image and the browser determines which link to activate.
We're only doing client-side image maps.
There are several steps to go through:
1)create a map element
2)create hot spots (clickable places) in it
3)connect it to an image
Create a map element:
<map name=”mapname” id=”mapname”>
hot spots will go here
</map>
Defining hot spots: you have 3 basic shapes; rectangles, circles, and polygons.
For a rectangle:
<area shape=”rect”
coords=”x1,y1,x2,y2”
href=”page”
alt=”alternate text for nongraphical browsers”
title=”popup” />
Where x1,y1 are the (x,y) coordinates for the upper left corner of the rectangle and x2,y2 are the (x,y) coordinates for the lower right corner.
(How do you get these? Either you're given them, or you open up some photo software and find them, or you use some image-map software.)
href is the page name you want to be displayed when someone clicks on the hotspot.
Alt is the alternate text to be displayed in nongraphical browsers, this is required for xhtml and I want you to include it for this class.
Title is the description that will appear if you position your mouse over the hotspot.
For a circle:
<area shape=”circle”
coords=”x,y,r”
href=”page”
alt=”alternate text for nongraphical browsers”
title=”popup” />
Where x and y are the coordinates of the circle's center and r is its radius.
For a polygon:
<area shape=”poly”
coords=”x1,y1,x2,y2,x3,y3...”
href=”page”
alt=”alternate text for nongraphical browsers”
title=”popup” />
Where the x1,y1 etc pairs are vertexes for the hotspot.
To use the map you then need to insert
usemap=”#mapname”
into the <img /> tag