בניית אתר אינטרנט בסיסי בשפת HTML

בניית אתר אינטרנט בסיסי בשפת HTML

  • פרסומת

כדי לבנות אתר, ראשית צריך להבין ממה מורכב אתר: מה עומד מאחורי כל התמונות, הכותרות, הפסקאות, הטבלאות, הלחצנים וכל האלמנטים המרכיבים אתר ממוצע? התשובה היא קוד. מאחורי הקלעים של כל אתר תמצאו שורות ארוכות של קוד הכתוב לעיתים ביותר משפת תכנות אחת ומשתלב ביחד כדי ליצור את הדף שאתם צופים בו. קוד זה אחראי על כל פרט באתר: על הצבעים, הצורות, המימדים ועוד ועוד. כן, קראתם נכון: אתר אינטרנט הוא למעשה קבוצה של מילים, המסודרות במבנה מסויים על פי הגדרות של שפה מסויימת (כמו HTML לדוגמה). אפילו תמונה, שהיא דבר ויזואלי לחלוטין, מורכבת מאלפי אותיות המגדירות את הצבע של כל פיקסל, על פי שפה מסויימת (כמו GIF, JPG, BMP, PNG וכו').

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

מה צריך בשביל לבנות דף HTML?

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

תוכנות מומלצות לבניית אתרים

  • Notepad++ תוכנה פשוטה לכתיבת קוד, נוחה במיוחד אך פועלת על Windows בלבד
  • TextWrangler – תוכנה לכתיבה ועריכת קוד, פועלת על OS X בלבד
  • Netbeans IDE – סביבת עבודה אינטגרלית מלאה לפיתוח תוכנה. ניתן להתקין בה את התוסף Netbeans Connector לסנכרון בינה לבין הדפדפן
  • Eclipse IDE – המקבילה של הנ״ל
  • Atom – תוכנה עוצמתית לכתיבת קוד, בייחוד בשל קהילת המפתחים הגדולה שתומכת בה, וכמות התוספים העצומה שמאפשרת לכם להתאים את סביבת העבודה לצרכים שלכם

בניית דף עם פסקה וכותרת

דף בסיסי ב – HTML מורכב משני חלקים עיקריים: ראש המסמך וגוף המסמך. גוף המסמך מכיל את תוכן המסמך, וראש המסמך מכיל הגדרות שונות לגבי אותו מסמך.
ראש המסמך נמצא בין תגיות ה- head ומכיל מידע לגבי המסמך עצמו, כמו סוג שפת הקידוד, מילות מפתח ותגיות מטא למיניהן, כותרת הדף וכו'.
גם צירוף של קבצים חיצוניים כגון CSS ו- JavaScript מתבצע בראש הדף.
במילים אחרות, ראש המסמך מכיל את הגדרות המסמך.
גוף המסמך נמצא בין תגיות ה- body ומכיל את כל תוכן המסמך: פסקאות, כותרות, תמונות או כל מדיה אחרת.

יצירת המסמך

ראשית, פתחו דף חדש בכתבן, ושמרו אותו בשם: basic_page.html, וכיתבו בו את הקוד הבא:

<html>
    <head>
    </head>
    <body>
        <h1>This is a heading</h1>
        <p>This is a paragraph</p>
    </body>
</html>

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

יצירת דף אינטרנט בעברית

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

<html>
    <head>
    </head>
    <body>
        <h1>זוהי כותרת הדף</h1>
        <p>זוהי פסקה בדף</p>
    </body>
</html>

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

דף אינטרנט עם תוכן בעברית ללא הגדרת תווים תואמת

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

<!DOCTYPE html>
<html dir="rtl" lang="he-IL">
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <h1>זוהי כותרת הדף</h1>
        <p>זוהי פסקה בדף</p>
    </body>
</html>

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

דף אינטרנט בסיסי עם תוכן בעברית הכולל הגדרות תווים

בכך למעשה סיימנו ליצור את דף האינטרנט הראשון שלנו. השלב הבא הוא ללמוד איך לעצב את המסמך שלנו בעזרת שפה הנקראת CSS.