آموزش رایگان HTML – جلسه 8

در جلسات قبل با فونت ها, فرم ها, جدول ها و … در HTML آشنا شدیم. قصدمان در این جلسه آشنایی با HTML 5 است, اما HTML5 چیست؟ چه برتری در مقایسه با HTML دارد؟

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

مطالبی که در هر جلسه ارائه می دهیم به صورت پشت سر هم هستند, پس اگر هنوز جلسه ی  7 را نخوانده اید🤨 این جلسه را شروع نکنید.🙄

HTML5 چیست؟

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

تغییرات صورت گرفته در این نسخه در نتیجه اهداف بزرگتر در طراحی زبان است. این اهداف در درجه اول شامل موارد زیر هستند:

•  تشویق نشانه گذاری معنایی
•  تفکیک طرح از محتوا
•  ارتقا قابلیت دسترسی و پاسخگویی به طراحی
•  کاهش همپوشانی بین HTML ، CSS و JavaScript
•  پشتیبانی از تجربیات رسانه های غنی در حالی که نیازی به افزونه هایی مانند Flash و جاوا ندارید

نشانه گذاری معنایی

نشانه گذاری معنایی یعنی استفاده از نشانه ها و تگ هایی که دارای معنی هستند به جای نشانه گذاری های ساده و پیش پا افتاده. به عنوان مثال ، برچسب <h1> نشان می دهد که محتوای عنصر عنوان یا عنوان کل سند است در مقابل اگر فقط متن را پررنگ و بزرگ کنیم بدون استفاده از تگ مناسب ، این دیگر نشانه گذاری معنایی نخواهد بود.

البته HTML همیشه از نشانه گذاری معنایی استفاده میکرد مانند تگ های عنوان و… اما این مقدار کافی نبود تا اینکه HTML5 به طور گسترده تر و حرفه ای تر از آنها استفاده کرد.

در نسخه های قبلی ، عناصر ساختاری متداول مانند هدرهای صفحه ، منوهای ناوبری و بخش های محتوای اصلی ، همه با همان عنصر HTML ، تگ <div> نشان داده شدند. در HTML ، عناصر معنایی جدیدی برای نشان دادن ساختار اصلی یک صفحه وجود دارند:

عناصر جدید درون خطی (inline) مانند <address> و <time> معرفی شده اند. این موارد به موتورهای جستجو و سایر خدمات کمک می کند تا اطلاعات موجود در یک صفحه را برای نمایش در سایر زمینه ها به راحتی پیدا کنند. در عین حال ، عناصر درون خطی که اثرات مختلفی مانند bold کردن، مورب کردن و زیرخط دار شدن را ایجاد می کنند ، تصحیح شده یا دوباره تعریف می شوند تا معنایی خاصی را القا کنند.

تفکیک طرح از محتوا

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

نشانه‌گذاری فقط برای گفتن نحوه نمایش اشیا مورد نظر بود که این شامل موارد زیر است :

•  تعریف فونت ها و رنگ متن ها
•  تنظیم تراز متن
•  تعیین خط دور برای جداول
•  تعریف چگونگی پوشش متن در اطراف تصاویر

بیشتر ویژگی های HTML که اجازه این نوع موارد را می دهد کاملاً منسوخ شده است.

ارتقا قابلیت دسترسی و پاسخگویی به طراحی

وسایل ” مرسوم ” مانند رایانه‌های رومیزی , لپ‌تاپ‌ها , تبلت ها, و تلفن‌های همراه طیف وسیعی از اندازه صفحه نمایش, نسبت‌های ابعاد صفحه نمایش و تجربیات تعامل کاربر را ارائه می‌دهند . این تنوع به تنهایی کافی است تا روش‌های طراحی و واکنشگرایی تغییر کند.

کاهش تداخل بین HTML ، CSS و JavaScript

HTML ، CSS و JavaScript سه زبان توسعه سمت کاربر است و هر یک از آن‌ها به موازات هم تکامل یافته‌اند , اغلب در عملکرد و حوزه همپوشانی دارند .
علاوه بر مواردی که در بالا ذکر شد، تمرکز بر گسترش این زبان ها با توجه به ماهیت آن هاست ؛

HTML – محتوا
CSS – طراحی
JS – تعامل

به خاطر سپردن این موضوع می تواند به فرد کمک کند تا مشخص کند از کدام زبان استفاده کند ، خصوصاً در مواردی که انجام کاری به بیش از یک روش امکان پذیر باشد. به عنوان مثال ، اگر می خواهید رنگ چیزی را تغییر دهید ، اولین فکر شما استفاده از CSS است. از طرف دیگر ، اگر می خواهید در پاسخ به ورودی کاربر رنگ چیزی را تغییر دهید ، احتمالاً می خواهید از JavaScript استفاده کنید.

