HTML چیست و چه کاربردهایی دارد؟ (به زبان ساده)

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

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

HTML چیست؟

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

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

تاریخچه HTML

تولد HTML به سال ۱۹۹۰ برمی‌گردد. وقتی که یک تیم حرفه‌ای از cern (مرکز اروپایی تحقیقات هسته‌ای) به رهبری فردی، به نام تیم برنرز، یک زبان ساده ابداع کردند که با آن بتوانند، اطلاعات را روی وب ایجاد و ارائه کنند. این زبان ساده با پنج نسخه ارائه شد که امروزه، استانداردترین و بهترین نوع آن‌ها نسخه‌ی پنجم آن است.

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

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

در واقع تفاوت اصلی یک زبان برنامه نویسی با زبان‌های غیر برنامه نویسی این است که زبان‌های برنامه نویسی قادرند که عملیات منطقی و محاسباتی انجام دهند. زبان‌های مثل JavaScript و python. این در حالی است که HTML قابلیت انجام محاسبات منطقی را ندارد. این زبان بیشتر قابلیت انجام توصیفات و ویژگی‌های بصری را در وب دارد.

بنابراین زیبایی وب سایت‌ها از HTML نشئت می‌گیرند. اما اگر قرار است که این زیبایی بصری، به بخش‌های پیشرفته‌تری مثل انجام پویانمایی‌های خاص برسد، پای برنامه نویسی و کد نویسی به وب سایت باز می‌شود.

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

پيشنهاد وب رمز: تفاوت برنامه نویسی و کد نویسی؛ ۸ تفاوت آن‌ها

کاربرد HTML چیست؟

اولین نسخه‌ی 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 5.3، که در سال 2018 منتشر شد، سومین نسخه اصلی زبان علامت‌گذاری ابرمتن (HTML) است. این نسخه به منظور بهبود قابلیت استفاده، عملکرد و سازگاری وب‌سایت‌ها، ویژگی‌های جدیدی ارائه داده است.

یکی از ویژگی‌های جذاب HTML 5.3، افزودن عناصر جدید به زبان است. این عناصر شامل “dialog” برای نمایش پنجره‌های گفتگو، “template” برای نمایش محتوای ایستا یا پویا، “progress” برای نشان دادن پیشرفت یک کار، و “time” برای نمایش زمان می‌شوند. این افزودن عناصر جدید، به توسعه‌دهندگان این امکان را می‌دهد تا محتوای مختلف را با استفاده از این عناصر به صورت بهتر و کارآمدتر نمایش دهند.

با این به‌روزرسانی، HTML 5.3 تلاش کرده است تا بهبودهایی در تجربه کاربری و بهینه‌سازی عملکرد وب‌سایت‌ها ارائه دهد. این تغییرات نشان از پیشرفت‌های قابل توجهی در فناوری وب دارند و توسعه‌دهندگان را قادر می‌سازند تا وب‌سایت‌هایی با کیفیت و شگفت‌انگیز بیشتری ایجاد کنند.

مزایای HTML

در این بخش به این می‌پردازیم که مزایای اصلی HTML‌ چیست و این مزایا چه قابلیت‌هایی را به html می‌دهند؟

1. اجرا در تمامی مرورگرها: یکی از بزرگ‌ترین مزایای این سیستم، اجرا شدن آن در تمامی مرورگرها در نسخه‌های جدید است‌. به طوری که کاملا با تمامی مرورگرها سازگاری دارد و باعث مشکل نمی‌گردد.
2. یادگیری آسان: یادگیری این زبان بسیار ساده است و دشواری‌ای‌ مثل زبان‌های برنامه نویسی ندارد. به همین دلیل شما به راحتی می‌توانید با استفاده از آن صفحات خود را دیزاین کنید.
3. کد منبع تمیز: ساختار اچ تی ام ال کاملا تک خطی و ساده است و تگ‌های آن قابل تشخیص‌اند. به همین دلیل، ویرایش کردن آن قابل انجام است.
4. منبع باز: منبع باز بودن به این معناست که شما به راحتی از هر کدی که بخواهید، می‌توانید استفاده کنید و محدودیتی در این زمینه وجود ندارد.
5. رایگان: استفاده از اچ تی ام ال کاملا رایگان است و شما نیازی به پرداخت هزینه‌ای بابت مجوز یا اشتراک آن ندارید.
6. امکان ادغام با زبان‌های برنامه نویسی بک اند: شما می‌توانید این زبان را با زبان‌های پایتون و جاوا اسکریپت استفاده کنید و از تعامل این زبان‌ها صفحات پویانمایی شخصی سازی شده ایجاد کنید.
7. مستقل از پلتفرم: این سیستم با انواع پلتفرم‌ها سازگاری دارد و شما می‌تپانید آن را روی هر نوع سیستم و پلتفرمی نصب و استفاده کنید. برای مثال این سیستم در پلتفرم وردپرس هم کارایی دارد و کار می‌کند.
8. عدم حساسیت به به بزرگی و کوچکی حروف: در هنگام نوشتن این زبان، هیچ موردی در استفاده از کلمات بزرگ و‌ کوچک وجود ندارد و شما می‌توانید، به راحتی به هر شکلی که راحت‌تر هستید، مفاهیم را تایپ کنید.

