TEMA 2

UTILIZACIÓN DE LENGUAJES DE MARCAS EN ENTORNOS WEB

2.1. EVOLUCIÓN HISTÓRICA

Los lenguajes de marcas se empezaron a utilizar a finales de los años 60, permitiendo
introducir anotaciones en documentos electrónicos. Esta posibilidad de añadir anotaciones
o marcas es de donde recibe su nombre.
En esta década se estandariza el lenguaje SGML (Standard Generalized Markup
Language), dando lugar a la posibilidad de compartir información a través de sistemas
informáticos. Lamentablemente, este estándar no consiguió asentarse debido a su
complejidad.
Cuando hablamos del origen del HTML nos remontamos al año 1980, cuando el físico Tim
Berners-Lee, que trabajaba para CERN (Organización Europea para la Investigación
Nuclear), propone un nuevo sistema de hipertexto para compartir información utilizando
redes de computadoras y a través de Internet.
Estos sistemas de hipertexto ya se habían desarrollado con anterioridad, aunque en el
ámbito de la informática, cuando hablamos de hipertexto nos referimos a que los usuarios
puedan acceder a la información que esté relacionada con aquellos documentos
electrónicos que están visibles. Así, los hipertextos iniciales se asimilaban a los enlaces a
las distintas páginas web.
Años después, Tim Bereners-Lee se une al ingeniero de sistemas Robert Cailliau, con el
que gana la propuesta World Wide Web (W3):
• En 1991 se presenta el primer documento con descripción de HTML y bajo el nombre
HTML Tags (Etiquetas
HTML).
• En 1993 se presenta la primera propuesta oficial para convertir HTML en un estándar.
Aunque existieron avances
muy significativos al definirse las etiquetas de imágenes,
las tablas y los formularios, no se llegó a conseguir que
este fuera el estándar oficial.
• Ya en 1995, es el organismo IETF el que se encarga de
poner en marcha un grupo para trabajar con HTML y es
cuando se consigue publicar, el 22 de septiembre de
1995, el estándar HTML 2.0, siendo este el primer estándar oficial de HTML.
• A partir de 1996, los diferentes estándares de HTML
los publica otro organismo distinto, denominado W3C
(World Wide Web Consortium), llegando a publicar la
versión HTML 3.2 el 14 de enero de 1997. Esta fue la primera recomendación de HTML que
publicó W3C.
• Con la versión HTML 4.0, publicada el 24 de abril de
1998, se consiguieron numerosos avances sobre las

versiones anteriores. Apareció la posibilidad de añadir

pequeños programas (scripts) en las páginas web, con lo
que se consiguió mejorar la accesibilidad de las páginas
que ya estaban diseñadas, trabajar mediante la utilización de tablas más complejas y
mejorar los formularios.
La publicación de HTML 4.01 en 1999 se basó, sobre
todo, en revisar publicaciones anteriores, pero no añadió
avances significativos. Se detuvo un poco el desarrollo de
HTML para centrarse más en el estándar XHTML.
Sobre el año 2004 y debido a este parón que existió, algunas empresas como Apple,
Mozilla y Opera empezaron
a mostrar su preocupación por la falta de interés denle el
W3C de HTML. Fue entonces cuando empezaron a organizar una nueva asociación
denominada WHATWG (Web
Hypertext Application Technology Working Group).
De forma paralela, se seguía avanzando en la estandarización de XHTML (versión
avanzada de HTML basada en
XML), publicando su primera versión en enero del 2000.
XHTML 1.0 está basado en la adaptación de HTML 4.01
al lenguaje XML, por lo que utiliza sus mismas etiquetas
y muchas de sus características, aunque añade algunas
nuevas.
Las versiones XHTML 1.1 y XHTML 2.0 se publicaron en
forma de borrador con la intención de poder modularizar
XHTML.
En marzo de 2007 se publicaron distintos borradores de
HTML 5.0.
El 22 de enero de 2008 se publicó el primer borrador oficial del estándar HTML5.

2.2. IDENTIFICACIÓN DE ETIQUETAS Y ATRIBUTOS DE

