1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML

Markatzaile Lengoaiak – HTML eta CSS apunteak

[MARKATZAILE LENGOAIAK – HTML ETA CSS APUNTEAK ]

ANARTZ MUGIKA

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: HTML ya: CSS ya: CSS 3 ya: W3Schools: HTML.net: Aulaclic: 0utkast (bideotutorialak): Javascript ya: Wikipedia sobre HTML 5 y CSS: Liburuak Ingelesez:

http://www.desarrolloweb.com/ http://www.htmlya.com.ar/ http://www.cssya.com.ar/ http://www.cssya.com.ar/css3ya/ http://www.w3schools.com/ http://es.html.net/ http://www.aulaclic.es/html/index.htm http://www.youtube.com/user/0utkast http://www.javascriptya.com.ar/ http://docs.webplatform.org/wiki/Main_Page http://www.wowebook.be

Ordutegiak: • •

2

Asteazkena: Ostirala:

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


ANARTZ MUGIKA

1.- HTML L ngoia: Lengoaia horrek ez u deskribatzen dokumentu baten diseinuaren itxura, baizik eta plataforma bakoitzari formatua emateko aukera eskaintzen dio, bere eta ber nabigatzailearen ahalmenaren arabera (pantailaren tamaina, instalatuta dauzkan iturriak...). HTMLn idatzitako d kumentuek dokumentuaren testua bera eta atributuak eduki ditzaketen etiketak dituzte. ori, praktikan, hauxe izango litzateke: dagokion testua

Hasierako etiketak agindua aktibatzen du, eta azkenak (hasierako bera, aurretik / zeinuarekin) desaktibatu egiten du. Etiketa guztiek ez dute hasiera eta a aiera, baina hori aurrerago ikusiko dugu. Erabiliko dugun prog ama HTML lengoaian aritzeko: Notepad++ HTML dokumentuare n egitura (etiketak maiuskulaz nahiz minuskulaz jarri ahal dugu):

Hemen nabigatzailean goian agertuko den tituloa

Nabigatzailean horrela ikusik da testu hau:

3


ANARTZ MUGIKA

2.- Lehen u ratsak : •

etike tak:

Hiru etiketak deskri atzen dute dokumentuaren egitura orokorra eta hari buruzko informazio sinplea ematen dute. Etiketa horiek ez dute eraginik dokument aren itxuran, eta soilik HTML fitxategiak inter retatzen eta iragazten dituzte. Honelako funtz ionamendua dute hauetariko bakoitzak: o

Izenburuak
…
Izenburuak

Izenburuak. Testua ataletan zatitzeko balio dute. Sei izenburu-maila defini daitezke, izenburua izatea nahi dug n testua
Izenburua
etiketen a tean jartzen da.
.....
etiketen bid z definitzen dira,
.....

.....
ra ra bitartean.
izango da lodiena eta handiena,
- berriz txikiena.
-tik tik
-ra ra pixkanaka murrizten doa honen lodiera eta tamaina. HTML d kumentu baten egitura adibidekotzat hau izang dugu:

Emaitza hau duelarik:

4

[MARKATZAILE LENGOAIAK – HTML ETA CSS APUNTEAK ] o

ANARTZ MUGIKA

Paragr foak

Paragrafoak.: Hasiera batean paragrafoz aldatzeko eraiki ako etiketa da Paragrafoak.: printzipioz. Idatzi nahi dugun testua paragrafoa
…
etiketen artean id tzi beharko dugu, non itxi egiten dugunean lerro- auzi bat egingo egingo du
bezalako bezalako portaerarakin gutxi gorabehera. HTML dokumen u baten egitura adibidekotzat hau izango dugu:

Nabigatzailean izang du itxura honakoa da:

o

Lerro-jauzi k

Lerro-jauziak.: Paragrafoaren antzeko portaera dute baina k su hontan
Lerro-jauziak.: etiketa jarriz esaldiaren ostean non salto egin nahi dugu, salto egingo digu hu rrengo lerrora. o

Iruzkinak edo k omentarioak. omentarioak.:: Ez dute eraginik izango H ML dokumentua nabigatzailean zabaltzen dugunean *.html fitxategia baina OSO ERA ILGARRIAK izan daitezke iruzkinak apunta

hal izateko dokumentuaren egituraren zatir n bat jakin ahal

izateko zein den bere fu tzio nagusia. Bere helburua da erabiltzaile k hauek idaztea

