1 / 35

שיעור 2

מבנה סמנטי, תוכן וטפסים

בונים את השלד והתוכן של דף הנחיתה: Header, Hero, יתרונות וטופס הרשמה שמוכן ל-JavaScript.

מה נבנה היום?

דף נחיתה אמיתי

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

הכנה ל-JavaScript

  • נשתמש ב-id לשדות שנרצה לתפוס בהמשך.
  • נשתמש ב-class לסידור ועיצוב עתידי.
  • נבנה טופס תקין עם label לכל שדה.
  • נשמור על מבנה ברור שקל לקרוא בקוד.
מטרה: בסוף השיעור יש לנו דף נחיתה עם HTML תקני ויחד עם זה מתרגלים מה נכנס כבר עכשיו ל-css/style.css: אחרי כל שלב בהוראות נראה איך הדף נראה עם HTML בלבד ובשקופית המשך איך נראית תוספת ה-CSS.

מערך השיעור

שעה 1 - סמנטיקה וחלוקה

נבין למה לא כל דבר צריך להיות div, ונשתמש ב-header, main, section ו-footer.

שעה 2 - מדיה ותוכן

נוסיף Hero, תמונה מרכזית, רשימת יתרונות ותוכן שמתאים לדף נחיתה.

שעה 3 - טפסים והכנה ל-JS

נבנה טופס הרשמה עם label, input, button ו-id לכל שדה חשוב.

תצוגה מקדימה בשקופיות

בכל אזור (שלד, Header, Hero, תמונה, יתרונות, תהליך, Footer, טופס) יש טור קוד משמאל ותצוגה מקדימה מימין. כך רואים בדיוק איך הצטבר הקוד ובאיזה מראה בסיום השלב.

נקודת פתיחה: מבנה הפרויקט

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

landing-page/
├── index.html
├── css/
│   └── style.css
└── js/
    └── script.js

תיקיית landing-page/ בתוך שיעור 2

במאגר של הקורס קיימת גרסת דף מלאה בקבצים index.html, css/style.css ו-js/script.js. קטעי הקוד בשקופיות מוצגים כמו בקבצים האלה; אפשר לפתוח את דף הנחיתה בנפרד ובלשונית חדשה מהקישור בשקופית הצגת הדף המלא. מומלץ לפתוח את התיקייה עם Live Server מתוך שרשור התיקיות הראשית במחשב שלכם, לא מתוך המצגת.

דגש למדריך

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

למה סמנטיקה חשובה?

סמנטיקה היא שימוש בתגיות שמתארות את המשמעות של האזור בדף, לא רק את המראה שלו.

פחות ברור

<div>
  <div>לוגו ותפריט</div>
  <div>תוכן מרכזי</div>
  <div>סוף הדף</div>
</div>

יותר מקצועי

<header>לוגו ותפריט</header>
<main>תוכן מרכזי</main>
<footer>סוף הדף</footer>

המסר לתלמידים

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

התגיות הסמנטיות של היום + div ו-span

<header>

האזור העליון של הדף. בדרך כלל כולל לוגו, שם אתר ותפריט ניווט.

<main>

התוכן המרכזי והייחודי של הדף. בדרך כלל מופיע פעם אחת בעמוד.

<section>

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

<footer>

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

מתי משתמשים ב-div?

מה הוא עושה?

<div> הוא קופסת מבנה בשורה משל עצמו (ברירת מחדל: display: block). הוא לא מתאר מה יש בתוך הקופסה, ולכן אין משמעות סמנטית לדפדפן או לקוראי מסך.

למה משתמשים בו בעולם האמיתי?

  • לקבץ כמה אלמנטים שנרצה לעצב יחד (למשל שורת לוגו + תפריט).
  • לפתוח תבנית פריסה (בשיעורים הבאים הרבה פריסות נשענות על div בשילוב עם CSS).
  • להוסיף class אחד משותף למספר פריטים.

ומה עם span?

בלי שבירת שורה

<span> הוא קופסה בתוך שורה (ברירת מחדל: לא שובר תיבה משל עצמו). מתאים לטקסט קטן שרוצים להדגיש, לצבוע או למקד בלי לשנות את המבנה.

דוגמה טיפוסית בדף הנחיתה

