HTML for beginners
Lesson 8
Add Pictures
|
Save the one you just read. |
There are 2 main reasons I left images until one of the last "basics" on a web page.
Reason 1, is that there are many tags involved with images, and it is tricky how some of them work.
Reason 2, is that to include images on your web page, you need images, and you will frequently need a way to play with images, like resizing. You will need to find images you like, or sometimes you will even need to make your own. Images can be a lot of work.
Most computers come with a basic program, like "paint", to make your own images freehand. You might have a scanner to be able to convert images you like to digital form, you might have a digital camera1, or you might even have a video card that lets you do video captures. You can also just find pictures you like on the net and use them. If you choose this method, there are 2 things you need to know. First, most websites don't mind if you use some of their pictures as long as you ask first. Some will say no, but you will be surprised how often they will say yes and be happy you asked. Some may ask you to give them credit depending on the picture but it's usually a fair trade. The second thing you must remember is, if you do use someone elses picture, download it, save it, and upload it to your own site. Do not just link to the picture on their site from yours. That would mean that everytime someone views the picture from your site, they will be downloading it from the real site and using their bandwidth without even viewing their site.
If you need help finding programs to create or edit pictures, or help with how to create pictures, I will add a section about that later. For now, you can email me at webmaster@premierwebsitesolutions.com if you like.
With all this technical mumbo jumbo out of the way, let's learn how to do what you came to this page for.
This should be what your code looks like at the moment.
<html>
<head>
<title>My first page</title>
</head>
<body bgcolor="00ffff">
<p align="center">
<font size="+2" color="red"><i>This is my first web page.</i></font><br>
My page is getting bigger.
</p>
<p align="right">
<b>This is a <font color="0000ff">whole</font> new paragraph.</b>
</p>
</body>
</html>
Add the code in red.
<html>
<head>
<title>My first page</title>
</head>
<body bgcolor="00ffff">
<p align="center">
<font size="+2" color="red"><i>This is my first web page.</i></font><br>
My page is getting bigger.
</p>
<p align="right">
<b>This is a <font color="0000ff">whole</font> new paragraph.</b>
</p>
<p align="left">
<img src="Image2.jpg">
</p>
</body>
</html>
View your page. If you don't see the image you saved, double check to see if it's in the same directory or folder as your page is in, and make sure it is called Image2.jpg.
You will notice that since your background color isn't the same as the one on this page, you can now tell that the text is actually an image.
Now change the "p align" tag as highlighted below and see what it does.
<html>
<head>
<title>My first page</title>
</head>
<body bgcolor="00ffff">
<p align="center">
<font size="+2" color="red"><i>This is my first web page.</i></font><br>
My page is getting bigger.
</p>
<p align="right">
<b>This is a <font color="0000ff">whole</font> new paragraph.</b>
</p>
<p align="right">
<img src="Image2.jpg">
</p>
</body>
</html>
What difference did the new tag attribute make? Now change the align tag to center the image. I won't show you how, but if you can't figure it out, you can look at the code below with the next change I will tell you to make.
Try something different. Add the code in red here, the image and the text.
<html>
<head>
<title>My first page</title>
</head>
<body bgcolor="00ffff">
<p align="center">
<font size="+2" color="red"><i>This is my first web page.</i></font><br>
My page is getting bigger.
</p>
<p align="right">
<b>This is a <font color="0000ff">whole</font> new paragraph.</b>
</p>
<p align="center">
<img src="Image2.jpg">
</p>
<p align="left">
<img src="Image2.jpg"><br>
Sample text. This is just so we can have text to show you what will happen after the next change we make. We need enough text to be able to see results in the tests further down.
</p>
</body>
</html>
You should see the image on the left and the "br" tag causing the text that follows to appear below the image.
We used the "p align" tag to put the image on the left. You can also do this right in the "img" tag, BUT it behaves differently. Try it. Add the new paragraph below and look at how the only difference is the extra "left" tag in the image instead of just the paragraph.
<html>
<head>
<title>My first page</title>
</head>
<body bgcolor="00ffff">
<p align="center">
<font size="+2" color="red"><i>This is my first web page.</i></font><br>
My page is getting bigger.
</p>
<p align="right">
<b>This is a <font color="0000ff">whole</font> new paragraph.</b>
</p>
<p align="center">
<img src="Image2.jpg">
</p>
<p align="left">
<img src="Image2.jpg"><br>
Sample text. This is just so we can have text to show you what will happen after the next change we make. We need enough text to be able to see results in the tests further down.
</p>
<p align="left">
<img src="Image2.jpg" align="left"><br>
Sample text. This is just so we can have text to show you what will happen after the next change we make. We need enough text to be able to see results in the tests further down.
</p>
</body>
</html>
We are still just telling the image to go on the left, followed by a carriage return and text. That should put the text below the image, right? View your page.
See the difference just by having the "left" tag in the image code instead? In simplest terms, an align tag in an image code says how to align the image in comparison to the text that goes with it.
When you have an "align" tag in the image code and the paragraph code, you are specifying how to align the image compared to the text, and how to align the text as well. Make the change below and see what happens to the text.
<html>
<head>
<title>My first page</title>
</head>
<body bgcolor="00ffff">
<p align="center">
<font size="+2" color="red"><i>This is my first web page.</i></font><br>
My page is getting bigger.
</p>
<p align="right">
<b>This is a <font color="0000ff">whole</font> new paragraph.</b>
</p>
<p align="center">
<img src="Image2.jpg">
</p>
<p align="left">
<img src="Image2.jpg"><br>
Sample text. This is just so we can have text to show you what will happen after the next change we make. We need enough text to be able to see results in the tests further down.
</p>
<p align="center">
<img src="Image2.jpg" align="left"><br>
Sample text. This is just so we can have text to show you what will happen after the next change we make. We need enough text to be able to see results in the tests further down.
</p>
</body>
</html>
The image is still on the left and the text on the right, but the text is also centered in it's area now.
Change the "align" tag in the image code as shown below. Try to figure out what will happen before viewing the page.
<html>
<head>
<title>My first page</title>
</head>
<body bgcolor="00ffff">
<p align="center">
<font size="+2" color="red"><i>This is my first web page.</i></font><br>
My page is getting bigger.
</p>
<p align="right">
<b>This is a <font color="0000ff">whole</font> new paragraph.</b>
</p>
<p align="center">
<img src="Image2.jpg">
</p>
<p align="left">
<img src="Image2.jpg"><br>
Sample text. This is just so we can have text to show you what will happen after the next change we make. We need enough text to be able to see results in the tests further down.
</p>
<p align="center">
<img src="Image2.jpg" align="right"><br>
Sample text. This is just so we can have text to show you what will happen after the next change we make. We need enough text to be able to see results in the tests further down.
</p>
</body>
</html>
Were you right? If so, that's great. It means you are getting the hang of what those tags do. If not, don't worry. The easiest way to get the hang of any programming is to play around with it. As with just about anything in life, hands on experience is the best way to learn.
In the last paragraph, experiment with different align attributes in the paragraph and the image tags.
The "p" tag align attributes can be:
The "img" tag align attributes can be:
Between the 4 "p" possibilities, and the 5 "img" possibilities, we have a total of 20 alignment variations. Play around with the different possibilities until you understand what you are doing, or until you've had enough and want to move on. Things will get easier as time goes on, as long as you practice of course.
If you think you are ready for more "img" tag attributes, move on to lesson 9.
Notes:
1) If you have a digital camera, or are interested in photography in any way, you may find another site of mine useful.
Digital / Analog (Film) Photography
