Images
        If you've surfed the web, it is highly likely that you've come across images, or pictures, of various things. If you're going to make a web page, it is highly likely that you, too, are going to put images in your page. If used correctly and sparingly, they'll make your page exciting. If not used at all, they'll make your page monotonous. If used too much, they'll make your page tedious and annoying to look at. So keep these things in mind. You'll have to decide for yourselves how many you should put in your page. I can't show you how many to put, or where to place them, but I can show you how to place them.
        To insert a image to your document, add this tag:

<img src="picturefilename.gif">

where picturefilename.gif is the name of a gif file. There are two types of images mainly used on the web. They are gif and jpg. Jpg can also be written as jpeg. To insert the file called "htmlcolor.gif" I'd use the tag <img src="htmlcolor.gif"> and it would look like this:


But you must be sure that the image is in the same directory as the html file that you just put the tag in. Because this document is /both/beginner/images.html and the image is /both/images/htmlcolor.gif i had to use <img src="../images/htmlcolor.gif"> where the two periods (..) mean "up one directory level" which was the "both" directory.
        Okay, I've showed you how to insert images into your web document, but now I need to show you how to alter the images. It all happens within the <img> tag. The src property is the source, or filename. The align property is how it's aligned compared to the text. The height property is how tall it is in pixels or percent of screen size. The width property is how wide it is in pixels or percent of screen size. Say you want to shrink the htmlcolor.gif file down to 1/2 of the screen size width. You'd use the tag:

<img width="50%" src="../images/htmlcolor.gif">

keeping in mind that the htmlcolor.gif file is in a different directory. Here's an example of that code:

Now to the pixels, you want the image to only be 100 pixels wide? Use this code:

<img width="100" src="../images/htmlcolor.gif">


Notice how it's kept proportional to it's original size. If you want it to be 100 pixels tall, as well as being 100 pixels wide, you'd use this code:

<img width="100" height="100" src="../images/htmlcolor.gif">



        Now on to alignment. Notice the colored square? And how the text that i'm writing is wrapping around it? It's because I aligned it to the left side of the page, using the property align="right". If you want the image on the left, you'd use align="left". Not too hard. You should also notice how it wraps below the image. Pretty nifty huh? Looks very professional, without having to do too much work. Image alignment is a very handy tool to make your page look more professional.
Next lecture