|
Goto Lesson:
Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Lesson 7 Lesson 8 Lesson 9 Lesson 10 Lesson 11 |
Now that you know how to do just about everything you want with your text it is time to learn to add some other features. First I will give you the code to insert images into your page. When you do this the browser will find the image you tell it to. It works almost exactly like the link tag does, you state the command then you give it a path to the image. Here is the example(please note: this is assuming you have a folder named images and an image inside of it named pic.jpg, if you don't you will see an x):
<html> <head> <title>image example</title> </head> <body> <img src="images/pic.jpg"> </body> </html> the only line important to us in this example is the image line. the command for an image is <img> and the option we are using is the src option, which stands for source. This option works exactly like the href option in the link command. You must put in a path for the image and it will be retrieved by the browser. The image will be put in at the place you put the code and will be displayed in its original size. There are several other options that can be used for images, which will assist you in changing size and appearance. <html> <head> <title>Image options</title> </head> <body> <img src="images/pic.jpg" width="100" height="300" border="4" bordercolor="#000000" align="center" alt="the image did not load">This text is aligned by image. </body> </html> The width and height options change the size of your image. You must be careful when you do it this way because you may change the ration of width to height and stretch the image. You may also do width in height by percentage (according to page size). the border command will put a border around your image and the bordercolor command will change the color. The align tag tells the browser where the text next to the image (if any) should be placed in relation to the image (top, center, bottom). The final tag (the alt tag) tells the browser to display the text in quotes should the image not load to to some error. This is all there is too images, but beware using to many images will greatly increase load time. Load time was previously of no concern because it is rarely encountered with pure text pages. Animated gifs may look cool all over your page but somebody out in the woods on a 56K modem with a poor connection will be waiting a long time for your page to completely load and chances are they will not wait they want to see the page now. Keep the images to a minimum and never use an image in place of text. You are now ready to add movies and music, proceed to the next lesson. |