HTML

Today we will learn how to insert a picture into the table we created in an earlier lesson. We will also place some formatted text, into our table

And here's our PICTURE!

To copy the picture to your computer, hold the mouse pointer over the picture and right click. Select Save Picture as... from the list. Give the file a name and voila! You've got yer own copy.

Open the wptable.html file from the earlier lesson (or go back and copy it), and let's get started.

1. Delete the line that says This is the table header and replace it with <h3>Welcome to My Homepage </h3>.
2. Now, delete the line that says This is Row 2 Cell 1 and replace it with <img src="smiley.jpg" alt="smiley!" />.
   • When we insert an image into our page, the src attribute of the img tag will tell the browser where the picture is located. In the example here, I used what is known as the relative path, used when the image is in the same folder (directory) as the HTML document, and consists of only the file name.
   • Suppose that the image file was in a folder called images, which is in the same folder as the HTML document, the path would then look like this, images/smiley.jpg.
   • Or, if the image file is in the parent folder (the image file is in the c:\ directory on our windows machine and the html file is in c:\htmlFile for example) our path looks like this ../smiley.jpg, where the two dots (..) represent the parent folder.
   • Another alternative is to use the extended or full path of the image file. Suppose the file is on a web site somewhere, we can write the source path like this, http://www.justaboutme.20megsfree.com/html/smiley.jpg. If you do not maintain the directory of the file however this last method is not recommended, if the owner of the image decides to delete it, or move it to a different location, chances are they won't tell you before they do, and the users of your page will see the blank image box.
   • The simplest way to maintain your images is to put them all into one folder (images for example) and use the images/image_sample.jpg path for all of your pages, or to keep all of your HTML documents and image files in the same folder and use the filename only method.
   Change the data tag to look like this, <td width="50% align="center">.
3. Finally, delete the This is Row 2 Cell 2 text, and type <h3>This is a picture of me on vacation. This year I went to <b>West Podunk</b>. It was <i> fantastic!</i> Next year, I am going to <b>South Padukahville</b>. <br />
   (the next tag only works in Internet Explorer) <marquee>Thanks for visiting my page!< /marquee>

Click Here to view our new page.

Man, we are getting good at this stuff. Next I think we better learn how to insert links into our pages!!