یک صفحه وب فقط از متن و لینک تشکیل نمی‌شود؛ تصاویر، فایل‌های صوتی و ویدئو نیز بخش مهمی از محتوای بسیاری از وب‌سایت‌ها را تشکیل می‌دهند. از تصاویر محصولات و مقالات گرفته تا لوگوها، بنرها، فایل‌های صوتی و ویدئوهای آموزشی، همه این محتواها می‌توانند نقش مهمی در ارائه بهتر اطلاعات و ایجاد تجربه کاربری مناسب داشته باشند. HTML عناصر مختلفی را برای قرار دادن محتوای چندرسانه‌ای در صفحات وب در اختیار ما قرار می‌دهد؛ از جمله تگ <img> برای نمایش تصاویر، <audio> برای پخش فایل‌های صوتی و <video> برای نمایش ویدئو. در این مقاله ابتدا نحوه قرار دادن تصاویر در صفحه و کاربرد Attributeهای مهمی مانند src و alt را یاد می‌گیریم و سپس با مسیر فایل‌ها و فرمت‌های رایج تصاویر آشنا می‌شویم. در ادامه نیز به صورت مقدماتی نحوه اضافه کردن فایل‌های صوتی و ویدئویی را بررسی می‌کنیم تا بتوانیم صفحات HTML خود را با محتوای متنوع‌تر و کاربردی‌تری ایجاد کنیم.

قرار دادن تصویر در HTML

برای قرار دادن تصویر در HTML از تگ imgاستفاده می‌کنیم.

یک نمونه بسیار ساده:

<img src="image.jpg" alt="تصویر">

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

اما برای اینکه مرورگر بداند تصویر موردنظر کجاست، باید مسیر آن را مشخص کنیم.

این کار با Attribute به نام src انجام می‌شود.

Attribute به نام src

src مخفف Source است و مسیر یا آدرس فایل تصویر را مشخص می‌کند.

مثلاً:

<img src="image.jpg">

در اینجا:

src="image.jpg"

به مرورگر می‌گوید فایل تصویر با نام image.jpg را پیدا و نمایش بده.

ساختار کلی:

<img src="مسیر تصویر">

است.

اولین تصویر خودمان

فرض کنید ساختار پروژه ما این باشد:

my-website
│
├── index.html
└── image.jpg

حالا داخل index.html می‌توانیم بنویسیم:

<img src="image.jpg">

اگر فایل تصویر در همان پوشه قرار داشته باشد، مرورگر می‌تواند آن را پیدا کند.

پس ساختار پروژه و مسیر فایل اهمیت زیادی دارد.

اگر تصویر داخل یک پوشه باشد چه؟

فرض کنید پروژه ما این ساختار را دارد:

my-website
│
├── index.html
│
└── images
    └── logo.png

در این حالت تصویر داخل پوشه images قرار دارد.

پس باید مسیر آن را به شکل زیر بنویسیم:

<img src="images/logo.png">

یعنی:

index.html
    ↓
images
    ↓
logo.png

این دقیقاً مشابه مسیری است که در مقاله قبل برای لینک‌ها یاد گرفتیم.

اگر تصویر داخل چند پوشه باشد

مثلاً:

my-website
│
├── index.html
│
└── assets
    └── images
        └── logo.png

مسیر تصویر می‌شود:

<img src="assets/images/logo.png">

هر پوشه را با / از بخش بعدی جدا می‌کنیم.

استفاده از آدرس کامل تصویر

در بعضی موارد ممکن است تصویر روی یک سایت دیگر قرار داشته باشد.

مثلاً:

<img src="https://example.com/images/photo.jpg">

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

البته در پروژه‌های واقعی معمولاً بهتر است کنترل تصاویر مورد استفاده در سایت خودمان را داشته باشیم و تا حد امکان فایل‌های موردنیاز را به شکل مناسب مدیریت کنیم.

Attribute مهم alt

یکی از مهم‌ترین Attributeهای تگ img، ویژگی alt است.

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

alt یک توضیح متنی برای تصویر است.

این توضیح در شرایط مختلف اهمیت دارد.

برای مثال اگر تصویر به هر دلیلی نمایش داده نشود، ممکن است متن alt به جای آن نمایش داده شود.

همچنین فناوری‌های کمکی می‌توانند از این متن برای توضیح تصویر به کاربران استفاده کنند.

فرض کنید این تصویر را داریم:

