Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
HTML, siglas de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al
lenguaje de marcado para la elaboracin de pginas web.
Es un estndar que sirve de referencia para la elaboracin
de pginas web en sus diferentes versiones, dene una estructura bsica y un cdigo (denominado cdigo HTML)
para la denicin de contenido de una pgina web, como
texto, imgenes, videos, entre otros. Es un estndar a cargo de la W3C, organizacin dedicada a la estandarizacin
de casi todas las tecnologas ligadas a la web, sobre todo
en lo referente a su escritura e interpretacin.
1 Historia de HTML
1.1 Primeras especicaciones
Tim Berners-Lee (TBL) en 1991[1][2] describe 22 elementos que incluyen el diseo inicial y relativamente simple de HTML. Trece de estos elementos todava existen
El lenguaje HTML basa su losofa de desarrollo en la en HTML 4.[3]
referenciacin. Para aadir un elemento externo a la pgina (imagen, vdeo, script, entre otros.), este no se in- Berners-Lee consideraba el HTML una ampliacin de
crusta directamente en el cdigo de la pgina, sino que se SGML, pero no fue formalmente reconocida como tal
hace una referencia a la ubicacin de dicho elemento me- hasta la publicacin a mediados de 1993, por la IETF
diante texto. De este modo, la pgina web contiene slo (en espaol: Grupo de Trabajo de Ingeniera de Intertexto mientras que recae en el navegador web (interpre- net), de una primera proposicin para una especicatador del cdigo) la tarea de unir todos los elementos y cin del HTML: el borrador del Hypertext Markup Lanvisualizar la pgina nal. Al ser un estndar, HTML bus- guage de Berners-Lee y Dan Connolly, que inclua una
ca ser un lenguaje que permita que cualquier pgina web Denicin de Tipo de Documento SGML para denir la
[4]
escrita en una determinada versin, pueda ser interpreta- gramtica. El borrador expir a los seis meses, pero fue
da de la misma forma (estndar) por cualquier navegador notable por su reconocimiento de la etiqueta propia del
navegador Mosaic usada para insertar imgenes sin camweb actualizado.
bio de lnea, que reejaba la losofa del IETF de basar
Sin embargo, a lo largo de sus diferentes versiones, se han estndares en prototipos con xito. [5] De la misma maincorporado y suprimido diversas caractersticas, con el nera, el borrador competidor de Dave Raggett HTML+
n de hacerlo ms eciente y facilitar el desarrollo de p- (Hypertext Markup Format) (Formato de Marcaje de Higinas web compatibles con distintos navegadores y plata- pertexto), de nales de 1993, sugera estandarizar caracformas (PC de escritorio, porttiles, telfonos inteligen- tersticas ya implementadas, como las tablas.[6]
tes, tabletas, etc.). Sin embargo, para interpretar correctamente una nueva versin de HTML, los desarrolladores de navegadores web deben incorporar estos cambios
y el usuario debe ser capaz de usar la nueva versin del 2 Marcado HTML
navegador con los cambios incorporados. Normalmente
los cambios son aplicados mediante parches de actualiza- El HTML se escribe en forma de etiquetas, rodeadas
cin automtica (Firefox, Chrome) u ofreciendo una nue- por corchetes angulares (<,>). El HTML tambin puede
va versin del navegador con todos los cambios incorpo- describir, hasta un cierto punto, la apariencia de un dorados, en un sitio web de descarga ocial (Internet Explo- cumento, y puede incluir o hacer referencia a un tipo de
rer). Un navegador no actualizado no ser capaz de inter- programa llamado script, el cual puede afectar el compretar correctamente una pgina web escrita en una ver- portamiento de navegadores web y otros procesadores de
[7]
sin de HTML superior a la que pueda interpretar, lo que HTML.
obliga muchas veces a los desarrolladores a aplicar tc- HTML tambin sirve para referirse al contenido del tipo
nicas y cambios que permitan corregir problemas de vi- de MIME text/html o todava ms ampliamente como un
sualizacin e incluso de interpretacin de cdigo HTML. trmino genrico para el HTML, ya sea en forma desAs mismo, las pginas escritas en una versin anterior cendida del XML (como XHTML 1.0 y posteriores) o en
de HTML deberan ser actualizadas o reescritas, lo que forma descendida directamente de SGML (como HTML
no siempre se cumple. Es por ello que ciertos navegadores 4.01 y anteriores).
an mantienen la capacidad de interpretar pginas web de
versiones HTML anteriores. Por estas razones, an exis- HTML consta de varios componentes vitales, entre ellos
los elementos y sus atributos, tipos de data y la declaracin
1
de tipo de documento.
2.1
Elementos
2.2 Atributos
La mayora de los atributos de un elemento son pares
nombre-valor, separados por un signo de igual = y escritos en la etiqueta de comienzo de un elemento, despus del nombre de ste. El valor puede estar rodeado
por comillas dobles o simples, aunque ciertos tipos de
valores pueden estar sin comillas en HTML (pero no
en XHTML).[8][9] De todas maneras, dejar los valores
sin comillas es considerado poco seguro.[10] En contraste con los pares nombre-elemento, hay algunos atributos
que afectan al elemento simplemente por su presencia[11]
(tal como el atributo ismap para el elemento img).[12]
El marcado presentacional describe la apariencia del texto, sin importar su funcin. Por ejemplo, <b>negrita</b>
indica que los navegadores web visuales deben mostrar
el texto en negrita, pero no indica qu deben hacer los
navegadores web que muestran el contenido de otra manera (por ejemplo, los que leen el texto en voz alta). En el
Un ejemplo de cdigo HTML con coloreado de sintaxis.
caso de <b>negrita</b> e <i>itlica</i>, existen elementos que se ven de la misma manera pero tienen una naturaleza ms semntica: <strong>nfasis fuerte</strong> y
<html>: dene el inicio del documento HTML, le
<em>nfasis</em>. Es fcil ver cmo un lector de pantaindica al navegador que lo que viene a continuacin
lla debera interpretar estos dos elementos. Sin embargo,
debe ser interpretado como cdigo HTML. Esto es
son equivalentes a sus correspondientes elementos preas de facto, ya que en teora lo que dene el tipo de
sentacionales: un lector de pantalla no debera decir ms
documento es el DOCTYPE, que signica la palabra
fuerte el nombre de un libro, aunque ste est en itlicas
justo tras DOCTYPE el tag de raz.
en una pantalla. La mayora del marcado presentacional
<script>: incrusta un script en una web, o llama a
ha sido desechada con HTML 4.0, en favor de hojas de
uno mediante src="url del script. Se recomienda inestilo en cascada.
3
cluir el tipo MIME en el atributo type, en el caso de
JavaScript text/javascript.
<head>: dene la cabecera del documento HTML;
esta cabecera suele contener informacin sobre
el documento que no se muestra directamente al
usuario como, por ejemplo, el ttulo de la ventana
del navegador. Dentro de la cabecera <head> es posible encontrar:
<title>: dene el ttulo de la pgina. Por lo general, el ttulo aparece en la barra de ttulo encima de la ventana.
<link>: para vincular el sitio a hojas de estilo o iconos. Por ejemplo:<link rel="stylesheet
href="/style.css type="text/css">.
<style>: para colocar el estilo interno de la pgina; ya sea usando CSS u otros lenguajes similares. No es necesario colocarlo si se va a La mayora de etiquetas deben cerrarse como se abren,
vincular a un archivo externo usando la etique- pero con una barra (/) tal como se muestra en los siguientes ejemplos:
ta <link>.
<meta>: para metadatos como la autora o la
licencia, incluso para indicar parmetros http
(mediante http-equiv="") cuando no se pueden
modicar por no estar disponible la conguracin o por dicultades con server-side scripting.
<body>: dene el contenido principal o cuerpo del
documento. Esta es la parte del documento html que
se muestra en el navegador; dentro de esta etiqueta
pueden denirse propiedades comunes a toda la pgina, como color de fondo y mrgenes. Dentro del
cuerpo <body> es posible encontrar numerosas etiquetas. A continuacin se indican algunas a modo
de ejemplo:
<table><tr><td>Contenido
da</td></tr></table>.
de
una
cel-
<h1> a <h6>: encabezados o ttulos del docuExisten, adems, otros editores para la realizacin de simento con diferente relevancia.
tios web con caractersticas WYSIWYG (What You See
<table>: dene una tabla.
Is What You Get, o en espaol: lo que ves es lo que obtienes). Estos editores permiten ver el resultado de lo que
<tr>: la de una tabla.
<td>: celda de una tabla (debe estar den- se est editando en tiempo real, a medida que se va desarrollando el documento. Ahora bien, esto no signica una
tro de una la).
manera distinta de realizar sitios web, sino que una for <a>: hipervnculo o enlace, dentro o fue- ma un tanto ms simple, ya que estos programas, adems
ra del sitio web. Debe denirse el parme- de tener la opcin de trabajar con la vista preliminar, tietro de pasada por medio del atributo href. ne su propia seccin HTML, la cual va generando todo
Por ejemplo: <a href="http://www.example. el cdigo a medida que se va trabajando. Algunos ejemcom" title="Ejemplo target="_blank tabin- plos de editores WYSIWYG son KompoZer, Microsoft
dex="1">Ejemplo</a> se representa como FrontPage o Adobe Dreamweaver.
Ejemplo).
Combinar estos dos mtodos resulta muy interesante, ya
<div>: divisin de la pgina. Se recomienda, que de alguna manera se ayudan entre s. Por ejemplo,
junto con css, en vez de <table> cuando se si se edita todo en HTML y el desarrollador olvida aldesea alinear contenido.
gn cdigo o etiqueta, basta con dirigirse al editor visual
<img>: imagen. Requiere del atributo o WYSIWYG y se contina ah la edicin o viceversa,
src, que indica la ruta en la que se en- ya que hay casos en que resulta ms rpido y fcil escricuentra la imagen. Por ejemplo: <img bir directamente el cdigo de alguna caracterstica que el
En 1989 existan dos tcnicas que permitan vincular documentos electrnicos, por un lado los hipervnculos (enlaces) y por otro lado un poderoso lenguaje de etiquetas denominado SGML. Por entonces, Tim Berners-Lee,
quien trabajaba en el Centro Europeo de Investigaciones Nucleares CERN da a conocer a la prensa que estaba trabajando en un sistema que permitir acceder a
cheros en lnea que funcionaba sobre redes de computadoras o mquinas electrnicas basadas en el protocolo
TCP/IP. Inicialmente fue desarrollado para que se pueda compartir fcilmente informacin entre cientcos de
distintas universidades e institutos de investigacin de todo el mundo.[15]
HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y nal, mediante las cuales se determina la forma en la que debe aparecer en su
navegador el texto, as como tambin las imgenes y los
dems elementos, en la pantalla del ordenador.
<b>negrita</b>, que se vera en su navegador Tim Berners-Lee, cre el proyecto World Wide Web (Teweb como negrita.
jido o Telaraa Mundial), as como un sistema que faci No pueden abrirse y cerrarse, como <hr />, que se litaba la lectura de informacin, mediante un programa
vera en su navegador web como una lnea horizon- de navegacin. ste sera el primer navegador Web, llamado WorldWideWeb, y desarrollado durante la seguntal.
da mitad del ao 1990; siendo tiempo despus rebauti Otras que pueden abrirse y cerrarse, como por ejem- zado como Nexus para evitar confusiones por su nombre
plo <p>.
que era igual al de la tecnologa que representaba. Le siguieron otros dos navegadores: el Line Mode Browser y
Las etiquetas bsicas o mnimas son:
el ViolaWWW. Este ltimo, desarrollado en 1992, fue
entre los primeros
<!DOCTYPE
HTML>
<html>
<head> el primer navegador en popularizarse
[16]
usuarios
de
la
World
Wide
Web.
<title>Ejemplo1</title>
</head>
<body>
<p>ejemplo1</p> </body> </html>
Saber ms
Seleccionando la opcin ver cdigo fuente en el navegador, se puede ver realmente la informacin que est
recibiendo ste y cmo la est interpretando. Por ejemplo: en Internet Explorer o en Firefox, simplemente hay
que desplegar el men ver y luego elegir cdigo fuente, mientras que en Chrome presionar CTRL + U. De
esta forma, se abrir el editor de texto congurado como
predeterminado en el sistema con el cdigo fuente de la
pgina que se est viendo en ese momento en el explorador. Otra forma ms rpida consiste en hacer clic con el
botn derecho del ratn en cualquier punto del rea donde
el navegador muestra la pgina web y elegir ver cdigo
fuente.
Para el navegador Firefox existe el plugin Firebug, un depurador que permite entre otras cosas visualizar el cdigo
HTML de la pgina que estamos visualizando de forma
dinmica, y que incluso resalta el trozo de cdigo por el
que est pasando el ratn en cada momento, por lo que
es una herramienta muy til para aprender diversos conceptos de este lenguaje.
Pei-Yuan Wei present el ViolaWWW,[17] que funcionara en modo texto y sobre un sistema operativo UNIX.
Los trabajos para crear un sucesor del HTML, denominado HTML +, comenzaron a nales de 1993. HTML+
se dise originalmente para ser un superconjunto del
HTML que permitiera evolucionar gradualmente desde
el formato HTML anterior. A la primera especicacin
formal de HTML+ se le dio, por lo tanto, el nmero de
versin 2 para distinguirla de las propuestas no ociales
previas. Los trabajos sobre HTML+ continuaron, pero
nunca se convirti en un estndar, a pesar de ser la base
formalmente ms parecida al aspecto compositivo de las
especicaciones actuales.
El borrador del estndar HTML 3.0 fue propuesto por
el recin formado W3C en marzo de 1995. Con l se
introdujeron muchas nuevas capacidades; por ejemplo,
facilidades para crear tablas, hacer que el texto uyese
alrededor de las guras y mostrar elementos matemticos complejos. Aunque se dise para ser compatible con
HTML 2.0, era demasiado complejo para ser implementado con la tecnologa de la poca, y cuando el borrador
del estndar expir en septiembre de 1995, se abandon debido a la carencia de apoyos de los fabricantes de
navegadores web. El HTML 3.1 nunca lleg a ser propuesto ocialmente, y el estndar siguiente fue el HTML
3.2, que abandonaba la mayora de las nuevas caracte-
5
rsticas del HTML 3.0 y, a cambio, adoptaba muchos
elementos desarrollados inicialmente por los navegadores web Netscape y Mosaic. La posibilidad de trabajar
con frmulas matemticas que se haba propuesto en el
HTML 3.0 pas a quedar integrada en un estndar distinto llamado MathML.
En 1997, HTML 4.0 se public como una recomendacin
del W3C. HTML 4.0 adopt muchos elementos especcos desarrollados inicialmente para un navegador web
concreto, pero al mismo tiempo comenz a limpiar el
HTML sealando algunos de ellos como desaprobados
o deprecated en ingls.
HTML 4.0 implementa caractersticas como XForms 1.0
que no necesitan implementar motores de navegacin que
eran incompatibles con algunas pginas web HTML. En
2004 la W3C reabri el debate de la evolucin del HTML,
y se dieron a conocer las bases para la versin HTML5.
No obstante, este trabajo fue rechazado por los miembros
del W3C y se dara preferencia al desarrollo del XML.
Apple, Mozilla y Opera anunciaron su inters en seguir trabajando en el proyecto bajo el nombre de
WHATWG,[18] que se basa en la compatibilidad con tecnologas anteriores.
En 2006, el W3C se interes en el desarrollo de HTML5,
y en 2007 se uni al grupo de trabajo del WHATWG para
unicar el proyecto.
Accesibilidad web
El diseo en HTML, aparte de cumplir con las especicaciones propias del lenguaje, debe respetar ciertos criterios
de accesibilidad web, siguiendo unas pautas o las normativas y leyes vigentes en los pases donde se regule dicho
concepto. Se encuentra disponible y desarrollado por el
W3C a travs de las Pautas de Accesibilidad al Contenido Web 1.0 WCAG (actualizadas recientemente con la
especicacin 2.0[19] ), aunque muchos pases tienen especicaciones propias, como es el caso de Espaa con la
Norma UNE 139803.[20]
10 Referencias
[1] HTML Tags. World Wide Web Consortium. Consultado el 8 de abril de 2007.
[2] First mention of HTML Tags on the www-talk mailing
list. World Wide Web Consortium. 29 de octubre de
1991. Consultado el 8 de abril de 2007.
[3] Index of elements in HTML 4. World Wide Web Consortium. 24 de diciembre de 1999. Consultado el 8 de abril
de 2007.
[4] Tim Berners-Lee (9 de diciembre de 1991). Re:
SGML/HTML docs, X Browser (archived www-talk mailing list post). Consultado el 16 de junio de 2007.
SGML is very general. HTML is a specic application
of the SGML basic syntax applied to hypertext documents
with simple structure.
[5] Raymond, Eric. IETF and the RFC Standards Process.
The Art of Unix Programming. In IETF tradition, standards have to arise from experience with a working prototype implementation but once they become standards, code that does not conform to them is considered
broken and mercilessly scrapped. Internet-Drafts are
not specications, and software implementers and vendors
are specically barred from claiming compliance with
them as if they were specications. Internet-Drafts are
focal points for discussion, usually in a working group
Once an Internet-Draft has been published with an RFC
number, it is a specication to which implementers may
claim conformance. It is expected that the authors of the
RFC and the community at large will begin correcting the
specication with eld experience.
[6] HTML+ Internet-Draft - Abstract. Browser writers
are experimenting with extensions to HTML and it is now
appropriate to draw these ideas together into a revised document format. The new format is designed to allow a gradual roll over from HTML, adding features like tables,
captioned gures and ll-out forms for querying remote
databases or mailing questionnaires.
[7] El lenguaje HTML
Entidades HTML
[8] www.w3.org/TR/html401/intro/sgmltut.html#h-3.2.2.
Vase tambin
[12] www.w3.org/TR/1999/REC-html401-19991224/
struct/objects.html#adef-ismap.
Anexo:Etiquetas HTML/XHTML
Colores HTML
12 ENLACES EXTERNOS
[15] Where the Web was born - Donde la Web naci. Sitio ocial del CERN (en ingls)
[16] Curso de HTML.. Consultado el 5 de marzo de 2014.
[17] (en ingls) ViolaWWW Hypertext Browser. W3C.
Consultado el 3 de marzo de 2014.
[18] Pgina web de WHATWG
[19] Web Content Accessibility Guidelines (WCAG) 2.0.
[20] Norma UNE 139803
11
Bibliografa
Sergio Lujn Mora (2001). Programacin en Internet: Clientes Web (libro completo gratuito en pdf) (1
edicin). Editorial Club Universitario.
Sergio Lujn Mora (2002). Programacin de aplicaciones web: historia, principios bsicos y clientes web
(libro completo gratuito en pdf) (1 edicin). Editorial Club Universitario.
12
Enlaces externos
Wikimedia Commons alberga contenido multimedia sobre HTML. Commons
Wikilibros
13
13.1
13.2
Images
13.3
Content license