Site Logo
כניסה

דף האינטרנט הראשון שלי

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

תוכן עניינים

  1. סביבת העבודה
  2. יצירת קובץ ראשון index.html
  3. הוספת עיצוב עם קובץ CSS
  4. הוספת קובץ JavaScript
  5. סיכום: דף האינטרנט הראשון שלי

1. סביבת העבודה

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

את הקבצים נכתוב בעורך טקסט שנקרא Visual Studio Code. האמת שיש די הרבה עורכי טקסט וסביבות עבודה לפיתוח אינטרנט. הבחירה שלי לקורס ב Visual Studio Code היא פשוט בגלל העלות (הוא בחינם) ובגלל שזו סביבה די פופולרית גם בתעשיה.

בשביל להתקין את Visual Studio Code נכנס לאתר שלהם בקישור: https://code.visualstudio.com/download

נבחר את ה Installer למערכת ההפעלה שלנו, נוריד ונתקין.

במהלך ההתקנה סמנו וי ליד "צור קיצור דרך משולחן העבודה" כדי שיהיה לכם קל למצוא את VS Code אחרי שההתקנה מסתיימת, ובסיום ההתקנה הפעילו את התוכנה. בחרו File -> Open ובחרו תיקיה חדשה וזו תהיה תיקיית הפרויקט שלנו.

2. יצירת קובץ ראשון index.html

הטכנולוגיה הראשונה בדף האינטרנט שלנו נקראת HTML. זהו הבסיס לדף והוא שטוען את כל הקבצים האחרים בעמוד. צרו קובץ בשם index.html ובתוכו כתבו את התוכן הבא:

<!DOCTYPE html>
<html>

<head>
    <title>FrontEnd Course</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <header>
        <h1>FrontEnd Development Course</h1>
        <h2>Learn HTML, CSS and JavaScript like a boss</h2>
    </header>
    <div class="content">
        <div>
            <h3>Hi! And welcome to ToCode front end course. In this course you'll learn:</h3>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
                <li>Many other cool stuff</li>
            </ul>
        </div>
        <p>
            And visit us at: <a href="https://www.tocode.co.il">ToCode Website</a>
        </p>
    </div>
    </body>
</html>

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

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

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

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

<a href="https://www.tocode.co.il">ToCode Website</a>

המילה href נקראת Attribute והיא מציינת משהו נוסף לגבי התגית. לכל תגית יש Attributes אחרים, וכל Attribute יכול לקבל ערכים אחרים. במקרה של תגית a (נקראת עוגן או באנגלית Anchor) התגית יכולה לייצג קישור לדף אחר, והמאפיין href מכיל את כתובת הקישור, כלומר לאיזה דף הדפדפן צריך לעבור כשלוחצים על הקישור. נסו את זה: לחצו על הקישור ותראו שאתם מגיעים לאתר tocode.

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

3. הוספת עיצוב עם קובץ CSS

הטכנולוגיה השניה שתלווה אותנו בתור מפתחי Front End נקראת CSS שזה קיצור ל Cascading Style Sheets, או בעברית גיליונות סגנון מדורגים. המטרה של CSS היא להגדיר את המראה של דף האינטרנט וזה כולל המון המון דברים: הצבעים, הפונטים, הגדלים, המיקום המדויק של כל אלמנט, אנימציות ואפילו איך העמוד ישתנה כשעוברים בין מכשירים או משנים את גודל חלון הדפדפן.

פיתחו קובץ חדש בשם style.css וכתבו בתוכו את התוכן הבא:

body, html { margin: 0; padding: 0 }

header {
    background: url(https://loremflickr.com/960/240);
    padding: 10px;
}

h1, h2 {
    text-align: center;
    color: white;
}

.content {
    padding: 10px;
}

h3 {
    font-style: italic;
    font-weight: normal;
    color: #6A4571;
    font-size: 140%;
}

ul {
    column-count: 2;
    max-width: 30vw;
}

li {
    margin: 10px;
}

לפני שנוכל לראות את ההשפעה על העמוד נחזור ל HTML ונעדכן את חלק ה head של העמוד כדי שיטען גם את קובץ ה CSS:

<head>
    <title>FrontEnd Course</title>
    <link rel="stylesheet" href="style.css" />
</head>

פיתחו מחדש את קובץ ה HTML בדפדפן כדי לראות את ההשפעה.

קובץ CSS בנוי כאוסף של כללים, כאשר כל כלל מורכב מחלק ראשון שנקרא Selector וחלק שני שנקרא Properties. נסתכל בכלל הבא לדוגמא:

h1, h2 {
    text-align: center;
    color: white;
}

ה Selector שלו הוא המשפט h1, h2. התרגום של זה לעברית אומר שהכלל משפיע על כל האלמנטים שמתאימים לתגית h1 או לתגית h2. בשיעורים הבאים על CSS נלמד עוד המון Selectors כאלה.

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

בתור מפתחי Front End אנחנו נכתוב הרבה כללי CSS כי הם הדברים שקובעים בסוף איך יראה העמוד שלנו.

בואו נראה דוגמא להשפעה של CSS על אתר אמיתי. התקנתי אצלי על הדפדפן כלי פיתוח שנקרא Web Developer Plugin (אתם יכולים גם למצוא אותו בחנות של כרום). כלי זה מאפשר בלחיצת כפתור לבטל את כל כללי ה CSS של אתר מסוים. נכנס עכשיו לאתר וואלה ונבטל את כל כללי ה CSS. שימו לב להבדל וכך להשפעה של CSS על צורת העמוד.

4. הוספת קובץ JavaScript

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

הוסיפו קובץ חדש לפרויקט בשם main.js ובתוכו כתבו את התוכן הבא:

const header = document.querySelector('header');
let pos = 0;

function step() {
    pos -= 1;
    header.style.backgroundPositionX = `${pos}px`;
    requestAnimationFrame(step);
}

step();

לאחר מכן חזרו לקובץ ה HTML והוסיפו את השורה הבאה בתור השורה האחרונה של תגית ה body:

<script src="main.js"></script>

חיזרו לדף ותוכלו לראות את הרקע של הכותרת זז באנימציה.

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

בדפדפן אנחנו יכולים בשביל הבדיקה לנטרל את ה JavaScript וכך לראות את האפקט שלו על אתרים שונים. בתוך אתר לחצו כפתור ימני, ואז Inspect Element, לאחר מכן לחצו על Ctrl + Shift + P ובתיבה שתיפתח כתבו JavaScript. יופיע לכם תפריט שיאפשר לכם בלחיצת כפתור לנטרל את ה JavaScript. לחצו עליו ולאחר מכן גלשו לאתר לדוגמא וואלה, ותוכלו לראות איך האתר עובד בלי JavaScript. המשיכו לעוד כמה אתרים כדי לראות מה בדיוק כל אתר עושה עם JavaScript.

5. סיכום: דף האינטרנט הראשון שלי

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

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

תיקיית הדוגמאות המלאה זמינה בקישור:
https://github.com/tocodeil/frontend-demos

או להורדה כקובץ זיפ:
https://github.com/tocodeil/frontend-demos/archive/master.zip