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

Katika somo hili utakwend akujifunz ahatuwa kwa hatuwa 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 Jav">...

Download Post hii hapa

Download App Yetu

Jifunze zaidi, na wasiliana nasi ukiwa na App yetu. Bofya link hapo chini kuweza kuipakua.

Download Now

Zoezi la Maswali

Nyuma

Umeionaje Makala hii.. ?

Nzuri Mbaya Save

Author: Rajabu

Tarehe: 1970-01-01 03:33:45 Topic: HTML Main: ICT File: Download PDF Views 347

Share On:

Facebook WhatsApp

Sponsored links
👉1 Kitabu cha Afya 👉2 Kitau cha Fiqh 👉3 Madrasa kiganjani 👉4 Sira ya Mtume Muhammad (s.a.w) 👉5 Bongolite - Game zone - Play free game 👉6 kitabu cha Simulizi

Post zinazofanana:

HTML - somo la 9: Jinsi ya kutumia tag za HTML katika uandishi wa maudhui

Katika somo hili utakwenda kuona jinsi ya kuzitumia tag balimbali za html

Soma Zaidi...

HTML - somo la 16: Jinsi ya ku host website bure

Katika somo hili utakwenda kujifunza jinsi ya ku host website yako bila malipo

Soma Zaidi...

HTML - somo la 1: Maana ya HTML na kazi zake

Katika somo hili utajifunza maana ya HTML na jinsi inavyofanya kazi

Soma Zaidi...

Jinsi ya kutengeneza cheti kwa kutumia HTML

Katika post hii utakwenda kujifunz ajinsi ya kutengeneza cheti kwa kutumia html na css.

Soma Zaidi...

HTML - somo la 6: Jinsi ya kuweka menyu kwenye faili la HTML

Katika somo hili utakwenda kujifunza jinsi ya kuweka menyu kwenye faili la html na kuweka rangi ya background. Pia utajifunza kufanya ukurasa uwe responsive yaani uendani na ukubwa wa kifaa.

Soma Zaidi...