HTML

HTML
Irudi gehiago
Jatorria
Sorrera-urtea	1989
Argitaratze-data	1993
Aurkitzailea edo asmatzailea	Tim Berners-Lee
Ezaugarriak
Media mota	text/html
Egile-eskubideak	copyrightduna
Lizentzia	Creative Commons Attribution 4.0 International (en)
Deskribapena
Oinarritua	SGML
Ekoizpena
Garatzailea	World Wide Web Consortium, IETF eta Web Hypertext Application Technology Working Group (en)
html.spec.whatwg.org…
Iturri-kodea	https://github.com/whatwg/html eta https://github.com/w3c/html

HTML (Hipertestua markatzeko lengoaia edo HyperText Markup Language) web-orriak sortzeko markaketa-lengoaia bat da. 1990ean Barners-Lee-k definitua, estandar bihurtu eta World Wide Web-aren sorrera ekarri zuen. Sortu zenetik gaurdaino, hainbat bertsio argitaratu dira, azkena HTML5 bertsioa. Web-nabigatzaile eta plataforma desberdinetan erabil daiteke.

Etiketen bidez dokumentua markatu egiten da: izenburua, atalak, paragrafoak, zerrendak, taulak, etab. Web-nabigatzaileak HTML-dokumentuko etiketak interpretatzean, markatutakoari dagokion itxura ematen dio web-orriari. Etiketen semantika interpretatuz, edukiari buruzko informazioa hobeto ulertzea lortzen da eta horri esker Interneteko bilaketak errazten dira. Azken bertsioetan, web-orriaren itxura kontrolatzeko CSS estilo-orriekin batera erabiltzen da eta JavaScript lengoaian idatzitako script-ak txerta daitezke web-orrian.

Historia

Tim Berners-Lee (2009)

1980ko hamarkadaren erdi aldera, CERN-eko Tim Berners-Lee fisikariak CERNeko ikertzaileek dokumentuak erabili eta partekatzeko ENQUIRE sistema proposatu eta prototipoa sortu zuen. 1989an bi teknika zeuden dokumentu elektronikoak haien artean lotzeko: estekak erabiltzea edo SGML izeneko markaketa-lengoaia erabiltzea. Barners-Lee-k 1990ean HTML definitu zuen eta World Wide Web sortu zuen.

HTMLren lehen deskribapen publikoa "HTML Tags" izeneko dokumentua izan zen, Tim Berners-Lee-k 1991ko amaieran Interneten lehen aldiz aipatu zuena. Bertan, HTMLren hasierako diseinua osatzen zuten 18 elementuak deskribatu zituen. 1993ean David Raggett-ek HTML+ sortu zuen, ezaugarri berriak erantsiz, hala nola, irudiak, taulak eta inprimakiak.

1994an Berners-Lee-k sortu zuen World Wide Web Consortium (W3C) erakundeak garatzen ditu WWWerako estandarrak, eta denboran zehar proposatu dituen hobekuntzekin HTML-ren bertsio berriak sortu dira. Hobekuntza eta gomendio horiek beste lengoaia batzuren oinarri ere badira, hala nola, XHTML eta XML. HTML-ren bertsio nagusiak hauek dira:

HTML 2

HTML eta HTML+ bertsioen garapenetik sortu zen 1995ean eta HTML-ren lehen estandar gisa hartzen da. Etorkizuneko inplementazioek estandar hau oinarri hartzea zen helburua. Tim Berners-Lee-k eta Dan Conolly-k editatu zuten eta lehen HTML bertsio ofizial moduan ezagutzen da. Informazioa modu sinplean adieraztea zen helburua, dokumentuaren egitura sinple mantentzea. Hori dela eta, taulak editatzeko euskarririk ez du, adibidez. Zentzu horretan, minimalista eta purua dela esaten da.

HTML 3

