Image Tags

Find in-depth information about html tags at W3 Schools.

Images are the first type of media you will probably try out on web pages or in a blog or some other Web 2.0 platform. The judicious use of images can vastly enhance the learning materials you create on the Web. How to best design and produce graphics for learning is a topic sufficient for a course in itself —here, we will just look at the technical aspects of placing an image in your webspace.

Images for the web are, typically, in the jpg (photos) or gif (graphics) format, though the newer png format is also widely supported. Images in your webspace must themselves reside on a web server just like the files that make up your text-based web content. This means that there are two vital elements to putting an image in your webspace: writing the html tag that places the image on your page and uploading the image file to a suitable web server.

Web-hosting for your images

If you are creating a web page to place on the web server space provided to you by your ISP or by your school, university, or some other institution, you can place the image file in the same space as you plan to place the html file. A better strategy in these cases is to create a directory (a fancy term for a folder on a web server) called “images.” This way, as your website grows, you will have a single spot for the image files you add.

If your web space is a blog or some other Web 2.0 tool, you may have the ability to upload images to this system (often, only to a specific cumulative file size). If your webspace doesn’t offer image hosting, or you want to upload more images than the limit allows, or you just want to keep your web images in one place, you can use a service like Flickr to store and serve your images for other web pages.

Regardless of how you plan to store your images for web serving, you will need to know the url of these images in order for them to be displayed on your web pages. If you store your images in a directory alongside the rest of your website, you can use a relative path such as  “images/myfirstpic.jpg.”  If you think you might use this web page in another spot away from the rest of your website, you are better off to use an absolute url that will work regardless of the html file’s proximity to the image file, such as “http://www.myinternetprovider.com~myname/images/myfirstpic.jpg.”

Inserting images on your web page

Images are placed in webspace using the “img” tag. This is a “self-closing” tag that contains attributes describing the location of the image, alternate text for browsers or users who cannot see the image, and other styles, as appropriate.

<img src=”http://www.myinternetprovider.com~myname/images/myfirstpic.jpg” alt= “This is a picture of Waldo” title=”This is a picture of Waldo” width=”300″ height=”200″ />

In the example above, an image stored on some personal web space, with the alternate text “This is a picture of Waldo” was displayed with a size of 300 pixels wide by 200 pixels tall. You can use the width and height tags to manipulate the size of pictures, but you will get better results if you use editing software (like Photoshop or Picknik) to change your picture to the size you need and then place it on your webspace.

You can use styles to add a border to your image or place you image in a specific spot relative to the rest of your web content. Most browsers, by default, will not display a border around your image, but, to ensure that no border is displayed, you can use the style “border:none.”

<img src=”http://www.myinternetprovider.com~myname/images/myfirstpic.jpg” style=”border:1px solid #000000″ alt= “This is a picture of Waldo” title=”This is a picture of Waldo” width=”300″ height=”200″ />

In the example above, three attributes are given to the style “border.” They could also be added as style=”border-width:1px; border-weight:solid; border-color:#000000″ but the previous method is quicker and keeps all the border styles in one place. A common use of styles in images is to place the image to the left or right so that text wraps around it.

<img src=”http://www.myinternetprovider.com~myname/images/myfirstpic.jpg” style=”float:right; padding-left:8px” alt= “This is a picture of Waldo” title=”This is a picture of Waldo” width=”300″ height=”200″ />

It's me!

This example shows the styles that places the image to the right of the page (or to the right of the container for your entry in a web2 system like a blog) and places an 8-pixel buffer to the left of the image so that text doesn’t run right up to it. In order to place you image to the left or right and have text wrap around it, the image (with appropriate styles) must be placed above the text you want to wrap around it.

Use the tool below to try out some this html.

Here is an example that will work if you paste it into the editor below. Note that the image is already placed on my own server (3bees.ca). You can do the same thing by putting an image on your Media Library within your blog. Go to view your image within the Media Library and it will display the URL for your image.

<img src="http://3bees.ca/utility/images/canada-flag.png" width="220px" height="110px" alt="Canada Flag" title="Canada Flag" />

Leave a Reply