Web Design A Harshen Hausa2

HTML – Gabatarwa.
08139672022
WEB DESIGN A HARSHEN HAUSA – ga ‘yan koyo.

DARASIN HTML (Hyper Text Markup Language) A TAKAICE
Kashi na farko
HTML:
HTML yana nufin Hypertext markup Language wanda ake amfani dashi sosai
domin gina web page. An kirkireshi ne a 1991 daga Berners-Lee.
Me Hyper Text Markup Languge yake nufi?
Hyper yana nufin hanyar da akabi wagen hada shafuka a waje guda, maana daga
wannan shafin zuwa wancan. Ana amfani da Hypertext ne wajen hada wannan
shafi da kuma wani.
Markup Language: shine tsara rubutu da sauran duk abuwan da ake gani web site
ta hanyar amfani da wadansu abubuwa da ake cewa tags
Me yasa ake koyon HTML?
Saboda an kirkireshi ne domin gina sura na web page kamar su heading, hoto,
video da sauransu ta hanyar amfani ta tags dinsu mabanbanta.
I. Domin kirkirar web site
II. Fahimtar web site
III. Don ya taimaka wajen koyon wadansu languages din.
HTML ba programming language bane.
Abubuwan da ake bukata:
I. Editor (notepad,notepad++,sublime,atom,ko visual studio code da sauransu).
Masu android suna iya amfani da Acode ko anwriter ko kuma editor da suka
fi so
II. Browser (chrome,opera da sauransu)
Da farko za a bude editor, sai ayi creating na file a sanya masa suna
(myWebsite.html) sai ayi saving. Daganan sai a rubuta wadannan:
<!DOCTYPE html>
<html>
HTML – Gabatarwa. 08139672022
<head>
<title>my web site</title>
</head>
<body>
<h1>Wannan shine head one</h1>

