HTML oinarrizko gida
Egilea: Gorka Alustiza
HTML HyperText Markup Lenguageren siglak dira (Marketan oinarritutako Hipertexto lenguaia), web orri baten zati ezberdinak definitzeko erabiltzen den marka lenguai bat, dokumentuaren atalak klasifikatzeko nabigatzaileak orria ondo ikusarazi dezan.
ETIKETAK
Etiketa bat marka unitate bat da, HTMLn definituta dauden sinbolo multzo bat esanahi jakin bat dutenak. Sintaxia honakoa da: ‘txikiago’ sinboloa (<) + hitz gakoa + ‘handiago’ sinboloa (>). Idatzi ondorengo kodigoa ‘notepad’-arekin eta gorde ‘kaixo.htm’ izenarekin zure lehen web orria sortzeko:
<HTML>
<HEAD>
<TITLE>
Adibidea
</TITLE>
</HEAD>
<BODY>
Kaixo mundua!
</BODY>
</HTML>
Ikusten denez, <HTML> etiketa jartzean HTML dokumentu bat idazten hari garela adierazten dugu, eta </HTML> etiketarekin berau amaitu dela. Behin dokumentuaren barruan, bi atal nabarmendu ditzakezkegu, burua (<HEAD>…</HEAD>) eta dokumentuaren zati nagusia, gorputza (<BODY>…</BODY>). Buruan dokumentuaren izenburua definitu dezakegu <TITLE> eta </TITLE> etiketen hartean. Dokumentuaren gorputzean web orria eraikiko dugu, bere diseinu eta atalekin.
HTMLk etiketa asko ditu definiturik, bakoitzak eginbehar jakin bat duelarik. Textu baten estiloa defini dezake (negrita <B>…</B>, kursiba <I>…</I>), elementuak dokumentuak kokatu (parrafoa definitu <P>…</P>, zentratu <CENTER>…</CENTER>), irudi bat sartu (<IMG SRC=’url’>) edo beste orri batetarako linka idatzi (<A HREF=’url’>…</A>) . Ikusi etiketen zerrenda blog honetan bertan.
GORPUTZA
<BODY> etiketaren atributuei esker dokumentu baten itxura aldatu dezakegu. Sei atributu ditu denera: BGCOLOR, BACKGROUND, TEXT, LINK, VLINK eta ALINK.
Koloreak
HTMLn kolorea definitzeko bi era daude, bata kolorearen izenarekin zuzenean (16 izen daude definiturik)eta beste RGP kodearekin, hau da, Red Green Blue (Gorria, Berdea, Urdina). Azken honek 6 digitu ditu beti: lehen biek gorri kantitatea adierazten dute, hurrengo biek berdearena eta azkenen urdinarena. Hiru kolore primario hauek nahastuta, edozein kolore lor daiteke. # sinboloa izan behar dute aurretik.
| Kolorea | RGB |
| Zuria | #FFFFFF |
| Gorria |
#FF0000 |
| Berdea | #00FF00 |
| Horia |
#FFFF00 |
| Grisa | #808080 |
Hondoko kolorea BGCOLOR atributuarekin doitzeko:
<BODY BGCOLOR=”RED”>
<BODY BGCOLOR=”#008000”>
Koloreaz gain, irudi bat ere jarri daiteke hondo gisa,BACKGROUND atributuarekin:
<BODY BACKGROUND=”irudi.gif”>
Orriko textuaren kolorea doitzeko:
<BODY TEXT=”FUCHSIA”>
<BODY TEXT=”#009090”>
Orriko linken kolorea aldatzeko:
<BODY LINK=”TEAL”>
<BODY LINK=”#FF00FF”>
Bisitatuako linken kolorea doitzeko:
<BODY VLINK=”MAROON”>
<BODY VLINK=”#800000”>
Link aktiboen (kursorea gainean jartzean) kolorea doitzeko:
<BODY ALINK=”GRAY”>
<BODY ALINK=”#080800”>
FONT elementua
FONT etiketak (<FONT>…</FONT>) bere giltzen hartean dagoen textuaren tamaina, kolorea eta itxura aldatzea ahalbidetzen du, horretarako COLOR (kolorea), SIZE (tamaina) eta FACE (textu mota, Arial, Palatino, etab…) atributuak dituelarik.
<FONT COLOR=”RED” SIZE=”2” FACE=”Arial”>Kaixo!</FONT>
TABLAK
Web orri batean informazioa erakusteko modurik txukunena eta erabiliena, tablen bidez da (<TABLE>…</TABLE>). Tabla hauetan lerro horizontalak definitzen dira <TR>…</TR> etiketekin, eta hauen barnean zelda bakoitza sortzeko <TD>…</TD> etiketa. Lerro bateko zelda kopuruak, tablak edukiko dituen zutabe kopurua definitzen du. Hona hemen oinarrizko adibide bat:
<TABLE>
<TR>
<TD>Izena: </TD>
<TD>Patxi</TD>
</TR>
<TR>
<TD>Abizena: </TD>
<TD>Telleria</TD>
</TR>
</TABLE>
<TABLE> etiketak hainbat atributo ditu, tablaren formatuan ondorengo aukerak ematen dituena:
Tablaren posizio horizontala dokumentuan ALIGN atributuarekin defini daiteke.
<TABLE ALIGN=”LEFT”>
<TABLE ALIGN=”CENTER”>
<TABLE ALIGN=”RIGHT”>
Tablaren dimentsioak WIDTH (zabalera) eta HEIGHT (altuera) propietateek espezifika daitezke. Bi era daude hau egiteko, lehio osoaren portzentai gisa adieraziz edota dimentsioa pixel kopurutan idatziz:
<TABLE WIDTH=”100”>
<TABLE HEIGHT=”50%”>
Tablaren eta zelden bordeak (defektuz agertuko ez direnak) ikusarazteko bi era ditugu, “BORDER=borde_kopurua” idatziz zenbat borde nahi ditugu adieraziz edota BORDER soilik idatziz (hau BORDER=1-en baliokidea da).
<TABLE BORDER>
<TABLE BORDER=2>
Zelden harteko espazioa (pixeletan) defini dezakegu CELLSPACING atributuarekin (defektuz 2):
<TABLE CELLSPACING=”0”>
Zeldaren bordearen eta bere barneko elementuaren (textua, irudia…) harteko distantzia definitzeko, CELLPADDING erabil daiteke:
<TABLE CELLPADDING=”0”>
Bere aldetik, <TR> eta <TD> etiketek ere bere atributuak dituzte, besteak beste BGCOLOR (hondoko kolorea), ALIGN (tableko datuen alineazio horizontala), VALIGN (tableko datuen alineazio bertikala, TOP, MIDDLE, BOTTOM eta BASELINE balioak har ditzazkelarik). Nabarmendu behar dira COLSPAN eta ROWSPAN atributuak. Lehena zelda alboko zutabeko zeldarekin “fusionatzeko” erabiltzen da, batu nahi diren zelden kopurua adierazita. Bigarrenak zenbat lerro fusionatu behar diren adierazten du.
<TD COLSPAN=2>
<TD ROWSPAN=2>
MARKOAK
Markoek (frames) nabigatzailearen lehio berean hainbat HTML dokumentu aurkeztea ahalbidetzen dute, lehio independienteak bailira. Ikusi ondorengo adibidea:
<!DOCTYPE HTML PUBLIC “-/W3C/DTD HTML 4.0 Frameset//EN”>
<HTML LANG=”EN”>
<HEAD>
</HEAD>
<FRAMESET COLS=”50%,50%”>
<FRAME SRC=”lehen_orria.htm”>
<FRAME SRC=”bigarren_orria.htm”>
</FRAMESET>
</HTML>
Markoak erabiltzen ditugunean, DOCTYPE deklarazio bat erabili behar dugu, adibidean ikus daitekeen bezala. Markoen deklarazioak berriz, <FRAMESET> etiketen hartean eman behar dira, zeinak ROWS eta COLS atributuak ditu, markoen posizioa definitzen dutenak. <FRAME> etiketak, SRC atributu bat du, marko horretan ikusarazi nahi dugun dokumentura apuntatzen egongo delarik.
Marko bakoitzari izen bat jarri daiteke, <FRAME> etiketaren NAME atributuarekin; horrela marko honen edukia dinamikoki aldatu ahal izango da bere izenari erreferentzia eginda TARGET atributuari esker, honako adibidean bezala:
<A HREF=”beste_orri.htm” TARGET=”ezkerra”>Orriz aldatu</A>
Link honetan klik egitean, “ezkerra” izeneko markoan “beste_orri.htm” orria kargatuko da momentuan zegoenaren ordez.
Barne markoak
Markoak erabiltzeko beste aukera bat barne markoak (I-Frames) erabiltzea da. Hauek ez daude frameset batean definitu beharrik, HTML orrian sartzen dira zuzenean.
<IFRAME WIDTH=”200” HEIGHT=”200” SRC=”orria.htm”>
FORMULARIOAK
HTMLk duen erabilgarritasunik nabarmenena formularioen txertatzea da. Erabiltzailearik zerbitzarira informazioa bidaltzera ahalbidetzen dute eta <FORM></FORM> etiketen hartean definitzen dira. HirU atributu ditu etiketa honek: ACTION, informazioa jaso behar duenaren helbidea; METHOD, informazioa ACTION atributuko URLari bidali behar zaila adierazten duena (normalean “post”); eta ENCTYPE, informazioa bidaltzeko era definitzen duena (normalean ez da definitzen, artxibo oso bat bidali ez bada nahi behintzat).
<FORM ACTION=”postontzia.htm” METHOD=”post>
….
</FORM>
erabiltzaileari bidali beharreko informazioa sartzea ahalbidetzeko hainbat formulario elementu daude, erabilienak honakoak direlarik:
Textarea
<TEXTAREA></TEXTAREA> etiketen hartean, hainbat lerrotako textua sartzeko balio du. ROWS eta COLS atributuekin tamaina definitzen da. Adb.:
<TEXTAREA NAME=”textua” ROWS=5 COLS=30></TEXTAREA>
Select
<SELECT></SELECT> etiten hartean, aukeratzeko hainbat elementu ikustarazten ditu, menu desplegable edo “konbo” batean. Aukeratzeko elementuak definitzeko, etiketa nagusien hartean <OPTION></OPTION> etiketak jarri behar dira.
<SELECT NAME=”aukera>
<OPTION VALUE=”a”>a</OPTION>
<OPTION VALUE=”b”>b</OPTION>
<OPTION VALUE=”c”>c</OPTION>
</SELECT>
INPUT
Hainbat motako kontrolak sortzeko balio du, <INPUT TYPE=”mota”> etiketarekin. Motak honakoak izan daitezke: TEXT, lerro bakarreko textu laukitxo bat sortzeko; RADIO, aldi berean aukera bakarra uzten duen botoi taldea; HIDDEN, ikustezina den baina balio bat duen elementua; FILE, artxibo bat aukeratzeko menua; SUBMIT, formularioa bidaltzeko, etab…
<INPUT TYPE=”text” NAME=”izena” VALUE =”Gorka”>
<INPUT TYPE=”hidden” NAME=”nan” VALUE =”123”>
<INPUT TYPE=”submit” VALUE=”bidali”>
Ikusten denez, elementuen izena NAME atributuaren bidez definitzen da. Izenari esker, formularioko informazioa jasotzen duen orriak elementu bakoitzaren datuak jaso ahal ditu ASP, PHP edota beste zerbitzari aldeko programazio lenguaia baten bidez. Arlo honi buruz informazio gehiago blog honetako PHPren oinarrizko gidan eta ASPren objetuenean.
Iruzkinak
Utzi iruzkina: