مقدمه
سلام پی وی لرنی های عزیز!
به دوره آموزش تگ های HTML خوش آمدید!
HTML یا Hypertext Markup Language یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات اینترنت و وب محسوب می شود.
می توان ادعا کرد که HTML دروازه ورود و پیشرفت برای یادگیری سایر زبان های برنامه نویسی هم چون CSS و جاوا اسکریپت است.
HTML ساختار و اسکلت صفحات وب را تشکیل می دهد و بدون آن نمی توان هیچ صفحه وبی را ساخت.
دوست دارید طراح وب شوید؟
خب باید HTML را بیاموزید!
نگران نشوید! یادگیری HTM کار دشواری نیست و با کمی تلاش خیلی زود در آن استاد می شوید.
در جلسه گذشته به کار با اعلان DOCTYPE پرداختیم.
اعلان DOCTYPE یک یک تگ HTML نیست.
این اعلان یک دستورالعمل برای مرورگر وب در خصوص HTML ای است که یک صفحه با آن نوشته شده است.
در این جلسه قصد داریم به آموزش کار با تگ a در HTML بپردازیم.
آموزش کار با تگ a در HTML
به مثال زیر که یک لینک به پی وی لرن است توجه نمایید.
مثال :
| <a href="https://www.pvlearn.com">Visit pvlearn.com!</a> |
تعریف و کاربرد
تگ <a> لینکی را تعریف می کند که برای پیوند دادن یک صفحه به صفحه دیگر استفاده می شود.
مهمترین ویژگی عنصر <a> ویژگی href است که مقصد لینک را نشان می دهد.
بطور پیش فرض، لینک ها به صورت زیر در کلیه مرورگرها ظاهر می شوند:
- یک لینک که هنوز روی آن کلیکی صورت نگرفته است و با یک خط در زیر آن و به رنگ آبی مشخص می شود.
- یک لینک که روی آن کلیک شده است و با یک خط در زیر آن و به رنگ بنفش مشخص می شود.
- یک لینک فعال که زیر آن خط کشیده شده و به رنگ قرمز مشخص شده است ( این لینک هنگام نگه داشتن ماوس به رنگ قرمز در می آید ).
در ادامه آموزش کار با تگ a در HTML بیایید ببینیم که این تگ در چه مرورگرهایی پشتیبانی می شوند.
پشتیبانی مرورگرها
نکات و توصیه ها
- اگر تگ a در خصیصه href حاضر نباشد خصیصه های download, hreflang, media, rel, target و type کار نخواهند کرد.
- معمولاً یک صفحه مرتبط در پنجره مرورگر فعلی نمایش داده می شود، مگر اینکه هدف دیگری را برای آن مشخص کنید.
- از CSS برای سبک کردن لینک ها استفاده کنید.
تفاوت بین HTML 4.01 و HTML5
در HTML 4.01 ، تگ <a> می تواند یک لینک یا یک انکور باشد.
در HTML5، تگ <a> همیشه یک هایپر لینک است ، اما اگر هیچ ویژگی href نداشته باشد، فقط یک لینک نگهدارنده برای یک هایپر لینک است.
HTML5 صاحب برخی از خصیصه های جدید است و لذا برخی از خصیصه های HTML 4.01 دیگر در آن پشتیبانی نمی شوند.
خصیصه ها
| نام خصیصه | مقدار | توضیحات |
|---|
charset | char_encoding | مجموعه کاراکترهای سندی که به آن لینک شده است را مشخص میکند.
در HTML5 پشتیبانی نمی شود. |
coords | coordinates | ناحیه/مختصات قابل کلیک را مشخص میکند.
در HTML5 پشتیبانی نمی شود. |
download | filename | برای دانلود مستقیم یک فایل (متنی,ویدئویی و..) به کار می رود به محض کلیک بروی یک لینک، مشخص می شود. |
href | URL | آدرس صفحه ی مقصد که قرار است کاربر به آنجا منتقل شود را تعیین می کند. |
hreflang | language_code | زبان صفحه ای که به آن لینک شده را مشخص میکند. |
media | media_query | مشخص میکند که لینک برای چه نوع رسانه /دستگاهایی بهینه شود. |
name | section_name | یک لیبل یا انکر برای لینک مشخص میکند.
در HTML5 پشتیبانی نمی شود و به جای آن از خصیصه id سراسری استفاده می کند. |
ping | list_of_URLs | لیستی از نشانی های اینترنتی را که از طریق spaceجدا می شوند، مشخص می کند که در صورت پیگیری لینک، درخواست ها را با استفاده از پینگ بدنه توسط مرورگر ارسال می کند (در پس زمینه).
به طور معمول برای ردیابی استفاده می شود. |
referrerpolicy | no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url | مرجع ارسال را مشخص می کند. |
rel | alternate
author
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search
tag | رابطه ی بین صفحه ی جاری با صفحه ای که به آن لینک کرده ایم را مشخص میکند. |
rev | alternate
author
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search
tag | دقیقا برعکس rel با همان مقادیراست.
رابطه بین صفحه لینک شده و صفحه جاری را مشخص میکند.
در HTML5 پشتیبانی نمی شود. |
shape | default
rect
circle
poly | نوع/شکل لینک را مشخص میکند.
در HTML5 پشتیبانی نمی شود. |
target | _blank
_parent
_self
_top
framename | مشخص میکند که صفحه ی مقصد چگونه نمایش داده شود. (مثلا در یک تب جدید از مرورگر یا ..) |
type | media_type | نوع رسانه یا صفحه ای که به آن لینک کرده ایم را مشخص میکند. |
خصیصه های سراسری Global Attributes
تگ <a> از خصیصه سراسری در HTML پشتیبانی می کند.
خصیصه رویداد Event Attributes
تگ <a> از خصیصه رویداد در HTML پشتیبانی می کند.
تنظیمات پیش فرض CSS
بیشتر مرورگرها عنصر <a> را با مقادیر پیش فرض زیر نمایش می دهند:
مثال :
| a:link, a:visited { color: (internal value); text-decoration: underline; cursor: auto; } a:link:active, a:visited:active { color: (internal value); } |
کلام آخر
در این جلسه به آموزش کار با تگ a در HTML پرداختیم.
در جلسه آینده می خواهیم به آموزش کار با تگ abbr می پردازیم.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
