🔗 درس هفتم: لینکها، مسیرها و ساختار صفحات HTML
🎯 هدف این درس: آشنایی حرفهای با لینکها، مسیرهای نسبی و مطلق، Anchor، target، download، mailto و tel و نحوه ایجاد ارتباط بین صفحات یک وبسایت
مهمان عزیز! 👋
به درس هفتم از دوره HTML سطح مقدماتی خوش آمدی.
تا اینجا با ساختار HTML، تگهای معنایی، مدیریت متن و محتوا، تصاویر و رسانهها و فرمها آشنا شدی.
حالا وقت آن رسیده است که یکی از مهمترین قابلیتهای HTML یعنی ایجاد لینک و ارتباط بین صفحات را یاد بگیری.
یک وبسایت واقعی معمولاً از چندین صفحه تشکیل میشود و کاربران باید بتوانند بین این صفحات حرکت کنند.
علاوه بر آن، ممکن است بخواهیم کاربر را به یک وبسایت دیگر، یک بخش مشخص از همان صفحه، یک فایل، یک آدرس ایمیل یا حتی یک شماره تلفن هدایت کنیم.
💡 یک نکته مهم مهمان:
لینکها فقط برای انتقال کاربر به یک سایت دیگر نیستند. در HTML میتوانیم با لینکها بین صفحات، بخشهای مختلف یک صفحه، فایلها، ایمیل و شماره تلفن ارتباط ایجاد کنیم.
🔗 بخش ۱: لینک در HTML چیست؟
برای ساخت لینک در HTML از تگ <a> استفاده میکنیم.
این تگ با نام Anchor یا «لنگر» شناخته میشود.
مهمترین ویژگی تگ <a> ویژگی href است.
این ویژگی مقصدی را مشخص میکند که کاربر پس از کلیک روی لینک باید به آن منتقل شود.
اولین لینک
HTML
HTML5
<a href="https://rajestary.com">
ورود به سایت Rajestary
</a>
🧩 اجزای اصلی یک لینک
<a>: عنصر HTML برای ساخت لینکhref: آدرس یا مقصد لینک- متن لینک: بخشی که کاربر روی آن کلیک میکند
</a>: پایان عنصر لینک
🌐 بخش ۲: لینک خارجی
لینک خارجی به لینکی گفته میشود که کاربر را به یک دامنه یا وبسایت دیگر منتقل میکند.
برای این نوع لینک معمولاً از یک URL کامل استفاده میکنیم.
مثال لینک خارجی
لینک خارجی
HTML
HTML5
<a href="https://www.google.com">
جستجو در گوگل
</a>
<a href="https://www.wikipedia.org">
ورود به ویکیپدیا
</a>
📄 بخش ۳: لینک داخلی
لینک داخلی برای جابهجایی بین صفحات مختلف یک وبسایت استفاده میشود.
برخلاف لینک خارجی، معمولاً نیازی به نوشتن نام کامل دامنه نداریم.
فرض کنیم ساختار پروژه ما به شکل زیر باشد:
ساختار پروژه
Project
HTML5
website/
│
├── index.html
├── about.html
├── contact.html
│
└── pages/
└── courses.html
اگر در فایل index.html باشیم، میتوانیم به about.html به شکل زیر لینک بدهیم:
لینک داخلی
HTML
HTML5
<a href="about.html">
درباره ما
</a>
لینک به پوشه دیگر
اگر فایل مقصد داخل یک پوشه دیگر باشد، باید مسیر آن را مشخص کنیم.
مسیر پوشه
HTML
HTML5
<a href="pages/courses.html">
دورههای آموزشی
</a>
🧭 بخش ۴: مسیر نسبی و مسیر مطلق
یکی از مهمترین مفاهیمی که هنگام کار با لینکها باید یاد بگیری، تفاوت بین Relative Path و Absolute Path است.
مسیر نسبی یا Relative Path
مسیر نسبی، مسیر فایل را نسبت به موقعیت فعلی فایل مشخص میکند.
این نوع مسیر بیشتر در پروژههای HTML استفاده میشود.
Relative Path
HTML
HTML5
<!-- فایل در همان پوشه -->
<a href="about.html">
درباره ما
</a>
<!-- ورود به یک پوشه -->
<a href="pages/contact.html">
تماس با ما
</a>
<!-- برگشت به پوشه قبلی -->
<a href="../index.html">
صفحه اصلی
</a>
📌 چند مسیر مهم
about.html→ فایل در همان پوشهpages/about.html→ ورود به پوشهpages../about.html→ یک پوشه به عقب../../about.html→ دو پوشه به عقب
مسیر مطلق یا Absolute Path
در مسیر مطلق، آدرس کامل مقصد را مشخص میکنیم.
برای مثال:
Absolute Path
HTML
HTML5
<a href="https://rajestary.com/">
صفحه اصلی Rajestary
</a>
⚠️ توجه:
در مسیرهای نسبی، محل قرارگیری فایل فعلی بسیار مهم است. اگر ساختار پوشهها را اشتباه در نظر بگیری، لینک به مقصد صحیح نخواهد رسید.
🪟 بخش ۵: باز کردن لینک در پنجره جدید با target
به صورت پیشفرض، وقتی روی یک لینک کلیک میکنیم، مرورگر صفحه مقصد را در همان تب باز میکند.
با ویژگی target میتوانیم نحوه باز شدن لینک را مشخص کنیم.
یکی از مقادیر رایج برای target مقدار _blank است.
این مقدار باعث میشود مقصد لینک در یک تب جدید باز شود.
Target Blank
HTML
HTML5
<a
href="https://rajestary.com"
target="_blank"
rel="noopener noreferrer"
>
باز کردن سایت در تب جدید
</a>
⭐ نکته حرفهای:
هنگام استفاده از target="_blank"، قرار دادن rel="noopener noreferrer" یک الگوی مناسب برای امنیت و حریم خصوصی است.
⬇️ بخش ۶: ساخت لینک دانلود با download
گاهی میخواهیم کاربر به جای باز کردن یک فایل، آن را دانلود کند.
برای این کار میتوانیم از ویژگی download استفاده کنیم.
فرض کنیم فایلی به نام guide.pdf در پوشه پروژه داریم.
دانلود فایل
HTML
HTML5
<a
href="files/guide.pdf"
download
>
دانلود فایل PDF
</a>
همچنین میتوانیم نام فایل دانلودشده را مشخص کنیم:
نام فایل دانلودی
HTML
HTML5
<a
href="files/lesson.pdf"
download="html-lesson-7.pdf"
>
دانلود درس هفتم
</a>
⚠️ توجه:
ویژگی download بیشتر برای فایلهایی مناسب است که در دسترس پروژه یا سرور شما هستند. رفتار دانلود برای فایلهای خارجی ممکن است توسط مرورگر یا سرور مقصد محدود شود.
📧 بخش ۷: ساخت لینک ایمیل با mailto
با استفاده از mailto: میتوانیم لینکی ایجاد کنیم که با کلیک روی آن، برنامه ایمیل کاربر باز شود.
لینک ایمیل
HTML
HTML5
<a href="mailto:info@example.com">
ارسال ایمیل
</a>
ایجاد موضوع ایمیل
میتوانیم حتی یک موضوع اولیه برای ایمیل مشخص کنیم.
موضوع ایمیل
HTML
HTML5
<a
href="mailto:info@example.com?subject=سوال درباره دوره HTML"
>
ارسال سوال
</a>
📞 بخش ۸: ساخت لینک تماس با tel
برای ایجاد لینک تماس تلفنی از tel: استفاده میکنیم.
این نوع لینک بهخصوص در وبسایتهای موبایل بسیار کاربردی است.
لینک تماس
HTML
HTML5
<a href="tel:+982112345678">
تماس با ما
</a>
💡 نکته حرفهای:
برای شماره تلفن بهتر است از قالب استاندارد بینالمللی مانند +982112345678 استفاده کنید تا لینک تماس در دستگاهها و سیستمهای مختلف عملکرد قابل پیشبینیتری داشته باشد.
⚓ بخش ۹: Anchor و لینک به بخش مشخصی از صفحه
گاهی صفحه ما بسیار طولانی است و میخواهیم کاربر با کلیک روی یک لینک مستقیماً به یک بخش مشخص از همان صفحه منتقل شود.
برای این کار ابتدا به عنصر مقصد یک id میدهیم و سپس در لینک، قبل از نام آن شناسه از علامت # استفاده میکنیم.
ایجاد مقصد
Anchor Target
HTML
HTML5
<section id="contact">
<h2>تماس با ما</h2>
<p>
برای ارتباط با ما از اطلاعات زیر استفاده کنید.
</p>
</section>
ایجاد لینک Anchor
Anchor Link
HTML
HTML5
<a href="#contact">
رفتن به بخش تماس با ما
</a>
📌 ساختار Anchor
id="contact"→ مشخص کردن مقصدhref="#contact"→ لینک به مقصد#→ نشاندهنده شناسه مقصد است
بازگشت به ابتدای صفحه
میتوانیم یک شناسه برای ابتدای صفحه مشخص کنیم و از بخشهای مختلف صفحه به آن برگردیم.
بازگشت به بالا
HTML
HTML5
<body id="top">
<!-- محتوای صفحه -->
<a href="#top">
⬆️ بازگشت به ابتدای صفحه
</a>
</body>
🔄 بخش ۱۰: لینک به بخش مشخصی از صفحه دیگر
Anchor فقط برای همان صفحه نیست.
میتوانیم به یک بخش مشخص از صفحهای دیگر نیز لینک بدهیم.
برای این کار ابتدا مسیر صفحه را مینویسیم و سپس نام شناسه را بعد از علامت # قرار میدهیم.
Anchor بین صفحات
HTML
HTML5
<a
href="contact.html#support"
>
رفتن به بخش پشتیبانی
</a>
🧱 بخش ۱۱: ساخت منوی ساده با لینکها
حالا میتوانیم مفاهیمی را که یاد گرفتیم کنار هم قرار دهیم و یک منوی ساده برای یک وبسایت ایجاد کنیم.
در این مثال از لینکهای داخلی استفاده میکنیم.
منوی ساده سایت
HTML
HTML5
<nav>
<a href="index.html">
صفحه اصلی
</a>
<a href="about.html">
درباره ما
</a>
<a href="courses.html">
دورهها
</a>
<a href="contact.html">
تماس با ما
</a>
</nav>
⭐ نکته حرفهای:
برای ساخت منوی اصلی سایت، استفاده از <nav> در کنار لینکهای <a> از نظر ساختار HTML انتخاب مناسبتری است.
📝 بخش ۱۲: لینک متنی و لینک تصویری
متن تنها چیزی نیست که میتواند داخل تگ <a> قرار بگیرد.
میتوانیم یک تصویر را نیز داخل لینک قرار دهیم.
لینک متنی
لینک متنی
HTML
HTML5
<a href="about.html">
درباره ما
</a>
لینک تصویری
لینک تصویری
HTML
HTML5
<a href="index.html">
<img
src="images/logo.png"
alt="لوگوی سایت"
/>
</a>
🧪 پروژه عملی: ساخت یک صفحه چندبخشی
🚀 پروژه کوچک این درس
در این پروژه یک صفحه HTML کامل میسازیم که شامل منوی اصلی، لینک به بخشهای مختلف صفحه، لینک خارجی، ایمیل و شماره تماس است.
هدف این است که مفاهیم این درس را در یک مثال واقعی کنار هم قرار دهیم.
پروژه لینکها
HTML
HTML5
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحه لینکها</title>
</head>
<body id="top">
<header>
<h1>وبسایت آموزشی من</h1>
<nav>
<a href="#home">
خانه
</a>
<a href="#courses">
دورهها
</a>
<a href="#contact">
تماس با ما
</a>
</nav>
</header>
<main>
<section id="home">
<h2>صفحه اصلی</h2>
<p>
به وبسایت آموزشی من خوش آمدید.
</p>
</section>
<section id="courses">
<h2>دورههای آموزشی</h2>
<p>
آموزش HTML را از پایه شروع کنید.
</p>
<a
href="https://rajestary.com"
target="_blank"
rel="noopener noreferrer"
>
مشاهده سایت Rajestary
</a>
</section>
<section id="contact">
<h2>تماس با ما</h2>
<p>
<a href="mailto:info@example.com">
📧 ارسال ایمیل
</a>
</p>
<p>
<a href="tel:+982112345678">
📞 تماس تلفنی
</a>
</p>
</section>
</main>
<footer>
<a href="#top">
⬆️ بازگشت به بالای صفحه
</a>
</footer>
</body>
</html>
🧠 نکات کلیدی درس
- تگ
<a>برای ساخت لینک در HTML استفاده میشود. - ویژگی
hrefمقصد لینک را مشخص میکند. - لینک داخلی برای ارتباط بین صفحات یک وبسایت استفاده میشود.
- لینک خارجی معمولاً با یک URL کامل مانند
https://example.comنوشته میشود. - مسیر نسبی نسبت به فایل فعلی محاسبه میشود.
../برای رفتن به پوشه والد استفاده میشود.target="_blank"لینک را در تب جدید باز میکند.downloadبرای پیشنهاد دانلود یک فایل استفاده میشود.mailto:برای ایجاد لینک ایمیل کاربرد دارد.tel:برای ایجاد لینک تماس تلفنی استفاده میشود.- با
idو علامت#میتوان به بخش مشخصی از صفحه لینک داد. - استفاده از
<nav>برای مجموعه لینکهای اصلی سایت ساختار معنایی بهتری ایجاد میکند.
📝 تمرینهای عملی
🎯 تمرین شماره ۱
یک صفحه به نام index.html ایجاد کنید و داخل آن چهار لینک برای صفحه اصلی، درباره ما، خدمات و تماس با ما قرار دهید.
🎯 تمرین شماره ۲
یک صفحه طولانی ایجاد کنید و با استفاده از id و Anchor برای بخشهای «درباره ما»، «دورهها» و «تماس با ما» لینک بسازید.
🎯 تمرین شماره ۳
سه لینک جداگانه برای ارسال ایمیل، تماس تلفنی و دانلود یک فایل PDF ایجاد کنید.
🎯 تمرین شماره ۴
یک منوی ساده برای سایت آموزشی خود بسازید که لینکهای آن شامل «خانه»، «دورهها»، «مقالات»، «درباره ما» و «تماس با ما» باشد.
🧩 جمعبندی درس
مهمان عزیز، در این درس با یکی از پایهایترین قابلیتهای HTML یعنی لینکها آشنا شدی.
یاد گرفتی چگونه صفحات مختلف را به یکدیگر متصل کنی و کاربر را به مقصد موردنظر هدایت کنی.
- ✅ ساخت لینک با تگ
<a> - ✅ استفاده از ویژگی
href - ✅ تفاوت لینک داخلی و خارجی
- ✅ مسیر نسبی و مسیر مطلق
- ✅ استفاده از
target="_blank" - ✅ ایجاد لینک دانلود با
download - ✅ ایجاد لینک ایمیل با
mailto: - ✅ ایجاد لینک تماس با
tel: - ✅ ایجاد Anchor با
idو# - ✅ ساخت منوی ساده با لینکهای HTML
- ✅ لینک دادن به بخش مشخصی از صفحه دیگر
در درس بعدی با HTML و دسترسپذیری (Accessibility) آشنا میشوی و یاد میگیری چگونه صفحات وب را طوری طراحی کنی که برای کاربران مختلف، از جمله افرادی که از فناوریهای کمکی استفاده میکنند، قابل استفادهتر باشند.
