HTML

HTML

HTML, acrònim en anglés de HyperText Markup Language («llenguage de marcat d'hipertext»), fa referència al llenguage de marcat utilisat en la creació de pàgines web. Este estàndart que servix de referència per al software que interactua en l'elaboració de pàgines web en les seues diferents versions. Definix una estructura bàsica i un còdic (denominat còdic HTML) per a la presentació de contingut d'una pàgina web, que inclou text, imàgens, videos, jocs, entre atres elements. Este estàndart és gestionat pel World Wide Web Consortium (W3C) o Consorci WWW, una organisació dedicada a l'estandardisació de la majoria de les tecnologies associades a la web, especialment en lo relacionat en la seua escritura i interpretació. HTML es considera el llenguage web més important i la seua invenció crucial per al sorgiment, desenroll i expansió de la World Wide Web (WWW). És l'estàndart que preval en la visualisació de pàgines web i és adoptat per tots els navegadors actuals.

El llenguage HTML es fonamenta en la separació de continguts i estructura com a filosofia de desenroll. Per a afegir elements externs a una pàgina com a imàgens, vídeos o scripts, generalment no s'incrusten directament en el còdic de la pàgina. En el seu lloc, es realisa una referència a l'ubicació de cada element per mig de text. D'esta manera, la pàgina web conté solament text, deixant al navegador web (intérpret del còdic) la llabor d'unir tots els elements i visualisar la pàgina final. En ser un estàndart, HTML pretén ser un llenguage que permeta que qualsevol pàgina web escrita en una determinada versió, puga ser interpretada de manera uniforme (seguint l'estàndart) per qualsevol navegador web actualisat.

HTML és un llenguage de marcat que possibilita definir l'estructura del nostre document per mig d'etiquetes. Este llenguage oferix una gran adaptabilitat, una estructuració llògica i és fàcil de interpre­tar tant per humans com per màquines.

A lo llarc de les seues diferents versions, HTML ha experimentat l'incorporació i eliminació de distintes característiques, en el propòsit d'optimisar la seua eficiència i facilitar el desenroll de pàgines web compatibles en varis navegadors i plataformes (PC d'escritori, portàtils, teléfons inteligents, tabletas, etc.) No obstant, per a interpretar adequadament una nova versió d'HTML, els desenrolladors de navegadors web deuen incorporar estos canvis, i els usuaris deuen ser capaços d'usar la nova versió del navegador en totes les actualisacions aplicades. Per lo general, estos canvis s'implementen per mig d'actualisacions automàtiques (Firefox, Chrome) o oferint una nova versió del navegador en totes les modificacions incorporades, disponible en un lloc web de descàrrega oficial (Internet Explorer). En conseqüència, un navegador desactualizado no podrà interpretar de manera precisa una pàgina web escrita en una versió d'HTML superior a la que soporta, lo que obliga a sovint als desenrolladors a aplicar tècniques i canvis per a resoldre problemes de visualisació i inclús d'interpretació de còdic HTML.

Aixina mateix, les pàgines web creades en una versió anterior d'HTML deurien ser actualisades o reescrites, encara que açò no sempre es complix. Per esta raó, alguns navegadors encara conserven la capacitat d'interpretar pàgines web en versions anteriors d'HTML. Estes diferències en l'interpretació d'una pàgina web persistixen per estes raons, generant discrepàncies entre distints navegadors i versions.

Primeres especificacions d'HTML

Tim Berners-Lee, en 1991, descriu 18 elements que conformaven el disseny inicial i relativament simple d'HTML. Tretze d'estos elements encara perduren en HTML 4.

Berners-Lee considerava l'HTML una ampliació de SGML, pero no va anar formalment reconeguda com a tal fins a la publicació a mitan de 1993, quan l'IETF (en espanyol: Grup de Treball d'Ingenieria d'Internet) va publicar una primera proposta per a l'especificació d'HTML: el borrador del Hypertext Markup Language de Berners-Lee i Donen Connolly. Esta proposta incloïa una Definició de Tipo de Document SGML per a establir la sintaxis.A pesar que el borrador va expirar als sis mesos, va ser notable per reconéixer l'etiqueta específica del navegador Mosaic usada per a insertar imàgens sense canviar la llínea. Açò reflectia la filosofia del IETF de basar els estàndarts en prototips en èxit.De manera similar, el borrador competidor de Dave Raggett HTML+ (Hypertext Markup Format) (Format de Marcage d'Hipertext), de finals de 1993, sugeria estandardisar característiques ya implementades, com les taules.

Marcador HTML

L'HTML s'escriu utilisant «etiquetes», tancades per corchetes angulars (<,>,/). Ademés de descriure l'estructura d'un document, l'HTML pot, fins a cert punt, definir la seua apariència i fer referència a un tipo de programa cridat script, el qual pot influir en el comportament de navegadors web i atres processadors d'HTML.

El terme HTML, també es referix al contingut del tipo de MIME text/html o de manera més àmplia, com un terme genèric per a l'HTML. Açò pot ser en forma derivada del XML (com XHTML 1.0 i versions posteriors) o directament derivat de SGML (com HTML 4.01 i versions anteriors). L'HTML consta de varis components essencials, incloent elements i els seus atributs, tipos de senyes i la declaració de tipo de document.^{cita requerida}

Elements

HTML element content categories

Els elements són l'estructura bàsica d'HTML. Els elements tenen dos propietats bàsiques: atributs i contingut. Tant els atributs com els continguts té certes restriccions per a que el document HTML es considere vàlit. Generalment, un element es compon d'una etiqueta d'obertura (per eixemple, <nom-de-element>) i una etiqueta de tancament corresponent (per eixemple, </nom-de-element>). Els atributs de l'element s'especifiquen dins de l'etiqueta d'obertura, mentres que el contingut se situa entre abdós etiquetes (per eixemple, <nom-de-element atribut="valor">Contingut</nom-de-element>). Alguns elements, com <br>, carixen de contingut i no requerixen una etiqueta de tancament. Davall es llisten varis tipos d'elements de marcat usats en HTML.

El marcat estructural descriu el propòsit del text. Per eixemple, <h2>Gòlf</h2> establix «Gòlf» com un encapçalat de segon nivell, el qual es mostraria en un navegador d'una manera similar al títul «Marcador HTML» a l'inici d'esta secció. El marcat estructural no determina cóm es vorà l'element, pero la majoria dels navegadors web han estandardisat el format dels elements. Es pot aplicar un format específic al text per mig de fulls d'estil en cascada.

El marcat presentacional s'encarrega de definir l'apariència del text, independentment de la seua funció. Per eixemple, <b>negreta</b> indica que els navegadors web deuen mostrar el text en negreta, pero no específica com deuen interpretar-ho els navegadors que presenten el contingut d'una atra manera distinta (com aquells que lligen el text en veu alta). En contrast, en el cas de <b>negreta</b> i <i>itálica</i>, existixen elements en una naturalea més semàntica: <strong>émfasis fort</strong> i <em>émfasis</em>. És evident cóm un llector de pantalla deuria interpretar estos dos últims elements. No obstant, a pesar de la seua similitut visual, són diferents a equivalents en presentació: un llector de pantalla no deuria accentuar més el nom d'un llibre, encara que est el nom en itálicas en la pantalla. La majoria del marcat en presentació ha segut rebujat des de la versió 4.01, en favor dels fulls d'estil en cascada.

El marcat hipertextual s'ampra per a enllaçar parts del document en atres documents o en atres seccions del mateix document. Per a crear un enllaç és necessari utilisar l'etiqueta d'ancora <a> junt en l'atribut href, que establirà la direcció URL a la que apunta l'enllaç. Per eixemple, un enllaç que mostre el text de la direcció i es dirigixca cap a la Wikipedia podria tindre esta forma <a href=”https://www.wikipedia.org”>https://www.wikipedia.org</a>. També és possible crear enllaços en atres objectes, com a imàgens <a href=”enllace”><img src=”image” /></a>.

Atributs

Vore també: Atribut HTML

En la seua majoria, els atributs d'un element són parells nomene-valor, separats per un signe d'igual «=» i escrits dins de l'etiqueta d'inici d'un element, despuix del nom de l'element. El valor pot estar tancat per comillas dobles o simples, encara que certs tipos de valors poden carir de comillas en HTML (pero no en XHTML). De totes maneres, deixar els valors sense comillas es considera poc segur. Per un atre costat, en contrast en els parells nomene-element, hi ha alguns atributs que afecten a l'element simplement per la seua presència,com l'atribut ismap per a l'element img.

Etiquetes HTML bàsiques

Les etiquetes HTML són còdics utilisats per a estructurar i donar format al contingut en pàgines web. Funcionen com a instruccions que indiquen al navegador cóm mostrar diferents elements, com a text, imàgens o enllaços, en interpretar el còdic HTML. Cada etiqueta té una funció específica i es compon d'elements com a obertura <etiqueta> i tancament </etiqueta>, tancant el contingut que afectarà.

• <html>: definix l'inici del document HTML, li indica al navegador que lo que ve a continuació deu ser interpretat com a còdic HTML. Açò és aixina de facto, ya que en teoria lo que definix el tipo de document és el DOCTYPE, que significa la paraula just despuix de DOCTYPE el tag de raïl.
• <script>: incrusta un script en una web, o flama a un per mig de src="url del script". Es recomana incloure el tipo MIME en l'atribut type, en el cas de JavaScript text/javascript.
• <head>: definix la capçalera del document HTML; esta capçalera sol contindre informació sobre el document que no es mostra directament al usuari com, per eixemple, el títul de la finestra del navegador. Dins de la capçalera <head> és possible trobar:
  • <title>: definix el títul de la pàgina. Per lo general, el títul apareix en la barra de títul damunt de la finestra.
  • <link>: per a vincular el lloc a fulls d'estil o icons. Per eixemple:<link rel="stylesheet" href="/style.css" type="text/css">.
  • <style>: per a colocar l'estil intern de la pàgina; ya siga usant CSS o atres llenguages similars. No és necessari colocar-ho si es va a vincular a un archiu extern usant l'etiqueta <link>.
  • <meta>: per a metadatos com l'autoria o la llicència, inclús per a indicar paràmetros http (per mig de http-equiv="") quan no es poden modificar per no estar disponible la configuració o per dificultats en server-side scripting.

• <body>: definix el contingut principal o cos del document. Esta és la part del document html que es mostra en el navegador; dins d'esta etiqueta poden definir-se propietats comunes a tota la pàgina, com color de fondo i màrgens. Dins del cos <body> és possible trobar numeroses etiquetes. A continuació s'indiquen algunes a modo d'eixemple:
  • <article>: Representa una composició auto-continguda en un document, pàgina, una aplicació o en el lloc, que es destina a distribuir de forma independent o re-utilisable.
  • <h1> a <h6>: encapçalats o títuls del document en diferent rellevància.
  • <table>: definix una taula.
    • <tr>: fila d'una taula.
    • <td>: cela d'una taula (deu estar dins d'una fila).
  • <footer> : representa el peu d'un document o secció. L'informació que se sol afegir en este bloc és l'autor del document, enllaços a contingut relacionat, informació de copyright, avisos llegals, etc.
  • <a>: hipervínculo o enllaç, dins o fòra del sitie web. Deu definir-se el paràmetro de passada per mig de l'atribut href. Per eixemple: <a href="http://www.example.com" title="Eixemple" target="_blank" tabindex="1">Eixemple</a> es representa com a eixemple.
  • <div>: divisió de la pàgina. Es recomana, junt en css, en lloc de <table> quan es desija alinear contingut.
  • <img>: image. Requerix de l'atribut src, que indica la ruta en la que es troba l'image. Per eixemple: <img src="./imàgens/mifoto.jpg" />. És convenient, per accessibilitat, posar un atribut alt="text alternatiu".
  • <ol>: etiqueta per a llistes ordenades.
  • <ul>: etiqueta per a llistes desordenades.
  • <li>: etiqueta elements d'una llista.
  • <b>: text en negreta (etiqueta desaprovada. Es recomana usar l'etiqueta <strong>).
  • <i>: text en cursiva (etiqueta desaprovada. Es recomana usar l'etiqueta <em>).
  • <s>: text tachat (etiqueta desaprovada. Es recomana usar l'etiqueta <de el>).
  • <o>: Abans text subrallat. A partir d'HTML 5 definix porcions de text diferenciades o destacades del restant, per a indicar correccions per eixemple (etiqueta desaprovada en HTML 4.01 i redefinida en HTML 5).
  • <main>: divisió estructural de la pàgina que engloba el contingut principal de la mateixa. Dins d'esta etiqueta, per eixemple, trobem els <article>.
  • <span>: Servix per a diferenciar un text d'un atre.
  • <br>: Servix per a provocar un bot de llínea. Esta etiqueta no es tanca.
  • <hr>: Servix per a provocar un canvi de tema entre paràgrafs. Esta etiqueta no es tanca.
  • <details> : Servix per a crear una secció desplegable
  • <summary> : Servix per a crear el títul de la secció desplegable

La majoria d'etiquetes deuen tancar-se com s'òbrin, pero en una barra ( / ) tal com es mostra en els següents eixemples:

• <table><tr><td>Contingut d'una cela</td></tr></table>.
• <script>Còdic d'un script integrat en la pàgina</script>.
• <header>Divisió estructural en la part del contingut.</header>

Nocions bàsiques d'HTML

El llenguage HTML pot ser creat i editat en qualsevol editor de texts bàsic, com pot ser Gedit en GNU/Linux, el Bloc de notes de Windows, o qualsevol atre editor que admeta text sense format com GNU Emacs, Microsoft Wordpad, TextPad, Vim, Notepad++, Atom, Visual Studio Code, entre molts uns atres.

Existixen, ademés, atres editors per a la realisació de llocs web en característiques WYSIWYG (What You See Is What You Get, o en espanyol: «lo que veus és lo que obtens»). Estos editors permeten vore el resultat de lo que s'està editant en temps real, a mida que es va desenrollant el document. Ara be, açò no significa una manera distinta de realisar llocs web, sino que una forma un tant més simple, ya que estos programes, ademés de tindre l'opció de treballar en la vista preliminar, té la seua pròpia secció HTML, la qual va generant tot el còdic a mida que es va treballant. Alguns eixemples d'editors WYSIWYG són KompoZer, Microsoft FrontPage o Atobó Dreamweaver.

Combinar estos dos métodos resulta molt interessant, ya que d'alguna manera s'ajuden entre sí. Per eixemple, si s'edita tot en HTML i el desenrollador oblida algun còdic o etiqueta, n'hi ha prou en dirigir-se a l'editor visual o WYSIWYG i es continua ahí l'edició o viceversa, ya que hi ha casos en que resulta més ràpit i fàcil escriure directament el còdic d'alguna característica que l'usuari desija adherir al lloc que buscar l'opció en el programa mateix.

Existix un atre tipo d'editors HTML cridats WYSIWYM que donen més importància al contingut i al significat que a l'apariència visual. Entre els objectius que tenen estos editors és la separació del contingut i la presentació, fonamental en el disseny web.

HTML utilisa etiquetes o marques, que consistixen en breus instruccions de començ i final, per mig de les quals es determina la forma en la que deu aparéixer en el seu navegador el text, aixina com també les imàgens i els demés elements, en la pantalla de l'ordenador.

Tota etiqueta s'identifica perque està tancada entre els signes menor que i major que (<>), i algunes tenen atributs que poden prendre algun valor. En general les etiquetes s'aplicaran de dos formes especials:

• S'òbrin i es tanquen, com per eixemple: <b>negreta</b>, que es voria en el seu navegador web com a negreta.
• No poden obrir-se i tancar-se, com <hr />, que es voria en el seu navegador web com una llínea horisontal.
• Unes atres que poden obrir-se i tancar-se, com per eixemple <p>.
• Les etiquetes bàsiques o mínimes són:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Eixemple1</title>
  </head>
  <body>
    <p>Paràgraf d'eixemple</p>
  </body>
</html>

Editors de texts

Per al desenroll web els programadors s'auxilien d'un editor de text. Estos normalment estan fets en la finalitat de facilitar la programació. Existixen actualment molts, com són estos: Notepad++, Atobó Dreamweaver, Sublim text, entre uns atres.

Deprendre HTML analisant pàgines reals

Seleccionant l'opció «vore còdic font» en el navegador, es pot vore realment l'informació que està rebent el navegador web i cóm l'està interpretant.

Per eixemple: en Internet Explorer, simplement cal desplegar el menú «vore» i després elegir «còdic font», mentres que en Chrome i Firefox pressionar Ctrl+O. D'esta forma, s'obrirà una pestanya en el còdic font de la pàgina que s'estiga veent en eixe moment en el navegador. Una atra forma més ràpida consistix en fer clic en el botó dret de la rata en qualsevol punt de l'àrea a on el navegador mostra la pàgina web i elegir «Vore còdic font de la pàgina».

A banda de poder vore el còdic font HTML d'una pàgina web en les opcions abans descrites, Internet Explorer, Firefox i Google Chrome incorporen també unes ferramentes conegudes com a inspectors de pàgina que es pot activar en F12.

En estes ferramentes és possible visualisar una pàgina web i seleccionar dins d'ella un element concret del com volem conéixer quin és el còdic HTML en el que està fet senyalant l'element en qüestió simplement en la rata. En fer açò, el còdic es mostrarà en un àrea especial dins del navegador en el que l'usuari podrà vore el còdic HTML en qüestió (vore image), ademés, de les regles CSS que apliquen a eixe còdic HTML en concret. Este tipo d'anàlisis resulta sumament instructivo per a deprendre a desenrollar en HTML.

Per al navegador Firefox, ademés, existix com a alternativa a la ferramenta nativa el plugin Firebug, molt similar a la ferramenta que Firefox incorpora per defecte.

Història de l'estàndart

En 1989 existien dos tècniques per a vincular documents electrònics: els hipervínculos o enllaços (hiperlinks o links) i, per un atre costat, un poderós llenguage d'etiquetes denominat SGML. En eixe llavors, Tim Berners-Lee, qui treballava en el Centre Europeu d'Investigacions Nuclears CERN va informar a la prensa sobre la seua llabor en un sistema que permetria accedir a fichers en llínea, funcionant sobre rets de computadores o màquines electròniques basades en el protocol TCP/IP. En el seu orige, va ser desenrollat per a compartir informació entre científics de distintes universitats i instituts d'investigació de tot lo món.

A principis de 1990, definix per fi l'HTML com un subconjunt del conegut SGML i crea alguna cosa més valiós, inclús, el World Wide Web.

Tim Berners-Lee va crear el proyecte World Wide Web (Teixit o Taranyina Mundial), junt en un sistema que facilitava la llectura d'informació a través un programa de navegació. Este programa, denominat WorldWideWeb, va anar el primer navegador web i es va desenrollar durant la segona mitat de l'any 1990; posteriorment va ser rebatejat com Nexus, per a evitar confusions per tindre el mateix nom que la tecnologia que representava. A est li varen seguir atres dos navegadors: el Line Mode Browser i el ViolaWWW. L'últim, desenrollat en 1992, va anar el primer navegador en popularisar-se entre els primers usuaris de la World Wide Web.

Pei-Yuan Wei va presentar el ViolaWWW, que funcionava en modo text i sobre un sistema operatiu UNIX.

Els treballs per a crear un successor de l'HTML, denominat HTML+, varen començar a finals de 1993. HTML+ va ser dissenyat originalment com un alvanç gradual des del format HTML anterior. La primera especificació formal d'HTML+ es va identificar en el número de versió 2 per a distinguir-la de les propostes no oficials prèvies. Encara que els esforços per a HTML+ varen continuar, mai es va convertir en un estàndart, a pesar de ser la proposta formalment més pareguda a l'aspecte compositivo de les especificacions actuals.

El borrador del estàndar HTML 3.0 va ser propost pel recent format W3C en març de 1995. Est va introduir moltes noves capacitats, com la creació de taules, el fluix de text al voltant de les figures i mostrar elements matemàtics complexos. Encara que es va dissenyar per a ser compatible en HTML 2.0, era massa complex per a ser implementat en la tecnologia de l'época. Quan el borrador de l'estàndart va expirar en setembre de 1995, es va abandonar per la falta de respal dels desenrolladors de navegadors web. El HTML 3.1 mai va aplegar a ser recomanat oficialment, i el següent estàndart va ser el HTML 3.2, que abandonava la majoria de les noves característiques del HTML 3.0 i, a canvi, adoptava molts elements desenrollats inicialment pels navegadors web Netscape i Mosaic. La possibilitat de treballar en fòrmules matemàtiques, que s'havia propost en l'HTML 3.0 es va integrar en un estàndart distint cridat MathML.

En 1997, es va publicar HTML 4.0 com una recomanació del W3C. Est va adoptar molts elements específics desenrollats inicialment per a un navegador web concret, pero al mateix temps va començar a netejar l'HTML, senyalant alguns d'elements com «desaprovats» (deprecated, en anglés).

HTML 4.0 implementa característiques com XForms 1.0 que no necessiten implementar motors de navegació incompatibles en algunes pàgines web HTML. En 2004, el W3C va reobrir el debat de l'evolució de l'HTML, i va presentar les bases per a la versió HTML5. No obstant, este treball va ser rebujat pels membres del W3C i es va donar preferència al desenroll del XML.

Apple, Mozilla i Opera varen anunciar el seu interés en seguir treballant en el proyecte baix el nom de WHATWG,basat en la compatibilitat en les tecnologies anteriors.

En 2006, el W3C va mostrar interés en el desenroll d'HTML5, i en 2007 es va unir al grup de treball del WHATWG per a unificar el proyecte.

Accessibilitat web

Artícul principal → Accessibilitat web.

El disseny en HTML, a banda de complir en les especificacions pròpies del llenguage, deu respectar certs criteris d'accessibilitat web, seguint unes pautes o les normatives i lleis vigents en els països a on es regule dit concepte. Es troba disponible i desenrollat pel W3C a través de les Pautes d'Accessibilitat al Contingut Web 1.0 WCAG (actualisades recentment en l'especificació 2.0), encara que molts països tenen especificacions pròpies, com és el cas d'Espanya en la Norma UNIX 139803.

Entitats HTML

Artícul principal → Anex:Referències a entitats de caràcters XML i HTML.

Molts caràcters especials, lletres en tilde, #diéresis o símbols d'escritura del llenguage poden representar-se en un document HTML tant per sí mateixos, com per una referència a una entitat. Entre les ventages d'usar una referència a entitat, estan la de poder representar caràcters Unicode usant una codificació de caràcters distinta, o per a suplir la falta d'alguns caràcters en el teclat usat.

Vore també

• Anex:Elements HTML
• Colors HTML
• Fulls d'estil en cascada o CSS
• JavaScript

Bibliografia

• Sergio Luján Mora (2001). Programació en Internet: Clients Web (lliure complet gratuït en pdflliure complet gratuït en pdf), 1ª edició, Editorial Club Universitari.
• Sergio Luján Mora (2002). Programació d'aplicacions web: història, principis bàsics i clients web (lliure complet gratuït en pdflliure complet gratuït en pdf), 1ª edició, Editorial Club Universitari.

Enllaços externs

Commons

• Wikimedia Commons alberga contingut multimèdia sobre HTML.

• Pàgina web principal d'HTML — estàndar d'html del W3C (anglés)
• Borrador actual d'especificacions d'HTML en la seua versió 5.