آموزش HTML و CSS از صفر؛ ساخت اولین صفحه وب

آموزش HTML و CSS اولین قدم برای هر کسی است که می‌خواهد صفحه وب بسازد.

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

در این راهنما از آکادمی برنامه نویسی بدیعی یاد می‌گیرید HTML و CSS چیست، تگ‌ها و ویژگی‌های مهم کدام‌اند، چطور صفحه را ریسپانسیو کنید و با چه پروژه‌هایی تمرین کنید.

HTML و CSS چیست و چه فرقی با هم دارند؟

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

یک مثال ساده: اگر صفحه وب یک خانه باشد، HTML دیوارها و اتاق‌هاست، CSS رنگ و دکوراسیون است و JavaScript برق و وسایلی است که کار می‌کنند.

ویژگی HTML CSS

وظیفه ساختار و محتوا ظاهر و چیدمان

نمونه کار تیتر، پاراگراف، لینک، تصویر، فرم رنگ، فونت، فاصله، ستون‌بندی

شکل کد تگ‌ها مثل <p> و <h1> قانون‌ها مثل color: red;

بدون دیگری صفحه ساده و بی‌استایل چیزی برای استایل‌دادن نیست

چرا آموزش HTML از صفر مهم است؟

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

مزیت‌های شروع با HTML و CSS:

نتیجه فوری: کد را ذخیره می‌کنید و همان لحظه در مرورگر می‌بینید.

ابزار رایگان: یک ویرایشگر مثل VS Code و یک مرورگر کافی است.

پایه بقیه مهارت‌ها: بدون آن‌ها JavaScript و فریم‌ورک‌ها را نمی‌فهمید.

کاربرد فوری: حتی در سطح پایه می‌توانید صفحه معرفی یا رزومه آنلاین بسازید.

اگر می‌خواهید بدانید ساخت سایت چه مسیرهای دیگری دارد (کدنویسی، CMS یا ابزارهای هوش مصنوعی)، مقاله آموزش طراحی سایت را بخوانید.

ساختار پایه یک صفحه HTML

هر صفحه HTML یک اسکلت ثابت دارد: تعریف نوع سند، بخش head برای اطلاعات صفحه و بخش body برای محتوای قابل مشاهده. این قالب را یک بار یاد بگیرید و همیشه از آن استفاده کنید.

<!DOCTYPE html>

<html lang="fa" dir="rtl">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>اولین صفحه من</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>سلام دنیا</h1>

<p>این اولین صفحه وب من است.</p>

</body>

</html>

نکته‌های مهم این کد:

lang="fa" و dir="rtl" برای صفحه فارسی و راست‌به‌چپ ضروری است.

charset="UTF-8" باعث می‌شود حروف فارسی درست نمایش داده شوند.

تگ viewport برای نمایش درست در موبایل لازم است.

فایل CSS با تگ link به صفحه وصل شده است.

تگ‌های مهم HTML که باید بلد باشید

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

تگ‌های متن

h1 تا h6 برای تیترها؛ هر صفحه بهتر است فقط یک h1 داشته باشد.

p برای پاراگراف.

strong و em برای تأکید.

ul ، ol و li برای لیست‌ها.

لینک، تصویر و رسانه

a با ویژگی href برای لینک.

img با ویژگی‌های src و alt ؛ متن alt برای سئو و دسترس‌پذیری مهم است.

video و audio برای رسانه.

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

header ، nav ، main ، section ، article ، aside و footer .

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

فرم‌ها

form ، input ، label ، textarea ، select و button .

نوع‌های مختلف input مثل email ، password و number را بشناسید.

مبانی CSS؛ انتخابگر، ویژگی و مقدار

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