HTML 3.0 izenez ezagutzen den lehen bertsioa 1995ean proposatu zen eta aukera berri asko jaso zituen, taulak sortzeko, irudien inguruan testua jarri ahal izateko edo formula matematiko konplexuak idatzi ahal izateko, adibidez. Hala ere, konplexuegia zen garai hartan zegoen teknologiarako eta proiektua bertan bera geratu zen. Web orrien estetika hobetzeko interesa handituz zioan eta garatzaileek web orrien diseinurako tresnaren bat garatzeko beharra ikusi zuten. Horrela sortu zen CSS (Cascading Style Sheets), estilo-orriak definitzeko balio du eta HTML dokumentu bati erantsiz gero, dokumentuaren diseinua egokitzeko erabiltzen dira. Estilo-orri horiek HTML-ren independenteak dira eta sintaxi propioa dute. Horri esker, web orrien garatzaileek modu egokian kontrolatu ahal izango zuten orriaren itxura.

HTML 3.2 bertsioa 1997an sortu zen, eta CSS estilo-orriekin batera erabiltzeko egokitua izan zen. Egokitze-prozesu horretan, HTML 3.0 bertsioan sartu ziren ezaugarri batzuk kendu egin ziren. Formula matematikoak idazteko garatu zirenak, adibidez, MathML estandarrean integratu ziren.

HTML 4

Aurreko bertsioak bezala, hau ere SGML (Standard Generalized Markup Language) estandarrean oinarritzen da. 1998ean proposatu zen HTML 4.0 bertsioa eta 1999an HTML 4.01 argitaratu zen W3C-ren gomendio moduan. Taulak eta formularioak egiteko aukerak hobetu egin ziren. Hasierako bertsioek web-nabigatzaile bakoitzerako espezifikoak ziren elementu-mota eta atributu asko onartzen zituzten baina pixkanaka halakoak "zaharkitu" moduan markatzen hasi ziren eta estilo-orrien erabilera lehenetsi zen. Bertsio berriagoek "frame"-ak, "script"-ak eta objektuak txertatzeko prozedurak eskaini zituzten, web-nabigatzaile bakoitzaren espezifikotasunetatik irteteko. Hiru aldaera proposatu ziren:

• "Strict" edo hertsia: zaharkitutako elementuak eta atributuak ez dira onartzen.
• "Transitional" edo trantsiziokoa: zaharkitutako elementuak atributuak onartzen dira.
• "Frameset": Marko edo "frame" batekin erlazionatutako elementuak bakarrik onartzen dira.

HTML 4.01 bertsioa egonkor mantendu zen urte askotan zehar. Urte horietan zehar, W3C-ko HTML lan-taldea XML (Extensible Markup Language) markaketa-lengoaian oinarritzen den XHTML (Extensible HyperText Markup Language) markaketa-lengoaiaren garapenean aritu ziren.

HTML 5

HTML 5 logoa

Sakontzeko, irakurri: «HTML5»

Bertsio hau WHATWG (Web Hypertext Application Technology Working Group) taldeak mantentzen du. Taldea 2004an sortu zen Apple Inc., Mozilla Foundation eta Opera enpresekin. Gaur egun, taldeko kide nagusiak Apple Inc., Mozilla fundazioa, Google Inc. eta Microsoft enpresak d ira. 2006an Tim Berners-Leek iragarri zuen W3C erakundeak eta WHATWG taldeak elkarrekin lan egingo zutela HTML-aren garapenean. 2008an argitaratu zuten HTML 5-en lehen bertsioa. 2014an W3C erakundeak HTML 5-en erabilera gomendatu zuen. 2016an HTML 5.1 bertsioa agertu zen eta 2017an HTML 5.2 bertsioa. Gaur egun, HTML 5 da World Wide Web-ean erabiltzen den markaketa-lengoaia nagusia.

Markatzea

HTML kodearen adibidea

HTML lengoaian etiketak erabiltzen dira testua markatzeko. Etiketak idazteko <, > eta / ikurrak erabiltzen dira, eta haien bidez dokumentuaren itxura deskriba daiteke edo web-nabigatzailearen portaeran eragina izan dezakeen script-a txertatu, adibidez.

HTML-k hainbat funtsezko osagai ditu, besteak beste, elementuak eta haien atributuak.

