HTML

WEB APLIKAZIOAK
132KB
 Sarrera: webguneak
¿Zer da webgune bat?

• Hierarkikoki antolatutako web orri bilduma bat da.

• Web orri bakoitzak testuak, grafikoak, fitxategiak…izaten ditu web nabigatzaile batekin ikus daitezkeenak.
• Webgune bakoitzak hasiera orri bat dauka: index.html → Orri printzipala da, webgunearen domeinua
atzitzen dugunean ikusten dugun lehen orria da.

Adibidea
▪ index.html → webguneko orri printzipala
▪ kontaktua.html → kontaktuaren informazioa edota harremanetan jartzeko formularioa erakutsiko du
▪ info1.html → informazio zehatza azalduko du
▪ info2.html → informazio zehatza azalduko du
▪ login.html → atal pribatura sartzeko formularioa azalduko du (beste web-orri batera birbideratuko du erabiltzailea)
 Webguneak
Webgune baten organizazioa

• Web-orriak karpetetan edo erro direktorioan (raíz) gorde daitezke. Webgune motaren eta
kudeaketa motaren arabera izango da: kategoriak, azpiguneak…

➢ Erro direktorioan gordetzen badira → domeinua/orria.html

➢ Karpeta batean gordetzen badira, web-orriak bisitatu ahal izango ditugu domeinua eta
hau gordeta dagoen karpeta eta gainetik dituen azpikarpetak adieraziz:
domeinua/karpeta/azpikarpeta/orria.html
➢ Gordetako dokumentuekin gauza bera gertatzen da.

Helbide absolutua: dokumentu batera edo web-orri batera iristeko beharrezkoa den informazio
guztia ematen du → http://www.domeinua.com/karpeta/orria.html

Helbide erlatiboa: web-orri batetik helbide edo direktorio berberean dagoen beste orri edo
dokumentu bat estekatu edo lotu nahi bada, ez da beharrezkoa helbide absolutua adieraztea.
Webguneak
Galderak

• ¿Zer da web-orri estatikoa? ¿Eta web-orri dinamikoa? Bila ezazu mota bakoitzeko adibide bat.

• Web-orri baten luzapena .html edo .htm da orokorrean. Bila ezazu beste luzapen batzuk eta zein
motatako web-orriak dituzten luzapen horiek.

• ¿Zein da HTML bertsio berriena?

• ¿Zein da HTML-ren elementu nagusienetako bat?

Webguneak
Web estatikoa eta dinamikoa

• Web-orri estatikoa: eguneratzen ez diren web-orriak dira. Sortu zirenean sartutako informazioa aurkeztuko
dute soilik. Aldaketak egiteko Iturburu-kodea “ukitu” behar da.

• Web-orri dinamikoa: erabiltzailearen interakzioaren bidez sortutako web-orriak dira. Etengabe eguneratzen
dira eta informazioa denbora errealean aurkezten da. Adibideak: blog, merkataritza elektronikoa…

Luzapenak
• html, y htm: web-orri estatikoak duten fitxategi-luzapen estandarra (HTML kodea dutenak).
• asp (Active server pages): bisitatzen diren momentu berean sortzen web-orri dinamikoak dira. Visual Basic-en
antzeko programazio lengoaiarekin sortzen dira.
• jsp (Java server pages): aurrekoak bezalako web-orriak dira, baina Java programazio lengoaiarekin sortuta.
• php (Personal Home Page): PHP programazio lengoaiarekin idatzita dauden web-orri dinamikoak. HTML
kodea daukate ere bai.
 Webguneak
Web motak

Web 1.0

• Hasierako web-orriak. Erabiltzaileen interakziorik gabeko web orri estatikoak.

• Web-orri hauek “eskuz” idatzita daude, HTML kodea erabiliz. Denbora asko behar da hauek sortzeko eta
editatzeko
• Ez dute datu-baserik erabiltzen ezta erabiltzaile zehatzik ere.
 Webguneak
Web motak

