ניצור את דף האינטרנט הראשון שלנו עם כותרת, פסקה ותמונה. נשמור קובץ HTML, נפתח אותו בדפדפן ונראה איך שינוי בקוד משנה את הדף.
אם קישור הקוד אינו נפתח, בקשו גישה למאגר.
מה נלמד
- להבדיל בין קובץ המקור לבין מה שהדפדפן מציג.
- לכתוב תגיות פתיחה וסגירה ולהגדיר עברית.
- לקשר תמונה באמצעות נתיב יחסי.
מכינים תיקייה לקבצים
פתחו את סייר הקבצים ב־Windows או את Finder ב־macOS. בתוך Documents / מסמכים צרו תיקייה בשם first-page. בתוכה נשמור את index.html ואת fox.svg. עדיין אין צורך ב־Git או בחשבון GitHub; נקים את מאגר הפרויקט בשיעור הבא.
1. יוצרים קובץ אמיתי
ב־Windows פתחו Notepad ושמרו בתוך התיקייה first-page בשם index.html בקידוד UTF-8, עם סוג קובץ All files. ודאו שלא נוצר index.html.txt. ב־macOS אפשר להשתמש ב־VS Code כעורך טקסט פשוט.
2. פותחים בדפדפן
שמרו את שני הקבצים באותה תיקייה. הוסיפו לתיקייה את האיור המצורף לקוד השלב. לחצו פעמיים על index.html. אחרי שינוי ושמירה רעננו את הדפדפן.
השינויים בקוד
first-page/index.html
קובץ חדש. צרו את first-page/index.html והדביקו את התוכן הבא:
<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="utf-8">
<title>החיות שלי</title>
</head>
<body>
<h1>החיות שלי</h1>
<p>זה האתר הראשון שלי. כאן אכיר לכם חיות שמסקרנות אותי.</p>
<img src="fox.svg" alt="איור של שועל" width="180">
</body>
</html>
קבצי תשתית וקבצים שנוצרו אוטומטית
הקבצים הבאים נמצאים בקוד השלב. קבצים שנוצרים באמצעות פקודות השלב אין להעתיק ידנית.
מריצים ובודקים
- מופיעים כותרת, פסקה ואיור שועל.
- שנו את הכותרת ושמרו; רעננו ובדקו מה השתנה.
- שנו זמנית את שם התמונה ב־src והסבירו את הטקסט החלופי. החזירו את הנתיב התקין.
משימה אישית ובדיקת הבנה
כתבו פסקה אישית והסבירו מדוע שינוי ב־title משפיע על לשונית הדפדפן, ושינוי ב־h1 משפיע על גוף הדף.
שמרו את שני הקבצים בתיקיית first-page ובדקו שהדף נפתח והתמונה מופיעה. בשיעור הבא תיצרו פרויקט Razor Pages ותלמדו לשמור אותו במאגר פרטי ב־GitHub.
AI יכול לעזור להבין הודעת שגיאה ולנפות תקלה. אתם אחראים לכתוב, לבדוק ולהסביר את הקוד; אין להפעיל סוכן שיכתוב את הפרויקט.