آموزش HTML (اچ تی ام ال) قسمت 3 : لینک ها

در این قسمت از مطالب به هم پیوسته HTML میخواهم کمی بیشتر در مورد لینک ها صحبت کنم ، از مهمترین و پرکاربرد ترین عناصر دنیای وب لینک ها هستند که ما به صورت روزمره بسیار از لینک ها استفاده میکنیم از بارز ترین مشخصات لینک ها این است که وقتی موس رو روی آن متن نگه میدارید شکل موس تغییر کرده و به صورت دست در می آید، البته در بخش اول این دوره آموزشی در مورد این تگ صحبت شد ولی در این مطلب میخواهم کمی بیشتر در مورد attribute های این تگ آشنا شویم.

  • تگ <a>

Link ها ‌در تمام مرورگرها به شرح زیر نمایش داده می شوند

  1. یک لینک فعال که دارای زیر خط (UnderLine) است و به رنگ قرمز می باشد.
  2. یک لینک بازدید نشده که دارای زیرخط (UnderLine) و به رنگ آبی می باشد.
  3. یک لینک بازدید شده که دارای زیرخط (UnderLine) و به رنگ بنفش می باشد.

شکل کلی استفاده از این تگ بسیار ساده می باشد , href موقعیت مقصد را معین میکند.

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

نکته : url مخفف Uniform Resource Locator است شاید بار ها این نام را شنیده باشید URL یعنی آدرس اما نه آدرسی که ما در کامپیوتر خود داریم بلکه آدرسی که در سطح اینترنت یا صفحات وب شناخته شده است ، یادتان باشد در دنیای وب فاصله معنی نمیدهد یعنی مابین آدرس های اینترنتی یا همان URL هیچ فاصله ای نیست اگر دیدید در آدرستان علامت 20% آمده بدانید که این نمایانگر Space یا همان فاصله است که خود مرورگر این کارکتر را ایجاد میکند.

آموزش HTML

<a href="http://tosinso.com/">  tosinso.com مشاهده </a> 

کد فوق باعث میشود لینک مورد نظر مانند متن روبرو نمایش داده شود : مشاهده tosinso.com

با کلیک بر روی لینک بالا (مشاهده tosinso.com) به صفحه اول سایت انجمن تخصصی فناوری اطلاعات ایران هدایت می شوید ، البته این پیوند ها یا لینک ها الزاماً یک متن میتواند نباشد و نسبت به سیاست کاری شما تغییر کند مثلاً یک تصویر شما میتوانید به یک عکس لینک دهید تا اگر روی عکس کلیک کنید به سایت یا صفحه دیگری منتقل شوید .

از نظر باز شدن صفحه جدید یا target چند حالت برای باز شدن لینک وجود دارد که این خاصیت را target مینامند. به عبارتی دیگر صفت target به صورت خاص عنوان میکند که لینک مورد نظر چطور و کجا باز شود، البته به صورت پیش فرض لینک ها در همان صفحه باز میشوند . به عنوان مثال در زیر لینکی را مشاهده خواهید نمود که target با عنوان Blank نوشته شده و این یعنی پس از کلیک بر روی لینک صفحه جدید در یک پنچره جدید یا یک Tab جدید در همان مرورگر باز خواهد شد.

<a href="http://web.tosinso.com/articles/25276" target="_blank">Visit web.tosinso.com!</a> 

نکته : همیشه یک اسلش / به آخر آدرس مورد نظرتان اضافه کنید در این صورت یک باری از روی سرور مورد نظر برداشته اید چون اگر این اسلش را اضافه نکنید خود سرور این کار را خواهد کرد

 href="http://www.web.tosinso.com/" 

قبلاً خیلی مختصر در مورد لینک های ایمیلی صحبت شده است هنکامی که بر بر روی این لینک ها کلیک میکنید برنامه هایی نظیر Gmail یا Outlook باز شده و منتظر ارسال ایمیل شما میمانند

کد زیر دقیقاً مربوط به ارسال ایمیل در وب سایت ها به کار میرود

<a href="mailto:name@example.com"> name@example.com </a>

محتوای داخل تگ a مانند انواع دیگر لینک ها می تواند یک متن هم باشد بنا بر این میتوان از کد زیر هم برای ارسال ایمیل استفاده نمود

<a href="mailto:name@example.com"> E-mail Me</a>

کمی پیشرفته تر از کد های فوق را میتوان در کد زیر دید یعنی علاوه بر مشخص کردن آدرس Email دریافت کننده می توان Subject یا موضوع و گزینه های CC و BCC و حتی قسمتی از متن ایمیل را نیز مشخص کرد کد زیر را مد نظر قرار داده و پارامترهای subject، CC ، body راه به دلخواه تغییر دهید با این کار کمک زیادی به کاربر کرده تا بتوانند سریع تر به هدف خود برسند.

<a href="mailto:name@example.com?subject=Network And Programing CC=name2@example.com&body=Please send me a copy of your new Email!"> Email For Me </a>

