- آموزش تگ a در html + مثال های متنوع
- HoseinKetabi
- اکتبر 4, 2024
- تعداد نظرات : بدون نظر
وقتی شما از یک وب سایت بازدید میکنید,متوجه میشوید که آن وب سایت فقط از یک صفحه تشکیل نشده است و شما بین صفحات مختلف جابجا میشوید.در واقع این جابه جایی با استفاده از تگ لینک در html تعریف شده است.
تعریف تگ a در html
اگر بخواهیم این تگ را به صورت کامل توضیح بدهیم باید بگوییم که کار تگ a در html لینک دادن صفحات مختلف وب به یک دیگر میباشد.لینک دادن در html و همچنین مباحث بهینه سازی وب سایت بسیار کار حیاتی است.
همانطور که در تصویر مشاهده میکنید ما با استفاده از تگ لینک صفحات را به یک دیگر لینک میدهیم.این کار یکی از مهم ترین کار ها و تسک ها در طراحی وب است و باید بخوبی انجام داده شود.
کاربرد های اصلی تگ a در html
تگ لینک در html کاربرد های خیلی زیادی دارد و استفاده های زیادی درون عرصه طراحی وب دارد و ما در این قسمت میخواهیم به این موضوع بپردازیم پس این مقاله را تا آخر بخوانید.
تگ a در فهرست های وب سایت در html
اگر به فهرست ها در وب سایت ها دقت کرده باشید هر کدام از آیتم های آن شما را به یک بخش از وب سایت هدایت میکند.در واقع این کار با استفاده از تگ لینک و چند تگ دیگر در کنار یک دیگر انجام شده است.وقتی شما روی یک آیتم کلیک میکنید آن آیتم شمارا به صفحه منتسب به خود هداید میکند یعنی درون آن آیتم از تگ a استفاده شده است که شما را به آن صفحه میبرد.
<html>
<head>
<title>استفاده از تگ لینک در ایجاد فهرست</title>
</head>
<body>
<ul>
<li><a href="./home">خانه</a></li>
<li><a href="./about-us">درباره ما</a></li>
<li><a href="contact-us">ارتباط با ما</a></li>
</ul>
</body>
</html>
در مثال بالا یک مثال خیلی ساده از استفاده از تگ a برای ایجاد فهرست در وب سایت آورده شده است,لازم به ذکر است که شما نیازی ندارید این مثال را الان متوجه شوید,در ادامه به صورت کامل ساختار تگ لینک را به شما آموزش میدهیم پس با ما همراه باشید.
تگ لینک برای آدرس دهی عکس ها
یکی دیگر از کاربرد های تگ لینک آدرس دهی تصاویر است که شما میتوانید از آن برای این کار استفاده کنید.فرض کنید شما میخواهید وقتی کاربر روی یک تصویر کلیک کرد به یک صفحه دیگر هدایت شود.
<html>
<head>
<title>استفاده از عکس به عنوان لینک</title>
</head>
<body>
<a href="#"><img src="pic.jpg"/></a>
</body>
</html>
در بالا نمونه ای از استفاده از تگ لینک برای آدرس دهی وقتی کاربرد روی یک تصویر کلیک کرد را مشاهده میکنید.
ساختار تگ a در زبان html
ساختار تگ لینک در html به صورت باز و بسته تعریف شده است,به صورتی که شما اول باید تگ را باز کنید و بعد از آن از تگ بسته آن استفاده کنید. بخواهیم به صورت کلی بگوییم ساختار تگ a به صورت زیر میباشد.
<a href="past your link here" target="how to open the link">the context</a>
ساختار تگ لینک به صورت کلی به صورت بالا تعریف شده است.در بین دو تگ باز بسته شما باید محتوایی که میخواهید وقتی روی آن کلیک شد به صفحه ای جدید هدایت شود را بگذارید.برای مثال اگر به قسمت کاربرد تگ a در این مقاله بروید متوجه میشوید که یکی از استفاده های تگ لینک,لینک دهی تصاویر به یک url دیگر میباشد.به مثال زیر در این باره توجه کنید.
<a href="paste-your-link" target="how-to-open-the-link"><img src="the-image-you-want.jpg"/></a>
در مثال بالا از تگ img به عنوان محتوای درون دو تگ باز و بسته a استفاده کرده ایم.این کار باعص میشود که وقتی کاربر روی تصویر کلیک کرد به url مورد نظر هدایت شود.
ویژگی href در ساختار تگ لینک
همانطور که در تمامی مثال های بالا مشاهده کرده اید.ویژگی href در تمامی تگ های a استفاده شده است.به نظر شما کاربرد این ویژگی درون تگ a چه میباشد ؟
باید بگویم که ما از این تگ برای مشخص کردن آدرس تگ لینک که میخواهد به آنجا هدایت شود استفاده میکنیم.
<a href="لینکی که میخواهید به آنجا هدایت شوید را در اینجا قرار میدهید">متن که باید رویش کلیک شود</a>
در مثال بالا در قسمت href بین دو دابل کوتیشن لینک را قرار میدهیم,هر وقت کاربر روی لینک کلیک کند به صفحه ای که آدرس آن را در href قرار داده ایم هدایت میشود.
ویژگی target در ساختار تگ لینک
در تگ a در html یک ویژگی وجود دارد آن هم ویژگی target است,با استفاده از این ویژگی ما مشخص میکنیم که url مورد نظر که در ویژگی href قرار گرفته است در چه حالتی باز شود,این ویژگی مقادیر خاصی دارد که دونه دونه به آن ها میپردازیم.پ
<a href="bestcoders.ir" target="_blank">صفحه اصلی سایت bestcoders</a>
- مقدار _blank که url مورد نظر را در یک صفحه جدید باز میکند.
- مقدار _self که url مورد نظر را در صفحه جاری باز میکند.
- مقدار _parent که url مورد نظر را در صفحه والد باز میکند.
- مقدار _top که url مورد نظر را در کل صفحه باز میکند.
مقدار _blank در ویژگی target
کاربرد اصلی این ویژگی این است که url مورد نظر را در یک صفحه جدید باز میکند.در واقع وقتی شما این مقدار را به عنوان مقدار ویزگی target قرار میدهید.باعث میشوید که url مورد نظر که در ویژگی href وارد کرده اید در یک صفحه جدید نمایش داده شود.
<html>
<head>
<title>ویزگی target در تگ لینک</title>
</head>
<body>
<a href="bestcoders.ir" tergat="_blank">صفحه اصلی</a>
</body>
</html>
مقدار _self در ویژگی target
مقدار _self در ویژگی target باعث میشود که وقتی کاربر روی لینک مورد نظر کلیک کرد آن لینک در صفحه جاری باز شود,به روایت دیگر باعث میشود لینک مورد نظر در صفحه ای که کاربر درون آن قرار دارد باز شود.
<a href="bestcoders.ir" target="_self">صفحه اصلی</a>
همانطور که در مثال بالا مشاهده میکنید ما از مقدار _self در ویژگی target استفاده کرده ایم.
مقدار _parent در ویژگی target
مقدار _parent در ویژگی target باعث میشود که لینک مورد نظر که در ویژگی href به کار رفته است در باکس والد باز شود در واقع این مقدار باعث میشود که لینک مورد نظر در عنصر والد تگ باز شود.
<a href="bestcoders.ir" target="_parent">صفحه اصلی</a>
در مثال بالا از مقدار _parent در ویژگی target استفاده کرده ایم.
مقدار _top در ویژگی target
وقتی که از مقدار _top در ویژگی target استفاده میکنیم,داریم میگوییم که لینک مورد نظر در بالا ترین رده صفحه جاری باز شود,به این معنی که لینک مورد نظر در تمام صفحه باز شود.
<a href="bestcoders.ir" target="_top">صفحه اصلی</a>
همانطور که در مثال بالا مشاهده میکنید ما از مقدار _top در ویژگی target استفاده کرده ایم.
چند تا مثال از تگ لینک در html
در پایین چند تا مثال از تگ a در html را برای شما آورده ایم.شما میتوانید با کپی کردن مثال های زیر از آن ها برای تمرین کردن استفاده کنید.
<html>
<head>
<title>مثال هایی از تگ a</title>
</head>
<body>
<a href="#id1">لینک دادن به یک آیدی خاض</a>
<a href="https://bestcoders.ir" target="_parent">مثال هایی از لینک دادن خارجی</a>
<a href="./contact-us" target="_blank">لینک درونی به صفحات مختلف</a>
</body>
</html>
امیدوارم از مقاله لذت برده باشید و کاملا به این قضیه در html اشراف پیدا کرده باشید,تا مقاله بعدی خدا یاد و نگهدار شما.
- نظرات