header سایت خود قرار دهید تا بتوانید عناصر HTML5 را برای IE نیز استایل دهی کنید.معرفی ۷ تگ پرکاربرد در HTML5
تا پیش از ظهور HTML5 بسیاری از موارد در طراحی و پیاده سازی صفحات وب یا ناممکن بود و یا نیازمند صرف ساعت ها زمان. در HTML5 امکانات بسیار کاربردی و جالبی وجود دارد که به شما کمک می کند تا وبسایتهایی جذاب و قدرتمند طراحی کنید. در برخی موارد استفاده از این قابلیت ها بسیار ساده است؛ تا حدی که تنها با افزودن یک تگ یا صفت قابل پیاده سازی هستند. عدم اطلاع از این تگ ها، صفات و خاصیت های کاربردی می تواند به بهای اتلاف ساعت ها وقت با ارزش یک طراح وب تمام شود. در این آموزش ۱۰ مورد از پرکاربردترین عناصر موجود در HTML5 را معرفی خواهم کرد که استفاده از برخی از آنها در هر وبسایتی که طراحی میکنید اجتناب ناپذیر است.
پیش از بکارگیری تگ ها و یا صفات جدید در HTML5 پیشنهاد میکنم از ابزار تست HTML5 برای اطلاع از میزان پشتیبانی مرورگر شما از HTML5 استفاده کنید.
۱ – نحوه جدید معرفی سند HTML توسط تگ DOCTYPE
اگر شما هم با HTML4 کار کرده باشید، نحوه استفاده از تگ DOCTYPE را با این فرمت طولانی و زشت به یاد دارید:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
اکنون می توانید این تگ دوست داشتنی را در HTML5 بسیار ساده با ساختار زیر استفاده کرده و بخاطر بسپارید:
<!DOCTYPE html>
۲- عدم نیاز به استفاده از صفت type برای تگ های script و link
در زیر فرمت ساختاری تگ script و link در html4 ملاحظه میکنید :
<link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="script.js"></script>
در html5 نیازی به تعریف صفات type برای تگ های script و link نمی باشد چرا که بطور پیش فرض این صفات برابر باtype=text/javascript و type=text/css می باشد. بنابراین شما می توانید به سادگی ساختار زیر از این دو تگ استفاده کنید:
<link rel="stylesheet" href="style.css" /> <script src="script.js"/></script/>
۳- ساختار معنایی header، footer و nav
پیشتر ما برای نوشتن کدهای html که دارای ساختار معنایی نیز باشند از خصیصه id و class با مقادیر مرتبط با کاربرد آن توسط تگ div استفاده می کردیم. یعنی برای اینکه از نظر معنایی مشخص شود که div استفاده شده برای چه موضوعی می باشد، در خصیصه id و class آن div، نامی استفاده میکردیم که کاربرد آن را نشان دهد، مثل :
div id="header"> ... </div> <div id="nav"> <ul>...</ul> </div> <div id="footer"> ... </div>
اکنون html5 به ما کمک می کند تا ساختار معنایی بهتری در صفحات وب خود داشته باشیم. در html5 سه تگ header، nav وfooter می تواند جایگزین کد بالا شده و به ساختار ما معنا ببخشد :
<header> ... </header> <nav> <ul>...</ul> </nav> <footer> ... </footer>
۴- ساختارهای معنایی section و article
Html5 توسط دو تگ جدید section و article به ما در داشتن ساختار معنایی بهتر کمک میکند.
<section> ... </section>
توسط تگ section شما میتوانید قسمت های مختلفی مانند footer، header و … را کدهای html در صورتی که به هم مرتبط هستند بخش بندی کنید.
<article> ... </article>
زمانی که شما میخواهید یک محتوای منحصربفرد در بخشی از صفحه که به صورت مستقل عمل میکند داشته باشید، باید از تگarticle استفاده کنید. نکته مهم در استفاده از این تگ این است که نمی توانید از یک تگ article در داخل article دیگر استفاده کنید. هر تگ article می تواند شامل section و header، nav و … باشد. به عنوان مثال می توانید در بخش مقالات وبلاگ از این تگ استفاده کنید.
۵- فرم های ورود اطلاعات با امکانات جدید HTML5
۱۳ نوع جدید از فیلدهای ورود اطلاعات و چندین صفت جدید در HTML5 برای from و input معرفی شده است. هرچند هنوز برخی از مرورگرها بطور کامل از این صفات و نوع های جدید پشتیبانی نمی کنند، اما ممکن است شما بخواهید برخی از آنها را در فرم های صفحات وب خود داشته باشید.
<form id="myform">
Name: <input name="name" required placeholder="Your name" pattern="[A-z]{7}" />
<br/>
Email: <input type="email" name="email" required placeholder="email@inwebson.com"/>
<br/>
URL: <input type="url" name="url" placeholder="Homepage URL"/>
<br/>
Age: <input type="number" name="age" min="18" max="99" />
<br/>
Description: <textarea name="desc" placeholder="Describe yourself here..."></textarea>
<br/>
<input type="submit" value="Submit" />
</form>
در فرم بالا بدون هیچگونه کد و اسکریپت دیگری، مقادیر فیلدهای ورود اطلاعات برای راهنمایی کاربر با pattern تعریف شده قبل از ورود اطلاعات نشان داده میشود. همچنین فیلد ورود سن بازه ای بین ۱۸ تا ۹۹ را برای انتخاب به کاربر نشان میدهد. تا پیش از ظهور html5 اینگونه فیلدها توسط اسکریپت و یا عناصر داینامیک قابل پیاده سازی بود.
۶- تگ Canvas
Html5 قابلیت رسم تصاویر دو بعدی را با کمک گرفتن از جاوااسکریپ فراهم ساخته است. همچنین شما میتوانید توسط تگ canvasدر html5 انیمیشن بسازید. تکه کد زیر طریقه ساخت یک مستطیل آبی رنگ را توسط تگ canvas و کدهای جاوااسکریپت نشان میدهد:
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000FF";
ctx.fillRect(0,0,150,150);
</script>
۷- پشتیبانی HTML5 از Video و Audio
تا پیش از ظهور HTML5 برای نشان دادن ویدئوها و پخش صداها در صفحات وب می بایست از تگ ها object و embed استفاده می کردیم. نقص بزرگ این تگ ها نیاز به نصب پلاگین های اضافی مانند flashh بر روی مرورگر بود و در صورتی که پلاگین مورد نظر بر روی مرورگر نصب نبود، دستور مربوطه قابل اجرا نبود:
<object width="400" height="300"> <param name="movie" value="video.mp4" /> ... <embed src="video.mp4" type="application/x-shockwave-flash" ... ></embed> </object>
html5 راهی جدید برای پخش ویدئوها و صداها توسط تگ های video و audio معرفی کرد. با html5 شما دیگر نگران مشکلات نصب پلاگین بر روی مرورگرها نخواهید بود. تمامی مرورگرها از این دو تگ پشتیبانی نمی کنند اما ورژن های اخیر مرورگرها این دو تگ را پوشش داده اند:
<audio controls="controls"> <source src="audio.mp3" type="audio/mp3" /> <source src="audio.ogg" type="audio/ogg" /> Your browser does not support the <audio> tag. </audio> <video controls="controls" width="400" height="300"> <source src="movie.mp4" type="audio/mp4" /> <source src="media.ogg" type="audio/ogg" /> Your browser does not support the <video> tag. </ video >
چطور مشکل اینترنت اکسپلورر را برای اجرای دستورات HTML5 حل کنیم؟
اینترنت اکسپلورر تا نسخه ۸.۰ نمی تواند کدهای HTML5 را بخواند و شما نمی توانید عناصر HTML5 را استایل دهی کنید. توسط کد زیر این مشکل حل خواهد شد:
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->