Lesson 7 Graphics

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

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

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”>

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.

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.

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”>

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.

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“>

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.

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.

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=“http://www.mountvernon.org”><img src=“george.jpg" width="149" height="140" align=“right”></a>

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.

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.