Just a Quick Note
- Just a quick note before we dive into the really fun stuff...
- Truthfully, you do not really need a book or a tutorial to learn HTML. In fact, you have hundreds of thousands of excellent examples from which you can learn for free.
- Any good web designer should spend a certain amount of time per week simply browsing the web, scanning for neat new ideas and bookmarking the sites where they are to be found.
- When you find a good site, take some time to "view the source" of the web page.
- Every web browser has a "view source" option from the menu bar that allows you to read the actual HTML code that generated a page you are looking at.
- With the HTML source in hand, you can easily reverse engineer even the most complex HTML page designs.
- So long as you do not steal content outright, the "sharing" of design tricks is one of the foundations upon which the web was built. A courteous thank you note is probably in order when you utilize complex and cool design ideas though :)
- That said, let's get into some of the fun features of advanced HTML...
Advanced Use of the Body Tag
- In Day One we were introduced to the <BODY> tag and saw that it defined where the page content began and ended.
- However, the tag provides a lot more functionality than that.
- Specifically, you can use the <BODY> tag to define a background image, a background color, a text color, and text link colors.
Using the BACKGROUND Attribute
- Most people begin their journey into the <BODY> tag by playing with backgrounds. The BACKGROUND attribute allows you to define an image that will be tiled to fill the entire browser window underneath the body content.
- For example, look at this hideous example in which we take the afraid_icon image from previous examples and add it to the background of a web page with the following HTML:
<HTML> <HEAD> <TITLE>Yucky Background</TITLE> <BODY BACKGROUND = "http://www.eff.org/afraid_icon.gif"> <H2>Here is some text which is placed above a tiled image background. Obviously, this is not the best image to use since it draws attention away from the content.</H2> </BODY> </HTML> |
- Notice that the BACKGROUND attribute simply takes an image location as the SRC attribute of the <IMG> tag did. As always, you can either use a relative or absolute link.
- The figure below shows the result of the previous code in a web browser.
- Notice how dangerous it can be to use backgrounds.
- First, like any image, background images take some time to load.
- Second, if you do not choose the image right, you can easily render your text illegible.
- Third, notice that the background image will be tiled so that it will fill up the available space. Since you cannot control the height and width of the browser window opened by your client, it is very hard to control exactly what your background will look like.
- One thing that can help solve some of these problems is to use some of the backgrounds already created for use on the web. You can find background libraries at the Yahoo Background Library which tile seamlessly, utilize safe, stylish patterns, and are small enough to not hinder download time. Of course, many of the libraries also have some terrible, psychedelic patterns as well, so choose carefully.
- Below is a web page with a more reasonable background texture.
- As we said above, since backgrounds tile automatically, it is unusual to design a background out of a single no-tiling image. You cannot control browser width and height. Thus if you design your single background for a large monitor, parts of the background will be clipped on smaller monitors whereas if you design your background for a small monitor it will be tiled on larger ones.
- One exception to that rule is the use of side bars. A side bar is a single image that tiles vertically but does not "appear" to tile horizontally.
- In a side bar, you create a short but extremely wide line with a color block filling a small margin at the left-hand border. Since the image will tile, the color block will be expanded vertically, but if you choose a width such as 1400 pixels, no browser will ever be able to open wide enough to tile horizontally.
- The following images shows a side bar image and the resulting web page (Note: We have put a black border around the side bar so that you can see it against the white background)...
Exercise Seven
- Okay, in this example you should go out onto the web and find a background that you would like to add to your page. When you find one, download it to your local machine, move it to your web server and modify your web page to incorporate the image as a background.
- Below is an example of what you are going after. Notice that you may have to use the "FONT COLOR" combination in order to make your text legible.