<img src="product.jpg" alt="لپ‌تاپ مشکی">

اگر تصویر بارگذاری نشود، توضیح:

لپ‌تاپ مشکی

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

بنابراین بهتر است برای تصاویر مهم، توضیح مناسب و معناداری در alt قرار دهیم.

متن alt باید تا حد امکان کوتاه، واضح و مرتبط با تصویر باشد.

مثلاً اگر تصویر یک لپ‌تاپ روی میز است:

<img src="laptop.jpg" alt="لپ‌تاپ روی میز">

یا اگر تصویر مربوط به یک محصول است:

<img src="phone.jpg" alt="گوشی موبایل مشکی">

اما بهتر است توضیح غیرضروری و بسیار طولانی ننویسیم.

اگر تصویر صرفاً تزئینی باشد چه؟

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

در چنین شرایطی می‌توان alt را خالی قرار داد:

<img src="decoration.png" alt="">

این موضوع کمک می‌کند فناوری‌های کمکی آن تصویر تزئینی را به عنوان محتوای مهم در نظر نگیرند.

تفاوت src و alt

این دو Attribute را با هم اشتباه نگیرید.

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

در اینجا:

src
→ تصویر را از کجا پیدا کنیم؟

alt
→ اگر لازم بود تصویر را چگونه توصیف کنیم؟

پس:

src = مسیر تصویر

alt = توضیح تصویر

تغییر اندازه تصویر

می‌توانیم با Attributeهای width و height اندازه تصویر را مشخص کنیم.

مثلاً:

<img
    src="logo.png"
    alt="لوگوی سایت"
    width="300"
    height="150">

در این مثال:

width
→ عرض تصویر

height
→ ارتفاع تصویر

مشخص شده است.

در پروژه‌های واقعی، کنترل ظاهر تصاویر معمولاً با CSS انجام می‌شود.

اما مشخص کردن اندازه مناسب تصویر می‌تواند به مرورگر کمک کند فضای لازم را از قبل در نظر بگیرد.

فعلاً لازم نیست وارد جزئیات طراحی تصاویر با CSS شویم.

وقتی به بخش CSS برسیم، روش‌های حرفه‌ای‌تر کنترل اندازه تصاویر را یاد خواهیم گرفت.

تصویر و لینک در کنار هم

در مقاله قبل دیدیم که می‌توانیم تصویر را داخل یک لینک قرار دهیم.

مثلاً:

<a href="about.html">
    <img src="logo.png" alt="درباره ما">
</a>

در این حالت تصویر قابل کلیک است.

کاربر با کلیک روی تصویر به صفحه about.html منتقل می‌شود.

این روش در مواردی مانند لوگوی سایت یا کارت‌های قابل کلیک کاربرد دارد.

فرمت‌های رایج تصاویر

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

چند فرمت رایج عبارت‌اند از:

JPG / JPEG
PNG
GIF
SVG
WebP
AVIF

هرکدام کاربردهای خاص خودشان را دارند.

برای مثال:

JPEG

معمولاً برای تصاویر عکاسی و عکس‌هایی با رنگ‌های زیاد مناسب است.

PNG

برای تصاویری که به شفافیت یا کیفیت خاصی نیاز دارند کاربرد زیادی دارد.

SVG

برای تصاویر برداری مانند لوگوها و آیکون‌ها بسیار مفید است.

WebP و AVIF

فرمت‌های مدرن‌تری هستند که می‌توانند در بسیاری از شرایط حجم مناسبی همراه با کیفیت خوب ارائه دهند.

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

تصویر خراب یا پیدا نشدن فایل

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

مثلاً نوشته‌ایم:

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

اما تصویر نمایش داده نمی‌شود.

یکی از اولین چیزهایی که باید بررسی کنیم، مسیر فایل است.

فرض کنید ساختار واقعی پروژه این باشد:

my-website
│
├── index.html
└── images
    └── logo.png

در این حالت:

<img src="logo.png">

اشتباه است.

مسیر صحیح:

<img src="images/logo.png">

است.

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

قرار دادن تصویر در یک صفحه کامل

حالا یک مثال ساده و واقعی ایجاد کنیم:

<!DOCTYPE html>
<html>

<head>
    <title>صفحه معرفی</title>
</head>

<body>

    <h1>درباره من</h1>

    <img
        src="profile.jpg"
        alt="تصویر پروفایل">

    <p>
        من در حال یادگیری طراحی وب هستم.
    </p>

