آموزش HTML5

[حسین جهانبخش]

در حال حاضر در حال مطالعه و در حقیقت ترجمه سری های آموزشی موجود در وب سایت W3C هستم. یکی از این مباحث نسخه جدید HTML یعنی HTML5 است. البته تا به حال 5-6 جلسه ترجمه کرده ام و فرصت نشده که ادامه بدم ولی امیدوارم در صورتی که اینجا کار رو شروع کنم عامل محرکه ای برای افزایش سرعتم بشه.

آموزش HTML5 – جلسه اول: معرفی HTML5

HTML5 نسل آینده HTML است.

HTML5 چیست؟

HTML5 استاندارد جدیدی از HTML، XHTML، و HTML DOM خواهد بود. نسخه قبلی HTML در سال 1999 عرضه شد. وب از آن زمان تغییرات زیادی کرده است.

HTML5 هنوز در حال پیشرفت است. هرچند اکثریت مرورگر ها در حال حاضر از آن پشتیبانی می کنند.

HTML5 چگونه شروع شد؟

HTML5 حاصل یک همکاری بین کنسرسیوم وب جهان گستر (World Wide Web Consertium (W3C)) و WHATWG (Web Hypertext Application Technology Working Group) {به هر صورت که مایل بودید ترجمه کنید...} است.

در سال 2006، WHATWG با فرم ها و برنامه های تحت وب و W3C با XHTML 2.0 کار می کرند؛ که تصمیم گرفتند نسخه جدید HTML را به وجود آورند.

تعدادی از قوانین HTML5 که منتشر شده است:

    قابلیت های جدید باید بر مبنای HTML، CSS، DOM و JavaScript بنا شود.
    کاهش نیاز به پلاگین های خارجی (مثل Flash)
    اداره کردن بهتر خطاها (Error handeling)
    افزایش مارک آپ ها (markup) برای کاهش اسکریپت نویسی در صفحات وب
    HTML5 باید مستقل از وسیله باشد
    پروسه گسترش باید در دید عموم باشد (همه از روند پیشرفت HTML5 مطلع باشند)

قابلیت های جدید

تعدادی از قابلیت های جالب و جدید HTML5 اینهاست:

    عنصر convas برای نقاشی و ترسیم اشکال
    عناصر video و audio برای پخش چندرسانه ای ها
    پشتیبانی بهتر از ذهیره سازی آفلاین محلی
    عناصر خاص محتوایی جدید مثل article، footer، header، nav، section
    کنترل های فرم جدید مثل calendar، date، time، email، url، search

پشتیبانی مرورگرها

HTML5 هنوز یک استاندارد رسمی نیست و هیچ مرورگری پشتیبانی کاملی از آن ندارند. اما همه مرورگرهای اصلی (سافاری، کروم، فایرفاکس، اوپرا و اینترنت اکسپلورر) قابلیتهای جدید HTML5 را همواره به مرورگرهای خود می افزایند.

امیدوارم بتونم به صورت روزانه جلسات رو ادامه بدم.

در صورت کپی برداری لطفاً نام نویسنده و لینک وب سایت خودم و یا وب سایت آیاپیر فراموش نشود. ممنون

[حسین جهانبخش]

بسیار خوب. می بینم که هیچ اتفاقی رخ نداده.   جلسه دوم رو شروع می کنم ولی خیلی بده که هیچ اتفاقی اینجا نیفتاده.
اینترنت از زمان استاندارد شدن HTML 4.01 در سال 99 تغییرات زیادی کرده. امروز بعضی از عناصر HTML 4.01 منسوخ شده و هیچ استفاده از آن نمی شود و یا برای کاری که برای آن ساخته شده اند استفاده نمی شوند. این عناصر در HTML5 حذف و یا دوباره نوشته شده اند.
برای استفاده بهتر از اینترنت، HTML5 شامل عناصر جدیدی برای ساختار سازی بهتر، نقاشی، محتوای چندرسانه ای و سیستم مدیریت فرم بهتر است.

عناصر markup جدید:

عناصر جدید برای ساختار سازی بهتر:
    <article>: برای محتواهای خارجی مثل متن از مقالات خبری، وبلاگ، تالارگفتگو و با هر محتوای دیگری از منابع خارجی
    <aside>: برای محتواهای کنار گذاشته شده از محتویاتی که قرار گرفته است. محتواهای کنار گذاشته شده باید مرتبط با محتویات اطراف خودش باشد.
    <command>: یک دکمه و یا دکمه رادیویی و یا یک چک باکس
    <details>: برای توضیح جزئیات یک صفحه یا بخشی از یک صفحه
    <summary>: یک عنوان یا خلاصه در داخل عنصر  details به کار می رود.
    <figure>: برای گروه بندی یک محتوای مستقل که می تواند یک ویدیو باشد
    <figcaption>: عنوان بخش figure را با آن مشخص می کنند.
    <footer>: برای بخش footer صفحه یا یک بخش که می تواند شامل نام نویسنده، تاریخ ایجاد صفحه، اطلاعات تماس و یا اطلاعات حق کپی رایت باشد
    <header>: برای معرفی یک صفحه یا یک بخش که می تواند شامل navigation (منوی راهوری) هم باشد.
    < hgroup>: برای تیتر یک بخش از <h1> تا <h6> می توان استفاده کرد که بزرگترین آنه به عنوان تیتر اصلی بخش و بقیه به عنوان زیر تیتر بخش استفاده می شوند.
    <mark>: برای متن هایی که باید مشخص تر (highlight) باشند
    <meter>: برای اندازه گیری، فقط زمانی استفاده می شود که مقادیر ماکزیمم و مینیمم مشخص باشد.
    <nav>: برای بخش navigation به کار می رود.
    <progress>:حالت کاری که در حال پیشرفت است
    <ruby>، <rt>، <rp>: برای تفسیر کاراکترهای و یا متن های چینی
    <section>: برای بخشی از یک سند مثلا فصل ها، هدرها، فوترها و هر بخش دیگری از صفحه
    <time>: برای تعریف یک ساعت یا تاریخ و یا هر دو
    <wbr>: شکست کلمه.  می توان با آن خط جدید (line-break) را تعریف کرد.

عناصر چندرسانه ای جدید
    <audio>: برای صداها، موزیک ها و هر فایل چندرسانه ای صوتی
    <video>: برای ویدیوکلیپ ها و هر فایل ویدیویی دیگر
    <source>: برای منبع عناصر مدیا که در داخل تگ های video و audio تعریف میشود.
    <embed>: برای محتویات جاسازی شده (embed) مثل پلاگین ها

عنصر Convas ساخت تصاویر
    <convas>: برای ساخت تصاویر با یک اسکریپت

عناصر فرم جدید:
    <datalist>: لیستی از خصوصیتهای اختیاری برای مقادیر ورودی
    <keygen>: کدهایی برای شناسایی کاربران ایجاد می کند.
    <output>: برای انواع متفاوتی از خروجی مثل خروجی های نوشته شده توسط یک اسکریپت

مقادیر صفت نوع ورودی جدید:
خصوصیت نوع عنصر input ، مقادیر جدیدی برای کنترل بهتر دریافت ورودی از کاربر قبل از ارسال آن به سرور در اختیار قرار داده است:
    tel: مقدار وروردی از نوع شماره تلفن
    search: مقدار ورودی از نوع فیلد جستجو
    url: مقدار ورودی از نوع یک آدرس وب
    email: مقدار ورودی از نوع یک یا چند آدرس ایمیل
    datetime: مقدار ورودی از نوع زمان و/یا تاریخ
    date: مقدار ورودی از نوع تاریخ
    month: مقدار ورودی از نوع ماه
    week: مقدار ورودی از نوع هفته
    time: مقدار ورودی از نوع زمان
    datetime-local: مدار ورودی از نوع زمان/تاریخ محلی
    number: مقدار ورودی از نوع عدد
    range: مقدار ورودی از نوع عددی در رنج داده شده
    color: مقدار ورودی از نوع کد هگزادسیمال یک رنگ مثل #FF8800

