HTML5-CSS3 Eskuliburua

Dolaretxe-R400
SARRERA
Eskuliburu honen helburua web-orriak nola sortu irakastea da; Lanbide Heziketako goi-
mailako Web-interfazeen Diseinua moduluko ikasleentzat dago prestatuta, hain zuzen.
Hala ere, nahiz eta ikasleentzat bideratuta egon, edonork erabil dezake eskuliburu hau;
bertan, pausoz pauso azalduko dugu nola sortu behar den HTML5en estruktura eta
nola diseinatu eta maketatu behar dugun web-orria CSS3a erabilita.
Nahiz eta web-orriak nola sortzen diren azaltzeko liburu eta web-orri asko egon,
gehienak erdaraz daude. Hortik dator HTML5eko eta CSS3ko eskuliburu bat euskaraz
egiteko premia. Horretaz gain, ahalik eta euskara ulergarrienean idaztea erabaki dugu.
Lanak atal bi ditu: bata azalpen idatzizkoa da, eta bestea, azalpenaren gainean
eraikitako adibideak. Adibideak Mozilla Firefoxen irekitzea komeni da. Editatu nahi
izanez gero, HTMLko edozein editore erabil daiteke.
Eskerrak eman nahi dizkiet IRALE-Dolaretxeko irakasleei izan duten pazientziarengatik

eta emandako aholkuengatik.
Material hau sortzeko, web-orri batzuk erabili ditut erreferentzia gisa:
https://adegiusti.files.wordpress.com/2013/09/el-gran-libro-de-html5-css3-y-
javascript.pdf
http://www.w3schools.com/
https://developer.mozilla.org/es/docs/HTML/HTML5
https://developer.mozilla.org/es/docs/Web/CSS
http://www.destacaimagen.com/diseno-y-maquetacion-web-smartphones-y-tablets/
Esteban Garitagoitia Elgoibar | HTML5 – CSS3 Eskuliburua 1

AURKIBIDEA
SARRERA ...................................................................................... 1
1. HTML5 DOKUMENTUAK ...................................................... 5
1.1. DEFINIZIOA .................................................................................... 5
1.2. OINARRIAK ..................................................................................... 5
1.3. ESTRUKTURA .................................................................................. 6
1.3.1. ETIKETAK ..................................................................................................... 6
1.3.2. ATRIBUTUAK ............................................................................................... 8
1.4. DOKUMENTUKO ATALAK ZEHAZTEN ............................................ 10
1.4.1. <!DOCTYPE> .......................................................................................... 10
1.4.2. <html> .................................................................................................... 10
1.4.3. <head> .................................................................................................... 10
1.4.4. <body> .................................................................................................... 12
1.5. GORPUTZA ANTOLATZEN ............................................................. 12
1.6. GORPUTZAREN EDUKIA................................................................ 18
1.7. ARIKETAK ..................................................................................... 33
2. CSS3 ESTILOAK ................................................................... 34
2.1. DEFINIZIOA .................................................................................. 34
2.1.1. ARAUAK .................................................................................................... 34
2.1.2. PROPIETATEAK .......................................................................................... 36
2.2. ERREFERENTZIAK ......................................................................... 38
2.3. DOKUMENTUARI CSS ESTILOAK EZARTZEN .................................. 47
2.4. KAXAK DISEINATZEN .................................................................... 50
2.4.1. KAXA ARRUNTA edo BOX MODEL EREDUA .............................................. 52
2.4.2. BOX-SIZING EREDUA (Kaxei tamaina ezartzea) ........................................ 53
2.4.3. KAXA MALGUA EDO FLEX-BOX EREDUA ................................................. 55
2.5. ARIKETAK ..................................................................................... 69
3. CSS3REN PROPIETATE BERRIAK ......................................... 70
3.1. ARAU BERRIAK ............................................................................. 70
3.1.1. border-radius PROPIETATEA............................................................ 70
3.1.2. box-shadow PROPIETATEA ................................................................... 71
3.1.3. text-shadow PROPIETATEA ................................................................ 72

3.1.4. @font-face ARAUA.............................................................................. 73
3.1.5. linear-gradient .............................................................................. 75
3.1.6. radial-gradient .............................................................................. 75
3.1.7. rgba......................................................................................................... 77
3.1.8. hsla......................................................................................................... 78
3.1.9. outline PROPIETATEA .......................................................................... 78
3.1.10. border-image PROPIETATEA ......................................................... 79
3.1.11. background PROPIETATEA .............................................................. 80
3.1.12. transform PROPIETATEA.................................................................. 84
3.2. HIRU DIMENTSIOKO (3D) TRANSFORMAZIOAK ............................ 90
3.2.1. perspective() ................................................................................... 90
3.2.2. translate3d(x, y, z) .................................................................. 90
3.2.3. scale3d(x, y, z) ............................................................................ 91
3.2.4. rotate3d(x, y, z, angelua) .................................................... 91
3.2.5. BESTE PROPIETATE BATZUK ........................................................... 93
3.3. TRANTSIZIOAK.............................................................................. 94
3.3.1. TRANTSIZIOETAN BAKARKA DEFINITZEN DIREN PROPIETATEAK ............. 96
3.3.2. TRANTSIZIOAREN ABIADURAUNEAK ZEHAZTEKO FUNTZIOAK
(transition-timing-function).............................................................. 99
3.4. ANIMAZIOAK .............................................................................. 101
3.4.1. animation........................................................................................... 101
3.4.2. @keyframes ........................................................................................ 104
3.5. KAPITULU HONETAN PROPOSATUTAKO ARIKETAK. ................... 109
4. WEB-ORRI MOLDAGARRIAK............................................. 110
4.1. DEFINIZIOA ................................................................................ 110
4.2. WEB-ORRI MOLDAGARRIEN EKARPENA ..................................... 111
4.3. WEB-ORRI MOLDAGARRIAK EGITEKO AHOLKUAK ...................... 111
4.4. WEB-ORRI MOLDAGARRIAK OPTIMIZATZEKO ZUTABEAK .......... 113
4.5. WEB-ORRI MOLDAGARRIAK SORTZEKO PAUSUAK ..................... 114
4.6. Media Queries ........................................................................... 115
4.7. WEB-ORRIA MAKETATZEN ......................................................... 123
4.8. GAILUEN TAMAINAK .................................................................. 123
4.9. KAPITULU HONETAN PROPOSATUTAKO ARIKETAK. ................... 129

5. WEB-ORRIAREN ADIBIDEA ............................................... 130
5.1 . ZER EGINGO DUGU? ................................................................. 130
5.1.1. Web-orriaren zirriborroa egin ................................................................ 130
5.1.2. Zirriborroaren HTMLko estruktura sortu ............................................... 132
5.1.3. HTML dokumentuari CSS estiloak ezarri. ............................................... 134
5.2. KAPITULU HONETAN PROPOSATUTAKO ARIKETAK .................... 139

1. HTML5 DOKUMENTUAK
1.1. DEFINIZIOA
HTML5 (HyperText Markup Language, 5. bertsioa) web-orriak diseinatzeko erabiltzen
den lengoaia da. Lengoaiarik arruntena denez, web-orri gehienak hizkuntza horretan
daude idatzita; hau da, nabigatzaileek bistaratzen dizkiguten web-orrien informazioa
HTML lengoaian dago idatzita. HTMLren bidez, web-orriak egituratzen dira, eta, haren
etiketa semantikoen bidez, nabigatzaileak zer bistaratu behar duen.
Beste programa askotan zer edo zer txarto kodifikatuta badago, eten egiten da
bistaratzea, eta ez du aurrera jarraitzen; HTML lengoaian, ordea, txarto kodifikatuta
dagoena ez da nabigatzaileetan bistaratuko, baina nabigatzaileek jarraituko dute ondo
dagoen kodea bistaratzen.
1.2. OINARRIAK
Lengoaia honek lehengo HTML bertsioa du oraindik oinarri, eta hobekuntzak gehitu
zaizkio denboran zehar. Aldakuntza horiei esker, web-orrien diseinatzaileek errazago
egiten dute lan, azken bertsio honen estruktura garbiagoa eta antolatuagoa delako.
Bi ezaugarri gehitu zaizkio aurreko bertsioari:
atributu, elementu eta portaera berriak
teknologia berriak (Canvas, API…).
Ezaugarri horiei esker, HTMLk ez du bestelako kanpo-teknologiarik behar, bere barruko

baliabideen bidez kapaz delako kanpo-teknologiek eskaintzen dutena egiteko.
Adibidez, lehenago, animazioak ikusteko, Flash Player softwarea eduki behar genuen
instalatuta, baina, bertsio honekin, HTML5ek berak onartzen du animazioa ikustea.
Gainera, era askotako webguneak eta aplikazioak egin ditzakegu, eta edozein
euskarriren pantailara egokitu web-orriaren diseinua.
Bertsio hau Open Web 1 garatzaile guztiek erabiltzeko dago diseinatuta. Orri horretan
sartuz gero, irakurriko dugu zer baliabide erabiltzen diren HTML5en. Hona hemen zer
taldetan sailkatzen diren:
Etiketa semantikoak. HTML dokumentuak estrukturatzeko, etiketa berriak

daude, eta lehengo <div> etiketa ordezkatzen dute. Etiketa horien bitartez,
jakin daiteke kode-sekuentzia bakoitzak web-orri bateko zer zatiri egiten dion
erreferentzia.
1
Open Web mugimendu bat da, WWW era estandarrean, publikoan eta kooperatiboan erabiltzea aldarrikatzen
duena: kontra egiten die erabilera pribatu, esklusibo eta jabedunei.

Multimedia-etiketa berriak. <audio> eta <video> etiketen bitartez,
errazago egiten da web-orrian multimedia-fitxategiak txertatzea.
Konektagarritasuna. Zerbitzarira konektatzeko aukera ematen du, era berri
eta berritzailean.
Konexiorik gabe biltegiratzea. Ez da konektatuta egon behar, uzten duelako
modu seguruan bezeroaren datuak web-orrian gordetzen.
Errendimendua eta integrazioa. Hardwarea hobeto erabiltzen du, eta
abiadura optimizatu.
Beste gailu batzuei sarbidea/irteera ematea. APIen bidez, gure gailuentzako
sarrera-irteerako osagaiak ditu.
CSS32. Diseinu sofistikatuagoak egiteko aukera ematen digu.
1.3. ESTRUKTURA
HTML5 dokumentu guztiek egitura antolatua dute, eta atal bakoitza etiketa baten
bidez nabarmentzen da. Orokorrean, etiketa guztiak edo gehienak bikoteka doaz;
alegia, pare bakoitza irekiera-itxiera etiketekin dago osatuta; gainera, etiketa-pare
batzuek bere barruan elementu edo atributuak izango dituzte. Adibidez, etiketak dira
<head> eta <html lang=”es”>; lehenengoa etiketa arrunta da; bigarrenak,
ordea, etiketa arrunta izateaz gain, atributu bat du barruan.
1.3.1. ETIKETAK
HTMLn dokumentu guztiak testu lauan daude idatzita, eta edozein HTML
prozesadoretan idatz daitezke, betiere testu lauan gordetzeko aukera badute.
Web-orrien diseinatzaileek nahiago dituzte testu-prozesadore bereziak
(Sublime Text, Aptana, Notepad…) HTMLko sintaxia nabarmentzen dutelako.
Nabigatzaile batek web-orri bat interpretatzeko, atal guztiek etiketekin
identifikatuta egon behar dute web-orriaren iturri-kodean. Horrela ez balitz,
nabigatzaileak ez luke ulertuko kode-lerro hori, eta bistaratuko lukeen web-
orria akatsez josita egongo litzateke.
Nahiz eta etiketa horiek letra larriz edo xehez idatzita egon, nabigatzaileak
berdin-berdin interpretatzen ditu, baina W3C3-k etiketa horiek letra xehez
idaztea aholkatzen du.
Etiketa guztiek honako sinbolo hauen artean egon behar dute:
 < eta > irekiera-etiketa denean
2
Cascading style sheets (kaskada motako estilo-orriak): HTML edo XML familiako dokumentuak nola
agertuko diren zehazteko erabiltzen den estandarra, World Wide Web Consortium (W3C) erakundeak
finkatua. CCS bidez, dokumentuko elementuen formatua, letra-tipoa, -tamaina eta -kolorea, lerroartea
eta abar zehazten da. CSS estilo-orria aparteko dokumentu bat da (baina dokumentuan bertan ere
txertaturik joan daiteke).
3
HTML estandarrak zaintzen dituen munduko elkartea.
 </ eta > itxiera-etiketa denean
Adibidez:
<h2> irekiera-etiketa
…
…
</h2> itxiera-etiketa
HTML5 lengoaian etiketa berriak sortu dira, diseinatzaileei web-orriak egitea

errazteko. Nahiz eta aurreko bertsioetako etiketek funtzionatzen jarraitzen
duten, beste 30 etiketa baino gehiago sortu dira, etiketa semantiko izenekoak,
web-orri estatikoetan erabil daitezkeenak.
Dokumentu baten –web-orri baten– atal nagusiak deskribatzen dituzten
etiketak honako hauek dira:
Irekiera-etiketa Itxiera-etiketa Funtzioa

Goiburua identifikatzen du. Etiketa
<header> </header> horien artean, enpresaren logoa,
argazkia… egon daitezke, besteak beste.
Nabigatzegunea identifikatzen du.

Etiketa horien artean, korporazioko
<nav> </nav>
beste orrialde batzuetara heltzeko
loturak egongo dira (botoiak, argazkia…).
Dokumentu bateko atal garrantzitsuena
identifikatzen du etiketa honek (web-
orria liburu oso bat bada, atal bat
<section> </section>
kapitulu baten antzekoa izango da).
Horretaz gain, azpiatalak ere izan ditzake
atal batek.
Dokumentu, orrialde edo web-orri baten

konposizioa identifikatzen du. Adibidez,
egunkari baten kultura-atalean, artikulu
bat dago, idazle baten testu-iruzkina,
<article> </article>
kritika bat…
<article> etiketaren barruan beste
<article> etiketa gehiago egon
daitezke.

Alboko barra adierazten du. Normalean,
zerikusia izango du artikuluaren
<aside> </aside>
gaiarekin. Adibidez, iragarkiak, nabigatze
elementuak…
Dokumentu baten orri-oina adierazten

du; hau da, egilearen izena, copyrighta,
<footer> </footer>
data… Atal honek ez du zertan
azkenengo joan.
1.3.2. ATRIBUTUAK
HTMLko elementuek4 hainbat atributu izan ditzakete, eta, horiei esker,
diseinatzaileak elementu horien portaera konfiguratu dezake. Atributu guztiek
bi zatitan daude banatuta: atributu-izena (name) eta atributu-balioa (value).
Adibidez: <form> elementuak adierazi nahi du eskaera-inprimaki bat sortuko
dugula; baina, elementu horri autocomplete atributua eta ”off” balioa
jarriko bagenizkio (<form autocomplete=”off”>), adieraziko genioke
inprimaki-eremu horretako datua eskuz sartu beharko genukeela.
HTMLn atributu guztiak = sinboloarekin identifikatzen dira, eta informazio

gehigarria datorrela adierazten du sinbolo horrek. Aurreko kasuan bezala,
<html lang=”es”> kasuan, atributuak adierazten du dokumentu horren
hizkuntza gaztelania dela. Bestalde, atributu batzuek balio boolearra dute;
hots, egia edo gezurra adierazten dute.
Atributu bati balioa ezar dakioke –ez baita derrigorrekoa jartzea–, baina
ezartzea aholkatzen da. Honako adibide hauek esanahi berbera dute:
<input type=”text” name=”izena” required=”required”>
<input type=”text” name=”izena” required=””>
<input type=”text” name=”izena” required>
elementua atributuak balioak
4
Zer desberdintasun dago etiketa eta elementu baten artean? Oso erraza da bereiztea bi
kontzeptu horiek: etiketek irekiera- eta itxiera-etiketak dituzte, eta, elementuek, ordea,
bakarrik irekiera-etiketa dute, eta ez dira ixten.

CSS teknologia sortzearekin batera, desagertu egin dira HTMLko atributu
gehienak, teknologia horrekin adierazten direlako atributu horiek. Horrekin ez
dugu esan nahi ezin direnik erabili HTML lengoaian, nahiz eta aholkatzen den
beharrezkoa denean bakarrik erabiltzea. Hala ere, nahitaez erabili behar dira
atributu batzuk HTML lengoaian, eta honako hauek dira:
class: Atributu hau erabiltzen dugu, elementu batek dituen

ezaugarriak eta beste elementu batenak berdin-berdinak badira;
atributu honekin elementuok identifikatuko ditugu, euren ezaugarriak
berriro ez idaztearren. Adibidez, elementu batzuekin atributu hau
erabiliz gero, elementu horiei letra eta estilo bera esleituko dizkiegu.
id: Atributu hau erabiltzen dugu elementu batek beste elementu

batekin partekatzeko ezer ez duenean. id erabiltzen dugunean,
elementu horrek –eta bakarrik elementu horrek– izango ditu ezaugarri
berezi batzuk: adibidez, letra-tipoa helvetica izango da, eta letra-
tamaina, 24 pixel. Beste elementu batek ere ez ditu jasoko ezaugarri
horiek.
style: Atributu hau erabiliko dugu HTMLko edozein elementuri CSSko

estilo bat emateko.
name: Nahiz eta atributu hau zaharra izan, erabilgarritasun handia du

inprimakiak diseinatzeko. Elementu baten izena izendatzeko erabiltzen
da. Adibidez:
izena: <input type="text" name="zureizena">

1.4. DOKUMENTUKO ATALAK ZEHAZTEN
Atal honetan, adibide baten bitartez, HTML5eko atalak azalduko ditugu. Hau da
aztertuko dugun lehen web-orria:
1.4.1. <!DOCTYPE>
Lehenik eta behin, <!DOCTYPE> elementua idatzi behar dugu edozein
nabigatzailek uler dezan zer eratako dokumentua den. Horrela, elementu honi
jarraitzen dioten kode-lerroak interpretatzeko orduan, nabigatzaileek jakingo
dute HTMLko dokumentu bat dela, eta ez dute arazorik izango.
<!DOCTYPE html>
1.4.2. <html>
Etiketa honek nabigatzaileei adierazten die kodea interpretatzen hasi behar
dutela; etiketa hau edozein HTML dokumenturen ardatza da. Horretaz gain,
lang atributuaren bitartez, nabigatzaileari esango diogu erabiltzen duen
kodea zer hizkuntzatan interpretatu behar duen. Ematen den adibidean,
hizkuntza gaztelania da, eta jakingo du <ñ> gaztelaniako karaktere bat dela.
<html lang="es">
1.4.3. <head>
Esan dezakegu HTML lengoaian bi etiketa garrantzitsu daudela, eta hauxe da
horietariko bat. Barruan, guk sortuko dugun dokumentuaren informazioa
eramango du:
dokumentuaren titulua
dokumentuak erabiliko duen karaktere-kodearen informazioa

kanpoko zer dokumenturekin duen lotura
<head>
<title>Nire lehen HTML dokumentua</title>
</head>
<head> etiketaren barruan, aipatu dugun bezala, etiketak eta elementuak

daude, eta horietariko batzuk honako hauek dira:
1.4.3.1. <title>
Nabigatzaile guztietan zer titulu aterako den ezarriko dugu honen bitartez.
Etiketa bat denez, irekiera- eta itxiera-etiketen artean egongo da idatzita
titulua.
1.4.3.2. <meta>
Hau elementu bat da, ez baitu itxiera-etiketarik. Lehenik eta behin,
dokumentu batean zer karaktere mota erabiliko den adierazi behar da, eta
horretarako erabiltzen da elementu hau.
Bilatzaileetan web-orri bat aurkitu nahi dugunean, egilearen izena, gai bat…
idazten dugu; bilatzaileek guk idatzitako hori web-orriarekin erlazionatu
behar dute; informazio hori web-orriak berak eman behar du, eta
informazio hori etiketa honen bitartez adierazten da.
Beheko adibidean, eta idatzita dagoen ordenari jarraituz, dokumentuaren

honako informazio hau ematen da:
titulua
kodifikazioa: hau da, nola bistaratu behar duen dokumentua

gure nabigatzaileak
informazioa: nork sortu duen, zeri buruzkoa den gure

dokumentua, gako-hitzak… Elementu hau da nabigatzaileek
erabiliko dutena bilaketak egiteko orduan.
kanpoko CSS dokumentu batekin lotuta dagoela

1.4.4. <body>
Hau da bigarren etiketarik garrantzitsuena, bertan idatzita egongo delako guk
nabigatzailean ikusiko dugun informazio guztia; alegia, dokumentu osoa bere
atal guztiekin, aldizkari bat izango balitz bezala (enpresako logoa eta
informazioa, nabigatze-barra, artikuluak…).
Aurreko bertsioarekin konparatzen badugu, erraza bihurtu da dokumentu

baten gorputzaren estruktura diseinatzea. Lehenago, web-diseinatzaileek,
testuak eta argazkiak txertatzeko, taulaz (<table>) betetzen zuten
dokumentua, eta beste batzuek, ordea, zatitu egiten zuten dokumentua
<div> etiketa erabiliz.
Zer gertatzen zen lehen etiketak hauek erabiltzean? Diseinatzaileek zerbait

aldatu nahi zutenean, ez zekiten gorputzeko zein etiketatan zegoen aldatu nahi
zuten informazioa, etiketok ez baitzuten inolako informaziorik ematen. Hori
konpontzeko asmotan, gorputzeko atal guztiak identifikatzea erabaki zuten,
esanahia zuten etiketak sortuz: etiketa semantikoak.
<body> etiketaren barruan erabiliko ditugu atalak identifikatzeko sortu diren

etiketa semantikoak, eta etiketa horiekin eraikiko dugu gure web-orriaren
estruktura. Etiketen kapituluan, taula baten barruan daude aipatutako etiketa
semantikoak; horietaz gain, badaude beste batzuk erabil daitezkeenak.
<body>
<article>
KAIXO MUNDUA!
</article>
</body>
1.5. GORPUTZA ANTOLATZEN

Web-orrien diseinua asko aldatu da oso denbora gutxian, batik bat dokumentua
estrukturatzeko orduan. Gaur egungo orriek, HTML5 lengoaia eta CSS3 teknologia
erabiliz, beheko irudian erakusten den antzeko diseinua izaten dute.
Diseinu hau nola egiten den CSS kapituluan azalduko dugu.

Irudian ikusten dugu gaur egungo web-orrien estruktura nolakoa den normalean;
baina horrek ez du esan nahi orri guztiek egon behar dutenik antolatuta irudi horretan
agertzen diren moduan. Normalean, nabigatzaile-atala izenburutik kanpo egoten da,
baina diseinatzaile batek nahiago badu nabigatze-barra izenburuaren edo orri-oinaren
barruan kokatu, egin dezake, eta ikusi ere ikusten ditugu web-orri batzuetan
horrelakoak. Honako hau da aurreko irudiaren HTML estrukturaren kodea:

1.5.1. <header>
Etiketa hau HTML5 bertsioan sortu zen, ikusten zelako gaur egungo web-
orriek gero eta eduki gehiago zutela. Horregatik, beharrezkotzat jotzen zen
etiketak identifikatzea bakoitzari esanahi argia emanda (header ingelesezko
berba bat da, eta euskaraz “goiburu” esan nahi du). Beraz, irakurri eta
berehala dakigu etiketa horrek zer izango duen barruan. Horrek ez du esan
nahi goiburuan joango den informazioa ezin dela beste etiketa-izen batekin
jarri, baina jardunbide egokia da etiketa hori eta antzekoak erabiltzea.

Gehienetan, atal honetan korporazioaren izenburua, logoa… jarriko ditugu.
<header>
<hgroup>
<h1>BLOG-DISEINUA</h1>
<h3>HTML5 - CSS3 Eskuliburua</h3>
</hgroup>
<img src="img/irale.jpg"/>
</header>
1.5.2. <nav>
Aurreko etiketaren moduan, hau ere 5. bertsioan sortu zen, eta nabigatze-
barrari dagokio. Etiketa hau ikusiz batera, badakigu haren barruan datorrena
loturak direla. Loturek beste HTML dokumentu batzuetara edo dokumentu
bereko beste atal batera eramango gaituzte, betiere saguarekin klik eginez
gero.
Lotura horiek, gehienetan, etiketa-zerrenda batekin egiten dira, baina