למשל בשם האתר: <span class="logo-accent">Prime</span>Landing. שניהם יושבים באותה שורת טקסט בלוגו, אך אפשר לתת למילה ראשונה צבע אחר ב-CSS בעזרת logo-accent.

הכלל מהניסיון

אם התגית מתארת תפקיד בתמונה המלאה — נעדיף header, nav, section. אם רק צריך צעד ארגון או עיצוב — div ו-span. בפרויקט landing-page/ משתמשים ב-div בתוך ה-Hero ל-hero-content וב-cta-row, וב-span בלוגו ובשורות עזר.

חשוב: מתחילים מסמנטיקה מתאימה (header, nav, main…) ומשתמשים ב-div בעיקר לקיבוץ או לפריסה כשלא קיימת תגית שמתארת טוב את האזור.

שלד ראשוני לדף הנחיתה

קוד בשלב זה (index.html) 
<body>
  <div class="page-wrap">
    <header class="site-header">
      <a class="logo" href="#"><span class="logo-accent">Prime</span>Landing</a>

      <nav class="main-nav" aria-label="ניווט ראשי">
        <ul>
          <li><a href="#hero">בית</a></li>
          <li><a href="#benefits">יתרונות</a></li>
          <li><a href="#signup">הרשמה</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <section id="hero" class="hero-section">
        <!-- תוכן Hero -->
      </section>

      <section id="benefits" class="benefits-section">
        <!-- רשימת יתרונות -->
      </section>

      <section id="signup" class="signup-section">
        <!-- טופס הרשמה -->
      </section>
    </main>

    <footer class="site-footer">
      <!-- פוטר -->
    </footer>
  </div>
</body>
תצוגה מקדימה: הרגע עם שלד סמנטי בלבד (עדיין בלי css/style.css)
📄 index.html • דף נחיתה
<header> לוגו ותפריט
<main>
<section> Hero
<section> יתרונות
<section> הרשמה
<footer> סיום דף
המסר: בשלב זה הבנת המבנה חשובה יותר מהמראה. עוד רגע מוסיפים את תוכן ה-HTML בתוך כל תגית, ושקופיות ייעודיות מראות מה להוסיף ל-css/style.css.

מה הרווחנו?

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

Header: לוגו ותפריט

ה-Header הוא נקודת הכניסה לדף. הוא צריך להיות קצר, ברור, ולתת גישה לאזורים המרכזיים.

קוד בשלב זה (index.html בלבד) 
    <header class="site-header">
      <a class="logo" href="#"><span class="logo-accent">Prime</span>Landing</a>

      <nav class="main-nav" aria-label="ניווט ראשי">
        <ul>
          <li><a href="#hero">בית</a></li>
          <li><a href="#benefits">יתרונות</a></li>
          <li><a href="#signup">הרשמה</a></li>
        </ul>
      </nav>
    </header>
איך זה נראה בדפדפן רק עם HTML (ברירות מחדל של הדפדפן)
📄 localhost — דף הנחיתה

מתחת: שאר החלקים של הדף יתפסו את המקום בשקופיות הבאות...

שימו לב: הקישורים עם #hero וכן הלאה מטרתם להגיע ל-id של אזורים. בשקופיות הבאות נוסיף חוקי css/style.css — קודם בסיס העמוד ואז עיצוב הכותרת.

מה מוסיפים ל-css/style.css? בסיס העמוד ועטיפת תוכן

קובץ ה-CSS בפרויקט מתחיל ב-border-box, הגדרות body, ו-page-wrap שמרכז את התוכן — לפני חוקי הכותרת.

תחילת css/style.css 
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  line-height: 1.6;
  color: #1f2937;
  background-color: #f6f8fb;
}

.page-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px 48px;
}
ב-index.html: התוכן העיקרי עטוף ב-<div class="page-wrap"> כמו בקבצי landing-page/.

מה מוסיפים ל-css/style.css? Header וניווט

אחרי שיש HTML לכותרת, מוסיפים חוקים שמארגנים את הלוגו ומחישים שהתפריט הוא רשימת קישורים.

קובץ css/style.css (מתווסף או מתעדכן) 
.site-header {
  padding: 16px 0;
  border-bottom: 2px solid #e5e7eb;
  background-color: #ffffff;
}