در این دو جلسه فقط به مفاهیم و آشنایی با HTML5 پرداختیم و تا حالا یک خط کد هم با این زبان (اگر بتوان HTML را زبان برنامه نویسی نامید) ننوشته ایم. در اینجا ذکر یک سری نکات ضروری است:
1-      هدف از این جلسات این نیست که شما با HTML آشنا شوید این جلسات به شما کمک می کند که با HTML5 آشنا شوید. شما باید آشنایی قبلی با HTML داشته باشید. پس اگر می خواهید با پیش روی در این جلسات طراحی وب بیاموزید سخت در اشتباهید. 
2-      من در این مجموعه جلسات با تگ های جدیدی که در  نسخه 5 HTML به وجود آمده اند خواهم پرداخت و در پایان اگر خدا بخواهد یک مرجع از تگ های HTML5 برایتان خواهم ساخت.
3-      در جلسه بعدی با تگ video یکی از عناصر جدید اضافه شده در HTML5 آشنا خواهید شد.

در صورت کپی برداری لطفاً نام نویسنده و لینک وب سایت خودم و یا وب سایت آیاپیر فراموش نشود. ممنون

[حسین جهانبخش]

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

وب سایت های جدید اکثراً از ویدیو در محتوای خود استفاده می کنند. HTML5 استانداردی را برای نمایش آن ها فراهم کرده است.

ویدیو بر روی وب:

تا به حال، هرگز استانداردی برای نمایش ویدیو در صفحات وب وحود نداشته است. امروزه، ویدیوو ها عموماً از طریق یک پلاگین مثل فلش نشان داده میشوند. هر  چند همه مرورگرها پلاگین های مشابهی ندارند.

HTML5 روش استانداردی را برای نمایش ویدیو با استفاده از عنصر (تگ) ویدیو فراهم کرده است.

فرمت های ویدیویی

در حال حاضر 3 فرمت توسط تگ ویدیو پشتیبانی میشود:

    Ogg: فایل های Ogg با کدک تصویری Theora و کدک صوتی Vorbis

پشتیبانی می شود در:

Firefox 3.5+ (نسخه های بالاتر از 3.5 فایرفاکس)

Opera 10.5+

Chrome 5.0+

پشتیبانی نمی شود در:

InternetExplorer

Safari

 

    MPEG 4: فایل های MPEG 4 با کدک تصویری H.264 و کدک صوتی AAC

پشتیبانی می شود در:

IE 9.0+

Chrome 5.0+

پشتیبانی نمی شود در:

Firefox

Opera

Safari

 

    WebM: فایل های WebM با کدک تصویری VP8 و کدک صوتی Vorbis

پشتیبانی می شود در:

Firefox 4.0+

Opera 10.6+

Chrome 6.0+

پشتیبانی نمی شود در:

IE

Safari

 

چگونه کار می کند؟

برای نمایش ویدیو در HTML5 تنها به یک چیز نیاز دارید:

کد:

<video src="movie.ogg" controls="controls">
</video>

ویژگی controls برای افزودن کنترل های play، pause و صصداست. ضمناً بهتر است از خصوصیت های width و height هم همیشه استفاده کنید.

بین دو تگ <video> و </video> چیزی را که می خواهید در صورتی که مرورگر از عنصر ویدیو پشتیبانی نمی کند به کاربر نشان داده شود می نویسید. مثلاً:

کد:

<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

مثال بالا از یک فایل Ogg استفاده کرده ایت و در مرورگرهای فایرفاکس و اوپرا و کروم کار می کند. بای اینکه ویدیو در اینترنت اکسپلورر و سافاری و نسخه های قبلی کروم بتوانید ویدیو را نشان دهید باید از فابل های WebM و MPEG 4 استفاده کنید.

تگ ویدیو به شما اجازه می دهد که چند تگ source داشته باشید. تگ های source می تواند به فایل های ویدیویی مختلف وصل باشد. مرورگر اولین فرمتی که قابلیت نمایش آن را داشته باشد همان را به کاربر نشان می دهد.

کد:

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

تمام خواص (ویژگی ها یا Attribute) تگ <video>

    audio: حالت پیش فرض صدا را تعریف می کند. در حال حاضر فقط یک مقدا می تواند بگیرد: muted
    autoplay: در صورتی که وجود داشته باشد ویدیو به محض اینکه آماده شود خود به خود پخش می شود و مقداری که می تواند بگیرد: autoplay
    controls: در صورت وجود دکمه های کنترلی توضیح داده شده در بالا نمایش داده می شود. مقدار: controls
    Height: ارتفاع پخش کننده ویدیو را تنظیم می کند. مقدار: عددی بر حسب پیکسل
    loop: در صورت وجود پس از اتمام نمایش ویدیو پخش آندوباره شروع می شود. مقدار:loop
    poster: مشخص کننده تصویری است که به عنوان پیش نمایش ویدیو از آن استفاده می کند. مقدار آن یک url یا آدرس اینترنتی است.
    preload: در صورت وجود ویدیو در زمان لود صفحه، لود شده و آماده اجرا می شود. اگر autoplay وجود داشته باشد این خاصیت نادیده گرفته می شود.
    src: آدرس ویدیویی که باید پخش شود. مقدار آن یک url یا آدرس اینترنتی است.
    width: پهنای پخش کننده ویدیو را تنشیم می کند. مقدار: عددی بر حسب pixel

[حسین جهانبخش]

HTML5 استانداردی را برای پخش صدا به وجود آورده است.

صدا در وب
تا به حال، استانداردهای بسیاری در وب برای پخش صدا به وجود آمده است. امروزه بیشتر صداها از طریق یک پلاگین مثل فلش پخش می ود. هرچند،¬ همه ی مرورگرها پلاگین یکسانی ندارند.
HTML5 استانداردی را برای پخش صدا از طریق تگ audio فراهم کرده است. عنصر Audio می تواند فایل های صوتی و یا یک استریم صوتی را پخش کند.
فرمت های صوتی
در حال حاضر 3 فرمت تحت پشتیبانی عنصر audio قرار دارد.
Ogg Verbis:
پشتیبانی می شود توسط:
Firefox 3.5
Opera 10.5
Chrome 3.0
پشتیبانی نمی شود توسط:
IE 9
Safari 3.0

MP3:
پشتیبانی می شود توسط:
IE 9
Chrome 3.0
Safari 3.0
پشتیبانی نمی شود توسط:
Firefox 3.5
Opera 10.5

Wav:
پشتیبانی می شود توسط:
Firefox 3.5
Opera 10.5
Safari 3.0
پشتیبانی نمی شود توسط:
IE 9
Chrome 3.0

این تگ چگونه کار می کند
برای پخش یک فایل صوتی در HTML5 تمام آن چیزی که شما نیاز دارید این یک خط کد است.

کد:

<audio src="song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>

خاصیت control برای اضافه کردن دکمه های صدا و play و pause است.
برای مرورگرهایی که از تگ audio پشتیبانی نمی کنند متن مورد نظرمان برای نمایش به کاربر را داخل دو تگ <audio> و </audio> قرار می دهیم.

کد:

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

مثال بالا از یک فایل Ogg استفاده می کند که در فایرفاکس، اوپرا و کروم به درستی کار می کند. برای اینکه کاری کنیم که audio در اینترنت اکسپلورر و سافاری هم کار کند باید فایل صوتی با فرمت mp3 هم اضافه کنیم. عنصر audio به ما اجازه می دهد از چند تگ source استفاده کنیم. تگ source را می توان برای لینک کدن به فایل های صوتی متفاوت استفاده نمود. مرورگر اولین فرمتی را که شناسایی کند استفاره می کند.

تمام خواص تگ <audio>
Autoplay: در صورت وجود فایل صوتی به محض آماده شدن پخش می شود. مقداری که میگیرد: autoplay
Controls: دکمه های مختلف مثل play و ... را اضافه می کند. مقداری که میگیرد:controls
Loop: در صورت اتمام فایل صوتی دوباره از اول شروع به پخش می کند. مقداری که میگیرد: loop
Preload: کاری می کند که صدا در هنگام لود شدن صفحه آماده پخش شود. مقداری که میگیرد: perload
Src: آدرس قایلی که باید پخش شود. مقداری که میگیرد. مقداری که میگیرد: یک url

[حسین جهانبخش]

ذخیره داده ها بر روی کامپیوتر کاربر (Client)
HTML5 دو شیء جدید برای ذخیره سازی داده ها بر روی کلاینت معرفی کرده است:
localStorage: ذخیره داده هایی که هیچ محدودیت زمانی ندارند.
sessionStorage: داده های یک جلسه (session) را ذخیره می کند.

