آموزش تگ a بررسی تمام اتریبیوت های a جلسه ۶

//

آموزش تگ a بررسی تمام اتریبیوت های a

بنام خدا ,

یکی از مهم‌ترین اجزای صفحات وب لینک‌ها هستند،
لینک‌ها به ما کمک می‌کنند تا صفحات مختلف اینترنتی را به هم متصل کرده و راحت‌تر در وب به گشت و گذار بپردازیم،
در این آموزش از آموزش HTML5 و CSS3 به بررسی تگ لینک و ویژگی‌های آن می‌پردازیم در پایان این نوشته شما خواهید توانست در صفحات اچ‌تی‌ام‌ال خود از لینک‌ها استفاده کنید یا اصطلاحا به صفحات مختلف اینترنتی لینک بدهید.

آموزش html5 و css3 جلسه ۶ تگ a برسی تمام اتریبیوت های a

به طور پیش فرض، لینک ها در مرورگرها به یکی از روش های زیر، ظاهر می شوند:

  • لینک مشاهده نشده، زیر خط دار و آبی است
  • لینک بازدید، زیر خط دار و بنفش است
  • لینک فعال، زیر خط دار و به رنگ قرمز است

آموزش HTML و CSS

به تصویر بالا دقت کنید لینک ها در HTML به این صورت قرار میگریند که تمام مقادیرشان  کامل برسی می کنیم.

برای ایجاد لینک باید از تگ a به شکل زیر استفاده کرد . a ابتدای کلمه anchor به معنای لنگر است . تگ a دارای ۴ attribute پر کاربرد است

آموزش تگ img در HTML جلسه 8
یک آموزش جذاب دیگه!

اتریبیوت ها

این المان از اتریبیوت های جهانی استفاده میکنند.

download

این اتریبیوت به مرورگر میگوید بجای اینکه به یک URL برود آنرا دانلود کند و درنتیجه پنجره ذخیره فایل برای کاربر نمایش داده میشود.
اگر اتریبیوت مقدار داشته باشد، بعنوان نام پیش فرض درنظر گرفته شود (البته کاربر میتواند آن نام را تغییر دهد).
هیچ محدودیتی برای نام مقادیر وجود ندارد، هرچند / و \ تبدیل به _ میشود.
خیلی از فایلهای سیستمی برای نامگذاری محدودیت دارند و بنابراین مرورگراها این محدودیتها را رعایت میکنند.

href

برای لینک حدف استفاده می شوند

آموزش html and css

fragment URL نامی است که پس از # می آید. # به بخشی یا قسمتی از همان صفحه (یک id از المان HTML) دلالت دارد.
URL ها محدود به داکیومنت های HTTP وبی نیستند،
اما میتوانند از هر پروتکلی که توسط مرورگرها پشتیبانی میشوند استفاده کنند.
برای مثال file:، ftp: و mailto: توسط اکثر مرورگرها پشتیبانی میشوند.

rel

ارتباط آبجکت هدف به آبجکت لینک را مشخص میکند. مقدار آن لیستی از انواع لینکها می باشد که با space از هم جدا شده اند.

آموزش جامع html و css به صورت فیلم آموزشی کاملا رایگان
یک آموزش جذاب دیگه!

برخی از مقادیر rel

  • alternate
  •  author
  • bookmark
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • prefetch
  • prev
  • search
  • tag

میتوانید به عنوان تمرین دونه دونه تست نمایید .

target

  • ۱ : _self باعث میشود که URL در پنجره یا تبی که کلیک شده است باز شود (مقدار پیش فرض).
  • ۲ : _blank باعث میشود که URL در پنجره یا تب جدید باز شود.
  • ۳ : _parent باعث میشود URL در فریم بالایی یا parent باز شود.
  • ۴ : _top باعث میشود URL بصورت صد در صدی باز شود. اگر صفحه وب درون یک فریم قفل شده باشد میتوانید در target از این کلمه کلیدی استفاده کنید.

ایجاد عنوان برای لینک یا title

تگ a با خاصیت های دیگری کامل تر می شود که از آن جمله می توان title را نام برد، استفاده از title اجباری نیست، اما می تواند از نظر بهینه بودن لینک های سایت مفید باشد.

ایجاد لینک به یک تصویر

hypertext یا متن حاوی لینک می تواند به صورت محتوای غیر متنی نیز باشد، به طور مثال می توان یک تصویر را با استفاده از تگ img در این قسمت درج کرد، به مثال زیر توجه کنید.

آموزش طراحی قالب HTML و CSS جلسه 3
یک آموزش جذاب دیگه!

نکته: در برخی مرورگرها تصاویر لینک شده با یک خط در حاشیه مشخص می شوند، برای محو این خط حاشیه ای باید از خاصیت border با مقادیر ۰ در HTML یا در حالت بهتر و استاندارد تر، در CSS استفاده کنید.

در پایان این آموزش، شاید این پرسش به ذهنتان رسیده باشد که چگونه است بیشتر لینک های وب با رنگ ها و حالت های مختلف هستند، به طور مثال فونت و اندازه لینک ها متفاوت است یا با بردن ماوس روی لینک، رنگ آنها تغییر می کند و…، برای یافتن پاسخ این سوالات باید کمی صبر کنید توی جلسات آینده حتما اینارا مورد برسی قرار میدیم، در گام بعدی یعنی فراگیری CSS، خواهیم دید که می توان لینک های وب را با استایل CSS فرم داد و به اصطلاح سفارشی نمود.

منتظر نظرات و پیشنهادات با ارزش شما هستیم امید وارم که توی زندگی موفق و پیروز باشید

آموزش طراحی سایت HTML5 CSS3 با bootstrap 5

میانگین رتبه 3/5 تعداد رای : 2

نظرات

  1. کاربر پاسخ وردپرس

    سلام چجوری میتونم یک صفحه لینک شده رو در همون صفحه اصلی یا جاریم باز کنم ینی به صفحه دیگ ای نرم همون جا باز شه برام

    • زمان الله ابراهیمی ( مدیریت )

      سلام خدمت شما دوست گرامی منظور شما یک صفحه داخل همین صفحه که هستید باز بشه تگ a را بدونه هیچ اتربیوت لینک را قرار بدید داخل همین صفحه باز میشه امید وارم که منظور شما را متوجه شده باشم موفق باشید

  2. کاربر پاسخ وردپرس

    ممنون از زحماتتون این جلسه هم مثل جلسه های قبل عالی بود واقعا دستتون درد نکنه🙏🙏🙏

    • زمان الله ابراهیمی ( مدیریت )

      سلام خدمت شما دوست گرامی خیلی خوشحالم که برای شما مفید بوده است به همین صورت و پر انرژی ادامه بدید هر گونه سوال یا مشکل بود بنده در خدمت هست موفق و سر بلند باشید در زندگی

سبد خرید
در حال بروز رسانی

آموزش‌های ویدیویی جدید یوتیوب رو از دست ندی!

بزن بریــم!