More about images
You can align your images on the page, and have text wrap around them, by using the ALIGN attribute in the IMG tag. Whenever you align an image, either to the left or to the right, the rest of the text on the page will wrap around the image. To do this, add the align attribute to your IMG tag like so:
<img src="http://www.server.com/mydirectory/image.jpg" align=right>
This will cause the image to display on the right side of the screen, and the text will wrap around it. If you substituted "align=left", the image would display on the left side of the screen, with text wrapped around it. If you do not include an ALIGN attribute, the image will display on the left side of the page by default, but text will not wrap around it.
You can also add a border around your image, if you wish to. Simply add a BORDER attribute to the IMG tag, so that it looks like this:
<img src="http://www.server.com/mydirectory/image.jpg" border=1>
BORDER=1 will give you a thin border around the image, which will be the same color as the default text color of your page (see below for information on using color in your pages). BORDER=2 will give you a thicker border, and you can make the border thicker and thicker by trying larger and larger numbers. By default, an image that is not a link will have no border unless you use the BORDER attribute (the attribute defaults to border=0, as discussed at the end of the last section).
Another helpful attribute is the ALT attribute, which we also discussed in the last section.
You can use the ALIGN, BORDER, and ALT attributes in any combination, too. Your IMG tag could have none, one, two, or all three of these attributes in any order.
As you learned in the previous lesson, there are many ways to get images onto your web pages. If you're interested in learning more specifics about where to look for images, image file formats, etc., you should think about attending CIS's Web Graphics demo. To learn when the next demo is, go to the CIS Training Schedule, and search for courses relating to "The Web / Netscape". The "Web Graphics" demo should appear on the search page. If you have problems with this form, send email to CIS_Training@brown.edu and request information about the class.
To learn more about scanning images for your web page, read the local documentation Quick Start: Scanning.
Another thing that's important to know is that there are serious copyright issues with graphics and text on the web. While the law is still open for interpretation, and there have been conflicting pieces of legislation drafted and conflicting legal decisions, it is clear that any materials that others have created belong to them, and not to you. They are not in the public domain unless specifically noted. Follow this link to find a quick but very informative look at some of the myths and realities about copyright.
If you don't have photos to scan and you're unable to create graphics on your own, you can find free, public domain art on the web to download and use on your pages. The Yahoo! Clip Art page is a good place to start looking. When you find an image that you like, click on it with your mouse and hold the mouse button down (if you have a Mac) or right-click on it (if you have a PC) and a menu will come up. One of the options in the menu will be to save the image. That downloads the image to your hard drive. Choose the location on your hard drive where you'd like to save the image (for the time being, your best choice is probably the same place where your .html file is stored; e.g. if your .html file is located on your desktop, you should save the image to your desktop, too).
Then, to point to the image, add an IMG tag to your document, but instead of using an entire URL as the source, all you need is the filename. For example:
<img src="image.gif">
Note: This is true if and only if the image file resides in the same directory or location as the .html file. This is called relative addressing, as opposed to absolute addressing, which you were using before when you typed in an entire URL for the source of the image. There's more about relative vs. absolute URL addressing in the section below.
Absolute vs. relative URL addressing
There's an excellent description of the difference between relative and absolute URL addressing at Louisiana State University.Relative vs. absolute URL addressing applies to images and to links to other documents. For the purpose of this class, it's best to use relative addresses, which will make your web page(s) portable enough to send to the instructor.
It is imperative that you read this document and understand the concepts before moving on to the next lesson. If you have any questions about relative vs. absolute URL addressing, please ask in the class forum!
Getting your files onto the server
If you do not currently have space on Brown's main web server, and you wish to create web pages--for University-related business--that will remain on the server after the course is over (including departmental home pages, faculty bios, etc.), you may want to print out a copy of the Information Provider form and send it, via campus mail or US mail, to the webmaster at box 1885. Please note: The form that you fill out has TWO pages...you should print and submit both pages of information, and the form must be signed by your department head for the account to be created.
If you have an account with an internet service provider other than Brown, that account may come with several megabytes of free web-publishing space. Contact your ISP for more information.
Lastly, if you wish to create a personal web site and don't have any other options available to you, you might want to check one of the free home-page hosting services on the web. Yahoo! has a list of these.
Documentation is available for Mac users and PC users to learn about using File Transfer Protocol (FTP) with Brown-supported software to get your files onto a standard web server.
After reading this documentation, if you have any further questions about using FTP to upload files, please address them to the class forum.
Adobe PDF (Portable Document Format)
The PDF format allows you to take paper documents, word processor documents, or other pieces of information that you currently have, and make them available quickly and easily on the web. It does not make them HTML files, but puts them into a proprietary format called PDF. There are some drawbacks to using PDF, including the need for additional plug-in software on the client side (Acrobat Reader, which is free to download from Adobe, and then must be installed and configured on the machines of all the people who view your PDF files), and software that will allow you to put your document into PDF format (this software must be purchased, or you may choose to download it from the Applications server--where it's called Acrobat Pro on the PC side, and Acrobat on the Mac).For more information about PDF, see Adobe's web pages about PDF files. You also may wish to attend the CIS Training demo on Acrobat. To find the next available demo, search the CIS Training schedule for a course title that includes the word "acrobat".
Backgrounds
Backgrounds began as a Netscape extension, but now, most browsers support them. Any Netscape version after 1.1 supports background colors and background images, and MS Internet Explorer supports them, too.
There are two different types of backgrounds that you can use: a background that's a solid color, or a background that is a repeating image that you have permission to use. We'll discuss both now.
If you use complex, dark colors for your background color or background image--for example, a color that isn't one on the Windows basic 16-color palette--it may show up in a way you didn't intend, making your document difficult or impossible to read. White is always a safe choice.
To include a background color (including white or black), you must add the bgcolor attribute and either the name of the color, or something called a "hex code" (covered later) to the <body> tag of your document. The tag will look like this:
<body bgcolor="white">
or
<body bgcolor="#ffffff">If you want to be safe and simple, you can use a word-based color, such as white, red, yellow, green, etc. This doesn't allow you a lot of flexibility with shade, brightness, etc., though; yellow is yellow is yellow. Green is a brighter green than anyone might ever want.
If you want to be a bit more specific in your color choices, you can use what is called a "hex code" - a 6-digit code, preceded by a pound sign, which stands for one of the 16 million or so colors available. The code is made up of letters and/or numbers 0-9 and a-f.
To find a hex code that matches the color you wish to use, you may use the simple list of hex codes available from Imagitek's Background Color Selector at www.imagitek.com/bcs.html. This color selector also allows you to preview what the colors will look like, both the background color, and the text and link colors, as we'll talk about later.
If you'd like to use an image as a background, rather than just a plain solid color, you can also find some of them at the Imagitek page, or use Yahoo! to search for some. If you're feeling artistic and know how to use an image-editing program such as Photoshop, you can even create one yourself. You should be very careful, though, not to use complicated or overly busy backgrounds. If you pick a background image that is too busy and/or clashes with your text, your document may be too difficult to read. If you pick one that is too large or detailed, it may take too long to load. Also, you should know that the image is going to repeat across the screen, as well as down the screen.
The syntax to use with a background image is a little bit different than a background color. Instead of using bgcolor in the <body> tag, you use the background attribute. So the tag will look like this:
<body background="http://www.somewhere.com/imagename.gif">Note: GIF or JPG images are acceptable.
You can create some neat effects with background images. One popular effect that you've probably seen is the strip of color down the left side of a page, something like this. The image used as the background actually looks like this
Note that you can only have one background color or pattern per web page. You cannot change colors in the middle of a page. You can, however, use a different color in tables, if the people viewing your page are using Netscape 3 or higher. We'll talk more about tables in the next lesson.
Text and link colors
You can also change the colors of the text that is on your page, as well as the default colors of links, and of links that have been followed. There are four properties to change:
- TEXT - Normal page text (or border around an image that is not a link)
- LINK - Text of a link (or border around an image that is a link) before it has been visited
- ALINK - Text of a link (or border around an image that is a link) while you are clicking on it
- VLINK - Text of a link (or border around an image that is a link) that has already been visited
The color names or hex codes that you use will be exactly the same as they were for bgcolor, and are also included in the body tag. So, for example:
<body bgcolor="#fffff0" text="#006400" link="#ee9a00" alink="#ff0000" vlink="#c0c0c0">will give you a page with a light yellow background, dark green text, orange new links, red active links, and grey visited links. (Unfortunately, there are no rules about aesthetics!)The table of hex codes at http://www.imagitek.com/bcs.html is helpful in choosing colors. There is also a nice color picker at http://www.webrats.com/a/aaafree50.html, but it takes a while to load.