illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

12573 ۱۰ دی ۹۲

معرفی 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تان قرار دهید و سپس آن را لود کنید تا هنگام کار کردن به صورت آفلاین مشکلی براتون پیش نیاد.)

نکته :

کاربرانی که از 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 خواهیم پرداخت.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 21 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

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

    • ‏‏
      کیوان علی محمدی(۲۴ بهمن ۱۳۹۲)

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

  • ‏‏

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

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

    • ‏‏
      سجاد دریس(۲۴ اسفند ۱۳۹۲)

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram