HTML Tutorial – Images And Backgrounds
If you have been using the Internet for a while, I’m sure you have seen websites that have beautiful designs, that are cleverly built, or they are just downright cool.
These websites are produced with images. Unfortunately in this tutorial, we will not be creating websites of that magnitude because we are not at that level yet. But we will learn how to display images. We will also take a look at background images.
The three common image file types on the Internet are:
- jpg
- gif
- png
JPEG files are larger files. JPEGs are better suited for images that are real. What I mean by real is: a picture of a house, a car, a person, and so on. If you have a digital camera, you may have noticed that the picture files are on jpeg format.
GIF files are mostly used for computer graphic images. GIFs can also be animated. Say you created an image of a traffic street light. You can have the lights change from green to yellow to red. This is an example of an animated gif.
PNG files are an alternative to GIF files. They are beginning to be seen more on the Internet, but they are not as popular as GIF files. If you would like to know more about the technicalities of PNG files, I encourage you to visit the PNG wikipedia page.
You can create you own images and graphics with programs such as Adobe Photoshop CS4
Let’s create a web page with a background image and a regular image. The web page we will make will be of a space background and a planet image.
First create a folder on you computer. Call it webpages or anything you want.
Right Click on these images respectively, and click save image or save picture as
Save the images in the folder you just created.
Copy this code or type it into your text editor:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Images And Backgrounds</title>
</head>
<body style=”background:url(starsbg.gif)”>
<p style=”text-align:center”><img src=”planet.gif” alt=”The Planet” /></p>
</body>
</html>
Save it in the same folder that you created. Save it as space.htm
When you open the file in your browser, you should see the space background with the planet in the middle.
Understanding The Code
Since we wanted the stars to be displayed in the background of the page, we inserted the code in the <body> tag. We used the attribute, style. In a simplified explanation, style refers to how this element is going to look. In this example, we declared the background property to the value of starsbg.gif.
To display the planet image all we really need is the <img> tag. If we take a look at the image tag, we can see that src (source) is equal to the planet.gif file.
The alt tag is for displaying alternate text in case the image does not load. Another thing to notice about the image tag is how the tag closes. Since the image tag doesn’t have a </img> tag. We simply put a / at the end of the tag.
The <p> tag is for displaying paragraphs. The style attribute used in this tag allowed us to center whatever was in this <p> tag. In this case it was our planet image.
Your image would have displayed otherwise without the <p> tag. But for the sake of the example, I used it to center the image.
Final Word
You learned how to download images from the Internet and how to display them in your web page. You now have the knowledge of downloading any image off the Internet. However there is one last important thing I must mention in regards to image downloading. If you ever start your own website or web page, do not use another website’s or somebody else’s images. You will be infringing on their copyrights. This is why I earlier introduced to you some programs for creating your own images. In the case of the stars and the planet images, you have my permission to use them on your site!
Source: learnhtmlonline.com
you may also like:
3 Responses to “HTML Tutorial – Images And Backgrounds”
Leave a Reply
Thank you for that information..
you are welcome!
thanks for sharing this fantastic post. Please hold up this approach weblog as ensure that it must be an example of my preferred web site in my reader, with the help of thanks