Making Paragraphs and Images Responsive
Responsive Images and HTML5 Web Pages
Do not add height and width dimensions to your images. This is a deprecated requirement.
<img src="imagename" width="200px" height="100px" alt="alt text">
Add margins to your image using css to keep text from laying against it.
Use CSS to add or remove borders, round corners or place box shadow.
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 beside of the image.
<p class="clear"> </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 image.
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.
Free Tools We Recommend
- Free Ebook How to Code in HTML5 and CSS3
- "How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
- Free Logo Generator Turbologo.com
- If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
- FREE HTML Editor (Windows): NoteTab Light
- All the features of a commercial HTML editor.
- FREE Apache Server (Windows): IndigoAmpp
- Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
- Linux Users
- If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
- For image resizing we've found the easiest Linux tool to be Krita.
Have you tried our Free Mobile Ready Template Kit? Download Template #402 - 6 Page Kit