Intro to Web Building - Unit 2Color and GraphicsThis exercise will review basic skills and introduce you to more complicated functions. Now that you have a Geocities account, you will do all of your composing in Geocities, rather than in SimpleText (Mac) or Word Pad (PC). In the sample code given below, replace red words with your own information. Getting Started1. Open your browser and enter "www.geocities.com" in the navigation bar. 2. In Geocities, enter your name and password (should be the same as your Yahoo username & password) and proceed to the File Manager. 3. Your File Manager should contain 1 file, named "index.html" from the previous exercise. Click on the pencil next to your index.html file to begin editing it. Now you can begin to add some panache to you page. The most elemental style choices your can make are contained in the BODY tag. Information regarding the color of the background, the wallpaper, the color of the text, the color of links, &c. is contained in the opening BODY tag. Color in HTML is specified in hexadecimal code, which defines individual colors via 6-character number/letter codes. You can find the code for the color you want by looking at an on-line hexadecimal color chart, such as HYPE's chart: http://users.rcn.com/giant.interport/COLOR/ColorSpecifier.html or Le Professeur's chart: http://members.tripod.com/~LeProfesseur/hex-to-rgb-color.htm4. To indicate a background color for your page, type the following within the opening BODY tag: bgcolor="#e6e6fa" (substitute the hexadecimal code for the color of your choice). This should look like (change the red text to your own color selection):
There should be no spaces after the word "bgcolor". 5. You can select a color for your document's text, as well as for links, also using hexadecimal code. An example of the code is given below; the text that you have already entered is in grey (don't re-enter). Change the red text to your own color selections.
It can be difficult to arrive at just the right combination of colors - it is a process of trial and error. 6. Click Preview to view your file so far. If you like what you see, click Save and Continue Editing. Otherwise, make corrections and then save. 7. Now you can choose a background patter. You may specify both a pattern and a color in the BODY tag; while the page is downloading, it will display the color, followed by the pattern. 8. Backgrounds are either gif or jpeg files (.gif .jpeg or .jpg). You can make them yourself, but it is much more common to find ones you like in free online archives and download them. Sample backgrounds are available in this site at the Background Gallery. It is rude to use a background without listing the link to the page of origin. 9. To view the image you like as a background, click on it. To download a file, right-click on the image in the Gallery page. Select Save Image As (not "copy location"!!!). A Save window will open - make sure that it downloads to your desktop and that the title is memorable. 10. In order to use a background, it must be stored in the same folder with your HTML file. in Geocities, select Upload Files. 11. Click the Browse button by the empty fields and choose the Desktop directory. From the pull-down menu choose All File Types. Your downloaded file should be listed. 12. Double-click on the file to fill the empty Upload field. Select Upload and return to the File Manager.
13. Now your background file should be listed in your File Manager.
To include it in your page, include the background command in the BODY
tag. It should look like this:
14. Click Preview to view your file so far. If you like what you see, and then save. Now you can jazz up your page by adding pictures. Just like backgrounds, pictures are gif or jpeg files that you can create yourself using a graphics program or a scanner, or you can download them from the Internet. It is rude to borrow pictures without providing a link to the page of origin. 15. To browse sample pictures, go to the Picture Gallery. 16. To download a picture, right-click on it and select Save Image As from to the desktop and make sure that it has a file name you will recognize. 17. In Geocities, go to the Upload Files page. Click the Browse button to locate your files, and double-click on one. 18. Repeat for other files in other empty fields. 19. When you have selected all necessary files, click Upload.
20. You image files should be in the File Manager in Geocities. To incorporate the image into your page,
type the following code:
The IMG tag is one of those rare tags that does NOT require a closing tag. Moreover, like the BODY tag, it can contain a lot of information within the tag. 21. Good webbies always include an alternate text tag in their IMG tags, in case their picture fails to download. Alternate text displays a caption in the space where the picture goes until the picture downloads, and also displays a pop-up label when the mouse sits on the picture. The code looks like this:
22. Good webbies also include the height and width of the picture in the IMG tag to speed up the downloading process. You can also use the height and width specifications to shrink or enlarge your graphics. Determine the height-to-width ratio of your graphic and increase or decrease the pixel size proportionally. To determine the dimensions of you image in pixels, open the file in a graphics program like Adobe Photoshop and select Image Size. The HEIGHT and WIDTH commands look like this:
23. You can determine the placement of your picture relative to the text around it using the ALIGN command.
This looks like:
24. Click Preview to view you file so far. If you like what you see, click Save and Continue Editing. Otherwise, make corrections and then save. |