Web 2.0
• Datu-baseak erabiltzen dituzte: erabiltzaileak erregistratzeko aukera,
erabiltzaileen interakzioa …
• Sare sozialak
• Erabiltzaileek dokumentuak gorde eta partekatu ditzakete era erraz
batean.
• Web aplikazio kolaboratiboak
• Erabiltzaileek bere espazio pertsonala sortzeko aukera dute, argazkiak,
bideoak, bideoak, artikuluak etab. publikatzeko.
• Adibideak: sare sozialak (Facebook, Instagram…), foruak, bideoak
partekatzeko webguneak (Youtube, Vimeo…), blog-ak, bulegotika
aplikazioak odeian (Google Docs, Office 365…), …
 Webguneak
Tipos de webs

Web 3.0

• Datu-base antolatu handi bat bezalako webgunea

• Dispositibo ezberdinetatik ikus daitekeen webgunea: smartphone,
tablet, telebista…
• Adimen artifiziala (machine learning) erabiltzen da erabiltzaileekin
interakzioa errazteko eta eduki pertsonalizatua erakusteko.
• 3D ingurunea: espazio tridimentsionalak aurkezten dituzten
webguneak erabiltzaileen interakzioa dinamikoagoa izateko.
HTML
¿Zer da HTML?

• HTML (HyperText Markup Language) web-orriak sortzeko eta maketatzeko erabiltzen den markaketa-
lengoaia da.

• Web-nabigatzaileek (Chrome, Firefox…) HTML dokumentuak interpretatzen dituzte.

• HTML dokumentuek erabiltzailearentzat aurkeztu nahi den informazioa zein den komunikatzen diete
nabigatzaileei.

• Ez da programazio lengoai bat → markaketa-lengoaia da. Hala ere, HTML dokumentu batean
programazio lengoaiak erabil daitezke operazioren bat exekutatzeko edo portaera bat gehitzeko.

• Web-orrien fitxategien luzapena (orokorrean): .html edo .htm

HTML
HTML-ren eboluzioa

1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2009 HTML 5
2014 CSS 3
HTML: Sarrera
Etiketa

• HTML-n erabiltzen den elementu nagusia da.

• Orokorrean, elementuak bi etiketen bidez markatzen dira: hasierako etiketa eta bukaerako etiketa

• Oharra: badaude bukaerako etiketarik ez dutenak.

• Etiketak beste etiketa batzuen barruan sar daitezke, baina ordena mantendu behar da.

<etiketa> Testua </etiketa>

Hasierako edo Edukia Bukaerako edo

irekiera-etiketa itxiera-etiketa
 HTML dokumentuen egitura

<!DOCTYPE html>
HTML dokumentu baten etiketa printzipalak hurrengoak dira:
<html lang="es">
• html <html>
• head <head><meta charset="UTF-8">
• title <title> Orriaren titulua </title>
• body </head>
<body>
(Orriaren gorputza)
</body>
</html>

Ariketa: nabigatzaile bat erabiliz web-orri bat ireki eta aztertu bere Iturburu kodea. Bila itzazu aipatutako etiketa
printzipalak.
 HTML dokumentu baten oinarrizko egitura
<!DOCTYPE html> <!DOCTYPE html> → Dokumentua HTML motakoa dela adierazteko
<html lang="es"> <html lang=“es”> → edukiaren hizkuntza adierazteko
<html>
<head>
Orriaren goiburua. Nabigatzaileek zuzenean erakusten ez duten
<meta charset="UTF-8"> informazioa azaltzen da: web-orriaren izenburua edo titulua
<title>Orriaren titulua</title> (title), metadatuak (charset), estiloak (style), beste dokumentuen
</head> arteko erlazioa (link)…
<body> Orriaren gorputza. Ikusten den atala da eta nabigatzailean ikusten
(Orriaren gorputza) diren elementuak sartzen dira hemen. Gorputz bakarra egon
</body> daiteke web-orri batean.
</html> Dokumentuaren etiketa nagusia. Gainerako elementuek <html>
eta </html> etiketen artean sartuta egon behar dute.
HTML dokumentu baten egitura
HTML vs HTML5

HTML5
GOIBURUA
Metadatuen adibideak:

<meta charset="UTF-8">
<meta name="description" content=“Web aplikazioak - SMR">

<meta name="keywords" content="HTML, CSS, PHP">

<meta name="author" content=“Eren Jaeger">

