این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ area در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ area در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ area در HTML
تگ area تگی است که ما با استفاده از آن میتوانیم یک ناحیه ( یا محدوده ) قابل کلیک را در یک نقشه تصویری ایجاد نماییم. ( نقشه تصویری به یک عکس که قسمت های مختلف آن قابل کلیک شدن باشد گفته می شود )
تگ <area> همیشه باید درون تگ <map> قرار بگیرد و استفاده شود.
با استفاده از ابزار آنلاین ساخت نقشه تصویری فری لرن به راحتی و با چندین کلیک انواع نقشه های تصویری مورد نظرتان را طراحی نمایید.
Free-Learn
مثال از تگ area در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <img src="files/planets.jpg" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="files/sun.html"> <area shape="circle" coords="90,58,3" href="files/mercury.html"> <area shape="circle" coords="124,58,8" href="files/venus.html"> </map> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ area در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ area در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| alt | text | یک توضیح / شرح کوتاه برای تصاویر مشخص میکند ( برای بحث سئوی تصاویر بسیار مفیده ) |
| coords | coordinates | مختصات ناحیه یا اون محدوده قابل کلیک را مشخص میکند |
| download | filename | برای دانلود مستقیم فایلی که روش کلیک میشه |
| href | URL | برای مشخص کردن آدرس لینک اون بخش های قابل کلیک |
| hreflang | language_code | زبان اون صفحه ای که بهش لینک شده را مشخص میکند (لیست زبان کشورهای جهان) |
| media | media_query | مشخص میکند که لینک برای چه نوع رسانه / دستگاهایی بهینه شود |
| 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 | برای مشخص کردن نوع رسانه صفحه ای که بهش لینک کردیم |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ area از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- در زبان HTML تگ
areaیک تگ تنهاست. ( یعنی تگ بستن ندارد )
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ area را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
area { display: none; } |
