از امروز در طراحی سایت با آموزش HTML5 را شروع می کنیم و گام به گام برای یادگیری پیش می رویم:
اصول استفاده از HTML5
فصل اول مربوط به معرفی عناصر یا تگ ھای جدید HTML5 است. ولی قبل از شروع بایستی با بعضی از اصول استفاده از html5 آشنا باشید. به ھمین دلیل این جلسه را به اصول استفاده از html5 اختصاص می دھیم.
Doctype
اولین تغییر در یک صفحه وب HTML5 ،نوع سند یا ھمان Doctype آن است. ھمانطور که می دانید doctype جھت معرفی نوع سند به مرورگر است، پیش از HTML5 از XHTML doctype استفاده
می کردیم که به صورت زیر بود :
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTMLXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd"> Doctype HTML4 یا <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4 /loose.dtd">
ھمانطور که می بینید، به خاطر سپردن و حفظ چنین doctype ھایی قطعا سخت بود، و بایستی از نرم افزارھایی که به صورت اتوماتیک این کدھا رو می نوشتن استفاده می کردیم یا از راه حل ھمیشگی (کپی، پیست) بھره می بردیم. اما HTML5 آمد و خیال ھمه را با doctype ساده اش راحت کرد.
<!doctypehtml>
تگ HTML
دومین خط در کدھای یک صفحه وب قطعا تگ html و تعریف زبان صفحه است.
قبلا در XHTML برای تعریف زبان صفحه وبمان از صفت xmlns استفاده می کردیم اما در html5 فقط نیاز است که از صفت lang استفاده کنیم.
<!doctypehtml> <htmllang="IR-fa"> </html>
تگ Head
قسمت بعدی در یک صفحه وب کدھای قسمت head است. این قسمت نیز در html5 بی نصیب نمانده و دچار تغییراتی شده. از جمله تعریف یونیکد صفحه که قبلا به شکل زیر بود :
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
ولی در HTML5 قسمت ھای اضافی حذف شده و کد به شکل زیر در آمده است
<metacharset="utf-8">
اینترنت اکسپلورر!!!
ھمانطور که گفتیم اینترنت اکسپلورر از ورژن ۹ به بعد از html5 پشتیبانی می کند، اما متاسفانه در ورژن ھای قدیمی پشتیبانی آن به صورت پیشفرض نیست و بایستی از کد زیر جھت فعال سازی آن استفاده کنیم.
<!--[if ltIE9]> <scriptsrc="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
پس از قرار دادن کد فوق در قسمت head صفحه ، مرورگر ie8 به پایین شروع به پشتیبانی از html5 خواھد کرد. (می توانید فایل فوق را دانلود کنید و آن را در کنار فایل htmlتان قرار دھید و سپس آن را لود کنید تا ھنگام کار کردن به صورت آفلاین مشکلی براتون پیش نیاد.)
نکته :
کاربرانی که از ie8 به پایین استفاده می کنند مشکلی نخواهند داشت؟!
متاسفانه مشکل اساسی طراحان وب ھمین است. ھمیشه بایستی نگران کاربرانی باشند که از ورژن ھای قدیمی ie استفاده می کنند. در صورتی که مرورگرھا ھمیشه در حال بروزرسانی ھستند اما ھنوز کسانی وجود دارند که از ie6 جھت مشاھده وب سایت ھا استفاده می کنند.
این کاربران قطعا نخواھند توانست که صفحه وب را آنطور که ھست ببینند. در این صورت به غیر از روشی که در بالا گفتیم (استفاده از ۳) html5shiv راه حل دیگر برای این مشکل وجود دارد.
۱ . استفاده از تگ ھای html5 برای قسمت ھایی که مشکلی در ظاھر سایت به وجود نمی آورند، و استفاده از تگ div برای قسمت ھای مھم.
۲ . تعریف المنت ھا با استفاده از جاوا اسکریپت.
به طور مثال جھت تعریف تگ header از کد جاوااسکریپت زیر استفاده می کنیم :
<script>
document.createElement("header");
</script>سپس می توانیم از آن تگ استفاده کنیم.
۱ . مورد سوم ھم اینکه بیخیال ، به کار خودتون ادامه بدین!! 😀
ولی خب بھترین راه حل اینه که از html5shiv استفاده کنید.
استاندارد های Html5
اگر تا به حال با XHTML کدنویسی می کردین حتما متوجه بعضی از استانداردھا (قوانین) شده اید از جمله اینکه نباید نام عناصر با حروف بزرگ نوشته شوند، یا که مقادیر بایستی در دابل کوتیشن قرار بگیرند، یا بستن ھمه ی تگ ھا حتی تگ ھای img و input.
ولی در html5 ھمچین اجبارھایی وجود ندارد، و عمل به قوانین xhtml اختیاری شده است. بطوریکه قوانین xhtml مانند بستن تگ ھای img و input یا link توسط html5 validator خطا در نظر گرفته نمی شود.
پس از بررسی کل موارد فوق، به این نتیجه می رسیم که یک صفحه وب پیشفرض بر اساس html5 به شکل زیر خواھد بود.
<!doctypehtml> <htmllang="IR-fa"> <head> <title>PageTitleComeHere</title> <metacharset="utf-8"> <!--[ifltIE9]> <scriptsrc="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> </body> </html>
طراحی سایت اسپیناس همیشه سعی در استفاده از به روز ترین تکتینک ها و ابزارها در طراحی سایت دارد در اسپیناس از تکنولوژی ها روز دنیا مانند CSS3 , HTML5 , Jquery , JAVASCRIPT در طراحی وب سایت استفاده می شود و همچنین زبانهایی مانند PHP , ASP در شرکت اسپیناس مشتری مداری حرف اول را می زند
