درس نهم: کار با تصاویر و چندرسانه‌ای‌ها در HTML

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

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

اضافه کردن تصاویر (<img>)

برای اضافه کردن یک تصویر به صفحه وب، از تگ خالی <img> استفاده می‌کنیم. این تگ خصوصیات مختلفی داره که مهم‌ترین اون‌ها این‌ها هستن:

• src (Source): آدرس فایل تصویر رو مشخص می‌کنه. این آدرس می‌تونه یک آدرس نسبی (فایلی در کنار فایل HTML فعلی) یا یک آدرس مطلق (آدرس کامل یک تصویر در اینترنت) باشه.
• alt (Alternative Text): یک متن جایگزین برای تصویر رو مشخص می‌کنه. این متن در دو حالت نمایش داده میشه:
  • اگر به هر دلیلی تصویر بارگذاری نشه (مثلاً آدرس اشتباه باشه یا مشکل اینترنت وجود داشته باشه).
  • توسط ابزارهای صفحه‌خوان برای کمک به افرادی که نابینا یا کم‌بینا هستند، خوانده میشه.
    استفاده از alt برای سئو (SEO) و دسترسی‌پذیری (Accessibility) بسیار مهم است.
• width و height: عرض و ارتفاع تصویر رو با واحد پیکسل مشخص می‌کنن. اگر فقط یکی از این‌ها رو مشخص کنید، مرورگر به طور خودکار نسبت تصویر رو حفظ می‌کنه و اندازه دیگه رو محاسبه می‌کنه. استفاده از این خصوصیات می‌تونه به بارگذاری سریع‌تر صفحه کمک کنه چون مرورگر قبل از بارگذاری کامل تصویر، فضای لازم برای اون رو رزرو می‌کنه.

مثال:

<!-- اضافه کردن تصویری از داخل پوشه images -->
<img src="images/my-photo.jpg" alt="عکس من">

<!-- اضافه کردن تصویری از یک آدرس اینترنتی -->
<img src="https://www.example.com/images/logo.png" alt="لوگو سایت نمونه">

<!-- اضافه کردن تصویر با تعیین اندازه -->
<img src="images/small-image.png" alt="یک تصویر کوچک" width="100" height="50">

اضافه کردن ویدئو (<video>)

برای قرار دادن فایل‌های ویدئویی در صفحات وب، از تگ <video> استفاده می‌کنیم. این تگ هم خصوصیات مختلفی داره:

• src: آدرس فایل ویدئو. می‌تونید چندین منبع (فرمت‌های مختلف ویدئو) رو با استفاده از تگ <source> داخل تگ <video> قرار بدید تا مرورگر بهترین فرمتی که پشتیبانی می‌کنه رو انتخاب کنه.
• controls: با اضافه کردن این خصوصیت، مرورگر کنترل‌های پیش‌فرض پخش ویدئو (مثل دکمه پخش/مکث، نوار پیشرفت، تنظیم صدا و…) رو نمایش میده.
• autoplay: ویدئو به صورت خودکار پس از بارگذاری صفحه شروع به پخش می‌کنه (توجه داشته باشید که بسیاری از مرورگرها برای جلوگیری از آزار کاربران، پخش خودکار ویدئو با صدا رو مسدود می‌کنند مگر اینکه کاربر اجازه بده).
• loop: ویدئو پس از پایان به صورت خودکار دوباره پخش میشه.
• muted: ویدئو به صورت پیش‌فرض بی‌صدا پخش میشه.
• poster: آدرس یک تصویر رو مشخص می‌کنه که قبل از شروع پخش ویدئو نمایش داده میشه (مثل کاور ویدئو).
• width و height: اندازه نمایش ویدئو رو مشخص می‌کنن.

مثال:

<h2>ویدئو آموزشی</h2>

<video controls width="640" height="360">
  <source src="videos/intro.mp4" type="video/mp4"> <!-- منبع اول با فرمت mp4 -->
  <source src="videos/intro.webm" type="video/webm"> <!-- منبع دوم با فرمت webm -->
  متأسفیم، مرورگر شما از پخش ویدئو پشتیبانی نمی‌کند. <!-- متنی برای مرورگرهایی که پشتیبانی نمی‌کنند -->
</video>

توضیحات مثال بالا:

• تگ <video> اصلی‌ترین تگ هست.
• خصوصیت controls کنترل‌های پخش رو اضافه می‌کنه.
• width و height اندازه نمایش رو تعیین می‌کنند.
• با استفاده از تگ‌های <source>، چند منبع ویدئو با فرمت‌های مختلف مشخص شده. مرورگر به ترتیب این منابع رو چک می‌کنه و اولین فرمتی که پشتیبانی کنه رو پخش می‌کنه.
• متنی که بین تگ‌های <video> قرار داده شده، برای کاربرانی نمایش داده میشه که مرورگرشون از تگ <video> پشتیبانی نمی‌کنه.

اضافه کردن صدا (<audio>)

مشابه تگ <video>، برای قرار دادن فایل‌های صوتی در صفحات وب از تگ <audio> استفاده می‌کنیم. خصوصیات اون هم شبیه تگ ویدئو هست:

• src: آدرس فایل صوتی. می‌تونید از تگ <source> برای فرمت‌های مختلف استفاده کنید.
• controls: کنترل‌های پخش صدا رو نمایش میده.
• autoplay: پخش خودکار صدا (مشابه ویدئو، ممکنه مرورگرها اون رو مسدود کنند).
• loop: تکرار پخش صدا.
• muted: پخش بی‌صدای پیش‌فرض.

مثال:

<h2>پادکست من</h2>

<audio controls>
  <source src="audio/episode1.mp3" type="audio/mpeg"> <!-- منبع اول با فرمت mp3 -->
  <source src="audio/episode1.ogg" type="audio/ogg"> <!-- منبع دوم با فرمت ogg -->
  مرورگر شما از پخش صدا پشتیبانی نمی‌کند. <!-- متنی برای مرورگرهایی که پشتیبانی نمی‌کنند -->
</audio>

توضیحات مثال بالا:

• تگ <audio> تگ اصلی است.
• controls کنترل‌های پخش صدا را اضافه می‌کند.
• با استفاده از تگ‌های <source>، منابع صوتی با فرمت‌های مختلف مشخص شده‌اند.
• متنی که بین تگ‌های <audio> قرار داده شده، برای مرورگرهای ناسازگار نمایش داده می‌شود.

نکته مهم در مورد فرمت‌ها:

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