Step 6: Images

Nothing has changed in comparison to the old HTML version to add images. You still use the <img>-element. Make sure you know the exact name of your photo file, including caps, spaces, dashes etc. The name in your HTML code should match exactly with the file name and location on the server. If you’ve not worked with images and HTML before, please read my previous HTML course for more information and trouble shooting.

Add an image

In our sample file we’re going to add my artist logo. The file is called “nora_logo.jpg” and it’s located in an “images” folder. To add this image, this is what you want your HTML file to look like:

<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title>Whatever title of your file</title>
</head>

<body>

<p><img src=”images/nora_logo.jpg” alt=”nora’s artist logo” height=”42″ width=”50″ /></p>

<p>Nora Tol loves pop music and loves to write. At the early age of 9 those two loves got combined when she wrote her first lyrics. She never stopped writing song words since and also started producing music in her teens.
</p>

<div>
More recently Nora’s been releasing various songs and music videos for you to enjoy online.
</div>

The bold bit is newly added. You can tell that I’m already closing the <img>-element, because I’ve added the forward slash in my code:

<img src=”images/nora_logo.jpg” alt=”nora’s artist logo” height=”42″ width=”50″ />

However HTML5 supports the <img>-element not to be closed at all. So this would be ok too:

<img src=”images/nora_logo.jpg” alt=”nora’s artist logo” height=”42″ width=”50″>

Because HTML5 assumes you’re using CSS to determine standard layout formats it has stopped supporting the following old attributes for the <img>-element: align, border, hspace, longdesc and vspace.

<figure>-element

The cool thing about HTML5, is that you can also now specify illustrations in your content. So that little pie chart about your online success can be defined in the coding and get specific markup when you use CSS. The <figure>-element nests the <img>-element, like this:

<figure>
<img src=”images/nora_audience.jpg” alt=”nora’s audiene in a pie chart” height=”400″ width=”400″ />
</figure>

If you want, you can also specify a caption to go with your image using the new <figcaption>-element:

<figure>
<img src=”images/nora_audience.jpg” alt=”nora’s audiene in a pie chart” height=”400″ width=”400″ />
<figcaption>Nora’s music currently reaches an audience of over 5000 people. Details above.</figcaption>
</figure>

You’re ready for the next step.

Bookmark the permalink.

Comments are closed