horrekin ez dugu esan nahi testua erabili behar denik derrigorrean;
batzuetan, agian, lotura horiek egiteko nahiago ditugu irudiak.
Zerrenda bat <ul> eta <li> etiketen barruan idatzi behar dugu. <ul>
etiketak zerrenda ez-ordenatu bat datorrela adierazten du, eta <li>
etiketak zerrenda horretako item bat dela.
Nabigatze-barra bat web-orri bateko edozein ataletan egon daiteke ipinita.

Aholku orokorra da <nav> etiketa hori <header> etiketaren barruan
ipintzea; diseinatzaile batzuek, ordea, nahiago dute nabigatzaile-barra hori
<aside> etiketaren barruan ipini.
<nav>
<ul>
<li><a href="#">hasiera</a></li>
<li><a href="#">argazkiak</a></li>
<li><a href="#">harremanetan jarri</a></li>
</ul>
</nav>
1.5.3. <section>
Esan behar dugu etiketa hau dela garrantzitsuenetariko bat. Edozein

aldizkaritan gertatzen den modura, atalak artikulutan daude banatuta;
beraz, artikuluek <section> etiketaren barruan egon behar dute.
Atal batean, guk nahi ditugun beste artikulu egon daitezke, betiere kontuan
hartuta horiek <article> etiketaren barruan ipiniko ditugula.
Diseinatzaileek era askotan diseina ditzakete: web-orrien atalak edo atalak
zutabe bakar batean, bitan…
1.5.4. <article>
Web-orrian bistaratzen den informazioak –testua, bideoa, irudiak…– atal

honetan egon behar du; horregatik, diseinatzaileek, dokumentu bat
diseinatzeko orduan, kontuan hartu beharko dituzte honako aholku hauek:
letraren tamaina eta letra-tipoa
irudien tamaina eta formatua (gif, jpeg…)
dokumentuak nabigatzailean kargatzeko orduan pisu handia ez

izatea
Atal honetan, beste atal batzuetan gertatzen den modura, etiketa gehiago
egon daitezke; baina, <article>-ren barruan, sarritan ikusiko dugu
idatzita <header> etiketa, besteak beste, artikuluari titulua emateko.
<section>
<article>
<header>
<h1>Lehen Artikulua</h1>
</header>
<p>Hemen idatziko dugu gure lehen
artikulua. Irudi bat ere sartu
dezakegu.</p>
<img src="img/irale.jpg"/>
<hr/>
<header>
<h1>Bigarren Artikulua</h1>
</header>
<p>Hau guk idatziko dugun bigarren
artikulua</p>
</article>
</section>
1.5.5. <aside>
Atal hau, normalean, informazio nagusiaren alboan ipintzen da; nahiz eta
gehienetan zutabe bakar batean egon, bitan ere ikusten dugu sarritan.
Zutabe hori edo horiek irakurlearen ezkerraldean edo eskuinaldean egon
daitezke, edo alde bietan, nahiz eta ohikoena ezkerraldean ikustea den.
Gehienetan, bertan aurkitzen den informazioa artikulu batekin izango du

zerikusia, eta informazioaren gaineko datu gehigarriak izango dira. Albo-

barra horretan, beste era bateko informazioa ere ipin dezakegu; adibidez,
inkestak, loturak…
<aside>
<blockquote>Lehen artikuluaren aipamena</blockquote>

<q>inkestaren emaitzak</q>
<br/>
<p>BAI --- %65</p>
<p>EZ --- %35</p>
</aside>
1.5.6. <footer>
Azkeneko atal hau ere HTML5 bertsioan sortu zen, egilearen datuak,
jabearen eskubideak… idazteko asmoarekin. Baina, gaur egun, diseinatzaile
askok atal honetan ipintzen dituzte nabigatze-barra, inprimakiak….
<footer>
<H4>Egileak: Esteban</H4>
<h4>Edonork erabilgarri</h4>
</footer>
1
2
5
1.6. GORPUTZAREN EDUKIA
Etiketa semantikoak <body> atalaren barruan egoten dira, eta etiketa semantikoen
barruan beste etiketa batzuek egon behar dute; etiketa horien bitartez, gure web-orria
nolakoa izango den kodifikatuko dugu; hau da, guk nola nahi dugun nabigatzaileetan
ikustea. Adibidez, zerrenda bat egiteko orduan, zerrenda egiteko etiketak erabiliko
ditugu; nabigatzailean aterako den testuaren tamaina aldatzeko, hartarako etiketa
propioa erabiliko dugu…
HTML lengoaian erabiltzen diren ohiko etiketak honako hauek dira:
Izenburuak:
Etiketa Zertarako?
<h1> Izenburuak definitzeko erabiltzen da. Haren balioak (h1…h6) dira.
<hr/> Paragrafoak banatzeko erabiltzen da. Marra horizontala sortuko du.

<h1…h6> etiketak bata bestearen jarraian daudenean, etiketa
<hgroup>
horiek multzoka ipintzeko erabiltzen da.
<body>
<hgroup>
<h1>TITULU NAGUSIA</h1>
<h2>Bigarren titulua</h2>
</hgroup
<p>hau lehen paragrafoa da.</p>
<hr/>
<p>hau bigarren paragrafoa da.</p>
</body>

Paragrafoak:
Etiketa Zertarako?
<p> Dokumentuan bistaratuko den paragrafoa definitzeko erabiltzen da.
<br/> Lerro-jauzi bat egiteko erabiltzen da.
Definituta dagoen formatu bat bistaratuko du –normalean, Courier

<pre> letra-tipoarekin–, HTMLn idatzi ditugun hutsuneak eta lerroak
mantenduz.
<body>
<p>Hau lehen paragrafoa da.
Paragrafoak jarraitu egiten du.
</p>
<br/>
<pre>Hau bigarren paragrafoa da.
Paragrafoa aurredefinituta
dagoen bezala bistaratuko da.</pre>
<p>
</body>
Estiloak:
Etiketa Zertarako?
HTMLko edozein etiketarekin batera ipintzen da, eta haren atzean

doan testuari itxura aldatzeko erabiltzen da. Gaur egun, letra baten
estiloa CSSren bitartez definitzen da.
Honako hauek dira estilo-etiketan erabiltzen diren atributuak:
 background-color:
<style>
 color:
 font-family:
 font-size:
 text-align:
Adibidez:
<p style=”text-align:center; color:red”>kaixo</p>

Formatua:
Etiketa Zertarako?
Testu bat garrantzitsua dela adierazteko erabiltzen da. Testu hori

<strong>
letra lodiz idatziko du.
Testu bat nabarmentzeko erabiltzen da. Testua letra etzanez

<em>
idatziko du.
Aparteko komentarioak egiteko erabiltzen da: txikitu egingo du
<small> testuaren tamaina. Gehienetan, egile-eskubideak bistaratzeko
erabiltzen da.
<mark> Testu bat argigunearekin nabarmenduko du.
<del> Testua bat marra batekin urratuko du.
<ins> Testu bat azpimarratuko du.
<sub> Testu batean azpiindizea adierazteko erabiltzen da.
<sup> Testu batean goi-indizea adierazteko erabiltzen da.
<body>
<strong>testu hau garrantzitsua da eta testu lodiz
agertzen da</strong>
<br/>
<em>testu hau nabarmenduta agertuko da</em>
<br/>
<small>testu hau komentarioetan erabiliko
dugu</small>
<br/>
<mark>testu hau argigunearekin agertuko da</mark>
<br/>
<del>testu hau lerro batekin ezabatua bistaratuko
da</del>
<br/>
<ins>testu hau azpimarratuta aterako da</ins>
<br/>
<p>testuaren<sub>azpialdean</sub>aterako da </p>
<p>testuaren<sup>goialdean</sup>aterako da </p>
</body>

Testu-aipamenak:
Etiketa Zertarako?
<abbr> Laburdura edo akronimo bat definitzeko erabiltzen da.
Dokumentua edo artikulua idatzi duen jabearen kontaktua
<address>
argitaratzeko erabiltzen da.
<cite> Argazki, liburu… baten titulua jartzeko erabiltzen da.
<bdo> Testua eskuinetik ezkerrera bistaratuko du nabigatzaileak.
Dokumentu bat beste iturri batetik hartu dela adierazteko
<blockquote>
erabiltzen da.
Testu-aipu bat bistaratzeko erabiltzen da: komatxo artean
<q>
ipiniko du.
<body>
<p>The <abbr "World Health
Organization">WHO</abbr> 1948an jaio zen</p>
<address>
Autorearen datuak:<br/>
Esteban<br/>
Dolaretxe<br/>
Bilbo
</address>
<cite>Gernika</cite> Picassok margotu zuen<br/>
<p><bdo dir="rtl">testu hau ezkerretik eskuinera
irakurriko da</bdo></p>
<blockquote>testu honekin aipamen bat egiten
dugu</blockquote>
<q>testu hau komatxo artean aterako da</q><br/>
</body>
Ordenagailu-kodeak:
Etiketa Zertarako?
<code> Definitutako testua programazio-kode gisa bistaratzen du.
<kbd> Definitutako testua teklatuaren formatura aldatuko du.
<samp> Definitutako testua ordenagailu-testuen formatura ekarriko du.
Matematikako aldagai bat definitzeko erabiltzen da, eta testua era
<var>
berezian ipiniko du.
<body>
<code>testu hau ordenagailu-kode gisa bistaratzen
du</code><br/>
<kbd>teklatuko testu-sarrera bat gisa bistaratzen
du</kbd><br/>
<samp>testu honek ordenagailuaren agindua
irudikatzen du</samp><br/>
<var>Aldagaiak definitzeko erabiltzen da<var><br/>
</body>

Loturak eta irudiak:
Etiketa Zertarako?
Hiperesteka edo lotura bat definitzen du, beste baliabide
<a>
batzuetara heltzeko.
Irudi bati dagozkion elementuak (irudia bera, irudiaren titulua…)
<figure>
multzokatzeko erabiltzen da.
Web-orriari irudi bat gehitu nahi diogula adierazteko erabiltzen
<img>
da.
<figcaption> <figure> barruan txertatu dugun irudi-oina definitzen du.
<div> Esanahi gabeko edukiontzi bat bistaratzen du.
<body>
<a href="http://www.irale.hezkuntza.net/web/guest">
Irale</a>
<nav>
<ul>
<li><a href="#">kurtsoak</a></li>
<li><a href="#">kontaktua</a></li>
</ul>
</nav>
<img src="img/irale.jpg" width="120"
height="100"/>
<figure>
height="150"/>
<figcaption>1.irudia: Iraleko logoa</figcaption>
</figure
</body>

Taulak:
Etiketa Zertarako?
Taula bat definitzeko erabiltzen da. Taula bat sortu aurretik,

<table>
derrigorrekoa da adieraztea taula bat datorrela ondoren.
<tr> Taula baten lerro bakoitza adierazteko erabili behar da.
Taula bateko zutabe guztietan titulua markatzeko erabiltzen da.

<th>
Zutabe horretan, titulu bat agertuko da, lodiz.
Taula baten gelaxka adierazteko erabiltzen da. <tr> batean nahi

<td>
beste <td> etiketa izango ditugu, gelaxka-kopuruaren arabera.
<caption> Taularen izenburua definitzeko erabiliko dugu.
Taula batean zutabeak multzokatzeko erabiltzen da. <col>

<colgroup>
etiketarekin batera erabiltzen da.
Aldez aurretik <colgroup> etiketarekin aukeratutako zutabe

<col>
talde bati baldintza bereziak emateko.
<thead>
Etiketa hauek taula bateko goiburuari, gorputzari eta taula-oinari
<tbody>
baldintzak ezartzeko erabiliko ditugu.
<tfoot>
<body>
<a href="http://www.irale.hezkuntza.net/web/guest">
Irale</a>
<nav>
<ul>
<li><a href="#">ikastaroak</a></li>
<li><a href="#">kontaktua</a></li>
</ul>
</nav>
height="100"/>
<figure>
height="150"/>
<figcaption>1.irudia: Iraleren logoa</figcaption>
</figure
</body>

Zerrendak:
Etiketa Zertarako?
<ul> Item-zerrenda ez-ordenatu bat definitzeko erabiltzen da.

Zenbaki bidez ordenatutako item-zerrenda bat definitzeko
<ol>
erabiltzen da.
<li> Zerrendatu nahi dugun item bakoitza definitzen du.
Esanahi-zerrenda bat definitzen du; hau da, termino bat eta harekin
<dl>
bat etor daitezkeen esanahiak.
<dt> Zerrendako terminoak edo izenak bistaratzen ditu.
<dd> <dt>-ko termino edo izen bakoitzaren deskribapena egiten du.
<body>
<ul>
<li>bat</li>
<li>bi</li>
</ul>
<ol>
<li>bat</li>
<li>bi</li>
</ol>
<dl>
<dt>kafea</dt>
<dd>edari beltza</dd>
<dt>esnea</dt>
<dd>edari zuria</dd>
</dl>
</body>
Formularioak:
Esan dezakegu inprimakia dela edozein web-orrik izan behar duen atalik
garrantzitsuena, inprimaki horren bidez jarriko garelako webgune horretako
enpresarekin harremanetan.
Inprimaki bat diseinatzeko orduan, kontuan hartu behar dugu enpresak

derrigorrean jakin behar duela nork bidali dion inprimaki hori; horregatik,
diseinatzaileak <input> batzuk nahitaez betetzera behartu behar du
eskakizuna egiten duena.
Horretarako, HTML5ek inprimakietarako atributu berri batzuk ezarri ditu.
Honako taula honetan ditugu inprimaki bat egiteko orduan erabil

ditzakegun etiketarik ohikoenak.

Etiketa Zertarako?
<form> Formulario bat HTMLn definitzeko behar-beharrezkoa da.
Formulario batean datuak sartzeko erabili behar da. Etiketa

<input> honek atributu asko izan ditzake. Nabigatzaileak laukitxo bat
bistaratuko du eskatzen den datua idazteko.
<select> Aukeratzeko itemak ematen dituen zerrenda definitzen du.
Item-zerrenda batetik aukeraketa bat egiten utziko du. Behar-

<option> beharrezkoa da <select> etiketaren irekieraren eta itxieraren
artean idaztea.
Aukeratzeko ematen den zerrendako itemei titulua ipintzeko
<optgroup>
erabiltzen da.
<textarea> Testu luzeagoak idazteko erabiliko den laukia da.
<fieldset> Formulario baten sarrerak eta itemak multzoka bilduko ditu.
<fieldset> etiketan multzoka antolatuta dauden sarrerei edo

<legend>
itemei titulu nagusia jarriko die.
<button> Etiketa honi esker, klik egiteko botoi bat bistaratuko da.
<input> etiketako laukitxoaren aurretik idatzita agertuko den

<label>
titulua bistaratuko du.
Zerrenda batean guk sartu ditugun itemen artean aukeratzeko

<datalist>
erabiltzen da, <input> baten bitartez.
<keygen> Formulario batera bidaliko den informazioa enkriptatzen du.
Eragiketa baten emaitza ematen du, Javascript-eko kodea

<output>
erabiliz.

<body>
<form method="post" action="">
<fieldset>
<legend>
</p> erabiltzailearen datuak
erregistratzen</legend>
<p>erregistratu
<label for="user">Izena:</label>
<input type="text" name="izena"><br/>
<label for="lastname">Abizena:</label>
<input type="text" name="abizena"><br/>
<label for="kaxa">Oharrak:</label><br/>
<textarea rows="5" cols="50">
idatzi testua
</textarea>
<br><input name="insert" value="onartu"
class="bidali" type="submit">
</fieldset>
</form>
</body>
<body>
<select>
<option value="antzerkia">antzerkia</option>
<option value="zinea">zinea</option>
<option value="telebista">telebista</option>
</select>
</form>
</body>
<body>
<form method="post" action=""
<input type="radio" name="sexua" value="male"
checked> Gizonezkoa
<br>
<input type="radio" name="sexua" value="female">
Emakumezkoa
</form>
</body>
<body>
<input type="checkbox" name="garraioa"
value="Motorra">motorra<br/>
value="Autoa">autoa<br/>
value="Bizikleta">bizikleta<br/>
</form>
</body>

Formulario batean datuak sartzeko, <input> etiketa erabili behar dugu,
nahitaez. Zer motatako sarrerak nahi ditugun zehazteko, honako taula honetan
ditugu <type=” “> balio garrantzitsuenak:
Balioak Zertarako?
text Testua gordetzeko erabiltzen da.
checkbox Aukera bi ematen dizkigu, eta bietariko bat aukeratzen uzten digu.
Artxibo bat inprimaki baten bidez bidaltzeko erabiltzen da; etiketa
file honen bitartez aukeratuko dugu zer karpetatan dagoen artxibo
hori.
image Inprimakia bidaltzeko botoi pertsonalizatua da.
password Idazten dugun testua izartxo-zeinuekin ezkutatuko du.

Aukera bi edo gehiago ematen dizkigu, eta nahi beste aukera egin
radio
ditzakegu.
Inprimaki batean sartuta dauden datuak ezabatu, eta hasiera
reset
batean inprimakia zegoen bezala utziko du.
submit Inprimakiko datuak bidaltzeko erabiltzen den botoia.
Erabiltzaileak posta elektroniko zuzen bat sartzen ez badu, ez du
email
utziko inprimakia bidaltzen.
Interneteko helbidea zuzen sartzen ez bada, ez du inprimakia
url
bidaltzen utziko.
Data sartzeko edo hautatzeko da. Nabigatzailearen arabera, aldatu
date
egiten data sartzeko modua.
Ordua sartzeko edo hautatzeko da. Nabigatzailearen arabera,
time
aldatu egiten data sartzeko modua.
datatime Aurreko bien konbinazioa da.
month Data osoa aukeratu beharrean, hila bakarrik aukeratzeko.
week Urteko aste jakin bat aukeratzeko erabiltzen da.
number Ziurtatuko du sartutako balioa zenbakia den edo ez.
range Nabigatzailean mugitzen den kontrol bat bistaratuko du.
tel Telefono bat den ez du ziurtatuko, baina telefono bat espero du.
search Bilatzaile baten funtzioa betetzen du.
color Kolore-paleta bat bistaratzen du, kolore bat aukeratzeko.

Datuak zer motatakoak diren jakiteaz gain, <input> gelaxka horiei baldintza
batzuk betearazteko, beharrezkoa da arau batzuk ezartzea gelaxkoi atributuen
bitartez. Honako hauek dira horietariko atributu batzuk:
Atributuak Zertarako?
Gelaxkan daturen bat sartu nahi dugunean eta datu hori
autocomplete gelaxka horretan aldez aurretik sartuta baldin badago, ez
daukagu datua idatzi beharrik.
Ziurtatzen du gelaxkan sartuko diren datuak guk ezarritako

min, max
gutxiengoaren eta gehiengoaren artean daudela.
Atributu honek aukera asko ematen ditu; adibidez,

multiple ordenagailuan daukagun artxibo bat zerbitzarira bidali nahi
badugu, atributu hau erabiliko dugu.
Atributu hau erabiltzen da gelaxkan sartuko diren datuek

pattern
guk <input> horretan ezarritako arauak bete ditzaten.
Kurtsorea zer gelaxkatan kokatuko den ezartzeko erabiltzen

autofocus
da.
Inprimakiko gelaxkan atributu hau ezartzen dugunean eta

placeholder testu bat idatzita bertan, testu hori beti aterako da gelaxka
horretan, baina datu hori ez da bidaliko zerbitzarira.
Inprimaki bateko gelaxka jakin batean, nahitaezkoa da datua

required
sartzea; osterantzean, ez du utziko aurrera egiten.
Gelaxka batean zenbakiak gehitzerakoan edo

step zenbatzerakoan, zenbateko jauzia egin behar duen zehazten
du; hots, zenbaki batetik hurrengora arteko jauzia.

Etiketa semantikoak:
Atal honetan ez ditugu berriro <header>, <nav>, <section>,

<article>, <aside> eta <footer> etiketak azalduko, beste
batzuk baino.
Etiketa hauek ez dituzte nabigatzaile guztiek ulertzen, baina, nabigatzaile

jakin batek ulertu ez arren, bistaratu egingo ditu, era arruntean bada ere.
Kontuan hartu behar dugu etiketa batzuk Jqueryekin erabiltzen direla, eta
nabigatzaile guztiek oraingoz ez dituztela etiketa horiek ezagutzen. Hori
dela eta, Jqueryrekin erabiltzen ez duten adibideak emango ditugu.
Etiketa Zertarako?
(Bi-Directional Isolation). Ez dakigunean zer noranzko izango
duen erabiltzaileak sartuko duen testua (adibidez, arabieraz idatzi
<bdi>
behar badu), etiketa honek mantenduko du erabiltzaileak sartu
duen testuaren noranzkoa.
Nabigatzaileak elkarrizketa-koadro bat bistaratuko du, pop-up

<dialog>
motakoa. Jquery bitartez egiten dira.
Nabigatzaileak tituluaren aldamenean triangelu bat bistaratzen

<details> du. Triangelu horretan klik eginez gero, <summary> etiketako
aukerak zabalduko dira, eta, berriro klik eginez gero, desagertu.
<details> etiketako titulu-aukerak dira. Etiketa honek

<summary>
<details> etiketen barruan egon behar du.
Dokumentu baten titulu nagusia adierazteko erabiltzen da.

<main>
Orrialde bakoitzean, behin bakarrik erabil daiteke.
<menuitem> Menu-elementu bat definitzen du, eta pop-up batean bistaratu.
<meter> Nabigatzaileak balioen eskema grafiko bat bistaratzen du.
<progress> Ataza baten progresioa adierazten du.
<ruby> Testutxo bat bistararazten diote nabigatzaileari, normalean

<rt> ahoskera edo esanahia argitzeko, karaktere edo hitz jakin baten
<rp> gainean. Normalean, Asiako karaktereen gainean erabiltzen da.
<time> Data eta ordua definitzeko erabiltzen da.
Testua lerro bakar batean badago eta pantailan kabitzen ez bada,

<wbr>
etiketa honek letra jakin batean zatituko du lerroa.

<body>
<main>dokumentuaren titulu nagusia </main>
<p>testu hau <bdi>‫<إيان‬/bdi> idatzi den bezala
bistaratuko da</p>
<br/>
<details>
<summary>klik eginez, zerrenda bat zabalduko
da</summary>
<ul>
<li>ordenagailua.</li>
<li>tableta.</li>
<li>mugikorra.</li>
</details>
</body>
Multimedia:
Nahiz eta aurreko bertsioetan ere posible zen multimedia-artxiboak

txertatzea, 5. bertsioak asko erraztu du artxibo horiek edozein web-orriren
parte izatea. Hona hemen gaur egun lengoaia honetan erabiltzen diren
etiketak.
Kontuan hartu behar dugu, inprimakiekin gertatzen den bezala, nabigatzaile

batzuek ez dituztela ulertzen erabiltzen ari garen atributu batzuk;
horregatik, sarritan kontsultatu behar dugu atributu eta balio horiek
bateragarriak diren nabigatzaile guztietan.
Etiketa Zertarako?
<audio> Soinu- edo musika-artxibo bat definitzen du.
<embed> Kanpoko bideo bat edo audio bat txertatzeko erabiltzen da.
<video> Bideo bat edo pelikula bat definitzen du.
<audio> eta <video> iturriak nondik hartuko dituen

<source>
adierazten dio nabigatzaileari.
Musika edo bideo bat ikusten edo entzuten gaudenean testu bat
<track> bistaratu nahi badugu, azpi-tituluen pista aukeratzeko erabiltzen
da.
<iframes> Web-orri batean beste web-orri bat txertatzen lagunduko du.

<body>
<audio controls>
<source src="musika.ogg" type="audio/ogg">
<source src="musika.mp3" type="audio/mpeg">
zure nabigatzaileak ez du audiorik onartzen.
</audio>
<br/>
<video width="400" controls>
<source src="bideoa.mp4" type="video/mp4">
<source src="bideoa.ogg" type="video/ogg">
<track src="azpitituluak.vtt" kind="subtitles"
srclang="en" label="Euskaraz">
</video>
<br/>
<embed src="olentzero.avi">
<br/>
<iframe src="http://www.eitb.com"></iframe>
</body>
</body>
Multimedia-artxiboei hainbat jokaera eslei diezazkiekegu jarraian ageri

diren atributuei esker.
Atributuak Zertarako?
Web-orrian audio edo bideo baten kontrolak bistaratuko ditu;

controls
HTML5eko kontrolak, hain zuzen ere.
autoplay Soinua edo bideoa automatikoki hasiko da entzuten.
Entzuten ari garen soinua amaitzen denean, berriro hasiko da

look erreproduzitzen. Atributu honekin ez da sekula geldituko soinua,
guk gelditzen ez baldin badugu.
Soinu-artxibo bat pisutsua denean, artxibo hori behin kargatzen da,

eta gorde egiten da berriro erabiltzeko buffering deituriko memoria
batean. Hiru balio izan ditzake:
preload
 none: ez du daturik gordeko
 auto: artxiboa denbora baterako gordeko du
 metadata5: bakarrik artxiboaren metadatuak gordeko
ditu.
5
Datu bati buruzko informazioa ematen duten beste datu batzuk. Horien artean, datuaren egitura,
datuaren elementuak, datu horrek beste datu batzuekin duen erlazioa eta abar daude.
<body>
<audio preload="auto" controls loop>
<source src="musika.ogg" type="audio/ogg">
<source src="musika.mp3" type="audio/mpeg">
</audio>
</body>

1.7. ARIKETAK
1. Sortu zure lehenengo web-orria; ez duzu zertan CSS erabili. Egituratu

etiketa semantikoak erabiliz. Ez ahaztu eman zaizun etiketen zerrenda
multzotik etiketa bat baino gehiago erabiltzea.
2. Bilatu Interneten web-orri pare bat eta aztertu dokumentu horiek

HTML5ek agintzen duen egiturarekin bat datozen.
3. Aztertu web-dokumentu horiek ea etiketarik duten.
 Badute etiketa semantikorik? Eman adibide-pare bat.
 Agertzen da dokumentu horietan etiketa atributudunik? Eman

adibide batzuk.
4. Internet baliabide gisa erabiliz, aurkitu zer informazio idazten den

<head> etiketen artean.
5. Lehengo ariketan sortu duzun web-orrian, sortu zure lehen inprimakia.

Erabili ikasitako atributu batzuk (required, autocomplete…).
6. Gehitu multimediako artxibo bat, gutxienez, zure web-orriari.

2. CSS3 ESTILOAK
2.1. DEFINIZIOA
CSS (Cascading Style Sheets) web-orrien diseinua hobetzeko erabiltzen den teknologia
da, eta HTML lengoaiaren estruktura hobetzeko asmoarekin sortu zen; bestela esanda:
HTML lengoaiaren osagarri bat da, HTML dokumentuari formatua emateko. CSS
teknologia sortu aurretik, HTML lengoaiako etiketetan idazten ziren estilo-atributuak
web-orriak diseinatzeko. HTML lengoaiak dokumentu bat aurkezteko mugak
gainditzeaz gain, CSSek HTMLren estrukturaren konplexutasuna gutxitzea zuen helburu
eta, horrela, diseinatzaileei web-orriak diseinatzeko lana erraztea.
Gaur egun, aipatu dugun bezala, HTML dokumentuaren estrukturaz arduratzen da,
baina CSSek du aurkezpenaren formatuaren kodea. Jakin behar dugu CSS
independentea dela HTMLtik.
CSS3k badu zerikusia aurreko bertsio biekin, kodea erabiltzeko modua berdina delako
lan egiteko orduan. Aurreko bertsioaren aldean, azken bertsioa konpromiso
gehiagorekin dator: orain prest dator animazioak, testuen eta eduki-kaxen itzaldurak
eta abar egiteko.
2.1.1. ARAUAK
CSSn kodea idazteko, arau batzuei jarraitu behar zaie, ez baita idazten HTML
idazten den moduan.
Lehenik eta behin, HTMLn izendatutako etiketa edo etiketak idatzi behar dira.
HTMLko etiketa horiei, hautatzaile deitzen zaie CSSn.
HTMLko etiketa bati baino gehiagori CSSko propietate berberak ezarri nahi
badizkiogu, lehenengo komen bidez (,) bilduko ditugu etiketok; gero, giltza
artean ({}) bilduko ditugu propietateak; eta, azkenik, propietate bakoitzaren
balioa ezarrita gero (;) idatziko dugu lerro-sekuentzia amaitu dela esateko.
Honela idazten dira CSSko kodeak:
hautatzailea {
propietatea: balioa(k);
}

Jarraian datorren adibidean, CSSn idatzitzako kodearen barruan, HTMLn <p>
etiketaren barruan dauden testu guztiek arau hauek beteko dituzte:
testuaren atzealdeko kolorea grisa izango dute.
letrakera lodia, 14 pixelekoa, eta verdana motakoa izango dute.
testuaren kolorea beltza izango dute.
p {
background-color:#cccccc;
font: bold, 14px verdana, sans-serif;
color:#000000;
}
Aurreko adibidea CSSko kodea da, baina, memento puntual batean HTML
dokumentuan estilo bat aldatu nahi badugu, lehenengo, testu edo etiketaren
barruan <style> etiketa ipini behar dugu, eta, gero, definitu nahi dugun
estilo hori. Beste aukera bat <head> etiketa barruan egitea da, <style>
etiketa definituz. Metodorik ohikoena, ordea, HTMLn <head> etiketaren
barruan CSSko dokumentu bati esteka egitea da; eta, horrela, HTML
dokumentuek ere aukera izango dute CSS dokumentu horretan definituta
dagoen estiloa erabiltzeko.
HTMLko etiketa barruan idatzita:
<p style=”background-color: #cccccc; color: #000000”

testua </p>

HTMLko <head> etiketa barruan idatzita:
<style>
p {
background-color:#cccccc;
font: bold, 14px verdana, sans-serif;
color:#000000;
}
</style>
HTMLko <head> etiketatik CSSko dokumentu bati esteka eginda.

Kontuan izan, CSS dokumentu horretara iristeko, bide osoa idatzi
behar dugula.
<link rel="stylesheet" href="nire_estiloak.css" />
Kontuan izan behar dugu HTMLko <style> etiketan eta CSS dokumentuan
etiketa bati erreferentzia egiteko, hiru oinarrizko hautatzaileak erabiliko
ditugula. Honako hauek dira:
HTMLko etiketaren izena
id atributua
class atributua
Erreferentzia horiek eta beste atributu batzuk hurrengo atalean azalduko

ditugu.
HTMLn eta CSSn, etiketek eta hautatzaileek ondo definituta egon behar dute;
hots, etiketa batek identifikatzailerik ez balu, hautatzaileak ere ezin izango
luke identifikatzailerik eraman, eta, ondorioz, CSSn hautatzaile bati emandako
propietateak HTMLn dauden etiketa berdin guztietan izango luke eragina.
2.1.2. PROPIETATEAK
CSSn, propietateak eta haien balioak dira gauzarik garrantzitsuenak, horiek
adierazten diotelako nabigatzaileari HTMLn definituta dauden etiketek nola
jokatu behar duten. Bertsio berri bat ateratzen den bakoitzean, propietate
berriak gehitzen zaizkio CSSri. Horietariko batzuk ikusiko ditugu, ezinezkoa
baita propietate guztiak aipatzea, ezta haien balio guztiak ere.

Propietatea Zertarako?
Testu baten estiloa definitzeko erabiltzen da (testuaren tamaina,

lodiera…).
p { font: bold, 14px verdana, sans-serif;}

font
Propietate honek balio horiek banan-banan definitzeko aukera
ematen digu, azpipropietate hauekin:
font-style, font-size, font-weight, font-

variant…
Testu bati kolore jakin bat ezartzeko erabiltzen da. Testu bati
kolorea definitzeko, ohikoena sistema hamaseitarra erabiltzea da
(#CCCCCC), baina red ipintzen badugu (hau da, koloreen izenak
color
ingelesez idatzita), berdin-berdin ulertuko dute nabigatzaileek.
p {color: #FF00FF;}
Dokumentu baten atzeko planoa aldatzeko erabiltzen da (kolore

finko batekin, irudi batekin…).
body {background: #008000;}

background
background-color, background-repeat,
background-image…
Txertatuko dugun edozein elementuren altuera zehazteko

erabiltzen da.
height
img {height: 150px;}
Txertatuko dugun edozein elementuren zabalera zehazteko

erabiltzen da.
width
img {width: 150px;}

Elementu baten kanpoaldeko marjina ezartzeko erabiltzen da.
img {margin: 200px 50px 50px 30px;}
margin Propietate honek balio horiek banan-banan definitzeko aukera

margin-top, margin-right, margin-boton,

margin-left
Elementu baten barrualdeko betegarria ezartzeko erabiltzen da.
img {padding: 200px 50px 50px 30px;}
padding Propietate honek balio horiek banan-banan definitzeko aukera

padding-top, padding-right, padding-boton,

padding-left
Elementu bati ertzen tamaina eta kolorea finkatzeko erabiltzen

da.
p {border: 10px solid red;}

border
border-style, border-widht, border-color,

border-radius…
Testua lerrokatzeko erabiltzen da (erdian, ezkerrean, eskuinean,

justifikatuta).
text-align
p {text-align: justify;}
Zerrendei estiloa emateko erabiltzen da: nabigatzailean buletekin

atera behar duen edo ez, irudi bat jarri nahi diegun zerrendako
list-style artikuluei…
ul {list-style: none;}
2.2. ERREFERENTZIAK
Aurreko paragrafoetan aipatu dugu HTMLko etiketek CSSko hautatzaileekin
erlazionatuta egon behar dutela; hau da, CSSko hautatzaileek erreferentzia egin behar
diotela HTMLko etiketei.
Ondoren ikusiko dugu erreferentzia horiek nola egiten diren, ezinbestekoa da-eta
erreferentzia horiek ondo egitea. HTMLko etiketa berdinek CSSko estilo-kode berdina
erabiltzen badute, zergatik idatzi kode berbera behin eta berriro behin eginda nahikoa
bada?
HTMLko etiketaren izena

HTMLn etiketa sinpleak erabiltzen ditugunean, CSSn ere sinpleak izango dira
hautatzaileak. Noiz erabiliko ditugu etiketa sinpleak HTMLn? Gure
dokumentuan, paragrafoek, testuek, irudiek… CSS dokumentuan adierazitako
propietate berberak bete behar dituztenean.
Adibide honetan, HTML dokumentuan bi paragrafo ditugu <p> etiketaren

barruan, eta CSS estiloan p{ } hautatzaileari lau propietate gehitu dizkiogu.
Horrekin esan nahi dugu <body> barruan dauden <p> etiketa guztiak
propietate berberekin bistaratuko dituela nabigatzaileak.
<body>
<p> 1. etiketa sinplea </p>
<p> 2. etiketa sinplea </p>
<body>
<style>
p {
background-color: grey;
border:solid 1px red;
color: white;
font-size:30px;
}
</style>
id atributua
HTMLn etiketetan, id atributuak portaera bakarra adierazi nahi du; hots,

etiketa jakin batek ez duela beste etiketa baten portaera berdina izango.
Noiz erabiliko ditugu id atributuak? Gure dokumentuan, paragrafoek,
testuek, irudiek… CSS dokumentuan adierazitako propietate desberdinak
bete behar dituztenean.
Adibide honetan, HTML dokumentuan hiru paragrafo ditugu <p> etiketaren

barruan, eta CSS estiloan p{ } hautatzaile bakoitzari bi propietate gehitu
dizkiogu. Horrekin, esan nahi dugu <body> barruan dauden <p> etiketa
guztiak propietate desberdinekin bistaratuko dituela nabigatzaileak.
Kontuan hartu behar dugu HTMLen id atributua erabiltzen dugunean CSSn
traola (#) sinboloa ipini behar dugula.

<p id="bat">lehenengo testua.</p>
<p id="bi">bigarren testua.</p>
<p id="hiru">hirugarren testua.</p>
<style>
P#bat {
text-align: right;
}
P#bi {
border:solid 3px blue;
text-align: center;
}
P#hiru {
border:solid 7px green;
text-align: left;
}
</style>
class atributua
HTMLko etiketetan, class atributuak adierazi nahi du class berbera

duten elementuek portaera berbera izango dutela; hots, etiketa horren
pean dauden elementuek propietate berdinak izango dituztela gure
dokumentuan, paragrafo, testu edo irudi batzuek CSS dokumentuan
adierazitako propietate berdinak betetzea nahi dugunean.
Adibide honetan, HTML dokumentuan hiru paragrafo ditugu <p> etiketaren

barruan, eta CSS estiloan p{ } hautatzaile biri propietate bi gehitu
dizkiegu. Horrekin esan nahi dugu <body> barruan dauden <p> etiketa bik
portaera berbera izango dutela nabigatzailean, bakar batek izan ezik.
Kontuan hartu behar dugu HTMLn class atributua erabiltzen dugunean
CSSen puntua (.) sinboloa ipini behar dugula.

<p>lehengo testua.</p>
<p class="bi">bigarren testua.</p>
<p class="bi">>hirugarren testua.</p>
<style>
p {
text-align: right;
}
p.bi {
border:solid 3px blue;
text-align: left;
}
</style>
edozein atributu
Orain arte, HTMLko edozein elementuri erreferentzia egiteko id eta

class atributuak erabiltzen genituen. Gaur egun, CSS3rekin, guk nahi
dugun elementu zehatz bati egingo diogu erreferentzia. Horretarako,
taketak ([]) sinboloen artean idatziko dugu atributu baten balioa.
Adibidez, hiru elementuk bere atributuan balio berdina dute, eta guk
nabigatzailean elementu hori edo horiek itxura desberdinekin bistaratu nahi
ditugu. Hori egiteko, name atributua erabiliko dugu.
<p name="testua">lehenengo testua.</p>

<style>
P[name="testua"] { border:solid 1px red; }
P[name˄="tes"] { border:solid 1px red; }
P[name$"tua">] { border:solid 1px red; }
P[name*"test"] { border:solid 1px red; }
</style>

P[name="testua"] atributuak adierazten du HTMLko edozein <p>
etiketak CSSko propietateak beteko dituela bere name balioan testua
idatzita badu.
P[name˄="tes"] atributuak adierazten du HTMLko edozein <p>

etiketak CSSko propietateak beteko dituela bere name balioa tes
hitzarekin hasten bada.
P[name$"tua"] atributuak adierazten du HTMLko edozein <p>

etiketak CSSko propietateak beteko dituela bere name balioa tua
hitzarekin amaitzen bada.
P[name*="test"] adierazten du HTMLko edozein <p> etiketak CSSko

propietateak beteko dituela bere name balioan test hitza baldin badu.
pseudo-klaseak
CSSko pseudo-klase batek, HTMLko elementu edo etiketa baten (n) posizioa
kontuan hartuta, propietateak aldatuko dizkio elementu horri. Guk
aukeratzen dugun posizioan dagoen elementuari bakarrik aldatuko dizkio
propietateak. Zenbakiak ez ezik, beste balio hauek ere erabili ditzakegu:
odd eta even –bakoitiak eta bikoitiak–.
Adibidez, HTML dokumentuan hiru <p> etiketa ditugu, eta guk bigarren
etiketari propietateak aldatu nahi dizkiogu. Horretarako, p:nth-
child(2){color:red;} hautatzailearekin esaten ari gara bigarren
semeari ari garela erreferentzia egiten eta hari aldatu edo ezarri nahi
diogula propietate berezia. Lehenengo elementuari ezarri nahi badiogu
propietate jakin hori, (1) jarriko dugu balio bezala. Kontuan izan behar dugu
hautagaiaren ondoren (:)sinboloa jarri behar dugula.
<p class="testu1">1. testua</p>

<style>
p:nth-child(2) {background:red;}
p:nth-child(odd) {background:red;}
</style>

Beste hautatzaile batzuk
Lehenago aipatu ditugun hautatzaileak dira erabilienak, baina, horietaz

gain, beste hautatzaile batzuk ere erabil ditzakegu. Honako hauek dira:
Hautatzailea Zertarako?
Elementu guztiak hautatuko ditu.

*
* { background-color: green;}
Artikuluko elementu guztiak eta paragrafoko

etiketa,etiketa elementu guztiak hautatuko ditu.
elementua,elementua article,p { background-color:

green;}
Artikulu barruan dauden paragrafoko elementu

etiketa etiketa guztiak hautatuko ditu.
elementu elementu article p { background-color:

green;}
Artikulu barruan dauden paragrafoko azpielementu

etiketa>etiketa guztiak hautatuko ditu.
elementu>elementu article > p { background-color:

green;}
Artikulu barruan dauden paragrafoko

etiketa+etiketa azpielementuak ez ditu hautatuko, hurrengo
paragrafoa baino.
elementu+elementu
article + p { background-color:
green;}
Artikulu barruan ez dauden paragrafo guztiak

etiketa~etiketa hautatuko ditu.
elementu~elementu article ~ p { background-color:

green;}
[target]atributua duten elementu guztiak

hautatuko ditu.
[atributua]
P[target] { background-color:
green;}

[target=balioa]atributuan ipintzen den balioa
hartuko du kontuan elementuak hautatzeko orduan.
P[target=_blank]{background-color:
green;}
[atributua=balioa]
Atributuak eta haien balioak ugari izan daitezke, eta
hona hemen aukerak batzuk:
[target~=testua],[target|=testua],
[target˄=testua],[target$=testua],
[target*=testua]
Normalean, hautatzaile hau esteka batekin

erabiltzen da, eta, esteka horretan klik egiten
:active dugunean, markatuta geratuko da.
a:active {background-color: green;}
Normalean, hautatzaile hau esteka batekin

erabiltzen da, eta, kurtsorea estekaren gainean
:hover jartzean, markatuta ikusiko da hura.
a:hover {background-color: green;}
Normalean, estekekin erabiltzen da, eta testu jakin

bat esteka bat dela adierazteko erabiltzen da.
:link
a:link {background-color: green;}
Normalean, esteka batekin erabiltzen da, eta

adierazten du esteka hori aurretik bisitatu dugula.
:visited
a:visited {background-color:
green;}
Aukeratutako elementu baten atzean eduki bat

jartzeko erabiltzen da.
::after
p::after {content:”gogoratu hau”;}
Aukeratutako elementu baten aurrean eduki bat

jartzeko erabiltzen da.
::before
p::after {content:”gogoratu hau”;}
Formularioetan erabiltzen da. checked duten

<input> elementu guztiak hautatuko ditu.
:checked
p:checked {height: 60px;}

<p> elementu nagusi bakoitzaren lehenengo
azpielementuan izango du eragina.
:first-child
p:first-child{background-color:
green;}
<p> elementu nagusi bakoitzaren azken

:last-child
p:last-child{background-color:
green;}
<p> elementu barruan dagoen lehenengo lerroan

izango du eragina.
::first-line
P::first-line{font-size: 20px;}
<p> elementu nagusiaren barruan dagoen

lehenengo azpielementuan izango du eragina.
:first-of-type
p:first-of-type{font-size: 20px;}
<p> elementu nagusiaren barruan dagoen azken

:last-of-type
p:first-of-type{font-size: 20px;}
Formularioetan erabiltzen da. <input> elementu

baten barruan kurtsorea ipintzen dugunean, gelaxka
horrek zer portaera izango duen definitzeko
:focus
erabiltzen da.
input:focus {font-size: 20px;}
Formularioetan erabiltzen da: <input> elementu

batean barruti jakin bateko zenbaki bat eskatzen
denean eta gelaxka horretan sartu den zenbakia
eskatutako barrutiaren barruan dagoenean, gelaxka
:in-range
horrek zer portaera izango duen definitzeko
erabiltzen da.
input:in-range {font-size: 20px;}

baten barruan onartuta ez dagoen balio bat ipintzen
badugu, gelaxka horrek zer portaera izango duen
:invalid
definitzen da.
input:invalid {font-size: 20px;}
Aukeratutako <p> elementuetatik aukeratutako

(n) balioa hautatuko du; lehenengo <p>tik hasiko
:nth-child(n) da kontatzen.
p:nth-child(2){font-size: 20px;}

(n) balioa hautatuko du; azkenengo <p>tik hasiko
:nth-last-child(n) da kontatzen.
p:nth-child(2){font-size: 20px;}

(n) balioa hautatuko du; azkenengo <p>tik hasiko
:nth-last-of- da kontatzen, betiere <p> elementu horiek
type(n) elementu nagusiaren barruan daudela.
p:nth-last-of-type(2){font-size:
20px;}

(n) balioa hautatuko du; <p> elementu horiek
:nth-of-type(n) elementu nagusiaren barruan daudela.
p:nth-of-type(2){font-size: 20px;}
Elementu nagusiaren barruan dagoen lehen <p>

elementua hautatuko du.
:only-of-type
p:only-of-type{font-size: 20px;}
Elementu nagusiaren barruan <p> elementu batek

eta berak bakarrik egon behar du hautatua izateko.
:only-child
p:only-child{font-size: 20px;}

baten barruan <optional> atributua eskatzen
dugunean, gelaxka horrek zer portaera izango duen
:optional
definitzeko erabiltzen da.
p:optional {font-size: 20px;}

baten barruti jakin bateko zenbaki bat eskatzen
denean eta gelaxka horretan sartu den zenbakia
eskatutako barrutitik kanpo dagoenean, gelaxka
:out-of-range horrek zer portaera izango duen definitzeko
erabiltzen da.
input:out-of-range {font-size:
20px;}
Formularioetan erabiltzen da: <input>

elementuan datu bat sartzera behartzen denean,
gelaxka horrek zer portaera izango duen definitzeko
:required
erabiltzen da.
input:required {font-size: 20px;}
Esteka batean klik egiten dugunean esteka horrek

hautatutako #new elementu batean eragina
duenean erabiliko dugu.
:target {font-size: 20px;}

:target
<p><a href="#news1">egin klik eduki
honetan</a></p>
<p id="news1"><b>hau da klik egin

duzun edukiaren emaitza 1</b></p>

batzuetan datua ondo sartu dela adierazten duen
atributua da; hau da, inprimakietan, posta
:valid elektronikoetan eta URLetan gelaxka horrek zer
portaera izango duen definitzeko erabiltzen da.
input:valid {color:red; }
2.3. DOKUMENTUARI CSS ESTILOAK EZARTZEN

HTMLko dokumentu bati CSS estiloak ezartzeko orduan, kontuan izan behar dugu
hainbat nabigatzaile daudela merkatuan eta nabigatzaile bakoitzak dokumentuaren
itxura desberdin agertuko lezakeela bakoitzak era jakin batean jokatzen duelako kode-
lerro horiek interpretatu eta bistaratzeko orduan.
Nabigatzaile bakoitzak web-orri bat egituratzeko orduan, web-orri horren elementuak

hartuko ditu kontuan. Nola antolatuko ditu elementu horiek? Elementu horiek
bloketan (block) edo lerrotan (inline) antolatuko ditu.

Bloketan: Elementu guztiak, web-orrian, bata bestearen azpian
bistaratuko dira.
Lerrotan: Elementu guztiak, web-orrian, bata bestearen alboan

bistaratuko dira.
Nabigatzaileen bistaratze-moduko balio lehenetsia bloketan bistaratzea izaten da.

Hortaz, idazten ez badugu nola bistaratu nahi ditugun nabigatzaile batean gure
elementuak, HTMLko elementu guztiak -<header>, <nav>, <section>,
<footer> edo <div>- bata bestearen azpian agertuko dira.
Aurreko kapituluan, gaur egungo HTMLrekin eta CSSrekin sortutako diseinua erakutsi
dugu adibide bezala; oraingo honetan, ikusiko dugu nola egin diseinu hori CSSko kode-
lerroak erabiliz. HTMLko adibidean <section> eta <article> eduki baten barruan
ipini ditugu; baina CSSko adibidean ezabatu egin dugu eduki bat. Horrekin, ezaugarri
orokor batez ohartzea nahi dugu: kodifikatzeko orduan, diseinatzailearen esku dagoela
nola izendatu etiketak eta elementuak.
Horretaz gain, adibide honetan ikusiko dugu etiketa bakoitzak hautatzaile bat duela eta
hautatzaile bakoitzak berari dagozkion propietateak edo atributuak dituela. Egoki
jardun nahi badugu, hainbat hautatzailek propietate edo atributu berdinak
dituztenean, partekatu egin behar dituzte propietateak eta atributuak (ikus
adibidearen atala).

