HTML

HTML
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,IETFetaWeb Hypertext Application Technology Working Group(en)
html.spec.whatwg.org…
Iturri-kodea	https://github.com/whatwg/htmletahttps://github.com/w3c/html

HTML(Hipertestua markatzeko lengoaiaedoHyperText Markup Language)web-orriaksortzekomarkaketa-lengoaiabat da. 1990eanBarners-Lee-k definitua, estandar bihurtu etaWorld Wide Web-aren sorrera ekarri zuen. Sortu zenetik gaurdaino, hainbat bertsio argitaratu dira, azkenaHTML5bertsioa.Web-nabigatzaileetaplataforma desberdinetanerabil daiteke.

Etiketen bidez dokumentua markatu egiten da: izenburua, atalak, paragrafoak, zerrendak, taulak, etab.Web-nabigatzaileakHTML-dokumentuko etiketak interpretatzean, markatutakoari dagokion itxura ematen dioweb-orriari.Etiketen semantika interpretatuz, edukiari buruzko informazioa hobeto ulertzea lortzen da eta horri eskerInternetekobilaketak errazten dira. Azken bertsioetan,web-orriarenitxura kontrolatzekoCSS estilo-orriekinbatera erabiltzen da etaJavaScriptlengoaianidatzitako script-ak txerta daitezkeweb-orrian.

Historia

Tim Berners-Lee (2009)

1980ko hamarkadaren erdi aldera,CERN-ekoTim Berners-LeefisikariakCERNeko ikertzaileek dokumentuak erabili eta partekatzeko ENQUIRE sistema proposatu eta prototipoa sortu zuen. 1989an bi teknika zeuden dokumentu elektronikoak haien artean lotzeko:estekakerabiltzea edoSGMLizenekomarkaketa-lengoaiaerabiltzea.Barners-Lee-k 1990ean HTML definitu zuen etaWorld Wide Websortu 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.

1994anBerners-Lee-ksortu zuenWorld Wide Web Consortium (W3C)erakundeak garatzen dituWWWerakoestandarrak, eta denboran zehar proposatu dituen hobekuntzekin HTML-ren bertsio berriak sortu dira. Hobekuntza eta gomendio horiek beste lengoaia batzuren oinarri ere badira, hala nola,XHTMLetaXML.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-keta 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 edoformula matematikokonplexuak idatzi ahal izateko, adibidez. Hala ere, konplexuegia zen garai hartan zegoen teknologiarako eta proiektua bertan bera geratu zen.Web orrienestetika hobetzeko interesa handituz zioan eta garatzaileekweb orriendiseinurako tresnaren bat garatzeko beharra ikusi zuten. Horrela sortu zenCSS (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 orriengaratzaileek modu egokian kontrolatu ahal izango zuten orriaren itxura.

HTML 3.2 bertsioa1997an sortu zen, etaCSSestilo-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,MathMLestandarrean integratu ziren.

HTML 4

Aurreko bertsioak bezala, hau ereSGML(Standard Generalized Markup Language) estandarrean oinarritzen da. 1998ean proposatu zen HTML 4.0 bertsioa eta 1999an HTML 4.01 argitaratu zenW3C-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 bertsioaegonkor mantendu zen urte askotan zehar. Urte horietan zehar, W3C-ko HTML lan-taldeaXML(Extensible Markup Language)markaketa-lengoaianoinarritzen denXHTML(Extensible HyperText Markup Language)markaketa-lengoaiarengarapenean 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 zenApple Inc.,Mozilla Foundationeta Opera enpresekin. Gaur egun, taldeko kide nagusiakApple Inc.,Mozilla fundazioa,Google Inc.etaMicrosoftenpresak d ira. 2006anTim Berners-Leekiragarri zuenW3Cerakundeak eta WHATWG taldeak elkarrekin lan egingo zutela HTML-aren garapenean. 2008an argitaratu zuten HTML 5-en lehen bertsioa.2014anW3CerakundeakHTML 5-en erabilera gomendatu zuen.2016an HTML 5.1 bertsioaagertu zen eta 2017an HTML 5.2 bertsioa.Gaur egun, HTML 5 daWorld Wide Web-eanerabiltzen denmarkaketa-lengoaianagusia.

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 deskribatzekoegitura-markakerabiltzen 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 deskribatzekoaurkezpen-markakerabiltzen dira. Elementu-mota honen bidez adierazten da testua nola ikusiko den.Letra lodizerakusteko, adibidez,<b>letra lodia</b>etiketak erabiltzen dira. Hala ere, HTML-ren azken bertsioetan aurkezpen-marka gehineak baztertu egin dira eta testuari formatu berezia ematekoCSS (teilakatutako estilo-orriak)erabiltzen dira.

• Loturak (estekak)sortzekohipertestu-markakerabiltzen dira. Esteken bidez lotura sor daiteke beste dokumentu batera edo dokumentu bereko beste zati batera.Estekabat sortzeko, </a> aingura-etiketa erabiltzen da eta "href" atributuaren bidez adierazten da loturak zein URL helbidera eramango duen. Adibidez, Euskarazko Wikipediarako esteka sortzeko:<ahref= "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).

<elementuaatributua="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.

<!doctype html>
<htmllang="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, adibidezkoloreaeta ertzak.

Dokumentuaren goiburuko etiketak

• <base>:Dokumentuko esteken oinarrizkoURL-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.html ">
• <title>...</title>:Web-orriarenizenburua adierazteko etiketa-parea da. Horrela definitutako izenburua leihoaren goiko barran erakusten da nabigatzailean (ikus adibidea atal honen hasieran).
• <link>:Elementu honen bidezweb-orriareneta beste orrialde baten arteko erlazioa definitzen da.Estilo-orrietaralotzeko 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.JavaScriptprogramazio-lengoaianidatzitako kodea izaten da normalean. Kanpoan definitutakoari erreferentzia egitekoSRCatributua 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 kanpokoCSS estilo-orribati 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 bateraestekasortzeko 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 daWikipedia.
• <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 adieraztekosrcatributua 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 edolist),<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 gabekotestu-editoreakedoWYSIWYGmotakoak. Online editoreak ere badaude:Google Sites,Weebly,etab.

