Home » Articles » WEBSITE DESIGNING

SOMO LA TATU: HTML ELEMENTS

SOMO LA TATU:  HTML ELEMENTS

Kama tulivyozungumzia katika somo letu la kwanza kuwa HTML  element ni kila kitu kilicho baina ya tag mbili pamoja na tag zenyewe. Kwa mfano  <b> this is text </b>, hapa lote hilo huitwa HTML element ila ukipunguza tu tag moja hapo inakuwa tena sio html element.

Kama tulivyojifunza hapo mwanzo kuwa website nzima hufanyiwa kazi baina ya tag za <body> ……. </body> hivyo basi, katika somo la leo tutajifunza mambo yafuatayo:

  1. Kichwa cha habari (Heading)
  2. Aya (Paragraph)
  3. Line break
  4. Horizontal Rule .

Na kumbuka yote haya yatafanyika katika <body> ……………. </body>.

 

  1. Kichwa cha habari (Heading)

Hii ni tag inayoiamrisha kompyuta kufanya neno kuwa ni kichwa cha habari. Tag hii huandikwa <h1> kwa kufungua na </h1> kwa kufunga, kwa ujumla huwa kama <h1> ……………….. </h1>. Unaweza kujiuliza hiyo namba moja baada ya herufi "h” ni ya nini? Jibu ni kwamba Heading huwa zina madaraja yake, kwa mfano kama ni kichwa cha habari kikuu basi utatumia <h1> , na kama ni kichwa cha habari kinachofuatia basi utatumia <h2> na kama una kichwa cha habari cha tatu tena utatumia <h3>.

 

Pia ukubwa wa maandishi utatofautiana kulingana na hatua za vichwa vya habari: hebu chukua code hizi hapa chini kisha jaribu katika kompyuta yako uone matokeo yake.

<html>

 

<body>

 

<h1> Kichwa cha habari kikuu </h1>

<h2> Kichwa cha habari cha pili </h2>

<h3> Kichwa cha habari kidogo </h3>

 

</body>

 

<html>

 

Maelezo:

  1. Kwa haraka zaidi ni kwamba  katika browser yataonekana kama:

Kichwa cha habari kikuu

Kichwa cha habari cha pili

Kichwa cha habari kidogo

  1. Unaweza kushangaa kuona katika html code zetu hapo juu hakuna <head> wala <title>, hiyo haifanyi  yako isifanyike kwani unafanya hivyo kwa  kujifunza tu haina umuhimu sana labda uwe uko serious katika kufanya kazi yenyewe.

 

  1. Kadiri unavyozidisha ukubwa wa namba katika herufi "h” ndio kadiri kichwa cha habari kinapozidi kupungua ukubwa. Hivyo basi, kuwa makini kwa hili kwani usije ukasababisha heading ikawa ndogo kuliko maelezo yenyewe kwa mfano ukiweka <h6>.

 

  1. Aya (Paragraph)

Hii tag hutumika katika kuacha aya (paragraph). Tag yake huandikwa hivi <p> katika kufungua na </p> katika kufunga, ila hata usipoandika tag ya kufunga itafanya kazi. Yaani ukiandika <p> hii ni aya, badala ya <p> hii ni aya </p> zote zitafanya kazi sawa na hii haina namba kama katika kichwa cha habari.

 

Jaribu code hizi hapa chini:

 

<html>

 

<body>

 

<p> Hii ni paragraph ya kwanza </p>

<p> Hii ni paragraph ya pili

<p> Hii ni paragraph ya tatu

 

</body>

 

<html>

 


  1. Line Break

Unapoandika maneno yako katika notepad, hata kama utaacha nafasi kubwa kiasi gani lakini kompyuta haitambui nafasi zaidi ya moja, vilevile unaweza kuwa umemaliza sentensi yako na kutaka kuanza sentensi nyingine katika mstari wa pili, vile vile kwa kuacha nafasi hiyo kompyuta haitambui labda kwa kutumia tag yake maalum iliyowekwa kwa kazi hiyo.

Mfano ukiandika:

 "ninajifunza kusoma na kuandika”   na mwenzako akaandika

"ninajifunza                  kusoma na                             kuandika”

nyote wawili mko sawasawa, hiyo nafasi aliyoiacha hapo haitatambulika na kompyuta.

 

Endapo unataka kuruka mstari ili uanze kuandika katika mstari mwingine tag hii <br> hutumia. Tag hiyo haina tag ya pili.

Mfano wake ni kama kuandika hivi:

 

Watoto wawili wanacheza <br> mama yao anapika <br>Baba yao yuko kazini. Hizi hazitakaa katika mstari mmoja kama unavyoziona bali zitaonekana hivi:

 

Watoto wawili wanacheza
mama yao anapika
Baba yao yuko kazini.

 

Jaribu mwenyewe code hizi hapa:

<html>

 

<body>

<h1> Maisha ya Mjini</h1>

<p> Hii ni paragraph ya kwanza </p>

Watoto wawili wanacheza <br> mama yao anapika <br>Baba yao yuko kazini

</body>

 

<html>

 

  1. Horizontal Rule

Huu ni mstari unaopigwa  kutenganisha sehemu za website yako. Tag yake ni <hr> na haina tag ya kufunga kwani hakuna maandishi yanayotakiwa kufanyika kati yake. Mstari huu huenea eneo zima la website yako kuanzia  kulia hadi kushoto, ila ukitaka urefu unaouhitaji basi kuna maelezo ya code yanatakiwa kuongezwa baada ya neno "hr”, tutajifunza katika mada zinazokuja.


Jaribu mwenyewe code hizi hapa:

<html>

 

<body>

<hr>

<h1> Maisha ya Mjini</h1>

 <hr>

<p> Hii ni paragraph ya kwanza </p>

Watoto wawili wanacheza <br> mama yao anapika <br>Baba yao yuko kazini <br>

Hapa ndio mwisho wa ukurasa huu<br>

<hr>

 

</body>

 

<html>

 

Mapaka hapa tumefikia mwisho wa somo letu la tatu, kaa tayari kwaajili ya somo la nne. Kwa maswali, maoni na ushauri jisikie huru kuuliza na kutoa maoni yako hapa chini.

 

 

Category: WEBSITE DESIGNING | Added by: Admin (12/Apr/2013)
Views: 497 | Tags: body, Head, html elements, title, tag, somo la tatu | Rating: 0.0/0
Total comments: 0
Name *:
Email *:
Code *: