مقدمه آموزش HTML

مقدمه: چرا HTML؟

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

HTML یک زبان برای توصیف صفحات وب است. اما HTML دقیقاً چیست؟

HTML یک زبان برنامه‌نویسی نیست! این یک تصور اشتباه رایج است.
HTML یک زبان نشانه‌گذاری (Markup Language) است. وظیفه اصلی آن، تعریف ساختار و محتوای صفحات وب است.
HTML مخفف HyperText Markup Language به معنی "زبان نشانه‌گذاری ابرمتن" است. این زبان به مرورگر وب (مانند کروم، فایرفاکس و ...) می‌گوید که چگونه محتوای صفحه را نمایش دهد.

آشنایی با تگ‌ها (Tags) در HTML

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

: شکل کلی تگ‌ها

تگ‌های HTML معمولاً درون علامت‌های < و > قرار می‌گیرند. به این کلیدواژه‌ها که داخل این علامت‌ها هستند، تگ گفته می‌شود.
بیشتر تگ‌ها دوتایی هستند؛ یعنی شامل یک تگ باز (Opening Tag) و یک تگ بسته (Closing Tag)می‌شوند.
تگ پاراگراف به این شکل نوشته می‌شود:

عامرتجارت خلیج فارس

نکته: در مثال بالا میتونید با کلیک روی دکمه اجرا خروجی کد روی مرورگر رو ببینید. اینن ادیتور آنلاین امکان کپی و دانلود کد به صورت text رو براتون فراهم میکنه.

در این مثال:
< p> تگ آغازین پاراگراف است
</p> تگ پایانی آن است و متنی که بین این دو قرار می‌گیرد، در نهایت نمایش داده می‌شود

ساختار پایه یک سند HTML (صفحه وب)

سندهای HTML صفحات وب را توصیف می‌کنند و شامل تگ‌های HTML و متن ساده هستند. هدف یک مرورگر وب (مانند اینترنت اکسپلورر یا فایرفاکس) این است که سندهای HTML را خوانده و آن‌ها را به صورت صفحات وب نمایش دهد. مرورگر، تگ‌های HTML را نمایش نمی‌دهد، بلکه از آن‌ها برای تفسیر محتوای صفحه استفاده می‌کند.

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

عامرتجارت خلیج فارس

توضیح اجزای مثال:

<html>: و این تگ‌ها، کل محتوای صفحه HTML را در بر می‌گیرند و به اصطلاح ریشه (root) صفحه هستند. متن بین این تگ‌ها، کل صفحه وب را توضیح می‌دهد.
<body>: این بخش شامل تمام محتوایی است که به صورت قابل مشاهده در صفحه وب نمایش داده می‌شود (متن‌ها، تصاویر، لینک‌ها و...). متن بین این تگ‌ها، محتوای قابل نمایش صفحه است .
<h1>: این تگ برای نمایش یک عنوان اصلی در صفحه استفاده می‌شود.
<p>: همانطور که گفته شد، برای نمایش پاراگراف‌های متنی استفاده می‌شوند.

تمرین کنید :

شما میتونید با اعمال تغییر توی کد ها و فشردن دکمه اجرا خروجی کدتون رو ببینید. محتوای داخل تگ h1 و p رو تغییر بدید و خرجی اون رو ببینید.

نتیجه‌گیری :

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

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