etorkizunean dokumentua berriztera doanen jakiteko zein funtzionamendua, denbora aurreztuz batez ere ulertzeko orduan.

5

den

egitura

horren


ANARTZ MUGIKA

H1…H6 , BR, Iruzkine eta P etiketen adibide simple bat: H1, BR eta P etiketen adibide simple bat
Nire lehen orria

Ankla sortutakoan, jarriko dugun elementuaren bitarteaz "gora" izeneko ankla duen gunera eramango gaitu orri berdinaren barruan Dokumentua ">Dokumentuaren ren goikaldera joateko sakatu

Posta elektroniko baterako lotura:

Lotura

oso

erreza, Idatzi elektronikoaren helbidea" idaztea da besterik ez.

postara

barruan

"mailto:posta

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

11


ANARTZ MUGIKA

5.- Irudiak artu HTML dokum ntu batean. Nol ? Irudi bat gure webg nean jarri nahi badugu, html dokumentuari < img> etiketa jarri beharko diogu. Gero etiketa hau dugularik, honen barruan propietateak finkatu beharko dizkiogu non irudi bat sartu ahal izateko “source” propietatea jarri behard gu “src” moduan adierazita dagoela. Jarri daitezkeen irudi motak auexek dira • • •

GIF (Graphics Interchange Format) *.gif extentsioarekin JPG o JPEG (Joint Pho tographic Experts Group) *.jpg edo *.jpeg PNG (Portable Netw rk Graphics) *.png

Gure probak kontutan hartuta, “irudiak” karpetako irudi bat hartu beharko dut. Guk orain editatzen gauden orria “1.aproba.html” dokumentua da. Gure fitxategi egitura honako hau da:

Irudiak karpeta bar uan aztertuz…elurra1.jpg irudia erabiliko dugu eta kontutan harturik gu gaudela “Probak karpetan eta irudia “Probak/irudiak” karpetan, horrelan finkatu beharko genukeen kodea “el rra1.jpg”irudia html dokumentuan itsazteko. g"/>

12


ANARTZ MUGIKA

Dena zuzen idatzi ba ugu, honako itxura izango du gure HTML doku entuak:

Lotura irudi baten (finkoak eta animazioak *.gif bezalakoak)

Kasu hontan, aurr ko puntuan bezala egin beharko da intrukzioarekin baina animazio bezala agertzeko irudia kontutan hartu behar o duguna da *.gif motatakoa izatea zer jpg, jpe edo png badira ezin izango ditugu animazio be ala erakutsi. Orain, internetetik je itsi doten irudi bat harturik emango dut adibide bat non ikusi ahal izango da duen desberdint asuna aurreko irudien loturarekin izango dela *.gif motatako fitxategia. HTML dokumentoa orrelan egongo da sortua. Kontutan hartu eta oso garrantzitsua da ohartzea nun dagoen ir dia kokatua. Kasu hontan nere animazioak "irudiak" karpetan kokatu beharrean "animazio k" karpetan kokatu ditut:

13


ANARTZ MUGIKA

Dena zuzen idatzi ba ugu, honako itxura izango du gure HTML doku entuak:

14


ANARTZ MUGIKA

6.- Zerrend k: HTML-ek hainbat her raminta eskaintzen dizkie egileei informazio-zerr endak zehazteko. Zerrenda guztiek bat edo zer enda-arrazoi gehiago eduki behar dute. Zerrend ek eduki dezakete: o o o

Ordena bat jarraitze duen zerrendak. Ordenik jarraitzen ez duen zerrendarik. Definizioak (gure kas an ez dugula emango.)

Ordenik gabeko zerrenda (enumeratu barik, puntuak dira)

Honako ezaugarriak itu zerrenda mota honek:   

Ul etiketatik dator.
/ul> lista zabaldu eta ixteko
< li> listaren elementu bakoitzeko honako hau ba t jarri behar dugu

HTML dokumentu ba tean horrelan finkatu beharko genukeen:

Nabigatzailean itxura hau edukiko du:

Zerrenda desordenatuan irudi motak: Disc Square Circle

15

Balore lehen si moduan datorrena, ez badugu ezer jartzen ul type-an hau agertuko zai u Karratu bat i udikatuko da non barruan hutsune zuria izango du eta bordeak belt ak. Square kasuan bezalaxe baina orain borobil baten itxurakin.


