In This Tutorial, I Show You How To Put An Image Into A Web Page
Do you know what this is?
Chances are, you didn’t see the Trylon and Perisphere when they were featured in the 1939 – ’40 New York World’s Fair. They had a unique beauty and grace which must have pierced the Flushing Meadows skyline. Unfortunately,they are long gone.
But you’re not here for an architectural history lesson. You want to know how to get an image into a web page. To ask it the fancy way, "How do you embed an image into a web document?"
First, you need an image in the .gif, .jpg or .png format. Can’t go anywhere without an image.
Next you need the code to embed the image into your page.
Here we go.
<img src="images/trylon.jpg" alt="Photo Of Trylon And Perisphere" />
It all gets started with the "img" tag. I’ll bet you can figure out what that stands for.
Next,comes the "src" (source attribute) to indicate where the image is stored. In this case, I’m using a subfolder called "images" where I keep all of my images. This subfolder is located in the same folder as the .html file for my web page.
In the subfolder my image’s file is called "trylon.jpg."
Lastly, I must use the "alt" attribute to provide an alternative text description which will be seen on the web page if the image is not seen or downloaded. In my example, it’s clear that there is a "Photo Of The Trylon And Perisphere," so the alternate text will not appear. But if someone were using a screen reader those words would be read aloud.
How did I get those nice white and black borders around the image that appears at the top of the page? I used Cascading Style Sheets’ padding and border properties. That’s all I did.
As it turns out, there are two ways to use images in web pages and they are very different. The first is to embed them as you’ve just seen. You embed an image when the image conveys information to support what the page is about. Photos, illustrations, logos, and images containing text are instances of when to embed an image.
The other way is to use images for strictly decorative purposes. For instance, the white icon in the blue buttons on this page are decorative images that are NOT embedded in the page. I used the background property of CSS for this kind of image.
Get Happy And Start Learning HTML Right Now
Do The First Two Lessons For Free!!
All Of My Free Web Design Tutorials