Hautatzaile berdinek propietate berdinak betetzen dituztenean, elkarrekin jarri behar
dira, eta bakarka jarriko dira bakarrik propietateren bat edo gehiago partekatzen ez
dutenean.
Horrela batuko genituzke hautatzaile horiek:
2.4. KAXAK DISEINATZEN

Lehenik eta behin, edozein diseinatzailek jakin behar du informazioa kaxetan argitaratu
behar dela nabigatzailean bistara dadin. Zergatik? Nabigatzaileetan informazio-atalak
ez direlako bata bestearen jarraian ematen: informazioa ezkerrean, eskuinean, goian,
behean… koka daiteke.
Hasiera batean, web-orriak diseinatzeko, taulak erabiltzen ziren: diseinatzaileek

taulatan antolatu behar zuten informazioa. Taulak lerroz eta zutabez daude antolatuta,
eta, taulako lerroak eta zutabeak batu egin daitezkeenez, diseinatzailearen gogora
diseina daitezke, edozein kalkulu-orri balitz modura.
Hona hemen adibide bat:

<style>
table, th, td { border: 1px solid black;
width:250px;
height:50px;
}
</style>
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td ></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Baina, web-orriak gero eta handiagoak egiten hasi zirenean, orduan eta informazio
gehiago eta handiagoa bistaratzen hasi ziren; beraz, diseinatzaileek lehenago diseinatu
behar zituzten taulek ez zuten dagoeneko balio, ezen informazioa bistaratuko zuten
taulak batzuetan txiki eta beste batzuetan handi geratzen baitziren.
Diseinatzaileentzat taulak erabiliz web-orri bat diseinatzea arazo bihurtu zen.

Horregatik, erabaki zen banandu egin behar zirela HTML estruktura eta nabigatzailean
estruktura hori aurkezteko modua. HTMLn <div> elementua definituz eta CSSn
elementu horri propietateak emanez, taulak alde batera uzteko aukera sortu zen. CSS
teknologiarekin batera <div> elementu erabiliz, askoz errazagoa zen kaxak
diseinatzea eta nabigatzaileko edozein tokitan kokatzea.
Gaur egun, informazioa kaxatan txertatzen dugu. Kaxak diseinatzeko orduan, beti
hartu behar dugu kontuan irudian agertzen den koadroa:
 top: goian
 bottom: behean
 right: eskuinean
 left: ezkerrean
Kaxak diseinatzeko, esan dezakegu hiru eredu ditugula: box model (kaxa arrunta), box-
sizing (kaxei tamaina ezartzea) eta flex-box (kaxa malgua).
2.4.1. KAXA ARRUNTA edo BOX MODEL EREDUA

Kaxa arrunta edo box model erabiltzen denean, kontuan izan behar ditugu
width (zabalera) eta height (altuera) atributuak; gainera, gehienetan, kaxa
baten zabalerari elementu hauen neurriak ere gehitu behar zaizkie:
padding (betegarria): Edukia izango duen kaxaren eta edukiaren

beraren artean egongo den hutsuneari deitzen zaio.
margin (marjina): Kaxaren eta kanpoaldearen artean egongo den

hutsuneari deitzen zaio.

border (ertza): Kaxa baten ertzari deitzen zaio.
Adibide honetan, <div> kaxa baten barruan testu bat daukagu, eta, kaxa
horren barruan, beste kaxa bat sortuko dugu, beste <div> batekin. Kaxa
bakoitzaren tamaina, <div> irekiera-etiketa eta itxiera-etiketa barruan
dauden testuek, irudiek… markatuko dute, tauletan gertatzen ez zen bezala.
<div>
<h1>kaxaren adibidea</h1>
<div>
<p>1. testua</p>
<p>2. testua</p>
<p>3. testua</p>
</div>
</div>
<style>
div {border: 1px solid red;
margin: 5px;
}
h1 {color: blue;
text-align: center;
}
p { font-family: "Times New Roman";

font-size: 20px;
}
</style>
2.4.2. BOX-SIZING EREDUA (Kaxei tamaina ezartzea)

Zer ekarpen du box-sizing ereduak? Kaxa arruntetan (box modelean), aipatzen
genuen kaxa baten zabaleraren eta altueraren neurri zehatza jakiteko kontuan
hartu behar genituela padding, border eta margin. Box-sizingekin,
berriz, ez dugu kalkulatzen hasi behar zenbateko lodiera duten ertzek,
zenbateko hutsunea dagoen ezkerreko eta eskuineko marjinetan, ezta

zenbatekoak diren ezarri dizkiogun betegarriak ere, kalkulu horiek berak
nabigatzailean egingo dituelako.
Kalkulua nola egiten den jakiteko, hona hemen adibide bat: eman dezagun
width atributuari 100 pixeleko balioa eman diogula; marginari, 20
pixelekoa; paddingari, 10 pixelekoa eta borderari, 1 pixelekoa. Beraz, 100
+ 20x2 + 10x2 + 1x2 = 162 pixel okupatuko du gure kaxak luze-zabalean.
Box-sizing atributua width eta height erabiltzen duten elementu

guztiei ezarri dakieke. Atributu honek balio hauek izan ditzake:
content-box: Bakarrik width eta height propietateen

portaera izango du kontuan; padding, margin eta border
ez ditu barne hartuko.
Adibidez: { width:300px; padding:10px; border:5px

solid; } definitzen badugu, nabigatzaileak bistaratuko duen
kaxaren zabalera 330 pixelekoa izango da.
padding-box: Kasu honetan, width eta height

propietateak ez ezik, padding propietatearen balioa ere hartuko
du kontuan; margin eta border propietateen balioak, ordea,
ez ditu kontuan izango.
Adibidez: { width:300px; padding:10px; } definitzen

badugu, nabigatzaileak bistaratuko duen kaxaren zabalera 280
pixelekoa izango da. width propietateari 20 pixel kentzen zaizkio.
border-box: Kasu honetan, width eta height propietateez

gain, padding eta border propietateen balioak ere hartuko
ditu kontuan; margin propietatearen balioa, ordea, ez du kontuan
izango.
Adibidez: { width:300px; padding:10px; border:10px

solid; } definitzen badugu, nabigatzaileak bistaratuko duen
kaxaren zabalera 260 pixelekoa izango da. widthari eta heightari
40 pixel kentzen zaizkio bakoitzari.
inherit Elementuak, box-sizing ereduan, emandako elementu

nagusiaren balioa jasoko du, edo elementu horren arbasoarena. Jaso
behar duen balioa negatiboa bada, balio hori zero bihurtuko du
nabigatzaileak. Ertzaren eta betegarriaren batura elementuaren
zabalera edo altuera baino handiagoa bada, width atributuaren
balioa zero bihurtuko du nabigatzaileak.
Kontuan izan behar da nabigatzaile guztiek ez dituztela propietate hauek modu

berean ulertzen, oraingoz propietate horiek esperimentalak direlako.
Horregatik, nabigatzaileek propietate horiek bistaratzeko, nabigatzaile
bakoitzari dagokion aurrizkia jarri behar zaie propietate berri hauei. Propietate
horiek nabigatzaile guztiek onartuak dituztenean, kendu egingo da aurrizki
hori.
Honako hauek dira propietateei jarri behar zaizkien aurrizkiak, nabigatzailearen

arabera:
-moz-, Mozilla Firefoxentzat: (-moz-box-sizing: border-

box)
-webkit-, Safari eta Google Chromerentzat: (-webkit-box-

sizing: border-box)
-o-, Operarentzat: (-o-box-sizing: border-box)
-khtml-, Konquerorentzat: (-khtml-box-sizing: border-

box)
-ms-, Internet Explorerrentzat: (-ms-box-sizing: border-

box)
2.4.3. KAXA MALGUA EDO FLEX-BOX EREDUA

Kaxa malguarekin lortu da bistaratu behar diren elementuak toki finko batean
kokatuta ez egotea; hots, nahiz eta kaxak bata bestearen ondoan bistaratzeko
kodifikatu ditugun, elementu horien portaera aldatu egingo da web-orria
bistaratu behar duen gailuaren tamaina aldatzen bada.
Badakigu, beraz, flex-boxaren ezaugarririk nagusiena dela kaxen zabalera eta

altuera aldatu egiten direla edozein bistaratze-gailutara doitzeko. Horregatik,
esan dezakegu kaxa malguaren modeloa aproposa dela gailu txikientzat,
geroago ikusiko ditugun blokekako eta lerrokako ereduak ez bezala. Izan ere,
blokekako ereduak elementuak lerro bertikal bat bezala bistaratuko ditu, eta
lerrokako ereduak, berriz, elementuak lerro horizontal bat bezala bistaratuko
ditu.
Gaur egun, web-orri bat diseinatzeko orduan, kontuan izan behar ditugu
ordenagailuak, tabletak eta smartphoneak, eta zenbat pixel eta zenbateko
bereizmena duten gailu horiek.
Nola funtzionatzen dute kaxa hauek? Lehenik eta behin, argi izan behar dugu
kaxak zer diren eta nola funtzionatzen duten. Kaxa malguetan edo flex-
boxetan, kaxa jakin batek kaxa nagusiaren papera hartuko du (elementu
nagusia), eta, haren barruan, beste kaxa batzuk eduki ditzake
(azpielementuak). Azpielementu horiek, era berean, beste azpielementu
batzuk eduki ahal dituzte barruan. Elementu nagusiaren papera jokatzen
duten kaxek flex atributua eduki behar dute, eta, horrela, haren semeak ere
malgu bihurtuko dira. Era berean, azpielementuek ere flex atributuarekin
definituta egon behar dute.

Bestalde, kaxa malguen propietateak estandarrak ez direnez, nabigatzaile
bakoitzari dagokion aurrizkia ezarri behar zaie.
Irudi honetan azalduko dugu nola funtzionatzen duten kaxa malguek edo flex-
boxek.
Edukiontzi malgua (flex container): Elementu malguak izango dituen

elementu nagusia da. Edukiontzi malgua flex edo inline-flex
balioekin definitzen da, display propietatean.
Elementu malgua (flex item): Azpielementuak malgua bihurtzen dira.
Ardatza (axis): Kaxa malguek bi ardatz dituzte; ardatz nagusia (main

axis) —elementu malguek bata bestearen ondoan lerro horizontal
batean jarraitzen dietenean—, eta bigarren mailako ardatza (cross axis)
—ardatz nagusiaren ardatz perpendikularra—.

Ardatz nagusia ezartzen du.
#eduki malgua {
width: 400px;
height: 400px;
border: 1px solid black;
display: flex;
flex-direction flex-direction: row-reverse;
}
Propietate honek dituen balioak hauek dira:
row, row-reverse, column, column-reverse,

initial, inherit
Elementu malguak ardatz nagusian nola ezarriko diren

definitzen du.
#eduki malgua {
width: 400px;
height: 400px;
justify-content display: flex;
justify-content: flex-end;
}
flex-start, flex-end, center, space-

between, space-around, initial, inherit
Elementu malguak bigarren mailako ardatzean nola ezarriko

diren definitzen du.
#eduki malgua {
width: 400px;
height: 400px;
align-items display: flex;
align-items: center;
}
stretch, center, flex-start, flex-end,

baseline, initial, inherit

Elementu malgu bakoitza bigarren mailako ardatzean nola
ezarriko den definitzen du. Propietate honek align-items
propietatean ezarritako balioa ordezkatuko du.
#eduki malgua {
width: 400px;
height: 400px;
align-self
display: flex;
align-self: center;
}
auto, stretch, center, flex-start, flex-

end, baseline, initial, inherit
Elementu malguak flex-wrap propietatearen barruan

nola kokatuko diren lerrokatzeko erabiltzen den propietatea
da.
#eduki malgua {
width: 400px;
height: 400px;
align-content display: flex;
align-self: center;
}
stretch, center, flex-start, flex-end,

center, space-between, space-around,
initial, inherit
Orientazioa: Edukiontzi malguaren ezkerreko eta eskuineko aldeei

hasiera nagusia (main start) eta amaiera nagusia (main end) esaten
zaie; eta goiko eta beheko aldeei, berriz, bigarren mailako hasiera
(cross start) eta bigarren mailako bukaera (cross end). Azpielementuak,
elementu nagusiaren barruan, ezkerretik eskuinera kokatzen dira, eta,
ondoren, goitik behera.

Elementuak elementu nagusiaren barruan zer ordenatan aterako
diren adierazteko erabiltzen da.
#eduki malgua {
width: 400px;
height: 400px;
display: flex;
}
order
#caxa1 { flex:1; order:2; }
number, initial, inherit

flex-direction eta flex-wrap propietateak bateratuko
ditu.
#eduki malgua {
flex-flow width: 400px;
height: 400px;
display: flex;
flex-flow: column-reverse wrap;
}
Lerroak: elementu malguak lerro batean edo gehiagotan bistaratu

daitezke.
Azpielementuak elementu nagusiaren barruan kabitzen ez direnean,
elementu horiek txikitu edo beste lerro batera pasatzeko aukera
ematen du.
#eduki malgua {
width: 400px;
height: 400px;
flex-wrap border: 1px solid black;
display: flex;
flex-wrap: wrap;
}
wrap, nowrap, wrap-reverse

Neurriak: altura eta zabalerari dagozkien terminoak tamaina nagusia
(main size) eta bigarren mailako tamaina (cross size) dira, eta
edukiontzi malguaren ardatz nagusiarekin eta bigarren mailako
ardatzarekin bat datoz.
Elementu malgu batek izan dezakeen gutxieneko altuera eta
zabalera definitzeko erabiltzen da.
min-width #eduki malgua {

min-height min-width: 400px;
min-height: 400px;
}
flex-basis, flex-grow eta flex-shrink

flex
propietateak elkarbiltzen ditu.
Elementu malgu bat handitzen denean zenbat handituko den

flex-grow
Elementu malgu batek zein izango duen tamainarik txikiena
flex-shrink
adierazteko erabiltzen da.
Elementu malgu bat txikitzen denean zenbat txikituko den

flex-basis

2.4.3.1. flex PROPIETATEA flex-basis ERABILIZ
flex-basis propietate bat da, eta, hura definituz gero,

azpielementuak anaien artean luzatu edo txikitu egingo dira bata
bestearekiko, betiere elementu nagusiari eman diogun tamaina beteta.
Azpielementuak definitzeko balio bakarra ipintzen badugu, balio hori
flex-basis da. Balioak pixelak edo hamartarrak izan daitezke.
Adibidez: Elementu nagusia 400 pixel zabal da, eta 150 pixel luze;
lehenengo eta hirugarren azpielementuek tamaina berbera izatea nahi
dugu, baina bigarren azpielementuak beste anaia bien bikoitza izatea
nahi dugu. Hona hemen nola definitzen den:
<style>
#eduki malgua {
width: 400px;
height: 150px;
display: flex;
}
#kaxa1{flex:1; background:#D2691E;}
#kaxa2{flex:2; background: #5F9EA0;}
#kaxa3{flex:1; background:#8B008B;}
</style>
<body>
<div id="eduki malgua">
<div id="kaxa1">1</div>
</div>
</body>

2.4.3.2. flex PROPIETATEA, flex-basis, flex-grow eta
flex-shrink ERABILIZ
Azpielementuei, flex egiteko, hiru balio ematea komeni da: lehen

balioa flex-shrink da; bigarren balioa, flex-grow; eta
hirugarren balioa, flex-basis. Propietate hauek erabilita, zehatz-
mehatz definituko dugu zenbat luzatu edo txikituko diren anaia-
elementuak bata bestearekiko elementu nagusiari emandako tamaina
betetzeko.
Adibidez: Elementu nagusia 400 pixel zabal da, eta 150 pixel luze; era
berean, azpielementuak flex-shrinken eta flex-growen 1
balioarekin definitu nahi ditugu; baina, flex-basisen, lehenengo bi
azpielementuek zabalera berekoak izatea nahi dugu, eta hirugarrenak,
berriz, zabalera finkoa izatea –225 pixel, hain zuzen–.
Orduan, elementu nagusia txikitu ahala, azpielementuak ere txikitu

egingo dira, baina hirugarren azpielementuak inoiz ez du 225 pixel baino
gutxiago izango zabaleran. Beste elementu biek soberan dagoen
zabalera partekatu beharko dute.
<style>
#eduki malgua {
width: 400px;
height: 150px;
display: flex;
}
#kaxa1{flex:1 1 auto; background:#D2691E;}

#kaxa2{flex:1 1 auto; background: #5F9EA0;}
#kaxa3{flex:1 1 225px; background:#8B008B;}
</style>
<body>
</div>
</body>

2.4.3.3. order PROPIETATEA
Propietate hau erabiliz, azpielementuek guk nahi dugun ordenan

kokatuko dira. Propietate horren balioa zero (0) bada –edo propietate
hori idazten ez badugu–, adierazi nahi dugu elementu hori ordenan
lehenengoa izango dela. Propietate batek baino gehiagok balio berbera
badute, HTMLn idatzita dagoen ordenan kokatuko dira.
<style>
#eduki malgua {
width: 400px;
height: 150px;
display: flex;
}
#kaxa1{flex:1; background:#D2691E;}
#kaxa2{flex:3; background:#5F9EA0; order:2;}
#kaxa3{flex:1; background:#8B008B; order:1;}
</style>
<body>
</div>
</body>

2.4.3.4. justify-content PROPIETATEA
Propietate honekin, azpielementu guztien tamainen batura elementu

nagusiaren tamaina baino txikiagoa bada, azpielementuak elementu
nagusiaren barruan justifikatuta kokatuko dira, beti ere azpielementuen
tamaina errespetatuz. Propietate hau elementu nagusiaren barruan
definitu behar dugu.
Adibidez: Elementu nagusia 400 pixel zabal da, eta 150 pixel altu.
Azpielementuak 100 pixel zabal dira, eta elementu nagusiaren altuera
berekoak. Azpielementuen zabaleren batura 300 pixel da, elementu
nagusiaren zabalera baino txikiagoa, eta, beraz, 100 pixel soberan ditugu
kaxa nagusian. Hutsune hori proportzionalki banatuta egon dadin,
elementu nagusian justify-content: space-between
definituko dugu; beraz, elementu nagusiaren barruan dauden
azpielementuak elementu nagusiaren barruan justifikatuta kokatuko
dira, eta soberako 100 pixelak proportzio berberean azpielementuen
artean kokatu.
<style>
#eduki malgua {
width: 400px;
height: 150px;
display: flex;
justify-content: space-between;
}
#kaxa1{width: 100px; background:#D2691E;}

#kaxa2{width: 100px; background:#5F9EA0;}
#kaxa3{width: 100px; background:#8B008B;}
</style>
<body>
</div>
</body>

2.4.3.5. align-items PROPIETATEA
Azpielementuak elementu nagusiaren barruan proportzionalki

justifikatuko dira ardatz bertikalean, betiere azpielementuen tamaina
errespetatuz.
Propietate hau elementu nagusiaren barruan definitu behar dugu.
<style>
#eduki malgua {
width: 450px;
height: 150px;
display: flex;
align-items: center;}
#kaxa1{width: 150px; height: 100px;

background:#D2691E;}
background:#5F9EA0;}
background:#8B008B;}
</style>
<body>
</div>
</body>

2.4.3.6. align-self PROPIETATEA
Batzuetan, azpielementu jakin batzuk desberdin lerrokatu nahi ditugu

elementu nagusiaren barruan. Propietate honekin hori egin dezakegu,
azpielementu jakin horiek desberdin jokatzeko defini ditzakegu eta.
<style>
#eduki malgua {
width: 450px;
height: 150px;
display: flex;
align-items: center;}
#kaxa1{flex:1; height: 100px; background:#D2691E;}

#kaxa2{flex:1; height: 100px; background:#5F9EA0;
align-self: baseline;}
#kaxa3{flex:1; height: 100px; background:#8B008B;}
</style>
<body>
</div>
</body>

2.4.3.7. flex-wrap PROPIETATEA
Propietate honekin, azpielementuak bildu egiten dira elementu

nagusiaren barruan, betiere elementu nagusiaren tamaina errespetatuz.
Hau da, diseinatzaileak azpielementuak ordenagailuko pantaila estandar
batean lerro batean bistaratu nahi ditu, baina, azpielementuak tamaina
txikiagoko beste gailu batean bistaratzeko, flex-wrap propietatea
erabili beharko du eta haren balioa wrap dela esan. Horrela,
azpielementu horiek gailu txiki horren tamainara doituko dira.
<style>
#eduki malgua {
width: 450px;
height: 150px;
justify-content: center;
display: flex;
flex-wrap: wrap;
}
#kaxa1{width: 150px; background:#D2691E;}

#kaxa2{width: 150px; background:#5F9EA0;}
#kaxa3{flex:1 1 300px; background:#8B008B;}
</style>
<body>
</div>
</body>

2.4.3.8. align-content PROPIETATEA
Propietate honekin, elementu nagusiari flex-wrap ezarri badiogu,

azpielementuak lerrokatzeko aukera daukagu. Propietate hau elementu
nagusiaren barruan definitu behar dugu.
Adibidez, elementu nagusia 400 pixel zabal da, eta 150 pixel altu.
Azpielementu bakoitzak 50 pixeleko altuera du; lehenengo bi
azpielementuen zabalera 120 pixelekoa da, eta hirugarrenarena, berriz,
300 pixelekoa. Azpielementuen zabaleren batura 540 pixel da, elementu
nagusiaren zabalera baino handiagoa. Beraz, lehenengo bi
azpielementuen zabalera elementu nagusiaren zabalera baino txikiagoa
denez, azpielementu bi horiek elementu nagusiaren lehen lerroa oso-
osorik beteko dute. Hirugarren azpielementua azpian kokatuko da, eta
oso-osorik okupatuko du lerroa. Baina, kasu honetan, guk hala erabaki
dugulako space-between balioarekin, hutsune bat txertatuko du
tartean, azpielementuen altuera elementu nagusiarena baino txikiagoa
baita.
<style>
#eduki malgua {
width: 450px;
height: 150px;
align-content: space-between;
display: flex;
flex-wrap: wrap;
}
#kaxa1{flex:1 1 120px; height:50px;

background:#D2691E;}
background:#5F9EA0;}
background:#8B008B;}
</style>
<body>
</div>
</body>

2.5. ARIKETAK
1. Hasi zure lehengo web-orria diseinatzen. Horretarako, paper zuri bat

erabiliz, marraztu nolako diseinua izango duen. Koka ezazu alboko barra
eskuineko alderdian.
2. CSS erabiliz, web-orri bihurtu ezazu aurretik paperean marraztu duzun

prototipoa, edozein HTML eta CSS editorerekin.

3. CSS3REN PROPIETATE BERRIAK
3.1. ARAU BERRIAK

Web-orrien diseinua asko aldatu da sortu zirenetik gaur egunera arte. Izan ere,
diseinatzaileak ohartu ziren web-dokumentuek erakargarriak eta erabilerrazak izan
behar zutela erabiltzaileen interesa suspertzeko; hala ez bazen, erabiltzaileek ez zuten
dokumentu horretara ezertara joko. Denborarekin, aplikazio berriak sortu dira web-
orrien diseinua hobetzeko; esate baterako, Ajax.
Horretaz gain, programatzaile batzuek beharrezkotzat ikusten zuten HTML hobetu egin
behar zela, eta, harekin batera, baita CSS ere. Horrela iritsi gara, pixkanaka-pixkanaka,
HTML5era eta CSS3ra.
Hasiera batean, CSS teknologia HTMLko estrukturaren itxura hobetzeko sortu zen,
baina azkeneko bertsioa, CSS3, HTMLren itxura hobetzeko baino gauza gehiago egiteko
kapaz da: dokumentuari forma emateaz gain, dokumentu horretan dauden elementuei
mugimendua emateko gai da.
Kapitulu honetan, CSS3k eta HTML5ek zer ekarpen berri egin dituen ikasiko dugu –hau
da, zer propietate berri inplementatu dizkioten diseinatzaile eta garatzaileei web-
orriak diseinatzea errazteko–. Propietate horiek berriak direlako oraindik
estandarizatuta ez daudenez, ez zaigu ahaztu behar nabigatzaile bakoitzari dagokion
aurrizkia jarri behar zaiela programatzen ari garenean.
3.1.1. border-radius PROPIETATEA

