برای HTML5 آماده شوید!

18 Jul 2010 – 13:48 نوشته شده توسط پویا صادقی

آموزش HTML5

حتما اسم HTML5 به گوشتون خورده که قراره تغییرات زیادی تو وب ایجاد کنه و کلی ابزار و امکانات جالب و خفن داره!
تعریف  HTML5 به نقل از ویکی پدیا : HTML5 به عنوان نسخه جدید زبان نشانه گذاری ابرمتن برای ایجاد صفحات وب گسترش داده شده است. اولین بار در ژوئن 2004 بحث برای ایجاد نسخه جدیدی از زبان نشانه گذاری HTML آغاز شد و در فوریه 2010 نسخه های تقریبا نهایی ، از این استانداردها ایجاد شدند.

خوب! حالا این نسخه جدید چه چیز هایی داره؟
برای آشنایی با قدرت HTML5 می تونید به سایت html5rocks که در اینجا درموردش گفته بودیم ، یه نگاهی بندازید.
اگه مرورگر سافاری 5 یا گوگل کروم 6 روی سیستمتون دارین، به صفحه HTML5 در سایت اپل برید تا قابلیت های HTML5 که در موتور Webkit پشتیبانی میشن رو ببینید.
+ میتونید نمونه های استفاده از HTML5 رو در سایت html5demos ببینید :)

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

Doctype

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

HTML 4.1 Strict:

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

HTML 5:

1<!DOCTYPE HTML>

Syntax

در strict XHTML حتما باید از حروف کوچک برای تگ ها استفاده کنیم، از کوتیشن استفاده کنیم و حتما تگ هایی مثل meta, input, img رو با اسلش ببندیم:

1<div id="imgwrapper"><img src="image.jpg" alt="my picture" /></div>

ولی تو HTML5 می تونیم موارد بالا رو رعایت نکنیم:

1<DIV>I AM A CAPITAL DIV!! ha ha!</DIV>
2<p id=abstract>We are All HTML5 Valid!</p>
3<input type=text>
4<input type="text">
5<input type="text" />

Sections

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

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

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

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

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

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

فرم ها در HTML5:

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

01<form>
02     <input type=date>
03     <input type=url>
04     <input type=email>
05     <input type=range min=1 max=20>
06     <input type=number>
07     <input type=text>
08     <input type=submit>
09     <input type=file>
10</form>

  • <input type=date> – یک تقویم برای انتخاب تاریخ
  • <input type=url> – یک فیلد برای آدرس وب
  • <input type=email> – یک فیلد برای آدرس ایمیل
  • <input type=range min=1 max=20> – یک نوار اسلاید ایجاد میکند
  • <input type=number> – یک فیلد برای وارد کردن عدد به همراه 2 فلش کوچک برای کاهش و افزایش
  • <input type=text> – یک فیلد برایمتن معمولی
  • <input type=submit> – یک دکمه ثبت معمولی
  • <input type=file> – یک فیلد برای انتخاب فایل

مثلا نوع date این تقویم رو برای انتخاب تاریخ نمایش میده:

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

1<input type=text required>

datalist

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

1<input type=text list=options>
2<datalist id=options>
3<option label="HTML 5 Rocks" value="HTML 5 Rocks">
4<option label="I love HTML 5" value="I love HTML 5">
5</datalist>

multiple

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

1<input type=file multiple>

pattern

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

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

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

Canvas Element

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

1<canvas>
2</canvas>

نمونه های استفاده از کانواس در HTML5

نمونه های استفاده از Canvas :

Web Storage

ایده Web Storage که در HTML5 معرفی شد ، این امکان رو میده که نرم افزار های آنلاین برای ذخیره موقت داده های شما، دیتابیس های محلی بر روی کامپیوتر شما ایجاد کنند :) یعنی شما میتونید از نرم افزار های تحت وب ، آفلاین استفاده کنید!

Embedded Videos

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

ویدیو ها با یه تگ ساده <video> قابل نمایش میشن . حتی سایت YouTube هم در آینده ویدیو ها رو با این فناوری نمایش میده

نمونه ای از سایت html5

اچ تی ام ال 5

26 May 2010 – 22:18 نوشته شده توسط پویا صادقی

معرفی امکانات جدید اچ تی ام ال 5 + کد های جدید ، مثال ها و نمونه ها

این سایت را با آخرین نسخه مرورگر های کروم یا سافاری مشاهده کنید

برای ورود به سایت روی عکس کلیک کنید