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

معرفی تگ <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="https://7learn.com" target="_blank" name="7learn" hreflang="fa"> 7Learn </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 برای بقیه لینک‌ها نیست.

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

نویسنده

طاها دریس