فکر می کنم حدودا سه سال پیش بود که خبری رو خوندم مبنی بر انتشار نسخه ی پیش نویس HTML 5، اون موقع فکرشم نمی کردم که نسخه ی جدید html به این سرعت رشد کنه، به شکلی که در حال حاضر کم کم باید به سمت این نسخه حرکت کرد. جدا از این صحبت ها اگر تا حدودی در مورد نسخه 5 ام html تحقیق کرده باشید حتما می دونید که تغییراتی که در این نسخه اعمال شده تا حد زیادی در راستای مفهومی کردن ساختار کد های html و وب هست. در ادامه جهت آشنایی بیشتر در مورد برخی از تگ های جدید صحبت خواهد شد و انشالله در قسمت بعد یک صفحه ی html ساده را به کمک هم پیاده سازی خواهیم کرد.
در html 5 تگ های جدیدی برای پیاده سازی هر چه راحت تر عناصر صفحه معرفی شد. به طور مثال امروزه بخش های header، footer، sidebar، navigation و ... بخش های معمول یک صفحه را تشکیل می دهند که در نسخه 4 ام html برای پیاده سازی این موارد به صورت گشترده از از تگ div استفاده میشد. همانند تصویر زیر:
همانطور که مشاهده می کنید کلیه قسمت ها با عنصر div پیاده سازی شده اند و برای متمایز کردن آن ها از یکدیگر خصوصیت id و class آن ها مقدار دهی شده است. اما با این حال div عنصری نیست که بتوان به وسیله ی آن ساختار و بخش های صفحه را از نظر نوع با یکدیگر متمایز کرد و فرضا برای یک موتور جستجو تمامی این بخش ها مفهموم یکسانی دارند. اما در html 5 تگ های جدیدی به منظور مفهومی کردن ساختار قست های مختلف در نظر گرفته شده است.
همونطور که در تصویر بالا مشاهده می کنید تگ های جدیدی جایگزین هر یک از نام های id و class قبلی در تگ های div شده است که هر کدام مفهمو و کاربرد هر تگ را مشخص می کنند. کد html صفحه ی بالا می تواند چیزی شبیه به کد زیر باشد:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
تقریبا نقش همه تگ ها از نام آن ها مشخص است، اما به طور مختصر در مورد هر یک توضیحی خواهم داد.
* تگ header:
تگ header تگی است برای نمایش دادن هدرِ یک section یا قسمت می باشد، البته کمی متفاوت تر از سابق. در html 4 تگ های هدر شامل تگ های h1 تا h6 می شدند که معمولا متن مورد نظر خود را به عنوان هدر در آن قرار می دادیم. اما تگ header جدید می تواند شامل تگ های داخلی نیز باشد. در واقع توسط این تگ ما بخشی از یک section را به عنوان هدر معرفی می کنیم و که متن هدر می تواند تنها قسمتی از آن باشد. همانند زیر:
<header>
<h1>A Preview of HTML 5</h1>
<p class="byline">By Iran Pc Network</p>
</header>
<header>
<h1>irpcn</h1>
<h2>Insert tag line here.</h2>
</header>
همانطور که می بینید داخل تگ header، اول از تگ h1 برای معرفی عنوان هدر(heading) استفاده شده است اما تگ p نیز در بخش header ما قرار دارد. در تگ دوم نیز از دو سطح heading (h1 و h2) برای معرفی هدر استفاده شده است.
* تگ section:
همانطور که نام این تگ مشخص است برای نمایش یه قسمت یا بخش استفاده می شود که هر section می تواند برای خود تگ های header، footer و nav و … را داشته باشد. در واقع برای درک بهتر می توانید آن را معادل یک div کلی پیرامون مجموعه ای از تگ ها در نظر بگیرید که این div بخشی از یک صفحه html را ایجاد می کند. نمونه ای از section:
<section>
<h1>HTML 5 - irpcn</h1>
<p>Work on HTML 5, which commenced in 2004, is currently being carried out in a joint effort between the W3C HTML WG and the WHATWG.
...</p>
</section>
* تگ nav:
تگ nav که مخفف navigation است برای قسمت ناوبری سایت استفاده می شود. به طور مثال منو های افقی و عمودی یک سایت که دسترسی به قسمت های داخلی تر را فراهم می کنند جزء navigation به حساب می آیند. البته کاربرد تگ nav صرفا محدود به این قسمت نیست و می توان در قسمت های فوتر، لینک های مرتبط و ... نیز از آن استفاده شود:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
* تگ article:
تگ article نمایش دهنده ی یک قسمت مستقل در یک صفحه ی html می باشد. به طور مثال فرض کنید می خواهیم قسمتی برای کامنت یک سایت در نظر بگیریم، واضح است هر کامنت مستقل از کامنت دیگری می باشد و عملا ربطی به هم ندارند، در چنین حالتی باید از تگ article برای نمایش یک کامنت استفاده کرد. مثلا:
<article id="comment-2">
<header>
<h4>Comment #2 by <a href="http://irpcn.com/">Emad</a></h4>
</header>
<p>test comment!</p>
</article>
همچنین می توان از این تگ برای متمایز ساختن پست های بلاگ، مقالات، پست های انجمن ها و ... استفاده کرد.
* تگ aside:
این تگ بیشتر برای نمایش sidebar در یک صفحه به کار می رود اما به صورت یک تعریف کلی تگ aside نمایانگر بخشی از یک صفحه است که محتوای آن با محتوای مطالب اطراف آن مرتبط است. به مثال زیر توجه کنید:
<aside>
<h1>Archives</h1>
<ul>
<li><a href="/2007/09/">September 2007</a></li>
<li><a href="/2007/08/">August 2007</a></li>
<li><a href="/2007/07/">July 2007</a></li>
</ul>
</aside>
این قسمت بخشی از یک صفحه است که آرشیو ماهیانه مطالب سایت را نمایش می دهد و در sidebar صفحه قرار گرفته است. از موارد دیگر کاربرد این تگ می توان نمایش چندین تگ nav، نمایش آگهی ها و ... که جدای از مطالب اصلی سایت هستند نام برد.
* تگ های audio و video:
مدت زیادی است که برای نمایش صوت و تصویر بر روی وب از فلش استفاده می شود و فلش به عنوان گسترده ترین پلاگین برای نمایش مدیا در مرورگر ها و سیستم عامل های مختلف به کار گرفته می شود. در واقع نسخه فعلی html فاقد هیچ گونه پشتیبانی از مدیا به صورت درونی است اما در html 5 این مورد به صورت کاملا بومی پیاده سازی شده است و دو تگ audio و video به صورت مجزا پخش صدا و تصویر در نظر گرفته شده است.
پشتیانی از مدیا به صورت native توسط خود html امکانات و کنترل های بهتری را برای توسعه دهندگان فراهم می کند. نمونه ای از آن، کنترل playback توسط API های DOM می باشد که کمی جلوتر نمونه ای از آن را خواهید دید.
مرورگر های opera، chrome و فایرفاکس از فرمت ogg برای پخش پشتیبانی می کنند و safari نیز فرمت های تحت پشتیانی Quick Time را پشتیانی خواهد کرد. در ساده ترین حالت با قرار دادن یک تگ video به صورت زیر می توانید فایل صوتی یا ویدئویی خود را در صفحه قرار دهید:
<video src ="video.ogg" width="300px" height="200px" id="myVideo"> decoder not found</video>
خصوصیت src همانطور که در تگ های دیگر با آن آشنا هستید لینکی به فایل ویدئویی می باشد. خصوصیت controls نیز مشخص می کند که از کنترل پیشفرض در نظر گرفته شده توسط مروگر برای پخش استفاده شود یا خیر. در صورتی که عبارت controls درون تگ video قرار گیرد، مرورگر از کنترل پیشفرض خود برای پخش استفاده خواهد کرد. خوصیات width و height هم طول و عرض video را مشخص می کنند و در صورت عدم ذکر، ابعاد پیشفرض تصویر در نظر گرفته خواهد شد. تصویر زیر نمونه ای از این کنترل را در فایرفاکس نشان می دهد:
برای مشاهده این ویدئو لینک مقابل را در firefox، opera یا chrome باز نمایید و بر روی دکمه play کلیک کنید: نمایش ویدئو
در تگ video ی بالا عبارت "decoder not found" در بین آن قرار داده شده است، این عبارت زمانی نمایش داده می شود که مرورگر کاربر decoder مربوطه جهت پخش را نداشته باشد و بدین وسیله می توان عدم پشتیبانی مرورگر از فرمت مربوطه را به کاربر اطلاع داد.
همانطور که قبلا عرض کردم، شما می توانید عملیات play و pause رو توسط API های DOM کنترل کنید. به طور مثال فرض کنید می خواهیم دکمه های pause و play را خودمان طراحی کنیم، در این حالت دیگر نیازی نیست از کنترل پیشفرض مرورگر استفاده کنیم، بنابراین خاصیت controls را از تگ video حذف می کنیم:
<video src ="video.ogg" id="myVideo"> decoder not found</video>
در حالت دیگر با رفتن موس بر روی تصویر، progress bar و volume ظاهر نخواهند شد. حال کافی است دو دکمه در صفحه قرار دهیم و با جاوااسکریپت دکمه های play و pause را پیاده سازی کنیم:
<video src ="video.ogg" id="myVideo"> decoder not found</video>
<input type="button" onclick="Play()" value="Play" />
<input type="button" onclick="Pause()" value="Pause" />
و این هم کد های جاوا اسکریپت:
function Play()
{
var video = document.getElementById("myVideo")
video.play();
}
function Pause()
{
var video = document.getElementById("myVideo")
video.pause();
}
function Stop()
{
var video = document.getElementById("myVideo")
video.currentTime = 0;
video.pause();
}
کد های بالا به قدری ساده اند که فکر نمی کنم نیازی به توضح داشته باشند. تنها نکته ی قابل ذکر نحوه ی پیاده سازی تابع stop می باشد که در آن با استفاده از خصوصیت currentTime زمان شروع ویدئو را به صفر برده و سپس آن را pause می کنیم. نمونه این مثال را می توانید در این لینک ببینید: پخش ویدئو
نحوه ی استفاده از تگ audio نیز به همین شکل است:
<audio src="music.oga" controls>
<a href="music.oga">Download</a>
</audio>
در این آموزش تا حدودی در مورد برخی از مهمترین تگ ها و خصوصیات html 5 به صورت مختصر صحبت شد، البته ویژگی های جدید بسیار بیشتر از آن است که در یک مقاله بتوان همه ی آن ها را پوشش داد اما به عنوان قدم بعدی و در قسمت بعد سعی خواهم کرد نحوه ی پیاده سازی یک قالب ساده را آموزش دهم تا چگونگی استفاده از تگ های جدید ملموس تر شود.