HTML5 مقدماتی

آموزش HTML5 – تگ های جدید در HTML5

آموزش HTML5
آموزش HTML5

آموزش HTML5 – تگ های جدید در HTML5

تمام محتوای اینترنت از سال های ۹۸-۹۹ تا به امروز بارها تغییر کرده و شاهد پیشرفت چشمگیری بوده اند. همزمان با این پیشرفت زبان های HTML , CSS از این پیشرفت جدا نبوده اند و روز به روز و پا به پای تکنولوژی پیشرفت کرده اند.   دراین مطلب آموزشی قصد داریم تا تگ های جدیدی که در HTML5 به وجود آمده اند و در نسخه های دیگر HTML وجود نداشته اند خدمت شما معرفی کنیم.

تگ <canvas>

از این تگ برای رسم اشیا گرافیکی استفاده می شود. لازم به ذکر است که این تگ فقط نگهدارند ی گرافیک می باشد و برای رسم گرافیکی باید از جاوااسکریپ استفاده کنید.

تیکه کد زیر نمونه ای از نحوه استفاده از تگ <canvas> است.

 نکته: تگ <canvas> در مرورگرهای فایرفاکس ، اپرا، کروم، سافاری و اینترنت اکسپلورر ۹ به بالا پشتیبانی میشود.

تگ <audio>

از این تگ برای معرفی و پخش صدا و موسیقی در صفحه استفاده می شود.لازم به ذکر است که این تگ فرمت های MP3 ،Wav و Ogg پشتیبانی می کند.

تیکه کد زیر نمونه ای از نحوه استفاده از تگ <audio> است.

 نکته: تگ <audio> در مرورگرهای فایرفاکس ، اپرا، کروم، سافاری و اینترنت اکسپلورر ۹ به بالا پشتیبانی میشود.

تگ <embed>

از این تگ برای تعریف جایگاهی برای موارد خارجی استفاده می شود مانند پلاگین ها. برای مثال با تیکه کد زیر یک جاشگاه برای یک فایل فلش ایجاد کردیم.

 نکته: تگ <embed> در تمام  مرورگرها پشتیبانی می شود.

تگ <source>

از این تگ برای تعریف  منبع (Source) فایل های صوتی و تصویری استفاده می شود. در تیکه کد زیر برای فایل های صوتی با استفاده از تگ source منبع فایل ها را مشخص کردیم.

 نکته: تگ <source> در مرورگرهای فایرفاکس ، اپرا، کروم، سافاری و اینترنت اکسپلورر ۹ به بالا پشتیبانی میشود.

تگ <track>

از این تگ برای  تعیین زیر نویس ها، فایل های زیرنویس و یا فایل های دیگر شامل متن در آهنگ و ویدئو استفاده میشود. در کل هر آهنگ و ویدئویی که دارای متن باشد با استفاده از این تگ متن مورد نظر انتخاب و به نمایش در می آید. در تیکه کد پایین ما برای ویدئوی خود دو عدد متن تعریف کرده ایم.

 نکته: تگ <track> فقط در مرورگرهای  ، اپرا، کروم و اینترنت اکسپلورر ۱۰ پشتیبانی میشود.

تگ <video>

از این تگ برای معرفی و نمایش فایل های تصویری استفاده میشود.لازم به ذکر است که این تگ از پسوند های MP4 ،WebM و Ogg پشتیبانی می کند اما مرورگرها هرکدام از برخی از این پسوندها پشتیبانی نمی کنند.

اینترنت اکسپلورر : از WebM پشتیبانی نمی کند.

سافاری: از WebMو Ogg پشتیبانی نمی کند.

اپرا: از MP4 پشتیبانی نمی کند.

تیکه کد زیر نمونه ای برای نمایش فیلم در صفحه می باشد.

 نکته: تگ <video> در مرورگرهای فایرفاکس ، اپرا، کروم، سافاری و اینترنت اکسپلورر ۹ به بالا پشتیبانی میشود.

 تگ <datalist>

از این تگ برای معرفی داده ها برای یک لیست انتخاب شوند استفاده می شود. این تگ مانند Combo box به نمایش در می آیند. تیکه کد زیر نحوه استفاده از این تگ می باشد.

نکته: تگ <datalist> در مرورگرهای فایرفاکس ، اپرا، کروم و اینترنت اکسپلورر ۱۰ پشتیبانی میشود.

 تگ <keygen>

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

