☰ Menu
Home » Articles » WEBSITE DESIGNING
SOMO LA PILI: HTML INTRODUCTION 2

SOMO LA PILI:  HTML INTRODUCTION 2

 

Katika somo la kwanza tulijifunza kuhusu HTML na mifano baadhi ya kukuwezesha katika kufahamu juu ya somo hili kabla ya kwenda mbali. Katika somo hili tutaanza sasa kuandika HTML katika program yetu tuliyoielezea hapo mwanzo ambayo ni Notepad.

 

Kumbuka kuwa unapotaka kuanza kuandika website yako, ni vema ukatengeneza kwanza Folder ambalo litatumika katika kuhifadhi website yako humo. Na pia ndani ya folder hilo pia tengeneza folder lingine ambalo kazi yake itakuwa ni kuhifadhi picha zote zitakazotumika katika website yako.

 

Yape majina ambayo unahisi kwako itakuwa ni rahisi kuyakumbuka na pia yaweke sehemu ambayo ni rahisi kwako kuifikia, mfano mdogo tu unaweza kutengeneza folder hilo kwenye Desktop.

 

Baada ya hapo sasa ndio utakuwa umepiga hatua moja nzuri sana ya kutengeneza website yako.

 

Hatua inayofuata sasa ni kufungua Notepad kama tulivyoelekeza katika somo lililopita. Kabla ya kuendelea ni vema ufahamu kuwa Katika website kuna sehemu zifuatazo:


i.      Head  ambayo tag yake ni <head>…. </head> (inatengeneza kichwa cha tovuti yako)

ii.    Title  ambayo tag yake ni <title>…. </title>  (hapa unaandika jina la tovuti yako)

iii.   Body  ambayo tag yake ni <body>…. </body> (sehemu hii ndiyo kila unachokiweka kinaonekana katika ukurasa wa tovuti yako) angali picha hapo chini

 

Andika mtiririko huu katika notepad:

 

<html>

 

<head>

<title>

my website

</title>

</head>

 

<body>

hapa ndio kuna taarifa zote za tovuti yako

</body>

 

</html>

 

Maelezo juu ya code hizo hapo juu

  1. Nimezitofautisha kwa rangi ili uzione vizuri tag zinazofanya kazi moja zikiwemo za kufunga na kufungua.

  2. Website lazima ianze na tag hii <html> na kufungwa na hii </html> angalia vizuri katika mfano wetu hapo juu. Bila hivyo haihesabiki kama ni website.

  3. <title>………</title> lazima zikae ndani ya tag za <head>……….</head> angalia vizuri katika mfano wetu hapo juu.

  4. Baina ya tag za <title>…………… </title> ndio sehemu ya kuandika kichwa cha tovuti yako. Katika mfano wetu tumeandika "My Website”

  5. Baina ya <body> ………. Na ……. </body> ndio sehemu muhimu inayobeba taarifa nzima ambayo inawekwa kila kitu katika tovuti yako, ikiwemo picha video na maneno.

  6. Majina yaliyo ndani ya tag unaweza kuyaandika kwa herufi zozote zile iwe ni kubwa au ndogo, na haitaleta tatizo lolote au matokeo yoyote mabaya. Mfano <Body>, <BODY>, <BodY>, <bOdY>. Yote hayo yanamaanisha kitu kimoja tu ambacho ni <body>.

  7. maneno utakayoandika baina ya tag za <body> ndiyo yatakayoonekana katika tovuti yako. Kwa mfano hapo juu neno "hapa ndio kuna taarifa zote za tovuti yako” ndio neno litakaloonekana katika ukurasa mzima.

 

Hivyo basi kazi nzima ya kutengeneza tovuti hufanyika ndani ya tag hizi <body> …………. </body> na ndio asilimia 90 ya somo hili hufanyika humu.

 

Kumbuka kufuata mtiririko huu kila unapoanza kutengeneza tovuti.

 

Sasa tuangalie jinsi ya kusave kazi yetu ili iweze kusomeka katika Browser (Mozilla, Internet Explorer, Opera, safari).

 

Ukishamaliza kuandika maneno hayo hapo juu (nasisitiza kutumia mfano wangu ili uweze kuelewa vizuri zaidi), nenda kwenye File >> Save As..  kisha katika window itakayokuja tafuta lile folder ulilotengeneza mwanzo ambalo, kwa mfano wangu nililipa jina la "My Website”. Ukishalipata lifungue.

 

Hatua inayofuata sasa katika sehemu ya kuandika File name: chagua jina lolote utakaloona ni rahisi kwako likifuatiwa na ".html” bila hizo funga semi. Kwa mfano index.html, mysite.html, NewWeb.html. kumbuka kuwa, bila kuweka ".html” computer haitatambua kama faili lako ni website. Unaweza pia kuweka ".htm” badala ya ".html” pia haidhuru.

 

Halafu sehemu ya chini kidogo ya Save as Type: chagua neno All Files. Ukishamaliza hapo bofya button iliyoandikwa Save kisha kazi yako itakuwa imehifadhika katika folder letu la "My Website” na ukienda kufungua katika folder hilo utaona  mafaili mawili moja likiwa ni folder letu la picha na faili la pili ndiyo hii tovuti yetu.

 

Sasa basi, ukifungua faili hilo hapo ambalo kwa upande wangu nililihifadhi kwa jina la "index”  itafunguka kama webpage.

 

Jaribu kufanya hivyo kwa mfano wako mwenyewe uone jinsi gani ulivyoelewa somo hili. Nakutakia kila la kheri katika kujifunza hili, kaa tayari kwa somo la tatu. Kwa maswali, maoni au ushauri jisikie huru kuwasiliana nasi au kutuandikia maoni yako hapo chini.



Category: WEBSITE DESIGNING | Added by: Admin (12/Apr/2013)
Views: 842 | Tags: Head, website, body, html, Preview, hifadhi, tag, title, Code | Rating: 0.0/0
Total comments: 0
Name *:
Email *:
Code *: