מדריך HTML – הקדמה

דפדפנים יודעים להציג אתרים הבנויים בשפת HTML (ראשי תיבות של Hyper Text Markup Language). שפת HTML מגדירה את מבנה ותוכן הדפים באינטרנט, והיא הדבר הראשון שעל בוני אתרים מתחילים ללמוד ולהכיר.

איך נראה קוד HTML?

כדי לראות את קוד ה- HTML של דף באינטרנט, נגלוש לאתר כלשהו, למשל לאתר https://www.webmaster.org.il, נלחץ על הכפתור הימני של העכבר ונבחר באפשרות View Source (בעברית – הצג קוד מקור):

מדריך HTML

בחלון שיפתח, נוכל לראות את קוד ה- HTML של הדף הראשי של אתר Webmaster.org.il:

מדריך HTML

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

מבנה כללי של דףHTML:

<!DOCTYPE html>
<html>
    <head>
        <title>כותרת הדף</title>
    </head>
    <body>
    זהו גוף המסמך. כאן יבוא כל הטקסט שנרצה להציג בדפדפן.
    </body>
</html>

עורך HTML

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

 

התקנת WebMatrix – עורך HTML

כדי לעבוד עם WebMatrix נדרשת מערכת הפעלה Windows XP או גירסא מתקדמת יותר.

כדי להוריד את WebMatrix בצורה המהירה ביותר ובחינם, לחצו על כפתור התקנה:

מדריך HTML

הלחיצה תוביל אתכם לאתר ההורדה של WebMatrix העושה שימוש ב- Web Platform Installer – כלי שהופך את תהליך ההתקנה של מגוון תוכנות לבניית אתרים למשהו מהיר ביותר. אם עדיין לא התקנתם את ה- Web Platform Installer, לחצו כל הכפתור הירוק הגדול:

מדריך HTML

ההתקנה של Web Platform Installer תסתיים מהר מאד, ולאחריה יופיע מסך ההתקנה של WebMatrix:

מדריך HTML

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

מדריך HTML

אשרו את ההתקנה ע”י לחיצה על הכפתור I Accept ותהליך ההתקנה יתחיל. התהליך עשוי להמשך מספר דקות, אך לא דורש התערבות כלשהי.

מדריך HTML

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

מדריך HTML

לחצו על Finish  כדי לסיים את ההתקנה של WebMatrix.

נפעיל את  WebMatrix כדי להתחיל ללמוד לבנות אתרים.

מדריך HTML

בניית אתר פשוט ב- HTML

1. במסך הפתיחה של WebMatrix נלחץ על האפשרות Templates ליצירת אתר המבוסס על תבנית מוכנה מראש.

מדריך HTML

2. במסך יצירת האתר על בסיס תבנית, נבחר בתבנית מסוג HTML מסוג Empty Site, נקרא לה HelloHTML ונלחץ על Next.

מדריך HTML

3. ‏ WebMatrix יצור את האתר החדש ויפתח אותו לתחילת עבודה.

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

מדריך HTML

לאחר הבחירה יופיע עץ הקבצים של האתר ואפשרויות נוספות לעבודה עם קבצים.

מדריך HTML

כאתר כרגע 3 קבצים:

  • favicon.ico – אייקון המסמל את האתר, כפי שניתן לראות באתרים רבים בשורת הכתובת. למשל:

מדריך HTML

  • robots.txt – קובץ העוזר למנועי חיפוש להכיר את האתר ואת הדפים שבו.
  • index.html – קובץ ה- HTML המכיל את תוכן הדף הראשי של האתר.

5. נלחץ לחיצה כפולה על הקובץ index.html ברשימת הקבצים באתר, כדי לפתוח אותו לעריכה.

מדריך HTML

 

6. ערוך את תוכן קובץ ה- HTML והוסף את ה- HTML המודגש לתוך הדף.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
        <h1>Hello World Page</h1>
        <p>Hello World!</p>
    </body>
</html>

7. בסרגל הגישה המהירה לחץ על Save.מדריך HTML

 

8. הצג את הדף שכתבת. בסרגל הכלים העליון לחץ על הכפתור Run.

מדריך HTML

9. WebMatrix מפעיל שרת Web (מסוג IIS Express) שאפשר להשתמש בו כדי לבדוק את הדפים במחשב שלך. הדף היצרת יוצג בדפדפן.

מדריך HTML

ברכות! יצרת את אתר האינטרנט הראשון שלך!

טקסט בעברית

פעמים רבות נרצה שתוכן האתר שלנו יהיה בעברית, ויהיה מיושר מימין לשמאל. כדי לעשות זאת:

1. שנה את תוכן הדף כך שיכיל טקסט בעברית. למשל:

<!DOCTYPE html>
<html lang="he">
    <head>
        <meta charset="utf-8" />
        <title>דף בעברית</title>
    </head>
    <body>
        <h1>כותרת ראשית</h1>
        <p>גוף הטקסט</p>
    </body>
</html>

2. הוסף לדף ה- HTML הגדרת כיוון לטקסט מימין לשמאל:

<!DOCTYPE html>
<html lang="he">
    <head>
        <meta charset="utf-8" />
        <title>דף בעברית</title>
    </head>
    <body dir="rtl">
        <h1>כותרת ראשית</h1>
        <p>גוף הטקסט</p>
    </body>
</html>

3. שמור את הקובץ והצג אותו בדפדפן, כדי לקבל את התוצאה הבאה:

מדריך HTML

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

תגיות: , ,

גיא בורשטיין

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

תגובות בפייסבוק