رسانه در HTML
نقشه تصویر ناحیههای یک عکس را قابلکلیک کرد. رسانه در وب گستردهتر است: تصویر ثابت، صدا، تصویر متحرک، و گاهی صفحه یا پخشکنندهٔ تودرتو. HTML تگهای هدفمند میدهد تا مرورگر آن منابع را با کنترل و قلاب دسترسپذیری نشان دهد یا پخش کند. این جلسه نقشهٔ شماست قبل از اینکه Video، Audio، YouTube و Plug-ins عمیق شوند.
«رسانه» اینجا یعنی چه؟
در زبان روزمرهٔ دوره، رسانه یعنی محتوایی که فقط پاراگراف و عنوان نیست — عکس، آیکون، کلیپ صوتی، دمو، و embed. عنصر درست کمک میکند مرورگر UI پخش بومی نشان دهد، نوع منبع درست را بگیرد، و به فناوری کمکی نقش روشنتری بدهد تا یک <div> مرموز پر از اسکریپت.
پاسخ مستقیم
- تصاویر →
img(و گاهیpictureبرای چند فایل) - صدا →
audio - فیلم و کلیپ →
video - مرور تودرتو (نقشه، پخشکنندهٔ سایت دیگر) → اغلب
iframe
برای هر کار عنصر همخوان را ترجیح دهید. روی audio و video به کاربرانcontrolsبدهید مگر پخشکنندهٔ سفارشی قوی و دسترسپذیر داشته باشید. وقتی رسانه معنی مهمی حمل میکند، جایگزین متنی، زیرنویس یا رونوشت برنامهریزی کنید.
بلوکهای ساخت در یک نگاه
📊 بلوکهای ساخت رسانه
| عنصر | کاربرد معمول |
|---|---|
| img / picture | عکس، نمودار، آیکون |
| audio | موسیقی، صدا، افکت |
| video | کلیپ و دموی ضبطشده |
| iframe | جاسازی صفحهٔ HTML دیگر یا پخشکنندهٔ میزبانیشده |
یک نمونهٔ خیلی کوچک
img را از قبل میشناسید. اینجا audio و video کنار آن در اولین صفحهٔ تمرین مینشینند — مسیرها نمونهاند؛ وقتی در خانه تمرین میکنید فایل واقعی خودتان را بگذارید.
نمونهٔ کوچک رسانه
html<img src="images/note.png" alt="Music note icon">
<audio controls src="media/hello.mp3"></audio>
<video controls width="320" src="media/demo.mp4"></video>خواندن نمونه
imgهمچنان بهsrcوaltمعنیدار نیاز داردaudioوvideoازsrcاستفاده میکنند (یا در جلسات بعد فرزندانsource) و ازcontrolsسود میبرندwidthرویvideoمیتواند هنگام بار فایل فضا رزرو کند- فایل خالی یا مسیر غلط مثل بقیهٔ داراییها شکست میخورد — زود پوشهها را چک کنید
controls عادت مبتدی است
ویژگی controls از مرورگر میخواهد UI پخش، مکث و مرتبط را نشان دهد. پخش خودکار صدا بدون اقدام واضح کاربر اغلب مسدود و معمولاً آزاردهنده است. با کنترلهای قابلدید شروع کنید. پخشکنندهٔ سفارشی بعداً اگر پروژه واقعاً لازم داشت میآید.
audio و video با controls
html<audio controls src="media/lesson-intro.mp3"></audio>
<video controls width="480" src="media/walkthrough.mp4"></video>انتخاب ابزار درست
- پادکست یا یادداشت صوتی →
audio - ضبط صفحه یا کلیپ →
video - عکس یا نمودار →
img/picture - ویجت نقشه یا صفحهٔ پخشکنندهٔ شخص ثالث → اغلب
iframe(با آگاهی از کارایی و امنیت)
ویدئو را در تگ تصویر نچپانید، یا کل اپ بیرونی را در اسکریپت مرموز، وقتی عنصر بومی وجود دارد.
دسترسپذیری و معنی
اگر رسانه چیزی یاد میدهد، برنامهریزی کنید کسی که نمیشنود یا نمیبیند هنوز ایده را بگیرد: alt برای تصاویر اطلاعرسان، زیرنویس برای ویدئوی گفتاری، رونوشت برای صوت بلند. حرکت تزئینی بدون اطلاعات نباید فوکوس را گیر بیندازد یا بلند خودکار پخش شود. جلسات تخصصی بعد عمیقتر میشوند؛ الان عادت را قفل کنید.
هزینهٔ iframe (پیشنمایش)
iframe یک بستر مرور دیگر را جاسازی میکند. برای نقشه و پخشکنندهٔ میزبانیشده قدرتمند است، و همچنین اسکریپت، کوکی و وزن چیدمان آن صفحه را به صفحهٔ شما میآورد. وقتی تودرتویی هدف واقعی است به کار ببرید — نه بهعنوان پیشفرض برای هر فایل رسانهای که خودتان میزبانی میکنید. برای فایل خودتان audio / video / img بومی سادهتر میماند.
جلسات بعدی چگونه جور میشوند
بعد از این نقشه: Video و Audio ویژگیها، چند منبع، و عادت فایل عملی را یاد میدهند. Plug-ins و YouTube الگوهای قدیمیتر یا میزبانیشده را پوشش میدهند. Iframe جاسازی را عمیقتر میکند. این صفحه را فهرست راهنما بدانید؛ آن صفحات را کارگاه.
تمرین در ویرایشگر
- از جدول بگویید برای فایل پادکست کدام عنصر را برمیگزینید (
audio). - یک
imgباaltواضح به صفحهٔ تمرین اضافه کنید (از قبل میدانید). - اگر mp3 یا mp4 کوچک دارید،
audioیاvideoباcontrolsبگذارید. - یک خط در یادداشت بنویسید: «زیرنویس/رونوشت برای محتوای گفتاری.»
- عنوان جلسات رسانهٔ بعدی را مرور کنید تا نقشه آشنا شود.
اشتباهات رایج
- پخش خودکار صدا بدون controls یا اشارهٔ واضح کاربر
- جاسازی ویدئوی خیلی بزرگ بدون فکر اندازه و بدون برنامهٔ متن جایگزین
- استفاده از
iframeبرای هر فایل وقتیaudio/video/imgبومی کافی است - فراموش هزینهٔ امنیت و کارایی که iframe از صفحهٔ دیگر میآورد
- رفتار با این نمای کلی مثل «برای همیشه کافی» و رد شدن از جلسات تخصصی وقتی واقعاً رسانه منتشر میکنید
خلاصه
- رسانهٔ HTML تصاویر، صدا، ویدئو و embed را پوشش میدهد
- برای هر کار عنصر همخوان را ترجیح دهید
- به کاربران کنترل بدهید و وقتی رسانه معنی دارد جایگزین برنامهریزی کنید
- برای فایل خودتان تگ بومی؛ iframe وقتی واقعاً صفحه یا پخشکنندهٔ میزبانیشده را تودرتو میکنید
- جلسات بعد هر نوع را تخصصی میکنند — این صفحه نقشه است
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود