ویدئو، صوت و آی فریم در HTML

( یکشنبه ، 6 خرداد سال 1403 )

حق کپی ویدئو

مجاز نمی باشد.

شما اینجا هستید :

جلسه نهم

آموزگار :

امیررضا اکبری

ویدئو و صوت یک جز جدا نشدنی در هر سایتی است، به همین دلیل یادگیری این مبحث بسیار مهم است. جالب است بدانید قبل از اینکه html5 ارائه شود، افراد برای این کار از پلاگین‌ها استفاده می‌کردند، اما اکنون با ارائه html5 تگ‌هایی معرفی شده است که می‌توان به راحتی از آن‌ها برای قرار دادن صوت و ویدئو استفاده کرد. ( ادامه مطلب … )

فصل اول ، آشنایی کامل با html

در فصل اول از آموزش HTML چه می آموزید؟

در این فصل با زبان نشانه گذاری html به صورت کامل آشنا می شوید. این آموزش از پایه و با بیانی بسیار ساده و روان تهیه شده است. در واقع با این آموزش به صورت مفهومی و بسیار کامل زبان اچ تی ام ال را یاد می گیرید. یادگیری زبان html و css برای هر کسی که می خواهد در دنیای وب فعالیت کند بسیار ضروری است.

مجموعه ابزار وردپرس از بین چندین مدرس موفق دوره های html و css ، خانم محرابی را به عنوان برترین مدرس برگزیده است چراکه ایشان بصورتی کاملاً شیوا ، ساده و البته بصورت حرفه ای ارائه آموزش می کنند. دیدن این آموزش ها را به همه شما دوستان گرامی پیشنهاد می کنیم.

فصل دوم ، شروع یادگیری و آشنایی با css

در فصل دوم چه چیزی آموزش داده شده است؟

بعد از یادگیری html در فصل اول ، نوبت به یادگیری زبان جذاب css هست. این فصل نیز با بیانی روان و کاملا ساده ارائه شده است که می توانید با یادگیری آن توانایی خودتان را در حوزه ی وب بالا ببرید. یادگیری html به تنهایی کاربردی نخواهد بود و باید در ادامه به یادگیری css هم بپردازید.

در واقع فصل دوم تکمیل کننده‌ی آموزش html است که در فصل اول آموزش داده شد. در کل یادگیری html به تنهایی کفایت نمی کند و عملاً خیلی مورد استفاده هم قرار نمی گیرد. این یک پیش نیازی بود که بتوانیم آموزش CSS را شروع کنیم. این توضیحات به معنی کم اهمیت بودن آموزش HTML نیست و باید حتماً این آموزش را نیز مشاهده نمایید.

پروژه و تمرین HTML
در ابتدا فرض کنید می‌خواهیم یک جدول که دارای 7 ردیف و 5 تا ستون است ایجاد…
رنگ ها در CSS
در بسیاری از مواقع ما در بخش‌های مختلفی از سایت مانند رنگ پس زمینه، حاشیه، متون و…
لینک ها در CSS
اولین کاری که می‌توانیم انجام دهیم این است که خطی که به صورت پیش فرض زیر لینک‌هاایجاد…
فونت ها در سی اس اس
یکی دیگر از مواردی که در طراحی یک سایت مورد توجه قرار می‌گیرد، مباحث مربوط به فونت‌ها…
فصل سوم ، ادامه آموزش Css با سطح پیشرفته تر

در فصل سوم از آموزش HTML و CSS چه می آموزید؟

فصل سوم ادامه آموزش Css است که در فصل قبلی آن را شروع کردیم. بر خلاف html که خیلی سریع آن را جمع بندی کردیم، برای CSS زمان بیشتری لازم داریم تا بتوانیم در ابتدا مهم ترین مسائل آن، مانند حاشیه ها، مارجین و پدینگ و … را آموزش دهیم.

در فصل های آینده نکات حرفه ای تری نیز از آموزش css و html باقی مانده است که در خدمت شما هستیم.

حاشیه ها در CSS
Borders به معنای حاشیه‌ها است. در این جلسه یاد می‌گیریم که چگونه برای عناصر خود حاشیه و…
outline در CSS
در ابتدا باید با تعریف outline آشنا شویم. به خطی که دور تا دور یک عنصر کشیده…