body {

font-family: Tahoma, sans-serif;

background-color: #f7f7f7;

margin: 0;

.card {

background: #fff;

padding: 16px;

border-radius: 8px;

box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

#main-title {

color: #1a4d8f;

انواع انتخابگر رایج:

انتخابگر تگ: مثل body یا p .

انتخابگر کلاس: با نقطه، مثل .card ؛ پرکاربردترین نوع.

انتخابگر id: با علامت # ؛ برای یک عنصر یکتا.

مدل جعبه‌ای (Box Model)

هر عنصر در CSS یک جعبه است که از محتوا، padding ، border و margin تشکیل شده است. فهم این مدل، بیشتر مشکلات فاصله‌گذاری را حل می‌کند. توصیه رایج این است که در ابتدای فایل CSS از box-sizing: border-box استفاده کنید تا محاسبه اندازه‌ها ساده‌تر شود.

چیدمان صفحه با Flexbox و Grid

Flexbox برای چیدمان یک‌بعدی (یک ردیف یا یک ستون) و Grid برای چیدمان دوبعدی (ردیف و ستون با هم) استفاده می‌شود. این دو ابزار، روش‌های قدیمی و دردسرساز چیدمان را تقریبا کنار گذاشته‌اند.

.menu {

display: flex;

justify-content: space-between;

align-items: center;

gap: 12px;

.products {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 16px;

ابزار مناسب برای مثال

Flexbox چیدمان در یک جهت منوی بالای سایت، ردیف دکمه‌ها

Grid چیدمان جدولی و صفحه‌بندی کلی لیست محصولات، داشبورد

طراحی صفحات وب ریسپانسیو

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

اصول اصلی طراحی ریسپانسیو:

تگ viewport را در head قرار دهید.

واحدهای نسبی مثل % ، rem و fr را به پیکسل ثابت ترجیح دهید.

Media Query برای تغییر استایل در عرض‌های مختلف استفاده کنید.

موبایل‌اول (Mobile First) طراحی کنید و بعد برای صفحه‌های بزرگ‌تر گسترش دهید.

.products {

display: grid;

grid-template-columns: 1fr;

gap: 16px;

@media (min-width: 768px) {

.products {

grid-template-columns: repeat(3, 1fr);

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

فریم‌ورک‌های CSS مثل Bootstrap

Bootstrap مجموعه‌ای از کلاس‌ها و قالب‌های آماده است که ساخت صفحه ریسپانسیو را سریع‌تر می‌کند. توصیه می‌کنیم اول CSS خالص را یاد بگیرید و بعد سراغ Bootstrap بروید؛ وگرنه وقتی چیزی درست کار نکند، نمی‌دانید چرا.

مسیر پیشنهادی آموزش HTML و CSS

مسیر منطقی این است: اول HTML، بعد CSS پایه، بعد چیدمان و ریسپانسیو، و در آخر یک فریم‌ورک و JavaScript. هر مرحله را با یک تمرین کوچک تمام کنید.

گام ۱: HTML پایه

اسکلت صفحه، تگ‌های متن، لینک، تصویر و لیست.

گام ۲: HTML معنایی و فرم‌ها

تگ‌های semantic و ساخت فرم تماس یا ثبت‌نام.

گام ۳: CSS پایه

انتخابگرها، رنگ، فونت، مدل جعبه‌ای و فاصله‌ها.

گام ۴: چیدمان

Flexbox و Grid را با بازسازی بخش‌هایی از سایت‌های واقعی تمرین کنید.

گام ۵: ریسپانسیو

Media Query و طراحی موبایل‌اول.

گام ۶: Bootstrap و JavaScript

یک فریم‌ورک CSS برای سرعت و JavaScript برای تعامل.

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

اشتباه‌های رایج مبتدی‌ها در HTML و CSS

بیشتر مشکلات مبتدی‌ها از استفاده غیرمعنایی از تگ‌ها و حفظ کردن به‌جای فهمیدن است. این موارد را از همان ابتدا رعایت کنید:

استفاده از div برای همه چیز: تگ‌های معنایی را به‌کار ببرید.

فراموش کردن alt در تصاویر: هم برای سئو و هم برای دسترس‌پذیری مهم است.

استایل درون‌خطی زیاد: استایل‌ها را در فایل CSS جدا نگه دارید.

اندازه‌های ثابت پیکسلی: صفحه را در موبایل خراب می‌کند.

چند h1 در یک صفحه: ساختار تیترها را منطقی و سلسله‌مراتبی نگه دارید.

تست نکردن در موبایل: از حالت موبایل در ابزار توسعه‌دهنده مرورگر استفاده کنید.

پروژه‌های تمرینی HTML و CSS

بهترین راه یادگیری، بازسازی صفحه‌های واقعی است. این پروژه‌ها را به ترتیب انجام دهید:

صفحه رزومه شخصی: تمرین تگ‌های پایه و تیترها.

صفحه فرود (Landing Page) یک محصول: تمرین Flexbox و بخش‌بندی.

فرم تماس با ما: تمرین فرم و استایل‌دهی ورودی‌ها.

گالری تصاویر ریسپانسیو: تمرین Grid و Media Query.

بازسازی صفحه اصلی یک سایت معروف: تمرین ترکیب همه مهارت‌ها.

HTML و CSS برای ورود به بازار کار کافی است؟

نه؛ HTML و CSS پایه ضروری هستند اما به‌تنهایی معمولا برای استخدام به‌عنوان برنامه‌نویس کافی نیستند. کارفرماها معمولا JavaScript و دست‌کم آشنایی با یک فریم‌ورک یا زبان سمت سرور را هم انتظار دارند.

دو مسیر رایج بعد از HTML و CSS:

فرانت‌اند: JavaScript عمیق و یک فریم‌ورک رابط کاربری.

فول‌استک: JavaScript به‌علاوه یک زبان و فریم‌ورک بک‌اند مثل C# و ASP.NET Core، پایگاه داده و انتشار سایت روی هاست.

برای آشنایی دقیق با نقش برنامه‌نویس فول‌استک، مقاله فول استک چیست؟ را بخوانید.

جمع‌بندی

آموزش HTML و CSS ساده‌ترین و مطمئن‌ترین شروع برای ورود به دنیای وب است. با یادگیری ساختار صفحه، تگ‌های معنایی، مبانی CSS، Flexbox، Grid و طراحی ریسپانسیو می‌توانید صفحه‌های تمیز و حرفه‌ای بسازید. اما برای تبدیل این مهارت به شغل، باید JavaScript و یک مسیر بک‌اند یا فرانت‌اند را هم ادامه دهید.

اگر می‌خواهید HTML، CSS، JavaScript و Bootstrap را در کنار C# و ASP.NET Core در یک مسیر یکپارچه و پروژه‌محور یاد بگیرید ، دوره جامع فول‌استک وب طلایی آکادمی بدیعی را ببینید. برای انتخاب مسیر مناسب خودتان هم می‌توانید از صفحه اصلی سایت مشاوره رایگان بگیرید.

سوالات متداول

HTML و CSS زبان برنامه‌نویسی هستند؟

به معنای دقیق نه. HTML زبان نشانه‌گذاری و CSS زبان استایل‌دهی است. اما هر دو پایه ضروری برنامه‌نویسی وب هستند.

یادگیری HTML و CSS چقدر طول می‌کشد؟

به زمان تمرین و هدف شما بستگی دارد. مبانی را نسبتا سریع یاد می‌گیرید، اما تسلط بر چیدمان و ریسپانسیو به تمرین و پروژه بیشتری نیاز دارد.

اول HTML یاد بگیرم یا CSS؟

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

آیا یادگیری Bootstrap جای CSS را می‌گیرد؟

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

بعد از HTML و CSS چه یاد بگیرم؟

JavaScript قدم بعدی طبیعی است. بعد از آن، بسته به هدف، یک فریم‌ورک فرانت‌اند یا یک زبان بک‌اند مثل C# با ASP.NET Core را یاد بگیرید.

برای آموزش HTML از صفر چه نرم‌افزاری لازم است؟

یک ویرایشگر کد مثل VS Code و یک مرورگر مدرن کافی است. هر دو رایگان هستند.