درس از مسیر HTML
ساختار استاندارد یک سند HTML
پاسخ کوتاه: هر صفحه HTML از یک اسکلت استاندارد تشکیل می‌شود: اعلان doctype، عنصر ریشه html و درون آن دو بخش head برای اطلاعات صفحه و body برای محتوای قابل مشاهده.
توضیح کامل
آموزش این درس
ساختار استاندارد به مرورگر کمک می‌کند صفحه را درست بخواند و به موتورهای جستجو اطلاعات لازم را بدهد.
بخش‌های اصلی سند
- •doctype: به مرورگر می‌گوید این سند HTML نسخه استاندارد است.
- •html: عنصر ریشه که کل صفحه را در بر می‌گیرد و زبان صفحه را مشخص می‌کند.
- •head: اطلاعات پنهان صفحه مثل عنوان، انکودینگ و متا.
- •body: محتوای قابل مشاهده مثل متن، تصویر و لینک.
برای صفحات فارسی، تعیین زبان و جهت صفحه با lang و dir اهمیت زیادی برای خوانایی و دسترسی‌پذیری دارد.
مثال کد
نمونه عملی
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>صفحه من</title>
</head>
<body>
<h1>خوش آمدید</h1>
</body>
</html>ویژگی lang="fa" و dir="rtl" صفحه را برای زبان فارسی آماده می‌کند.
خروجی: یک صفحه راست‌چین با عنوان مرورگری «صفحه من» و یک عنوان «خوش آمدید» نمایش داده می‌شود.
اشتباهات رایج
مراقب این موارد باشید
- •فراموش کردن تگ meta charset که باعث به‌هم‌ریختگی حروف فارسی می‌شود.
- •قرار دادن محتوای قابل مشاهده داخل head به‌جای body.
- •حذف meta viewport که نمایش موبایل را خراب می‌کند.
نکته‌های کاربردی
نکته‌های مهم
- •همیشه charset را UTF-8 بگذارید تا متن فارسی درست نمایش داده شود.
- •برای صفحات فارسی مقدار dir="rtl" را روی عنصر html تنظیم کنید.
تمرین
تمرین: ساخت اسکلت صفحه
- 1یک فایل با اسکلت کامل HTML بسازید.
- 2زبان را fa و جهت را rtl قرار دهید.
- 3یک عنوان مناسب در تگ title بنویسید.
پروژه‌های آموزشی
تمرین‌های مرتبط با این مسیر
یک فرم تماس تمیز و ساختارمند بسازید تا تمرین واقعی روی ساختار HTML و فرم‌ها داشته باشید.
یک کارت محصول زیبا و ریسپانسیو بسازید و تمرین کنید چطور HTML و CSS را کنار هم به کار ببرید.
پروژه آموزشی فرم تعاملی با JavaScript
یک فرم با اعتبارسنجی ساده در مرورگر بسازید و تعامل کاربر را با JavaScript تمرین کنید.
این پروژه به‌زودی فعال می‌شود.
نیاز به طراحی سایت حرفه‌ای دارید؟
پروژه شما را با همین استانداردها می‌سازیم
اگر می‌خواهید به‌جای ساخت دستی، سایت آماده و حرفه‌ای داشته باشید، تیم ما کنار شماست.