فناوری

آموزش و آشنایی با زبان HTML5 و تفاوت‌های آن با HTML

HTML5 مخفف عبارت Hyper Text Markup Language، برای انجام هر کاری که می‌خواهید بصورت آنلاین و بدون نیاز به بارگیری افزونه‌های مرورگر یا سایر نرم افزارها انجام دهید، طراحی شده است. آیا می‌خواهید انیمیشن بسازید؟ در سایت خود موسیقی و فیلم قرار دهید؟ برنامه‌های پیشرفته‌ای را که در مرورگر شما اجرا می‌شوند، ایجاد کنید؟ شما می‌توانید با HTML5 کار خود را به راحتی پیش ببرید.

HTML5 چیست؟

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

برای درک چگونگی تکامل HTML در طول سال‌ها، اجازه دهید تفاوت‌های HTML و HTML5 را بررسی کنیم.

HTML در مقابل HTML5

HTML زبان اصلی برندگذاری شبکه جهانی وب است. در اصل برای توصیف معنایی اسناد علمی طراحی شده و از آن زمان، برای توصیف موارد دیگر تکامل یافته است. امروزه بیشتر صفحات وب با استفاده از HTML4 ساخته می‌شوند.

اگرچه از زمان انتشار اولین نسخه HTML در سال ۱۹۹۳ امکانات آن بسیار بهتر شده است، اما HTML4 هنوز محدودیت‌های خود را دارد. اگر توسعه‌دهندگان وب یا طراحان بخواهند محتوا یا ویژگی‌هایی را به سایت خود اضافه کنند که در HTML پشتیبانی نمی‌شوند‌، با مشکلات بزرگی رو به رو خواهند شد.

راه حل چیست؟

در این صورت، آنها مجبور به استفاده از فن‌آوری‌های غیر استاندارد انحصاری مانند Adobe Flash هستند که کاربران را به نصب افزونه‌های مرورگر ملزم می‌کند. حتی در این صورت، برخی از کاربران نمی‌توانند به آن محتوا یا ویژگی دسترسی پیدا کنند. به عنوان مثال کاربران در iPhone و iPad نمی‌توانند این ویژگی را در دسترس داشته باشند زیرا که این دستگاه‌ها از برنامه Flash پشتیبانی نمی‌کنند.

حتما بخوانید: بانکداری باز (Open Banking) چیست و چه اصولی دارد؟

HTML5 به منظور کاهش نیاز به آن فناوری‌های غیر استاندارد انحصاری، طراحی شده است. با استفاده از این نسخه جدید HTML، می‌توانید برنامه‌های وب ایجاد کنید که به صورت آفلاین کار می‌کنند. همچنین از فیلم‌ها و انیمیشن‌های با کیفیت بالا پشتیبانی می‌کند و منطقه جغرافیایی شما را مشخص می‌کند.

برای درک اینکه HTML5 چگونه می‌تواند همه این کارها را انجام دهد، در ادامه به موارد جدید در این نسخه جدید HTML نگاهی می‌اندازیم.

چه چیزی در HTML5 جدید است؟

HTML5 با اهداف اصلی جدیدی طراحی شده است، از جمله:

خواندن کد برای کاربران و خوانندگان صفحه آسان‌تر است.
کاهش همپوشانی بین HTML ،CSS و JavaScript.
ارتقا پاسخگویی و سازگاری طراحی در بین مرورگرها
پشتیبانی از داده‌های چندرسانه‌ای بدون نیاز به Flash یا پلاگین‌های دیگر

هر یک از این اهداف تغییرات نوین این نسخه جدید HTML را نمایش می‌دهند. اجازه دهید به هفت مورد از تغییرات زیر توجه کنیم.

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

HTML5 چندین برچسب معنایی معنی‌دار جدید را معرفی کرد. این موارد شامل:

Section
Header
Footer
Nav
Mark
Figure
Aside
Figcaption
Data
Time
Output
Progress
Meter
main

این موارد نوشتن کد تمیزتر را برای مشخص کردن سبک کار شما، آسان‌تر می‌کند. این مسئله، به ویژه برای کاربران دارای فناوری‌های کمکی مانند صفحه‌خوان، بسیار مهم است.

SVG درون خطی

با استفاده از HTML4، برای افزودن گرافیک بُرداری مقیاس‌پذیر (SVG) به صفحات وب خود بهFlash ،Silverlight یا فناوری دیگری نیاز دارید. با HTML5 می‌توانید با استفاده از برچسب “svg” گرافیک بُرداری را مستقیما در اسناد HTML اضافه کنید. با استفاده از این عنصر جدید می‌توانید مستطیل‌ها، دایره‌ها، متن و سایر مسیرها و اشکال بُردار را ترسیم کنید.

حتما بخوانید: راهنمای کامل ترفندها و قابلیت‌های دراپ‌باکس

ویژگی‌های فرم

به لطف گزینه‌های فرم توسعه یافته HTML5 می‌توانید فرم‌های هوشمندتری ایجاد کنید. علاوه بر انواع ورودی استاندارد فرم، HTML5 موارد دیگری را ارائه می‌دهد. از جمله: datetime ،datetime-local، ماه، هفته، تعداد، دامنه، ایمیل و آدرس اینترنتی. به لطف ویژگی جدید مکان یاب، که بعدا در مورد آنها بحث خواهیم کرد، می‌توانید انتخاب‌کنندگان تاریخ، لغزنده‌ها، اعتبار سنجی و متن مکان یاب را نیز اضافه کنید.

قالب ویدئو WebM

قبل از HTML5، برای جاسازی محتوای صوتی و تصویری در صفحات وب، به پلاگین‌های مرورگر نیاز داشتید. HTML5 نه تنها برچسب‌های “audio” و “video” را که نیاز شما به پلاگین‌های مرورگر را از بین می‌برد، معرفی کرد، بلکه فرمت ویدئویی WebM را نیز در خود جای داده است.

این یک قالب ویدئویی بدون حق امتیاز است که توسط Google ساخته شده و نسبت فشرده‌سازی به کیفیت بسیار خوبی را ارائه می‌دهد. این مورد با عنصر ویدیو قابل استفاده است و توسط اکثر مرورگرها پشتیبانی می‌شود.

ویژگی مکان‌یاب

HTML5 ویژگی مکان‌یاب را نیز معرفی کرده است. می‌توانید از این مورد با عنصر “input” برای ارائه راهنمایی کوتاه به کاربران کمک کنید تا گذرواژه‌ها یا سایر قسمت‌های ورود اطلاعات را پر کنند. این مسئله می‌تواند به شما کمک کند فرم‌های بهتری ایجاد کنید. با این حال، توجه به این نکته مهم است که این ویژگی برای فناوری‌های کمکی قابل دسترسی نیست.

رویدادهای ارسال شده توسط سرور

رویداد ارسال شده توسط سرور (Server-sent Events) زمانی مورد استفاده است که یک صفحه وب به طور خودکار داده‌های به روز شده را از سرور دریافت می‌کند. این کار با HTML4 امکان‌پذیر است، اما باید از صفحه وب ارسال شوند.

حتما بخوانید: بهترین مدارک و گواهینامه‌های مدیریت امنیت اطلاعات در دنیا کدام مدارک هستند؟

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

نتیجه سخن

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

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