1. Lesson 7
Graphics

2. Using graphics What would a web page be without graphics? BORING
Two formats keep files small but maintain quality
.gif files
.jpg files
You can use other graphics, but you should convert them to one of these two formats first

3. Image tag The image tag <img> is an empty tag
Image tag attributes include
Src – identifies the image and tells the browser where to find it
Height – specifies how tall
Width – specifies how wide

4. Source (src) attribute
This helps the browser find your image.
If the browser cannot find the image, it will display a red x to your viewer.
This is why it is important to store your images in the same folder as your web page.
The tag looks like this <img src=“name of picture.jpg”>

5. Try it Go to the Gettysburg Address page
Click on the link to the George Washington biography
Right click on the picture of George Washington and choose Save Target As
Save the graphic to your Gettysburg folder as george.jpg.

6. Image Source
Now, let’s add the picture of George Washington to the Gettysburg Address page.
Use the img src code and the file name to add his picture somewhere on your page.
<img src=“george.jpg”>
Remember, it must be in the same folder as the page for the browser to find it.

7. Removing borders
If you don’t want a border around a graphic, you must include the instruction in the image tag by defining the border as zero.
<img src=“name of image” border=“0”>

8. Placing your graphic
To place a graphic on your page, you need to add some attributes.
Height and width – if you don’t specify, the browser will stretch it or reduce it to fit.
If you provide a height and width, it doesn’t take the browser as long to pull up the page.

9. Height and width attributes
Height and width attributes are measured in pixels.
An example of code looks like this:
<img src=“george.jpg" width="149" height="140“>

10. Align attribute
You can also use the align attribute to place an image on your page.
Using the align attribute with an image tag looks like this:
<img src=“george.jpg" width="149" height="140" align=“right”>
This would align your image at the right of the page.

11. Let’s try this:
Change the size of your George Washington picture and right align it on the page using the appropriate attributes in your image tag.

12. Making your graphic a link
You can combine the anchor tag and the image tag to make your image a link.
You can make any picture a link by placing the anchor tags around the image code.
It might look like this:
<a href=“ src=“george.jpg" width="149" height="140" align=“right”></a>

13. Copyright
You should never use any graphics, images, text or photos without permission.
There are sites on the Web where you can receive free images.
NEVER copy material unless the site says you can or you personally have received permission.

14. Add pictures to Gettysburg page
You now need to practice your new skill by adding pictures of the presidents on the Gettysburg page in an appropriate and logical place.
Don’t forget to add one of Abraham Lincoln in addition to those presidents listed.