Embed Size (px)
Citation preview
1
Background Background and Text Linksand Text Links
CGS3066CGS3066
Rory J. De SimoneRory J. De Simone
2
BackgroundsBackgroundsThe <body> tag has two attributes where you can
specify backgrounds. The background can be a color or an image.
Bgcolor• The bgcolor attribute specifies a background-
color for an HTML page. • The value of this attribute can be a hexadecimal
number, an RGB value, or a color name:<body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">
The lines above all set the background-color to black.
3
BackgroundBackground
• The background attribute specifies a background-image for an HTML page.
• The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window.
<body background=“stars.gif"> <body background="http://www.graphics,com/stars.gif">• The URL can be relative (as in the first line above)
or absolute (as in the second line above).
4
Note: If you want to use a background image, you should keep in mind:
Will the background image - increase the loading time too much? - look good with other images on the page? - look good with the text colors on the page? - look good when it is repeated on the page? - take away the focus from the text?
5
BODY COLORSBODY COLORS• Body colors are those that are set as the basic
colors for your page. They cover the colors of the background, text, links, visited links and activated links. The body colors are not written individually, but are all set within one body tag.
For example....<body bgcolor="#99CCCC" text="#000000" link="#993366" vlink="#000000" alink="#99CCDD>
or
or <body bgcolor="white" text="MidnightBlue" link="DarkMagenta" vlink="MediumOrchid" alink="DeepPink">
6
• NOTE: You must only ever have ONE BODY TAG on your page, and it should be immediately after your </head> tag. If you have more than one body tag, or you have it in the wrong part of your page, then the page may not load correctly with some browsers!
• You can change various pieces of text within your page to different colors as the need arises, but the body colors remain the major colors that you have selected for the rest of your page.
In the following examples,"#xxxxxx" is either the hexadecimal code, or the "colorname" for your chosen color.
7
Text and Background ColorsText and Background ColorsCOLOR• bgcolor="#xxxxxx"
This code sets the background color for your page. If you have a background image, you can still select a background color for your page. This background color will show until the image file has loaded. It is a good idea to select a background color that is similar to your background image. That way, if for some reason the background image does not load, your page will still look "nearly" right! TEXT COLOR
• text="#xxxxxx"This code sets the text color for your page. The normal default for text color is black. If you do not specify a text color, it will automatically default to black. LINK COLORS
8
Link ColorsLink ColorsLink color:
link="#xxxxxx"This code sets the color for your links. Links appear as an underlined, different colored part of the text.
Visited link color:vlink="#xxxxxx"This code sets the color for viewed links. It is useful for links which have been viewed to change to another color.
Activated link color:alink="#xxxxxx" This code sets the color for activated links. It simply means it flashes another color when clicked.
9
Examples:Examples:
10
Important:Important:• Basic Notes - Useful Tips• The bgcolor, background, and the text
attributes in the <body> tag are deprecated in the latest versions of HTML (HTML 4 and XHTML). The World Wide Web Consortium (W3C) has removed these attributes from its recommendations.
• Style sheets (CSS) should be used instead (to define the layout and display properties of HTML elements).
