برو به محتوا
HTML و CSS مقدماتیدرس ۲ از ۲۰

شروع: وب و اولین صفحه

اولین صفحهٔ HTML

اسکلت هر صفحهٔ HTML خط‌به‌خط: DOCTYPE، html، head و body — و اولین صفحه‌ای که خودتان می‌سازید.

  • ۱۴ دقیقه
  • ۱ تمرین زنده
  • آزمونک
  • رایگان
در این درس یاد می‌گیرید
  • اسکلت کامل یک سند HTML را بنویسید
  • بدانید چه چیزی در head می‌رود و چه چیزی در body
  • زبان و جهت صفحه را درست تعیین کنید (برای فارسی: راست‌به‌چپ)

صفحهٔ HTML یک فایل متنی ساده است با پسوند ‎.html. برای نوشتنش هر ویرایشگر متنی کافی است، ولی ویرایشگر کد رایگانی مثل VS Code رنگ‌ها و تکمیل خودکار را اضافه می‌کند و کار را راحت‌تر می‌کند.

اسکلت صفحه

HTML
<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="utf-8">
    <title>اولین صفحهٔ من</title>
  </head>
  <body>
    <h1>سلام دنیا!</h1>
    <p>این اولین صفحه‌ای است که ساختم.</p>
  </body>
</html>
  • ‎<!DOCTYPE html>‎ به مرورگر می‌گوید این صفحه با HTML امروزی نوشته شده است. همیشه خط اول.
  • ‎<html>‎ ریشهٔ همهٔ صفحه است. ‎lang="fa"‎ زبان را می‌گوید (برای موتور جست‌وجو و صفحه‌خوان) و ‎dir="rtl"‎ جهت را راست‌به‌چپ می‌کند.
  • ‎<head>‎ اطلاعاتی دربارهٔ صفحه است که روی خود صفحه دیده نمی‌شود: کدگذاری، عنوان، توضیح برای موتور جست‌وجو، پیوند به CSS.
  • ‎<meta charset="utf-8">‎ کدگذاری متن است؛ بدون آن حروف فارسی به هم می‌ریزد.
  • ‎<title>‎ متنی است که روی زبانهٔ مرورگر و در نتیجه‌های جست‌وجو دیده می‌شود.
  • ‎<body>‎ همهٔ چیزی است که روی صفحه می‌بینید.

نوبت شما

تمرین

عنوان صفحه را به نام خودتان تغییر دهید و یک پاراگراف دوم بنویسید دربارهٔ چیزی که دوست دارید بسازید. نتیجه کنار ویرایشگر زنده دیده می‌شود.

باید برسید به:
  • صفحه زبان دارد (lang)
  • یک عنوان اصلی (h1) دارد
  • عنوان عوض شده است
  • دست‌کم دو پاراگراف دارد
پیش‌نمایش زنده

همین کد را در فایلی به نام index.html ذخیره کنید و با دوبار کلیک در مرورگر باز کنید: اولین صفحهٔ وب شما آماده است.

آزمونک درس

۳ پرسش — سرور مشعل تصحیح می‌کند و دلیل هر پاسخ را می‌گوید.

  1. ۱کدام بخش روی خود صفحه دیده می‌شود؟

  2. ۲متن روی زبانهٔ مرورگر از کجا می‌آید؟

  3. ۳برای یک صفحهٔ فارسی تگ html چه باید داشته باشد؟