در گذشته این کار توسط کوکی ها صورت می گیرد. کوکی ها برای تعداد زیاد داده ها کارایی ندارد، زیرا کوکی ها با هر بار درخواست از سرور انتقال پیدا می کنند، که این باعث کاهش سرعت و عدم کارایی مناسب می شود.
در HTML5 داده ها با هر بار درخواست از سرور ارسال نمی شود، اما فقط زمانی که نیاز به آنها داشته باشیم استفاده می شوند. امکان ذخیره مقدار زیادی اطلاعات بدون تاثیر منفی روی کارایی سایت را ذخیره کرد.
داده های سایت های مختلف در محدوده های مختلفی ذخیره میشود و هر وب سایت فقط به داده هایی که خودش ذخیره کرده می تواند دسترسی پیدا کند.
HTML5 از جاوااسکریپت برای ذخیره سازی و دسترسی به داده ها استفاده می کند.

شیء localStorage
این شیء داده ها را برای زمان نامحدودی ذخیره می کند. این داده ها روز بعد، هفته بعد و حتی سال بعد در دسترس خواهد بود.

چگونگی ایجاد و دسترسی به loaclStorage

کد:

<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

مثال زیر تعداد دفعاتی که یک کاربر صفحه را دیده نشان می دهد.

کد:

<script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

شیء sessionStorage
این شیء اطلاعات یک جسله را ذخیره می کند. این اطلاعات زمانی که کاربر پنجره را می بندد از بین می رود.

چگونگی ایجاد و دسترسی به sessionStorage

کد:

<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>

مثال زیر تعداد دفعات مشاهده کاربر از یک صفحه در جلسه جاری را نشان می دهد:

کد:

<script type="text/javascript">
if (sessionStorage.pagecount)
  {
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
  }
else
  {
  sessionStorage.pagecount=1;
  }
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>

[حسین جهانبخش]

انواع ورودی جدید در HTML5
HTML5 چند نوع  input جدید برای فرم ها دارد. این امکانات اجازه کنترل بهتر و بررسی اعتبار یک ورودی را فراهم می کند.
در این جلسه به بررسی انواع جدید ورودی می پردازم:
email
url
number
range
Date pickers (date، month، week، time، datetime، datetieme-local)
search
color

پشتیبانی مرورگرها:
شما نگران نباشید. درست است که بعضی از مرورگرها از این انواع ورودی جدید پشتیبانی نمی کنند ولی در صورت عدم پشتیبانی هم با آن ها مثل ورودی های متنی ساده برخورد می کنند و مشکلی پیش نمی آید.
در حال حاضر مرورگر اپرا بهترین پشتیبانی را از این انواع جدید ورودی دارد، بهتر است برای تست کدهای این بخش از این مرورگر استفاده نمایید.

نوع ورودی email

کد:

E-mail: <input type="email" name="user_email" />

فقط ایمیل بصورت adds@site.com را دریافت می کند.

نوع ورودی url

کد:

Homepage: <input type="url" name="user_url" />

نوع ورودی number

کد:

Points: <input type="number" name="points" min="1" max="10" />

صفات زیر محدودیت هایی که روی عدد ورودی می توانید اعمال کنید نشان می دهد:
max مقدار بیشترین عدد مجازی که کاربر می تواند وارد کند.
min مقدار کمترین عددی که کاربر می تواند وارد نماید.
step فاصله بین اعدای که کاربر مجاز به استفاده است نشان می دهد. (مثلا اگر step=3 باشد کاربر فقط می تواند از اعداد -3،0،3،6،9  و ... استفاده کند.)
value مقدار پیشفرض فیلد را مشخص می کند.

نوع ورودی range
این نوع ورودی  تقریبا مثل همان نوع ورودی number است. فقط نوع range به صورت یک اسلاید بار نمایش داده می شود.
شما می توانید محدودیت هایی روی اعداد در دسترس در نظر بگیرید:

کد:

<input type="range" name="points" min="1" max="10" />

صفات زیر محدودیت هایی که روی عدد ورودی در نوع ورودی range می توانید اعمال کنید نشان می دهد:
max مقدار بیشترین عدد مجازی که کاربر می تواند وارد کند.
min مقدار کمترین عددی که کاربر می تواند وارد نماید.
step فاصله بین اعدای که کاربر مجاز به استفاده است نشان می دهد. (مثلا اگر step=3 باشد کاربر فقط می تواند از اعداد -3،0،3،6،9  و ... استفاده کند.)
value مقدار پیشفرض فیلد را مشخص می کند.

نوع ورودی Date Pickers
HTML5 چندین نوع ورودی جدید برای انتخاب زمان و تاریخ ارائه می دهد:
date: تاریخ روز، ماه و سال را انتخاب می کند.
month: ماه و سال را انتخاب می کند.
week: هفته و سال را انتخاب می کند.
time: زمان را انتخاب می کند (ساعت و دقیقه)
datetime: زمان، روز، ماه و سال را بر حسب ساعت جهانی (UTC) انتخاب می کند.
datetime-local: زمان، روز، ماه و سال را بر حسب زمان محلی انتخاب می کند.

کد:

Date: <input type="date" name="user_date" />

نوع ورودی search
برای فیلدهای جستجو از این فیلد استفاده می شود، مثل جستجوی سایت و جستجوی گوگل.
فیلد جستجو مثل یک فیلد متن معمولی است.

نوع ورودی color
یک فیلد ورودی که باید حتماً شامل یک رنگ باشد. این نوع ورودی به شما اجازه می دهد یک رنگ را از جعبه رنگ انتخاب نمایید.

کد:

Color: <input type="color" name="user_color" />

[حسین جهانبخش]

عناصر فرم جدید در HTML5
HTML5 چندین تگ و صفت جدید برای فرم ها در نظر گرفته است.

در این جلسه ما به این 3 عنصر جدید در فرم می پردازیم:
datalist
keygen
output

پشتیبانی مرورگرها
در حال حاضر IE و Safari از هیچ کدام از این سه تگ پشتیبانی نمی کند.
Firefox از دوتای اول پشتیبانی می کند.
Opera از تمام آن ها پشتیبانی می کند.
Chrome از دوتای آخر پشتیبانی می کند.

عنصر datalist
این عنصر لیستی از عناصر را برای یک فیلد ورودی مهیا می کند. این لیست با عناصر قابل انتخاب در داخل datalist ایجاد می شود.
برای اتصال یک datalist به یک فیاد ورودی، خاصیت list برای آن فیلد را به id یک datalist تعریف می کنیم.
مثال:

کد:

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="Hussein Jahanbakhsh" value="http://www.husseinjahan.mihanblog.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

نکته: عناصر انتخابی حتماً باید یک value داشته باشند.

عنصر keygen
هدف این عنصر مهیا کردن راهی مطمئن برای شناسایی کاربران مهیا می کند. این عنصر یک تولید کننده جفت کلید است (key-pair generator). وقتی یک فرم ارسال می شود، 2 کلید تولید می شود، یک کلید عمومی (public) و یک کلید خصوصی (private).
کلید خصوصی در کلاینت ذخیره می شود و کلید عمومی به سرور می رود. کلید عمومی می تواند برای ایجاد یک گواهی کلاینت برای شناسایی کاربر در آینده به کار رود.
در حال حاضر پشتیبانی مرورگرها برای یک استاندارد امنیتی مناسب به اندازه کافی مناسب نیست.
مثال: (این مثال به دلیل اینکه شما از سروری غیر از W3C قصد اتصال به آن را دارید کار نمی کند. می توانید برای مشاهده نحوه کارکرد این مثال از لینک http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_keygen استفاده کنید.)

کد:

<form action=" http://www.w3schools.com/HTML5/demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

عنصر output
این عنصر برای انواع مختلف خروجی مثل خروجی محاسبات یا اسکریپت کاربرد دارد:

کد:

<output id="result" onforminput="resCalc()"></output>

مثال کامل:

کد:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function resCalc()
{
numA=document.getElementById("num_a").value;
numB=document.getElementById("num_b").value;
document.getElementById("result").value=Number(numA)+Number(numB);
}
</script>
</head>
<body>
<p>Simple calculator using the output element:</p>
<form onsubmit="return false">
 <input id="num_a" /> +
 <input id="num_b" /> =
 <output id="result" onforminput="resCalc()"></output>
