campaign-edianeh-98

معرفی 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 خواهیم پرداخت.

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back
comment دیدگاه کاربران
مهشاد کلانتری replyپاسخ

سلام
اول بابت آموزش ممنون
میگم که من همیشه برای کارهام html5shiv رو همینطوری که گفتین با استفاده از همین کد تو هدرم مینوشتم و خودش باعث میشد که تگ های اچ تی ام ال 5 تو مرورگرهای قبل از اکسپلورر 9 به خوبی کار کنه و هیچوقت از کد جاوااسکریپتی که گفتین استفاده نکردم. و اگر این کد رو هم نذاریم تو مرورگر اکسپلورر 9 به خوبی کار میکنه.
و اینکه [if lt IE 9] یعنی اکسپلوررهای پایین تر نسخه 9. همینطوره یا من اشتباه میکنم؟

کیوان علی محمدی

بله درسته.

سجاد دریس

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

حسین محمدی replyپاسخ

استاد دریس،آموزش بسیار خوبی بود،
با دستور createElement میشه هر تگی رو ساخت…یعنی حتی svg و canvas ؟؟؟

لقمان آوند

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

حسین محمدی

ممنون استاد…
سایت فریمورک foundation همه ی تصاویرش با svg ساخته شده یکی از تصاویر رو ذخیره دیدم….از زندگی سیر شدم….استاد به نظر شما تصویر کدوم نوعش بهتره؟؟؟آپلود کنیم یا اگه یاد گرفتیم با svg بسازیم؟

سجاد دریس

سلام.
خوب طبیعتا svg بهتره.

نیما replyپاسخ

مفید بود

hamid7n replyپاسخ

خدا قوتت بده …

firstline replyپاسخ

با سلام
بسیار ممنون، مفید و کاربردی بود.
با تشکر

mahmoodi1391 replyپاسخ

سلام دوستان من تو لینک زیر یه فایل انکد شده دارم لطفا به من یاد بدید این فایل رو چه جوری میتونم دیکد کنم ؟
http://s5.picofile.com/file/8106331568/reza1.js.html
لطفا منو راهنمایی کنید به اون احتیاج دارم

لقمان آوند

در انجمن مطرح کنید .
شاید دوستان بتونند کمک کنند .

mm021 replyپاسخ

این html5انگار اسون تر از اون htmlقدیمی است خیلی از کد ها رو خلاصه کرده خیلی خوبه

سامان replyپاسخ

عالی 😎

shahab replyپاسخ

باسلام
دوستان عزیزمن تازه وارد هستم والان مدت سه یا چهارماه میشه کهعاشقانه این کلاسها رادنبال میکنم
نمى دونم که آیا من موفق مىشم یانه.
به خاطرهمین موضوع من نمى توانم اظهار نظر کنم .
ولى دوست داشتم اگر عزیزى وقتش راداشت من را بیشر راهنمائى پفرماید. باتشکر. Shahab

وحید صالحی

سلام
نگران نباشید مباحث آموزشی رو دنبال کنید حتما موفق میشی…

محمد هادی replyپاسخ

سلام، لطفا قسمت تعریف المنت با جاوا اسکریپت رو تکمیل کنید.

behnam hs replyپاسخ

با درود
ممنون بابت آموزش های مفیدتون . آقا میخواستم ی پیشنهاد بدم ک برا آموزش های ویدیوییتون از پلیر اچ تی ام ال فایو استفده نکنید . چون مخصوص اعضای وی آی پیه ولی پلیر اچ تی ام ال فایو همونطور ک میدونید باید داخل کدش ب طور مستقیم آدرس ویدیو وارد بشه ب خاظر همین از توی اینسپکت المنت میشه آدرس ویدیوتونو برداشت بدون نیاز ب عضویت وی آی پی !!!
بازم ممنون بابت آموزش های مفیدتون و سایت بسیار عالیتون 😉

کیوان علی محمدی

مشکلی نیست دوست عزیز،ما اگه میخواستیم میتونستیم ویدیو رو برای اعضای ویژه فقط قرار بدیم،اما خوب سیاست های سایت فعلا قرار بر این نیست،موفق باشی.

عترت replyپاسخ

سلام
لطفا کمک کنید
بعداز تعویض ویندوز بااینکه
مرورگر هایم از html5 پشتیبانی میکند

اما ارور میدهد که
no video with sapported format and mime type found

سجاد دریس

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

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.