How to Add Text next to a Picture in HTML using the Paragraph Tag

Then Make it Responsive

We've already learned how to add an image to a page, so the next step is placing it in a paragraph next to the text.

Remember the rules:
DO NOT add height and width dimensions to your images.

<img src="path/imagename" width="400px" height="400px" alt="alt text">

Rather use relative values (percentages) defined in your style sheet.

<img src="path/imagename" class="l-img" alt="alt text">

img.l-img {
float:left;
max-width:50%;  /*Can use no more than 50% of available space*/
margin:1% 1%;
box-shadow: 0 2px 4px #000003
}

Add margins to your image using css to keep text from laying against it.
margin:1% 1%;

Use CSS to add or remove borders, round corners or place box shadow.

Another way to make images responsive is using the swapping technique demonstrated in our Download Template #402 - 6 Page Kit

Methods of Alignment

Here are the methods used for left, right and center placement in paragraphs and making them responsive, where they adjust to the width of the viewing device.

There are also inline methods for placement.

First of all, you must begin with an already responsive container. That just means your web page already adjusts to the width of visiting devices.

Aligning Responsive Pictures to Left of Text

In HTML5 Use:
<p><img src="imagename" alt="alt text" class="l-img">Text here</p>

In this paragraph the alignment attribute of the image is set using the float property float:left.(Style settings for .l-img below)

When the float left property is chosen text will flow to the right of the image.

Notice that in the style sheet we set the width using percentages

img.l-img{
float:left;
max-width:50%;/*Can use no more than 50% of available space*/
margin:1% 1%;
box-shadow: 0 2px 4px #000003
}

Ensuing paragraphs and elements like h1-h6 will also flow upward to the right of the image to fill any vacant space.

We prevented that from happening on this page by placing a the following code after the desired amount of text that we wanted next to the picture.

<p class="clear">&nbsp;</p>  The CSS: p.clear {clear: both}

Aligning Responsive Pictures to Right of Text

In HTML5 Use:
<p><img src="imagename" alt="alt text" class="r-img">Text here</p>

In this paragraph the alignment attribute of the image is set to float:right. When the float right property is chosen text will flow to the left of the picture.

The styling for class r-img

img.r-img{
float:right;
max-width:50%;
margin:1% 1%;
box-shadow: 0 2px 4px #000003
}

Ensuing paragraphs and page elements will also flow upward and to the left of the image. You can prevent that using the simple method shown above.

See also: The float Property

Centering Responsive Images

Here's the HTML code for centering a naked image:

<img src="imagename" class="centerimg" alt="alt text">

The style sheet for class centerimg.

img.centerimg{ 
max-width:96%;
float:none;
display:block;
margin: 0 auto;
box-shadow: 0px 2px 4px #000000
}

These 3 lines do the centering:

float:none;
display:block;
margin: 0 auto;

Do not set the image in a paragraph unless you center it.

Inline Images

You've seen the instruction manuals that place icons in the text of a paragraph.

HTML5 makes it very simple to do this.

IndigoAmpp includes an option during installation for attaching the start up icon to the task bar.

The HTML5 code:

<p>IndigoAmpp includes an option during installation for attaching the start up icon <img src="images/start-up-icon.PNG" style="border: 0; display:inline; margin: 0 2px; box-shadow: none" alt="start up icon">to the task bar.</p>

Use of Classes

Rather than using inline code, a better option for adding the style settings would be to create customized classes.

You might use imager for right aligned images, imagel for left aligned and imagec for centered.

Note: When placing images in web pages, always use optimized, interlaced images. Large bulky image files will cause your pages to display very slowly. Size of files can be reduced by limiting them to the least amount of colors that will allow the image to display properly. Interlacing gives the appearance of an image loading in layers. If the image is slow in loading the user will see something on the screen rather than just a blank page. Interlaced images don't normally load faster than non-interlaced, but they do give that appearance.