مجتبی خدابخشیآموزش HTML از صفر: ساخت اولین صفحه وب استاندارد
ساختار HTML، تگهای معنایی، لینک، تصویر و فرم را با یک صفحه معرفی شخصی یاد بگیرید.
ساختار پایه سند
سند با نوع HTML شروع میشود و بخشهای head و body دارد. عنوان صفحه و توضیحات در head قرار میگیرند و محتوای قابل مشاهده داخل body نوشته میشود.
تگ معنایی انتخاب کن
برای سربرگ از header، فهرست از nav، محتوای اصلی از main و بخش مستقل از section استفاده کن. div را زمانی انتخاب کن که عنصر معنایی مناسبتری وجود ندارد.
- فقط یک عنوان اصلی روشن
- متن جایگزین برای تصویر
- برچسب برای فیلد فرم
- متن لینک توصیفی
پروژه این درس
یک صفحه معرفی شخصی بساز که نام، توضیح کوتاه، مهارتها، یک تصویر با متن جایگزین و فرم تماس داشته باشد. ساختار را بدون CSS کامل کن و ترتیب تیترها را بررسی کن.
پرسشهای متداول
آیا HTML زبان برنامهنویسی است؟
HTML زبان نشانهگذاری است و ساختار محتوا را تعریف میکند، نه منطق اجرایی عمومی.
چرا تگ معنایی برای سئو مفید است؟
ساختار صفحه را برای موتور جستوجو و فناوریهای کمکی روشنتر میکند.
جمعبندی
اول ساختار و معنا را با HTML درست بساز. ظاهر را بعداً با CSS اضافه کن؛ صفحهای که بدون استایل قابل فهم است پایه سالمتری دارد.
از مفهوم تا استفاده واقعی
در وب، HTML ساختار، CSS ظاهر و JavaScript رفتار صفحه را میسازند. برای یادگیری سریعتر هر سه را روی یک قابلیت کوچک و قابل مشاهده تمرین کن.
یک مثال از دنیای واقعی
برای یک کافه، فرم ثبت سفارش بساز که نام نوشیدنی را بگیرد و آن را همان لحظه به فهرست سفارشها اضافه کند. این مثال ساده ورودی، رویداد و تغییر رابط را یکجا نشان میدهد.
const orders = ['قهوه'];
function addOrder(name) {
if (!name.trim()) return;
orders.push(name);
console.log(`سفارش جدید: ${name}`);
}
addOrder('چای سبز');حالا نوبت توست
تعداد کل سفارشها را بعد از اضافهشدن هر سفارش در خروجی نمایش بده.
- نمونه را یکبار اجرا یا بازنویسی کن.
- تغییر خواستهشده را بدون کپی کامل انجام بده.
- خروجی را با انتظار خودت مقایسه کن.
- در یک جمله توضیح بده چرا راهحل کار کرد.
اول مسئله و خروجی مورد انتظار را روشن کن؛ بعد ابزار را انتخاب کن.
نمونه کوچکِ کامل از پروژه بزرگِ نیمهتمام بیشتر به یادگیری کمک میکند.
کد را فقط نخوان؛ تغییرش بده، خطا بساز و دلیل نتیجه را توضیح بده.
این مسیر را ادامه بده
تمرین این صفحه را انجام بده، نتیجه را برای خودت توضیح بده و بعد سراغ درس مرتبط بعدی برو.
انتخاب مسیر بعدی ←