01 — הדף הראשון שלי

ניצור דף עם כותרות, פסקאות, תמונה, קישור ורשימה, ונעצב אותו באמצעות CSS. נעבוד בקובץ HTML רגיל ונפתח אותו בדפדפן, לפני יצירת פרויקט ב־Visual Studio או ב־VS Code.

הפרק הקודם: מפת הדרך: האתר שלי · הפרק הבא: 02 — סביבת הפיתוח: מריצים ומשנים אתר

במסך מגע אפשר להחליק ימינה לפרק הבא ושמאלה לפרק הקודם.

מה נלמד

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

HTML: מתארים את תוכן הדף

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

<p>זה האתר הראשון שלי.</p>

<p> היא תגית פתיחה, אחריה נמצא התוכן, ו־</p> היא תגית סגירה. הלוכסן מסמן את הסגירה. הדפדפן מציג את התוכן כפסקה; הוא אינו מציג את סימני התגיות עצמם.

h1 ו־h2 מציינות רמות של כותרות. בוחרים אותן לפי מבנה התוכן; בהמשך נשנה את גודלן בעזרת CSS. br ו־img הן תגיות ללא תוכן פנימי וללא תגית סגירה: לא כותבים </br> או </img>.

Enter בקוד המקור אינו יוצר בדרך כלל שורה חדשה בתצוגת טקסט רגילה. לפסקה חדשה משתמשים ב־p נוסף; למעבר שורה מכוון בתוך פסקה משתמשים ב־br. רווחים בין אזורים נעצב ב־CSS, במקום להוסיף רצף של תגיות br.

מאפיינים וקינון

בתגית הפתיחה אפשר לכתוב מאפיינים בצורה name="value". בתמונה, src הוא נתיב הקובץ, alt הוא טקסט חלופי שמתאר אותה, ו־width הוא רוחב התצוגה בפיקסלים. הטקסט החלופי מסייע גם למי שמשתמש בקורא מסך. בקישור, href הוא היעד, והטקסט שבין <a> ל־</a> הוא הטקסט שעליו לוחצים.

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

נסו בעצמכם ב־W3Schools: פתחו את HTML Basic Examples — דוגמאות HTML בסיסיות. ליד דוגמת הכותרת והפסקה לחצו Try it Yourself, שנו את טקסט הכותרת, הוסיפו פסקת p ולחצו Run כדי לראות את התוצאה. לאחר הניסוי חזרו לכאן והמשיכו ל־CSS.

CSS: קובעים איך התוכן ייראה

CSS היא שפה לעיצוב הדף. כלל CSS בוחר רכיבים ומגדיר להם תכונות עיצוב:

p {
    color: darkgreen;
    font-size: 1.2rem;
}

p הוא בורר (selector): הכלל חל על כל הפסקאות בדף. בין הסוגריים המסולסלים כותבים הצהרות בצורה property: value;: שם תכונה, נקודתיים, ערך ונקודה־פסיק. כאן color קובע את צבע הטקסט, ו־font-size את גודלו. rem היא יחידה יחסית לגודל הגופן הבסיסי של הדף; 1.2rem הוא פי 1.2 מהגודל הזה.

בדף הראשון נכתוב את כללי ה־CSS בתוך תגית style ב־head. בהמשך נעבוד גם בקובץ נפרד עם סיומת .css.

ניסוי בעיצוב ב־W3Schools: פתחו את CSS Syntax — בורר, תכונה וערך ולחצו Try it Yourself. בכלל של p, שנו את ערך color מ־red ל־blue ולחצו Run. הסבירו מדוע כל הפסקאות משנות צבע, ואז חזרו לכאן ליצירת הקובץ שלכם.

מכינים תיקייה לקבצים

פתחו את סייר הקבצים ב־Windows או את Finder ב־macOS. בתוך Documents / מסמכים צרו תיקייה בשם first-page. בתוכה נשמור את index.html ואת fox.svg. עדיין אין צורך ב־Git או בחשבון GitHub; נגיע לשמירת גרסאות אחרי שיעור Bootstrap.

1. יוצרים קובץ אמיתי

ב־Windows פתחו Notepad ושמרו בתוך התיקייה first-page בשם index.html בקידוד UTF-8, עם סוג קובץ All files. ודאו שלא נוצר index.html.txt. ב־macOS אפשר להשתמש ב־VS Code כעורך טקסט פשוט.

2. מכינים תמונה ופותחים בדפדפן

