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:

HTML5 Basics–Practice 9

Today I will explain about few more ways we can implement style to our page and about margin, border and padding. Please go through HTML5 Basics–Practice 8 before starting this practice.

We will create a new html file, eg5.html. Please type the code yourself and do not copy paste.

“Code starts”

<!DOCTYPE html>
<html>
<head>
<title>Fifth Page</title>
<style>
#bla
{
color: red;
}

p.blabla
{
color: blue;
}

#test1
{
border: 1px solid green;
}
#test2
{
border: 1px solid green;
padding: 35px;
}
#test3
{
border: 1px solid green;
margin: 55px;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<p id=”bla” >This line is using id attribute.</p>

<p class=”blabla”>This line is using class attribute.</p>

<p id=”test1″>This sentence has border.</p>

<p id=”test2″>This sentence has padding and border.</p>

<p id=”test3″>This sentence has margin and border.</p>
</body>
</html>

“Code ends”

Output:

Capture11

In this code you can check we have assigned different styles to different paragraphs.The first way is to assign an id. We are assigning the style in the <style> tag. We use # to define style for the particular id. Similarly we have assigned style using class attribute as well.

We have used border, margin and padding. In simple words, padding is the space between between the content and the border, whereas margin is the space outside the border. Check the output to see the difference.