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

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

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

HTML چیست؟

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

در ابتدا لازم است بدانید html یک زبان برنامه نویسی نیست! بلکه یک روش یا زبان نشانه‌گذاری است که برای ساختاربندی اجزای صفحه به کار برده می‌شود.

زبان نشانه‌گذاری چه تفاوتی با زبان برنامه نویسی دارد؟

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

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

تاریخچه زبان HTML

برای اینکه بدانیم HTML از کجا آمده باید سفر کوتاهی به سال 1991 داشته باشیم. زمانی که آقای Tim Berners-Lee کار خود را روی 18 Tag یا همان برچسب ساده شروع کرد و اولین نسخه HTML را طراحی کرد. HTML روز به روز پیشرفت کرد و در هر نسخه امکانات بیشتری را در قالب تگ‌‌های کاربردی‌تر در اختیار طراحان قرار داد.

به این ترتیب این زبان مشکلات قبلی خود را به مرور رفع کرد. HTML4 در سال 1999 معرفی شد و توانست تا مدت‌ها توسط طراحان وب مورد استفاده قرار گیرد، تا این که بزرگترین تحول تاریخ HTML با معرفی HTML5 اتفاق افتاد. این نسخه از زبان HTML توانست بیش از پیش به توسعه دهندگان در طراحی سایت‌ها کمک کند که در ادامه می‌خواهیم با آن بیشتر آشنا شویم.

HTML چه کاربردی دارد؟

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

در واقع شما با HTML اسکلت‌بندی سایت را پیاده سازی می‌کنید.

پیاده‌سازی عناصر در HTML

تمام عناصری که به وسیله‌ی HTML در صفحه قرار می‌گیرند باید به کمک تگ <> (برچسب‌ها) پیاده سازی شوند. تگ‌ها، برچسب‌هایی هستند که مشخص می‌کنند هر عنصری که در صفحه قرار گرفته است جزو کدام دسته (متن، تصویر، عنوان، لینک و…) است.

تگ‌ها عناصری هستند که وظایف گوناگونی دارند و با فراخوانی هر کدام کارشان شروع شده و با بستن تگ کارشان تمام می‌شود. مثلا برای نوشتن پاراگراف‌ها در زبان HTML از تگ p استفاده می‌شود و زمانی که پاراگراف تمام شده، تگ هم بسته می‌شود. همچنین برای نشان دادن لینک‌ها از تگ a استفاده در صفحات وب استفاده می‌شود.

تگ‌های HTML در حقیقت همان دستورالعمل‌های این زبان هستند که به مرورگر می‌گویند صفحه مورد نظر از چه عناصری تشکیل شده است. هر کدام از این Tag معنا و مفهوم خاصی دارند و به شما امکاناتی مانند تغییر شکل ظاهری متن‌ها، ساخت لیست‌های مختلف و به هم متصل کردن صفحات را می‌دهند. همچنین از آن‌ها برای کار با صدا، تصویر و غیره استفاده می‌شود.

مهمترین تگ‌های HTML را بشناسید

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

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

مزایا و معایب زبان HTML چیست؟

HTML در کنار css و js هسته اصلی وب را تشکیل می‌دهد و یک زبان بسیار مهم در دنیای وب حساب می‌شود. این زبان مزیت‌ها و محدودیت‌هایی هم دارد که در ادامه به آن‌ها اشاره می‌کنیم و میبینیم دلیل اصلی ماندگاری HTML چیست و چرا این زبان با تمام مشکلاتش هنوز زبان شماره یک وب به حساب می‌آید. برخی از مهمترین مزایا و معایب این زبان عبارتند از:

مزایای HTML

✅ یادگیری آسان و لذت‌بخش
✅ قابلیت اجرا در تمام مرورگرها
✅ متن باز و رایگان بودن
✅ ادغام آسان با زبان‌های سمت سرور مثل php

معایب HTML

❎ استاتیک بودن و وابستگی به زبان‌های سمت سرور برای تعامل با کاربر
❎ ضعف در پشتیبانی از مرورگرهای قدیمی
❎ نیاز به طراحی جداگانه هر صفحه به دلیل نبود قواعد منطقی برنامه نویسی

Attribute چیست؟

هر عنصر HTML می‌تواند دارای ویژگی یا به عبارتی attribute باشد. Attributeها اطلاعات بیشتری را برای هر تگ مشخص می‌کنند. برای مثال برای مشخص کردن عرض یک شکل یا تصویر از ویژگی width در تگ استفاده می‌شود.

HTML چه رابطه‌ای با زبان‌‌های css و javascript دارد؟

کمتر پیش می‌آید که از اچ تی ام ال صحبت کنیم و ذهنمان به سمت زبان‌های css و JavaScript کشیده نشود. تا اینجای کار فهمیدیم اچ تی ام ال چیست و چرا در طراحی سایت به آن نیاز خواهیم داشت. اما به این نکته توجه داشته باشید که امروزه اچ تی ام ال به تنهایی کاربرد زیادی ندارد.

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

فرانت اند (Front End) به چه معناست؟

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

تا اینجا درباره HTML و CSS و JavaScript صحبت کردیم. این زبان‌ها اصلی‌ترین عناصر فرانت اند هستند و برای یادگیری آن‌ها برای فرانت اند کار شدن ضروری است.

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

HTML به کمک تگ‌های از قبل تعریف شده ساختار و اسکلت صفحه وب را مشخص می‌کند.
CSS به ما کمک می‌کند عناصر مختلف را در صفحه جابه‌جا کنیم، رنگ‌بندی را تغییر دهیم، فونت‌ها را عوض کنیم و به جایی برسیم که یک صفحه وب با ظاهر قابل قبول و قابل ارائه برای داشته باشیم.
JavaScript به ما اجازه می‌دهد صفحات وب را به طور داینامیک یا پویا طراحی کنیم. با JS می‌توانیم عناصر تعاملی مختلف مثل اسلایدر، صفحه pop up، گالری عکس و چیزهای مشابه تولید کنیم.