Elementuak

Html-ko elementu baten egitura orokorra

HTMLren oinarrizko egitura dira eta oinarrizko bi propietate dituzte: atributuak eta edukia. Elementua normalean bi etiketen bidez markatzen da: hasierako etiketa, <elementuaren izena> modukoa izaten dena, eta amaierakoa,</elementuaren izena>. Elementuaren atributuak hasierako etiketaren barruan zehazten dira eta edukia bi etiketen artean idazten da. Hala ere, badira edukirik ez duten elementuak, baita bukaerako etiketarik ez dutenak ere, adibidez <br>.

Elementuak hainbat motakoak izan daitezke:

• Testuaren egitura deskribatzeko egitura-markak erabiltzen dira. Lehen-mailako atal bat definitzeko, adibidez, <h1>golf</h1> etiketak erabiltzen dira. Nahiz eta egitura-markek ez duten itxura zehazten, web-nabigatzaile gehienek elementuak formatu estandarrean erakusten dituzte.

• Testuaren itxura deskribatzeko aurkezpen-markak erabiltzen dira. Elementu-mota honen bidez adierazten da testua nola ikusiko den. Letra lodiz erakusteko, adibidez, <b>letra lodia</b> etiketak erabiltzen dira. Hala ere, HTML-ren azken bertsioetan aurkezpen-marka gehineak baztertu egin dira eta testuari formatu berezia emateko CSS (teilakatutako estilo-orriak) erabiltzen dira.

• Loturak (estekak) sortzeko hipertestu-markak erabiltzen dira. Esteken bidez lotura sor daiteke beste dokumentu batera edo dokumentu bereko beste zati batera. Esteka bat sortzeko, </a> aingura-etiketa erabiltzen da eta "href" atributuaren bidez adierazten da loturak zein URL helbidera eramango duen. Adibidez, Euskarazko Wikipediarako esteka sortzeko: <a href="http://eu.wikipedia.org/wiki/Azala">Wikipedia<</a>. Posiblea da beste objektu baterako esteka sortzea ere (irudi batera eramateko, adibidez,<img> etiketa erabiltzen da).

Atributuak

Elementuaren atributuak, gehienetan, atributua="balioa" moduan adierazten dira. Elementuaren hasierako etiketan idazten dira, elementuaren izenaren ondoren. Atributuaren balioa komatxo bikoitzen edo sinpleen artean idatzita egon daiteke, nahiz eta balio-mota batzuk komatxorik gabe ere idatz daitezkeen HTML-n (ez, ordea, XHTMLn).

<elementua atributua="balioa">elementuaren edukia</elementua>

Oinarrizko etiketak

Hona hemen HTML lengoaian idatzita dokumentu baten adibide bat. <!doctype html> etiketak dokumentua HTML motakoa dela adierazten du. Ondoren, oinarrizko etiketa batzuk ageri dira.

\n\n"}}" id="mw6A">

<!doctype html>
<html lang="eu">
    <head> 
        <title> Web-orriaren izenburua </title> 
        <style> h1 {color:red;} p {color:blue;}</style>
    </head> 
    <body> 
        <h1> Maila goreneko izenburua </h1> 
        <p> Hau paragrafo bat da </p> 
        <h2> Bigarren mailako izenburua (poema bat) </h2> 
        <p> Txoria txori (Mikel Laboa)<br> Hegoak ebaki banizkio<br>nerea izango zen,<br>ez zuen alde egingo. </p>
        <h2> Bigarren mailako izenburua (taula bat)</h2> 
   <table>
  <tr>
    <th>Izena</th>
    <th>Abizena</th>
  </tr>
  <tr>
    <td>Joxan</td>
    <td>Artze</td>
  </tr>
  <tr>
    <td>Lourdes</td>
    <td>Iriondo</td>
  </tr>
</table>
    </body> 
</html>

HTML-ren oinarrizko etiketak hauek dira:

Dokumentuaren egitura markatzeko etiketak

