Gabatarwa
Gaba daya
Programming na Internet ya kunshi abubuwa ne guda 3:
1. HTML wanda
ake tsara yadda page zaya kasance
2. CSS wanda
ake amfani da shi wajen yin kwalliya a page din
3. Scripting
Language wanda ake amfani da shi domin sarrafa bayanai
A wannan Kwas, zamu yi Magana ne
kacokam akan HTML, wato yadda ake tsara web page.
Structure Of HTML
Kafin mu fara cewa komai anan, ya
kamata mu fara da yin bayani akan ma’anar HTML da kuma irin rawar da yake
takawa a fagen web design.
Shi dai HTML takaicewa ce ta Hypertext
MarkUp Language, wanda yake wani babban jigo a harkar yanar gizo. HTML
programming ne wanda yake bada damar hada duk wani bayani da ke a saman
Internet a waje guda ta yadda ko daga ina kake zaka iya samin wannan abin a
lokacin da ka bukace shi ta hanyar
amfani da adireshin wannan abin (misali Google search). HTML shine programming din da ake amfani da
shi wajen desingning din kusan duk wani abu da zaka iya gani a Internet, kamar yin rubutu, dora foto, dora video ko audio da
dai sauran files da zaka iya samu a saman Internet.
Structure
Idan aka yi maganar structure a nan,
ana nufin yanayin yadda tsarin HTML
yake. Wannan structure ko kuma tsari ya kunshi taswirar yadda HTML yake
kasancewa baki dayansa, komin yawansa kuma komin kadan dinsa.
Ga yadda tsarin yake:
<html>
<head> <title> (sunan page) </title> </head>
<body>
………………………………………
…………………………………………
……………………………………………
</body>
</html>
Duk wani
HTML da ka sani, komin yawanshi, zaka ga yana da siga da kuma tsari irin
wannan. Wadanna abubuwan da aka rubuta cikin bracket su ake kira da Tags. A
cikin darasin mu na gaba, zamu fede biri har wutsiya game da Tags da kuma
amfaninsu a HTML. Domin yin HTML a
wayarka sai kayi amfani da wani app mai suna AIDE Web, da Google ke samarwa. Akwai wasu app din da dama
masu yin HTML, zaka iya shiga Google
Store domin yin Download din wanda ka bukata.
A cikin
darussanmu na baya da suka gabata, mun yi maganane akan yadda zaku iya sanya
foto a cikin webpage, yanda zaku iya sanya link a cikin webpage, da kuma
yadda zaku iya sanya foto a matsayin
link wanda idan aka taba shi zaya kai ka zuwa ga wani page din. A cikin wannan darasi,
zamu tattauna ne akan yadda zaku iya sanya Navigation link, wato link wanda
zaya dauke ku daga bangare guda na page (misali saman page) zuwa wani bangaren
(misali Kasan page).
Shi wannan
Navigation link yana da matukar amfani, musamman ma idan page dinka yana dauke
da bayanai masu yawa ta yanda kafin ka iya zuwa kasrshen page din sai ka jima
kana tafiya (scrolling). Nevigation
link, kamar sauran link da muka fada a baya, ana sanya shine ta hanyar amfani
da link tag ( wato <a href=” “>… </a> ), sai dai shi navigation link a maimakon sanya adreshin
wani site cikin href=” “ din, ana
sanya sunan bangaren page din da ake son zuwa. Baya ga wannan kuma, navigation
link ana rubuta shi ne a waje biyu (wajen da kake son bari da kuma wajen da
kake son zuwa).
Ana rubuta
navigation link kamar haka:
<a
name=”sashen page”> </a> (zaka
rubuta wannan a inda kake son matsawa)
<a
href=”#sashen page”> Sashe</a>
(zaka rubuta wannan a inda kake so bari)
Abin da za’a
kula da shi anan shine, a layin farko kamar kana creating ko kuma kirkirar
adreshin wajen da kake son zuwa ko kuma matsawa a cikin page din ne, a yayin da a layi na biyu kuma kana sanya
adreshin ne na inda kake son zuwa (kamar yadda yake a sauran link din da muka
gabatar).
Mislali:
Idan kana so ka sanya link din da zaya dauki mutum daga saman
page zuwa kasan page, zaka bi wannan matakan kamar haka:
1.
Ka je kasan page ka kirkiri adreshin kamar haka: <a
name=”kasa”></a>
2. Sai ka je a
saman page din ka sanya adreshin da kirkira kamar haka:
<a href=”#kasa”>Kasan page</a>
Idan kuma kana bukatar komawa saman
page daga kasan page, to html din zaya kasance kamar haka:
1.
A saman page din zaka sanya: <a
name=”sama”></a>
2. A kasa kuma
(wajen da kake son barowa) zaka sa:
<a href=”#sama”>Koma sama</a>
A
kula da cewa, layin farko zaka sanya shi ne a wajen da kake son zuwa, layi na
biyu kuma ana sanya shi ne a inda kake son barowa. Ka tabbatar kuma sunan da ka
sanya a cikin attribute din name na layi na farko shine ka sanya a
cikin href=” “ attribute (amma sai
ka sanya # wajen sunan a layi na
biyu).
Practical
A cikin wannan practical, zamu
sanya navigation link a sama da kuma
kasan page din, sai a kula sosai domin rabe tsakani aya da kuma tsakuwa.
<html>
<head><title>Navigation
Link</title></head>
<body bgcolor=”green”>
<a
href=”#kasa”>Koma kasa</a>
<a
name=”sama”></a>
<font
color=”white” size=”20px”>
<p> A cikin darussan na baya da suka
gabata, mun yi maganan akan yadda zaku iya sanya foto a cikin webpage, yanda
zaku iya sanya link a cikin webpage, da kuma yadda zaku iya sanya foto a matsayin link wanda
idan aka taba shi zaya kai ka zuwa ga wani page din. A cikin wannan darasi,
zamu tattauna ne akan yadda iya sanya Navigation link, wato link wanda zaya
dauke ka daga bangare guda na page (misali saman page) zuwa wani bangaren
(misali Kasan page). </p>
<p>Shi wannan Navigation link yana da
matukar amfani, musamman ma idan page dinka yana dauke da bayanai masu yawa ta
yanda kafin ka iya zuwa kasrshen page din sai ka jima kana tafiya (scrolling). </p> </font>
<a
href=”#sama”>Koma sama</a>
<a
name=”kasa”></a>
</body>
</html>
Idan aka rona shi zaya bada kamar
haka:
 |
