مقدمات HTML5

HTML5 به عنوان نسخه جدید زبان نشانه گذاری ابرمتن برای ایجاد صفحات وب گسترش داده شده است. اولین بار در ژوئن ۲۰۰۴ بحث برای ایجاد نسخه جدیدی از زبان نشانه گذاری HTML آغاز شد و در فوریه ۲۰۱۰ نسخه های تقریبا نهایی ، از این استانداردها ایجاد شدند. - ویکی پدیا

خب، حالا نسخه جدید چه چیزهایی داره؟
برای آشنایی با قدرت HTML5 می تونید به سایت html5rocks یه نگاهی بندازید.
+ میتونید نمونه های استفاده از HTML5 رو در سایت html5demos ببینید آموزش tutorial html5 html Form canvas  مقدمات HTML5   Pouya Saadeghi

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

بعضی از تغییرات نسخه پنجم HTML:

Doctype

در نسخه های قبلی این تگ Doctype یکم طولانی بود که در نسخه جدید کوتاه شد:

آموزش tutorial html5 html Form canvas  مقدمات HTML5   Pouya Saadeghi

HTML 4.1 Strict:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 5:

<!DOCTYPE HTML>
Sections

برای بخش بندی صفحه تگ های جدیدی معرفی شده که قراره هم کار کدنویس رو راحت کنه و هم کار موتور های جستجو رو! چون با این تگ ها ، بخش های مختلف صفحه، مثل هدر ، ستون ، محتوا و… کاملا مشخص میشه.

  • <nav> – منوی سایت
  • <aside> – ستون
  • <section> – بخش مربوط به محتوا
  • <header> – هدر
  • <footer> – فوتر
  • <article> – محتوای اصلی / مقاله

 

قالب بندی صفحه در نسخه های قبلی HTML:

آموزش tutorial html5 html Form canvas  مقدمات HTML5   Pouya Saadeghi

قالب بندی صفحه در HTML5:

آموزش tutorial html5 html Form canvas  مقدمات HTML5   Pouya Saadeghi

فرم ها در HTML5

برای تگ Input مقادیر Type جدیدی معرفی شده:

<form>
<input type="date">
<input type="url">
<input type="email">
<input type="range" max="20" min="1">
<input type="number">
<input type="text">
<input type="submit">
<input type="file">
</form>

 

مثلا نوع date این تقویم رو برای انتخاب تاریخ نمایش میده:
آموزش tutorial html5 html Form canvas  مقدمات HTML5   Pouya Saadeghi

required fields

با این خاصیت مشخص می‌کنیم که فیلد مورد حتما باید تکمیل بشه تا فرم کار کنه:

<input type=text required>
datalist

برای ایجاد لیست کشویی:

<input type=text list="options">
<datalist>
<option label="HTML 5 Rocks" value="HTML 5 Rocks"></option>
<option label="I love HTML 5" value="I love HTML 5"></option>
</datalist>
multiple

انتخاب چند فایل برای آپلود:

<input type="file" multiple="multiple">
pattern

برای تعیین محتوای وارد شده ؛ مثلا اگه بخوایم فقط اعداد از یک تا نه وارد بشن:

<input type="text" pattern="[1-9]">

تصویر نمونه از حالت نمایش فیلدها در HTML5:

آموزش tutorial html5 html Form canvas  مقدمات HTML5   Pouya Saadeghi

 

HTML5 Canvas

Canvas یکی از امکانات فوق العاده HTML5 ـه که میتونه به طور مستقیم گرافیک رو در صفحات وب ایجاد کنه. کانواس با جاوا اسکریپت تولید میشه و در همه‌ی مرورگرها (و IE9+) پشتیبانی میشه

<canvas>
</canvas>

 

آموزش tutorial html5 html Form canvas  مقدمات HTML5   Pouya Saadeghi

نمونه های استفاده از Canvas رو در سایت canvasdemos می‌تونید ببینید.

Web Storage

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

Embedded Videos

با این ویژگی ، فایل های ویدیویی به طور مستقیم درصفحه قرار میگیرن و برای نمایش به Flash Player و Silverlight و Quicktime نیازی نیست.

ویدیو ها با یه تگ ساده <video> قابل نمایش میشن . سایت YouTube درحال حاضر پلیر HTML5ش رو در بیشتر ویدیوها جایگزین پلیر فلش کرده.

نوشته شده توسط پویا صادقی

بیشتر بخونید:

تگ Audio و Video در HTML5شبه عنصرها در CSSتغییر شکل دوبعدی در CSS3سلکتورهای CSS3
پاسارگاد گرافیک در گوگل پلاس
پاسارگاد گرافیک را دنبال کنید!