katika chapisho lililopita tuliangalia kwa undan kidogo nini maana ya HTML na n faida zipi unaweza kuzipata unapo jifunza lugha ya HTML pia tuligusia namna na jinsi ya kuandika na kuona out put ya code zako kwa kutumia simu yako ya mkononi au kompyuta yako
kama hukusoma mafunzo ya HTML level 1 bonyeza hapaMAFUNZO YA HTML KWA KISWAHILI LEVEL ONE (1)
YALIYOMO
Katika chapisho hili tutaangalia zaidi kuhusu
1. LIST(orodha)
Tunaweza kuorodhesha vitu mbalimbali katika kurasa zetu za kimtandao(webpages). kuna aina mbili za kuorodheshwa vitu,
(i) kuorodhesha bila kutumia namba
(ii) kuorodhesha kwa kutumia namba.
I: Orodhesha vitu bila kutumia namba.
Kuorodhesha vitu bila kutumia namba tumia utambulisho(tag) wa < ul> na kila kitu kinacho orodheshwa lazima kianze na utambulisho (tag) wa < li>.
mfano
Orodha hapo juu ita orodhesha kwa kutumia viduara vidogo vyeusi. KAMA INAVYOONEKANA HAPA CHINI.
matokeo
Pia waweza orodhesha Vitu vyako kwa kutumia miraba midogo midogo kwa kuongeza mtindo (style) wa < ul style "list-style-type:square"> ul -inaelezea aina ya mtindo. list-style-inaelezea mtindo wa orodha kwenda chini type:square- muonekano wa umbo alama linalotumika kuorodhesha vitu, umbo alama hilo miraba midogo midogo(square).Kubadilsha umbo Alama toa neno square weka aina nyingine ya umbo alama.
mfano
matokeo
II: Orodhesha vitu kwa kutumia nambari.
Kuorodhesha vitu kwa kutumia namba utambulishwa kwa utambulisho (tag) wa < ol> na kila kitu kinacho orodheshwa lazima kianze na utambulisho < li>
mfano
matokeo
kama hukosoma mafunzo ya HTML toleo la kwanzaBONYEZA HAPA
2. HTML tables(majedwali)
HTML table ni kapu linalokusanya nyaraka mbalimbali.HTML table hutambulishwa na utambulisho (tag) wa < tr>. Kichwa cha table (table Header) hutambulishwa na utambulisho(tag) wa (th). Data ndani ya table hutambulishwa na utambulisho (tag) wa < td>.
mfano
matokeo
Sasa ndugu msomaji umeona table ya juu hapo haina mipaka(borders) hebu tuangalie namna ya kutengeneza table yenye mipaka(borders)
TABLE ZA HTML ZENYE MIPAKA(HTML TABLE BORDER)
Tunaweza kutengeneza table ya HTML yenye mipaka kwa kutumia lugha CSS inayosaidia kuonyesha muonekano wa kurasa yako ya kimtandao(webpages).
mfano
border:1px solid blacks; - Kanuni (code) inayoelezea ukubwa wa mpaka ambao ni 1px na rangi ya mpaka ambayo ni black.
-Mpangilio mzima wa lugha ya HTML unaotengeneza table ya HTML inayoonyesha mipaka kwenye kurasa za kimtandao (webpages).
matokeo
Jina la Kampuni | Jina la Muanzilishi | Eneo iliyopo |
---|---|---|
Hackers academy | Charlie syllas | #op3sk*3 |
House of romance | lusatho yohana | Mwanza |
Delicious foods Co | Wigos syllabus | Tabora na Iringa |
UFAFANUZI
< head> -mwanzo wa sehemu ndogo ya HTML
-mwisho wa sehemu ndogo ya HTML
ZINGATIA: Muonekano / mtindo wa mpaka wa table unatengenezwa ndani ya sehemu ndogo ya HTML < head>.
< style>-Mwanzo wa mtindo unaotengeneza muonekano wa mpaka ndani ya table ya HTML. < /style>-Mwisho wa mtindo unaotengeneza muonekano wa mpaka ndani ya table HTML.
ZINGATIA: Mtindo au muonekano wa mpaka wa table za HTML unatengenezwa ndani ya sehemu ndogo yaani ndani ya < head>(katikati ya < head> na < /head>
table, th,td { border:1px solid black; }-inaonyesha mtindo wa mpaka unaotengenezwa ndani ya < style> (Katikakati ya < style> na < /style>
< table style="widht:100%> -inaonyesha mtindo au muonekano wa upana wa table ya HTML ambayo ni upana wa 100%.
< /table> - mwisho wa mtindo au muonekano wa upana wa table ya HTML.
TABLE YA HTML ISIYOKUWA NA VIJUMBA NDANI (HTML TABLE COLLAPSED BORDERS)
Pia tutatumia lugha ya CSS kutengeneza table ya HTML isiyokuwa na vijumba ndani yake.
Mfano.
border:1px solid blacks; - Kanuni (code) inayoelezea ukubwa wa mpaka ambao ni 1px na rangi ya mpaka ambayo ni black.
border-collapse:collapse; -ni kanuni (code) inayozuia utengenezwaji wa vijumba ndani table ya HTML.
mpangilio wa kanuni(code) zinazo oshesha table isiyp na vijumba kwenye mipaka(border)
matokeo
ZINGATIA:
kanuni (code) za table zikiandikwa kwenye ukurasa mmoja unaweza kuathiri muonekano wa hizo table, ikiwa umeona table zote zinafanana kimuonekano tafadhari nakili hizo kanuni (code) kwenye notepad au trebEdit yako kisha hifadi na ufungue uhakiki muonekano wa hizo table
kama hukusoma mafunzo ya html level one BONYEZA HAPA
Leo tumejifunza zaidi kuhusu list na table za HTML panapo majaaliwa yake mwenyez mung tutaangalia zaidi kuhusu features nyingi za HTML pia mwisho wa mafunzo haya tutaangalia namna ya kuhosti code zetu kuwa website
Pia maoni yako ni muhimu sana tafadhali tuandikie maoni yako hapo chini kwenye kibox kilicho andikwa "POST A COMMENT"
Au niandikie kwenye ukurasa wangu wa Facebook BONYEZA HAPA!!
Ahsante!!!
0 Comments
MAONI YAKO NI MUHIMU TAFADHARI TUANDIKIE MAONI YAKO HAPA CHINI