0.2 איך עובד האינטרנט הרצאה

איך עובד האינטרנט¶

לפני שנתחיל לכתוב HTML, חשוב להבין איך האינטרנט בכלל עובד. מה קורה כשאתם מקלידים כתובת בדפדפן? איך הדפדפן יודע להציג לכם אתר? ואיך כל זה קשור למה שאתם הולכים לבנות?

אתם כבר עבדתם עם ספריית requests בפייתון ושלחתם בקשות HTTP לשרתים. עכשיו נבין את הצד השני - מה בדיוק הדפדפן עושה עם התשובה שהוא מקבל, ואיך הוא הופך קוד ל-אתר ויזואלי.

מודל לקוח-שרת - client-server model¶

התקשורת באינטרנט עובדת לפי מודל פשוט - לקוח ושרת:

לקוח - client - הדפדפן שלכם (Chrome, Firefox, Safari). הוא שולח בקשות ומקבל תשובות.
שרת - server - מחשב מרוחק שמחכה לקבל בקשות, מעבד אותן, ומחזיר תשובות.

התהליך תמיד עובד ככה:
1. הלקוח שולח בקשה לשרת
2. השרת מעבד את הבקשה
3. השרת שולח תשובה בחזרה ללקוח

זה בדיוק מה שעשיתם עם requests בפייתון - שלחתם בקשת GET לשרת וקיבלתם תשובה. ההבדל הוא שבפייתון רק קראתם את התשובה כטקסט, אבל הדפדפן לוקח את התשובה ומציג אותה ויזואלית כאתר אינטרנט.

מה קורה כשמקלידים כתובת URL בדפדפן¶

בואו נעקוב אחרי מה שקורה כשאתם מקלידים https://www.google.com בדפדפן ולוחצים Enter. התהליך מורכב מכמה שלבים:

שלב 1 - חיפוש DNS¶

הדפדפן צריך לדעת את כתובת ה-IP של השרת. הדומיין www.google.com הוא רק שם ידידותי - המחשב צריך כתובת IP מספרית כדי לתקשר.

הדפדפן פונה לשרת DNS (Domain Name System) ושואל: "מה ה-IP של www.google.com?"
שרת ה-DNS מחזיר תשובה כמו: 142.250.185.206

שירות DNS עובד כמו ספר טלפונים - ממיר שמות (דומיינים) למספרים (כתובות IP).

שלב 2 - חיבור TCP¶

אחרי שהדפדפן יודע את ה-IP, הוא יוצר חיבור TCP לשרת. TCP הוא פרוטוקול שמבטיח שהמידע יגיע בשלמות ובסדר הנכון.
אם הכתובת היא HTTPS (וכמעט תמיד היא כזו), מתבצע גם תהליך TLS handshake שיוצר חיבור מוצפן.

שלב 3 - בקשת HTTP¶

הדפדפן שולח בקשת HTTP לשרת. הבקשה נראית משהו כזה:

GET / HTTP/1.1
Host: www.google.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/120.0
Accept: text/html

שורת הבקשה: GET / HTTP/1.1 - בקשת GET לעמוד הראשי
הדר Host: מציין לאיזה דומיין פונים
הדר User-Agent: מזהה את הדפדפן
הדר Accept: אומר לשרת איזה סוג תוכן הלקוח מצפה לקבל

שלב 4 - תשובת השרת¶

השרת מקבל את הבקשה, מעבד אותה, ומחזיר תשובה:

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 14523

<!DOCTYPE html>
<html>
<head>
    <title>Google</title>
    ...
</head>
<body>
    ...
</body>
</html>

התשובה כוללת:
- שורת סטטוס: 200 OK - הבקשה הצליחה
- כותרות תשובה (headers): מידע על התשובה כמו סוג התוכן ואורכו
- גוף התשובה (body): התוכן עצמו - במקרה הזה קוד HTML

שלב 5 - הדפדפן מרנדר את הדף¶

הדפדפן מקבל את ה-HTML ומתחיל לבנות את הדף. אם ה-HTML מפנה לקבצי CSS, JavaScript, תמונות או פונטים - הדפדפן שולח בקשות HTTP נוספות כדי להביא גם אותם.

פרוטוקול HTTP - בסיס¶

את פרוטוקול HTTP אתם כבר קצת מכירים מקורס פייתון (ספריית requests). בואו נרענן:

בקשות - request methods¶

קיימות כמה שיטות (methods) לבקשות HTTP. השתיים הכי נפוצות:

GET - בקשה לקבלת מידע מהשרת. כשאתם נכנסים לאתר, הדפדפן שולח בקשת GET. בקשת GET לא שולחת מידע בגוף הבקשה.
POST - בקשה לשליחת מידע לשרת. כשאתם ממלאים טופס ולוחצים "שלח", הדפדפן שולח בקשת POST עם המידע שמילאתם.

קיימות גם שיטות נוספות כמו PUT (עדכון), DELETE (מחיקה), PATCH (עדכון חלקי) ועוד - אבל GET ו-POST הן הכי חשובות לעכשיו.

קודי סטטוס - status codes¶

כל תשובת HTTP מגיעה עם קוד סטטוס - מספר בן שלוש ספרות שמציין מה קרה עם הבקשה:

200 OK - הכל בסדר, הבקשה הצליחה והשרת מחזיר את מה שביקשנו.
301 Moved Permanently - העמוד עבר לכתובת אחרת לצמיתות. הדפדפן יעבור אוטומטית לכתובת החדשה.
404 Not Found - העמוד לא נמצא. הכתובת שביקשנו לא קיימת בשרת. כולם מכירים את עמוד ה-404.
500 Internal Server Error - שגיאה פנימית בשרת. משהו השתבש בצד של השרת (לא באשמת הלקוח).

