طراحی سایت تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
02188471521   ۰۲۱۴۰۸۸۱۰۳۸

آموزش HTML – بخش شانزدهم

آموزش html

در جلسه شانزدهم آموزش HTML موارد زیر خواهیم پرداخت:

  • در ابتدا تاریخچه ای از این زبان را مختصرا مرور می کنیم.
  • در ادامه المان های حذف شده از HTML و المانهای افزوده شده به HTML5 را خواهیم دید.
  • در نهایت نحوه افزودن یک المان و سبک دهی به آن با استفاده از جاوااسکریپت را می بینیم.

مروری بر تاریخچه HTML و معرفی HTML5

از زمان اختراع اینترنت و شبکه گسترده جهانی نسخه های مختلفی از زبان HTML منتشر شده است که هر کدام نسبت به نسخه های قبلی بهبود یافته اند. در سال 1989 فیزیکدانی به نام آقای برنرزلی www را اختراع کرد و برای ایجاد صفحات وب و استفاده از آنها برای اولین بار در سال 1991 ( سال 71-72  ) زبان HTML را اختراع کرد. از سال 1991 تقریبا هر 2 سال نسخه جدیدی از این زبان منتشر گردید تا اینکه در سال 1999 یعنی بین سال های 78 تا 79  نسخه 4.01 زبان HTML توسط W3C ( که در سال 1997 نسخه  3.2 آن را منتشر کرده بود ) به جهان عرضه شد.

تقریبا بعد از 1 سال یعنی در سال 2000 ( سال 79-80 ) کنسرسیوم شبکه گسترده جهانی ( W3C ) اولین نسخه از XHTML را معرفی کرد که زبانی قدرتمند برای طراحی سایت ها بود و توسعه دهنگان وب را وادار به نوشتن کدها به بهترین شکل می کرد. استفاده از XHTML تا سال 2004 یعنی تا سال های 82-83  ادامه داشت تا اینکه در همین سال ها تصمیم W3C بر این شد تا توسعه و گسترش زبان HTML را متوقف کند.

زمانی که W3C در حال عملی کردن تصمیم خود مبنی بر عدم گسترش و توسعه زبان HTML بود، WHATWG تشکیل شد که تصمیمی  بر خلاف تصمیم W3C را اخذ کرد و به توسعه زبان HTML با رویکرد سازگاری نسخه های جدید متناسب با کاربرد صفحات وب و پشتیبانی از نسخه های قبلی پرداخت. بین سال های 2004 – 2006 فروشندگان اصلی مرورگرها WHATWG را پشتیبانی کردند تا به بهبود و به روز رسانی زبان HTML بپردازد و در نهایت W3C در برابر تصمیم WHATWG تاب نیاورد و به طور رسمی از آن حمایت کرد و با هم به توسعه زبان HTML پرداختند.

این دو گروه با هم بر روی توسعه زبان HTML کار کردند و ثمره این همکاری انتشار HTML5 در سال 2008 ( 87 ) بود. همکاری این دو گروه تا سال 2012 ادامه داشت تا اینکه هر کدام تصمیمی جداگانه اخذ کردند. تصمیمات گرفته شده از این قرار بود:

  • WHATWG تمرکز خود را بر توسعه صرفا HTML قرار داد و HTML را استاندارد دائمی خود معرفی کرد، یعنی در ادامه کار خود زبان HTML را به روز رسانی و بهبود بخشید و ویژگی های جدید را با نگهداری ویژگی های قبلی اضافه کرد. استانداردهای WHATWG در سال 2012 منتشر شده است.
  • W3C علاوه بر HTML5 به توسعه XHTML پرداخت و استاندارهای خود را بر این اساس تعریف کرد. استاندارد های تعریف شده توسط W3C در تاریخ 28 اکتبر 2014 ( 6 آبان 1393 ) منتشر شد.

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

توسعه دهندگان و طراحان قدیمی وب می دانند که اولین تغییر عمده ای که در HTML5 صورت گرفت ساده سازی عبارت <!DOCTYPE html>  بود. در نسخه های قدیمی تر این عبارت، که در اولین خط سند HTML نوشته می شود، عبارت طولانی بود.

ساده سازی دیگیری که در HTML5 صورت گرفت، ساده سازی رمز گذاری کاراکتر ها یا character encoding بود. در مثال ها حتما تگ متا را دیده اید که به صورت زیر است:

