آموزش HTML 5 – قسمت اول | هستی پروژه

آموزش HTML 5 – قسمت اول

HTML 5 به یکی از موضوعات جذاب این روزها مبدل شده است. بنابراین ما تصمیم گرفتیم یک آموزش کلی درمورد نحوه ی استفاده از آن را برای شما با شروع از مفاهیم پایه ای و به صورت قدم به قدم در کنار هم انجام دهیم. البته این مقاله بیشتر بر روی مفاهیم جدید html 5 بنا شده است.

لطفا در صورت هرگونه سوال نظرات خود را به ما اطلاع دهید.

 

فهرست مطالب پیش رو:

  • مقدمات HTML 5

     

     

    • تفاوت های HTML  با SGML و XML  ؟
    • Doc Type چیست ؟
    • تفاوت HTML 5  با نسخه های پیشین در چیست ؟
  • مشخصه های جدید HTML 5
  • آز ۱ – درک ساختار صفحه ی جدید معنایی
  • آز ۲ – نسخه ی نمایشی با ویژگی های ورودی جدید

     

     

    • نوع مقادیر جدید
    • برخی از ویژگی های کمک کننده
  • آز ۳ – درک کنترل Datalist در HTML 5
  • آز ۴ – اجزای خروجی
  • آز ۵, ۶ و ۷ – درک مشخصه ی اعتبارسنجی HTML 5

     

     

    • آز۵ – پیاده سازی اعتبارسنجی به وسیله ی مشخصه ی Type از اجزای ورودی
    • آز ۶ – پیاده سازی اعتبارسنجی به وسیله ی مشخصه های اعتبارسنجی دلخواه
    • آز ۷ – Customizing validation
  • آز ۸ , ۹ , ۱۰  و ۱۱ : کش های برنامه در HTML 5

     

     

    • آز ۸ : نسخه ی آزمایشی برنامه ی ساده ی کش
    • آز ۹ : حل مشکل دوباره رفرش شدن
    • آز ۱۰ : درک بیشتر پیرامون مانیفست
    • آز ۱۱ : بخش های با اهمیت بخش شبکه
  • کش کردن برنامه ها در مقابل کش کردن مرورگرهای قدیمی
  • جمع بندی

 

  • مقدمه ای بر HTML 5 :

در اینجا به بررسی مفاهیم پایه ای HTML 5 خواهیم پرداخت. از جمله ی این مسائل مفاهیم و اصطلاحاتی هست که شما از آن ناآگاه بودید و بسیار جذاب هست.

  • تفاوت بین SGML , HTML و XML در چیست ؟

 SGML که مخفف شده ی عبارت Standard Globalized Markup language می باشد که یک استاندارد نشانه گذاری از صفحات وب است و در یک تعریف ساده مشخص می کند که یک داکیومنت چطور باید به نظر برسد.

HTML  مخفف شده ی عبارت Hyper Text markup language یک زبان استانداردنشانه گذاری بر پایه ی SGML هست که برای طراحی صفحات وب به کار می رود. قوانین مشخص شده ی نشانه گذاری را درون یک DTD نمایش می دهد و DTD ایجاد شده بر اساس SGML می باشد.

XML که برگرفته ازExtensible markup language هست و مشتق شده از SGML می باشد . این زبان به خاطر نیازهای فزاینده ی اینترنتی بوجود آمد همچنین HTML یک سری محدودیت ها داشت که به وسیله ی XML  مرتفع شد. . در حقیقت XML  را به سادگی می توان جزو زیرمجموعه های SGML محسوب کرد که برای نمایش داده ها استفاده خواهد شد.

  • داک تایپ چیست؟

وقتی که شما شروع به ایجاد یک صفحه ی وب HTML به وسیله ی مثلا  dream weaver یا visual studio  می کنید همیشه کدهایی را در بالای داکیومنتتان به صورت زیر خواهید دید :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 

آیا تا به حال به مفهوم این عبارت فکر کرده اید ؟

با این کار به مرورگر خود نسخه ی صفحه ی HTML که در آن نوشتیم را نشان می دهیم. با استفاده از داک تایپ در صفحه ی وب شما به DTD ارجاع می دهید که چگونه باید ساختار HTML ما را ایجاد کند, چه تگ هایی اجازه ی استفاده دارند , کدام یک والد هستند , کدام یک باید فرزند باشند که همه ی این قانون ها در یک DTD کوتاه شده موجود می باشند.

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

بیشتر مرورگرهای وب می گویند : " اگر شما DTD رو فراهم نکرده باشید مشکلی نداره , من به خوبی HTML رو می فهمم وهمچنین این قانون های اون رو و در نتیجه میدونم که چطور باید رندرش کنم."

