1.1 - מבנה אתר - הרצאה

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

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

  2. העור (CSS) –
    ה-CSS הוא כמו העור של האתר. בדיוק כמו שהעור מכסה את הגוף ונותן לו את המראה החיצוני, ה-CSS אחראי לעיצוב האתר: צבעים, גופנים, פריסות, מרווחים, גבולות – כל אלה מביאים את האתר לעולם האמיתי ומספקים לו את המראה הויזואלי הנכון והנעים. אם האתר היה רק HTML, הוא היה נראה "שלד" ולא מושך לעין.

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

אז בעצם:

  • HTML = שלד (מעניק את המבנה הבסיסי של הדף)
  • CSS = עור (מעצב את המראה החיצוני ומקנה לאתר את הצורה הויזואלית)
  • JavaScript = שרירים (הופך את האתר לדינמי ואינטראקטיבי)

כך האתר בנוי מכל החלקים, כל אחד תורם את חלקו לשלם המלא!

איך זה נראה בפועל?
כך יראה אתר רק עם HTML
צילום מסך: אתר בסיסי עם HTML בלבד - כותרת "ברוכים הבאים לאתר שלי!", טקסט וקישור, ללא עיצוב
והנה הקוד של האתר
בתוך הקוד יש הרבה דברים לא מובנים שנעבור עליהם בעתיד אבל לבינתיים חשוב להבין שHTML היא שפת תגיות (להלן תגית <head>) וכל מה שנרצה לשים באתר יהיה בתוך התגיות של הHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Simple Site</title>
</head>
<body>
    <header>
        <h1>Welcome to my site!</h1>
    </header>

    <main>
        <p>This is a simple site based on HTML only.</p>
        <a href="#">Link to somewhere</a>
    </main>

    <footer>
        <p>© 2025 All rights reserved</p>
    </footer>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Site</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
        }

        main {
            padding: 20px;
            text-align: center;
        }

        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
            position: fixed;
            width: 100%;
            bottom: 0;
        }

        a {
            color: #4CAF50;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <header>
        <h1>Welcome to my site!</h1>
    </header>

    <main>
        <p>This is a site with simple styling using CSS.</p>
        <a href="#">Link to somewhere</a>
    </main>

    <footer>
        <p>© 2025 All rights reserved</p>
    </footer>
</body>
</html>

כך יראה אתר עם HTML ו CSS ו JS
ופה כבר האתר מקבל פונקציאונליות
צילום מסך: אותו אתר עם HTML, CSS ו-JavaScript, מציג כפתור "לחץ עליי" אינטראקטיבי
האתר מציג כפתור ואחרי לחיצת הכפתור אנחנו נראה את הדבר הבא
צילום מסך: לאחר לחיצה על הכפתור, מופיעה הודעה ירוקה "ברכת שלום! תודה שלחצת על הכפתור."
וכמובן בקוד למטה ניתן לראות את התגית SCRIPT המייצגת את קוד הJAVASCRIPT בקוד

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Site</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
        }

        main {
            padding: 20px;
            text-align: center;
        }

        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
            position: fixed;
            width: 100%;
            bottom: 0;
        }

        a {
            color: #4CAF50;
            text-decoration: none;
        }

        #message {
            margin-top: 20px;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            display: none;
        }
    </style>
</head>
<body>
    <header>
        <h1>Welcome to my site!</h1>
    </header>

    <main>
        <p>This is an interactive site with JavaScript.</p>
        <button onclick="showMessage()">Click me</button>
        <div id="message">Greetings! Thanks for clicking the button.</div>
    </main>

    <footer>
        <p>© 2025 All rights reserved</p>
    </footer>

    <script>
        function showMessage() {
            const message = document.getElementById('message');
            message.style.display = 'block';
        }
    </script>
</body>
</html>