</form>
</body>
</html>

[حسین جهانبخش]

صفات فرم جدید در HTML5
در این جلسه ما به بعضی صفات جدید تگ های <form> و <input> می پردازیم.

خصوصیات فرم جدید:
autocomplete
novalidate

خصوصیات فیلدهای ورودی جدید:
autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height and width
list
min, max and step
multiple
pattern (regexp)
placeholder
required

پشتیبانی مرورگرها
مرورگرهای firefox، Opera و Chrome بهترین پشتیبانی را از ایت صفات جدید دارند ولی IE و Safari از آنها جز در چند مورد محدود پشتیبانی نمی کنند.

صفت autocomplete
این صفت مشخص می کند که فرم باید یک تابع autocomplete داشته باشد.
نکته: این صفت برای تگ <form> و این انواع ورودی تگ <input> به کار می رود: text، search، url، telephone، email، password، datepickers، range و color.
وقتی که کاربری شروع به تایپ در فیلدهای autocomplete می کند، مرورگر گزینه های مناسبی را برای پر کردن فیلد نمایش می دهد.
مثال: (از لینک زیر برای مشاهده مثال به صورت کامل استفاده کنید: http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_autocomplete )

کد:

<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

نکته: در بعضی مرورگرها باید خاصیت Autocomplete را فعال کنید تا این مثال کار کند.

صفت autofocus
این صفت باعث می شود که بعد از لود شدن صفحه اوتوماتیک روی آن فیلد فوکوس کند.

نکته: صفت autofocus برای تمام انواع ورودی ها کار می کند.

مثال:

کد:

User name: <input type="text" name="user_name"  autofocus="autofocus" />

صفت form
این صفت فرم یا فرم هایی که آن فیلد به آن ها تعلق دارد را مشخص می کند

نکته: صفت form برای تمام انواع ورودی ها کار می کند.

این صفت باید به id فرم مورد نظرتان اشاره کند.
مثال:

کد:

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

نکته: برای اتصال یک فیلد به چند فرم باید با space بین id فرم ها فاصله بگذارید.

صفاتی برای تغییر صفات فرم
این صفات برای لغو بعضی از صفاتی است که برای تگ form تنظیم شده است.
این صفات عبارتند از:
formaction: صفت action فرم را بازنویسی می کند. (یعنی صفت Action که برای فرم تنظیم شده است را لغو و آن را با مقدار ورد نظر تغییر می دهد.)
formenctype: صفت enctype فرم را بازنویسی می کند.
formmethod: صفت method فرم را بازنویسی می کند.
formnovalidate: صفت novalidate فرم را بازنویسی می کند.
formtarget: صفت target فرم را تغییر می دهد.

نکته: بازنویسی صفات فرم فقط برای این انواع ورودی <input> کار می کند: submit و image.

مثال:

کد:

<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true"
value="Submit without validation" />
<br />
</form>

نکته: از این صفات می توان برای ساخت دکمه های submit متفاوت که کارهای متفاوتی انجام می دهند استفاده کرد.

صفات height و width
این صفات ارتفاع و عرض تصاویر برای نوع ورودی image مشخص می کند.

نکته: همانطور که مشخص است این صفت فقط برای نوع ورودی image کار می کند.

مثال:

کد:

<input type="image" src="img_submit.gif" width="24" height="24" />

صفت list
این صفت یک datalist را برای آن نوع ورودی مشخص می کند. یک datalist مجموعه ای از انتخاب ها برای یک فیلد ورودی است که در جلسه قبل توضیح داده شد.
نکته: این صفت برای انواع ورودی زیر فقط کار می کند: text،  search،  url،  telephone،  email،  datepickers، range و color.
مثال:

کد:

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="Hussein Jahanbakhsh" value="http://www.husseinjahan.mihanblog.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

صفات min، max و step
این صفات در جلسه قبل کاملاً توضیح داده شد. به جلسه قبل مراجعه کنید.

نکته: این صفت فقط برای این انواع ورودی کار می کند: date pickers، number و range>

مثال:
Points: <input type="number" name="points" min="0" max="10" step="3" />

صفت multiple
این صفت نشان میدهد که مقادیر متعددی می توان برای آن فیلد ورودی انتخاب کرد. بین مقادیر با کاما (,) فاصله بیندازید.
نکته: این صفت برای انواع ورودی زیر کار می کند: email و file

کد:

Select images: <input type="file" name="img" multiple="multiple" />

صفت novalidate
این صفت نشان می دهد که این فرم برای ارسال به سرور نیاز به اعتبارسنجی ندارد.  اگر این صفت برای فرم مشخص شده باشد هیچیک از فیلدهای آن فرم از نظر اعتبارسنجی بررسی نمی شود.
این صفت برای تگ <form> و این انواع ورودی کار می کند: text، search، url، telephone، email، password، date pickers، range و color.
مثال:

کد:

<form action="demo_form.asp" novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>

صفت pattern
این صفت الگویی برای بررسی اعتبار یک فیلد ورودی مشخص می کند. این الگو یک یک عبارت منظم (regular expression) است که می توانید در جستجو در اینترنت عبارات منظم و نحوه ایجاد آن ها را بیابید.
نکته: این صفت با این انواع ورودی کار می کند: text، search، url، telephone، email، password.
مثال زیر یک فیلد متنی را نشان می دهد که می تواند فقط شامل 3 حرف باشد و بیشتر از آن را نمی پذیرد. (3 حرف و نه اعداد یا کاراکترهای خاص)

کد:

Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />

صفت placeholder
این صفت یک عبارت را به صورت کم رنگ در داخل فیلد ورودی می نویسد که با فوکوس روی آن فیلد از بین می رود و فیلد خالی می شود.

کد:

[code]<input type="search" name="user_search"  placeholder="Search Hussein Jahanbakhsh’s Blog" />

[/code]

صفت required
این صفت مشخص می کند که آن فیلد قبل از ارسال به سرور باید حتما پر شده باشد.
نکته: این صفت با انواع ورودی زیر کار می کند: text، search، url، telephone، email، password، date pickers، range، number، checkbox، radio و file.

کد:

Name: <input type="text" name="usr_name" required="required" />

[حسین جهانبخش]

بسیار خوب. مقدمات HTML5 تمام شد و با عناصر جدید HTML5 تا حدودی آشنا شدید. از این به بعد با تمام تگ های HTML5 آشنا می شوید که این باعث می شود یک رفرنس کامل از تگ های HTML5 در دسترس شما باشد.
همانطور که دیدید HTML5 تگ های جدیدی را برای کار با صدا، ویدیو، تصاویر، ذخیره داده ها در سمت کلاینت و صفحات تعاملی ایجاد کرده است. ضمناً عناصر و تگ های جدیدی مثل <nav>، <header>، <footer> و <figure> را ایجاد کرده است.
گروه های مختلفی از شرکت های بزرگ اینترنتی، کامپیوتری و سازنده تلفن های همراه روی این استاندارد جدید در حال کار هستند مثل گوگل، مایکروسافت، اپل، موزیلا، اپرا، نوکیا، ای او ال و آی بی ام.
اما...
HTML5 هنوز از سوی W3C استاندارد دلخواه نیست و نسخه پیشنهادی آن ها نیست.
لیست کامل تگ های HTML5 در اینجا قرار می گیرد و به مرور در طی جلسات آینده که هر یک از تگ ها را توضیح دادم لینکی از صفحه توضیحات هر تگ در زیر آن اضافه می کنم.
اگر با توضیحات کوتاهی که برای هر تگ آورده ام متوجه کارایی آن نشدید اصلاً نگران نباشید با تکمیل این مرجع با همه این عناصر آشنا خواهید شد.
لیست تگ ها به ترتیب حروف الفبا:

کد:

<!--...-->

ایجاد توضیحات
http://www.aiapir.com/forum/index.php/topic,1999.msg4638.html#msg4638

کد:

<!DOCTYPE>

تعریف نوع سند
http://www.aiapir.com/forum/index.php/topic,1999.msg4658.html#msg4658

کد:

<a>

تعریف یک فراپیوند (لینک)
http://www.aiapir.com/forum/index.php/topic,1999.msg4690.html#msg4690

<abbr>
تعریف یک اختصار