علـــی لــطفی

مدرس دوره های برنامه نویسی فرانت اند و فعال در حوزه کسب و کار های اینترنتی

علـــی لــطفی

مدرس دوره های برنامه نویسی فرانت اند و فعال در حوزه کسب و کار های اینترنتی

ویدئو، صوت و آی فریم در HTML

( یکشنبه ، 6 خرداد سال 1403 )

قبل از اینکه تگ‌ها را معرفی کنیم، باید این نکته را به شما یادآوری کنیم و آن اینکه سعی کنید یک پوشه جدید ایجاد کنید و اسمی برای آن انتخاب کنید؛ مثلا audios و صوت‌های مد نظرتان را درون آن قرار دهید. سپس آن را درون پوشه اصلی‌تان که مربوط به پروژه‌تان است انتقال دهید. این کار را برای ویدئو‌هایتان هم انجام دهید.

تگ صوت (audio) در HTML

تگ <audio> که یک تگ زوج است و برای قرار دادن صوت به کار می‌رود. ما هم می‌خواهیم یک فایل صوتی را درون سایتمان قرار دهیم. حال مساله ای که پیش می‌آید این است فرمت صوتمان باید چه چیزی باشد؟ فرمت‌هایی که در html5 مجاز هستند عبارتند از mp3 ، wav و ogg پس ما می‌توانیم صوت خود را با این سه فرمت استفاده کنیم. در واقع یک تگ به نام <source> وجود دارد که می‌توانیم آن را درون تگ <audio> قرار دهیم. یکی از اتربیوت‌هایی که درون این تگ قرار می‌گیرد تگ src است که برای آدرس دهی از آن استفاده می‌کنیم. قبلا از این اتربیوت برای تصاویر استفاده کرده‌ایم. آدرس دهی فایل صوتی مان را هم مانند آدرس دهی تصاویر به صورت آدرس دهی نسبی می‌نویسیم. یعنی موقعیت فایل درون پوشه مان را نسبت به سند html مان می‌نویسیم به صورت زیر :

Src=”audios/نام فایل”

بهتر است از اتربیوت type هم برای تگ source استفاده کنیم و مقدار audio/format را برای آن بنویسیم.

مهم ترین اتربیوتی که برای تگ audio باید بنویسیم، اتربیوت جذاب conttols است. خب حالا می‌توانیم تمام نکات را به صورت زیر درآوریم:

<audio>

<source src=”audios/نام فایل” type=”audio/mp3”>

<source src=”audios/نام فایل” type=”audio/wav”>

<source src=”audios/نام فایل” type=”audio/ogg”>

مرورگر شما این فایل را پشتیبانی نمی‌کند.

</audio>

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

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

تگ ویدئو (video) در HTML

برای قرار دادن ویدئو باید شبیه به بالا عمل کنیم. با این تفاوت که از تگ <video> استفاده می‌کنیم. در واقع تگ source برای ویدئو به همان صورت صوت به کار می‌رود. پس به شکل زیر عمل می‌کنیم.

<video>

<source src=”videos/نام فایل” type=”video/mp4”>

<source src=”videos/نام فایل” type=”video/webm”>

<source src=”videos/نام فایل” type=”video/ogg”>

مرورگر شما این فایل را پشتیبانی نمی‌کند.

</video>

فرمت‌های مجاز html5 برای ویدئو mp4 ، webm و ogg هستند. برای زیبا تر نمایش دادن ویدئو یمان می‌توانیم از اتربیوت‌های width و height استفاده کنیم.

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

تگ آیفریم (iframe)

در پایان به سراغ معرفی تگ برای ایجاد آیفریم می‌رویم. به زبان ساده آیفریم یک کادر برای ما ایجاد می‌کند که می‌توانیم درون کادر صفحه ای از سایت خودمان و یا از یک سایت دیگری را نشان دهیم. به عنوان مثال فرض کنید ما می‌خواهیم درون صفحه ی اصلی سایتمان از یک آیفریم استفاده کنیم که صفحه اصلی سایت ابزاروردپرس را نشان دهد. پس به صورت زیر عمل می‌کنیم:

<iframe src=”https://www.abzarwp.com/”></iframe>

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

4 دیدگاه. Leave new

فهرست