وب چطور کار میکند و داور چطور صفحهات را میسنجد
این نسخهی پیشنمایش عمومیه. برای نمره گرفتن، ذخیرهی پیشرفت و باز کردن درسهای بعدی ثبتنام کن.
ثبتنام رایگانورودوقتی یک آدرس را در مرورگر میزنی، چه اتفاقی میافتد؟
تصور کن نوارِ آدرسِ مرورگر را باز میکنی و example.com را تایپ میکنی و Enter میزنی. در همان لحظه یک گفتوگوی کوچک بینِ دو طرف شروع میشود:
- مرورگر (همان Chrome یا Firefox یا Safariِ روی دستگاهت) نقشِ «مشتری» (client) را دارد — کسی که چیزی میخواهد.
- جایی روی اینترنت، کامپیوترِ دیگری روشن است که فایلهای آن سایت را نگه میدارد؛ به آن «سرور» (server) میگوییم — کسی که چیزی را سِرو میکند و تحویل میدهد.
پس وب در سادهترین شکلش یک رابطهی دونفره است: مشتری ↔ سرور. مرورگرِ تو میپرسد، سرور جواب میدهد. همین مدلِ ساده، تهِ همهی اتفاقهای وب است.
درخواست و پاسخ: مرورگر میپرسد، سرور جواب میدهد
وقتی Enter زدی، مرورگر یک «درخواست» (request) میسازد و آن را با پروتکلِ HTTP (یا نسخهی امنش HTTPS) به سرور میفرستد. معنای این درخواست خیلی ساده است: «سلام، لطفاً صفحهی خانهات را به من بده.»
سرور هم یک «پاسخ» (response) برمیگرداند که بدنهاش معمولاً یک فایلِ متنیِ HTML است.
نکتهی مهمی که خیلیها اشتباه میفهمند: آنچه سرور میفرستد یک عکسِ آمادهی صفحه نیست. سرور فقط متن میفرستد — یک رشتهی کاراکترهای HTML. صفحهی زیبایی که میبینی را خودِ مرورگرِ تو از روی همان متن میسازد.
هر چیزی روی وب — یک صفحه، یک عکس، یک فایلِ CSS — یک آدرسِ یکتا دارد که به آن URL میگوییم؛ مثلِ https://example.com/about.html. این URL دقیقاً میگوید «از کدام سرور، کدام منبع را بده». و HTTPS همان HTTP است، فقط با یک لایهی رمزنگاری که گفتوگو را در راه از چشمِ دیگران پنهان میکند.
عمداً واردِ جزئیاتی مثلِ DNS، TCP و کدهای وضعیت (مثلِ ۴۰۴) نمیشویم؛ برای شروع فقط همین مدلِ مشتری میپرسد، سرور متنِ HTML میدهد کافی است.
رندر: مرورگر مترجمِ متن به تصویر است
حالا متنِ HTML رسیده. مرورگر آن را میخواند، آن را به یک درختِ عناصر (هر تگ یک شاخه) تبدیل میکند، و بعد روی صفحه «رندر» (render) میکند — یعنی آن را نقاشی میکند و به یک صفحهی دیداری تبدیل میکند.
پس مرورگر را مثلِ یک مترجم ببین: ورودیاش یک متنِ خشک است، خروجیاش یک صفحهی زندهای است که تو میبینی. همین کار را هر بار با هر سایتی تکرار میکند.
دو زبانِ وب: HTML ساختار، CSS ظاهر
آن متنی که از سرور میآید، در واقع با دو زبانِ مختلف نوشته شده که هرکدام یک کارِ مشخص دارند:
- HTML = ساختار و محتوا. HTML میگوید این چیست: این یک سرتیتر است، این یک پاراگراف است، این یک تصویر است، این یک فهرست است.
- CSS = ظاهر و سبک. CSS میگوید این چه شکلی باشد: این سرتیتر آبی و بزرگ باشد، این کارت گوشهگرد باشد، فاصلهها چقدر باشند.
یک استعارهی روشن که همیشه یادت میماند: فکر کن داری یک خانه میسازی.
- HTML اسکلت و استخوانبندیِ خانه است — دیوارها، اتاقها، درها. ساختار.
- CSS رنگ و کاغذدیواری و دکوراسیون است — اینکه دیوار چه رنگی باشد، کف چه جنسی باشد. ظاهر.
یک زبانِ سومِ وب هم هست به نامِ JavaScript که مسئولِ رفتار و تعامل است (مثلاً وقتی دکمهای را میزنی چیزی اتفاق بیفتد). در این دوره عمداً JavaScript آموزش داده نمیشود؛ تمرکزِ ما کاملاً روی HTML و CSS است تا پایهات محکم شود. دلیلش را در بندِ بعد روشنتر میبینی.
محیطِ dinacode: یک پیشنمایشِ زنده کنارِ یک داور
هر درسِ این دوره دو چیزِ کنارِ هم دارد، و فهمیدنِ نقشِ هرکدام کلیدِ موفقیتِ توست:
- پیشنمایشِ زندهی سندباکسشده — یک قابِ امن (یک iframe ایزوله) که همان لحظه نتیجهی HTML/CSSِ تو را نشان میدهد. این قلبِ یادگیری است؛ هر تغییری در کد میدهی، نتیجهاش را همانجا میبینی. مدام به آن نگاه کن.
- داورِ سمتسرور — همان بخشی که وقتی «اجرا/بررسی» را میزنی، به کارت نمره میدهد و میگوید درست نوشتهای یا نه.
داور دقیقاً چه کار میکند؟ (مهمترین بخشِ این درس)
این نکته را یکبار خوب جا بینداز، چون رازِ پاسشدنِ همهی تمرینهای دوره همینجاست:
داور پیکسلِ رندرشده را نمیبیند. داور به ظاهرِ صفحه نگاه نمیکند. داور فایلِ ورودیِ
index.htmlتو را — بههمراهِ CSS و فایلهایی که با<link>/<script>به آن وصل کردهای، که همگی داخلِ همان متن «تا میخورند» — به یک رشتهی متنی تبدیل میکند و آزمونها را روی همان رشته اجرا میکند.
یعنی داور سؤالاتی از این جنس میپرسد:
- آیا در این متن یک تگِ
<h1>هست؟ - آیا یک
<img>با خصوصیتِaltِ غیرخالی هست؟ - آیا یک قانونِ CSS با
display: flexهست؟
پس درستی در سورس زندگی میکند، نه در ظاهر. اگر تگ و کلاس و خصوصیتِ درست در سورست باشد، پاس میشوی؛ اگر فقط ظاهر را با ترفند درست کرده باشی ولی مارکآپ غلط باشد، داور قبول نمیکند.
نتیجهی عملی برای تو
هر مفهومی در این دوره دو نیمه دارد:
- زیباییاش را در پیشنمایش میبینی (با چشمِ خودت، در همان iframe).
- درستیاش را داور از روی وجودِ تگ/کلاس/خصوصیتِ درست در سورس میسنجد.
یک مثالِ روشن: فرض کن میخواهی یک متن، بزرگ و پررنگ دیده شود. با CSS میتوانی هر تگی را بزرگ و پررنگ کنی. اما اگر آن متن در واقع «عنوانِ صفحه» است، باید آن را داخلِ <h1> بگذاری — هم چون از نظرِ معنا درست است، و هم چون داور انتظار دارد عنوان، یک h1 باشد. ظاهرِ بزرگ کافی نیست؛ معنای درست لازم است.
چرا مارکآپِ درست اینقدر مهم است؟
اینکه «معنای درست» را با تگِ درست بنویسی، فقط یک قانونِ داور نیست؛ سه دلیلِ کاملاً واقعی دارد:
- دسترسپذیری (accessibility): کاربرانِ نابینا با صفحهخوان (screen reader) سایت را گوش میدهند. صفحهخوان به ساختارِ معناییِ HTML تکیه میکند تا بگوید «این عنوانِ اصلیِ صفحه است» یا «این یک فهرست با سه مورد است». اگر مارکآپ درست نباشد، این افراد سرگردان میشوند.
- سئو / SEO: موتورهای جستوجو مثلِ گوگل، ساختارِ صفحه را میخوانند تا بفهمند صفحه دربارهی چیست. عنوانها و ساختارِ درست، شانسِ دیدهشدنِ سایتت را بالا میبرد.
- نگهداری (maintainability): کدِ تمیز و معنایی را خودت چند ماهِ بعد، یا همتیمیات، خیلی راحتتر میفهمید و تغییر میدهید.
جمعبندی
وب یعنی: مشتری (مرورگر) از سرور یک متنِ HTML میگیرد و آن را رندر میکند. در این متن، HTML ساختار را میدهد و CSS ظاهر را. در این دوره، چیزی را که در پیشنمایش میبینی، داور از روی سورسِ درستت میسنجد — پس همیشه مارکآپِ معنایی و درست بنویس.
برای اینکه شکلِ کلیِ یک تکه HTML از همین حالا پیشچشمت باشد، این نمونهی کوچک را ببین (در درسِ بعد جزءبهجزءِ یک تگ را میشکافیم):
<h1>سلام دنیا</h1>
<p>این اولین قدمِ من در دنیای وب است.</p>
یک <h1> که عنوانِ صفحه است، و یک <p> که یک پاراگرافِ متن است. در درسِ بعد میبینیم این < و > و /ها دقیقاً یعنی چه.