HTML
HTML (Hypertext Markup Language) es un lenguaje de marcas que nos permite desarrollar
diferentes páginas web. Para poder desarrollar una página web necesitamos:
• Un editor de textos mediante el que vamos a añadir el
contenido que pretendemos mostrar.
• Un navegador web con el que podemos visualizar el contenido de la página.
Todos aquellos ficheros que contengan documentos HTML van a tener como extensión
.html y .htm.
Existen diferentes editores de textos para el desarrollo de una página web. Más adelante
veremos con más detalle los editores y otras herramientas de desarrollo web.
Cuando hayamos desarrollado los documentos HTML y tengamos la página web lista para
su posterior publicación en internet, vamos a necesitar un servidor de páginas web en el
que podamos almacenar las distintas páginas.
El servidor web es un software que se encuentra en el propio ordenador y debe estar
conectado siempre a internet. Cuando pongamos las páginas en el servidor, ya serán
accesibles para todos los usuarios que pertenezcan a la misma red.
Existen proveedores de servicios de Internet que ofrecen a sus clientes sitios web
gratuitos, para que puedan publicar sus páginas web personales o corporativas y, de esta
forma, evitar la instalación de un servidor web propio.
Al igual que en XML, un documento HTML es un conjunto de nodos enlazados de manera
jerárquica en forma de árbol. Los elementos HTML son sus componentes principales. Es
decir, un elemento HTML es un nodo del árbol.
Un elemento HTML está formado por sus etiquetas, un contenido y unos atributos
opcionales. Los atributos son las especificaciones o caracterizaciones de los elementos. Es
decir, los atributos otorgan una serie de propiedades a los elementos.
El contenido es la información en formato texto que está entre las etiquetas de apertura y
cierre.

2.2.1. ETIQUETAS Y ATRIBUTOS

Los elementos HTML poseen una sintaxis y unas normas determinadas. Para que un
documento HTML sea válido deben respetarse dichas normas.
No todos los elementos tienen la misma estructura, pero de manera general, la
composición de un elemento HTML es la siguiente:

Como podemos observar, las etiquetas delimitan el elemento, estando el atributo dentro de
la misma etiqueta y el contenido entre la etiqueta de apertura y la de cierre.

Etiquetas

Las etiquetas, también conocidas como marcas, definen una serie de elementos que
forman el léxico del lenguaje HTML. Cada etiqueta se representa entre los signos de menor
que (<) y mayor que (>). Podemos diferenciar entre dos tipos de etiquetas: cerradas y
abiertas.

• Etiquetas cerradas: constan de una etiqueta para la apertura que indica el comienzo
de la etiqueta y otra de cierre
que indica que hemos terminado de trabajar con la etiqueta en cuestión y lleva el símbolo /
antes del nombre.
Por ejemplo:

<p> El hombre llegó a la luna el 24 de julio de 1969 </p>

La etiqueta <p> es la de apertura y la etiqueta </p> es la
de cierre.

• Etiquetas abiertas: cuentan con una única palabra reservada para indicar el inicio y fin
de la etiqueta a la vez.

Por ejemplo:

<hr>
<br>
<img>

Atributos
Los atributos modifican el significado de un elemento HTML o incluso pueden proveerle de
funcionalidad. Las etiquetas pueden contener atributos si necesitan realizar alguna
configuración sobre una característica determinada. Existen atributos obligatorios y
atributos opcionales, lo cual dependerá de la etiqueta HTML en la que se sitúen.
Respecto a la sintaxis, los atributos, al igual que las etiquetas, se pueden definir tanto en
mayúsculas como en minúsculas, aunque los valores que se asignen a los atributos son
sensibles a mayúsculas o minúsculas. Por ello, es recomendable utilizar siempre
minúsculas para etiquetas y atributos. De esta forma, evitaremos confusiones.
Los atributos se colocan en el interior de la etiqueta de apertura, después del nombre de la
etiqueta y separados por un espacio en blanco. Por tanto, el atributo se coloca antes del
signo de cierre de la etiqueta de apertura.
Los atributos se componen por un conjunto de palabras nombre-valor: esto es, el nombre
que define qué atributo se va a usar y su valor asignado correspondiente. Ambas palabras
se separan mediante el signo =. Por ejemplo:

<p align = “left”>