<meta http-equiv="refresh" content="60">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ARIKETAK
Apunteetako ariketak gordetzeko karpeta bat sortu. Ariketak burutzeko “Bloc de notas” erabiliko dugu.

1- Sor ezazu lehenengo web-orria hurrengo kodean oinarrituz:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Nire lehenengo web-orria</title>
</head>
<body>
Nire lehenengo web-orriaren gorputza hau da
</body>
</html>

➢ Dokumentua aurretik sortu duzun karpetan gorde hurrengo izenarekin: ariketa1.html

➢ Sortu duzun fitxategia ireki: klik bikoitza egin ondoren nabigatzailea irekiko da emaitza erakutsiz.
HTML ARAUAK

• Etiketen izenak maiuskulaz eta minuskulaz idatz daitezke: <html> = <HtmL> = <HTML>

• Atributuen izenak maiuskulaz eta minuskulaz idatz daitezke: <h1 align=“CENTER”> = <H1 align=“center”>

• Baina kontuz, atributuek dituzten balioetan maiuskulak eta minuskulak bereizten dira (fitxategien izenak, adibidez)

• Etiketen izenek ezin dituzte hutsunerik izan: <img> ≠ <i m g>

• Atributuen balioak hutsuneak izan ditzakete komatxoen artean idazten badira.

• Etiketak itxi behar dira, orokorrean (kontuz, ez guztiak).

• Etiketak beste etiketen barruan idatz daitezke.

 GOIBURUA (<head>)
Goiburuaren etiketaren barruan, <head>, titulua edo izenburua, metadatuak eta beste dokumentuekin
loturak edo estekak ezartzen ditugu (CSS edo estilo-orriak, fitxategiak, Javascript kodea…):

Etiketa Atributuak Esanahia

<title> ... </title> Orriaren titulua ezartzen du (leihoaren goiko barran)
<style> … </style> Etiketa hauen artean CSS estiloak idazten dira. Estilo horiek
soilik dokumentu horretarako balio dute.
<link> href, rel, media, type Beste dokumentu batekin erlazioa ezartzen du.
<meta> name, content, http-equiv, charset HTML dokumentuan metadatu zehatz bat ezartzen du.
<script> … </script> Etiketa hauen artean dokumentu berberean exekuta
daitekeen kodea sartzen da.
<base> href, target Helbide erlatiboentzat dokumentuaren oinarrizko URL-a
ezartzen du.
TESTUA FORMATEATZEKO ETIKETAK
Tituluen etiketa: tituluak edo azpitituluak idazteko etiketak dira. <h1> handiena da eta <h6> txikiena.

Etiketa Emaitza

<h1> Testua </h1> Testua

<h2> Testua </h2> Testua
… …

Paragrafoaren etiketa: Paragrafo bat mugatzeko balio du. Testu baten gainean eta behean hutsune edo lerro
huts bat uzten du.

<p> Testua </p>

2. Ariketa
ARIKETAK
2- “Bloc de notas” erabiliz, web-orri berri bat sor ezazu, hurrengo izenarekin: ariketa2.html

➢ Goiburuaren barruan hurrengo titulua sar ezazu (<head></head>): Ariketa 2

➢ Gorputzaren barruan (<body></body>): paragrafoen (p) eta tituluen (h1, h2, …) etiketak erabil itzazu
nabigatzailean hurrengoa ikusteko:
 TESTUA FORMATEATZEKO ETIKETAK
Testu-etiketak: testuari formatua emateko balio duten etiketak dira. Etiketa bat baino gehiago erabil
daitezke aldi berean, baina ordenean ireki eta itxi behar dira.

Testu etiketak Erabilera

<b>Testua</b> Testua letra lodiz . Beste etiketa: <strong></strong>
<i>Testua</i> Testu etzana. Beste etiketa: <em></em>
<u>Testua</u> Testua azpimarratuta
^Testua Testua goi-indize bezala idatzi
_Testua Testua azpiindize bezala idatzi
<del>Testua</del> Testua marratu
Oharra: Gogora ezazu etiketa bat beste baten barruan sartzeko aukera duzula. Adibidez, paragrafo baten atal
bati formatua eman ahal diogu:
<p> Kaixo, gaur <u>HTML</u> ikasiko dugu <b>Ekaitzekin</b></p>
3. ariketa
BESTE ETIKETAK
Beste etiketak

Etiketa Erabilera HTML etiketa

Barra horizontala sartzen du. Ez dago itxiera-etiketarik
Barra horizontala <hr>
Lerro jauzi bat sartzen du. Ez dago itxiera-etiketarik
Lerro jauzia <br>
Kodea komentatzeko balio du. Nabigatzaileak komentarioak ez
Komentarioak
ditu erakusten. <!-- Komentarioa -->

4. ariketa
ATRIBUTUAK
• Atributuak elementu baten propietateak definitzeko balio dute.

• Atributuak irekiera-etiketan idazten dira.

• Atributuak hurrengo eran erabiltzen dira:

Propietatea=“Balioa” <img src="img/irudia.jpg" alt="Irudia">

1 2
Atributua

<img src="img/mandalorian.jpg" alt="Mandalorian" width="500" height="250" align="right">

1 2 3 4 5
ATRIBUTUAK

Atributuak ez dira estandarrak. Etiketa bat ez du zertan beste etiketa baten atributu berberak onartu beharrik.

Adibideak:

<hr size=“5px” color=“red”> ✓

<p color="red">Paragrafoetan ezin da atributu hau erabili.</p> X
<p align=“center”> Zentratutako testua</p> ✓
<h1 align=“center”> Zentratutako testua </h1> ✓
LISTAK EDO ZERRENDAK
Ordenatu gabeko listak:

• Balio estandarra: puntuak (disc) → <ul></ul>

• Listaren elementuak (elementu bakoitzeko) → <li>elementua</li>
<ul>
<li>SMR</li>
<li>DAM</li>
<li>DAW</li>
<li>ASIR</li>
</ul>

• Lista mota alda daiteke: square, disc, circle:

<ul type="square"> → Laukizuzen itxurako buletak
<ul type="disc"> → Disko beltz baten itxurako buletak (defektuz)
<ul type="circle"> → Zirkulu itxurako buletak (hutsak)
LISTAK EDO ZERRENDAK
Zerrenda edo lista ordenatuak (zenbakidunak):

• Balio estandarra: zenbakiak → <ol></ol>

• Listaren elementuak (elementu bakoitzeko) → <li>elementua</li>

<ol>
<li>SMR</li>
<li>DAM</li>
<li>DAW</li>
<li>ASIR</li>
</ol>
• Aunque por defecto son listas de números, se pueden cambiar de tipo:
<ol type="a"> → Letra xehea edo minuskulak
<ol type="A"> → Letra larriak edo maiuskulak
<ol type=“I"> → Zenbaki erromatarrak (I, II, III, IV…)
<ol type=“i"> → Zenbaki erromatarrak minuskulaz
<!DOCTYPE html>
<html>
<head>
<title> Listen adibidea </title>
</head>
<body>
<h2>ÍNDICE DE LISTAS</h2>
<ol type="I">
<li>Números romanos: 1</li>
<li>Números romanos: 2</li>
<ol type="A">
<li>Letras mayúsculas: A</li>
<li>Letras mayúsculas: B</li>
<ol>
<li>Numerada : 1.</li>
<li>Numerada : 2.</li>
</ol>
<li>Letras mayúsculas: C</li>
</ol>
<li>Números romanos: 3</li>
</ol>
</body>
</html>
5. ariketa
LISTAK EDO ZERRENDAK
Definizio listak

• Etiketa printzipala → <dl></dl>

• Definitu beharreko hitza → <dt></dt>
• Definizioa → <dd></dd>

<dl>
<dt>SMR</dt>
<dd>Sistema Microinformáticos y Redes</dd>

<dt><b>DAM</b></dt>
<dd>Desarrollo de Aplicaciones Multiplataforma</dd>
</dl>

6. ariketa
 ESTEKAK, LINK EDO HIPERESTEKAK
• Etiketa: <a></a>

• Atributua (derrigorrezkoa): href → Estekan klik egiterakoan erabiltzailea nora joango den zehazten du

Estekak mota ezberdinetakoak izan daitezke:

Barnekoa - href="#nombredelancla"
▪ Barne esteka: orri berbereko atal zehatz batera (aingura, “ancla”)
▪ Esteka lokalak: domeinu berbereko beste orrietara Lokala - href="../img/foto.jpg"
▪ Esteka globalak: webgunetik kanpo, beste domeinuetako orrietara Globala - href="http://www.webaplikazioak.com/"

<a href="http://www.webaplikazioak.com/">WA irakasgaia</a>

Oharra: domeinu berberean dauden fitxategiak sar ditzakegu esteka bezala 7. ariketa
ESTEKAK, LINK EDO HIPERESTEKAK
• target atributuak nabigatzaileari esaten dio esteka non ireki: leiho berberean ala berri batean.

_self" Orria leiho berberean irekitzen da –> DEFEKTUZ

_blank" Leiho berri batean irekitzen da
target="
_parent"
_top"

<a href="http://www.google.com/" target="_blank">Google </a>

Irekiera etiketa Testua Itxiera-etiketa

Helbidea URL Non ireki
8. ariketa
ESTEKAK, LINK EDO HIPERESTEKAK
Barne estekak edo aingurak HTML-n

• Web-orri baten atal zehatzetara joateko hiperestekak sartzeko aukera dago.

• Artikulu oso luzeak dituzten web-orrietan sartzen dira (Wikipediako artikulu batean, adibidez)

• Adibidea:

ESTEKA → <a href=“#InfoG”>Informazio gehiago</a>

ESTEKAN KLIKATUZ GERO IRITSIKO GAREN EDUKIA → <a name=“InfoG”>Informazio gehiago</a>

<p>Informazio gehiago <a href="#InfoG"> hemen </a>

...
<p><b><a name="InfoG">Informazio gehigarria</a></b></p>
IRUDIAK
• Etiketa: <img src=”x”>, non “x” irudia gordeta dagoen helbidea azaltzen duen (karpeta berberean,
sarean, beste domeinu batean…)

• Hautazkoa den atributu bat erabil daiteke ere bai, alt → Honen balioa testu bat izango da: irudia
azaltzen ez bada edo kurtsorea irudiaren gainean jarriz gero agertuko dena.

<img src=“irudiaren_helbidea/irudia.jpg”>

<img src=“irudiaren_helbidea/irudia.jpg” alt=“Testu alternatiboa”>

Esteka lokala(src) Deskribapena

src="image.jpg" Irudia html dokumentuaren maila berberean kokaturik dago.
src="../image.jpg" Irudia html dokumentuaren goiko mailan kokaturik dago.
src="../img/image.jpg" Irudia “img” izeneko karpetan gordeta dago, html dokumentuaren goiko mailan.
 IRUDIAK
<!DOCTYPE html>
<html>
<head>
<title> Imágenes </title>
</head>
<body>
<h2>Imágenes</h2>
<p> La siguiente imagen está alojada en un dominio diferente </p>
<img src="https://www.dominio.com/images/baby_yoda.jpg" alt="Baby Yoda>
<br>
<hr>
<br>
<p> Esta imagen se encuentra dentro de la carpeta "img" </p>
<img src="img/mandalorian.jpg" alt="Mandalorian“>

</body>
</html>

9. ariketa
 IRUDIAK
Irudiaren atributuak

• Irudiaren src (derrigorrezkoa) eta alt atributuez gain, irudiari formatua emateko beste atributu batzuk
erabil ditzakegu:

Atributua Deskribapena
width Irudiaren zabalera
height Irudiaren altuera
align Irudiaren lerrokatze horizontala (right, left, center)
valigh Irudiaren lerrokatze bertikala (top, bottom, center)
border Irudiaren inguruan ertzak (1, 2, 3…)

<img src="img/mandalorian.jpg" alt="Mandalorian" width="500" height="250“ align=“right”>

10. ariketa
 TAULAK
Taulak sortzeko erabiltzen diren etiketak hurrengoak dira:

Etiketa Esanahia
<table> … </table> Taularen hasiera eta amaiera (beste etiketak hauen barruan idazten dira)
<th> … </th> Taularen zutabeen tituluak (ez da beharrezkoa etiketa hau beti erabiltzea)
<tr> … </tr> Taularen errenkada bakoitza
<td> … </td> Errenkada baten barruan sartzen diren zutabeak. Hemen testuak, irudiak edo beste
elementuak sartzen dira.

