html



Ramani ya HTML


Miongozo

1

Somo la 1

Utangulizi wa HTML

Lengo la Somo hili

Baada ya somo hili utakuwa na uwezo wa kutengeneza ukurasa wako binafsi ambapo umeandikwa kwa kutumia html.
Pia utaelewa maana ya mambo yafuatayo:

  • Html

  • Tags

    • Html ni nini?

  • Html ni ufupisho wa HyperText Markup Language
  • Ni lugha inayotumiwa kuandika kurasa za tovuti

    • Tag ni nini?

    Tag ni alama inayohusisha jambo lolote ambalo unataka kuweka kwenye kurasa. Kwa mfano Tunajuwa fungu ni Paragraph, kwa hiyo tag yake itakuwa <p> ...</p> . Tags nyingi zina kufungua na kufunga. Lakini si zote zinazofanya kazi kwa njia hiyo!

  • <!DOCTYPE html>
  • <html> ...</html>
  • <head> ...</head>
  • <title>...</title>
  • <body> ...</body>

    • Muundo wa Msingi wa HTML:

  • <!DOCTYPE html> : Ni ishara inayotumiwa kuonyesha aina ya hati (document type)
  • <html>: Ni mwanzo wa document
  • <head>: Inahusisha mambo yote ambayo document hiyo itatumia na kuhitahitaji
  • <title>: Inaonyesha kichwa cha hiyo document
  • <body>: Ndani ya "body" ni hapo kila kitu ambacho ungependa kuweka kwenye document kinakwenda.
    ( Mfano: Kifungu, picha, vichwa vya habari, video, viunganishi etc... )

    • Code

    Video

    Tumia Uliyojifunza


    2

    Somo la 2

    Tags na Elements za Msingi

    Lengo la Somo hili

    Baada ya somo hili utakuwa na uwezo wa kutengeneza ukurasa wako binafsi ambapo umeandikwa kwa kutumia html.
    Pia utaelewa maana ya mambo yafuatayo:

  • <h1>

  • <h2>

  • <h3>

  • <h4>

  • <h5>

  • <h6>

  • <p>

    • Vichwa (Headings)

  • <h1> hadi <h6>: Hizo tags zinafafanua vichwa. h1 ikiwa kichwa kikubwa na h6 ikiwakilisha kichwa kidogo kabisa!

    • Unaweza kutumia hizo tags kuandika hati ama documents ambayo itahusisha vichwa vikubwa na vidogo kwa kutumia html.

    Kifungu (Paragraph)

  • <p>: tag hii inafafanua kifungu

    • Kila mara unapoandika vifungu utahitaji kufunga tag hiyo ya <p>

    Unaweza kuendelea kufungua na kufunga mafungu yako,
    na hiyo itakusaidia kuandika mafungu mengi karidi uwezavyo.

    Mfano: <p> fungu </p>

    Code


    Si kila mtu ambaye ni mpenzi wa kusoma. Ndiyo sababu nimetengeneza video ifuatayo!

    Ikiwa tayari umesoma hapo juu na umeelewa kwa kina mafasirio hayo, si lazima kutazama video hii. Lakini ukitaka kupanua zaidi ujuzi wako, na labda hukuelewa vizuri zaidi unaweza kuitazama video hapo chini!