1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
-
Upload
anartz-muxika-ledo -
Category
Documents
-
view
230 -
download
1
Transcript of 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
1/56
Markatzaile Lengoaiak HTML eta
CSS apunteak
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
4/56
[MARKATZAILE LENGOA
4
2.- Lehen u
etikeHiru etiketak deskriinformazio 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:
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
6/56
[MARKATZAILE LENGOA
6
H1H6 , BR, Iruzkine
H1, B
Nire leh
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
7/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
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.
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
9/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
9
HTML 3.2 -ko karaktere bereziak
Beste karaktere berezi gehiago
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
10/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
11/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
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
IAK HTML ETA CSS APUNTEAK ] ANA
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
14/56
[MARKATZAILE LENGOA
14
Dena zuzen idatzi ba
IAK HTML ETA CSS APUNTEAK ] ANA
ugu, honako itxura izango du gure HTML doku
RTZ MUGIKA
entuak:
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
16/56
[MARKATZAILE LENGOA
16
Adibideak:
Itxura hau agertuko zaigu na
Hontaz aparte, bait
zerrenda irudi desberdin bat
IAK HTML ETA CSS APUNTEAK ] ANA
igatzailean:
ere egin dezakegu UL horien barruan, ele
inkatu LI etiketan type sartuz.
RTZ MUGIKA
mentu bakoitzari
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
17/56
[MARKATZAILE LENGOA
17
Honako emaitz hau emango
IAK HTML ETA CSS APUNTEAK ] ANA
igu nabigatzailean:
RTZ MUGIKA
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
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.
.
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
19/56
[MARKATZAILE LENGOA
19
Honako emaitza ema
Zerrenda ordenatu b
Horrelako HTML kod
da non bere hasierako elem
dezakegu be start="x" jarrita
IAK HTML ETA CSS APUNTEAK ] ANA
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
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!!!:
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
21/56
[MARKATZAILE LENGOA
21
Interneteko nabigatz
IAK HTML ETA CSS APUNTEAK ] ANA
ilean hartuko duen itxura honako hau da:
RTZ MUGIKA
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
23/56
[MARKATZAILE LENGOA
23
"table" etiketari 'bor
aldiberean taula bezala hobe
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
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
IAK HTML ETA CSS APUNTEAK ] ANA
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.
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
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
IAK HTML ETA CSS APUNTEAK ] ANA
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
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
IAK HTML ETA CSS APUNTEAK ] ANA
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.
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
28/56
[MARKATZAILE LENGOA
28
Honako emaitza ema
gabeko zerrenda bat agertuk
IAK HTML ETA CSS APUNTEAK ] ANA
ngo digu, kontutan hartuta lehenengo iframe ba
zaigula:
RTZ MUGIKA
t eta gero ordenik
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
29/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
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!!!!):
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
30/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
31/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
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:
*************
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
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.
IAK HTML ETA CSS APUNTEAK ] ANA
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
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
IAK HTML ETA CSS APUNTEAK ] ANA
aurrekoa idatzita, honako emaitza hau agertuko
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:
aurrekoa idatzita, honako emaitza hau agertuko
RTZ MUGIKA
zaigu:
atik izan daiteke
le bezalaxe ez du
zerrenda aukera
d jartzen badugu
zaigu:
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
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 darruan 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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
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
IAK HTML ETA CSS APUNTEAK ] ANA
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
37/56
[MARKATZAILE LENGOA
37
BBBaaallliiidddaaazzziiiooo kkkaaaxxxaaakkk:::
Formularioko eleme
aukera kontuko kutxaren gai
aurrekoekin alderatuz.
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
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
IAK HTML ETA CSS APUNTEAK ] ANA
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
39/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
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:
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
40/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
41/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
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.
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
42/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
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.
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
43/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
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.
Sartutako hutsunea elementu horren atzekalde berbera dauka.
Padding-top CSS Unitateakpadding-top: 10pt;
padding-top: 5px;
Sartutako hutsunea adierazteko da, goitik, elementu honen bordetik eta honen barruan dagoen edukitik.
Sartutako hutsunea elementu horren atzekalde berbera dauka.
Padding-bottom CSS Unitateakpadding-right: 0.5cm;
padding-right: 1pt;
Sartutako hutsunea adierazteko da, behetik, elementu honen bordetik eta honen barruan dagoen edukitik.
Sartutako hutsunea elementu horren atzekalde berbera dauka.
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.
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
44/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
44
11.- Hexadezimal kolore ohikoak
Hemen: http://www.w3schools.com/tags/ref_colorpicker.asp hautatu ahal ditugu
koloreak kodeak lortu ahal izateko.
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
45/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
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).
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
46/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
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:
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
47/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
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:
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
48/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
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.
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
49/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
50/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
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:
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
51/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
51
Trebatzeko ariketak (5.ariketa):
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
52/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
52
Honako ezaugarriak ditu:
HTML dokumentoa honako itxura...
CSS orria honako itxura...
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
53/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
53
Trebatzeko ariketak (5.ariketa):
Honako ezaugarriak ditu:
HTML dokumentoa honako itxura...
Css dokumentua
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
54/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
55/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
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
-
7/30/2019 1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML
56/56
[MARKATZAILE LENGOAIAK HTML ETA CSS APUNTEAK ] ANARTZ MUGIKA
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