تا %60 تخفیف خرید برای 8 نفر با صدور مدرک فقط تا
00 00 00
در توسینسو تدریس کنید

آموزش HTML گام به گام قسمت 9 : لینک ها

لینک های اچ تی ام ال در واقع ابرلینک هستند، یعنی با انتخاب یک لینک در صفحه وب یک صفحه دیگری باز می شود. در جلسات اول چگونگی نوشتن لینک را توضیح دادم اما در این جلسه می خواهم به صورت کامل درباره لینک ها توضیح دهم. نوشتن کد برای لینک ها در اچ تی ام ال به صورت زیر می باشد:

<a href="url">link text</a> 

Url تعیین کننده مسیری است که با کلیک روی نوشته link text باز می شود. Href همانطور که قبلا عرض کردن یکی از صفات مهم تگ a می باشد. که مشخص کننده مسیر لینک است.

اهداف در لینک های اچ تی ام ال

در یک سند اچ تی ام ال می توان تعیین کردن که لینک ها به چه صورتی باز شوند، مثلا در تبی جدید یا در همان تب و... . صفت target در تگ a مشخص کننده نوع باز شدن یک لینک می باشد. مقادیری که این صفت می تواند دریافت کند در زیر آمده است:

  • __Blank : باز شدن لینک در یک تب یا پنجره جدید
  • __Self : باز شدن لینک در همان تب / به صورت پیش فرض تگ a دارای این مقدار است.
  • __Parent: (در صورت استفاده از Frame) باز شدن لینک در همان Frame
  • __Top : (در صورت استفاده از Frame) باز شدن لینک در Frame دیگر
  • Framename : (در صورت استفاده از Frame) باز شدن لینک در Frame مشخص

یک مثال کلی

<a href="http://www.tosinso.com/" target="_blank">Visit ITPro!</a> 

آدرس آی تی پرو را در پنجره جدید باز می کند.

لینک ها در سی اس اس

لینک ها در سی اس اس دارای چهار حالت مختلف هستند، یعنی می توان یک متن که دارای لینک است در چهار حالت مختلف استایل دهی شوند:

  • Link: رنگ لینک را انتخاب می کند.
  • Visited: رنگ لینکی که قبلا روی آن انتخاب شده است.
  • Hover: رنگ لینک در زمانی که ماوس روی آن می رود.
  • active : رنگ لینک درست در زمان کلیک کردن روی آن.

حال چگونه می توانیم از این امکانات استفاده کنیم!؟

<style>
a:link {color:red;}
a:visited {color:red;}
a:hover {color:red;}
a:active {color:red;}
</style>

ساخت Bookmark در لینک: حتما تا به حال شده است که با کلیک روی یک لینک، در همان صفحه به مکانی منتقل می شوید، مثلا وقتی به پایینترین نقطه یک سایت میروید عموما با نوشته Top مواجهه شده اید، وقتی روی این نوشته کلیک می کنید به بالای صفحه انتقال می یابید. یا در ویکیپدیا، وقتی روی زیر گزینه ها یک موضوع کلیک می کنید در همان صفحه به قسمت مربوطه فرستاده می شوید، به این نوع لینک ها Bookmark می گویند. برای تعیین بوکمارک کافی است که لینک یک نوشته را برابر آی دی یک المنت یا تگ اچ تی ام ال قرار دهید. برای نمونه:

<h1 id="top"></h1>
    <br><br><br><br><br><br><br><br><br><br>
    <a href="#top">TOP</a>

این دستور را امتحان کنید و نتیجه را ببینید! شما همچنین می توانید برای جذاب تر کردن لینک های تان بجز متن، از تصاویر هم استفاده نمایید. یعنی به جای آنکه روی یک متن کلیک کنید، روی یک عکس کلیک کرده و به جای مورد نظر منتقل شوید. برای این کار داخل تگ <a> از تگ <img> بهره ببرید.

<a href="tosinso.com"><img src="p1.png"></a>

نویسنده : ارسطو عباسی

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

نظر شما
برای ارسال نظر باید وارد شوید.
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

افرادی که این مطلب را خواندند مطالب زیر را هم خوانده اند