درس چهارم: اضافه کردن لینک و تصویر در HTML

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

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

1. تگ <a> برای ساخت لینک (Hyperlink)

فکر کنید وب یه تار عنکبوته! این تارها همون لینک‌ها هستن که صفحات مختلف رو به هم وصل می‌کنن. تگ <a> (که مخفف Anchor به معنی لنگر یا قلاب هست) دقیقاً همین کار رو برامون انجام میده.

ساختار اصلی تگ <a>:

<a href="آدرس صفحه مقصد">متن یا عکس قابل کلیک</a>

• <a>: شروع تگ لینک.
• href="آدرس صفحه مقصد": این بخش خیلی مهمه! href مخفف “Hypertext Reference” هست و آدرس جایی که می‌خوایم کاربر بعد از کلیک به اونجا بره رو مشخص می‌کنه. آدرس می‌تونه یه صفحه دیگه از سایت خودمون باشه یا یه وب‌سایت دیگه تو دل اینترنت بزرگ!
• متن یا عکس قابل کلیک: این همون چیزیه که کاربر می‌بینه و روش کلیک می‌کنه. می‌تونه یه متن ساده باشه (مثل “برای اطلاعات بیشتر اینجا کلیک کنید”) یا حتی یه عکس!
• </a>: پایان تگ لینک.

چند مثال ساده:

• لینک به سایت گوگل: <a href="https://www.google.com">برو به گوگل</a> نتیجه: برو به گوگل (البته اینجا چون در محیط HTML نیستیم، فقط متن لینک رو می‌بینید).
• لینک به صفحه‌ای دیگر در همان وب‌سایت (فرض کنید فایلی به اسم about.html در کنار فایل فعلی داریم): <a href="about.html">درباره ما</a>

انواع لینک‌ها رو بهتر بشناسیم:

• لینک داخلی: وقتی به صفحه‌ای دیگه توی همون سایت خودمون لینک میدیم. مثلاً از صفحه اصلی به صفحه “تماس با ما”. آدرس‌دهی معمولاً با اسم فایل یا مسیر فایل نسبت به فایل فعلی انجام میشه (مسیر نسبی).
  مثال: <a href="products/laptop.html">لپ‌تاپ‌ها</a> (یعنی فایل laptop.html در پوشه products قرار داره).
