HTML WEB DESIGN

 

separator-blank.png

 

GUIDE – IMAGES

 

  • Find an image of something that you like on the internet.  Right click on it and save it to your HTML folder.
    • It is important that you save it in the same folder as your HTML documents.
    • You should rename the file to a simple name but DO NOT change the file extension.
    • Make sure your image is school appropriate.
    • Permitted formats are JPG, GIF and PNG.

  • Go into the HTML folder and double check that you can see both of your HTML documents and your newly saved image.

 



  • Open you webpage2.html document into your text editor.  If you haven’t removed all content, do so now. 

 

  • Your document should look like this:

 

 

<html>

<head>

</head>

<body>

</body>

</html>

 

 

·      Let’s add a header for our new document. Test it.

 

 

<html>

<head>

</head>

<body>

<center><h1>Page Two<h1></center>

</body>

</html>

 

 

 

·      We can add an image by using the <img> tag.  It requires that you use the src attribute where the value will be the filename of the image. 

Below, I add the image roy.jpg.  Of course, you need to use the filename of your image.

Add your image.

 

 

<html>

<head>

</head>

<body>

<center><h1>Page Two<h1></center>

 

<img src="roy.jpg">

</body>

</html>

 

 

·      You can center your image by using the <center> tag just like we do with text.  Try it.

 

 

<html>

<head>

</head>

<body>

<center><h1>Page Two<h1></center>

 

<center><img src="roy.jpg"></center>

</body>

</html>

 

 

·      You can resize your image by using either the width attribute or the height attribute.  The value for either is in pixels.

o  By using just one of the two attributes, your browser will scale your image the same amount in both the x and y directions.

o  By using both attributes, your image will be squished to the exact size.

Try making your image 300 pixels wide.  Of course, feel free to try a different size if you would like.

 

 

<html>

<head>

</head>

<body>

<center><h1>Page Two<h1></center>

 

<center><img src="roy.jpg" width="300"></center>

</body>

</html>

 

 

·      You can also place a border around the image by using the border attribute.  The value is the width of the border in pixels.  Try it.

 

 

<html>

<head>

</head>

<body>

<center><h1>Page Two<h1></center>

 

<center><img src="roy.jpg" width="300" border="3"></center>

</body>

</html>

 

 

Note that if you do not like the border, you can set its size to zero.  Or, you can remove the border attribute all together.

 

 

GOT EXTRA TIME?

Here are some extra details if you have extra time…

·      Enlarging an image too much will lead to a poor quality image.

·      Reducing an image’s size will not drastically impact on the image quality.  However, when your website is downloaded (if you were to put it online), everybody would be downloading an oversized image for nothing.  Ideally, you would resize the images to the approximate size you need.

 

·      If your website has a lot of images, your folder containing your site might get messy.  You can actually create a subfolder that contains all of your images and other media.  A common practice is to create a folder named media and place all images in it.  However, if you do this, your tags to your images will be different as you need to specify the folder name in front of the file name.  For example, for the image above, you would have to use:

 

<img src="media/roy.jpg" width="300" border="3">