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

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

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

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

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

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

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

×

جلسه 12 آموزش HTML: کار با آی فریم و تگ iframe

مطالعه

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

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

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

×

 جلسه 21 آموزش HTML: آشنایی با API ها در html

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

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

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

×

جلسه 2 آموزش HTML :HTML چیست؟ آنچه باید بدانید

مطالعه

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

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

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

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

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

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

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

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

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

×

جلسه 17 آموزش HTML: کار با id و کلاس (class و id)

مطالعه

مثال:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

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

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

×

جلسه 3 آموزش HTML: بررسی ساختار کلی یک سند HTML

مطالعه

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

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

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

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

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

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

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

مثال:

×

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

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

مثال:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

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

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

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

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

×

جلسه 18 آموزش HTML: موجودیت یا Entities در html

مطالعه

مثال:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

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

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

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

×

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

مطالعه

مثال:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

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

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

×

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

مطالعه

جمع بندی

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

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

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

×

جلسه 16 آموزش HTML: عناصر Block و Inline در html

مطالعه