آموزش html5 (بخش سوم)
این تگ حاوی حاشیه نویسی ruby است. حاشیه نویسی روبی برای نمایش تلفظ کاراکترها و نشان دادن اشعار شخصیت های شرق آسیا مانند چینی ها و ژاپنی ها استفاده می شود
تگ ruby با تگ rt برای ایجاد حاشیه نویسی یا راهنمای تلفظ برای کلمات و عبارات استفاده می شود. متن پایه باید در برچسب ruby قرار گیرد حاشیه نویسی، محصور در برچسب rt، به عنوان متن کوچکتر بالای متن پایه ظاهر می شود.
<ruby>
漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>漢 字
تگ 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>
تگ figcaption
این تگ یک عنوان یا caption برای عنصر figure تعریف می کند.
<figure>
<img src="discovery.jpg" alt="Space Shuttle">
<figcaption>NASA - Space Shuttle Discovery</figcaption>
</figure>
0 کامنت