| Ga link din can daga sama inda aka sanya "koma kasa" |
Link and Image Link
A cikin darasinmu
da ya gabta, mun tattauna ne akan <img
…/> ko kuma image tag, wanda ake amfani da shi wajen sanya foto a cikin
page. A cikin darasinmu na wannan lokaci, zamu tattauna ne akan yadda ake
rubuta link a cikin page da kuma yadda sanya foto ya zama a matsayi link
(maimakon rubutu).
Link
A wannan
lokacin da muke ciki, babu wani website da zaka shiga ba tare da ka sami link a
cikinsa. Kuma zai yi matukar wahala ka shiga ko wane website yanzu ka fito ba tare da ka yi amafani da
wani link daga cikin links din da ke cikin website din.
Ba komai ne
ake kira da link ba sai wannan rubutun da kake gani a cikin website wanda idan
ka taba ko kuma ka dannan OK a samansa, zaya
daukeka daga wani bangare na website din zuwa wani bangaren, ko kuma ma
daga wani website din zuwa wani. Misali, a cikin Facebook, za ka iya samun
links da dama irin su Home, Profile, Notifications, Message, da dai sauransu.
Ko wane daga cikin wannan link din idan ka taba shi ko kuma ka dannan shi zaya
daukeka zuwa wani page din na daban.
Ga yadda ake
rubuta link kamar haka:
<a href=”adreshi” > sunan da zaya fito saman screen
</a>
Idan kun
kula zaku ga shi wannan yana da Opening da Closing tag, ba kamar img tag ba.
href=”
“ shine attribute da zaka yi amfani da shi domin sanya adreshin wajen da
mutum zaya koma idan ya dannan sunan da ka rubuta wa link. Kuma ana sanya shi
href=” “ attribute ne a cikin opening tag din, wato cikin <a > . Shi kuma sunan da ake bukatar ya fito saman screen
shine ake rubutawa tsakani Opening da kuma Closing tags din.
Misali, idan zaka rubuta adreshin
facebook, za sanya shine kamar haka:
A kula, adreshin da muka rubuta ba
shine zaya fito a saman screen ba, sunan da muka sanya a tsakiyar Opening da
Closing tags (wato Facebook), shine
zaya fito kuma idan ka taba sunan, zaya dauke ka daga inda kake zuwa shafin
Facebook. Duk adreshin da zaka rubuta, dole ne ka sanya http:// sannan ka sanya adreshin.
Wasu lokuta ana iya sanya link a cikin
labarin da kake karantawa. Misali akwai inda zaka ga cikin kasida ko kuma wani
abu da kake karantawa a website an
ce: Idan kana son Karin bayani to shiga nan. Mafi yawanci za ga cewa,
jikin Kalmar karshe (nan) ne akan sanya link din ta yadda idan ka taba Kalmar
zaka shiga wajen da Karin bayanin yake.
Misali:-
<html>
<head><title> Shafi
</title></head>
<body bgcolor=”yellow”>
<br/>
<a
href=”http://www.google.com”>
Google</a>
<br/>
<a
href=”http://www.konga.com”>
Konga</a>
</body>
</html>
Image Link
A maimakon
sanya rubutun ko kuma sunan link, zaka iya amfani da foto ta yanda idan mutum
ya taba ko kuma ya danna saman foton, zaya iya shiga wannan shafi. Akwai
shafuka dama wadanda sukan yi amfani da foto wajen sanya link, a maimakon suna.
Idan kana bukatar sanya foto a wajen link zaka maye sunan link din ne da <img …/> tag kamar haka:
<html>
<head><title> Shafi
</title></head>
<body bgcolor=”yellow”>
<a
href=”http://www.sadarwa.wordpress.com”
> <img
src=”C:/users/public/desktop/sadarwa.jpg”/> </a>
<br/>
<br/>
</body>
</html>
Exercise
1. Ka rubuta
html da zaya nuna links din websites din twitter, mtn, airtel, inec.
2. Ka sake
rubuta html din, ko wane link ka sanya mashi hoton websites din (wato foton
twitter, mtn, airtel da kuma inec).
Comments
Post a Comment