HTML چیست و چه کاربردهایی دارد؟
HTML
محتوای یک صفحه وب را، HTML سازماندهی می دهد. اما HTML چیست؟ زبان نشانه گذاری استاندارد که ساختار محتوای وب را تعریف می کند. کدهای HTML شامل جداول داده ها و تصاویر گرافیکی، مجموعه ای از نقاط گلوله دار (بولت)، مجموعه ای از پاراگراف ها و… می باشد.
HTML چیست؟
برای اینکه بدانیم HTML چیست؟ ابتدا باید با مفهوم آن آشنا شویم. HTML مخفف Hyper Text Markup Language به معنای زبان نشانه گذاری فرا متنی می باشد. این نشانه گذاری به مرورگر وب میگوید که چگونه متن، تصاویر و سایر اشکال چند رسانهای را در یک صفحه وب نمایش دهد.
HTML یک توصیه رسمی توسط کنسرسیوم وب جهانی (W3C) است و عموماً توسط همه مرورگرهای وب اصلی، از جمله مرورگرهای وب دسکتاپ و موبایل، رعایت میشود. HTML5 آخرین نسخه html است.
منظور از زبان نشانه گذاری چیست؟
زبان نشانه گذاری یک سیستم رمزگذاری متن است که ساختار و قالب بندی یک سند و به طور بالقوه رابطه بین بخش های آن را مشخص می کند. نشانه گذاری اغلب برای کنترل نمایش سند یا غنی سازی محتوای آن برای تسهیل پردازش خودکار استفاده می شود.
زبان نشانه گذاری
زبان نشانه گذاری توسعه پذیر (XML) و زبان نشانه گذاری فرامتن (HTML) چند نمونه از زبان های نشانه گذاری هستند. صفحات وب اغلب با HTML ایجاد می شوند، انتقال داده ها و ذخیره سازی توسط XML انجام می شود و اسناد ساختاریافته با قالب بندی متن ساده گاهی اوقات با Markdown ایجاد می شوند.
توصیف HTML به زبان ساده
اگر یک ساختمان را در نظر بگیرید، HTML اسکلت آن محسوب می شود و CSS نمای ظاهری ساختمان. یعنی پایه هر ساختمانی اسکلت آن است و ساختمان بدون اسکلت به هیچ وجه ساخته نخواهد شد. HTML چیست؟ پایه و اساس تمامی سایت ها و بدون آن هیچ سایتی ساخته نخواهد شد. همچنین می توان اچ تی ام ال را با بدن انسان مقایسه کرد. هیچ انسانی بدون اسکلت به وجود نمیآید.
تمرینی ساده از اچ تی ام ال
<html>
<head>
<title>تایتل صفحه</title>
</head>
<body>
<h1>هدینگ یک/h1>
<p>پاراگراف</p>
</body>
</html>
تاریخچه HTML چیست؟
تیم برنرز لی اولین نسخه HTML را در سال 1993 نوشت. از آن زمان تاکنون تکرارهای متعددی از HTML انجام شده است. HTML 4.01 محبوب ترین نسخه استفاده شده در دهه 2000 بود و در دسامبر 1999 به طور رسمی به عنوان یک استاندارد شناخته شد.
نسخه دیگری از HTML که به عنوان یک زبان XML بازنویسی شد XHTML نام داشت. سایر زبان های نشانه گذاری را میتوان با استفاده از XML، یک زبان نشانهگذاری استاندارد ایجاد کرد. امروزه صدها زبان XML دیگر در حال استفاده هستند، مانندRSS (Really Simple Syndication)، MathML، MusicML، و GML (Geography Markup Language).
html چگونه کار می کند؟
جدا از این که html چیست؟ باید با نحوه کار آن نیز آشنا شوید. یک وب سایت با صفحات متوسط شامل چندین صفحه مختلف HTML است. به عنوان مثال، یک صفحه اصلی، یک صفحه درباره ما، و یک صفحه تماس با ما، همگی دارای فایلهای HTML جداگانه هستند.
اسناد HTML فایلهایی هستند که با پسوند html یا .htm ختم میشوند. یک مرورگر وب فایل HTML را میخواند و محتوای آن را ارائه میدهد تا کاربران اینترنت بتوانند آن را مشاهده کنند.
همه صفحات HTML دارای یک سری عناصر HTML هستند که از مجموعهای از برچسبها و ویژگیها تشکیل شده است. عناصر HTML بلوکهای سازنده یک صفحه وب هستند. یک تگ به مرورگر وب میگوید که یک عنصر از کجا شروع و پایان مییابد.
از آنجایی که HTML کاملاً مبتنی بر متن است، یک فایل HTML را میتوان به سادگی با باز کردن آن در برنامههایی مانند Notepad++، Vi یا Emacs ویرایش کرد.
هر ویرایشگر متنی را میتوان برای ایجاد یا ویرایش یک فایل HTML استفاده کرد و تا زمانی که با پسوند فایل html نامگذاری شده باشد، هر مرورگر وب مانند کروم یا فایرفاکس میتواند فایل را به عنوان یک صفحه وب نمایش دهند.
ویرایشگرهای WYSIWYG همچنین امکانات عیبیابی HTML را فراهم میکنند، اگرچه مرورگرهای وب مدرن اغلب دارای افزونههای توسعهدهنده وب هستند که مشکلات صفحات HTML را برجسته میکنند.
کروم و فایرفاکس هر دو شامل ابزارهای توسعه دهنده HTML هستند که امکان مشاهده فوری فایل HTML کامل یک صفحه وب را به همراه توانایی ویرایش سریع HTML و ایجاد فوری تغییرات در مرورگر اینترنت فراهم میکنند.
XML چیست؟
محتوای این زبان های HTML چیست؟ محتوای این زبان ها را می توان به راحتی بین برنامه ها منتقل کرد زیرا همه آنها با XML که یک زبان رایج است، نوشته شده اند. به همین دلیل، XML پتانسیل بسیار زیادی دارد، بنابراین جای تعجب نیست که W3C یک نسخه XML از HTML (همچنین به عنوان XHTML شناخته میشود) توسعه داده است. در سال 2000، XHTML به عنوان یک استاندارد تایید شد و در سال 2002 تحت ارتقا قرار گرفت. اگرچه محدودیت های بیشتری دارد، XHTML کاملا شبیه به HTML است. همه زبانهای XML به استانداردهای سختگیرانه نیاز دارند، زیرا برای فعال کردن قابلیت همکاری بین برنامه ها ضروری هستند.
اکثر صفحات وب اکنون با XHTML 1.0 یا HTML 4.01 ایجاد شده اند. اما در سالهای اخیر، WHATWG و W3C برای ایجاد HTML5، یک نسخه کاملا جدید از زبان، با هم کار کرده اند. در سال 2011، HTML5 هنوز یک استاندارد رسمی نبود. هنوز یک پیش نویس مشخصات محسوب میشد. بنابراین زبان اصلی تحت پوشش از آن دوره HTML5 بود.
تفاوت انواع HTML ها
انواع HTML ها
نسخه 1.2 HTML چیست؟ در روزهای اولیه که وب تقریبا ابتدایی از نسخه 1.2 استفاده میشد. اما با گذشت زمان، نسخه های متوالی با تعداد عملکردهای فزاینده ای تولید شد. با این وجود، طراحان وب باید از فناوری های اختصاصی و غیر استاندارد مانند Adobe Flash برای ارائه ویژگیها یا محتوایی استفاده کنند که HTML قادر به تطبیق آن نیست. از آنجایی که این فناوری ها نیاز به نصب افزونه های مرورگر دارند، کاربران خاصی ممکن است نتوانند به محتوا دسترسی داشته باشند (مثلا فلش توسط آیفون ها و آی پدها پشتیبانی نمی شود).
| فهرست | HTML 1.2 | HTML 4.01 | HTML5 | هدف |
|---|---|---|---|---|
| Heading | Yes | Yes | Yes | سازماندهی محتوای صفحه با سرفصل ها و زیرعنوان ها |
| Paragraph | Yes | Yes | Yes | پاراگراف های متن را مشخص کنید |
| Address | Yes | Yes | Yes | بلوک متنی که حاوی اطلاعات تماس است را شناسایی کنید |
| Anchor | Yes | Yes | Yes | پیوند به سایر محتوای وب |
| List | Yes | Yes | Yes | موارد را در یک لیست سازماندهی کنید |
| Image | Yes | Yes | Yes | یک عکس یا طراحی را در یک صفحه وب جاسازی کنید |
| Table | No | Yes | Yes | داده ها را در ردیف ها و ستون ها سازماندهی کنید |
| Style | No | Yes | Yes | برای کنترل نحوه نمایش اشیاء در یک صفحه وب، CSS را اضافه کنید |
| Script | No | Yes | Yes | جاوا اسکریپت را اضافه کنید تا صفحات به رفتارهای کاربر پاسخ دهند |
| Audio | No | No | Yes | صدا را با یک تگ به یک صفحه وب اضافه کنید |
| Video | No | No | Yes | ویدئو را با یک تگ به یک صفحه وب اضافه کنید |
| Canvas | No | No | Yes | یک صفحه طراحی نامرئی را به یک صفحه وب اضافه کنید، که در آن می توانید با استفاده از جاوا اسکریپت، نقاشی (انیمیشن، بازی و سایر ویژگی های تعاملی) اضافه کنید. |
چرا HTML یک زبان برنامه نویسی نیست؟
سه چیز مانع از این می شود که HTML یک زبان برنامه نویسی کامپیوتری باشد: از متغیرها پشتیبانی نمی کند. استفاده از عبارات شرطی ممنوع است. هیچ ساختار حلقه ای که تکرار شونده باشد ارائه نمی دهد. پس HTML چیست؟ HTML یک زبان نشانه گذاری است.
منظور زبان برنامه نویسی چیست؟
قبل از اینکه بتوانیم در مورد اینکه چرا یک زبان برنامه نویسی است یا نیست صحبت کنیم، باید یک زبان برنامه نویسی کامپیوتر را به عنوان نقطه شروع تعریف کنیم. برای انجام آن، به عملکرد یک کامپیوتر و به ویژه CPU فکر کنید.
سه عملکرد اصلی یک CPU به شرح زیر است:
- اطلاعات را از حافظه بخوانید
- منطق شرطی را روی آن اعمال کنید
- سپس به سرعت آن منطق را دوباره اجرا کنید.
این ها همه توابعی هستند که HTML از آنها پشتیبانی نمی کند. به همین دلیل HTML یک زبان برنامه نویسی نیست.
کاربرد HTML چیست؟
1. توسعه صفحات وب
کد HTML در بسیاری از وب سایت هایی که ما اغلب در اینترنت از آنها بازدید می کنیم استفاده می شود. همانطور که قبلا گفته شد از HTML برای ساختار صفحه وب به روش های مختلفی استفاده می شود. ممکن است صفحه را تقسیم کنیم، جداول اضافه کنیم و قسمت های مختلفی اضافه کنیم.
2. گشت و گذار در اینترنت
توانایی پیمایش بین صفحات آنلاین نیاز به HTML دارد. ایده فرامتن امکان ناوبری را فراهم می کند. همچنین لینک دادن آسان تر است. از منظر کاربر اینترنت، روی متنی کلیک میکنند تا به صفحه بعد هدایت شوند. HTML از تگ های لنگر برای ایجاد لینک ها استفاده می کند که ناوبری را آسان تر می کند.
<a/> سئو گوگل <"a href="seogooglee.com>
3. طراحی های واکنش گرا
طراحی واکنش گرا با HTML
پاسخگو بودن به کاربر و تعاملی بودن برای یک صفحه وب ضروری است. این قابلیت با استفاده از HTML امکان پذیر شده است. علاوه بر این، صفحات ریسپانسیو نسبت به صفحات استاتیک دسترسی بهتری دارند. یک طراحی وب ریسپانسیو از HTML و CSS برای کمک به تغییر اندازه خودکار، مخفی کردن، کوچک کردن یا بزرگ نمایی وب سایت استفاده می کند تا در همه پلتفرم ها (دسکتاپ، تبلت و تلفن) زیبا به نظر برسد.
4. ویژگی ذخیره سازی مرورگر HTML چیست؟
در گذشته، ذخیره داده ها در مرورگر یک کار پر زحمت بود. کوکی های کاربر یا زیرساخت سمت سرور باید توسعه داده شوند تا کاربر بتواند داده های مرورگر را ذخیره کند. اکنون HTML5 این فرآیند را آسانتر کرده است. HTML5 قابلیت های جدیدی را اضافه کرده است. LocalStorage و IndexDB نمونه هایی از چنین قابلیت های ذخیره سازی هستند.
5. کمک با ورود داده ها
ورود داده ها یکی دیگر از ویژگی های حیاتی است. به همین دلیل مدت زیادی داده ها در فایل های خاصی ذخیره می شوند. HTML5 امکان وارد کردن داده ها را به صورت آنلاین یعنی جمع آوری داده ها از کاربران از طریق فرم ها و ذخیره آن ها را امکان پذیر می کند. مانند تگ <form>.
6. ایجاد اسناد وب
اکثر اسناد وب ایجاد شده در اینترنت با استفاده از HTML ایجاد می شوند. اسناد وب با استفاده از Document Object Model یا DOM ایجاد می شوند. از تگ های HTML نیز برای قالب بندی سند استفاده می شود. اعلان <!DOCTYPE html> در ابتدای HTML چیست؟ این اعلان شروع سند وب HTML را نشان می دهد. سپس از تگ های استاندارد باز و بسته HTML استفاده می شود.
7. توسعه بازی
این روزها شاهد هستیم که افراد در هر سنی از کودک گرفته تا بزرگسال کاملا درگیر بازی های اینترنتی هستند. بیایید عملکرد HTML را در تولید این نوع بازی ها بررسی کنیم. تولید بازی قبلی به پلتفرم های مخصوص فلش محدود می شد. اما قابلیت ها و جایگزین های زیادی با HTML5 برای ساخت بازی وجود دارد. عناصر HTML مانند canvas که تمام قابلیت های مورد نیاز برای ایجاد بازی ها را فراهم می کند، مکان خوبی برای شروع کار مبتدیان است.
8. برنامه های وب که آفلاین هستند
ما می دانیم که برای مرور وب سایت ها، اتصال به اینترنت همیشه مورد نیاز است. با این حال، برنامه های وب اکنون می توانند حتی زمانی که ما متصل نیستیم قابل دسترسی باشند. HTML برای دسترسی کاربر به داده ها استفاده خواهد شد. برای انتخاب اینکه کدام داده به صورت آفلاین ذخیره شود، از یک فایل مانیفست کش استفاده می کند.
نسخه های HTML
نسخه های مختلف HTML
- HTML 1.0
- HTML 2.0
- HTML 3.2
- HTML 4.0
- HTML 4.01
- HTML 5
- HTML 5.1
- HTML 5.2
- HTML 5.3
مزایای HTML چیست؟
مزایای HTML به طور گسترده ای شناخته شده است و شامل مستقل بودن از پلتفرم (کار بر روی ویندوز، لینوکس و سایر سیستم عامل ها)، یادگیری ساده، بدون نیاز به تنظیم (فقط سند را با پسوند. html ذخیره کنید و آن را در یک باز کنید. مرورگر برای مشاهده کد HTML)، و نیازی به نصب ندارد.
- HTML یک زبان نشانه گذاری محبوب است که به ایجاد ساختار وب سایت کمک می کند.
- یادگیری آن ساده است.
- زبان HTML توسط همه مرورگرها پشتیبانی می شود.
- HTML به سرعت بارگذاری می شود و سبک است.
- ذخیره سازی فایل های بزرگ به دلیل ویژگی کش برنامه مجاز است.
- شما نیازی به خرید نرم افزار اضافی ندارید زیرا به طور پیش فرض در هر پنجره نصب می شود.
- از آنجایی که HTML فقط یک متن ساده است، ویرایش آن آسان است.
- بدون دردسر با زبان های دیگر مانند CSS، جاوا اسکریپت و سایر زبان ها ارتباط برقرار می کند.
- یکی از مزایای کدنویسی HTML برای مبتدیان این است که ساده است.
- HTML از قالب ها پشتیبانی می کند که فرآیند ایجاد یک صفحه وب را ساده می کند.
- از آنجایی که متن فشرده است، دانلود آن زمان کمی می برد.
- برای کسانی که تازه وارد حرفه طراحی وب شده اند بسیار مفید است.
- تگ ها و ویژگی های متعدد در HTML به شما امکان می دهد کد خود را متراکم کنید.
معایب HTML چیست؟
در پروژه های بزرگ، پیچیدگی ساختاری آن ممکن است به یک مسئله بزرگ تبدیل شود. حفاظت های امنیتی قوی در HTML وجود ندارد و نوشتن وب سایت های پیچیده می تواند منجر به مقادیر زیادی کد شود.
- از آنجایی که ثابت است، نمی تواند به تنهایی خروجی پویا تولید کند.
- درک ساختار متون HTML چالش برانگیز می شود.
- خطاها ممکن است پرهزینه باشند.
- برای ایجاد لیست ها، جداول و فرم ها و همچنین حفظ طرح رنگی صفحه، تلاش زیادی لازم است.
- برای ایجاد یک صفحه وب اولیه، باید کدهای زیادی بنویسیم.
- از آنجایی که هدف اصلی تگ توسط زبان دیگری که از HTML استفاده می کند جایگزین شده است، باید بررسی کنیم که برچسب های منسوخ شده نباید استفاده شوند و زبان جایگزین را یاد بگیریم.
- قابلیت های امنیتی که HTML ارائه می دهد محدود است.
- پیچیدگی زمانی ایجاد می شود که نوشتن کد طولانی برای ایجاد یک صفحه وب مورد نیاز است.
- HTML برای ایجاد صفحات پویا بی فایده است زیرا فقط می تواند صفحات ایستا و ساده بسازد.
- ویرایش صفحه وب باید به صورت جداگانه انجام شود. نمی توان آن را به صورت مرکزی انجام داد.
آشنایی با تگ های HTML
آشنایی با تگ HTML
به راست بکشید
| HTML پایه | قالب بندی HTML | فرم ها و ورودی های HTML | فریم های HTML | تصاویر | صوتی / ویدئو | لینک ها | جدول | سبک ها و معناشناسی | اطلاعات متا | برنامه نويسی |
|---|---|---|---|---|---|---|---|---|---|---|
| <!DOCTYPE> | <acronym> | <form> | <frame> | <img> | <audio> | <menu> | <table> | <style> | <head> | <script> |
| <html> | <abbr> | <input> | <frameset> | <map> | <source> | <ul> | <caption> | <div> | <meta> | <noscript> |
| <head> | <address> | <textarea> | <noframes> | <area> | <track> | <ol> | <th> | <span> | <base> | <applet> |
| <title> | <b> | <button> | <iframe> | <canvas> | <video> | <li> | <td> | <header> | <basefont> | <embed> |
| <body> | <bdi> | <select> | <figcaption> | <dl> | <tr> | <hgroup> | <object> | |||
| <h1> to <h6> | <bdo> | <optgroup> | <figure> | <dir> | <thead> | <footer> | <param> | |||
| <p> | <big> | <option> | <picture> | <dd> | <tbody> | <main> | ||||
| <br> | <blockquote> | <label> | <svg> | <dt> | <tfoot> | <section> | ||||
| <hr> | <center> | <fieldset> | <col> | <search> | ||||||
| <!–…–> | <cite> | <legend> | <colgroup> | <article> | ||||||
| <code> | <datalist> | <aside> | ||||||||
| <del> | <output> | <details> | ||||||||
| <font> | <dialog> | |||||||||
| <em> | <summary> | |||||||||
| و… | <data> |
نتیجه گیری
HTML چیست؟ رایج ترین زبان نشانه گذاری در اینترنت HTML است. هر صفحه HTML از مجموعه ای از بخش ها تشکیل شده است که با هم ساختار محتوای صفحه وب یا برنامه را تشکیل می دهند. صفحات اینترنتی استاتیک در درجه اول با HTML ایجاد می شوند که زبانی بسیار غنی از پشتیبانی است که یادگیری آن آسان است. HTML زمانی بهترین عملکرد را دارد که با جاوا اسکریپت برای عملکرد و CSS برای ظاهر ترکیب شود.
