UTANGULIZI
Baada ya kumaliza kujifunza kozi ya HTML utakua na uwezo wa:
- kutengeneza ukurasa wa kimtandao (webpage) unaoweza kutazamwa na mtumiaji wa mtandao.
UMUHIMU WA KUJIFUNZA LUGHA YA HTML
I.Kutengeneza kurasa za kimtandao (webpages)
II.Kujitengenezea kipato (pesa)
YALIYOMO
SOMO LA KWANZA- Nini maana ya HTML?
- Msingi wa mpangilio wa HTML
- kujifunza kutengeneza kurasa ya kwanza ya kimtandao.
SOMO LA PILI
LA KWANZA
HTML ni lugha inayomsaidia mtaalamu wa kompyuta kutengeneza kurasa za kimtandao (webpages).
MATOLEO YA HTML (HTML VERSIONS)
Matoleo ya HTML yametolewa kwa mtiririko ufuatao
TOLEO| TOLEO | MWAKA |
|---|---|
| HTML | 1991 |
| HTML 2.0 | 1995 |
| HTML3.2 | 1994 |
| HTML4.01 | 1999 |
| XHTML | 2000 |
| HTML5 | 2014 |
2:Msingi wa mpangilio wa HTML
Kurasa za HTML zimegawanyika katika makundi makuu mawili ambayo ni mwili (body) na kichwa cha HTML.
- Kichwa cha HTML (Head)
- Mwili wa HTML(body)
- -Mpangilio mzuri wa muundo wa kurasa za kimtandao lazima uhusishe vitambulisho (tags) vya HTML.
Kichwa cha HTML(Head) kinahusisha vipengele vya sehemu ndogo ya HTML (tittle) na data za meta za kurasa za kimtandao (webpages).
Mwili wa HTML unahusisha vipengele vya habari au chapisho unalotaka lionekane kwenye kurasa za kimtandao (webpages).
VITAMBULISHO VYA HTML (HTML TAGS)
Vitambulisho vya HTML (HTML Tags) ni vitambulisho vinavyotambulisha mpangilio wa HTML vilivyozungukwa na pembe mabano (angle brackets), mfano wa vitambulisho hivyo ni
-Ufuatao ni mpangilio unaotumika kutengeneza kurasa za kimtandao(webpages).
UFAFANUZI.
MUHIMU:Vitambulisho (tags) hapo juu zina mwanzo na mwisho wa vitambulisho(tags) mfano
Ili tuweze kutengeneza kurasa yetu ya kwanza ya kimtandao kwa kutumia lugha ya HTML tunahitaji programu (software) itakayotumika kuhariri lugha ya HTML (HTML Editor).
Pia kama hautumii computer zipo program (application) zenye uwezo wa kuhariri lugha ya HTML (HTML Editor)
PROGRAMU (SOFTWARE ) ZINAZOTUMIKA KUHARIRI LUGHA YA HTML (HTML EDITOR).
Kuna aina nyingi za programu zinazotumika kuhariri lugha ya HTML (HTML Editor). Programu zinazotumika kuhariri lugha ya HTML zimegawanyika katika makundi makuu mawili nayo ni
- Text-based(Code based) editors
- WYSIWYG (What You See Is What You Get)
I:Text-based(Code based) editors
Hili ni kundi la aina za programu zinazo hariri lugha ya HTML zinazopatikana au zinazokuja au kutengenezwa ndani ya "operating system", kazi yake ni kuhariri lugha ya HTML.
Mfano wa text-based editor inayopatikana katika "operating system" ya window ni NOTEPAD na text-based editor inayopatikana kwenye "operating system" ya Mac ni TEXTEDIT.
mfano wa text-based editor inayopatikana katika "operating system" ya Android ni Treb Edit ambayo ni application unayoweza kuipakua kwenye simu yako ya mkononi kupitia "play store"
II:WYSIWYG (What You See Is What You Get)
Hizi ni kundi la aina za programu zinazohariri lugha ya kompyuta zaidi ya moja.
Programu moja ya kompyuta inaweza kuhariri lugha zaidi ya moja. Mfano wa programu hizo za kompyuta ni Macromedia Dreamweaver, Microsoft front page, Adobe Golive na nyingine nyingi.
TENGENEZA KURASA ZA KIMTANDAO(,WEBPAGES).Tuanze kutengeneza kurasa ya kimtandao kwa kutumia program mbili ambazo ni Notepad (HTML Editor ) inayopatikana ndani ya window (operating system) na Treb Edit inayo tumika kwenye Android
Kwa kutumia notepad
HATUA ya 1
:Fungua notepad(kwenye kompyuta)
Kwenye window 8 na zaidi.
~Fungua start screen (ni alama ya window inayopatikana chini kushoto mwa kioo cha kompyuta).
~Andika notepad baada ya hapo fungua notepad yako.
Kwenye window 7 au matoleo ya mwanzo.
~Fungua start ->programs > accessories > notepad
Fungua start -andika notepad kwenye ki box cha kutafutia programu (search program and files) .
HATUA YA 2
Andika au nakili kanuni (code) za HTML zifuatazo.
HATUA YA 3: Hifadhi kurasa ya HTML
Kuhifadhi kurasa ya HTML.
I:Chagua File-nenda-save as ndani ya menyu ya Notepad inayopatikana juu kushoto mwa notepad yako.
Kisha hifadhi jina la kurasa yako mfano "jinalakurasa.html", kisha chagua UTF-8 ndani ya kijumba kilichopo mbele ya neno encoding kisha hifadhi kwa kubonyeza neno "save"
MUHIMU Ili kurasa yako iweze kifunguka kwenye "web browser" ni lazima utumie neno .html (dot html) wakati unahifadhi kurasa yako, mfano unataka kihifadhi kurasa yako kwa jina la kisulumiki ni lazima uongeze .HTML(dot HTML) ambalo litasomeka kisulumiki.html.
HATUA YA 4
Tembelea kurasa yako kutumia "browser" iliyomo ndani ya kompyuta yako
-Kufungua kurasa yako uliyohifadhi, nenda sehemu uliyohifadhi kurasa yako, fungua jina la kurasa yako kwa kubonyeza Mara mbili (double click) litafunguka au bonyeza kitufe cha kulia cha kipanya(mouse) chako chagua open with (browser) itafunguka.
-Itafunguka na kuonekana kama inavyoonekana hapo chini.
Matokeo.
Aya yangu ya kwanza
Kwa kutumia Treb Edit
HATUA YA 1
~Fungua play store kwenye simu yako search application inaitwa "Treb Edit" kisha ipakue(install)
Hatua ya 2
~Kama umesha ipakua(install) ifungue kisha bonyeza kitufe kilicho andikwa "menu" baada ya hapo bonyeza sehemu iliyo andikwa work place
Hatua ya 3
Ukisha bonyeza "work place" kwa chin itakuja alama ya plus (+) ibonyeze ili kuongeza fail lako jipya kisha bonyeza "new project"
Hatua ya 4
ukibonyeza new project itakuhitaji uweke jina la project, andika myweb kisha bonyeza alama ya tiki(mark) ili ku save
Hatua ya 5
fungua faili lako ulilo lipa jina "myweb kisha bonyeza alama ya plus (+) alaf bonyeza import file
Kama teari umesha lipata file unalo hitaji libonyeze kwa mguso wa mda kidogo(long press) baada ya hapo subiri kwa mda kidogo hadi file lako litakapo maliza ku import
Hatua ya 6
bonyeza tena kitufe cha plus (+) kisha click (chagua)sehemu iliyo andikwa new file,andika "index.html" alafu save
Hatua ya 7
sasa fungua hilo faili ulilo lipa jina "index.html" alafu nakili(copy) au andika kanuni (codes) zifuatazo
Hatua ya 8
~bonyeza kitufe(button) ya save au button ya play kuona matokeo
Matokeo.
Aya yangu ya kwanza
LA PILI
MSINGI WA HTML
Msingi wa HTML unaundwa na vitambulisho (tags) muhimu vinavyotumika kutengeneza kurasa za kimtandao (webpages), vifuatavyo ni vitambulisho (tags) muhimu vinavyotumika kutengeneza kurasa za kimtandao (webpages)
4. AYA ZA HTML(HTML PARAGRAPH).Unaweza kuweka Aya za HTML kwenye kurasa kwa kutumia utambulisho (tag) wa herufi p. Utambulisho wake unatambulishwa na
.
< p>Hii ni aya ya kwanza < /p>
< p>Hii ni aya inayofuata < /p>
< p> ni utambulisho (tag) unaoonyesha mwanzo wa Aya
< /p> ni utambulisho (tag) unaoonyesha mwisho wa Aya.
KURUKA MSTARI (HTML LINE BREAK)
Unaweza kuruka mstari kwenye kurasa kwa kutumia utambulisho (tag) wa herufi br. Utambulisho (tag) wake unaandikwa < br>.
-Tunatumia < br> kama tunahitaji kuanza mstari mwengine bila kuanza aya mpya(new paragraph).
< p>kisulumiki ni hacker< br>kisulumiki ni white hacker< /br> < /p>
< br> Ni utambulisho (tag) unaoonyesha mwanzo wa mstari mpya.
< /br> ni utambulisho (tag) unaoonyesha mwisho wa kurasa MPYA.
-Kutengeneza Aya ya HTML (HTML Paragraph) na kuruka mstari kwa kutumia mpangilio mzima wa HTML.
-Fungua notepad yako au treb edit kisha andika kanuni (code ) zifuatazo
Baada ya kuandika na kuhifadhi kurasa yako kama ilivyoelekezwa,pia unaweza kuifungua kurasa yako kama nilivyokuelekeza hapo awali.
Matokeo yataonekana kama inavyoonekana hapa chini.
5. MPANGILIO WA NAKALA (TEXT FORMATING).
Unaweza kupangilia nakala za kurasa za kimtandao (webpages) kwa kutumia vitambulisho (tags) Mbali mbali kama inavyoelezwa hapo chini
Kuweka kivuli nakala (bold)
Unaweza kuweka kivuli kwenye kurasa kwa kutumia kitambulisho(tag) cha < b>
< p>< b>Cheza kwa madoido< /b>< /p>
Kuweka nakala kwa mtindo wa italic(Italic Text)
Kuweka maandishi kwenye mtindo wa italic tumia kitambulisho (tag) cha < i>
< p>< i>kisulumiki anapenda kutumia tarakirishi< /i>< /p>
-Maandishi "kisulumiki anapenda kutumia tarakirishi" itaonekana kwenye mtindo wa Italic.
Kuonyesha uimara/umuhimu wa nakala (Strong text)
Kuweka maandishi yaonekane muhimu/imara tumia utambulisho(tag) wa < strong>
< p>< strong>Rock City-Mwanza< /strong>< /p>
Maandishi "Rock city-Mwanza" yataonekana imara na yatapewa umuhimu kwenye kurasa.
Kuweka nakala yako mtindo wa herufi ndogo.
Kuweka maandishi katika mtindo wa herufi ndogo tumia kitambulisho (tag) cha < small>
< p>< small>kisulumiki bin kissu< /small>< /p>
-Maandishi "kisulumiki bin kissu" yatakua kwenye mtindo wa herufi ndogo.
Kuweka nakala kwenye mtindo wa subscript na superscript
Kuweka maandishi yaonekane kwenye mtindo wa subscript tumia kitambulisho cha (tag) cha < sub>
< p>Maria< sub>Revocartue< /sub>< /p>
-Pia kuweka maandishi yako yaonekane kwenye mtindo wa superscript tumia kitambulisho (tag) cha < sup>
< p>Charles< sup>syllah< /sup>< /p>
uonyesha andishi lililofutwa(deleted).
Kuonyesha andishi lililofutwa kwenye kutasa tumia kitambulisho (tag) cha < del>.
< p>< del>Aneth andrew< /del>< /p>
Andishi "Aneth andrew" litaonekana limepigiwa mstari katikati kuonyesha halihitajiki kwenye kurasa.
kuonyesha andishi lililoongezwa (inserted)
Kuonyesha andishi lililoongezwa kwenye kurasa tumia kitambulisho (tag) cha < ins>
< p>< ins>Majengo Mapya< /ins>< /p>.
Andishi "Majengo Mapya" litaonekana limeongezwa kwenye kurasa kwa kuonekana limepigiwa mstari.
Kuweka alama kwenye nakala.
Kuweka alama kwenye andishi ndani ya ukurusa wako tumia kitambulisho cha (mark).
< p>Wafanyakazi wa< mark>clouds media< /mark>wana bidii ya kazi< /p>
Andishi "clouds media" litaonyesha limewekwa alama ya rangi ya njano.
Kutengeneza mpangilio wa nakala kwenye kurasa kwa kutumia vitambulisho mbalimbali tulivyojifunza hapo juu.
-Fungua notepad yako katika window au application yako ya treb edit kama ulivyoelekezwa awali na andika kama inavyoonekana hapo chini.
matokeo
MUHIMU:Endelelea kufanya mazoezi
6.Vipengele vya HTML (HTML Elements)Vipengele vya HTML vinaonyesha mpangilio mzima unaotumika katika lugha ya HTML.
Muonekano wa kurasa za kimtandao unaathiriwa na mpangilio wa vipengele vya HTML.
Kichwa cha HTML ni moja ya kipengele kinachopatikana katika muundo wa lugha ya HTML, kichwa cha HTML (HTML Headings) kinatambulishwa na utambulisho(tags) wa < h1> mpaka < h6>. Vichwa vya HTML vinaweza kuwa zaidi ya kimoja kwenye kurasa moja.
matokeo
KASUKU
NJIWA
TAUSI
MWEWE
-Kutengeneza mpangilio wa vichwa vya HTML kwenye kurasa ndani ya muundo wa HTML-Fungua notepad(au programu nyingine ya kuhariri lugha ya HTML) yako kisha andika kanuni (code) kama inavyoonekana hapo chini.
Matokeo
HTML HORIZONTAL RULES
Horizontal rules hutumika kutenganisha maudhui ndani ya kurasa za kimtandao. Maudhui ndani ya kurasa hutenganishwa kwa kutumia mstari mlalo (horizontal line). Tunatumia utambulisho (tag) wa (hr) kutenganisha maudhui ndani ya kurasa za kimtandao (webpages).
< h1>Mkoa wa mwanza< /h1>
< p>Mkoa wa mwanza unapatikana karibu na ziwa Victoria < /p>
< hr>
< h2>Wilaya zake< /h2>
< p>Mkoa wa mwanza una wilaya 6< /p>
< hr>
HTML < head> Element
HTML < head> Element ni tofauti sana na HTML headings.
HTML < head> Element ni kapu linalobeba data za meta.
Data za meta ni data ambazo zinaelezea data nyingine.
HTML < head> Element inatambulishwa na utambulisho (tag) wa < head>
Matokeo
8.Vipambizo vya HTML (HTML Attribute)HTML attribute inaelezea zaidi (inapambiza) habari zinazoongezwa katika vipengele vya HTML(elements).HTML attribute inawekwa ndani ya utambulisho wa mwanzo wa HTML
< html lang="Swahili">
9. Picha (Images)Tunaweza kupamba kurasa zetu za mtandaoni(webpages) kwa kutumia picha.Baadhi ya aina ya fomati (format) ya picha tunazoweza kuzitumia ndani ya kurasa za kimtandao ni picha za JPG , GIF, PNG na nyinginezo.
Picha (images) hutambulishwa kwa kitambulisho (Tag) cha < img>. Unaweza kuweka aina ya picha yako kwenye kurasa za kimtandao(webpages) kwa kufuata utaratibu huu.
< img src ="url" alt="subiri picha itaonekana" style="width:width;height:height;">UFAFANUZI
< img src in chanzo cha picha (image sources).
Url ni kiunganishi cha chanzo cha picha (image source) iliifadhiwa ndani ya kifaa chako cha kompyuta, url inaweza kuwa jina la picha au anuani ya tovuti(website address). iliyohifadhi picha.
alt="" inasaidia kuonyesha maandishi kwa mfunguaji wa kurasa za kimtandao endapo picha ikichelewa kufunguka sababu ya mtandao hafifu itaonyesha maneno haya "wait loaded"
alt="wait loaded"-Endapo picha ikichelewa kufunguka itaonyesha maneno yafuatayo "wait loaded"
-style="width:width;height:height;"> ni mtindo ambao unasaidia muonekano wa vipimo vya kurasa yako ya kimtandao. Inasaidia kupangilia upana na urefu wa picha kwenye kurasa za kimtandao.
mfano
Matokeo
10. Viungo/ Viunganishi vya HTML (HTML links)Viunganisho (links) vinamsaidia mtembeleaji wa kurasa za kimtandao (webpages) kutembelea kurasa moja kwenda kurasa nyingine ya kimtandao . Viungo /viunganishi vinatambulishwa kwa utambulisho (tag) wa < a>
-Kuunganisha kurasa za kimtandao fuata utaratibu ufuatao
< a href =" url">ukurasa wa pili< /a>UFAFANUZI.
< href ="url" -inaunganisha ukurasa unaotaka kuutembelea kutoka kwenye kurasa uliyopo. Inaweza kukuonganisha na kurasa nyingine kutoka kwenye mtandao au kurasa isiyokuwepo kwenye mtandao.
Ukurasa wa pill< /a>-ukurasa wa pili in jina la kurasa unayotakiwa kuunganishwa kutoka kurasa ya mwanzo.
< /a>-inaonyesha mwisho wa utambulisho (tag) wa kiunganisho (link).
-Kiungo hapo juu kinasaidia kuunganisha kurasa yenye anwani ya www.nijuzebongo.blogspot.com
11.RANGI ZA HTML (HTML COLORS).Tunaweza kupendezesha kurasa zetu za mitandaoni (webpages) kwa kutumia rangi za aina mbalimbali. Kuna aina 140 za rangi zinazoweza kutumika ndani ya kurasa zetu za mitandaoni, mfano wa baadhi ya ranging ni nyeusi, nyekundu, bluu, kijani, nyeupe, njano nakadhalika.
MIFUMO YA KUWEKA RANGI.
Kuna mifumo ya aina mbili ya kuweka rangi ndani ya kurasa za mitandaoni (webpages) kwa kutumia lugha ya HTML nayo ni ~
(I) MFUMO WA KUWEKA RANGI KWA KUTUMIA JINA LA RANGI HUSIKA.
Huu ni mfumo wa kupendezesha kurasa za mtandaoni (webpages) kwa kutumia rangi husika, mfano unataka kupendezesha kurasa kwa rangi ya kijani utatumia andishi "green" , rangi nyeusi utatumia "black", nyeupe utatumia "white" na kadhalika.
(II) MFUMO WA KUWEKA RANGI KWA KUTUMIA THAMANI YAh4XADECIMAL.
Huu ni mfumo wa kupendezesha kurasa za mitandaoni (webpages) na rangi kwa kutumia kanuni (code) zilizotathiminiwa zitumike kupamba kurasa za mtandaoni(webpages). Mfano wa kanuni (code) ni #000000 ina simama badala ya rangi nyeusi. #FFFFFFinasimama badala ya rangi nyeupe, #808080 inasimama badala ya rangi ya kijivu, #FF0000(rangi nyekundu), #FFFF00 (rangi ya njano), #0000FF (rangi ya bluu), #00FF00 (rangi ya kijani)
JINSI YA KUWEKA RANGI NDANI YA KURASA.
Tumia utaratibu huu kuweka rangi kwenye kurasa za mitandaoni,
< style="background-color:red"> au < style="color:red">.WEKA RANGI NYUMA YA KURASA YAKO.
Kuweka rangi nyuma ya kurasa ya yako fuata utaratibu huu < style="background-color:red"> au < style="background-color:#FF0000">.
au
NAKILI KWENYE NOTEPAD AU TREB EDIT KUONA MATOKEO
WEKA RANGI KWENYE AYA (PARAGRAPH) YAKO.
Kuweka rangi kwenye aya (paragraph) ndani ya kurasa yako fuata utaratibu huu
< p style="background-color:red"> au < p style="background-color:#FF0000">.
Au
Matokeo
12:Vipengele vya HTML (HTML Elements).Rejea mafunzo ya mwanzo ya vipengele vya HTML tulivyojifunza.
MGAWANYIKO WA VIPENGELE VYA HTML
Vipengele vya HTML vimegawanyika katika makundi makuu mawili(2) nayo ni
(I) BLOCK ELEMENTS
Block elements ni vipengele vya utambulisho (tags) vinavyotumiwa kwenye lugha ya HTML vinavyotengeneza mstari unaojitegemea. Block elements ina vipengele vya utambulisho (tags) vya mwanzo na vya mwisho,mwisho wa vipengele vya utambulisho (tags) ndio mwisho wa mstari ndani ya kurasa.mfano wa block element ya mwanzo ni
< h1> na mwisho ni < /h1>, mwanzo ni < p> na mwisho ni< /p>.
(II) INLINE ELEMENTS.
Inline elements ni vipengele vya utambulisho (tags) vinavyotumiwa kwenye lugha ya HTML vinavyotumika ndani ya mstari wa kurasa za mtandaoni (webpages). Mfano wa inline elements ni < strong>,< small>,< del>,< ins>,< sup>, < sub> nakadhalika.
TENGANISHA VIPENGELE VYA HTML (HTML ELEMENTS).
Tunaweza kutenganisha vipengele vya HTML ndani ya kurasa moja ya kimtandao. Kuna aina mbili za utambulisho (tags) ambazo zinatumika sana kutenganisha vipengele vya HTML navyo ni
(I) UTAMBULISHO (TAG) WA < div>.
Utambulisho wa < div> unatumika kutenganisha makundi mawili au zaidi ndani ya kurasa moja ya kimtandao (webpages).
Matokeo
(II) UTAMBULISHA (TAG) WA < span>.
Utambulisho (tag) wa < span> unatumika kutenganisha rangi ya sentensi kwenye kurasa za mtandaoni (webpages).
Matokeo
13: Ishara/ alama za HTML (HTML symbols)Alama za HTML (HTML symbols) ni alama ambazo zinatumika ndani ya HTML
Kuna aina nyingi za alama za HTML tunazoweza kutumia wakati wa kutengeneza kurasa ya kimtandao. Mfano wa alama hizo ni ©,®,™ nakadhalika.
Kuweka alama hizo tutatumia namba au "entity".
Mfano wa namba ya alama © ni & #169; na entity ni & copy, alama ® namba ni & #174; entity ni & reg na alama ™ namba ni & #848; na entity ni & trade.
Matokeo
MUHIMU
MWISHO
hongera kwa kumaliza awamu ya kwanza ya mafunzo ya HTML panapo majaaliwa nitakuleteeni muendelezo wa mafunzo ya HTML5 ,css na Javasript pia mafunzo ya jinsi ya kuanzisha website kwa ajili ya biashara/taasisi/shirika au binafsi na blog ya taarifa
Kama kuna kipengele hujaelewa au unahtaji ufafanuzi zaidi niandikie kwenye kibox cha maoni hapa chini👇🏿
Imeandaliwa na kuhaririwa na KISULUMIKI BIN KISSU
0 Comments
MAONI YAKO NI MUHIMU TAFADHARI TUANDIKIE MAONI YAKO HAPA CHINI