picha

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">...

Jiunge nasi WhatsApp kupata update zetu

Zoezi la Maswali

Nyuma


Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save
Author: Rajabu image Tarehe: 2025-02-13 Topic: HTML Main: ICT File: Download PDF Views 970

Share On:

Facebook WhatsApp
Sponsored links
👉1 web hosting    👉2 Madrasa kiganjani    👉3 Bongolite - Game zone - Play free game    👉4 Simulizi za Hadithi Audio    👉5 Dua za Mitume na Manabii    👉6 Kitau cha Fiqh   

Post zinazofanana:

HTML - somo la 14: Hatua za kutengeneza website

Katika somo hili utakwenda kujifunza jinsi ya kutengeneza website hatuwa kwa hatuwa

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...
Njia za kupambana na saratani

Somo hili linakwenda kukueleza kuhusu njia za kupambana na saratani

Soma Zaidi...
HTML-somo la 5: Jinsi ya kupangilia munekano wa maudhui kwenye website

Katika somo hili utajifunza Kuweka picha Kuweka rangi Kuweka linki Kupangilia position na alignment ya maandishi Kuongeza ukubwa wa herufi Kukoment

Soma Zaidi...
HTML - somo la 1: Maana ya HTML na kazi zake

Somo hili linakufundisha maana ya HTML, kwa nini inatumika, na jinsi ya kuandaa simu au kompyuta yako kwa ajili ya kuanza kutengeneza tovuti. Pia tutatengeneza ukurasa wetu wa kwanza wa HTML hatua kwa hatua.

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 13: Jinsi ya kugawa ukurasa wa HTML

Katika somo hili utajifunza jinsi ya kugawanya ukurasa wa HTML katika column

Soma Zaidi...
HTML - somo la 11: Jinsi ya kuweka style mbalimbali kwenye html

Katika somo hili utajifunza jinsi ya kuweka style mbalimbali kwenye ukurasa wa html

Soma Zaidi...
HTML - somo la 10: Maana ya HTML attribute na jinsi zinavyofanya kazi

Katika somo hili utakwenda kijifunza kuhusu HTML attributes na jinsi ambavyo zinafanya kazi

Soma Zaidi...