در مقالات گذشته با مفاهیم پایه زبان html آشنا شدید،همانطور که در مقالات قبلی هم اشاره کردیم زبان html دارای ورژن های مختلفی می باشد،آخرین نسخه منتشر شده از این زبان،html5 است که در این مقاله به معرفی و آموزش اصول مقدماتی آن می پردازیم.
HTML4 در سال 99 میلادی به دنیای وب معرفی شد ، ولی در طول سالیان اخیر دنیای وب و نیازهای اینترنتی تغییر زیادی کردند،بنابراین این نیاز وجود داشت تا یک استاندارد جدید معرفی شود تا بتواند نیاز های جدید کاربران را بهتر پوشش دهد .
در HTML 5 ، قابلیت ها و امکانات جدیدی قرار داده شده است که قبلا برای انجام آنها نیاز به استفاده از پلاگین های جانبی داشتیم و همین امر تا حدودی موجب راحتی طراحان وب شده است.
HTML5 چگونه متولد شد
HTML5 حاصل یک همکاری بین کنسرسیوم شبکه جهانی وب ( World Wide Web Consortium – W3C ) و کارگروه فناوری کاربرد ابرمتن تحت وب ( Web Hypertext Application Technology Working Group – WHATWG ) است.
این دو نهاد به صورت مستقل در حال طراحی یک استاندارد برای وب بودند ، ولی در سال 2006 توافق کردند تا با همکاری هم HTML 5 را ایجاد نمایند .
در طراحی HTML5 قوانین و راهکارهای زیر به صورت اجباری تعیین شد تا رعایت شوند در واقع هدف از طراحی HTML5 دستیابی به اهداف زیر بود:
- ویژگیهای جدید باید بر اساس HTML, CSS و JAVASCRIPT باشد.
- کاهش نیاز به پلاگینهای خارجی (مانند فلش).
- بهینه سازی مدیریت خطاها.
- نشانه گذاری های (تگهای) بیشتر به جای اسکریپت نویسی.
- استقلال html5 نسبت به دستگاه مورد استفاده.
- قابل مشاهده بودن فرایند توسعه html5 برای عموم مردم.
معرفی برخی قابلیت های جدید در html5
در HTML 5 ، ویژگی ها و قابلیت های فراوان جدیدی قرار داده شد است که کار را برای طراحان وب بسیار ساده می کند . تا پیش از این طراحان وب برای انجام این امور نیازمند استفاده از plugin ها و نرم افزارهای جانبی مختلفی بودند . در لیست زیر برخی از این ویژگی های جدید را به صورت مختصر معرفی کرده ایم . سپس در هر بخش جدا به آموزش نحوه کارکرد و استفاده از آنها پرداخته ایم :
- اضافه شدن تگ های جدید که دارای معنا و مفهوم خاص خود می باشند مانند تگ های article,aside,section,…
- اضافه شدن تگ < canvas > ، برای طراحی اشیا و اشکال به صورت 2 بعدی .
- اصافه شدن تگ < video > و < audio > برای اجرای فایل های صوتی و تصویری بدون نیاز به یک نرم افزار جانبی مثل FlashPlayer.
- کنترل های جدید فرم مثل calendar , email , date و time اضافه شده اند ، که طراحی و برنامه نویسی فرم ها را بسیار ساده می کند .
- امکان ذخیره اطلاعات بر روی مرورگر کاربر - این قابیلت تقریبا کار کوکی ها cookie را در صفحات HTML انجام می دهند .
اصول استفاده از html5
قبل از شروع کار با html5 بایستی با بعضی از اصول اولیه استفاده از html5 آشنا شوید.در ادامه این مقاله برخی از تغییرات html5 نسبت به نسخه های قبلی و اصول اولیه کار با html5 را معرفی خواهیم کرد.
Doctype
اولین تغییر html5 نسبت به نسخه های قبلی نحوه معرفی نوع سند (Doctype) به مرورگر است. پیش از HTML5 از doctype XHTML یا doctype مربوط به html4 استفاده می کردیم که به صورت زیر بودند :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
همانطور که در کدهای بالا مشاهده می کنید، به خاطر سپردن و حفظ چنین Doctype هایی بسیار دشوار و سخت بود و برای استفاده از انها یا باید از نرم افزارهایی که به صورت اتوماتیک این کدها را تولید می کردند استفاده می کردیم و یا این کدها را از جای دیگر کپی می کردیم. اما HTML5 با معرفی یک Doctype ساده این مشکل را حل کرد.Dcotype مربوط به html5 به صورت زیر می باشد:
<!DOCTYPE html>
تگ HTML
دومین خط در کدهای یک صفحه وب قطعا تگ html و تعریف زبان صفحه است.
قبلا در XHTML برای تعریف زبان صفحه وبمان از صفت xmlns استفاده می کردیم،نحوه استفاده از این صفت به صورت زیر بود :
<html xmlns="http://www.w3.org/1999/xhtml">
اما در html5 فقط نیاز است که از صفت lang استفاده کنیم و زبان صفحه وب خود را به مرورگر معرفی کنیم.( استفاده از این ویژگی اجباری نیست اما کنسرسیوم جهانی وب w3c استفاده از آن را توصیه می کند ).
<!doctype html>
<html lang="IR-fa">
</html>
تگ Head
قسمت بعدی در یک صفحه وب کدهای قسمت head است.این قسمت نیز در html5 دچار تغییراتی شده است از جمله تغییر نحوه تعریف یونیکد صفحه.در نسخه های قبلی html نحوه تعیین یونیکد صفحه به صورت زیر بود:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
اما در html5 قسمت های اضافی حذف شده و این مسئله بسیار ساده تر شده است.
<meta charset="utf-8">
مشکل همیشگی : اینترنت اکسپلورر
اینترنت اکسپلورر از ورژن 9 به بعد از html5 پشتیبانی می کند، اما متاسفانه در ورژن های قدیمی پشتیبانی آن به صورت پیشفرض نیست و بایستی از کد زیر جهت فعال سازی آن استفاده کنیم.
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
با اضافه کردن این قطعه کد به صفحه وب،در واقع ابتدا بررسی می کنیم که آیا مرورگر کاربر،اینترنت اکسپلورر با ورژن پایین تر از 9 می باشد یا خیر،اگر شرط درست بود یک کد جاوا اسکریپت به صفحه اضافه می شود که کار آن اضافه کردن قابلیت پشتیبانی html5 در اینترنت اکسپلورر با ورژن های پایین تر از 9 می باشد(می توانید فایل فوق را دانلود کنید و آن را در کنار فایل htmlتان قرار دهید و سپس آن را لود کنید تا هنگام کار کردن به صورت آفلاین مشکلی برایتان پیش نیاید).
استاندارد های Html5
در XHTML برخی قوانین کدنویسی وجود داشت که باید از آنها پیروی می کردیم از جمله اینکه نباید نام عناصر با حروف بزرگ نوشته شوند، یا مقادیر خاصیت ها بایستی در دابل کوتیشن قرار بگیرند، یا بستن همه ی تگ ها حتی تگ های selfcloe مانند تگ های img,br نیز اجباری بود ولی در html5 چنین اجبارهایی دیگر وجود ندارد، و عمل به قوانین xhtml اختیاری شده است. بطوریکه قوانین xhtml مانند بستن تگ های img و input یا link توسط validator html5 خطا در نظر گرفته نمی شود.
با بررسی مواردی که معرفی کردیم به این نتیجه می رسیم که ساختار اولیه یک صفحه وب در html5 باید به صورت زیر باشد:
<!DOCTYPE html>
<html lang="IR-fa">
<head>
<title>Page Title Come Here</title>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
به این ترتیب با مفاهیم و اصول اولیه html5 اشنا شدید،در مقالات بعدی با مباحث پیشرفته تر html5 آشنا خواهید شد.
امیدوارم مطالعه این مقاله برای شما مفید بوده باشد.با ادامه مقالات آموزش HTML,CSS با ما همراه باشید.
کامنت جدید ...