מה זה בעצם קובץ HTML, ואיך הוא עובד מאחורי הקלעים?

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

אז הנה ההסבר, בלי רקע בתכנות ובלי מילים גדולות.

זה קובץ טקסט. באמת.

אם תיקחו קובץ HTML ותפתחו אותו ב-Notepad, לא ייפתח שום דבר מסתורי. תראו מילים. אותן מילים בדיוק שהדפדפן קורא ומצייר מהן עמוד.

זה נשמע קטן אבל זה כל הסיפור: קובץ HTML הוא לא תוכנה ולא תמונה, הוא רשימת הוראות בכתב. וכמו שרשימת הוראות בשרטוט אומרת "קיר בטון 20 ס"מ", ההוראות פה אומרות "כותרת", "פסקה", "כפתור".

הנה עמוד HTML שלם. באמת שלם, לא קטע:

<!-- קובץ HTML קטן ומלא -->
<h1>בית קברות יהודי בשכם</h1>
<p>שלושה דונם, סביב הנקודה 32.2233 צפון.</p>
<button>הצג על המפה</button>

שלוש שורות, ויש לכם כותרת, פסקה וכפתור. תשמרו את זה בקובץ עם הסיומת .html, תלחצו עליו פעמיים, והדפדפן יפתח אותו.

התגית: אבן הבניין היחידה

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

יש בערך מאה תגיות כאלה, ובפועל משתמשים בעשר. אלה שתפגשו הכי הרבה:

• <h1> עד <h6> — כותרות, מהגדולה לקטנה.
• <p> — פסקה של טקסט.
• <img> — תמונה.
• <a> — קישור.
• <button> — כפתור.
• <div> — קופסה סתמית שאוספת דברים ביחד. זו התגית שתראו הכי הרבה, והיא בעצם ריקה ממשמעות. היא רק מארגנת.

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

נסו בעצמכם

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

שלוש שפות שגרות באותו קובץ

כשאומרים "קובץ HTML" מתכוונים בדרך כלל לשלושה דברים שיושבים ביחד. זה נשמע מסובך והוא לא, כי לכל אחד יש תפקיד אחד ברור.

אם צריך את זה בשפה של אדריכל: HTML הוא התוכנית, כלומר מה נמצא ואיפה. CSS הוא כתב הכמויות והגימור, כלומר איך זה נראה. JavaScript הוא המערכות, כלומר מה קורה כשמפעילים משהו.

ואת שלושתם אפשר לכתוב בתוך אותו קובץ אחד. בדיוק בגלל זה אפשר לשלוח קובץ בודד בוואטסאפ והוא עובד אצל הצד השני בלי שום התקנה.

איך הדפדפן קורא את זה

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

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

איך לראות את הקוד של כל עמוד באינטרנט

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

בכרום, לחצו Ctrl + U (במק: Option + Cmd + U). ייפתח לכם חלון עם כל הקוד של העמוד שאתם נמצאים בו.

תעשו את זה עכשיו, על העמוד הזה. תמצאו שם את המילים שאתם קוראים ברגע זה, יושבות בתוך תגיות. אפשר גם ללחוץ ימני על כל אלמנט בעמוד ולבחור "בדוק" (Inspect), ואז לראות בדיוק איזה קוד אחראי על מה שהעכבר עומד עליו.

ואיך מייצרים כזה בעצמכם?

עכשיו החלק שבגללו זה בכלל רלוונטי לכם: אתם לא צריכים לכתוב את זה בידיים.

אני לא יושב ומקליד תגיות. אני מתאר לקלוד מה אני רוצה, בעברית, והוא כותב את הקובץ. "קח את קובץ ה-DWG הזה, תוציא ממנו את השכבות, ותבנה לי עמוד שאפשר לכבות ולהדליק בו שכבות". זה הפרומפט. התוצר הוא קובץ HTML שאני שולח הלאה.

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