جلسه دوم : آموزش ساختار پایه صفحات HTML برای تازه‌کارها

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

در پایان هم یک نمونه کد کامل و قابل‌کپی دارید. می‌تونید این کد رو داخل فایل index.html بذارید و نتیجه رو توی مرورگر ببینید. پس لازم نیست چیزی رو حفظ کنید؛ کافیه قدم‌به‌قدم کدها رو بنویسید و نتیجه هر تغییر رو ببینید.

آشنایی با ساختار صفحات وب

ساختن یک سند HTML

اول از همه باید یک سند HTML بسازید. HTML زبانیه که ساختار بخش‌های مختلف صفحه، مثل عنوان، متن و تصویر رو برای مرورگر مشخص می‌کنه. برای نوشتن کد می‌تونید سراغ ویرایشگرهای مختلف برید، ولی ما توی این دوره از Notepad++ استفاده می‌کنیم.

گام اول: روی دسکتاپ یک پوشه با نام mihanwp بسازید.

گام دوم: برنامه Notepad++ رو باز کنید.

گام سوم: از منوی File روی گزینه New کلیک کنید تا یک فایل تازه باز بشه.

گام چهارم: منوی Encoding رو باز کنید و مطمئن بشید کدگذاری فایل روی UTF-8 تنظیم شده. UTF-8 کمک می‌کنه حروف فارسی درست نمایش داده بشن.

گام پنجم: از منوی File گزینه Save As رو بزنید. بعد فایل رو با نام index.html داخل پوشه mihanwp ذخیره کنید. پسوند .html به سیستم و مرورگر می‌گه که با یک صفحه وب طرف هستن.

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

تگ در HTML یعنی چی

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

هر تگ شروع با علامت < آغاز می‌شه و با علامت > تموم می‌شه. برای مثال، <p> یک تگ شروعه. تگ پایان یک علامت اسلش هم داره و به شکل </p> نوشته می‌شه.

تگ شروع و تگ پایان

بیشتر عنصرهای HTML یک تگ شروع و یک تگ پایان دارن. محتوایی که می‌خواید نمایش بدید، بین این دو تگ نوشته می‌شه. برای مثال، کد <p>سلام دنیا</p> یک پاراگراف با متن «سلام دنیا» می‌سازه.

عنصرهای تهی

بعضی عنصرها محتوای متنی و تگ پایان ندارن. به این موارد «عنصر تهی» می‌گن. برای مثال، عنصر img تصویر رو نمایش می‌ده و نشانی تصویر و توضیح اون داخل ویژگی‌هایی مثل src و alt نوشته می‌شن.

یک نمونه ساده به شکل <img src="image.jpg" alt="توضیح تصویر"> نوشته می‌شه. ویژگی src نشانی فایل تصویر رو مشخص می‌کنه. ویژگی alt هم یک توضیح کوتاه درباره تصویر به مرورگر و ابزارهای صفحه‌خوان می‌ده.

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

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

<!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>  <p>این اولین صفحه HTML من هست.</p></body></html>

خط <!doctype html> به مرورگر می‌گه که این سند از HTML امروزی استفاده می‌کنه. ویژگی lang="fa" زبان صفحه رو فارسی معرفی می‌کنه و dir="rtl" جهت نوشته رو روی راست‌به‌چپ می‌ذاره.

بخش head اطلاعاتی مثل کدگذاری، تنظیم نمایش در موبایل و عنوان صفحه رو نگه می‌داره. کد <meta charset="utf-8"> کمک می‌کنه متن فارسی درست دیده بشه. تنظیم viewport هم باعث می‌شه صفحه روی موبایل با عرض مناسب نمایش داده بشه.

هر چیزی که کاربر داخل مرورگر می‌بینه، بین تگ‌های body قرار می‌گیره. توی این نمونه یک عنوان اصلی با تگ h1 و یک پاراگراف با تگ p داریم.

تمرین این جلسه

• یک فایل با نام index.html بسازید.
• کد نمونه این جلسه رو خودتون داخل فایل تایپ کنید.
• فایل رو ذخیره کنید و با دوبار کلیک توی مرورگر بازش کنید.
• متن داخل تگ‌های h1 و p رو تغییر بدید و دوباره صفحه رو تازه‌سازی کنید.
• اگه توی یکی از مراحل به مشکلی خوردید، سؤال‌تون رو توی بخش دیدگاه‌ها بنویسید.

جمع‌بندی

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

برای یادگرفتن این بخش لازم نیست کدها رو حفظ کنید. بهتره فایل index.html رو چند بار تغییر بدید، نتیجه رو توی مرورگر ببینید و با آزمون‌وخطا جلو برید. اگه ساختار پایه صفحه رو خوب یاد بگیرید، ادامه مسیر طراحی سایت براتون خیلی قابل‌فهم‌تر می‌شه.

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

تا جلسه بعد، موفق باشید.

تیم تولید محتوا

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