فهرست مطالببستن

HTML5 آخرین نسخه از زبان Hypertext Markup است، اما آیا واقعاً تفاوتی با HTML داره؟ اصلاً شما از امکانات و تگ های زبان HTML5 خبر دارین؟ در واقع چیزی که امروز قراره بهتون معرفی کنم به عنوان منجی اینترنت شناخته میشه و امکان طراحی صفحات وب غنی و جذاب رو بدون استفاده از برنامه‌هایی مثل فلش FLASH و سیلور لایت SilverLight برای برنامه نویس وب فراهم میکنه.

بهتره برای روشن شدن موضوع و رفع ابهاماتی که در مورد این دوتا زبان وجود داره مقاله زیر رو شروع به خوندن کنین و اطلاعات خودتون در این زمینه رو ارتقا بدین:

HTML چیست؟

HTML فرم کامل زبان Hypertext Markup است. تیم برنزلی HTML رو در سال ۱۹۸۹ ایجاد کرد، این یه زبان اصلی برای برنامه نویسی وب است و برای طراحی اساسی وبسایت ها مورد استفاده قرار میگیره. زبان برنامه نویسی HTML به افراد کمک میکنه تا افکار خودشون رو از طریق وب سایت به جهان منتقل کنن.

اگه بخوام یه تعریف کلی از HTML5 براتون بگم: این یه فناوری استاندارد برای نوشتن صفحات وب و روش جدیدی برای افزودن قابلیت تعامل به این صفحات و مجموعه‌ای از رابط های برنامه نویسی وب API است.

عناصر HTML توسط تگ‌ها نشون داده میشه. تگ های HTML به برنامه نویس کمک میکنه تا محتوا رو از طریق “عنوان”، “پاراگراف”، “جدول” و غیره نشون بده. هر تگی با استفاده از فرمول <A> و <A/> تعریف میشه که معمولاً به عنوان تگ های “Opening” و”Closing” شناخته میشن. برچسب های این زبان روی هیچ مرورگری نشون داده نمیشه، در واقع مرورگر فقط محتوای بین برچسب ها رو به ما نشون میده!

این یه زبان استاتیک است یعنی شما با استفاده از HTML نمی‌تونین ویژگی‌های صفحه پویا یا داینامیک ایجاد کنین، در واقع این زبان فقط عناصر استاتیک صفحه مثل عنوان، پاورقی و غیره رو تغییر میده.

پس برای این که بتونین یه سایت زیبا و تعاملی بسازین با زبان HTML رو باید حداقل دوتا زبان فرانت اند مثل CSS و JavaScript ترکیب کنین.

HTML5 چیست؟

HTML5 پنجمین نسخه آپدیت HTML است. این زبان پیشرفته‌ترین و جدیدترین نسخه است. تو این نسخه تگ های زیادی اضافه شده تا زندگی طراح آسون‌تر بشه. یه وبسایت اولیه شامل سه تا مدل کد هست:

  • HTML
  • CSS
  • JavaScript

CSS مخفف Cascading Style Sheets است و برای طراحی سند HTML استفاده میشه. اساساً CSS برای بهبود ارائه و بهبود نحوه ظاهر شدن سایت مورد استفاده است! Css. پسوند صفحه CSS است.

کد بین این دو تگ وارد میشه:

<style>      <style/>

جاوا اسکریپت از Java ساخته شده. نحوه و ساختار اون شبیه C است. جاوا اسکریپت یک زبان برنامه نویبسی سمت مشتری Client-side است، یعنی توسط مرورگر مشتری پردازش میشه نه سرور! این زبان برای نشون دادن پاسخ کاری که مشتری تو مرورگر انجام میده، استفاده میشه.

شناخت HTML5

HTML به شکلی توسعه یافته که به هیچ نرم افزار یا پلاگین های مرورگر دیگه‌ای برای دیزاین کامل یه وبسایت از همون ب بسم لله، نیاز نداشته باشیم. با HTML5 ما می‌تونیم برنامه‌های کاربردی، انیمیشن‌ها و سایر برنامه‌های پیچیده‌ای که تو مرورگر اجرا میشن رو توسعه بدیم و این زبان تو بعضی از پیچیده‌ترین برنامه‌های وب که برای سرگرمی، پخش آنلاین، پخش کننده‌های ویدئویی، پخش‌ کننده‌های صوتی و غیره ایجاد شده، استفاده میشه.

نحوه عملکرد این زبان

برای همکاری با HTML5 باید ویرایشگر متن اصلی داشته باشیم من خودم شخصاً از ویرایشگرهای ++ Notedpad و Sublime text استفاده میکنم. Sublime text عالی و کاربر پسند است و هنگام تایپ به شما پیشنهادات خودکاری رو ارائه میده.

خب بهره ببریم سراغ نحوه کار کردن HTML5 خودمون:

اساساً HTML5 شامل هر سه تا عنصر (CSS, HTML و JavaScript) یه وب پیج یا اپلیکیشن وب هست. HTML برای تهیه سندهای متنی روی وب پیج مورد استفاده قرار میگیره، CSS برای طراحی سند متنی روی وب پیج استفاده میشه و JavaScript مسئول فعالیت کاربر روی وب پیجه.

مثلاً اگه میخواین تصویری رو در صفحه وب نمایش بدین، برای نمایش اون باید از تگ تصویر HTML استفاده کنین.

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


            </p>
<style>
Img {<br />Width : 200px;<br />Height: 500px ;<br />}<br /></style>
<p>

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

تگ های HTML5

  • <footer> و <header>
  • <nav> برای همه منوها
  • <aside> برای منوها کناری
  • <section> شبیه به div است اما محتوا محورتر
  • <article>برای زمانی که محتوا باید به صورت بلاگ در صفحه درج بشه
  • <video> و <audio> پخش فایل‌های صوتی و تصویری
  • <canvas> امکان طراحی المان‌های گرافیکی با استفاده از یه زبان اسکریپت نویسی جدا
  • <embeded> جای گذاری محتوا یا برنامه خارجی در صفحه

HTML5 چه کاری انجام میده؟

HTML5 به توسعه دهندگان کمک میکنه تا یه وب پیج پیشرفته‌ای که بسیار ریسپانسیو Responsive و با هر صفحه نمایشی فیت میشه رو تولید کنن. HTML5 می‌تونه قابلیت نمایش یه وب رو با انیمیشن و ظاهر اون ارتقا بده!

پیشنهاد برای مطالعه
طراحی سایت واکنشگرا یا Responsive Web Design چیه و آیا باعث افزایش رتبه گوگل میشه؟

تو این دوره مدرن این زبان برنامه نویسی خیلی مهمه چون که تکنولوژی در حل پیشرفت زیادیه و بنابراین ما باید سعی کنیم به روز باشیم و از جدیدترین فناوری‌ها برای تولید محصولات و خدماتمون بهره ببریم. HTML5 هم یکی از جدیدترین زبان‌های برنامه نویسی است و یاد گرفتن اون خالی از لطف نیست و بهمون کمک میکنه تا وب سایت‌های پیشرفته‌ای رو تولید کنیم!

امکانات پیشرفته این زبان

همونطور که گفتیم HTML5 نسبت به نسخه قبلی پیشرفت‌های زیادی داشته و امکانات بیشتری بهش اضافه شده، اما اگه دلتون میخواد بدونین منظورمون از امکانات پیشرفته این زبان چیه بهتره به موارد زیر یه نگاهی بندازین:

  • پخش فایل‌های صوتی و تصویری
  • مکان یابی بازدید کنندگان
  • امکان کش کردن فایل‌ها در داخل مرورگر برای آپلود اون‌ها
  • پشتیبانی از مشاهده سایت های HTML به صورت آفلاین با استفاده از Application Cache
  • اجرای جاوا اسکریپت در پشت صحنه
  • فراهم کردن امکانی برای سرورها که بتونن صفحات مرورگر که قبلاً لود شده رو آپلود کنن و این یه امکان خیلی کارآمدتر نسبت به Ajax است.
  • ذخیره داده ها به صورت آفلاین، با این ویژگی بدون وابستگی به کوکی، داده ها به صورت لوکال در مرورگر ذخیره میشن!

بله این بود امکانات پیشرفته و واقعاً کارآمد HTML5 که می‌تونه کار شما رو هم راحت‌تر و هم سریع‌تر پیش ببره.

پیشنهاد برای مطالعه
HTTP Cookie چیست؟ آیا کوکی کامپیوتر اطلاعات شخصی ما رو میدزده؟

تفاوت اصلی HTML و HTML5 چیه؟

HTML5 با هدف بهبود تجربه جهانی وب برای کاربران نهایی و توسعه دهندگان منتشر شد. من امروز می‌خوام به صورت خلاصه یه سری از تفاوت‌های این دو تا نسخه رو برای شما بگم:

  • HTML5 از SVG که مخفف Scalable Vector Graphics است، canvas و انواع دیگه نگاره سازی‌های مجازی یا Vector Graphic ها پشتیبانی میکنه. در حالی که در HTML استفاده از این Vector graphic ها فقط در صورتی امکان پذیر بود که اون رو متصل با تکنولوژی‌هایی مثل Flash, VML یا SilverLight استفاده کنین!
  • پایگاه داده وب SQL در HTML5 برای ذخیره موقت داده ها استفاده میشه، ولی در HTML نسخه قبلی فقط از حافظه نهان مرورگر برای این هدف استفاده میشد!
  • با HTML5، جاوا اسکریپت می‌تونه تو یه مرورگر وب احرا بشه در حالی که HTML قدیمی فقط به جاوا اسکریپت اجازه میداد تا در رابط مرورگر اجرا بشه.
  • HTML5 مبتنی بر SGML نیست! این به این معنیه که این زبان قوانین تجزیه رو بهبود بخشیده که سازگاری بیشتری رو ارائه بده!
  • می‌تونین از متن MathML و SVG با متن HTML5 استفاده کنین در حالی که HTML این کار رو محدود میکنه!
  • برخی عناصر مثل Noframes ,isindesx ,dir ,basefon ,acronym ,applet ,front, center.strike ,big و tt دیگه توی نسخه HTML5 وجود ندارن و حذف شدن.
  • HTML5 از انواع جدید کنترل‌ها مثل تاریخ و زمان، ایمیل، شماره، URL، دامنه و غیره پشتیبانی میکنه.
  • کلاً تو HTML5 چندتا ویژگی و عنصر جدید مثل summary ,time ,aside ,audio ,command ,data ,datalist و غیره اضافه شده.

HTML

اهداف HTML5

این زبان با اهدافی توسعه یافته که من به صورت خلاصه یه سری از اون‌ها رو براتون لیست و آماده کردم:

  • حذف پلاگین‌هایی مثل Flash برای امکانات رایجی که هرکسی به اون نیاز داره و فراهم کردن پشتیبانی از آیتم‌های صدا و تصویر
  • کاهش نیاز به جاوا اسکریپت و کدهای اضافی با استفاده از المان‌های جدید
  • ایجاد سازگاری بین مرورگرها و دستگاه‌های مختلف
  • تمامی این کارها تا حد امکان به صورت پنهانی انجام میشه.
  • ارائه قابلیت Cross Platform ، با این قابلیت مهم نیست با چه دستگاهی دارین از سایت بازدید میکنین.

مزایای اصلی ارائه شده برای کاربران نهایی

بعضی از مزایایی HTML5 برای کاربران نهایی داره به شرح زیره:

  • خرابی نمایش سایت در مرورگر موبایل رو کاهش میده.
  • اعتماد به نفس وبسایت های تلفن همراه رو زیاد میکنه! و وقتی یه بازدید کننده میخواد از خدمات یه شرکت خاص استفاده کنه اما تمایل به دانلود اپلیکیشن اون شرکت رو نداره، می‌تونه فقط عضو سایت ریسپانسیو یا واکنشگرای شرکت بشه.
  • با استفاده از جاوا اسکریپت و MPEG4 به سایت زیبایی و تجربه کاربری خوبی رو ارائه بدین و دیگه نیازی به استفاده از Adobe Flash ندارین!
  • عناصر صوتی و تصویری محلی رو بدون هیچ پلاگین اضافه‌ای پشتیبانی میکنه.
پیشنهاد برای مطالعه
AMP یا صفحات شتابدهی شده موبایل … راهی به سوی مشتری بیشتر!

مزایای HTML5 برای توسعه دهنده

  • به توسعه دهندگان کمک میکنه تا برنامه‌ای متناسب با وضوح تصویر، اندازه صفحه، نسبت ابعاد و دستورالعمل‌ها تولید کنن.
  • برنامه نویسان HTML5 میتونن از برخی ویژگی‌های پیشرفته مثل GPS، دوربین و شتاب سنج تو برنامه‌های وب خودشون استفاده کنن.
  • برنامه های تلفن همراه میتونن از همان کانال‌های درآمدزا و اشتراک گذاری به عنوان برنامه‌های بومی استفاده کنن.
  • HTML , CSS و JavaScript زبان‌های اصلی برنامه نویسی وب هستند.
  • بهترین مزیت HTML5 اینه که می‌تونیم به راحتی برنامه های وب اون رو به اپلیکیشن‌های موبایل تبدیل کنیم.
  • برنامه HTML5 ریسپانسیو یا واکنشگرا است و به طور خودکار برای هر صفحه نمایشگری با هر سایزی اوکی هست.
  • نوشتن با این زبان خیلی آسونه.
  • درک کردن این زبان خیلی ساده است.
  • استفاده و کاربرد آسونی داره.
  • همه مرورگرها زبان HTML رو میفهمند.
  • می‌تونین گرافیک و انیمیشن‌های خوبی باهاش بسازین.

معایب این زبان چیست؟

  • فقط تو مرورگرهای به روز کار میکنه.
  • به اندازه Flash انعطاف پذیر نیست!

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

چه کسی باید این زبان رو یاد بگیره؟

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

نتیجه کار چی میشه؟

من تو این مقاله ویژگی‌هایی که تو HTML5 و HTML هست رو بررسی کردم و تفاوتشون رو بهتون گفتم! اول از همه این که HTML5 باعث افزایش محدوده‌های مختلفی شد که تو نسخه قدیمی اون وجود نداشت. این برنامه هم از جاسازی ویدئویی و صوتی از طریق تگ‌ها <video> و <audio> پشتیبانی میکنه هم از جاوا اسکریپت برای اجرا در پس زمینه پشتیبانی کامل میکنه. همچنین ارائه عناصر جدیدی که در بالا بهشون اشاره کردم سازگاری و تجزیه بهتری رو به وجود اورده.

از نظر توسعه دهنده HTML5 تو خیلی از زمینه‌ها مثل پشتیبانی از برنامه وب و استفاده از موبایل، عناصر معنایی و غیره پیشرفت کرده.

و سرانجام با توجه به کاربرد راحت HTML5 تو فناوری وب مدرن، میشه با اطمینان فرض کرد که پذیرش این زبان برنامه نویسی حتی تو سال‌های آینده بیشتر هم میشه.

امیدوارم که این مقاله جواب سوالات شما رو داده باشه!