WengerEnterprises
    Simplifying Web Design
Electronics Recycling 


Pages

Tools

Webmasters

    

Images





You will learn to put an image like the above on your site in this lesson.

First, we need to open our previous file that we made.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<p>Hi</p>
</body>
</html>

If you don't understand any of that, revisit the lessons on Doctypes and HTML Layout for a quick refresher course. If you're still confused, just keep reading, it may seem easier as we go.

If the <p> tag is for "paragraph", then what should be an image? Not <i>, that is italics. Don't worry, there aren't too many tags to remember. The tag for an image is <img>. I haven't told you yet as I should have, but some tags (note the DOCTYPE even though it isn't a tag) don't have a closing tag. The <img> tag is one of them. It uses ATTRIBUTES. Attributes are included in the tag. Here's how you show a picture:

<img src="image.ext" />

Now that's a mouthful. We'll break it down into easy-to-understand portions.

<img

You already know what this does, or you should. This declares that there will be an image displayed. Simple enough.

src=

This is declaring that the following will be a path to the picture. You know how a path on the computer might be "C:\Documents and Settings\USERNAME\Desktop\MyNewFolder\mypicture.jpg"? Well, a path on the internet would be "http://examplesite.com/mypicture.jpg". If the picture is in the same directory (folder), you can use only the file name.

"image.ext" />

"Image" is the name of the file. ".ext" stands for the extentions. Popular image extentions are .bmp, .png, .gif, and .jpg to name a few. The filename and extention are enclosed in quotation marks to show exactly what the path is. Many, if not all attributes use quotation marks. They can also use an apostrophe ( ' ). Some use a combination, but this will be be showed to you in Javascript or PHP. " />" is stating that the tag is over. Make SURE to add a space before the slash, or it won't work. You could exclude the space and the "/" but it is more proper to do it this way.

Now, we can insert that image that is showed up above.





The code for that image is <img src="http://wengerenterprises.com/images/weirdologoub5.gif" />

Now, have you ever noticed that sometimes an image has text that pops up when you put your cursor over it? That uses the attribute ALT. Hold the mouse over the example below.



This is ALT text. Use the ALT attribute to put this here


The code for this image is <img src="http://wengerenterprises.com/images/weirdologoub5.gif" alt="This is ALT text. Use the ALT attribute to put this here" />. It is a good idea to include the ALT attribute as much as possible and give a good explanation of the image, because this helps with SEO. You will learn about SEO soon.

Ok, that's exciting! You can now add images to that boring text! But suppose you don't want it this size, but you want it bigger, say 400x400px. "Px" stands for "Pixels", which are the the tiny dots that a monitor displays. I'm sure you have figured out how we do this by now - another attribute. This time we will use "width" and "height".



This is ALT text. Use the ALT attribute to put this here


I added width="400" height="400" to the image tag to make that. It looks funky, but you can resize it larger, smaller, or any way you want.

The last things I will teach about images for now is the border and the allignment. Check this one out:



This is ALT text. Use the ALT attribute to put this here


That is a border on the 400x400px image. Now the code looks like <img border="5" width="400" height="400" src="http://wengerenterprises.com/images/weirdologoub5.gif" alt="This is ALT text. Use the ALT attribute to put this here" />. The "border" attribute says that there will be a border, and the "bordercolor" attribute tells it what color it will be.



This is ALT text. Use the ALT attribute to put this here

We have a smaller picture now, but the difference is more than that. The image is on the right side. Observe how this paragraph wraps around the image. All I added was align="right" to the image tag. Note that this can cause problems in layouts, which we will go over later.

The final code is <img align="right" border="5" width="200" height="200" src="http://wengerenterprises.com/images/weirdologoub5.gif" alt="This is ALT text. Use the ALT attribute to put this here" /> You should now be able to make this page. Attempting to make it before going on to the next lesson will help you remember HTML syntax.

That's all about images for now. I would suggest playing around with them for a little while and get used to them. The next lesson is on comments. This makes your webpage's code much easier to understand.




©WengerEnterprises.com - All Rights Reserved

Privacy Policy