آموزش HTML (قسمت 5) : کار با لینک ها در HTML (جلسه اول)

دسته بندی: آموزش
زمان مطالعه: 7 دقیقه
۳۱ شهریور ۱۳۹۱

فهرست محتوای این مقاله

معرفی تگ <a>

بدون شک یکی از ویژگی هایی که وب را از سایر ابزار و رسانه‌ها متمایز میکند این است که در یک صفحه وب می‌توان با کلیک بر روی یک لینک به سایر صفحات و منابع اطلاعاتی موجود بر روی اینترنت دسترسی داشت.

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

لینک‌ها به انواع دیگری همچون لنگری، ایمیلی، و دانلود دسته بندی می‌شوند. در ادامه به بررسی انواع لینکها آدرس‌ها و نحوه ایجاد هر یک از آن‌ها خواهیم پرداخت.

تگ <a> : از این تگ برای ایجاد لینک‌ها استفاده می‌شود. محتوای یک عنصر a می‌تواند یک متن ساده، یک عکس یا ترکیبی از این دو باشد. در مثال زیر لینکی که با کلیک بر روی آن به سایت سون لرن هدایت خوهید شد را مشاهده می‌کنید:

<a href="https://7learn.com" target="_blank"> Click Me! </a>

در ادامه به بررسی صفت‌های تگ a برای کنترل جزئیات لینک‌ها می‌پردازیم:

accesskey : از این صفت می‌توان برای تعریف کردن یک کاراکتر از صفحه کلید به عنوان میانبر برای دسترسی به یک لینک استفاده کرد. نحوه دسترسی و استفاده از یک لینک بر اساس میانبر آن در مرورگر‌های مختلف متفاوت است در IE از کلید ترکیبی  Alt+accesskey در مرورگرهای Firefox و Google Chrome از کلید‌های ترکیبی Alt+Shift+accesskey و در opera از کلیدهای ترکیبی....اِ......اِ..... راستش اینو نبلدم فکر کنم Shift+accesskey باشه 😀

href : این صفت آدرسی که لینک به آن اشاره می‌کند را مشخص میکند. این آدرس می‌تواند آدرس صفحه ای در همان مسیر، صفحه ای مربوط به سایتی دیگر، مکانی در همان صفحه جاری و یا آدرس هر نوع فایل دیگری باشد.

hreflang : زبان به کار رفته در منبعی که لینک به آن اشاره می‌کند را مشخص میکند. این صفت یکی از کدهای زبانی مانند en , fa , fr و... را به عنوان مقدار می‌پذیرد.

name : نامی برای لینک مشخص میکند. این نام باید در صفحه یکتا باشد. نامی که انتخاب می‌شود نباید با اعداد 0-9، -، _، : یا . (نقطه) شروع شود. بلکه باید نام را با یکی از حروف A-Z یا a-z آغاز کنیم.

rel :  این صفت که مخفف عبارت relationship است رابطه صفحه مقصد با صفحه مبدا لینک را مشخص میکند.

rev : این صفت که مخفف عبارت reverse است عکس صفت بالا عمل میکند و نوع رابطه صفحه مبدا با مقصد لینک را مشخص میکند.

  • مقادیری که صفت‌های rel و rev میپذیرند بدین شرح است
start   next   prev   content   index   glossary  copyright  appendix   help

tabindex : بوسیله این صفت می‌توان ترتیب پیمایش لینک‌ها در صفحه که با استفاده از کلید Tab صفحه کلید انجام می‌شود را مشخص میکند. مقداری که این صفت میگیرد میتواند عددی بین 0 تا 32767 باشد.

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

  • blank_ : لینک را در صفحه ای جدید باز میکند.
  • self_ : لینک را در همان صفحه باز میکند.
  • top_ : صفحه را در پنجره ای بدون فریم باز میکند ( غالبا متل self_ عمل میکند.)
  • parent_ : لینک را در frameset پدر تگ frame ( با این تگ در آینده آشنا خوهید شد) باز خواهد کرد.
  • نام یک فریم( پنجره ) لینک را در پنجره ای با نام مشخص باز میکند.
نکته :

مهمترین صفات تگ <a>، فقط سه صفت href، target، و name هستند و نیاز به مقداردهی به بقیه صفات نیست ولی چون خواستیم که کاملا با صفات این تگ آشنا شوید ، بقیه صفات را نیز معرفی کردیم

مثال :