• <html>... </html>: Etiketa-parearen artekoa html kodea dela adierazten zaio nabigatzaileari.
• <head>... </head>: Dokumentuaren goiburua markatzeko etiketak dira. Nabigatzailean zuzenean erakusten ez den informazioa adierazten da bertan.
• <body>... </body>: Dokumentuaren gorputza definitzeko etiketa-parea da. Nabigatzailean erakusten den dokumentuaren atala da gorputza. Bertan, web-orri osorako ezaugarriak defini daitezke, adibidez kolorea eta ertzak.

Dokumentuaren goiburuko etiketak

• <base>: Dokumentuko esteken oinarrizko URL-a adierazteko etiketa da. Mota honetako elementu bakarra egon daiteke dokumentuan, eta kanpoko baliabide bati erreferentzia egiten dion edozein elementuren aurrean agertu behar du. Elementu honek baditu atributuak, baina edukirik ez. Adibidea: <base href="http://www.adibidea.eus/orria<nowiki/>.html">
• <title>...</title>: Web-orriaren izenburua adierazteko etiketa-parea da. Horrela definitutako izenburua leihoaren goiko barran erakusten da nabigatzailean (ikus adibidea atal honen hasieran).
• <link>: Elementu honen bidez web-orriaren eta beste orrialde baten arteko erlazioa definitzen da. Estilo-orrietara lotzeko erabiltzen da sarri. Adibidea: <link rel="stylesheet" href="/style.css" type="text/css">.
• <meta>: Metainformazioa zehazteko erabiltzen den etiketa da, hala nola, egilea, argitalpen-data, iraungitze-data, hizkuntza, orriaren izenburua, orriaren deskribapena, hitz-gakoak, etab. Adibidea: <meta name="copyright" content="© 2022">
• <script>...</script>: Script bat (kode-exekutagarria) dokumentuan bertan txertatzeko edo dokumentutik kanpo definitutako script bati lotura egiteko erabiltzen den etiketa-parea da. JavaScript programazio-lengoaian idatzitako kodea izaten da normalean. Kanpoan definitutakoari erreferentzia egitekoSRC atributua erabiltzen da. Dokumentuaren gorputzean ere erabil daiteke elementu hau. Adibidea (script-a dokumentuan txertatzea): <script> alert("Kaixo mundua!"); </script>. Adibidea (kanpoko script batera): <script src="javascript.js"></script>
• <style>...</style>: Orriaren barne-estiloa definitzeko erabiltzen den etiketa-parea da. <link> etiketaren bidez dokumentuaren estiloa kanpoko CSS estilo-orri bati lotu bazaio, orduan <style> etiketa-parea erabili beharrik ez dago. Adibidea (dokumentuko h1 motako izenburuak gorriz eta parrafoak urdinez erakusteko): <style> h1 {color:red;} p {color:blue;}</style>.

Dokumentuaren gorputzeko etiketak

