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 JavaScript moja kwa moja ndani ya HTML kwenye sehemu ya <script>
Umeionaje Makala hii.. ?
Share On:
👉1 Kitabu cha Afya 👉2 Bongolite - Game zone - Play free game 👉3 Dua za Mitume na Manabii 👉4 ai web app 👉5 Kitau cha Fiqh 👉6 Madrasa kiganjani
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...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 10: Maana ya HTML attribute na jinsi zinavyofanya kazi
Katika somo hili utakwenda kijifunza kuhusu HTML attributes na jinsi ambavyo zinafanya kazi
Soma Zaidi...HATML - somo la 4: Jinsi ya kutumia tag za html
Katka somo hi utakwenda kujifunza jinsi ya kutumia tag za html ili kupangilia muonekano wa maudhui
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...