הכלל הפשוט:
- קודים שמתחילים ב-2xx = הצלחה
- קודים שמתחילים ב-3xx = הפניה מחדש (redirect)
- קודים שמתחילים ב-4xx = שגיאת לקוח (הבקשה לא נכונה)
- קודים שמתחילים ב-5xx = שגיאת שרת (משהו נשבר בשרת)

הדפדפן כמנוע רינדור - rendering engine¶

אחרי שהדפדפן מקבל את קבצי ה-HTML, CSS ו-JavaScript, הוא צריך להפוך אותם לדף ויזואלי על המסך. התהליך הזה נקרא רינדור (rendering), והוא עובד בכמה שלבים:

שלב 1 - בניית ה-DOM¶

הדפדפן קורא את ה-HTML ובונה ממנו עץ שנקרא DOM (Document Object Model). כל תגית HTML הופכת לצומת (node) בעץ.

לדוגמה, ה-HTML הבא:

<html>
<body>
    <h1>Hello</h1>
    <p>World</p>
</body>
</html>

הופך לעץ DOM:

html
 └── body
      ├── h1
      │    └── "Hello"
      └── p
           └── "World"

שלב 2 - בניית CSSOM¶

במקביל, הדפדפן קורא את ה-CSS ובונה ממנו עץ נוסף שנקרא CSSOM (CSS Object Model) - עץ שמכיל את כל חוקי העיצוב.

שלב 3 - עץ רינדור - render tree¶

הדפדפן משלב את ה-DOM וה-CSSOM לעץ רינדור - עץ שמכיל רק את האלמנטים שצריך להציג על המסך, עם העיצוב שלהם.

שלב 4 - פריסה - layout¶

הדפדפן מחשב את המיקום והגודל המדויק של כל אלמנט על המסך.

שלב 5 - ציור - paint¶

הדפדפן מצייר את הפיקסלים על המסך. זה השלב שבו אתם סוף סוף רואים את הדף.

כל התהליך הזה קורה תוך אלפיות שניה. הדפדפן הוא תוכנה מאוד חכמה ומורכבת.

אתרים סטטיים מול אתרים דינמיים¶

אתר סטטי - static website¶

אתר סטטי הוא אתר שהתוכן שלו קבוע. השרת מחזיר בדיוק את אותם קבצי HTML, CSS ו-JavaScript לכל מי שנכנס. התוכן לא משתנה לפי המשתמש.

דוגמה: אתר תדמית של חברה, דף נחיתה, בלוג פשוט.

אתר דינמי - dynamic website¶

אתר דינמי הוא אתר שהתוכן שלו משתנה. השרת מייצר את ה-HTML בזמן אמת לפי מי שביקש, מה הוא ביקש, ומידע ממסד הנתונים.

דוגמה: פייסבוק - כל משתמש רואה פיד אחר. יוטיוב - ההמלצות שונות לכל אחד. חנות אונליין - המוצרים מגיעים ממסד נתונים.

בפועל, רוב האתרים המודרניים הם שילוב - הפרונטאנד הוא סטטי (אותם קבצי HTML/CSS/JS נשלחים לכולם), אבל ה-JavaScript שרץ בדפדפן פונה לבאקאנד ומביא מידע דינמי דרך API.

ההבדל ממה שעשינו בפייתון¶

בקורס פייתון השתמשתם בספריית requests כדי לשלוח בקשות HTTP:

import requests

response = requests.get("https://www.example.com")
print(response.text)  # prints the HTML as plain text

מה שקיבלתם בחזרה זה טקסט גולמי - קוד HTML. ראיתם תגיות כמו <html>, <body>, <p> בתור טקסט רגיל.

הדפדפן עושה בדיוק את אותו הדבר - שולח בקשת GET ומקבל HTML. אבל במקום להדפיס את הטקסט, הוא לוקח את ה-HTML הזה ומרנדר אותו - הופך אותו לדף ויזואלי עם צבעים, פונטים, תמונות ואינטראקטיביות.

עד עכשיו הייתם הצד ששולח בקשות (הלקוח). בקורס הזה אתם הולכים לבנות את מה שהשרת מחזיר - את ה-HTML, CSS ו-JavaScript שהדפדפן מציג למשתמש.

במילים אחרות:
- בפייתון שלחתם requests.get() וקיבלתם HTML כטקסט
- עכשיו אתם תכתבו את ה-HTML הזה - ותראו אותו מתרנדר בדפדפן כאתר אמיתי

סיכום¶

האינטרנט עובד לפי מודל לקוח-שרת. הדפדפן (לקוח) שולח בקשות HTTP לשרת ומקבל תשובות.
כשמקלידים URL, הדפדפן עושה DNS lookup, יוצר חיבור TCP, שולח בקשת HTTP, מקבל תשובה, ומרנדר את הדף.
קודי סטטוס HTTP מציינים מה קרה עם הבקשה: 200 = הצלחה, 404 = לא נמצא, 500 = שגיאת שרת.
הדפדפן לוקח HTML ובונה ממנו DOM, משלב עם CSS, ומצייר את הדף על המסך.
בקורס הזה אנחנו נבנה את הצד של הפרונטאנד - את הקבצים שהדפדפן מקבל ומציג למשתמש.