<p> Wannan shine paragraph </p>
</body>
</html>
Daganan sai aje inda akayi saving dinsa sai a danna shi to zai bude kai tsaye zuwa
ga browser:
Bayan browser ta bude zaa ga bayanin kamar hotom dake a asama. Kowane html
haka zamu rinka rubutashi domin saurin fahimta.
Bayani akan misali:
1 <!DOCTYPE html> tag a layi na farko, amfanisa shine yana fadawa duk wata
browser da ta ziyarci wannan shafin cewa wannan shafin an rubutashi ne da
HTML. Don haka zatayi kokarin budeshi a matsayin html document
2. <html> tag (layi na 2 zuwa karshen wato layi na 13): Wannan shine kamar
tushen HTML, kowane tag dolene ya kasance a cikinsa. Yana da opening
tag(<html>) da kuma closing tag (</html>). To kowane dolene ya kasance a
tsakanin opening tag(<html>) da closing tag(</html>) na wannan html din.
Maana dai shine uba
3. <head> tag; shi wannan yana daukar bayanai na web page kamar su meta tags
da style da title. Shima yana da opening(<head>) da kuma closing tag(</head>
kamar sauran html tags
4. <title>my web site</title> Ana amfani dashi wajen taken web page,
kuma yana kasancewa a tsakani opening da closing tag na head: misali:
<head>
<title>my web site</title>
</head>
5: <body> yana dauke da duk gaba dayan page, kamar wani mazubi ne da ake
sanya duk wani abu da ake iya gani a web page; kamar su hoto, vidoo, table da
sauransu. Yana da opening tag <body> da kuma closing tag </body> kowane tag
da ake so ya fito a web page to yana kasance a cikin wannan tag din wato
<body>
</body>
6 <h1>Wannan shine head one</h1> yana dauke da rubutu wanda ya kasance

mai girma. Yana da opening <h1> da kuma closing tag </h1>. Akwai
<h1>,<h2>,<h3> zuwa <h6>. <h1> shine mafi girma. Wajen heading na web page
7 <p> paragraph, shima yana da openin da kuma closing tag </p>. ana amfani
dashi wajen rubuta wani rubutu da ake so ya fito
MENENE ATTRIBUTE?
Attribute wadansu kalmomine da suke kara bayani akan element: misali
Idan aka lura a ciki <h3> tag akwai align,id,class da style. To wadannan sune ake
cema attribute. Suna karawa element bayani ko kuma canzawa element yanayi:
Attribute da akafi amfani dasu:
1. Id
2. Class
3. Style
4. Title
A hankali zamu fahimci amfaninsu a CSS da JavaScript.
1- id attribute na HTML tag ana amfani dashi wajen bambance wani HTML tag da
wani HTML tag, koda sun kasance suna da suna iri daya. Idan aka sanyawa HTML
tag attribute na id to za a iya bambantashi da sauransa html tag. Ana amfani dashi
wajen yin style ga wani tag shi kadai.: ana amfani dashi a CSS da javascript. Idan
zaa hadashi da CSS to ana kiranshi da (#) sai sunan id din.
2- class attribute ana amfani dashi domin hadashi da CSS ko javascript, idan zaa
hada shi da CSS to ana kiranshi da (.) sai sunan class din.
3- style ana amfani da wannan attribute wajen yima element style shi kadai: misali;
<p style="color: red;"> red color kenan </p>
KADAN DAGA HTML TAGS DA BAYANISU A TAKAICE

<!—wannan shine comment.-->
Domin comment a html document
<!DOCTYPE html>
Yana bayyanama browser cewa wannan document na html ne
<a>
Wannan shine anchor tag ana amfani dashi wajen link zuwa internal/external
Link. Misali:
<a href="facebokk.com/programmer mlf">my profile</a>
Yana da attribute nah ref wanda anan ake sanya link din da ake so user yaje.
Misali a wannan idan user ya danna shi to zai kaishi profile na facebook (programmer
mlg)
<abbr>
Ana amfani dashi wajen abbreviation amma ba a amfani dashi a HTML 5
version. Misali:
<p> ina son labaran <abbr>BBC</abbr> </p>
<address>
Ana amfani dashi wajenwajen sanya bayani na adireshi: misali.
<address>no 45 abcd way, lagos</address>
<applet>
Ana amfani dashi wajen embedded applet. Shi embedded applet ana
rubutashi da java programming sai a sanya shi a HTML kamar yadda yake
including video ko pictires. Zamuyi bayaninta a darasi na manya, yadda ake
rubuta java program (Applet/JApplet)
<area>
Ana amfani dashi domin gano wataa area a hoto
<article>
Yana nufin kamar wani madauki da yake daukar wasu rubutu kamara a blog
wanda user zaiyi ta karanta yana scrollin da sama zuwa kasa(overflow-y)
<audio>
Ana amfani dashi sanya sauti kamar waka. Yana da attribute na
src,controls,autoplay,loop da sauransu; misali
<audio src="mymusic.mp3" controls>
src yana daukar location da sound din yake (wato path). Sai
controls yana bayyana su play, pause, stop da volume button da
kuma sauransu. Akwai autoplay wanda yake sound din yayi playin da
kanshi da zarar web page ya bude, zamuyi cikakken bayaninsa
<b>
Bold: ana amfani dashi wajen maida rubuta yayi color sosai a kowace irin
color zai kara mata armashi. Misali:
<b> this text is in bold </b>
<blockquote>
Ana amfani dashi wajen sanyo wani link zuwa page, misali idan zaka iya
dauko link na video da YouTube sai kasa a website dinka. Misali
<blockquote cite=”youtube.com/yd3bx”></blockquote>
<body>
Wannan shine body duk wadansu tag ana sanya su ne a cikin wanna tag din:
misali:
<!DOCTYPE html>
<html>
<head>
<title>Body</title>
</head>
<body>
<h1> Ina son HTML </h1>
</body>
</html>
<br />
Ana amfasni dashi wajen break na layi, idan ka rubuta rubutu a layi daya to
sai kasa <br> idan kana son rubutun ya dawo a sabon layi
<!DOCTYPE html>
<html>
<head>
<title>Body</title>
</head>
<body>
<p> A quick brown fox jumps over the <br>lazy dog</p>
</body>
</html>
<button>
Kamar yadda kuka gani daga sunansa yana baiyana button ne wato madanni
da ake iya dannawa domin wani abu. Misali:
<!DOCTYPE html>
<html>
<head>
<title>Body</title>
</head>
<body>
<button>call me</button>
</body>
</html>
<canvas>
Yana amfani wajen sanya graphics a web page. Shi wannnan sabon tag ne da
aka fara amfani dashi a HTML 5 version zamu nuna misalinshi a gaba
<caption>
An amfani dashi wajen table don bayanin abinda table ya kunsa. Zamu kawo
misalinshi a karkashin table
<center>
Ana amfani dashi wajen maida abu a center. Misali idan kana son komai ya
kasance a tsakiyar brownser to sai kayi; amma an cireshi a yanzu
<!DOCTYPE html>
<html>
<head>
<title>Body</title>
</head>
<body>
<center>
<h1>head one</h1>
<p>paragraph</p>
</center>
</body>
</html>
<code>
Yana mayar da text zuwa computer code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport"
content="width=device-width,initial-scale=1">
<title>Body</title>
</head>
<body>
<center>
<h4>A danna <code>ctr+c</code> don copy</h4>
</center>
</body>
</html>
<dd>
Yana bayyana data definition na data list: misali
<!DOCTYPE html>
<html>
<head>
<title>Body</title>
</head>
<body>
<center>
<dl>
<dt>Phone</dt>
<dd>android</dd>
<dd>Tablet</dd>
<dd>Key pad</dd>
<dt>Fruit</dt>
<dd>Mango</dd>
<dd>Banana</dd>
<dd>Apple</dd>
</dl>
</center>
</body>
</html>
<del>
Yana bayyana rubutun da aka goge. Misali:
<!DOCTYPE html>
<html>
<head>
<title>Body</title>
</head>
<body>
<p>wannan rubutun <del>an goge shi</del></p>
</body>
</html>
<details>
Ana amfani dashi wajen nuna bayani na wani abu wanda user yana iya gane
ko kuma ya boyeshi
<div>
Wannan kamar wata container ce mai zaman kanta wacce take kunsar
watansu tag din. A takaice dai division. Ana amfani da ita wajen rarraba web
page zuwa yadda ake so.
<em>
Yana nufin emphasize, domin canza text zuwa emphasize
<embed>
Ana amfani da ita embed tag wajen sanyo wani abu daga wani web site ko
application zuwa web page. Zamuyi amfani dashi anan gaba.
<fieldset>
Fieldset tana hada element na form a waje daya. Tana da border. A duba a
karkashin misali na form don ganin yadda take
<footer>
Footer tag yana kasancewa akasan web page inda yake dauke da wanda ya
gina web page da links (quick links) da copyright da sauransu. Kamar <div>
yake domin yana zaman kansa ta yadda zai iya daukar wasu tag a cikinsa
<form>
Yana bayyana form wanda zai bada dama ga duk wanda shiga shafi ya cike
wannan form din yayi submit zuwa database ko kuma yadda aka tsara shi.
Yana da attribute kamar action(wato inda bayanai zasu tafi idan anyi submit)
da method wato a sigar da ake so form din ya tafi (POST/GET) da sauransu.
Misali:
<!DOCTYPE html>
<html>
<head>
<title>Body</title>
</head>
<body>
<center>
<form action="checking.php" method="POST">
<fieldset>
<legend>Login Form</legend>
<input type="text" placeholder="your
username"><br><br>
<input type="password"
placeholder="password"><br><br>
<input type="submit" value="Login">

</fieldset>
</form>
</center>
</body>
</html>
<head>
Wannan shine head tag yana zuwa ne bayan <html> opening tag yana dauke
da <title> tag da meta tag, da style tag. Yana kasancewa ne a sama
<header>
Yana bayyana header, maana kamar top nav inda zaka ga an sanya su
(home,about,contact, da sauransu). An fara amfani dashi a sabon html wato
HTML 5
<hr />
<hr> tag a takaice yana zana layi ne. misali idan kana son yima rubutu layi
ko raba wani rubutu da wani ta hanyar sanya layi a tsakaninsu to sai kayi
amfani da wannan. – Ta kwance yake jan layin kuma bashi da closing
tag(wato </hr>). Misali:
<!DOCTYPE html>
<html>
<head>
<title>Body</title>
</head>
<body>
<center>
<h1>Head 3</h1><hr>
<h3>C is like sea</h3>
</center>
</body>
</html>
<html>
Shine tag na farko ta ake fara sanyawa bayan <!DOCTYPE html>, yana
baiyanawa browser cewa wannan rubutun dake a tsakani <html> har zuwa
</html> cewa html document ne, don haka zata maidasi html output, ana iya
sanya mashi language( <html lang=”eng”>) ta yadda duk abinf=da aka
rubuta koda da hausa ne to browser zatayi kokoari wajen juyashi zuwa
turanci
<i>
<i> tag yana maida rubutu italic. Misali <i> wannan rubutun italic ne </i>
Output: wannan rubutun italic ne
<iframe>
Zamuyi amfani dashi anan gaba. Shima kamar embed yake
<img>
<img> tag ana amfani dashi wajen sanya hoto a web page. Misali:
<!DOCTYPE html>
<html>
<head>
<title>image</title>
<style>
img{
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<img src="C:\Users\nafiu\Pictures\music sign.jpg"
alt="my photo bai fito ba">
</body>
</html>
Yana da attribute src wanda yake nuna paths din da hoto yake, zaka rubuta
path din hoto sannan browser zata bude hoton, sai alt attribute shi amfaninsa
shine idan hoto bai samu damar fitowa ba to sai wannan rubutu (value) na alt
attribute ya fito
<input>
Yana baiyana wani waje da yake bada damar cikewa. maaana a rubuta wani
abu kamar idan ana so wanda ya ziyarci shafi ya sanya email, ko number, da
sauransu.
Ana sanyashi ne a form: misali:
<!DOCTYPE html>
<html>
<head>
<title>my form</title>
</head>
<body>
<form>
<input type="button"><br>
<input type="checkbox"><br>
<input type="color"><br>
<input type="date"><br>
<input type="datetime-local"><br>
<input type="email"><br>
<input type="file"><br>
<input type="hidden"><br>
<input type="image"><br>
<input type="month"><br>
<input type="number"><br>
<input type="password"><br>
<input type="radio"><br>
<input type="range"><br>
<input type="reset"><br>
<input type="search"><br>
<input type="submit"><br>
<input type="tel"><br>
<input type="text" placeholder="sanya suna anan"><br>
<input type="time"><br>
<input type="url"><br>
<input type="week"><br>
</form>
</body>
</html>
Result na inputs tag

Input tag bashi da closing tag kamar wadansu tags din, yana da attribute
kamar su type, placeholder, name, max-length, min-length, da sauransu
<kbd>
Ana amfani da <kbd> tag wajen bayyana rubutu da siga irin ta computer key
Board; misali;
<p> Danna<kbd> Ctr+V </kbd> domin yin paste</p>
<label>
Ana amfani da <label> tag wajen bayyanawa user(wato wanda ya ziyarshi
web page) abinda ake bukata user ya cike a wajen <input> na form, Misali:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-
width,minimum-scale=1,initial-scale=1">
</head>
<body>
<form>
<label>Username</label><br>
<input type="text" placeholder="your username"><br><br>
<label>Phone Number</label><br>
<input type="number" placeholder="08139672022"><br><br>
<input type="button" value="Shiga Ciki">
</form>
</body>
</html>
<legend>
Ana amfani da <legend> wajen sanya form tittle ko kuma ayi grouping din
inputs sai ayi masu titile ana hadashi da <fieldset>. <fieldset> shine uba sai
shi kuma <label> a matsayi da.: misali:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<fieldset>
<legend>your details</legend>
<label>Username</label><br>
<input type="text" placeholder="your username"><br><br>
<label>Phone Number</label><br>
<input type="number" placeholder="08139672022"><br><br>
</fieldset>
<fieldset>
<legend>Gender</legend>
<label>
<input type="radio" name="gender"> Male
</label><br>
<label>
<input type="radio" name="gender"> Female
</label>
</fieldset><br>
<input type="button" value="Shiga Ciki">
</form>
</body>
</html>
Fieldeset da legend
<li>
Yana bayyana jerin abubuwa kama lists. Ana amfani dashi idan ana son a
jero abubuwa ko a number ko alphabet. Ana sanyashi a cikin <ul> </ul>
(unordered list tag, wato mara nambobi ko alphabet) ko <ol> </ol> (order
list tag wato mai nambobi ko alphabet). Misali
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li>unorder list 1</li>
</ul>
<ol>
<li>order list 1</li>
</ol>
</body>
</html>
Misalin Unordered da kuma order list.

Kada a manta kowane yana daukar <li></li> (list item) tag
<link>
Ana amfani dashi wajen sanyo css file izuwa web page. Misali idan akayi
HTML file daban sai akayi CSS file daban to sai ayi amfani da wannan a
cikin HTML don a sanyo CSS izuwa ciki. Yana da attribute da misali kamar
haka:
<link rel="stylesheet" type="text/css" href="mystylefile.css">
Wanda yake da blue rubutu sune attribute dinshi, wato rel,type,href. Href
shine yake dauke da suna CSS file din
<mark>
Ana amfasni da mark tag wajen highlight na rubutu. misali:
<p>wannan shine <mark>misalin</mark> mark tag </p>
<meta>
Ana amfani da meta tag wajen baiyana wa yadda browser zatayi wani aiki,
ko kuma baiyana bayanai akan web page. Shi wannan tag din baya fitar da
output ga user. Zamuyi bayaninshi a cike a nan gaba zamuyi amfani dashi
wajen sanya browser tayi refresh a duk bayan second 20 da sauransu
<nav>
Ana amfani da nav tag wajen jeru links ta yadda user zai shiga duk inda yake
so. Suna zuwane a jere kuma a tsari. Misali:
<!DOCTYPE html>
<html>
<head>
content="width=device-width,minimum-scale=1,initial-
scale=1">
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</body>
</html>
Nav example
<noframes>
A baya munyi Magana a kan frames, to amfanin shi wannan noframes tag
din shine duk browser da bata iya bude frame to sai ta bude rubutun dake a
tsakanin shi wannan tag din <noframe>your browser will not open
frame<noframe>.
<noscript>
shima kamar noframes yake, duk browser da bata iya muamala da JavaScript
to zaayi da wannan tags din wajen baiyanama user cewa browser shi bata
JavaScript. Zamuyi bayaninshi a JavaScript
<object>
Ana amfani dashi wajen embed na video, hoto, sound ko java applet(zamuyi
cikakken bayaninta ita) ko animation
<ol>
<ol>(order list) taga ana amfani dashi wajen jero abubuwa kamar <ul>,
amma sai dai shi yana sanya number ko alphabet ga abubuwan da aka jero.
Misali:
<!DOCTYPE html>
<html>
<head>
scale=1">
</head>
<body>
<ol style="list-style-type: lower-roman;">

<li>na farko</li>
<li>na biyu</li>
<li>na uku</li>
</ol>
</body>
</html>
<optgroup>
Ana amfani dashine wajen hada option da yawa a waje daya, ta yadda user
zai fahimci ko kuma ya zabi abu da yawa daga ciki jerin abin zama. Ana
amfani dashi a form kuma a cikin <select> tag, misali:
<!DOCTYPE html>
<html>
<head>
scale=1">
<title>option group</title>
</head>
<body>
<form>
<select>
<option>Computer</option>
<optgroup>
<option>Rice</option>
<option>Beans</option>
</optgroup>
<option>Drinks</option>
</select>
</form>
</body>
</html>
KARSHE!.. Akwai sauran ci gaba na html tags da bayaninsu a
takaice insha Allah Akashi na biyu……… sai kuma cikakken
bayanin attribute na kowane da alakarsu. Daganan sai yadda
ake shiryasu da css har izuwa JavaScript da kuma gina
cikakken web site. Kada a manta mai android yana iya amfani
da acode ko anwriter editor: kamar haka:
Sai kayi saving kaje inda kayi saving dinsa sai ka bude ko
kuma ka danna alamar play button don ganin sakamako kamar
haka. Nagode sai mun hadu a gabatarwa na gaba.
Ga duk wanda bai fahimta ba ko Karin bayani,gyara,shawara ga

whatsapp number 08139672022. Ko kuma a whatsapp group na
darasi da tambayoyi
<!DOCTYPE html>
<html>
<head>
<title>godiya</title>
</head>
<body style="text-align: center;">
<h1>Nagode</h1>
<h2>Nagode</h2>
<h3>Nagode</h3>
<h4>Nagode</h4>
<h4>Nagode</h4>
<h5>Nagode</h5>
<h6>Nagode</h6>
</body>
</html>

Web Design A Harshen Hausa2

Uploaded by

Copyright:

Available Formats

Web Design A Harshen Hausa2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Design A Harshen Hausa2

Uploaded by

Copyright:

Available Formats

HTML – Gabatarwa.

WEB DESIGN A HARSHEN HAUSA – ga ‘yan koyo.

<h1>Wannan shine head one</h1>

6 <h1>Wannan shine head one</h1> yana dauke da rubutu wanda ya kasance

KADAN DAGA HTML TAGS DA BAYANISU A TAKAICE

<p> ina son labaran <abbr>BBC</abbr> </p>

<input type="submit" value="Login">

Result na inputs tag

<input type="button" value="Shiga Ciki">

<input type="button" value="Shiga Ciki">

Misalin Unordered da kuma order list.

Kada a manta kowane yana daukar <li></li> (list item) tag

<ol style="list-style-type: lower-roman;">

Ga duk wanda bai fahimta ba ko Karin bayani,gyara,shawara ga

You might also like