<table border=1>
<tr><th>Primera columna</th><th>Segunda columna</th></tr>
<tr><td>Fila 1, Columna 1</td><td>Fila 1, Columna 2</td></tr>
<tr><td>Fila 2, Columna 1</td><td>Fila 2, Columna2</td></tr>
</table>
 TAULAK
• Tauletan eta bere elementuetan erabiltzen diren atributu batzuk:
Atributua
border=x
bgcolor=“kolorea”
bordercolor=“kolorea”
align=“left”|”center”|”right”
valign=“top”|”bottom”|”right”
cellpadding=“pixelak”
cellspacing=“pixelak”
height=“%zbkia”|”pxkantitatea”
width=“%zbkia”|”pxkantitatea”
Erabilera
Taularen, errenkaden edo zutabeen ertzak, x = 1, 2, 3… (ertzaren lodiera)
Taula, errenkada edo zutabearen atzeko planoaren kolorea zehazten du
Taula, errenkada edo zutabearen ertzaren kolorea zehazten du
Errenkadaren, gelaxkaren edo zutabearen goiburuaren testua lerrokatzen du
Gelaxken edukia bertikalki lerrokatzen du
Gelaxken ertzen eta bere edukiaren arteko espazioa zehazten du, pixeletan
Ertzen arteko espazioa definitzen du, pixeletan
Taula, errenkada edo zutabearen altuera zehazten du, pixeletan edo portzentaietan
Taula, errenkada edo zutabearen zabalera zehazten du, pixeletan edo portzentaietan
 TAULAK
• Gelaxken elkarketa edo konbinaziorako taularen goiburuaren (th) edo zutabeen (td) atributuak:

Atributua Erabilera
rowspan=“balioa” Balioak elkartu (edo konbinatu) nahi diren errenkada multzoa adierazten du
colspan=“balioa” Balioak elkartu (edo konbinatu) nahi diren zutabe multzoa adierazten du

<table border=1>
<tr><td>Dato 1</td><td>Dato 2</td></tr>
<tr><td colspan=2>Dato3</td></tr>
</table>

<table border=1>
<tr><td>Dato 1</td><td rowspan=2>Dato 2</td></tr>
<tr><td>Dato3</td></tr>
</table>
11. eta 12. ariketak
FORMULARIOAK
• Formularioak erabiltzaile baten informazioa eskuratzeko balio dute (email, izena, helbidea, telefonoa…)

• Harremanetan jartzeko, atal pribatu batera sartzeko (erregistroa eta identifikazioa) balio duen baliabide bat
dira, adibidez.

• Formularioen bidez sortutako informazioa fitxategi edo datu-base batean gorde daiteke.

FORMULARIOA
FORMULARIOAK
• Formularioen etiketa printzipalak: <form> … </form>
<form>
• Formulario barruko sarrerako eremuak: <input type =“mota”/> Testua:<input type="text"/>
</form>

• Sarrerako eremuak: <input>, <textarea>, <option>, <select> …

• “type” atributuaren motak: text, password, checkbox, radio, submit, …

<form>
NOMBRE: <input type=“text"/><br><br>
FECHA DE NACIMIENTO: <input type="date"/> <br><br>
EMAIL: <input type="email"/> <br><br>
MES :<input type="month"/> <br><br>
NÚMERO: <input type="number"/>
</form>
 FORMULARIOAK
<form> etiketan erabil daitezkeen atributuak:

Atributua Erabilera
action=“akzioa edo ekintza” Formularioarekin burutuko den akzioa edo ekintza. Atributua jartzen ez bada,
formularioak ez du ezer egingo eta datuak ez dira inora bidaliko.
method=“post” edo “get” Formularioaren datuak bidaltzeko era. Balio erabiliena post da

<form action=“programaren_izena.php” method=“post”> … </form>

<form action=" " method=“post”> … </form>

 FORMULARIOS
• Formularioen elementu batzuk:

Sarrerako elementuak Erabilerak