.site-header .logo {
  font-weight: 800;
  color: #0f172a;
  text-decoration: none;
}

.logo-accent {
  color: #2563eb;
}

.main-nav ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.main-nav li {
  display: inline-block;
  margin-left: 20px;
}

.main-nav a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 700;
}
אחרי שמוסיפים את החוקים האלה
📄 עם CSS — רק אזור הכותרת

בשיעור 3 והלאה נעמיק

כבר עכשיו רואים איך רק השדה הנכון בוחר מה לעצב: class בשם מתפקיד וכללים מתאימים ב-CSS.

ניווט עם רשימה וקישורים

למה ul ו-li?

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

למה a?

כל פריט בתפריט הוא קישור למקום אחר בדף או לעמוד אחר.

            <a class="primary-link" href="#signup">להרשמה</a>

מה עושה הסולמית?

#signup אומר לדפדפן: עבור לאלמנט שיש לו id="signup".

Hero: המסר המרכזי של הדף

Hero הוא האזור הראשון והבולט בדף נחיתה. הוא עונה מהר על השאלה: מה מציעים לי ולמה כדאי לי להמשיך?

מתווסף ל-index.html בתוך <main> 
      <section id="hero" class="hero-section">
        <div class="hero-content">
          <p class="eyebrow"><span aria-hidden="true">●</span> פרויקט HTML ראשון</p>
          <h1>דף נחיתה שמוכן לשלב הבא</h1>
          <p>
            נבנה מבנה ברור עם <code>header</code>, <code>main</code>,
            <code>section</code> ו-<code>footer</code>, ובמקביל CSS חיצוני בקובץ
            נפרד — מתאים להמשך עם JavaScript.
          </p>
          <div class="cta-row">
            <a class="primary-link" href="#signup">להרשמה</a>
            <span class="cta-hint span-muted">לא חייבים להבין הכל בשיעור הראשון — רק למקם נכון.</span>
          </div>
        </div>

      </section>
רק HTML: אחרי הוספת טקסט ה-Hero מתחת ל-Header שכבר שניהם בסיסיים
📄 דפדפן — עדיין בלי הקובץ css/style.css

פרויקט HTML ראשון

דף נחיתה שמוכן לשלב הבא

נבנה מבנה ברור עם header, main, section ו-footer, ובמקביל CSS חיצוני בקובץ נפרד — מתאים להמשך עם JavaScript.

להרשמה לא חייבים להבין הכל בשיעור הראשון — רק למקם נכון.
בחירה מקצועית: ל-Hero נתנו id כדי שהניווט יגיע אליו, ו-class hero-section כדי שנוכל למקד בכך את החוקים ב-css/style.css.

מה מוסיפים ל-css/style.css? טקסט ה-Hero

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