ANARTZ MUGIKA

Adibideak:

Itxura hau agertuko zaigu na igatzailean:

Hontaz aparte, bait ere egin dezakegu UL horien barruan, ele mentu bakoitzari zerrenda irudi desberdin bat inkatu LI etiketan type sartuz.

16


Honako emaitz hau emango igu nabigatzailean:

17

ANARTZ MUGIKA


ANARTZ MUGIKA

Orden jakin bat daram ten zerrendak (enumeratuak, adibidez rrezetako pau suetarako baliagarria)

Honako ezaugarriak itu zerrenda mota honek:   

Ol etiketatik dator, UL erabili beharrean.
/ol> lista zabaldu eta ixteko
< li> listaren elementu bakoitzeko honako hau ba t jarri behar dugu

Orden jakin bat daramaten z rrendak mota hauetakoak izan daitezke: "1" "a" "A" "i" "I"

Zenbaki nor alez ordenatu ahal izateko zerrendak Alfabetoko l tren ordena jarraituko duen zerrenda ordenatu k. Aurrekoan b zala baina kasu hontan maiuskulaz egingo du la . Ordena zenbaki erromatar minuskulez. Aurreko kasuan bezala baina maiuskulaz egingo du lan

Adibidea HTML dokumentu baten egitura idatzirik:

18


ANARTZ MUGIKA

Honako emaitza emango digu nabigatzailean:

Zerrenda ordenatu b t elementu zehatz batetik hasteko adibidea:

Elemento x
Elemento xi

Horrelako HTML kod arekin zenbaki erromatar minuskulen zerrenda ordenatua izango da non bere hasierako elem entua 10 izango da zenbaki erromatarretan. H u besteekin egin dezakegu be start="x" jarrita type barruan.

19


ANARTZ MUGIKA

Ordena duten zerrendak rden zehatz bat eramaten ez duten zerrend en arteko konbinazioa:

Hau egiteko, ez da auza berezirik egin behar. Besterik gabe, lehe nbizi
etiketa erabili beharko dugu ordena duten zerrendak zabaltzeko eta honen barr uan
etiketak elementuak jartzen joateko non nahi ditugun elementu guztiak jarriko ditugu. Hauetako elementu baten ostean orde nik gabeko zerrenda jarri nahi badugu
etik ta zabaldu behar dugu eta zerrenda honetan p arte hartuko duten elementuak
bidez jungo gara sartzen. Ordenik gabeko zerrendan elementuak jartzen amaitzean
eti keta jarriko dugu ordena zehatz bat jarraitzen duen zerrendan elementuak jartzen joatek o
etiketaren bitartez.
zerrendan
elementuak jartzen amaitzen dugunean jarriko dugu zerrenda bien arteko konbi nazioa itxiz eta beste elementu asko gehitze o aukera izango dugula honen ostean. Honi buruz, klaseko a riketetan adibide garbi bat daukagu hau lortu n hi dugula: 1. Listas a. Listas desordenadas. Etiqueta ul b. Listas ordenadas. Etiqueta ol c. Listas de definición. Etiqueta dl 2. Tablas Ariketa hau burutzek o, behar dugu lehenbizi
motatako zerrend bat zabaldu nun
elementu bat jartzen d gu "Listas" izenarekin. Honen ostean,
m otatako zerrenda zabalduko dugu type="a" (al abetoko karaktereak erakusteko) no hiru
ukiko ditugu hiru elementu direla. Hauek jarri ostean < /ul> bidez itxiko dut ordenik gabeko zerrena ori eta momentu hontan
zerrendan gau e non gehitu nahi ditugun elementuak
b idez egingo dugu amaitutzat eman arte
e tiketarekin. Honako egitura izango du HT ML egituran eta artean EZ AH ZTU!!!:

20


Interneteko nabigatz ilean hartuko duen itxura honako hau da:

21

ANARTZ MUGIKA


ANARTZ MUGIKA