Lehenago, diseinatzaileek web-orriko kaxek ertz biribilduak izatea nahi
bazuten, izugarrizko trikimailuak egin behar zituzten hori lortzeko; gaur egun,
ordea, border-radius propietatearekin, oso erraza da ertz horrek
biribiltzea.
Kontuan izanda zer forma (eliptikoa edo biribila) eman nahi diogun kaxa bati,
erradioa definitzeko orduan, erradio horrek balio bat edo bi izango ditu
propietatean.
Ertz biribildurik gabe Biribildua, zirkulu- Biribildua, elipse-

arkua erabilita arkua erabilita

<style>
div {
padding: 10px 40px;
background: #F0FFFF;
width: 300px;
border-radius: 25px;
}
</style>
<body>
<div>hemen ertz biribilak dituen kaxa bat.</div>
</body>
3.1.2. box-shadow PROPIETATEA

Orain arte, ez zen kontu erraza kaxa bati atzealdean itzala ezartzea; hau da,
HTMLko estrukturetan, lehenengo, irudiak definitu behar ziren banan-banan,
eta, gainera, irudi bakar batekin ez zen nahikoa izaten. Itzal-efektu on bat
izateko, irudiak bata bestearen gainean ondo kokatu behar ziren.
box-shadow propietateari esker, oso erraza da kaxei izugarrizko itzalak

jartzea. Nahiz eta itzalak egiteko tresna ugari egon Interneten, oso
garrantzitsua da jakitea nola funtzionatzen duen propietate honek.
Kaxa bati itzala ezartzeko orduan, ordena hau hartu behar da kontuan:
1. itzalak zer luzera horizontal izango duen
2. itzalak zer luzera bertikal izango duen
3. zenbatekoa den itzal horren orbana
4. itzala zenbat zabalduko den
5. itzalak zer kolore izango duen (rgb)
6. itzalak zer opakutasun izango duen (a)

<style>
div {
width: 300px;
height: 100px;
background-color: red;
box-shadow: 9px 9px 10px 0px
rgba(0,0,0,0.75);
}
</style>
<body>
<div> </div>
</body>
3.1.3. text-shadow PROPIETATEA

Propietate hau kaxa baten barruko testuei itzala emateko erabiltzen da.
text-shadow propietateari esker, oso erraza da testuei izugarrizko itzalak

jartzea. Nahiz eta itzalak egiteko tresna ugari egon Interneten, oso
garrantzitsua da jakitea nola funtzionatzen duen propietate honek.
Testu batei itzala ezartzeko orduan, ordena hau hartu behar da kontuan:
1. itzalak zer luzera horizontal izango duen
2. itzalak zer luzera bertikal izango duen
3. itzalak zer angelu izango duen
4. itzalak zer kolore izango duen (rgb)
5. itzalak zer opakutasun izango duen (a)

<style>
h1 {
text-shadow: 14px 14px 2px rgba(201, 105, 91,
0.68); }
</style>
<body>
<h1>text-shadow efektua</h1>
</body>
3.1.4. @font-face ARAUA

text-shadow propietatearekin testuari efektu tridimentsionala ematen
badiogu ere, @font-face arauarekin testuaren itxura asko hobetu
dezakegu, ezen ohikoak ez diren letra-tipoak ezar ditzakegu gure web-orrian;
hau da, orain arte, bakarrik testu-prozesadoreak zekartzan letra-tipoak erabil
genitzakeen, baina arau honek Interneten dauden letra-tipoak erabiltzeko
aukera ematen digu.
Interneten, web-orri batzuek letra-tipoen zerrendak eskaintzen dituzte, eta

gustuko ditugun letra-tipoak jaits ditzakegu gure karpetara; beste aukera bat
da gure gustuko letra-tipoaren bide osoa kopiatzea @font-face arauan.
Baina azkeneko aukera honek desabantaila bat du: gure web-orrian ezingo da
letra-tipo hori kargatu baldin eta dena delakoagatik bidea aldatu delako, edo
desagertu egin delako, edo zerbitzaria ez dabilelako…
Letra-tipoak eskaintzen dituzten orri asko daude; horietariko bat da

http://www.fontsquirrel.com. Adibide honetan, azalduko dugu orri horretatik
nola jaitsi letra-tipo bat eta nola ezarri HTML eta CSSn. Horretarako honako
pauso hauek eman behar ditugu:
1. Lehenik eta behin, gustuko dugun letra-tipoa jaitsi.
2. Nabigatzaile bakoitzak ondo interpretatzeko, jaitsitako artxiboa

bihurtu, webfont generator botoian klik eginda.
3. Bihurtutako artxiboa proiektuaren karpetan gorde.
4. Demo fitxategian klik egin eta CSS kodea ikusi.

@font-face {
font-family: "testu-proba";
src: url("../fonts/Crop-Circles.eot");
src: url("../fonts/Crop-
Circles.ttf")format("truetype");
src: url("../fonts/Crop-Circles-webfont.eot?#iefix")
format("embedded-opentype"),
url("../fonts/Crop-Circles-webfont.woff2")
format("woff2"),
url("../fonts/Crop-Circles-webfont.woff")
format("woff"),
url("../fonts/Crop-Circles-webfont.svg") format("svg"),
font-weight: normal;
font-style: normal; }
5. Kode hau gehitu beharko dugu gure CSSko dokumentuan:
body {font-family: "testu-proba", Arial, Helvetica,

sans-serif; font-size: 3em; }
6. Ondoren, HTML dokumentuan lerroa hau idatziko dugu, betiere CSS

dokumentua HTML dokumentuaren barruan ez badago.
<link rel="stylesheet" href="css/estiloa.css" />
<style>
@font-face {
font-family: "testu-proba";
src: url("../fonts/Crop-Circles.eot");
src: url("../fonts/Crop-Circles.ttf")
format("truetype");
src: url("../fonts/Crop-Circles-
webfont.eot?#iefix") format("embedded-opentype"),
url("../fonts/Crop-Circles-webfont.woff2")
format("woff2"),
url("../fonts/Crop-Circles-webfont.woff")
format("woff"),
url("../fonts/Crop-Circles-webfont.svg")
format("svg"),
font-style: normal;
}
body {
font-family: "testu-proba", Arial, Helvetica,
sans-serif;
font-size: 3em;
}
</style>
<body
Hau @font-face testua da
</body>

3.1.5. linear-gradient
<background> propietatearekin diseinatzen da kaxen hondoa. linear-
gradient azpipropietarearekin, kaxei lerroz osatutako hondoa ezartzen
zaie, baina gradientean. Gogoratu nabigatzaile bakoitzak bere aurrizkia behar
duela.
background: linear-gradient (kolorea non

hasiko den, hasierako kolorea, bukaerako
kolorea);
Kolorea non hasiko den ezartzekoak top, top right, top left,
bottom, bottom right, bottom left… izango dira; horretaz gain,
graduak ere erabili ditzakegu: adibidez, 30deg…
linear-gradientek bi kolore eskatzen ditu, gutxienez: hasierako kolorea

eta bukaerakoa. Baina kolore gehiago ere erabil ditzakegu.
<style>
div {
height: 200px;
background: linear-gradient(top, red, blue,
yellow);
}
</style>
<body
<div></div>
</body>
3.1.6. radial-gradient
Kaxei hondoa ezartzeko erabiltzen da, gradiente radialean. linear-
gradient modura, radial-gradient kaxei efektuak emateko
erabiltzen da, efektu ikaragarriak emateko erabili ere. <background>

propietatea eta parametro batzuk aldatuta, web-orriaren itxura profesional
bihur dezakegu. Gogoratu nabigatzaile bakoitzak bere aurrizkia behar duela.
background: radial-gradiant (kolorea non

kokatuko den, nolakoa izango den, hasierako
kolorea, bukaerako kolorea);
Kolorea non hasiko den ezartzekoak top, top right, top left,
bottom, bottom right, bottom left… izango dira; horretaz gain,
ehunekoak ere erabili ditzakegu: adibidez, 30%…
Adibide hau konplexuagoa denez, zer definitzen den azalduko dugu:
background-image: radial-gradient(50% 50%, circle

1. contain, #fcf7ef, rgba(20, 27, 247, 0.8) 100%)
1. Horizontalki, radial-gradient hori kaxaren % 50ean kokatuko

da.
2. Bertikalki, radial-gradient hori kaxaren % 50ean kokatuko da.
3. Kaxa barruan biribil bat egingo du (circle).
4. Biribilaren tamaina, edukiaren tamainakoa izango da (contain).
5. Biribilaren hasierako kolorea zuria izango da (#fcf7ef).
6. rgba siglak koloreak adierazten ditu: lehen hiru letrek (red, green,
blue) gorriaren, berdearen eta urdinaren nahasketa adierazten dute.
Eta azken balioak adierazten nahasketa horren opakutasuna, alpha.
7. Azken balioa radial-gradienten tamaina izango da.
radial-gradientek kolore bi eskatzen ditu, gutxienez: hasierako kolorea

eta bukaerakoa. Baina kolore gehiago ere erabil ditzakegu. radial-
gradient definitzeko, derrigorrean definitu behar dugu hauetariko balio
batekin: circle edo ellipse.
Adibide honetan, beste modu batera definituko dugu gure radial-

gradienta.

<style>
div {
height: 200px;
background: -moz-radial-gradient( center , circle,
green,red,black);
}
</style>
<body
<div></div>
</body>
3.1.7. rgba
CSS3 sortu arte, gehienetan kolore solidoak definitzen ziren, koloreak ingelesez
idatzita, koloreen baliokidea hamaseitarretan idatzita edo rgb() funtzioa
erabilita (rgb red, green eta blueren sigla da); rgb()propietatearen balioek
zenbaki hamartarrak izan behar dute, 0tik 1era arte.
CSS3n, funtzio berri bat gehitu da, rgba() funtzioa, eta horrek izugarri
sinplifikatu du koloreak eta gardentasun-maila definitzea; horrela, aurreko CSS
bertsioaren opacity propietatearen arazoak konpondu ditu.
rgba() funtzioak 4 atributu ditu: lehenengo hiru balioak rgb()funtzioaren

balio berdinak dira (gorriaren, berdearen eta urdinaren konbinazioa); azkeneko
balioak gardentasuna definitzen du; balio honek izan dezakeen tartea 0tik 1era
artekoa izango da: 0 balioa % 100 gardena da, eta 1 balioa % 100 opakua da.
text-shadow: 10px 10px 5px gba(0,0,0,0.5);

3.1.8. hsla
rgba() funtzioaren berdina da. Kasu honetan, hizkiek, koloreak adierazi
beharrean, tonua, saturazioa, argitasuna eta opakutasuna adierazten dute (hue,
saturation, lightness eta alpha). Aurreko bertsioan, hsl erabiltzen zen, eta
azkeneko bertsio honekin, hobetu eginda opakutasuna.
background-color: hsla(170, 50%, 45%, 1);
(h)-k kolorea adierazten du: 0otik 120ora kolore gorriak dira; 121ºtik
240ora kolore berdeak dira, eta 241otik 360ora kolore urdinak dira.
(s): % 0, saturazio desnaturala; eta % 100, oso-osorik saturatua.
(l): % 0, oso iluna (beltza); eta % 100, oso argia (zuria).
(a): 0, oso gardena; eta 100, oso opakua.
3.1.9. outline PROPIETATEA

Propietate honek aukeratutako elementu baten ingurua definitzen du.
Aurreko bertsioetan ere erabiltzen zen propietate bat da; border
propietatearen funtzio berbera du, eta elementu bati bigarren ertza egiteko
erabiltzen da. Propietate honek erabiltzen dituen balioak border
propietatearen berdinak dira.
<style>
div {
border: 1px solid red;
outline: green dotted thick;
}
</style>
<body
<div> hau outline adibidea da.</div>
</body>

3.1.10. border-image PROPIETATEA
border eta outline propietateek sortzen dituzten efektuak oso basikoak
dira. border-image propietatearekin, kaxa baten ertzak profesionalago
bihurtuko dira; horretarako, nahikoa da ertzetan jarriko dugun irudiaren
txantiloi bat izatea.
Eman dezagun kaxa baten ertzak sortu nahi ditugula. Horretarako, hiru
atributu definitu behar ditugu: hasteko, zer izen duen erabiliko dugun
txantiloiak eta zer lekutan dagoen kokatuta. Horrela hasiko gara idazten
bidea: url( ). Gainera, definitu behar dugu zer tamaina izango duen
txantiloiaren irudiaren ertzak; eta azkenik, nolakoa izango den ertz hori.
Ezaugarri horiek stretch,round eta repeat propietateekin definituko
ditugu.
Irudi honetan, zati bakoitza 29 pixel zabal da.
<style>
#ertz-imagina {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;
}
</style>
<body
<p id="ertz-imagina">adibide honetan ertzetan
irudi bat sartu dugu</p>
</body>

3.1.11. background PROPIETATEA
CSS3ko background propietateak aukera gehiago ematen dizkigu aurreko
bertsiokoak ematen zizkigunekin konparatzen badugu. Propietate honek
ematen dizkigun aukerak honako hauek dira:
background-color: Elementu baten hondoaren kolorea

ezartzeko erabiltzen da. Kolore hori hamaseitarrean, ingelesez edo
rgb() funtzioarekin ezar daiteke.
background-image: Elementu baten hondoan irudi bat edo

gehiago ezartzeko erabiltzen da. Irudia hondoan ezartzeko, url()
funtzioa erabili behar da. Irudiaren kokapena kakotx artean jarri
behar dugu.
background-position: Irudia elementu baten barruan zer

hasiera-puntutan kokatuko den ezartzeko erabiltzen da. Hasiera-
puntua pixeletan edo center, left, right, top eta
botton erabilita definituko dugu.
background-size: Elementu barruan ezarri dugun irudiak zer

tamaina izango duen ezartzeko erabiliko dugu. Propietatearen
balioak cover eta contain dira. cover balioak irudia
elementuaren gutxieneko altuerara eta zabalerara bihurtuko du;
contain balioak elementuaren tamaina osoa betetzeraino
bihurtuko du irudia.
background-repeat: Elementu barruan ezarri dugun irudia

errepikatzea nahi dugun ala ez ezartzeko erabiltzen da. Normalean,
elementuaren tamaina irudiaren tamaina baino handiagoa bada,
behin eta berriz errepikatzen da irudi hori, eta, ondorioz, oso
desatsegina bihurtzen da. Propietatearen balioak hauek dira:
repeat, repeat-x, repeat-y eta no-repeat.
background-origin: Elementu baten barruan irudi bat

txertatzeko, border-box, padding-box eta content-box
balioak definituko ditugu. Balio horiek markatuko dute non
kokatuko den irudia elementu horren barruan.
background-clip: Propietate honekin definituko dugu

elementuaren azalera zenbatekoa izango den. Horretarako balio
hauek hartuko ditugu kontuan: background-origin,
border-box, padding-box eta content-box.
background-attachment: Propietate honekin definituko dugu

ea irudia elementuaren barruan finkoa izango den (fixed) edo
mugitu egingo den irudi hori elementuaren barruan (scroll).
Pantailan gora edo behera mugitzen garenean, hondoko irudia finko

geldituko da fixed propietatearekin; scroll propietatearekin,
ordea, irudia testuarekin batera mugituko da.
column (zutabeak): CSS3ren propietate berria da, kaxa baten

barruan zutabeak egitea asko errazten duena. Aukera hauek ditu:
column-count, column-gap eta column-rule. Zer
adierazten du propietate bakoitzak? Lehenengoak, zenbat zutabe
izango dituen; bigarrenak, zenbateko hutsunea nahi dugun
zutabeen artean; eta hirugarrenak, zer ezaugarri izango dituzten
zutabeak banatzen dituzten lerroek. Horietaz gain, beste bi
propietate hauek defini ditzakegu, nahi izanez gero: column-
width eta column-span. Lehenengoa, zutabe batek zenbateko
zabalera izango duen adierazteko erabiltzen da, eta bigarrena, kaxa
baten barruan dagoen elementu bat zutabe baten barruan
kokatuko den edo zutabe bat baino gehiagotan kokatuko den
adierazteko. column-span propietatearen balioak bi dira: all
(zutabe guztietan), eta none (zutabe batean ere ez; lehenetsita
dator balio hau).
Web-orriko kaxen ertzak biribiltzeko erabiltzen da. Ertzen balioa

zabalera-altuera px, pt, em neurrietan eta ehunekotan ezarri
daiteke.
Adibide honetan, ertz guztietan izango du eragina:
border- p { border-radius: 20px;}

radious
border-radious propietateak kaxaren ertzen balioak
banan-banan definitzeko aukera ematen digu:
border-top-left-radius, border-top-right-
radious, border-bottom-left-radius, border-
bottom-right-radius.
Kaxa bati itzala ezartzeko erabiltzen da. Itzalen

desplazamenduak (horizontala eta bertikala) pixeletan
adierazten dira, eta koloreak, ehunekotan. 1 izango da
box-shadow tamainarik handiena. Ez da % sinboloa idazten.
p { box-shadow: 9px 9px 10px 0px rgba

(0,0,0,0.75); }

Testu-prozesadoreek eurekin batera ekartzen ez dituzten letra-
tipoak ezartzeko erabiltzen da.
@font-face {
font-family: "pruebatexto";
Circles.eot");
Circles.ttf") format("truetype");
src: url("../fonts/Crop-Circles-
webfont.eot?#iefix")
format("embedded-opentype"),
@font-face url("../fonts/Crop-Circles-
webfont.woff2") format("woff2"),
url("../fonts/Crop-Circles-
webfont.woff") format("woff"),
url("../fonts/Crop-Circles-
webfont.svg") format("svg"),
font-style: normal;
}
body {
font-family: "pruebatexto", Arial,
Helvetica, sans-serif;
font-size: 3em;
}
Kaxei hondoko kolorea ezartzeko erabiltzen da. Lerro zuzenean

egiten du lan.
linear-
gradient div {height: 200px; background: linear-
gradient(top,red, blue); }
Kaxei hondoko kolorea ezartzeko erabiltzen da. Forma biribila

edo eliptikoa har ditzake
radial-
gradient div { height: 200px; background: radial-
gradient(center , circle, green, red,
black); }
Lehenengo hiru letrek gorria, berdea eta urdina adierazten dute

(r=red, g=green eta b=blue), eta azkeneko atributuak
rgba opakutasun- edo gardentasun-maila adierazten du (a=alpha).
rgba(20, 27, 247, 0.8)

Lehenengo hiru letrek tonua, saturazioa eta argitasuna
adierazten dute (h=hue, s=saturation eta l=lightness), eta
azkeneko atributuak opakutasun- edo gardentasun-maila
hsla
adierazten du (a=alpha).
background-color: hsla(170, 50%, 45%, 1);
border propietateak egiten duen modura, ertz bat sortuko du

—kasu honetan, bigarren ertz bat—, aukeratutako elementutik
outline pixka bat desplazatuta egongo dena.
div { border: 1px solid red;outline: green

dotted thick; }
Irudi baten txantiloiarekin, ertzei irudi hori ezartzeko erabiltzen

da.
#ertz-imagina {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30
border-image stretch;
}
border-image propietateak kaxaren ertzen balioak banan-
banan definitzeko aukera ematen digu:
border-image-source, border-image-slice,
border-image-width, border-image-outset,
border-image-repeat
Elementu baten barruan irudi bat ezartzen dugunean, irudi

horrek elementu baten barruan zer portaera izango duen
adierazteko erabiltzen da.
Propietate honek balio hauek banan-banan definitzeko aukera

background ematen digu:
background-color, background-image,
background-position, background-size,
background-repeat, background-origin,
background-clip, background-attachment

Dokumentu baten zenbat zutabe izango ditugun eta zer
ezaugarri izango dituzten adierazteko erabiltzen da.
zutabeak {
column-count: 3;
column-gap: 15px;
column- column-rule: 2px solid darkblue;
}
column-count, column-gap, column-rule,

column-span, column-width
3.1.12. transform PROPIETATEA

HTMLen sortutako elementuak ezin dira berez mugitu, bloke finkoak direlako.
Lehenago, elementu horiek mugitu nahi bagenituen Javascripteko kodeak
erabili behar ziren, edo JQueryren programategiak. CSS3n transform eta
transition propietateak garatu ziren arte, ez zegoen beste modurik bloke
finko horrek mugitzeko.
transform propietatea erabiliz, edozein elementuri oinarrizko lau

transformazio eragin diezazkiokegu: scale (eskalatu), rotate (jiratu),
skew (okertu) eta translate (mugitu). Horretarako, ez daukagu besterik
egin beharrik transformatu nahi dugun elementuaren koordenatuak aldatu
baino.
transform propietateak trantsizioak edo animazioak egiteko erabiltzen dira

batez ere.
Propietate horiek oraingoz estandarizatuta ez daudenez, nabigatzaile

bakoitzari dagokion aurrizkia ezarri behar zaie.
Irudian honetan ikus dezakegu zer eragin duen elementu batean propietate
hauek erabiltzeak:
scale (eskalatu)
translate
x:1, y:1.5
(mugitu)
15px eskuinera
15px behera

3.1.12.1. transform:scale PROPIETATEA
Propietate honek parametro bi jasoko ditu, x balioa eta y balioa, eta horien
arabera eskalatu egingo du kaxak –handitu edo txikitu egingo da–.
Matematikako grafikoek funtzionatzen duten modura funtzionatzen du;
beraz, balio negatiboa ezartzen badugu, kaxaren noranzkoa ere aldatu
egiten da. Propietateari balio bakarra ezarriko bagenio, balio hori berbera
izango litzateke x (horizontala) eta y (bertikala) parametroentzat. Balio bi
erabiltzen ditugunean, koma baten bitartez (,) bereiziko dira.
<style>
div {
width: 200px;
height: 100px;
background-color: khaki;
transform:scale(1,-1);
}
</style>
<body>
<div>kaixo</div>
</body>

3.1.12.2. transform:rotate PROPIETATEA
Propietate honek jirarazi egiten du elementu bat, erlojuaren orratzen

noranzkoa kontuan hartuta. Balioa gradutan idatziko dugu: 0 gradutik 360
gradura bitartekoa izango da.
<style>
div {
margin: 25px;
width: 100px;
height: 100px;
transform:rotate(-75deg);
}
</style>
<body>
<div>kaixo</div>
</body>

3.1.12.3. transform:skew PROPIETATEA
Propietate hau elementuak okertzeko erabiltzen da. Elementuen simetrian

izango du eragina; hau da, elementuaren x eta y noranzkoak izango ditu
kontuan eta elementua zenbat gradutan okertuko den. Propietate honen
balioa gradutan adierazi behar dugu: 0 gradutik 360 gradura bitartekoa
izango da. Bi balio izan ditzake –x eta y parametroenak–; balio bakarra
idazten badugu, esan nahi du parametro horiek berdinak direla. Balio bi
erabiltzen ditugunean koma baten bitartez (,) bereiziko dira.
X-angelua=20, Y-angelua=20 X-angelua=20, Y-angelua=20

jatorrizkoa
X-erdia=75, Y-erdia=75
<style>
div {
margin: 25px;
width: 100px;
height: 100px;
transform:skew(75deg, 25deg);
}
</style>
<body>
<div>kaixo</div>
</body>

3.1.12.4. transform:translate PROPIETATEA
Propietate hau elementu bat mugitzeko erabiltzen da, x eta y noranzkoetan.

Kontuan izan behar dugu abiatze-puntuak x=0 (noranzko horizontala) eta
y=0 (noranzko bertikala) direla. Noranzkoa pixeletan, puntutan… definituko
da, sekula ez gradutan. Bi balio izan ditzake: x eta y parametroak. Balio bi
erabiltzen ditugunean, koma baten bitartez (,) bereiziko dira.
<style>
div {
margin: 25px;
width: 100px;
height: 100px;
transform:translate(3px, 60px);
}
</style>
<body>
<div>kaixo</div>
</body>

3.1.12.5. transform:matrix PROPIETATEA
Propietate honekin, elementu baten koordenatuak aldatuko ditugu.

Gutxienez, sei balio dituen matrize bat osatzen du. 6 balioko elementu bat
bi dimentsiokoa (2D) izango da, baina 16 balioko matrize bat idazten
badugu, hiru dimentsiokoa (3D) izango da. Kontuan izan behar dugu
propietate hau estandarra ez denez nabigatzaile bakoitzarentzat bere
aurrizki propioa idatzi behar dugula.
<style>
div {
background: Khaki; width: 45em;
transform: matrix(1, -0.2, 0, 1, 0, 0);}
</style>
<body>
<div>kaixo</div>
</body>

3.2. HIRU DIMENTSIOKO (3D) TRANSFORMAZIOAK
Orain arte, ikusi dugu nola eragin bi dimentsioko (2D) transformazioak HTMLn dauden
elementuei, baina, atal honetan, transform propietateak dituen aukerak erabilita,
azalduko dugu nola bihurtu hiru dimentsioko elementu HTMLn dauden elementuak.
Elementu bat hiru dimentsioko elementu bihurtzeko, perspective propietatea

erabiliko dugu transform propietatearekin batera. Hiru dimentsioko elementu bat
egiteko, honako propietate hauek izan behar ditugu kontuan:
3.2.1. perspective()
Propietate hau elementu bati sakontasuna emateko erabiltzen da; horrela,
elementu horri begira dagoenak pentsatuko du hiru dimentsioko espazioa
ikusten duela. Elementuaren alderdi bat hurbil dagoela adierazteko, handitu
egingo du alderdi hori, eta,aldiz, alderdi bat urruti dagoela adierazteko, txikitu
egingo du alderdi hori. Propietate honen balioa pixeletan, puntutan, em-
etan… adieraziko da. Pantailan 3Dko efektua ikusteko, funtzio hau aplikatuko
du lehenengo.
3.2.2. translate3d(x, y, z)
Propietate honekin, guk definitu dugun elementu bat hiru dimentsioko
espazio batean ipiniko dugu. x, y eta z balioak pixeletan definituko ditugu.
Honako irudi honetan ikusten dugu zer adierazten duen balio bakoitzak.
translate propietateak dituen atributuen balioak banan-banan defini

daitezke, nahi izanez gero: translateX (x), translateY (y) eta
translateZ (z).

3.2.3. scale3d(x, y, z)
Propietate hau guk definitu dugun elementu bati hiru dimentsioko espazioan
beste eskala bat emateko erabiltzen da. Sakontasuna z balioak adierazten du.
Hiru balioek hamartarrak izan behar dute. z atributuak sakontasuna
adierazten duenez, ez da z atributuaren efektua nabaritzen elementuak
animaziorik gabe daudenean; bai, ordea, elementuak mugitzen direnean.
scale propietateak dituen atributuen balioak banan-banan defini daitezke,

nahi izanez gero: scaleX (x), scaleY (y) eta scaleZ (z).
3.2.4. rotate3d(x, y, z, angelua)

Propietate honekin, hiru dimentsioko itxura emango diogu hiru dimentsioko
espazioan kokatu dugun elementu bati. Nola sortzen da efektu hori? x, y, z eta
angelu-atributuei balioak ezartzen dizkiegunean, elementu hori bere
ardatzaren inguruan biratuko da. x, y eta z atributuei balioak hamartarrak
eman behar dizkiegu, eta angeluaren balioa gradutan emango dugu.
rotate propietateak dituen atributuen balioak banan-banan defini daitezke,

nahi izanez gero: rotateX(angelua), rotateY(angelua) eta
rotateZ(angelua).
Adibide hauetan ikusten dugu zer efektu sortzen duten rotate eta
perspective propietateek, elkarrekin erabilita.
<style>
#kaxa1 {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
border: solid 1px red;
background-color: blue;
color: white;
transform: perspective(500px) rotate3d(0,
5, 0, 75deg);
}
</style>
<body>
< <div id="kaxa1">kaixo, zer moduz?</div>
</body>

<style>
#kaxa1 {
position: relative;
height: 150px;
width: 200px;
margin: 50px;
padding: 10px;
perspective: 150px;
background-color: green;
}
#kaxa2 {
padding: 50px;
position: absolute;
color: white;
transform: rotateX(55deg);
}
</style>
<body>
<div id="kaxa1">
<div id="kaxa2">kaixo, perspektiba</div>
</div>
</body>

3.2.5. BESTE PROPIETATE BATZUK
Elementuak itxura errealagoa izateko, beste propietate batzuk ditu CSS3k:
perspective: Aurretik aipatu dugun perspective()

funtzioaren antzera lan egiten du, baina, kasu honetan, propietate
honek elementu nagusian eragiten du. Propietate honekin, eduki-kaxa
bat sortuko dugu, eta, horrela, azpielementuek eduki-kaxa horren
perspektiba-efektua heredatuko dute.
perspective-origin: Propietate hau erabiltzen dugunean, x eta

y koordenatuak aldatuko dizkiogu elementu bati; horrela, elementu
hori ikusten ari denak eskuinera edo ezkerrera mugituta ikusiko du
elementua –x koordenatuan idatzitako zenbakia positiboa edo
negatiboa bada– , eta gora edo behera mugituta –y koordenatuan
idatzitako zenbakia positiboa edo negatiboa bada–. Propietate honek
izan ditzakeen balioak ehunekoak, pixelak edo center, left,
right, top eta bottom dira.
backface-visibility: Propietate honekin elementu baten

atzeko aldea agerian edo ezkutuan egongo den adierazteko erabiltzen
da. Propietate honek har ditzakeen balioak honako hauek dira:
hidden (ezkutuan) edo visible (agerian). Ezer ez badugu
idazten, visible balioaren moduan jokatuko du.
<style>
#kaxa1 {
height: 150px;
width: 150px;
margin: 50px;
padding: 10px;
color: white;
perspective: 150px;
perspective-origin: 10% 10%;
}
#kaxa2 {
padding: 50px;
transform: rotate3d(1, 0, 1, 85deg);
}
</style>
<body>
<div id="kaxa1">
<div id="kaxa2">kaixo Mundua</div>
</div>
</body>

3.3. TRANTSIZIOAK
CSS3k web-orriei trantsizio dinamikoak gehitzeko aukera ematen digu izugarrizko
efektuak sortzeko; horrela, itxura profesionalagoa izango dute gure web-orriek. Nahiz
eta animazioen antza izan, berez, ez du zerikusirik; animazioetarako, animation
propietatea erabiltzen da, eta elementuen mugimenduak errealagoak dira.
Trantsizioetan elementuak mugitzen ikusiko ditugu. Elementu horiek egiten duten

aldaketa bakoitza instantzia deitzen da. Elementu baten hasierako instantziatik
amaierako instantziara gertatzen diren aldaketak leunak izateko, transition
propietatea gehitu zen CSS3n. transition propietateak instantzia guztiak era
leunean bistararazten dizkio nabigatzaileari. Propietate hori ez dago momentuz
estandarizatuta; beraz, derrigorrekoa da nabigatzaile bakoitzari dagokion aurrizkia
jartzea.
transition propietateak nola funtzionatzen duen jakiteko, adibide bat planteatuko

dugu. Gure web-orrian, “ongi etorri gure web-orrira” testua daukagu idatzita, eta nahi
dugu testuaren gainean kurtsorea jartzen dugunean testu hori kolore gorriz jartzea eta
tamainaz aldatzea. Aldaketa hori egiten ikasi genuen hover hautatzailearekin, baina
hover propietatearekin aldaketa hori bat-batekoa da. transition
propietatearekin, guk esango diogu zenbat denbora erabili behar duen instantzia hori
hasten denetik bukatu arte; hots, testuaren gainean kurtsorea ipintzen dugunetik
kentzen dugunera arte.

<style>
#kaxa1 {
font-family: Elephant, courier;
font-size: 18px;
color: green;
transition: 4s;
}
#kaxa1:hover {
font-family: Elephant, courier;
font-size: 24px;
color: red;
transition: 4s;
}
</style>
<body>
<div id="kaxa1">ongi etorri gure web-orrira </div>
</body>
Trantsizio bat denez, goiko kodeak nola funtzionatzen duen ikusteko, kopiatu kodea
CSS3ko eta HTMLko editore batean, eta, ondoren, exekutatu nabigatzaile batean.
transition parametroak lau parametro har ditzake, eta, bigarren adibide honetan,
lau parametroak erabiliko ditugu, baina ez da derrigorrekoa parametro guztiak idaztea.
Nabigatzailean lauki bat bistaratuko dugu, eta trantsizio bat eragin. Laukia 100 pixel
zabal, 100 pixel luze eta kolore gorrikoa izango da. Gero, transition propietatea
definituko dugu: kasu honetan, lehenengo atributuak transform izan behar du
(geroago definitu beharko duguna), elementua birarazi eta lekuz aldatu nahi dugulako.
Bigarren parametroarekin esango diogu zenbat denbora iraungo duen trantsizio horrek
–gure kasuan, 4 segundo–; hirugarren parametroan, adieraziko dugu nolakoa izango
den trantsizio hori, betiere Bézier kurba kontuan izanda; eta laugarren parametroan
adieraziko dugu lauki horrek zenbat denbora emango duen hasierako puntura berriz
joaten. Lauki horren gainean kurtsorea jartzen dugunean (hover), 50 pixel haziko
da zabaleran eta altueran, kolorez aldatuko da (berdera), eta transform
propietatearekin, lauki hori (x) ardatzean 100 pixel mugituko da, eta 200 pixel (y)
ardatzean; aldi berean, laukia 35 gradu biratuko da.