<input type=“mota”> Establece un elemento de entrada de un tipo. En la siguiente diapositiva hay varios tipos.
<button> Formularioaren botoia
<textarea> Lerro anitzeko testu eremua
<select> Elemento de control que permite elegir un elemento entre un conjunto de opciones <option>
<option> <select> elementuaren aukera bat errepresentatzen du
<legend> Formularioaren goiburua zehazten duen atributua da
<label>…</label> Testu etiketa bat sartzeko balio du. Etiketa honen datuak ez dira prozesatzen
<fieldset>…</fieldset> Formularioaren atal bat multzokatzen du (formularioaren atal ezberdinak bereizteko)

Atributu garrantzitsua: name=“izena” → formularioaren kontrola izendatzeko balio du, sartzen diren datuak ongi
prozesatzeko. Gomendagarria da beti erabiltzea.
FORMULARIOAK
Formularioetan gehien erabiltzen diren input-ak:

• <input type="button"> • <input type="number">

• <input type="checkbox"> • <input type="password">
• <input type="color"> • <input type="radio">
• <input type="date"> • <input type="range">
• <input type="email"> • <input type="search">
• <input type="file"> • <input type="submit">
• <input type="image"> • <input type="tel">
• <input type="month"> • <input type="text">
• <input type="url"> • <input type="time">
• <input type="week"> • <input type="reset">
 FORMULARIOAK
Formularioaren eremuetan erabil daitezkeen atributu batzuk:

Atributua Deskribapena

placeholder=“testua” Eremuan defektuz agertuko den testua zehazten du

required=“true”|”false” Derrigorrezko eremua den ala ez zehazten du

minlength=“zenbakia” Sarrerako eremu batean sartu behar den karaktere kopuru minimoa zehazten du

maxlength=“zenbakia” Sarrerako eremu batean sartu behar den karaktere kopuru maximoa zehazten du

disabled=“true”|”false” Eremua desgaitua (deshabilitado) dagoen ala ez zehazten du. Defektuz ez dago.

pattern=“patroia” Sarrerako baldintzak (patroiak) zehazten ditu: [abc], {1, 5}, …

autocomplete=“true”|”false” “Autocomplete” aukera (web-nabigatzaileen berbera)

Testu-kutxaren eremuaren zabalera zehazten du. (input type =“text”). Defektuz, 20

size=“zenbakia”
karaktere dira
FORMULARIOAK

formulario_adibidea1.html
FORMULARIOAK
<select> eta <option>

<h2>Form con Select</h2>

<h3>Selecciona uno de los siguientes valores:</h3>
<form action="">
<select name="milista">
<option value="uno"> Uno </option>
<option value="dos“ selected> Dos </option>
<option value="tres"> Tres </option>
<option value="cuatro"> Cuatro </option>
</select>
</form>
FORMULARIOAK
<input type=“checkbox” name = “izena”>

<h2>Checkbox</h2>
<form>
<p><input type="checkbox" name="opa">Opción A</p>
<p><input type="checkbox" name="opb">Opción B</p>
</form>

Oharra: Bat baino gehiago aukera daiteke, guztiak edo bat ere ez.
FORMULARIOAK
<input type=“radio” name=“izena” value=“balioa”>

<h2>Radio button</h2>
<h3>Tipo de música</h3>
<form>
<input type="radio" name="musica" value="jazz">Jazz
<input type="radio" name="musica" value="rock">Rock
<input type="radio" name="musica" value="metal">Metal
<input type="radio" name="musica" value="pop">Pop
</form>

Oharra: Bakarrik bakar bat aukera daiteke (edo bat ere ez)
 FORMULARIOAK
<input type=“submit” name=“izena” value=“balioa”> Formularioaren datuak bidaltzen ditu (<form action=“….”>)

<input type=“reset” name=“izena” value=“balioa”> Formularioaren datuak ezabatzen ditu.

<h2>Botones</h2>
<h3>Botón de envío y de borrado</h3>
<form>
<input type="submit" name="enviar" value="Botón de enviar">
<input type="reset" name="borrar" value="Borrar datos">
</form>
 MULTIMEDIA: AUDIO
