درس اول: مقدمه‌ای بر HTML
آشنایی با دنیای طراحی وب از نقطه صفر
HTML چیست و چرا مهم است؟
HTML مخفف Hyper Text Markup Language به معنی «زبان نشانه‌گذاری ابرمتن» است.
درواقع، HTML پایه و اساس تمام صفحات وب است؛ اگر وب‌سایتی رو باز می‌کنی، توی پس‌زمینه، حتماً کدهای HTML حضور دارند.
چرا به HTML نیاز داریم؟
بدون HTML هیچ متنی، عکسی یا لینکی روی سایت‌ها قابل دیدن نیست!
تمام عناصر یک صفحه (عنوان، پاراگراف، تصویر، جدول و…) با همین زبان ساخته می‌شوند.
HTML برنامه‌نویسی نیست!
یک نکته مهم:
HTML یک زبان برنامه‌نویسی نیست!
بلکه یک زبان نشانه‌گذاری (Markup Language) است؛ یعنی فقط به مرورگر دستور می‌دهد که هر بخش از محتوا چه نوعی است (مثلاً کد بگوید “اینجا تیتر است”، “اینجا پاراگراف است” و…).
ساختار کلی یک سند (فایل) HTML
هر صفحه‌ی HTML، از چند بخش اصلی تشکیل شده:
<!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>
<!-- محتویات اصلی اینجا قرار می‌گیرند -->
</body>
</html>توضیح کوتاه هر بخش:
<!DOCTYPE html>
به مرورگر می‌گوید این فایل با استاندارد HTML5 نوشته شده است.<html>
شروع سند HTML.<head>
اطلاعاتی درباره صفحه (مثل عنوان، کدهای CSS، متا دیتا و…) اینجا قرار می‌گیرد.<title>
عنوانی که بالای مرورگر نمایش داده می‌شود.<body>
محتوای اصلی سایت (متن، تصاویر، لینک و…) در این بخش قرار می‌گیرد.
توضیح هر قسمت از ساختار HTML
۱. <!DOCTYPE html>
این خط فقط به مرورگر می‌گه:
“این صفحه با قوانین HTML5 ساخته شده، لطفاً با همین روش بازش کن!”
(چیزی نیست که توی سایت دیده بشه، فقط برای مرورگر مهمه.)
۲. <html> ... </html>
شروع و پایان کل صفحه‌ی وب اینجاست.
هرچی داری برای صفحه‌ات می‌نویسی، باید بین این دو تا باشه،
مثل یک جعبه بزرگ که همه‌چیز رو توش می‌ذاری.
۳. <head> ... </head>
این قسمت مثل پشت صحنه‌ی صفحه‌ی وبه!
اینجا چیزهایی می‌ذاری که کاربر معمولاً نمی‌بینه، مثل اسم سایت، توضیحات کوتاه درباره سایت، دستور کارهایی برای مرورگر.
مثال ساده:
- اسم صفحه (که روی تب مرورگر میاد)
- معرفی نویسنده سایت
- دستورهای ویژه مثل وصل کردن CSS (برای قشنگ کردن صفحه)
۴. <title> ... </title>
این خط داخل قسمت head هست و فقط مسئول “اسم صفحه” هست که بالای تب مرورگر، یا وقتی سایت رو توی گوگل جستجو می‌کنی نشون داده می‌شه،
مثلاً وقتی یک سایت باز می‌کنی، بالای مرورگر نوشته: “آموزش HTML – سایت من”
این، همون چیزیه که این خط تعیین می‌کنه.
۵. <body> ... </body>
اینجا دقیقا همون چیزیه که کاربر روی سایت می‌بینه:
• متن‌ها
• عکس‌ها
• لینک‌ها
• جدول‌ها
• و هر چیزی که می‌خواهی دیده بشه، توی این قسمت می‌نویسی.
چه نرم‌افزاری لازم داریم؟
برای نوشتن HTML به هیچ برنامه عجیب یا گرونی نیاز نیست!
کافیه یک ویرایشگر متن ساده (مثل Notepad در ویندوز، یا TextEdit در مک) و یک مرورگر (مثل Google Chrome، Firefox و… ) داشته باشی.
البته می‌تونی از ویرایشگر پیشرفته‌تر مثل VS Code یا Sublime هم استفاده کنی (بعداً توضیح می‌دم چگونه).
اولین تمرین !!
۱. یک فایل جدید با اسم دلخواه و پسوند .html (مثلاً myfirstpage.html) درست کن.
۲. ساختار بالا رو توش کپی کن.
۳. فایل رو ذخیره کن و با دابل‌کلیک کردن روی اون، توی مرورگر بازش کن.
می‌بینی، اولین صفحه وب رو ساختی! 🎉
جمع‌بندی
- HTML زبان پایه برای ساخت سایت‌هاست.
- تمام صفحات وب با کدهای HTML ساخته می‌شن.
- HTML زبان نشانه‌گذاری (نه برنامه‌نویسی!) است.
- به راحتی می‌تونی با یک ادیتور ساده و مرورگر، کار یاد بگیری و تمرین کنی.
