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

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

התבנית הבסיסית:

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

זה בדרך כלל נראה משהו בסגנון הזה:

<!DOCTYPE html> <!-- הגדרה שמבטיחה שהדפדפן יבין את הגרסה הזו של HTML -->
<html lang="he"> <!-- תגית תחילת הדף, כולל הגדרת השפה שבה הדף כתוב -->

<head>
    <meta charset="UTF-8"> <!-- הגדרה של קידוד התווים של המסמך -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- הפיכת האתר לרספונסיבי -->
    <title>כותרת הדף</title> <!-- הכותרת שמופיעה בלשונית הדפדפן -->
    <!-- כאן ניתן להוסיף גם קישורים לקבצי CSS, JavaScript, וכדומה -->
</head>

<body>
    <!-- כאן מתחיל התוכן של האתר, כל מה שמופיע למשתמש בדפדפן -->
    <header>...</header>
    <nav>...</nav>
    <main>...</main>
    <footer>...</footer>
</body>

</html>

בקצרה:

  • <!DOCTYPE html>: מגדיר את המסמך כמסמך HTML5.
  • <html>: תגית השורש של המסמך.
  • <head>: כולל מידע על המסמך, אך לא תוכן שמיועד להצגה למשתמש. כולל הגדרות כמו קידוד התווים, קישורים לקבצים חיצוניים (CSS, JavaScript), כותרת הדף ועוד.
  • <body>: מכיל את התוכן המיועד להצגה למשתמש. כל האלמנטים שמוצגים בדפדפן (כמו טקסטים, תמונות, קישורים ועוד) מוגדרים כאן.

בהינתן התבנית הבסיסית, ניתן להוסיף למסמך אלמנטים ותוכן לפי הצורך.

כותרות ב- HTML

ב-HTML ישנן שש כותרות (h1 עד h6), כאשר h1 היא הכותרת הגדולה ביותר ו-h6 היא הקטנה ביותר.

<h4>כותרת מספר 4</h1>
<h5>כותרת מספר 5</h2>
...
<h6>כותרת מספר 6</h6>
 

כך הן נראות:

כותרת מספר 4

כותרת מספר 3

...

כותרת מספר 6

 

טבלאות

טבלאות מורכבות מכמה אלמנטים: table להגדרת הטבלה, tr לשורות, th לתאי הכותרת ו-td לתאים.

<table>
   <tr>
      <th>שם</th>
      <th>גיל</th>
   </tr>
   <tr>
      <td>ישראל</td>
      <td>30</td>
   </tr>
</table>
 
שם גיל
ישראל 30

 

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

מגדירים את הרשימה באמצעות תגית ol, ואת האלמנטים באמצעות תגית li

<ol>
  <li>פריט ראשון</li>
  <li>פריט שני</li>
</ol>
 
  1. פריט ראשון
  2. פריט שני

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

מגדירים את הרשימה באמצעות תגית ul, ואת האלמנטים באמצעות תגית li

<ul>
  <li>פריט ראשון</li>
  <li>פריט שני</li>
</ul>
 
  • פריט ראשון
  • פריט שני

הצגת תמונות ב-HTML

תגית ה-<img> היא אחת התגיות המרכזיות ב-HTML והיא משמשת להצגת תמונות בדף אינטרנט. תמונות הן חלק בלתי נפרד ממרבית האתרים - הן יכולות לשפר את מראה האתר ואת חווית המשתמש, להציג, להמחיש את התוכן ולשפר את האינטואיטיביות.

כך משתמשים בתגית ה- <img> להוספת תמונה:

<img src="נתיב לתמונה" alt="תיאור התמונה">

ה- src משמש להגדת מיקום קובץ התמונה וה- alt משמש להגדרת טקסט אלטרנטיבי.

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

טפסים

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

למה טפסים משמש ולמה השימוש בהם נפוץ?

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

השרת:

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

מבנה של Form:

המבנה הבסיסי של Form הוא:

<form action="כתובת_השרת" method="post">
    <!-- אלמנטים של הטופס, כמו שדות קלט, כפתורים וכו' -->
    <input type="text" name="username" placeholder="שם משתמש">
    <input type="password" name="password" placeholder="סיסמה">
    <input type="submit" value="שלח">
</form>

טופס כזה ייראה כך:

 

שינוי אחרון: יום חמישי, 12 אוקטובר 2023, 7:54 PM