HOW TO ADD IMAGES TO MY WEBSITE/HTML SCRIPT
This is the fifth tutorial of HTML.Earlier tutorials are as follows:
It would be great if you can add images to your website.And you will learn it today within minutes!!!
Before we continue let us first talk about the different types of images you can have or link to your website.
The three famous types are:
1. GIF(Graphics interchange format)
2. JPG/JPEG(Joint photographic experts group)
3. PNG(Portable network graphics)
Some key facts about them in short:
1. GIF - Best for Graphics and Drawing(256 colors).
2. JPEG - Better for photographs (millions of colors).
3. PNG - The PNG format contains in many ways the best of both JPEG and GIF format.It has millions of colors and effective compressing.
NOTE: An image editor program is one of the most essential tools that you will need to create BEAUTIFUL WEBSITES.There are many image editors in the market for which you have to pay.Want it for free?Try Irfan-view then.
Enough of theory,now something practical.
All that you have to do to have an image on your website is to add this code to your HTML script.
<img src="abc.jpg" alt="it is image abc"/>
Please note the opening and closing of image tag in the same line.It has to be done like this only.
You can't use something of this kind:
<image>
.
.
.<image/>
This is wrong and will not work.
Here in the above example i am assuming that the image abc.jpg is in the root folder where my HTML script also resides.alt is the alternate description of the image.
If your image is in a subfolder then you can write:
<img src="subfoldername/abc.jpg" />
Not only this!!You cann attach/use images from other sites also.Try this:
<img src="http://www.anysitename.com/image.png />
Here i have not mentioned any specific URL to get an image so it depends on you.You can use two webpages of yourself one containing the image or you can have a link of an image from your friend's web page or blog.There are many other ways and you are smart enough to do that.
Here i have not mentioned any specific URL to get an image so it depends on you.You can use two webpages of yourself one containing the image or you can have a link of an image from your friend's web page or blog.There are many other ways and you are smart enough to do that.
Most important : Images can be links too.Try this:
<a href="http://prac-code.blogspot.com"> <img src="abc.jpg" /> <a/>
Now if you click on the image you will go to prac-code.blogspot.com.
Please note that it is always a good practice to use alt attribute so that others can come to know what the image signifies.
Using title attribute with image
Have you noticed while browsing the internet that when you place your mouse cursor on an image,a description of image pops up.Best example is Google's Doodles.
Even you can do that to your image in this way:
<img src="abc.jpg" title="You did it!!!" />
Two other important attributes: width and height
<img src="abc.jpg" width="141px" height="141px" />
Please note that the above line of code only changes the dimensions of the image and not the image size i.e. if the image is of 80kb then you can only resize the image using
width and height but cannot change the picture size.Even if you make the dimensions of the image small,the image size will be still 80kb.So use them smartly as and when they are needed.
Here is a sample code and sample output for attaching image to a website:
CODE:
<html>
<head>
<title>THIS IS MY FIRST WEB SITE</title>
</head>
<body style="background-color:#ff0000;">
<h1 style="background-color: red;">Hurrah!!!<br /><hr /> This is my first step toward success!!!</h1>
<img src="code.jpg" title="YOU ENJOYED IT" />
<a href="http://prac-code.blogspot.com/">I LOVE THIS BLOG</a>
</body>
</html>
Here the image code.jpg is in the root folder where my HTML script resides.The expected output would be:
Try the above code and make changes according to you and experiment.As you can see when you will place the mouse cursor on the image,a pop up will appear showing YOU ENJOYED IT.
If you have any problem feel free to notify me.
CODE:
<html>
<head>
<title>THIS IS MY FIRST WEB SITE</title>
</head>
<body style="background-color:#ff0000;">
<h1 style="background-color: red;">Hurrah!!!<br /><hr /> This is my first step toward success!!!</h1>
<img src="code.jpg" title="YOU ENJOYED IT" />
<a href="http://prac-code.blogspot.com/">I LOVE THIS BLOG</a>
</body>
</html>
Here the image code.jpg is in the root folder where my HTML script resides.The expected output would be:
 |
| ADDING IMAGES TO WEB PAGE |
Try the above code and make changes according to you and experiment.As you can see when you will place the mouse cursor on the image,a pop up will appear showing YOU ENJOYED IT.
If you have any problem feel free to notify me.
No comments:
Post a Comment
Thanks for your valuable comment