Next Page
Previous Page
Why have just a plain, boring Web page when with HTML you can customize
your Page extensively by using Color, Images, Sounds, Movies, Marquee's and
various other techniques which make your page unique. Below are a few of
the options you can use to customize your page.
Color
Changing your Background and Text colors can create an impression on
your reader depending on the colors. Soothing colors can make the reader
feel at ease while rich, bold colors can enliven and excite your reader.
The are many colors available, but not all are recognized by all browsers. You can use the color "Name" or a "Hexidecimal Value" assigned to the color. You can view the Hex values at: http://www.december.com/html/spec/color.html.
The recommended way to code color is by Hex Value specified in quotes with
a preceeding number sign ("#FFFFFF"), as it translates across all browsers.
If you choose to use the Name, then be safe and stick with the most
common 16 colors (known as Safe Colors) used in the Windows Color Palette:
--Black, White, Grey, Silver
--Blue, Navy, Teal, Aqua
--Green, Olive, Lime, Yellow
--Purple, Red, Maroon, Fuschia
There are various attributes within the "BODY" tag which you can use to change the Background color, Background Image, color for Text, Links, Active Links and Visited Links. They are:
| ATTRIBUTE | DESCRIPTION | DEFAULT |
|---|---|---|
| BGCOLOR | Changes the background color for the page | use color/hex value |
| TEXT | Changes the Text color for the page | Black |
| LINK | Changes the color for all unselected links | Blue |
| VLINK | Changes the color for all Visited links | Red/Purple |
| ALINK | Changes the color for all Active links | Red |
| BACKGROUND | To access a file as an Image for your background |
There are various types of Backgrounds, such as Color, Image and Watermark.
To change Background color use the BGCOLOR attribute. Remember that when you change the Background color, you might also want to change the TEXT color for readability.
When using an IMAGE for a background that is smaller than the screen, the browser will TILE the image to cover the entire page, unless you make it fixed.
The WATERMARK background is a fixed pattern or image. When you scroll down or up the page, Only the TEXT and images if the forground scroll and not the Background itself. This option is browser dependant and will appear as a regular background image for other browsers, code: "BGPROPERTIES=FIXED" with your BACKGROUND attribute.
Code as follows:
<BODY BGCOLOR=NAVY>
--or--
<BODY TEXT="#000080">----Which translates to NAVY
--or--
<BODY BACKGROUND="images/backgrounds/greenspk.gif">>---gets image file
for the background
EXAMPLE:
All of your Text will be in NAVY unless you use the "FONT"
attribute to override the Body Text Attribute.
Showtime with Marquee's
Just like at the Movies or outside large Businesses, you can have your
own MARQUEE which can scroll information across the page. The Marquee is
customizable, which means you can change the Background color, Alignment,
Scroll type/Direction, Height, Width, etc. The "MARQUEE" tag is two-sided
and must have a closing tag. You can use the "MARQUEE" tag inside the "HEADER"
tags to obtain the Header characteristics. However, you cannot change Font,
or Text color because the Browser controls the Header attributes.
There are various attributes within the "MARQUEE" tag which you can use to customize your Marquee:
EXAMPLE:
Multimedia Tags
Multimedia includes Images, Sounds, Movies, Animated images, etc. These
can be used to bring life to your Web page. Some of the basic tags and the
associated attributes are described below.
There are two tags used in the Multimedia family:
Accessing Images, Waves, Movies, etc.
Images, Waves or Sounds, Movies, Animated files all help to make our pages
come alive. They can be either Internal or more commonly External. Inline means
the Image, Wave, etc. is directly on a Web page and External media is stored
somewhere else and is brought into the page thru a link.
There are different formats for the different media types:
--Image files (.gif, .jpg/.jpeg, .xbm, ..tiff/.tif, .bmp, .pict)
--Sound files (.au, .aiff/.aif, .wav, .mmidi, & .mp2)-some require specific Media
software to play
--Video files (.mpeg/mpg, .mov, .avi)-soome require specific Media software to play
Not all of these are easy to use and may take special software, applications
or other considerations to manipulate.
Remember to keep your Media files as small as possible and to compress/optimize
any Images.
Include information to your Reader about the format of the media
and the file size when possible.
To access an EXTERNAL file, you code a Link using the "A" tag with its corresponding "HREF" attribute. The "NAME" attribute is not needed in this case. The "HREF" will call upon the URL of the media file you choose to link to your page.
Code as follows:
--or to have a media file linked to an iimage --
<A HREF="media_file.type"><IMG SRC="images/icons/colorpie.gif"
ALT="colorpie"></A>
EXTERNAL LINK TO MEDIA FILE (video/sound/image):
<A HREF="media_file.type">A media file</A>
To utilize an INTERNAL or INLINE file, you do not need the "A" tag as you are not linking outside. Instead use the "IMG" tag or the "BGSOUND" tag for Background Sound. Each of these tags are one-sided and do not need the closing tag.
Code as follows:
INLINE VIDEO FILE - with image link - loaded when page is loaded:
INLINE SOUND FILE - loaded when page is loaded:
INTERNAL IMAGE FILE - appears on page without linking to it:
<IMG SRC="image_file.gif" ALT="text alternate">
<IMG DYNSRC="Video_file.avi" SRC="images/icons/colorpie.gif"
ALT="colorpie">
------DYNSRC is Browser dependent and iggnored by others.
<BGSOUND SRC="Sound_file.wav">
Image Alignment, Scaling, Borders
To setup an Image which fits appropriately into your web page, may mean
changing the Alignment, Scale or Borders of the Image and the surrounding
Text or other images. This can sometimes be a time consuming processes to get
your images and/or text aligned correctly on your page.
ALIGNMENT is coded in the "IMG" tag to change how the surrounding Text/Image is displayed.
OLD Align values are:
You should always CLEAR your alignment setting to keep the rest of your text and images from being Aligned in the same way. The "CLEAR" attribute within the "BR" Break tag can help you do this, EX: <BR CLEAR=RIGHT>
Code as follows:
<IMG SRC="image_file.gif" ALT="text alternate" ALIGN=RIGHT>
Image and then the Text
<BR CLEAR=RIGHT>
SCALING using the "Height" and "width" attributes in the "IMG" tag can be used to make a small image look larger. Since smaller images are faster to load and take up less disk space they are the Image of choice, however you may want to have a larger Image on your page. Note that the pixels will also be scaled so the image may appear Grainy or Blocky. These attributes maybe browser dependent.
Code as follows:
<IMG SRC="image_file.gif" HEIGHT=20 WIDTH=25>
BORDER is part of the "IMG" tag and can control the width of the Image border or hide the border intirely. If an Image does not have a border you can create on around it using this attribute, Border=# (#=0-?). Zero as a value would hide an existing border.
Code as follows:
<IMG SRC="image_file.gif" BORDER=5>
Chapter 6 Assignment
Next Page
Previous Page
Goto Top of Page