تگ a در HTML

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


رنگی کردن لینک ها یکی از عناصری است که برای راحتی کاربر بسیار مهم می باشد و کاربر میتواند تشخیص دهد کدام لینک ها را قبلاً باز کرده است ، پس میتوان رنگ این لینک ها را تغییر داد این تغییر می تواند برای تمام لینک های صفحه به صورت یکجا اعمال گردد یا به صورت جزئی و تعدادی از لینک ها این تغییرات را داشته باشد ، اگر رنگ لینک های موجود در صفحه را در تگ <body> معین کنیم. در این صورت رنگی که برای لینک ها در تگ <body> در نظر گرفته می شود بر روی تمام لینک ها تغییر و اعمال میگردد.

ضمناً اگر میخواهید مشخص کنید که چه لینک هایی توسط کاربر کلیک شده است از ویژگی vlink می توان استفاده کرد،که حرف v مخفف visited می باشد. اگر تمایل دارید وقتی نشانگر موس بر روی لینک میرود رنگ لینک تغییر کند و کاربر را متوجه این سازد که این متن یک لینک است از ویژگی alink می توان استفاده کرد. که حرف a مخفف active می باشد.

به عنوان مثال کد زیر را دقت کنید :

<body alink "red" vlink="#0000FF"|>
<a href="http://tosinso.com" target="_blank">tosinso.com</a>
</body>

اگر بر روی این لینک کلیک کنیم رنگ آن تغییر کرده و ما را از اینکه قبلاً این لینک را بازدید کردیم آگاه می سازد ، همانگونه که در کد فوق دیدید تگ body هم دارای صفت هایی است و همچنین استفاده از رنگ ها هم به صورت درج عدد هایی که نمایانگر رنگ است مشخص میشود و هم نام رنگ که بعداً در بخش های بعدی این مورد را دنبال خواهیم نمود.

اما روش فوق جهت تغییر در تمام لینک های صفحه بود برای اینکه رنگ لینک های خاصی را در صفحه تغییر دهیم میتوان از دو روش زیر بهره برد:

  1. استفاده از تگ <font>
  2. استفاده از ویژگی style داخل تگ لینک <a>

این دو روش را با مثال آغاز میکنم در روش اول یعنی استفاده از تگ Font:

<body>
<a href="http://tosinso.com"><font color ="Blue"> www.tosinso.com</font></a>
</body>

تگ فونت را باید در دو طرف عبارت مورد نظر همراه با انتخاب Color مناسب میتوان تعیین کنیم رنگ لینک مورد نظر چطور باشد

در روش دوم همانگونه که گفتیم میتوان از ویژگی style داخل تگ لینک <a> استفاده نمود مثال زیر را ببینید:

<body>
<a href ="http://tosinso.com" style=color:"red" > www.tosinso.com</a>
</body>

پس با توجه به کد فوق از ویژگی style میتوان برای رنگ هم استفاده نمود ، اما اگر توجه کرده باشید در برخی از سایت ها با استفاده از کلید TAB میتوان بر روی عناصر صفحه یا لینک های موجود بر روی صفحه حرکت کرد اگر میخواهید سایتی کاربر پسند داشته باشید این ویژگی میتواند به افرادی کمک کند که استفاده از موس برایشان زیاد خوشایند نیست پس توسط کیبورد و کلید TAB بر روی لینک ها حرکت میکند ، این ویژگی در tabindex موجود است و این ویژگی در تگ <a> به کار میرود ، در مقابل tabindex عددی قرار میگیرد که مشخص کننده این است که با فشاردادن چند بار tab میتوان به این لینک رسید و دوستان برنامه نویس حتماً در برنامه هایی نظیر C شارپ و Visual studio این مورد را در برنامه های windows Application رعایت میکنند.

<body>
<a href ="http://web.tosinso.com" tabindex ="1" > www.web.tosinso.com</a>
<br/>
<a href ="http://dbo.tosinso.com" tabindex ="2" > www.dbo.tosinso.com</a>
</body>

توسط کد فوق میتوان این ویژگی را برای لینک های صفحه به دلخواه و به آن صورتی که تمایل دارید توسط Tab صفحه کیبورد حرکت کنید یادتان باشد این عدد میتواند از 0 تا 32767 باشد.


همانگونه که مطلع هستید attribute های تگ a کار کنترل جزئیات لینک ها را به عهده دارند میخواهیم با برخی از این صفت ها آشنا شویم.

  • href

در مورد این صفت قبلاً هم صحبت شده است و یکی از مهمترین صفت های این تگ به حساب می آید ، این صفت آدرسی که لینک به آن اشاره می کند را مشخص کرده و این آدرس می تواند آدرس صفحه ای مربوط به سایتی دیگر یا در همان مسیر یا مکانی در صفحه جاری و یا آدرس هر نوع فایل دیگری(مانند ارجاع به صفحات دانلود یا انواع فایل ها با پسوند های MKV , jpg , PDF و ... ) باشد.

  • target

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