</body>

</html>

اگر فایل profile.jpg در کنار index.html باشد، تصویر در صفحه نمایش داده می‌شود.

صوت در HTML

حالا به بخش چندرسانه‌ای دیگری برسیم.

HTML امکان قرار دادن فایل صوتی در صفحه را نیز فراهم می‌کند.

برای این کار از عنصر <audio> استفاده می‌کنیم.

یک نمونه ساده:

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
</audio>

Attribute مهم:

controls

باعث می‌شود کنترل‌های پخش صدا، مانند دکمه پخش و تنظیم صدا، در اختیار کاربر قرار بگیرد.

فایل صوتی کجاست؟

فرض کنید ساختار پروژه ما:

my-website
│
├── index.html
└── audio
    └── music.mp3

است.

پس می‌توانیم بنویسیم:

<audio controls>
    <source src="audio/music.mp3" type="audio/mpeg">
</audio>

مسیر فایل صوتی نیز مانند تصویر باید درست باشد.

چند فرمت صوتی

از فرمت‌های مختلفی می‌توان برای صوت استفاده کرد.

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

MP3
WAV
OGG

در پروژه‌های وب، MP3 یکی از فرمت‌های بسیار رایج است.

ویدئو در HTML

HTML امکان نمایش ویدئو را نیز فراهم می‌کند.

برای این کار از <video> استفاده می‌کنیم.

یک مثال ساده:

<video controls width="600">
    <source src="video.mp4" type="video/mp4">
</video>

در این مثال:

video
→ عنصر ویدئو

controls
→ نمایش کنترل‌های پخش

width
→ عرض اولیه ویدئو

source
→ فایل ویدئو

مسیر فایل ویدئو

فرض کنید پروژه این ساختار را دارد:

my-website
│
├── index.html
└── videos
    └── lesson.mp4

کد:

<video controls width="600">
    <source
        src="videos/lesson.mp4"
        type="video/mp4">
</video>

به مرورگر می‌گوید ویدئوی lesson.mp4 را از پوشه videos پیدا کند.

چرا از source استفاده می‌کنیم؟

در مثال‌های صوت و ویدئو از:

<source>

استفاده کردیم.

مثلاً:

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

source مشخص می‌کند فایل مورد استفاده برای پخش کدام است.

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

فعلاً استفاده ساده از یک source برای ما کافی است.

تفاوت img، audio و video

تا اینجا سه عنصر مهم را دیدیم:

img → تصویر

audio → صوت

video → ویدئو

مثلاً:

<img src="photo.jpg" alt="عکس">

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
</audio>

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

هرکدام برای نوع خاصی از محتوا استفاده می‌شوند.

ساخت یک صفحه چندرسانه‌ای ساده

حالا می‌توانیم همه چیزهایی را که یاد گرفتیم در یک صفحه قرار دهیم:

<!DOCTYPE html>
<html>

<head>
    <title>صفحه چندرسانه‌ای</title>
</head>

<body>

    <h1>صفحه معرفی من</h1>

    <p>
        به صفحه من خوش آمدید.
    </p>

    <h2>تصویر من</h2>

    <img
        src="profile.jpg"
        alt="تصویر پروفایل"
        width="300">

    <h2>فایل صوتی</h2>

    <audio controls>
        <source
            src="music.mp3"
            type="audio/mpeg">
    </audio>

    <h2>ویدئو</h2>

    <video controls width="600">
        <source
            src="video.mp4"
            type="video/mp4">
    </video>

</body>

</html>

با این کد یک صفحه ساده شامل متن، تصویر، صوت و ویدئو خواهیم داشت.

البته برای زیباتر شدن این صفحه باید از CSS استفاده کنیم که در بخش مربوط به CSS یاد خواهیم گرفت.

یک نکته مهم درباره ویدئو و صوت

بهتر است فایل‌های چندرسانه‌ای بسیار بزرگ را بدون فکر در سایت قرار ندهیم.

مثلاً یک ویدئوی چند گیگابایتی می‌تواند باعث مصرف زیاد پهنای باند و کند شدن تجربه کاربر شود.

در پروژه‌های واقعی معمولاً حجم فایل‌ها، فرمت، کیفیت و روش ارائه آن‌ها باید به شکل مناسبی مدیریت شود.

در این مرحله فقط بدانید:

حجم و کیفیت فایل‌های چندرسانه‌ای روی سرعت سایت تأثیر دارند.

جزئیات بهینه‌سازی را در بخش‌های پیشرفته‌تر بررسی خواهیم کرد.

اشتباهات رایج هنگام کار با تصاویر

اشتباه اول: مسیر اشتباه

مثلاً:

<img src="image.jpg">

در حالی که فایل در پوشه images است.

باید بنویسیم:

<img src="images/image.jpg">

اشتباه دوم: فراموش کردن alt

بهتر است تصاویر مهم را بدون alt قرار ندهیم.

مثلاً:

<img src="product.jpg">

بهتر است:

<img src="product.jpg" alt="گوشی موبایل مشکی">

اشتباه سوم: استفاده از تصویر بسیار بزرگ

فرض کنید یک تصویر با حجم بسیار بالا داریم و آن را مستقیماً در سایت قرار می‌دهیم.

ممکن است صفحه برای کاربر کندتر بارگذاری شود.

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

تمرین عملی اول

یک پروژه با ساختار زیر ایجاد کنید:

my-website
│
├── index.html
└── images
    └── photo.jpg

داخل index.html یک عنوان و تصویر قرار دهید:

<h1>تصویر من</h1>

<img
    src="images/photo.jpg"
    alt="تصویر من">

سپس فایل را در مرورگر باز کنید.

اگر تصویر نمایش داده نشد، مسیر فایل را بررسی کنید.

تمرین عملی دوم

حالا ساختار پروژه را به شکل زیر تغییر دهید:

my-website
│
├── index.html
├── images
│   └── photo.jpg
├── audio
│   └── music.mp3
└── videos
    └── video.mp4

در صفحه HTML موارد زیر را قرار دهید:

عنوان صفحه
تصویر
فایل صوتی
ویدئو

برای تصویر از img، برای صوت از audio و برای ویدئو از video استفاده کنید.

تمرین چالشی

یک صفحه معرفی شخصی بسازید.

صفحه باید شامل این موارد باشد:

نام شما
یک تصویر
توضیح کوتاه درباره شما
یک فایل صوتی
یک ویدئو

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

<h1>معرفی من</h1>

<img
    src="images/profile.jpg"
    alt="تصویر پروفایل">

<p>
    من در حال یادگیری طراحی وب هستم.
</p>

<h2>فایل صوتی</h2>

<audio controls>
    <source
        src="audio/intro.mp3"
        type="audio/mpeg">
</audio>

<h2>ویدئو</h2>

<video controls width="600">
    <source
        src="videos/intro.mp4"
        type="video/mp4">
</video>

سعی کنید مسیر فایل‌ها را خودتان تنظیم کنید.

اگر فایل صوتی یا ویدئو ندارید، می‌توانید فعلاً فقط بخش تصویر را تمرین کنید.

جمع‌بندی

در این مقاله یاد گرفتیم که چگونه محتوای چندرسانه‌ای را به صفحات HTML اضافه کنیم.

ابتدا با تگ img آشنا شدیم و یاد گرفتیم که برای مشخص کردن مسیر تصویر از src استفاده می‌شود.

سپس با alt آشنا شدیم و فهمیدیم که این Attribute برای ارائه توضیح متنی مناسب درباره تصویر اهمیت دارد.

بعد از آن به صورت مقدماتی با عناصر audio و video آشنا شدیم و دیدیم که چگونه می‌توان فایل‌های صوتی و ویدئویی را در صفحه قرار داد.

اکنون می‌توانیم علاوه بر متن و لینک، تصویر، صوت و ویدئو نیز در صفحات خود قرار دهیم.

در این مقاله چند عنصر و Attribute مهم را یاد گرفتیم:

<img> → نمایش تصویر

src → مسیر یا آدرس تصویر

alt → توضیح متنی تصویر

width → عرض

height → ارتفاع

<audio> → نمایش محتوای صوتی

<video> → نمایش محتوای ویدئویی

<source> → مشخص کردن فایل صوتی یا ویدئویی

controls → نمایش کنترل‌های پخش

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

<img src="image.jpg" alt="توضیح تصویر">

ساختار ساده صوت:

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
</audio>

و ساختار ساده ویدئو:

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

در مقاله بعدی سراغ یکی دیگر از عناصر بسیار پرکاربرد HTML می‌رویم:

لیست‌ها

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