Evolución de la tecnología en la educación

Iniciación al lenguaje HTML

Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, vídeos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación.

Podríamos decir que HTML sirve para crear páginas web, darles estructura y contenido. Un ejemplo sencillo de código HTML podría ser:

<html>

<body>

Esto es un párrafo. Bienvenidos a esta página web.

</body>

</html>

Este ejemplo está formado por 3 etiquetas HTML. Como podemos observar cada una de las etiquetas debe acabar con su homóloga de cierre. En este caso la etiqueta <html> debe cerrarse con </html>, la etiqueta <body> con </body> y la etiqueta con .

Hay muchas más etiquetas que veremos más adelante pero nos debe quedar claro que por cada etiqueta que abramos, deberemos incluir la correspondiente etiqueta de cierre. Así conseguiremos un código HTML bien formado y que los navegadores puedan interpretar sin ambigüedad.

Este sencillo ejemplo mostraría por pantalla lo siguiente.

¿Qué ocurriría si una etiqueta que abramos no tiene su correspondiente cierre? Digamos que se trataría de un código HTML mal construido, y los navegadores esto lo pueden interpretar de distintas maneras. Quizás nos muestren la página tal y como esperábamos sin aparente error. Quizás nos muestren una página de error o se quede en blanco el navegador. Nuestro objetivo ha de ser siempre construir páginas HTML bien estructuradas y sin ambigüedades, es decir, hacer un correcto uso del lenguaje para que los navegadores puedan saber exactamente qué es lo que pretendemos mostrar.

Historia

HTML nació públicamente en un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. En esta publicación se describen 22 etiquetas que mostraban un diseño inicial y relativamente simple de HTML. Varios de estos elementos se conservan en la actualidad. Otros se han dejado de usar, y muchos otros se han ido añadiendo con el paso de los años. De esta manera, podemos hablar de que han existido distintas versiones de HTML a lo largo de la historia de internet. Nosotros vamos a trabajar con el HTML estándar actual, que es el utilizado por los navegadores y páginas web de hoy en día. Sin embargo, no vamos a prestarle atención a las versiones y especificidades de cada versión, ya que el objetivo de este curso es aprender los fundamentos de HTML y entender cómo funciona, no conocer la sintaxis o especificidades de una versión concreta. ¿Por qué no le damos importancia a la versión? Porque una persona que cuenta con los fundamentos y comprensión básica sobre el lenguaje es capaz de adaptarse a las características particulares de una versión sin problema. En cambio, centrarse en los detalles de una versión sin conocer los fundamentos hará que no tengamos capacidad para comprender lo que hacemos ni para adaptarnos a los continuos cambios que tienen lugar en el ámbito de los desarrollos web.

Elementos

Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: 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 (por ejemplo, <nombre-de-elemento>) y una etiqueta de cierre (por ejemplo, </nombre-de-elemento>). Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas (por ejemplo, <nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento>). Algunos elementos, tales como  , no tienen contenido ni llevan una etiqueta de cierre. Debajo se listan varios tipos de elementos de marcado usados en HTML.

Atributos

En su 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 del elemento. 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. Esto es así de facto, ya que en teoría lo que define el tipo de documento es el DOCTYPE, que significa la palabra justo tras DOCTYPE el tag de raíz.
<script>: incrusta un script en una web, o llama a uno mediante src="url del script". Se recomienda incluir el tipo MIME en el atributo type, en el caso de JavaScript text/javascript.
<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> es posible encontrar:
- <link>: para vincular el sitio a hojas de estilo o iconos. Por ejemplo:<link rel="stylesheet" href="/style.css" type="text/css"><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.

Entidades HTML

Los caracteres especiales como signo de puntuación, letras con tilde o diéresis o símbolos de escritura del lenguaje se deben convertir en entidad HTML para mostrarse en un navegador. La siguiente es una lista de caracteres españoles y su correspondiente entidad HTML:

Carácter	Entidad HTML	Carácter	Entidad HTML
á	á	Á	Á
é	é	É	É
í	í	Í	Í
ó	ó	Ó	Ó
ú	ú	Ú	Ú
ü	ü	Ü	Ü
ñ	ñ	Ñ	Ñ
¡	¡	¿	¿

Vínculos HTML

HTML ofrece muchas de las posibilidades de publicación convencionales para la creación de textos enriquecidos y documentos estructurados, pero lo que lo separa de la mayoría de los otros lenguajes para el formato de documentos son sus características para hipertexto y para documentos interactivos. Esta sección presenta el vínculo (o enlace, o hipervínculo), la estructura básica del hipertexto. Un vínculo es una conexión desde un recurso web a otro. Aunque es un concepto simple, el vínculo ha sido una de las principales fuerzas que ha hecho posible el éxito de la Web.

Un vínculo tiene dos extremos (llamados en inglés anchors, anclas), y una dirección. El vínculo comienza en el "ancla de origen" (origen del vínculo) y apunta al "ancla destino" (destino del vínculo), que puede ser cualquier recurso de la Web (p.ej., una imagen, un videoclip, un archivo de sonido, un programa, un documento HTML, un elemento dentro de un documento HTML, etc.).

Especificación de vínculos

Aunque algunos elementos y atributos de HTML crean vínculos a otros recursos (p.ej., el elemento IMG, el elemento FORM, etc.), este capítulo se refiere a los vínculos creados con los elementos LINK y A. El elemento LINK sólo puede aparecer en la cabecera del documento. El elemento A sólo puede aparecer en el cuerpo.

Si el atributo href del elemento A tiene algún valor, el elemento define un origen de vínculo que puede ser activado por el usuario para obtener un recurso de la Web. El origen del vínculo está en el lugar donde aparece el elemento A y el destino del vínculo es el recurso web.

El agente de usuario puede manipular el recurso obtenido de diferentes maneras: abriendo un nuevo documento HTML en la misma ventana del agente de usuario, abriendo un nuevo documento HTML en una ventana diferente, iniciando un nuevo programa que maneje el recurso, etc. Como el elemento A tiene contenido (texto, imágenes, etc.), los agentes de usuario pueden representar este contenido de modo tal que se indique la presencia de un vínculo (p.ej., subrayando el contenido).

Si el atributo name o el atributo id del elemento A toman algún valor, el elemento define un posible destino de otros vínculos.

Los autores pueden establecer los atributos name y href de un mismo elemento A simultáneamente.

El elemento LINK define una relación entre el documento actual y otro recurso. Aunque LINK no tiene contenido, la relación que define puede ser representada por algunos agentes de usuario.

Títulos de vínculos

Se puede especificar el atributo title tanto para A como para LINK para añadir información sobre la naturaleza de un vínculo. Esta información puede ser pronunciada por un agente de usuario, representada como una indicación visual ("tool-tip"), producir un cambio en la imagen del cursor, etc.

Así, podemos desarrollar uno de los ejemplos anteriores proporcionando un título
para cada vínculo:

<BODY>
...texto...
<P>Encontrarás mucho más en el <A href="capitulo2.html"
       title="Ir al capítulo 2">capítulo dos</A>.
<A href="./capitulo2.html"
       title="Obtener capítulo dos.">capítulo dos</A>. 
Mira también este <A href="../imagenes/bosque.gif"
       title="imagen GIF del bosque encantado">mapa del
bosque encantado.</A>
</BODY>

Creado por: Luis González y Andria Batista