<acronym>
این تگ در HTML5 دیگر پشتیبانی نمی شود.

<address>
یک عنصر Address را تعریف می کند.

<applet>
این تگ در HTML5 دیگر پشتیبانی نمی شود.

<area>
یک ناحیه را برای یک نقشه تصویری تعریف می کند.

<article>
تعریف یک مقاله (article)

<aside>
محتویاتی که از محتویات صفحه کنار گذاشته شده تعریف می کند.

<audio>
تعریف یک محتوای صوتی

<b>
تعریف یک متن تو پر

<base>
تعریف یک URL پایه ای برای لینک های یک صفحه

<basefont>
این تگ در HTML5 دیگر پشتیبانی نمی شود.

<bdo>
تعریف جهت (direction) نمایش متن

<big>
این تگ در HTML5 دیگر پشتیبانی نمی شود.

<blockquote>
تعریف یک نقل قول طولانی

<body>
تعریف عنصر body

<br>
ایجاد یک شکست خط (line break)

<button>
تعریف یک دکمه

<canvas>
تعریف گرافیک (تصاویر)

<caption>
تعریف عنوان یک جدول

<center>
این تگ در HTML5 دیگر پشتیبانی نمی شود.

<cite>
تعریف یک نقل قول

<code>
تعریف متن کد کامپیوتری

<col>
تعریف صفتی برای ستونهای جدول

<colgroup>
تعریف گروهی از ستونهای جدول

<command>
تعریف یک دکمه command

<datalist>
تعریف یک لیست پایین آمدنی (dropdown list)

<dd>
ایجاد یک شرح تعریف (definition description)

<del>
تعریف یک متن حذف شده

<details>
تعریف جزئیات یک تگ (عنصر)

<dfn>
تعریف یک definition term (اصطلاح تعریف)

<dir>
این تگ در HTML5 دیگر پشتیبانی نمی شود.

<div>
تعریف یک بخش در یک صفحه

<dl>
ایجاد یک لیست تعریف (definition list)

<dt>
تعریف یک definition term (اصطلاح تعریف)

<em>
ایجاد یک متن تاکیدی

<embed>
تعریف یک محتوای تعاملی یا یک پلاگین خارجی

<fieldset>
تعریف یک مجموعه فیلد

<figcaption>
تعریف عنوانی برای عنصر figure

<figure>
تعریف گروهی از محتواهای مدیا و عناوین آنها

<font>
این تگ در HTML5 دیگر پشتیبانی نمی شود.

<footer>
تعریف یک پانویس برای یک بخش یا یک صفحه

<form>    
تعریف یک فرم
 
<frame>
این تگ در HTML5 دیگر پشتیبانی نمی شود.
 
<frameset>
این تگ در HTML5 دیگر پشتیبانی نمی شود.

<h1> to <h6>
تعریف header1 تا header6

<head>
تعریف اطلاعاتی برای صفحه

<header>
تعریف header برای یک بخش یا یک صفحه

<hgroup>
تعریف اطلاعاتی برای یک بخش

<hr>
تعریف یک خط افقی در جایی از صفحه

<html>
تعریف یک سند html

<i>
تعریف یک متن کج (ایتالیک)

<iframe>
ایجاد یک زیر پنجره داخلی (فریم)

<img>
تعریف یک تصویر

<input>
تعریف یک فیلد ورودی (input)

<ins>
تعریف یک متن درج شده
 
<keygen>
تعریف یک کلید ایجاد شده در یک فرم
 
<kbd>
تعریف متن صفحه کلید

<label>
تعریف یک لیبل برای یک کنترل فرم
 
<legend>
تعریف یک عنوان برای مجموعه فیلد (fielldset)

<li>
تعریف یک عضو لیست (list item)

<link>
تعریف یک مرجع منبع
 
<map>
تعریف یک نقشه تصویری
 
<mark>
تعریف یک متن نشانه گذاری شده (market text)

<menu>
تعریف یک لیست منو
 
<meta>
تعریف اطلاعات متا
 
<meter>
تعریف یک اندازه گیری  در یک بازه از پیش تعریف شده
 
<nav>
تعریف لینک های ناوبری (navigation links)
<noframes>
این تگ در HTML5 دیگر پشتیبانی نمی شود.
 
<noscript>
تعریف یک بخش noscript

<object>
تعریف یک شیء جاسازی شده (embedded object)

<ol>
تعریف یک لیست مرتب

<optgroup>
تعریف یک گروه گزینه های انتخاب

<option>
تعریف یک گزینه انتخاب در یک لیست پایین آمدنی

<output>
تعریف بعضی از انواع خروجی

<p>
تعریف یک پاراگراف

<param>
تعریف یک پارامتر برای یک شیء

<pre>
تعریف یک متن از پیش قالب بندی شده

<progress>
تعریف پیشرفت یک وظیفه از هر نوعی

<q>
تعریف یک نقل قول کوتاه

<rp>
در ruby annotation استفاده می شود و برای تعریف چیزی است که مرورگر در صورت  پشتیبانی نکردن از عنصر ruby باید نمایش دهد.

<rt>
تعریف توضیحات حاشیه نویسی های ruby

<ruby>
تعریف حاشیه نویسی ruby (این عنصر برای نمایش تلفظ کاراکترهای زبان های آسیای شرقی کاربرد دارد و در ایران کاربردی ندارد.)

<s>
تعریف متنی که در حال حاضر درست نیست.

<samp>
تعریف یک کد کامپیوتری ساده

<script>
تعریف یک اسکریپت

<section>
تعریف یک بخش (section)

<select>
تعریف یک لیست با قابلیت انتخاب شدن

<small>
تعریف یک متن کوچک

<source>
تعریف منبع یک رسانه (مدیا)

<span>
تعریف یک بخش در صفحه

<strike>
این تگ در HTML5 دیگر پشتیبانی نمی شود.

<strong>
تعریف یک متن توپر (strong)

<style>
تعریف یک CSS

<sub>
تعریف یک متن زیر نویس

<summary>
تعریف عنوان برای عنصر “detail”

<sup>
تعریف یک متن بالانویس

<table>
تعریف یک جدول

<tbody>
تعریف یک بدنه جدول (table body)

<td>
تعریف یک سلول جدول

<textarea>
تعریف یک ناحیه متنی برای دریافت متن از کاربر

<tfoot>
تعریف پانویس یک جدول

<th>
تعریف هدر (سر تیتر) یک جدول

<thead>
تعریف هدر (سر تیتر) یک جدول

<time>
تعریف یک عنصر زمان/تاریخ

<title>
تعریف عنوان سند

<tr>
تعریف یک سطر در جدول

<tt>
این تگ در HTML5 دیگر پشتیبانی نمی شود.

<u>
این تگ در HTML5 دیگر پشتیبانی نمی شود.

<ul>
تعریف یک لیست غیر مرتب (بدون شماره گذاری)

<var>
تعریف یک متغیر

<video>
تعریف یک عنصر ویدیویی

<wbr>
تعریف یک شکست خط ممکن

<xmp>
این تگ در HTML5 دیگر پشتیبانی نمی شود.

[حسین جهانبخش]

بابا این همه استقبال آخه چرا؟!!! چقدر آدمو خجالت زده می کنید؟!! این همه تشکر نداره، کاری بوده که از دستمون بر میومده!!!!

[كیانی]

سلام
بازدید خوب از این تاپیک گویای استقبال کاربران عزیز ماست.
و فکر کنم وقت آن رسیده در قالب یک مقاله کامل برای انتشار در سایت آماده شود.

سپاس .
یا حق

[حسین جهانبخش]

چشم جناب کیانی.
ولی هنوز مرجع کامل تگ ها رو شروع نکردم. می تونیم این بخش ها که البته 3 یا حداکثر 4 روز دیگه تکمیل میشه رو در یک فایل پی دی اف و مرجع تگ ها رو در یک پی دی اف مجزا و بعد از تکمیل منتشر کنیم.

[حسین جهانبخش]

قبل از اینکه مرجع کامل تگ های HTML5 را شروع کنید باید با دو موضوع آشنا شوید. یکی صفات جهانی و دیگری صفات رویداد.

صفات زیر توسط تمام تگ های HTML5 به جز تعداد اندکی پشتیبانی می شود.

