UF1841: Elaboración de documentos web mediante lenguajes de marca
2. Lenguajes de marcado generales
1. Introducción
HTML es el lenguaje básico que se utiliza para escribir los documentos de la World Wide Web. Cuando el navegador accede a estos documentos, interpreta el código que los constituye y muestra al usuario la información traducida.
Los documentos HTML son ficheros de texto (con la extensión “.html” o “.htm”) que pueden ser editados y creados a partir de cualquier editor de texto plano (el Bloc de notas de Windows o la aplicación TextWrangler para Mac). Estas aplicaciones se utilizan para escribir texto sin formato y no permiten la inclusión de imágenes ni demás recursos multimedia. También existen aplicaciones de edición web que incorporan su propio editor de código HTML (además de otras muchas herramientas).
2. Historia de HTML y XHTML. Diferencias entre versiones
El desarrollo de cualquier actualización en un lenguaje de programación es un proceso complejo que requiere un acuerdo con las diferentes organizaciones de estandarización (ISO, ANSI, IEEE, etc.).
En cuanto a HTML, existen un conjunto de niveles definidos por el W3C que se corresponden con las diferentes versiones de este lenguaje que se han ido estableciendo por este organismo. El W3C es una comunidad internacional que trabaja para crear estándares para la WWW.
El nivel 0 del lenguaje HTML define la estructura básica de un documento web, en la que existe una etiqueta principal: <html>. Dentro de esta, se establecen dos secciones principales: y .
El siguiente nivel, la versión 1.0 (nivel 1) añade algunos estilos físicos y lógicos. Esta definición del lenguaje resultó ser insuficiente, por lo que fue necesario añadir ciertos comandos que mejoraran el aspecto de los documentos web.
La estructura lógica de un documento está formada por las partes y relaciones que lo constituyen. Por otro lado, la estructura física indica el aspecto del documento, ya sea sobre el papel o en la pantalla donde se visualice (sus componentes físicos, el lugar donde se colocan sus elementos y la tipografía de los textos que contiene).
Versión 2.0: la principal novedad de esta versión consistía en la inclusión de los formularios.
El nivel 3 (HTML 3.0): se desarrolló con el objetivo de evolucionar, desde el punto de vista lógico, el estándar. Aparición del primer navegador de Netscape, que incorporaba una gran variedad de mejoras especiales. La versión 3.2 se encargó de legalizar la mayoría de estas mejoras, incorporándolas formalmente al modelo propuesto por el W3C.
Versión HTML 4.0 (1997): trató de normalizar el lenguaje y añadirle una serie de mejoras propuestas por los fabricantes de navegadores. Este estándar fue modificado ligeramente en 1999, adoptando el nombre de HTML 4.01. Durante casi una década, este fue el último estándar del lenguaje HTML.
Desde que se publicó HTML 4.01, el trabajo de estandarización de HTML se detuvo y el W3C se dedicó a desarrollar el estándar XHTML (primera versión y revisión en los años 2000-2002).
XHTML 1.0 surgió como una adaptación de HTML 4.01 al lenguaje XML, por lo que conserva casi todas las etiquetas y características del primero, aunque añadiendo ciertas restricciones y elementos del segundo.
El XHTML se presentó como una evolución de HTML, que se debería abandonar en el futuro. No obstante, para la inmensa mayoría de los desarrolladores de páginas web, suponía un esfuerzo considerable adaptar lo que se escribía en HTML a XHTML, por lo que, cada vez más, iban abandonando su uso. Por este motivo, el W3C aceptó, con el tiempo, que el lenguaje XHTML pudiera coexistir con HTML.
Después de varios años sin actividad, se constituyó (en el año 2004), al margen del W3C, el WHATWG (Web Hypertext AppUcation Technology Working Group), el cual estaba promovido por empresas tales como Apple, Opera, Google o la fundación Mozilla. El propósito de este grupo era el desarrollo de una nueva versión del estándar, enfocándola fundamentalmente desde un punto de vista práctico y no académico (como hasta ahora). Esta versión se conocería como HTML5. El W3C reconoció este trabajo y lo utilizó como base para su propia actividad.
El nuevo estándar no cambia el lenguaje en lo esencial, aunque sí que incorpora recursos para facilitar el trabajo con las nuevas herramientas de gestión de contenidos tales como blogs, agregadores, páginas personales, etc., y con la inclusión de elementos multimedia tales como vídeo y audio.
Otra de las grandes novedades que incorpora el nuevo estándar HTML5 es la inclusión en el estándar del DOM, que siempre había sido tratado de forma separada.
DOM (Document Object Model): estructura de objetos que genera el navegador en el momento en el que carga un documento web. Esta estructura se puede alterar (por ejemplo, mediante JavaScript) con el propósito de modificar dinámicamente los contenidos y la apariencia de la página en cuestión.
Importante: no todos los navegadores actuales soportan todos los elementos y funcionalidades nuevas definidas en HTML5. De todas formas, los principales fabricantes de navegadores van mejorando la compatibilidad de sus productos con este nuevo estándar.
3. Estructura de un documento
Fragmento de código escrito en HTML que permite comprender la estructura básica de los documentos:
<[INSERTAR IMAGEN/CÓDIGO]>
3.1. Versiones
La línea de código que se muestra a continuación es lo primero que hay que incluir en cualquier documento escrito en HTML5, la cual informa al navegador acerca del tipo y versión de documento que se está creando:
<[INSERTAR IMAGEN/CÓDIGO]>
Esta etiqueta es un comentario especial que no se visualiza en el navegador y debe escribirse sin espacios ni líneas que la precedan. De esta manera, el modo estándar del navegador es activado y las etiquetas y demás novedades propias del nuevo estándar HTML5 son interpretadas siempre que el navegador sea capaz de reconocerlas. En caso contrario, son ignoradas. La simplificación de la etiqueta DOCTYPE ha sido uno de los cambios del estándar HTML5.
3.2. Cabecera
Después de la etiqueta DOCTYPE, es necesario incluir la directiva , dentro de la cual se incluyen dos grandes bloques: la cabecera y el cuerpo.
La etiqueta de cabecera () tiene la siguiente sintaxis:
<[INSERTAR IMAGEN/CÓDIGO]>
El código HTML que se incluye dentro de esta directiva va a permitir, fundamentalmente:
Definir el título del documento web.
Declarar la codificación de caracteres a utilizar.
Indicar información relacionada con el documento en sí.
Incorporar archivos externos con estilos CSS y código JavaScript.
Escribir código JavaScript y CSS.
Todo esto se consigue insertando y configurando una serie de etiquetas. Casi toda la información que se incluye dentro de la directiva no es visualizada por el usuario. Algunas de las etiquetas más importantes que se suelen incluir dentro de la cabecera de los documentos HTML son: , y <link>.
<meta>
Esta etiqueta se puede utilizar para definir el juego de caracteres a utilizar en la visualización del documento. En el caso de que se desee asegurar la compatibilidad del documento con los caracteres propios de nuestro idioma (acentos, ñ, etc.) y de los de Europa Occidental, será necesario escribir el siguiente código:
<[INSERTAR IMAGEN/CÓDIGO]>
La etiqueta <meta> también se suele utilizar para otros propósitos. Principales atributos de esta directiva:
name: indica un tipo de información (metainformación) que se desea incluir, la cual está relacionada con el documento en sí:
description: indica que la información se refiere a los contenidos más relevantes de la página.
keywords: indica que la información se refiere a un conjunto de palabras clave a utilizar por los buscadores.
author: indica que la información se refiere al nombre del autor de la página.
generator: indica que la información se refiere al nombre de una o varias aplicaciones informáticas que se han utilizado en el desarrollo de la web.
content: en este atributo se escribe la metainformación propiamente dicha.
http-equiv: este atributo se usa para especificar algún tipo de instrucción a tener en cuenta por el navegador.
Un atributo es un conjunto formado por un nombre y un valor que se localiza dentro de la etiqueta de inicio de un elemento. Este par (nombre-valor) indica alguna propiedad asociada al elemento en cuestión.
<title>
Dentro de la etiqueta <title> se escribe el título de un documento web. Su sintaxis es:
<[INSERTAR IMAGEN/CÓDIGO]>
<link>
Esta etiqueta se utiliza para incorporar archivos externos (ajuntar hojas de estilo CSS). Para este caso, la sintaxis de esta etiqueta es la siguiente:
<[INSERTAR IMAGEN/CÓDIGO]>
Hojas de estilo CSS (Cascading Style Sheet o Hoja de Estilos en Cascada): archivo que contiene un conjunto de reglas que definen el aspecto de uno o varios de los elementos que constituyen a un documento o sitio web completo.
Antes de la aparición de HTML5, se hacía necesario añadir un atributo adicional a la etiqueta <link>: el atributo type, el cual se utilizaba para indicar el tipo (MIME) de fichero que estaba incorporando. En el caso de las hojas de estilo, este atributo debía tener el valor text/css.
Aunque es recomendable el uso de archivos externos, esta no es la única manera de incluir código CSS en un documento web. Dicho código también puede escribirse (utilizando la etiqueta <style>) dentro del propio documento HTML.
3.3. Cuerpo
El cuerpo es la parte principal donde se organiza el contenido de un documento web. Por lo general, los elementos que se incluyan dentro de esta etiqueta van a tener su correspondiente representación en el área de visualización del navegador. La etiqueta es <body> y su sintaxis es:
<[INSERTAR IMAGEN/CÓDIGO]>
El contenido en <body> puede ser extremadamente variado: tablas, enlaces, párrafos, formularios, imágenes, vídeo, audio y listas.
Es muy importante organizar y delimitar las zonas donde se situará cada uno de los elementos. Antes de la aparición de HTML5, se solían utilizar tablas (<table>) y capas (<div>) para estructurar el contenido de las páginas web. Dentro de directivas de este tipo, se iban colocando los diferentes elementos del cuerpo de dichos documentos. La nueva especificación HTML5 tiene una serie de nuevas etiquetas que sirven para estructurar el contenido de los documentos web. Estas etiquetas consisten en capas o áreas dentro de las cuales se incluye el contenido que corresponda.
Esquema en el que se delimitan una serie de secciones o bloques que representan la estructura del contenido de un ejemplo de página web muy genérica:
<[INSERTAR IMAGEN]>
http://librosweb.es/libro/css/capitulo_12/estructura_o_layout.html
La cabecera es la zona donde normalmente se localizan el título y el logo de la página web. También puede contener información relacionada con la descripción de la página.
Justo debajo de la cabecera, se suele incluir la barra de navegación, que suele consistir en un menú con enlaces que permiten la navegación a través de las principales secciones que forman parte de la web en cuestión.
El contenido principal de una página web se suele incluir en su centro y puede contener texto, imágenes, enlaces y demás contenido relevante. Generalmente, esta información se suele estructurar, a su vez, en varias filas y/o columnas.
Por último, en la inmensa mayoría de la las páginas web se incluye una barra o sección de pie de página, que se suele localizar en la parte baja de la web. Por lo general, en esta zona se muestra información relacionada con el sitio web en cuestión (autor o empresa desarrolladora, vínculos sobre las condiciones de uso, copyright, etc.).
La nueva especificación HTML5 añade un conjunto de etiquetas que sirven para delimitar las secciones principales de un documento web (cabecera, barra de navegación, pie de página, etc.). Estas son: <header>, <nav>, <section>, <aside> y <footer>. A continuación, se muestra el esquema-ejemplo de las secciones que constituyen la estructura del ejemplo de página presentado antes pero, sobre él, se han indicado las etiquetas (y su sintaxis) que se utilizan, en HTML5, para delimitar cada uno de sus bloques:
<[INSERTAR IMAGEN]>
https://desarrolloweb.com/articulos/etiquetas-semanticas-html5.html
A continuación, se describe brevemente el significado y la utilidad de cada una de estas etiquetas:
<header>: dentro de esta etiqueta (no confundir con <head>), se incluye la cabecera del contenido de un documento web. Esta directiva no puede incluirse dentro de <footer> u otra <header>.
<nav>: esta etiqueta se usa para albergar los elementos de navegación de un documento HTML.
<aside>: esta directiva se usa para delimitar un área de un documento web en el que se desee añadir algo que complemente o aclare el texto y demás contenido principal al que hace referencia.
<section>: con la etiqueta <section> se puede delimitar un área dentro de un documento HTML.
<footer>: dentro de esta etiqueta, se incluye el contenido que se desea añadir al pie de página.
Para posicionar y dar estilo a cada uno de estos bloques o secciones, es imprescindible utilizar CSS.
4. Color
CSS permite modificar y definir el color de los elementos que están presentes en los documentos web: el color del texto que contienen, el de su fondo, el del borde que los delimita, etc.
4.1. Codificación de colores
Cuando se define un color, siempre se indica a partir de una combinación de unos colores básicos que dependen del sistema de codificación de colores que se esté utilizando. Hay dos sistemas de codificación de colores fundamentales: el aditivo (RGB) y el sustractivo (CMY).
El sistema RGB usa tres colores básicos: el rojo, el verde y el azul; se trata de un sistema aditivo, es decir, si se van sumando colores, se van obteniendo otros cada vez más claros hasta llegar, finalmente, al blanco.
Por otro lado, el sistema CMY usa el cian, el magenta y el amarillo, y es un sistema sustractivo, es decir, cada vez que se van agregando los colores se van obteniendo tonos más oscuros, hasta llegar al negro.
El sistema de codificación que se utiliza en HTML es el RGB. Existen 256 posibles valores para cada uno de los colores básicos, lo cual hace que se puedan obtener 16.777.216 combinaciones diferentes de colores. A la hora de especificar la cantidad de cada color básico, se usa la notación hexadecimal, pudiendo tener un valor comprendido entre 00 (ausencia de ese color) y FF (máxima cantidad de ese color). Los colores en HTML se escriben según la siguiente sintaxis:
<[INSERTAR IMAGEN/CÓDIGO]>
Donde:
#: carácter que indica que el color está en formato RGB.
RR: cantidad de color rojo.
GG: cantidad de color verde.
BB: cantidad de color azul.
Mediante el uso del atributo style, se pueden definir reglas CSS que afecten al elemento en el que se incluye el atributo.
4.2. Colores tipo
Además de la notación hexadecimal, en HTML existen algunos colores que pueden escribirse con un nombre, el cual coincide con su denominación en inglés.
<[INSERTAR IMAGEN Tabla Colores]>
4.3. Colores seguros
Los colores seguros para la Web son los que se muestran de la misma manera en todos los navegadores y sistemas operativos. Existen 216 colores seguros y la notación en RGB que pueden presentar viene dada por un valor hexadecimal que combina los pares 00, 33, 66, 99, CC o FF.
Cuando aparecieron los primeros navegadores, la mayoría de los equipos únicamente eran capaces de mostrar 265 colores. Hoy en día, los equipos pueden mostrar miles o millones de colores, por lo que, en la actualidad, no es necesario el único uso de colores seguros en el diseño de un sitio web.
<[INSERTAR IMAGEN Tabla Colores Seguros]>
5. Texto
Hay que organizar, estructurar y dar estilo al texto de un documento HTML. El texto puede ir encerrado dentro de etiquetas pertenecientes a otros elementos web, tales como tablas, formularios, enlaces, etc.
5.1. Párrafos
Los párrafos en HTML son unos de los elementos básicos de texto que forman parte de este lenguaje y se suelen utilizar para insertar texto sin significado especial. Para albergar el texto perteneciente a cada párrafo se utiliza la etiqueta <p>. Cada vez que se escribe un párrafo, el navegador inserta un salto de línea automático al final de cada uno ellos.
Los saltos de línea que se hacen dentro del propio código HTML no son interpretados como tales por el navegador.
5.2. Encabezados. Jerarquía y estructura del contenido de un documento
Para establecer importancia en los textos de una página web (títulos, subtítulos, etc.), se pueden utilizar las etiquetas de encabezado. Estas son: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. La primera etiqueta es la que, por defecto, establece más importancia en el texto. Lo que hacen estas etiquetas es cambiar el estilo del texto que contienen, modificando ciertas características del mismo para destacarlo y diferenciarlo de los demás. Cuando se insertan estas directivas, el navegador fuerza un salto de línea antes y después del texto que contienen. El estilo que por defecto establecen las etiquetas de encabezado puede modificarse fácilmente utilizando CSS.
5.3. Estilos del texto
La nueva especificación HTML5 recomienda utilizar hojas de estilo CSS. No obstante, existe una etiqueta llamada <font> que permite establecer diferentes características en el texto, como pueden ser su tamaño, el tipo de fuente y su color. Esta etiqueta no es soportada por la nueva especificación del estándar, pero todavía sigue siendo interpretada por los principales navegadores web.
Características de letra: tipos, tamaño y colores. La etiqueta <font> soporta (o soportaba) principalmente los siguientes atributos:
face: el valor de este atributo indica el tipo de fuente que va a tener el texto encerrado en la correspondiente etiqueta <font>. Es muy recomendable indicar más de una familia de fuentes (separadas por comas) por si el navegador no reconoce alguna de ellas, aplicándose la primera que esté disponible en la máquina del usuario.
color: con este atributo se puede modificar el color con el que se va a ver un texto.
size: este atributo sirve para establecer el tamaño de la fuente del texto en cuestión y puede tener valores enteros comprendidos entre 1 (el más pequeño) y 7 (el más grande).
Además de poder modificar el tamaño, el tipo de fuente y el color del texto, en HTML también se pueden definir otras características, como son: la alineación del texto, el espaciado entre palabras y su sangrado. El atributo align (desaprobado por HTML5) permite modificar la alineación del texto. Puede tener los siguientes valores: center (centro), left (izquierda), right (derecha) y justify (justificado).
Aunque el atributo align sigue siendo reconocido por la mayoría de los navegadores actuales, se recomienda que, para alinear textos, se utilicen hojas de estilo. Mediante el uso del atributo style se pueden definir reglas CSS que afecten al elemento en el que se incluye el atributo (text-align, letter-spacing, text-indent, etc.).
Para separar párrafos y demás elementos web, se puede incluir una línea horizontal que puede ser modificada, tanto en tamaño como en grosor: la directiva <hr>, la cual no necesita de etiqueta de cierre. Su sintaxis en la especificación XHTML es <hr />.
Para modificar las características predeterminadas de esta franja, se pueden utilizar los siguientes atributos (no soportados por la nueva especificación HTML5, pero sí por la mayoría de navegadores):
align: en este atributo, se especifica la alineación del separador.
noshade: cuando se incluye este atributo (sin valor), la franja se visualiza con un color sólido.
size: especifica el alto de la franja.
width: especifica el ancho de la franja.
Para modificar la apariencia texto de los documentos web, se pueden utilizar los denominados estilos físicos y lógicos. Los estilos físicos son aquellos que producen siempre el mismo efecto (negrita, cursiva, etc.). Los estilos lógicos son aquellos que marcan un tipo de texto determinado (cita, email, etc.) y hacen que este se muestre de una manera determinada, según el estilo lógico que corresponda.
Se pueden utilizar ambos tipos de estilos para conseguir un mismo efecto. Para hacer que un texto aparezca en negrita, se puede utilizar la etiqueta <b> (estilo físico) o bien la directiva <strong> (estilo lógico). Un texto puede estar afectado por más de un estilo lógico o físico.
Tabla con los estilos físicos y lógicos del lenguaje HTML:
<[INSERTAR IMAGEN Tabla]>
6. Enlaces de hipertexto
La característica más interesante y que más ha influido en el desarrollo de la WWW ha sido el denominado hipertexto, que se puede definir (en el ámbito de la WWW) como una herramienta que permite establecer enlaces o vínculos en los documentos web que sean capaces de, entre otras cosas, direccionar al usuario hacia otra sección de la página u otro sitio web externo, con tan solo hacer un simple clic de ratón.
6.1. Estructura de un enlace: la dirección de Internet o URL
Para insertar enlaces en los documentos HTML se utiliza la etiqueta <a>. Sintaxis:
<[INSERTAR IMAGEN/CÓDIGO]>
Cuando un enlace se establece para direccionar al usuario a un sitio web externo, es necesario especificar, en el atributo href correspondiente, la dirección de Internet o URL donde se aloja la página web en cuestión.
6.2. Atributos específicos: título, destino, atajos de teclado, etc.
La etiqueta <a> admite ciertos atributos, algunos de los cuales son específicos para esta directiva. A continuación, se listan los más importantes:
href: aquí se escribe la dirección asociada al enlace.
title: en este atributo se establece un texto que se desea que aparezca junto al enlace en el momento en el que se posicione el ratón sobre el mismo.
target: este atributo se usa para definir el lugar donde se va a abrir el contenido asociado al enlace. Puede tener los siguientes valores:
_blank: el documento al que apunta el vínculo se abrirá en una ventana/pestaña nueva.
_parent: el documento de destino se mostrará en el frameset, padre del frame actual (esto se entenderá mejor cuando se estudie el apartado correspondiente a los marcos).
_self: el documento de destino se mostrará en la ventana o frame donde se ubica el enlace.
_top: el enlace se mostrará usando todo el espacio de la ventana del navegador.
acceskey: este atributo sirve para definir un atajo de teclado que servirá para acceder directamente al enlace en cuestión. Al pulsar la tecla Alt junto con la definida en este atributo, el navegador dirigirá al usuario al lugar donde se encuentre el enlace dentro de la web, pero sin ejecutarlo. Para abrirlo, se puede pulsar la tecla Intro (o hacer clic sobre él). El atributo acceskey no es soportado por el navegador Opera.
6.3. Estilos de enlaces
Por defecto, los textos de los enlaces que se escriben en los documentos web se visualizan de color azul y subrayado. Su aspecto puede ser modificado utilizando hojas de estilos CSS, o usando etiquetas de estilos lógicos y físicos.
6.4. Diferencias entre enlaces absolutos y relativos
Cuando se incluye un enlace en una página web, la dirección asociada al mismo se puede escribir de dos maneras diferentes: utilizando una ruta absoluta, o bien, relativa.
Los enlaces absolutos son aquellos que contienen una dirección completa, incluyendo los nombres del servicio, dominio, ruta, etc.
En los enlaces relativos no se incluye la dirección completa del documento o archivo al que apuntan, sino que se omite la información correspondiente a servicio, maquina.dominio y, probablemente también la ruta. Este tipo de enlaces se utilizan para direccionar a documentos o archivos que se encuentren en el mismo servidor que el documento en el que se localiza el enlace en cuestión.
Es posible que se quiera direccionar a un fichero que se localice en un nivel superior al del documento HTML que contenga el vínculo. En esta caso, sería necesario añadir la cadena “../” por cada nivel que separe los archivos de origen y destino.
6.5. Enlaces internos
Los enlaces internos (también conocidos como anclas) son vínculos que direccionan al usuario hacia otras secciones de un mismo documento HTML. Un ejemplo muy habitual de este tipo de enlaces puede ser el típico link que se establece al final de una página web y que, al seleccionarlo, conduce de nuevo al usuario al principio del documento en cuestión. En resumen, para crear un enlace interno en HTML, es necesario:
Referenciar el lugar de destino con algún nombre, utilizando el atributo name.
Escribir, en el atributo href del enlace, el nombre que se ha indicado en el paso anterior (destino), pero anteponiéndole el carácter “#”.
También es posible establecer enlaces que direccionen a lugares concretos dentro de otros documentos HTML. Para hacer esto, basta con escribir, en el atributo href del enlace en cuestión, el nombre del documento HTML de destino seguido del carácter “#” y del nombre indicado en el atributo name del ancla. Por ejemplo:
6.6. Enlaces especiales
Los enlaces HTML también se suelen utilizar para:
Establecer enlaces de descarga.
Enviar correos electrónicos.
Enlaces hacia otros archivos (vínculos de descarga): los vínculos hacia otros archivos son aquellos que direccionan a ficheros que no son documentos web. Para crearlos, es necesario indicar, en el atributo href del link que corresponda, la ruta en la que se ubica el fichero en cuestión, seguida del nombre y la extensión del mismo.
Además de abrir documentos web, los navegadores también suelen ser capaces de abrir otros tipos de archivos, como por ejemplo imágenes. En el caso de que el navegador no sea capaz de abrir un fichero hacia el que apunta un enlace, procederá a descargarlo o bien informará al usuario acerca de si quiere visualizarlo (utilizando algún programa que tenga instalado en su equipo) o bien descargarlo.
Existen infinidad de plugins que pueden instalarse en los navegadores web para hacer que puedan abrir determinados tipos de archivos.
Enlaces de correo electrónico: otra funcionalidad que se puede implementar en los enlaces HTML consiste en la creación de links de correo electrónico, a partir de los cuales se pueden enviar e-mails a una dirección de correo específica. En estos casos, el correo electrónico es enviado a través de algún asistente de correo que el usuario tenga instalado en su equipo.
Asistente de correo electrónico: aplicación que se utiliza para enviar y recibir correos electrónicos. Algunos ejemplos de programas de este tipo son: Mozilla Thunderbird, IncrediMail, etc.
Para que un enlace apunte a una dirección de correo electrónico, es necesario indicar, en su atributo href, la cadena mailto seguida de la dirección de correo de destino. A continuación, se puede añadir el carácter ? para incluir información adicional, como puede ser el asunto del mensaje, el cual se especifica con la cadena subject= seguida del texto de dicho asunto. También se puede añadir una dirección de correo alternativa para que reciba el e-mail. Para ello, es necesario añadir (a continuación del asunto) la cadena cc= seguida de la dirección de correo adicional. También hay que incluir el carácter & como separador entre ambas informaciones (asunto y dirección de correo alternativa).
7. Imágenes
Su uso es fundamental a la hora de crear y desarrollar sitios atractivos, amenos y competentes. Respecto al número y dimensiones de las imágenes de los documentos web, es necesario establecer un equilibrio. Las imágenes son recursos multimedia utilizados en la inmensa mayoría de páginas web.
7.1. Formatos de imágenes
Los archivos de imágenes se clasifican, fundamentalmente, atendiendo al formato al que pertenecen. Dicho formato se puede definir como el tipo de compresión a partir del cual se almacena la información binaria de la imagen. Los formatos que más se suelen utilizar en las páginas web son: GIF, JPEG y PNG.
GIF
El formato GIF es un método de compresión de imágenes muy utilizado en las páginas web, el cual se caracteriza fundamentalmente por:
Permitir que las imágenes tengan zonas transparentes (lo que hay detrás de dichas zonas es visible).
Establecer animaciones en las imágenes. Esta es una de las características más peculiares que caracterizan este formato.
JPEG
El formato JPEG es el más utilizado a la hora de insertar imágenes en las páginas web. Esto se debe fundamentalmente a la excelente relación calidad-tamaño que presentan las imágenes comprimidas en este formato.
Para que una página web sea usable, es importante optimizar el tiempo que va a tardar en cargarse, por lo que es fundamental controlar el peso de las imágenes y demás contenidos externos que se inserten en ella.
PNG
El formato PNG es el preferido a la hora de insertar archivos de imágenes con transparencias y se caracteriza, fundamentalmente, por:
Cuando se usa en las páginas web, su visualización comienza antes de descargarse por completo.
Los colores de estas imágenes se visualizan exactamente igual en todas las plataformas.
Comparadas con las imágenes en formato GIF, estas son aproximadamente un 30% más pequeñas.
7.2. Características de las imágenes: tamaño, título, textos alternativos
Para insertar imágenes en las páginas web, se utiliza la etiqueta <img>, cuya sintaxis básica es la siguiente:
<[INSERTAR IMAGEN/CÓDIGO]>
Los principales atributos soportados por esta directiva, son:
src: en este atributo se especifica la ruta (junto con su nombre y extensión) donde se ubica el archivo de imagen a insertar.
title: gracias a este atributo, se puede indicar un texto que aparecerá cuando el ratón se posicione sobre la imagen.
alt: en este atributo, se puede indicar un texto alternativo que se mostrará en el caso en el que el navegador no pueda cargar la imagen.
width: especifica el ancho de la imagen (en píxeles).
height: especifica el alto de la imagen (en píxeles).
7.3. Enlaces en imágenes
En HTML, también existe la posibilidad de crear lo que se conoce como mapas de imágenes. Estos elementos consisten en imágenes dentro de las cuales se han establecido enlaces o áreas de clic, a las cuales se les puede asociar una URL como si se tratara de vínculos convencionales. Para crear un mapa de imágenes en HTML se utiliza la directiva <map>, dentro de la cual se van creando las diferentes áreas de clic con etiquetas <area>. Los principales atributos que soporta la directiva <area> son:
title: aquí se indica un texto que aparecerá cuando el ratón se posicione sobre el área de clic correspondiente.
shape: con este atributo, se puede definir el tipo de área de clic. Sus posibles valores son: "rect" (rectángulo), "circle" (círculo) y "poly" (polígono).
coords: en este atributo, se especifican las coordenadas que delimitan al área de clic. Como se verá a continuación, el número de coordenadas que hay que especificar varía en función del tipo de área que corresponda.
href: aquí se indica la URL a la que el navegador direccionará cuando se haga clic en el área.
Es importante tener en cuenta que, cuando se definen áreas de clic en este tipo de elementos, los puntos se determinan teniendo en cuenta que el origen del sistema de coordenadas se ubica en la esquina superior izquierda de la imagen en cuestión.
Un vez que se han definido las áreas de clic del mapa, se hace necesario asociarlas a una imagen, la cual se definirá con su correspondiente etiqueta (<img>) fuera de la directiva <map>. Para indicar que esta imagen debe albergar las zonas de clic definidas en la directiva <map>, es necesario añadir, en la etiqueta de dicha imagen, el atributo usemap. El valor de este debe ser el mismo que el del atributo name del mapa de imágenes, precedido por el símbolo “#”.
7.4. Imágenes de fondo
La nueva especificación HTML5 establece que, para colocar imágenes de fondo en las páginas web, es necesario utilizar hojas de estilo CSS. Antes existía un atributo (background) que se incluía dentro de la directiva <body> que permitía insertar imágenes de fondo en los documentos web, cuyo valor correspondía con la ruta en la que se ubicaba el archivo de imagen en cuestión. Aunque el nuevo estándar desaprueba el uso de este atributo, todavía sigue siendo soportado por la mayoría de los navegadores actuales.
8. Listas
8.1. Características y tipos de listas
En HTML, las listas consisten en una sucesión de elementos precedidos por una viñeta (listas no ordenadas) o un número (listas ordenadas).
Listas no ordenadas: son aquellas que no tienen ordenación y cuyos elementos van precedidos por algún símbolo o imagen. Los elementos de una lista de este tipo van dentro de la etiqueta <ul> y, por cada punto que se desee añadir, es necesario utilizar la etiqueta <li>.
<[INSERTAR IMAGEN/CÓDIGO]>
Para modificar el aspecto de las viñetas que acompañan a los elementos de las listas no ordenadas, se puede hacer uso del atributo type. Este atributo se puede incluir dentro de las directivas <li> y puede tener los siguientes valores:
disc: círculo de color negro.
circle: círculo con fondo blanco.
square: cuadrado.
Ordenación de listas: se definen con la directiva <ol>, dentro de la cual se van definiendo los diferentes puntos con etiquetas <li> (igual que en las listas no ordenadas).
En este tipo de listas, los símbolos que precederán a cada uno de los elementos son de carácter numérico y se irán generando automáticamente conforme se añadan puntos.
En este tipo de listas, se puede establecer fácilmente el número inicial a partir del cual se van a contabilizar los elementos de misma. Esto se consigue gracias al atributo value. Este atributo se puede incluir dentro de las etiquetas <li> y los siguientes puntos que se escriban se generarán automáticamente por orden, partiendo del número indicado en dicho atributo.
El tipo de numeración de las listas ordenadas es otro aspecto que puede ser modificado con HTML. Para ello, se puede utilizar el atributo type, el cual puede tener los siguientes valores:
1: numeración estándar: 1, 2, 3...
a: numeración alfabética en minúsculas: a, b, c...
A: numeración alfabética en mayúsculas: A, B, C...
i: numeración en números romanos y en minúsculas: i, ii, iii...
I: numeración en números romanos y en mayúsculas: I, II, III...
8.2. Anidamiento en listas
En HTML también es posible establecer listas anidadas, es decir, listas que contengan otras dentro de ellas. Para implementarlas, basta con tener en cuenta que una lista puede establecerse como si se tratara de un elemento de otra lista.
8.3. Listas de definición
Las listas de definiciones son otro tipo de listas que se pueden utilizar cuando se desean incluir definiciones, es decir, cuando se quiere mostrar un concepto y, justo debajo, su definición. Estos elementos tienen sus propias etiquetas específicas:
<dl>: dentro de esta etiqueta se incluye todo el contenido del bloque concepto-definición.
<dt>: esta etiqueta alberga el concepto que se va a definir.
<dd>: en esta directiva se incluye la descripción del concepto en cuestión.
9. Tablas
Las tablas son muy utilizadas en HTML para estructurar datos y presentar información de manera ordenada y relacionada.
9.1. Estructura básica
En HTML, una tabla básica puede definirse como un conjunto de filas donde cada una de ellas alberga un determinado número de celdas, dentro de las cuales se insertan los datos que se desean estructurar. Una tabla simple puede ser definida según tres etiquetas:
<table>: contenedor principal de la tabla. Dentro de ella, se insertan las diferentes filas y columnas que la constituyen.
<tr>: etiqueta correspondiente a cada una de las filas de la tabla. Cada fila contiene un determinado número de celdas.
<td>: cada celda de la tabla es definida con esta directiva. Dentro de ella se escribe el contenido que se desea incluir en la misma.
Cuando se inserta una tabla en HTML, el contenido de la misma debe definirse dentro de la etiqueta <table>. El orden de construcción de las tablas se establece de la forma: fila-celdas de la fila, es decir, se van definiendo cada una de las filas de la tabla (con la directiva <tr>) y dentro de ellas se van insertando las diferentes celdas (con la etiqueta <td>) que pertenecen a cada una de dichas filas.
Por defecto, las tablas que se implementan en HTML se visualizan sin bordes. Esto puede ser modificado con CSS o bien añadiendo el atributo border dentro de la etiqueta <table>.
9.2. Formatear tablas
Para dar formato a las tablas de los documentos web, la nueva especificación HTML5 recomienda usar hojas de estilo CSS. También existe una serie de atributos que permiten modificar la apariencia de estos elementos:
align: este atributo especifica la alineación de la tabla en el documento. Sus posibles valores son: left (izquierda), center (centro) y right (derecha). Este atributo no es soportado por la nueva especificación HTML5, pero es reconocido por la mayoría de los navegadores actuales.
border: con este atributo, se puede habilitar la visualización del borde que delimita la tabla y sus celdas. Si se indica el valor 1, dichos bordes serán visibles. Si su valor se deja vacío (“”) o bien se omite este atributo, la tabla se visualizará sin bordes (únicamente aparecerá el contenido de las celdas). Este atributo no es soportado por la especificación HTML5, pero es reconocido por la mayoría de los navegadores actuales.
width: con este atributo se puede indicar el ancho de la tabla (en píxeles).
cellpadding: este atributo sirve para modificar el espacio (en píxeles) que existe entre las celdas de la tabla y el contenido que albergan. Aunque este atributo no es soportado por HTML5, sí que es reconocido por la mayoría de navegadores.
cellspacing: con este atributo se puede modificar el espacio (en píxeles) que hay entre las celdas de una tabla. Este atributo tampoco es soportado por la nueva especificación HTML5, pero sí que sigue siendo reconocido por la mayoría de los navegadores actuales.
9.3. Formato de contenido de celdas
En las etiquetas <td> también se pueden incluir atributos que permitan modificar el estilo de las celdas y su contenido. A continuación, se muestran algunos de ellos:
align: especifica la alineación del contenido de la celda. Puede tener los siguientes valores:
left (izquierda), right (derecha) y center (centrado).
bgcolor: especifica el color de fondo de la celda.
height: con este atributo se puede establecer el alto (en píxeles) de la celda en cuestión.
width: este atributo se puede usar para modificar el ancho (en píxeles) de la celda correspondiente.
Cada celda de una tabla es definida con la directiva <td>. Dentro de ella, se escribe el contenido que se desea incluir en la misma. Los atributos align y bgcolor no son soportados por la nueva especificación HTML5, pero sí que todavía siguen siendo reconocidos por la mayoría de los navegadores actuales.
9.4. Agrupamiento de filas y columnas
En HTML, existe un conjunto de etiquetas que permiten establecer ciertas agrupaciones en las filas y columnas de las tablas para así poder ejercer un mayor control sobre la visualización de estos elementos.
Agrupaciones de filas:
<thead>: para agrupar las filas de la cabecera de una tabla.
<tbody>: para agrupar las filas que pertenecen al cuerpo de una tabla.
<tfoot>: para agrupar las filas del pie de una tabla.
Agrupaciones de columnas:
<col>: se refiere a una columna determinada.
<colgroup>: se refiere a un grupo de columnas.
Los grupos de columnas deben definirse justo después de la apertura de la directiva <table> y antes de incluir las diferentes filas.
9.5. Tablas anidadas
En HTML también es posible establecer anidamientos de tablas, es decir, insertar tablas unas dentro de otras. Para anidar una tabla dentro de otra, simplemente basta con introducir la estructura de la primera dentro de una de las celdas de la tabla principal.
Es importante tener en cuenta que no hay límite respecto al número de tablas que se pueden anidar dentro de una determinada tabla, aunque siempre es recomendable utilizar el menor número de tablas que sea posible para que el código resultante no se haga excesivamente enrevesado y complejo.
9.6. Buenas prácticas en el uso de tablas
Aunque antes se solían utilizar también para maquetar los contenidos de las páginas web, las tablas deben usarse únicamente en el caso en el que se deseen tabular datos (texto, imágenes, enlaces, etc.). El uso de hojas de estilo CSS para posicionar los diferentes elementos que forman parte de un sitio web proporciona una serie de ventajas respecto a la utilización de tablas:
Se logra separar el contenido de la presentación, ya que, al utilizar tablas, se están manteniendo, en un mismo archivo, ambas informaciones.
La utilización de hojas de estilo CSS minimiza considerablemente la cantidad etiquetas HTML necesarias para maquetar una web, lo cual permitirá reducir el tiempo de carga de misma en el navegador.
Al tener separado el contenido de la presentación, la página será mejor rastreada por los buscadores.
El tiempo necesario para maquetar un sitio web completo utilizando tablas es mucho mayor que con CSS.
Tener separado el contenido de la presentación hace posible que se pueda modificar rápidamente el diseño de la web sin necesidad de alterar la estructura de la página.
La nueva especificación HTML5 recomienda el uso de CSS para dar estilo a los diferentes elementos que forman parte de los documentos web.
10. Marcos (frames)
Los marcos o frames son herramientas que permiten establecer vistas de uno o varios documentos HTML en uno solo.
10.1. Creación de marcos
Existen dos tipos fundamentales de marcos: los marcos fijos o frames y los marcos incrustados o iframes.
Los documentos HTML que contienen frames no presentan etiqueta <body>. En su lugar, cuentan con la etiqueta <frameset>, que se utiliza para definir las diferentes áreas en las que se subdividirá el documento correspondiente.
Por otro lado, existe la directiva <frame>. Esta etiqueta se usa para definir el contenido de cada uno de los marcos que se han establecido con <frameset>.
10.2. Ventajas e inconvenientes en el uso de marcos. Soporte de navegadores
Ventajas del uso de frames:
La navegación se hace más rápida después de la primera carga.
Es desarrollo de sitio puede ser más rápido. Por ejemplo, si se desarrolla un documento web que consiste únicamente en la barra de navegación principal de la web, ya no es necesario volver a construirla en los demás documentos del sitio.
Se pueden establecer partes de la web que estén siempre fijas, lo cual resulta ventajoso en muchos casos.
Inconvenientes de usar frames:
Eliminan espacio útil de la pantalla debido a que el lugar ocupado por los frames es siempre fijo.
Para muchos usuarios, la presencia de estas partes fijas resulta limitador en relación a su movilidad a través la web.
La nueva especificación HTML5 no soporta estos elementos (excepto los iframes o frames incrustados). No obstante, sí que siguen siendo visualizados correctamente por la mayoría de los navegadores actuales.
Los marcadores o favoritos no funcionan correctamente en ciertos casos.
Es posible que el botón “atrás” del navegador no se comporte como se espera que lo haga.
La nueva especificación HTML5 no soporta el uso de marcos o frames. En su lugar, se recomienda el uso de CSS para posicionar y dar estilo a las diferentes partes de los documentos que, antes de la aparición de este estándar, se solían establecer mediante el uso de marcos (barra de navegación, menús laterales, pie de página etc.).
10.3. Formateado de marcos
Los diferentes atributos específicos que soportan las directivas <frame> y <frameset> permiten una gran variedad de opciones de configuración para estos elementos.
Los principales atributos que soporta la directiva <frameset> son:
cols: especifica el tamaño de cada una de las divisiones verticales a establecer.
rows: este atributo indica el tamaño de cada una de las divisiones horizontales.
Cada valor indicado en estos atributos debe separarse por comas y se puede dar en: % y píxeles. También se puede emplear el carácter “*”, que indica que el tamaño de esa división corresponderá el resto del espacio disponible (del área de navegación) para albergar ese marco.
A continuación, se enumeran los principales atributos soportados por la etiqueta <frame>:
name: su valor corresponde con el nombre del marco.
src: contiene la ruta del documento HTML que va a albergar el marco.
frameborder: puede tener los valores 1 y 0, que indican, respectivamente, si el frame tendrá o no borde asociado.
marginwidth: indica el espacio (en píxeles) que habrá entre el contenido del frame y sus márgenes izquierdo y derecho.
marginheight: indica el espacio (en píxeles) que habrá entre el contenido del frame y sus márgenes superior e inferior.
scrolling: sirve para indicar si se permite o no el uso de la barra de scroll o deslizamiento para desplazarse por el frame. Sus posibles valores son: no (scroll deshabilitado) y yes (scroll habilitado).
noresize: si se añade esta atributo (sin valor), se está indicando que el frame no puede redimensionarse por el usuario (al hacer clic y arrastrar el borde que los delimita).
frameborder: indica si el frame tendrá o no un borde asociado. Puede tener los siguientes valores: 0 (sin borde) y 1 (con borde).
10.4. Enlaces entre contenidos de marcos
Una de las funciones principales de los frames es la que permite modificar el contenido de uno de los marcos a partir de las acciones ejecutadas en otro diferente. Por ejemplo, al seleccionar un determinado enlace contenido en un frame, el contenido que hay en otro cambia, es decir, se carga un nuevo documento HTML distinto al que inicialmente había.
Para conseguir esto, es necesario añadir, en el atributo target del enlace, el nombre del marco en el que se cargará el documento al que direcciona dicho vínculo.
10.5. Marcos anidados
Gracias al anidamiento de marcos se pueden combinar divisiones horizontales y verticales de estos. Para ello, basta con incluir el nuevo marco dentro de la etiqueta <frameset> del frame principal.
10.6. Marcos incrustados (iframes)
Los iframes, también conocidos como marcos incrustados, consisten en áreas flotantes dentro de las cuales se pueden cargar documentos web. La etiqueta que se utiliza para crear estos elementos es <iframe>, que soporta principalmente los siguientes atributos:
name: aquí se indica el nombre del iframe.
src: en este atributo se escribe la ruta en la que se localiza el documento local o la URL de la página web a visualizar en el iframe.
width: en este atributo se indica el ancho del iframe en píxeles.
height: se indica el alto del iframe en píxeles.
sandbox: aquí se pueden especificar restricciones de seguridad en el acceso a los contenidos de la web que contiene el iframe.
scrolling: este atributo sirve para indicar si el iframe va a tener scroll o no. Sus posibles valores son yes (con scroll) y no (sin scroll).
A excepción de la directiva <iframe>, las demás etiquetas que se utilizan para establecer marcos no son soportadas por HTML 5.
11. Formularios
Los formularios son secciones interactivas de una página web que los autores insertan en la mismas para permitir que el usuario pueda enviar información al servidor donde esté alojado el sitio.
11.1. Descripción general y uso de formularios. Procesamiento de formularios
El uso de formularios ha sido siempre un método muy utilizado para recoger información introducida por el usuario de la WWW. Una vez que el visitante ha rellenado/marcado los campos correspondientes (y pulsa el botón de envío), dicha información es enviada y procesada en el servidor a través de aplicaciones externas a HTML, como pueden ser: ASP, PHP, JSP, etc.
Todo formulario se crea a partir de la directiva <form>, dentro de la cual se van insertando los diferentes elementos que formen parte de él (cajas de texto, listas desplegables, botones, etc.). Esta etiqueta presenta dos atributos que deben incluirse obligatoriamente:
action: este atributo se utiliza para definir el tipo de acción que se va a llevar a cabo una vez que se pulse el botón de envío. Por lo general, contiene la ruta en la que se aloja el documento encargado de procesar los datos introducidos en el formulario.
method: en este atributo, se define la manera en la que se van a enviar los datos introducidos, pudiendo ser: GET y POST (este último es el más usual).
También existen otros atributos opcionales:
enctype: para describir el método que se va a utilizar para codificar el contenido del formulario. Sus posibles valores son: application/x-www-form-urlencoded, multipart/form-data y text/plain.
name: para identificar el formulario mediante un nombre.
target: especifica el lugar donde se van a visualizar los resultados del envío del formulario. Sus posibles valores son: _blank, _self, _parent y _top.
accept-charset: aquí se especifica la codificación de caracteres que es aceptada por el servidor que va a procesar el formulario.
11.2. Elementos de un formulario
La directiva <form> actúa como si se tratase de un contenedor que alberga un conjunto de elementos que permiten al usuario marcar o introducir datos. Existen tres etiquetas que sirven para crear elementos de formulario. Estas son <input>, <textarea> y <select>.
<input>
Esta directiva sirve para crear botones y casillas de texto. Su sintaxis básica es la siguiente:
<[INSERTAR IMAGEN/CÓDIGO]>
El atributo name sirve para identificar el elemento cuando su información es enviada por el método correspondiente. El atributo value sirve para indicar un valor predeterminado para el elemento en cuestión, es decir, el valor que está escrito o marcado antes de que el usuario manipule el formulario. Con el atributo type se puede indicar el tipo de elemento que se desea insertar, pudiendo tener los siguientes valores:
checkbox: consiste en una casilla de selección, la cual podrá estar seleccionada o no. El atributo value contiene el valor que se enviará en el caso de que la casilla esté seleccionada.
hidden: este campo consiste en un almacén interno de datos cuya información no puede ser modificada por el usuario, es decir, es un campo oculto cuyo valor es enviado siempre junto con el resto de los datos.
file: este elemento permite el envío de ficheros a través del formulario y consiste en un campo de texto junto al cual se dispone automáticamente un botón “Examinar...”, que permite seleccionar manualmente, desde el explorador del sistema operativo que corresponda, el archivo a enviar. Cuando se utilicen este tipo de elementos, es necesario incluir, en el atributo enctype de la directiva <form>, el valor multipart/form-data.
image: corresponde a un botón de envío personalizado que consiste en una imagen definida por el atributo src.
password: consiste en una casilla de texto cuyos caracteres escritos aparecen como asteriscos (o cualquier otro símbolo, lo cual depende del navegador) para ocultar el texto que se escribe.
radio: elemento similar a checkbox, pero asigna el mismo valor de name a varios elementos. Esto significa que, cuando existen varios elementos de radio que tienen el mismo valor en su atributo name, solo uno de ellos puede estar marcado a la vez. Al igual que ocurre con checkbox, el atributo value de estos elementos contiene el valor que se enviará en el caso en el que se seleccionen.
reset: este botón sirve para borrar todos los datos introducidos por el usuario, restaurando el formulario a su estado inicial.
submit: botón de envío del formulario. El texto que aparece escrito sobre el botón puede definirse en su atributo value.
text: casilla de texto que sirve para escribir en ella. El tamaño de la casilla en caracteres puede definirse con el atributo size. También es posible limitar la cantidad de texto que puede escribirse (en caracteres) con el atributo maxlength. Estos dos atributos también son aplicables al elemento password.
<textarea>
Este elemento es similar a text con la diferencia de que, en <textarea>, el usuario puede escribir textos más extensos, es decir, de varias filas y columnas. Sus principales atributos son:
name: identifica el <textarea>.
rows: indica el número de filas que va a ocupar la caja de texto.
cols: indica el número de columnas que va a ocupar la caja de texto.
Para indicar un texto inicial que se desea que aparezca en la caja de texto, es necesario escribirlo entre la apertura y el cierre de esta directiva (a diferencia de los elementos text, en los que se utiliza el atributo value).
<select>
Estos elementos consisten en listas desplegables de opciones que son mostradas al hacer clic en un pequeño botón adjunto a los mismos. Las diferentes opciones que van a formar parte de estas listas son definidas, dentro de <select>, usando directivas <option>, por lo que la sintaxis básica de estos elementos es:
<[INSERTAR IMAGEN/CÓDIGO]>
Al igual que en el resto de elementos de formulario, el atributo name de esta directiva permite identificar al elemento dentro del formulario. Por otro lado, con el atributo value de la etiqueta <option>, se indica el valor que será enviado al seleccionar la opción correspondiente. Para especificar el texto de cada una de las opciones, basta con escribirlo entre la apertura y cierre de la correspondiente directiva <option>.
También es posible añadir, en alguna de las opciones, el atributo selected (sin valor), el cual indica que dicho elemento será el que se vea antes de desplegar la lista.
11.3. Formateado de formularios
El orden en el que se declaren los elementos dentro del código del documento va a influir directamente en el orden de aparición de los mismos dentro del área de navegación. No obstante, la aplicación de ciertas propiedades y estilos CSS sobre dichos elementos puede hacer que la disposición de los mismos varíe radicalmente.
Los diferentes elementos que constituyen los formularios pueden ser agrupados con la directiva <fieldset>. Dentro de esta, puede incluirse la etiqueta <legend> para dar nombre a dicha agrupación.
Al igual que en los enlaces, los elementos de un formulario pueden asociarse a alguna tecla de acceso rápido, utilizando el atributo acceskey. El atributo acceskey sirve para definir un atajo de teclado que servirá para acceder directamente al elemento en cuestión. Al pulsar la tecla Alt junto con la definida en este atributo, el navegador dirigirá al usuario al lugar donde se encuentre dicho elemento dentro de la web.
12. Elementos específicos para tecnologías móviles
Cuando se diseña un sitio web, cada vez es más necesario tener en cuenta el hecho de que debe estar optimizado también para dispositivos móviles.
12.1. Selección del lenguaje marcas para tecnologías móviles
En la actualidad, la inmensa mayoría de los dispositivos móviles soportan casi todas las etiquetas correspondientes a la nueva especificación HTML5. No obstante, sí que es importante tener en cuenta una serie de recomendaciones que permitirán mejorar la optimización de las páginas web para los dispositivos móviles:
Diseñar las páginas del sitio de manera que se amolden a diferentes resoluciones y tamaños de pantalla. Lo ideal es establecer diseños líquidos para los distintos elementos que van a formar parte de las páginas web, de manera que estos se adapten al área de visualización disponible en cada caso. Las pantallas de los dispositivos móviles suelen tener resoluciones y tamaños de pantalla mucho menores que los de los monitores de los ordenadores de sobremesa.
Utilizar etiquetas específicas de HTML5, ya que generalmente los navegadores de estos dispositivos las soportan.
Utilizar etiquetas <meta> específicas relacionadas con la visualización del documento en los dispositivos móviles. Algunas de ellas son:
<meta name="MobileOptimized" content="width"/>: al incluir esta línea en la cabecera de la página, el navegador adaptará la anchura de la web a la pantalla del dispositivo que la visualice.
<meta name="HandheldFriendly" content="true"/>: esta línea informa al navegador acerca de que la web ha sido optimizada para dispositivos móviles, por lo que no se debe escalar su contenido al visualizarlo en este tipo de pantallas.
<meta name="viewport" content="width=device-width, initial-scale=1">: esta línea de código informa al navegador acerca de que la página está optimizada para dispositivos móviles, en la que también se puede especificar la manera en la que el navegador debe interpretar y renderizar el documento. Esta etiqueta sirve para indicar diversas informaciones al navegador, como la anchura a la que se tiene que ver el documento, la escala inicial, si permite hacer zoom, etc.
12.2. Hojas de estilo en dispositivos móviles
La última versión de CSS (CSS3) incorpora las denominas Media Queries, que consisten en una serie de condiciones y requisitos que permiten filtrar estilos CSS dependiendo de un rango de resolución de pantalla determinado.
Las Media Queries se pueden incluir dentro de los archivos “.css” con la siguiente sintaxis:
<[INSERTAR IMAGEN/CÓDIGO]>
De esta manera, los estilos CSS añadidos dentro de la Media Query se aplicarán a los documentos web cuando la resolución de pantalla no sea superior al valor indicado en la propiedad max-width.
Una Media Query también se puede usar para cargar un archivo “.css” únicamente bajo determinadas resoluciones, en cuyo caso es necesario añadirla dentro de la cabecera del documento web que corresponda (<head>), usando la directiva <link>.
13. Elementos en desuso (deprecated)
Existe una extensa colección de elementos que desaparecen definitivamente en la nueva especificación HTML5.
13.1. Texto parpadeante
Los textos parpadeantes se solían usar para establecer palabras o frases destacadas, las cuales se visualizaban con un efecto de parpadeo bastante llamativo. Para ello, se solía utilizar la etiqueta no estándar <blink>, dentro de la cual se escribía el texto que se deseaba mostrar con este efecto.
A diferencia de otros elementos no soportados por la nueva especificación HTML5, la directiva <blink> ya no es reconocida por la mayoría de los navegadores actuales.
13.2. Marquesinas
Existía una etiqueta, la cual no pertenecía al ningún estándar HTML, que servía para insertar marquesinas en los documentos web: <marquee> y dentro de ella se escribía el texto que se deseaba establecer como marquesina.
Dicha etiqueta permitía establecer textos que se desplazaban de un lado a otro de la pantalla y disponía de ciertos atributos que permitían configurar y modificar este comportamiento.
Debido a que esta etiqueta no es soportada por la nueva especificación HTML5, es aconsejable que, en su lugar, se utilicen imágenes en formato GIF o bien animaciones JavaScript.
13.3. Alineaciones
La etiqueta <center> servía para delimitar un bloque de texto que se deseaba que apareciera centrado. Gracias a las hojas de estilo CSS (lo que recomienda la nueva especificación HTML5), se pueden establecer diferentes alineaciones en los textos de los documentos web. La etiqueta <center> todavía es reconocida por la mayoría de los navegadores actuales.
13.4. Otros elementos en desuso
Existen muchos otros elementos que han desaparecido en la nueva versión del estándar:
<frame> y <frameset>: como se ha visto anteriormente, estas etiquetas servían para incluir marcos en los documentos web.
<applet>: permitía introducir programas Java (llamados applets) dentro de una página web.
<font>: servía para establecer diferentes características en los textos que contenían (color, fuente, tamaño, etc.).
<basefont>: el cometido de esta etiqueta era establecer el tamaño por defecto de la letra de los documentos web.
La nueva especificación HTML5 no soporta el uso de marcos o frames. En su lugar, recomienda el uso de CSS para posicionar y dar estilo a las diferentes partes de los documentos que, antes de la aparición de este estándar, se solían establecer mediante el uso de marcos (barra de navegación, menús laterales, pie de página etc.).
</section>
<aside style="background-color:#cd5c2d; color:#ffffff; flex-basis: 25%;">
<ul style="list-style-type: circle; ">
<li><a style="text-decoration: none; color: white;" href="../links_interes.html" target="_blank">Links de Interès</a></li>
<li><a style="text-decoration: none; color: white;" href="../glosario.html" target="_blank">Glosario de Tèrminos</a></li>
<li><a style="text-decoration: none; color: white;" href="../material.html" target="_blank">Material Adicional</a></li>
</ul>
</aside>
</div>
<footer style="display: flex; justify-content: center; align-items: center; background-color:#226AA2 ; color: white; height: 50px;">
<div style="">Todos los derechos reservados por Daniel Astorga</div>
</footer>
</div>
</body>
</html>