معرفی HTML 5 : فصل اول – جلسه اول (اصول استفاده از HTML5)

- visibility ٢١ mode_comment

معرفی HTML 5 :  فصل اول – جلسه اول (اصول استفاده از HTML5)

با عرض سلام خدمت همه سون لرنی های عزیز امیدوارم که حال همگی خوب باشه.

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

Doctype

اولین تغییر در یک صفحه وب HTML5، نوع سند یا همان Doctype آن است.

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

یا Doctype HTML4

همانطور که می بینید، به خاطر سپردن و حفظ چنین doctype هایی قطعا سخت بود، و بایستی از نرم افزارهایی که به صورت اتوماتیک این کدها رو می نوشتن استفاده می کردیم یا از راه حل همیشگی (کپی، پیست) بهره می بردیم.

اما HTML5 آمد و خیال همه را با doctype ساده اش راحت کرد.

 

تگ HTML  

دومین خط در کدهای یک صفحه وب قطعا تگ html و تعریف زبان صفحه است.

قبلا در XHTML برای تعریف زبان صفحه وبمان از صفت xmlns استفاده می کردیم اما در html5 فقط نیاز است که از صفت lang استفاده کنیم.

تگ Head

قسمت بعدی در یک صفحه وب کدهای قسمت head است. این قسمت نیز در html5 بی نصیب نمانده و دچار تغییراتی شده. از جمله تعریف یونیکد صفحه که قبلا به شکل زیر بود :

ولی در HTML5 قسمت های اضافی حذف شده و کد به شکل زیر در آمده است

اینترنت اکسپلورر!!!

همانطور که گفتیم اینترنت اکسپلورر از ورژن 9 به بعد از html5 پشتیبانی می کند، اما متاسفانه  در ورژن های قدیمی پشتیبانی آن به صورت پیشفرض نیست و بایستی از کد زیر جهت فعال سازی آن استفاده کنیم.

پس از قرار دادن کد فوق در قسمت head صفحه ، مرورگر ie8 به پایین شروع به پشتیبانی از html5 خواهد کرد. (می توانید فایل فوق را دانلود کنید و آن را در کنار فایل htmlتان قرار دهید و سپس آن را لود کنید تا هنگام کار کردن به صورت آفلاین مشکلی براتون پیش نیاد.)

info نکته :

کاربرانی که از ie8 به پایین استفاده می کنند مشکلی نخواهند داشت؟!

متاسفانه مشکل اساسی طراحان وب همین است. همیشه بایستی نگران کاربرانی باشند که از ورژن های قدیمی ie استفاده می کنند. در صورتی که مرورگرها همیشه در حال بروزرسانی هستند اما هنوز کسانی وجود دارند که از ie6 جهت مشاهده وب سایت ها استفاده می کنند.

این کاربران قطعا نخواهند توانست که صفحه وب را آنطور که هست ببینند. در این صورت به غیر از روشی که در بالا گفتیم (استفاده از html5shiv) 3 راه حل دیگر برای این مشکل وجود دارد.

  1. استفاده از تگ های html5 برای قسمت هایی که مشکلی در ظاهر سایت به وجود نمی آورند، و استفاده از تگ div برای قسمت های مهم.
  2. تعریف المنت ها با استفاده از جاوا اسکریپت.

به طور مثال جهت تعریف تگ header از کد جاوااسکریپت زیر استفاده می کنیم :

سپس می توانیم از آن تگ استفاده کنیم.

  1. مورد سوم هم اینکه بیخیال ، به کار خودتون ادامه بدین!! 😀

ولی خب بهترین راه حل اینه که از html5shiv استفاده کنید.

استاندارد های Html5  

اگر تا به حال با XHTML کدنویسی می کردین حتما متوجه بعضی از استانداردها (قوانین) شده اید از جمله اینکه نباید نام عناصر با حروف بزرگ نوشته شوند، یا که مقادیر بایستی در دابل کوتیشن قرار بگیرند، یا بستن همه ی تگ ها حتی تگ های img و input .

ولی در html5 همچین اجبارهایی وجود ندارد، و عمل به قوانین xhtml اختیاری شده است. بطوریکه قوانین xhtml مانند بستن تگ های img و input یا link توسط validator html5 خطا در نظر گرفته نمی شود.

پس از بررسی کل موارد فوق، به این نتیجه می رسیم که یک صفحه وب پیشفرض بر اساس html5 به شکل زیر خواهد بود.

بسیار خب دوستان، امیدوارم که خسته نشده باشید. در جلسه آینده به بررسی تگ های جدید HTML5 خواهیم پرداخت.

comment دیدگاه کاربران
عَـلـیــ ـرِضـــ ـآ

خیلی خوب بود
خسته نباشید ❓

محمد بابازاده

ببخشید یک سوال، آیا امکانش هست معادلات چند مجهولی ریاضیات رو با عنصر Canvas رسم کنیم ؟

سجاد دریس

سلام.
100%
این نمونه رو ببیند

محمد بابازاده

اگر بخواییم از راستای z نیز استفاده کنیم و فضای سه بعدی را در 2 بعد نشون بدیم ( مثل همین برگه های کاغذ ) نمونه ای دارید مثل این سایت ؟

سجاد دریس

نه متاسفانه. نمونه ای پیدا نکردم.

راد نمازی

سجاد دریس

سلام.
لطفا یه نمونه بدید، ببینم این وبسایت های سه بعدی به چه شکلن؟!!

مجتبي

سلام
نماد اعتماد الکترونیک تون فقط یک عکس است. تقلبی است!!!!
متاسفم براتون
سایت به این خوبی . برای چی همچنین کاری انجام میدین؟ خجالت داره واقعا

سجاد دریس

بفرمائید به این لینک :
http://www.enamad.ir/ShopList.aspx
و توی کادر “نام دامنه” عبارت 7learn.com رو جستجو کنید.

دوست عزیز به لینکی که اقا سجاد دادند مراجعه کنید و نماد سون لرن رو ببینید .
متاسفانه کد اصلی نماد بعضا باعث کند شدن لود سایت می شد و فقط به همین دلیل از تصویر ساده استفاده کردیم .
لطفا زود قضاوت نکنید!

hiva m

سلام
HTML5 چند قسمته ؟
آموزشش کامل شده ؟

لقمان آوند

آموزش های این فصل تمام شده .

جواد

سلام
چرا پس ادامه نمی دید html5 رو؟
من مشتاقانه منتظرم

وحید صالحی

بزودی دوست عزیز دوره کاملش در سایت برگزار میشه…

Saleh M

سلام آقای اوند
آموزش جدید قرار نمیدید خیلی ازش گذشته ها 6 ماه شد

سلام
آموزش های html5 تموم شده .

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.