accesskey
مقداری که می گیرد: کاراکتر – یک یا چند کاراکتر کی برد که با Space از هم جدا می شوند.
توضیح: یک میانبر روی کی برد مشخص می کند که کاربر بازدن آن می تواند به آن عنصر دسترسی داشته باشد.
مثال:

کد:

<a href="http://www.w3schools.com/" accesskey="w">W3Schools</a><br />
<a href="http://www.google.com/" accesskey="g">Google</a>

class
مقداری که می گیرد: نام یک کلاس
توضیح: کلاسی را برای یک عنصر مشخص می کند. البته می توان از آن برای جاوااسکریپت هم استفاده کرد که توسط آن بتواند کلاس یک عنصر HTML را به وسیله HTML DOM تغییر دهد.
مثال:

کد:

<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph. :)</p>
</body>
</html>

نکته: خاصیت کلاس برای این تگ های HTML کاربرد ندارد: base، head، hml، meta، param، script، stryle و title.

نکته: می توان چند نام کلاس را به یک عنصر HTML اختصاص داد. مثلاً

کد:

<span class="left_menu important">

این کار باعث ادغام چند CSS برای یک تگ می شود. برای انتساب چند کلاس همانطور که دیدید باید از اسپیس بین دو کلاس استفاده کنید.

نکته: نام کلاس ها را با عدد شروع نکنید. اکثر مرورگرها از آن پشتیبانی نمی کنند.

مثال: انتساب دو کلاس به یک عنصر:

کد:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1.intro
{
color:blue;
text-align:center;
}
.important {background-color:yellow;}
</style>
</head>
<body>
<h1 class="intro important">Header 1</h1>
<p>A paragraph.</p>
</body>
</html>

contenteditable  (جدید)
مقداری که می گیرد: true یا false یا  inherit (پیروی از والد، اگر والد قابل ویرایش باشد آن هم قابل ویرایش است.)
توضیح: مشخص می کند که آیا کاربر مجاز به ویرایش محتویات هست یا نه.
مثال:

کد:

<p contenteditable="true">This is a paragraph. It is editable. Try to change this text.</p>

contextmenu  (جدید)
مقداری که می گیرد: id منو (menu_id)
context menuی آن عنصر را مشخص می کند.


dir
مقداری که میگیرد: rtl (راست به چپ) یا ltr (چپ به راست) یا auto (به مرورگر اجازه می دهیم خودش جهت مناسب را انتخاب کند، از این گزینه فقط در صورتی استفاده کنید که جهت متن نا مشخص باشد.)
توضیح: جهت متن محتویات یک عنصر را مشخص می کند.
مثال:

کد:

<p dir="rtl">Write this text right-to-left!</p>

draggable (جدید)
مقادیری که می گیرد: true یا false  یا auto
توضیحات:نشان میدهد که آیا کاربر مجاز به جابجا کردن آن عنصر هست یا نه


dropzone (جدید)
مقادیری که می گیرد: copy یا move یا link
توضیحات: نشان می دهد که زمانی که عنصر جابجا شده رها شد چه اتفاقی رخ دهد.


hidden
مقداری که می گیرد: hidden
توضیحات: عناصر مخفی نمایش داده نمی شوند.
مثال:

کد:

<p hidden="hidden">This is a paragraph.</p>

از این تگ می توانید در زمانی استفاده کنید که کاربر باید یک کاری را انجام دهد تا یک عنصر به و نمایش داده شود، پس از انجام کار توسط کاربر (مثل کلیک روی یک دکمه) آن عنصر توسط جاوااسکریپت نمایش داده می شود.

بقیه خواص جهانی در جلسه بعد

[حسین جهانبخش]

بخش دوم صفات جهانی در زیر آمده است. همانطور که در جلسه قبل توضیح دادم صفات زیر توسط تمام تگ های HTML5 به جز تعداد اندکی پشتیبانی می شود.

id
مقداری که میگیرد: یک id
یک id منحصر به فرد برای هر عنصر تعریف می کند. از صفت id می توان به عنوان یک لینک anchor توسط یک کد جاوااسکریپت (به کمک HTNL DOM) یا توسط CSS برای ایجاد یا تغییر استیل یک عنصر با id خاص استفاده کرد.
مثال:

کد:

<html>
<head>
<script type="text/javascript">
function change_header()
{
document.getElementById("myHeader").innerHTML="Nice day!";
}
</script>
</head>
<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="change_header()">Change text</button>
</body>
</html>

استفاده از id در CSS

کد:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#topHeader{color:blue;}
#important{color:green;}
</style>
</head>
<body>

<h1 id="topHeader">Header 1</h1>
<p>A paragraph.</p>
<p id="important">Note that this is an important paragraph. :)</p>

</body>
</html>

استفاده از id برای ساخت لینک Anchor (در لینک زیر)
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_global_id_anchor



lang
مقداری که میگیرد: کد زبان مورد نظر
زبان محتویات عنصر مورد نظر را مشخص می کند.
مثال:

کد:

<p lang="fr">Ceci est un paragraphe.</p>

فهرست کدهای زبانی قابل استفاده در این صفت (در لینک مقابل):  http://www.w3schools.com/tags/ref_language_codes.asp


spellcheck
مقداری که میگیرد: true یا false
توضیحات: این صفتی است که مشخص می کند محتویات یک عنصر از نظر گرامری بررسی شوند یا نه. متن های زیر قابل بررسی هستند:
-   مقدار یک فیلد ورودی متنی (غیر پسوردی)
-   مقدار یک عنصر text area
-   متن در عناصر قابل ویرایش (مانند مثال بعد)
مثال:

کد:

<p contenteditable="true" spellcheck="true">This is a praggagraph. It is editable. Try to change this text.</p>

style
مقداری که میگیرد: تعاریف و دستورات CSS که با سمی کالن ( ; ) از هم جدا می شوند.
توضیحات: سبک های درون خطی را برای عناصر مختلف تعیین می کند. این سبک ها بر سبک هایی که در داخل تگ های <style> و فایل های css خارجی ارجحیت دارد و آن ها را override می کند.
مثال:

کد:

<h1 style="color:blue;text-align:center">This is a header</h1>
<p style="color:green">This is a paragraph.</p>

tabindex
مقداری که میگیرد: یک عدد
توضیحات: این اعداد ترتیبی که با زدن دکمه Tab صفحه کلید توسط کاربر روی آن ها می رود را مشخص می کند.
مثال:

کد:

<a href="http://www.husseinjahan.mihanblog.com/" tabindex="2">Hussein’s Blog</a><br />
<a href="http://www.Aiapir.com/" tabindex="1">آیاپیر</a><br />
<a href="http://www.google.com/" tabindex="3">Google</a>

title
مقداری که میگیرد: یک متن
توضیحات: این خاصیت اطلاعات بیشتری درباره یک عنصر می دهد. این اطلاعات وقتی ماوس رو آن عنصر قرار می گیرد به صورت tooltip نمایش داده می شود.

[حسین جهانبخش]

HTML4 توانایی اجازه دادن به رویدادها برای راه اندازی اعمال، مثل شروع یک کد جاوااسکریپت وقتی که یک کاربر روی یک عنصر کلیک می کند، را ایجاد کرد. برای آموزش برنامه نویسی رویدادها باید به آموزش های جاوااسکریپت و DHTML مراجعه نمایید.
در پایین خواص رویداد جهانی که می توانید در عناصر HTML5 از آن ها استفاده نمایید آورده شده است.