• < p >...< /p >: Paragrafo-marka da, HTML dokumentutan parrafoak definitzeko erabiltzen den elementua. Seguraski gorputzean erabiltzen diren elementuen artetik arruntena da. Parrafoa beti hasten da lerro berri batean eta normalean gainetik eta azpitik espazioa eransten zaio.
• < h1 >, < h2 >...< h6 >: Dokumentuaren atalak definitzeko eta atalei izenburua jartzeko balio duten etiketa-pareak dira. Maila desberdineko izenburuak/atalak (headings) sor daitezke: maila gorenekoak definitzeko < h1 >...< /h1 >, maila baxuenekorako < h6 >...< /h6 >. Atalek dokumentuari egitura ematen diote eta elementu horiei esker, programa batzuek marrak txertatzen dituzte dokumentuan edo eduki-taulak sortu.
• <br>: Testuan lerro-jauzia (line break) behartzeko elementua da. Egokia gertatzen da lerroen zatiketa adierazgarria denean (poema bat edo helbide bat idazteko, adibidez).
• <table>...</table>: Taula bat definitzeko etiketa-parea da. Taularen izenburua <th> elementuaren bidez definitzen da (header), lerroak <tr> elementuaren bidez (row), etiketarekin definitzen dira eta gelaxkak <td> etiketaren bidez. Gelaxkaren definizioak lerroaren definizioaren barruan egon behar du.
• <a>...</a>: Web-orriko punturen batera edo orritik kanpoko beste web-orri batera esteka sortzeko etiketa-parea dira. "href" atributuaren bidez adierazten da loturak zein URL helbidera eramango duen. Adibidez, <a href="http://eu.wikipedia.org/wiki/Azala">Wikipedia</a> horrela azaltzen da Wikipedia.
• <div>...</div>. Atalak sortzeko edo edukia multzokatzeko erabiltzen den etiketa-parea da (division). Etiketen artean testua doa, eta beste elementu batzuk ere jar daitezke: izenburua, etab.
• <img>: irudi bat definitzeko elementua da. Irudia non dagoen adierazteko src atributua erabiltzen da (source). Adibidez: <img src="./irudiak/nireargazkia.jpg" />. Gerta daiteke nabigatzailea irudia erakusteko gai ez izatea. Halakoetarako, alt="ordezko testua"atributua erabiliz, irudia deskribatzen duen testua idaztea gomendatzen da, irudia erakutsi ezin denean testua erakusteko.
• <li>...</li>,<ol>...</ol>,<ul>...</ul>: Zerrendak sortzeko etiketa-parek dira. Mota desberdineko zerrendak sor daitezke: <li>(zerrenda edo list), <ol>zerrenda ordenatuetarako (ordered list), <ul> ordenatu gabeko zerrenda sortzeko (unordered list), etab.

Web-orrien edizioa

Sakontzeko, irakurri: «Web-orrien editore»

HTML lengoaian idatzitako dokumentuak sortzeko, mota desberdineko editoreak erabil daitezke: formatu gabeko testu-editoreak edo WYSIWYG motakoak. Online editoreak ere badaude: Google Sites, Weebly, etab.

Formatu gabeko testu-editoreetan HTML aginduak idazteko unean ez da ikusten web-orriak nabigatzailean izango duen itxura. Edizioan laguntzeko asmoz, editore hauek HTML kodearen sintaxia nabarmendu ohi dute. Gainera, HTML elementu ohikoenak errazago txertatzeko, txantiloiak, tresna-barrak eta teklatu-lasterbideak eskaintzen dituzte. Mota honetakoak dira GNU proiektuaren GNU Emacs editorea, Aptana, Windows-en Notepad++ edo Apache OpenOffice Writer, besteak beste.

Artikulu honetan "Oinarrizko etiketak" ataleko adibidea web-nabigatzailean ikusteko, kodea testu-editore batean kopiatu eta dokumentua konputagailuaren mahaigainean gorde daiteke nire-lehen-html-dokumentua.html izenarekin, adibidez. Ondoren, dokumentua nabigatzaile bateanirekiz gero, egiazta daiteke atalen izenburuak esperotako kolore eta tamainan agertzen direla, Mikel Laboaren Txoria txori poemaren lerro-jauziak egin direla, taula osatu dela, etab.

WYSIWYG motako editoreetan, kodea idatzi ahala nabigatzailean hartuko duen itxura ikusten da. Horregatik hartzen dute WYSIWYG izena (ingelesez, "What You See Is What You Get"), hau da “ikusten duzuna lortzen duzuna da". Web-orrien garatzaileentzat lagungarria izan daiteke HTML kodearen azken emaitza ikustea, kodea idazten den bitartean. Mota honetakoak dira KompoZer edo BlueGriffon, adibidez.

Editore batzuk, sortutako web-orria argitaratzeko erraztasunak ere ematen dituzte, Adobe Dreamweaver, adibidez.

Web-nabigatzaileek uneko web-orriaren HTML kodea ikusteko aukera ematen dute. Nabigatzailearen "tresnak" atalean "garatzaile-tresnak" moduko aukera izaten da, normalean.

HTML semantikoa

