EDUTAINMENT: November 2015

Let the image float to the left/right of a paragraph - HTML Programs

<html>
<body>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> A paragraph with an image. The image will float to the left of this text.
</p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> A paragraph with an image. The image will float to the right of this text.
</p>

<p><b>Note:</b> Here we have used the CSS "float" property to align the image; as the align attribute is deprecated in HTML 4, and is not supported in HTML5.</p>

</body>
</html>

Output

A paragraph with an image. The image will float to the left of this text.

A paragraph with an image. The image will float to the right of this text.
Note: Here we have used the CSS "float" property to align the image; as the align attribute is deprecated in HTML 4, and is not supported in HTML5.

Note: Due to inclusion of code to blogpost, images not able to display. But the code will work properly

Aligning images - HTML Programs

<html>
<body>

<h4>Image with default alignment (align="bottom"):</h4>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="32" height="32"> This is some text.</p>

<h4>Image with align="middle":</h4>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32"> This is some text.</p>

<h4>Image with align="top":</h4>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32"> This is some text.</p>

<p><b>Note:</b> The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.</p>

</body>
</html>

Output

Image with default alignment (align="bottom"):

This is some text.

Image with align="middle":

This is some text.

Image with align="top":

This is some text.

This is some text.
Note: The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.

Note: Due to inclusion of code to blogpost, images not able to display. But the code will work properly

Insert images - HTML Programs

<html>
<body>
<p>
An image:
<img src="html/home.png" alt="home" width="32" height="32"></p>

<p>
A moving image:
<img src="smiley.gif" alt="you are the best" width="48" height="48"></p>

<p>
Note that the syntax of inserting a moving image is no different from a non-moving image.
</p>

</body>
</html>

Output

An image:

A moving image:

Note that the syntax of inserting a moving image is no different from a non-moving image.

Note: Due to inclusion of code to blogpost, images not able to display. But the code will work properly

EDUTAINMENT

Pages

Auto AdSense

Tuesday, 17 November 2015

Let the image float to the left/right of a paragraph - HTML Programs

Output

Note: Due to inclusion of code to blogpost, images not able to display. But the code will work properly

Aligning images - HTML Programs

Image with default alignment (align="bottom"):

Image with align="middle":

Image with align="top":

Note: Due to inclusion of code to blogpost, images not able to display. But the code will work properly

Insert images - HTML Programs