آموزش html5 (بخش سوم)

تگ ruby

این تگ حاوی حاشیه نویسی ruby ​​است. حاشیه نویسی روبی برای نمایش تلفظ کاراکترها و نشان دادن اشعار شخصیت های شرق آسیا مانند چینی ها و ژاپنی ها استفاده می شود

تگ ruby با تگ rt برای ایجاد حاشیه نویسی یا راهنمای تلفظ برای کلمات و عبارات استفاده می شود. متن پایه باید در برچسب ruby قرار گیرد حاشیه نویسی، محصور در برچسب rt، به عنوان متن کوچکتر بالای متن پایه ظاهر می شود.

<ruby>
   漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
   字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

(Kan)(ji)

تگ wbr

این تگ (Word Break Opportunity) یک موقعیت را درون متن مشخص می کند که در آن مرورگر ممکن است به صورت اختیاری یک خط را شکست دهد. هنگامی که یک کلمه بیش از حد طولانی باشد یا شما می ترسید که مرورگر ادامه آن کلمه را در خط بعد نمایش دهد می توانید از تگ استفاده کنید.

<p>The XML<wbr>Http<wbr>Request object is the key to AJAX.</p>

تگ audio

از این تگ برای جاسازی محتوای صوتی در یک سند HTML بدون نیاز به هیچ پلاگین اضافی مانند فلش پلیر استفاده می شود.

<audio controls="controls">
   <source src="birds.mp3" type="audio/mpeg">
   <source src="birds.ogg" type="audio/ogg">
   Your browser does not support the HTML5 Audio element.
</audio>

خصوصیت های تگ audio :

خصوصیت مقدار توضیحات
controls controls مشخص می کند که کنترل های صوتی نمایش داده شوند. (مانند دکمه play ،pause و غیره)
autoplay autoplay مشخص می کند که فایل صوتی مورد نظر به محض آماده شدن اجرا شود.
muted muted مشخص می کند که خروجی صدا خاموش باشد.
loop loop مشخص می کند که فایل صوتی هر بار پس از اتمام، دوباره اجرا شود.
preload auto – metadata – none مشخص می کند که فایل صوتی در صورت نیاز چگونه بارگذاری شود.
src URL URL مربوط به فایل صوتی را مشخص می کند.

تگ video

این تگ برای جاسازی محتوای ویدئویی در یک سند HTML بدون نیاز به هیچ پلاگین دیگری مانند فلش پلیر استفاده می شود. پشتیبانی از تگ video در مرورگرهای مختلف متفاوت است. در حال حاضر، سه فرمت ویدیویی اصلی وجود دارد که برای عنصر ویدیو پشتیبانی می شود: MP4، Ogg و WebM

<video controls="controls">
   <source src="shuttle.mp4" type="video/mp4">
   <source src="shuttle.ogv" type="video/ogg">
   Your browser does not support the HTML5 Video element.
</video>

خصوصیت های تگ video :

خصوصیت مقدار توضیحات
width pixels پهنای پخش کننده ویدئو را تنظیم می کند.
height pixels ارتفاع پخش کننده ویدئو را تنظیم می کند.
controls controls برای افزودن کنترل های play ،pause و صدا بکار برده می شود.
autoplay autoplay در صورتی که وجود داشته باشد ویدئو به محض اینکه آماده شود خود به خود پخش می شود.
loop loop در صورت وجود پس از اتمام نمایش ویدئو پخش آن دوباره شروع می شود.
muted muted مشخص کننده قطع صدا به طور پیش فرض برای ویدئو است.
poster URL مشخص کننده تصویری است که به عنوان پیش نمایش ویدئو از آن استفاده می کند. مقدار آن یک url یا آدرس اینترنتی است.
preload auto – metadata – none در صورت وجود ویدئو در زمان لود صفحه، لود شده و آماده اجرا می شود. اگر autoplay وجود داشته باشد این خاصیت نادیده گرفته می شود.
 
src URL آدرس ویدئویی که باید پخش شود.
نحوه ایجاد طرح بندی و ساخت لایه های وب سایت در فتوشاپ
شاید این مطلب را نیز بپسندید

تگ source

این تگ برای تعیین منابع چند رسانه ای برای عناصر رسانه هایی، مانند video و audio استفاده می شود.

تگ canvas

این تگ یک منطقه را در سند تعریف می کند که می تواند از طریق اسکریپت (معمولا جاوا اسکریپت) برای رسم گرافیک استفاده شود. برای مثال، می توان آن را برای رسم مسیر و شکل، گراف و یا حتی انجام انیمیشن ها استفاده کرد. تگ canvas تنها یک ظرف یا قالبی است که گرافیک ها را در خود جای می دهد، شما باید برای رسم گرافیک ها از اسکریپت ها استفاده کنید.

<canvas id="myCanvas" width="300" height="200"></canvas>
<script type="text/javascript">
   window.onload = function(){
   var canvas = document.getElementById("myCanvas");
   var context = canvas.getContext("2d");
   context.moveTo(50, 150);
   context.lineTo(250, 50);
   context.stroke();
};
</script>

تگ embed

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

<embed src="blur.swf" width="400px" height="200px">

خصوصیت های تگ embed :

خصوصیت مقدار توضیحات
width
pixels
مشخص کننده عرض موجود در تگ embed
height pixels مشخص کننده طول موجود در تگ embed
type media_type مشخص کننده media type موجود در تگ
src URL مشخص کننده آدرس فایل خارجی در تگ embed


تگ figure

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

<figure>
   <img src="designestan.png" alt="Designestan">
   <figcaption>Designestan Website</figcaption>
</figure>
designestan
Designestan Website

تگ figcaption

این تگ یک عنوان یا caption برای عنصر figure تعریف می کند.

<figure>
   <img src="discovery.jpg" alt="Space Shuttle">
   <figcaption>NASA - Space Shuttle Discovery</figcaption>
</figure>