Step 12 – Images

Last update: September 12, 2019

What’s a website without graphics and images? Within HTML you can use the images tag to place images as part of a layout or as part of content.

This step will teach you:

Adding An Image To HTML

Add the following code:

<html>
<head>
<title>my own homepage</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<font face="Arial">
<center>
<img src="images/logo.gif" width="400" height="161" alt="logo" />
<h2>A short introduction</h2></center>
<p>Nora Tol started offering webdesign services since the <u>middle of the 90s</u> with her
first company <i><font color="#ff9b6A">Nora Tol Virtual Publishing</font></i> and, now,
with her second company,
<i><font color="#ff9b6A">ElNorado Productions</font></i></p>
<p><u>By growing demand</u>, she expanded her services with designing logos, hosting,
online marketing and even creating online content.</p>
<p>This is a short list of the services offered:
<ol>
<li> Web design</li>
<li> Logo design</li>
<li> Website hosting</li>
<li> Domain registration</li>
<li> Keyword research</li>
<li> SEO</li>
<li> Ad campaigns</li>
</ol>
</p>
<center><p>Take a look at her website for more information.<br /><b><font size="4">Or get in
touch</font></b>.</p>
</font>
<hr width="50%" color="#000000" noshade size="2">
</center>
</body>
</html>

With the line <IMG SRC=”images/logo.gif” WIDTH=”400″ HEIGHT=”161″ ALT=”logo” /> I’ve added my (old) company logo to my web page.

The HTML Images Tag Explained

IMG is short for “image”.
SRC is short for “source”. Here, you refer to the image file you want to show. In this case, that’s a file called “logo.gif”, which is found in the sub directory “images”. (Read how to format the path in Step 12f)
Adding the attributes WIDTH and HEIGHT is not required, but helps to download the image faster. By already telling the browser how big the image is, there’s no need for it to calculate it before downloading. The values in WIDTH and HEIGHT are automatically given in pixels.
ALT stands for “alternative”. It’s  not required either, but vital for search engines. The text you write here is shown when an image can’t get loaded, but search engines also use this text to find out what the image is about. You also see the ALT text, when you hover your mouse over an image.

Step 12b – Image alignment

Note: This is phased out in HTML5. You’ll need to use CSS for this, then.

The attribute ALIGN of the IMG-tag, allows you to set the alignment of the image in combination with text on the same page:

<img src="images/logo.gif" align="left" />
<img src="images/logo.gif" align="right" />
<img src="images/logo.gif" align="middle" />
<img src="images/logo.gif" align="top" />
<img src="images/logo.gif" align="bottom" />

Step 12c – Use Image As Link

If you want an image to be clickable, like a link, you just add the Anker tag:

<a href="https://www.noratol.com"><img src="images/logo.gif" align="left" /></a>

Step 12d – spacing around the images

Note: This is phased out in HTML5. You’ll need to use CSS for this, then.

When you choose LEFT or RIGHT alignment, the text will wrap itself around the image. Text will attach itself to the image, which is not a pretty sight. To add some white spacing around the image, you can add some horizontal (HSPACE) and vertical space (VSPACE):

<img src="images/logo.gif" align="left" hspace="2" vspace="2" />

The value is given in pixel, so you’re actually creating an invisible border around your image (of 2 pixels thick in the above example).

Step 12e – image border

Note: This is phased out in HTML5. You’ll need to use CSS for this, then.

But, you can also create an actual visible border around the image. This will happen automatically when you use an image as a button (you’re using the image as a link). This is how you create a border:

<img src="images/logo.gif" border="2" />

A border with a thickness of 2 pixels is added. When using images for links, please note that the color of this border is defined by the LINK or VLINK attributes of in the BODY-tag.

To turn off a border, you set the value to 0:

<img src="images/logo.gif" border="0" />

Step 12f – Refer to the path of the image

If you followed my instructions, at the beginning of this course, you’ve placed the images in the sub directory “images”. But suppose you didn’t. Suppose, you’ve placed the images in the same directory as your HTML file. Your image path will be:

<img src="logo.gif" />

or

<img src="./logo.gif" />

The code “./” simply stands for current directory, which is the current directory based on the location of the HTML file.

If you’ve placed the graphic a directory back (one level higher), then your HTML code would be:

<img src="../logo.gif" />

Now, don’t think, that one level higher can be reached by adding more dots. If you want to go further back you, say two directories, the code will be:

<img src="../../logo.gif" />

These instructions for writing paths also apply other files, such as other HTML files, PDF files etc.

On a web server, you can also use a full web location, for instance:

<img src="https://www.domain.com/images/logo.gif" />

Step 12g – Image types to use (jpg, png and gif)

Most images used on websites are .jpg, .jpeg, .gif or .png. This is because all browsers read them. They are also easily compressed, which reduces the size of the file, but they still retain most of their on-screen quality. Other formats can cause problems.

For instance, the difference between .jpg and .gif is huge. .Gif images use a limited amount of colors, but you can create animations with them. Both .gif and .png image allow transparent backgrounds, which is so cool! .jpg can use up to millions of colors. Together with .png they offer a great quality. Most of these filetypes allow you to play with settings in photo editing software to reduce size. A smaller size makes it faster to download.

HTML 5 pushed the format svg in popularity. With this, you can create certain images purely with HTML.

Step 12h – Image troubleshooting

Avoid using spaces

Pay close attention naming the image! Try to avoid using spaces, use underscores instead.

Avoid using a mix of lower- and uppercase in file names

Be consistent with using lower- or uppercase. The most frequent problem causing images not to show on a website have to do with the naming. It all has to match exactly, so if you’re filename is image.GIF, then your code should be <IMG SRC=”image.GIF” /> instead of <IMG SRC=”image.gif” />.

Always refer to the exact location

As mentioned above, you need to always refer to the right path of your image on the server. Check if you really uploaded the image too.

Problems with JPG

Is everything correct, but your .jpg file is still not showing in your browser? You could’ve used the CMYK color model in the jpg file. Browser only support the RGB model. You’ll need to change this in your photo editing software.

Go to Step 13

Bookmark the permalink.

Comments are closed.