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

در ادامه این مقاله از سری مقالات آموزش html و css به بررسی و معرفی زبان نشانه گذاری html خواهیم پرداخت.

دوره معرفی شده در ویدئو

آموزش پیشنهادی

دوره آموزش html css با 20 ساعت پروژه طراحی سایت هاستینگ + پشتیبانی VIP

• آموزش کامل تگ های HTML
• بررسی تخصصی زبان CSS
• کار با تگ های مفهومی HTML 5
• پیاده سازی پروژه واقعی وبسایت هاستینگ
• و...

مشاهده دوره

html چیست و چه کاربردی دارد ؟

در سال 1990 بود که اولین مرورگر ها تولید و عرضه شدند. بعد از ساخته شدن مرورگر، مهندسین نرم افزار به این فکر افتادند که زبانی برای برچسب گذاری و طراحی در مرورگر ها پیاده سازی کنند. در ابتدا Berners-Lee considered کدهای اولیه HTML را به صورت غیر رسمی معرفی کرد تا دانشمندان بیشتری علاقه مند به این زبان برچسب گذاری شوند. در نهایت در سال 1993 نیروی کار متخصصین اینترنت یا همان IETF این زبان را با نام SGML به صورت رسمی معرفی کردند. البته بلافاصله این تیم تصمیم به تغییر نام این زبان به HTML گرفت و نام اچ‌تی‌ام‌ال برای این زبان نشانه گذاری انتخاب شد. اما html چیست و کاربرد آن در چه جایی مطرح است؟

سالها پیش یکی از مشکلات مهندسین نرم افزار این بود که وقتی نوشته ای یا صفحه ای را در کامپیوتر خود طراحی میکردند، آن صفحه در کامپیوتر بقیه به همان شکل نمایش داده نمیشد. مثلا شما اگر یک نوشته با فونت X در نرم افزار word بنویسید و برای من ارسال کنید، چنانچه من آن فونت یا نرم افزار word را نداشته باشم، قادر به استفاده از نوشته شما نخواهم بود. حتی اگر نوشته را ببینم، با آن ظاهری که شما فرستادید، نمایش داده نخواهد شد.

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

تفاوت یک زبان برنامه نویسی با زبان HTML چیست ؟

زبان های برنامه نویسی شامل قطعه کدهایی نظیر توابع، متغیر ها و کلاس ها هستند که در نهایت برای اجرا شدن و نمایش خروجی به کاربر بایستی تفسیر یا کامپایل شوند. یعنی زمانی که ما از یک زبان سطح بالا مانند زبان کاتلین استفاده میکنیم، در نهایت بایستی این زبان به زبان ماشین یا همان صفر و یک کامپایل یا ترجمه شود. پس از ترجمه شدن، یک فایل خروجی در اختیار ما قراره داده خواهد شد که میتوانیم آن را نصب و راه اندازی کنیم. مانند فایل APK که قابل نصب بر روی اندروید میباشد.

اما تفاوت زبان نشانه گذاری htmlچیست تفاوت این است که HTML یک زبان نشانه گذاری میباشد نه برنامه نویسی. یعنی با HTML ما بخشی از نوشته خودمان را نشانه گذاری میکنیم که مثلا بخش X بایستی کلفت تر شده یا از فونت بزرگتری استفاده کند. پس HTML یک زبان برنامه نویسی نیست که در نهایت کامپایل شده و فایل خروجی برای ما صادر کند. بد نیست بدانید که برچسب های HTML در نهایت بایستی درون مرورگر ها به نمایش درآیند.

منظور از کد گشایی تگ های HTML چیست ؟

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

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

مقاله پیشنهادی: معرفی و دانلود 14مورد از بهترین کتاب آموزش HTML و CSS

HTML5 چیست؟

