Igihe tugezemo kubaho uri umushitsi mu ikoranabuhanga si ikintu cyashigikirwa kuko ikoranabuhanga riri buri hamwe. Ku bw'iyo mpamvu twabonye ko ari byiza gutangira kwandika no kwigisha ibijyanye ni ikoranabuhanga bitandukanye. Mu kwiga ikoranabuhanga reka twigire hamwe HTML kuko ariyo yadufasha kwinjira mu ikoranabunga twiga uko twakora imbuga zo kuri murandasi (website). Iyo umaze kumenya uko urubuga rwo kuri murandasi rukora biroroha kwiga gukora no gusobanukirwa gahunda za mudasobwa (programs/apps/softwares).
Reka rero turebe uko wakwiga HTML mu buryo bworoshye. Kwibanda kuri ibi bikurikira ni ibyo kwibandwaho:
- Kumenya ibimenyetso bikoreshwa muri HTML
- imiterere y'inyandiko ya HTML
- uko babika inyandiko muri mudasobwa
- uko ufungura iyo nyandiko ukoresheje mushakisha (browser) zitandukanye
- Inkomoko y'ibya gufasha ushaka kwiga birenzeho muri HTML no gukora urubuga rwo kuri murandasi(interineti).
1. Kumenya ibimenyetso bikoreshwa muri HTML
1.1 HTML ni iki?
HTML iri mu magambo y'impine ari mu rurimi rw'icyongereza ariyo HyperText Markup Language. iyo ugenekereje ushobora kuvuga ko ari ururimi rukoresha ibimenyetso by'inyandiko mu rwego rwo guhuza inyandiko zitandukanye by'urubuga (website) rwo kuri murandasi (interineti) ikaba ikoresha ahanini hakorwa imbuga zo kuri interineti nubwo hariho abashobora kuyifashisha bakora imikino cyangwa dezayini(design) zitandukanye.. Kumenya ibimenyetso bikoresha n'uko bikoreshwa n'intambwe ya mbere y'ingenzi mu kwiga uru rurimi.
1.2 ibimenyetso n'uko byandikwa
<html > < /html> gutangira no gufunga inyandiko
<h1 > < /h1 > gushiraho umutwe w’inyandiko (inkuru) (<h1 > ----<h6 > )
< p > < /p > kwandika igika (paragraph) cy’inkuru (inyandiko)
< br > kujya kuwundi murongo (line break : gucamo umurongo)
< strong > < /strong > kwerekana ko inyandiko ifite akamaro (ari iyo kwitabwaho)
< table > < /table > gukora imbonerahamwe
< form > < /form > kuzuza ifishi
< ul > < /ul > urutonde rutagaragazwa mu buryo bw’imibare
< li > < /li > ibigize urutonde
< video > < /video > gushira videwo mu nyandiko ya HTML
< a > < /a > ikimenyetso kigaragaza ihuza ku rubuga (ni anchor tag)
< img > gushira ifoto mu nyandiko ya HTML
< input > gusaba ko hagira ibyuzuzwamo
< section >
< article >
Ibi bimenyetso turabifungura tukanabifunga.
Urugero: kubifungura < body > naho gufunga < /body >
Hari ibimenyetso bimwe bigira igice gifungura cyonyine hakaba hakorwamo uturanga mu rwego rwo kubyongerera imikorere.
Urugero: < img src=“images/example.png” alt=“Urugero rw’ifoto” >
< br >
< hr >
<!DOCTYPE html >
< html lang=“en” >
< head >
< title > Iwacu Mu Rugo > /title >
< /head >
< body >
< h1 > Ikaze Iwacu < /h1 >
< /body >
< /html >
2. Imiterere y’Urubuga
Urubuga rugizwe ni ibice bibiri by’ingenzi: Igice cy’amakuru y’urubuga aricyo dusangamo umutwe, ndetse n’andi makuru akenerwa mu gihe cyo gushakisha urwo rubuga kuri murandasi.
Igice kigaragarira buri wese
Iki gice kigaragara kigaragaraho ibi bice:
< header > < /header > igaragaza umutwe w’urubuga hashobora kujyamo logo, ifishi yo gushakashaka(search form), izina rya kompani. Hari n'igihe hajyamo ihuza (navigation links)
< nav > < /nav > ni igice kigaragaza aho gukanda hajyana ku zindi mbuga cyangwa izindi nkuta z’urwo rubuga.
< aside > < /aside > igice kigizwe n’ibindi bifitanye isano itaziguye ni ibiri ku rubuga
< main > < /main > igice kibumbatira iby’ingenzi biri ku rubuga cyangwa kurukuta (paje)
< footer > < /footer > Imiterere y’igice kitagaraga gitanga amakuru y’Urubuga Hari ibimenyetso bikoreshwa mu rwego rwo gutanga amakuru y’urubuga.
Imiterere y’igice kitagaraga gitanga amakuru y’Urubuga
iki ni igice gitanga amakuru y'urubuga. Iyo ufunguye urubuga ntabwo uhita ubona ibikigize byose uretse umutwe w'urubuga ubona muri tab hejuru kuri mushakashatsi (browser). Hagaragaramo ibi bimenyetso bikurikira.
< title > < /title >
< meta ><link > Ibi biba mu gice kitagaragara cyandikwa hagati ya < head > na < /head >.
< head > < title > Iwacu Mu rugo < /title > < /head >
Aha kuba bumva ibijyanye no gukora imbuga zo kuri interineti ntabwo turi kuvuga database cyangwa seiveri ahubwo ni igice gifasha mushakashatsi(browser) kubona amakuru y'urubuga.
2. Ibikenewe ngo utangire
1. 5 akaranga(attributes)
Ni utujambo twongerwa mu bimenyetso bikoreshwa muri HTML. Akaranga gashyirwa mu gice gifungura ikimenyetso. Akaranga kagizwe n’izina n’agaciro k’iryo zina. Aha agaciro kagaragaza ikirakorwa. Ku kijyanye n’umumaro wako muri make gakoreshwa hagamijwe kongera, guhinda imikorere y’ikimenyetso cyangwa kakanoza isanzweho.
Urugero:
1.5.1 Ibikorwa biri bukorwe cyangwa byakozwe (Events)
Uturanga duhuza igikorwa n’ibirakorwa icyo gikozwe. Akenshi ibi bikorwa hifashijwe ururimi rwo gukora gahunda za mudasobwa bita JavaScript (JavaScript language).
Ingero: onClick
2. INGERO Z'IBYO TUGOMBA KUBA TWAKORA
2.1 Links (IHUZA)
Ihuza ikorwa n’ibimenyetso bitandukanye hagamijwe ko nihabaho gukanda ku ijambo ryabyo bikujyana ku rundi rubuga, urukuta (page), kuri jambo, ku nyandiko runaka n’ahandi. Ikimenyetso gikoreshwa cyane ni icyitwa anchor tag (ikimenyetso cy’inanga)
Urugero: < a href=“URL” title=“Description of link” > Ihuza < /a >
Ikindi kimenyetso ni icyitwa link
Urugero: < link href=“example.css” rel=“stylesheet” / >
< link href=“favicon.ico” rel=“icon” / >
< link href=“example.png” rel=“” sizes=“114x114” type=“image/png” / >
< link href=“example.css” rel=“stylesheet”
media=“screen and (max-width: 600px)” / >
rel=“preload”
as=“font”
crossorigin=“anonymous” akaranga kerekana niba ibikoresho igomba kuzuzwa hubahirizwa icyifuzo cya CORS.
URL (uniform Ressource Locator) ituyobora ku cyo twanditse muri iryo huza.
Mbese muri make ni aderese yaho dusanga ibikenewe gukoreshwa biri mu buryo butandukanye.
target=“_blank” igaragaza aho wifuza ko inyandiko ibitse ku ihuza yafungurirwa (_self, _blank, _parent, _top)
Uburyo bwo guhuza ibiri kuri pagi imwe
< a href=“#hello” > Muraho < /a >
< h1 id=“hello” > Murakoze kubana natwe < /h1 > gerageza gukoresha name mu mwanya wa id.
2.2 Imyandikire y’amagambo (Text Markup)
Hari ibimenyetso bikoreshwa mu rwego rwo kwandika magambo haba mu buryo busanzwe cyangwa se mu budasanzwe.
< b>
< i>
< del >
< mark >
< sub >
< sup >
< abbr >
2.3 URUTONDE
< ol >
< ul >
< li >
< dl >
< dt >
< dd >
2.4 KUZUZA IFISHI (FORMS)< form >
< input>
< label>
< button >
< textarea >
< fieldset >
< legend >
2.4 KUZUZA IMBONERAHAMWE< table >
< td >
< tr >
< th >
< thead >
< tbody >
< tfoot >
2.5 AMAFOTO(IMAGES)
Gushira ifoto (ishusho) ku urupapuro rw’urubuga wifashisha ikimenyetso cya
< img >
< img src=“url y’ifoto” alt=“Mu rugo iwacu” width=“120px” height=“120px” >
srcset ikoreshwa iyo ugiye gushira amafoto menshi icyarimwe muri mu kimenyetso cya
< img >
< figure >
< figcaption >
< map >
2.6 AMAJWI (AUDIO)< audio controls >
< source src=“url y’ijwi” type=“ubwoko bw’amajwi ibitsemo urugero audio/mpeg” >
< /audio >
Controls ifasha mu kugenzura amajwi: gukina, guhagarika, volume, kuvanaho amajwi, no kudawunilodinga (kuvanaho ku rubuga) Source ikoreshwa mu gusobanura inkomo ya dosiye (amajwi) url igaragaza aho ijwi rituruka n’izina Type igaragaza ubwo amajwi abitsemo
2.7 VIDEWO
< video width=“320” controls >
< source src=“url ya videwo” type=“video/mp4” >
< /video >
autoplay
loop
poster
crossorigin
IBINDI BIMENYETSO
Ibimenyetso byose ntitwabiga muri iyinyandiko kuko birenga ijana, ahubwo icyashirwa imbere ni ukumenya kubyandika hibandwa kumenya uko babifungura n’uko babifunga tutibagiwe uko uturanga twongerwamo. Izi ni izindi ngero z’ibimenyetso tutakwirengagiza:
< div >
< span >
<!-- -- >
< svg >
< canvas >
< map >
< object >
AHO GUSOMA
https://www.w3schools.com/tags/default.asp
Comments
Post a Comment