خدمات طراحی سایت و دیجیتال مارکتینگ

آشنایی با html5 و جایگاه آن در دنیای برنامه نویسی

یکی از مهم‌ترین محصولات دنیای دیجیتال و بستر اینترنت، وب‌سایت‌ها هستند که در انواع مختلف و در موضوعات متفاوت ساخته شده‌اند. شاید تصور دنیای قبل از ظهور وب‌سایت‌ها کمی مشکل به نظر برسد. در گذشته شبکه اینترنت و بالطبع وب‌سایت‌ها به اندازه امروز گسترده نبود اما رفته رفته با ظهور قوانین و قواعد نوین، نسل جدیدی از سایت‌ها راه‌اندازی شدند. امروزه، به هر وب‌سایتی که سر می‌زنید یک ساختار و قاعده خاصی دارد. یکی از اجزاء اصلی در ساخت وب‌سایت زبان برنامه‌نویسی HTML5 است. برای آشنایی با html5 و معرفی جایگاه آن در دنیای برنامه نویسی همراه آرنیکاوب باشید.

HTML چیست؟

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

HTML5

مزایای استفاده از HTML

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

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

تفاوت HTML و HTML5 چیست؟

اگر یکی از کاربران فعال دنیای اینترنت باشید، حتما این دو عبارت یعنی Html و Html5 را شنیده‌اید. شاید کمی کنجکاو شده باشید که آیا تفاوتی بین این دو عبارت وجود دارد یا خیر؟ در این بخش از مطلب به طور کامل به توضیح تفاوت یا شباهت می‌پردازیم. پیش از هر چیز باید بدانید که زبان نشانه‌گذاری html5 در حقیقت نسل پنجم زبان HTML بوده که در سال 1997 طراحی و ارائه شده است. شرکت‌های سازنده این زبان نشانه‌گذاری، همچنان به توسعه آن مشغول هستند.

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

تفاوت HTML وHTML5

دلایل برتری HTML5 نسبت به HTML

همان طور که در بخش قبل گفتیم، این دو نسخه با هم تفاوت دارند و ورژن 5 نسبت به HTML برتر است. دلایل بهتر بودن نسخه پنجم HTML موارد زیر را شامل می‌شود:

  • پیاده‌سازی آن راحت‌تر است چون جزئیات مدل‌های پردازش را در خود دارد و از این جهت سازگارتر است.
  • بهبود و توجیه نشانه‌گذاری برای اسناد در دست گسترش
  • بهترین برنامه برای نرم‌افزارهای تلفن همراه کراس پلتفرم
  • پشتیبانی کامل از مرورگرهای پرطرفدار مانند Chrome یا Safari و همچنین Opera

مزایای HTML5

اصول مقدماتی کدنویسی HTML5 چه هستند؟

شروع سند با  : <!DOCTYPE html> است و مانند xHTML سایر توضیحات اضافی ندارد.

در نگاه اول به HTML5، تگ‌های جدیدی جلب توجه می‌کنند. در HTML5 با تگ‌های ساختاری مانند <header> و <footer> و <canvas> ، <audio> و … سر و کار داریم. در ادامه نگاهی به تگ‌های ساختاری جدید می‌اندازیم:

<header>

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

<nav>

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

<section>

تگ “قسمت” نشان دهنده یک بخش عمومی یا بخش کاربردی سند است. این قسمت شبیه بخش <div> عمل می‌کند با این تفاوت که نقش جداسازی بخشی از سند را ایفا می‌کند.

<article>

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

<aside>

نشان دهنده محتوا مربوط به بخش اصلی سند است.

<footer>

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

عناصر <header>  و <footer> نه تنها برای جداسازی بالا و پایین صفحه در سند استفاده می‌شوند بلکه نشان دهنده header و footer هر بخش از سند نیز می‌باشد.
مزایای استفاده از این عناصر ساختاری است که عمدتا به دلیل این واقعیت است که برای موتورهای جستجو خیلی خوب تعریف شده و راه حل مناسبی را برای ساختار سند به موتور جستجو ارائه می‌دهد.

حتما بخوانید: نگاهی به برخی از تگ‌های اصلی HTML5

HTML5

مزایای استفاده از HTML5

  • توسعه API: به راحتی می‌توان آن را با سایر سیستم‌ها و زبان‌ها مچ کرد.
  • ذخیره داده‌ها به صورت آفلاین: برنامه‌ای مانند Thunderbird و Outlook به شما این امکان را می‌دهند تا به داده‌های قدیمی خود در حالی که آفلاین هستید دسترسی پیدا کنید، HTML5 نیز این امکان را به شما می‌دهد.
  • کشیدن و رها کردن(drag & drop): بنابر تعریف API ، به فرآیند کشیدن و رها کردن اطلاق می‌شود.
  • صوت و تصویر(video & audio): صوت و تصویر سبب ایجاد تغییرات عظیمی در قرار دادن رسانه‌ها در سند HTML تلقی می‌شود و کار را برای طراحان حرفه‌ای وب بسیار ساده کرده است.
  • منطقه جغرافیایی(geolocation): هدف آن تعیین اطلاعات منطقه‌ای از طریق کامپیوتر یا ابزار همراه و تبلت و … کاربر است.
حتما بخوانید: کد نویسی HTML5 و CSS

کاربرد HTML5 در گوشی‌های تلفن همراه

برای استفاده موثر از HTML5 باید قادر به کنترل محیطی باشیم که HTML5 در آن استفاده می‌شود. با توجه به این‌که Webkit راه را برای HTML5 هموار کرده است، می‌توانیم تمرکز خود را معطوف به ابزاری کنیم که توسط Webkit پشتیبانی می‌شوند.

چگونه می‌توانیم گامی به جلو برداریم؟

در اینجا به ذکر مواردی می‌پردازیم که با توجه به آن‌ها می‌توانیم در جهت مثبت گامی به جلو برداریم:

•    نامگذاری DIV معنایی: هماهنگی معنایی اسامی DIV با عناصر جدید HTML5 به شما در استفاده از اسامی و همچنین کارکرد جدید آن کمک خواهد کرد.
•    جا به جایی با javascript
•    ایجاد عناصر جدید با استفاده از javascript: به شما این امکان را می‌دهد که عناصر جدید را در اینترنت اکسپلورر تبدیل کنید. (زیرا نسخه‌های قدیمی IE از این تکنولوژی جدید وب ساپورت نمی کند)

document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('aside');
document.createElement('nav');
document.createElement('article');
document.createElement('figure');
document.createElement('time');
  •   ساخت برنامه‌های خاص برای مرورگرها: همان‌طور که در بالا ذکر شد، همه چیز در مورد کنترل محیط است. اگر بتوانیم محیط را کنترل کنیم می‌توانیم ویژگی‌های مورد نظر کاربر را بهتر کنترل کنیم. این دقیقا همان کاری است که گوگل با استفاده از Google Wave در حال انجام آن است.

google-wave

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

نتیجه گیری

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

برای کدنویسی HTML5 می توانید آرنیکاوب را انتخاب خود قرار دهید.

به این صفحه امتیاز دهید.

خواندن مطالب زیر را نیز به شما پیشنهاد میکنیم:

پرسش و پاسخ، نظر

سوال یا نظری دارید؟ بنویسید و ارسال کنید.

طراحی شده توسط تیم توسعه و طراحی آرنیکاوب
×