top : لينک در همان پنجره ای که کليک شده است به طور کامل باز خواهد شد .

self : لينک در همان پنجره يا قابی که کليک شده است باز خواهد شد .

parent : لينک در قاب اصلی يا مادر باز خواهد شد .

blank : لينک در يک پنجره جديد باز خواهد شد .

  • hreflang

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

en ,(Farsi) fa , (Ferench)fr مخفف english و... را به عنوان مقدار می پذیرد.

  • rel یا relationship

این صفت رابطه صفحه مقصد با صفحه مبدا لینک را مشخص میکند.

  • rev یا reverse

این صفت برعکس rel عمل میکند و نوع رابطه صفحه مبدا با مقصد لینک را مشخص میکند و حالت های زیر تعيين کننده نوع ارتباط بين صفحه جاری و صفحه مقصد لینک یا پیوند است:

start : ابتدا

next : بعدی

pre : صفحه قبلی

index : صفحه آغازين

alternate : يک در ميان

designates : انتخاب شده

contents : صفحه محتویات

section : بخشی از برنامه

chapter : بخش

appendix : ضميمه

help : صفحه يا فايل راهنما

stylesheet : صفحه قالب دهی (CSS)

bookmark : يک لنگر در همان صفحه يا صفحه ای ديگر

  • name

میتوان یک نام برای پیوند یا لینک خود مشخص کرد و این نام باید Uniq و منحصر به فرد باشد و ضمناً انتخاب نام نباید با اعداد 0-9 و - و _ و : یا . (نقطه) شروع شود.

ادامه دارد...

نویسنده : فرهاد خانلری

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

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

#آموزش_قدم_به_قدم_html #مقدمات_یادگیری_صفحات_وب #آموزش_تگ_ها_در_html #html_چیست #لینک_ها_در_html #tag_ها_در_html #html_آموزش #صفحات_وب_و_نقش_html #آموزش_کلی_در_مورد_تگ_a_در_html #مبانی_آموزش_طراحی_وب
عنوان
1 آموزش HTML (اچ تی ام ال) قسمت 1 : انواع تگ رایگان
2 آموزش HTML (اچ تی ام ال) قسمت 2 : انواع تگ رایگان
3 آموزش HTML (اچ تی ام ال) قسمت 3 : لینک ها رایگان
4 آموزش HTML (اچ تی ام ال) قسمت 4 : لینک و تصاویر رایگان
5 آموزش HTML (اچ تی ام ال) قسمت 5 : سئوی تصاویر رایگان
6 آموزش HTML (اچ تی ام ال) قسمت 6 : طراحی جدول رایگان
7 آموزش HTML (اچ تی ام ال) قسمت 7 : استفاده از رنگ ها رایگان
8 آموزش HTML (اچ تی ام ال) قسمت 8 : موجودیت ها و کارکتر های خاص رایگان
9 آموزش HTML (اچ تی ام ال) قسمت 9 : صفحه وب با جدول و لینک رایگان
10 آموزش HTML (اچ تی ام ال) قسمت 10 : استفاده از FrameSet رایگان
زمان و قیمت کل 0″ 0
3 نظر
davood_59

سلام فرهادجان، وقتت بخیر، خیلی دوست دارم این مقاله رو دنبال کنم و از فردا انشاالله مقاله شما رو از ابتدا شروع به خوندن میکنم. میدونم که مثل همیشه مقالات واقعا کاربردی و خوبی تهیه می کنید.

فقط یک سوال داشتم عزیزم و اون هم اینه که آیا مقالات شما در خصوص HTML 5 هستش یا نه؟؟ اگه این رو هم تو آموزشتون قرار بدین خیلی خوب میشه ها، چون دیگه خیلی از تگهای قدیمی به اصطلاح منسوخ شده و به نوعی ما رو از div های زیاد و تو در تو راحت کرده. بازم یک دنیا ممنون از لطف و زحمتی که میکشین. خدا خیرتون بده.

فرهاد خانلری

سلام داوود جان خواهش میکنم ، فعلاً در حد خیلی کمی HTML5 میگم این دوره HTML که تموم شه میرم سراغ Java script و css اونوقت Html5 رو به همراه Css3 با هم شروع میکنم.

davood_59

عالیه فرهاد جان، دستت درد نکنه، اتفاقا یه بنده خدایی به من گفت که Java script خیلی بدرد طراحان وب میخوره. میخواستم ببینم آیا واقعا همینطوره؟ چون بعضی ها میگن با وجود CSS3 و همچنین کتابخونه هایی مثل jquery نیازی نیست که آدم جاوااسکریپت رو بلد باشه. فعلا یه کتاب داشتم که دارم میخونم(البته چون دیدم تاریخ چاپش خیلی قدیمی هستش دارم بیخیال خوندن اون کتاب میشم) ولی میخواستم ببینم برای یه طراح وب تسلط به جاوااسکریپت هم نیازه؟ آخه همون بنده خدا میگفت گفتن زبان نسل آینده جاوا اسکریپت هستش.

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....