عملی: ایجاد اولین فایل HTML (Hello World)
عملی: ایجاد اولین فایل HTML (Hello World!) 🌟
خب، دیگه وقتشه دست به کار بشیم و اولین فایل HTML خودمون رو بسازیم! این بخش عملیه و سعی می‌کنیم قدم به قدم پیش بریم تا همه‌چیز رو یاد بگیریم. هدفمون اینه که یه صفحه وب خیلی ساده بسازیم که فقط عبارت “Hello World!” رو نشون بده. آماده‌اید؟ بزن بریم! 💪
قدم اول: باز کردن ویرایشگر متن ✍️
اول از همه، نیاز به یه جای متن داریم که بتونیم کدهامون رو توش بنویسیم. لازم نیست نرم‌افزار خاصی نصب کنین. می‌تونین از همون ویرایشگرهای متن ساده‌ای که روی کامپیوترتون هست استفاده کنین:
- در ویندوز: Notepad رو باز کنین. (تو منوی استارت سرچ کنین Notepad)
- در مک: TextEdit رو باز کنین. (اگه یهو دیدین متنتون پر از فونت‌های عجیب شد، اول باید از منوی TextEdit گزینه Make Plain Text رو انتخاب کنین.)
- نکته حرفه‌ای: اگه دوست دارین یه کم حرفه‌ای‌تر شروع کنین، می‌تونین از ویرایشگرهای کد رایگان مثل VS Code یا Sublime Text استفاده کنین. این‌ها امکانات بیشتری دارن که کار رو راحت‌تر می‌کنن.
قدم دوم: نوشتن کد HTML 📝
حالا توی ویرایشگر متنی که باز کردین، کدهای زیر رو دقیقاً همونطور که می‌بینین، بنویسین:
<!DOCTYPE html>
<html lang="en"> <!-- زبان صفحه رو انگلیسی انتخاب کردیم -->
<head>
<meta charset="UTF-8"> <!-- برای نمایش درست کاراکترها -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World Page</title> <!-- عنوانی که توی تب مرورگر میاد -->
</head>
<body>
<h1>Hello World!</h1> <!-- این همون پیامی هست که قراره ببینیم -->
</body>
</html>
یادآوری می‌کنیم که:
- <!DOCTYPE html>: به مرورگر می‌گه این صفحه با HTML5 نوشته شده.
- <html>…</html>: کل محتوای صفحه رو در بر می‌گیره.
- <head>…</head>: اطلاعات مربوط به صفحه رو نگه می‌داره که مستقیماً دیده نمی‌شه.
- <title>…</title>: عنوانی که بالای تب مرورگر نمایش داده می‌شه.
- <body>…</body>: محتوای اصلی که کاربر می‌بینه، داخل این قسمت قرار می‌گیره.
- <h1>…</h1>: یه تیتر بزرگ که عبارت “Hello World!” رو نشون می‌ده.
قدم سوم: ذخیره کردن فایل 💾
این مرحله خیلی مهمه! حالا باید فایلی که نوشتیم رو ذخیره کنیم:
- به منوی File برین و Save As رو انتخاب کنین.
- یه اسم براش انتخاب کنین. یه اسم ساده و معنی‌دار مثل `index.html` یا `hello.html` خیلی خوبه. **نکته حیاتی:** حتماً آخر اسم فایل، پسوند `.html` رو بنویسین. اگه پسوند رو ننویسین، مرورگر نمی‌فهمه که این یه فایل وب هست.
- مهم‌تر از همه، قسمت “Save as type” یا “Format” رو روی “All Files” یا “Text Documents” بذارین و مطمئن بشین که Encoding روی UTF-8 باشه (اگه این گزینه رو دیدین).
- فایل رو توی یه جایی از کامپیوترتون که یادتون بمونه، مثلاً روی دسکتاپ، ذخیره کنین.
قدم چهارم: باز کردن فایل در مرورگر 🚀
تبریک! شما اولین فایل HTML خودتون رو ساختین. حالا وقتشه ببینیم نتیجه کار چیه:
- به پوشه‌ای که فایل `index.html` (یا هر اسمی که انتخاب کردین) رو ذخیره کردین، برین.
- روی فایل دابل کلیک کنین.
- فایل باید توی مرورگر پیش‌فرض کامپیوترتون باز بشه و عبارت “Hello World!” رو به صورت یه تیتر بزرگ ببینین! در ضمن، توی تب مرورگر هم باید نوشته “Hello World Page” رو ببینین.
اگه این مراحل رو با موفقیت انجام دادین، یعنی شما اولین قدم رو توی دنیای ساخت صفحات وب برداشتین! عالیه! 🥳
اگه جایی به مشکل خوردین، نگران نباشین. دوباره کد رو چک کنین، مطمئن بشین پسوند `.html` رو درست نوشتین و بعد دوباره امتحان کنین. موفق باشین! 😎