En este caso, tenemos la etiqueta <p> correspondiente a párrafo junto al atributo align =
left, que indica que la alineación del texto de dicho párrafo estará a la izquierda. Es
recomendable poner el valor entre comillas dobles para que sea más legible.

Cada etiqueta cuenta con una serie de atributos con sus

correspondientes valores, pero hay atributos que pueden
usarse en diferentes etiquetas. Una etiqueta HTML puede
tener varios atributos a la vez. Por ejemplo:

href=“http://www.myweb.com” target=”_blank”> Esto es un link

2.3. ESTRUCTURA BÁSICA

Como ya hemos indicado, las etiquetas que utilicemos en
HTML siempre van a ir entre los símbolos < y >. Y cada vez
que tengamos que cerrar una etiqueta, pondremos el nombre correspondiente
comenzando con el símbolo /.
Todas las etiquetas afectan al contenido que se encuentre
delimitado entre la apertura y cierre de la etiqueta correspondiente. El contenido puede
ser una cadena de texto con
información, otras etiquetas o incluso un código funcional.
La estructura básica de un documento HTML es la siguiente:

Como podemos observar, los elementos están anidados y

cada etiqueta de apertura está correspondida con otra de
cierre. Veamos cuál es el significado de cada etiqueta:
• <html>: el elemento raíz del documento. Esta etiqueta
engloba toda la página HTML.
• <head>: la cabecera del documento. Contiene información que no es directamente el
contenido de la página.
Por ejemplo, título de la página web, metadatos, estilos,
código JavaScript, etc.
• <title>: el nombre que le damos al título que se asignará
al documento.
• <body>: el cuerpo del documento. Aquí se codifica todo
aquello que deseamos que se visualice en el navegador.
Por ejemplo, los párrafos, las imágenes, formularios, etc.
HTML ha ido evolucionando a lo largo del tiempo, de modo
que existen diferentes versiones de HTML que han ido
aportando mejoras. HTML 5 es la más reciente.
Y es precisamente en HTML5 que mediante la aportación
de unas etiquetas nuevas, se consigue añadir una serie de
características y elementos cuya función es facilitar la tarea
a los autores de la aplicación web.
HTML5 se basa principalmente en una estructuración
avanzada que se encarga de definir los contenidos, agrupándolos en distintas etiquetas con
un nombre asignado
que se corresponde con la tarea a realizar.

Algunas de estas etiquetas son las que detallamos a continuación:

• <header>: encabezado de la página.
• <nav>: enlaces de navegación.
• <article>: algún artículo que se haya publicado.
• <section>: parte correspondiente a algún artículo.
• <aside>: barras laterales.
• <footer>: pie de página.
• <dialog>: distintos diálogos o comentarios.
Además de estas etiquetas, HTML5 también cuenta con elementos como <div> y <span>,
que se utilizan para agrupar
los diferentes elementos hijos haciendo uso de atributos
como: class, id o title. De esta manera, se pretende utilizar
una misma semántica con un estilo común.

2.3.1. COMENTARIOS
Los comentarios son unas líneas que definen, de cara al
usuario, lo que vamos a ir realizando en cada momento,
aunque no son interpretados por el navegador. Es decir,
los comentarios que indiquemos en el código HTML no se
visualizan en el navegador.
A lo largo del código fuente del desarrollador es conveniente utilizar una serie de
comentarios para explicar con
palabras específicas lo que se va realizando en cada momento. De esta forma, se quiere
conseguir que, si alguien
necesita trabajar con el código, sea capaz de interpretarlo
de un simple vistazo gracias a los comentarios que aparecen en él.
La sintaxis de los comentarios es la siguiente:
<!-- Esto es un comentario -->
Por ejemplo, en la línea 6 de este documento HTML hemos
insertado un comentario. El software editor ha detectado
el comentario y por eso le ha otorgado otro color, que en
este caso es grisáceo.

Como podemos observar, los elementos están anidados y