הורידו את איור השועל (fox.svg) ושמרו אותו בתיקייה first-page, לצד index.html. כתבו ושמרו את הקוד שבסעיף הבא, ואז לחצו פעמיים על index.html. אחרי כל שינוי ושמירה רעננו את הדפדפן.

השינויים בקוד

first-page/index.html

בקובץ החדש first-page/index.html כתבו את התוכן הבא. אם כבר פתחתם קובץ ריק, המשיכו לעבוד בו:

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="utf-8">
    <title>החיות שלי</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: ivory;
            padding: 1rem;
        }
        h1 {
            color: darkgreen;
        }
        p {
            font-size: 1.2rem;
        }
    </style>
</head>
<body>
    <h1>החיות שלי</h1>
    <p>זה האתר הראשון שלי. כאן אכיר לכם חיות שמסקרנות אותי.</p>
    <h2>מה תמצאו כאן?</h2>
    <ul>
        <li>שועל</li>
        <li>ינשוף</li>
    </ul>
    <img src="fox.svg" alt="איור של שועל" width="180">
    <p>רוצים להכיר את השועל?<br>אפשר להמשיך לקרוא בקישור הבא.</p>
    <a href="https://he.wikipedia.org/wiki/שועל">לקריאה על שועלים</a>
</body>
</html>

קוראים את מבנה הקובץ

• <!DOCTYPE html> מודיע לדפדפן שזהו מסמך HTML מודרני.
• html עוטפת את הדף. lang="he" מציין ששפתו עברית, ו־dir="rtl" קובע כיוון מימין לשמאל.
• head מכילה מידע על הדף: meta charset="utf-8" מגדירה קידוד שתומך בעברית, title מגדירה את כותרת הלשונית, ו־style מכילה את כללי העיצוב.
• body מכילה את התוכן שמוצג בתוך חלון הדפדפן.

בכלל של body, התכונה font-family בוחרת גופן: Arial אם הוא זמין, ואחרת גופן ממשפחת sans-serif. background-color קובעת את צבע הרקע, ו־padding מוסיפה רווח פנימי בין גבולות האזור לבין התוכן. הכלל של h1 צובע את הכותרת הראשית; הכלל של p מגדיל את שתי הפסקאות.

מריצים ובודקים

1. פתחו את index.html: מופיעים כותרת ראשית ירוקה, כותרת משנה, שתי פסקאות, רשימת שני פריטים, שועל וקישור, על רקע בהיר.
2. שנו את הטקסט בתוך h1, שמרו ורעננו. תוכן הכותרת משתנה והצבע נשאר ירוק.
3. הוסיפו פריט li בתוך ul, שמרו ורעננו. מופיעים שלושה פריטים באותה רשימה.
4. מחקו לרגע את br וחברו את שני חלקי המשפט ברווח רגיל. שמרו ורעננו: מעבר השורה המכוון נעלם; בחלון צר הטקסט עדיין עשוי להישבר לפי הרוחב. החזירו את br.
5. שנו את darkgreen ל־navy ואת ivory ל־lightyellow, שמרו ורעננו. צבעי הכותרת והרקע משתנים, והטקסט נשאר כפי שכתבתם.
6. שנו את גודל הפסקאות מ־1.2rem ל־1.5rem. בדקו ששתי הפסקאות גדלות. שנו את padding מ־1rem ל־2rem ובדקו שהרווח סביב התוכן גדל.
7. שנו זמנית את שם התמונה ב־src, שמרו ורעננו. הסבירו את הטקסט החלופי והחזירו את הנתיב התקין.
8. לחצו על הקישור ובדקו שהוא מוביל לעמוד על שועלים. חזרו לדף שלכם באמצעות כפתור החזרה בדפדפן.

משימה אישית ובדיקת הבנה

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

1. מה ההבדל בין title, h1 ו־h2?
2. מתי מתאים להשתמש ב־p חדש ומתי ב־br?
3. מה ההבדל בין src של תמונה ל־href של קישור?
4. איזה חלק בקוד משנה את התוכן, ואיזה משנה רק את העיצוב? מדוע בורר p משפיע על שתי הפסקאות?

שמרו את שני הקבצים בתיקיית first-page ובדקו שהדף נפתח והתמונה מופיעה. בשיעור הבא תיצרו פרויקט Razor Pages ותריצו אותו בסביבת הפיתוח.

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

המשך

• המשך: 02 — סביבת הפיתוח: מריצים ומשנים אתר