So, you want to make a Web Page!
Lesson 10

adapted from Joe Barta's tutorials at- PageTutor.com

If you don't already have one, be sure to create a new folder titled Lesson_10 in your HTML folder

Start by creating a simple HTML page. (don't forget the title)

<html> 
<head> 
<title>Lesson 10</title> 
</head> 
<body>
</body> 
</html>

Let's get into putting images into a web page. We're going to use this one. chef.gif

Right click to save it off this page. Save it as chef.gif to your Lesson_10 folder

You specify an image with the <img> tag...

<body>  
<img>  
</body> 

We must also specify the source.

<body>  
<img src="chef.gif">  
</body>


 

Another <img> attribute that deserves mention is alt...

<img src="chef.gif" alt="My Chef"> 

"ALT TEXT" - VERY IMPORTANT

alt is sort of a substitute for the image when the user is using a browser that isn't (for whatever reason) displaying images. Someone may be using a text only browser, he may have image loading turned off for speed or he may be using a screen reader (a browser where the web page is read aloud). In those cases, that alt attribute could be very important to your visitor.

Save as: Lesson_10A.html in your HTML/Lesson_10 folder

Begin a new page... you know what you're doing...

 

We can also specify the size of an image

<body>  
<img src="chef.gif" width="75" height="200">  
</body>
 

n


n

 

 
  

Let's finish with examples of both...

<body>  
<img src="chef.gif"><br> 
<img src="chef.gif" width="75" height="200"> 
</body>
     

n


n
n

 

 

"IMAGE / FOLDER ORGANIZATION" - VERY IMPORTANT

Let me make the point that not only does the source specify what image, it also specifies where is the image. The above source, src="chef.gif", means that the browser will look for the image named chef.gif in the same folder (or directory) as the html document itself. Below are a few diagrams...

 

src="chef.gif" means that the image is in the same folder as the html document that called for it.

src="images/chef.gif" means that the image is one folder down from the html document that called for it. This can go on down as many layers as necessary.

src="../chef.gif" means that the image is in one folder up from the html document that called for it.

src="../../chef.gif" means that the image is two folders up from the html document that called for it.

src="../images/chef.gif" means that the image is one folder up and then another folder down in the images directory.

src="../../../other/images/chef.gif" I'm not even going to try and put this into words. I hope you get the drift.

Save as: Lesson_10B.html in your HTML/Lesson_10 folder

On to Lesson 11