قبل از ظهور HTML5 برای رمز نگاری کاراکتر ها باید عبارت طولانی را برای تگ متا می نوشتید:

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

  • المان های معنایی ( semantic ) مثل <header> ، <footer> ، <article> ، <aside> و <section> و <nav>
  • خصیصه های جدید مثل number ، date ، time ، calendar و range که در آموزش فرم به طور کامل بررسی شدند.
  • المان های گرافیکی مانند <svg>  و <canvas>  که بعد از آموزش Java Script بررسی خواهند شد.
  • المان های چند رسانه ای که <audio>  و <video>  از این المان هستند و در بخش های بعدی بررسی خواهند شد.

 

المان های حذف شده از HTML5

جهت بهبود و افزایش کارایی زبان HTML بعضی المان ها باید حذف می شدند و جایگزین های بهتری برای آنها قرار می گرفت. این المان ها و جایگزین های آنها را در جدول زیر مشاهده خواهید کرد:

المان حذف شده جایگزین
<acronym> <abbr>
<applet> <object>
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame>
<frameset>
<noframes>
<strike> CSS، <s>، یا <del>
<tt> CSS

به راحتی می توان اسناد ایجاد شده در HTML4 را به HTML5 تبدیل کرد. در بخش های بعدی این کار را با هم انجام می دهیم.

پشتیبانی مرورگرها از HTML5

تمام مرورگر های جدید از HTML5 پشتیبانی می کنند. سوالی که اینجاست این است که با توجه به به روز رسانی این زبان و اضافه شدن المان های جدید به زبان HTML5 ، مرورگرها این المان ها را چگونه نمایش می دهند؟ پاسخ این است که مرورگرها المان هایی که نمی شناسند را به طور خودکار به عنوان المان های درون خطی در نظر می گیرند و به کاربر نمایش می دهند.

در بخش دهم آموزش زبان HTML گفتیم که در HTML5 تعداد 8 تگ معنایی ( semantic ) اضافه شده است. همچنین گفتیم که این المان ها بلوک شده هستند یعنی اگر المان دیگری بعد از آنها قرار نمی گیرد و به خط بعد منتقل می شود.

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

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

هر المانی با نام دلخواه را می توان به سند HTML افزود و آن را به دلخواه سبک دهی کرد. اما باید از طریق کدهای جاوااسکریپت این المان را تعریف کنیم. المان جدید با نام دلخواه را در علامت <>  می نویسیم و سپس از طریق گذاره زیر این المان را تعریف می کنیم:

در مثال زیر نحوه افزودن المان را خواهیم دید:

آموزش html

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

سبک های تعریف شده برای المان جدید در اینترنت اکسپلورر نسخه 8 و پایین تر پستیبانی نمی شوند. راه کار رفع این مشکل استفاده از یک فایل است که در آن کدهای Java Script برای نمایش سبک ها در اینترنت اکسپلورر است. این فایل HTML5Shiv نام دارد که از اینجا می توانید جدید ترین نسخه آن را دانلود کنید.

برای استفاده از این فایل باید آدرس آن را در تگ <script>  تعیین کنید. نحوه قرار دادن این فایل به صورت زیر است:

در این مثال، پوشه HTML5Shiv در کنار فایل index.html قرار گرفته است. آدرس را مطابق با مسیری که فایل را قرار داده اید می توانید تغییر دهید.

اما ممکن است که نخواهید این فایل را در سرور آپلود کنید. راه دیگری که برای این کار وجود دارد استفاده از لینک زیر به جای آدرس فایل ( مقدار src ) در مثال بالا است:

در هر دو روش باید کدها در تگ <head>  و بعد از همه stylesheet ها قرار بگیرند.

برای درک بهتر مثال زیر را با هم بررسی می کنیم.

این کدها را نوشته و آدرس HTML5Shiv را حذف کنید و فایل indext.html را با مرورگر اینترنت اکسپلورر باز کنید. اگر نسخه اینترنت اکسپلوررتان 9 و جدیدتر است دو المان قرار گرفته در صفحه با رنگ زمینه فیروزه ای نمایش داده خواهند شد. حال دکمه F12 فشار داده و در کادر پایین صفحه به قسمت Emulation بروید.

آموزش html

در قسمت Document mode نسخه مرورگر را به مثلا 7 تغییر دهید. خواهید دید که کدها به درستی نمایش داده نمی شوند.

مجددا آدرس HTML5Shiv را در کدها قرار دهید. و مجددا فایل index.html را با اینترنت اکسپلورر باز کنید و مراحل قبل را طی کنید و نسخه مرورگر را به 7 تغییر دهید.

اگر اخطار زیر نمایش داده شد بر روی Allow blocked content کلیک کنید.

آموزش html

همانطور که می بینید، کدها به درستی اجرا خواهند شد.

بخش پانزدهم آموزش HTML نیز به پایان رسید. ادامه مباحث را در جلسات بعدی با توضیح دیگر بخش های HTML پی می گیریم.

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

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