<style>
#kaxa1 {
width: 100px;
height: 100px;
border: 1px solid;
transition: transform 4s ease 0.5s;
}
#kaxa1:hover {
width: 150px;
height: 150px;
border: 1px solid;
background-color: green;
transform: translate(100px, 200px) rotate(35deg);
}
</style>
<body>
<div id="kaxa1"></div>
</body>
3.3.1. TRANTSIZIOETAN BAKARKA DEFINITZEN DIREN

PROPIETATEAK
Orain arte ikusi dugu transition propietatea nahikoa dela elementu bati
guk nahi diogun portaera ezartzeko; baina, transition propietateak
bakarka defini daitezkeen azpipropietate ugari ditu:
transition-property: Propietate honek balio bat baino

gehiago izan ditzake. Balio bakoitza koma bidez (,) banatzen da, eta
puntu eta koma bidez (;) amaitzen dugu balioen segida. Adibidez:
kaxa bat dugu, 200 pixel zabal eta 200 pixel altu, eta kaxa hori gorria
da; eta, kaxa horren gainean kurtsorea ipintzen dugunean, kaxa
horrek trantsizio bat egin dezan nahi dugu: kolore berdekoa
bihurtuko da eta tamainaz aldatuko da (500 pixel zabal eta 250 pixel
altu).

<style>
div {
width: 200px;
height: 200px;
background: red;
transition-property: width, height, background;
}
div:hover {
width: 500px;
height: 250px;
background: green;
}
</style>
<body>
<div></div>
</body>
transition-duration: Propietate honekin, adieraziko dugu

trantsizio batek zenbat denbora iraungo duen. Iraupena segundotan
edo milisegundotan definituko dugu. Balio bat baino gehiago izan
ditzeke. Balio bakoitza koma bidez (,) banatzen da, eta puntu eta
koma bidez (;) amaitzen dugu balioen segida. Adibidez: azpiko
adibidean adierazi dugu trantsizioak 8 s iraungo duela.
<style>
div {
width: 200px;
height: 200px;
background: red;
transition-duration: 8s;
}
div:hover {
width: 500px;
height: 250px;
background: green;
}
</style>
<body>
<div></div>
</body>
transition-timing-function: Propietate hau trantsizio baten

Bézier kurbaren abiadura zehazteko erabiltzen da. Balio hauek izan
ditzake: ease, linear, ease-in, ease-out, ease-in-
out, initial eta inherit. Beste aukera bat da Bézier kurbaren
puntuak banan-banan definitzea: cubic-bezier(n,n,n,n).
Hurrengo atalean azalduko dugu zer balio duen bakoitzak.

<style>
div {
width: 200px;
height: 200px;
background: red;
transition-timing-function: linear;
}
div:hover {
width: 500px;
height: 250px;
background: green;
}
</style>
<body>
<div></div>
</body>
transition-delay: Propietate honekin trantsizioa hasi arte

zenbat denbora igaroko den adieraziko dugu (atzerapena). Iraupena
segundotan edo milisegundotan definituko dugu. Balio bat baino
gehiago izan ditzake. Balio bakoitza koma bidez (,) banatzen da, eta
puntu eta koma bidez (;) amaitzen dugu balioen segida. Adibidez:
aurreko adibidean egin dugun trantsizioa hasteko, 2 s igaroko direla
adieraziko dugu.
<style>
div {
width: 200px;
height: 200px;
background: red;
transition-timing-function: linear;
transition-delay: 2s;
}
div:hover {
width: 500px;
height: 250px;
background: green;
}
</style>
<body>
<div></div>
</body>

3.3.2. TRANTSIZIOAREN ABIADURAUNEAK ZEHAZTEKO FUNTZIOAK
(transition-timing-function)
transiton-timing-function propietatea trantsizio-efektuaren
abiadura-kurba zehazteko erabiltzen da. Propietate honek, trantsizioak irauten
duen bitartean, haren abiadura aldatzea ahalbidetzen digu.
Propietate honek Bézier kurba adierazten du, eta beti ditu lau puntu aldez
aurretik definituta.
Outputaren ehunekoa
Inputaren ehunekoa
(CSS3ko oinarrizko transformazioak)
Bézier kurbaren balioak eskuz sar daitezke, baina ohikoena parametro hauek
idaztea da, kontuan izanda gure trantsizioak zer abiadura izatea nahi dugun:

Trantsizioa motel hasiko da; ondoren, azkar jarraituko du,
ease berriro ere motel bukatzeko. cubic-bezier balio
hauek ditu: (0.25, 0.1, 0.25, 1.0)
Trantsizioaren abiadura berdina izango hasieratik

linear bukaera arte. cubic-bezier balio hauek ditu:
(0.0, 0.0, 1.0, 1.0)
Trantsizioaren abiadura hasieran motela izango da.

ease-in cubic-bezier balio hauek ditu: (0.42, 0, 1.0,
1.0)
Trantsizioaren abiadura bukaeran motela izango da.

ease-out cubic-bezier balio hauek ditu: (0, 0, 0.58,
1.0)
Trantsizioaren hasierako eta bukaerako abiadura motela

ease-in-out izango da. cubic-bezier balio hauek ditu: (0.42,
0, 0.58, 1.0)
cubic- Trantsizioaren balioak eskuz definituko ditugu. Balioak

bezier(n,n,n,n) 0tik 1era bitartekoak dira.
initial Lehenetsitako balioa ezartzeko erabiltzen da.
Balio honekin, elementu nagusiaren propietatea

inherit
heredatuko du.

3.4. ANIMAZIOAK
CSS3 sortu denetik, web-orriak animazioz bete ditzakegu. Animazioak elementu jakin
bati mugimendua ematean oinarritzen dira: web-orriko gune jakin batean
aukeratutako elementu bat alde batetik bestera mugituko dugu, elementuari itxura
aldatuko diogu… CSSn, animazioak dira efekturik konplexuenak.
Animazioak bi osagaitan oinarritzen dira: alde batetik, animazioa nolakoa izango den
deskribatzen duen estiloa dugu, eta, bestetik, animazioaren fotograma multzoak
izango dituen hasierako, bitarteko eta bukaerako egoerak.
CSS3n animazioak egiteko orduan, @keyframes araua eta animation propietatea

erabiliko ditugu: @keyframes arauak animazioa definituko du, eta animation
propietateak, berriz, animazioaren konfigurazio-parametroak definituko ditu.
CSS3 sortu aurretik, animazioak egiteko script teknikak erabiltzen ziren, eta askoz
ere konplexuagoak ziren teknika haiek. CSS3rekin animazioak egitea oso erraza da, eta,
script teknikarekin konparatzen badugu, CSS3 erabiltzeak hiru abantaila nagusi
dituela esan dezakegu:
1. Ez da beharrezkoa JavaScript jakitea, animazio errazak egitea oso erraza baita.
2. JavasScripten sortutako animazio batzuk gaizki ikus daitezke; CSSn sortutako

animazioak, ordea, ondo ikusiko dira beti, nahiz eta ekipoak ahaltsuak ez izan.
3. Nabigatzaileak kontrolatuko du animazioaren sekuentzia. Horrela,

animazioaren errendimendua eta efikazia hobetuko ditu, eta, ondorioz,
animazioaren eguneraketa-maiztasuna jaitsiko du.
Kontuan izan behar dugu @keyframes araua eta animation propietatea ez

daudela estandarizatuta; beraz, nabigatzaile bakoitzari dagokion aurrizkia jarri behar
dugu programatzerakoan.
3.4.1. animation
animation propietatea konfiguratzeko, beste propietate batzuk ditugu
haren barruan. Azpipropietate horiei esker, animazioak zer erritmo izango
duen definituko dugu, zenbat denbora iraungo duen…
Honako hauek dira animation propietatearen azpipropietateak:

Animazioak zer izen izango duen adierazteko erabiltzen

da. Animazio bat baino gehiago badago, koma bitartez
(,) banatzen dira.
animation-name Derrigorrekoa da animazioari izena ipintzea, izen hori

identifikatu egin behar duelako @keyframes arauak.
#kaxa-animatua{animation-name: animazioa;}
@keyframes animazioa { }
Elementu bat animatzen hasten denetik bukatzen den

arte zenbat denbora behar duen adierazteko erabiltzen
animation-
duration da. Balioa segundotan adierazten da (s).
#kaxa-animatua {animation-duration: 3s;}
Propietate honek transition propietatearen modura

funtzionatzen du. Bézier kurba kontuan izanda,
animazioak zer erritmo izango duen definitzeko
erabiltzen da.
#kaxa-animatua {
animation- animation-timing-function: linear;}
timing-function
Propietate honek izan ditzakeen balioak honako hauek
dira:
linear, ease, ease-in, ease-out, ease-in-

out, cubic-bezier(n,n,n,n), initial,
inherit
Propietate honekin, elementuaren animazioaren hasiera

animation-delay atzeratuko dugu. Balioa segundotan adierazten da (s).
#kaxa-animatua {animation-delay: 3s;}
Propietate hau elementu bat zenbat aldiz animatuko den

adierazteko erabiltzen da. Ezer adierazten ez bada,
animazio hori behin egingo da. Zenbaki oso batekin edo
animation- infinite (animazioa ez da geratuko) testuarekin
iteration-count definitzen da.
#kaxa-animatua {
animation-iteration-count: infinite;}

Propietate hau animatuko dugun elementua zer
noranzkotan mugituko den adierazteko erabiltzen da.
#kaxa-animatua {
animation-direction: alternate;}
animation-
direction Propietate honek izan ditzakeen balioak honako hauek
dira:
normal, reverse, alternate, alternate-

reverse
Propietate hau animazio bat nola hasi eta bukatu

ondoren nola geratuko den definitzeko erabiltzen da.
Baliorik ez badiogu ezartzen, none izango da
lehenetsitakoa.
#kaxa-animatua {
animation-fill-mode: none;}
animation-fill- Propietate honek izan ditzakeen balioak honako hauek

mode dira:
none: Elementua animatu ondoren hasieran zegoen egoerara

itzuliko da.
forwards: Elementua animatu ondoren, bukaerako puntuan
dagoen egoeran geratuko da.
backwards: Elementuaren animazioa amaitzen denean,
hasierako puntuaren ezkerraldean kokatuko da guk definitu
dugun puntu jakin batean.
both: Aurreko balioen konbinazioa da.
Propietate hau animazio bat gelditzeko eta

berrabiarazteko erabiltzen da.
#kaxa-animatua {
animation-play-state: paused;}
Propietate honek izan ditzakeen balioak honako hauek

animation-play- dira:
state
paused: Animazioa geldirik dagoela adierazteko erabiltzen
da.
running: Animazioa martxan dagoela adierazten du.
initial: Hasieran lehenetsi dugun propietatea ezarriko
dugu.
inherit: Elementu nagusian dagoen propietatea ezarriko
du.

3.4.2. @keyframes
@keyframes arauez hitz egiten dugunean, esan nahi dugu animazioko
fotograma bakoitzak nolako portaera izango duen definitzen ari garela.
Gutxienez, fotograma bi definitu behar dira, baina ohikoena bi baino gehiago
definitzea da.
Nola definitzen da fotograma bakoitza? Animazioko fotograma bakoitza

