فصل ۱: آغاز سفر، HTML و دنیای وب

فصل ۱: آغاز سفر، HTML و دنیای وب 🌐

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

HTML مخفف HyperText Markup Language هست، یعنی زبانی که باهاش به صفحات وب معنی و ساختار می‌دیم.

اولین کد HTML شما ✍️

برای نوشتن اولین کد HTML، نیاز به یه ویرایشگر متن ساده مثل Notepad (توی ویندوز) یا TextEdit (توی مک) دارین. بعد از اینکه کدتون رو نوشتین، باید اونو با پسوند .html ذخیره کنین. مثلاً `index.html`.


<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>اولین صفحه من</title>
</head>
<body>
    <h1>سلام دنیا! 👋</h1>
    <p>این اولین پاراگراف من توی صفحه وب هست.</p>
</body>
</html>

بذارین یه کم این کد رو با هم بشکافیم: 🧐

<!DOCTYPE html>: این خط به مرورگر می‌گه که ما از آخرین نسخه HTML یعنی HTML5 استفاده می‌کنیم.
<html>: این تگ، شروع و پایان کل صفحه HTML ما رو مشخص می‌کنه.
<head>: توی این قسمت اطلاعات مربوط به صفحه قرار می‌گیره که معمولاً توی خود صفحه دیده نمی‌شه، مثل عنوان صفحه که توی تب مرورگر نشون داده می‌شه.
<meta charset=”UTF-8″>: این کد برای اینه که کاراکترهای فارسی و بقیه زبان‌ها درست نمایش داده بشن. خیلی مهمه! 👌
<title>: همونطور که گفتم، عنوان صفحه اینجا نوشته می‌شه.
<body>: هر چیزی که توی مرورگر می‌بینین (متن، عکس، لینک و …) باید داخل تگ <body> باشه.
<h1>: برای تیترهای اصلی صفحه استفاده می‌شه. از <h1> تا <h6> داریم که <h1> بزرگترین و <h6> کوچیکترینه.
<p>: برای پاراگراف‌های متنی استفاده می‌شه.

هرچیزی که بین ‘<' و '>‘ نوشته می‌شه، یک تگ (Tag) هست. بیشتر تگ‌ها یه تگ بسته شدن هم دارن که با ‘/’ قبل از اسم تگ مشخص می‌شه، مثلاً </p>.

تگ‌ها، قهرمانان HTML 🦸‍♀️

تگ‌ها مثل آجرهای ساختمون وب هستن! هر کدوم یه کاری انجام می‌دن. مثلاً:

<a>: برای ایجاد لینک به صفحات دیگه.
<img>: برای نمایش عکس.
<ul> و <li>: برای ساختن لیست‌های نامرتب (مثل همین لیستی که الان دارین می‌خونین!).
<ol> و <li>: برای ساختن لیست‌های مرتب (با شماره).

با این تگ‌های ساده می‌تونیم کلی محتوای جذاب توی صفحه وب ایجاد کنیم. کم‌کم با تگ‌های بیشتری آشنا می‌شیم و خلاقیتمون رو به کار می‌گیریم! 🎨

چرا HTML مهمه؟ 🤔

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

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