پشتیبانی از تجربیات رسانه های غنی در حالی که نیازی به افزونه هایی مانند Flash و جاوا ندارید

با افزایش پهنای باند و سرعت اینترنت ، ما بیشتر و بیشتر به سمت استفاده از اینترنت به عنوان بستر رسانه حرکت کرده ایم. HTML برای اسنادی که بیشتر متن و دارای چند تصویر هستند ایجاد شده است نه برای صفحات رسانه ای غنی که دارای انواع صدا و ویدئو هستند.

هنگامی که افراد برای اولین بار این نوع تجربیات را به صفحات وب اضافه کردند ، کاربران نیاز داشتند که افزونه های خاصی را به مرورگرهای خود اضافه کنند. این افزونه ها گزینه‌های ضعیف و محدودی برای کاربران انجام می‌دادند و باعث ایجاد حفره های امنیتی می شدند. همین باعث شد توسعه دهندگان عملکرد اصلی صفحه وب را به زبانهای دیگر مانند Flash یا Java بنویسند اما محتوا از نظر موتورهای جستجو و صفحه خوانان پنهان بود.

اکنون ، HTML5 از رسانه با عناصری مانند <video> و <audio> پشتیبانی می کند ، در حالی که <canvas> فضای مشخصی را برای طراحی و گرافیک ایجاد شده توسط JavaScript فراهم می کند. عناصر فرم جدید, همراه با یکپارچگی بهتر بین HTML5 ، CSS و جاوا اسکریپت برنامه‌های کاربردی وب با مقیاس کامل با استفاده از سه زبان که بومی مرورگر وب هستند ایجاد کردند ، بدون متصل کردن متصل کردن یا add کردن.

چرا باید از HTML5 استفاده کنم؟

ساده ترین پاسخ به این سوال این است که نسخه فعلی “کاملترین نسخه” است و چرا نباید از یک نسخه ی کامل استفاده کرد؟
چون نسخه های جدید کمی پیچیده هستند و شاید برای همه استفاده از آن آسان نباشد. روشهای قدیمی علامت گذاری هنوز هم در بیشتر مرورگرها کار می کنند. برای مثال اگر <img align = “right” /> را در صفحه وب خود تایپ کنید ، متن همانطور که انتظار دارید در اطراف تصویر قرار می گیرد.

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

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

امکانات پیشرفته ی HTML5 دقیقا یعنی چی؟

وقتی از امکانات پیشرفته ی HTML5 صحبت می کنیم دقیقا منظورمان موارد زیر و بسیاری امکانات دیگر است که برتری خاصی به HTML5 داده است؛

1.  امکان کشیدن و رها کردن برای آپلود راحت تر فایلها
2.  اجرای جاوا اسکریپ در پشت صحنه
3.  امکان پخش فایل های صوتی و تصویری
4.  مکان یابی کاربران بازدید کننده
5.  پشتیبانی از سایت های HTML به صورت آفلاین

HTML5 یا HTML مساله این است؟؟؟؟😎

برای پاسخگویی به این سوال باید یک مقایسه بین این دو انجام شود تا دلیل اصرار ما برای برتری HTML5 مشخص شود؛

1.  نشانه گذاری برای اسناد در HTML5 بهبود یافته و دارای گستردگی بیشتری است.
2.  HTML5 یک گزینه ی بسیار مناسب برای برنامه های کاربردی تلفن همراه است.
3.  از مرورگرهای اصلی مانند Chrome ، Safari ، Firefox ، Opera ، IE پشتیبانی می کند.
4.  امکان اضافه کردن ویدئو, صدا و تصویر را به راحتی و بهترین شکل ممکن فراهم کرده است.
5.  انعطاف پذیری بالایی دارد.
6.  موجب افزایش تعامل کاربران میشود و امکانات بیشتری در اختیار آنها قرار خواهد داد.
7.  HTML5 ساختار کدنویسی را به سمت مفهومی شدن هدایت می کند و این ویژگی سبب میشود تا موتورهای جستجو بهتر بتوانند وب سایت مورد نظر را شناسایی کنند.

کلام آخر آشنایی با HTML 5

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

😊✌ از بقیه‌ی جلسات  آموزش رایگان HTML جا نمونید✌😊

منبع؛ www.html.com