معایب HTML

1. معمولا برای صفحات استاتیک وب مورد استفاده قرار می‌گیرند: یکی از معایب اچ تی ام ال این است که صفحات وب ایستا هساند و‌‌ پویایی‌ای در آن‌ها وجود ندارد و تنظیم کردن آن‌ها با پویانمایی سخت است.
2. تمامی اجزاء باید به طور جداگانه ایجاد شوند: برای اضافه کردن هر جزو و عنصر، باید به ثورت جداگانه اقدام شود و عضو جدید ایجاد شود و این می‌تواند کار طراحی را کمی سخت‌تر کند.
3. ممکن است مرورگرهای قدیمی‌تر با ویژگی های جدید سازگار نباشند: این مشکل مخصوصا در نسخه‌های جدیدتر این زبان وحود دارد و آن هم این است که در مرورگرهای قدیمی اجرا نمی‌شوند یا با باگ‌هایی رو به رو هستند.

تگ های متداول HTML

شاید تا اینجای مطلب، برای‌تان این سوال پیش آمده که تگ در HTML چیست و چه کاربردی دارد؟ تگ‌ها در زبان اچ تی ام ال بخش از ساختار ایجاد عناصر بصری هستند که معمولا با <> نشان داده می‌شوند. مثلا تگ ویدئو در صفحه اینگونه نوشته می‌شود: <video>.

نوشتن این تگ‌ها در کدهای اچ تی ام ال موجب به وجود آمدن بخش، فایل یا لینک مورد نظر شما می‌شود. چند نمونه تگ متداول در اچ تی ام ال داریم که در این بخش آن‌ها را معرفی می‌کنیم.

• <!–…–>: این تگ معمولا برای اضافه کردن کامنت در بخش مورد نظر استفاده می‌شود.
• <!DOCTYPE>: این تگ که کوتاه شده‌ی Document type است. به معنای اضافه کردن یک سند یا فایل است.
• <a>: این تگ برای اضافه کردن هایپر لینک‌ها است. هایپر لینک‌ها در واقع همان لینک‌هایی هستند که در بین مطلب در صفحات مختلف اضافه می‌شوند و کلیک بر روی آن‌ها شما را به صفحه‌ای دیگر منتقل خواهد کرد.
• <abbr>: این تگ زمانی استفاده می‌شود که شما نیاز دارید که چیزی را به صورت خلاصه بنویسید و بعدا با نگه داشتن موس روی آن کامل سده‌ی آن عبارت یا کلمه به مخاطب نشان داده شود.
• <address>: این تگ نشان دهنده‌ی نویسنده، منابع یا هر اطلاعات آدرس مانند دیگر است.

برای مشاهده لیست کامل تگ‌های HTML وارد سایت w3schools.com شوید.

HTML,CSS,JavaScript؛ با 3 یار غار دنیای وب آشنا شوید!

اسم html که می‌آید ذهن ما پر می‌شود از نام‌های آشنای این حوزه، نام‌هایی مثل css و javascript. این موضوع کاملا نرمال است. برخی از نویسندگان یا کارشناسان این حوزه، این سه زبان را با تمام تفاوت‌های‌شان سه یار غار دنیای وب می‌دانند.

این سه مفهوم با این‌که کاملا متفاوت‌اند اما عضوی اساسی از هر وب‌ سایتی شناخته می‌شوند. نقژه‌ی اتصال این سه مفهوم در طراحی عناصر بصری وب سایت است. می‌پرسید چگونه؟

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

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

با استفاده از جاوا اسکریپت هم شما می‌توانید در صفحات خود به خصوص لندینگ پیج خود، یک پویانمایی خوب ایجاد کنید. این کارها که از هر سه‌تای این مفاهیم نشئت گرفته شده‌اند، باعث افزایش مخاطب و حرفه‌ای تر شدن کار شما می‌شود.