خواص رویداد Window
این خواص روی تگ <body> اعمال می شود:
onafterprint
اسکریپت بعد از پرینت یک سند اجرا می شود.
onbeforeprint
اسکریپت قبل از پرینت یک سند اجرا می شود.
onbeforeonload
اسکریپت قبل از لود صفحه اجرا می شود.
onblur
اسکریپت در صورت که تمرکز (فوکس) کاربر از صفحه خارج شد.
onerror
اسکریپت در صورت بروز یک خطا رخ می دهد.
onfocus
اسکریپت در زمانی که کاربر روی یک پنجره فوکوس کرد اجرا می شود.
onhaschange
اسکریپت در زمانی که تغییر در سند ایجاد شود اجرا می شود.
onload
اسکریپت در زمانی که صفحه لود می شود اجرا می شود.
onmessage
اسکیرپت زمانی که یک کادر پیام فراخوانی می شود، اجرا می شود.
onoffline
اسکریپت زمانی اجرا می شود که سند به حالت آفلاین می رود.
ononline
اسکریپت زمانی اجرا می شود که سند آنلاین می شود.
onpagehide
اسکریپت زمانی اجرا می شود که سند مخفی می شود.
onpageshow
اسکریپت زمانی اجرا می شود که سند نمیان می شود.
onpopstate
اسکریپت زمانی اجرا می شود که تغییراتی در history مرورگر رخ دهد.
onredo
اسکریپت زمانی اجرا می شود که کاربر روی سند یک عمل redo انجام دهد.
onresize
اسکریپت زمانی اجرا می شود که کاربر بخواهد اندازه پنجره را تغییر دهد.
onstorage
اسکریپت زمانی اجرا می شود که صفحه لود می شود.
onundo
اسکریپت زمانی اجرا می شود که کاربر روی سند یک عمل undo انجام دهد.
onunload
اسکریپت زمانی اجرا می شود که کاربر سند را ترک کند.


خواص رویداد Form
رویدادهایی که توسط یک فرم HTML فراخوانی می شود. رئی تمام تگ های HTML5 اعمال می شود ولی بیشتر وی عناصر فرم آن ها را اعمال می کند.
onblur
اسکریپت زمانی اجرا می شود که یک تمرکز از روی یک عنصر خارج شود.
onchange
اسکریپت زمانی اجرا می شود که تغییر در عنصر رخ دهد.
oncontextmenu
اسکریپت زمانی اجرا می شود که یک منوی context menu اجرا شود.
onfocus
اسکریپت زمانی اجرا می شود که روی یک عنصر فوکوس شود.
onformchange
اسکریپت زمانی اجرا می شود که روی یک فرم تغییر اعمال شود.
onforminput
اسکریپت زمانی اجرا می شود که یک فرم یک ورودی را از کاربر بگیرد.
oninput
اسکریپت زمانی اجرا می شود که یک عنصر یک ورودی را از کاربر بگیرد.
oninvalid
اسکریپت زمانی اجرا می شود که یک عنصر نا معتبر باشد.
onreset
اسکریپت زمانی اجرا می شود که یک فرم ریست شود (این صفت در HTML5 نا معتبر است.)
onselect
اسکریپت زمانی اجرا می شود که یک عنصر انتخاب شده است.
onsubmit
اسکریپت زمانی اجرا می شود که یک فرم ثبت (submit) شود.


صفات Keyboard
onleydown
اسکریپت زمانی اجرا می شود که یک دکمه فشار داده شود.
onkeypress
اسکریپت زمانی اجرا می شود که یک دکمه فشار داده شده و رها شود.
onkeyup
اسکریپت زمانی اجرا می شود که یک دکمه رها شود.


صفات Mouse
onclick
اسکریپت زمانی اجرا می شود که ماوس کلیک شود.
ondblclick
اسکریپت زمانی اجرا می شود که ماوس دابل کلیک شود.
ondrag
اسکریپت زمانی اجرا می شود که عنصری درگ شود.
ondragend
اسکریپت زمانی اجرا می شود که درگ کردن عنصر خاتمه یابد.
ondragenter
اسکریپت زمانی اجرا می شود که یک عنصر در یک محیط مقصد معتبر درگ شود.
ondragleave
اسکریپت زمانی اجرا می شود که یک عنصر روی یک محیط مقصد معتبر درگ شود.
ondragstart
اسکریپت زمانی اجرا می شود که عمل درگ آغاز شود.
ondrop
اسکریپت زمانی اجرا می شود که یک عنصر درگ شده دراپ شود (رها شود)
onmousedown
اسکریپت زمانی اجرا می شود که یک دکمه ماوس فشار داده شود.
onmousemove
اسکریپت زمانی اجرا می شود که نشانگر ماوس حرکت کند.
onmouseout
اسکریپت زمانی اجرا می شود که نشانگر ماوس خارج از محیط یک عنصر حرکت کند.
onmouseover
اسکریپت زمانی اجرا می شود که نشانگر ماوس روی محیط یک عنصر حرکت کند
onmouseup
اسکریپت زمانی اجرا می شود که دکمه ماوس رها شود.
onmousewheel
اسکریپت زمانی اجرا می شود که چرخ ماوس شروع به چرخیدن کند.
onscroll
اسکریپت زمانی اجرا می شود که اسکرول بار شروع به پیمایش شود.

صفات Media
onabort
اسکریپت زمانی اجرا می شود که رویداد abort (لغو) روی دهد.
oncanplay
اسکریپت زمانی اجرا می شود که یک رسانه می تواند شروع به اجرا شود ولی شاید برای بافر شدن باد توقف کند.
oncanplaythrough
اسکریپت زمانی اجرا می شود که یک رسانه بدون اینکه بافر شود می تواند تا انتها اجرا شود.
ondurationchange
اسکریپت زمانی اجرا می شود که زمان یک رسانه تغییر کند.
onemptied
اسکریپت زمانی اجرا می شود که منبع یک رسانه به صورت ناگهانی خالی شود (در اثر خطای شبکه یا خطا در لود یا ...)
onended
اسکریپت زمانی اجرا می شود که اجرای یک رسانه به پایان برسد.
onerror
اسکریپت زمانی اجرا می شود که خطایی در طی لود شدن یک عنصر رخ دهد.
onloadeddata
اسکریپت زمانی اجرا می شود که اطلاعات رسانه لود شده است.
onloadedmetadata
اسکریپت زمانی اجرا می شود که مدت زمان و دیگر اطلاعات مدیا برای یک عنصر media لود شده است.
onloadstart
اسکریپت زمانی اجرا می شود که لود یک مدیا آغاز شود.
onpause
اسکریپت زمانی اجرا می شود که یک رسانه pause شود.
onplay
اسکریپت زمانی اجرا می شود که یک رسانه شروع به اجرا شود.
onplaying
اسکریپت زمانی اجرا می شود که یک رسانه در حال اجراست.
onprogress
اسکریپت زمانی اجرا می شود که مرورگر در حال گرفتن یک رسانه از منبعش است.
onratechange
اسکریپت زمانی اجرا می شود که اندازه زمان اجرا  شده ی یک رسانه تغییر کرده است.
onreadystatechange
اسکریپت زمانی اجرا می شود که ready-state تغییر کند.
onseeked
اسکریپت زمانی اجرا می شود که خاصیت seeking عنصر media مقدار true ندارد و پیمایش تمام شده است.
onseeking
اسکریپت زمانی اجرا می شود که خاصیت seeking عنصر media مقدار true  دارد و پیمایش آغاز شده است.
onstalled
اسکریپت زمانی اجرا می شود که خطایی در گرفتن رسانه از منبع رخ دهد (stalled).
onsuspend
اسکریپت زمانی اجرا می شود که مرورگر در حال گرفتن یک رسانه از منبع است ولی قبل از اینکه به طور کامل گرفته شود متوقف شود.
ontimeupdate
اسکریپت زمانی اجرا می شود که رسانه موقعیت زمان اجرایی اش را تغییر دهد.
onvolumechange
اسکریپت زمانی اجرا می شود که رسانه صدایش تغییر کند و یا صدایش قطع شود (mute).
onwaiting
اسکریپت زمانی اجرا می شود که اجرای رسانه متوقف شود اما انتظار resume وجود داشته باشد.

بسیار خوب این بخش هم تمام شد و به زودی پی دی اف این 13 جلسه را منتشر خواهم کرد.

[حسین جهانبخش]

آموزش HTML5 – مرجع تگ ها - <!--...--> تگ کامنت (توضیحات)
مقدمه ی کلی بخش دوم آموزش HTML5
بسیار خوب حالا بعد از تموم شدن آشنایی با HTML5 می خواهیم به تمام تگ های HTML بپردازیم. خصوصاً تگ هایی که در نسخه 5 این زبان معرفی شده است. در ضمن خواهید دید که تعدادی از تگ های قدیمی HTML دیگر منسوخ شده و در نسخه 5 کاربرد ندارد. ساختار کلی توضیحات هر تگ مانند همان چیزی است که در W3CSchools آمده است. سعی می کنم مثال ها را در همین جا بیاورم ولی برای به دست آ.ردن مثال های بیشتر می توانید به همین وب سایت مراجعه نمایید. در رابطه با صفات کلی (جهانی) و صفات رویداد هم در 3 جلسه آخر از بخش اول این آموزش  توضیحاتی داده شده است می توانید به آن ها مراجعه نمایید.
در پایان همچنان خواهشمندم در صورت استفاده از این مطالب در وبلاگ یا وب سایتی حق نویسنده را رعایت و با استفاده از لینکی به وب سایت آیاپیر و بردن نام نویسنده به حقوق خود و دیگران پایبند باشید.

