Embed Size (px)
Citation preview
WEB PAGE DESIGNNotes Chapter 10—Adding
Graphics
UNDERSTANDING GRAPHICS ON THE WEB
There are two kinds of graphics on the Internet: those you can use on your own Web pages, and those you cannot. Many are protected by copyright
laws,which means you cannot use them without permission.
Many people give you permission to use their graphics as long as you give them the creditCreate a link to their Web pagePut their name on your Web page saying
they created the graphics
CREDITAlways give credit where credit is due. If you use someone else’s graphics, you should always obey their rules concerning their graphics.
GRAPHIC SIZE “A picture is worth a thousand words, which is why is takes a thousand times longer to load.” Use graphics carefully.
GRAPHIC SIZE The size of the graphic also determines how fast the Web site will load. Smaller graphics load faster than full page graphics.
GRAPHICSTwo main types of graphics on the Web:
.gif (Graphics Interchange Format), transfer quickly over the Internet
.jpeg (Joint Photographic Expert Group format), can be read by most browsers and load quickly
TAG Tag used to insert a graphics file in
your Web page:
<IMG SRC>
<IMG SRC>
Short for IMaGe SeaRCh, searches for the graphics file and inserts it in your Web page.
If the graphics file is not located in the same directory as your Web page, you need to specify the complete address for where the graphic is located.
DOWNLOADING GRAPHICS FILES
Downloading is the process of saving something on the Internet to your computer.
Uploading is the process of saving something on your computer to the Internet.
TO DOWNLOAD A GRAPHICS FILE TO YOUR COMPUTER:1. In your browser, find the graphics file
you wish to download.2. Position the mouse pointer over the
image.3. Right click and hold it down.4. Choose Save this image as from the
pop-up menu.5. Save the graphics file in the same
folder as your HTML files. (jpg or gif)6. Remember the graphics filename so
you can find it later.7. Choose OK.
INSERTING GRAPHICS FILES Once you have the graphics files
saved in your directory, you can insert the graphics in your Web page.
You need to create links to the Web pages where the graphics files are located.
REMEMBER—IF YOU DIDN’T CREATE IT, YOU CAN’T TAKE CREDIT FOR IT!
INSERTING GRAPHICS FILES1. In your text editor, position
the insertion point after the <BODY> tag and press Enter.
2. To change the background to an image, key:<BODY BACKGROUND=”FILENAME”>
3. To insert an image, key:<IMG SRC=”FILENAME”>
INSERTING GRAPHICS FILES Remember, if the graphics file you want to use is not in the same directory as your HTML document, you will need to specify the directory where the file is located.
<IMG SRC=”FILENAME” ALIGN=RIGHT>
4. By default, the image is placed at the left margin of the Web page.
You can change the location of the graphic by using the ALIGN=XXX attribute with the <IMG SRC> tag. XXX can be one of five things: TEXTTOP, MIDDLE, BOTTOM, LEFT, RIGHT.
ALIGNMENTThe image align attribute indicates the position of the text in relation to the image. For example, the default alignment is “bottom”. That mean the text is located at the bottom of the image.
Right means the image is to the right of the text, and left means the image is to the left.