زبان اچ تی ام ال از بتن تولد خود مشمول آپدیت ها و بروزرسانی های زیادی شده است. از نسخه SGML گرفته تا HTML1 و HTML2 و HTML4.01 که همگی نسخه های متفاوت و مختلف این زبان نشانه گذاری محسوب میشوند. اما آخرین نسخه زبان HTML نسخه کاملا استاندارد و حرفه ای HTML5 میباشد که در سال 2014 به صورت رسمی معرفی و مورد استفاده قرار گرفت. اکنون اکثر وبسایت های موجود در بستر اینترنت از همین نسخه HTML برای طراحی صفحات خود استفاده کرده اند.

مزایا و معایب زبان HTML

زبان نشانه گذاری اچ تی ام ال نیز دارای محدودیت ها و نقص هایی در مقابل تمام ویژگی ها و خصوصیات خود میباشد. در ادامه برخی از مزایا و معایب این زبان را مورد بررسی قرار میدهیم.

مزایای اچ تی ام ال

معایب اچ تی ام ال

رابطه میان JS، CSS و HTML چیست ؟

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

مقاله پیشنهادی: معرفی و دانلود 14مورد از بهترین کتاب آموزش HTML و CSS

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

آیا HTML سخت است ؟

در پاسخ به سوال ” HTML چیست ؟ ” دریافتیم که HTML یک زبان نشانه گذاری است و هیچکدام از سختی های یک زبان برنامه نویسی را در خود ندارد. یعنی سختی هایی نظیر توابع نویسی، شی گرایی، اتصال به دیتابیس و تعریف متغیر در زبان HTML وجود نداشته و استفاده نمیشوند. پس یادگیری کار با این زبان نشانه گذاری به شدت ساده و آسان خواهد بود. شما حتی اگر هیچ پیش زمینه ای از برنامه نویسی نداشته باشید هم در کمتر از یک ماه میتوانید به این زبان طراحی وبسایت مسلط شوید.

ایجاد و ساخت فایل HTML

همانطور که بیان شد، زبان نشانه گذاری ابر متن یک زبان برچسب گذاری بر اساس قوانین میباشد. رعایت قوانین میتواند به سیستم کامپیوتر بفهماند که این فایل یک فایل HTML است. پس برای ایجاد کردن یک فایل HTML کافیست تا ابتدا یک فایل TEXT معمولی در ویندوز ایجاد کرده و پسوند آن را از txt به html تغییر دهید. تغییر پسوند اولین کاریست که برای ایجاد کردن یک فایل اچ تی ام ال باید انجام داد.

سپس این فایل را با نرم افزار notepad باز کرده و ساختار استاندارد HTML5 را در آن مینویسیم. البته معمولا برای کدنویسی زبان HTML از ویرایشگر های کد قوی تر از notepad استفاده میشود. ویرایشگر هایی نظیر VS Code یا Dream Weaver که اکثر طراحان سایت از آنها برای کدنویسی صفحات وب خود استفاده میکنند. پس از باز شدن فایل html بایستی تگ های اصلی و استاندارد زیر را در فایل خود قرار دهیم :

معرفی تگ های HTML

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

در تصویر بالا تگ های html را نام بردیم، در ادامه به معرفی کامل کاربرد و وظایف آنها خواهیم پرداخت.

• تگ HTML : تگ اصلی زبان HTML است که تمام تگ های دیگر درون آن پیاده سازی شده و قرار میگیرند.
• head : تگی کاربردی برای استفاده از meta هایی نظیر زبان سایت، توضیحات صفحه، لینک فایل CSS و غیره
• body : تگ بدنه وبسایت که تمام تگ های ظاهری و قابل مشاهده سایت درون آن قرار میگیرند
• تگ b : یک برچسب کاربردی برای بولد کردن یا همان کلفت کردن متن در HTML
• تگ em : برچسبی برای کج کردن یا italic کردن متن
• img : مورد استفاده برای گذاشتن تصویر در وبسایت
• تگ a : تگی کاربردی برای ایجاد لینک در سایت
• section : یک تگ مهم که برای بخش بندی کردن سایر تگ ها استفاده میشود
• video : برچسبی برای گذاشتن ویدیو در صفحه
• audio : تگی برای قرار دادن موزیک در سایت
• تگ br : برای رفتن به خط بعدی و در واقع enter زدن
• مشاهده همه تگ های زبان HTML ( کلیک کنید + )

