فصل ۵: درج تصاویر و رسانه‌ها

فصل ۵: درج تصاویر و رسانه‌ها – صفحه وب خود را زنده کنید! 🎨

سلام به همه! تا اینجا صفحات وب‌مون رو با متن و لینک‌ها ساختیم. اما صفحات وب بدون تصاویر، ویدئوها و صداها خیلی خسته‌کننده می‌شن، نه؟ توی این فصل یاد می‌گیریم چطور انواع مختلف رسانه رو به صفحات HTML اضافه کنیم و چطور اون‌ها رو کنترل کنیم.

رسانه‌ها، صفحات وب رو جذاب‌تر، آموزنده‌تر و کاربرپسندتر می‌کنن.

۱. تگ : نمایش تصاویر جادویی! 🖼️

برای نمایش تصاویر در HTML، از تگ <img> استفاده می‌کنیم. این تگ یه تگ خودبسته (Self-closing) هست، یعنی نیازی به تگ پایان‌دهنده نداره.

مهم‌ترین خصوصیات تگ :

• src (Source): این خصوصیت، آدرس (URL) فایل تصویری رو مشخص می‌کنه. می‌تونه یه مسیر نسبی یا مطلق باشه.
• alt (Alternative Text): این خصوصیت، یک متن جایگزین برای تصویر ارائه می‌ده. این متن در مواقعی نمایش داده می‌شه که تصویر به هر دلیلی بارگذاری نشه (مثلاً مشکل در آدرس یا قطع بودن اینترنت). همچنین برای موتورهای جستجو و صفحه‌خوان‌های صوتی (Screen Readers) خیلی مهمه.

<img src="images/logo.png" alt="لوگوی وب‌سایت">

<!-- نمایش یک تصویر از اینترنت -->
<img src="https://www.example.com/images/banner.jpg" alt="تبلیغ">

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

• width و height: برای تعیین عرض و ارتفاع تصویر به پیکسل. بهتره این خصوصیات رو در CSS تنظیم کنید، اما می‌تونید اینجا هم مشخص کنید.

<img src="images/photo.jpg" alt="یک عکس زیبا" width="300" height="200">

همیشه برای تصاویرتون از خصوصیت alt استفاده کنید! این هم برای کاربر و هم برای سئو (SEO) ضروریه.

۲. فرمت‌های تصویری رایج: 📸

چندین فرمت تصویری وجود داره که هر کدوم ویژگی‌های خودشون رو دارن:

• JPEG (.jpg, .jpeg): ایده‌آل برای عکس‌های واقعی با رنگ‌های زیاد. فشرده‌سازی داره که باعث کوچک شدن حجم فایل می‌شه.
• PNG (.png): عالی برای تصاویر با پس‌زمینه شفاف (Transparent Background) و لوگوها. کیفیت بالایی داره اما حجمش ممکنه بیشتر باشه.
• GIF (.gif): برای تصاویر متحرک (Animation) و تصاویر ساده با رنگ‌های کم مناسبه.
• SVG (.svg): تصاویر برداری (Vector) که کیفیتشون با تغییر اندازه کم نمی‌شه. برای لوگوها و آیکون‌ها عالیه.

۳. تگ <audio> و <video>: صدا و تصویر در صفحه! 🎬

برای اضافه کردن فایل‌های صوتی و تصویری، از تگ‌های <audio> و <video> استفاده می‌کنیم.

الف) تگ <audio>:

برای پخش فایل‌های صوتی.

<audio controls>
  <source src="audio/music.mp3" type="audio/mpeg">
  <source src="audio/music.ogg" type="audio/ogg">
  مرورگر شما از پخش صدا پشتیبانی نمی‌کند.
</audio>

خصوصیت controls: کنترل‌های پخش (پلی، توقف، صدا) رو به کاربر نشون می‌ده.

تگ <source>: به شما اجازه می‌ده چندین فرمت از یک فایل صوتی رو مشخص کنید تا مرورگر بهترین گزینه رو انتخاب کنه.

ب) تگ <video>:

برای پخش فایل‌های ویدیویی.

<video controls width="600" height="400">
  <source src="video/movie.mp4" type="video/mp4">
  <source src="video/movie.webm" type="video/webm">
  مرورگر شما از پخش ویدئو پشتیبانی نمی‌کند.
</video>

خصوصیات controls, width, height و تگ <source> مثل تگ <audio> عمل می‌کنن.

ارائه چندین فرمت فایل صوتی یا تصویری با استفاده از تگ <source>، سازگاری بیشتری با مرورگرهای مختلف ایجاد می‌کنه.

نکات پایانی:

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

با اضافه کردن تصاویر، صدا و ویدئو، صفحات وب شما از حالت ایستا خارج شده و به فضایی پویا و جذاب تبدیل می‌شن. حسابی خلاق باشید! ✨