مقدمه
سلام پی وی لرنی های عزیز!
به دوره آموزش تگ های HTML خوش آمدید!
HTML یا Hypertext Markup Language یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات اینترنت و وب محسوب می شود.
می توان ادعا کرد که HTML دروازه ورود و پیشرفت برای یادگیری سایر زبان های برنامه نویسی هم چون CSS و جاوا اسکریپت است.
HTML ساختار و اسکلت صفحات وب را تشکیل می دهد و بدون آن نمی توان هیچ صفحه وبی را ساخت.
دوست دارید طراح وب شوید؟
خب باید HTML را بیاموزید!
نگران نشوید! یادگیری HTML کار دشواری نیست و با کمی تلاش خیلی زود در آن استاد می شوید.
در جلسه قبلی به کار با تگ iframe پرداختیم و آموختیم که می توان به کمک آن یک فریم درون خطی را مشخص کرد.
در این جلسه اما آموزش کار با تگ img در HTML را به علاقمندان این دوره ارائه می کنیم.
آموزش کار با تگ img در HTML
در قطعه کد زیر می توانید نحوه درج یک تصویر را ببینید.
مثال :
| <img src="smiley.gif" alt="Smiley face" height="42" width="42"> |
تعریف و کاربرد
تگ img تصویری را در یک صفحه HTML تعریف می کند.
تگ img دو خصیصه ضروری دارد: src و alt.
نکات و توصیه ها
نکته
تصاویر به صورت فنی در صفحه HTML قرار نمی گیرند در حقیقت آن ها به صفحات HTML پیوند می یابند.
لذا تگ img یک فضای نگهدارنده برای تصویر ارجاع شده ایجاد می کند.
توصیه
برای پیوند یک تصویر به یک سند دیگر ، فقط تگ img را در تگ a جایگذاری نمایید.
پشتیبانی مرورگر ها
تفاوت بین HTML 4.01 و HTML5
خصیصه های زیر در HTML5 پشتیبانی نمی شود.
تفاوت بین HTML و XHTML
در HTML تگ img تگ انتهایی ندارد.
در XHTML تگ img باید به درستی بسته شود.
خصیصه ها
| خصیصه | مقدار | توضیحات |
|---|
| align | top
bottom
middle
left
right | این خصیصه تراز یک تصویر را با توجه به عناصر اطراف مشخص می کند.
این خصیصه در HTML5 پشتیبانی نمی شود. |
| alt | text | خصیصه alt یک متن جایگزین را برای یک تصویر مشخص می کند.
این خصیصه در HTML5 پشتیبانی نمی شود. |
| border | pixels | ضخامت اطراف تصویر را مشخص می کند.
این خصیصه در HTML5 پشتیبانی نمی شود. |
| crossorigin | anonymous
use-credentials | به کمک این خصیصه می توانید اجازه استفاده از تصاویر سایت های دیگر با استفاده از canvas را می دهد. |
| height | pixels | این خصیصه طول یک عکس را مشخص می نماید. |
| hspace | pixels | فضای خالی سمت راست و چپ تصویر را تعیین می کند.
این خصیصه در HTML5 پشتیبانی نمی شود. |
| ismap | ismap | این خصیصه یک تصویر را به عنوان یک image-map سمت سرور تعیین می نماید. |
| longdesc | URL | این خصیصه URL را برای توصیف دقیق یک تصویر مشخص می کند. |
| sizes | | اندازه تصویر را برای طرح بندی صفحه های مختلف مشخص می کند. |
| src | URL | URL یک تصویر را مشخص می کند. |
| srcset | URL | این خصیصه نشانی اینترنتی تصویر را برای استفاده در موقعیت های مختلف مشخص می کند. |
| usemap | mapname# | یک تصویر را به عنوان یک image-map سمت کاربر تعیین می کند. |
| vspace | pixels | این خصیصه فضای سفید و بالا و پایین تصویر را مشخص می کند.
این خصیصه در HTML5 پشتیبانی نمی شود. |
| width | pixels | این خصیصه برای مشخص کردن عرض یک عکس استفاده می شود. |
خصیصه های سراسری Global Attributes
تگ <img> از خصیصه های سراسری در HTML پشتیبانی می کند.
خصیصه رویداد Event Attributes
تگ <img> از خصیصه رویداد در HTML پشتیبانی می کند.
در ادامه آموزش کار با تگ img در HTML به ارائه چندین مثال می پردازیم؛ با استفاده از این مثال ها درک بهتری راجع به تگ img پیدا خواهید کرد.
مثال های تکمیلی
مثال یک
درج یک تصویر از یک موقعیت متفاوت ( در این مثال می توانید نحوه درج تصاویر از پوشه دیگر یا از وب سایت دیگر را ملاحظه نمایید ).
مثال :
| <!DOCTYPE html> <html> <body> <p>Insert an image from another folder:</p> <img src="/images/stickman.gif" alt="Stickman" width="24" height="39"> <p>Insert an image from a web site:</p> <img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" width="32" height="32"> </body> </html> |
مثال دو
ایجاد یک هایپرلینک از یک تصویر ( در مثال زیر می توانید ببینید که چگونه برای یک تصویر لینک اضافه شده است ).
مثال :
| <!DOCTYPE html> <html> <body> <p> An image that is a link: <a href="https://www.w3schools.com"> <img src="smiley.gif" alt="Go to W3Schools!" width="42" height="42" border="0"> </a> </p> </body> </html> |
مثال سه
ایجاد نقشه تصویر ( در نمونه زیر می توانید نحوه ایجاد نقشه تصویر با مناطق قابل کلیک درهر منطقه با یک پیوند لینک، را مشاهده نمایید ).
مثال :
| <!DOCTYPE html> <html> <body> <p>Click on the sun or on one of the planets to watch it closer:</p> <img src="planets.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="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map> </body> </html> |
تنظیمات پیش فرض CSS
بیشتر مرورگرها عنصر <img> را با مقادیر پیش فرض زیر نمایش می دهند:
مثال :
| img { display: inline-block; } |
کلام آخر
در این جلسه آموزش کار با تگ img در HTML را فراگرفتیم؛ تگ img تصویری را در یک صفحه HTML تعریف می کند.
در جلسه آینده به کار با تگ input می پردازیم.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
