فهرست محتوای این مقاله
معرفی تگ <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>
نتیجه در مرورگر:
اجزای تشکیل دهنده آدرسها
همانطور که تا به اینجا متوجه شدید بعضی از صفتها مانند 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 نداره،این فقط میتونه یه نوع ترغیب کاربر به کلیک کردن روی اون لینک باشه و اینجا فقط برای مثال بوده.
سلام
ممنونم از سجاد عزیز بابت آموزش خوبش
خیلیییی عالی هستن
فقط یه نکته اینکه، من توی ویکی پدیای فارسی خوندم، برای استفاده از 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
آقا اصلاح میکنم!
انگار توی انگلیسی هم همونو نوشته!
باید اول shift و Esc رو فشار بدیم! بعد کلید میان بر
سلام، فقط میخواستم یه گزارش کار بهتون بدم 😉
من تا اینجای کار با Html رو خیلی خوب پیش رفتم و همزمان با آموزشهاتون تو نرم افزار دریم ویور هم تمرین میکنم و تو سایت w3schools هم مطالب رو دنبال میکنمو تست هاشو انجام میدم.
لازمه که یه تشکر ویژه از آقای سجاد دریس کنم و همچنین مدیر محترم سایت آقای آوند و یه خسته نباشید به همتون میگم
سلام.
خیلی خوبه آفرین به شما.
امیدوارم تا آخر همینجوری ادامه بدین.
ممنونم.سلامت باشید.
هیچی
معلم طراحی وب من هستن
یک زمانی از ایشون سوال کردم سایت 7 لرن آموزش های مفیدی و خوبی داره گفت می شناسمش یه زمانی باشون کار می کردم آقای لقمان آوند رو هم میشناخت
با تشکر
ممنون از شما
خیلی آموزش های خوب و مفیدی هست
راستی شما آقای بیت سعید یا سعیدی رو میشناسید
خواهش میکنم، خوشحالم مفید واقع شده..
نه نمیدونم کی هستن.
چندتا سوال تستی دارم کسی هست کمک کنه
توی انجمن بپرس جواب می گیری …
سلام.من تازه می خواستم کار طراحی وب رو شروع کنم.می خواستم بدونم برای طراحی قالب وب بهتره از چه نرم افزاری استفاده کنم؟؟؟
سلام . پیشنهاد بنده phpStorm هست .
سلام واقعا عالیه من طبق این اموزش ها دارم پیش میرم و پیشرفت خوبی داشتم میخواستم از مدیر سایت و نویسندگان تشکر کنم و یه خسته نباشید بهشون بگم
با تشکر
محمد رمضانی
www.avasmspanl.com
سلام.
ممنون محمد جان.
خوشحالم که آموزش ها مفید بوده.
موفق باشی.
سلام.
نظر لطفته میلادِ عزیز
بله با استفاده از تگ center میتونی نوشته رو بیاری وسط. ولی چون این تگ جزء تگهای منسوخ شده به حساب میاد بهتره از این تگ استفاده نکنی و بجاش از کد css زیر:
استفاده کنی.