جلسه ۷ آموزش HTML: کار با لینک ها و هایپرلینک ها

سلام دوست من! 😄 به جلسه هفتم آموزش HTML از سایت رایا وردپرس خوش اومدی! 😊

امروز با هم به دنیای شگفت‌انگیز لینک‌ها سفر می‌کنیم. تو این جلسه، یاد می‌گیری چطور با استفاده از تگ <a> به راحتی صفحات، فایل‌ها و حتی ایمیل‌ها رو به هم وصل کنی. بیا با هم قدم به قدم پیش بریم تا ویژگی‌های قدرتمند این تگ رو بهتر بشناسی و بفهمی چطور در HTML ازش استفاده کنی.

مقدمه: چرا لینک ها مهمن؟ 🤔

لینک ها (links) قلب تپنده وب هستن! اونها به کاربران اجازه میدن به راحتی بین صفحات، سایت‌ها، فایل‌ها و حتی بخش‌های مختلف یه صفحه حرکت کنن. بدون لینک، وب مثل یه کتاب بی فهرست میمونه! 📚 تو این مقاله قراره یاد بگیریم چطوری از تگ <a> استفاده کنیم و دنیای وب رو به هم وصل کنیم.

آشنایی با تگ <a> و ساختار کلی لینک‌ ها 🔗

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

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

جلسه ۹ آموزش HTML: اضافه کردن ویدیو و صوت به صفحات وب

مطالعه

جلسه 8 آموزش HTML: کار با تصاویر در html

مطالعه

جلسه 19 آموزش HTML: طراحی واکنش‌ گرا (Responsive) و سازگار با موبایل

مطالعه

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

برای مثال، اگر می‌خوای وقتی کاربر روی “برو به رایا وردپرس” کلیک کنه، به آدرس https://rayawp.ir هدایت بشه، کد HTML به شکل زیر میشه:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

نکته! اگه بخوای لینک‌هات به شماره تماس، ایمیل یا پیامک (SMS) اشاره داشته باشه، باید از فرمت‌های خاصی استفاده کنی. برای شماره تماس از tel:، برای ایمیل از mailto: و برای پیامک از sms: استفاده کن. با این روش‌ها، وقتی کاربر روی لینک کلیک می‌کنه، اپ تماس، ایمیل یا پیامک به صورت خودکار باز می‌شه.

مثال (لینک به شماره تلفن):

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

مثال (لینک به ایمیل):

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

مثال (لینک به پیامک SMS):

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

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

🦋 افزودن ویژگی‌های اضافی به تگ <a>

در تگ <a>, علاوه بر صفت href که لینک رو تعیین می‌کنه، می‌تونی ویژگی‌های دیگه‌ای مثل target, title, و rel رو هم استفاده کنی. این ویژگی‌ها کمک می‌کنن تا لینک‌ها رو دقیق‌تر کنترل کنی و تجربه کاربری بهتری ایجاد کنی.

• صفت target: مشخص می‌کنه که لینک در چه جایی باز بشه (همون صفحه، تب جدید، و غیره).
• صفت title: وقتی کاربر ماوس رو روی لینک نگه می‌داره، یه متن توضیحی نشون داده می‌شه.
• صفت rel: یه ویژگی امنیتی و سئو برای تعیین نحوه تعامل لینک با صفحه جدیده.
• لینک به بخش‌های مختلف یک صفحه با استفاده از id: یکی از ویژگی‌های جالب و کاربردی برای ناوبری داخلی توی صفحاته . می‌تونی با استفاده از id به بخش‌های مختلف یک صفحه لینک بدی، مثلاً با لینک دادن به بخش درباره ما یا تماس با ما و….

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

📌صفت Target در لینک ها

وقتی توی HTML با تگ <a> یه لینک می‌سازی، صفت target مشخص می‌کنه که اون لینک قراره کجا باز بشه! 🤔 همون صفحه‌ی فعلی، یه تب جدید یا شاید یه جای خاص؟ با این صفت، کنترل کامل دست توئه و می‌تونی تعیین کنی که بعد از کلیک روی لینکت، مقصد توی کدوم صفحه یا تب نمایش داده بشه.

☑️ مقادیر مختلف صفت target در لینک‌ ها

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