7.- Taulak ( arrantzitsuak dira : Taula bat antolatutako zelda multzoari deitzen diogu non edozein era tako edukiak ipini ahal ditzazkegu. Taula bat definitu ah l izateko HTML eta
etiketak er bili beharko ditugu. Etiketa hauen barruan, era guztitako edukia sartzeko beharrezkoak di ren etiketak sartzen joango gara taulari fo rma eta edukia emanik. Taulak ezkerretik esku ara dihoan leerroak dira eta hauetako b koitzak eta etiketak erabiliko dituelari k, lehena zabaltzeko eta azkena ixteko. Hontaz aparte, letro akoitzaren barruan zeldak aurkituko ditugu eta hauek definitu ahal izateko eta e abiliko ditugu non hauen artean gure edukia sar tuko dugu. eta etiket k balio du zelda baten barruan dagoen edukiera beltzezteko eta erdian ipintzeko. Tabla egituraren edukia honako hau izan daiteke adibidez:

Emaitza honako hau a:

22


ANARTZ MUGIKA

"table" etiketari 'bor er="1"' jartzen badiogu itxura hobeagoa hartuk du eta aldiberean taula bezala hobe o identifikatu ahal degu

Zelda 1, lerro 1 Zelda 2, lerro 1


Emaitza honakoa da:

Taulen propietate arrantzitsuenak (table etiketan jarri o ditugu) Horizontalki alineazioa egiteko. "left", "right" eta "center" prop ietateak daude Taulari backgr und bat jartzeko aukera ematen digu irudi bate loturaren bidez Taula bere osotasunean kolore batez margotzeko propietat ea. Hexadecimal bgcolor edo kolore ize ez finkatu ahal dugu honen kolorea. Propietate ha taulari ertzak ipintzeko da. Ez badugu ezer j rtzen "0" bezala border eukiko du por aera eta ez da ertzik agertuko. "1"etik aurrera hasiko da itxura hartzen. width Taularen zabalera emateko pixeletan edo portzentaian (%) height Taularen altuera emateko pixeletan edo portzentaian (%) Propietate ho ek zelda bat eskumaruntz hedatzen da zuta beak hartuz guk colspan finkatzen diog n baloreekin. Propietate ho ek zelda bat beherantz beherantz hedatzen da lerroak hartuz guk finkatzen rowspan diogun balore kin. bordercolor Ertzaren kolor a finkatzeko propietatea dakagu bordercolor. b color-en bezala align background

23


ANARTZ MUGIKA

Teoria trebatzeko a iketak taulei buruz: 1.Ariketa

Gainetik aztertuz...ikusi ahal da printzipioz 6 lerro eta 4 zutabeko taula del border = "1"-ekin. Hala ere, goiko lerroa oso osor ik hartuta da titulo batekin non etik tak erabiltzen ditu haueri colspan="4" propietatea atxikitzen zaielarik. Bigarren eta hirugarre lerroak normal daude zutabe guztiak mantenduz bere propietateak. Hauek eta etiketeten artean jarriz lortuko dugu, lau zutabe dugunez lau etiketaz osatuko dugu. Laugarren lerroan berriz, 3 zutabean dago elementu bat "0" duen edukiarekin colspan = "2" eta rowspan ="2"-ko propietateak dutenak. Lerro hontan ez da jarri behar ezer ge io zer colspan="2" propietateak zutabe guztiak bultzatu ditu eta geratzen zen hutsune bakarra hartu du. Bostgarren lerroan, bi td> eta jarri beharko ditugu zer "0" balioko zel da 3 eta 4 zutabeak betetzen ditu. Azken lerroan, 3 jarriko ditugu azken td-a colspan="2" propie atea erabiliz.

Kodea taula hori erai itzeko honako hau da:

24

[MARKATZAILE LENGOAIAK – HTML ETA CSS APUNTEAK ] 2.Ariketa

Euskal Herri Frantzia

ANARTZ MUGIKA

Euskadi Nafarroa Iparralde París

Ariketa hau, printzipi z, 2 zutabe eta 4 lerroz osaturik dagoela esan g nezakegu. Lehen lerroan, bi eti etak jarriko ditugu nun lehen etiketan rowspan "3" balioa finkatuko diogu bere lerroa e ta beste bi hartu ahal izateko. Honen eraginez, hurr engo bi lerrotan bakarrik jarriko ugu eta bakoitzeko ze lehen ler oan egiten duen rowspan-ak, bere posizioak ha tzen ditu eta bakarrik zelda batekin bete a al dugu. Azken lerroa, bi etiketaz osatuko dut zer ez daka inola o gauza berezirik. Lortuko dugun HT L kodea taula hori egiteko honako hau da:

Nabigatzailean, horrelan interpretatuko da:

25


ANARTZ MUGIKA

3.Ariketa

Liga BBVA Athletic 20 Erreala 18 Barça 20

Ariketa oso oso errez a da, hasteko taula bat sortuko dugu



eta
textua e a eta eta
eta
eta
etiketak ezarriz non honen barruan 4 tr> sartuko ditut lau lerro egongo direlako. Lehen lerroan elementu bat egongo da colspan="2" porpiet atea duelarik eta beste elementutan bi elementu. HTML dokumentuan egitura hau izango du kodeak (beti ere gog ratu eta tartean dela):

Nabigatzailean, horrelan interpretatuko da:

26


ANARTZ MUGIKA

8.- iframe-ak (garrantzia oso g txi): iframe-n propietate garrantzitsuenak (iframe etiketan jarriko ditugu) frame flotatz ilearen barruan erakutsiko den orriaren helbide a. Iframe-aren identifikatzailea da non javascript-etik deit behar badugu id baliagarri izango da balore hau finkatzea. Ertza nahi ba ugu definitu gure frame-an. Ez badugu ezer ja rtzen edo ="0" ez frameborder da egongo er zik baina ="1" jartzen badugu bai eukiko dugu e tz bat. width Iframe-aren z balera emateko pixeletan edo portzentaian (%) height Iframe-aren a ltuera emateko pixeletan edo portzentaian (%) Adieraziko d ea nahi dugun desplazamenduko barrak ipin zea edo ez. Hiru atributu dazk gu "yes", "no" eta "auto". yes: scroll edo desplazamendu barrak BETI erakustek atributua da. scrolling no: s roll edo desplazamendu barrak INOIZ erakustek atributua da. auto: erakusteko beharrezkoak direnean (toki faltaga tik dena ikusi ahal izateko) (Finkatuta datorren balorea da ezer ez badug u jartzen). align Alineazio fink tzeko da, "left", "rigth" eta "center" baloreak d zka. src

• • •

Kontuan hartu behar da <iframe> etiketa duen elementu BAT jarri aitekeela Mozilla Firefox-en (Chrome-n ez dak it portaera berdina edukiko duen) zer bat bain o gehiago jartzen badugu lehenaren ostean d atozenak ez dira konektatuko ondo eta alper ikakoa izango da idatzitako kodea. Internet Ex lorer nabigatzailean BAI jarri daitezke bat baino gehio. Adibide bat iframe-az :

27


ANARTZ MUGIKA

Honako emaitza emango digu, kontutan hartuta lehenengo iframe bat eta gero ordenik gabeko zerrenda bat agertuk zaigula:

28


ANARTZ MUGIKA

9.- Formularioak (garrantzitsuak): Formularioak, edozein webgunetan aurkitu ditzakegun testu-kutxa ospetsu horiek eta botoiak dira. Bilaketak egiteko zein datu pertsonalak sartzeko oso erabiliak dira merkataritza elektroniko 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 hauen artean 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 bi

era dauzkagu: o o

Formularioa posta elektroniko batera bidalia da. Formularioa programa edo script batera bere edukia prozesatzen duenera bidaltzen du.

Lehen kasua erabiliko dugu guk HTML trebatzen ari garelako eta ez beste hizkuntz konplexuagoak. Horrela adieraziko dugu: < form action="mailto: [email protected]" ...> •

•

method : Formularioa bidaltzearen forma zehaztearen ardura hartzen duen ezaugarria

da. "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!!!!):

29


ANARTZ MUGIKA

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.

TTeessttuu m moottzzaa:: 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. 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. type

•

•

•

size: testu kaxan bistan dauden karaktere kopurua definitzen du . Erabiltzaileak testu

karaktere 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 muga bat. "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

30


ANARTZ MUGIKA

TTeessttuu eezzkkuuttuuaa:: 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.

TTeessttuu lluuzzeeaakk:: 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 teléfono eta dato zehatzak jarri behar ez direnean, hau da, edozein iritzi edo komentario egiteko aproposak dira. <textarea> 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: •<br /> <br /> rows: eremuan egongo diren lerro kopurua definitzen du.<br /> <br /> •<br /> <br /> cols: eremuan egongo diren zutabe kopurua definitzen du.<br /> <br /> Atributu hauek kontuan hartuta, honela irudikatu beharko genukeen: <textarea name=”iradokizunak” rows=”10” cols=“40”><textarea><br /> <br /> 31<br /> <br /> [MARKATZAILE LENGOAIAK – HTML ETA CSS APUNTEAK ]<br /> <br /> ANARTZ MUGIKA<br /> <br /> Emaitza honako hau izango da:<br /> <br /> Hontaz aparte, erem aren testu predefinituta egiteko aukera dakagu . Hortarako, ez dugu “value” atributua erabiliko non emaitz hau lortzeko etiketaren barruan idatziko dugu <textarea> eta a tean. Escribe tu comenta io….

Emaitza honako hau izango da:

Formularioen beste elementuak: Testu eremuak oso rabilgarriak izan arren, askotan nahi dugun inf rmazioa ez dugu aostzen nabigatzaileengatik. Horregatik testu eremuez aparte beste ele entuez osaturik dauden formularioak aurki ditzazkegu nahi dugun informazio zehatz bat jaso hal izateko. Adibidez, herrialde e o kreditu txartel desberdinen zerrenda jartzek guk aukeratzeko idatzi beharrean.

32


ANARTZ MUGIKA

A Auukkeerraazzkkoo zzeerrrreenndd kk:: Aukerazko zerrendak dira bat (edo hainbat) aukera baimentzen diguten goitibeherako menuetako (menus despleg bles) formulazio elementua. Hauek eraikitzek zatian size eta multiple gehituz hor.

33


ANARTZ MUGIKA

HTML dokumentuan aurrekoa idatzita, honako emaitza hau agertuko zaigu:

value="1">Primavera

Honela, erabiltzailea "Primavera" aukeratzen badu, programara (edo postara) iritsiko dena da "estacion" izeneko aldagai bati "1" balio "Primavera" balioa izan zean, komentatu den bezala aurretik horrela anipulatzeko errezagoa izango da eta. Jasoko enukeena postan hau izango zen: estacion=1 Aukeretan talde moduan talde atzeko idatzi

EErrrraaddiioozzkkoo bboottooiiaakk:: Aukera, kasu honetan, erabiltzaileak aukera bat ezartzera derrigortuta dagoen beste alternatiba bat da. Erabiliko dugun etik ta kasu hontan motatakoa da ez dau ala itxierarik non type atributua "radio" propi tatea ezarri behar zaio. Adibide bat, honakoa da :

Ikusten denez, bat bestean artean
etiketa erabiltzen d ugu lerro-jauziak burutzeko. etiketa arruan type="radio" name="estacion" value "1" propietateak ezartzen dizkiogu eta input i tean erakutsi nahiko dugun izena, lehen kasua "Primavera dela. Besteak egiteko berdina bain a value-n zenbaki bat gehitzen jungo gara desb rdintzeko. Izango duen itxura nabigatzailean:

35


ANARTZ MUGIKA

Ikus daitekeenez au kera bakoitzari "input" etiketa barruan "value" desberdin bat ematen zaio "name" bereko aukera guztietan. Erabiltzaileak "Otoño" aukera egiten badu, gure postan jasoko dugun testua honako hau da: estacion=3 checked atributuari esker aldez aurretik aukeretako bat aukeratuta a rkitzen da. Honel

adieraziko da, kontutan hart lehengo egitura eta gehituz checked:

Nabigatzailean honako emaitza emango digu:

36


ANARTZ MUGIKA

BBaalliiddaazziioo kkaaxxaakk:: Formularioko eleme tu mota honetan erabiltzaileak aktibatu/desa ktibatu ahal ditu aukera kontuko kutxaren gai ean klik bat eginik bakarrik. Erabilitako sintaxioa oso antzekoa da aurrekoekin alderatuz. barruan type sailean "checkbox" propietatea jarri beharko dugu. Honako egitura izango du HTML non name atributua bakarra iza go da elementu bakarrerako ikusten den bez la adibidean:

Honek HTML doku entu batean nabigatzailean interpretatzen badugu, honako emaitza irtengo zaigu:

Aipatu dugun bezala kasu hontan ematen den desberdintasun nab rmena da "type" atributuan "checkbox" propi tatea jartzea. Gure postara helduk den informazioa formularioko elementu hone balidazio kaxena aktibatuta edo ez aktibatuta egon. Kasu hontan hirurak desaktibatuta daude eta emango duen informazioa izango da (aktibatuta on eta desaktibatuta off): • • •

paella=off patatas=off fritos=off

Informazioa aldez au retik finkatu nahi badugu aktibatuta, hauei che ked="on" jartzea dagokie. Nahi ditugunak jarri ahal ditugu. Kasu hontan "Me gusta la paella" e ta "Me gustan las patatas" aukerei jarriko diet, HTML dokumentuan egitura hau geratzen delari k:

Nabigatzailean HTML kode hau horrelan interpretatuko du:

37


ANARTZ MUGIKA

Bidalketa, ezabatze eta abar HTML formulariotan:

BBiiddaallkkeettaa bboottooiiaa:: Formularioan betetz ko zeuden eremu guztiak bete ondoren, hau kudeatzen duen sistemara bidali ahal izateko informazioa bidalketa botoi bat sortu behar dug u eta horretarako etiketa ezaguturik a urretik erraza izango da. Botoi mota idazteko gin behar dugun bakarra hau da:

Hau idatzirik HTML hi zkuntzan, nabigatzailean honela interpretatua iz ango da:

EEzzaabbaattzzee bboottooiiaa:: Botoi honi esker, era iltzaileak aukera du formularioan sartu diren d tu edo egin diren aukerak aldez aurretik finkat uta zeuden bezala uzteko. Hortarako, lehen be ala idatziko dugu kodea zabalduz eta type-n "reset" jarriko dugu. Honako eran erak tsiko dugu HTML hizkuntzan:

Hau idatzirik HTML hizkuntzan, nabigatzailean honela interpretatua izango da:

Fieldset eta legend etiketak formulariotan: “fieldset” etiketa oso erabilia da formulariotan non bere erabilpen nagusia da beren

artean erlazionatuta dauden eremuak taldekatzeko gaitasuna du. Fieldset
etiketare in hasiko da eta bere itxiera (
). Zabaltze eta itxi ahal izateko etiketak derrigorrezkoak dira. Fieldset etiketari esker lortzen d ugun efektoa da laukizuzen batena non bere e dukia barruan taldekatzen du. Hay una cosa importante qu debemos tener en cuenta del fieldset: Éste se ensanchará todo lo que pueda en la página. E decir, su ancho por naturaleza será del 100%. i queremos darle

38


ANARTZ MUGIKA

una anchura predeterminada o limitar su expansión lo que deberemos hacer incluir la etiqueta dentro de una tabla a la que sí le indicaremos la anchura a nchura que queremos darle.

A continuación vamos a ofrecerte un fieldset básico, sin limitación ninguna:
Esto es un fieldset básico
Y aquí puedes apreciar como quedará en nuestra página: Esto es un fieldset básico Y a continuación te mostramos el código de un fieldset incluido dentro de una tabla, con una 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 nos permite titular o etiquetar el conjunto de campos que están incluidos dentro de legend. Por ejemplo, si el conjunto de datos son los datos personales de la persona, en legend escribiremos “Datos personales”. personales”. Legend se abre con la etiqueta eti queta y se cierra con . Por supuesto, estas dos etiquetas deben estar dentro de la etiqueta
. Podemos alinear el título del legend como queramos, mediante el parámetro “align”. En la siguiente muestra veremos un fieldset con su etiqueta alineada al centro:

39


ANARTZ MUGIKA

legend alineado al centro centro Este 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 al centro

40


ANARTZ MUGIKA

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 HITZ-ITURRIAK - FONT color

valor RGB o nombre de color

color: #009900; color: red;

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

font-size

xx-small | x-small | small | medium | large | font-size:12pt; x-large | xx-large font-size: x-large; Unidades de CSS

Hitz-iturrien tamaina zehazteko atributua da.

font-family

serif | sans-serif | cursive | fantasy | monospace Todas las fuentes habituales

font-family:arial,helvetica; font-family: fantasy;

Atributu honekin testu tipografiaren tipografiaren familia zehaztuko dugu. Lehen baloreak orokorrak dira, hau da, nabigatzaileak ulertu eta interpretatzen ditu hauek erabiltzaileak dituen hitz-iturriak kontutan hartuz. Tipografia oinarrizkoak oinarrizkoak ere definitu daitezke HTML-en gertatzen zen bezala. Hitz-iturri baten izena hutsuneak baditu komillak erabiliko dira ondo ulertu ahal izateko.

font-weight

normal | bold | bolder | lighter | 100 | 200 | font-weight:bold; 300 | 400 | 500 | 600 | 700 | 800 | 900 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 | oblique

font-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 unitateak

line-height: 12px; line-height: normal;

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

text-decoration

none | [ underline || overline || line-through text-decoration: text-decoration: none; ] text-decoration: text-decoration: underline;

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

41

[MARKATZAILE LENGOAIAK – HTML ETA CSS APUNTEAK ] text-align

left | right | center | justify

ANARTZ MUGIKA

text-align: right; text-align: center;

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

text-indent

text-indent: 10px; text-indent: 2in;

Unidades CSS

Orrialdetan marginak egiteko atributua. Oso erabilgarria. erabilgarria.

text-transform

capitalize | uppercase | lowercase | none

text-transform: none; text-transform: capitalize;

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

FONDOAK - BACKGROUND Backgroundcolor

Un color, con su nombre o su valor RGB

background-color: background-color: green; background-color: background-color: #000055;

Orrialdearen elementu baten atzekalde-kolorea atzekalde-kolorea aldatzeko.

Backgroundimage

El nombre de la imagen con su camino relativo o absoluto

background-image: background-image: url(mármol.gif) url(mármol.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 adierazten dugu.

Margin-top

CSS Unitateak

margin-top: 0px; margin-top: 10px;

Atributu honekin gainean dagoen margena adierazten dugu.

Margin-bottom

CSS Unitateak

margin-bottom: margin-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.

42

[MARKATZAILE LENGOAIAK – HTML ETA CSS APUNTEAK ] Padding-right

CSS Unitateak

ANARTZ MUGIKA

padding-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 Unitateak

padding-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 Unitateak

padding-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 kolorea edo colore izena.

border-color: red; border-color: #ffccff;

Orriko elementuaren e rtzaren kolorea emateko atributua da. border-top-color, border-top-color, border-right-color, border-bottomborder-bottomcolor eta border-left-color atributuekin banatuta jarri daitezke kolore desberdinak ertza bakoitzari kolore desberdin bat eman ahal zaielarik.

Border-style

none | 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, solid=solido, double=ertz bikoitza, eta groove –tik outset-ra 3D itxurako efektuak ditutztela.

border-width

CSS Unitateak

border-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 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 ezkerrera edo eskumara, clear atributuari esker egiten dugu adierazitako adierazitako tokian eskumara edo ezkerrera.

43


ANARTZ MUGIKA

11.- Hexadezimal kolore ohikoak

Hemen: http://www.w3schools.com/tags/ref_colorpicker.asp hautatu ahal ditugu koloreak kodeak lortu ahal izateko.

44


ANARTZ MUGIKA

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 kolore debserdinak. Era desberdinetako loturak definitu beharko ditugu estilo desberdinak eman ahal izateko (ikusitakoak, aktibatuta daudenak,…). CSS motako fitxategian era honetan definitu beharko ditugu loturak: •

Lotura normalak

A:link {atributuak} •

Ikusitako loturak

A: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 kolorea emateko color:gure kolorea (hexadezimalez edo izena jarriz).

45


ANARTZ MUGIKA

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


ANARTZ MUGIKA

CSS trikimailu aurreratuak (11.orr) Klaseen erabilpenaren bidez estiloak ematen: Klaseen helburu nagusia da estilo definizio bat egitea non nahi adina alditan erabili ahal ditugu gure webguneetan. w ebguneetan. Klase bat

Zelda 1, lerro 1	Zelda 2, lerro 1
Zelda 1, lerro 2	Zelda 2, lerro 2

1.Ebaluaketa - Markatzaile Lengoaiak CSS + HTML

Recommend Documents

etike tak: Hiru etiketak deskri atzen dute dokumentuaren egitura orokorra eta hari buruzko informazio sinplea ematen dute. Etiketa horiek ez dute eraginik dokument aren itxuran, eta soilik HTML fitxategiak inter retatzen eta iragazten dituzte. Honelako funtz ionamendua dute hauetariko bakoitzak: o

Izenburuak

Izenburuak

Izenburua

.....

.....

.....

izango da lodiena eta handiena,

- berriz txikiena.

-tik tik

Nire lehen orria

etike tak:

Hiru etiketak deskri atzen dute dokumentuaren egitura orokorra eta hari buruzko informazio sinplea ematen dute. Etiketa horiek ez dute eraginik dokument aren itxuran, eta soilik HTML fitxategiak inter retatzen eta iragazten dituzte. Honelako funtz ionamendua dute hauetariko bakoitzak: o