مقدمه
سلام پی وی لرنی های عزیز!
به دوره آموزش تگ های HTML خوش آمدید!
HTML یا Hypertext Markup Language یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات اینترنت و وب محسوب می شود.
می توان ادعا کرد که HTML دروازه ورود و پیشرفت برای یادگیری سایر زبان های برنامه نویسی هم چون CSS و جاوا اسکریپت است.
HTML ساختار و اسکلت صفحات وب را تشکیل می دهد و بدون آن نمی توان هیچ صفحه وبی را ساخت.
دوست دارید طراح وب شوید؟
خب باید HTML را بیاموزید!
نگران نشوید! یادگیری HTM کار دشواری نیست و با کمی تلاش خیلی زود در آن استاد می شوید.
در جلسه گذشته تگ applet در HTML را شناختیم و آموختیم که applet یک نرم‌افزار کاربردی کوچک است که در زمینه و متن برنامه دیگری اجرا می‌شود.
در این جلسه آموزش کار با تگ area در HTML را به علاقمندان این دوره ارائه می کنیم.
آموزش کار با تگ area در HTML
به مثال زیر توجه نمایید.
مثال زیر یک تصویر-نقشه است که نواحی آن قابل کلیک می باشند.
مثال :
| <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> </map> |
تعریف و کاربرد
تگ area یک ناحیه درون یک نقشه تصویر را مشخص می کند (نقشه تصویر یک تصویر با مناطق قابل کلیک است).
تگ <area> همیشه درون یک تگ <map> قرار دارد.
نکته
خصیصه usemap در تگ <img> با ویژگی نام عنصر <map> همراه است و رابطه ای بین تصویر و نقشه ایجاد می کند.
پشتیبانی مرورگر ها
| عنصر |  |  |  |  |  |
| <area> | بله | بله | بله | بله | بله |
تفاوت بین HTML 4.01 و HTML5
HTML5 دارای یک سری خصیصه جدید است لذت خصیصه های HTML 4.01 دیگر در آن پشتیبانی نمی شوند.
تفاوت بین HTML و XHTML
در HTML تگ <area> تگ انتهایی ندارد.
در XHTML تگ <area> باید به درستی بسته شود.
خصیصه ها
| نام خصیصه | مقدار | توضیحات |
|---|
| alt | text | یک متن جایگزین برای تصاویر مشخص میکند.
در صورت وجود خصیصه href لازم است که مورد استفاده قرار گیرد. |
| coords | coordinates | مختصات ناحیه یا محدوده قابل کلیک را مشخص میکند. |
| download | filename | یک فایل (متنی،صدا و..) برای دانلود بصورت مستقیم با کلیک بروی هر یک از ناحیه های قابل کلیک را مشخص می نماید. |
| href | URL | آدرس صفحه مقصد که لینکی به آن ایجاد شده است را مشخص میکند. |
| hreflang | language_code | زبان صفحه ی مقصد را مشخص میکند. |
| media | media_query | مشخص میکند که لینک برای چه نوع رسانه /دستگاهایی بهینه شده است. |
| nohref | value | مشخص میکند که یک ناحیه (محدوده قابل کلیک) هیچ لینک مقصدی ندارد.
در HTML5 پشتیبانی نمی شود. |
| rel | alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag | رابطه ی بین صفحه ی فعلی با صفحه ای که به آن لینک کرده ایم را مشخص میکند. |
| shape | default
rect
circle
poly | نوع شکل ناحیه ی قابل کلیک را مشخص می نماید. |
| target | _blank
_parent
_self
_top
framename | مشخص میکند که صفحه ی مقصد چگونه نمایش داده شود. |
| type | media_type | نوع رسانه ای یا صفحه ای که به آن لینک شده است را مشخص میکند. |
خصیصه های سراسری Global Attributes
تگ <area> از خصیصه های سراسری در HTML پشتیبانی می کند.
خصیصه رویداد Event Attributes
تگ <area> از خصیصه رویداد در HTML پشتیبانی می کند.
تنظیمات پیش فرض CSS
بیشتر مرورگرها عنصر <area> را با مقادیر پیش فرض زیر نمایش می دهند:
کلام آخر
در این جلسه به آموزش کار با تگ area در HTML پرداختیم.
در این جلسه آموختیم که تگ area تگی است که با استفاده از آن میتوان یک ناحیه را در یک نقشه تصویری ایجاد کرد.
در جلسه بعدی به آموزش کار تگ applet در HTML خواهیم پرداخت.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