نکته: تگ <keygen> در مرورگرهای فایرفاکس ، اپرا، کروم و سافاری پشتیبانی میشود. 

تگ <output>

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

نکته: تگ <output> در مرورگرهای فایرفاکس ، اپرا، کروم و سافاری پشتیبانی میشود. 

 تگ <article>

از این تگ برای تعریف مقاله در صفحه استفاده می شود بدین منظور که وقتی  از این تگ استفاده می کنید می خواهید بفهمانید که این قسمت یک مقاله می باشد. لازم به ذکر است که این تگ برای موتور های جستجو اهمیت بالایی دارد پس سعی کنید اگر می خواهید مطلبی را در داخل سایت بگذارید از این تگ استفاده کنید.

تیکه کد زیر نحوه استفاده از این تگ می باشد.

 نکته: تگ <article> در مرورگرهای فایرفاکس ، اپرا، کروم، سافاری و اینترنت اکسپلورر ۹ به بالا پشتیبانی میشود.

 تگ <aside>

از این تگ برای معرفی محتوایی جدا از محتوای صفحه استفاده می شود. تیکه کد زیر نحوه استفاده از این تگ می باشد.

 نکته: تگ <aside> در مرورگرهای فایرفاکس ، اپرا، کروم، سافاری و اینترنت اکسپلورر ۹ به بالا پشتیبانی میشود.

 تگ <bdi>

از تگ <bdi> زمانی استفاده می شود که در بین متن های مورد نیاز متن هایی با دیگر فرمت ها و زبان ها وجود داشته باشد. زمانی که از این تگ استفاده می کنید دیگر فرمت نمایش متن ها تغییر نمی کند. این اتفاق بیشتر زمانی پدیدار می شود که شما در صفحه خود متن از زبان های دیگر داشته باشید.

تیکه کد زیر نحوه استفاده از این تگ می باشد.

 نکته: تگ <bdi> در مرورگرهای فایرفاکس وکرومپشتیبانی میشود.

 تگ <details>

از این تگ برای نمایش جزئیات متن استفاده  می شود. هنگام استفاده از این تگ می توانید مشخص کنید که این جزئیات نمایش داده شوند یا خیر.

تیکه کد زیر نحوه استفاده از این تگ می باشد.

نکته: تگ <details> در مرورگرهای  اپرا، کروم، سافاری پشتیبانی میشود.

 تگ <dialog>

از این تگ برای معرفی جعبه های محاوره ای و پنجره استفاده می شود. تکه کد زیر نحوه استفاده از تگ می باشد.

نکته: تگ <dialog> در مرورگرهای  کروم، سافاری پشتیبانی میشود.  لازم به ذکر است که برای فعال شدن این تگ در کروم باید عبارت  chrome://flags در آدرس بار کروم وارد کرد و سپس گزینه “Enable experimental Web Platform features” را فعال کرد.

 تگ <figure>

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

نکته: تگ <figure> در مرورگرهای فایرفاکس ، اپرا، کروم، سافاری و اینترنت اکسپلورر ۹ به بالا پشتیبانی میشود.

<figcaption>

از این تگ برای  درج گواهى مندرج در روى سند برای تگ <figure> استفاده می شود.

تیکه کد زیر نحو استفاده از این تگ می باشد.

نکته: تگ <figcaption> در مرورگرهای فایرفاکس ، اپرا، کروم، سافاری و اینترنت اکسپلورر ۹ به بالا پشتیبانی میشود.

 تگ <footer>

از این تگ برا ی معرفی footer برای صفحه و یا یک قسمت استفاده می شود. تیکه کد زیر نحوه استفاده از این تگ می باشد.

نکته: تگ <footer> در مرورگرهای فایرفاکس ، اپرا، کروم، سافاری و اینترنت اکسپلورر ۹ پشتیبانی میشود.

 تگ <header>

از این تگ برای معرفی header صفحه و یا یک قسکت استفاده می شود. تیکه کد زیر نحوه استفاده از تگ می باشد.

نکته: تگ <header> در مرورگرهای فایرفاکس ، اپرا، کروم، سافاری و اینترنت اکسپلورر ۹ پشتیبانی میشود.

 تگ <main>

از این تگ برای معرفی قسمت اصلی صفحه استفاده می شود. لازم به ذکر است که تگ main باید تک باشد و نمی توان چند بار از آن در صفحه استفاده کرد.

