Today we are going to learn how to work with images on our webpage.A webpage cannot have a
beautiful look without the influence of images, the proper use of images will make your webpage]
fantastic .How ever some times images are use to depict ideas and purpose of a webpage .HTML tag
for image is the <img>tag like these <img src="">,the src is not the 'student presentative council' you know
but rather the source locator the locate the image you want to appear on your webpage .
To start with we would have copy the image we will be displaying on our webpage to a file which the html file its found,there are different pictures extensions PNG,GIF,JPEG,GIF (eg Naeate.png )and html supports this pictures groups so you will have to specify the picture you would be using extension or else it woundn't work .
If you've not been following this tutorials you would have to go and look on how to create a simple webpage and read on that its the firstpost .
I have copied a picture and paste it in that same file and look like this .
The file its SunRise.jpg
Lest open the html file and write the codes for the picture
<html>
<head>
<title>My First webpage</title>
</head>
<body>
<img src="SunRise.jpg" />
</body>
</html>
This will be the results when you run the codes
you can see that the picture had displayed its default size ,yes it will beacuse you haven't set the
width and height of the picture ,So puddy lets change the picture size how we want it add width="200px"
to the code this how looks <img src="SunRise" width="200px" />
this will be the results when you run the codes
you can see that you haven't specify the height but html automatically html sets it accordingly but you can
add it height="200px"
<body>
<img src="SunRise" width="200px" height="200px" />
</body>
We can align it to right
<body>
<img src="SunRise" width="200px" height="200px" align="right"/>
</body>
lets see two picturs side by side
<body>
<img src="SunRise.jpg" width="200px" height="200px" align="right" />
<img src="SunRise.jpg" width="200px" height="200px" align="left" />
</body>
The reults
Lets do some styling ,
we would be applying style sheets to do it we shall give the picture borders and
color the border to yellow , we will add it to the left picture.
style style="border:4px solid; border-color:yellow;"
<body>
<img src="SunRise.jpg" width="200px" height="200px" align="right" />
<img src="SunRise.jpg" width="200px" height="200px" align="left" style="border:4px solid; border-color:yellow;"/>
</body>
Thats all for today
Please if you find this Toturials helpful or there is some issues you want to me to address about the toturial
comment on it, i need to know how best i can help you . THANK YOU for your time.
No comments:
Post a Comment