یک پروژه کوچک برای تمرین کد زدن به زبان HTML

حالا وقت این است که با هم تمرین کنیم! یکی از بهترین پروژه‌های تمرینی برای کد زدن به زبان اچ تی ام ال این است که یک صفحه‌ی وب طراحی کنید. برای طراحی یک صفحه‌ی وب معمولی، معمولا باید بخش‌ها و عناصر زیر را در نظر بگیرید. البته قبل از همه‌ی این‌ها بهتر است که ویژوال استودیو یا ویژوال استودیو کد را در رایانه‌ی خود نصب کنید و کدها را روی ان اعمال کنید.

1. Head: بخش <head> شامل اطلاعات مربوط به صفحه وب است که به صورت مستقیم در بخش بالایی صفحه نمایش داده می‌شود. این بخش با نام هدر هم شناخته می‌شود که در آن منوها و سایر اطلاعات قرار می‌گیرد.
2. عنوان (Heading): عنوان‌ها در صفحه وب برای سازماندهی و سلسله‌مراتب بندی محتوا استفاده می‌شوند. از عناصر <h1> تا <h6> برای عناوین اصلی و فرعی استفاده می‌شود، که <h1> عنوان اصلی و <h6> عنوان فرعی است.
3. بدنه (Body): بخش <body> شامل محتوای قابل نمایش در صفحه است. عناصری مانند متن، تصاویر، لینک‌ها، جداول، فرم‌ها و سایر عناصر HTML در این بخش قرار می‌گیرند. پس فقط کافی است که محتوای اصلی خود را در این بخش کپی پیست کنید.
4. تصاویر (Images): برای نمایش تصاویر در صفحه وب از عنصر <img> استفاده می‌شود. با استفاده از ویژگی src مسیر تصویر مشخص می‌شود و با ویژگی‌های مختلفی مانند alt و width می‌توان جزئیات دیگری را مشخص کرد.
5. جداول (Tables): بهتر است برای تمرین از جدول‌ها هم استفاده کنید. برای نشان دادن آن‌ها از عنصر <table> استفاده می‌شود. جدول شامل ردیف‌ها (<tr>) و ستون‌ها (<td>) است.
6. فرم‌ها (Forms): استفاده از فرم‌ها و کد زدن آن‌ها کمی سخت است و گویی موضوع آن‌ها کاملا فرق می‌کند. اما شما می‌توانید در صفحه‌ی خود از غرم‌ها هم استفاده‌ کنید. عناصری مانند <input>و<select> و<button> معمولا برای ساختن فرم‌ها استفاده می‌شوند.

برای مثال فرم زیر یک نمونه از یک فرم ثبت نام ساده است:

<!DOCTYPE html>

<html>

<head>

<title>فرم ثبت نام</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

background-color: #f2f2f2;

}

form {

display: inline-block;

margin-top: 50px;

}

label {

display: block;

margin-bottom: 10px;

}

input[type=”text”], input[type=”email”], input[type=”password”] {

padding: 5px;

width: 200px;

}

input[type=”submit”] {

padding: 8px 20px;

background-color: #4CAF50;

color: white;

border: none;

cursor: pointer;

}

</style>

</head>

<body>

<h1>فرم ثبت نام</h1>

<form action=”submit.php” method=”post”>

<label for=”name”>نام:</label>

<input type=”text” id=”name” name=”name” placeholder=”نام خود را وارد کنید” required>

<label for=”email”>ایمیل:</label>

<input type=”email” id=”email” name=”email” placeholder=”ایمیل خود را وارد کنید” required>

<label for=”password”>رمز عبور:</label>

<input type=”password” id=”password” name=”password” placeholder=”رمز عبور خود را وارد کنید” required>

<input type=”submit” value=”ثبت نام”>

</form>

</body>

</html>

در این مثال، یک فرم ساده برای ثبت نام تعریف شد. فرم دارای سه فیلد است: نام (`<input type=”text”>`)، ایمیل (`<input type=”email”>`) و رمز عبور (`<input type=”password”>`). همچنین، یک دکمه (`<input type=”submit”>`) برای ارسال فرم نیز وجود دارد.

در بخش `<style>`، استایل‌های ساده‌ای برای ظاهر فرم تعریف شده است. با استفاده از CSS، می‌توانید ظاهر فرم را به دلخواه خود تغییر دهید.

نتیجه گیری

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

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