ehunekotan definitzen da, edo ingelesezko bi hitzekin: hasierako fotograma
definitzeko, from{ } hitza erabiliko dugu, eta azkeneko fotograma
definitzeko, to{ } hitza erabiliko dugu. Sarritan, ingelesezko hitzak erabili
beharrean, n%{ } ehunekoak erabiliko ditugu: 0%{ } lehenengo fotograma
izango da, eta 100%{ }, azkeneko fotograma. Zergatik erabili ehunekoak eta
ez ingelesezko hitzak? Aurretik aipatu dugun modura, normalean, animazioek
fotograma bat baino gehiago izaten dituztelako.
Ingelesezko hitzak erabili –from{ } / to{ }– edo ehunekoak erabili –n%{

}–, fotograma bakoitzak izango duen portaera definitu behar dugu.
Horretarako, { } giltzen artean, CSS3n ikasi ditugun propietateak erabiliko
ditugu. Adibidez: nik, animation propietatean, nire animazioari 5 segundoko
denbora eman diot animazio hori hasten denetik bukatu arte; % 50ean
dagoenean, animatzen ari naizen elementua 45 gradu biratzea nahi dut, eta
haren kolorea gorri bihurtzea. Beraz, elementu horrek animazioaren
denboraren % 50ean dagoenean nik nahi dudana egin dezan, animazioaren
fotogramen arauetan, honako hau idatzi beharko nuke @keyframes arauen
barruan :
@keyframes animazioa{
…
…
50% {transform: rotate(45deg); background: #FF0000;}
…
…
}
Animazio batek nola funtzionatzen duen hobeto ulertzeko, adibide oso bi

jarriko ditugu, eta pausoz pauso azalduko dugu adibide horietan zer gertatzen
den.

1. ADIBIDEA
Adibide honetan, <style> eta </style> etiketen artean, body hautatzaile

bat daukagu; beraz, <body> eta </body> etiketen artean dagoen testu
guztia, erdian lerrokatuta bistaratuko da nabigatzailean (text-align :
center). #titulua hautatzailean, <div id=”titulua”> eta </div>
etiketen artean dagoen testuak zer propietate izango dituen adierazi dugu.
Horretaz gain, #kaxa-animatu hautatzailean, lehenengo propietatean, kaxa
bat diseinatu dugu, ezaugarri hauek dituena:
bloketan bistaratuko da (display: block;)
500 pixel zabal (width)

goiko eta beheko marjinak, 50 pixel zabal (margin: 50px)
ezkerreko eta eskuineko marjinak, behar duten beste pixel zabal

(margin: auto)
kaxaren betegarria, 15 pixel (padding)
kaxaren ertzak, solidoak, beltzak eta pixel batekoak (border: 1px

solid #000000).
#kaxa-animatu hautatzailean, seigarren lerro bat dago: kodifikazio hori

kaxari eman nahi diogun animazioa definitzeko erabili dugu; ondoren,
@keyframes arauetan, animazioaren fotograma bakoitzak zer portaera
izango duen definitu dugu.
#kaxa-animatua{ } hautatzailearen barruan propietate asko idatzi ditugu:

lehenengo bost propietateak kaxa nolakoa izango den adierazteko erabili
ditugu. Animazioa definitzeko, –moz-animation: propietatea erabili dugu,
lehenengo aurrizkia (-moz-) animazio hori Mozilla Firefox nabigatzailean
exekutatuko dugulako; Kontuan izan propietate hori ez dagoela
estandarizatuta, eta nabigatzaile bakoitzari dagokion aurrizkia ezarri behar
diogula.
-moz-animation: animazioa 1s ease-in-out 0s infinite normal none;
1.1. Animazio batek derrigorrean izan behar dituen azpipropietateak honako

hauek dira:
1.1.1. Animazioaren izena; hau da, @keyframes arauetan identifikatzeko

erabiliko dugun izen bat. Guk animazioa deitu diogu.
1.1.2. Animazioaren iraupena: animazioak zenbat segundo iraungo duen

adieraztea.
1.2. Animazio batek aukeran dituen azpipropietateak honako hauek dira:
1.2.1. Bezier kurba adieraztea; adibide honetan, ease-in-out ezarri

diogu.
1.2.2. Animazioa hasi arte, zenbat denbora igaroko den (atzerapena). Gure
kasuan ez du atzerapenik izango, 0s ezarri diogulako.
1.2.3. Animazioa behin eta berriz exekutatzeko, infinitive balioa ezarri

diogu; ezer jarri ez bagenio, behin bakarrik exekutatuko zen.
1.2.4. Animazioaren noranzkoa arrunta izango da, normal ezarri baitiogu.

1.2.5. Animazioa bukatzen denean, @keyframes arauetan dagoen
hasierako fotogramaren propietateen eta bukaerako fotogramaren
propietateen balioak zeintzuk izango diren: kasu honetan, ez dute baliorik
izango, none balioa ezarri diogulako.
2. @keyframes animation-name{}
@keyframes animazioa{
20% {background: #00FFFF;};}
35% {transform: scale(0.5); background: #FF7F50;}
50% {transform: scale(1.5); background: #ADFF2F;}
65% {transform: scale(0.5); background: #FF7F50;}
80% {background: #00FFFF;}
}
2.1. Kasu honetan, @keyframes arauetan ehunekoak erabili ditugu

fotogramak definitzeko. Bost fotograma ezarri dizkiogu animazioari:
2.1.1. % 20an dagoenean, kaxa horren kolorea #00FFFF izango da.
2.1.2. % 35ean dagoenean, kaxak transformazio bat izango du: 0.5

eskalatuko du, eta #FF7F50 kolorera aldatuko da.
2.1.3. % 50ean dagoenean, kaxak beste transformazio bat izango du: 1.5
eskalatuko du, eta #ADFF2F kolorera aldatuko da.
2.1.4. % 65ean dagoenean, kaxak beste transformazioa bat izango du:

berriro eskalatuko du 0.5, eta #FF7F50 kolorera aldatuko da.
2.1.5. % 80an dagoenean, kaxaren kolorea #00FFFF kolorera itzuliko da.
2.1.6. % 0an eta % 100ean dagoenean, kaxak hasierako balioak hartuko

ditu, ez ditugulako ehuneko horiek fotograma modura definitu. Eta
animazio hori ez da inoiz geldituko, animation propietatean
infinitive balioa ezarri dugulako.
Firefox nabigatzailean animazioa nola exekutatzen den ikusteko, idatz ezazu eman
zaizun adibide osoa edozein HTML editoretan.

2. ADIBIDEA
Bigarren adibidean, animation propietatearen azpipropietateak banan-

banan definitu eta gero, @keyframes arauak definitu ditugu, baina,
ehunekotan izan beharrean, from{ } eta to{ } ingelesezko hitzak erabili
ditugu.

3.5. KAPITULU HONETAN PROPOSATUTAKO ARIKETAK.
1. Sortzen ari zaren web-orriko goiburuan, bistaratu zure izena <header>

eta </header> etiketen artean. Nabigatzailean bistaratuko den
testurako, aurretik letra-tipo bat jaitsita egon behar du (zure gustuko
letra-tipoa http://www.fontsquirrel.com/ orritik jaits dezakezu).
2. Zure izena agertuko den goiburuan, letra-tipoaren hondoa gradientea

izango da <header> eta </header> etiketen artean. Gradiente hori
linear-gradient edo radial-gradient izan daiteke, eta
gutxienez hiru kolore erabiliko dituzu.
3. <header> eta </header> etiketen artean dagoen testua eta

hondoaren ertzak, irudi batek inguratuta egongo dira; horretarako, sortu
txantiloi bat.
4. Sortu goiburuaren azpian beste kaxa bat, <div> eta </div> etiketen
artean. Kaxak izango dituen neurriak hauek dira: <header> eta
</header> kaxaren zabalera bera, eta 200 pixel altu.
5. Sortu trantsizio bat <div> eta </div> etiketen artean; zeuk aukeratu
nolakoa izango den trantsizioa hori.
6. Sortu animazio bat <div> eta </div> etiketen artean; zeuk aukeratu
nolakoa izango den animazio hori.

4. WEB-ORRI MOLDAGARRIAK
4.1. DEFINIZIOA
Web-orrien diseinu moldagarria (responsive web design) diseinu-teknika bat da, web-
orriak gailu mota guztietan era egokian bistaratzea ahalbidetzen duena. Teknika hau
erabili ezean, web-orriak ikusi, ikusiko dira gure tabletetan edo telefono
adimentsuetan, baina, gailu horien azalera baino handiagoa dutenez, ez dira oso-osorik
kabituko, eta hatzak beharko ditugu web-orri horretan dagoen informazioan zehar
mugitzeko.
Goitik behera dagoen informazio guztia irakurtzeko, normala da hatza erabiltzea, baina
ez genuke hatza behar ezkerretik eskuinera dagoen informazioa irakurtzeko: norabide
horretan antolatuta dagoen informazioa gure tableta eta mugikor adimentsuen
zabalerara moldatu beharko litzateke.
Norbaitek galdetu dezake ea ordenagailuan bistaratzeko egin dituen web-orriak

tamaina guztietara banan-banan moldatu behar ote dituen. Izan ere, tabletek eta
telefono adimentsuek ez dute guztiek neurri bera, eta, hori gutxi balitz, neurri
berekoak izanda ere, desberdina izaten dute erresoluzioa ere. Arazoari irtenbidea
emateko, web-orri moldagarriak diseinatzen ikasi behar dugu.
Web-orri moldagarri bat diseinatzea erabakitzen dugunean, kontuan hartu behar dugu
web-orri hori zenbat pixel izango den zabal.
Telefonoentzako orriak Tabletentzako orriak Web-orriak
Telefono >> Tabletak >> Netbookak >> Mahai

adimentsuak ganekoak
Telefono adimentsu, tableta eta monitore nagusien neurri estandarrak, pixeletan.

4.2. WEB-ORRI MOLDAGARRIEN EKARPENA
Moldagarritasunari esker, diseinatzaileek ez dute zertan gailu mota bakoitzarentzat
web-orri bana egin: nahikoa da HTMLn <meta> etiketaren barruan kode-sekuentzia
bat idaztea.
<meta name="viewport" content="width=device-width, minimum-

scale=1.0, maximum-scale=1.0" />
Kode sekuentzia hori erabilita, asko errazten zaigu lana, baina ez dago dena eginda
horrekin: gailu mota bakoitzarentzat CSS dokumentu berriak sortu behar dira, edo
ordenagailurako egin ditugun web-orrien diseinuak aldatu.
4.3. WEB-ORRI MOLDAGARRIAK EGITEKO AHOLKUAK

Nahiz eta web-orri moldagarriak egiteko orduan pauso zehatzik ez egon, badaude
kontuan hartu beharreko aholku batzuk. Izan ere, garrantzitsua da web-orriak
diseinatzeko orduan jardunbide egokiak inplementatzea. Honako hauek dira jarraitu
beharreko aholkuak:
Ez erabili in-line estiloak. in-line estiloak HTML barruan kokatzen

dira, <style> atributuaren etiketan. Dokumentu baten formatua
aldatzeko ere ez da aproposa HTMLko atributuak erabiltzea. Adibidez,
align=”center” erabiliko bagenu dokumentu bateko testu guztia
pantailako ordenagailu baten erdian kokatuta bistaratzeko, agian, ez
litzateke aproposa izango pantailan testu guztia erdian kokatuta bistaratzea
telefono adimentsu batean.
Web-orriak ez dira zertan modu berean ikusi gailu eta nabigatzaile

guztietan. Web-orriek ezaugarri dute dokumentuak gailu eta nabigatzaile
guztietara moldatzea; hau da, web-orriak era desberdinetan bistaratzea
web-bezeroetan.
Diseinua plataforma batentzat baino gehiagorentzat egin. Ez diseinatu eta

optimizatu gailu zehatz batentzat. Plataforma zehatz batzuentzat
diseinatzen dugunean (Firefox, Internet Explorer, Android…), gertatu
daiteke geroago beste plataforma batzuk sortzea eta gure diseinuak balio
ez izatea.
Taularik ez erabili. Web-orriak maketatzeko orduan, taulak alde batera

utziko ditugu: <div> edukiontziak eta etiketa semantikoak (<article>,
<section>…) erabiliko ditugu. Web-orri moldagarrietan bistaratzen
diren dokumentuak gailuen tamainara moldatu behar dira, eta,
horretarako, edukiontziek malguak izan behar dute. Taulekin ez da hori
gertatzen, taulak ez direlako malguak.

Unitate erlatiboak erabili. Neurri erlatiboak gailu guztien tamainara
moldatzen dira; neurri absolutuak, ordea, finkoak dira, eta, gailuak
desberdinak badira ere, web-orriak tamaina bera izango du.
Neurri
Zertarako?
erlatiboa
% Gailu bakoitzaren zabalera eta altuera ehunekotan definitzeko erabiltzen da.
Letra-tipoaren tamaina definitzeko erabiltzen da. Letraren tamaina gailuaren
tamainara moldatuko da; hau da, eskalatu egingo du.
em
1em = 12 puntu, 2em = 24 puntu
em neurriaren antzera funtzionatzen du, baina elementu nagusiari ezartzen
zaio eta mendeko elementuek heredatu egiten dute.
rem
1rem = 16 pixel dira.
Letraren altuera definitzeko erabiltzen da.
ex
1ex = letra-tipo arruntaren erdia da.
Gailu bateko pantailako puntu bat da. Gailuaren erresoluzioaren arabera,

px puntu hori handiagoa edo txikiagoa izan daiteke. Batzuetan, tamaina hau
finkoa izan daiteke .
Neurri hau aldez aurretik viewporteko zabaleran definitu dugun tamainaren

vw
% 1 da.
Neurri hau aldez aurretik viewporteko altueran definitu dugun tamainaren

vh
% 1 da.
Neurri hau aldez aurretik viewporten definitu dugun dimentsio txikienaren

vmin
% 1 da.
Neurri hau aldez aurretik viewporten definitu dugun dimentsio handienaren

vmax
% 1 da.
Neurri
Zertarako?
absolutua
Tamaina puntutan definitzeko erabiltzen da.
pt
1pt = 1/72 ontza dira.
im Tamaina ontzetan definitzeko erabiltzen da.
mm Tamaina milimetrotan definitzeko erabiltzen da.

Tamaina piketan definitzeko erabiltzen da.
pc
1pc = 12 puntu

4.4. WEB-ORRI MOLDAGARRIAK OPTIMIZATZEKO ZUTABEAK
Orain arte ikusi dugu web-orri moldagarriak zer diren eta zergatik egin beharko
genituzkeen era honetako dokumentuak. Era honetako web-orriak diseinatzen
ditugunean –eta web-orri horiek zenbat eta gehiago optimizatzen ditugunean–
erantzun hobea jasoko dute erabiltzaileengandik.
Dokumentu moldagarriak diseinatu eta optimizatzeko orduan, hiru oinarri izan behar
ditugu kontuan:
4.4.1. Nabigatzaile eta sistema guztientzat diseinatzea
Badakigu guk erabiltzen ditugun nabigatzaileak ez direla berdinak, eta, hori dela
eta web-orri bat bistaratzen dutenean, batzuetan ez dute dokumentu bera itxura
berberarekin bistaratzen –agian, nabigatzaile batean ez da marrazkiren bat
ikusten, soinu bat ez da entzuten…–. Horregatik, web-orri bat diseinatzen
dugunean, saiatu behar dugu nabigatzaile guztiak kontuan hartzen, edo,
gutxienez, gehien erabiltzen direnak.
Gainera, jakin behar dugu nabigatzaileak sistema eragile baten gainean

instalatuta daudela, eta, orain arte web-orri gehienak Windows sistema
eragilean pentsatuta diseinatzen baziren ere, gaur egun gero eta jende gehiagok
erabiltzen du Linux edo OSX mahai gaineko ordenagailuetan, eta Android eta IOS
sistemak telefono adimentsuetan eta tabletetan.
4.4.2. Pantaila-tamaina eta pantaila-erresoluzio guztientzat diseinatzea
Pantailaren tamaina eta erresoluzioaz hitz egiten dugunean, web-orri

moldagarriak etortzen zaizkigu burura. Hainbeste tamainarekin, zenbat CSS
dokumentu sortu behar ditugu? Gainera, badakigu gero eta tableta eta telefono
adimentsu mota gehiago daudela, eta, nahiz eta tamaina bereko mugikorrak
egon, euren erresoluzioa ez da berbera izaten. Erresoluzio bakoitzarentzat ere
CSS dokumentu bana egin behar dugu?
Web-orri moldagarriak diseinatzeko orduan, ezinezkoa da gailuen tamaina eta

erresoluzio guztientzat diseinatzea, egunetik egunera ateratzen direlako
merkatura tamaina eta erresoluzio desberdinak dituzten mugikor eta tableta
berriak. Zer egin orduan? @media queries arauak (4.6. atalean aztertuko
ditugu) erabiliko ditugu. Eta web-orri moldagarriak egiteko orduan, tamaina
hartuko dugu erreferentzia gisa, eta ez gailuen erresoluzioa.
4.4.3. Konexio-abiadura guztientzat diseinatzea
Gero eta jende gehiagok nabigatzen du tabletatik edo mugikorretik, eta, tabletak
edo mugikorrak erabiltzen ditugunean, gehienetan Interneteko sarbidea ez da
izaten Wi-Fi puntu bat, guk gure Internet-zerbitzurako kontratatuta daukagun
datu-tarifa baino. Horregatik, mugikorretan bistaratuko den web-orri batean
pentsatzen dugunean, kontuan izan behar dugu erabiltzaileek datu-kopuru
zehatz bat dutela kontratatuta, eta guk, diseinatzaile bezala, jakin behar dugu

mugikorretan eta tabletetan dokumentu bat bistaratzeko orduan erabiltzaileari,
dokumentuko irudiak, bideoak, soinua… ahalik eta pisu gutxienarekin eskaini
behar dizkiogula, edo kendu derrigorrekoak ez direnak.
Bakarrik beharrezkoa den informazioa eskaini behar diogu web-orrien

erabiltzaileari. Web-orrian informazioa aurkitzen ari bagara eta denbora asko
ematen badu orria kargatzen, web-orritik aterako da erabiltzailea ziurrenik.
4.5. WEB-ORRI MOLDAGARRIAK SORTZEKO PAUSUAK

Web-orriak sortzeko, behin eta berriz aipatu dugu HTML dokumentuak estruktura
semantikoa izan behar duela. Horrela, aldez aurretik HTMLn sortu dugun estrukturaren
barruan zerbait aldatu nahi badugu, berehala identifikatuko dugu non dauden CSSn
aldatu nahi ditugun atalak.
Gertatu daiteke erabiltzailearen sistema eragilean dagoen nabigatzailea eguneratuta

ez egotea eta, ondorioz, etiketa semantikoak ez ulertzea; horregatik, web-orria
bistaratu dadin, HTML estrukturan JavaScripteko kode-sekuentzia hau idatzi behar
dugu.

Goian idatzi dugun kode-sekuentzia erabilita, Internet Explorerrek, 9. bertsioa baino

lehenagokoa bada, etiketa semantikoak ulertuko ditu.
Bistaratu nahi dugun web-orri bat diseinatzeko orduan, elementu hauek izango ditugu
kontuan:
4.5.1. Bistaratu nahi dugun edukia bakarrik HTMLn sortu
Web-orrian bistaratuko den edukia HTML estrukturaren barruan idatziko

dugu: informazioa berdina izango da gailu guztientzat. Nabigatzailean
bistaratuko den dokumentuan, enpresaren irudia, nabigatzaile-barra… egongo
dira.

Lehenik eta behin, aholkatzen da web-orriaren zirriborroa egitea. Ez bagaude
ziur atalen bat bistaratu nahi dugun edo ez, alde batera utziko dugu, eta
geroago idatziko dugu interesatzen bazaigu.
4.5.2. CSS estiloak ezarri
Web-orriari estiloak ezartzea interesgarria izan daiteke, betiere guk pentsatu

dugun emaitza lortzen badugu.
Jakiteko web-orriaren diseinua guk aurretik pentsatu dugun bezala ateratzen

ari dela, aholkatzen da, CSS dokumentua idatzi ahala, HTML web-orria
nabigatzailean bistaratzen joatea.
Nabigatzaileren batek CSSn idatzitako propietateren bat ulertzen ez badu, ez

du bistaratuko; beraz, kontuan izan nabigatzaile batzuk propietate batzuk
ulertzeko bere aurrizkiak behar dituztela.
Beraz, web-orri bat diseinatzeko orduan, kontuan izan behar ditugu:
Diseinu estetikoko errekurtsoak. Nabigatzailean bistaratuko ditugun

dokumentuak sortzeko baliabide ugari ditugu: letra-tipo bereziak, kaxa-
ertz biribilduak, testu-itzalak edo kaxa malguak… Elementu mota horiek
ez dute moldaketa berezirik behar; horregatik, esan dezakegu ez
digutela buruhausterik ematen. Adibidez, nabigatzaile batek kaxa
batean ertz biribilak egiteko erabiltzen den propietatea ulertzen ez badu
ere, kaxa berdin-berdin aterako da nabigatzailean ertz arruntekin.
Layout diseinua. Bistaratuko den informazioaren estiloa adierazteaz

arduratuko da, definitutako estruktura batekin: zutabeetan,
izenburuarekin, oinarekin… Batzuetan, layoutari buruz hitz egiten
dugunean, web-orriko txantiloiari buruz ari gara hitz egiten.
Dokumentuak diseinatzeko orduan, argi izan behar dugu bisitariek jakin
egin behar dutela zer den garrantzitsua eta zer ez dokumentu horretan.
Adibidez: banner bat jartzeko, <aside> etiketen barruan jarriko
genuke, atal horrek <section> etiketan dagoen informazioak baino
munta txikiagoa duelako. Nabigatzaile batek <aside> gune hori non
kokatu jakingo ez balu, agian nabigatzaileari adierazi beharko genioke
gune hori ez bistaratzeko.
4.6. Media Queries

Media Queries moduluak CSS3ko erregelak dira, edozein web-orritan dagoen
informazioa gailuen tamainetara moldatzeko erabiltzen direnak. Erregela horiek
baldintzatuko dute gailu batek guk adierazitako pantaila-tamainaren ezaugarriak
betetzen dituen.

Media Queries erregelak idazteko aukerak:
HTMLko <style> etiketan barruan:
Kasu honetan HTML dokumentuan ezarriko dugu gailu baten pantaila

tamainak zer baldintza bete behar dituen. Adibidez; CSS estilo jakin bat
duen web-orri bat bistaratzea nahi dugu, gailu guztietan, baina baldintza
batekin: pantaila, gehienez, 500 pixel zabalerakoa izatea –ostarantzean,
CSS estilo jakin hori ez da bistaratuko–.
<style>
@media screen and (max-width:500px){
header, nav, footer {
height: 50px;
width: 100%;
}
}
</style>
E
@media screen and (max-width:500px){ … } giltzen

artean hautatzaileak idatziko ditugu, euren propietateekin batera.
CSSko dokumentuaren barruan:
Kasu honetan, CSS dokumentuan ezarriko ditugu gailu baten pantailak bete
behar dituen baldintzak.
HTML dokumentuan, lotura bat egingo dugu CSS dokumentura.

<head>
<link rel="stylesheet" href="css/estiloa.css" />
</head>
CSS dokumentuan, @media arauetan adieraziko dugu bistaratuko den

web-orriaren diseinuak zer propietate izango dituen, beti ere @media
screen and (max-width:500px){ … } baldintza betetzen bada.
@media screen and (max-width:500px){

header, nav, footer {
height: 50px;
width: 100%;
}
}
HTMLn CSSko lotura bat jartzen dugunean, CSS dokumentu guztietan

begiratuko du, web-orriaren diseinua bistaratu baino aurretik, ea gailu
horren pantaila tamainak CSSn dokumentuan ezarritako @media
baldintzak betetzen dituen.

HTMLn <head> etiketaren barruan
Kasu honetan, HTML dokumentuan lotura baten bitartez adieraziko ditugu

gailuen neurriak. HTMLko loturetan tamaina bat (edo gehiago) zehaztuko
dugu, eta atzean jarriko dugu CSS dokumentuaren bidea. Gailuek tamaina-
baldintza hori betetzen dutenean joko dute CSS dokumentura.
Gailuaren tamaina-baldintza eta haren bidea HTMLn adierazten

ditugunean, lotura horretan adierazitako dokumentua irakurriko du gailuak
web-orriaren diseinua kargatzeko orduan. CSS dokumentu horretan
HTMLko etiketaren bat definitzen ez bada, beste CSS dokumentuetara joko
du aipatu ez diren etiketak aurkitzera.
<head>
<link rel="stylesheet" media="screen and (max-width:

800px) and (min-width: 300px)" href=" css/estiloa.css"
/>
<link rel="stylesheet" media="screen and (min-width:

1200px)" href="css/estiloa.css" />
<link rel="stylesheet" media=screen and (min-width:

1600px)" href="css/estiloa.css" />
</head>
Erregelak definitzeko, operadore logikoak (and, not eta only) erabili

ditzakegu, gailuen pantailen tamainak baldintzatzeko.
4.6.1. and
Multimedia-funtzio bat baino gehiago batera ipini nahi ditugunean erabiliko

dugu operadore logiko hau. Operadore logiko honekin, baldintza guztiak bete
behar dira.
Baldintza biren artean (,) koma erabiltzen dugunean, erregela horrekin

adierazten dugu bata edo bestea bete behar dela, or operadore logikoa
izango balitz modura.
@media (max-width:500px){…}
@media (max-width:500px) and (orientation: landscape){…}
@media screen (max-width:500px) and (orientation:

landscape){…}
@media screen (max-width:500px) and (orientation:

landscape){…}
@media (max-width:500px), handheld and (orientation:

landscape){…}

4.6.2. not
Erregela hau definitu ditugun propietateak ezeztatzeko erabiltzen dugu; hau

da, erregeletan adierazitako baldintza betetzen ez denean bakarrik
bistaratuko dira CSSn definituko ditugun propietateak. Adibidez, { } giltzen
artean idazten ditugun hautatzailearen propietateek pantaila
monokromoetan eraginik ez izatea nahi badugu:
@media not all and (monochrome) {…}
Goian, hauxe adierazten dugu: monokromo diren gailu guztietan ez dira CSS
propietateak beteko.
4.6.3. only
Erregela honekin, bakarrik gailuek baldintza jakin bat betetzen dutenean

exekutatuko dira CSSn definituko ditugun propietateak; hau da, erregeletan
adierazitako baldintza nahitaez bete behar da. Adibidez, { } giltzen artean
idazten ditugun hautatzailearen propietateek bakarrik kolorezko pantailetan
eragitea nahi badugu:
@media only screen and (color){…}
Euskarriak
Nahiz eta gehienetan Media Queries arauetan pantailaren tamainarekin
jokatzen dugun CSSko dokumentu bat exekutatzeko, beste euskarri batzuk
ere defini daitezke @media erabilita. Web-orri bat bistaratuko duten
euskarriak ezaugarri askokoak izan daitezke.
Balioak Zertarako?
all Gailu guztiak definitzeko erabiltzen da.
Eskuko edo eramangarriak diren gailuak definitzeko

handheld erabiltzen da (mugikorrak, tabletak…).
print Inprimagailuak definitzeko erabiltzen da
screen Pantailadun gailu guztiak definitzeko erabiltzen da.
Testuak irakurtzeko erabiltzen diren gailuak definitzeko

speech erabiltzen da (pantaila-irakurleak).

Euskarrien ezaugarriak:
Ezaugarria Zertarako?
viewporten definituta daukagun zabaleraren eta

altueraren ratioa. Balioek zenbaki osoak izan behar dute.
@media screen and (aspect-ratio:16/9)

{…}
aspect-ratio
Ezaugarri honek gehieneko eta gutxieneko balioak har
ditzake:
max-aspect-ratio, min-aspect-ratio
Gailu batek koloreak onartu behar dituela definitzeko

erabiltzen da.
@media screen and (color) {…}

color
ditzake:
max-color, min-color
Gailu batek kolore kopuru jakin bat bistaratzeko ahalmena

izan behar duela definitzeko erabiltzen da.
@media screen and (color-index) {…}

color-index
ditzake:
max-color-index, min-color-index
Gailu batek duen zabaleraren eta altueraren arteko ratioa.

Adibidez, gailu bat 1280 pixel horizontal eta 720 pixel
bertikal da: tamaina horren ratio-erreferentzia (16/9) da.
@media screen and (device-aspect-ratio:

device-aspect- 16/9) {…}
ratio
ditzake:
max-device-aspect-ratio, min-device-
aspect-ratio

Gailu batek zer altuera izan behar duen definitzeko
erabiltzen da.
@media screen and (device-height: 600px)

{…}
device-height
ditzake:
max-device-height, min-device-height
Gailu batek zer zabalera izana behar duen definitzeko

erabiltzen da.
@media screen and (device-width: 800px)

{…}
device-width
Ezaugarri honek gehieneko eta gutxieneko balioak hartu
ditzake:
max-device-width, min-device-width
Gailu batek sareta edo bit-mapa izan behar duen

grid
@media handheld and (grid) and (max-
width: 15em) { ... }
Pantaila batek zer altuera izan behar duen definitzeko

erabiltzen da; esate baterako, ordenagailu batean pantaila
txikitzen dugunean, moldatu egingo da web-orria altuera-
baldintza betez gero.
height
@media screen and (height: 600px) {…}

ditzake:
max-height, min-height
Kolore bakarreko gailuetan zenbat bit izan behar duten

adierazteko erabiltzen da (kolore grisak).
@media all and (monochrome) {…}

monochrome ditzake:
max-monochrome, min-monochrome
Adibidez, 8 pixel bit dituen gailu bat definitu nahi badugu:
@media all and (min-monochrome: 8) {…}

Gailu baten zabalera altuera baino handiago bada
landscape hitzarekin definitzen da; aldiz, altuera
zabalera baino altuagoa bada, portrait hitzarekin
orientation definitzen da.
@media all and (orientation: portrait)

{…}
Gailu batek pantailan (block axis) bistaratu behar duen

edukiak gainezka (overflow) egiten duenean, zer portaera
izan behar duen definitzeko erabiltzen da.
@media (overflow-block: none) {…}
Balio hauek har ditzake:
none: Behin errendatu ondoren, finko geratuko da

dokumentu hori.
scroll: Edukia desplazamendu-barra pantailan gora eta

overflow-block behera ibilita (scroll) bistaratuko da. Edukia
ordenagailuetako pantailan kabitzen ez denean gertatzen
da.
optional-paged: Edukia orri batean baino gehiagotan

banatuko da, alboko barra erabiliz (scroll) edo kliskagailu
bati eraginez (triggered), diapositiba-aurkezpenetan
gertatzen den moduan.
paged: Edukia orri batean baino gehiagotan banatuko

da. Inprimatzen ari garela eduki bat orri bakar batean
kabitzen ez bada, bigarren orri baten jarraitzen du
inprimatzen.
Gailu batek hasierako lerro-ardatzean (inline axis) bistaratu

behar duen edukiak gainezka egiten duenean (overflow),
zer portaera izan behar duen definitzeko erabiltzen da.
@media (overflow-inline: none) {…}
overflow- Balio hauek har ditzake:

inline
none: Behin errendatu ondoren, finko geratuko da
dokumentu hori.
scroll: Edukia beheko barrarekin pantailan ezker-eskuin

ibilita (scroll) bistaratuko da. Edukia ordenagailuetako
pantailan kabitzen ez denean gertatzen da.

Irteera-gailuen erresoluzioa definitzeko erabiltzen da
(pixelen dentsitatea). Erresoluzioaren balioak puntuak
hazbeteko (dpi) edo puntuak zentimetroko (dpcm)
adierazten dira.
resolution @media screen and (min-resolution:

200dpi) {…}

ditzake:
max-resolution , min-resolution
Irteerako gailuak telebistak direnean, euren prozesua

eskaneatzeko erabiltzen da. Telebistako pantailan irudi bat
bistaratzeko metodo bi daude:
progressive: progresiboa, pixkanakakoa.

scan
interlace:bilbatua eta gurutzatua. Irudiaren markoa
(frame) sortzeko, bi esparru eskaneatzen ditu: horizontala
eta bertikala.
@media tv and (scan: progressive) {…}
Irteerako gailu batek zer abiadurarekin alda dezakeen

edukiaren itxura definitzeko erabiltzen da.
@media (update-frequency: none) {…}
Balio hauek har ditzake:

update- none: Behin errendatu ondoren ezin da eguneratu.
frequency
slow: Nahiz eta txantiloiak dinamikoki aldatu CSSko
erregelei jarraituz, irteerako gailuak astiro bistaratuko ditu
aldaketak eta eguneratzeak.
normal: Irteerako gailuak aldaketa horiek CSSko

denbora-erregelekin batera bistaratzen ditu.
Pantaila batek zer zabalera izan behar duen definitzeko

erabiltzen da; esate baterako, ordenagailu batean pantaila
txikitzen dugunean, moldatu egingo da web-orria zabalera-
baldintza betez gero.
width @media screen and (width: 600px) {…}

ditzake:
max-width, min-width

4.7. WEB-ORRIA MAKETATZEN
Web-orriak maketatzea erraza dirudien arren, ez da beti hala izaten. Maketatzeak ez
du esan nahi gure web-orriak irudi, bideo eta soinu ugarirekin bete behar ditugunik;
maketatzeak esan nahi du gailu mota guztietarako sortu behar ditugula gure web-
orriak, eta, ondorioz, beharrezkoa ez den informazioa ezabatu egin behar dugula
tamaina jakin batean edo beste batean bistaratu nahi dugunean.
Nabigatzaileetan bistaratuko ditugun dokumentuen zabalera pixeletan definitzeko

ohitura dugu, baina, neurri hori erabiltzen dugunean, arazoak izan ditzakegu beste
gailu batzuetan bistaratzeko orduan. Batzuetan, dokumentu hori ordenagailuetan
osorik ikusi arren, atzamarrak erabili beharko ditugu mugikor adimentsuetan
dokumentu osoan nabigatzeko, dokumentua gailuaren zabalera baino zabalagoa
delako. Horregatik, neurri erlatiboak (–em– eta –%–) erabiltzea aholkatzen da.
Web-orria maketatzen ari garenean, oso garrantzitsua da hasiera-hasieratik tabletetan

eta mugikorretan pentsatzea:
gure pantailetara moldatu behar dutelako
pantailaren tamaina handitu gabe (zoom) nabigatzea eta testuak irakurtzea

erosoa izan behar duelako
behar ez diren elementuak ezabatuko ditugulako
ikus-efektu handiagoa izango duelako
4.8. GAILUEN TAMAINAK

Ikusi dugu ordenagailuak, tabletak eta mugikor adimentsuak neurri ugarikoak izan
daitezkeela eta horregatik ia ezinezkoa dela tamaina guztientzako web-orriak sortzea.
Horri gehitzen badiogu tamaina guztiek erresoluzio ugari izan ditzaketela, inoiz ez
genuke web-orri bat maketatzen bukatuko. Web-orri batek loturak ditu, eta lotura
bakoitza dokumentu bat da: imajinatzen duzue zenbat moldaketa egin beharko
genituzkeen? Maketatzeko orduan, aintzat hartu behar da tamaina, baina baita
dokumentuen diseinuak ahalik eta berdinenak izatea ere.
Adibide baten bitartez, web-orri bat tamaina desberdina dueten hiru gailutan
bistaratuko dugu, eta azaldu nola sortu dugun euren HTML estruktura eta CSS
diseinua. HTMLko estruktura berdina da gailu guztientzat, azken batean, bistaratu nahi
dugun informazioa denetan delako berdina. CSSn adieraziko dugu HTMLn dagoen
informazioren bat bistaratu nahi dugun edo ez.
4.8.1. HTML estruktura
HTML estruktura sortuko dugu, gailuetan bistaratuko den informazioarekin.

<head> etiketen artean <meta name="viewport"
content="width=device-width; initial-scale=1.0;

maximum-scale=1.0;" /> definituko dugu; ondoren, CSSn definitutako
pantailaren tamaina kontuan izanda, dagokion diseinua aplikatuko dio CSS
dokumentu horrek.

4.8.2. Ordenagailurako diseinua
Web-orria ordenagailuetan bistaratzeko, header, nav eta footer

hautatzaileei balio hauek ezarri behar zaizkie: 50 pixel altu, gutxienez (min-
height), eta % 80 zabal, gutxienez (min-width). Kasu honetan,
zabalera ehunekotan (%) definitu dugu, ordenagailuko pantaila guztiek ez
dutelako zabalera berbera.
Horretaz gain, div edukiontzia % 80 zabal izango da: haren barruan,

article kaxa % 65 zabal izango da, eta aside kaxa % 34 zabal izango da.

4.8.3. Tabletentzako diseinua
Ordenagailurako diseinatu dugun web-orria gutxienez 501 pixeleko zabalera

eta gehienez 700 pixeleko zabalera duen gailu batean bistaratu nahi dugu.
Horretarako, pantailaren zabalera guztia erabiliko dugu; horregatik,
header, nav, footer, div#edukia, article, section eta aside
kaxak % 100 zabal direla definituko dugu hautatzaileetan. Horretaz gain,
web-orriaren itxura aldatuko dugu tabletarentzako diseinua
prestatzerakoan: footer gunea desagertu egingo da, eta asidearen
hondoaren kolorea aldatu.

4.8.4. Mugikor adimentsuarentzako diseinua
Ordenagailurako diseinatu dugun web-orria, gehienez 500 pixel zabal den

gailu baten bistaratu nahi dugu. Horretarako, pantailaren zabalera guztia
erabiliko dugu: horregatik, header, nav, footer, div#edukia,
article, section eta aside kaxak hautatzaileetan % 100 zabal direla
definituko dugu.

4.9. KAPITULU HONETAN PROPOSATUTAKO ARIKETAK.
1. Optimizatu sortu duzun web-orria hainbat gailu motatan ikusteko

moduan. Erabaki gailu horiek zer pantaila-tamaina izango duten.
2. Kontuan izan, gailu txikientzat optimizatzen duzunean, irudiren batzuk,

bideoak, testuak… soberan izango dituzula, agian, eta, jardunbide egokiak
aintzat hartuz gero, hobe izango litzatekeela atal horiek ez agertzea.

5. WEB-ORRIAREN ADIBIDEA
5.1 . ZER EGINGO DUGU?

Kapitulu honetan web-orri bat diseinatu, kodifikatu eta maketatuko dugu. Horretarako
erabiliko dugun estruktura HTML5eko lengoaian oinarrituta egongo da, eta diseinua,
CSS3 teknologian.
Web-orri bat edozein nabigatzailetan bistaratzen dugunean ezkerreko saguari klik

eginez gero, dokumentu horren iturburua ikusteko aukera dugu. Iturburuan ikusiko
dugun bezala, dokumentua HTML lengoaian estrukturatuta egongo da, eta gutxienez
CSSko dokumentu bati lotuta. Horretaz gain, JavaScript lengoaia ere erabiliko du. Hala
ere, guk diseinatuko dugun web-orrian, bakarrik eskuliburu honetan ikasi duguna
erabiliko dugu.
Kontuan izan behar dugu ez dagoela maketatzeko pauso zehatzik; hots, diseinatzaile
batzuek pentsatuta izaten dute nolakoa izango den sortuko duten web-orria; beste
batzuek, ordea, web-orriaren prototipoa edo zirriborroa egiten dute diseinatzen hasi
aurretik. Gure kasuan, bigarren aukerari jarraituko diogu.
Beraz, ekin diezaiogun gure web-orria diseinatu eta maketatzeari. Honako hauek
izango dira gure web-orria sortzeko pausoak:
5.1.1. Web-orriaren zirriborroa egin

Gure web-orria nolakoa izango den marraztuko dugu paper zurian, edo,
bestela, Interneten prototipoak eta zirriborroak egiteko dauden edozein
tresna erabil dezakegu. Tresna asko komertzialak dira; beraz, denbora
baterako dohainik badira ere, ordaindu egin behar dira proba-epea bukatzen
denean aplikazio horiek erabiltzen jarraitu nahi baduzu. Beste batzuk, ordea,
debaldekoak dira; esate baterako:
http://pencil.evolus.vn/Default.html
http://lumzy.com/
https://www.mockflow.com/samples/
https://cacoo.com/

Ordenagailuan bistaratuko den web-orriaren zirriborroa:

Telefono adimentsuan bistaratuko den web-orriaren zirriborroa:
5.1.2. Zirriborroaren HTMLko estruktura sortu

Zirriborroa egin ondoren, web-orrian bistaratuko dugun HTMLko estruktura
sortuko dugu; hau da, nabigatzailean zer informazio ikusiko dugun –irudiak,
bideoak, testua…–. Diseinua geroago egingo dugu CSS3 teknologia erabilita.
5.1.2.1. HTMLko estruktura definituko dugu.
Lehenengo dokumentua zer eratakoa izango den definituko dugu. Web-

orriaren titulua ezarriko dugu <title> eta </title> etiketen
artean; ondoren, behar ditugun <meta> eta lotura <link> guztiak
definituko ditugu.

5.1.2.2. Goiburua definituko dugu.
Goiburua <header> eta </header> etiketen artean definituko

dugu. Etiketa horien artean, kaxa bi definituko ditugu; lehenengo kaxan,
gure enpresaren logoa joango da, eta bigarren kaxan, enpresaren leloa.
5.1.2.3. Nabigatzaile-barra definituko dugu.
Nabigatzaile-barra definituko dugu web-orri batetik beste batera

heltzeko. Horretarako <nav> eta </nav> etiketen artean zerrenda bat
sortuko dugu, gure enpresak ematen dizkigun aukerekin.
Kasu honetan, web-orri batetik bestera pasatzeko aukerak honek izango

dira:
Etxe baten irudia jarriko dugu: lotura horrek hasierako

dokumentura bideratuko gaitu.
Multimedia izeneko erlaitz bat jarriko dugu: lotura horrek

bideoak, soinuak eta argazkiak dauden web-orrira bideratuko
gaitu.
Eskaintza izeneko erlaitz bat jarriko dugu: lotura horrek enpresak

ematen dizkigun ikastaroak, eskaintza bereziak… dauden web-
orrira eramango gaitu.
Berriak izeneko erlaitz bat jarriko dugu: lotura horrek azkeneko

berriak dauden web-orrira eramango gaitu.
Inprimakia izeneko erlaitz bat jarriko dugu: lotura horrek

enpresarekin harremanetan jartzeko erabiliko dugun
formularioaren web-orrira eramango gaitu.
5.1.2.4. Web-orriak ematen digun informazioa definituko dugu.
Web-orriak ematen digun informazioa estrukturatzea oso garrantzitsua

da, <article>, <section> eta <aside> etiketen artean
idatziko dugulako gure web-orrian bistaratuko den informazioa.
Gure web-orrian, atal baten barruan, artikulu bi jarriko ditugu, eta

alboko barran, informazio gehigarriak jarriko ditugu.
5.1.2.5. Web-orriaren alboko barra definituko dugu.
Alboko barran, <aside> eta </aside> etiketen artean, bi argazki,

lotura batzuk eta bilatzaile bat ezarriko dizkiogu gure web-orriari.
<aside> etiketen artean, behar diren beste <article> eta
<section> etiketak erabiliko ditugu.

5.1.2.6. Oina definituko dugu.
Azkenik, <footer> eta </footer> etiketan artean, web-orriaren

diseinua eta maketazioa noren esku egon den jarriko dugu.
5.1.3. HTML dokumentuari CSS estiloak ezarri.

CSS dokumentuan, zirriborroan marraztu dugun itxura ezartzen saiatuko gara;
horretarako, kontuan izan behar dugu garrantzitsua dela gure web-orri
guztiek itxura berdina izatea. Gure web-orriek izango duten maketazioa
berdina izango da.
5.1.3.1. Goiburua maketatuko dugu.
Goiburua <header> eta </header> etiketen artean kaxa bat

diseinatuko dugu. Kaxa horri beste bi kaxa ezarriko dizkiogu:
lehenengoan, enpresaren logoa ezarriko dugu, eta, bigarren kaxan,
enpresaren leloa; goiburuak irudi bat izango du hondoan.
Gailuaren pantaila 500 pixel zabal bada edo txikiagoa, goiburua ezkutatu
egingo da.
5.1.3.2. Nabigatzaile-barra maketatuko dugu.
Nabigatzaile-barran <nav> eta </nav> etiketen artean dauden lotura

botoiei efektuak ezarriko dizkiogu transform propietatearen bitartez.
Gailuaren pantaila 500 pixel zabal bada edo txikiagoa, nabigatzaile-barra

ezkutatu egingo da, eta mugikorretarako diseinatutako nabigatzaile-
barra bat sortuko dugu Jquery6 lengoaiarekin.
6
JavaScripten programategi bat da, HTML dokumentuak lantzeko modua errazten duena.

$(document).ready(main);
var contador = 1;
function main (){

$('.menua').click(function(){
// $('nav').toggle(); Forma Sencilla de
aparecer y desaparecer
if (contador == 1){
$('nav').animate({
left: '0'
});
contador = 0;
} else {
contador = 1;
$('nav').animate({
left: '-100%'
});
};
});
};
HTLM dokumentuan Jqueryn sortutako dokumentuari deitu egin behar

diogu, eragina izan dezan:
<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script src="menua.js"></script>
5.1.3.3. Web-orrian bistaratuko dugun informazioa eta alboko barra

maketatuko ditugu.
<article>, <section> eta <aside> kaxei maketazio desberdina
emango diegu. Kaxa nagusi bat sortuko dugu, eta barruan, atal
nagusiarentzat, beste kaxa bi sortuko ditugu: bakoitzak irudiak eta testua
izango ditu; CSS dokumentuan, irudiaren tamaina, testuaren tamaina,
letra-tipoa… definituko ditugu. Alboko barran, irudiei, loturei eta bilatzaile
gure gustuko itxura ezarriko dizkiegu.
Gailuaren pantaila 500 pixel zabal bada edo txikiagoa, bakarrik behar
dugun informazioa bistaratuko dugu; horretarako, alboko barra eta atal
nagusian dauden irudiak ezkutatu egingo ditugu, CSSn hautatzaileetan
display: none; idatzita.

5.1.3.4. Oina maketatuko dugu.
Azkenik, oina </footer> maketatuko dugu, eta diseinu berdina emango
diogu gailuen pantaila 500 pixel zabalerakoa izan ala ez.

5.2. KAPITULU HONETAN PROPOSATUTAKO ARIKETAK
1. Jaitsi Proiektua izeneko karpeta zure ordenagailuan.
2. Ireki HTML dokumentuak eta CSS dokumentuak. Dokumentu horietan,

ikusiko duzu telefono adimentsuentzat 0tik 500 pixelera zabal diren
pantailetarako maketatu ditugula, eta, ordenagailuentzat, gutxienez 800
pixel zabal diren pantailetarako; 501 pixeletik 799 pixelera tarteko
pantailetarako ez dugu maketaziorik egin.
 Egin falta den tamainarako zirriborroa, eta zuk erabaki nolakoa

izango den bistaratuko den web-orria.
 Maketatu paperean edo aplikazioan marraztu duzun dokumentua.
 Emandako web-orrian lotura batzuk bukatu gabe daude. Bukatu

falta diren dokumentuak: agian, hautatzaile batzuk aldatu ego
gehitu beharko dituzu CSS dokumentuan.

HTML5-CSS3 Eskuliburua

Uploaded by

Copyright:

Available Formats

You might also like

HTML5-CSS3 Eskuliburua

Uploaded by

Document Information

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

HTML5-CSS3 Eskuliburua

Uploaded by

Copyright:

Available Formats

Dolaretxe-R400

Eskerrak eman nahi dizkiet IRALE-Dolaretxeko irakasleei izan duten pazientziarengatik

Material hau sortzeko, web-orri batzuk erabili ditut erreferentzia gisa:

Esteban Garitagoitia Elgoibar | HTML5 – CSS3 Eskuliburua 1

Esteban Garitagoitia Elgoibar | HTML5 – CSS3 Eskuliburua 2

Esteban Garitagoitia Elgoibar | HTML5 – CSS3 Eskuliburua 3

Esteban Garitagoitia Elgoibar | HTML5 – CSS3 Eskuliburua 4

Bi ezaugarri gehitu zaizkio aurreko bertsioari:

atributu, elementu eta portaera berriak

teknologia berriak (Canvas, API…).

Ezaugarri horiei esker, HTMLk ez du bestelako kanpo-teknologiarik behar, bere barruko

Etiketa semantikoak. HTML dokumentuak estrukturatzeko, etiketa berriak

Esteban Garitagoitia Elgoibar | HTML5 – CSS3 Eskuliburua 5

HTML5 lengoaian etiketa berriak sortu dira, diseinatzaileei web-orriak egitea

Irekiera-etiketa Itxiera-etiketa Funtzioa

Nabigatzegunea identifikatzen du.

Dokumentu, orrialde edo web-orri baten

Esteban Garitagoitia Elgoibar | HTML5 – CSS3 Eskuliburua 7

Dokumentu baten orri-oina adierazten

HTMLn atributu guztiak = sinboloarekin identifikatzen dira, eta informazio

elementua atributuak balioak

Esteban Garitagoitia Elgoibar | HTML5 – CSS3 Eskuliburua 8

class: Atributu hau erabiltzen dugu, elementu batek dituen

id: Atributu hau erabiltzen dugu elementu batek beste elementu

style: Atributu hau erabiliko dugu HTMLko edozein elementuri CSSko

name: Nahiz eta atributu hau zaharra izan, erabilgarritasun handia du

izena: <input type="text" name="zureizena">

Esteban Garitagoitia Elgoibar | HTML5 – CSS3 Eskuliburua 9

dokumentuak erabiliko duen karaktere-kodearen informazioa

<head> etiketaren barruan, aipatu dugun bezala, etiketak eta elementuak

Beheko adibidean, eta idatzita dagoen ordenari jarraituz, dokumentuaren

kodifikazioa: hau da, nola bistaratu behar duen dokumentua

informazioa: nork sortu duen, zeri buruzkoa den gure

kanpoko CSS dokumentu batekin lotuta dagoela

Esteban Garitagoitia Elgoibar | HTML5 – CSS3 Eskuliburua 11

Aurreko bertsioarekin konparatzen badugu, erraza bihurtu da dokumentu

Zer gertatzen zen lehen etiketak hauek erabiltzean? Diseinatzaileek zerbait

<body> etiketaren barruan erabiliko ditugu atalak identifikatzeko sortu diren

1.5. GORPUTZA ANTOLATZEN

Diseinu hau nola egiten den CSS kapituluan azalduko dugu.

Esteban Garitagoitia Elgoibar | HTML5 – CSS3 Eskuliburua 12

Esteban Garitagoitia Elgoibar | HTML5 – CSS3 Eskuliburua 13

Esteban Garitagoitia Elgoibar | HTML5 – CSS3 Eskuliburua 14

Lotura horiek, gehienetan, etiketa-zerrenda batekin egiten dira, baina

Nabigatze-barra bat web-orri bateko edozein ataletan egon daiteke ipinita.

Esan behar dugu etiketa hau dela garrantzitsuenetariko bat. Edozein

Web-orrian bistaratzen den informazioak –testua, bideoa, irudiak…– atal

letraren tamaina eta letra-tipoa

irudien tamaina eta formatua (gif, jpeg…)

dokumentuak nabigatzailean kargatzeko orduan pisu handia ez

Gehienetan, bertan aurkitzen den informazioa artikulu batekin izango du

Esteban Garitagoitia Elgoibar | HTML5 – CSS3 Eskuliburua 16

<blockquote>Lehen artikuluaren aipamena</blockquote>

HTML lengoaian erabiltzen diren ohiko etiketak honako hauek dira:

<h1> Izenburuak definitzeko erabiltzen da. Haren balioak (h1…h6) dira.

<hr/> Paragrafoak banatzeko erabiltzen da. Marra horizontala sortuko du.

Esteban Garitagoitia Elgoibar | HTML5 – CSS3 Eskuliburua 18

<p> Dokumentuan bistaratuko den paragrafoa definitzeko erabiltzen da.

<br/> Lerro-jauzi bat egiteko erabiltzen da.