<a href="https://7learn.com" target="_blank" name="7learn" hreflang="fa"> 7Learn </a>

نتیجه در مرورگر:

تگ <a>

اجزای تشکیل دهنده آدرس‌ها

همانطور که تا به اینجا متوجه شدید بعضی از صفت‌ها مانند href در تگ <a> یا src در تگ </ img> یک URL (آدرس اینترنتی) را به عنوان مقدار می‌پذیرند. URL شامل اطلاعاتی درمورد محل فایل و اینکه مرورگر باید با آن چه کاری انجام دهد می‌باشد. هر فایل بر روی اینترنت دارای یک URL منحصر به فرد است.

هر آدرس از اجزای مختلفی تشکیل می‌شود. در تصویر زیر یک آدرس اینترنتی و اجزای تشکیل دهنده آن را مشاهده میکنید:

آدرس اینترنتی

بخش اول URL طرح (پروتکل) نامیده میشود. این بخش به مرورگر می‌گوید چگونه با فایلی که می‌خواهد آن را باز کند رفتار کند. از متداول‌ترین طرح هایی که وجود دارند می‌توان به http ، ftp ، mailto و ... اشاره کرد.

سایر بخش‌ها هم شامل مواردی همچون دامنه، پسوند، مسیر، نام فایل و پسوند آن که ما را به قایل می‌رساند، می‌باشند. البته آدرس‌ها را به دو دسته اصلی تقسیم میکنتد که در ادامه به بررسی جزئیات هر یک از آن خواهیم پرداخت.

آدرس‌های مطلق و نسبی

آدرس‌های مطلق : به آدرس هایی که در آن‌ها تمام اجزای یک آدرس اینترنتی همچون نام پروتکل (طرح)، جداکننده ها، عبارت WWW ، نام سایت و دامنه ذکر می‌شود. به هنوان مثال آدرس زیر یک آدرس مطلق است:

https://7learn.com/index.php

آدرس‌های نسبی : نوع دوم آدرس ها، آدرس‌های نسبی هستند که معمولا در آن‌ها از آوردن نام پروتکل، نام سایت و دامنه چشم پوشی می‌شود. به عنوان مثال آدرس‌های زیر نمونه هایی از آدرس‌های نسبی هستند.

/images/logo.gif

../../download/html.pdf
نکته :

معمولا برای دسترسی به فایلهایی از داخل سرور (سایت) خودمان، از آدرس‌های نسبی و برای دسترسی به فایل هایی در سرور (سایت)‌های دیگر از آدرس‌های مطلق استفاده میشود.

در مورد آدرس‌های نسبی ذکر چند نکته ضروری است :

  • برای دسترسی به فایلی که در یک مسیر بالاتر از فایل اصلی قرار دارد از /.. استفاده می‌شود:
<a href="../test.html"> Click Here </a>
  • برای دسترسی به فایل هایی که در دایرکتوری اصلی سایت قرار دارد از / استفاده میشود:
<a href="/home.html"> Go To Home Page </a>
  • برای دسترسی به فایلی که در همان دایرکتوری که فایل اصلی قرار دارد از /. استفاده می‌شود.
<a href="./logo.gif"> My Logo </a>

تگ <base> : از این تگ، که جزء تگ‌های تهی است و حتما باید در قسمت Head صفحه هم قرار بگیرد برای تعریف کردن یک آدرس پایه برای تمام لینک‌های نسبی صفحه استفاده میشود. همچنین با استفاده از این تگ می‌توان یک هدف مشخص برای باز شدن لینک‌ها را هم مشخص نمود. اگر تعداد زیادی لینک‌ها در صفحه به آدرس مشخصی اشاره می‌کنند استفاده از تگ base برای جلوگیری از کد نویسی اضافه پیشنهاد می‌شود. این تگ دو صفت href و target را داراست که صفت href آن باید حتما از نوع آدرس‌های مطلق باشد. به طور مثال :

<base target="_blank">

که با قرار دادن این کد در head صفحه همه لینک‌های ما در صفحه جدیدی باز خواهند شد. و دیگر نیازی به مقدار دهی صفت target برای بقیه لینک‌ها نیست.

تا اینجا با طریقه مقدار دهی به لینک‌ها آشنا شدیم در جلسه دوم با لینک‌های ایمیلی، لنگری و دانلود، شما را آشنا خواهیم کرد.

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نظرات کاربران

محمّد حسن مهرآذر

ببخشید تو جمله قبل تو تا لینک رو نوشتند سوال من اینه که چرا مثلا hreflang رو تو این عبارت بنویسی چه فرقی با این که ننویسی داره؟

کیوان علی محمدی

این خاصیت ها توی بحث کیفیت محتوا و سئو میتونن تاثیر گذار باشن.

محمّد حسن مهرآذر

خیلی خیلی متشکر.

محمّد حسن مهرآذر

سلام ببخشید عبارت
7Learn
با عبارت
Click Me!
چه فرقی داره هر دو شما رو به لینک تعریف شده می برند ❓

کیوان علی محمدی

محمد حسن جان،اینکه گذاشته Click Me این فرقی با اون 7learn نداره،این فقط میتونه یه نوع ترغیب کاربر به کلیک کردن روی اون لینک باشه و اینجا فقط برای مثال بوده.

Abbas412

سلام
ممنونم از سجاد عزیز بابت آموزش خوبش
خیلیییی عالی هستن
فقط یه نکته اینکه، من توی ویکی پدیای فارسی خوندم، برای استفاده از accesskey توی مرورگر اپرا، اول باید کلید shift و Esc رو با هم بگیریم، بعد رها کنیم، بعد کلید accesskey رو به تنهایی فشار بدیم!!! (به حق چیزای نشنیده!!)

تو ویکی پدیا انگلیسی نوشته بود هر3 رو با هم بگیرید!!

لینک فارسی:
http://fa.wikipedia.org/wiki/%D9%88%DB%8C%DA%A9%DB%8C%E2%80%8C%D9%BE%D8%AF%DB%8C%D8%A7:%D9%85%DB%8C%D8%A7%D9%86%E2%80%8C%D8%A8%D8%B1%D9%87%D8%A7%DB%8C_%D8%B5%D9%81%D8%AD%D9%87%E2%80%8C%DA%A9%D9%84%DB%8C%D8%AF

لینک انگلیسی:
http://en.wikipedia.org/wiki/Access_key

Abbas412

آقا اصلاح میکنم!
انگار توی انگلیسی هم همونو نوشته!
باید اول shift و Esc رو فشار بدیم! بعد کلید میان بر

Sahar66

سلام، فقط میخواستم یه گزارش کار بهتون بدم 😉
من تا اینجای کار با Html رو خیلی خوب پیش رفتم و همزمان با آموزشهاتون تو نرم افزار دریم ویور هم تمرین میکنم و تو سایت w3schools هم مطالب رو دنبال میکنمو تست هاشو انجام میدم.
لازمه که یه تشکر ویژه از آقای سجاد دریس کنم و همچنین مدیر محترم سایت آقای آوند و یه خسته نباشید به همتون میگم

سجاد دریس

سلام.
خیلی خوبه آفرین به شما.
امیدوارم تا آخر همینجوری ادامه بدین.
ممنونم.سلامت باشید.

sarzamindl

هیچی
معلم طراحی وب من هستن

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

سرزمین دی ال

ممنون از شما

خیلی آموزش های خوب و مفیدی هست

راستی شما آقای بیت سعید یا سعیدی رو میشناسید

سجاد دریس

خواهش میکنم، خوشحالم مفید واقع شده..
نه نمیدونم کی هستن.

احسان

چندتا سوال تستی دارم کسی هست کمک کنه

لقمان آوند

توی انجمن بپرس جواب می گیری …

Parisa1

سلام.من تازه می خواستم کار طراحی وب رو شروع کنم.می خواستم بدونم برای طراحی قالب وب بهتره از چه نرم افزاری استفاده کنم؟؟؟

لقمان آوند

سلام . پیشنهاد بنده phpStorm هست .

avasmspanel

سلام واقعا عالیه من طبق این اموزش ها دارم پیش میرم و پیشرفت خوبی داشتم میخواستم از مدیر سایت و نویسندگان تشکر کنم و یه خسته نباشید بهشون بگم
با تشکر
محمد رمضانی
www.avasmspanl.com

سجاد دریس

سلام.
ممنون محمد جان.
خوشحالم که آموزش ها مفید بوده.
موفق باشی.

سجاد دریس

سلام.
نظر لطفته میلادِ عزیز

سجاد دریس

بله با استفاده از تگ center میتونی نوشته رو بیاری وسط. ولی چون این تگ جزء تگهای منسوخ شده به حساب میاد بهتره از این تگ استفاده نکنی و بجاش از کد css زیر:

text-align: center;

استفاده کنی.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.