HTML Images
1. img Tag and the src Attribute
2.Insert Images from Different Locations
3.Background Images
4.Alighning Images
5.Floating Images
6.Adjesting Image Sizes
7.alt Attribute
8.Creating an image map
img Tag and the src Attribute
in HTML images are defined with the <img> tag
The img tag is empty, which means that it contains attributes only and it has no closing tag.
to display image on the page, you need to use the src attribute.
src stands for "source".
The value of the src attribute is the URL of the image you want to display on your page.
<img src="url"/>
the URL points to the location or address where the image is stored.
<img src="http://www.w3schools.com/images/boat.gif"/>
<html>
<body>
<p>
An image:
<img src="constr4.gif" width="144" height="50"/>
</p>
</body>
</html>
Insert Images from Different Locations
<html>
<body>
<p>An image from another folder:</p>
<img src="/images/chrome.gif" width="33" height="32"/>
<p>An image from w3schools:</p>
<img src="http://www.w3schools.com/images/w3schools_green.jpg" width="104" height="142"/>
</body>
</html>
Background image
<html>
<body background="background.jpg">
<h3>Look: A Background image!</h3>
<p>Both gif and jpg files can be used as HTML background.</p>
<p>If the image is smaller than the page, the image will reapet itself.</p>
</body>
</html>
Aligning Images
<html>
<body>
<p> the text is alighned with the image
<img src="hackanm.gif" align="bottom" width="48" height="48"/> at the bottom
</p>
<p> the text is alighned with the image
<img src="hackanm.gif" align="middle" width="48" height="48"/> at the middle
</p>
<p> the text is alighned with the image
<img src="hackanm.gif" align="top" width="48" height="48"/> at the top
</p>
</body>
</html>
Floating Images
<html>
<body>
<p>
<img src="hackanm.gif" alighn="left" width="48" height="48"/>
A paragraph with an image. The alighn attribute of the image is set to "left". the image will float to the left of this text
</p>
<p>
<img src="hackanm.gif" alighn="right" width="48" height="48"/>
A paragraph with an image. The alighn attribute of the image is set to "right". the image will float to the right of this text
</p>
</body>
</html>
Adjusting Images Sizes
<html>
<body>
<p>
<img src="hackanm.gif" width="20" height="20"/>
</p>
<p>
<img src="hackanm.gif" width="45" height="45"/>
</p>
<p>
<img src="hackanm.gif" width="70" height="70"/>
</p>
</body>
</html>
alt Attribute
The alt attribute is used to define an alternete text for an image.
The alt attribue tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image.
<img src="boat.gif" alt="Big Boat"/>
<html>
<body>
<p> An image:
<img src="../constr4.gif" alt="site_under_construction" width="200" height="50"/>
</p>
</body>
</html>
Creating an Image Map
<html>
<body>
<p>Click on the sun or on one of the plannets to watch it closer:</p>
<img src="plannets.gif" width="145" height="126" alt="planets" usemap="#planetmap"/>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="sun" href="sun.htm"/>
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.htm"/>
<area shape="circle" coords="124,58,8" alt="venus" href="venus.htm"/>
</map>
</body>
</html>
1. img Tag and the src Attribute
2.Insert Images from Different Locations
3.Background Images
4.Alighning Images
5.Floating Images
6.Adjesting Image Sizes
7.alt Attribute
8.Creating an image map
img Tag and the src Attribute
in HTML images are defined with the <img> tag
The img tag is empty, which means that it contains attributes only and it has no closing tag.
to display image on the page, you need to use the src attribute.
src stands for "source".
The value of the src attribute is the URL of the image you want to display on your page.
<img src="url"/>
the URL points to the location or address where the image is stored.
<img src="http://www.w3schools.com/images/boat.gif"/>
<html>
<body>
<p>
An image:
<img src="constr4.gif" width="144" height="50"/>
</p>
</body>
</html>
Insert Images from Different Locations
<html>
<body>
<p>An image from another folder:</p>
<img src="/images/chrome.gif" width="33" height="32"/>
<p>An image from w3schools:</p>
<img src="http://www.w3schools.com/images/w3schools_green.jpg" width="104" height="142"/>
</body>
</html>
Background image
<html>
<body background="background.jpg">
<h3>Look: A Background image!</h3>
<p>Both gif and jpg files can be used as HTML background.</p>
<p>If the image is smaller than the page, the image will reapet itself.</p>
</body>
</html>
Aligning Images
<html>
<body>
<p> the text is alighned with the image
<img src="hackanm.gif" align="bottom" width="48" height="48"/> at the bottom
</p>
<p> the text is alighned with the image
<img src="hackanm.gif" align="middle" width="48" height="48"/> at the middle
</p>
<p> the text is alighned with the image
<img src="hackanm.gif" align="top" width="48" height="48"/> at the top
</p>
</body>
</html>
Floating Images
<html>
<body>
<p>
<img src="hackanm.gif" alighn="left" width="48" height="48"/>
A paragraph with an image. The alighn attribute of the image is set to "left". the image will float to the left of this text
</p>
<p>
<img src="hackanm.gif" alighn="right" width="48" height="48"/>
A paragraph with an image. The alighn attribute of the image is set to "right". the image will float to the right of this text
</p>
</body>
</html>
Adjusting Images Sizes
<html>
<body>
<p>
<img src="hackanm.gif" width="20" height="20"/>
</p>
<p>
<img src="hackanm.gif" width="45" height="45"/>
</p>
<p>
<img src="hackanm.gif" width="70" height="70"/>
</p>
</body>
</html>
alt Attribute
The alt attribute is used to define an alternete text for an image.
The alt attribue tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image.
<img src="boat.gif" alt="Big Boat"/>
<html>
<body>
<p> An image:
<img src="../constr4.gif" alt="site_under_construction" width="200" height="50"/>
</p>
</body>
</html>
Creating an Image Map
<html>
<body>
<p>Click on the sun or on one of the plannets to watch it closer:</p>
<img src="plannets.gif" width="145" height="126" alt="planets" usemap="#planetmap"/>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="sun" href="sun.htm"/>
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.htm"/>
<area shape="circle" coords="124,58,8" alt="venus" href="venus.htm"/>
</map>
</body>
</html>
No comments:
Post a Comment