cada etiqueta de apertura está correspondida con otra de
cierre. Veamos cuál es el significado de cada etiqueta:
• <html>: el elemento raíz del documento. Esta etiqueta
engloba toda la página HTML.
• <head>: la cabecera del documento. Contiene información que no es directamente el
contenido de la página.
Por ejemplo, título de la página web, metadatos, estilos,
código JavaScript, etc.
• <title>: el nombre que le damos al título que se asignará
al documento.
• <body>: el cuerpo del documento. Aquí se codifica todo
aquello que deseamos que se visualice en el navegador.
Por ejemplo, los párrafos, las imágenes, formularios, etc.
HTML ha ido evolucionando a lo largo del tiempo, de modo
que existen diferentes versiones de HTML que han ido
aportando mejoras. HTML 5 es la más reciente.
Y es precisamente en HTML5 que mediante la aportación
de unas etiquetas nuevas, se consigue añadir una serie de
características y elementos cuya función es facilitar la tarea
a los autores de la aplicación web.
HTML5 se basa principalmente en una estructuración
avanzada que se encarga de definir los contenidos, agrupándolos en distintas etiquetas con
un nombre asignado
que se corresponde con la tarea a realizar.

Algunas de estas etiquetas son las que detallamos a continuación:

• <header>: encabezado de la página.
• <nav>: enlaces de navegación.
• <article>: algún artículo que se haya publicado.
• <section>: parte correspondiente a algún artículo.
• <aside>: barras laterales.
• <footer>: pie de página.
• <dialog>: distintos diálogos o comentarios.
Además de estas etiquetas, HTML5 también cuenta con elementos como <div> y <span>,
que se utilizan para agrupar
los diferentes elementos hijos haciendo uso de atributos
como: class, id o title. De esta manera, se pretende utilizar
una misma semántica con un estilo común.
2.3.1. COMENTARIOS
Los comentarios son unas líneas que definen, de cara al
usuario, lo que vamos a ir realizando en cada momento,
aunque no son interpretados por el navegador. Es decir,
los comentarios que indiquemos en el código HTML no se
visualizan en el navegador.
A lo largo del código fuente del desarrollador es conveniente utilizar una serie de
comentarios para explicar con
palabras específicas lo que se va realizando en cada momento. De esta forma, se quiere
conseguir que, si alguien
necesita trabajar con el código, sea capaz de interpretarlo
de un simple vistazo gracias a los comentarios que aparecen en él.
La sintaxis de los comentarios es la siguiente:
<!-- Esto es un comentario -->
Por ejemplo, en la línea 6 de este documento HTML hemos
insertado un comentario. El software editor ha detectado
el comentario y por eso le ha otorgado otro color, que en
este caso es grisáceo

2.4. ELEMENTOS DE UN HTML

En este apartado, detallaremos todas las marcas que se
pueden utilizar en este lenguaje para diseñar una página
web. Como ya hemos visto anteriormente, debemos seguir
la estructura básica de un documento HTML.
Cabecera
Un documento HTML se puede dividir entre la cabecera y el
cuerpo, es decir, entre <head> y <body>.
La cabecera contiene información general acerca del documento, pero normalmente la
información que figura dentro
de la cabecera no es la destinada a visualizarse en el navegador. Salvo el título, que sí es
mostrado por el navegador,
normalmente en la pestaña.
El elemento de la cabecera se encuentra justo después del
elemento raíz. Es decir, la etiqueta <head> es el primer
descendiente de la etiqueta raíz <html>. La cabecera tiene
una etiqueta de apertura y otra de cierre y su sintaxis es
la siguiente:
<head>
…
</head>

Dentro del elemento de la cabecera pueden existir otros

elementos. Es decir, dentro de <head> pueden incluirse
otras etiquetas hijas. El único elemento obligatorio que
debe estar en la cabecera es el que especifica el título,
<title> (salvo que esté indicado en otro lugar). El resto de
elementos son opcionales.
Los elementos que podemos incluir dentro de la cabecera
son los siguientes:

<title>
Título del documento HTML que va a aparecer en el navegador web, en la barra superior
<style>
Usado para determinar el estilo de la información del
documento, es decir, información CSS que nos permite
insertar una hoja de estilo en la cabecera. Mediante el
atributo type indicamos el lenguaje del estilo
<link>
Relaciona el documento HTML con otro documento externo, como por ejemplo un archivo
CSS
<meta>
Utilizado para especificar información sobre el propio
documento, como el conjunto de caracteres, la descripción
de la página, las palabras clave, el autor del documento…
Suele llevar dos atributos: name y content, que hacen
referencia al nombre de la página y a sus principales
contenidos
<script>
Lo utilizaremos para insertar, entre su apertura y cierre, un
script implementado en otro lenguaje mediante el atributo
type. Indicamos el lenguaje de programación y, mediante el
atributo src, definimos la URL del script en caso de que sea
externo
<base>
Se usa para especificar la URL base a partir de la que
partirán el resto de URL relativas del documento. Puede
indicar la base de elementos como sonidos, gráficos, etc.,
siempre que hagan referencia a una determinada página
web

