So today we will look at image tag in detail. In the last post I told you about image tag and about it's two attributes - 'src' and 'alt'. Today we will make a short program in which we will use <img> tag and its different attributes. But before making our program let's take a look at relative and absolute addresses.So what is a relative address? A url that is relative only shows a partial address - like images/image.jpg
- and the success or failure of finding the file is contingent on
certain conditions being met - which means the outcome can and will
vary, depending largely how how the directories within your website are
structured.it is given relative to root folder.
What is absolute address?
An url that is absolute shows the complete address. In other words, there is no confusion about where this item is located, as the absolute URL gives the entire path to that file. http :// mysite.com/ images/image.jpg is an example of an absolute url.
Let's take a case I am on a tour of France and I took a wonderful picture of Eiffel tower and I want this picture on my web page. And I even want to tell the world where is Eiffel tower. I can tell the world where is Eiffel tower by a map. So here is our map:
What is absolute address?
An url that is absolute shows the complete address. In other words, there is no confusion about where this item is located, as the absolute URL gives the entire path to that file. http :// mysite.com/ images/image.jpg is an example of an absolute url.
Let's take a case I am on a tour of France and I took a wonderful picture of Eiffel tower and I want this picture on my web page. And I even want to tell the world where is Eiffel tower. I can tell the world where is Eiffel tower by a map. So here is our map:
View Larger Map
So we got a map in our web page by using google maps and now we want to show our awesome pic that we clicked on our tour of France. Lets write the code for it:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>My first web page.</title>
</head>
<body>
<p> I went on a tour of France and I clicked an awesome pic of Eiffel tower. Here is my pic:</p>
<img src ="images/eiffeltower.jpg" alt="eiffel tower" width="600" height="800" />
</body></html>
so here is our web page:
I went on a tour of France and I clicked an awesome pic of Eiffel tower.Here is my pic:
In the above program we saw two new attributes - 'width' and height 'attribute'. 'width attribute of image tag decides the width of displayed image and height attributes decides the height of a displayed image. That's all for today in the next post we will see how we can optimize our images so they are displayed according to our wish.
Posts
0 comments:
Post a Comment