1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML

7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML

1/56

Markatzaile Lengoaiak HTML eta

CSS apunteak


2/56

[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA

2

0.- Markatzaile Lengoaien programa:

1.Ebaluaketa:

HTML xHTML CSS CSS3 eta HTML5 (denbora ematen badigu)

2.Ebaluaketa:

XML (oso erabilia zikloan) XML Datu Baseak (agian ez da ematen hemen baina bai Datu Baseen ikasgaian) RSS (gainetik)

3.Ebaluaketa:

JavaScript. jQuery.

Helbide interesgarriak:

Desarrollo Web: http://www.desarrolloweb.com/ HTML ya: http://www.htmlya.com.ar/ CSS ya: http://www.cssya.com.ar/ CSS 3 ya: http://www.cssya.com.ar/css3ya/ W3Schools: http://www.w3schools.com/ HTML.net: http://es.html.net/ Aulaclic: http://www.aulaclic.es/html/index.htm 0utkast (bideotutorialak): http://www.youtube.com/user/0utkast Javascript ya: http://www.javascriptya.com.ar/ Wikipedia sobre HTML 5 y CSS: http://docs.webplatform.org/wiki/Main_Page Liburuak Ingelesez: http://www.wowebook.be

Ordutegiak:

Asteazkena: 10:00-11:00 / 11:30-12:30 Ostirala: 10:00-11:00 / 11:30-12:30


3/56

[MARKATZAILE LENGOA

3

1.- HTML L

Lengoaia horrek ez

plataforma bakoitzari formatahalmenaren arabera (pantai

HTMLn idatzitako dditzaketen etiketak dituzte.

Hasierako etiketak azeinuarekin) desaktibatu egiaurrerago ikusiko dugu.

Erabiliko dugun prog

HTML dokumentuare


4/56

[MARKATZAILE LENGOA

4

2.- Lehen u

etikeHiru etiketak deskri

informazio sinplea ematen d

soilik HTML fitxategiak inter

hauetariko bakoitzak:

o Izenbu Izenburuak. Testu

izenburua izatea nahi dug

..... etiketen bid

lodiena eta handiena, - lodiera eta tamaina. HTML d

Emaitza hau duelarik

IAK HTML ETA CSS APUNTEAK ] ANA

ratsak:

tak:

atzen dute dokumentuaren egitura orokorra

ute. Etiketa horiek ez dute eraginik dokument

retatzen eta iragazten dituzte. Honelako funtz

ruakIzenburuak

a ataletan zatitzeko balio dute. Sei izenburu-mai

n testua Izenburua etiketen a

z definitzen dira, .....ra bitartean.

berriz txikiena. -tik -ra pixkanaka mukumentu baten egitura adibidekotzat hau izang

:

RTZ MUGIKA

eta hari buruzko

aren itxuran, eta

ionamendua dute

la defini daitezke,

tean jartzen da.

izango da

rrizten doa honendugu:


5/56

[MARKATZAILE LENGOA

5

o

Paragr

Paragrafoak.: H

printzipioz. Idatzi nahi dugun

non itxi egiten duguneangorabehera. HTML dokumen

Nabigatzailean izang

o Lerro-jauzi

Lerro-jauziak.: P

etiketa jarriz esaldiaren ostea

o

omentarioak.: Ez dute eraginik izango H

ugunean *.html fitxategia baina OSO ERA

hal izateko dokumentuaren egituraren zatir

tzio nagusia. Bere helburua da erabiltzaile

berriztera doanen jakiteko zein den

urreztuz batez ere ulertzeko orduan.

RTZ MUGIKA

ako etiketa da

tzi beharko dugu,

rtaerarakin gutxi

su hontan

rrengo lerrora.

ML dokumentua

ILGARRIAK izan

n bat jakin ahal

k hauek idaztea

egitura horren


6/56

[MARKATZAILE LENGOA

6

H1H6 , BR, Iruzkine

H1, B

Nire leh


7/56


7

3.- Bestelako etiketak eta karaktere

bereziak:

o Lerro horizontala(Banalerroak)

etiketarekin sortzen dira; ez dauka itxierako etiketarik ez eta testu asoziaturik ere.Hainbat atributu ditu, hauetako hauek direla garrantzitsuenak:

align (left, right edo center): banalerroa kokatzeko. size (px-tan): Neurria (grosor). noshade: propietate hau jartzen badugu "size" handiko lerroetan barruan

geratu ahal den hutsunea bete egiten du. Hau jartzen ez badugu hutsuneaegongo da. Esan daiteke honek "relleno" lan egiten duela.

width (px edo %-tan adierazioa): lerroan zabalera adierazteko.Adibide batzuk, jungo naiz propietateak jartzen eta bere emaitza:

a. hr etiketa jarriz bakarrikb. align= center, size= 5px , noshade eta width=70%.c. align=left, size=5px eta width=80%.d. size= 6px, noshade, width=600px.


8/56

[MARKATZAILE LENGOA

8

Emaitz hau emango

Informazio gehiago: http://

o Karaktere berezia

Errealitatean karakte

hasierako edo amaierako eti

& " "

reziak

RTZ MUGIKA

ateko ez


9/56


9

HTML 3.2 -ko karaktere bereziak

Beste karaktere berezi gehiago


10/56


10

4.- Loturak: Nola sortu ahal dezaket

loturak nere HTML dokumentutan?

Lotura bat sortu ahal izateko behar dugun gauza da elementu bat, bai testu eran edoirudi modura irudikatuta. Bi elementu hauek izanda burutu ahal dogu lotura bat sortzekoprozesu sinplea.

Dauden lotura motak hauek dira:

Nere orrietara egindako loturak. Dokumentu bertan gune bati lotura sortzea (ankla baten bitartez) Posta elektroniko baterako lotura. Interneteko edozein webgunera zuzendutako lotura.

Nere orrietara egindako loturak:

Loturarik errezena da, baina kontutan hartu behar ditugu nun dauden lotu nahi

ditugun beste orrialdeak gu eraikitzen ari garen orrialdean.

Hortarako, gomendagarriena da fitxategi guztiak ondo sailkatuta egotea karpeta

baten, bakoitza izen batekin ondo identifikatuko duena loturak egiteko orduan errezago

burutu ahal izateko.

Adibide hontan, gu dakagun antolamendua honako hau da:

Webgunea izeneko karpeta bat non dazkagu

3 HTML (1.orria.html, 2.orria.html eta 3.orria.html) dokumentu lehen mailan eta 2

karpeta (irudiak eta animazioak). Irudiak karpetan "irudiak.html" izeneko HTML dokumentua

dago.

Maila berean dagoen orri bat badugu (1.orria.html-n gaude), besterik gabe maila

bereko beste orrialde batera jun nahi badugu:

Bigarren orrialdera juteko

Maila desberdinean dugun dokumentura lotura sortu nahi badugu. Adibidez,1.orria.html-tik irudiak.html-ra. KONTUTAN HARTU kasu hontan irudiak.html EZ DAGOLAmaila berean, maila hortako karpeta baten barruan dagoela eta horregatik jauzi in behar

dugu:

Irudiak dokumentora joateko


11/56


11

Kasu hontan, alderantziz egiteko, hau da, "irudiak.html" orrialdean gaude eta1.orria.html-ra jun nahi dugu. Maila desberdinetan daude dakigun bezala eta irudiak.html

maila bat beherago dagoenez gora egin behar dugu. Horregatik "irudiak.html"-ri lehen

karpetaren izena jarri diogun bezala, kasu hontan gora salto bat egin behar dugunez aurretik

"..\irudiak.html" egin beharko dugu.

1.orrialdera salto egiteko

Loturak orri bateko gune batera ankla baten bitartez:

Loturapixkat konplexuagoa da aurrekoarekin konparatuz baina berez ez da zaila

erabiltzeko. Bi pausotan bereizten da hau, lehenbizi "helmuga", nora jungo den sakatutakoan

klik ( bitartez) lotura horri eta azkenengoz lotura ( sortu dugun anklara).

Goian jarri dugun ankla orriko beste toki baten jotzen diogunean klik "gora" izeneko

etiketa duenera jungo da-->

Ankla sortutakoan, jarriko dugun elementuaren bitarteaz "gora" izeneko ankla duen

gunera eramango gaitu orri berdinaren barruan

Dokumentuaren goikaldera joateko sakatu

Posta elektroniko baterako lotura:

Lotura oso erreza, Idatzi postara barruan "mailto:posta

elektronikoaren helbidea" idaztea da besterik ez.

Idatzi!!!

Edozein webgunerakoloturak:

Hontan, erabiltzen ari garen etiketaren barruan "http://www" egiturako lotura

sartu behar diogu. Adibidez, Google-ko helbidea sartu nahi dugu.

Google

Horrelan idatzita baina eragozpen bat egongo da kasu hontan. Ez gaudenez gure

orrialdearen barruan loturak egiten erabiltzaileak gure orrialdea galtzeko arriskua dute eta

horregatik interesgarria da gure webgunea mantentzea, interneko webgunearen orria beste

esteka batean zabalduz. Hau egiteko, aipatu dugun barruan

"target=_blank" idatzi beharko dugu. Lotura mota hontarako erabiliko duguna izango da.

Google


12/56

[MARKATZAILE LENGOA

12

5.- Irudiak

batean. Nol

Irudi bat gure webg

beharko diogu. Gero etiket

dizkiogu non irudi bat sartu

adierazita

Jarri daitezkeen irudi motak

GIF (Graphics Interch JPG o JPEG (Joint Pho

PNG (Portable Netw

Gure probak kontutaorain editatzen gauden orriahau da:

Irudiak karpeta barharturik gu gaudela Probakbeharko genukeen kodea el

etiketa jarri

finkatu beharko

gu src moduan

dagoela.

beharko dut. Gukgi egitura honako

gu eta kontutan, horrelan finkatu


13/56

[MARKATZAILE LENGOA

13

Dena zuzen idatzi ba

Lotura irudi baten (finkoa

Kasu hontan, aurr

intrukzioarekin baina animazi

motatakoa izatea zer jpg, jpe

Orain, internetetik je

izango da duen desberdint

fitxategia.

HTML dokumentoa

da ohartzea nun dagoen ir

kokatu beharrean "animazio


ugu, honako itxura izango du gure HTML doku

k eta animazioak *.gif bezalakoak)

ko puntuan bezala egin beharko da

o duguna da *.gif

ala erakutsi.

bat non ikusi ahal

a *.gif motatako

oso garrantzitsua

irudiak" karpetan


14/56

[MARKATZAILE LENGOA

14

Dena zuzen idatzi ba


ugu, honako itxura izango du gure HTML doku

RTZ MUGIKA

entuak:


15/56

[MARKATZAILE LENGOA

15

6.- Zerrend

HTML-ek hainbat herZerrenda guztiek bat edo zerdezakete:

o Ordena bat jarraitzeo Ordenik jarraitzen ezo Definizioak (gure kas

Ordenik gabeko zerrenda

Honako ezaugarriak

Ul et lista zabaldu eta ixteko

li> listaren elementu bakoitzeko honako hau ba

tean horrelan finkatu beharko genukeen:

hau edukiko du:

i motak:

si moduan datorrena, ez badugu ezer jartzen ulu

udikatuko da non barruan hutsune zuria izangoak.

n bezalaxe baina orain borobil baten itxurakin.

RTZ MUGIKA

endak zehazteko.ek eduki

t jarri behar dugu

type-an hau

du eta


16/56

[MARKATZAILE LENGOA

16

Adibideak:

Itxura hau agertuko zaigu na

Hontaz aparte, bait

zerrenda irudi desberdin bat


igatzailean:

ere egin dezakegu UL horien barruan, ele

inkatu LI etiketan type sartuz.

RTZ MUGIKA

mentu bakoitzari


17/56

[MARKATZAILE LENGOA

17

Honako emaitz hau emango


igu nabigatzailean:

RTZ MUGIKA


18/56

[MARKATZAILE LENGOA

18

Orden jakin bat daram

suetarako baliagarria)

Honako ezaugarriak

Ol et lista zabaldu eta ixteko

li> listaren elementu bakoitzeko honako hau ba

rrendak mota hauetakoak izan daitezke:

alez ordenatu ahal izateko zerrendak

tren ordena jarraituko duen zerrenda ordenatu

zala baina kasu hontan maiuskulaz egingo du la

aki erromatar minuskulez.

an bezala baina maiuskulaz egingo du lan

aten egitura idatzirik:

RTZ MUGIKA

rrezetako pau-

t jarri behar dugu

k.

.


19/56

[MARKATZAILE LENGOA

19

Honako emaitza ema

Zerrenda ordenatu b

Horrelako HTML kod

da non bere hasierako elem

dezakegu be start="x" jarrita


ngo digu nabigatzailean:

t elementu zehatz batetik hasteko adibidea:

Elemento x Elemento xi

arekin zenbaki erromatar minuskulen zerrenda

entua 10 izango da zenbaki erromatarretan. H

type barruan.

RTZ MUGIKA

ordenatua izango

u besteekin egin


20/56

[MARKATZAILE LENGOA

20

Ordena duten zerrendak

konbinazioa:

Hau egiteko, ez da

erabili beharko dugu ordenelementuak jartzen joateko

elementu baten ostean orde

dugu eta zerrenda honetan p

Ordenik gabeko zerr

ordena zehatz bat jarraitze

bitartez.

zerrendan

zerrenda bien arteko konbidugula honen ostean.

Honi buruz, klaseko a

1. Listasa. Lb. Lc. L

2. TablasAriketa hau burutzek

elementu bat jartzen d

zabalduko dugu type="a" (al

elementu direla.

Hauek jarri ostean jarriko dugu

o aukera izango

hi dugula:

bat zabaldu nunotatako zerrenda

ukiko ditugu hiru

ori eta momentu

idez egingo dugu

ZTU!!!:


21/56

[MARKATZAILE LENGOA

21

Interneteko nabigatz


ilean hartuko duen itxura honako hau da:

RTZ MUGIKA


22/56

[MARKATZAILE LENGOA

22

7.- Taulak (

Taula bat antolatutak

ahal ditzazkegu.

Taula bat definitu ah

ditugu.

Etiketa hauen barrua

sartzen joango gara taulari fo

leerroak dira eta hauetako b

zabaltzeko eta azkena ixteko.

Hontaz aparte, letro

ahal izateko eta e

eta etiket

erdian ipintzeko.

Tabla egituraren edukia hona

a:

RTZ MUGIKA

:

tako edukiak ipini

bili beharko

ren etiketak

ara dihoan

k, lehena

hauek definitu

tuko dugu.

beltzezteko eta


23/56

[MARKATZAILE LENGOA

23

"table" etiketari 'bor

aldiberean taula bezala hobe


24/56

[MARKATZAILE LENGOA

24

Teoria trebatzeko a

Gainetik aztertuz...ikusi

Hala ere, goiko lerroa oso osor

haueri colspan="4" propietatea

Bigarren eta hirugarre

Hauek eta etiketete

textua etiketaz osatuk

Laugarren lerroan berri

rowspan ="2"-ko propietateak

propietateak zutabe guztiak bult

Bostgarren lerroan, bi

betetzen ditu.

Azken lerroan, 3 e

Kodea taula hori erai

1.Ariketa


iketak taulei buruz:

ahal da printzipioz 6 lerro eta 4 zutabeko taula del

ik hartuta da titulo batekin non eta etik

atxikitzen zaielarik.

lerroak normal daude zutabe guztiak mantenduz

n artean eta jarri beharko ditugu zer "0" balioko zel

a jarriko ditugu azken td-a colspan="2" propie

itzeko honako hau da:

RTZ MUGIKA

border = "1"-ekin.

tak erabiltzen ditu

bere propietateak.

utabe dugunez lau

in colspan = "2" eta

io zer colspan="2"

da 3 eta 4 zutabeak

atea erabiliz.


25/56

[MARKATZAILE LENGOA

25

Ariketa hau, printzipi

lerroan, bi eta eti

finkatuko diogu bere lerroa e

Honen eraginez, hurr

bakoitzeko ze lehen ler

bakarrik zelda batekin bete a

Azken lerroa, bi

berezirik. Lortuko dugun HT

Nabigatzailean, horrelan inte

Euskal Herri

Frantzia

2.Ariketa


z, 2 zutabe eta 4 lerroz osaturik dagoela esan g

etak jarriko ditugu nun lehen etiketan rowspan

ta beste bi hartu ahal izateko.

engo bi lerrotan bakarrik eta jarriko

oan egiten duen rowspan-ak, bere posizioak ha

al dugu.

eta etiketaz osatuko dut zer ez daka inola

L kodea taula hori egiteko honako hau da:

rpretatuko da:

Euskadi

Nafarroa

Iparralde

Pars

RTZ MUGIKA

nezakegu. Lehen

"3" balioa

ugu eta

tzen ditu eta

o gauza


26/56

[MARKATZAILE LENGOA

26

Ariketa oso oso errez

ezarriz non honen barruan 4

Lehen lerroan

beste elementutan bi sartuko ditut lau lerro egongo direlako.

elementu bat egongo da colspan="2" porpiet

> elementu.

egitura hau izango du kodeak (beti ere gog

lan interpretatuko da:

RTZ MUGIKA

etiketak

atea duelarik eta

ratu eta


27/56

[MARKATZAILE LENGOA

27

8.- iframe-a

iframe-n propietate

src frame flotatz

idIframe-arenbaliagarri izan

frameborderErtza nahi bada egongo er

width Iframe-aren z

height Iframe-aren a

scrolling

Adieraziko datributu dazk

yes: s no: s auto:

izatek

align Alineazio fink

Kontuan hartu behar

Firefox-en (Chrome-n ez dak

badugu lehenaren ostean d

idatzitako kodea. Internet Ex

Adibide bat iframe-az


k (garrantzia oso g

garrantzitsuenak (iframe etiketan jar

ilearen barruan erakutsiko den orriaren helbide

identifikatzailea da non javascript-etik deitgo da balore hau finkatzea.

ugu definitu gure frame-an. Ez badugu ezer jazik baina ="1" jartzen badugu bai eukiko dugu e

balera emateko pixeletan edo portzentaian (%)

ltuera emateko pixeletan edo portzentaian (%)

ea nahi dugun desplazamenduko barrak ipingu "yes", "no" eta "auto".

croll edo desplazamendu barrak BETI erakustek

roll edo desplazamendu barrak INOIZ erakustekerakusteko beharrezkoak direnean (toki faltagao) (Finkatuta datorren balorea da ezer ez badug

tzeko da, "left", "rigth" eta "center" baloreak d

da etiketa duen elementu BAT jarri

it portaera berdina edukiko duen) zer bat bain

atozenak ez dira konektatuko ondo eta alper

lorer nabigatzailean BAI jarri daitezke bat baino

:

RTZ MUGIKA

txi):

riko ditugu)

a.

behar badugu

rtzen edo ="0" eztz bat.

zea edo ez. Hiru

atributua da.

atributua da.tik dena ikusi ahalu jartzen).

zka.

aitekeela Mozilla

o gehiago jartzen

ikakoa izango da

gehio.


28/56

[MARKATZAILE LENGOA

28

Honako emaitza ema

gabeko zerrenda bat agertuk


ngo digu, kontutan hartuta lehenengo iframe ba

zaigula:

RTZ MUGIKA

t eta gero ordenik


29/56


29

9.- Formularioak (garrantzitsuak):

Formularioak, edozein webgunetan aurkitu ditzakegun testu-kutxa ospetsu horiek eta

botoiak dira. Bilaketak egiteko zein datu pertsonalak sartzeko oso erabiliak dira merkataritzaelektroniko lekuentan adibidez.

Erabiltzaileak alor hauetan sartzen dituen datuak formularioko administratzailearen

posta elektronikora zein programa batera bidali ahal ditu hura automatikoki prozesatzearen

ardura hartzen duelarik.

HTML erabiliz formularioa bidaltzeko daukagun aukera bakarra posta elektronikoz da.

Formularioa prozesatu nahi badugu programa baten bitartez gauza apur bat konplexuago gerta

daiteke beste hizkuntza sofistikatuago batzuk (PHP adibidez) erabili behar izango ditugulako.

Formularioak eta etiketaren bidez definitzen dira. Bi etiketa hauenartean alor eta formularioa osatzen duten botoiak jarriko ditugu. Etiketa honen barruan

ezaugarri batzuk zehaztu behar ditugu:

action: formularioak martxan jarri behar duen ekintza definitzeko baliagarria da non biera dauzkagu:

o Formularioa posta elektroniko batera bidalia da.o Formularioa programa edo script batera bere edukia

prozesatzen duenera bidaltzen du.

Lehen kasua erabiliko dugu guk HTML trebatzen ari garelako eta ez beste hizkuntzkonplexuagoak. Horrela adieraziko dugu:

< form action="mailto: [email protected]" ...>

method: Formularioa bidaltzearen forma zehaztearen ardura hartzen duen ezaugarriada. "post" eta "get" dira bi balio posible har daitezkena ezaugarri hontan. Berez,

erabiliko duguna "post" izango da kontrako esan ezean.

enctype: Formularioaren informazioa nola bidaliko dugun era zehazteko erabiltzen da.Gure kasuan, formulario HTML bidez egitean eta gure hartzailea posta elektronikoz

hartuko duenez bidalitako informazioa eman behar diogun balioa "text/plain"-a da.

Horrela testu lau bezala bidaliko dugu hartzailearen posta elektroniko postontzira.

etiketaren zehazpena osoa ikusi dugun denarekin oinarte

Gure kasuan HTML bidez egingo dugunez prozesamendua, honako eran adierazi

beharko dugu etiketak (itxi egin behar da form etiketa!!!!):


30/56


30

Formularioak osatzen dute elementuak. Testu eremuak.

HTML-i esker hainbat aukera ditugu gure formularioak eraikitzeko orduan. Dauden

aukerak datoz testu kaxa arrunt batetik aukera anitzeko zerrenda batera.

Modalitate guzti hauek aztertuko ditugu eta gure formularioan nola inplementatu ahal

ditugun ikusiko dugu.

TTTeeessstttuuu mmmoootttzzzaaa:::

Testu kaxak etiketaren bitartez dira jarriak. Etiketa honen barruan finkatu

behar ditugun baloreak: type eta name.

Etiketa horrela idatziko da:

Modu hontan testu kaxa bat sortzeko ekintza egiten dugu non bere edukia "izena"

bezala identifikatu ahalko dugu. Testu kaxa mota hauen itxura aski ezaguna da:

Formularioaren elementuaren izena anitz garrantzitsua da prozesamendu programan

edo jasotako posta elektronikoan identifikatu ahal izateko. Beste aldetik, oso garrantzitsua da

type atributua zehaztea, beste modu batzuk daudelako formularioetan etiketa hori erabiltzen

dutenak.

type eta name atributuez aparte, gure etiketaren funtzionamenduarentzat

oinarrizkoak existitzen dira beste atributu multzo erabilgarriak suertatu ahal gaituztela baina

ez dira funtzeskoak type eta name bezala.

size: testu kaxan bistan dauden karaktere kopurua definitzen du. Erabiltzaileak testukaraktere kopuru zehatz hori pasatuta jarraitu ahal izango du idazten baina testua

ezkerraldean dagoena desagertzen jungo da nahiz eta gero bidaltzerakoan oso osorik

bidaliko da.

maxlength: kasu hontan, size-arekin alderatuta hemen bai dau karaktere kopuru mugabat. "10" esaten badugu propietate honi 10 karaktere besterik ez sartu ahal izango

ditugu.

value: Hasieratik definitutako balorea da erabilgarria izan daitekeela kasu askotan.Erabiltzaileari laguntza bezala pentsatuta dago. Adibidez, izena jartzeko eremuan jarri

ahal da adibide bat " Adibidez: Anartz".

Honelako eremua bat sortuko du:

Adibidez: Anartz


31/56


31

TTTeeessstttuuu eeezzzkkkuuutttuuuaaa:::

Izartxoen bitartez ezkutatu ahal dugu testua konfideltasun bat eramateko asmoz.

Testu motzen ezaugarri berdinak izango ditu baina edukiko duen desberdintasun aipagarria

izango da testua ezkutatua egongo dela izartxoen bitartez. Kasu hontan type=text izan

beharrean type=password izango da.

Kasu hontan, konproba dezakegu idazterakoan testua erakutsi beharrean izartxoak

agertzen zaizkigula.

Testu eremu hauek aproposak dira konfideltasun itxurako datuekin tratatu ahal

izateko, batez ere sarbide kodeekin edo pasahitzekin lan egiteko.

size, maxlength eta value-en ezaugarriak hartuko ditu baita ere testu motzan bezala

baina izartxoen desberdintasunarekin.

TTTeeessstttuuu llluuuzzzeeeaaakkk:::

Hainbat lerrotako testu eremua jarri nahi badiogu erabiltzaileari etiketa berri bat jarri

beharko dugu dela eta berekiko datorren itxiera.

Eremu mota hauek oso praktiko eta erabilgarriak dira telfono eta dato zehatzak jarribehar ez direnean, hau da, edozein iritzi edo komentario egiteko aproposak dira.

etiketaren barruan aurreko testu eremutan egin dugun bezala name

atributua bete beharko dugu identifikazio moduan izan ahal izateko aldagai bat izango balitz

bezala datuak hartzaileak jasotzen dituenean. Hontaz aparte, definitu ahal izango dugu eremu

honen dimentsioak honako atributu hauekin:

rows: eremuan egongo diren lerro kopurua definitzen du. cols: eremuan egongo diren zutabe kopurua definitzen du.

Atributu hauek kontuan hartuta, honela irudikatu beharko genukeen:

*************


32/56

[MARKATZAILE LENGOA

32

Emaitza honako hau i

Hontaz aparte, erem

dugu value atributua erabil

eta a

Escribe tu comenta

zango da:

elementuak:

rabilgarriak izan arren, askotan nahi dugun inf

. Horregatik testu eremuez aparte beste ele

tzazkegu nahi dugun informazio zehatz bat jaso

o kreditu txartel desberdinen zerrenda jartzek

RTZ MUGIKA

. Hortarako, ez

idatziko dugu

io.

rmazioa ez dugu

entuez osaturik

hal izateko.

guk aukeratzeko


33/56

[MARKATZAILE LENGOA

33

AAAuuukkkeeerrraaazzzkkkooo zzzeeerrrrrreeennnddd

Aukerazko zerrendak

menuetako (menus despleg

erabiliko dugu (itxiera kontua

Aurreko kasuak beza

ahal izateko. Honen barruan

dugu.

Gauza hauek kontua

da:

HTML dokumentuan

Egitura honek aldak

Bakoitzak egiten duen funtzi

size: zerrendan zenbbadugu artzen 1 i

Bistaratzen ez diren

izango da.

multiple: bat edo gegehiagoko aukeraket

garria atributu hauen

Atributu bi hauen ermultiple gehituz hor.


kkk:::

dira bat (edo hainbat) aukera baimentzen digu

bles) formulazio elementua. Hauek eraikitzek

n hartu).

la name etiketa jarri beharko diogu identifik

aukera bakoitzak etiketa (bere itxier

hartuta, etiketa honen erabilpena emateko m

aurrekoa idatzita, honako emaitza hau agertuko

etak jasan ditzake size eta multiple bezalako

a honako hau da:

at elementu bistaratuko diren esan behar da.

ango da baina honekin 1 baino gehiago fi

elementuak alboko desplazamendu barraren

hiago aukeratzeko balio duen atributua da. El

a CTRL edo SHIFT teklaren bitartez egingo da.

erabilera.

gina konprobatuko dugu zatian size eta


34/56

[MARKATZAILE LENGOA

34

HTML dokumentuan

(kontutan

aldatua. Etiketa honen barr

inolako baliorik. Honek zer

kontutan hartuta Otoo a

honako HTML egitura izango

Nabigatzailean honak

size=4eta option s

HTML dokumentuan



hartu itxiera) etiketa veste atributu batzuet

an selected atributua sartu ahal diogu multip

aukera dagoen hartuta adieraziko du. Aurreko

kera barruan etiketa barruan select

du:

o emaitza emango da:

lectedOtoo izanda:


RTZ MUGIKA

zaigu:

atik izan daiteke

le bezalaxe ez du

zerrenda aukera

d jartzen badugu

zaigu:


35/56

[MARKATZAILE LENGOA

35

"value"atributua era

Erabiltzaileak "value

daukan posta elektronikoare

Ezaugarri hau oso erabilgar

bazaio zenbakia edo letra ahitza nahiz testua baino.

Aukeretan talde moduan talde

iak. label barruan dagoen testua ezin izang

ko idatzi

n, erabiltzaileak aukera bat ezartzera derrigort

ta kasu hontan motatakoa da ez dautatea ezarri behar zaio. Adibide bat, honakoa da

bestean artean
etiketa erabiltzen d

arruan type="radio" name="estacion" value

tean erakutsi nahiko dugun izena, lehen kasua

a value-n zenbaki bat gehitzen jungo gara desb

RTZ MUGIKA

larioa bidaltzean

aukeraren ordez.

ramari bidaltzen

latu ahal izateko

o postara) iritsiko

zean, komentatu

enukeena postan

atzeko

da aukeratu eta

uta dagoen beste

ala itxierarik non:

ugu lerro-jauziak

"1" propietateak

"Primavera dela.

rdintzeko. Izango


36/56

[MARKATZAILE LENGOA

36

Ikus daitekeenez au

ematen zaio "name" bereko

postan jasoko dugun testua h

checked atributuari e

adieraziko da, kontutan hart

Nabigatzailean honak


kera bakoitzari "input" etiketa barruan "valu

aukera guztietan. Erabiltzaileak "Otoo" aukera

onako hau da:

estacion=3

sker aldez aurretik aukeretako bat aukeratuta a

lehengo egitura eta gehituz checked:

o emaitza emango digu:

RTZ MUGIKA

e" desberdin bat

egiten badu, gure

rkitzen da. Honel


37/56

[MARKATZAILE LENGOA

37

BBBaaallliiidddaaazzziiiooo kkkaaaxxxaaakkk:::

Formularioko eleme

aukera kontuko kutxaren gai

aurrekoekin alderatuz.


38/56

[MARKATZAILE LENGOA

38

Bidalketa, ezabatze

BBBiiidddaaalllkkkeeetttaaa bbboootttoooiiiaaa:::

Formularioan betetz

sistemara bidali ahal izateko

etiketa ezaguturik a

bakarra hau da:

Hau idatzirik HTML hi

EEEzzzaaabbbaaatttzzzeee bbboootttoooiiiaaa:::

Botoi honi esker, era

aukerak aldez aurretik finkat

kodea zabalduz eta

hizkuntzan:

Hau idatzirik HTML hi

Fieldset eta legend e

fieldset etiketa os

artean erlazionatuta dauden

Fieldset etiketare

izateko etiketak derrigorrez

laukizuzen batena non bere e

Hay una cosa importante qu

lo que pueda en la pgina. E


eta abar HTML formulariotan:

ko zeuden eremu guztiak bete ondoren, hau

informazioa bidalketa botoi bat sortu behar dug

urretik erraza izango da. Botoi mota idazteko

zkuntzan, nabigatzailean honela interpretatua iz

iltzaileak aukera du formularioan sartu diren d

uta zeuden bezala uzteko. Hortarako, lehen be

type-n "reset" jarriko dugu. Honako eran erak

zkuntzan, nabigatzailean honela interpretatua iz

tiketak formulariotan:

o erabilia da formulariotan non bere erabilpen

eremuak taldekatzeko gaitasuna du.

in hasiko da eta bere itxiera (). Zab

koak dira. Fieldset etiketari esker lortzen d

dukia barruan taldekatzen du.

debemos tener en cuenta del fieldset: ste se

decir, su ancho por naturaleza ser del 100%.

RTZ MUGIKA

kudeatzen duen

u eta horretarako

gin behar dugun

ango da:

tu edo egin diren

ala idatziko dugu

tsiko dugu HTML

ango da:

nagusia da beren

altze eta itxi ahal

ugun efektoa da

ensanchar todo

i queremos darle


39/56


39

una anchura predeterminada o limitar su expansin lo que deberemos hacer incluir la etiqueta

dentro de una tabla a la que s le indicaremos la anchura que queremos darle.

A continuacin vamos a ofrecerte un fieldset bsico, sin limitacin ninguna:

Esto es un fieldset bsico

Y aqu puedes apreciar como quedar en nuestra pgina:

Esto es un fieldset bsico

Y a continuacin te mostramos el cdigo de un fieldset incluido dentro de una tabla, conuna anchura del 75% y alineada al centro:

Esto es un fieldset dentro de una tabla

Obteniendo el siguiente resultado:

Esto es un fieldset dentro de una tabla

Legend

La etiqueta legend nos resulta muy til dentro de la etiqueta fieldset. Legend nospermite titular o etiquetar el conjunto de campos que estn incluidos dentro de legend.Por ejemplo, si el conjunto de datos son los datos personales de la persona, en legendescribiremos Datos personales.

Legend se abre con la etiqueta y se cierra con . Por supuesto, estasdos etiquetas deben estar dentro de la etiqueta .

Podemos alinear el ttulo del legend como queramos, mediante el parmetro align. Enla siguiente muestra veremos un fieldset con su etiqueta alineada al centro:


40/56


40

legend alineado al centroEste es un ejemplo de un fieldset con el legend alineado al centro

Y la muestra es la siguiente:

legend alineado al centro Este es un ejemplo de un fieldset con el legend alineado alcentro


41/56


41

10.- CSS estilo orriak(garrantzitsuak):

Kolore taulak: http://www.w3schools.com/cssref/css_colorsfull.asp

CSS-en komentarioak egiteko, /* testua */ izan beharko da.

CSS styles erako ariketak egingo ditugu: http://www.w3schools.com/css/default.asp

Atributo izena Eman ahal ditugun baloreak Adibideak

HITZ-ITURRIAK - FONT

color valor RGB o nombre de colorcolor: #009900;

color: red;

Testuaren kolorea adierazteko balio du. HTML etiketa gehienak onartzen dituzte. Lo admiten casi todas las etiqetasde HTML. Izen koloreak ez dira onartzen, horregatik RGB baloreak erabiltzea gomendatzen da.

font-sizexx-small | x-small | small | medium | large |

x-large | xx-large

Unidades de CSS

font-size:12pt;

font-size: x-large;

Hitz-iturrien tamaina zehazteko atributua da.

font-familyserif | sans-serif | cursive | fantasy |

monospace

Todas las fuentes habituales

font-family:arial,helvetica;

font-family: fantasy;

Atributu honekin testu tipografiaren familia zehaztuko dugu. Lehen baloreak orokorrak dira, hau da, nabigatzaileak

ulertu eta interpretatzen ditu hauek erabiltzaileak dituen hitz-iturriak kontutan hartuz.

Tipografia oinarrizkoak ere definitu daitezke HTML-en gertatzen zen bezala. Hitz-iturri baten izena hutsuneak baditu

komillak erabiliko dira ondo ulertu ahal izateko.

font-weightnormal | bold | bolder | lighter | 100 | 200 |

300 | 400 | 500 | 600 | 700 | 800 | 900

font-weight:bold;

font-weight: 200;

Karaktere zabalera (lodiera) zehazteko balio du, edo veste batera esanda, negritak askatasun osoz finkatzeko.

Normal eta 400 balore berdina dira bold eta 700 diren bezala.

font-style normal | italic | obliquefont-style:normal;

font-style: italic;

Letra itxuraren estiloa da, normal, italica eta oblicua izan daitekeela. Oblique estilo italic-en antzekoa da.

PARAGRAFAK - TEXT

line-height normala eta CSS unitateakline-height: 12px;

line-height: normal;

Lerroan altuera, ondorioz, lerroen arteko hutsunea. HTML erabilita modifikatu ahal ez dugun ezaugarri bat da.

text-decorationnone | [ underline || overline || line-through

]

text-decoration: none;

text-decoration: underline;

Testuaren dekorazioa finkatzeko, hau da, azpimarratuta, goimarratuta edo tatxatuta dagoen.


42/56


42

text-align left | right | center | justifytext-align: right;

text-align: center;

Testuaren alineazioa adierazteko balio du. Interesgarria da adieraztea estilo orriak testua justifikatzen uzten dutela.

text-indent Unidades CSStext-indent: 10px;

text-indent: 2in;

Orrialdetan marginak egiteko atributua. Oso erabilgarria.

text-transform capitalize | uppercase | lowercase | nonetext-transform: none;

text-transform: capitalize;

Testuaren eraldaketa egiten du, hitz guztietako lehen karakterea maiuskulaz izanda, dena maiuskulaz edo

minuskulaz.

FONDOAK - BACKGROUND

Background-

color Un color, con su nombre o su valor RGBbackground-color: green;

background-color: #000055;

Orrialdearen elementu baten atzekalde-kolorea aldatzeko.

Background-

image

El nombre de la imagen con su camino

relativo o absoluto

background-image: url(mrmol.gif) ;

background-image:

url(http://www.x.com/fondo.gif)

Atributu honekin atzekalde irudi bat jarri ahal dugu orriko edozein elementutan.

BOX - KAXA

Margin-left CSS Unitateak margin-left: 1cm;margin-left: 0,5in;

Atributu honekin ezkerraldean dagoen margena adierazten dugu.

Margin-right CSS Unitateak margin-right: 5%;margin-right: 1in;

Atributu honekin eskumaldean dagoen margena adierazten dugu.

Margin-top CSS Unitateakmargin-top: 0px;

margin-top: 10px;

Atributu honekin gainean dagoen margena adierazten dugu.

Margin-bottom CSS Unitateakmargin-bottom: 0pt;

margin-top: 1px;

Atributu honekin behealdean dagoen margena adierazten dugu.

Padding-left CSS Unitateak padding-left: 0.5in;padding-left: 1px;

Sartutako hutsunea adierazteko da, ezkerretik, elementu honen bordetik eta honen barruan dagoen edukitik. Taulen

cellpadding propietatean portaera antzekoa dauka.

Sartutako hutsunea elementu horren atzekalde berbera dauka.


43/56


43

Padding-right CSS Unitateakpadding-right: 0.5cm;

padding-right: 1pt;

Sartutako hutsunea adierazteko da, eskumatik, elementu honen bordetik eta honen barruan dagoen edukitik. Taulen

cellpadding propietatean portaera antzekoa dauka.


Padding-top CSS Unitateakpadding-top: 10pt;

padding-top: 5px;

Sartutako hutsunea adierazteko da, goitik, elementu honen bordetik eta honen barruan dagoen edukitik.


Padding-bottom CSS Unitateakpadding-right: 0.5cm;

padding-right: 1pt;

Sartutako hutsunea adierazteko da, behetik, elementu honen bordetik eta honen barruan dagoen edukitik.


Border-color RGB kolorea edo colore izena.border-color: red;

border-color: #ffccff;

Orriko elementuaren ertzaren kolorea emateko atributua da. border-top-color, border-right-color, border-bottom-

color eta border-left-color atributuekin banatuta jarri daitezke kolore desberdinak ertza bakoitzari kolore desberdin

bat eman ahal zaielarik.

Border-stylenone | dotted | solid | double | groove |

ridge | inset | outset

border-style: solid;

border-style: double;

Ertzaren estiloa non baloreak hau esan nahi dute: none=ertzik ez, dotted=ertzak puntuez osaturik solid=solido,

double=ertz bikoitza, eta groove tik outset-ra 3D itxurako efektuak ditutztela.

border-width CSS Unitateakborder-width: 10px;

border-width: 0.5in;

Aplikatzen diogun ertzaren tamaina da.

float none | left | right float: right;

Elementu bat ezkerrera edo eskumara alboratzeko balio duen atributua da honek daukan testua taldekatzen duelarik

honen inguruan. Irudien align atributuaren portaera verbera dauka left edo right aplikatzean.

clear none | right | left clear: right;

Elementu honek eukitzen baditu bere garaieran irudiak edo beste alineatutako elementuak ezkerrera edo eskumara,

clear atributuari esker egiten dugu adierazitako tokian eskumara edo ezkerrera.


44/56


44

11.- Hexadezimal kolore ohikoak

Hemen: http://www.w3schools.com/tags/ref_colorpicker.asp hautatu ahal ditugu

koloreak kodeak lortu ahal izateko.


45/56


45

12.- Loturak CSS-en

HTML dokumentutan egin ahal zen teknika da hau non loturen estiloa deitu ahal diogu,azpimarratutako testuak kenduz edota era desberdinetako loturak sortuz orri berdinean koloredebserdinak.

Era desberdinetako loturak definitu beharko ditugu estilo desberdinak eman ahalizateko (ikusitakoak, aktibatuta daudenak,). CSS motako fitxategian era honetan definitubeharko ditugu loturak:

Lotura normalakA:link {atributuak}

Ikusitako loturakA:visited {atributuak}

Aktibo dauden loturak (Arratoiarekin aktibatuta egongo dira sakatzen gaudelarik)A:active {atributuak}

hover loturak (arratoiko kurtsorea loturaren gainean dagoeneean)A:hover {atributuak}

Azpimarratu gabeko loturak finkatzeko atributua text-decoration:none da, eta koloreaemateko color:gure kolorea (hexadezimalez edo izena jarriz).


46/56


46

13.- Nola sartu favicon webgunetan

Webgunei itxura politagoa emateko asmoz, orrialde ondoan agertu daitezkeen

ikonoen itxura aldatu ahal dugu guk sortutako ikonoekin.

Ikonoak sortu ahal izateko, favicon.cc webgunea dakagu: http://www.favicon.cc

Ikonoa sortu dugun ostean, eta artean sartu behar dugun kodea

honako hau da:


47/56


47

14.- CSS fitxategi bakar baten bezala

CSS fitxategi independiente baten jarrita daukagularik, etiketaren bidezdefinituko dugu honako atributu hauek:

rel="STYLESHEET" lotura estilo orri bat dela definitu ahal izateko. type="text/css" fitxategia testua delako, CSS sintaxian. href="estilos.css" estiloaren fitxategiaren izena adierazten du.

Aurretik aipatutakoa, web orrialde oso baten oinarritua, honako itxura izango du:


48/56


48

CSS trikimailu aurreratuak (11.orr)

Klaseen erabilpenaren bidez estiloak ematen:

Klaseen helburu nagusia da estilo definizio bat egitea non nahi adina alditan erabiliahal ditugu gure webguneetan.

Klase bat etiketeten artean (dokumentoaren kabezeran), edo kanporakolotura bat duen CSS fitxategi batean (azken hau da gomendagarriena). Klase bat definitu ahalizateko hurrengo sintaxia erabiliko dugu, punto bat jarraian klasearen izena eta giltzen arteannahi izango dugun estiloen finkapena. Honela izango da:

.klasearen_izena {

atributo1: balorea;

atributo2: balorea;

}

Klasea sortuta dakagun momentuan, HTML-eko edozein etiketan erabili ahal izangodugu. Horretarako "class" atributoa erabiliko dugu, balore bezala klasearen izena jarriz, erahonetan:

Hau erakusteko adibide gisa, klasean egindako ariketa bat hartuko dut:

Ariketa honetan, ikusten den bezala 1 eta 3 lerroak nola 2 eta 4 lerroak berdinak dira(estilo berdina dute) baina lehen biak etiketaz inguratuta daude eta azken biak

etiketarekin.


49/56


49

1 eta 3 lerroak duten ezaugarri komuna kolore berdea da class horretan jarrikodugularik eta 2 eta lau lerrotan, testuaren tamaina (12px), atzekaldea beltza eta testuarenkolorea txuria da. HTML dokumentuan honela adierazita egongo zen:

Ondoren CSS orrian klase horiek finkatuta esan bezala


50/56


50

15.- Geruzak (Capas DIV)

HTML kodearen erabilpen soilarekin ohitura handia da maketatzea burutzeko taulakerabiltzea. CSS estilo-orrien erabilpenarekin ordea, geruzak erabiltzen dira lan hau burutzeko.Taulak tabulatuta doan informazioa erakusteko baino ez dira behar. Honenbestez, weborrialdeek kargatzeko behar duten denbora ere izugarri txikitzen da.

Maketatze lanak burutzeko etiketa erabiliena den arren, berau gehiegitanerabiltzea saihestea ere komeni da, kodearen ulergarritasuna mantentzeko. Hori dela-eta,,
, eta beste etiketa ugari ere maketatzeko erabil daitezke.
Hona hemen etiketa erabiltzen duen maketatze adibide sinplea:

geruzak_css.html

geruzak_css.css

Honen emaitza:


51/56


51

Trebatzeko ariketak (5.ariketa):


52/56


52

Honako ezaugarriak ditu:

HTML dokumentoa honako itxura...

CSS orria honako itxura...


53/56


53

Trebatzeko ariketak (5.ariketa):

Honako ezaugarriak ditu:

HTML dokumentoa honako itxura...

Css dokumentua


54/56


54

Geruzetan ikusi ditugun ezaugarriak:

Position: Propietatea honek geruzak era absoluto baten kokatzeko aukera ematen digu

margin-top (goiko margina) eta margin-left (ezker margina) propietatei esker.

margin-top: geruzak gainetik izango duen hutsunea izango da kanpoaldetik.

margin-left: geruzak ezkerretik izango duen hutsunea izango da kanpoaldetik.

z-index: geruzen ordena emateko gure gustura. z-index zenbat eta handiagoa balore txikiagoak

dituzten geruzen gainean erakutsiko dira.

width: geruzaren zabalera finkatzeko.

height: geruzaren altuera finkatzeko.

Overflow propietatea: Geruza baten barruan testu bat sartzen ez denean ematen zaion

propietatea da. Era desberdinetakoak daude:

http://www.w3schools.com/cssref/pr_pos_overflow.asp


55/56


55

Laburtzeko propietatea: Border

Kodea laburtzeko asmoz, ertzari ematen zaizkion hainbat propietatea eman ahalkodizkiogu lerro baten. Hau lortzeko, arau batzuk jarraituz lortu ahal izango dugu ertz batenpropietateak adieraztea

Laburtutako ertza 3 banakako propietateaz osaturik egongo da:

border-width (ertzaren zabalera) border-style (beharrezkoa BETI) (ertzaren estiloa) border-color (ertzaren kolorea)

Padding - Shorthand property

Kodigoa laburtzeko asmoz, padding propietateak lerro eskas batean adierazi daitezkapropietate labrutzea emango delarik.

Laburutuko propietate hau "padding" bidez hasieratuko dugu:

Example

padding:25px 50px;

Saiatu

padding balorea era askotan adierazi daiteke:

/*Gora/Eskuma/Behea/Ezkerra*/

padding:25px 50px 75px 100px;o top padding is 25pxo right padding is 50pxo bottom padding is 75pxo left padding is 100px

/*Gora/Eskuma-Ezker/Behea */

padding:25px 50px 75px;o top padding is 25pxo right and left paddings are 50pxo bottom padding is 75px

/*Gora-Behea/Eskuma-Ezkerra*/

padding:25px 50px;o top and bottom paddings are 25pxo right and left paddings are 50px

/*Lau alboak berdinak izan nahi denean*/

padding:25px;o all four paddings are 25px


56/56


Float propietateak:

Propietate honen eragina oso sinplea izan arren orrialdeen diseinuan oso erabilgarrisuertatzen da erabiltzailearen ikuspegira birmoldatzeko baliagarria izango dela. Bere eginkizunhandiena da elementu bat hartzea eta ezkerrera edota eskumara finkatzea da (albo batera edobestera flotatuz)

Adibideak: float:none(1), float: left(2) eta float: right(3).

Propietate honekin trebatu ahal izateko: http://www.w3schools.com/css/css_float.asp

Float propietatea apurtzeko: clear:both; (berreskuratzeko class edo id-n sartu flotabilitatea

duen izena jarraitzeko)

Background repeat:

Repeat: repeat-x (horizontalki errepikatuko)

Background position (kokatzeko nahi dugun posizioa):

Bi background jarri ahal izateko (adibidez bat estatikoa eta bestea animazioa): body-

n background-image bezala jarri estatikoa dena eta geruza baten zabalera guztia hartzen

duena animazio irudia background bezala

1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML

Documents

Transcript of 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML