وب

معرفی و آموزش HTML5 | قسمت دوم : آموزش HTML5 و  المنت های جدید

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

(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

آموزش پیشنهادی برای شما : آموزش کامل HTML و HTML5

 

چگونه یک صفحه html5 ایجاد کنیم

برای این که مرورگر های مختلف بدانند شما در حال استفاده از html5 هستید باید از اعلام  DOCTYPE در شروع کد های خود استفاده کنید:

<DOCTYPE html!>

رمزگذاری کاراکتر (charset) نیز باید تعیین شود تا مرورگر تشخیص دهد از چه زبان هایی (مانند زبان انگلیسی و فارسی) در حال استفاده هستید و کاراکتر های این زبان ها را شناسایی کند:

<"meta charset="UTF-8>

به کد های زیر دقت کنید. این کد ها را در صفحه html خود وارد کنید و نتایج را با بازکردن فایل ذخیره شده خود در یک مرورگر مشاهده کنید.

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

آموزش html5 در مرورگر های قدیمی

Html5 در سال۲۰۰۸ به طور رسمی معرفی شد و مورد استفاده طراحان سایت قرار گرفت. همه مرورگر هایی که بعد از این معرفی شدند به خوبی از html5 پشتیبانی می کنند. اما همچنان درصدی از کاربران از مرورگر های قدیمی استفاده می کنند. تمام مرورگرها، چه نسخه های قدیمی چه نسخه های جدید، به صورت خودکار عناصری نا معلوم را به عنوان عناصر درون خطی شناسایی می کنند. به همین دلیل شما می توانید به مرورگرهای قدیمی تر برای شناسایی عناصر html5 آموزش دهید.

تعریف عناصر معنایی (Semantic Elements) به عنوان عناصر بلوک (Block Element)

همانطور که در قسمت قبلی آموزش html5 اشاره کردیم، این نسخه دارای ۸ عنصر معنایی جدید است. همه این عناصر جزو عناصر block-level هستند. برای اطمینان از این که مرورگر های قدیمی رفتار صحیحی از خود نشان دهند، شما می توانید از نمایش css برای این عناصر استفاده کنید. به مثال زیر توجه کنید:

اضافه کردن عناصر جدید به html

در این قسمت از آموزش html5 قصد داریم که عناصر جدید را به صفحات html قدیمی و به صورتی که با مرورگر های قدیمی نیز سازگار باشد اضافه کنیم. برای مثال در اینجا ما یک عنصر جدید به نام <myHero> را به یک صفحه HTML اضافه می کنیم و یک استایل برای آن تعریف می کنیم:

بیانیه جاوا اسکریپت (“document.createElement (“myHero برای ایجاد یک عنصر جدید در IE 9 و نسخه های قبل از آن لازم است.

عناصر جدید در html5

در مقاله قبلی به طور خلاصه در مورد عناصر جدیدی که در html5 اضافه شده است صحبت کردیم. اما در این جا قصد داریم اطلاعات بیشتری در مورد این عناصر ارائه کنیم.

HTML5
HTML5

عناصر جدید معنایی و ساختاری

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

عملکرد tag
یک مقاله را در یک سند تعریف می کند <article>
مطالب را جدا از محتوای صفحه تعریف می کند <aside>
بخشی از متن را که ممکن است در فرمت متفاوتی از سایر متن ها نوشته شود را از سایر متن ها جدا می کند. <bdi>
مشخصات اضافی را که کاربر می تواند مشاهده یا پنهان کند تعریف می کند <details>
یک جعبه یا پنجره دیالوگ را تعریف می کند <dialog>
یک عنوان را برای عنصر <figure> تعریف می کند <figcaption>
محتوای جامع را تعریف کنید <figure>
یک فوتر برای یک سند یا بخش تعریف می کند <footer>
یک هدر یا سربرگ برای یک سند یا بخش تعریف می کند <header>
محتوای اصلی یک سند را تعریف می کند <main>
متن مشخص شده / برجسته را تعریف می کند <mark>
یک معیار اندازه گیری بر اساس یک رنج خاص ایجاد می کند <meter>
لینک های ناوبری را تعریف می کند <nav>
نشان دهنده پیشرفت یک کار یا task است <progress>
آنچه را که در مرورگرهایی که حاشیه نویسی ruby را پشتیبانی نمی کنند تعریف می کند. <rp>
توضیح / تلفظ شخصیت ها را تعریف می کند (برای تایپوگرافی شرق آسیا) <rt>
حاشیه نویسی ruby (برای تایپوگرافی شرق آسیا) را تعریف می کند <ruby>
یک بخش را در یک سند تعریف می کند <section>
یک عنوان قابل مشاهده برای عنصر <جزئیات> را تعریف می کند <summary>
یک تاریخ / زمان را تعریف می کند <time>
ایجاد خط پایان بین متن ها را تعریف می کند. <wbr>

عناصر فرم جدید

در اینجا دو عنصر فرم جدید در html5 را معرفی می کنیم

عملکرد tag
لیستی از گزینه های پیش تعیین شده برای کنترل های ورودی را مشخص می کند <datalist>
نتیجه محاسبات را تعریف می کند <output>

انواع ورودی جدید

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

  1. ویژگی های جدید :
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

 

  1. دسته بندی های جدید
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
HTML5
HTML5

گرافیک های HTML5

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

تگ
ایجاد گرافیک با اسکریپت ( عمدتا جاوا اسکریپت) <canvas>
ایجاد وکتور های گرافیکی <svg>

عناصر رسانه ای جدید

عناصر رسانه ای یکی دیگر از مواردی که پیش از این در html وجود نداشت.

عملکرد تگ ها
محتوای صدا را تعریف می کند <audio>
یک ظرف برای یک برنامه خارجی (غیر HTML) تعریف می کند <embed>
منابع رسانه چندگانه ای را برای عناصر رسانه ای (<video> و <audio>) تعریف می کند. <source>
متن را برای عناصر رسانه ای تعریف می کند. <track>
محتوای ویدیویی را تعریف می کند <video>

 

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

 

منبع : طراحی سایت

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

همچنین ببینید
بستن
دکمه بازگشت به بالا