Images
Images make web pages fun and interesting for both the creator (that would be you!) and the reader. You can place images of anything on your web page. You can place a picture of you or your cat or your computer on the page. Or you can place arrows and buttons and fun graphics on your page. Whichever way you go, your sure to have fun!
All images that are placed on web pages must have file extensions of .jpg or .gif. This means that when you look at the picture on your computer or on the Internet it should say:
the_name_of_the_file.jpg or the_name_of_the_file.gif
Almost all images found on web pages, including this one, are one of these types of files. These file types are fairly small and load more quickly then other file types (you can use either file type, it doesn't generally matter which one you use).
All right, now you've got your picture. It's time to place it on your web page!
Your Page in HTML looks something like this . For this example the text color is set to purple, the link color to red and the visited link color to blue and icon.gif is a file on your computer:
<html>
<head><title></title></head>
<body text="#FF00FF" link="#FF0000" vlink="#FF0000">
<p>This is my first web page. I'm learning how to place images on my page. Here is an image for you to look at:</p>
<p align="center"><img src="icon.gif">
</body>
</html>
This results in the reader seeing this:
This is my first web page. I'm learning how to place images on my page. Here is an image for you to look at:
A picture is added by typing <img src="thenameofthefile.gif"> where thenameofthefile is the actual file name. The command could also be <img src="thenameofthefile.jpg> depending on what kind of image it is.
Images can be added anywhere on your page (including in the middle of text). For example:
Your Page in HTML looks something like this . For this example the text color is set to purple and icon.gif is a file on your computer:
<html>
<head><title></title></head>
<body text="#FF00FF">
<p>This is my first web page. I'm learning how to place images on my page. Here is an image for you to look at: <img src="icon.gif">. See I just put the picture in the text.</p>
</body>
</html>
This results in the reader seeing this:
This is my first web page. I'm learning how to place images on my page. Here is an image for you to look at:
. See I just put the picture in the text.
You probably noticed that the image makes the space between the second and third lines bigger. This is because the lines move to accommodate the image, which is larger than the text. In the next lesson, you will learn how to do different things with images, such as adding a border and aligning the image on one side of the page.
|
|
|
|
|
|
|
|
|
|
|