Formatu gabekotestu-editoreetanHTML aginduak idazteko unean ez da ikustenweb-orriaknabigatzaileanizango duen itxura. Edizioan laguntzeko asmoz,editorehauek HTML kodearen sintaxia nabarmendu ohi dute. Gainera, HTML elementu ohikoenak errazago txertatzeko, txantiloiak, tresna-barrak eta teklatu-lasterbideak eskaintzen dituzte. Mota honetakoak diraGNUproiektuarenGNU Emacseditorea,Aptana,Windows-enNotepad++edo Apache OpenOffice Writer,besteak beste.

Artikulu honetan "Oinarrizko etiketak" ataleko adibideaweb-nabigatzaileanikusteko, kodeatestu-editorebatean kopiatu eta dokumentua konputagailuaren mahaigainean gorde daiteke nire-lehen-html-dokumentua.html izenarekin, adibidez. Ondoren, dokumentuanabigatzailebateanirekiz gero, egiazta daiteke atalen izenburuak esperotakokoloreeta tamainan agertzen direla,Mikel LaboarenTxoria txoripoemarenlerro-jauziak egin direla, taula osatu dela, etab.

WYSIWYGmotako editoreetan, kodea idatzi ahala nabigatzailean hartuko duen itxura ikusten da. Horregatik hartzen duteWYSIWYGizena (ingelesez, "What You See Is What You Get"), hau da “ikusten duzuna lortzen duzuna da".Web-orriengaratzaileentzat lagungarria izan daiteke HTML kodearen azken emaitza ikustea, kodea idazten den bitartean. Mota honetakoak dira KompoZeredo BlueGriffon,adibidez.

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

Web-nabigatzaileekunekoweb-orriarenHTML 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 orriaweb-nabigatzaileanerakustean izango duen itxuran jartzen delako.

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

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

Besterik adierazi ezean,web-nabigatzaileenestilo-orri gehienek tamaina handiko letraz erakutsiko dute edukia,web-orriarenizenburu 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-orriaknabigatzailegehienetan funtzionatzen hasi zirenetik, aurkezpen-marken erabilera saihesteko eskatu zitzaienweb-orriengaratzaileei. Gaur egun,web-orriaren diseinuaegitean, edukia eta aurkezteko modua (itxura) bereiztea gomendatzen da, estilo kontuakCSS orrienbidez 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-arakatzaileakbilaketa-motorrakdira, egunean milioikaweb-orriirakurtzea eta indexatzea da haien ardura. Hainbat teknikaetaalgoritmoerabiltzen dituzte horretarako, eta etiketatze-semantikoa ere funtsezkoa zaieweb-orrietakoinformazioaren esanahia ulertu eta garrantzia neurtu ahal izateko, ondoren bilaketaren emaitza erabiltzaileari modu ordenatuan erakusteko. HTML semantikoakbilaketa-motorretanposizionamendu ona izaten (SEO, Search Engine Optimization) etawebgunearenikusgarritasuna 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 horrekweb-irisgarritasuneanlaguntzen du,web-orriairakurtzerik 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_LanguageHTML Wikibook
• (Gaztelaniaz)[https://es.wikibooks.org/wiki/Lenguaje_HTMLLenguaje HTML Wikilibro
• (Ingelesez)Authoring Webpages Wikibook
• (Ingelesez)CSS Wikibook

• Datuak:Q8811
• Multimedia:HTML/Q8811