مفاهیم پایه: وب چگونه کار می‌کند

۱. اینترنت و وب یکی نیستند

این دو واژه معمولاً به جای یکدیگر به کار می‌روند، اما معنای یکسانی ندارند. اینترنت شبکه‌ای از میلیون‌ها کامپیوتر است که با کابل و آنتن به هم وصل شده‌اند. اینترنت مانند شبکه جاده‌های یک کشور است.

وب یکی از چیزهایی است که روی این جاده‌ها حرکت می‌کند: مجموعه صفحه‌هایی که با لینک به هم وصل شده‌اند. ایمیل، تماس تصویری و بازی آنلاین هم روی همان اینترنت کار می‌کنند، اما هیچ‌کدام وب نیستند.

در این کتاب تمرکز ما تنها روی وب است؛ یعنی همان صفحه‌هایی که در مرورگر باز می‌شوند.

۲. مرورگر، سرور و مسیر یک صفحه

وقتی آدرس سایتی را در مرورگر وارد می‌کنید و کلید Enter را می‌زنید، روند کار به این شکل است:

1. مرورگر درخواست شما را از طریق اینترنت ارسال می‌کند.
2. درخواست به سرور می‌رسد؛ کامپیوتری که همیشه روشن است و فایل‌های سایت روی آن نگهداری می‌شود.
3. سرور فایل‌های صفحه را برمی‌گرداند: یک فایل HTML، چند فایل CSS و تصویر.
4. مرورگر این فایل‌ها را پردازش می‌کند، صفحه را می‌سازد و نتیجه را نمایش می‌دهد.

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

۳. سه زبان اصلی وب

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

یک صفحه با HTML به‌تنهایی هم کار می‌کند، اما ظاهر ساده‌ای دارد. CSS ظاهر آن را شکل می‌دهد و JavaScript رفتار تعاملی به آن اضافه می‌کند. در چهارده فصل اول این کتاب تنها با دو زبان اول کار داریم و در فصل آخر نگاهی کوتاه به سومی می‌اندازیم.

۴. تگ، عنصر و ویژگی

HTML مخفف HyperText Markup Language است، یعنی «زبان نشانه‌گذاری اَبَرمتن». کلمه کلیدی «نشانه‌گذاری» است: ما متن را می‌نویسیم و دور آن نشانه‌هایی می‌گذاریم که به مرورگر بگوید این متن چه نقشی دارد.

به این نشانه‌ها تگ می‌گوییم. یک نمونه ساده:

<p>این یک پاراگراف است.</p>

ساده‌ترین شکل ممکن یک عنصر HTML

این نمونه کوتاه از سه بخش تشکیل شده است:

• <p> تگ باز است و می‌گوید «از اینجا یک پاراگراف شروع می‌شود».
• این یک پاراگراف است. محتوای عنصر است؛ همان چیزی که کاربر می‌بیند.
• </p> تگ بسته است و با علامت اسلش می‌گوید «پاراگراف تمام شد».

به مجموعه این سه بخش با هم یک عنصر می‌گوییم. پس تگ تنها آن علامت داخل کروشه است و عنصر یعنی کل بسته.

ویژگی چیست

بعضی تگ‌ها برای کار کردن به اطلاعات بیشتری نیاز دارند. مثلاً تگ تصویر باید بداند کدام تصویر را نشان دهد. این اطلاعات را داخل تگ باز و به شکل ویژگی می‌نویسیم:

<img src="photo.jpg" alt="عکس کلاس درس">

دو ویژگی روی یک تگ

در این مثال:

• src نام ویژگی است و "photo.jpg" مقدار آن. یعنی «تصویری که باید نشان بدهی این است».
• alt متن جایگزین است؛ اگر تصویر باز نشد، همین متن نمایش داده می‌شود.
• مقدار هر ویژگی باید داخل گیومه انگلیسی نوشته شود.

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

۵. اسکلت یک فایل HTML

از کوچک‌ترین صفحه تا بزرگ‌ترین سایت، فایل HTML همین ساختار پایه را دارد:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>اولین صفحه من</title>
</head>
<body>

    <h1>سلام دنیا</h1>

</body>
</html>

اسکلت پایه هر فایل HTML

بررسی خط‌به‌خط

• <!DOCTYPE html> به مرورگر می‌گوید این فایل با نسخه امروزی HTML نوشته شده است. همیشه اولین خط فایل است.
• <html> کل صفحه را در بر می‌گیرد. ویژگی lang="fa" یعنی زبان صفحه فارسی است و dir="rtl" یعنی جهت نوشتار از راست به چپ. این دو ویژگی برای صفحه‌های فارسی حتماً لازم هستند.
• <head> بخش اطلاعات صفحه است. هر چه اینجا بنویسید در خود صفحه دیده نمی‌شود، اما مرورگر و گوگل آن را می‌خوانند.
• <meta charset="UTF-8"> نوع کدگذاری حروف را مشخص می‌کند. بدون این خط، متن فارسی شما به شکل علامت‌های نامفهوم نمایش داده می‌شود.
• <title> عنوان صفحه است؛ همان چیزی که روی سربرگ مرورگر می‌بینید.
• <body> بدنه صفحه است. هر چیزی که کاربر باید ببیند، اینجا نوشته می‌شود.

۶. قانون CSS از چه بخش‌هایی ساخته شده

CSS مخفف Cascading Style Sheets است. در CSS چیزی به نام تگ نداریم؛ به جای آن قانون می‌نویسیم. هر قانون می‌گوید «کدام عنصرها» باید «چه ویژگی ظاهری» داشته باشند.

h1 {
    color: darkgreen;
    font-size: 32px;
}

یک قانون CSS با دو اعلان

این قانون سه بخش دارد:

• انتخابگر که اینجا h1 است. یعنی «این قانون روی تمام عنصرهای h1 اعمال شود».
• ویژگی مانند color و font-size. یعنی «چه چیزی از ظاهر را می‌خواهیم عوض کنیم».
• مقدار مانند darkgreen و 32px. یعنی «به چه چیزی تغییرش بدهیم».

هر جفت ویژگی و مقدار را یک اعلان می‌گوییم. بین ویژگی و مقدار دو نقطه می‌گذاریم و انتهای هر اعلان یک نقطه‌ویرگول انگلیسی. فراموش کردن آن نقطه‌ویرگول باعث می‌شود اعلان بعدی هم کار نکند.

۷. اولین فایل خود را بسازید

حالا همه موارد را کنار هم قرار دهیم. مراحل زیر را به‌ترتیب انجام دهید:

1. روی دسکتاپ یک پوشه بسازید به نام my-site.
2. داخل آن یک فایل متنی بسازید و نامش را index.html بگذارید.
3. مطمئن شوید پسوند فایل واقعاً html. است و نه txt.
4. کد زیر را داخلش بنویسید و ذخیره کنید.
5. روی فایل دوبار کلیک کنید تا در مرورگر باز شود.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>اولین صفحه من</title>
    <style>
        body {
            font-family: Tahoma, sans-serif;
            background-color: #f5f5f5;
            padding: 40px;
        }
        h1 {
            color: #2f4f4f;
        }
    </style>
</head>
<body>

    <h1>سلام! این اولین صفحه من است</h1>
    <p>من امروز اولین فایل HTML خودم را ساختم.</p>

</body>
</html>

اولین صفحه کامل، شامل HTML و CSS

در این نمونه چه اتفاقی افتاده است

این فایل همان اسکلت بخش قبل است، با دو اضافه. اول تگ <style> داخل head که جایی است برای نوشتن قانون‌های CSS. دوم دو قانونی که داخلش نوشتیم:

• قانون اول روی body اعمال می‌شود، یعنی روی کل صفحه. قلم صفحه را تهوما می‌کند، پس‌زمینه را خاکستری روشن و از هر چهار طرف چهل پیکسل فاصله داخلی می‌گذارد تا متن به لبه صفحه نچسبد.
• قانون دوم تنها رنگ عنوان اصلی را سبز تیره می‌کند.

عدد f5f5f5# یک رنگ است که به روش شانزده‌شانزدهی نوشته شده. فعلاً لازم نیست بدانید چگونه کار می‌کند؛ در فصل سوم کامل توضیح داده می‌شود.

۸. ابزارهای کار

برای این دوره تنها به دو چیز نیاز دارید:

• یک ویرایشگر کد. پیشنهاد ما VS Code است، چون رنگ‌بندی کد، تکمیل خودکار تگ‌ها و هشدار خطا دارد. اگر نصب نیست، Notepad هم برای شروع کافی است.
• یک مرورگر. هر کدام که دارید. تنها ترجیحاً کروم یا فایرفاکس، چون ابزارهای بررسی صفحه بهتری دارند.

ابزار بررسی صفحه

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

خلاصه فصل