HTML semantikoa HTML kodea idazteko modu bat da, edukiari itxurari baino garrantzia handiagoa emateko diseinatu dena. HTML lengoaiak betidanik izan du markatze semantikoa egiteko aukera (mikroformatua), web-orrien garatzaileek elementu semantikoen bidez edukiari buruzko informazioa argiago adierazteko.<h1> elementuarekin, adibidez, edukia "orrialdearen maila goreneko izenburu edo atala" dela adierazten da. Badira semantikoki neutroak diren elementuak, edukiari buruz ezer esaten ez dutenak: <div> eta <span> adibidez, dokumentuaren zatiak definitzeko erabiltzen diren etiketak dira, <font> elementuarekin testuaren kolorea, tamaina eta estiloa alda daiteke, etab. Aurkezpen-markak direla esaten da, arreta orria web-nabigatzailean erakustean izango duen itxuran jartzen delako.

Web-orri batean maila goreneko atal-izenburu bat definitzeko, HTML kode-lerro hau erabil daiteke:

<h1> Hau maila goreneko atal-izenburua da</h1>

Besterik adierazi ezean, web-nabigatzaileen estilo-orri gehienek tamaina handiko letraz erakutsiko dute edukia, web-orriaren izenburu itxura estandarra emanez. Letraren tamaina kontrolatzen duen<font> elementuarekin antzeko itxura izango duen testua erakutsi daiteke, horrela:

<span style="font-size: 32px; margin: 21px 0;"> Maila goreneko atal-izenburua da hau?</span>

Testuak har dezake maila goreneko atal-izenburuaren itxura, baina ez du balio semantikorik izango. Laurogeita hamarreko hamarkadaren amaieratik, CSS estilo-orriak nabigatzaile gehienetan funtzionatzen hasi zirenetik, aurkezpen-marken erabilera saihesteko eskatu zitzaien web-orrien garatzaileei. Gaur egun, web-orriaren diseinua egitean, edukia eta aurkezteko modua (itxura) bereiztea gomendatzen da, estilo kontuak CSS orrien bidez kontrolatuz. HTMLren bertsio zaharretako aurkezpen-marka gehienak baztertu ziren eta jada ez daude baimenduta.

Etiketatze semantikoak ondorio garrantzitsuak eragiten ditu. Izan ere, World Wide Web-ean bilaketak egitea funtsezkoa gertatzen da gaur egun. Web-arakatzaileak bilaketa-motorrak dira, egunean milioika web-orri irakurtzea eta indexatzea da haien ardura. Hainbat teknika eta algoritmo erabiltzen dituzte horretarako, eta etiketatze-semantikoa ere funtsezkoa zaie web-orrietako informazioaren esanahia ulertu eta garrantzia neurtu ahal izateko, ondoren bilaketaren emaitza erabiltzaileari modu ordenatuan erakusteko. HTML semantikoak bilaketa-motorretan posizionamendu ona izaten (SEO, Search Engine Optimization) eta webgunearen ikusgarritasuna handitzen laguntzen du.

Markatze semantikoak bestelako abantailak ere baditu: HTML kodea errazago irakurtzen da, argiago idatzita geratzen delako. Horrek orrien mantentze-lana errazten laguntzen du. Gizakiontzat argiagoa izateaz gain, makinentzat ere ulergarriagoa da, eta horrek web-irisgarritasunean laguntzen du, web-orria irakurtzerik ez duten erabiltzaileengana beste moduren batean iristeko aukera eman daitekeelako.

Ikus, gainera

• HTML5
• DHTML
• XML
• CSS
• Web-orrien editore
• Web kolore
• JavaScript
• Web semantiko
• World Wide Web Consortium (W3C)

Kanpo estekak

• (Ingelesez) [https://web.archive.org/web/20220531023912/https://en.wikibooks.org/wiki/HyperText_Markup_Language HTML Wikibook
• (Gaztelaniaz) [https://es.wikibooks.org/wiki/Lenguaje_HTML Lenguaje HTML Wikilibro
• (Ingelesez) Authoring Webpages Wikibook
• (Ingelesez) CSS Wikibook

• Datuak: Q8811
• Multimedia: HTML / Q8811
• MediaWiki: HTML