HTML5 Images

Basics of HTML 5 - Part 7

Foreword: In this part of the series, I explain how to display images in a web page.

By: Chrysanthus Date Published: 3 Apr 2015

Introduction

This is part 7 of my series, Basics of HTML 5. In this part of the series, I explain how to display images in a web page. Any image you see on a web page is an independent web resource. It does not necessarily reside in the same directory or server as the HTML5 document. In order to have an image displayed on your web page (HTML5 document), you need an image tag (element) at the position in your web page, where you want the image to appear. Remember, the visible HTML5 elements go into the body element. So your image tag has to go into the body element. In its simplest form, the syntax for the image tag is:

<img src="URL">

The image element is a single tag element. In the simplest form, inside the tag, you have the tag name, img, and the attribute, src. src stands for Source. The value of the src attribute is a URL, which indicates the location of the image (in some server). If the image is in the same directory as the HTML5 document, which will display it, then the simple tag can be

<img src="myimage.gif">

where, myimage.gif is the name of the image file.

Note: if the image file is not in the same directory as the HTML5 document, then you have to precede the image name with the left part of the URL as explained in the previous part of the series.

In this part of the series, we see how to include images into a web page. We also see how to give the web page an icon.

The alt Attribute
You might have noticed that on some web pages, when you move the mouse pointer over an image, a tool-tip pops up giving a short description about the image. The alt attribute is used for this as in the following example:

              <img src="hisimage.gif" alt="Image of my friend">

So if the mouse pointer goes over this image, you would see a tool tip with the text, “Image of my friend”.

The order of the attributes in a tag does not matter. So the alt attribute can come before the source attribute. Note that the name of the tag (element) must come immediately after the open angle bracket; the name of the tag is not an attribute.

Image as Hyperlink Content
An example of a simple hyperlink is:

       <a href="www.hiswebsite.com">His Web Site</a>

(The http:// that precedes the URL can usually be omitted) The content of the above hyperlink is “His Web Site”. You can replace this content with an image. It is simple. Just replace the phrase with an image element, like in:

       <a href="www.hiswebsite.com"><img src="hislogo.gif"></a>

Under this condition, clicking the image is the same as clicking the hyperlink. When the mouse pointer goes over any hyperlink (text or image) it becomes a hand.

Size of an Image
For simplicity, have your image at the server, the size you want at the browser. Comparing the size of your image at the server and the size displayed by the browser actually depends on the software you used in designing the image at the server and the way your browser displays image. The difference is not usually a problem if you use default settings for your image producing software and your (user) browser.

There is a way of precising the size of the image for your HTML5 document (web page). This is better studied in the Cascaded Style Sheet (CSS) course. I will not treat that in this HTML5 course.

Creating the Image
When you create an image, you end up creating the image file as a result. There is special software for creating images. Such software is called a Painting Program. You can get some of them free from the Internet. If you have the Windows operating system, then you already have a simple painting program called, Paint. By using the Help feature of your painting program you can start creating simple images.

Resolution
The word, resolution, refers to the amount of details of image or text, your browser can display. This word applies to both text and image, but is more appreciated with images. The higher the resolution, the closer the image (picture) resembles a real life scene.

Type of Image
The same picture can be created by different technologies. This gives rise to different types of images. Each image is a file and each file name has an extension. The type of image for an image file is indicated by the extension of the image file name. Examples of image file names are, “name1.gif” and “name2.jpg”. From these two names we see two different types of images. One is a gif image and the other is a jpg image.

Illustration
Let us consider a simple illustration. Here two files are involved: the HTML5 document and the image file. You will be the one to obtain the image file. Many computers (PCs) today have (come with) image files. Common image file extensions are gif and jpg. Just search for any file with the extension, .gif or .jpg. You can also search the Internet for a free image file. Copy the file to a particular directory (folder) in your computer.

Create the following HTML5 file, give it a name with the extension, “.htm”; save it in the same directory as the image file. After that double click the file, and your browser will display the web page and the image. The name of the image in the HTML5 document should be the name (including the extension) of the image you copied.

<!DOCTYPE HTML>
<html>
    <head>
        <title>
            Products
        </title>
    </head>
    <body>
        <img src="imgname.gif">
    </body>
</html>

Icon for your Web Page
Many institutions have a logo. A logo is a small image that identifies an institution. For a web page (of an institution), such a logo is called an icon. If you want an icon for a web page, type the following tag as one of the contents of the head element:

        <link rel="icon" href="imageURL" type="image/x-icon">

The only thing I will explain here is the value of the href attribute. I will explain the other things of the tag in my next series. The value of the href attribute is the URL of the image that will appear as the icon for the web page. This icon appears as a small image in the window tab (up) of the web page. The actual image at the server can be 100px by 100px (or less). If you want the icon for all the pages of the web site then place the tag in the head element of every page of the web site.

The following example illustrates this for an image that is in the same directory as the web page.

<!DOCTYPE HTML>
<html>
    <head>
        <title>
            The title goes here
        </title>
        <link rel="icon" href="apic.jpg" type="image/x-icon">
    </head>
    <body>
        HTML elements for the body go here.
    </body>
</html>

The image type should be that which the browser supports. All browsers support the jpg and gif image types.

You should now know the basics of images. We take a break here and continue in the next part of the series.

Chrys

Broad Network

Related Articles

HTML5 Images

Basics of HTML 5 - Part 7

Introduction

Related Links

Comments