Otro uso diferente de la etiqueta <meta> es el refresco

automático, que, transcurrido un tiempo estimado, pasa a
actualizar la misma página. Es recomendable para aquellas
páginas en las que el contenido se modifica con mucha
frecuencia.
<meta http-equiv = “refresh” content = “10”;
“url = http://www.google.es”>
Con esta instrucción, estamos indicando que, pasados 10
segundos se acceda a la página web de Google. Un ejemplo de documento HTML con la
cabecera completa es el
siguiente:

En este ejemplo hemos incluido URL externas no reales,

además de una simulación de enlace externo a un archivo
JavaScript, que se encontraría en una carpeta llamada js.
Cuando creamos una página web, es conveniente que, al
comienzo, realicemos una planificación de su diseño, para
después ordenar la información y recursos que se ofrecerán. Para llevar a cabo esta tarea
es recomendable utilizar
una estructura de directorios.
Cuerpo del documento
El cuerpo del programa se encuentra entre:
<body>
…
</body>
Siempre está situado detrás de la cabecera <head> y contiene todo el cuerpo
correspondiente a una determinada
página web, junto con los elementos propios de la página,
como pueden ser párrafos, gráficos, textos, imágenes, etc.
Existen un conjunto de atributos opcionales de <body>
que permiten realizar diferentes configuraciones sobre
la apariencia de un documento. Sin embargo, hoy están
obsoletos, ya que HTML5 no los soporta. Algunos de ellos
son: bgcolor, text, link y vlink.

Luego hay a algunos atributos que se recomienda utilizar en la marca <body>. Son los
siguientes:
• id: para identificar el elemento para la hoja de estilo.
• class: para asignar un nombre de la clase de la hoja de
estilo y, de esta forma, poder mejorar su rendimiento.
• title: para agregar un comentario y que lo puedan visualizar los navegadores.
• style: aplicar un estilo a este elemento.
A continuación, veremos todas las marcas que podemos utilizar en esta parte del
documento para poder aplicar distintos tipos de comandos y así confeccionar la página
web correspondiente.
Podemos clasificar los elementos del cuerpo (<body>) en dos tipos: elementos de bloque y
elementos de línea.
Los elementos de bloque poseen las siguientes características:
• Comienzan en una nueva línea
• Ocupan todo el ancho de una línea disponible
• Por tanto, impiden que otros elementos se sitúen a su
lado (horizontalmente)
• Pueden albergar en su interior otros elementos de bloque
u otros elementos de línea

• Algunos elementos de bloque típicos son los siguientes:

<div>, <form>, <h1>, <p>, <section>, <table>…
Por su parte, los elementos de línea tienen las siguientes
características:
• Solo pueden contener en su interior datos y otros elementos en línea
• Ocupan el ancho mínimo (en horizontal) que necesitan
• Los elementos de línea más empleados son: <a>, <code>,
<img>, <input>, <span>…
A continuación, vamos a ilustrar la diferencia entre un elemento de bloque, como el de
párrafo (<p>) y un elemento
de línea, como el de hiperenlace (<a>). En el siguiente có-
digo HTML indicamos en la cabecera (<head>) un código
CSS que indica que los elementos de párrafo (<p>) tendrán
un color de fondo anaranjado y los elementos de hiperenlace (<a>) tendrán un color de
fondo celeste, de modo que
podamos diferenciar bien ambos elementos.

A partir del código anterior, si visualizáramos el resultado en un navegador, en este caso

Firefox, el resultado sería el siguiente:
Podemos comprobar que el elemento de bloque <p> ocupa todo el ancho de línea del que
dispone, y, sin embargo, el elemento de línea <a> solo ocupa lo imprescindible para
mostrar el texto asignado.