AUDIO
Etiketa Deskribapena
<audio …> … </audio> Audioa sartzeko etiketa.
Atributuak Deskribapena
controls Kontrolak erakusteko atributua: play, pause, bolumena, … DERRIGORREZKOA
autoplay Audioa automatikoki erreproduzitzen den ala ez zehazteko (nabigatzailearen arabera)
loop Audioa amaitzen denean berriz erreproduzitzeko
preload=“auto”|”metadata”|”none” Web-orria kargatzen denean audioa kargatu behar den ala ez zehazten du
muted Audioa hasieran soinurik gabe jartzeko
src=“helbidea” Audioaren helbidea zehazteko. DERRIGORREZKOA <source> azpietiketa jartzen ez bada
Azpietiketa/Atributua Deskribapena
<source … > … </source> Audioaren fitxategiaren atributuak zehazteko etiketa
src=“helbidea” Audioaren helbidea zehazteko. DERRIGORREZKOA
type=“audio/mp3”|”audio/ogg”… Audio mota zehazteko atributua (mp3, ogg, mp4…)
MULTIMEDIA: AUDIO
Adibideak:

<audio controls>
<source src=“lautada_audio.mp3">
</audio>

<audio controls loop>

<source src=“lautada_audio.mp3“ type=“audio/mp3”>
</audio>

<audio controls autoplay loop>

<source src=“lautada_audio.mp3“ type=“audio/mp3”>
</audio>
 MULTIMEDIA: BIDEOA
BIDEOA
Etiketa Deskribapena

<video …> … </video> Bideoak sartzeko etiketa.

Atributuak Deskribapena

controls Kontrolak erakusteko atributua: play, pause, bolumena, … DERRIGORREZKOA

autoplay Bideoa automatikoki erreproduzitzen den ala ez zehazteko (nabigatzailearen arabera)

height Bideoaren altuera ezartzeko

width Bideoaren zabalera ezartzeko

preload=“auto”|”metadata”|”none” Web-orria kargatzen denean bideoa kargatu behar den ala ez zehazten du

poster=“url” Bideoa kargatzen den bitartean azaltzen den irudia zehazten du.

loop Bideoa amaitzen denean berriz erreproduzitzeko

muted Bideoa hasieran soinurik gabe jartzeko

src=“helbidea” Bideoaren helbidea zehazteko. DERRIGORREZKOA <source> azpietiketa jartzen ez bada

Azpietiketa/Atributua Deskribapena
<source … > … </source> Bideoaren fitxategiaren atributuak zehazteko etiketa
src=“helbidea” Bideoaren helbidea zehazteko. DERRIGORREZKOA
type=“video/mp3”|”video/ogg”… Bideo mota zehazteko atributua (mp3, ogg, mp4…)
 MULTIMEDIA: BIDEOA
Adibideak:

<video controls>
<source src="https://media.w3.org/2010/05/sintel/trailer.mp4">
</video>

<video controls loop>

<source src=" https://media.w3.org/2010/05/sintel/trailer.mp4“ type=“video/mp4”>
</video>

<video controls height=“100” width=“250” loop>

<source src=" https://media.w3.org/2010/05/sintel/trailer.mp4“>
</video>

<video controls height=“200” width=“450” poster="https://media.w3.org/2010/05/sintel/poster.png">

<source src=" https://media.w3.org/2010/05/sintel/trailer.mp4“>
</video>

Iturria: https://media.w3.org/2010/
MULTIMEDIA
HTML5-n multimedia etiketak erabil daitezke audioa <audio> eta bideoa <video> sartzeko.

Audio/Bideo
Source: fitxategi Track: Bideoaren
motak (.mp3, .wav, informazio gehigarria
etc..)

• Etiketa printzipala <audio> edo <video> izango dira.

• Etiketa printzipalaren arabera <source> etiketa bat baino gehiago sar ditzakegu, bakoitza eskaintzen dugun
elementu berberaren formatu ezberdin baterako.
• Bideo baten deskribapena, azpitituluak edo beste informazioa sartzeko, <track> etiketak erabil ditzakegu.
• GARRANTZITSUA: multimedia fitxategien formatuek web nabigatzaileekin bateragarriak izan behar dute.
ARIKETAK ETA PRAKTIKA