این دلیلی هست که چرا بیشتر توسعه دهندگان در مورد DTD و DOC TYPE بی اطلاع هستند.

  • HTML 5 چه تفاوتی با ورژن های قبلی دارد؟

HTML 5 بر اساس SGML طراحی نشده است از این رو نیازی به استفاده از DTD در آن نیست. HTML 5 یک زبان نشانه گذاری را گرداوری کرده و قوانین تجزیه و parsing خاص خود را دارد.

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

DOC TYPE برای تمام HTMLها از جمله HTML 5 و HTML 4 در قسمت بالای داکیومنت ضروری است و زمانی که این کد حذف شود داکیومنت ما بر روی مرورگرهایی که قابلیت رندر بالایی ندارند ناسازگار شده و بخش هایی از آن اجرا نمی شود. هرچند که همیشه سعی کنید از مرورگرهایی که تلاش بیشتری را برای اجرای مشخصه های مرتبط دارند استفاده کنید.

 

 

  • مشخصه های جدید در HTML 5 :

ایده ی اصلی همه ی مشخصه های جدید HTML 5 این است که یک استاندارد جامع را برای تمام توسعه دهندگان وب در جهان فراهم کند.

از زمان های طولانی ما با یک طرف سوم مواجه بودیم در libraries/plugins که برای دستیابی به برخی عملکردهای مشترک مورد استفاده واقع می شد مثل datepicker, animations, validations, playing videos and audios offline browsing, client side multi-threading و … حالا ما این قابلیت را خواهیم داشت که منابع و عملکردهای استانداردی را به دست بیاوریم.

نکته :  استاندارد به معنای استفاده ی همه ی افراد از منابع و عملکردها طبق یک چارچوب خاص و در یک روش مشترک باشد. به عنوان مثال : شمادستور اعتبارسنجی را در همه ی مکان ها به یک صورت خواهید دید. همین حالا هنوز استانداردی وجود ندارد. یک نفر ازvalidation  Jquery استفاده می کند درحالی که شخص دیگری از ابزار دیگری استفاده کرده.اما الان به بعد این استاندارد وجود خواهد داشت.

در ادامه به بررسی هر مشخصه ی جدید در HTML 5 خواهیم پرداخت.

 

  • آز ۱ – درک ساختار صفحه ی جدید معنایی

وقتی که به WEB UI فکر می کنید چه چیزی در ذهن شما می آید؟

Header , Footer, navigation bar, Content of page, images, Caption images, a side bar etc.

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

قبل تر ها HTML استانداردی برای تگ ها یا اجزایی برای تعریف بخش های مشخص از یک داکیومنت مثل header : footer  و محتوای داکیومنت نداشت. بعضی از اشخاص از تگ DIV و همچنین style های CSS استفاده می کردند و بعضی دیگر از table…tr…td که مشکل این روش ها در تناقض و ناپایداری آن ها بود.

 

حالا ما با HTML 5 استانداردهای زیادی داریم برای همه ی بخش ها از جمله Header, Footer, nav , FigCaption : که هرکدام از آن ها ارائه دهنده ی یک بخش مشخص هستند. این تگ ها نشانه گذاری ما را مفهومی می کنند.

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

 

  • آز ۲ – نسخه ی نمایشی با ویژگی های ورودی جدید

مقدارهای نوع جدید

قبلا طراحان از کتابخانه های متعددی برای دسترسی به اجزای UI مثل : datepicker, range picker, color picker  و… بهره می بردند.اما حالا HTML 5 استانداردهایی را برای ما به ارمغان آورده است مثلا بوسیله ی معرفی خواص جدید به ویژگی های نوع مورد نظر از اجزای ورودی. در ادامه بعضی از آن ها را باهم بررسی می کنیم.

Number

<input type="number" name="MyNuberElement" id="MyNumberElement" />

Range

<input type="range" name="MyRangeElement" id="MyRangeElement"/>

Color

<input type="color" id="MyColorElement" name="MyColorElement" />

Date

<input type="date" id="MyDateElement" name="MyDateElement" />

Time

<input type="time" id="MyTimeElement" name="MyTimeElement"/>

Datetime-local

<input type="datetime-local" id="MyDateTimeLElement" name="MyDateTimeLElement" />

DateTime (Also include time zone)

<input type="datetime" id="MyDateTimeElement" name="MyDateTimeElement"/>

Month

<input type="month" id="MyMonthElement" name="MyMonthElement" />

Week

<input type="week" id="MyWeekElement" name="MyWeekElement" />

با ادامه ی آموزش های ما در قسمت های بعدی همراه باشید.
.

resource : www.codeproject.com

دیدگاه خود را به ما بگویید.