המדריך הבסיסי ל-HTML – חלק א' – הדף הראשון שלי

הזמינו אותי לכוס קפה
buy me coffee

HTML היא שפת התגיות אשר מהווה את הבסיס לרשת האינטרנט. במאמר זה ניצור את מסמך ה-HTML הראשון שלנו ונלמד את בסיס השפה.

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

HTML – כללי התחביר הבסיסי

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

  • תגיות HTML נכתבות באנגלית באותיות קטנות בלבד – (lowercase)
  • יש לסגור כל תגית שנפתחה עם תגית סגירה – </>
  • סגירת תגיות תעשה בסדר בו הן נפתחו – <H1> <H1/>
  • תגיות ללא תגית סגירה יסגרו ע"י צירוף של תו רווח לפני הקו הנטוי – </ br>

מסמך HTML בצורתו הבסיסית מורכב מהאזורים- Head, Body:

אזור ה-<Head>

אזור ה-Head יכיל תגיות אשר מסייעות בהגדרת המסמך וטעינת משאבים:

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

בתגיות הפסקה וגודל הכותרת, מנועי חיפוש נעזרים על מנת להבדיל ולחפש טקסט בקלות.
בין תגיות אלו יהיה ניתן למצוא את תגית הפסקה – <p>, תגיות גודל הכותרת <h4>, <h3>, <h2>, <h1>, תגית הכותרת <title> ועוד.
שימו לב למסמך הבא:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello, World!</title>
    <h1>this is exemple of basic HTML Document</h1>
    <h2>this is exemple of basic HTML Document</h2>
    <h3>this is exemple of basic HTML Document</h3>
    <h4>this is exemple of basic HTML Document</h4>
    <h5>this is exemple of basic HTML Document</h5>
    <p>Hello World! this is paragraph</p>
</head>
<body>
</body>
</html>

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

HTML Exemple
HTML Exemple

שימו לב לתגית <!DOCTYPE html> בשורה 1. תגית זו מגדירה  את סוג הקוד שבעמוד (הכרחי ב-HTML תיקני), כאשר ב-XHTML יש לו 3 סוגים מוגדרים:

  • Strict
  • Transitional
  • Frameset

כל אחד משלושת הסוגים האלה הוא DTD – Document Type Definition. DTD הוא אוסף חוקים שעל-פיהם רץ העמוד. בתוכו מוגדר חוקי ה-XHTML (אוסף חוקים שהקוד צריך להיות כתוב לפיהם):

XHTML 1.0 Strict

נשתמש ב-strict רק כשנרצה קוד נקי לחלוטין המשתמש ב-CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
XHTML 1.0 Transitional

השימוש ב-Transitional נעשה בעיקר במעבר בין HTML ל-XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

במצב זה אנו לא מחויבים להשתמש ב-CSS, ובכך האתר שלנו יכול לתמוך גם בדפדפנים שלא תומכים ב- CSS.

XHTML 1.0 Frameset

בעמוד בו אנחנו רק מחלקים את הדפדפן לכמה חלקים באמצעות frameset ואין לנו קוד מעבר לכך, נשתמש ב-"Frameset":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 

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

אזור ה-<Body>

אזור ה-Body יכיל תוכן אשר יוצג למשתמש בדפדפן:

  • כותרת המסמך
  • פסקאות
  • תמונות
  • קישורים
  • רשימות
  • טבלאות
  • טפסים
תגיות ומאפיינים

גוף המסמך יכיל את התוכן שברצוננו להציג למשתמש. בניגוד לכותר המסמך, כל מה שגוף המסמך יכיל, יוצג למשתמש ע"י הדפדפן.
גוף המסמך מצוין באמצעות תגית <body>:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello, World!</title>
</head>
<body>
    <h1>כותרת</h1>
    <p>Hello World! this is paragraph.
        everything that we want the user to expirience we can put in here:
    </p>
    <ul>
        <li>כותרת המסמך</li>
        <li>פסקאות</li>
        <li>תמונות</li>
        <li>קישורים</li>
        <li>רשימות</li>
        <li>טבלאות</li>
        <li>טפסים</li>
   </ul>
</body>
</html> 
HTML Exemple
HTML Exemple

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

רוצים לשתף את המדריך?

אהבתכם את המדריך? פתר לכם תקלה?

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

כתיבת תגובה

אהבתכם את המדריך? פתר לכם תקלה? הזמינו את כותב המדריך לכוס קפה

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