Working With HTML Images

html

The HTML image tag is an inline element however there will be instances when flowing text around an image is desired. In fact, this happens all the time. If you’ve worked with images in HTML, you’ll know that at times it seems like the image has a mind of its own in regard to where and how it gets displayed on the page in relation to text. Let’s take a closer look at embedding images in wordpress, and how to format them so that images and text can live in harmony. In fact, in looking at the opening text of this tutorial, we are using one of the very techniques we will discuss. Let’s begin!


First we’ll need to whip up some HTML with an image so that we can complete some tests.

<!DOCTYPE html>

<html lang='en'>

<head>
 <meta charset="UTF-8" />
 <title>Working With HTML Images</title>
</head>

<body>
 <h1> Working With HTML Images </h1>
 
 <img src="images/html.png" width="240" height="240" alt="html 5 logo" title="html 5 is the language of the web." />
 
 <p>Web Developers use HTML to build websites for the Internet. The Internet is also known as the World Wide Web. HTML is not the only technology in use however. You may also run across CSS, JavaScript, Ruby, PHP, and SQL. All of these pieces of the puzzle fit together to create something of value. It is fun to read text, yes it is.</p>
 
 <p>You may like chicken. Your friend may prefer only fresh fruits and vegetables. Leafy Greens are likely the best bet for you. The other day, I had a delicious lunch at an Italian restaraunt. Have you had yourself a nice bowl of Pasta lately with some nice red sauce? I'm sure you have, but if you have not, it is important that you do.</p>
 
 <p>If it comes to your attention, you'll notice this is nothing more than gibberish. Due to the war on lorem ipsum, nonsense text has become the defacto standard for working with agile mockup tutorial text snippets. Focusing on the low hanging fruit will yield dividends in the same space of time. Yes if you must, you can do just that. Have a great day!</p>

 </body>

</html>

As you can see, there is nothing special about this snippet of HTML. Of course if you read the sample text, you may be enlightened by a few of the words of wisdom provided, but beyond that – this is pretty simple stuff. This is a basic HTML Web Page which supports HTML5 based on the doctype, it has some basic head information, an h1, an image, and a few paragraphs. We can view it in the browser and it displays as you see here.
working with html images

The image is all by itself, but not because it is block level. The paragraph begins after the image tag, so the text starts at that point. How about if we’d like to have the text flow around the image instead. We can do this with CSS. For brevity, we’ll just put the style rules right in the head of the document. The following code will now be inserted.

<style>
  img {
   float:left;
  }
</style>

css image float left

There we go! That looks a little better. By applying the css float property to the image tag, we can control how text flows around an image. It looks ok, but it feels a little cramped. The text is smacked right up against the image. Let’s give the layout a little breathing room. By adding some margin values to the CSS like so

<style>
  img {
   float:left;
   margin-right: 50px;
   margin-bottom: 10px;
  }
 </style>

We’ll notice that the text now has plenty of space between itself and the HTML5 logo. This looks a little better.
css image margin right

Just as we can float an image left, floating the image right is just as easy. We’ll float left, and also change the margin-right to margin-left so that it looks uniform. With the new code of

<style>
  img {
   float:right;
   margin-left: 50px;
   margin-bottom: 10px;
  }
 </style>

The page will now look like this.
css image float right

That looks pretty good. Understanding how to float text around your images is going to reduce your frustration levels twenty fold, trust me!

One thing to note about assigning the float property to images is that it converts the element from inline to block level. This will have an impact on other CSS design that may be applied to the element.


Dealing With Multiple Images

Ok so we’re happy, we know how to align text with images and all is right with the world. Let’s add another image to the page so we can see how things work. We’ll add the next image using this snippet of HTML:

<img src="images/html.png" width="240" height="240" alt="html 5 logo" title="html 5 is the language of the web." />
<img src="images/javascript.png" width="240" height="240" alt="javascript logo" title="Douglas Crockford wrote JS Lint" />

Now, you would think that these two elements would stack on top of each other by looking at the source code. What happens in the web page when we load it in the browser is a little different though. This is the result so far.

multiple html images

Hey that looks really good! you say. Maybe you didn’t quite expect the images to display side by side, but hey, you’re of the easy going variety and it looks acceptable so good enough, right? Well, it’s all good except for one problem. Your picky client keeps talking about their competitor and how great their stacked images look on their marketing page. He feels so attached to this stacking look, that he has decided that you don’t get paid until images stack. What’s a friendly Web Developer to do? Well, in this case, the clear property may be just what the doctor ordered. Let’s add it to our CSS markup like so.

<style>
  img {
   float:right;
   clear: right;
   margin-left: 50px;
   margin-bottom: 10px;
  }
 </style>

html stacked images

Boo Yeah!! One word: Stacked. Good work Grasshopper.


HTML Floats – Break it Down

