درس ۳: لینک‌ها و تصاویر

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

ساختار تگ لینک:

<a href="آدرس">متن لینک</a>

انواع لینک‌ها:

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

ویژگی‌های کاربردی:

• href - آدرس مقصد لینک
• target - نحوه باز شدن لینک (_blank, _self, _parent, _top)
• title - توضیح اضافی که هنگام hover نمایش داده می‌شود
• download - برای دانلود فایل به جای باز کردن
• rel - رابطه بین صفحه فعلی و مقصد (nofollow, noopener, noreferrer)

مثال‌های مختلف:

• <a href="https://google.com">گوگل</a>
• <a href="page2.html">صفحه دوم</a>
• <a href="#section1">بخش اول</a>
• <a href="mailto:info@example.com">ایمیل</a>
• <a href="tel:+989123456789">تماس</a>

تصاویر بخش مهمی از محتوای وب هستند. در HTML از تگ <img> برای نمایش تصاویر استفاده می‌شود. این تگ خودبسته است و نیاز به تگ بسته ندارد.

ساختار تگ تصویر:

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

ویژگی‌های مهم:

• src - آدرس فایل تصویر (اجباری)
• alt - متن جایگزین برای دسترسی‌پذیری (اجباری)
• width - عرض تصویر
• height - ارتفاع تصویر
• title - توضیح اضافی
• loading - نحوه بارگذاری (lazy, eager)

فرمت‌های رایج:

• JPEG: برای عکس‌های رنگی با کیفیت بالا
• PNG: برای تصاویر با شفافیت
• GIF: برای انیمیشن‌های ساده
• SVG: برای تصاویر برداری
• WebP: فرمت مدرن با کیفیت بالا و حجم کم

نکات بهینه‌سازی:

• اندازه مناسب تصاویر را انتخاب کنید
• از فرمت‌های مدرن استفاده کنید
• همیشه ویژگی alt را تعریف کنید
• از lazy loading برای بهبود سرعت استفاده کنید
• تصاویر واکنش‌گرا طراحی کنید

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

HTML5 تگ‌های جدیدی برای کار با صوت و ویدیو ارائه داده است:

تگ ویدیو:

<video src="video.mp4" controls></video>

تگ صوت:

<audio src="audio.mp3" controls></audio>

ویژگی‌های مشترک:

• controls - نمایش کنترل‌های پخش
• autoplay - پخش خودکار
• loop - تکرار پخش
• muted - بی‌صدا
• preload - نحوه پیش‌بارگذاری

برای تسلط بیشتر بر مطالب این درس، تمرین‌های زیر را انجام دهید:

تمرین ۱: منوی ناوبری

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

تمرین ۲: گالری تصاویر

یک گالری ساده از تصاویر ایجاد کنید که هر تصویر قابل کلیک باشد.

تمرین ۳: کارت تماس

کارت تماسی ایجاد کنید که شامل لینک‌های ایمیل، تلفن و آدرس باشد.

تمرین ۴: صفحه محصول

صفحه‌ای برای معرفی محصول ایجاد کنید که شامل تصاویر، توضیحات و لینک‌های مرتبط باشد.

برای لینک‌ها:

• متن لینک باید توصیفی و معنادار باشد
• از "اینجا کلیک کنید" استفاده نکنید
• لینک‌های خارجی را در تب جدید باز کنید
• از ویژگی rel="noopener" برای امنیت استفاده کنید
• لینک‌های شکسته را بررسی کنید

برای تصاویر:

• همیشه ویژگی alt را تعریف کنید
• اندازه تصاویر را مشخص کنید
• از تصاویر بهینه شده استفاده کنید
• برای تصاویر تزیینی alt خالی قرار دهید
• از lazy loading برای بهبود عملکرد استفاده کنید

اشتباهات رایج:

• استفاده از تصاویر بدون ویژگی alt
• لینک‌های بدون متن توصیفی
• استفاده از تصاویر با حجم زیاد
• باز کردن همه لینک‌ها در تب جدید
• استفاده از آدرس‌های مطلق برای فایل‌های محلی

در درس بعدی با جداول و فرم‌ها در HTML آشنا خواهید شد.