منظور از Attribute در HTML چیست ؟

Attribute به معنای خصوصیت و ویژگی میباشد. اما کاربرد آن در HTML چیست؟ برخی از تک های HTML نیازمند ویژگی هایی هستند که باید در آن تگ مورد استفاده قرار بگیرد. به عنوان مثال تگ <a> برای ایجاد لینک مورد استفاده قرار میگیرد. اما اگر در این تگ بخواهیم لینک مدنظر خودمان را قرار دهیم، بایستی از ویژگی href در آن استفاده کنیم. در واقع این خصوصیت href است که آدرس نهایی را مشخص و معین میکند. پس ما بعد از زدن بر روی لینک، دقیقا به همان آدرسی میرویم که در href مشخص شده باشد. به مثال زیر دقت کنید :

<a href="www.daneshjooyar.com">Daneshjooyar</a>

نمونه ای از یک سند HTML

شاید برایتان جذاب باشد که یک سند HTML را مورد بررسی قرار دهید. در واقع هر وبسایتی که در حال استفاده کردن از آن باشید ( حتی همین صفحه از سایت دانشجویار ) یک سند کاملا آماده HTML محسوب میشود که میتوانید آنرا بررسی کنید. برای بررسی کردن ساختار HTML یک وبسایت کافیست تا آن وبسایت را در مرورگر گوگل کروم باز کرده و در جایی از صفحه کلیک راست کنید. حال با زدن گزینه inspect elements تمام کد های HTML این صفحه از سایت برای شما به نمایش در خواهد آمد. اکنون شما قادر به تجزیه و تحلیل تگ های این صفحه میباشد.

نتیجه گیری

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

پس باتوجه به آنچه بیان شد میتوان کاربرهای اصلی hTML  را شامل موارد زیر دانست:

1. ساختاردهی محتوا: HTML برای ساختاردهی و نمایش محتوای وبسایت استفاده می‌شود. با استفاده از عناصر HTML مختلف، می‌توانید ساختار صفحات وب را تعریف کنید، مثلاً سرصفحه (header)، فوتر (footer)، ناوبری (navigation)، بخش‌های مختلف صفحه و متن‌ها.

2. فرم‌ها: HTML حاوی عناصر فرم است که به کاربران امکان می‌دهد اطلاعات را وارد کنند و آنها را به سمت سرور ارسال کنند. این عناصر شامل فیلدهای متنی، دکمه‌ها، جعبه انتخاب، چک‌باکس، رادیوباتن و غیره هستند.

3. لینک‌ها: عناصر HTML مانند `<a>` برای ایجاد لینک‌ها به صفحات دیگر یا منابع خارجی استفاده می‌شوند. با استفاده از لینک‌ها، کاربران می‌توانند به صفحات دیگر جابجا شوند و منابع را دریافت کنند.

4. تصاویر: HTML امکان نمایش تصاویر در صفحات وب را فراهم می‌کند. عنصر `<img>` برای اضافه کردن تصاویر استفاده می‌شود و می‌توانید مسیر تصویر و متن جایگزین (alt text) را مشخص کنید.

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

6. عناصر چندرسانه‌ای: HTML امکان نمایش ویدیو، صدا، نقشه‌ها و اجزای چندرسانه‌ای دیگر را در صفحات وب فراهم می‌کند. با استفاده از عناصر HTML مختلف، می‌توانید این اجزا را به صفحات خود اضافه کنید.

چنانچه درمورد مقاله html چیست؟ سوالی دارید با ثبت نظرات، پیشنهادات، انتقادهای خود در بخش نظرات سایت، ما را در راستای بهبود کیفیت خدماتمان، یاری نمایید.