בנוסף לחוקי ה-Header של השקופית הקודמת 
.hero-section {
  margin-top: 24px;
  padding: 32px 24px;
  border-radius: 16px;
  background: linear-gradient(#eff6ff, #f9fafb);
}

.hero-content .eyebrow {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #0369a1;
}

.hero-content h1 {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.2;
}

.hero-content p {
  margin: 0 0 16px;
  color: #475569;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.primary-link {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  color: #ffffff;
  background-color: #2563eb;
  text-decoration: none;
}

.primary-link:hover {
  background-color: #1d4ed8;
}

.span-muted {
  font-size: 14px;
  color: #64748b;
}
כך נראה אותו החלק אחרי החוקים האלה
📄 Header + Hero אחרי CSS

פרויקט HTML ראשון

דף נחיתה שמוכן לשלב הבא

נבנה מבנה ברור עם header, main, section ו-footer, ובמקביל CSS חיצוני בקובץ נפרד — מתאים להמשך עם JavaScript.

להרשמה לא חייבים להבין הכל בשיעור הראשון — רק למקם נכון.

הוספת תמונת Hero (<img>)

מה מוסיפים ל-index.html מתחת/alongside טקסט ה-Hero 
        <img
          class="hero-image"
          src="https://images.unsplash.com/photo-1498050108023-c5249f4df085"
          alt="מסך מחשב עם קוד פתוח בעורך קוד"
          width="800"
          height="533"
        >

לא לוותר על alt

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

רק עם HTML חדש על גבי עיצוב כבר מהשלב הקודם לתמונה אין משבצת — היא מתנפחת ובולטת מתוך כרטיס ה-Hero
📄 עם CSS טקסט — בלי משבצת לתמונה עדיין

פרויקט HTML ראשון

דף נחיתה שמוכן לשלב הבא

נבנה מבנה ברור עם header, main, section ו-footer, ובמקביל CSS חיצוני בקובץ נפרד — מתאים להמשך עם JavaScript.

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

Hero מלא בתוך הקובץ: תוכן + תמונה

בלוק מלא שנשמר ב-index.html 
      <section id="hero" class="hero-section">
        <div class="hero-content">
          <p class="eyebrow"><span aria-hidden="true">●</span> פרויקט HTML ראשון</p>
          <h1>דף נחיתה שמוכן לשלב הבא</h1>
          <p>
            נבנה מבנה ברור עם <code>header</code>, <code>main</code>,
            <code>section</code> ו-<code>footer</code>, ובמקביל CSS חיצוני בקובץ
            נפרד — מתאים להמשך עם JavaScript.
          </p>
          <div class="cta-row">
            <a class="primary-link" href="#signup">להרשמה</a>
            <span class="cta-hint span-muted">לא חייבים להבין הכל בשיעור הראשון — רק למקם נכון.</span>
          </div>
        </div>

        <img
          class="hero-image"
          src="https://images.unsplash.com/photo-1498050108023-c5249f4df085"
          alt="מסך מחשב עם קוד פתוח בעורך קוד"
          width="800"
          height="533"
        >
      </section>
אותה רמת עיצוב כמו בשקופית הקודמת (לפני הגבלות לתמונה)
📄 Hero שלם עם <img>

פרויקט HTML ראשון

דף נחיתה שמוכן לשלב הבא

נבנה מבנה ברור עם header, main, section ו-footer, ובמקביל CSS חיצוני בקובץ נפרד — מתאים להמשך עם JavaScript.

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

מה מוסיפים ל-css/style.css? תמונת Hero מתאימה לכרטיס

נוסף אחרי כל מה שכבר עיצב את הכותרת וה-Hero 
.hero-section .hero-image {
  width: 100%;
  margin-top: 16px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  height: clamp(160px, 28vw, 260px);
  object-fit: cover;
}
אחרי שמורים ומרעננים עם Live Server
📄 משבצת לתמונה — Hero מסודר

פרויקט HTML ראשון

דף נחיתה שמוכן לשלב הבא

נבנה מבנה ברור עם header, main, section ו-footer, ובמקביל CSS חיצוני בקובץ נפרד — מתאים להמשך עם JavaScript.

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

השכבות עד כאן ברצף הקורס

Header → ניווט → תיבת טקסט של Hero → עכשיו משבצת לתמונה. כך כל החלקים של המסלול העליון מוכנים לפני שנורדים ליתרון ולהרשמה.

אזור יתרונות המוצר (index.html)

מתווסף מתחת ל-Hero בתוך <main> 
      <section id="benefits" class="benefits-section">
        <h2>למה ללמוד דרך פרויקט?</h2>
        <div class="benefits-intro">
          <p>כל שורת קוד מתחברת לתוצאה שאפשר לראות ב‑Live Server.</p>
        </div>
        <ul class="benefits-list">
          <li>רואים תוצאה אמיתית בדפדפן.</li>
          <li>מבינים למה כל תגית קיימת.</li>
          <li>מתכוננים לעבודה עם JavaScript.</li>
        </ul>
      </section>
מרכיב חדש עם HTML בלבד — הרקע המקווקו מסמן מה נוסף בשלב הזה לפני שנכתוב CSS ייעודי
📄 Head + Hero עם CSS + בלוק חדש רק ב-HTML

פרויקט HTML ראשון

דף נחיתה שמוכן לשלב הבא

נבנה מבנה ברור…

להרשמה

למה ללמוד דרך פרויקט?

כל שורת קוד מתחברת לתוצאה שאפשר לראות ב‑Live Server.

  • רואים תוצאה אמיתית בדפדפן.
  • מבינים למה כל תגית קיימת.
  • מתכוננים לעבודה עם JavaScript.

רשימה לא ממוספרת

כשאין סדר מחייב בין הפריטים, משתמשים ב-ul.

מה מוסיפים ל-css/style.css? אזור היתרונות

מבדילים את כרטיס היתרונות מרקע ה-Hero הכחול 
.benefits-section {
  margin-top: 32px;
  padding: 24px;
  border-radius: 16px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
}

.benefits-section h2 {
  margin: 0 0 12px;
}

.benefits-intro {
  margin-bottom: 12px;
  color: #475569;
  font-size: 15px;
}

.benefits-list {
  margin: 0;
  padding-right: 20px;
}
אחרי שמוסיפים את החוקים
📄 Hero + יתרונות עם CSS

פרויקט HTML ראשון

דף נחיתה שמוכן לשלב הבא

נבנה מבנה ברור…

להרשמה

למה ללמוד דרך פרויקט?

כל שורת קוד מתחברת לתוצאה שאפשר לראות ב‑Live Server.

  • רואים תוצאה אמיתית בדפדפן.
  • מבינים למה כל תגית קיימת.
  • מתכוננים לעבודה עם JavaScript.

מתי להשתמש ב-Ordered List? (index.html)

אזור "איך זה עובד?" עם צעדים ממוספרים 
      <section class="process-section">
        <h2>איך זה עובד?</h2>
        <ol>
          <li>נרשמים דרך הטופס.</li>
          <li>מקבלים קישור לתרגול.</li>
          <li>בונים דף נחיתה אישי.</li>
        </ol>
      </section>
HTML חדש — מסומן במסגרת קווקווית עד שנוסיף עיצוב
📄 עם יתרונות מעוצבים + תהליך חדש בלבד ב-HTML

יתרונות קצרים

  • פריט.

איך זה עובד?

  1. נרשמים דרך הטופס.
  2. מקבלים קישור לתרגול.
  3. בונים דף נחיתה אישי.
כלל פשוט: ul לרשימת נקודות, ol לצעדים לפי סדר.

מה מוסיפים ל-css/style.css? אזור התהליך

מפרידים ויזואלית את שלושת השלבים 
.process-section {
  margin-top: 24px;
  padding: 20px;
  border-radius: 16px;
  background-color: #f8fafc;
  border: 1px dashed #cbd5e1;
}

.process-section ol {
  margin: 0;
  padding-right: 20px;
}
אחרי ההוספה ל-style.css
📄 יתרונות + תהליך מעוצב

יתרון

  • פריט דוגמה.

איך זה עובד?

  1. צעד ראשון.
  2. צעד שני.
  3. צעד שלישי.

Footer: סגירת הדף (index.html)

בדיוק מתחת ל-</main> 
    <footer class="site-footer">
      <p>© 2026 PrimeLanding. תוצר התרגול לשיעור 2 בקורס.</p>
      <a href="#hero">חזרה לראש הדף</a>
    </footer>
רגע ההוספה — עדיין בלי CSS ל-Footer
📄 גוף הדף + Footer טרי

תהליך

  1. א
  2. ב
טיפ: הקישור href="#hero" עובד בדיוק כמו בתפריט העליון.

מה מוסיפים ל-css/style.css? Footer קריא ונקי

מקבעים שהסיום יירגע ולא יישבטח על האזורים מעל 
.site-footer {
  margin-top: 40px;
  padding-top: 16px;
  font-size: 14px;
  color: #64748b;
  border-top: 1px solid #e5e7eb;
}

.site-footer a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}
אחרי שמוסיפים את החוקים
📄 Footer מעוצב

יתרון

  • שורה.

טפסים: למה זה חשוב ל-JavaScript?

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

המשתמש כותב שם ואימייל
↓
HTML מחזיק את השדות
↓
JavaScript יתפוס את הערכים בהמשך

דגש קריטי

כדי לתפוס שדה ב-JS בקלות, ניתן לו id ייחודי וברור.

מקטע ההרשמה (index.html)

בתוך <main> בסוף — זהה ל-landing-page/index.html 
      <section id="signup" class="signup-section">
        <h2>הצטרפו לרשימת העדכונים</h2>
        <p class="signup-desc">
          השאירו פרטים — בשיעורי JavaScript נחבר התנהגות אמיתית לשדות האלה.
        </p>

        <form id="signupForm" class="signup-form">
          <label for="fullName">שם מלא</label>
          <input
            id="fullName"
            name="fullName"
            type="text"
            autocomplete="name"
            placeholder="לדוגמה: דנה כהן"
          >

          <label for="email">אימייל</label>
          <input
            id="email"
            name="email"
            type="email"
            autocomplete="email"
            placeholder="name@example.com"
          >

          <button id="submitButton" type="submit">שליחה</button>
        </form>
      </section>
תצוגה לדוגמה (מזהי השדות שונים כדי לא לכפול מזהים בדף המצגת)
📄 טופס מהפרויקט

© 2026 PrimeLanding. תוצר התרגול לשיעור 2 בקורס.

מה מקצועי כאן?

שילוב for ו-id זה לזה, autocomplete, ובחירת type נכונה.

label ו-input: הקשר ביניהם

ה-label מסביר למשתמש מה צריך להקליד. הקישור בין label ל-input נוצר בעזרת for ו-id.

          <label for="email">אימייל</label>
          <input
            id="email"
            name="email"
            type="email"
            autocomplete="email"
            placeholder="name@example.com"
          >

for="email"

ה-label מצביע על השדה.

id="email"

השדה מקבל מזהה ייחודי בדף.

סוגי input שנשתמש בהם

type="text"

מתאים לשם, עיר, תפקיד או כל טקסט כללי.

          <input
            id="fullName"
            name="fullName"
            type="text"
            autocomplete="name"
            placeholder="לדוגמה: דנה כהן"
          >

type="email"

מתאים לכתובת אימייל ונותן לדפדפן בדיקה בסיסית.

          <input
            id="email"
            name="email"
            type="email"
            autocomplete="email"
            placeholder="name@example.com"
          >
לא קופצים רחוק מדי: בשיעור הזה מספיקים טקסט ואימייל. המטרה היא לבנות בסיס טוב.

id לעומת class

id

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

class

  • אפשר להשתמש באותה class על כמה אלמנטים.
  • מתאים בעיקר לעיצוב ולסידור.
  • עוזר לתת שמות לתפקידים ויזואליים.

כלל לקורס

שדות טופס חשובים מקבלים id. אזורים ועיצובים חוזרים מקבלים class.

טופס הרשמה מלא (index.html)

זהה ל-landing-page/index.html 
      <section id="signup" class="signup-section">
        <h2>הצטרפו לרשימת העדכונים</h2>
        <p class="signup-desc">
          השאירו פרטים — בשיעורי JavaScript נחבר התנהגות אמיתית לשדות האלה.
        </p>

        <form id="signupForm" class="signup-form">
          <label for="fullName">שם מלא</label>
          <input
            id="fullName"
            name="fullName"
            type="text"
            autocomplete="name"
            placeholder="לדוגמה: דנה כהן"
          >

          <label for="email">אימייל</label>
          <input
            id="email"
            name="email"
            type="email"
            autocomplete="email"
            placeholder="name@example.com"
          >

          <button id="submitButton" type="submit">שליחה</button>
        </form>
      </section>
המשך: בשקופית הבאה חוקי עיצוב הטופס ב-css/style.css, ואחריה התוכן המלא של js/script.js כמו בפרויקט.
HTML בלבד בתצוגת הדף — עדיין בלי מאגר לעיצוב הטופס
📄 טופס מלא מהקוד

מה מוסיפים ל-css/style.css? טופס נקי לפני JavaScript

ממקמים שדות אחד מתחת לשני ומדגישים את הכפתור 
.signup-section {
  margin-top: 32px;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid #d1d5db;
  background-color: #fdfdff;
}

.signup-section h2 {
  margin: 0 0 8px;
}

.signup-desc {
  margin: 0 0 16px;
  color: #64748b;
  font-size: 15px;
}

.signup-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.signup-form input {
  width: 100%;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  font-family: inherit;
  font-size: 16px;
}

.signup-form button {
  margin-top: 4px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 0;
  font-weight: 700;
  color: #ffffff;
  background-color: #1d4ed8;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
}

.signup-form button:hover {
  background-color: #1e40af;
}
אורח חיים עקבי לפני שנוסיף script.js
📄 טופס עם CSS מלא בשיעור 2

סימולציה קצרה

  • שורת יתרון.

js/script.js בפרויקט

בסוף landing-page/index.html מצורף הקובץ עם <script src="js/script.js"></script>.

קובץ js/script.js — זהה לפרויקט 
const form = document.getElementById("signupForm");
if (form) {
  form.addEventListener("submit", function (event) {
    event.preventDefault();
    const nameInput = document.getElementById("fullName");
    const emailInput = document.getElementById("email");
    const name = nameInput ? nameInput.value.trim() : "";
    const email = emailInput ? emailInput.value.trim() : "";
    if (!name || !email) {
      alert("נא למלא שם ואימייל — בהמשך נלמד לבדוק את זה בצורה מקצועית יותר.");
      return;
    }
    alert("תודה " + name + "! בשיעורי JavaScript נחבר שליחה אמיתית.");
  });
}

תצוגה מקומית: הסדר המלא בסוף שיעור 2

כאן מופיע הצירוף של כל מה שבנינו בצורה מכווצת בתוך המצגת. בפרויקט האמיתי אותן שכבות מתווספות בסדר ברור: כותרת → Hero → תמונה → יתרונות → תהליך → Footer → הרשמה.

דף הנחיתה המלא בפרויקט

המצגת הזאת לא מחליפה תצוגה של דף אמיתי. לחצו למטה על הקישור — ייפתח landing-page/index.html בלשונית חדשה, עם קבצים נפרדים ל-HTML (index.html) ול-CSS (css/style.css), וכל קשר ל-JavaScript בקובץ js/script.js בשלב דמו בלבד.

פתיחת דף הנחיתה המלא בתצוגת דפדפן

📄 מאותן שכבות — גרסה מכווצת בתוך המצגת (ללא קובץ CSS נפרד)

פרויקט HTML ראשון

דף נחיתה שמוכן לשלב הבא

נבנה מבנה ברור עם header, main, section ו-footer…

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

למה ללמוד דרך פרויקט?

כל שורת קוד מתחברת לתוצאה שאפשר לראות ב‑Live Server.

  • רואים תוצאה אמיתית בדפדפן.
  • מבינים למה כל תגית קיימת.
  • מתכוננים לעבודה עם JavaScript.

איך זה עובד?

  1. נרשמים דרך הטופס.
  2. מקבלים קישור לתרגול.
  3. בונים דף נחיתה אישי.

תרגול בכיתה

משימה 1 - שלד סמנטי

  • צרו header, main ו-footer.
  • בתוך main צרו שלושה section.
  • תנו לכל section שם class ברור.

משימה 2 - תוכן וטופס

  • הוסיפו תפריט עם שלושה קישורים.
  • הוסיפו Hero עם כותרת, פסקה ותמונה.
  • הוסיפו טופס עם שם, אימייל וכפתור.

בדיקת איכות לפני סיום

1. האם יש main אחד בדף?

כן. בדרך כלל לדף יש אזור תוכן מרכזי אחד.

2. האם לכל input יש label?

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

3. האם לכל שדה בטופס יש id ברור?

כן. בהמשך נשתמש ב-id כדי לקרוא את הערכים עם JavaScript.

סיכום ושיעורי בית

מה למדנו?

  • מבנה סמנטי לדף.
  • תפריט, Hero, תמונה, יתרונות, תהליך, Footer.
  • טופס עם label ו-id.
  • מתרגלים מתי כותבים רק HTML ומתי מתווספת שכבת CSS ראשונית (css/style.css).

שיעורי בית

  • להשלים דף נחיתה עם כל האזורים.
  • לגרום למצבי "רק HTML" ו"עם מה שכיסינו בשיעור 2 של CSS".
  • לוודא שכל input מקבל label ו-id משמעותי.
  • בשיעור 3 צריכים הרחבות עיצוב — תשמשו בשיעור 2 בסיס הגיוני.

בשיעור הבא

  • העשרה ובידוד של כל מה שלמדנו כאן מתוך style.css.
  • Box Model, צבעים וגרידים מתקדמים יותר.

סיום שיעור 2

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