SEHEMU KUU ZA FAILI LA HTML
<head>, <header> na <footer>
Katika website sehemu hizi zina kazi ya kuweza kutambulisha zaidi website na mahusiano kati ya ukurasa na ukurasa. Sehemu hizi ni muhimu kwa SEO na wanaotaka kuichunguza blog ama website. Katika somo hili tutakwenda kuangalia sehemu hizi, na jinsi ya kuzitengeneza ama kuziwekea maudhui.
1.<head>
Shemehu hii inakaa taarifa muhimu kuhusu ukurasa. Taarifa hizi unawezakuziita metadata. Kwa mfano hapa unaweza kuweka taarifa hizi:-
A.Jina la faili kulingana na maudhui
B.Jina la mwandishi
C.Muhtasari kuhusu maudui
D.Character set
E.Viungo vingine muhimu kama link za style za nje
F.Taarifa kuhusu ukubwa wa kifaa kitakachofunguwa faili husika.
G.Icon n.k
Kwa mfano unaweza kuweka taarifa hizo
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="jina la mwandishi">
<meta name="description" content="weka muhtasari hapa">
<title>weka Title hapa</title>
</head>
2.<header> hii ni sehemu ya juu kabisa ama ya mwanzo. Sehemu hii ndio ambapo menu hukaa. Sehemu hii ndio inatakiwa ikae mwanza tu ndani ya tag ya <body> . tag ya <menu> inatakiwa ikae hapa ndani ya <header>. kwa ufupi <header> ni kama section ambazo hubeba tag nyingine ndani ake. Kama tulivyoona matumizi ya <div> katika masomo yaliyotangulia.
Kuweka menu tunatumia tag ya <menu> tag hii tutaiweka kwenye section ya <header> tunaweza kutumia style ili kubresha muonekano wa menu yetu. Tunaweza kutumia batanina link ili kuunganisha ukurasa mmoja na mwingine. Kwa mfano:-
<html>
<style>
menu {background-color: black;}
a {color: red;
text-decoration: none;
}
button {font-size: x-large;}
</style>
<heade>
<menu>
<button><a href="#">PHP</a></button>
<button><a href="#">HTML</a></button>
<button><a href="#">CSS</a></button>
<button><a href="#">JAVA</a></button>
</menu>
</heade>
</html>
Katika mfano huo hapo juu tumetumia style ya nje. Rejea somo lililotangulia kwa ufafanuzi zaidi jinsi ya kuweka style za nje. Hapo tumeweka tag ya <menu> ndani ya tag ya <header> hivyo tunaweza kuweka taarifa nyingine kwenye tag ya <header> baada ya menu. Kama utakuwa na taarifa nyingine utaziweka.
Baada ya kumaliza menu itafata maudhui ya ukurasa wako. Unaweza kutumia <div>, na <article> kama section za kuweka tag nyingine ili kuandika maudhui bora. Baada yakumaliza kuandika maudhui utamaliza ukurasa wako kwa kuweka <footer>
3.<footer>
Hii ni sehemu ya chini ya website ama blog. Sehemu hii mara nyingi iakaa contact, link, na taarifa za ziada. Katika sehemu hii hatuweki maudhui ya ukurasa. Mara nyingi sehemu hii huwa na rangi nyeusi, ila sio sheria unaweza kuweka rangi yeyote unayoona inafaa.
Ili kuweza kuweka footer utatumia tag ya <footer> kisha utachaguwa ni taarifa zipi unataka kuweka. Unaweza pia kutumia style ili kuboresha muonekano. Mfano:-
<html>
<style>
footer {background-color: grey;}
b {color: darkblue;}
</style>
<footer>
<h1>WASILIANA NASI </h1>
<a href="email yako hapa"><b>Email</b></a>
<a href="youtube.com"><b>Youtube</b></a>
<a href="facebook.com"><b>Facebook</b></a>
<a href="twitter.com"><b>Twitter</b></a>
<a href="instagram.com"><b>instra</b></a>
</footer>
</html>
Kwa ufupi hizi ndio sehemu kuu tatu za ukurasa wa wavuti ambazo hubeba taarifa za ziada za ukurasa. Nasema taarifa za ziada kwa sababu maudhui ya ukurasa hayakai kwenye sehemu hizi. Chukulia mfano unataka kufundisha jinsi ya kuandaa shamba la mipapai. Maudhui yako hayatakaa kwenye menu, ama footer ama header ama head.
Tukutane somo linalofata tutakaloangalia jinsi ya kugawa ukurasawako wa HTML.
