برای یادگیری زبان HTML لازم است که ابتدا با برخی مباحث و مقدمات آشنا شویم و به…
ویدئو، صوت و آی فریم در HTML
ویدئو، صوت و آی فریم در HTML
( جمعه ، 7 اردیبهشت سال 1403 )
ویدئو و صوت یک جز جدا نشدنی در هر سایتی است، به همین دلیل یادگیری این مبحث بسیار مهم است. جالب است بدانید قبل از اینکه html5 ارائه شود، افراد برای این کار از پلاگین‌ها استفاده می‌کردند، اما اکنون با ارائه html5 تگ‌هایی معرفی شده است که می‌توان به راحتی از آن‌ها برای قرار دادن صوت و ویدئو استفاده کرد. ( ادامه مطلب … )
فصل اول ، آشنایی کامل با html
در فصل اول از آموزش HTML چه می آموزید؟
در این فصل با زبان نشانه گذاری html به صورت کامل آشنا می شوید. این آموزش از پایه و با بیانی بسیار ساده و روان تهیه شده است. در واقع با این آموزش به صورت مفهومی و بسیار کامل زبان اچ تی ام ال را یاد می گیرید. یادگیری زبان html و css برای هر کسی که می خواهد در دنیای وب فعالیت کند بسیار ضروری است.
مجموعه ابزار وردپرس از بین چندین مدرس موفق دوره های html و css ، خانم محرابی را به عنوان برترین مدرس برگزیده است چراکه ایشان بصورتی کاملاً شیوا ، ساده و البته بصورت حرفه ای ارائه آموزش می کنند. دیدن این آموزش ها را به همه شما دوستان گرامی پیشنهاد می کنیم.
اکنون وقت آن شده است که شروع به نوشتن دستورات و تگ های HTML کنیم. برای این…
اتربیوت (Attribute) به معنای صفت است. یعنی صفت و ویژگی‌هایی را برای تگ ها ایجاد می‌کند. به…
لینک‌ها یکی از مهم ترین قسمت‌های هر سایتی محسوب می‌شوند. لینک‌ها مانند پل عمل می‌کنند و ما…
زمانی که در لیست بندی و نوشتن اسامی، ترتیب برایمان مهم باشد از لیست‌های ترتیبی یا Ordered…
تا کنون با تگ‌های متفاوتی آشنا شده‌اید. اکنون می‌خواهیم شما را با مفهوم بلاک و اینلاین در…
ایجاد جدول درسایت‌ها یکی از مباحث مهمی‌است که باید آن را یاد بگیریم. اما قبل از ایجاد…
اصلی ترین تگی که باید استفاده کنیم تگ <form></form> است. اما این تگ به تنهایی کافی نیست…
فصل دوم ، شروع یادگیری و آشنایی با css
در فصل دوم چه چیزی آموزش داده شده است؟
بعد از یادگیری html در فصل اول ، نوبت به یادگیری زبان جذاب css هست. این فصل نیز با بیانی روان و کاملا ساده ارائه شده است که می توانید با یادگیری آن توانایی خودتان را در حوزه ی وب بالا ببرید. یادگیری html به تنهایی کاربردی نخواهد بود و باید در ادامه به یادگیری css هم بپردازید.
در واقع فصل دوم تکمیل کننده‌ی آموزش html است که در فصل اول آموزش داده شد. در کل یادگیری html به تنهایی کفایت نمی کند و عملاً خیلی مورد استفاده هم قرار نمی گیرد. این یک پیش نیازی بود که بتوانیم آموزش CSS را شروع کنیم. این توضیحات به معنی کم اهمیت بودن آموزش HTML نیست و باید حتماً این آموزش را نیز مشاهده نمایید.
در ابتدا فرض کنید می‌خواهیم یک جدول که دارای 7 ردیف و 5 تا ستون است ایجاد…
به طور کلی تاکنون با زبان نشانه گذاری html آشنا شدید. اکنون با آموزش css در خدمت…
در جلسه ی قبل ساختار کلی سی اس اس را معرفی کردیم. اکنون می‌خواهیم بدانیم که سلکتور…
یکی از ویژگی‌هایی که به سایت‌ها زیبایی می‌بخشد، طراحی زیبا و منحصربه‌فرد پس زمینه سایت می‌باشد. ما…
در بسیاری از مواقع ما در بخش‌های مختلفی از سایت مانند رنگ پس زمینه، حاشیه، متون و…
اولین کاری که می‌توانیم انجام دهیم این است که خطی که به صورت پیش فرض زیر لینک‌هاایجاد…
یکی دیگر از مواردی که در طراحی یک سایت مورد توجه قرار می‌گیرد، مباحث مربوط به فونت‌ها…
فصل سوم ، ادامه آموزش Css با سطح پیشرفته تر
در فصل سوم از آموزش HTML و CSS چه می آموزید؟
فصل سوم ادامه آموزش Css است که در فصل قبلی آن را شروع کردیم. بر خلاف html که خیلی سریع آن را جمع بندی کردیم، برای CSS زمان بیشتری لازم داریم تا بتوانیم در ابتدا مهم ترین مسائل آن، مانند حاشیه ها، مارجین و پدینگ و … را آموزش دهیم.
در فصل های آینده نکات حرفه ای تری نیز از آموزش css و html باقی مانده است که در خدمت شما هستیم.
Borders به معنای حاشیه‌ها است. در این جلسه یاد می‌گیریم که چگونه برای عناصر خود حاشیه و…
مفهوم margin چیست؟ به زبان ساده مارجین فاصله بین یک عنصر با اطرافش است. در واقع margin…
در این جلسه می‌خواهیم با مفهوم padding آشنا شویم و نکاتی را در این باره بیاموزیم. ویژگی…
در ابتدا باید با تعریف outline آشنا شویم. به خطی که دور تا دور یک عنصر کشیده…
ویدئو، صوت و آی فریم در HTML
( جمعه ، 7 اردیبهشت سال 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>
برای نوشتن دیدگاه باید وارد بشوید.