💡 نکته! در HTML به‌صورت پیش‌فرض، مقصد تمامی لینک‌ها روی _self تنظیم شده. یعنی وقتی روی یه لینک کلیک می‌کنی، صفحه‌ی مقصد در همون تب فعلی باز می‌شه. اگه می‌خوای لینک توی تب جدید یا جای دیگه‌ای باز بشه، باید مقدار target رو تغییر بدی! 😉

📌صفت title در لینک ها

صفت title در لینک‌ها یه ویژگی خیلی مفید و ساده است که می‌تونی بهش توضیحات اضافی برای لینک بدی. وقتی کاربر ماوس رو روی لینک قرار می‌ده، یه متن کوچیک نشون داده می‌شه که بهش می‌گن Tooltip. این متن، توضیح بیشتری در مورد لینک به کاربر می‌ده.

مثال:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

وقتی کاربر موس رو روی این لینک بذاره، پیامی به این شکل ظاهر می‌شه: “به سایت رایا وردپرس خوش آمدید!”

📌صفت rel در لینک‌ ها

صفت rel (که مخفف relationship هست) در تگ <a> استفاده می‌شه تا مشخص کنه که لینک چه نوع ارتباطی با صفحه‌ای که بهش اشاره می‌کنه داره. این ارتباط می‌تونه تأثیر زیادی روی SEO (بهینه‌سازی موتور جستجو) و امنیت وب‌سایت‌ داشته باشه. 🔒

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

☑️ مقادیر مختلف صفت rel و کاربردهای آن

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

📌لینک به بخش‌های مختلف یک صفحه با استفاده از id (لینک داخلی)

فرض کن صفحه‌ای داری که شامل بخش‌های مختلفی مثل “درباره ما” 🤝، “تماس با ما” 📞 یا “خدمات ما” 💼 هست. حالا می‌خوای وقتی کاربر روی یه لینک کلیک می‌کنه، سریعاً به همون بخش از صفحه منتقل بشه و نیازی نباشه که صفحه رو اسکرول کنه یا بخواد صفحه جدیدی باز بشه. به کمک id و لینک‌های داخلی می‌تونی این کار رو به راحتی انجام بدی!

🤔 چطور می‌تونی این کار رو انجام بدی؟

• ایجاد id برای هر بخش از صفحه: به هر بخش یک id منحصر به فرد اختصاص می‌دی تا بتونی به راحتی به اون بخش لینک بدی.

مثال:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

• ساخت لینک‌هایی که به اون بخش‌ها اشاره کنن: بعد از اینکه به هر بخش یه id منحصر به فرد دادی، می‌تونی با استفاده از لینک‌هایی که href اون‌ها به همون id اشاره می‌کنه، کاربر رو به راحتی به همون بخش هدایت کنی.

مثال:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

⛷️انواع مسیردهی (نسبی و مطلق) در HTML

وقتی که می‌خوای در HTML لینک بسازی، دو نوع مسیردهی یا URL داریم : نسبی و مطلق. این دو نوع تفاوت‌های زیادی دارن و باید بر اساس نیازت از یکی استفاده کنی. بیا بررسی کنیم که هرکدوم چی هستن!

1. مسیردهی مطلق (Absolute URL)

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

فرض کن می‌خوای به صفحه اصلی سایت رایا وردپرس لینک بدی، آدرس مطلق باید شامل آدرس کامل باشه:

مثال:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

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

2. مسیردهی نسبی (Relative URL)

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

فرض کن یه فایل به اسم about.html داری که توی همون پوشه با صفحه اصلی سایتت قرار داره. اگه بخوای به این فایل لینک بدی، می‌تونی از مسیردهی نسبی استفاده کنی:

مثال:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

اینجا به راحتی با نوشتن about.html به صفحه “درباره ما” لینک می‌دیم. برای مسیردهی نسبی، نیازی نیست آدرس کامل سایت رو بنویسی!

نکته! اگر فایلت تو پوشه قبلی باشه آدرس دهی به صورت زیر میشه:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

(علامت ../ یعنی برو یک پوشه بالاتر)

جمع بندی

تو این جلسه یاد گرفتی که:

• تگ <a> اساس ایجاد لینک‌ها توی HTML است.
• چطور از آدرس‌دهی نسبی و مطلق استفاده کنی.
• لینک‌های مختلفی بسازی؛ از لینک به صفحات داخلی یا خارجی، فایل‌ها و حتی ایمیل.
• با ویژگی target، لینک‌ها رو در تب جدید باز کنی.
• با استفاده از id به بخش‌های مختلف یک صفحه هدایت کنی.

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