HTML5 Basics–Practice 10

In HTML5 Basics–Practice 2 we explained about how to add images in your page. In this practice we will learn something more related to adding images. Let us create a new file eg6.html. Refer HTML5 Basics–Practice 1 to check how to create html files.

“Code starts”

<!Doctype html>
<html>
<head>
<title>Sixth Page</title>
</head>

<body>
<h1>Inserting image</h1>
<img src=”IMG_0032.jpg” alt=”my image” style=”width: 128 px; height: 128 px;”>
<br>
<p><img src=”IMG_0032.jpg” alt=”my image” width=”128″ height=”128″>This is image has been added without any float attribute.</p>
<br>
<p>Click the following gif:</p>
<a href=”file:///D:/HTML-CSS/Test/eg1.html”>
<img src=”200.gif” alt=”my image” style=”width: 128 px; height: 128 px; border: 0;”>
</a>
<br>
<p><img src=”200.gif” alt=”my image” style=”float: right; width: 128 px; height: 128 px; border: 0;”>Floating image on the right.

 

<br>
<p><img src=”humming_bird_flyings_animation_clipart.gif” alt=”my image” style=”float: left; width: 128 px; height: 128 px; border: 0;”>Floating image on the left.

 

</body>
</html>

“Code ends”

As you can see, we can add width and style using 2 methods:

  • Style method
  • Width Height method

The one with style attribute is preferred.

We had discussed the use of href in HTML5 Basics–Practice 1. Similarly, we can link pages to images as follows:

<a href=”file:///D:/HTML-CSS/Test/eg1.html”>
<img src=”200.gif” alt=”my image” style=”width: 128 px; height: 128 px; border: 0;”>
</a>

We can also add animated images, for example gif, to our pages. We add the border attribute as if we do not use it, in few versions of IE(Internet Explorer), a boundary comes around the gif. To align images in html5, use float attribute. Try using big paragraphs to see the difference between using and not using float attribute.

Output:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s