🌐 درس اول: ساختار حرفهای صفحات وب با HTML
🎯 هدف این درس: درک ساختار HTML، آشنایی با عناصر و تگها، ساختار استاندارد یک سند HTML و ایجاد اولین صفحه وب حرفهای
مهمان عزیز! 👋 به اولین درس از دوره HTML سطح مقدماتی خوش آمدی.
اگر در دوره HTML سطح مبتدی با مفاهیم اولیه آشنا شدهای، در این دوره قرار است یک قدم جدیتر برداریم.
هدف ما فقط این نیست که چند تگ HTML را حفظ کنیم؛ میخواهیم بفهمیم یک صفحه وب واقعاً چگونه ساخته میشود،
مرورگر چگونه کد HTML را تفسیر میکند و چطور میتوانیم ساختار صفحاتمان را به شکل اصولی و استاندارد طراحی کنیم.
در این درس از پایه شروع میکنیم و ساختار یک سند HTML را بررسی میکنیم. در پایان درس،
باید بتوانی یک فایل HTML استاندارد ایجاد کنی، بخشهای مختلف آن را تشخیص بدهی و اولین صفحه وب خودت را بسازی.
💡 نکته مهم مهمان:
HTML یک زبان برنامهنویسی نیست؛ بلکه یک زبان نشانهگذاری است که برای تعریف ساختار و معنای محتوای صفحات وب استفاده میشود.
📚 HTML چیست؟
HTML مخفف عبارت HyperText Markup Language به معنی «زبان نشانهگذاری ابرمتن» است.
تقریباً هر صفحه وبی که در مرورگر مشاهده میکنی، از HTML برای مشخص کردن ساختار محتوای خود استفاده میکند.
برای مثال، وقتی در یک صفحه عنوان، متن، تصویر، لینک، جدول یا فرم مشاهده میکنی،
HTML مشخص میکند که هر بخش چه نوع محتوایی است و چه جایگاهی در ساختار صفحه دارد.
🧩 سه فناوری اصلی در ساخت صفحات وب
- HTML: ساختار و محتوای صفحه را مشخص میکند.
- CSS: ظاهر، رنگ، فاصله، اندازه و چیدمان صفحه را کنترل میکند.
- JavaScript: رفتار و تعاملات پویا را به صفحه اضافه میکند.
بنابراین میتوانیم به صورت ساده این سه فناوری را مانند یک ساختمان در نظر بگیریم:
HTML اسکلت ساختمان است، CSS ظاهر و طراحی آن را شکل میدهد و JavaScript رفتار و امکانات تعاملی آن را کنترل میکند.
🧱 بخش ۱: تگ چیست؟
در HTML برای مشخص کردن نوع محتوا از Tag یا تگ استفاده میکنیم.
تگها معمولاً داخل علامتهای < و > نوشته میشوند.
برای مثال، اگر بخواهیم یک پاراگراف ایجاد کنیم از تگ <p> استفاده میکنیم.
بیشتر تگهای HTML دارای یک تگ شروع و یک تگ پایان هستند.
ساختار یک تگ
HTML
HTML5
<p>این یک پاراگراف است.</p>
در مثال بالا، <p> تگ شروع و </p> تگ پایان است.
محتوای بین این دو تگ، محتوای عنصر محسوب میشود.
⚠️ نکته مهم:
در تگ پایان HTML، قبل از نام تگ علامت / قرار میگیرد. برای مثال:
<p> شروع و </p> پایان عنصر است.
🏗️ بخش ۲: عنصر HTML چیست؟
یک Element یا عنصر HTML معمولاً از تگ شروع، محتوا و تگ پایان تشکیل میشود.
در واقع وقتی از یک عنصر HTML صحبت میکنیم، منظورمان کل این ساختار است.
عنصر HTML
HTML
HTML5
<h1>سلام مهمان!</h1>
<p>به دوره HTML خوش آمدید.</p>
تفاوت Tag و Element
- Tag: خود تگ HTML مانند
<p>است. - Element: کل ساختار شامل تگ شروع، محتوا و تگ پایان است.
📄 بخش ۳: ساختار استاندارد یک سند HTML
حالا به مهمترین قسمت این درس میرسیم.
هر صفحه HTML استاندارد باید ساختار مشخصی داشته باشد.
در HTML5 معمولاً سند را با <!DOCTYPE html> شروع میکنیم.
ساختار استاندارد HTML5
HTML
HTML5
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>اولین صفحه HTML</title>
</head>
<body>
<h1>سلام دنیا!</h1>
<p>این اولین صفحه HTML من است.</p>
</body>
</html>
🔍 بخش ۴: بررسی بخشهای مختلف HTML
۱. DOCTYPE
دستور <!DOCTYPE html> به مرورگر اعلام میکند که این سند باید با استاندارد HTML5 تفسیر شود.
این دستور یک تگ معمولی HTML نیست، بلکه یک اعلان برای مرورگر است.
۲. تگ html
تگ <html> ریشه اصلی سند HTML است و تمام عناصر صفحه داخل آن قرار میگیرند.
در مثال بالا از ویژگی lang="fa" استفاده کردیم تا مشخص کنیم زبان اصلی صفحه فارسی است.
اگر صفحه انگلیسی باشد، معمولاً از lang="en" استفاده میشود.
۳. تگ head
بخش <head> شامل اطلاعات و تنظیماتی است که معمولاً مستقیماً به عنوان محتوای صفحه به کاربر نمایش داده نمیشوند.
اطلاعات مربوط به عنوان صفحه، Encoding، تنظیمات نمایش و فایلهای CSS یا JavaScript میتوانند در این بخش قرار بگیرند.
۴. تگ title
تگ <title> عنوان صفحه را مشخص میکند.
این عنوان معمولاً در عنوان تب مرورگر نمایش داده میشود و برای ساختار مناسب صفحه نیز اهمیت دارد.
۵. تگ body
تمام محتوای قابل مشاهده صفحه معمولاً داخل <body> قرار میگیرد.
عنوانها، پاراگرافها، تصاویر، لینکها، فرمها و سایر عناصر قابل نمایش در این قسمت قرار دارند.
🧠 نکته کلیدی مهمان:
اگر ساختار head و body را از همین ابتدا درست یاد بگیری، در ادامه کار با CSS، JavaScript،
SEO و توسعه پروژههای واقعی برایت بسیار سادهتر خواهد شد.
⚙️ بخش ۵: ویژگیها یا Attributes
بعضی از عناصر HTML به اطلاعات بیشتری نیاز دارند. این اطلاعات را با استفاده از Attribute یا ویژگی به تگ اضافه میکنیم.
ویژگیها معمولاً در تگ شروع قرار میگیرند و به صورت نام="مقدار" نوشته میشوند.
نمونه Attribute
HTML
HTML5
<html lang="fa">
<meta charset="UTF-8">
<p class="intro">
این یک پاراگراف است.
</p>
چند Attribute پرکاربرد
| Attribute | کاربرد | نمونه |
|---|---|---|
id |
شناسه یکتا برای یک عنصر | id="header" |
class |
اختصاص یک یا چند کلاس به عنصر | class="box" |
lang |
تعیین زبان محتوا | lang="fa" |
title |
ارائه توضیح اضافی برای عنصر | title="توضیح" |
🖥️ بخش ۶: ساخت اولین صفحه وب
حالا وقت آن است که تمام مفاهیمی را که یاد گرفتیم در یک فایل واقعی کنار هم قرار دهیم.
یک فایل با نام index.html ایجاد کن و کد زیر را داخل آن قرار بده.
index.html
HTML
HTML5
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحه شخصی من</title>
</head>
<body>
<h1>سلام مهمان! 👋</h1>
<p>
به اولین صفحه HTML من خوش آمدید.
</p>
<h2>درباره من</h2>
<p>
من در حال یادگیری طراحی و توسعه صفحات وب هستم.
</p>
</body>
</html>
🔎 اجرای فایل HTML
- یک پوشه برای پروژه ایجاد کن.
- داخل پوشه، فایلی با نام
index.htmlبساز. - کد بالا را داخل فایل قرار بده.
- فایل را ذخیره کن.
- روی فایل
index.htmlدوبار کلیک کن تا در مرورگر باز شود.
💡 تجربه عملی مهمان:
اگر از Visual Studio Code استفاده میکنی، میتوانی فایل HTML را باز کرده و با نصب افزونههایی مانند Live Server،
نتیجه تغییرات را سریعتر در مرورگر مشاهده کنی.
🧠 نکات کلیدی این درس
- ✅ HTML زبان نشانهگذاری برای ساختاردهی صفحات وب است.
- ✅ بیشتر عناصر HTML از تگ شروع و تگ پایان تشکیل میشوند.
- ✅
<!DOCTYPE html>نوع سند را برای مرورگر مشخص میکند. - ✅ عنصر
<html>ریشه اصلی سند است. - ✅ اطلاعات و تنظیمات سند معمولاً در
<head>قرار میگیرند. - ✅ محتوای قابل مشاهده صفحه در
<body>قرار میگیرد. - ✅ تگ
<title>عنوان صفحه را مشخص میکند. - ✅ Attributeها اطلاعات بیشتری به عناصر HTML اضافه میکنند.
- ✅ ساختار صحیح HTML پایهای برای ادامه کار با CSS و JavaScript است.
📝 تمرین عملی درس
🎯 تمرین: صفحه معرفی شخصی
یک فایل index.html ایجاد کن و یک صفحه معرفی ساده برای خودت بساز.
صفحه باید حداقل شامل موارد زیر باشد:
- نام و نام خانوادگی
- یک عنوان اصلی با
<h1> - یک یا چند پاراگراف درباره خودت
- عنوانی برای بخش «درباره من»
- عنوان مناسب برای تب مرورگر با استفاده از
<title> - استفاده از
lang="fa"وcharset="UTF-8"
🏆 چالش بیشتر:
صفحه را طوری طراحی کن که بخشهای معرفی، مهارتها، علاقهمندیها و اطلاعات تماس داشته باشد.
فعلاً نگران ظاهر صفحه نباش؛ در ادامه دوره یاد میگیریم چگونه با CSS ظاهر آن را حرفهای کنیم.
🧩 جمعبندی درس
مهمان عزیز، در این درس پایهایترین مفاهیمی را که برای ادامه مسیر HTML به آنها نیاز داری یاد گرفتی.
حالا میدانی HTML چیست، تگ و عنصر چه تفاوتی دارند، ساختار استاندارد یک فایل HTML چگونه است و
هر کدام از بخشهای html، head و body چه وظیفهای دارند.
مهمتر از حفظ کردن تگها، این است که بتوانی ساختار یک صفحه را درست تشخیص بدهی.
در درسهای بعدی همین ساختار را توسعه میدهیم و با عناصر مختلف HTML برای ساخت صفحات واقعیتر کار خواهیم کرد.
در درس بعدی سراغ تگهای متنی در HTML میرویم و با عنوانها، پاراگرافها،
تأکید روی متن و ساختار صحیح محتوای متنی آشنا میشویم.
