|
Home : Tutorial Four : Next Tutorial Tutorial Four: The Document BodyBody
Tag Attributes The main section of a webpage begins with the body tag which provides the browser with some fundamental information about how to display the page. The 'body' of the document refers to everything between the opening <body> and closing </body> tags. Attributes can be added to certain HTML tags, modifying their resulting appearance. Body can be modified to include:
You may note that we are using the american spelling of color as opposed to colour. HTML uses color and center (not centre). The restrictions of web color are expanded in Tutorial 11 as it can be complex, but some understanding is required for basic body elements. Webpages use the hexidecimal color system and are made color-safe by limiting this use to a range of 216 colors - known universally as the web-safe or indexed palette. This palette is RGB - based on red-green-blue components. The value of each component is denoted by a number from 0-FF in hexadecimal speak, or 0-255 in decimal speak. For instance 255 255 255, which is the maximum value for red, green and blue, is identical to the hex value FF FF FF - which is what we perceive as the color white. At the other end of the scale, a minimum value in each range - 0 0 0 or 00 00 00 gives us black. Lynda Weinman has a chart which displays the full 216 color range and their corresponding hex and RGB values. Alternatively, Joe Jennet's ColorSpeak website provides an option for you to view the colors in different orders and by HSL (hue, saturation, lightness). Combinations of these RGB values give us all the other websafe colors in between. There are many conversion and color choosing utilities available to help you determine hex values, examples including the excellent Palette Man Resource and the PDI ColorPicker. Peter Stagg, a multimedia programmer at Monash has developed an interactive color picker. It is possible to simply name a color as 'white' or 'black' but this may not be supported by all browsers, the full range of colors cannot be specified this way, and most html editing software will use the hex system anyway, so it is logical to begin utilising it from the beginning. Now that we understand the basic principal behind colors on the web, we can begin to select colors for specific elements. One of the first will be the color you choose as a background. Even if you decide to use an image as a background it is a good idea to still specify a bgcolor - background color loads before background images. Although this may not be as noticeable on a fast internet connection, a specified background color creates a more appealing visual clue about what is about to download than the default grey displayed by browsers, should no background color be set or there is problem with your images. For this reason it is wise to choose a shade similar to that of the background graphic, should one be used. A portion of your audience may have selected not to view images, either by preference in configuring their browser or by using a purely text-based browser - this scenario (the browser default grey) combined with a choice of light text over a dark background image would result in an unreadable page! Background color is set using the format:
The correct HTML syntax states that a # (hash) must be used to denote hex colors, and that the attribute be placed within quotes. Other tag attributes also require quotes, but not a hash. In this tutorial white has been chosen. Backgrounds are a significant feature in web design. Your choice should take into consideration the purpose of the page. Is it to be used for visual display or is it providing information where readability is of the utmost importance, as would be the case in material of an academic nature? White may appear a bland choice with so many colors available, but it does make the reading experience a pleasant one. Specifying a background image instructs the browser to underlay a graphic on the page. This loads over the specified background color and so takes precedence. Graphics for the web are restricted to two formats - JPEG (Joint Photographic Experts Group, pronounced jay-peg) or GIF (Graphics Interchange Format) and these are explained in Tutorial 11. Another format, PNG (Portable Network Graphic) has been introduced but as yet does not have wide browser support. In a nutshell, the JPEG format is ideal for photographs and subtle color gradations, whilst GIF handles flat colors tied to the web-safe palette. Both are a means of compressing images in order to create small file sizes. Linking a graphic to a page is not the same as using one as a background for the simple reason that browsers 'tile' background images to form a repeating pattern. Therefore most background images are small patterns designed to repeat seamlessly - that is, you do not notice where the edge of the pattern begins and ends. This provides the illusion of a full screen graphic, which would otherwise be too large in file size. The small image is loaded only once by the browser, which fills the screen no matter what size that screen may be - 14 inch to 21 inch. Here are examples and links to the actual pages where the tiling effect can be seen:
A large graphic can be used but consideration needs to be given to the fact that browser windows can be resized, and that a variety of monitor sizes and resolutions must be catered to. A good example of the use of a large background image can be seen on the Monash Student Union site. Although this is very effective, the file size is noticeably larger - 41k in fact, 693 x 596 pixels - not necessarily a problem if other elements on the page are kept to a minimum. A background image is set using the following format, where images/back.gif denotes the location and name of your image:
As with background color, consider the readability of the page in choosing a background image and matching text. Contrast is important. Hyperlinks are the navigation system of the web and it is reasonable to presume you would like visitors to understand where those links are on a page. For this reason it is possible to highlight and underline words or sentences that can be clicked to lead on to another page or website, or perform some function using javascript. We will cover creating links in Tutorial 10, however it is within the body tag that we specify link colors. Links have three states: An original state, hence an unvisited or link color; An active state when they are clicked, hence an active or alink color; A visited state when they have been selected, hence a visted or vlink color. Link colors are set using the format:
This would set our links to be #336666 when unvisited, #663333 as they are being clicked and #cc9999 once they have been visited. It is important to remember that if you use images as clickable links, something this course will cover, the default image border will appear as the link color. To disable this, set the image border to "0".
It is possible to override these link colors (and the automatic underlining) in version 4+ browsers using Style Sheets. If you are not using styles, or are catering for older browsers and do not set them in the body tag, browser default colors will be used. Link colors can be a contentious issue, where designers prefer to select shades that compliment layout schemes, relying on the audience's intelligence and net savvy in recognising links - as opposed to HTML purists who adamantly propose keeping to the original and default link colors. Both arguments are understandable, however the onus will alway be with the audience who have the ability to override most html color settings via browser preferences. Setting the base text color can be achieved using the body tag and the text attribute:
Text color can be overridden at any time using the <font> tag with the color attribute: <font color="#cc6600"> which results in a change up until the font tag is 'turned off' by a </font> tag or by using style sheets. More on this in Tutorial 5. Most browsers add a generous amount of margin space around a page which is normally fine, however there may be times when a close alignment to the edge of the browser window is desired or you may wish to increase the margins. Internet Explorer supports two attributes that grant margin control - topmargin and leftmargin. Netscape Navigator supports marginwidth and marginheight which do the same job. It is safest to include both sets of attributes in order to 'cover all bases'. This is particularly useful when incorporating frames which are covered in the next course. If no margins are preferred, the syntax would be:
Only one body tag can be specified for a webpage and therefore any of the above attributes can be combined to accommodate the desired layout:
This tutorial series was authored by Wendy Phillips It is copyrighted which means you may not pinch any of it |