• لینک خارجی: وقتی به یک وب‌سایت کاملاً متفاوت لینک میدیم. در این حالت باید آدرس کامل (با https://) رو بنویسیم (مسیر مطلق).
  مثال: <a href="https://www.wikipedia.org">ویکی‌پدیا</a>
• لینک نشانک (Bookmark Link): گاهی اوقات یه صفحه خیلی طولانیه و می‌خوایم با کلیک روی یه لینک، کاربر رو مستقیماً به بخش خاصی از همون صفحه بفرستیم. برای این کار از علامت # استفاده می‌کنیم.
  اول، به اون بخشی که می‌خوایم بهش لینک بدیم، یه id (شناسه) اختصاص میدیم: <h2 id="section5">بخش پنجم مقاله</h2> بعد، لینکی به اون بخش می‌سازیم: <a href="#section5">برو به بخش پنجم</a>
• لینک ایمیل (Mailto Link): با این لینک، وقتی کاربر روش کلیک می‌کنه، برنامه ارسال ایمیل پیش‌فرضش باز میشه و آدرس ایمیل شما در قسمت گیرنده قرار می‌گیره. <a href="mailto:your-email@example.com">ارسال ایمیل به ما</a>
• لینک تلفن (Tel Link): در دستگاه‌های موبایل، با کلیک روی این لینک، شماره مورد نظر برای تماس در صفحه شماره‌گیر ظاهر میشه.
  html <a href="tel:+989123456789">تماس با ما</a>

صفت target برای باز کردن لینک در تب جدید:

به صورت پیش‌فرض، وقتی روی لینک کلیک می‌کنیم، صفحه جدید توی همون تب مرورگر باز میشه. اگه بخوایم صفحه مقصد توی یه تب یا پنجره جدید باز بشه، از صفت target="_blank" استفاده می‌کنیم:

<a href="https://www.borjkhodaa.com" target="_blank">سایت برج خدا</a>

این کار برای لینک‌های خارجی خیلی رایجه، چون نمی‌خوایم کاربر از سایت خودمون خارج بشه و سایت ما بسته بشه.

صفت title برای توضیحات بیشتر:

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

<a href="https://www.google.com" title="موتور جستجوی گوگل">برو به گوگل</a>

---

اضافه کردن تصاویر با تگ <img>

بعد از لینک‌ها که به ما اجازه میدن در دنیای وب جابجا بشیم، تصاویر دومین عنصر بسیار مهم برای جذاب کردن و قابل فهم کردن محتوا هستن. تگ <img> (که مخفف Image هست) وظیفه نمایش تصاویر در صفحات HTML رو بر عهده داره.

ساختار اصلی تگ <img>:

<img src="آدرس فایل تصویر" alt="توضیح برای تصویر">

برخلاف بیشتر تگ‌های HTML که هم تگ شروع و هم تگ پایان دارن (مثل <p>...</p> یا <a>...</a>)، تگ <img> جزو تگ‌های “خود-بسته” (Self-closing) هست و فقط یک تگ داره.

• <img>: شروع تگ تصویر.
• src="آدرس فایل تصویر": این همون صفت کلیدی برای تگ <img> هست. src مخفف “Source” به معنی منبع هست و آدرس جایی که فایل تصویر قرار داره رو مشخص می‌کنه.
• alt="توضیح برای تصویر": این صفت alt مخفف “Alternative Text” هست و خیلی مهمه! متنی رو مشخص می‌کنه که:
  • اگر تصویر به هر دلیلی (مثلاً مشکل در لود شدن، سرعت پایین اینترنت، یا آدرس اشتباه) نمایش داده نشد، به جای اون، این متن نشون داده میشه.
  • برای افراد با اختلالات بینایی که از صفحه‌خوان‌ها (Screen Readers) استفاده می‌کنن، این متن خونده میشه تا متوجه بشن تصویر چی هست.
  • برای سئو (SEO) هم بسیار مهمه! موتورهای جستجو نمی‌تونن تصاویر رو “ببینن”، اما می‌تونن متن صفت alt رو بخونن و بفهمن تصویر شما درباره چیست. پس حتماً از متن مناسب و مرتبط در alt استفاده کنید.

مسیردهی به فایل تصویر (صفت src)

مثل لینک‌ها، برای مشخص کردن آدرس تصویر در صفت src می‌تونیم از دو نوع مسیر استفاده کنیم:

• مسیر نسبی (Relative Path): وقتی فایل تصویر در جای نزدیکی (در همان پوشه یا پوشه‌های کناری) فایل HTML شما قرار داره.
  • اگر عکس در همان پوشه فایل HTML هست: <img src="my-photo.jpg" alt="عکس من">
  • اگر عکس در پوشه images که در کنار فایل HTML هست، قرار داره: <img src="images/my-photo.png" alt="یک تصویر png">
  • اگر فایل HTML شما در پوشه pages هست و عکس در پوشه اصلی سایت: <img src="../logo.gif" alt="لوگوی سایت"> (دو نقطه .. به معنی “برو یک پوشه به عقب” هست).
• مسیر مطلق (Absolute Path): وقتی عکس در یک آدرس کامل اینترنتی قرار داره (روی وب‌سایت دیگه یا حتی روی هاست خودتون ولی با آدرس کامل).
  • مثال: <img src="https://www.example.com/images/header-background.jpg" alt="پس‌زمینه هدر">

کنترل ابعاد تصویر با صفات width و height

می‌تونید اندازه نمایش تصویر رو در صفحه کنترل کنید. این کار رو می‌تونید با صفات width (عرض) و height (ارتفاع) انجام بدید:

<img src="small-pic.jpg" alt="عکس کوچک" width="200" height="150">

• مقادیر width و height معمولاً بر حسب پیکسل (px) نوشته میشن، اما نیازی به نوشتن px نیست. فقط عدد کافیه.
• نکته مهم: بهتره از این صفات فقط برای کنترل اندازه نمایش استفاده کنید، نه برای کوچک کردن تصاویر خیلی بزرگ. تصاویر حجیم و بزرگ، حتی اگه با width و height کوچیک نمایش داده بشن، باز هم زمان زیادی برای دانلود نیاز دارن و سرعت لود صفحه رو کم می‌کنن. همیشه قبل از آپلود عکس روی وب، اون رو به اندازه و حجم مناسب برای وب بهینه‌سازی کنید.

فرمت‌های رایج تصاویر در وب:

• JPEG (.jpg or .jpeg): مناسب برای عکس‌های با جزئیات زیاد و رنگ‌های متنوع (مثل عکس‌های گرفته شده با دوربین). حجم کمتری دارن اما فشرده‌سازی باعث افت کیفیت میشه.
• PNG (.png): مناسب برای تصاویر با لبه‌های تیز، لوگوها، آیکون‌ها و تصاویری که نیاز به شفافیت (Transparent Background) دارن. کیفیت رو بهتر حفظ می‌کنن اما حجمشون معمولاً بیشتر از JPEG هست.
• GIF (.gif): مناسب برای تصاویر ساده، آیکون‌ها و انیمیشن‌های کوتاه. تعداد رنگ محدودی دارن.
• SVG (.svg): فرمت تصویر برداری (Vector). این تصاویر با فرمول‌های ریاضی ساخته میشن و کیفیتشون با بزرگ کردن کم نمیشه. مناسب برای لوگوها، آیکون‌ها و نمودارها. حجمشون معمولاً کمه و مقیاس‌پذیر هستن.

---

تصاویر قابل کلیک (Clickable Images).

این بخش خیلی ساده و در عین حال کاربردیه! ما می‌تونیم تگ <img> رو داخل تگ <a> قرار بدیم تا عکسمون تبدیل به یک لینک بشه. یعنی با کلیک روی عکس، کاربر به آدرسی که در صفت href تگ <a> مشخص کردیم، منتقل میشه.

ساختار کلی:

<a href="آدرس مقصد لینک">
  <img src="آدرس فایل تصویر" alt="توضیح برای تصویر">
</a>

همونطور که می‌بینید، تگ <img> کاملاً داخل تگ <a> قرار گرفته. این یعنی هر چیزی که بین تگ شروع <a> و تگ پایان </a> باشه، قابل کلیک میشه و به آدرس href لینک میره. در این حالت خاص، ما یک عکس رو اونجا قرار دادیم.

چند مثال برای درک بهتر:

مثال ۱: تبدیل لوگو به لینک صفحه اصلی

معمولاً در وب‌سایت‌ها، لوگوی سایت در بالا سمت چپ یا راست صفحه قرار داره و با کلیک روی اون، کاربر به صفحه اصلی سایت برمی‌گرده.

<a href="/"> <!-- / معمولاً به صفحه اصلی سایت اشاره داره -->
  <img src="logo.png" alt="لوگوی سایت من">
</a>

مثال ۲: لینک کردن یک بنر تبلیغاتی

فرض کنید یک بنر تصویری برای یک محصول دارید و می‌خواهید با کلیک روی اون، کاربر به صفحه محصول بره.

<a href="product-page.html">
  <img src="product-banner.jpg" alt="بنر محصول جدید">
</a>

مثال ۳: باز کردن عکس بزرگتر در یک تب جدید

شاید یک عکس کوچک (Thumbnail) دارید و می‌خواهید کاربر با کلیک روی اون، نسخه بزرگتر عکس رو در یک تب جدید ببینه.

<a href="large-photo.jpg" target="_blank">
  <img src="small-photo.jpg" alt="نمای کوچک از عکس" width="100">
</a>

همونطور که یادتون هست، صفت target="_blank" باعث میشه لینک در یک تب جدید باز بشه.

نکات مهم:

• صفت alt رو فراموش نکنید: حتی وقتی عکس داخل تگ لینک هست، صفت alt برای تگ <img> همچنان حیاتیه! هم برای دسترسی‌پذیری و هم برای سئو.
• ظاهر پیش‌فرض لینک روی تصویر: مرورگرها معمولاً دور تصاویری که لینک هستند، یک کادر آبی رنگ قرار میدن. این کادر با استفاده از CSS قابل حذف یا تغییر رنگ هست که در آینده در مورد CSS صحبت خواهیم کرد.
• متن در کنار تصویر لینک شده: می‌تونید هم عکس و هم متن رو داخل یک تگ <a> قرار بدید:
  html <a href="product-page.html"> <img src="product-icon.png" alt="آیکون محصول" width="30"> اطلاعات بیشتر درباره محصول </a>
  در این حالت، هم روی آیکون و هم روی متن “اطلاعات بیشتر درباره محصول” کلیک کنید، به صفحه محصول هدایت می‌شوید.