نکته: در تگ main نمی توانید از عناصری که قرار است در صفحه ها تکرار شوند استفاده کرد همچنین تگ main در داخل دیگر تگ ها نباید قرار بگیرد تگ هایی مانند nav ، aside و غیره. تیکه کد زیر نحوه استفاده از این تگ می باشد.

نکته: تگ <main> در مرورگرهای فایرفاکس ، اپرا، کروم، سافاری  پشتیبانی میشود.

 تگ <mark>

از این تگ برای معرفی کردن متن های مشخص و نشانه گذاری شده استفاده می شود. تیکه کد زیر نحوه استفاده از این تگ می باشد.

نکته: تگ <mark> در مرورگرهای فایرفاکس ، اپرا، کروم، سافاری و اینترنت اکسپلورر ۹ پشتیبانی میشود.

 تگ <menuitem> 

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

نکته: تگ <menuitem> فقط در مرورگرفایرفاکس پشتیبانی میشود.

 تگ <meter>

از این تگ برای نمایش اندازه و سنجش یک مقدار که این مقدار از قبل تعیین شده استفاده می شود. برای مثال از این تگ می توانید برای نمایش فضای مصرفی هارد دیسک استفاده کنید. تیکه کد زیر نحوه نمایش این تگ می باشد.

نکته: تگ <meter> در مرورگرهای فایرفاکس ، اپرا، کروم و سافاری  پشتیبانی میشود.

 تگ <nav>

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

نکته: تگ <nav> در مرورگرهای فایرفاکس ، اپرا، کروم، سافاری و اینترنت اکسپلورر ۹ پشتیبانی میشود.

 تگ <progress>

از این تگ برای معرفی نمایش پیشرفت کار استفاده می شود. برای مثال از این کد می توانید برای نمایش مقدار دانلود صورت گرفته را نمایش دهید. تیکه کد زیر نحوه استفاده از این تگ می باشد.

نکته: تگ <progress> در مرورگرهای فایرفاکس ، اپرا، کروم، سافاری و اینترنت اکسپلورر  ۱۰ پشتیبانی میشود.

 تگ <ruby>

این تگ برای نمایش تفسیر فن بیان استفاده می شود. از این تگ بیشتر برای زبان های آسیای شرقی استفاده می شود تا کاربر نحوه  درست تلفظ حروف و کلمات را فراگیرد. تیکه کد زیر نحوه استفاده از این تگ می باشد.

نکته: تگ <ruby> در مرورگرهای فایرفاکس ، اپرا، کروم، سافاری و اینترنت اکسپلورر ۹ پشتیبانی میشود.

تگ <rt>

این تگ در تگ ruby استفاده میشود و برای مشخص کردن توضیحات تلفظ به کار برده می شود.تیکه کد زیر نحوه استفاده از تگ می باشد.

نکته: تگ <rt> در مرورگرهای فایرفاکس ، اپرا، کروم، سافاری و اینترنت اکسپلورر ۹ پشتیبانی میشود.

تگ <rp>

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

نکته: تگ <rp> در مرورگرهای فایرفاکس ، اپرا، کروم، سافاری و اینترنت اکسپلورر ۹ پشتیبانی میشود.

 تگ <section>

از این تگ برای تعریف یک قسمت در صفحه استفاده می شود. تگ section  می تواند در خود دارای تگ های دیگر مانند chapter, header, footer و … باشد. تیکه کد زیر نحوه استفاده از این تگ می باشد.

نکته: تگ <section> در مرورگرهای فایرفاکس ، اپرا، کروم، سافاری و اینترنت اکسپلورر ۹ پشتیبانی میشود.

 تگ <summary>

از این تگ برای معرفی سر تیتر تگ details استفاده می شود. تیکه کد زیر نحوه استفاده از این تگ می باشد.

نکته: تگ <summary> در مرورگرهای کروم، سافاری  پشتیبانی میشود.

 تگ <time>

از این تگ برای معرفی زمان و تاریخ استفاده می شود. تیکه کد زیر نحوه استفاده از این تگ می باشد.

نکته: تگ <time> در تمام مرورگرها پشتیبانی میشود.

تگ <wbr>

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

نکته: تگ <wbr> در مرورگرهای فایرفاکس ، اپرا، کروم، سافاری میشود.


پیروز باشید!
طراح باشی

درباره نویسنده

طراح‌باشی

نوشتن دیدگاه

برای نوشتن دیدگاه کلیک کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پربازدیدها