Basic Lines, Images, and Color

BUSINESS 146 [M] [1] [2] [3] [4] - Classroom A - Classroom B

Week 3: Basic Lines, Images, and Color

This week you will make your webpage more attractive with color, images, and lines.

You will need to go out and get some images for this weeks assignment. This may be a little tricky. You will probably want to go to http://www.webshots.com (community section) or http://www.barrysclipart.com (animation section) to get some copyright free images. Webshots has photos, and Barry's has clipart and animated gifs.

At Barry's, you will need to find the image you like, then click on it to see the animation. The thumbnails on this site are all static images to conserve time downloading the page.

After you find your image, if you are in Internet Explorer, you can RIGHT-click on it, go to "Save Image As" in the menu and LEFT-click on it, then save your image file to the same location as your HTML document. Note you will have to upload your image file as well as your HTML document to your server in order to see it on the internet.

DO NOT name your image file with white spaces. "Horse_walking.gif", not "Horse walking.gif". DO NOT change the extension. Gifs must remain .gif and jpgs must remain .jpg. For now, it is enough to know that .jpgs are typically photos, and .gifs are art. If it has animation, it is a .gif.

The coding for our index.html page this week will look something like this: (feel free to cut and paste this to get you started). If you prefer not to overwrite your file from last week, you can give this file a different name. If you name it week2.htm for instance, you will access the page by going to http://www.geocities.com/yourYahooID/week2.htm

<html>
<head><title>My Home Page</title></head>
<body BGCOLOR=“blue” text="white"> 
<h1>My Home Page</h1>
<HR ALIGN="left" WIDTH="50" SIZE="3" NOSHADE> 
<IMG SRC=“imagefile.gif” ALIGN="right" ALT=“This is an image” HEIGHT=“200” WIDTH="100">

{rest of your content goes here}
</body>
</html>

Try to add an additional image on your own. You might try one .gif and one .jpg, just to see if you can get everything to work.

REFERENCE

Incorporating Images into Pages

Note that the img element does not need a closing tag.

If you run into problems rendering your picture in the browser, check that the file names match exactly, complete with extension, and that the case is the same. Make sure your image is in the same folder as your HTML document. Make sure you have uploaded your image file to the server. Try re-uploading your image file, sometimes they become corrupted.

Wrap text relative to image with <align> tag
Using the ALT attribute with images is considered proper coding. The text will display in the event the image does not.
Specifying image size - this will let the page render as the image is downloaded
Resizing images - if you specify just height or width, the image will remain proportionate

How to prevent a page background image from scrolling:

Most common image formats on the web

GIF - used mostly with flat art, 256 colors, one layer can be transparent
JPG - used mostly for photos, unlimited colors, no transparency
PNG - a newer format that is meant to eventually replace GIF, it can be used for any image, and it can have transparency in different opacities

Interlacing & Progressive Pass

When rendering on a web page, image first appears fuzzy and unsharp. It slowly becomes more detailed.
Interlacing is the terminology used with Gif
Progressive Pass is the terminology used with Jpg

Transparency

Refers to gif and png images. One color in the image can be made transparent, allowing image objects to appear not to have a surrounding frame. Useful on colored backgrounds when you do not want a white frame around the object.

Lossless compression

Compression of graphics wherein all the original information is retained.

Lossy compression

Compression of graphics wherein some of the original data is lost or approximated in order to better compress an image.

Adding Horizontal Ruling Lines

Horizontal rules (lines) are used to provide a pause between blocks of text. Insert the <HR> tag where the line is to appear. The HR tag does not need to be closed.

Horizontal Rule Attributes:

ALIGN <hr align="right">
NOSHADE <hr noshade>
SIZE - this refers to how thick the line is
WIDTH - this refers to how wide the line is. Note you can specify an exact size with pixels, or a percentage size. A percentage size always indicates a percentage of the open browser window and is flexible.
COLOR - note that the color attribute only works in IE

<HR WIDTH="50" SIZE="3">
<HR WIDTH="50" SIZE="3" NOSHADE>
<HR WIDTH="75" COLOR="red" SIZE="10">

Page Colors and Backgrounds

To change background, text, and link colors, attribute information is added into the <BODY> tag. Note that you can change the base color for your text and links with the following:

<BODY BGCOLOR=“blue” text="white" link="lime" vlink="red" alink="white">
(vlink is visited links, alink is active links - NOTE: we will not be inserting hyperlinks this week, you might want to try this again later in the course)

Alternatively, you can use an image or pattern, or just an unusual color with the following:
<BODY BACKGROUND=“image.gif” text="white" link="lime" vlink="red" alink="white">

You may use friendly names for colors this week. In the future, you will want to use hex code. For more information on declaring colors, go to Color Theory and Color Tables.

Download

The Absolute Beginner's
Guide to Starting a Web Site 1327k pdf

As always, post a link to your website in the classroom. If you have a problem that is not answered by peer review, please feel free to email Parker Owens at parker@ciwss.com.

HOME  ASSEMBLY HALL CHARACTER WORKSHOP CALENDAR CHAT ROOMS COURSES GROUPS INFORMATION LIBRARY
COURSES: BUSINESS   COMEDY   FICTION LITERATURE   NONFICTION   POETRY   COURSE HELP TIME ZONES WEB DIRECTORY
BOOKSTORE   CHAT LOGS CLASSIFIEDS EPRESS F2K INTERACTIVE STORIES RENEW MEMBERSHIP T-Zero XPANDIZINE