An image can be inserted into html code with the <img> tag. The <img> is an empty tag which requires the "source" attribute (to specify what image to display) and looks like this:
<img src="button.gif">
An "inline" image is one that is displayed "in line" with the rest of the code (not inside something else like a table cell). If you specify the size of the image like this:
<img src="button.gif" width="200" height = "40">
the rest of the page will be created without waiting for the picture to download. This may not make any difference unless the picture is large.
Normally you don't want to use these attributes to size your image. If your image is smaller than the width and height you specify, stretching it may affect the quality of the image. If your image is larger than the attributes you insert, then you are using more bandwidth than needed and it will slow down your pages. However, to avoid having you download several different images I am going to change the size of this one for a few illustrations.
If you aren't using "containers" such as tables or layers to control the placement of your text and pictures, you need to know how the image will affect the flow of your text. If you want your text to flow around your picture, you will need to align the image like this:
<img src="button.gif" width="200" height = "40" align = "left">
You can also use right. When you use the left or right align attributes, the text or other html will flow around the picture. To stop the flowing, use the <br> tag with the clear attribute (see example below.) Other options for align are vertical alignments such as top, bottom and center.
Copy the text below into your text editor, save it as lesson4a.htm and open it in your browser so you can see how text flows around right or left aligned pictures. Be sure to look at each picture. You will also need to copy this button into the same folder with your tutorial samples. Click on the file to get it and save it as button.gif. (If it's not in the same folder the samples will not work.)
--------------------------------------------------------------------
<html>
<head>
<title> Images</title>
</head>
<body>
<h1> Inline Image</h1>
<p> I am typing along my merry way and suddenly, in the middle of a sentence, I insert an image <img src = "button.gif"> and then I just keep on typing more and more. Hopefully you don't think this looks good.</p>
<p> <img src="button.gif"> I decided to put the image at the beginning of the paragraph instead of in the middle. This still looks pretty ugly.</p>
<p> <img src="button.gif" width="200" height = "100" align = "center"> This image is aligned center. It is starting to look a little better. That is, it looks better if I only have 1 line of text. But it is not in the center of the page. Instead, it is vertically centered with the text. Also note that I have specified a different height this time.</p>
<p><img src="button.gif" width="200" height = "100" align = "left">This image is aligned left. This allows text to flow around the picture. The text will look like this as long as my paragraph doesn't take up more lines than the image.This allows text to flow around the picture. The text will look like this as long as my paragraph doesn't take up more lines than the image.</p>
<br clear = "left">
<p><img src="button.gif" width="200" height = "100" align = "right">This image is aligned right. It looks a lot like the previous image except the image is on the right.</p>
<br clear = "right">
<p><img src="button.gif" width="200" height = "100" align = "left">This image is aligned left. This allows text to flow around the picture. The text will look like this as long as my paragraph doesn't take up more lines than the image. </p>
<p><img src="button.gif" width="200" height = "100" align = "left">This image is aligned left. This allows text to flow around the picture. The text will look like this as long as my paragraph doesn't take up more lines than the image.</p>
<p><img src="button.gif" width="200" height = "100" align = "right">This image is aligned right. It looks a lot like the previous image except the image is on the right.</p>
<h2> Stop here and read the next section of the lesson.</h2>
<p align = "center"> <img src="button.gif" width="200" height = "100" > </p> <p align = "center">This image is contained inside a centered paragraph.</p>
<p><img src="button.gif" width="200" height = "40" align = "left">This image is aligned left. The text will flow around my image as long as the text doesn't take up more lines than my image. But my text is getting longer and longer. My text is getting longer and longer. Now my text is even longer. And I keep adding more text. As I add more and more text, I finally start using up the 2 available lines next to my image. At some point, if I add enough text the last line will not flow around my image anymore, it will go back to the left margin.</p>
<p><img src="button.gif" width="200" height = "40" align = "left" vspace = "15">This image is aligned left. The text will flow around my image as long as the text doesn't take up more lines than my image. But my text is getting longer and longer. My text is getting longer and longer. Now my text is even longer. And I keep adding more text. As I add more and more text, I finally start using up the 2 available lines next to my image. At some point, if I add enough text the last line will not flow around my image anymore, it will go back to the left margin.</p>
<p><img src="button.gif" width="200" height = "40" align = "left" vspace = "15" hspace = "15">This image is aligned left. The text will flow around my image as long as the text doesn't take up more lines than my image. But my text is getting longer and longer. My text is getting longer and longer. Now my text is even longer. And I keep adding more text. As I add more and more text, I finally start using up the 2 available lines next to my image. At some point, if I add enough text the last line will not flow around my image anymore, it will go back to the left margin.</p>
</body>
</html>
------------------------------------------------------------------------
Important things to note are that with no alignment, top, bottom, or center alignment, the text does not flow around the picture. This only works with right or left alignment. (For images, align = "center" is a vertical alignment. To put an image in the center of the page, place it inside a centered paragraph.) Also, note that when I did not use the clear command after the last left aligned paragraph, everything kept "flowing" around the image, including the next image.
There has to be a way to center an image on the page, right? Sure there is! Just put it inside a centered paragraph, as shown in the example page And what if I have it centered left, but my paragraph is longer than my image? There are a few more attributes that will make further adjustments to your image. Look at the images below the centered image. If you don't see at least 3 lines of text, reduce the window you are viewing it in. Note how the final line goes back to the left margin after the picture. In the next example I have used the vspace attribute to add vertical space. The "15" represents adding 15 pixels top and bottom. Now my text is all lined up. For the final image, I added horizontal space around the image. Note that the horizontal space is added to both sides of the image.
Since I don't have a way to move your image around to different files on your computer, I will just give you this final information about referring to an image that is not in the same folder. Bottom line is that you list the folders to go through to get to the file, but when you go up to a parent file you use 2 periods in place of the folder name. Here are some examples using the following directory structure:
c:\HTML Pages
\Images (this folder contains image2.gif)
\Nice Pages (contains nicepage.htm)
\Original pages
\other images (contains image3.gif) \Plagiarized pages
\Ugly Pages
index.htm (in the HTML Pages folder)
image1.jpg (in the HTMl Pages folder)
(when I tab over that means it's a subdirectory.)
OK, let's say I am working on index.htm and I want to use image1.jpg. The image is in the same folder and I use the format I used in the examples:
<img src = "image1.jpg">
Image2.gif is in a child folder compared to index.htm. (Images is a subdirectory of HTML Pages) To show image2.gif in my index page, I use the following syntax:
<img src = "Images/image2.gif">
Image3.gif is in a great-grandchild folder, so I would use
<img src = "Nice Pages/Original Pages/other images/image3.gif">
Now I'm working with nicepage.htm in the Nice Pages subdirectory. Image1.jpg is in a parent directory compared to nicepage.htm, so the syntax is:
<img src="../image1.jpg">
Image2.gif is in a sibling folder to nicepage.htm so I have to go up to the parent folder HTML Pages and then down into the Images folder as follows:
<img src="../images/image2.gif">
(If you needed to go up 2 folders just do ../../whatever.)
You can use this same logic for links when you are linking to a file.
Background images:
The final thing you can do with an image is make it the background. If you want to see what this looks like, save the following as lesson4b.htm and open it in your browser (since the image is not as big as the screen it will be tiled.):
-------------------------------------------------------------
<html>
<head>
<title> Lesson 4B</title>
</head>
<body background = "button.gif">
<h1 align = "center"> BACKGROUND IMAGE</h1>
<br>
<h1> This image is not what I would pick for a page background.</h1>
</body>
</html>
-------------------------------------------------------------
Tip - if you are concerned about people who have images turned off, you can add alternate text to your image tag like this:
<img src = "button.gif" alt= "button">
The alt text will only appear if images are turned off.
You are now more than halfway through this tutorial. Take a break, get a diet coke, and come back for the next lesson.