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

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

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

אז בעצם:

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

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

איך זה נראה בפועל?
כך יראה אתר רק עם HTML
Pasted image 20250129185550.png
והנה הקוד של האתר
בתוך הקוד יש הרבה דברים לא מובנים שנעבור עליהם בעתיד אבל לבינתיים חשוב להבין שHTML היא שפת תגיות (להלן תגית <head>) וכל מה שנרצה לשים באתר יהיה בתוך התגיות של הHTML

<!DOCTYPE html>
<html lang="he">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>אתר פשוט</title>
</head>
<body>
    <header>
        <h1>ברוכים הבאים לאתר שלי!</h1>
    </header>

    <main>
        <p>זהו אתר פשוט המבוסס על HTML בלבד.</p>
        <a href="#">קישור לאנשהו</a>
    </main>

    <footer>
        <p>© 2025 כל הזכויות שמורות</p>
    </footer>
</body>
</html>

כך יראה אתר עם HTML ו CSS
Pasted image 20250129185803.png
והנה הקוד
ניתן לראות כאן את התגיות STYLE המייצגות את הCSS בקוד

<!DOCTYPE html>
<html lang="he">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>אתר עם עיצוב</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>ברוכים הבאים לאתר שלי!</h1>
    </header>

    <main>
        <p>זהו אתר עם עיצוב פשוט באמצעות CSS.</p>
        <a href="#">קישור לאנשהו</a>
    </main>

    <footer>
        <p>© 2025 כל הזכויות שמורות</p>
    </footer>
</body>
</html>

כך יראה אתר עם HTML ו CSS ו JS
ופה כבר האתר מקבל פונקציאונליות
Pasted image 20250129185921.png
האתר מציג כפתור ואחרי לחיצת הכפתור אנחנו נראה את הדבר הבא
Pasted image 20250129190013.png
וכמובן בקוד למטה ניתן לראות את התגית SCRIPT המייצגת את קוד הJAVASCRIPT בקוד

<!DOCTYPE html>
<html lang="he">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>אתר אינטראקטיבי</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>ברוכים הבאים לאתר שלי!</h1>
    </header>

    <main>
        <p>זהו אתר אינטראקטיבי עם JavaScript.</p>
        <button onclick="showMessage()">לחץ עליי</button>
        <div id="message">ברכת שלום! תודה שלחצת על הכפתור.</div>
    </main>

    <footer>
        <p>© 2025 כל הזכויות שמורות</p>
    </footer>

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