امثلة عن HTML Images

2021-03-27
daafoor

مثال عن صورة في HTML :

<!DOCTYPE html>
<html>
<body>

<h2>Italian Trulli</h2>
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Italian Trullti" style="width:100%">

</body>
</html>

مثال عن صورة في HTML مع طول وعرض محدد :

<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<p>Here we specify the width and height of an image with the width and height attributes:</p>
<img src="https://www.w3schools.com/html/img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
</body>
</html>

مثال عن صورة متحركة:

<!DOCTYPE html>
<html>
<body>
<h2>Animated Images</h2>
<p>HTML allows moving images:</p>
<img src="programming.gif" alt="Computer man" style="width:48px;height:48px;">
</body>
</html>

مثال عن صورة قابلة للضغط وبداخلها عدة صور:

<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="https://www.w3schools.com/html/planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="https://www.w3schools.com/html/sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="https://www.w3schools.com/html/mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="https://www.w3schools.com/html/venus.htm">
</map>
</body>
</html>