Tutorial 3 Designing a Web Page
Color There are 16 basic color names that are recognized by all versions of HTML: black, white, aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow Netscape and Explorer provide an extended list: blueviolet, chocolate, darkgoldenrod, firebrick, gold, hotpink, indigo, mintcream, orange, paleturquoise, peachpuff, salmon, seagreen, sienna, snow, tan
Color Values Any color is a mix of three basic colors, red, green, blue (R, G, B) The intensity of each color is assigned as a number between 0 and 255. We use hexadecimal numbers (hex for short) - the hex number corresponding to 255 is FF, the hex number for 0 is 00 (always 2 digits). For example yellow is an equal mix of red and green (255, 255, 0) with a corresponding hexadecimal triplet of FFFF00 See page 3.07/3.08 for more resources
Specifying a Color Scheme You need a color for the: background (bgcolor) Text (text) Link (link) Link that has been visited (vlink) Link that is being selected (alink) We specify the color either by name or #hexadecimal triplet i.e. either “red” or “#FF0000”
<body bgcolor = “#CDF0FF” text = “darkblue” link = “red” vlink = “green” alink = “purple”> This declares the color for the entire document, but you can change colors within the document. Suppose you want to change the color of the text of one particular phrase <font color = “maroon” >Hi There </font>
Changing the font You can also change the font face and size <font size = “4” face = “Arial, Helvetica, sans-serif”> Saint Xavier </font> The browser will type the text in size 4 and in Ariel if that font is installed on the computer, if not it will look for Helvetica, and then any generic sans-serif font.
Size Sometimes you don’t know exactly how big to make the text – Size 4? Size 5? Size 10? One option is to try it out and see what it looks like Another is to decide on the size relative to the surrounding text. If you just want it a little bigger than the previous text make size = “+1” (size = -1 makes it one point smaller)
Background Image <body background = “bricks.gif”> makes bricks.gif the background. The image is tiled – repeated over and over until it fills the page.
Tutorial Open arcatxt.htm in tutorial.03/tutorial folder and save as arcadium.htm Make the changes indicated in the gray boxes on pages 3.09, 3.13, 3.14, and 3.18
Deprecated Tags Are those that are considered outdated. Currently they can be used, but newer versions of HTML will not support them (they will not work in newer versions of HTML)
GIF (Graphical Interchange Format) Files Most commonly used Compatible with most browsers Limited to 256 colors, so usually used as clip art, line art, logos etc Not usually used as photos
Interlacing Noninterlaced gifs are displayed one line at a time, starting at the top. The image takes time to be displayed, but whatever you can see is sharp. With interlaced ones, every fifth line will be displayed first, then every sixth line etc. The image is initially seen in its entirety but blurry and then gets sharper.
Transparent Colors Are those colors in a gif file that are not displayed when the gif is displayed – allowing the background color of the page to come through.
Animated GIFs Are composed of several images, displayed one after the other to create animation. Many collections exist on the web (pg 3.24) There are also many places on the web where you can create your own (page 3.23) Insert the animated gif into your web page (page 3.24)
JPG (Joint Photographic Experts Group) jpg files differ from gifs in many ways: They use the full 16.7 million colors (and are therefore suitable for photographs) They use a file compression algorithm that enables them to be smaller (in memory size NOT image size) than gifs. They cannot use transparent colors They cannot use animation
Image alignment and size <img src = “ride.jpg” align = “left”> There are 7 different alignments, the main ones being top, bottom, middle, left and right. See the differences on page 3.29 Height and width values can also be specified (in pixels) in the image tag <img src = “ride.jpg” align = “left” height = 120 width = 200>
Space Around the Image This can also be specified in the image tag: <img src = “ride.jpg” align = “right” hspace = “15” vspace = “20” height = “200” width = “150”> In this case the image will be placed on the right. The height of the image will be 200 pixels, width 150 pixels, and there will be 15 pixels of horizontal space between image and text, 20 pixels of vertical space.
The Alt Attribute Allows you to specify text in place of your image. This text is displayed while the image is loading and also when your mouse hovers over the image. It allows the user to know what the image is as it is loading It is useful for users whose browsers will not display the image
General Tips Try to keep your page to 50Kb max. this will keep load time to a reasonable amount. You can do this by: Reducing the size of the image. Use an image editing application. Seeing if jpg format is smaller than gif. Using thumbnails Reusing images.
Insert ride.jpg into your web page (see page 3.27) Now alter the alignment to bottom, middle, top, left, right. Confirm your page looks like figure 3-34, page 3.29 Leaving the alignment at “right”, alter the spacing around the image (see page 3.30) and confirm your image looks like figure 3-36 In the image tag, insert an alt attribute, page 3.33 figure 3-38
Lab Complete Case1
Image Maps These are images in which certain areas (called hotspots) are links We must first define a map using a map tag. This can go anywhere in the body of the page <map name = “mapname”> </map> Now indicate the image uses this map < img src= “rocks.jpg” usemap = “#mapname”>
Within the image map we need to create the hotspots. Each area tag requires a shape, coordinates, and a url <map name =“mapname”> <area shape = “rect” coords = “10, 20, 50,70” href = “url” target = “window”> <area shape = “circle” coords = “10, 20, 50” href = “url” target = “window”> <area shape = “polygon” coords = “10, 20, 50, 50, 30, 60, 60, 80” href = “url” target = “window”> </map>
Borders Some browsers create a border around an image that contains links. You should alter this default by specifying your own border (even if you want it to be zero) <img src = “url” usemap = “#mapname” border = “0”>
Lab: Case 2 & 3 (you may need to finish Case 3 as homework) Homework: Case 4. Due Sat 18th, midnight