HTML Images Tutorial
Inserting Images...
Inserting images into an HTML page is pretty easy using the <img> tag. Here are a couple of pictures for you to use (Oh, yes. Chang has a thing for redheads!).
In practice you'll probably be keeping your images separate from your other files. So, make a new folder called "media" inside your htdocs directory then save both of these images there (leave the file names as they are).
HTML Image Code...
To display the image, add the following to your pagetwo.html code...
<head>
<title>ChangRox.com-(page two)</title>
<link rel="stylesheet" type="text/css" href="changroxstyle.css" />
</head>
<body>
<!-- This is the beginning of the body of my page. -->
<p>Here are some heading tag examples...</p>
<h1>Large Heading on Page Two</h1>
<h2>Medium Heading on Page Two</h2>
<h3>Small Heading on Page Two</h3>
<img width="127" height="169" src="media/redheadthumb01.jpg" />
</body>
</html>
Save then refresh your pagetwo.html window and the redhead will be there. The "src" part tells the browser to look in the directory called "media" and get the file called "redheadthumb01.jpg". The width and height are in pixels and should always be used. This keeps your page layout from shifting around (breaking) while the image is loading!
If you resize a larger image to smaller using HTML, you'll still burn the same amount of bandwidth as the larger image because the browser downloads the full-size image and just squishes it to your dimensions!
Images as Links...
As you may have guessed, we're going to use a thumbnail to link to a bigger picture. Doing that is relatively easy because, if you remember, anything that goes between a set of <a></a> tags becomes a link. Add the following to your code...
<head>
<title>ChangRox.com-(page two)</title>
<link rel="stylesheet" type="text/css" href="changroxstyle.css" />
</head>
<body>
<!-- This is the beginning of the body of my page. -->
<p>Here are some heading tag examples...</p>
<h1>Large Heading on Page Two</h1>
<h2>Medium Heading on Page Two</h2>
<h3>Small Heading on Page Two</h3>
<a href="media/redheadfull01.jpg" target="_blank">
<img width="127" height="169" src="media/redheadthumb01.jpg" />
</a>
</body>
</html>
In this case, the "href" part tells the browser to get a file (redheadfull01.jpg) instead of a page. Since we usually don't want our visitors getting lost or wandering away from our page, target="_blank" is used to open the full size picture in a new window. If it were omitted, the link would open up in the same window.
Go ahead and save/refresh to see the result. Notice that the redhead thumbnail is outlined, indicating that it's a link. Go ahead and click it and the large picture will come up in a new window.
Removing the Image Border...
Most surfers are now savvy enough to mouse over an image and watch for the cursor to change to see if it's a link, so we don't really need to have the image links outlined. Plus, we may not want the borders for purely asthetic reasons. You can remove them by adding the following to your style sheet...
background-color: silver;
font-family: Arial;
}
.crrt {
color: red;
}
.dingleberries {
color: red;
font-weight: bold;
font-style: italic;
}
a:link {
font-weight: bold;
color: brown;
text-decoration: none;
}
a:visited {
font-weight: bold;
color: brown;
text-decoration: none;
}
a:hover {
font-weight: bold;
color: green;
text-decoration: underline;
}
a:active {
font-weight: bold;
color: green;
text-decoration: underline;
}
a img {
border: none;
}
Save your style sheet then refresh the browser. The border will disappear. Note that we have TWO "selectors" on one line. The "a" representing the <a> tag and the "img" representing the <img> tag. This sort of "nesting" of selectors tells the browser that every time it sees an <img> nested inside of an <a> to apply the style from the style sheet. Using multiple selectors can be a very powerful way to reduce the amount of code writing, but it can get a little complicated and will be discussed in other sections.
Wrapping Text Around Images...
Sometimes if you have a smallish image on the page, it's more visually appealing to have the page text surround the image. Fortunately, and unfortunately, it's very easy, and very hard, to do... LOL. Sorry, but that's about the truth of it. The code to attempt to try to do this is...
In HTML - <img src="..." align="right"> (or left)
In CSS - .surroundredhead {float: left;} (or right)
Either of these methods will work very easily if you have a LOT of non-breaking text to surround the image with. Where you'll start to run into problems is when you have shorter paragraphs or other elements near the image. You'll find that they will display in dramatically different ways depending on what's surrounding them and in which browser you're viewing them. That's why I included both ways, so you can experiment. There are ways to do it so that it works every time, but once again, that's a little too much to go into for right now.
DIVine Intervention...
The next lesson will be about working with the <div> tag.
© 2008 - 2011 fapmaster.com