امروزه زبان های برنامه نویسی ابزاری قدرتمند هستند که به وسیله ی آن ها می توانیم با کامپیوتر ها حرف بزنیم. به شکلی که زبان های برنامه نویسی شامل دستور العمل هایی می باشند که برای کامپیوتر ها قابل فهم هستند و می توانند با آن ها ارتباط برقرار کنند.
در میان زبان های برنامه نویسی ،زبان نشانه گذاری Html وجود دارد که مخفف کلمه Hyper Text Markup Language بوده و در فارسی به ان زبان نشانه گذاری ابرمتن می گویند. در واقع تنها با زبان Html میتوان بدنه اصلی یک صفحه ی وب را تشکیل داد و به تنهایی ارزش خاصی ندارد که به این منظور نیازمند دیگر زبان های برنامه نویسی از جمله CSS و JavaScript می باشد.
تاریخچه اچ تی ام ال
برای اینکه بدانیم Html از کجا امده است بهتر است نگاهی به گذشته Html از بدو تولد بیندازیم. در سال 1991 زبان نشانه گذاری Html توسط تیم برنرز- لی (Tim Berners-Lee)زمانی که روی Tag 18 کار میکرد طراحی شد. اولین نسخه از Html که در سال 1991 معرفی شد و تنها شامل 18 تگ کاربردی بود نسخه Html1.0 بود. پنج سال بعد یعنی در سال 1995 دومین نسخه از Html طرح عنوان Html2.0 به بازار آمد که اولین نسخه استاندارد شده توسط بنیاد IETF نیز محسوب میشد.این نسخه تمام ویژگی های نسخه قبلی خود را پشتیبانی میکرد و همچنین چند ویژگی جدید نیز به آن اضافه شده بود.
در سال 1994 به منظور استاندارد شدن زبان های نرم افزاری لازم برای وب کنسرسیوم جهانی وب تشکیل شد که ریاست آن به دست برنز-لی بود که اولین کار آن ها WILBUR بود که بعد ها تحت عنوان Html3.2 شناخته شد و به صورت رسمی در سال 1997 وارد بازار شد. در دسامبر سال 1999 به منظور بهبود نسخه های قبلی و رفع بعضی مشکلات نسخه Html4.01معرفی شد.این نسخه تغییرات و تکاملات بسیاری نسبت به نسخه های قبلی خود داشت که می توان به تنظیمات بیشتر برای مالتی مدیا ،امکانات جدیدی برای اجرای سند هایCSS ، جای دادن زبان های اسکریپتی در خود و به کارگیری جداول اشاره کرد.
در ژانویه سال 2000 کنسرسیوم جهانی نسخه جدیدی با نام XHtml را به عنوان استاندارد مشترک با نسخه قبلی یعنی XHtml4.01 منتشر کرد که با پدید امدن این نسخه دست طراحان وب برای نمایش وب سایت های بهتری باز شد.
با ورود این نسخه سخت گیرانه بودن ان نسبت به Html باعث شد تا توجه همگان به استفاده از نسخه جدیدی از Html جلب شود.
در سال 2014 سرانجام نسخه جدید و اخرین نسخه از Html تحت عنوان Html 5 به دنیای برنامه نویسی معرفی شد که همچنان این نسخه در حال استفاده و توسعه می باشد.
Html 5 چیست؟ چه تفاوتی با Html دارد ؟
تا سال 2008 بازار نسخه Html4 داغ بود و به طور گسترده استفاده میشد. اما مشخص بود که این نسخه از Html دارای ضعف هایی می باشد که نیاز مند بروزرسانی بود .در همین زمان شرکت WHATWG بر روی توسعه و بروزرسانی این نسخه کار کرد و استاندارد های آن را ارتقا داد.
سرانجام در سال 2014 نسخه جدیدی از Html تحت عنوان Html 5 به دنیای برنامه نویسی معرفی شد .ضعف اصلی که نسخه های قبلی داشتند و در نسخه Html 5 رفع شده بود بحث چند رسانه ای (Multimedia) بود. همچنین در این نسخه عناصر جدیدی نسبت به نسخه های قبلی به آن اضافه شده است که این عناصر عبارتند از:
• عناصر معنایی : <header> ، <footer> ، <article> ، <section> و ...
• عناصر گرافیکی : <svg> و <canvas>
• عناصر چند رسانه ای : <audio> و <video>
کاربرد Html چیست؟
Html ابزاری است که که به وسیله آن طراحان سایت می توانند طرح کلی صفحات وب یک سایت را بسازند. به عبارت دیگر اگر یک سایت را به یک ساختمان تشبیه کنیم با استفاده از زبان نشانه گذاری آHtml می توان اسکلت اصلی این ساختمان را تشکیل داد.به طوری که Html عناصر مختلف همانند متن ، عکس ، صوت و... را در کنار هم گذاشته و چهارچوبه اصلی صفحه وب را تشکیل می دهد.
Html کاربرد های دیگری دارد همانند:
• تصاویر واکنشگرا در صفحات وب
• ذخیره سازی سمت کلاینت
• و...
تصاویر واکنش گرا در صفحات وب:
در Html با استفاده از صفت Srcset در تگ Img می توان انواع تصاویر را در اندازه های مختلف در صفحات وب بارگذاری کرد. همچنین می توان با استفاده از تگ Picture تصاویر واکنشگرا را در سند خود بارگذاری کرد.
ذخیره سازی سمت کلاینت:
در گذشته امکان ذخیره داده های مرورگر یک کاربر وجود نداشت و برای این منظور باید از Cookie ها استفاده میشد. ولی در Html 5 با استفاده ازlocal storage و Index DB می توان ذخیره سازی سمت کلاینت را انجام داد.local storage ذخیره سازی مبتنی بر رشته جدول در هم سازی را فراهم میکند و از طرف دیگر index DB یک سرویس ذخیره داده بزرگتر و بهتر برای سمت کلاینت می باشد.
مزایا و معایب زبان Html چیست؟
مزايا:
• يادگيري اسان و لذت بخش
• قابليت اجرا در تمامي مرورگر ها
• متن باز و رايگان بودن
• ادغام اسان با زبان هاي سمت سرور
• با html سايت ها پايداري بيشتري دارند
• و ...
معايب:
• ضعف در پشتيباني از مرورگر هاي قديمي
• استاتيک بودن و وابسته بودن به زبان هاي سمت کاربر براي تعامل با کاربر
• نياز به طراحي جداگانه هر صفحه به دليل نبود قواعد منطقي برنامه نويسي
• و ...
ارتباط زبان Html با زبان های CSS و JavaScript چیست؟
همانطور که قبلا نیز به آن اشاره شد زبان نشانه گذاری Html تنها چهارچوبه اصلی یک صفحه ی وب را تشکیل میدهد و به تنهایی ارزشی برای انتشار ندارد اما زمانی که در کنارCSS و JavaScript قرار می گیرد ارزش واقعی خود را در طراحی وب نشان می دهد.
یک فایل Html حاوی ساختار اولیه یک صفحه است.
یک فایل CSS شامل استایل‌های مربوط به یک صفحه است.
یک فایل JavaScript عناصر پویا و فعال در یک صفحه را تعیین میکند، که با کلیک کاربران بر روی شکل یا عناصر خاص کار میکند.
حال اگر یک صفحه وب را به یک ساختمان تشبیه کنیم می توان این چنین فرض نمود که :
• زبان Html بدنه ی اصلی یا اسکلت یک ساختمان را تشکیل می دهد که به تنهایی زیبایی و کارایی خاصی ندارد
• زبان CSS طراحی ساختمان را به عهده دارد و مسئول دکوراسیون داخلی و خارجی ساختمان می باشد.
• زبان JavaScript همانند عملکرد این ساختمان برای انسانی است که در آن زندگی می کند.
تگ های مهم زبان Html
• تگ html :این تگ به مرورگر نشان می دهد که نوع سند ما سند Html می باشد.
• تگ head : این تگ شامل یک سری اطلاعات برای مرورگرها و ربات های جستجوگر وب می باشد.
• تگ meta : با استفاده از این تگ می توان یکسری اطلاعات را در قالب برخی اتربییوت های خاص به موتورهای جستجو نمایش داد. اطلاعاتی که احتمالا برای بهینه سازی و سئو یک صفحه وب بسیار مهم باشد.
• تگ tittle : از این تگ برای نمایش عنوان صفحه وب به کاربران و موتور های جستجوگر برای رتبه بندی استفاده می شود.
• تگ style : از این تگ می توان برای استایل دهی یا ایجاد استایل به عناصر یه سند Html استفاده کرد.
• تگ link : با استفاده از این می توان یک سند CSSخارجی را به یک سند Html متصل کرد.
• تگ script : با استفاده از این تگ می توان یک سند JavaScript را به یک سند Html متصل کرد.
• تگ body : این تگ بدنه اصلی کد ها را تشکیل می دهد سایر دستورات و تگ ها در این تگ نوشته می شود.
• تگ header: از این تگ برای نوشتن محتوای اولیه یک صفحه استفاده می شود.
• تگ main : در این تگ محتوای اصلی یک سند نوشته می شود.
• تگ footer : در این تگ قسمت پایینی یا footer یک صفحه وب نوشته می شود.
• تگ P : از این تگ برای نوشتن یک متن در یک سند Html استفاده می شود.
• تگ mark : با استفاده از این تگ قسمتی از یک متن را مارک می کنیم.
• تگ h : از این تگ برای نوشتن عنوان استفاده می شود که از h1 h1 تا h6 h6 مورد استفاده قرار میگیرد که به ترتیب شماره از 1 تا 6 به نسبت سایز از بزرگ به کوچک مرتب می شوند.
• تگ a : از این تگ برای لینک کردن استفاده می شود .
• تگ span : از این تگ برای علامت گزاری قسمتی از یک متن یا سند استفاده می شود.
• تگ img : از این تگ برای بارگذاری یک عکس در یک سند Html استفاده می شود.
• تگ map : با استفاده این تگ می توان به قسمتی از یک تصویر قابلیت کلیک شدن داد.
• تگ Video : با استفاده از این تگ می توان یک ویدئو را به سند اضاف کرد.
• تگ track : با استفاده از این تگ می توان برای کلیپ های داخل سند زیرنویس ایجاد کنیم.
• تگ tamplate : از این تگ برای نگهداری محتوایی استفاده می کنیم که در هنگام بارگیری صفحه پنهان هستند.
• تگ br : با استفاده از این تگ می توانیم داخل یک متن شکستگی ایجاد کنیم و به سطر بعدی برویم.
• تگ b : با استفاده از این تگ میتوان قسمتی از یک متن را بین این تگ قرار گرفته است Bold یا برجسته کرد.
• تگ strong : این تگ همانند تگ b عمل میکند یعنی برای برجسته کردن قسمتی از متن استفاده می شود با این تفاوت که در بحث سئو زمانی که بخواهیم به موتور های جستجو بفهمانیم که این قسمت برجسته شده از اهمیت خاصی برخوردار می باشد از این تگ استفاده می شود.
• تگ i : این تگ قسمتی از متن را به صورت Italic یا به شکل مورب و کج نمایش می دهد.
• تگ em : از این تگ زمانی که بخواهیم بر روی یک محتوا تایید کنیم استفاده می کنیم.
• تگ center : با استفاده از این تگ می توان محتوای یک تگ را در وسط صفحه قرار داد.
• تگ ul : با استفاده از این تگ می توان یک لیست نامرتب در یک سند ایجاد کرد.
• تگ ol : با استفاده از این تگ می توان یک لیست مرتب شده در یک سند بوجود اورد.
• تگ li : با این تگ میتوان آیتم های یک لیست مرتب شده یا نامرتب شده را بوجود اورد.
• تگ dl : با استفاده از این تگ می توان یک لیست توضیحی را ایجاد کرد.
• تگ dd : با استفاده از این تگ می توانیم آیتم های یک لیست توضیحی را ایجاد کنیم.
• تگ dt : با استفاده از این تگ می توانیم توضیحات مربوط به هر آیتم را در یک لیست توضیحی بوجود بیاوریم.
• تگ embed : با استفاده از این تگ می توان یک محتوای خارجی ( عکس، آهنگ ، ویدئو و ...) را به سند Html اضاف کرد.
• تگ font : با استفاده از این فونت می توان نام ، اندازه و رنگ فونت یک محتوا را مشخص کرد.
• تگ form : برای ایجاد یک فرم در یک صفحه وب استفاده می شود.
المنتهای فرم:
تگ input : با استفاده از این تگ می توان فیلد هایی را در یک فرم ایجاد کرد که بوسیله آن ها اطلاعات را از کاربر در یافت کنیم .این تگ انواع type مختلفی (مثلا Text ، Date ، button و ...) را شامل می شود.
Text : این نوع type برای دریافت یک متن تک خطی مورد استفاده قرار می گیرد.
Password: این نوع type برای دریافت پسورد استفاده می شود.
Submit : با استفاده از این type یک دکمه برای ارسال داده های فرم به یک فرم ساز ایجاد می شود.
Reset : با استفاده از این type می توان دکمه ای ایجاد کرد که تام فیلد های یک فرم را به مقادیر پیش فرض خود برمیگرداند.
Radio : با استفاده از این نوع type به کاربر این اجازه را خواهیم داد که فقط یکی از گزینه های محدود را انتخاب کند.
Check Box : با استفاده از این نوع Type می توان به کاربر اجازه داد که چند مقدار مختلف از مقادیر را انتخاب کند.
Button : با استفاده از این Type می توان کلید های قابل کلیک کردن ایجاد کنیم.
Color : از این نوع Type برای فیلد های استفاده می شود که نیازمند مشخص کردن یک رنگ می باشند.
Date : از این نوع Type برای فیلد های وارد کردن تاریخ استفاده می شود.
Email : از این نوع Type برای فیلد هایی که قرار است یک آدرس ایمیلی در آن ها وارد شود استفاده می شود.
File : از این نوع Type برای ایجاد یک فیلد بارگذاری فایل استفاده می شود.
Number : از این نوع Type برای دریافت یک عدد استفاده می شود.
Range : از این نوع Type برای وارد کردن عددی که مقدار دقیق آن مهم نیست.
Search : از این نوع Type برا ایجاد فیلد سرچ استفاده می شود.
Tel: از این نوع Type برای وارد کردن یک شماره تلفن استفاده می شود.
Time : از این نوع Type برای ایجاد فیلدی برای وارد کردن زمان استفاده می شود.
Url : از این نوع Type برای ایجاد فیلدی که در آن آدرس یک Url وارد شود استفاده می شود.
• تگ Label : این تگ یک برچسبی است برای تعریف یک فیلد .
• تگ select : با استفاده از این تگ می توان یک لیست کشویی را ایجاد کرد.
• تگ datalist : این تگ گزینه های از پیش تعریف شده ای را برای عنصر input مشخص می کند.
• تگ optgroup : این تگ گزینه های مرتبط را در یک لیست کشویی ایجاد می کند.
• تگ option : با استفاده از این تگ می توان در تگ های select ، datalist ، optgroup آیتم های لیست را تشکیل داد.
• تگ Textarea : این تگ فیلدی را ایجاد می کند که در آن امکان نوشتن ورودی چند خطی وجود دارد.
• تگ fieldset : با استفاده از این تگ می توان عنصر های مرتبط با یک فرم را گروه بندی کرد.
• تگ legend : با استفاده از این تگ می توان یک عنوان برای fieldset نوشت.
• تگ button : با استفاده از این تگ می توانیم یک دکمه قابل کلیک شدن ایجاد کنیم.
• تگ marquee : با استفاده از این تگ می توان یک متن یا تصویر را به صورت افقی یا عمودی حرکت داد.
• تگ table : با استفاده از این تگ می توان در یک سند Html یک جدول ایجاد کرد.
• تگ tr : این تگ در درون تگ table استفاده می شود برای ایجاد کردن سطر های جدول.
• تگ th : این تگ در درون تگ table مورد استفاده قرار میگیرد که با استفاده از آن می توان ستون های جدول را درست کرد.
• تگ caption : با استفاده از این تگ می توان یک عنوانی را برای یک جدول نوشت.
• تگ <!--…--> : با استفاده از این تگ می توان قسمتی از کد را کامنت کرد.
نظرات کاربران :
هیچ نظری برای این مطلب درج نشده است