عملی: تنظیمات اولیه سند و ساختار اصلی
عملی: تنظیمات اولیه سند و ساختار اصلی 🚀
خب، دیگه وقتشه دست به کار بشیم و یه صفحه HTML واقعی بسازیم! تا اینجا کلی نکته یاد گرفتیم و الان می‌دونیم چطور یه صفحه رو آماده کنیم تا مرورگرها و موتورهای جستجو درست بشناسندش. توی این بخش، تمام چیزهایی که یاد گرفتیم رو کنار هم می‌ذاریم و یه سند HTML کامل با ساختار اولیه می‌سازیم.
بیایید با هم یه صفحه HTML پایه بسازیم که هم استانداردهای لازم رو رعایت کنه و هم برای شروع آماده باشه.
مراحل ساختار اولیه:
- شروع با DOCTYPE: اولین خط، همیشه اعلامیه نوع سند هست.
- باز کردن تگ html: کل سند رو داخل تگ <html> قرار می‌دیم و زبان رو مشخص می‌کنیم.
- بخش head: این قسمت شامل اطلاعاتی مثل کدگذاری کاراکتر، عنوان صفحه و تنظیمات viewport هست.
- بخش body: این قسمت، جاییه که تمام محتوای قابل مشاهده صفحه قرار می‌گیره.
- پایان دادن به تگ‌ها: مطمئن می‌شیم که تمام تگ‌های باز شده، بسته شدن.
کد کامل سند پایه HTML:
حالا این مراحل رو توی یه فایل HTML واقعی پیاده می‌کنیم. می‌تونین این کد رو توی یه ویرایشگر متن مثل Notepad (در ویندوز) یا TextEdit (در مک) کپی کرده و با پسوند `.html` (مثلاً `index.html`) ذخیره کنین.
<!DOCTYPE html> <!-- ۱. اعلام نوع سند برای HTML5 -->
<html lang="fa"> <!-- ۲. شروع سند HTML و تعیین زبان فارسی -->
<head> <!-- ۳. بخش سر سند که اطلاعات پنهان یا مربوط به مرورگر رو داره -->
<meta charset="UTF-8"> <!-- تنظیم کدگذاری کاراکتر برای پشتیبانی از زبان فارسی -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- تنظیم نمایش برای دستگاه‌های مختلف -->
<title>نام صفحه من</title> <!-- عنوانی که در تب مرورگر دیده می‌شود -->
<!-- اینجا می‌توانیم لینک به فایل‌های CSS یا اطلاعات دیگر را هم اضافه کنیم -->
</head>
<body> <!-- ۴. بخش بدن سند که محتوای قابل نمایش در آن قرار می‌گیرد -->
<h1>به اولین صفحه HTML من خوش آمدید!</h1> <!-- یک عنوان اصلی -->
<p>این یک پاراگراف ساده است که در بدنه صفحه قرار گرفته.</p> <lt;p>اینجا می‌توانیم محتوای مختلفی مثل متن، تصویر، لینک و ... اضافه کنیم.</p>
<!-- اینجا فضای خالی برای اضافه کردن محتواهای بیشتر در آینده -->
</body> <!-- ۵. پایان بخش بدن -->
</html> <!-- ۵. پایان کل سند HTML -->
توضیحات تکمیلی کد:
- <!DOCTYPE html>: به مرورگر می‌گه که این صفحه با HTML5 نوشته شده.
- <html lang=”fa”>…</html>: کل صفحه رو در بر می‌گیره و زبانش رو فارسی تعیین می‌کنه.
- <head>…</head>: اطلاعات اولیه صفحه مثل کدگذاری کاراکتر (UTF-8)، تنظیمات دستگاه (viewport) و عنوان صفحه (title) رو شامل می‌شه.
- <body>…</body>: هر چیزی که کاربر در مرورگر می‌بینه، مثل تیترها (<h1>) و پاراگراف‌ها (<p>)، در این بخش قرار می‌گیره.
این ساختار پایه، مثل یه شالوده محکمه که می‌شه روش هر نوع ساختمون وبی رو بنا کرد. حالا وقتشه که خلاقیت به خرج بدین و بخش <body> رو با محتوای دلخواهتون پر کنین!
با ذخیره کردن این کد به صورت یه فایل `.html` و باز کردنش توی مرورگر، اولین صفحه وب سفارشی خودتون رو می‌بینین! چقدر حس خوبیه، نه؟ 😉