مقدمه ای از HTML

دسته بندی : آموزش HTML سطح مقاله : مقدماتی زمان مطالعه : 3 دقیقه آخرین بروز رسانی: 02 آبان 1399

مقدمه ای از HTML مقاله‌ای است که در آن به طور رسمی با زبانی که اولین قدم برای ورود به دنیای طراحی سایت است (در آشنایی با اصول HTML توضیح دادیم که چرا این زبان اولین ابزار طراحی وب است) آشنا می‌شوید.

HTML به زبان ساده

HTML یا «زبان نشانه گذاری ابر متنی» (HyperText Markup Language)، یک زبان نشانه گذاری است که برای ساختار دهی و نمایش اطلاعات در وب مورد استفاده قرار می‌گیرد؛ پس یک بار برای همیشه در جواب سئوال آیا HTML یک زبان برنامه نویسی است؟ می‌گوییم:

HTML یک زبان نشانه گذاری است نه زبان برنامه نویسی!

این زبان از تگ‌ها (tag) استفاده می‌کند و تگ های HTML به مرورگر می‌گویند که چگونه محتوا را نمایش دهد؛ این زبان از دهه 1990 میلادی شکل گرفت و اکنون بخش اساسی از وب است.

ساختار اصلی یک صفحه HTML از تگ‌های اصلی مانند <html> ،<head> ،<title> ،<body> تشکیل شده است:

تگ <html> حاوی اطلاعات کل صفحه است.
تگ <head> شامل اطلاعاتی مانند عنوان و لینک به فایل‌های جانبی است.
تگ <title> عنوان صفحه که در نوار بالای مرورگر نشان داده می‌شود را تعیین می‌کند.
تگ <body> حاوی محتوای اصلی صفحه می‌باشد و هر چیزی که کاربر می‌بیند در این قسمت نوشته می‌شود.

توضیحات بالا در قالب کد به این صورت است:

<html>
<head>
 <title>عنوان صفحه شما</title>
</head>
<body>
</body>
</html>

تاریخچه HTML : نسخه‌های مختلف

تاریخچه HTML شامل نسخه‌های مختلفی از این زبان نشانه‌گذاری است که تاکنون ارتقاء یافته‌اند. در زیر به تاریخچه HTML و نسخه‌های اصلی آن اشاره می‌شود:

1. HTML 1.0 (سال انتشار 1990):

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

2. HTML 2.0 (سال انتشار 1995):

دومین نسخه به عنوان اولین استاندارد برای HTML منتشر شد.
این نسخه شامل امکانات جدیدی مانند فرم‌ها و اجزاء تصویری برای وب بود.

3. HTML 3.2 (سال انتشار 1997):

سومین نسخه با افزودن تگ‌ها و ویژگی‌های جدید، توسعه وب را آسان کرد.
این نسخه اولین نسخه‌ای بود که CSS را به عنوان یک استاندارد مجزا معرفی کرد.

4. HTML 4.01 (سال انتشار 1999):

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

5. XHTML (Extensible HTML) (سال انتشار 2000):

XHTML 1.0 به عنوان یک معیار و استاندارد XML برای HTML در سال 2000 معرفی شد.
این نسخه باعث افزایش کیفیت ساختاری و دقت در نگارش HTML شد.

6. HTML5 (سال انتشار 2014):

HTML5 به عنوان آخرین نسخه استاندارد HTML معرفی شد.
این نسخه دارای امکانات جدیدی مانند امکان توسعه ویدئو و صدا، افزودن تگ‌های معنایی (semantic tags) و APIهای جدید برای وب بود.

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

HTML5 چیست؟

HTML5 برای اولین بار در سال 2008 توسط کنسرسیوم وب جهانی (W3C) معرفی شد اما مشخصات آن تا سال 2014 کامل نشد و انتشار رسمی آن در این سال انجام شد؛ از سال 2014 این زبان نشانه گذاری، پایه و اساس هر وب سایت جدید است.

تفاوت‌های HTML5 با نسخه‌های پیشین عبارتند از:

امکان توسعه ویدئو و صدا:

HTML5 امکان نمایش ویدئو و پخش صدا را بدون استفاده از پلاگین‌های خارجی فراهم کرد.
تگ‌های <video> و <audio> به توسعه دهندگان امکان کنترل مستقیم بر روی محتوای ویدئو و صوت را می‌دهند.

تگ‌های معنایی (Semantic Tags):

HTML5 تگ‌های جدیدی نظیر <header> ،<footer> ،<nav> ،<article> و <section> را ارائه داد که به توسعه دهندگان این امکان را می‌دهند تا ساختار صفحات وب را بهتر و منظم‌تر تعریف کنند.

APIهای جدید:

HTML5 از APIهای جدیدی مانند Geolocation API (برای دریافت موقعیت جغرافیایی کاربر) و Web Storage API (برای ذخیره اطلاعات بر روی دستگاه کاربر) پشتیبانی می‌کند.
WebSocket API نیز امکان ایجاد ارتباط دوطرفه بین مرورگر و سرور را فراهم می‌کند.

افزودن Canvas:

تگ <canvas> در HTML5 به توسعه‌ دهندگان این امکان را می‌دهد تا تصاویر و گرافیک را به صورت دینامیک در مرورگر ایجاد کنند.

پشتیبانی از Drag and Drop:

HTML5 فرآیند انتقال و رها کردن (Drag and Drop) را فراهم کرد.

پیشرفت در فرم‌ها:

ویژگی‌های بهبود یافته فرم‌ها در HTML5 این امکان را فراهم می‌کنند که توسعه‌ دهندگان فرم‌های پیچیده‌تر و کارآمدتری ایجاد کنند.

HTML5 به کاربران و توسعه‌ دهندگان این امکان را می‌دهد تا تجربه وب را بهبود بخشند و از امکانات پیشرفته‌تری بهره‌مند شوند، این نسخه کمک زیادی به بهینه سازی موتور جستجو (SEO) کرد.

قالب اصلی HTML

ساده‌ترین Boilerplates یا قالب HTML از چند خط کد ساده تشکیل شده است:

<!DOCTYPE html>
<html>
<head>
 <title>عنوان صفحه شما</title>
</head>
<body>
 <h1>تیتر اصلی محتوا</h1>
 <p>متن های شما</p>
</body>
</html>

معرفی مختصر تگ‌های قطعه کد بالا:

<!DOCTYPE>: تعیین‌ کننده نوع سند و نسخه HTML است؛ این تگ به مرورگر اطلاع می‌دهد که نسخه‌ای از HTML استاندارد که صفحه وب از آن استفاده می‌کند، چگونه باید تفسیر و نمایش شود، پس برای اینکه به مرورگر بگویم از HTML5 استفاده می‌کنیم باید این تگ ویژه را در اول فایل خود قرار دهیم. این تگ به حروف کوچک و بزرگ حساس نیست و می‌توان آن را به هر صورتی نوشت:

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

<html>: برای شروع یک سند HTML استفاده می‌شود؛ این تگ حاوی تمام محتویات یک صفحه وب است و به مرورگر اعلام می‌کند که متن درون آن یک سند HTML است.

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

<title>: برای تعیین عنوان صفحه وب استفاده می‌شود.

<body>: برای تعیین بخش بدنه یا محتوای اصلی یک صفحه وب استفاده می‌شود؛ این تگ شامل تمام محتوا و عناصری است که در صفحه وب قرار دارند و به‌ طور مستقیم بر روی صفحه نمایش داده می‌شود.

<h1>: از تگ‌های هدینگ است و برای ایجاد عنوان اصلی در یک صفحه وب به‌ کار می‌رود؛ هرکدام از تگ‌های هدینگ (<h1> تا <h6>) مخصوص نمایش عناوین با سطوح اهمیت متفاوت هستند:

<h1>تگ با سطح اهمیت 1 که پر اهمیت‌ترین تگ عنوان است</h1>
<h2>تگ با سطح اهمیت 2</h2>
<h3>تگ با سطح اهمیت 3</h3>
<h4>تگ با سطح اهمیت 4</h4>
<h5>تگ با سطح اهمیت 5</h5>
<h6>تگ با سطح اهمیت 6 که کم اهمیت‌ترین تگ عنوان است</h6>

<p>: برای تعریف یک پاراگراف متن استفاده می‌شود.

نحوه استفاده از خاصیت ها برای تگ های HTML

هنگام نوشتن کد HTML، از خاصیت‌ها به منظور تنظیم ویژگی‌های مختلف و ارائه اطلاعات اضافی درباره تگ‌ها استفاده می‌شود. سینتکس تعریف attribute به این صورت است:

<tag attribute = "value"> محتوا </ tag>

در قطعه کد بالا:

tag: نام تگی است که می‌خواهیم خاصیتی را برای آن در نظر بگیریم.
attribute: نام ویژگی یا خاصیتی است که قرار است برای تگ تعریف شود.
value: مقدار مشخصی است که برای یک خاصیت در نظر گرفته می‌شود.

در ادامه مقاله مقدمه ای از HTML تعدادی از ویژگی ها یا خاصیت های مهم HTML را معرفی می‌کنیم.

خاصیت class

خاصیت class در زبان HTML یکی از خاصیت‌های کلیدی است که به شما این امکان را می‌دهد تا یک یا چند عنصر HTML را به یک کلاس (Class) خاص متصل کنید.

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

مثال استفاده از خاصیت class در یک تگ <div>:

<div class="container">
  <!-- محتوای دیو -->
</div>

در این مثال، container یک نام کلاس است که به div اختصاص داده شده است، می‌توانید با استفاده از CSS به صورت زیر استایل خاصی را برای تمام دیوهایی که این کلاس را دارند تعیین کنید:

.container {
  width: 80%;
  background-color: #000;
}

در اینجا، تمام دیوهایی که کلاس container را دارند از 80٪ عرض صفحه استفاده می‌کنند و رنگ پس زمینه آن‌ها مشکی می‌شود.

می‌توان خاصیت class را برای تمام تگ‌ها استفاده کرد و برای هر تگ چندین کلاس تعریف کرد.

خاصیت id

خاصیت id در زبان HTML یک خاصیت است که به شما این امکان را می‌دهد تا به یک عنصر HTML خاص شناسه‌ای (ID) اختصاص دهید.

این شناسه به منظور یکتا بودن در صفحه وب استفاده می‌شود، به این ترتیب که هر شناسه باید در یک صفحه وب تنها یکبار استفاده شود.

مثال استفاده از خاصیت id در یک تگ <div>:

<div id="header">
  <!-- محتوای هدر -->
</div>

در این مثال، header یک شناسه یا id است که به تگ div اختصاص داده شده است؛ این شناسه به شما امکان می‌دهد با استفاده از CSS یا JavaScript، به صورت دقیق روی این div استایل یا عملیاتی را اعمال کنید. به عنوان مثال، می‌توان با CSS به این ترتیب استایلی را به یک div با شناسه header اعمال کرد:

#header {
  background-color: #333;
  color: #fff;
}

در اینجا، دیوی که شناسه header را دارد، دارای پس زمینه با رنگ تیره و متن با رنگ روشن است.

استفاده از خاصیت id مخصوصاً در مواردی که نیاز به اعمال تغییرات یکتا روی یک عنصر دارید، مفید است؛ در برخی مواقع در JavaScript نیز از شناسه‌ها برای ارتباط با عناصر استفاده می‌شود.

می‌توان خاصیت id را برای تمام تگ‌ها استفاده کرد اما نمی‌توان از یک id خاص برای تمام تگ‌ها استفاده کرد.

خاصیت style

خاصیت style در زبان HTML یک خاصیت است که به شما این امکان را می‌دهد تا استایل را (سبک ظاهری) مستقیماً بر روی یک تگ HTML اعمال کنید؛ با استفاده از این خاصیت، می‌توانید ویژگی‌هایی مانند رنگ متن، زمینه، حاشیه، و… را برای یک عنصر HTML تعیین کنید.

مثال استفاده از خاصیت style در یک تگ <p>:

<p style="color: blue; font-size: 16px;">این یک پاراگراف با استایل خاص است.</p>

در این مثال، با استفاده از خاصیت style، رنگ متن آبی تعیین شده است و اندازه فونت به 16 پیکسل افزایش یافته است.

همچنین، می‌توانید چندین ویژگی را با هم ترکیب کنید، به عنوان مثال:

<p style="color: red; font-size: 18px; font-weight: bold;">متن با استایل چندگانه</p>

در این مثال، رنگ متن به قرمز تغییر کرده، اندازه فونت به 18 پیکسل افزایش یافته و متن به وسیله ویژگی font-weight به شکل bold (ضخیم) درآمده است.

استفاده از style در موارد کوچک و محدود به موارد خاص مناسب است و برای روند کلی استایل دهی بهتر است از CSS جداگانه استفاده کنید تا استایل‌ها به صورت مرتب و قابل تنظیم نوشته شوند.

می‌توان خاصیت style را برای تمام تگ‌ها استفاده کرد.

خاصیت height و width

خاصیت‌های height و width در زبان HTML و CSS به شما این امکان را می‌دهند تا اندازه (طول و عرض) یک عنصر HTML یا یک تصویر را مشخص کنید.

`width` (عرض):

در HTML، این خاصیت معمولاً در تگ‌هایی مانند <img> (تصویر) یا <div> (بلاک دیو) استفاده می‌شود؛ مقدار width به صورت پیکسل، درصد یا به شکل دیگری مشخص می‌شود.

مثال در تگ <img>:

<img src="example.jpg" alt="Example Image" width="300">

در این مثال، تصویر example.jpg با عرض 300 پیکسل نمایش داده می‌شود.

`height` (ارتفاع):

height برای مشخص کردن ارتفاع یک عنصر استفاده می‌شود.

<div style="height: 100px; width: 200px; background-color: #f0f0f0;">مثال</div>

در این مثال، یک div با ارتفاع 100 پیکسل و عرض 200 پیکسل ایجاد شده است.

با تعیین این خواص، می‌توانید ظاهر و اندازه عناصر را در صفحه وب کنترل کنید.

مقاله مقدمه ای از HTML را در اینجا به اتمام می‌رسانیم؛ در دوره آموزش HTML بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

این مقاله چقدر براتون مفید بود؟

میانگین رتبه : 5/5 - تعداد رای : 6