مثال:

کد:

<!--This is a comment. Comments are not displayed in the browser-->
<p>This is a paragraph.</p>

تعریف و موارد استفاده:
تگ کامنت برای قرار دادن توضیحات در کد اصلی صفحه به کار می رود. مرورگرها کامنت ها را در نظر نگرفته و از آنها عبور می کنند. می توانید از کامنت ها برای تشریح کدهای خود استفاده کنید، که این کار می تواند کار شما را در ویرایش هایی که می خواهید بعد ها روی صفحه اعمال کنید راحت تر کند.
ضمناً شما می توانید اطلاعات خاص برنامه را در داخل کامنتها قرار دهید. در این صورت کاربران قادر به دیدن آن ها نخواهند بود ولی همچنان وجود دارند. مثال ساده ای از این نوع کامنت همان متن هایی است که در داخل اسکریپت ها تگ های style نوشته می شود و مانع اجرای آنها در مرورگرهای قدیمی که از اسکریپ ها و استایل ها پشتیبانی نمی کنند و نمایش آنها به صورت یک متن خالی در داخل صفحه؛ می شود.

تفاوت ها در HTML4.01 و HTML5
هیچ تفاوتی ندارند

صفات جهانی
تگ کامنت از هیچ صفت جهانی پشتیبانی نمی کند.

صفات رویداد
تگ کامنت از هیچ صفت رویدادی پشتیبانی نمی کند.

[حسین جهانبخش]

آموزش HTML5 – مرجع تگ ها – اعلان <!DOCTYPE> در HTML5
مثال
یک سند HTML5 با اعلان درست

کد:

<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

پشتیبانی مرورگرها
تمام مرورگرهای اصلی از این تگ پشتیبانی می کنند.

تعریف و موارد استفاده
اعلان <!DOCTYPE> باید اولینِ اولین چیز در سند HTML5 باشد، قبل از تگ <html>.
اعلان doctype تگ HTML نیست، یک ساختار برای مرورگر وب است که به مرورگر توضیح می دهد که صفحه با چه زبانی نوشته شده است. باید توجه کنید که doctype را برای تمام صفحات HTMLتان معرفی نمایید، تنها در این صورت است که مرورگر می فهمد که باید انتظار چه نوع سندی را داشته باشد.
در HTML 4.01 این تگ نیاز به یک ارجاع به یک DTD داشت، زیرا HTML 4.01 بر مبنای SGML بود. HTML5 بر مبنای SGML نیست و نیاز به ارجاع به DTD نداد ولی به doctype نیاز دارد تا مرورگر بفهمد چگونه باید رفتار کند.

تفاوت ها در HTML4.01 و HTML5
در HTML 4.01 ما سه نوع doctype داشتیم که در HTML5 به فقط یک نوع کاهش پیدا کرده. مثالی از اعلان doctype در HTML 4.01 به صورت زیر است که هم بسیار طولانی است و هم برای ساختار های دیگر HTML 4.01 کابرد نداشت:

کد:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

ولی در HTML5 فقط کافیست بنویسید:

کد:

<!doctype html>

به همین راحتی

نکات
تگ <!DOCTYPE> تگ پایانی ندارد.
اعلان <!DOCTYPE> به حروف بزرگ و کوچک حساس نیست.

[حسین جهانبخش]

آموزش HTML5 – مرجع تگ ها –  تگ <a> در HTML5

مثال: لینکی به وب سایت آیاپیر

کد:

<a href="http://www.aiapir.com">Visit Aiapir.com!</a>

تعریف و موارد استفاده:
تگ <a> یک فراپیوند (هایپرلینک) ایجاد می کند که برای اتصال یک صفحه به صفحه دیگر کاربرد دارد. مهمترین صفت این عنصر صفت href است که مقصد لینک را مسخص می کند.
به صورت پیش فرض لینک ها در صفحات وب به صورت زیر نمایش داده می شود.
یک لینک دیده نشده آبی رنگ و زیرخط دار است.
یک لینک دیده شده ارغوانی و زیرخط دار است.
یک لینک فعال قرمز و زیرخط دار است.

تفاوت ها در HTML4.01 و HTML5
در HTML 4.01 این تگ یا یک فراپیوند بود یا یک لنگر (یک جای خاص از صفحه که با نام خاصی مشخص شده باشد). در HTML 5 تگ <a> همیشه یک فراپیوند است، اما اگر صفت href  مشخص نشده باشد این تگ نگدارنده برای یک فراپیوند است.
HTML 5 یک سری خواص دید دارد و از بعضی صفات HTML 4.01 پشتیبانی نمی شود.

نکات:
در صورتی که صفت href را برای تگ مشخص نکنید نمی توانید از صفات hreflang، media ، ping، rel ، target و type استفاده کنید.
یک لینک معمولاً در همان صفحه ای که وجود دارد باز می شود مگر اینکه شما یک target دیگر را مشخص کنید.
از CSS برای تغییر شکل و ساختار لینک ها استفاده نمایید.

صفات:
charset
مقداری که میگیرد: char_encoding
توضیح: در نسخه جدید پشتیبانی نمی شود.

cords
مقداری که می گیرد: مختصات
توضیح: در نسخه جدید پشتیبانی نمی شود.

href
مقدار: یک URL
توضیح: مقصد را مشخص می کند.
دستور:

کد:

<a href="value">

value یک URL است که آدرس اینترنتی مقصد را مشخص می کند و مقادیری به صورت زیر می تواند بگیرد:
یک آدرس مستقل که به یک وب سایت دیگر اشاره می کند. مثلاً href=”http://aiapir.com/husseinjahan.htm”
یک آدرس وابسته که به جایی در همان وب سایت اشاره می کند مثلاً href=”default.htm”
یک آدرس anchor (لنگر) که به یک لنگر در داخل صفجه اشاره می کند مثلاً href="#top"
مثال استفاده از لنگر را در لینک زیر می توانید پیدا کنید:

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_a_href_anchor

hreflang
مثال:

کد:

<a href="http://www.aiapir.com" hreflang="fa">Aiapir</a>

مقدار: language_code
توضیح: زبان لینک مقصد را مشخص می کند.
دستور:

کد:

<a hreflang="value">

value یک کد زبان دو حرفی است که زبان صفحه لینک شده را مشخص می کند. برای دیدن کد تمام زبان ها به لینک زیر مراجعه نمایید:

http://www.w3schools.com/tags/ref_language_codes.asp

media
مقدار: media query
توضیحات: نشان میدهد که آدرس اینترنتی مقصد برای چه رسانه یا دستگاهی بهینه شده است. مقدار پیش فرض آن all است. توضیحات بیشتر درباره این گزینه در جلسه بعد آورده می شود.

name
مقدار: section_name
توضیح: در نسخه جدید پشتیبانی نمی شود.

rel
مقدار:
alternate
author
bookmark
external
help
license
next
nofollow
noreferrer
prefetch
prev
search
sidebar
tag
توضیح: نشان دهنده رابطه ی بین این صفحه و سند مقصد است. توضیحات بیشتر درباره این گزینه در جلسه بعد آورده می شود.

rev
مقدار: یک متن
توضیح: در نسخه جدید پشتیبانی نمی شود.

shape
مقدار:
default
rect
circle
poly
توضیح: در نسخه جدید پشتیبانی نمی شود.

target
مقدار:
_blank
_parent
_self
_top
framename
توضیحات: نشان می دهد که آدرس مقصد کجا باز شود. توضیحات بیشتر درباره این گزینه در جلسه بعد آورده می شود.

Type
مقدار: mime_type
توضیحات: نوع MIME ی آدرس مقصد را مشخص می کند. توضیحات بیشتر درباره این گزینه در جلسه بعد آورده می شود.

صفات جهانی:
این تگ از صفات جهانی پشتیبانی می کند.

صفات رویداد:
این تگ همچنین از صفات رویداد پشتیبانی می کند.