As text flows around an image, you may run into a scenario where you would like to break a portion of the text so it begins after the image. This is possible using the clear property, let’s see how to do it. Here is some new HTML to work with here.

<!DOCTYPE html>

<html lang='en'>

<head>
 <meta charset="UTF-8" />
 <title>
  HTML Floats - Break it Down
 </title>
 <style>
  img.float-right {
   float: right;
   margin-left: 12px;
   margin-bottom: 7px;
   border: solid blue 1px;
   padding: 3px;
  }
  .clear {
   clear: both;
  }
 </style>
</head>

<body>

 <h1>
    HTML Images
</h1>

 <img src="images/css.png" width="240" height="240" alt="CSS" TITLE="CSS controls your presentation" class="float-right" />
 <p>
  There was a time when you thought you were free of nonsense text. This was not true however, as you are witnessing all kinds of text on the screen now and it's likeness is of the nonsense variety. And speaking of that, have you had any good mexican food lately? A delicious burrito could do me good right about now. Let's see, how about some nice Chicken, Salsa, Refried Beans, Sour Cream, Triple Cheese Blend, and Guac. That should do it.</p>
 <p>
  At this time, we have entered the second paragraph. It is text and it is in a paragraph. Now that we have have had some yummy dinner, we can move on to desert. What shall it be? I'm partial to chocolate so lets look at the double fudge, mud pie, special with vanilla ice cream and whip cream on top. Normally, this much food is not consumed, however we need a lot of nonsense text, so we need to keep eating.</p>
 <p>
  The last paragraph of text is now in play. We can ponder the benefits and drawbacks of using prebuilt frameworks in the various applications you may build. Maybe you're writing in Ruby, so Rails is likely your framework. If you plan to use JavaScript, you will have way too many choices. Likewise with PHP. There are more frameworks than you can shake your booty at. Speaking of shaking booties, do you like to play Just Dance. It may be of benefit to play Just Dance, as it will generate dance moves as you feel the grooves.</p>

</body>

</html>

html image float right

Cool! This looks pretty good. Now let’s consider the second paragraph where we have finished dinner, and moved on to dessert. Perhaps we’d like that second paragraph to begin after the image. Let’s see how to do that. We’ll make use again of the CSS property clear which is used to clear floating objects like an image. You can specify a value for clear of right, left, or both. In this example, by adding this css

#hack {
   clear: right;
  }

and this markup to the paragraph in question

<p id="hack">
  At this time, we have entered the second paragraph. It is text and it is in a paragraph. Now that we have have had some yummy dinner, we can move on to desert. What shall it be? I'm partial to chocolate so lets look at the double fudge, mud pie, special with vanilla ice cream and whip cream on top. Normally, this much food is not consumed, however we need a lot of nonsense text, so we need to keep eating.</p>
 <p>

We get the exact result we were looking for!
html float right clear

Have a play around with the other clear options to see how they work in your web pages. You’ll love the control the clear property is able to provide when dealing with floating elements on the page.


Image Maps in HTML

In HTML you can define regions of one image that all point to different links that you specify. This is what is known as an image map, and they are really cool. In looking at the HTML below, you’ll notice that the image we are using has a new attribute called usemap. The attribute has a value of #imagemap. This is the name of the map. This tells the image to look for a <map> tag which has the name of #imagemap. Inside of the <map> tag are several <area> tags, each one defining a hotspot on the image that will now contain a hyperlink to another URL. In the example here, we only used the rectangle and circle options however you could also make use of the polygon shape if you like. The image render after the HTML markup is a live example, go ahead and click the different areas on the image and see where they take you!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Image Maps in HTML</title>
</head>

<body>
<img src="images/imagemaps.jpg" width="400" height="300" usemap="#imagemap">
<map name="imagemap">
  <area shape="rect" coords="6,39,126,137" href="https://vegibit.com/what-is-html/" alt="what is html">
  <area shape="rect" coords="136,40,249,140" href="https://vegibit.com/digging-in-to-html-fundamentals/" alt="html fundamentals">
  <area shape="circle" coords="316,96,55" href="https://vegibit.com/the-top-11-most-important-html-text-features-to-review/" alt="html text features">
  <area shape="rect" coords="383,46,485,145" href="https://vegibit.com/getting-started-with-javascript-programming/" alt="get started with javascript">
  <area shape="rect" coords="17,174,126,273" href="https://vegibit.com/javascript-code-structure/" alt="javascript code structure">
  <area shape="rect" coords="141,172,245,274" href="https://vegibit.com/javascript-functions-tutorial/" alt="javascript functions">
  <area shape="circle" coords="320,215,59" href="https://vegibit.com/javascript-events-tutorial/" alt="javascript events">
  <area shape="rect" coords="384,165,486,276" href="https://vegibit.com/document-object-model-tutorial/" alt="document object tutorial">
</map>
</body>

</html>
what is html html fundamentals html text features get started with javascript javascript code structure javascript functions javascript events document object tutorial

imagemaps