Desarrollado por “World Wide Web Consortium & WHATWG”
a principios de los años 90´s, se utiliza para describir y traducir la
estructura y la información en forma de texto, así como para complementar el
texto con objetos tales como imágenes.
El HTML se escribe en forma de «etiquetas»,
rodeadas por corchetes angulares (<,>). HTML también puede describir,
hasta un cierto punto, la apariencia de un documento, y puede incluir un script (archivo de órdenes), por ejemplo
JavaScript, el cual puede afectar el comportamiento de navegadores web y otros
procesadores de HTML.
En
la figura superior se puede apreciar la etiqueta <h6>, que hace
referencia al tamaño de la palabra ”Therion”, en este caso el más pequeño,
mientras que la <h1> representa el tamaño mas grande. También se ve como
colocando <strong> en el editor, en la figura inferior da como resultado
el texto enfatizado en negrita.
Puedes probar lo anterior abriendo el block de notas, escribiendo el código que se observa en la figura y guardando como "archivo.html", luego de eso lo abrimos con google chrome.
Historia de HTML
La primera descripción de HTML disponible
públicamente fue un documento llamado HTML Tags (Etiquetas HTML), publicado por
primera vez en Internet por Tim Berners-Lee en 1991. Describe 22 elementos
comprendiendo el diseño inicial y relativamente simple de HTML. Trece de estos
elementos todavía existen en HTML 4.
Berners-Lee
consideraba a HTML una ampliación de SGML ("Estándar de Lenguaje de
Marcado Generalizado), pero no fue formalmente reconocida como tal hasta la
publicación de mediados de 1993, por la IETF (Grupo Especial sobre Ingeniería
de Internet), de una primera proposición para una especificación de HTML: el
boceto Hypertext Markup Language de Berners-Lee y Dan Connolly, el cual incluía
una Definición de Tipo de Documento SGML para definir la gramática.
El boceto expiró luego de seis meses, pero fue
notable por su reconocimiento de la etiqueta propia del navegador Mosaic (segundo
navegador gráfico disponible para visualizar páginas web), usada para insertar
imágenes sin cambio de línea, reflejando la filosofía del IETF de basar estándares
en prototipos con éxito.
Marcado HTML
HTML
consta de varios componentes vitales, incluyendo elementos y sus atributos,
tipos de data, y la declaración de tipo de documento. A continuación se
describen dichos componentes:
Elementos
Son
la estructura básica de HTML y tienen dos propiedades fundamentales: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones
para que se considere válido al documento HTML.
Un elemento generalmente tiene una etiqueta de
inicio, (p.ej. <nombre-de-elemento>) y una etiqueta de cierre, (p.ej. </nombre-de-elemento>).
Los
atributos del elemento están contenidos en la etiqueta de inicio y el contenido
está ubicado entre las dos etiquetas (p.ej. <nombre-de-elemento atributo = "valor">
Contenido </nombre-de-elemento>). Algunos elementos, tales como <br>,
no tienen contenido ni llevan una etiqueta de cierre.
El
marcado estructural describe el
propósito del texto. Por ejemplo, <h2>Golf</h2>
establece a "Golf" como un encabezamiento de segundo nivel. El
marcado estructural no define cómo se verá el elemento, pero la mayoría de los
navegadores web han estandarizado el formato de los elementos. Un formato
específico puede ser aplicado al texto por medio de hojas de estilo en cascada.
El
marcado presentacional describe la apariencia del texto, sin importar su
función. 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 caso de
<b>negrita</b> e <i>itálica</i>, existen elementos que
se ven de la misma manera pero tienen una naturaleza más semántica: <strong>énfasis fuerte</strong>
y <em>énfasis</em>. Es
fácil ver cómo un lector de pantalla debería interpretar estos dos elementos.
Sin embargo, son equivalentes a sus correspondientes elementos
presentacionales: un lector de pantalla no debería decir más fuerte el nombre
de un libro, aunque éste esté en itálicas en una pantalla. La mayoría del
marcado presentacional ha sido desechado con HTML 4.0, en favor de Hojas de
estilo en cascada.
El marcado
hipertextual se utiliza para enlazar partes del documento con otros
documentos o con otras partes del mismo documento. Para crear un enlace es
necesario utilizar la etiqueta de ancla <a>
junto con el atributo href, que
establecerá la dirección URL a la que apunta el enlace. Por ejemplo, un enlace
a la Wikipedia sería de la forma <a
href=”es.wikipedia.org”>Wikipedia</a>. También se pueden crear
enlaces sobre otros objetos, tales como imágenes: <a href =”enlace”> <img
src=”imagen” /></a>.
Atributos
La
mayoría 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, después 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). De todas maneras, dejar los valores sin comillas es
considerado poco seguro. En contraste con los pares nombre-elemento, hay
algunos atributos que afectan al elemento simplemente por su presencia (tal
como el atributo ismap para el
elemento img).
Códigos HTML básicos
- <html>: define el inicio del documento HTML, le
indica al navegador que lo que viene a continuación debe ser
interpretado como código HTML.
- <script>: incrusta un script en una
web, o se llama a uno mediante src="url del script".
- <head>: define la cabecera del
documento HTML, esta cabecera suele contener información
sobre el documento que no se muestra directamente al usuario. Como
por ejemplo el título de la ventana del navegador. Dentro de la
cabecera <head> podemos encontrar:
- <title>: define el título de la página. Por lo
general, el título aparece en la barra de título encima de la ventana.
o <link>: para vincular el sitio a hojas de estilo o
iconos Por ejemplo: <linkrel
="stylesheet"href="/style.css"type ="text/css">
o <style>: para colocar el estilo interno de la página; ya sea
usando CSS (hojas de estilo en cascada), u otros lenguajes similares. No
es necesario colocarlo si se va a vincular a un archivo externo usando la
etiqueta <link>.
o <meta>: para metadatos como la autoría o la licencia, incluso
para indicar parámetros http (mediante http-equiv="") cuando no
se pueden modificar por no estar disponible la configuración o por dificultades
con server-side scripting.
- <body>: define 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 definirse propiedades comunes a
toda la página, como color de fondo y márgenes. Dentro del
cuerpo <body> podemos encontrar numerosas etiquetas. A
continuación se indican algunas a modo de ejemplo:
o <h1> a <h6>: encabezados o títulos del documento con diferente
relevancia.
o <table>: define una tabla.
§ <tr>: fila de una tabla.
§ <td>: celda de una tabla (Debe estar dentro de una fila).
- <a>: Hipervínculo o enlace, dentro o
fuera del sitio web. Debe definirse el parámetro de pasada por medio
del atributo href.
Ej.: <a href="http://www.wikipedia.org">Wikipedia</a> se
representa como Wikipedia).
- <div>: división de la página. Se recomienda,
junto con css, en vez de <table> cuando se desea alinear
contenido.
- <img>: imagen. Requiere del atributo src,
que indica la ruta en la que se encuentra la imagen. Por
ejemplo: <img src="./imágenes/mifoto.jpg" />. Es
conveniente, por accesibilidad, poner un atributo alt="texto
alternativo".
- <li><ol><ul>: Etiquetas para listas.
- <b>: texto en negrita (Etiqueta
desaprobada. Se recomienda usar la etiqueta <strong>).
- <i>: texto en cursiva (Etiqueta
desaprobada. Se recomienda usar la etiqueta <em>).
- <s>: texto tachado (Etiqueta
desaprobada. Se recomienda usar la etiqueta <del>).
- <u>: texto subrayado.
La
mayoría de etiquetas deben cerrarse como se abren, pero con una barra
("/") tal como se muestra en los siguientes ejemplos:
- <table><tr><td>Contenido
de una celda</td></tr></table>
- <script>Código
de un [[script]] integrado en la página</script>.
