HTML somo la 17: Jinsi ya kuunganisha HTML na CSS au JavaScript

Kuunganisha HTML na CSS au JavaScript ni hatua muhimu katika utengenezaji wa tovuti. Hapa kuna njia tofauti za kufanya hivyo:

1️⃣ KUUNGANISHA HTML NA CSS

CSS hutumika kupangilia muonekano wa HTML. Kuna njia tatu kuu za kuunganisha CSS na HTML:

✅ 1.1. Internal CSS (Ndani ya <style>)

Unaweka CSS moja kwa moja ndani ya faili ya HTML kwenye sehemu ya <head>.

Mfano:

<!DOCTYPE html>
<html lang="sw">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mfano wa Internal CSS</title>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Karibu kwenye tovuti yangu!</h1>
</body>
</html>

✅ 1.2. External CSS (Faili ya Nje)

Unaunda faili mpya ya CSS (mfano: styles.css), kisha unaunganisha na HTML kwa kutumia <link>.

Hatua ya 1: Unda faili ya styles.css

body {
    background-color: lightgray;
}
h1 {
    color: blue;
    text-align: center;
}

Hatua ya 2: Unganisha kwenye HTML kwa <link>

<!DOCTYPE html>
<html lang="sw">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mfano wa External CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hii ni tovuti yenye External CSS</h1>
</body>
</html>

? Faida: Inafanya HTML iwe safi na hurahisisha kubadilisha muundo wa tovuti bila kuhariri faili nyingi.

✅ 1.3. Inline CSS (Ndani ya Kitu Cha HTML)

Unatumia style moja kwa moja ndani ya tag ya HTML.

Mfano:

<h1 style="color: green; text-align: center;">Hii ni Inline CSS</h1>

? Hasara: Inafanya HTML kuwa na msongamano na ni vigumu kubadilisha muundo kwa haraka.

2️⃣ KUUNGANISHA HTML NA JAVASCRIPT

JavaScript hutumika kuongeza interactivity kwenye tovuti.

✅ 2.1. Internal JavaScript (Ndani ya <script>)

Unaunda JavaScript moja kwa moja ndani ya HTML kwenye sehemu ya <script>, mara nyingi mwishoni mwa <body>.

Mfano:

<!DOCTYPE html>
<html lang="sw">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mfano wa JavaScript</title>
</head>
<body>
    <h1 id="salamu">Habari!</h1>

    <script>
        document.getElementById("salamu").innerHTML = "Karibu kwenye tovuti yangu!";
    </script>
</body>
</html>

✅ 2.2. External JavaScript (Faili ya Nje)

Unatengeneza faili ya JavaScript (mfano: script.js), kisha unaunganisha kwa kutumia <script>.

Hatua ya 1: Unda faili ya script.js

document.getElementById("salamu").innerHTML = "Hii ni External JavaScript!";

Hatua ya 2: Unganisha kwenye HTML kwa <script>

<!DOCTYPE html>
<html lang="sw">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mfano wa External JavaScript</title>
</head>
<body>
    <h1 id="salamu">Habari!</h1>

    <script src="script.js"></script>
</body>
</html>

? Faida: Hurahisisha kudhibiti JavaScript kwa urahisi bila kuchafua HTML.

✅ 2.3. Inline JavaScript (Ndani ya Kitu Cha HTML)

Unatumia JavaScript moja kwa moja ndani ya tag ya HTML.

Mfano:

<button onclick="alert('Habari!')">Bofya Hapa</button>

? Hasara: Haipendekezwi kwa sababu huchanganya HTML na JavaScript.

? HITIMISHO

? Pendekezo: Tumia External CSS na JavaScript kwa miradi mikubwa ili kuweka HTML safi na rahisi kusimamia. ?