Felicitación navideña con HTML, CSS y JavaScript

Utilizando una combinación de código HTML, CSS y JavaScript vamos a crear una página web de temática navideña con animaciones. Además, el usuario podrá interactuar haciendo clic en las imágenes.

HTML

  • Estructura Básica: El documento HTML comenzará con la declaración <!DOCTYPE html> y utilizará las etiquetas <html>, <head>, y <body> para estructurar el contenido.
  • Metadatos: Dentro de <head>, definiremos el conjunto de caracteres (charset) como ‘utf-8’, y estableceremos la configuración ‘viewport’ para asegurar una correcta visualización en dispositivos móviles.
  • Título: El título de la página será «Felicitación de Navidad».
  • Estilos y Fuentes: Enlazaremos hojas de estilo externas para los estilos CSS y para incluir la fuente «Mountains of Christmas». También incluiremos la librería ‘animate.css‘ para animaciones CSS.
  • Contenido del Cuerpo: Dentro de <body> colocaremos un encabezado <h1> con la frase «¡Feliz Navidad!» y una clase que aplique una animación. A continuación incluiremos un div con la clase ‘contenedor’ que agrupará tres imágenes con animaciones y eventos de clic asociados.
  • Elementos de Audio: Incluiremos tres elementos <audio> para reproducir sonidos para interactuar con las imágenes.
  • JavaScript: Enlazaremos un fichero externo llamado ‘script.js’ que contendrá todo el código JavaScript.

CSS

  • Estilos generales: Estableceremos estilos para html y body, incluyendo márgenes, padding, ancho, fuentes de letra, alineación del texto, color, color de fondo, tamaño de fuente y sombra de texto.
  • Distribución del contenido: Definiremos un layout de tipo flexbox, con un alineamiento central y una disposición en fila por defecto.
  • Media query: Cambiaremos la disposición a columna cuando el ancho de la pantalla sea menor de una resolución específica, lo que mejorará la visualización en dispositivos móviles.
  • Estilo de imágenes: Definiremos la anchura en píxeles, y el máximo ancho relativo a la vista y un filtro de sombra para todas las imágenes.

JavaScript

Desarrollaremos una función que se ejecute al hacer clic en las imágenes. Dicha función realizará tres acciones:

  1. Vibración: Generaremos una breve vibración en dispositivos compatibles.
  2. Reproducción de audio: Reproduciremos un archivo de audio asociado con la imagen en la que hagamos clic.
  3. Cambio de imagen y animación: Actualizaremos cada imagen al hacer clic sobre ella y activaremos una nueva animación.

Imágenes y archivos de audio

A continuación mostramos todas las imágenes y los ficheros de audio que vamos a utilizar en nuestra felicitación. También puedes descargar un ZIP con todos los ficheros (incluido el código fuente).

Las imágenes iniciales

Los archivos de audio

Al hacer clic sobre las imágenes (utilizando JavaScript)

Utilizando código JavaScript cambiaremos las imágenes originales por estas otras, cada vez que hagamos clic en una de ellas:

Cómo colocar las imágenes y los audios, y cómo definir las animaciones

Mediante código HTML crearemos la estructura principal de la felicitación. Incluiremos imágenes y elementos de audio, y estableceremos animaciones para captar la atención del usuario.

Para definir las animaciones utilizaremos la librería animate.css. Para ello deberemos enlazarla primero desde nuestro fichero ‘index.html’:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

Una vez enlazada la librería, ya podemos aplicar animaciones a cualquier elemento añadiendo las clases correspondientes, y opcionalmente, un posible retraso para comenzar la animación, que puede ir de 1 a 5 segundos:

<div class="animate__animated animate__lightSpeedInLeft animate__delay-1s">
  ...
</div>

La combinación de imágenes y audio, junto con las animaciones, proporcionarán finalmente un diseño interactivo para nuestra página de temática navideña:

<h1 class="animate__animated animate__flip">¡Feliz Navidad!</h1>

<div class="contenedor">
    <div class="animate__animated animate__lightSpeedInLeft animate__delay-1s">
      <div id="img-trineo">
        <img src="img/santa-claus.png" alt="Santa Claus">
      </div>
      <audio id="audio-trineo" src="audio/santa-claus.mp3" controls></audio>
    </div>
    <div class="animate__animated animate__backInDown animate__delay-2s">
      <div id="img-campana">
        <img src="img/bola-nieve.png" alt="Bola de nieve">
      </div>
      <audio id="audio-campana" src="audio/campana.mp3" controls></audio>
    </div>
    <div class="animate__animated animate__lightSpeedInRight animate__delay-3s">
      <div id="img-cantando">
        <img src="img/amigos.png" alt="Amigos">
      </div>
      <audio id="audio-cantando" src="audio/musica-fondo.mp3" controls></audio>
    </div>
</div>
  1. Encabezado <h1>:
    • <h1 class="animate__animated animate__flip">¡Feliz Navidad!</h1>: Este es un encabezado de nivel 1, utilizado generalmente para el título más importante en la página. Hemos añadido dos clases de CSS para definir la animación:
      • animate__animated: Esta clase indica que el elemento tendrá una animación aplicada.
      • animate__flip: Específica el tipo de animación, en este caso, un efecto de giro (‘flip’).
  2. Div contenedor:
    • <div class="contenedor">: Este div actúa como un contenedor para agrupar los elementos relacionados. La clase ‘contenedor’ se usa para agrupos los elementos de imagen y audio.
  3. Bloques con imágenes y audio:
    • Cada uno de los tres divs internos representa una sección con una imagen y un audio. Hemos añadido clases específicas para definir las animaciones y retrasos:
      • animate__animated: Establece que se va a definir una animación.
      • animate__lightSpeedInLeft, animate__backInDown, animate__lightSpeedInRight: Estas clases definen el tipo de animación. Cada div tiene una animación distinta que describe cómo entra la imagen en la pantalla.
      • animate__delay-1s, animate__delay-2s, animate__delay-3s: Estos retrasos (1s, 2s, 3s) controlan cuándo comienza la animación después de que se carga la página.
    • Dentro de cada div, hay un sub-div con un id único (img-trineo, img-campana, img-cantando) que contiene una imagen (<img>):
      • src: Indica la ruta del archivo de imagen.
      • alt: Proporciona un texto alternativo que describe la imagen. Es útil para accesibilidad y en situaciones donde la imagen pudiera no llegar a cargarse.
    • Después de cada imagen, colocamos un elemento <audio> con un id único para cada uno:
      • src: El archivo de audio a reproducir.
      • controls: Indica que se deben mostrar controles de reproducción (play, pause, volumen) en la interfaz de usuario.

Cómo conseguir una página más interactiva (utilizando JavaScript)

Mediante el atributo ‘onclick’ de las imágenes y el atributo ‘onplay’ de los elementos de audio podemos hacer que nuestra página web sea más interactiva. Si definimos y ejecutamos la correspondiente función JavaScript, podemos actualizar cada imagen sobre la que hagamos clic, y definir a su vez nuevas animaciones, e incluso reproducir al mismo tiempo el audio correspondiente:

<img src="img/santa-claus.png" onclick="anima('trineo', 'shakeX')" alt="Santa Claus">
...
<audio id="audio-trineo" src="audio/santa-claus.mp3" onplay="anima('trineo', 'shakeX')" controls></audio>

El código fuente completo

HTML

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Felicitación de Navidad</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Mountains+of+Christmas&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>

<body>
  <h1 class="animate__animated animate__flip">¡Feliz Navidad!</h1>

  <div class="contenedor">
    <div class="animate__animated animate__lightSpeedInLeft animate__delay-1s">
      <div id="img-trineo">
        <img src="img/santa-claus.png" onclick="anima('trineo', 'shakeX')" alt="Santa Claus">
      </div>
      <audio id="audio-trineo" src="audio/santa-claus.mp3" onplay="anima('trineo', 'shakeX')" controls></audio>
    </div>
    <div class="animate__animated animate__backInDown animate__delay-2s">
      <div id="img-campana">
        <img src="img/bola-nieve.png" onclick="anima('campana', 'swing')" alt="Bola de nieve">
      </div>
      <audio id="audio-campana" src="audio/campana.mp3" onplay="anima('campana', 'swing')" controls></audio>
    </div>
    <div class="animate__animated animate__lightSpeedInRight animate__delay-3s">
      <div id="img-cantando">
        <img src="img/amigos.png" onclick="anima('cantando', 'heartBeat')" alt="Amigos">
      </div>
      <audio id="audio-cantando" src="audio/musica-fondo.mp3" onplay="anima('cantando', 'heartBeat')" controls></audio>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>
  1. Doctype e idioma: <!DOCTYPE html> indica al navegador que se trata de un documento HTML5. <html lang="es"> especifica que el contenido del documento está en español.
  2. Etiqueta <head>: Contiene metadatos y enlaces a recursos externos.
    • charset="utf-8": asegura que se usen caracteres Unicode, adecuados para muchos idiomas y símbolos.
    • name="viewport" content="width=device-width": hace que el layout sea responsivo al ancho del dispositivo.
    • <link>: para enlazar hojas de estilo externas y la fuente «Mountains of Christmas».
    • animate.min.css: es una librería de animaciones CSS.
  3. Etiqueta <body>: Define el contenido principal de la página.
    • <h1>: es el encabezado principal, decorado con animaciones de ‘animate.css’.
    • <div class="contenedor">: es un contenedor para las imágenes. Cada <div> hijo tiene un id único y contiene una <img>.
    • Cada imagen tiene clases para animaciones y un evento onclick que llama a la función JavaScript anima().
    • Los elementos <audio> están asociados a cada imagen para reproducir sonidos específicos.

CSS

html, body {
  margin: 0px;
  padding: 0px;
  width: 100%;

  font-family: "Mountains of Christmas";
  text-align: center;
  color: #ae2929;
  background-color: #2929ae;
  font-size: 150%;
  text-shadow: 2px 2px 2px black;
}

.contenedor {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

@media (max-width: 900px) {
  .contenedor {
    flex-direction: column;
  }
}

img, audio {
  width: 300px;
  max-width: 100vw;
  margin: 5px; 
  filter: drop-shadow(5px 5px 5px black);
}
  1. Estilos Globales:
    • margin: 0px; padding: 0px; elimina márgenes y rellenos por defecto.
    • width: 100%; establece el ancho del cuerpo y el HTML al 100% del viewport.
    • font-family, text-align, color, background-color, font-size, text-shadow aplican estilos de texto y fondo.
  2. Clase .contenedor:
    • display: flex; activa Flexbox, un método de layout.
    • justify-content: center; centra los elementos hijos horizontalmente.
    • flex-direction: row; coloca los elementos hijos en una fila.
  3. Media Query:
    • @media (max-width: 900px) aplica estilos cuando el ancho de la ventana es menor a 900px, cambiando flex-direction a column para alinear los elementos verticalmente.
  4. Estilo de Imágenes:
    • width: 300px; establece un ancho fijo de las imágenes.
    • max-width: 100vw; establece la anchura máxima de las imágenes para asegurar que no se salen de la pantalla.
    • filter: drop-shadow(5px 5px 5px black); añade una sombra a las imágenes.

JavaScript

function anima(dibujo, animacion) {
  navigator.vibrate(50);

  document.getElementById(`audio-${dibujo}`).currentTime = 0;
  document.getElementById(`audio-${dibujo}`).play();

  document.getElementById(`img-${dibujo}`).innerHTML =
    `<img src="img/${dibujo}.png" 
     class="animate__animated animate__${animacion}"
     onclick="anima('${dibujo}', '${animacion}')">`;
}
  1. Vibración:
    • navigator.vibrate(50): hace que el dispositivo vibre durante 50 milisegundos, en el caso de móviles, tabletas, u otros dispositivos compatibles.
  2. Control de Audio:
    • document.getElementById(audio-${dibujo}): selecciona el elemento de audio correspondiente al dibujo sobre el que hemos hecho clic.
    • .currentTime = 0: para que el audio comience a reproducirse desde el principio.
    • .play(): inicia la reproducción del audio.
  3. Actualización de Imagen y Animación:
    • document.getElementById(img-${dibujo}).innerHTML = ...: actualiza el contenido HTML del div que contiene la imagen sobre la que hemos hecho clic. El nuevo contenido es una imagen con una animación específica.
    • onclick="anima('${dibujo}', '${animacion}')": asegura que al hacer clic en la nueva imagen, se vuelva a llamar a anima() con los mismos parámetros.

El resultado

Puedes comprobar aquí el resultado final al completar esta felicitación de Navidad. También puedes descargar aquí un fichero ZIP con todo el código fuente, imágenes y ficheros de audio.

HTML. Unidad 10. Formularios avanzados.

Cómo estructurar un formulario HTML

Una vez examinados los conceptos básicos, vamos a ver más en detalle los elementos que se utilizan para proporcionar estructura y significado a las diferentes partes de un formulario. La flexibilidad que presentan los formularios los convierte en una de las estructuras más complejas y completas en HTML, puesto que puedes crear cualquier tipo de formulario básico a partir de los elementos y atributos destinados a esta función. El uso de una estructura correcta al crear un formulario HTML te ayudará a garantizar que el formulario presente las características de usabilidad y accesibilidad adecuadas.

El elemento <form>

Tal como explicamos en la unidad anterior, el elemento <form> se utiliza para definir un formulario y los atributos que determinan su comportamiento. Cada vez que desees crear un formulario HTML, debes empezar utilizando este elemento y anidando todo el contenido dentro de él.

Es posible usar controles de formulario fuera de un elemento <form>. Si lo haces, por defecto ese control no tendrá nada que ver con ningún formulario específico, a menos que lo asocies a algún formulario con el atributo form. Esto se introdujo para permitir vincular explícitamente un control a un formulario, incluso si no está dentro de él.

A continuación vamos a exponer los elementos que se pueden utilizar en un formulario.

Los elementos <fieldset> y <legend>

El elemento <fieldset> es una forma cómoda de crear grupos de controles de formulario (también denominados widgets) que comparten el mismo propósito, con fines semánticos y de aplicación de estilo. Puedes etiquetar un elemento <fieldset> incluyendo un elemento  <legend>  justo debajo de la etiqueta de apertura <fieldset>. El contenido textual del elemento <legend> describe formalmente el propósito del elemento <fieldset> que está incluido dentro.

Para lograr la máxima usabilidad/accesibilidad, se recomienda rodear cada lista de ítems relacionados con un <fieldset>, acompañado con un título dentro de un elemento <legend> que proporcione una descripción general de la lista. Cada uno de los ítems de esa lista estará compuesto a su vez por pares individual de elementos <label>/<input>. Por ejemplo, si utilizamos varios botones de radio o casillas de verificación para elegir una o varias opciones relativas a un dato específico, habitualmente colocaremos un <label> inmediatamente después cada opción, e indicaremos el propósito del grupo de botones de radio o casillas de verificación mediante el elemento <legend>.

Muchas tecnologías de asistencia utilizarán el elemento <legend> como si fuera una parte de la etiqueta de cada control dentro del elemento <fieldset> correspondiente. Por ejemplo, algunos lectores de pantalla como Jaws y NVDA leerán el contenido de la leyenda antes de decir la etiqueta de cada control.

Aquí tenemos un pequeño ejemplo:

<form>
  <fieldset>
    <legend>Tamaño del zumo de frutas</legend>
    <p>
      <label><input type="radio" name="size" value="small">Pequeño</label>
    </p>
    <p>
      <label><input type="radio" name="size" value="medium">Mediano</label>
    </p>
    <p>
      <label><input type="radio" name="size" value="large">Grande</label>
    </p>
  </fieldset>
</form>
Tamaño del zumo de frutas

El caso de uso que se muestra en este ejemplo es uno de los más habituales. Cada vez que tengamos un conjunto de botones de opción o casillas de verificación, deberíamos anidarlos dentro de un elemento <fieldset>. De esta forma, al leer el formulario anterior, un lector de pantalla dirá «Tamaño del zumo de fruta: pequeño» para el primer control de formulario, «Tamaño del zumo de fruta: mediano» para el segundo y «Tamaño del zumo de fruta: grande» para el tercero.

El elemento <fieldset> también se puede usar en muchos otros casos, simplemente con el propósito de dividir un formulario en diferentes secciones. Idealmente, si un formulario se alarga mucho, podremos mejorar su usabilidad colocando las diferentes opciones que estén relacionadas dentro de secciones independientes.

Ejercicio propuesto: Bebida y hamburguesa

Utilizando el código del ejemplo anterior, crea una página web para elegir el tamaño tanto de una bebida como de una hamburguesa, ambas opciones dentro de un <fieldset> diferente con el <legend> correspondiente. Además, como se hizo antes, el usuario debería poder elegir entre tres tamaños diferentes: pequeño, mediano y grande:

Bebida

Hamburguesa

Un formulario con secciones

Es importante recordar que el marcado de un formulario se realiza utilizando HTML. Esto significa que podemos utilizar cualquiera de las etiquetas habituales para organizar cada una de las opciones y conseguir que el formulario sea más legible. Por ejemplo, como podemos ver en los ejemplos anteriores, es una práctica común anidar cada etiqueta y su widget dentro de elementos <p>. También se recomienda el uso de listas para estructurar múltiples casillas de verificación o botones de radio.

Además del elemento <fieldset>, también es una práctica común usar títulos HTML (por ejemplo, <h1>, <h2>) y seccionamiento (por ejemplo, <section>) para estructurar formularios complejos. Depende de cada desarrollador encontrar un estilo de codificación que permita obtener formularios accesibles y con una alta usabilidad. Cada sección que agrupe cierta funcionalidad debe estar contenida en un elemento <section> separado, con elementos <fieldset> para agrupar por ejemplo botones de radio que nos permitan seleccionar un valor específico para una determinada opción.

Pongamos estas ideas en práctica y construyamos un formulario un poco más complejo: un formulario de pago. Este formulario contendrá más tipos de controles que el ejemplo anterior. Sigue las instrucciones que se muestran a continuación y fíjate en los elementos que estamos usando para estructurar el formulario.

  1. Primero, crearemos el formulario añadiendo el elemento externo <form>:
<form>
    ...
</form>
  1. Dentro de las etiquetas <form>, añadiremos un encabezado y un párrafo para indicar a los usuarios cuáles serán los campos obligatorios:
<form>
  <h1>Formulario de Pago</h1>
  <p>Los campos obligatorios se han marcado con <strong>*</strong>.</p>
  ...
</form>
  1. También añadiremos un simple <button> de tipo submit, en la parte inferior, para enviar los datos del formulario:
<form>
  <h1>Formulario de Pago</h1>
  <p>Los campos obligatorios se han marcado con <strong>*</strong>.</p>
  ...
  <p><button type="submit">Validar el pago</button></p>
</form>
  1. Luego añadiremos una sección más grande de código en el formulario, debajo de nuestra entrada anterior. Aquí verás que estamos encerrando los campos de información de contacto dentro de un elemento <section> distinto. Además, tenemos un conjunto de tres botones de radio, cada uno de los cuales colocamos en una nueva línea. También tenemos dos <input> de texto estándar y sus elementos <label> asociados, cada uno contenido dentro de un <p>, y un input de contraseña para introducir una clave:
<form>
  <h1>Formulario de Pago</h1>
  <p>Los campos obligatorios se han marcado con <strong>*</strong>.</p>
  <section><fieldset>
    <legend><h2>Información de contacto</h2></legend>
    <fieldset>
      <legend>Tratamiento</legend>
      <label><input type="radio" name="title" value="sr">Sr/Sra</label><br>
      <label><input type="radio" name="title" value="dr">Dr/Dra</label><br>
      <label><input type="radio" name="title" value="otro">Otro</label> <br>
    </fieldset>
    <p><label>Nombre: <input type="text" name="name" required> *</label></p>
    <p><label>Correo electrónico: <input type="email" name="email" required> *</label></p>
    <p><label>Contraseña: <input type="password" name="password" required> *</label></p>
  </fieldset></section>
  ...
  <p><button type="submit">Validar el pago</button></p>
</form>
  1. El segundo elemento <section> de nuestro formulario contiene la información de pago. Tenemos tres controles distintos junto con sus etiquetas, cada uno contenido dentro de un <p>. El primero es un menú desplegable (<select>) para seleccionar el tipo de tarjeta de crédito. El segundo es un elemento <input> de tipo tel, para introducir un número de tarjeta de crédito. Aunque podríamos haber usado el tipo número, no queremos la interfaz de usuario del spinner del número. El último es un elemento <input> de tipo fecha, para introducir la fecha de vencimiento de la tarjeta. Este campo aparecerá con un widget de selector de fecha en navegadores compatibles y se revertirá a una entrada de texto normal en navegadores no compatibles.
<form>
  <h1>Formulario de Pago</h1>
  <p>Los campos obligatorios se han marcado con <strong>*</strong>.</p>

  <section><fieldset>
    <legend><h2>Información de contacto</h2></legend>
    <fieldset>
      <legend>Tratamiento</legend>
      <label><input type="radio" name="title" value="sr">Sr/Sra</label><br>
      <label><input type="radio" name="title" value="dr">Dr/Dra</label><br>
      <label><input type="radio" name="title" value="otro">Otro</label> <br>
    </fieldset>
    <p><label>Nombre: <input type="text" name="name" required /> *</label></p>
    <p><label>Correo electrónico: <input type="email" name="email" required> *</label></p>
    <p><label>Contraseña: <input type="password" name="password" required> *</label></p>
  </fieldset></section>

  <section><fieldset>
    <legend><h2>Información de pago</h2></legend>
    <p><label>Tipo de tarjeta:
      <select name="card_type">
        <option value="visa">Visa</option>
        <option value="mc">Mastercard</option>
        <option value="amex">American Express</option>
      </select>
    </label></p>
    <p><label>Número de tarjeta: <input type="tel" name="card_number" required> *
    </label></p>
    <p><label>Fecha de vencimiento: <input type="date" name="expiration" required> *
    </label></p>
  </fieldset></section>

  <p><button type="submit">Validar el pago</button></p>
</form>

Ejercicio propuesto: Formulario de pago

Utilizando el código del ejemplo anterior, crea un formulario de pago más sofisticado. Dentro de la sección «Información de contacto», debes añadir un grupo de botones de opción para que el usuario pueda seleccionar su estado (ya sea «Estudiante», «Profesor» u «Otro») y un nuevo campo de texto para introducir el número de teléfono. Y dentro de la sección «Información de pago» tienes que añadir una nueva casilla de selección para que el usuario pueda elegir el tipo de pago preferido (ya sea «Tarjeta de crédito» o «Paypal») y un nuevo campo de correo electrónico para introducir la cuenta Paypal:

FORMULARIO DE PAGO (Los campos obligatorios se han marcado con *)

Información de contacto
Profesión


Tratamiento






Información de pago






Un ejemplo real: formularios de buscadores

Buscando texto

Ahora vamos a crear un formulario muy sencillo que proporcionará todos los datos necesarios (un texto simple) para realizar búsquedas en algunos de los buscadores más conocidos:

<form action="https://google.com/search" method="GET">
  <label>Google: <input type="text" name="q" required /></label>
  <button type="submit">Buscar</button>
</form>
...
<form action="https://duckduckgo.com/" method="GET">
  <label>DuckDuckGo: <input type="text" name="q" required /></label>
  <button type="submit">Buscar</button>
</form>
...
<form action="https://bing.com/search" method="GET">
  <label>Bing: <input type="text" name="q" required /></label>
  <button type="submit">Buscar</button>
</form>

Habrás notado que cuando presionas el botón de enviar, la consulta (parámetro q) se incluye en la URL, y de esta manera el motor de búsqueda sabrá qué buscar. Por ejemplo, si estamos buscando la palabra «perros» en Google, la URL resultante al enviar el formulario será esta: https://www.google.es/search?q=dog.

Ejercicio propuesto: Búsqueda de texto

Usando el ejemplo del formulario anterior para buscar información en Google, DuckDuckGo y Bing, desarrolla una página web similar a la de abajo para buscar información en varios motores de búsqueda (al menos cinco).

La única diferencia de un formulario a otro es el valor del atributo action (“https://google.com/search”, “https://duckduckgo.com/”, “https://bing.com/search”, “https://www.ecosia.org/search”, “https://search.givewater.com/serp”, etc.). Esta dirección se puede adivinar echando un vistazo a la URL cuando estás utilizando cada motor de búsqueda en particular.

BÚSQUEDA DE TEXTO

Buscando imágenes

Ahora cambiaremos un poco el código para que los resultados proporcionados por los motores de búsqueda sean imágenes en lugar de texto. En algunos casos solo necesitamos cambiar el atributo action, pero a veces tenemos que agregar algunos campos adicionales:

<form action="https://google.com/search" method="GET">
  <label>Google: <input type="text" name="q" required></label>
  <input type="hidden" name="tbm" value="isch">
  <button type="submit">Buscar</button>
</form>
...
<form action="https://duckduckgo.com/" method="GET">
  <label>DuckDuckGo: <input type="text" name="q" required></label>
  <input type="hidden" name="iax" value="images">
  <input type="hidden" name="ia" value="images">
  <button type="submit">Buscar</button>
</form>
...
<form action="https://search.givewater.com/serp" method="GET">
  <label>giveWater: <input type="text" name="q" required></label>
  <input type="hidden" name="qc" value="images">
  <button type="submit">Buscar</button>
</form>

Podrás apreciar que cuando presionas el botón de enviar, esos campos ocultos (que no son introducidos por el usuario) se incluyen automáticamente en la URL para que el motor de búsqueda sepa que tiene que mostrar imágenes en lugar de texto. De esta manera, en este ejemplo estamos pasando dos parámetros: q (la cadena de búsqueda) y tbm (para buscar imágenes). Por ejemplo, si estamos buscando imágenes sobre perros en Google, la URL resultante al enviar el formulario será esta: https://www.google.es/search?q=dog&tbm=isch.

Ejercicio propuesto: Búsqueda de imágenes

Usando el código del ejercicio anterior, desarrolla una nueva página web para buscar imágenes en varios motores de búsqueda (al menos cinco).

Para buscar imágenes usando Bing y Ecosia, solo tienes que usar el valor correcto para el atributo action (“https://bing.com/images/search”, “https://www.ecosia.org/images”). Solo tienes que usar los campos ocultos para Google (tbm), DuckDuckGo (iax, ia) y giveWater (qc), como se hizo en el ejemplo anterior. Tanto las direcciones como los campos ocultos se pueden adivinar echando un vistazo a la URL cuando estás utilizando cada motor de búsqueda en particular.

BÚSQUEDA DE IMÁGENES

Eligiendo entre búsqueda de texto e imágenes

Ahora centrémonos en el motor de búsqueda de Google y avancemos un paso más para añadir una casilla de verificación que le dé al usuario la opción de elegir entre buscar texto o imágenes:

<form action="https://google.com/search">
  <label>Google: <input type="text" name="q" required /></label>
  <label>Buscar imágenes <input type="checkbox" name="tbm" value="isch" /></label>
  <button>Buscar</button>
</form>

Ejercicio propuesto: Texto o imágenes

Desarrolla una página web para buscar texto o imágenes en los motores de búsqueda de Google y giveWater. Debes proporcionar al usuario una casilla de verificación para que pueda cambiar fácilmente de un tipo a otro:

BÚSQUEDA DE TEXTO

Filtrando los resultados

Finalmente, centrémonos nuevamente en el motor de búsqueda de Google para añadir varios controles de manera que el usuario pueda filtrar los resultados al buscar imágenes. También añadiremos un botón de reinicio para establecer los valores predeterminados:

<fieldset>
<form action="https://google.com/search" method="GET">
  <p>Buscar: <input type="text" name="q" class="big" required></p>

  <fieldset>
    <legend>Tamaño</legend>
    <select name="tbs"> 
      <option selected disabled>Cualquier tamaño</option>
      <option value="isz:l">Grande</option>
      <option value="isz:m">Mediano</option>
      <option value="isz:i">Icono</option>
    </select>
  </fieldset>
  <fieldset>
    <legend>Color</legend>        
    <select name="tbs"> 
      <option selected disabled>Cualquier color</option>
      <option value="ic:color">Color</option>
      <option value="ic:gray">Blanco y negro</option>
      <option value="ic:trans">Transparente</option>
   </select>
  </fieldset> 
  <fieldset>       
    <legend>Tipo</legend>        
    <select name="tbs"> 
      <option selected disabled>Cualquier tipo</option>
      <option value="itp:clipart">Clip art</option>
      <option value="itp:lineart">Dibujo lineal</option>
      <option value="itp:animated">GIF</option>
    </select>
  </fieldset>  
  <fieldset>     
    <legend>Fecha</legend>        
    <select name="tbs"> 
      <option selected disabled>Cualquier fecha</option>
      <option value="qdr:d">Últimas 24 horas</option>
      <option value="qdr:w">Última semana</option>
    </select>
  </fieldset> 
  <fieldset>       
    <legend>Licencia</legend>        
    <select name="tbs"> 
      <option selected disabled>Cualquier licencia</option>
      <option value="il:cl">Creative Commons</option>
      <option value="il:ol">Comercial y otras</option>
    </select>
  </fieldset>

  <input type="hidden" name="tbm" value="isch">

  <button type="reset">Reiniciar</button>
  <button type="submit">Buscar</button>
</form>
</fieldset>

Como verás, hemos añadido muchas opciones para establecer diferentes valores para un parámetro llamado “tbs” (hemos adivinado este parámetro y todos sus posibles valores observando la URL al buscar cualquier información en Google). De esta manera, en este ejemplo estamos pasando tres parámetros: q (la cadena de búsqueda), tbm (para buscar imágenes) y tbs (para filtrar los resultados). Por ejemplo, si estamos buscando imágenes GIF sobre perros, la URL resultante al enviar el formulario será esta: https://www.google.es/search?q=dog&tbm=isch&tbs=itp:animated.

También podrás apreciar que dentro de cada elemento estamos usando una opción predeterminada: <option selected disabled>...</option> para que, por defecto, ninguna de las opciones disponibles esté seleccionada y los resultados no estén filtrados.

Ejercicio propuesto: Filtrar imágenes con listas desplegables

Utilizando el código del ejemplo anterior, desarrolla una página web para buscar imágenes en Google y filtrar los resultados utilizando varias listas desplegables:

Buscar:

Tamaño
Color
Tipo
Fecha
Licencia

Ejercicio propuesto: Filtrando imágenes con botones de radio

Crea una nueva página web para buscar imágenes en Google y filtrar los resultados utilizando botones de radio:

Buscar:

Tamaño Grande
Mediano
Icono
Color Color
Blanco y negro
Transparente
Tipo Clip art
Dibujo lineal
GIF
Fecha Últimas 24 horas
Última semana
Licencia Creative Commons
Comercial y otros

Test

Comprueba tus conocimientos con este test sobre formato de texto y otros conceptos relacionados con esta unidad.

HTML. Unidad 9. Formularios.

Introducción

Esta unidad proporciona instrucciones y ejemplos que te ayudarán a aprender los conceptos básicos de los formularios web, que son una de las principales herramientas para interactuar con los usuarios. Por lo general, se utilizan para recopilar datos o para permitirles controlar una interfaz de usuario. Sin embargo, por razones históricas y técnicas, no siempre es obvio cómo utilizarlos en todo su potencial. En las secciones que se enumeran a continuación, cubriremos todos los aspectos esenciales de los formularios web, incluido el marcado de su estructura HTML, la validación de los datos del formulario y el envío de datos al servidor.

¿Qué son los formularios web?

Los formularios web son uno de los principales puntos de interacción entre un usuario y un sitio web o aplicación. Los formularios permiten a los usuarios la introducción de datos, que generalmente se envían a un servidor web para su procesamiento y almacenamiento (puedes consultar Enviar los datos de un formulario para más detalles), o se usan en el lado del cliente para provocar de alguna manera una actualización inmediata de la interfaz (por ejemplo, se añade otro elemento a una lista, o se muestra u oculta una función de interfaz de usuario).

El código HTML de un formulario web está compuesto por uno o más controles de formulario (a veces llamados widgets), además de algunos elementos adicionales que ayudan a estructurar el formulario general (a menudo se los conoce como formularios HTML). Los controles pueden ser campos de texto de una o varias líneas, cajas desplegables, botones, casillas de verificación o botones de opción, y se crean principalmente con el elemento <input>, aunque hay algunos otros elementos que también hay que conocer.

Los controles de formulario también se pueden programar para forzar la introducción de formatos o valores específicos (validación de formulario), y se combinan con etiquetas de texto que describen su propósito para los usuarios con y sin discapacidad visual.

Campos de un formulario

En las próximas secciones crearemos formularios web funcionales. Para ello presentaremos primero algunos controles de formulario y elementos estructurales comunes, y nos centramos también en las mejores prácticas de accesibilidad. A continuación, veremos con detalle las funciones de los diferentes controles de formulario, o widgets, y estudiaremos todas las diferentes opciones de que se dispone para la recopilación de diferentes tipos de datos. En este sección en particular, veremos el conjunto original de controles de formulario, disponible en todos los navegadores desde los primeros días de la web.

El elemento <label>

El elemento <label> nos permite definir una etiqueta para un control de un formulario HTML. Este es el elemento más importante si deseas crear formularios accesibles porque cuando se implementan correctamente, los lectores de pantalla leen la etiqueta de un elemento de formulario junto con las instrucciones relacionadas, y esto además resulta muy útil para los usuarios videntes. Tomemos este ejemplo que vimos en el artículo anterior:

<label>
  Nombre: <input type="text" name="nombre" />
</label>

Existe otra forma de asociar un control de formulario con una etiqueta. Un elemento <label> también se pueden asociar correctamente con un elemento <input> por su atributo for (que contiene el atributo id del elemento <input>):

<label for="nombre">
  Nombre: <input type="text" name="nombre" id="nombre" />
</label>

El resultado en ambos casos será el mismo:

Nombre:

Con la etiqueta <label> asociada correctamente con <input> por su atributo for (que contiene el atributo id del elemento <input>), un lector de pantalla leerá algo como «Nombre, editar texto». Si no hay ninguna etiqueta, o si el control de formulario no está asociado implícita o explícitamente con alguna etiqueta, un lector de pantalla leerá algo así como «Editar texto en blanco», lo cual no es de mucha ayuda.

¡También se puede hacer clic en las etiquetas!

Otra ventaja de configurar correctamente las etiquetas es que puedes hacer clic o pulsar en la etiqueta para activar el control de formulario correspondiente. Esto es útil para controles como entradas de texto, donde puedes hacer clic tanto en la etiqueta como en la entrada de texto para proporcionar el foco al control de formulario, pero es útil especialmente para botones de opción y casillas de verificación, porque la zona sensible de este control puede ser muy pequeña, y puede ser útil para facilitar su activación.

Por ejemplo, al hacer clic en el texto de la etiqueta «Me gustan las cerezas» del ejemplo siguiente, cambiará el estado seleccionado de la casilla de verificación cereza:

<label>
  <input type="checkbox" name="cereza" value="cereza" />
  Me gustan las cerezas
</label><br />
<label>
  <input type="checkbox" name="platano" value="platano" />
  Me gustan los plátanos
</label><br />


Campos de entrada de texto

Los campos de texto <input> son los controles de formulario más básicos, y permiten al usuario introducir cualquier tipo de datos. Pueden tomar muchas formas diferentes según el valor de su atributo type. Se utiliza para crear la mayoría de los tipos de controles de formulario, que incluyen campos de texto de una sola línea, controles para la fecha y la hora, y también controles sin introducción de texto, como casillas de verificación, selectores de opción y selectores de color, e incluso botones.

Todos los controles de texto básicos comparten algunos comportamientos comunes:

  • Se pueden marcar como readonly (el usuario no puede modificar el valor de entrada, pero este se envía con el resto de los datos del formulario) o disabled (el valor de entrada no se puede modificar y nunca se envía con el resto de los datos del formulario).
  • Pueden tener un placeholder: se trata de un texto que aparece dentro de la caja de entrada de texto y que se usa para describir brevemente el propósito de la caja de texto.
  • Pueden presentar una limitación de tamaño (el tamaño físico de la caja de texto) y de la extensión máxima (el número máximo de caracteres que se pueden poner en la caja de texto).
  • Permiten corrección ortográfica (utilizando el atributo spellcheck), si el navegador la admite.

Debemos tener en cuenta que los campos de texto de los formularios HTML son controles de entrada de texto sencillos sin formato. Esto significa que no puedes usarlos para aplicar una edición enriquecida (negrita, cursiva, etc.). Todos los controles de formulario que encuentres con texto enriquecido son controles de formulario personalizados creados con HTML, CSS y JavaScript.

Campos de texto de una sola línea

Un campo de texto de una sola línea se crea utilizando un elemento <input> cuyo valor de atributo type se establece en text, u omitiendo por completo el atributo type (text es el valor predeterminado). El valor text de este atributo también es el valor alternativo si el navegador no reconoce el valor que has especificado para el atributo type (por ejemplo, si especificas type="color" y el navegador no está dotado en origen de un control de selección de colores).

Veamos este ejemplo en el que aparecen un par de campos de texto de una sola línea:

<label>
  Nombre (de 5 a 10 caracteres):
  <input type="text" name="nombre" required
         minlength="5" maxlength="10" size="15" 
         placeholder="Escriba aquí su nombre">
</label><br />
<label>
  Comentario:
  <input type="text" name="comentario" required
         placeholder="Escriba aquí su comentario">
</label><br />


HTML5 ha mejorado el campo de texto básico original de una sola línea al añadir valores especiales para el atributo type que imponen restricciones de validación específicas y otras características, por ejemplo, específicas para introducir direcciones URL o números. Los expondremos más adelante, y también puedes encontrar más información en el siguiente enlace: Los tipos de entrada en HTML5.

Campo de contraseña

Uno de los tipos de entrada originales era el tipo de campo de texto password:

<label>
  Contraseña: <input type="password" name="contrasena">
</label>

El valor de la contraseña no añade restricciones especiales al texto que se introduce, pero oculta el valor que se introduce en el campo (por ejemplo, con puntos o asteriscos) para impedir que otros puedan leerlo.

Ten en cuenta que esto sólo se aplica a nivel de interfaz de usuario; a menos que envíes tu formulario en modo seguro, se enviará como texto plano, lo que es malo desde el punto de vista de la seguridad porque alguien con malas intenciones podría interceptar tus datos y robar tus contraseñas, datos de tarjetas de crédito o cualquier otra cosa que hayas enviado. La mejor manera de proteger a los usuarios de esto es alojar cualquier página que contenga formularios en una ubicación de conexión segura (es decir, en una dirección https://), de modo que los datos se cifren antes de enviarse.

Los navegadores reconocen las implicaciones de seguridad de enviar datos de formulario por una conexión insegura y disponen de mensajes de advertencia para disuadir a los usuarios de usar formularios no seguros. Para obtener más información sobre las implementaciones de Firefox al respecto, consulta el artículo Contraseñas inseguras.

Campos de texto de varias líneas

El elemento <textarea> representa un control de edición de texto de varias líneas, útil cuando deseas permitir que los usuarios introduzcan una cantidad considerable de texto, por ejemplo, un comentario de una revisión o en un formulario de contactar:</p>

<label>Cuéntanos tu historia:
  <textarea name="historia" rows="5">
    Era una noche oscura y tormentosa...
  </textarea>
</label>

Puede usar los atributos rows y cols para especificar el tamaño exacto para el campo <textarea>. Establecer estos a veces es una buena idea para mantener la coherencia, ya que los valores predeterminados del navegador pueden diferir. También estamos usando un contenido predeterminado (el que aparece entre las etiquetas de apertura y cierre), ya que <textarea> no admite el atributo value, tal como veremos en la próximo sección.

El elemento <textarea> también acepta algunos atributos comunes de los que también disponen los elementos <input>, tales como autocomplete, autofocus, disabled, placeholder, readonly, and required.

Valores por defecto en los cuadros de texto

A continuación vamos a exponer una de las rareas que presenta HTML respecto a la sintaxis de <input> en contraposición con la de <textarea></textarea>. La etiqueta <input> es un elemento vacío, lo que significa que no necesita una etiqueta de cierre. Sin embargo, el elemento <textarea> no es un elemento vacío, lo que significa que debe cerrarse con la etiqueta de cierre adecuada. Esto tiene un impacto en una característica específica de los formularios: el modo en que se define el valor predeterminado. Para definir el valor por defecto de un elemento <input>, debemos usar el atributo value de esta manera:

<input type="text" value="por defecto este elemento se llena con este texto">

Por otro lado, si queremos definir un valor predeterminado para un elemento <textarea>, debemos colocarlo entre las etiquetas de apertura y cierre del elemento <textarea>, de esta forma:

<textarea>
Por defecto, este elemento contiene este texto
</textarea>

Casillas de verificación y botones de opción

Los elementos de selección (o checkable items, en inglés) son controles cuyo estado puede cambiar cuando se hace clic en ellos o en sus etiquetas asociadas. Hay dos tipos de elementos de selección: las casillas de verificación (o check boxes) y los botones de opción (o radio buttons). Ambos usan el atributo checked para indicar si el control de formulario está seleccionado por defecto o no.

Vale la pena señalar que estos controles no se comportan exactamente como otros controles de formulario. Para la mayoría de los controles de formulario, cuando se envía el formulario, se envían todos los controles que tienen un atributo name, incluso si en ellos no se ha introducido ningún valor. En el caso de elementos de selección, sus valores se envían solo si están seleccionados. Si no están seleccionados, no se envía nada, ni siquiera su nombre. Si están seleccionados pero no tienen ningún valor asignado, el nombre se envía con el valor on.

Casillas de verificación

Las casillas de verificación se crean estableciendo el atributo type del elemento <input> con el valor checkbox. Los elementos de este tipo se suelen representar como casillas que se marcan al activarse, como las que se pueden ver en muchos formularios oficiales en papel. La apariencia exacta depende de la configuración del sistema operativo en el que se ejecuta el navegador. Generalmente se trata de un cuadrado, pero puede tener esquinas redondeadas. Una casilla de verificación permite seleccionar diversas opciones para enviarlas en un formulario.

Veamos y probemos un ejemplo muy simple:

<label>
  <input type="checkbox" name="zanahorias" value="zanahorias" checked />
  ¿Te gustan las zanahorias?
</label>

Al incluir el atributo checked, la casilla de verificación se marca automáticamente cuando se carga la página. Al hacer clic en la casilla de verificación o en su etiqueta asociada, la casilla de verificación se activa o desactiva.

Debido a su naturaleza activa-inactiva, las casillas de verificación se consideran botones de conmutación, y muchos desarrolladores y diseñadores han ampliado el estilo de casilla de verificación predeterminado para crear botones que parecen interruptores de conmutación. Aquí puedes ver un ejemplo (y también puedes observar el código fuente).

Botones de opción

Un botón de opción se crea estableciendo el atributo type del elemento <input> en el valor radio. Los elementos de este tipo se utilizan generalmente en grupos (colecciones de botones del mismo tipo que describen un conjunto de opciones relacionadas). Solo se puede seleccionar un botón de opción en un grupo determinado al mismo tiempo. Los botones de opción se representan normalmente como círculos pequeños, que se rellenan o resaltan cuando se seleccionan.

Veamos el código fuente de un ejemplo simple que contiene varios botones de opción y cómo lo representa un navegador:

¿Cuál es tu comida favorita?<br />
<label>
  <input type="radio" name="comida" value="sopa" checked="" />Sopa
</label><br />
<label>
  <input type="radio" name="comida" value="curry" />Curry
</label><br />
<label>
  <input type="radio" name="comida" value="pizza" />Pizza
</label><br />
¿Cuál es tu comida favorita?



Como hemos visto en este último ejemplo, es posible asociar diversos botones de opción. Si comparten el mismo valor de atributo name, se considera que están en el mismo grupo de botones. Solo un botón dentro de un grupo puede estar activado en cada momento. Esto significa que cuando uno de ellos se selecciona, todos los demás se deseleccionan automáticamente. Al enviar el formulario, solo se envía el valor del botón de opción seleccionado. Si ninguno de ellos está seleccionado, se considera que el conjunto completo de botones de opción está en un estado desconocido y no se envía ningún valor con el formulario. Cuando en un grupo de botones con el mismo nombre se selecciona uno de los botones de opción, no es posible deseleccionar todos los botones sin reiniciar el formulario.

El elemento <select>

El elemento select (<select>) de HTML representa un control que muestra un menú de opciones. Las opciones contenidas en el menú son representadas por elementos <option>, los cuales pueden ser agrupados por elementos <optgroup>. Además, una determinada opción puede estar preseleccionada al cargarse la página.

Veamos el siguiente ejemplo de código y cómo lo representa el navegador:

<label>Escoge la mascota que más te guste:
  <select name="mascota" id="mascota">
    <option value="">--Selecciona una opción--</option>
    <option value="perro">Perro</option>
    <option value="gato">Gato</option>
    <option value="hamster">Hamster</option>
    <option value="loro">Loro</option>
    <option value="arana">Araña</option>
    <option value="pez">Pez</option>
  </select>
</label>

El ejemplo anterior muestra el uso típico del elemento <select>. Lo asociamos con una etiqueta <label> con fines de accesibilidad y utilizamos el atributo name para representar el nombre del campo que se enviará al servidor. Cada opción de menú está definida por un elemento <option> anidado dentro del <select>.

Cada elemento <option> debe tener un atributo value que contenga el valor para enviar al servidor cuando se seleccione esa opción. Si no se incluye ningún atributo value, el valor predeterminado es el texto contenido dentro del elemento. Puedes incluir un atributo selected en un elemento <option> para que se seleccione de forma predeterminada cuando se carga la página por primera vez.

El elemento <select> tiene algunos atributos únicos que puedes usar para personalizarlo. Por ejemplo, con el atributo multiple especificas si se pueden seleccionar varias opciones y con el atributo size puedes especificar cuántas opciones deben mostrarse a la vez. También se aceptan muchos atributos genéricos tales como requireddisabledautofocus, etc.

Por último, conviene mencionar que se pueden anidar varios elementos <option> dentro de <optgroup> para crear grupos separados de opciones dentro del menú desplegable.

Selector de archivos

Hay un último tipo de <input>: el tipo entrada de archivo. Los formularios pueden enviar archivos a un servidor (esta acción específica también se detalla en el artículo Enviar los datos del formulario). El control de selección de archivos se puede usar para elegir uno o más archivos para enviar.

Para crear un control de selección de archivos, podemos utilizar el elemento <input> con su atributo type establecido en file. Es posible restringir los tipos de archivos que se aceptan utilizando el atributo accept. Además, puedes permitir que el usuario elija más de un archivo añadiendo el atributo multiple.

En este ejemplo, se crea un control de selección de archivos que solicita archivos de imágenes gráficas. En este caso, el usuario puede seleccionar múltiples archivos:

<input type="file" name="file" accept="image/*" multiple="" />

En algunos dispositivos móviles, el control de selección de archivos permite acceder a fotos, vídeos y audio capturados directamente por la cámara y el micrófono del dispositivo. Para ello basta con añadir información de captura al atributo accept de la manera siguiente:

<input type="file" accept="image/*;capture=camera">
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

Botones

El botón de opción no es realmente un botón, a pesar de su nombre. A continuación echaremos un vistazo a los controles de formulario que son botones propiamente. La etiqueta de HTML <button> representa un elemento de tipo botón que puede ser utilizado en formularios o en cualquier parte de la página que necesite un botón simple y estándar para iniciar una acción al pulsar sobre él. De forma predeterminada, los botones HTML se presentan con un estilo similar en todas las plataformas, pero estos estilos se pueden cambiar fácilmente utilizando CSS.

El comportamiento por defecto de un botón se puede cambiar mediante el atributo type. Los posibles valores que podemos utilizar son:

  • submit: El botón envía los datos del formulario al servidor. Este es el valor predeterminado si el atributo no se especifica para los botones asociados con el formulario o si el atributo contiene un valor vacío o no válido.
  • reset: El botón restablece todos los controles a sus valores iniciales. Debería usarse solo cuando sea necesario, ya que puede provocar que un usuario pierda los datos que acaba de introducir.
  • button: El botón no tiene un comportamiento predeterminado y no hace nada cuando se presiona de manera predeterminada. Utilizando código JavaScript podemos iniciar diversas acciones para responder a los eventos que genere este elemento.

Veamos algunos tipos de botones con un ejemplo sencillo:

<p>
  <label>Introduce un comentario: <input type="text" name="comentario" required="" /></label>
</p>
<p>
  <button type="submit">Este es un botón de tipo "submit"</button>
</p>
<p>
  <button type="reset">Este es un botón de tipo "reset"</button>
</p>
<p>
  <button type="button">Este es un botón de tipo "button"</button>
</p>

Como puedes ver en los ejemplos, los elementos <button> te permiten usar código HTML entre las etiquetas <button> de apertura y cierre. Los elementos <input>, por otro lado, son elementos vacíos; el contenido que muestran está limitado al atributo value y, por lo tanto, solo aceptan contenido de texto sin formato.

Ejercicio propuesto: Campos básicos

Crea una página web para mostrar ejemplos de los elementos de tipo «input» de esta unidad: texto de una sola línea y de varias líneas, contraseña, casillas de verificación y botones de radio, lista desplegable con opciones y selector de archivos. Debes incluir al menos un ejemplo de cada uno de ellos. Debes usar párrafos y etiquetas, y también el atributo «required» y otras posibles restricciones que se puedan aplicar a cada uno de ellos. Verifica el resultado en tu navegador y no olvides incluir todas las etiquetas HTML básicas y validar tu código. Por último, verifica el resultado en tu teléfono móvil.

Nota: Coloca todas las etiquetas dentro de un contenedor <form> y usa un botón de tipo «submit» para verificar que los campos estén validados correctamente. Puedes utilizar un código similar a este:
<form>
  <p><label>
    Nombre: <input type="text" name="nombre" required="" />
  </label></p>
  <p><label>
    Apellidos: <input type="text" name="apellidos" required="" />
  </label></p>
  <p><label>
    Contraseña: <input type="password" name="contrasena1" required="" />
  </label></p>
  <p><label>
    Repite la contraseña: <input type="password" name="contrasena2" required="" />
  </label></p>
  ...
  <p><button>Enviar</button></p>
</form>

Campos nuevos en HTML5

En la sección anterior vimos el elemento <input> y los valores de su atributo type, disponibles desde los inicios de HTML. Ahora veremos en detalle la funcionalidad de los controles de formulario más recientes, incluyendo algunos tipos de entrada nuevos, los cuales fueron añadidos en HTML5 para permitir la recolección de tipos de datos específicos.

Campo de dirección de correo electrónico

Este tipo de campo se define utilizando el valor  email en el atributo type del elemento <input>:

<label>
  Introduce un correo electrónico válido: 
  <input type="email" name="correo" placeholder="[email protected]" required="" />
</label>

Cuando se utiliza este valor type, se le obliga al usuario a escribir dentro del campo una dirección de correo electrónico válida. Cualquier otro contenido ocasiona que el navegador muestre un mensaje de error cuando se envía el formulario. Puedes verlo en acción en el siguiente ejemplo:

Puedes utilizar también el atributo multiple en combinación con el tipo input email para permitir que sean introducidas varias direcciones de correo electrónico separadas por comas en el mismo input:

<label>
  Múltiples correos electrónicos: <input type="email" name="correos" multiple="" />
</label>

En algunos dispositivos, en particular dispositivos táctiles con teclados dinámicos como los smart phones, debería desplegarse un teclado virtual que es más adecuado para introducir direcciones de correo electrónico, incluyendo la tecla @.

Campo URL

Se puede crear un tipo especial de campo para introducir URLs utilizando el valor url para el atributo type:

<label>
  Introduce una URL:
  <input type="url" name="url" placeholder="https://..." required="" />
</label>

Este tipo añade restricciones de validación en el campo. El navegador informará de un error si no se introdujo el protocolo (como http: o  https:), o si de algún modo la URL es claramente incorrecta. Debemos tener en cuenta que solo porque la URL tenga un formato correcto, no significa necesariamente que la dirección al que hace referencia exista. Puedes hacer pruebas con el siguiente ejemplo:

En dispositivos con teclados dinámicos a menudo se mostrarán por defecto algunas o todas las teclas como los dos puntos, el punto, y la barra inclinada.

Campo número de teléfono

Se puede crear un campo especial para introducir números de teléfono utilizando tel como valor del atributo type:

<label>
  Introduce un número de teléfono:
  <input type="tel" name="telefono" placeholder="123 456 789" />
</label>

Cuando se accede desde un dispositivo táctil con teclados dinámicos, muchos de ellos mostrarán un teclado numérico cuando se encuentren con type="tel", lo que significa que este tipo es útil no sólo para ser utilizado para números de teléfono, sino también cuando sea útil un teclado numérico.

Debido a la gran variedad de formatos de número de teléfono existentes, este tipo de campo no establece ningún tipo de restricción sobre el valor introducido por el usuario (esto significa que permite incluir letras, etc…). Se puede utilizar el atributo pattern para establecer restricciones (puedes consultar más información sobre este atributo en Validación de formulario en el lado cliente).

Campo numérico

Se pueden crear controles para introducir números con el type number de <input>. Este control se parece a un campo de texto pero solo permite números de punto flotante, y normalmente proporciona botones deslizadores para incrementar o reducir el valor del control. En dispositivos con teclados dinámicos generalmente se muestra el teclado numérico.

Con el tipo de input number  puedes limitar los valores mínimo y máximo permitidos definiendo los atributos min y  max. También puedes utilizar el atributo step para cambiar el incremento y decremento causado por los botones deslizadores. Por defecto, el tipo de input number sólo valida si el número es un entero. Para permitir números decimales, especifica step="any". Si se omite, su valor por defecto es 1, lo que significa que solo son válidos números enteros.

Miremos algunos ejemplos. El primero de los siguientes crea un control numérico cuyo valor está restringido a cualquier valor entre 1 y 10, y sus botones cambian su valor en incrementos o decrementos de 2.

<input type="number" name="edad" min="1" max="10" step="2" value="1" />

El segundo crea un control numérico cuyo valor está restringido a cualquier valor entre el 0 y 1 ambos inclusive, y sus botones cambian su valor en incrementos o decrementos de 0.01:

<input type="number" name="cambio" min="0" max="1" step="0.01" value="0" />

El tipo de input number tiene sentido cuando esté limitado el rango de valores válidos, por ejemplo la edad de una persona o su altura. Si el rango es demasiado grande para que los cambios de incremento tengan sentido (por ejemplo los códigos postales de USA, cuyo rango va de 00001 a 99999), entonces sería una mejor opción utilizar el tipo tel: proporciona el teclado numérico mientras que omite el componente de interfaz de usuario de los deslizadores de número.

Controles deslizantes

Otra forma de introducir un número es usando un slider. Habrás observado bastantes controles parecidos en webs donde por ejemplo se tiene que establecer un precio máximo para realizar una compra y se solicita realizar un filtro por dicho campo. Vamos a observar un ejemplo:

Escoge un precio máximo:

En cuanto al uso, los controles deslizantes son menos precisos que los campos de texto. Por lo tanto, se utilizan para elegir un número cuyo valor exacto no es necesariamente importante.

Un control deslizante o barra de desplazamiento se crea usando el <input> con el valor  range en el atributo type. El deslizador se puede mover con el ratón, también utilizando dispositivos táctiles, o con las flechas del teclado.

Es importante configurar correctamente este campo, y con ese propósito es muy recomendable utilizar los atributos minmaxstep, que establecen los valores mínimo, máximo y de incremento, respectivamente.

Veamos el código fuente correspondiente al ejemplo anterior, para que puedas ver cómo se consigue dicho resultado. En primer lugar, el código HTML básico:

<form>
  <p>Escoge un precio máximo:</p>
  <input type="range" name="barra"
         min="50000" max="500000" step="100" value="250000"
         oninput="numero.value = this.value" />
  <input type="number" name="numero"
         min="50000" max="500000" step="100" value="250000"
         oninput="barra.value = this.value" />
</form>

Este ejemplo crea un control deslizante cuyo valor puede oscilar entre 50000500000, que aumenta / disminuye de 100 en 100. En este caso hemos asignado el valor predeterminado de 250000, usando el atributo value.

Un inconveniente que presentan los controles deslizantes es que no ofrecen ningún tipo de retroalimentación visual sobre cuál es el valor actual. Por eso hemos incluido un elemento <input> para mostrar (o también cambiar) el valor actual. 

Selectores de fecha y hora

La recopilación de valores de fecha y hora ha sido desde siempre una pesadilla para los desarrolladores web. Para una buena experiencia de usuario, es importante proporcionar una interfaz que permita seleccionar directamente una fecha sobre un calendario, sin necesidad de cambiar de contexto a una aplicación de calendario nativa o a otra aplicación que utilice diferentes formatos que sean difíciles de analizar. Por ejemplo, el último minuto del milenio anterior se puede expresar de las siguientes formas diferentes, por ejemplo: 1999/12/31, 23:59 o 12/31/99T11:59PM.

Los controles de fecha HTML están disponibles para manejar este tipo específico de datos, proporcionando widgets de calendario y haciendo que los datos sean uniformes.

Para crear un campo de tipo fecha utilizamos el elemento <input> y un valor apropiado para el atributo type, dependiendo de si deseas recopilar fechas, horas o ambos. Aquí puedes observar un ejemplo (si el navegador no aceptara alguno de estos tipos, utilizaría un elemento alternativo que permita la introducción mediante texto):

<p><label>
  Fecha y hora local: <input type="datetime-local" name="fechayhora" />
</label></p>
<p><label>
  Mes: <input type="month" name="mes">
</label></p>
<p><label>
  Hora: <input type="time" name="hora">
</label></p>
<p><label>
  Semana: <input type="week" name="semana">
</label></p>




Todos los controles de fecha y hora se pueden restringir usando los atributos minmax, con una mayor restricción posible a través del atributo step (cuyo valor varía según el tipo de entrada):

<label>
  ¿Cuándo es tu cumpleaños?
  <input type="date" name="fecha" min="1975-01-01" max="2025-12-31" step="1" />
</label>

Selector de color

Los colores también suelen ser difíciles de manejar. Hay muchas formas de expresarlos: valores RGB (decimal o hexadecimal), valores HSL, palabras clave, etc.

Se puede crear un control de tipo color utilizando el elemento <input> con su atributo type con valor color:

<label>
  Selecciona una color: <input type="color" name="color" />
</label>

Si el navegador admite este tipo de campo, al hacer clic en él se utilizará la funcionalidad de elección de color predeterminada del sistema operativo. Puedes observar el resultado con el siguiente ejemplo:

Campo de búsqueda

Los campos de búsqueda se utilizan para crear cajas de búsqueda en páginas web y aplicaciones. Este tipo de campo se define utilizando el valor  search en su atributo type:

<input type="search" name="buscar" placeholder="Buscar" required="" />

La diferencia principal entre un campo text y un campo search, es el estilo que el navegador aplica a uno u otro. A menudo los campos search se muestran con bordes redondeados; y a veces también se muestra una «Ⓧ», para limpiar el campo de cualquier valor cuando se pulsa sobre él. Además, en dispositivos con teclado dinámico, la tecla enter del teclado suele mostrar un icono de lupa.

Otra característica que vale la pena señalar es que se pueden guardar los valores de un campo search automáticamente y reutilizarse en múltiples páginas del mismo sitio web para ofrecer autocompletado. Esta característica suele ocurrir de forma automática en la mayoría de navegadores modernos.

Ejercicio propuesto: Campos HTML5

Crea una página web para mostrar todos los elementos de esta última sección: correo electrónico, url, número de teléfono, campo numérico, control deslizante, fecha y hora, selector de color y campo de búsqueda. Debes incluir al menos un ejemplo para cada uno de ellos. Debes usar párrafos y etiquetas, y también el atributo «required» y otras restricciones según el campo del que se trate. Comprueba el resultado en tu navegador y no olvides incluir todas las etiquetas HTML básicas y validar el código. Por último, comprueba el resultado también en tu teléfono móvil.

Coloca todas las etiquetas dentro de un contenedor <form> y usa un botón de tipo «submit» para comprobar que los campos se validan correctamente:
<form>
  <p><label>
    Correo principal: <input type="email" name="correo1" required="" />
  </label></p>
  <p><label>
     Otro correo: <input type="email" name="correo2" required="" />
  </label></p>
  <p><label>
     Tu página web: <input type="url" name="web1" required="" />
  </label></p>
  <p><label>
    Página web de tu instituto: <input type="url" name="web2" required="" />
  </label></p>
  ...
  <p><button>Enviar</button></p>
</form>

Atributos comunes

Muchos de los elementos que se utilizan para definir controles de formulario tienen sus atributos específicos propios. Sin embargo, hay un conjunto de atributos que son comunes para todos los elementos de formulario. Ya has conocido algunos, pero a continuación encontrarás una lista de esos atributos comunes para referencias futuras:

Nombre del atributoValor por defectoDescripción
autofocusfalseEste atributo booleano te permite especificar que el elemento ha de tener el foco de entrada automáticamente cuando se carga la página. En un documento, solo un elemento asociado a un formulario puede tener este atributo especificado.
disabledfalseEste atributo booleano indica que el usuario no puede interactuar con el elemento. Si no se especifica este atributo, el elemento hereda su configuración del elemento que lo contiene, por ejemplo, <fieldset>. Si el elemento que lo contiene no tiene el atributo establecido en disabled, el elemento está habilitado.
formEl elemento <form> con el que está asociado el control, que se usa cuando no está anidado dentro de ese formulario. El valor del atributo debe ser el atributo id de un elemento <form> del mismo documento. Esto te permite asociar un formulario con un control de formulario que esté fuera de aquel, incluso si está dentro de un elemento de formulario diferente.
nameEl nombre del campo que se envía con los datos del formulario.
valueEl valor inicial del campo.

Un primer formulario «real»

En esta sección crearemos un formulario web completo y funcional. Diseñaremos un formulario sencillo con los campos adecuados y otros elementos HTML, y explicaremos cómo se envían los datos a un servidor. Ampliaremos cada uno de estos subtemas más adelante.

Diseñar el formulario

Antes de comenzar a escribir código, siempre es mejor tomarse el tiempo necesario para pensar cómo queremos que sea nuestro formulario. Diseñar una maqueta rápida nos ayudará a definir el conjunto de datos adecuado que debemos pedirle al usuario. Desde el punto de vista de la experiencia del usuario (UX), es importante recordar que cuanto más grande es un formulario, más te arriesgas a frustrar a las personas que lo usen. Un formulario tiene que ser simple y conciso, y por ello deberíamos solicitar solo los datos que necesitemos.

Diseñar formularios es un paso importante cuando creamos un sitio web o una aplicación. Va más allá del alcance de este sección exponer esto en detalle, pero si deseas profundizar en ese tema, puedes leer los siguientes artículos

En esta sección vamos a crear un formulario de contacto sencillo. Observemos un posible borrador:

Nuestro formulario va a tener tres campos de texto y un botón. Le pedimos al usuario su nombre, su correo electrónico y el mensaje que desea enviar. Al pulsar el botón sus datos se enviarán a un servidor web.

Implementando nuestro formulario

Vamos a proceder ahora a escribir el código HTML para nuestro formulario. Vamos a utilizar los elementos HTML siguientes: <form>, <label>, <input>, <textarea> y <button>.

El elemento <form>

Todos los formularios comienzan con un elemento <form>, como este:

<form action="contactar.php" method="get">

</form>

Este elemento define formalmente un formulario. Es un elemento contenedor, como un elemento <section> o <footer>, pero específico para contener formularios; también admite algunos atributos específicos para la configuración de la forma en que se comporta el formulario. Todos sus atributos son opcionales, pero es una práctica estándar establecer siempre al menos los atributos action y method:

  • El atributo action define la ubicación (URL) donde se envían los datos que el formulario ha recopilado cuando se validan.
  • El atributo method define con qué método HTTP se envían los datos (generalmente get o post).

Veremos cómo funcionan esos atributos más adelante.

Los elementos <label>, <input> y <textarea>

Nuestro formulario de contacto no es complejo en absoluto: la parte para la entrada de datos contiene tres campos de texto, cada uno con su elemento <label> correspondiente:

En términos de código HTML, para implementar estos controles de formulario necesitamos algo como lo siguiente:

<form action="contactar.php" method="GET">
  <p>
    <label>Nombre: <input type="text" name="nombre" required="" /></label>
  </p>
  <p>
    <label>Correo: <input type="email" name="correo" required="" /></label>
  </p>
  <p>
    <label>Mensaje: <textarea name="mensaje" required=""></textarea></label>
  </p>
</form>

Por motivos de usabilidad y accesibilidad incluimos una etiqueta explícita para cada control de formulario. Hacer esto presenta muchas ventajas porque la etiqueta está asociada al control del formulario y permite que los usuarios con ratón, y dispositivos táctiles hagan clic en la etiqueta para activar el control correspondiente, y también proporciona accesibilidad con un nombre que los lectores de pantalla leen a sus usuarios. Puedes encontrar más detalles sobre las etiquetas de los formularios en Cómo estructurar un formulario web.

En el elemento <input>, el atributo más importante es type, ya que define la forma en que el elemento <input> aparece y se comporta. Puedes encontrar más información sobre esto en el artículo sobre Controles de formularios nativos básicos.

  • En nuestro ejemplo, usamos el valor <input/text> para la primera entrada, el valor predeterminado para este atributo. Representa un campo de texto básico de una sola línea que acepta cualquier tipo de entrada de texto.
  • Para la segunda entrada, usamos el valor <input/email>, que define un campo de texto de una sola línea que solo acepta una dirección de correo electrónico. Esto convierte un campo de texto básico en una especie de campo «inteligente» que efectúa algunas comprobaciones de validación de los datos que el usuario escribe. También hace que aparezca un diseño de teclado más apropiado para introducir direcciones de correo electrónico (por ejemplo, con un símbolo @ por defecto) en dispositivos con teclados dinámicos, como teléfonos inteligentes. Puedes encontrar más información sobre la validación de formularios en el artículo de Validación de formularios por parte del cliente.

El elemento <button>

El marcado de nuestro formulario está casi completo; solo necesitamos añadir un botón para permitir que el usuario envíe sus datos una vez que haya completado el formulario. Esto se hace con el elemento <button>; basta con añadir lo siguiente justo encima de la etiqueta de cierre </form>:

<button type="submit">Enviar mensaje</button>

Como hemos explicado anteriormente, el elemento <button> también acepta el atributo type, que a su vez acepta uno de estos tres valores: submitreset o button:

  • Un clic en un botón submit (el valor predeterminado) envía los datos del formulario a la página web definida por el atributo action del elemento <form>.
  • Un clic en un botón reset restablece de inmediato todos los controles de formulario a su valor predeterminado. Desde el punto de vista de UX, esto se considera una mala práctica, por lo que debes evitar usar este tipo de botones a menos que realmente tengas una buena razón para incluirlos.
  • Un clic en un botón button no hace… ¡nada! Eso suena tonto, pero es muy útil para crear botones personalizados: puedes definir su función con JavaScript.

Enviando datos al servidor web

La última parte, y quizás la más complicada, es manejar los datos del formulario en el lado del servidor. El elemento <form> define dónde y cómo enviar los datos gracias a los atributos action y method.

Proporcionamos un nombre (name) a cada control de formulario. Los nombres son importantes tanto en el lado del cliente como del servidor; le dicen al navegador qué nombre debe dar a cada dato y, en el lado del servidor, permiten que el servidor acceda a cada dato utilizando su nombre. Los datos del formulario se envían al servidor como pares de nombre/valor.

Para poner nombre a los diversos datos que se introducen en un formulario, debes usar el atributo name en cada control de formulario que recopila un dato específico. Veamos de nuevo algunos el código fuente de nuestro formulario:

<form action="contactar.php" method="GET">
  <p>
    <label>Nombre: <input type="text" name="nombre" required="" /></label>
  </p>
  <p>
    <label>Correo: <input type="email" name="correo" required="" /></label>
  </p>
  <p>
    <label>Mensaje: <textarea name="mensaje" required=""></textarea></label>
  </p>
  <p>
    <button type="submit">Enviar mensaje</button>
  </p>
</form>

En nuestro ejemplo, el formulario envía tres datos denominados «nombre», «correo» y «mensaje». Esos datos se envían a la URL «contactar.php» utilizando el método GET de HTTP.

En el lado del servidor, la secuencia de comandos de la URL «contactar.php» recibe los datos como una lista de tres elementos clave/valor contenidos en la solicitud HTTP. La forma en que este script maneja esos datos depende de ti. Cada lenguaje de servidor (PHP, Python, Ruby, Java, C#, etc.) tiene su propio mecanismo de manipulación de datos de formulario. No profundizaremos demasiado en esta sección, pero intentaremos completar nuestro ejercicio para que sea completamente funcional. También puedes consultar el artículo Enviar los datos de un formulario.

Validación de formulario en la parte del cliente

Antes de enviar datos al servidor, es importante asegurarse de que se completan todos los controles de formulario requeridos, y en el formato correcto. Esto se denomina validación de formulario en el lado del cliente y ayuda a garantizar que los datos que se envían coinciden con los requisitos establecidos en los diversos controles de formulario.

La validación en el lado del cliente es una verificación inicial y una característica importante para garantizar una buena experiencia de usuario; mediante la detección de datos no válidos en el lado del cliente, el usuario puede corregirlos de inmediato. Si el servidor lo recibe y, a continuación, lo rechaza; se produce un retraso considerable en la comunicación entre el servidor y el cliente que insta al usuario a corregir sus datos.

Si accedes a cualquier sitio web que incluya un formulario de registro observarás que se muestran comentarios cuando no introduces tus datos en el formato que se espera. Recibirás mensajes como:

  • «Este campo es obligatorio» (No se puede dejar este campo en blanco).
  • «Introduzca su número de teléfono en el formato xxx-xxx-xxx» (Se requiere un formato de datos específico para que se considere válido).
  • «Introduzca una dirección de correo electrónico válida» (los datos que introdujiste no están en el formato correcto).
  • «Su contraseña debe tener entre 8 y 30 caracteres y contener una letra mayúscula, un símbolo y un número». (Se requiere un formato de datos muy específico para tus datos).

Esto se llama validación de formulario. Cuando introduces los datos, el navegador y/o el servidor web verifican que estén en el formato correcto y dentro de las restricciones establecidas por la aplicación. La validación realizada en el navegador se denomina validación en el lado del cliente, mientras que la validación realizada en el servidor se denomina validación en el lado del servidor. En esta sección nos centraremos en la validación en el lado del cliente.

Si la información está en el formato correcto, la aplicación permite que los datos se envíen al servidor y (en general) que se guarden en una base de datos; si la información no está en el formato correcto, da al usuario un mensaje de error que explica lo que debe corregir y le permite volver a intentarlo.

Una de las características más importantes de los controles de formulario de HTML5 es la capacidad de validar la mayoría de los datos de usuario sin depender de JavaScript. Esto se realiza mediante el uso de atributos de validación en los elementos del formulario. Los hemos visto anteriormente, pero recapitulamos aquí:

  • required: Especifica si un campo de formulario debe completarse antes de que se pueda enviar el formulario.
  • minlength y maxlength: Especifican la longitud mínima y máxima de los datos de texto (cadenas).
  • min y max: Especifican los valores mínimo y máximo de los tipos de entrada numéricos.
  • type: Especifica si los datos deben ser un número, una dirección de correo electrónico o algún otro tipo de preajuste específico. 
  • pattern: Especifica una expresión regular que define un patrón que los datos que se introduzcan deben seguir.

Si los datos que se introducen en un campo de formulario siguen todas las reglas que especifican los atributos anteriores, se consideran válidos. Si no, se consideran no válidos.

Cuando un elemento es válido, se cumplen los aspectos siguientes:

  • El elemento coincide con la pseudoclase :valid de CSS, lo que te permite aplicar un estilo específico a los elementos válidos.
  • Si el usuario intenta enviar los datos, el navegador envía el formulario siempre que no haya nada más que lo impida (por ejemplo, JavaScript).

Cuando un elemento no es válido, se cumplen los aspectos siguientes:

  • El elemento coincide con la pseudoclase :invalid de CSS, y a veces con otras pseudoclases de interfaz de usuario (UI) –por ejemplo, :out-of-range– dependiendo del error, que te permite aplicar un estilo específico a elementos no válidos.
  • Si el usuario intenta enviar los datos, el navegador bloquea el formulario y muestra un mensaje de error.
A tener en cuenta…

Queremos que completar formularios web sea lo más fácil posible. Entonces, ¿por qué insistimos en validar nuestros formularios? Hay tres razones principales:

  • Queremos obtener los datos correctos en el formato correcto. Nuestras aplicaciones no funcionarán correctamente si los datos de nuestros usuarios se almacenan en el formato incorrecto, son incorrectos o se omiten por completo.
  • Queremos proteger los datos de nuestros usuarios. Obligar a nuestros usuarios a introducir contraseñas seguras facilita proteger la información de su cuenta.
  • Queremos protegernos a nosotros mismo. Hay muchas formas en que los usuarios maliciosos puedan usar mal los formularios desprotegidos y dañar la aplicación (puedes consultar Seguridad del sitio web).

Por todo ello debemos tener en cuenta que la validación en el lado del cliente no debe considerarse una medida de seguridad exhaustiva. Tus aplicaciones siempre deben realizar comprobaciones de seguridad de los datos enviados por el formulario en el lado del servidorasí como también en el lado del cliente, porque la validación en el lado del cliente es demasiado fácil de evitar, por lo que los usuarios malintencionados pueden enviar fácilmente datos incorrectos a tu servidor (puedes leer Seguridad en los sitios web para conocer más detalles).

Nosotros no entraremos en detalle ahora sobre cómo implementar la validación en el lado del servidor, ya que está fuera del alcance de esta unidad, pero debemos tenerlo en cuenta.

En el lado del servidor: Recuperando los datos

Sea cual sea el método HTTP que elijamos, el servidor recibe una cadena que será analizada con el fin de obtener los datos como una lista de pares clave/valor. La forma de acceder a esta lista depende de la plataforma de desarrollo que utilicemos y de las estructuras específicas que utilicemos.

PHP ofrece algunos objetos globales para acceder a los datos. Suponiendo que hayamos utilizado el método GET, el ejemplo que utilizaremos en las secciones siguientes cogerá los datos y los guardará en un fichero. Por supuesto, lo que se hace con los datos depende de nosotros. Es posible visualizarlos, almacenarlos en una base de datos, enviarlos por correo electrónico, o procesarlos de alguna otra manera.

Por motivos de sencillez y posibilidad de realizar pruebas en muchos entornos, utilizaremos PHP para completar nuestros ejemplos y conseguir que sean funcionales.

El método GET

El método GET es  utilizado por el navegador para pedir al servidor que se envíe de vuelta un recurso dado: «Hey servidor, quiero conseguir este recurso.» En este caso, el navegador envía un cuerpo vacío. Debido a que el cuerpo está vacío, si un formulario se envía utilizando este método, los datos enviados al servidor se anexan a la URL.

Echando un vistazo a nuestro formulario de contacto, y teniendo en cuenta que hemos utilizado el método GET, cuando enviemos el formulario, veremos que los datos aparecen en la URL (en la barra de direcciones del navegador). Por ejemplo, si introducimos «Fernando» como nombre de usuario, «[email protected]» como dirección de correo electrónico y «Hola» como mensaje, y pulsamos el botón «Enviar», deberíamos ver algo como esto en la barra de direcciones: «contactar.php?nombre=Fernando&[email protected]&message=Hola«.

Los datos se añaden a la URL como una serie de pares de nombre / valor. Después que la dirección web URL ha terminado, se incluye un signo de interrogación ( ?) seguido de los pares de nombre / valor, cada uno separado por un signo ( &). En nuestro caso estamos enviando los siguientes datos al servidor:

  • nombre, que tiene el valor «Fernando»
  • correo, que tiene el valor «[email protected]»
  • mensaje, que tiene el valor «Hola»
Ejercicio propuesto: Formulario de contactar

Crea una nueva página web con un formulario de contactar, utilizando el código del ejemplo anterior. Debería obtener algo similar al formulario que tienes a continuación. Comprueba el resultado en tu navegador y valida el código. También intente enviar los datos pulsando el botón y verifica la URL que aparece en la barra de direcciones. Finalmente, ajusta la longitud mínima y máxima de los campos de texto utilizando los valores que consideres adecuados para asegurarte de que los datos del formulario sean correctos antes de enviarlos al servidor.

Ten en cuenta que si pulsas el botón enviar, irás a la página «contactar.php», que aún no está implementada. En este punto obtendrás un error, pero podrás ver toda la información en la URL, ya que estamos usando el método GET.

Ejercicio propuesto: Guardar datos de contacto

Continuemos con nuestro ejemplo PHP para guardar nuestros datos del formulario de contacto. Crea un archivo «contactar.php» con el siguiente código. Sube el formulario y el código PHP a tu servidor y prueba el ejemplo completo del formulario de contacto para verificar que los mensajes se van guardando en el servidor. Diles también a tus compañeros que prueben la página web y verifiquen que los datos que han introducido también están guardados.

<?php
  // La variable global $_GET nos permite acceder a los datos enviados con el método GET
  $nombre = $_GET['nombre'];
  $correo = $_GET['correo'];
  $mensaje = $_GET['mensaje'];

  // Colocamos todos los datos en el archivo "mensajes.csv" en una nueva línea cada vez
  file_put_contents("mensajes.csv", "$nombre,$correo,$mensaje\n", FILE_APPEND);

  // Mostramos un enlace a la página anterior y también al archivo para comprobar el resultado
  echo "<p>Datos guardados</p>";
  echo "<p>Haz click <a href='".$_SERVER['HTTP_REFERER']."'>aquí</a> para ir a la página anterior</p>";
  echo "<p>Haz click <a href='mensajes.csv' target='_blank'>aquí</a> para ver todos los mensajes</p>";
?>
Ejercicio propuesto: Formulario para saludar

Crea una nueva página web con un formulario similar al siguiente, comprobando el resultado en el navegador y validando el código. Pulsa el botón enviar y eche un vistazo a la barra de direcciones del navegador. Después de eso, introduce otros datos diferentes a los valores predeterminados, presione el botón Enviar de nuevo y verifique que la nueva URL contenga la información correcta. Finalmente, cambia el valor predeterminado de ambos campos de texto («Hola» y «Mamá») para usar otros valores y comprueba el resultado nuevamente.

Ten en cuenta que si presionas el botón enviar, irá a la página «saludos.php», que aún no está implementada. En este punto obtendrás un error, pero verás toda la información en la URL, ya que estamos usando el método GET.
<form action="saludos.php" method="GET">
  <p>
    <label>
      ¿Qué quieres decir para saludar?: <input name="saludo" value="Hola" required="" />
    </label>
  </p>
  <p>
    <label>
      ¿A quién se lo quieres decir?: <textarea name="persona" required="">Mamá</textarea>
    </label>
  </p>
  <p>
    <button>Enviar el saludo</button>
  </p>
</form>
Ejercicio propuesto: Guardar texto genérico

Continuemos con nuestro código PHP para guardar nuestros datos del formulario para saludar. Crea un archivo «saludar.php» con el código que aparece a continuación. Graba el formulario y el código PHP en el servidor y graba el ejemplo completo del formulario para comprobar que ahora los saludos ahora se guardan en el servidor. También diles a tus compañeros que prueben la página web y verifiquen que los datos que han introducido también estén guardados.

Observarás las similitudes respecto al ejemplo anterior. Solo hemos cambiado las variables ($saludo y $persona) y el nombre del archivo donde se guardan los datos («saludos.csv»).
<?php
  // La variable global $_GET nos permite acceder a los datos enviados con el método GET
  $saludo = $_GET['saludo'];
  $persona = $_GET['persona'];

  // Colocamos todos los datos en el archivo "saludos.csv" en una nueva línea cada vez
  file_put_contents("saludos.csv", "$saludo,$persona\n", FILE_APPEND);

  // Mostramos un enlace a la página anterior y también al archivo para comprobar el resultado
  echo "<p>Datos guardados</p>";
  echo "<p>Haz clic <a href='".$_SERVER['HTTP_REFERER']."'>aquí</a> para volver a la página anterior</p>";
  echo "<p>Haz clic <a href='saludos.csv' target='_blank'>aquí</a> para ver todos los saludos</p>";
?>

El método POST

El método POST es un poco diferente. Es el método que el navegador utiliza para comunicarse con el servidor cuando se pide una respuesta que tenga en cuenta los datos proporcionados en el cuerpo de la petición HTTP: «Hey servidor, echa un vistazo a estos datos y envíame de vuelta un resultado apropiado.» Si un formulario se envía utilizando este método, los datos se anexan al cuerpo de la petición HTTP. Es más seguro que el método GET, ya que cuando el formulario se envía mediante el método POST, ninguna otra persona que se encuentre cerca puede ver los datos. Este método se recomienda, por ejemplo, para ser utilizado en formularios donde se envía una contraseña.

Veamos el siguiente ejemplo, que es bastante similar al formulario en la sección GET anterior, pero con el atributo de método establecido en POST y el tipo de campo establecido en «password»:

<form action="login.php" method="POST">
  <p>
    <label>Usuario: <input type="text" name="usuario" required="" /></label>
  </p>
  <p>
    <label>Contraseña: <input type="password" name="contrasena" required="" /></label>
  </p>
  <p>
    <button>Comprobar usuario y contraseña</button>
  </p>
</form>
Ejercicio propuesto: Formulario de login

Crea una nueva página web con un formulario de inicio de sesión, utilizando el código del ejemplo anterior. Deberías obtener un resultado similar al que se muestra a continuación. Comprueba el resultado en tu navegador y valida el código. A continuación intenta enviar los datos pulsando el botón y observa si hay alguna información en la URL. Finalmente, establece la longitud mínima del campo de texto del usuario en 5 y la máxima en 10, y haz lo mismo para el campo de contraseña.

Ten en cuenta que si pulsas el botón enviar, irás a la página «login.php», que aún no está implementada. En este punto obtendrás un error, pero no verás ninguna información en la URL, ya que estamos usando el método POST.

Ejercicio propuesto: Comprobar datos privados

Continuemos con nuestro código PHP para comprobar el usuario y la contraseña del formulario de inicio de sesión. Crea un archivo «login.php» con el siguiente código. Sube el formulario y el código PHP a tu servidor y prueba tu ejemplo completo del formulario de inicio de sesión para comprobar el usuario («admin») y la contraseña («1234»). También dile a tus compañeros que prueben tu página web. Después de eso, cambia la contraseña del archivo «login.php» y pide a tus compañeros que intenten adivinar la nueva contraseña. Debes usar una contraseña muy simple de entre las que aparecen en «https://en.wikipedia.org/wiki/List_of_the_most_common_passwords» (de lo contrario, es posible que tus compañeros no puedan adivinarla).

Observarás las similitudes respecto al ejemplo anterior. Solo hemos cambiado las variables ($usuario y $contrasena) y hemos utilizado una condición para mostrar una imagen con el pulgar hacia arriba o hacia abajo, dependiendo de si la contraseña es correcta o no.
<?php
  // La variable global $_POST nos permite acceder a los datos enviados con el método POST
  $usuario = $_POST['usuario'];
  $contrasena = $_POST['contrasena'];

  // Comprueba el usuario y la contraseña
  if ($usuario == "admin" && $contrasena == "1234") {
      echo "<img src='https://raw.githubusercontent.com/twbs/icons/main/icons/hand-thumbs-up.svg' width='100' />";
      echo "<p>¡Perfecto! :-)</p><p>Haz clic <a href='".$_SERVER['HTTP_REFERER']."'>aquí</a> para ir a la página anterior</p>";
  }
  else {
      echo "<img src='https://raw.githubusercontent.com/twbs/icons/main/icons/hand-thumbs-down.svg' width='100' />";
      echo "<p>¡Usuario o contraseña incorrectos! :-(</p><p>Haz clic <a href='".$_SERVER['HTTP_REFERER']."'>aquí</a> para probar de nuevo</p>";
  }
?>

Test

Comprueba tus conocimientos con este test sobre formularios y otros conceptos relacionados con esta unidad.

HTML. Unidad 5. Imágenes.

Introducción

Al principio, las páginas web solo contenían texto y resultaba más bien aburrida. Afortunadamente, no pasó mucho tiempo antes de que se añadiera la capacidad de insertar imágenes (y otros tipos de contenido más interesantes). Existen elementos multimedia que debemos tener en cuenta, pero es lógico comenzar con el humilde elemento <img> utilizado para insertar una imagen simple en una página web. En esta unidad veremos en detalle cómo usar este elemento, incluidos sus conceptos básicos y cómo añadir pies de imagen usando <figure>.

¿Cómo ponemos una imagen en una página web?

Para poner una imagen simple en una página web, utilizamos el elemento <img>. Se trata de un elemento vacío (lo que significa que no contiene texto o etiqueta de cierre) que requiere por lo menos de un atributo para ser utilizado: src (a veces denominado por su nombre completo, source). El atributo src contiene una ruta que apunta a la imagen que quieres poner en la página, que puede ser una URL relativa o absoluta, de la misma forma que el elemento <a> contiene los valores del atributo href.

Por ejemplo, si tu imagen se llama dinosaurio.jpg, y está en el mismo directorio que tu página HTML, incluir la imagen de la siguiente manera:

<img src="dinosaurio.jpg" />

El código anterior debería darnos el resultado siguiente:

Si la imagen está en el subdirectorio imagenes, ubicado en el mismo directorio que la página HTML (lo que Google recomienda con fines de indexación y posicionamiento en buscadores SEO), entonces la imagen se puede incluir así:

<img src="imagenes/dinosaurio.jpg" />

Los motores de búsqueda también leen los nombres de archivo de imagen y esto cuenta para el SEO.  Por lo tanto, elige para tu imagen un nombre descriptivo. Por ejemplo, dinosaurio.jpg es mejor que img835.png.

También puedes incluir la imagen usando la URL absoluta, por ejemplo:

<img src="https://www.ejemplo.com/imagenes/dinosaurio.jpg" />
...
<img src="https://developer.mozilla.org/static/img/favicon144.png" />

Aunque esta última opción es menos habitual, ya que provoca que el navegador tenga que buscar la dirección IP desde el servidor DNS cada vez. Al ser posible, conviene almacenar las imágenes de tu página web en el mismo servidor donde guardes tu código HTML.

Por último, conviene mencionar que la mayoría de imágenes tienen derechos de autor. Por ello, no debes mostrar una imagen en tu página web a menos que:

  1. seas dueño de la imagen,
  2. tengas permiso escrito explícito del dueño de la imagen o 
  3. tengas suficientes pruebas de que la imagen es de dominio público.

El incumplimiento de las normas de los derechos de autor es un acto ilegal y poco ético. Por lo tanto, no debes apuntar nunca tu atributo src a una imagen que esté alojada en un sitio web si no tienes el permiso para hacerlo. Esto se llama hotlinking. Asimismo es ilegal robar el ancho de banda de alguien.  Además, ralentiza tu página y te deja sin control sobre la imagen si la eliminan o reemplazan por otra que incluso podría resultar embarazosa.

Texto alternativo

El próximo atributo que veremos es  alt. Su valor debe ser una descripción textual de la imagen para usarla en situaciones en que la imagen no se pueda mostrar o tarde demasiado en mostrarse por una conexión de Internet muy lenta. Por ejemplo, nuestro código anterior podría modificarse así:

<img src="imagenes/dinosaurio.jpg"
     alt="La cabeza y el torso de un esqueleto de dinosaurio;
           tiene una cabeza grande con dientes largos y afilados">
...
<img src="https://developer.mozilla.org/static/img/favicon144.png"
     alt="MDN logo" />

La forma más fácil de probar el texto alt es escribir mal el nombre de archivo. Si, por ejemplo, escribimos el nombre de archivo de nuestra imagen como dinosaurioooooo.jpg, el navegador no podrá mostrar la imagen, y en su lugar mostrará el texto alternativo.

Además de ser necesario (la validación de tu página web no será correcta si omites algún texto alternativo), el texto alternativo podría resultar necesario por varias razones:

  • El usuario tiene alguna discapacidad visual y utiliza un lector de pantalla para leer el contenido de la web. De hecho, disponer de texto alternativo para describir las imágenes es útil para la mayoría de los usuarios.
  • Como ya hemos dicho anteriormente, es posible que se haya escrito mal el nombre del archivo o su ruta.
  • El navegador no admite el tipo de imagen. Algunas personas aún usan navegadores de solo texto, como Lynx, que muestran el texto del atributo alt.
  • Quieres que los motores de búsqueda puedan utilizar este texto. Por ejemplo, los motores de búsqueda pueden hacer coincidir el texto alternativo con la consulta de búsqueda.
  • Los usuarios han desactivado las imágenes para reducir el volumen de transferencia de datos y de distracciones. Esto puede suceder especialmente en teléfonos móviles y en países en los que el ancho de banda está bastante limitado.

Para saber qué hay que escribir exactamente en el atributo alt, debemos pensar primero por qué la imagen está en ese lugar. En otras palabras, qué se pierde si la imagen no aparece:

  • Decoración. Para las imágenes decorativas deberían utilizarse imágenes de fondo CSS. Pero si es inevitable usar HTML, la mejor forma de hacerlo es con alt="". Si la imagen no es parte del contenido, el lector de pantalla no debería malgastar el tiempo en leerla.
  • Contenido. Si tu imagen proporciona información significativa, se debe proporcionar la misma información en un texto alternativo (alt) breve. O mejor aún, en el texto principal que todos pueden ver. No escribas texto alternativo redundante. ¿Acaso no resultaría molesto para un usuario con visión ordinaria si todos los párrafos se escribieran dos veces en el contenido principal? Si la imagen se describe en el cuerpo principal del texto de modo adecuado, puedes simplemente usar alt="".
  • Enlace. Al poner una imagen dentro de una etiqueta <a> para convertirla en un enlace, aun debes proporcionar texto de enlace accesible. En tal caso podrías escribirlo dentro del mismo elemento <a>, o dentro del atributo alt de la imagen. Lo que mejor funcione en tu caso.
  • Texto. No deberías poner tu texto en imágenes.  Si tu título de encabezado principal necesita, por ejemplo, un sombreado paralelo, usa CSS para ello en vez de poner el texto en una imagen. Pero, si realmente no puedes evitarlo, deberías proporcionar el texto en el atributo alt.

Resumiendo, el objetivo es ofrecer una experiencia de navegación adecuada en términos de usabilidad, incluso cuando las imágenes no puedan verse. Esto asegura que ningún usuario se pierda ninguna parte del contenido.

Puedes consultar la guía de texto alternativo de Mozilla para obtener más información.

Anchura y altura

Puedes usar los atributos  ancho (width) y alto (height) para especificar la anchura y altura de cada imagen. Puedes encontrar el ancho y el alto de cualquier imagen de diversas maneras. Por ejemplo, con el botón derecho del ratón, o en Mac también puedes usar  Cmd + I  para mostrar información del archivo de imagen. Volviendo a nuestro ejemplo, podríamos hacer esto:

<img src="imagenes/dinosaurio.jpg"
     alt="La cabeza y el torso de un esqueleto de dinosaurio;
          tiene una cabeza grande con dientes largos y afilados"
     width="400"
     height="341">

Sin embargo, no deberías alterar el tamaño de tus imágenes utilizando atributos HTML. Las imágenes podrían verse pixeladas o borrosas si estableces un tamaño demasiado grande; o bien demasiado pequeñas, y se desperdiciaría ancho de banda descargando una imagen que no se ajusta a las necesidades del usuario. La imagen también podría quedar distorsionada, si no mantienes la proporción de aspecto correcta. Deberías utilizar un editor de imágenes para dar a tu imagen el tamaño adecuado antes de colocarla en tu página web. Y si tienes que alterar el tamaño de una imagen desde tu código fuente, es mejor usar CSS.

Título de la imagen

Al igual que con los enlaces, también puedes añadir atributos title a las imágenes para proporcionar más información de ayuda si es necesario. En nuestro ejemplo, podríamos hacer esto:

<img src="imagenes/dinosaurio.jpg"
     alt="La cabeza y el torso de un esqueleto de dinosaurio;
          tiene una cabeza grande con dientes largos y afilados"
     width="400"
     height="341"
     title="Exposición de un T-Rex en el museo de la Universidad de Manchester.">

Esto nos da una etiqueta de ayuda (tooltip) como las de los enlaces. Sin embargo, no se recomienda incluir esta propiedad en las imágenes, ya que title presenta algunos problemas de accesibilidad, principalmente porque los lectores de pantalla (screen readers) tienen un comportamiento imprevisible y la mayoría de navegadores no la mostrarán a menos que pases el ratón por encima de la imagen (y por tanto es inútil para quien usa teclado). Si estás interesado en este tema, puedes leer el artículo The Trials and Tribulations of the Title Attribute de Scott O’Hara.

Resumiendo, es más adecuado incluir en el texto principal de la página la información que pondríamos en el title, en lugar de adjuntarla en la imagen.

Ejercicio propuesto: Insertar imágenes

Crea una página web para mostrar varias imágenes. Tienes que usar la etiqueta básica <img> y el atributo «src» para apuntar a la URL de cada imagen individual. Por ejemplo, puedes usar imágenes como estas:

https://developer.mozilla.org/static/img/favicon144.png

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

https://validator.w3.org/images/w3c.png

También debes añadir un texto alternativo a cada imagen y verificar que se muestra al escribir mal la URL de cada imagen. Finalmente experimente con diferentes valores de ancho y alto para ver cuál es su efecto.

Imágenes con enlaces

Este ejemplo se basa en los anteriores y muestra cómo convertir la imagen en un enlace. Para hacerlo, debes anidar la etiqueta <img> dentro de <a>. Además, se debe usar el texto alternativo para describir el recurso al que apunta el enlace, como si se estuviera usando un enlace de texto en su lugar:

<a href="https://developer.mozilla.org">
  <img src="https://developer.mozilla.org/static/img/favicon144.png"
       alt="Visita la web de MDN" />
</a>

Ejercicio propuesto: Las diez páginas más importantes

Crea una página web que muestre una lista ordenada (<ol>) de las diez páginas web que más te gusten. Debes utilizar imágenes para crear enlaces a cada página y establecer el atributo de altura con el mismo valor para todas las imágenes para que todas tengan la misma altura. Por ejemplo:

<ol>
  <li>
    <a href="https://developer.mozilla.org">
      <img src="https://developer.mozilla.org/static/img/favicon144.png" 
           alt="MDN site" height="100" />
    </a>
  </li>
  <li>
    <a href="https://validator.w3.org/">
      <img src="https://validator.w3.org/images/w3c.png" 
           alt="Markup Validation Service" height="100" />
    </a>
  </li>
  ...
</ol>

Comentar imágenes con figure y figcaption

Hay varias formas en que puedes añadir un pie a tu imagen. Por ejemplo, nada te impediría hacer esto:

<div class="figure">
  <img src="imagenes/dinosaurio.jpg"
       alt="La cabeza y el torso de un esqueleto de dinosaurio;
            tiene una cabeza grande con dientes largos y afilados"
       width="400"
       height="341">

  <p>Exposición de un T-Rex en el museo de la Universidad de Manchester.</p>
</div>

Este código es completamente correcto, ya que incluye el contenido que se necesita y es muy personalizable con CSS. Pero hay un problema: no hay nada que vincule semánticamente la imagen con su título, lo que puede causar problemas a los lectores de pantalla. Por ejemplo, cuando hay 50 imágenes y leyendas, ¿qué leyenda se corresponde con cada imagen?

Una solución mejor es utilizar los elementos HTML5 <figure> y <figcaption>. Estos se crearon exactamente para este propósito: proporcionar un contenedor semántico para las figuras y vincular claramente la figura con el pie. Nuestro ejemplo anterior podría reescribirse así:

<figure>
  <img src="imagenes/dinosaurio.jpg"
       alt="La cabeza y el torso de un esqueleto de dinosaurio;
            tiene una cabeza grande con dientes largos y afilados" width="400"
       height="341">

  <figcaption>Exposición de un T-Rex en el museo de la Universidad de Manchester.</figcaption>
</figure>

El elemento <figcaption> le dice al navegador, o a alguna tecnología de apoyo, que el texto que contiene describe la imagen que está contenida en el elemento <figure>. Desde el punto de vista de la accesibilidad, los pies de imagen y el texto alternativo alt cumplen funciones diferentes. Los pies de imagen benefician incluso a quien puede ver la imagen, mientras que el texto alt proporciona la misma función en una imagen ausente. Por tanto, los subtítulos y el texto alt no deberían decir lo mismo, porque ambos aparecen si la imagen no se muestra.

También debemos tener en cuenta que el elemento figure no ha de contener una imagen necesariamente. Es una unidad de contenido independiente que:

  • Expresa un significado en una forma compacta y fácil de entender.
  • Se puede poner en varios sitios en el flujo lineal de la página.
  • Proporciona información esencial que da apoyo al texto principal.

Un elemento figure podría contener varias imágenes, un trozo de código, audio, video, ecuaciones, una tabla, o cualquier otra cosa.

Ejercicio propuesto: Figuras con leyenda

Crea una página web para mostrar varias imágenes que te gusten, usando el elemento <figure>, y agrega un título a cada una usando el elemento <figcaption>, como se hace en el siguiente ejemplo:

<figure>
  <img src="https://developer.mozilla.org/static/img/favicon144.png"
       alt="Página web de MDN (Mozilla Developer Network)">
  <figcaption>MDN Logo</figcaption>
</figure>

<figure>
  <img src="https://validator.w3.org/images/w3c.png"
       alt="Validador de W3C">
  <figcaption>W3C Logo</figcaption>
</figure>

...

Ejercicio propuesto: Las diez películas más interesantes

Crea una nueva página web que muestre una lista ordenada (<ol>) de las diez películas que más te gusten. En este caso, debe utilizar figuras con subtítulos para crear enlaces a cada página. Utiliza el mismo valor para el atributo de altura de todas las imágenes para que todas tengan la misma altura. Por ejemplo:

<ol>
  <li>
    <a href="https://en.wikipedia.org/wiki/Steve_Jobs_(film)">
      <figure>
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/49/SteveJobsMacbookAir.JPG" 
             alt="Steve Jobs y el Macbook Air" height="100" />
        <figcaption>Steve jobs</figcaption>
      </figure>
    </a>
  </li>
  <li>
    <a href="https://en.wikipedia.org/wiki/2001:_A_Space_Odyssey_(film)">
      <figure>
        <img src="https://upload.wikimedia.org/wikipedia/en/0/09/2001child2.JPG" 
             alt="Bebé, espacio, y la Tierra" height="100" />
        <figcaption>2001: Una Odisea Espacial</figcaption>
      </figure>
    </a>
  </li>
  ...
</ol>

Test

Comprueba tus conocimientos con este test sobre imágenes y otros conceptos relacionados con esta unidad.

HTML. Unidad 4. Listas.

Introducción

Ahora volvamos nuestra atención hacia las listas. Las listas están en todos los aspectos de nuestra vida: desde la lista de compras a la lista de instrucciones que sigues inconscientemente para llegar a casa todos los días, o las listas de instrucciones que sigues en estos tutoriales. Las listas están en todos lados en la web también y hay tres diferentes tipos de las que nos vamos a ocupar.

Listas no ordenadas (elemento <ul>)

Las listas no ordenadas se usan para marcar listas de artículos cuyo orden no es importante. Tomemos como ejemplo una lista de compras:

leche
huevos
pan
hummus

Utilizando HTML, esa misma lista se mostrará de la siguiente forma:

  • leche
  • huevos
  • pan
  • hummus

Para conseguir ese resultado y mostrar la lista con viñetas, cada vez que creemos una lista no ordenada, debemos utilizar el elemento <ul> (unordered list) para agrupar todos los artículos dentro de la lista. A continuación deberemos encerrar cada artículo con un elemento <li> (list item):

<ul>
  <li>leche</li>
  <li>huevos</li>
  <li>pan</li>
  <li>hummus</li>
</ul>

Listas ordenadas (elemento <ol>)

Las listas ordenadas son aquellas en las que el orden de los elementos  importa. Tomemos como ejemplo una lista de instrucciones para seguir un itinerario:

Conduce hasta el final de la calle
Gira a la derecha
Sigue derecho por las dos primeras glorietas
Gira a la izquierda en la tercer glorieta
El colegio está a la derecha, 300 metros más adelante

Utilizando HTML, esa misma lista se mostrará de la siguiente forma:

  1. Conduce hasta el final de la calle
  2. Gira a la derecha
  3. Sigue derecho por las dos primeras glorietas
  4. Gira a la izquierda en la tercer glorieta
  5. El colegio está a la derecha, 300 metros más adelante

La estructura de marcado es la misma que para las listas no ordenadas, excepto que debes delimitar los elementos de la lista con una etiqueta <ol> («ordered list»), en lugar de <ul>:

<ol>
  <li>Conduce hasta el final de la calle</li>
  <li>Gira a la derecha</li>
  <li>Sigue derecho por las dos primeras glorietas</li>
  <li>Gira a la izquierda en la tercer glorieta</li>
  <li>El colegio está a tu derecha, 300 metros más adelante</li>
</ol>

Ejercicio propuesto: Receta de hummus

Llegados a este punto de esta unidad, tienes toda la información necesaria para marcar la página de ejemplo con una receta que aparece a continuación. Utilizando dicho texto, crea un nuevo fichero y utiliza las etiquetas adecuadas para mejorar el formato con el que se muestra la receta.

Note: Debes utilizar <h1> para el título principal, <h2> para el resto de títulos, <p> para los párrafos, <ul> para los ingredientes, y <ol> para las instrucciones. Si tienes dudas, puedes consultar el ejemplo completo en el repositorio de Github: text-complete.html.
Receta rápida de hummus

Con esta receta puedes conseguir un hummus rápido y sabroso, sin ensuciar. Ha sido adaptado a partir de varias recetas diferentes que he leído a lo largo de los años.

El hummus es una deliciosa pasta espesa que se usa mucho en platos griegos y del Medio Oriente. Es muy sabrosa y se puede combinar con ensalada, carnes a la brasa y pan de pita.

Ingredientes

1 lata (400g) de garbanzos
175g de tahini
6 tomates secos
Medio pimiento rojo
Una pizca de pimienta de cayena
1 diente de ajo
Una pizca de aceite de oliva

Instrucciones

Pelar el ajo y picarlo en trozos gruesos.
Retirar las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.
Meter todos los alimentos en un procesador de alimentos.
Mezclar todos los ingredientes hasta conseguir una pasta.
Mezclar brevemente si deseas un hummus "grueso".
Picar durante más tiempo si se desea obtener un hummus "suave".

Para obtener un sabor diferente, puedes intentar mezclar un poco de limón y cilantro, ají, lima y chipotle, harissa y menta, o espinacas y queso feta. Experimenta para probar qué te gusta más.

Almacenamiento

Mantener el hummus terminado en la nevera en un recipiente cerrado. Deberías poder consumirlo durante aproximadamente una semana después de haberlo hecho. Si comienza a burbujear, definitivamente debes desecharlo.

El hummus es apto para congelar; se puede descongelar y consumir en un par de meses.

Listas anidadas

Es perfectamente correcto anidar una lista dentro de otra. Posiblemente quieras tener subelementos bajo elementos de rango superior:

  • Primer elemento
  • Segundo elemento
    • Primer subelemento del segundo elemento
    • Segundo subelemento del segundo elemento
    • Tercer subelemento del segundo elemento
  • Tercer elemento
<ul>
  <li>Primer elemento</li>
  <li>Segundo elemento     
  <!-- La etiqueta </li> de cierre del primer elemento no se coloca aquí -->
    <ul>
      <li>Primer subelemento del segundo elemento</li>
      <li>Segundo subelemento del segundo elemento</li>
      <li>Tercer subelemento del segundo elemento</li>
    </ul>
  <!-- La etiqueta </li> de cierre del primer elemento se coloca aquí -->
  </li>
  <li>Tercer elemento</li>
</ul>

Y es posible que también quieras tener por ejemplo una lista ordenada dentro de una lista desordenada:

  • Primer elemento
  • Segundo elemento
    1. Primer subelemento del segundo elemento
    2. Segundo subelemento del segundo elemento
    3. Tercer subelemento del segundo elemento
  • Tercer elemento
<ul>
  <li>Primer elemento</li>
  <li>Segundo elemento     
  <!-- La etiqueta </li> de cierre del primer elemento no se coloca aquí -->
    <ol>
      <li>Primer subelemento del segundo elemento</li>
      <li>Segundo subelemento del segundo elemento</li>
      <li>Tercer subelemento del segundo elemento</li>
    </ol>
  <!-- La etiqueta </li> de cierre del primer elemento se coloca aquí -->
  </li>
  <li>Tercer elemento</li>
</ul>

Tomemos ahora como ejemplo la segunda lista de nuestro ejemplo de la receta:

<ol>
  <li>Pelar el ajo y picarlo en trozos gruesos.</li>
  <li>Retirar las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.</li>
  <li>Meter todos los alimentos en un procesador de alimentos.</li>
  <li>Mezclar todos los ingredientes hasta conseguir una pasta.</li>
  <li>Mezclar brevemente si deseas un hummus "grueso".</li>
  <li>Picar durante más tiempo si se desea obtener un hummus "suave".</li>
</ol>

Puesto que los dos últimos elementos están estrechamente relacionados con el elemento anterior (se leen como subinstrucciones u opciones que encajan bajo ese elemento), puede tener sentido anidarlos dentro de su propia lista no ordenada e introducir esa lista bajo el cuarto elemento. Tendría el siguiente aspecto:

<ol>
  <li>Pelar el ajo y picarlo en trozos gruesos.</li>
  <li>Retirar las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.</li>
  <li>Meter todos los alimentos en un procesador de alimentos.</li>
  <li>Mezclar todos los ingredientes hasta conseguir una pasta.
    <ul>
      <li>Mezclar brevemente si deseas un hummus "grueso".</li>
      <li>Picar durante más tiempo si se desea obtener un hummus "suave".</li>
    </ul>
  </li>
</ol>

Ejercicio propuesto: Receta de hummus con lista anidada

Usando el ejercicio propuesto anteriormente de la receta de hummus, actualiza la segunda lista para usar elementos anidados para obtener el siguiente resultado:

  1. Pelar el ajo y picarlo en trozos gruesos.
  2. Retirar las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.
  3. Meter todos los alimentos en un procesador de alimentos.
  4. Mezclar todos los ingredientes hasta conseguir una pasta:
    • Mezclar brevemente si deseas un hummus «grueso».
    • Picar durante más tiempo si se deseas obtener un hummus «suave».

Ejercicio propuesto: Lista de la compra

Escribe tu propia lista de la compra, con al menos 20 productos. Debes utilizar tipos y subtipos, colocando los elementos en listas anidadas como en el siguiente ejemplo:

  • Pan
  • Leche
  • Café
    • Té negro
    • Té rojo
    • Té verde
  • Fruta
    • Naranjas
    • Manzanas
<ul>
  <li>Pan</li>
  <li>Leche</li>
  <li>Café</li>
  <li>Té
    <ul>
      <li>Té negro</li>
      <li>Té rojo</li>
      <li>Té verde</li>
    </ul>
  </li>
  <li>Fruta
    <ul>
      <li>Naranjas</li>
      <li>Manzanas</li>
    </ul>
  </li>
</ul>

Ejercicio propuesto: Lista de tareas

Crea un nuevo archivo que contenga una lista de tareas, con al menos 20 elementos. Debes usar listas anidadas combinando tareas e instrucciones, por ejemplo, insertando listas ordenadas dentro de una lista desordenada, más o menos como en el ejemplo siguiente:

  • Alimentar al gato
    1. Limpiar el cuenco
    2. Abrir la comida para gatos
    3. Poner la comida en el cuenco
  • Lavar el coche
    1. Aspirar el interior
    2. Lavar el exterior
    3. Encerar el exterior
  • Comprar comida
    1. Planificar el menú
    2. Limpiar la nevera
    3. Escribir la lista de la compra
    4. Ir al supermercado
<ul>
   <li>Alimentar al gato
     <ol>
       <li>Limpiar el cuenco</li>
       <li>Abrir la comida para gatos</li>
       <li>Poner la comida en el cuenco</li>
     </ol>
   </li>
   <li>Lavar el coche
     <ol>
       <li>Aspirar el interior</li>
       <li>Lavar el exterior</li>
       <li>Encerar el exterior</li>
     </ol>
   </li>
   <li>Comprar comida
     <ol>
       <li>Planificar el menú</li>
       <li>Limpiar la nevera</li>
       <li>Escribir la lista de la compra</li>
       <li>Ir al supermercado</li>
     </ol>
   </li>
</ul>

Listas de descripciones (elemento <dl>)

Ya hemos visto cómo marcar listas básicas en HTML. Ahora veremos un tercer tipo de lista con el que te puedes llegar a encontrar: listas de descripciones. El propósito de estas listas es marcar un conjunto de elementos y sus descripciones asociadas, como términos y definiciones, o preguntas y respuestas. Veamos un ejemplo de un conjunto de términos y definiciones:

soliloquio

En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).

monólogo

En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.

aparte

En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.

Las listas de descripción utilizan un contenedor diferente al de los otros tipos de listas: <dl> («description list» o lista de descripciones). Además, cada término está envuelto en un elemento <dt> («description term» o término a describir), y cada descripción está envuelta en un elemento <dd> («description definition» o definición de descripción).

Colocando las etiquetas HTML adecuadas, el ejemplo anterior quedaría de la siguiente forma:

<dl>
  <dt>soliloquio</dt>
  <dd>En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).</dd>

  <dt>monólogo</dt>
  <dd>En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.</dd>

  <dt>aparte</dt>
  <dd>En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.</dd>
</dl>

De forma predeterminada, el navegador mostrará las listas de descripciones con las descripciones sangradas un poco más que los términos, o con los términos un poco más destacados que las descripciones:

soliloquio
En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).
monólogo
En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.
aparte
En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.

Para concluir, ten en cuenta que un solo término puede tener múltiples descripciones, por ejemplo:

<dl>
  <dt>aside</dt>
  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd>
  <dd>In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd>
</dl>
aparte
En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.
Si la obra es impresa, es una sección de contenido que se relaciona con el tema, pero no encaja directamente en el flujo principal de contenido, de modo que se presenta por separado (a menudo en una caja de texto en el margen).

Ejercicio propuesto: Café, té y chocolate

Es hora de probar suerte con las listas de descripciones. Crea un nuevo archivo y añade elementos al texto sin formato que tienes a continuación para que aparezca como una lista de descripciones:

Café

El café es una bebida elaborada con un aroma y un sabor distintos que se prepara a partir de las semillas tostadas de la planta Coffea.

Té

El té es una bebida aromática que se prepara comúnmente vertiendo agua caliente o hirviendo sobre las hojas curadas de la planta del té.
 
Chocolate caliente

El chocolate caliente es una bebida que generalmente se obtiene mezclando chocolate rallado, chocolate derretido o cacao en polvo, leche o agua caliente y azúcar.

Ejercicio propuesto: bacon, huevos y café

Crea un nuevo archivo con el texto que tienes a continuación y añade elementos al texto para que aparezca como una lista de descripción. Puedes usar tus propios términos y descripciones si lo deseas.

Nota: observa que el término café tiene dos definiciones.
Bacon

Carne curada preparada a partir de carne de cerdo.

Huevos

Comida común y uno de los ingredientes más versátiles utilizados en la cocina.

Café

La bebida que hace que el mundo funcione por la mañana.
Un color marrón claro.

Ejercicio propuesto: Componentes de ordenador

Escribe una lista de definiciones para explicar el significado de los siguientes términos: unidad central de procesamiento, monitor, ratón, teclado, tarjeta gráfica, tarjeta de sonido, altavoces y placa base.

HTML. Unidad 3. Hipervínculos.

¿Qué es un hipervínculo?

Los hipervínculos son una de las innovaciones más interesantes que ofrece la Web. Han formado parte de esta desde el principio, pero hacen que la web sea web: Los hipervínculos nos permiten vincular documentos a otros documentos o recursos, vincular a partes específicas de documentos o hacer que las aplicaciones estén disponibles en una dirección web. Prácticamente cualquier contenido web se puede convertir en un enlace que, al pulsarlo (activarlo), dirija el navegador a la dirección web a la que apunta el enlace (URL).

Una URL puede apuntar a archivos HTML, archivos de texto, imágenes, documentos de texto, archivos de audio o vídeo, y cualquier otra cosa que se pueda mostrar en la web. Si el navegador no sabe qué hacer con un archivo, te preguntará si lo quieres abrir (en cuyo caso la tarea de abrirlo y leerlo se transferirá a la aplicación nativa instalada en el dispositivo) o si lo quieres descargar (en cuyo caso podrás ocuparte de él más tarde).

Por ejemplo, si observamos cualquier página web en la que se publiquen noticias (la página web de la BBC, por ejemplo), observaremos que contiene una gran cantidad de enlaces que apuntan a multitud de noticias en diferentes apartados (funcionalidad de navegación), secciones de acceso/registro (herramientas de usuario) y otras.

El elemento <a>

The elemento <a> (o elemento ancla) junto con el atributo href , crea a hipervínculo a páginas web, ficheros, correos electrónicos, enlaces dentro de la misma página, o cualquier cosa a la que una URL pueda apuntar. El contenido dentro del elemento <a> debería proporcionar una descripción clara de dónde nos dirigiremos al hacer click.

Los enlaces también proporcionan información implícitamente sobre la actividad de navegación, ya que el estilo de los enlaces cambia según vamos haciendo click en ellos:

  • Un enlace no visitado aparece subrayado y con texto azul.
  • Un enlace visitado aparece subrayado y en color morado.
  • Un enlace activo aparece subrayado y en rojo.

Un enlace básico se crea incluyendo el texto (o cualquier otro contenido), que queramos convertir en un enlace usando un elemento ancla <a>, dándole un atributo href (también conocido como «Hypertext Reference», «target» u objetivo) que contendrá la dirección web hacia dónde queremos que apunte el enlace:

<p>Crea un enlace a
<a href="https://www.mozilla.org/es-ES/">la página de inicio de Mozilla</a>.
</p>

The code above gives as the following result: I’m creating a link to the Mozilla homepage.

Añadiendo información con el atributo «title»

Otro atributo que posiblemente quieras agregar a tus enlaces es title. El título contiene información adicional sobre el enlace, como qué tipo de información contiene la página o cosas que debes tener en cuenta en la página web. Por ejemplo:

<p>Crea un enlace a
  <a href="https://www.mozilla.org/es-ES/"
    title="El mejor lugar para encontrar más información acerca de la misión de Mozilla
           y cómo contribuir">la página de inicio de Mozilla</a>.
</p>

Este código producirá el siguiente resultado (el título se mostrará al pasar el ratón sobre el texto del enlace):

Crea un enlace a la página de inicio de Mozilla.

Debemos tener en cuenta que el título de un enlace solo será visible al pasar el ratón por encima, lo cual significa que los usuarios que naveguen usando los controles de sus teclados, o pantallas táctiles, tendrán dificultades para acceder a la información proporcionada por el título. Si la información del título es verdaderamente importante para el uso de la página, deberemos presentar el título de manera que sea accesible a todos los usuarios, por ejemplo incluyéndola como parte del texto del enlace.

Ejercicio propuesto: Enlaces con información

Crea una página web como la que se muestra a continuación o una similar, mostrando información en español y en inglés. Utiliza encabezados del tipo <h1> y <h2>, y varios párrafos y enlaces a diversas páginas, como las que se indican.

Nota: Deberás utilizar el atributo title para mostrar información sobre cada enlace al pasar el ratón por encima.
Alicante

Español

Entre las principales características de la ciudad se encuentran el Castillo de Santa Bárbara, ubicado muy por encima de la ciudad, y el Puerto de Alicante. Este último fue objeto de una amarga controversia en 2006-2007 cuando los residentes lucharon, con éxito, para evitar que se convirtiera en un polígono industrial.

El castillo de Santa Bárbara está situado en el Monte Benacantil, con vistas a la ciudad. La torre (La Torreta) en la parte superior, es la parte más antigua del castillo, mientras que parte de la zona más baja y las murallas se construyeron a finales del siglo XVIII.

English

Amongst the most notable features of the city are the Castle of Santa Bárbara, which sits high above the city, and the port of Alicante. The latter was the subject of bitter controversy in 2006–2007 as residents battled, successfully, to keep it from being changed into an industrial estate.

The Santa Bárbara castle is situated on Mount Benacantil, overlooking the city. The tower (La Torreta) at the top, is the oldest part of the castle, while part of the lowest zone and the walls were constructed later in the 18th century.

URLs y rutas

Para comprender completamente a dónde apuntan los enlaces, necesitas conocer las URLs y las rutas. En esta sección proporcionaremos la información que necesitas sobre el tema.

Una URL (de las iniciales en inglés «Uniform Resource Locator») es simplemente una secuencia de caracteres de texto que definen donde está situado algo en la web. Por ejemplo, la página de Mozilla está ubicada en https://www.mozilla.org/es-ES/.

Las URLs utilizan rutas para encontrar los archivos. Las rutas especifican dónde se encuentra el archivo que buscas dentro del sistema de archivos. Veamos un ejemplo de una estructura de directorios (ve el directorio creating-hyperlinks).

Al directorio raíz de esta estructura de directorios lo hemos llamado creating-hyperlinks. Al trabajar en modo local en una web, habrá un directorio que contendrá toda la información. En nuestro ejemplo, dentro de la raíz, encontramos el archivo index.html y el archivo contacts.html. En una web real, index.html es el punto de entrada a la web, lo que se conoce como página de inicio.

Observamos también dos directorios dentro de nuestro directorio raíz que son: pdfs y projects. Cada uno de ellos tiene archivos en su interior — un archivo PDF (project-brief.pdf) y un archivo index.html, respectivamente. Observa que es posible tener sin problemas dos archivos index.htmlen un proyecto siempre y cuando se encuentren alojados en ubicaciones diferentes de nuestra estructura de archivos — muchos sitios web lo hacen. El segundo index.html será la página de inicio para la información relativa a los proyectos.

Mismo directorio

Si queremos incluir un hipervínculo dentro del archivo index.html (el index.html del nivel más alto) que apunte al archivo contacts.html, simplemente especificaremos el nombre del archivo al que hacemos referencia, porque se encuentra en el mismo directorio en el que se encuentra el archivo index.html desde donde lo queremos llamar. Por lo tanto, usamos la URL contacts.html — veamos el código:

<p>¿Quieres contactar con un miembro específico del personal?
Encuentra los detalles en nuestra <a href="contacts.html">página de contactos</a>.</p>

Bajando por la estructura de subdirectorios

Si queremos incluir un hipervínculo dentro del archivo index.html (el index.html de nivel más alto) que apunta a projects/index.html, debemos bajar hasta el directorio projects antes de indicar al archivo al que queremos enlazar. Para ello especificamos el nombre del directorio y le añadimos una barra inclinada hacia adelante, y a continuación el nombre del archivo. Por lo tanto, utilizaremos la URL projects/index.html:

<p>Visita mi <a href="projects/index.html">página de inicio del proyecto</a>.</p>

Subiendo por nuestro sistema de archivos

Si ahora queremos incluir un hipervínculo dentro del archivo projects/index.html que apunte a pdfs/project-brief.pdf, hay que subir un nivel en nuestro sistema de directorios, para luego bajar al directorio pdf. Para «Subir un nivel» utilizamos los dos puntos — (..) — por lo que usamos la URL ../pdfs/project-brief.pdf:

<p>Un enlace a mi<a href="../pdfs/project-brief.pdf"> resumen del proyecto</a>.</p>

Podemos combinar más de una instancia de estas características y generar URLs más complejas, si es necesario, por ejemplo: ../../../ruta/compleja/a/mi/archivo.html.

Ejercicio propuesto: Menú de navegación

Crea un fichero «index.html» que enlace varias ficheros web con un menú de navegación. Este índice puede enlazar todas las páginas que hayas creado antes. Echa un vistazo al ejemplo y tendrás una idea de cómo deberá quedar tu código fuente. Además, deberás utilizar el atributo title para insertar la descripción de la página web enlazada:

<h1>Ejercicios de HTML</h1>

<h2>Encabezados y párrafos</h2>

<p><a href="encabezados_y_parrafos_1.html">Ejemplo de encabezados y párrafos 1</p>
<p><a href="encabezados_y_parrafos_2.html">Ejemplo de encabezados y párrafos 2</p>
...

<h2>Formato de texto</h2>

<p><a href="formato_texto_1.html">Ejemplo de formato de texto 1</p>
<p><a href="formato_texto_2.html">Ejemplo de formato de texto 2</p>
...

Fragmentos de documento

Es posible apuntar hacia una parte concreta de un documento HTML en vez de a todo un documento. Para ello hay que asignar previamente un atributo id al elemento hacia el que apuntamos. Esto se debe hacer en el encabezado y quedará así:

<h2 id="direccion_de_envio">Dirección de envío</h2>

Posteriormente para hacer referencia a este id concreto, lo añadiremos al final de la URL precedido por una almohadilla — veamos el ejemplo:

<p>¿Quieres mandarnos una carta? Aquí tienes nuestra <a href="contacts.html#direccion_de_envio">Dirección de envío</a>.</p>

También podemos usar esta referencia a un fragmento de documento para apuntar hacia otra parte del mismo documento:

<p>La <a href="#direccion_de_envio">Dirección de envío de la empresa</a> se encuentra al final de esta página.</p>

Ejercicio propuesto: Índice

Crea una página similar a esta: https://es.wikipedia.org/wiki/Alicante (puedes escoger cualquier otra página similar, que tenga un índice con enlaces). Debes comenzar escribiendo el índice, colocando a continuación las diferentes secciones, cada una de ellas con el correspondiente encabezado y los diferentes párrafos. Inserta además otros enlaces a otras páginas de la wikipedia, tal como se hace en la página original, sin olvidar rellenar los atributos «title». Cuando acabes prueba el resultado en el navegador. Tu código debería parecerse al siguiente:

<h1>Alicante</h1>

<p><a href="#geografia">Geografía física</a></p>
<p><a href="#demografia">Demografía</a></p>
...

<h2 id="geografia">Geografía física</h2>

La ciudad se halla a orillas del <a href="https://es.wikipedia.org/wiki/Mar_Mediterráneo">Mediterráneo</a>, en una planicie sorteada por una serie de colinas y elevaciones. El monte <a href="https://es.wikipedia.org/wiki/Benacantil">Benacantil</a>, con 169 m de altura, sobre el que se asienta el <a href="https://es.wikipedia.org/wiki/Castillo_de_Santa_Bárbara_(Alicante)">castillo de Santa Bárbara</a>, domina la fachada urbana y constituye la imagen más característica de la urbe..
...

<h2 id="demografia">Demografía</h2>

En la actualidad, según los datos del INE del 1 de enero de 2019 la ciudad cuenta con 334.887 habitantes, siendo la segunda ciudad valenciana y la 11ª de España en población. Según los datos del Ayuntamiento de Alicante a 1 de enero de 2017​ la población de la ciudad era de 336.478 habitantes, de los cuales vivían en el núcleo urbano 329.635 y 6.843 en las partidas rurales, siendo los barrios más populosos <a href="https://es.wikipedia.org/wiki/Playa_de_San_Juan_(Alicante)">Playa de San Juan</a>, con 22.424 habitantes y <a href="https://es.wikipedia.org/wiki/Polígono_San_Blas">Polígono de San Blas</a> con 22.292 habitantes.
...

Convertir bloques de contenido en enlaces

Como hemos mencionado anteriormente, puedes convertir cualquier contenido en un enlace, incluso elementos de bloque y elementos en línea. Si quieres convertir una imagen en un enlace, simplemente usa el elemento <a> encerrando el elemento <img> entre <a> y </a>.

<a href="https://www.mozilla.org/es-ES/">
  <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Mozilla_dinosaur_head_logo.png" alt="Logotipo anterior de Mozilla que dirige a la página inicial de Mozilla">
</a>

Encontrarás más información y ejercicios sobre el manejo de imágenes en próximos artículos en esta web.

Ejercicio propuesto: Imagen con hipervínculo

Utilizando la imagen https://iessanvicente.com/ies_san_vicente.jpg, crea un enlace a la web https://iessanvicente.com para que al hacer clic sobre la imagen, el navegador nos dirija a la web del IES San Vicente.

Nota: Debes utilizar la url completa de la imagen como valor del atributo src del elemento <img>.

Test

Comprueba tus conocimientos con este test sobre formato de texto y otros conceptos relacionados con esta unidad.

HTML. Unidad 2. Formato de texto.

Introducción

Énfasis e importancia

En el lenguaje humano, a menudo enfatizamos ciertas palabras para alterar el significado de una frase, y a menudo queremos destacar ciertas palabras como importantes o diferentes en algún sentido. HTML nos dota de diversos elementos semánticos que nos permiten destacar contenido textual con tales efectos, y en esta unidad veremos algunos de los más comunes, como por ejemplo:

<b>Texto en negrita</b>
<strong>Texto importante</strong>
<i>Texto en cursiva</i>
<em>Texto enfatizado</em>
<u>Texto subrayado</u>
<mark>Texto marcado (o resaltado)</mark>

Otros elementos menos habituales

<small>Texto más pequeño</small>
<del>Texto eliminado</del>
<ins>Texto insertado</ins>
<sub>Subíndice</sub>
<sup>Superíndice</sup>

El elemento <strong>

Para enfatizar palabras importantes al hablar solemos acentuarlas, y al escribir lo hacemos en estilo negrita. Por ejemplo:

Este líquido es altamente tóxico.

Cuento contigo. ¡No llegues tarde!

En HTML usamos el elemento <strong> para marcar tales expresiones. El documento resulta entonces más útil, y de nuevo los lectores reconocen estos elementos y el tono de voz cambia a uno más fuerte. El estilo negrita es el que aplican los navegadores por defecto, pero no debes usar esta etiqueta solamente para aplicar este estilo. Para hacer eso usa el elemento <span> y CSS, o un elemento <b> (explicado más adelante).

Ejercicio propuesto: Texto importante

Crea una página web con el siguiente texto (u otro similar), utilizando encabezados y párrafos, y añade además una importancia adicional a varias palabras dentro de cada párrafo.

Nota: El texto del ejemplo ha sido extraído de https://www.msf.es/quienes-somos/como-trabajamos y https://www.msf.es/quienes-somos/como-financiamos.
Médicos sin fronteras

Quiénes somos

Somos una organización de acción médico-humanitaria: asistimos a personas amenazadas por conflictos armados, violencia, epidemias o enfermedades olvidadas, desastres naturales y exclusión de la atención médica. La acción humanitaria es un gesto solidario de sociedad civil a sociedad civil, de persona a persona, cuya finalidad es preservar la vida y aliviar el sufrimiento de otros seres humanos: esta es nuestra razón de ser.

Debemos nuestra independencia financiera a los más de seis millones de personas y entidades privadas que son socias o colaboradoras de MSF en todo el mundo. Gracias a ellas, nosotros decidimos a quién atendemos y cómo, y nuestro único interés es el de las poblaciones a las que asistimos. Con el fin de mejorar su situación, también podemos prestar testimonio para denunciar las situaciones que presenciamos. Pero no aspiramos a transformar una sociedad, sino a permitirle superar un periodo crítico: nuestro objetivo son las personas, no los Estados. Por este motivo, nuestras intervenciones son limitadas en el tiempo.

Cómo nos financiamos

La mayor parte de nuestros fondos son privados: en 2019, procedían de las 6,5 millones de personas y entidades privadas que son socias o colaboradoras de MSF en todo el mundo, de las cuales casi 569.900 en España. En 2019, el 96,2% de nuestros ingresos mundiales eran de origen privado y el resto correspondía a organismos públicos, como las agencias de ayuda humanitaria de algunos Gobiernos.

No tenemos ánimo de lucro: no generamos beneficios para nosotros mismos, y destinamos los fondos recibidos a nuestra misión social –acción médica y testimonio– y a las tareas de administración y captación de recursos necesarias para cumplirla.

El elemento <em>

Cuando queremos dar énfasis al lenguaje hablado, acentuamos ciertas palabras y así alteramos sutilmente el significado de lo que decimos. De manera similar, en el lenguaje escrito ponemos palabras en cursiva para destacarlas. Por ejemplo, las dos siguientes frases tienen diferente significado:

Me alegro de que no llegues tarde.

Me alegro de que no llegues tarde.

La primera frase suena aliviada porque la persona no llega tarde. Por el contrario, la segunda suena sarcástica y un tanto pasivo-agresiva, expresa molestia porque la persona ha llegado algo tarde.

En HTML usamos el elemento <em> («emphasis») para marcar estos casos:

<p>Me <em>alegro</em> de que no llegues <em>tarde</em>.</p>

El documento logra entonces transmitir una lectura más interesante y además así lo reconocen los lectores, que lo expresan con un tono diferente de voz. El navegador, de manera predeterminada, aplica el estilo de letra cursiva, pero no debes utilizar esta etiqueta solamente para establecer este estilo de letra cursiva. Para usar ese estilo, debes utilizar la etiqueta del elemento <span> y algo de CSS u otra etiqueta como el elemento <i> (explicado a continuación).

Ejercicio propuesto: Texto enfatizado

Crea una página web con el texto del ejemplo (u otro similar) utilizando encabezados y párrafos. A continuación aplica la etiqueta <em> a las expresiones que creas más relevantes.

Nota: el texto ha sido extraído de: https://as.com/meristation/2019/08/11/betech/1565556732_792381.html
Cómo escribir mensajes de WhatsApp en negrita, cursiva o subrayados

La app te permite cambiar el aspecto de las palabras que escribes de dos maneras. Aprende a subrayar y poner en negrita.

Desde que nos despertamos hasta que nos acostamos, la usamos a diario, constantemente, y ya es difícil imaginar el mundo sin ella. WhatsApp es de esas apps que han traspasado la barrera de meras aplicaciones y junto a otros elementos de la cultura electrónica como los emojis, se ha hecho un hueco en la sociedad, en el día a día. Y como toda app multitarea, WhatsApp oculta decenas de funciones desconocidas, pequeños trucos que nos hacen la experiencia más fácil y/o variada a la hora de usarla.

En Word, Pages y otros procesadores de texto estamos acostumbrados a cambiar el formato del texto con un sólo botón. De esta manera podemos colocar una cita en cursiva, subrayar encabezados o resaltar en negrita un nombre en particular. Y esto mismo puedes hacer en WhatsApp, ya que hace unos años que la app de mensajería admite un cambio de formato de texto entre sus funciones.

Los elementos <i>, <b> y <u>

Los elementos que hemos comentado hasta ahora tienen asociada una semántica clara. La situación con <b> (negrita o «bold»), <i> (cursiva o «italic») y <u> (subrayado o «underline») es algo más complicada. Surgieron para que las personas pudieran escribir textos en negrita, cursiva o subrayado en un tiempo en el que pocos navegadores o ninguno admitían CSS. Elementos como estos, que solo afectan a la presentación y no a la semántica, se conocen como elementos de presentación y no se utilizan habitualmente porque la semántica es muy importante para la accesibilidad y el SEO, entre otros aspectos. Sin embargo, HTML5 redefinió los elementos <b><i> y <u> con roles semánticos nuevos un tanto confusos (puedes encontrar más información en este hilo de StackExchange, y en HTML Living Standard).

Para clarificar un poco en qué momento podríamos usar estos elementos, nos podemos remitir a la siguiente regla de oro: el uso de <b><i> o <u> resulta adecuado cuando transmiten el significado que suele transmitir el uso tradicional de las negritas, itálicas o el subrayado, si no hay ningún otro elemento que resulte más adecuado. Sin embargo, siempre resulta crítico mantener una actitud orientada a la accesibilidad. El concepto de cursiva no es demasiado útil para las personas que usan lectores de pantalla o para las personas que utilizan un sistema de escritura distinto del alfabeto latino.

Por último, es conveniente añadir una observación muy importante acerca del subrayado (<u>): La mayoría de los lectores de una página web suelen asociar estrechamente el subrayado con los hipervínculos. Por ello en la web es mejor reservar el subrayado para los enlaces. Utiliza el elemento cuando resulte apropiado semánticamente, pero considera usar CSS para cambiar el subrayado predeterminado por algo más adecuado .

En resumen, y concretando más:

  • <i> se usa para transmitir el significado que tradicionalmente transmite la itálica: extranjerismos, clasificaciones taxonómicas, conceptos técnicos, un pensamiento…
  • <b> se usa para transmitir el significado que tradicionalmente transmite la negrita: palabras clave, nombres de productos, frases principales…
  • <u> se usa para transmitir el significado que tradicionalmente conlleva el subrayado: nombres propios, errores ortográficos…

Ejercicio propuesto: Ejemplos de uso

Crea una página web para obtener el siguiente resultado:

Nombres científicos

El colibrí garganta de rubí (Archilochus colubris) es el colibrí más común en el este de América del Norte.

Extranjerismos

El menú era un mar de palabras exóticas como vatrushka, nasi goreng y soupe à l’oignon.

Un error ortográfico reconocido

Algún día aprenderé a deletrear mejor la palabra frigofírico.

Palabras clave destacadas en una serie de instrucciones
  1. Corta dos piezas de la hogaza de pan.
  2. Inserta una rodaja de tomate y una hoja de lechuga entre las rebanadas de pan.

Ejercicio propuesto: Negrita y cursiva

Crea una página web con el siguiente texto (u otro similar), utilizando un encabezado y párrafos, y aplica letra negrita y cursiva a las palabras correspondientes dentro de cada párrafo.

Nota: El texto del ejemplo ha sido extraído de https://www.escribirycorregir.com/la-letra-cursiva/.
Diez casos en los que demos emplear la letra cursiva

Títulos de obras literarias, periódicos, revistas, etcétera: Cien años de soledad, El País, Qué leer.

Títulos de obras de arte y composiciones musicales: Las señoritas de Avignon, Sinfonía nº. 5 de Beethoven.

Títulos de películas: El apartamento, La tentación vive arriba, Ben-Hur…

Palabras o expresiones que provengan de otro idioma: affaire, coaching, hardware.

Palabras empleadas con uso metalingüístico, como meras referencias, prescindiendo de su significado. Es lo que sucede cuando citamos una palabra: La palabra empoderamiento se ha puesto de moda en los últimos años.

Para resaltar partes del texto. Los motivos pueden ser varios, y no los vamos a enumerar en esta ocasión: Era una cuestión de amor propio, ¿me entiendes?

Advertencias o indicaciones en los textos: Sigue leyendo, Continúa en la página 75.

Locuciones del latín y de otras lenguas que no tienen adaptación al castellano: ad infinitum, alter ego, full time, delirium tremens.

Los apodos y sobrenombres que van intercalados entre el nombre y el apellido: Ernesto Che Guevara, Roberto Mano de Piedra Durán (boxeador panameño).

En las obras teatrales, para resaltar acciones o aportar algún dato que no pertenece al parlamento del personaje sino a la pluma del autor:
TÍO.- (Aparte a CASTELAR.) Pues tenía él razón. Beringola no ve tres en un burro
CASTELAR.- (Aparte al Tío). Beringola es un idiota.
(Por el primero derecha salen DANIEL Y FELIPE.)

Los elementos <del> e <ins>

El elemento <del> se utiliza para definir un texto que se ha eliminado de un documento. Los motores de búsqueda a veces usan esta etiqueta para mostrar los cambios dentro de un sitio web, cuando se ha eliminado parte del texto después de que el desarrollador haya subido una nueva versión.

Por otro lado, el elemento <ins> se utiliza para definir un texto que se ha insertado en un documento. Los motores de búsqueda a veces usan esta etiqueta para mostrar los cambios dentro de una página web, cuando se reemplaza algún texto después de que el desarrollador haya subido una nueva versión.

Depende del navegador cómo mostrar el texto dentro de estos elementos, pero la mayoría de ellos marcarán una línea sobre el texto eliminado y subrayarán el texto insertado de forma predeterminada.

Ejercicio propuesto: Texto reemplazado

Crea una página para mostrar varios párrafos donde anteriormente se dijeron algunas palabras u oraciones, pero ahora los autores han cambiado de opinión y quieren contarles a sus lectores una nueva versión de lo que piensan. Usando las etiquetas <ins> y <del>, muestra los textos anteriores y los nuevos de forma que quede claro que el nuevo texto está reemplazando al primero. El resultado obtenido debería ser similar al siguiente, añadiendo algunos otros ejemplos:

La Tierra es plana redonda.

El 31 de diciembre del 2020 se acabará el mundo no pasará nada.

...

El elemento <mark>

El elemento <mark> representa un texto marcado o resaltado como referencia o anotación, debido a su relevancia o importancia en un contexto particular.

Ejercicio propuesto: Datos relevantes

Crea una página web con el siguiente texto usando encabezados y párrafos, y a continuación resalta varias palabras o cifras dentro de los párrafos:

Nota: el texto utilizado se ha extraído de https://bloygo.yoigo.com/entretenimiento/los-records-guinness-mas-gamers-del-2020_74516616.html.
Récords de Super Mario

Mario Bros, el fontanero italiano, es el personaje de videojuegos más famoso del mundo. La primera vez que Mario apareció fue en 1981 en el juego virtual Donkey Kong, llamándose Jumpman (saltador, en español).

Dentro del universo de Mario Bros, el videojuego Super Mario Bros para NES de 1985 es el más vendido con más de 40,24 millones de copias vendidas a principios del 2019.

En la categoría de speed-runners, los más rápidos en completar un videojuego, en octubre del 2018, el usuario “somewes” consiguió el menor tiempo en completar Super Mario Bros, fijando el récord en 4 minutos y 55 segundos.

Récords de Fornite

Seas o no seas un gamer, has oído hablar de este famoso videojuego. Fornite es un videojuego de lucha, supervivencias y batallas desarrollado por Epic Games y lanzado en 2017.

Tal ha sido el éxito de Fornite que, el 20 de marzo del 2019, se convirtió en el primer battle royale con 250 millones de jugadores registrados. Además, Fornite también superó el récord de juego con más jugadores simultáneos llegando a alcanzar los 10,8 millones de jugadores.

...

Ejercicio propuesto: Resultado de una búsqueda

Crea una página web similar a la del ejemplo, y resalta todas las apariciones de una palabra en concreto a lo largo de todo el texto. En este caso resaltaremos todas las apariciones de «Minecraft» que encontremos:

Nota: el texto del ejemplo se ha extraído de https://hipertextual.com/2015/01/minecraft-records-guinness-2015.
Resultados de búsqueda de la palabra "Minecraft":

Minecraft consigue 12 récords mundiales.

En el Guinness Book of World Records 2015: Gamer's Edition, Minecraft consiguió 12 récords mundiales. El impacto que tiene este juego parece no tener límites.

Lo que ha logrado Minecraft hasta el momento es de esa clase de fenómenos que convierten su entorno en un antes y un después. Su forma peculiar de jugar ha hecho que propios y extraños del mundo gamer dediquen su tiempo a construir sus propios mundos.

El primer país modelado a escala real en un videojuego establece un nuevo récord para Minecraft. Danish Geodata Agency publicó la recreación a escala 1:1 de Dinamarca. Se consiguió representar todos los edificios del país utilizando cuatro mil millones de bloques.

...

Los elementos <sub> y <sup>

En ocasiones, necesitarás utilizar superíndice y subíndice al marcar elementos como fechas, fórmulas químicas y ecuaciones matemáticas para que tengan el significado correcto. Los elementos <sup> y <sub> se ocupan de ello. Por ejemplo:

Ejercicio propuesto: Subíndices

Crea una página web con el siguiente texto, añadiendo algún ejemplo más que conozcas o encuentres por Internet:

Una de mis moléculas favoritas es C8H10N4O2, también conocida como "cafeína".

Las posiciones de las coordinadas horizontales a lo largo del eje X se representan como x1 ... xn.

...

Ejercicio propuesto: Nomenclatura y formulación

Crea una página web para mostrar la formulación química de algunos compuestos comunes, aplicando formato de superíndices a los números (debes imprimir cada compuesto en un párrafo diferente, utilizando el elemento <p>). El resultado debería ser similar al siguiente, donde los puntos suspensivos indican que debes añadir algunos otros ejemplos que conozcas o encuentres por Internet:

Oxígeno: O2
Agua: H2O
Dióxido de carbono: CO2
Vinagre: C2H4O2
Bicarbonato de sodio: NaHCO3
Azúcar: C12H22O11
Alcohol: C2H5OH
...

Ejercicio propuesto: Superíndices

Crea una página web para mostrar el siguiente texto, añadiendo algunos otros ejemplos:

El teorema de Pitágoras se expresa con la siguiente ecuación: a2 + b2 = c2

Una de las ecuaciones más conocidas en física es: E = mc2

El número ordinal "quinto" se abrevia en inglés de esta forma: 5th

...

Ejercicio propuesto: Potencias

Imprime los cuadrados de los números del 1 al 25. Cada número deberá colocarse en una línea independiente (utilizando el elemento <br />). Justo después de cada número se colocará el número 2 con formato de superíndice, y a continuación el signo igual, y el resultado. Se debería mostrar algo del siguiente estilo:

12 = 1
22 = 4
...
252 = 625

El elemento <span>

Si necesitamos marcar un texto pero consideramos que ninguna de las etiquetas existentes es una buena opción, podemos utilizar el elemento <span>. Así, podemos aislar un fragmento de texto sin introducir a priori cambios en la apariencia del texto marcado. La ventaja de esta etiqueta se aprecia al usarla junto con algunos atributos tales como class o style, combinados con algún código CSS. Trabajaremos en esto más adelante, pero de momento echemos un vistazo a este código de ejemplo, donde usamos un elemento <span> para colorear solo una parte del texto dentro de un párrafo:

<p>Mi madre tiene los ojos <span style="color:blue">azules</span>.</p>

Ejercicio propuesto: Color del texto

Utilizando los elementos <p> y <span>, crea una página web para mostrar el color de ojos de gente que conozcas, como por ejemplo: azules (blue), marrones (brown), verdes (green) o grises (gray).

Test

Comprueba tus conocimientos con este test sobre formato de texto y otros conceptos relacionados con esta unidad.

HTML. Unidad 1. Estructura básica de un fichero HTML.

Introducción

HTML («Hypertext Markup Language«) no es exactamente un lenguaje de programación. Es un lenguaje de marcado que le dice a los navegadores web cómo estructurar las páginas web que estás visitando. Puede ser tan complejo o tan simple como desee el desarrollador web. Este lenguaje está formado por varios elementos que definen diversos tipos de contenido. Un fichero HTML se puede editar con un simple editor de texto, pero hay algunos editores que usan colores y consejos para ayudar al desarrollador. Uno de los mejores editores es el Visual Studio Code. Se puede descargar desde aquí.

Elementos

HTML consiste en una serie de elementos, que puedes utilizar para encerrar, delimitar o marcar diferentes partes del contenido para hacer que aparezcan de una cierta manera, o actúen de determinada forma. Las etiquetas que delimitan un fragmento de contenido pueden hacer que dicho contenido enlace con otra página, ponga una palabra en cursiva, etcétera.

Cada elemento tiene dos partes, una al comienzo y otra al final, y el contenido se coloca en medio:

<etiqueta>Contenido...</etiqueta>

El elemento HTML quedará definido por todo ese bloque, desde la etiqueta de apertura, hasta la etiqueta de cierre. Por ejemplo:

<h1>Mi primer encabezado</h1>
<p>Mi primer párrafo</p>

Las etiquetas HTML no distinguen entre mayúsculas y minúsculas. Así que se pueden escribir tanto en mayúsculas como en minúsculas. Por ejemplo, una etiqueta <title> se puede escribir como <title><TITLE><Title><TiTle>, etc., y funcionará correctamente. Sin embargo, se recomienda escribir todas las etiquetas en minúsculas para mantener la coherencia y legibilidad, entre otros motivos.

Elementos vacíos

No todos los elementos siguen el patrón de etiqueta de apertura, contenido y etiqueta de cierre. Algunos elementos consisten solo en una etiqueta única, que se utiliza generalmente para insertar/incrustar algo en el documento en el lugar donde se quiera incluir. Por ejemplo, podemos utilizar el elemento  <br> para insertar un salto de línea, y el elemento <img> para insertar una imagen en la página de la siguiente forma:

<p>Mi perro es un gruñón.<br />Tiene muy malas pulgas.</p>

Atributos

Los elementos también pueden tener atributos. Los atributos contienen información extra sobre el elemento. Por ejemplo, con siguiente código podemos utilizar el atributo class para asignar al elemento un identificador que se puede utilizar para dotarlo de información de estilo:

<p class="estilo">Mi perro es un gruñón</p>

Para ver otro ejemplo, podemos utilizar el siguiente código para saltar a la página https://www.wikipedia.org (la etiqueta <a> define un hipervínculo, y el atributo href especifica la url donde queremos saltar):

<a href="https://www.wikipedia.org">Wikipedia</a>

Es muy importante que tengamos en cuenta que un atributo deberá tener:

  • Un espacio entre este y el nombre del elemento. Para un elemento con más de un atributo, los atributos también deben estar separados por espacios.
  • El nombre del atributo, seguido por un signo igual.
  • Un valor del atributo, rodeado de comillas de apertura y cierre.

Omitir comillas en valores de atributos

Cuando observas diferentes páginas web, puedes encontrarte con todo tipo de estilos de etiquetado extraños, que incluyen valores de atributos sin comillas. Esto se permite en ciertas circunstancias, pero provocará un error en otras. Por ejemplo, si volvemos a revisar el ejemplo del enlace, sería posible escribir una versión básica con solo el atributo href, así:

<a href=https://www.wikipedia.org/>Wikipedia</a>

Sin embargo, el código no sería correcto si añadimos el atributo title también sin comillas:

<a href=https://www.wikipedia.org/ title=La página de inicio de Wikipedia>Wikipedia</a>

En este punto el navegador interpretará mal el código y pensará que el elemento <a> tiene atributos incorrectos y esto causará errores o comportamientos inesperados. Por ello es muy importante incluir siempre las comillas en los atributos. Evitarás muchos problemas y además obtendrás un código más legible.

Comillas simples o dobles

En esta unidad todos los valores de los atributos se han incluido en comillas dobles. Sin embargo, se pueden ver comillas simples en algún código HTML. Es una cuestión de estilo. Puedes elegir libremente cuál prefieres. Ambas líneas de código son equivalentes:

<a href="http://www.ejemplo.com">Un enlace a mi ejemplo.</a>

<a href='http://www.ejemplo.com'>Un enlace a mi ejemplo.</a>

Asegúrate de no mezclar ambos tipos de comillas. El siguiente ejemplo muestra un código incorrecto:

<a href="http://www.ejemplo.com'>Un enlace a mi ejemplo.</a>

Si utilizas un tipo de comillas en tu documento HTML, puedes incluir el otro tipo de comillas para tus valores de atributo sin que esto te cause problemas:

<a href="http://www.ejemplo.com" title="¿A que es 'divertido'">Un enlace a mi ejemplo.</a>

Sin embargo, si deseas anidar unas comillas dentro de otras del mismo tipo (ya sea simples o dobles), tendrás que utilizar entidades HTML para las comillas. Por ejemplo, el siguiente código no va a funcionar:

<a href='http://www.ejemplo.com' title='¿A que es 'divertido'?'>Un enlace a mi ejemplo.</a>

Así que tendrás que hacer esto:

<a href='http://www.ejemplo.com' title='¿A que es &apos;divertido&apos;?'>Un enlace a mi ejemplo.</a>

Internet y páginas web

Para que un usuario pueda obtener y leer el contenido de una página web, se deben seguir algunos pasos básicos:

  • Para crear páginas web, el desarrollador tiene que crear archivos escritos en HTML (con cualquier editor de texto) y colocarlos en un servidor web (por ejemplo, usando un cliente ftp).
  • El código HTML de una página web le dice al navegador lo que necesita saber para mostrar la página. Si el programador completa el desarrollo de la página web correctamente, las páginas incluso se mostrarán bien en dispositivos móviles y de escritorio.
  • Una vez que los archivos se colocan en un servidor web, cualquier navegador puede recuperar las páginas web a través de Internet.
  • Finalmente, los usuarios utilizarán un ordenador o cualquier otro dispositivo conectado a Internet para visualizar la página web mediante un navegador.

El servidor web

Un servidor web es simplemente un ordenador conectado a Internet esperando peticiones de navegadores:

  • Los programadores almacenan HTML, archivos, imágenes, sonidos y otros tipos de archivos.
  • Los navegadores solicitan páginas HTML u otros recursos, como imágenes.
  • Si el servidor puede localizar los recursos, los envía a los navegadores.

El navegador web

Un navegador simplemente es una aplicación que se encarga de mostrar páginas web. El código HTML realizará el siguiente recorrido:

  • El código HTML parte del servidor, quien se encarga de enviar páginas web completas a los navegadores.
  • Los navegadores recuperan las páginas.
  • Los navegadores muestran las páginas HTML a los usuarios finales.

Elementos <!doctype> y <html>

En sus inicios, cuando el HTML llevaba poco tiempo (alrededor de 1991-1992), los doctypes servían como enlaces al conjunto de reglas que la página HTML debía seguir para que fuera considerado buen HTML. Un elemento doctype de aquella época podía parecerse a esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

En la actualidad se ignora y se considera un legado histórico que hay que incluir para que todo funcione correctamente. <!DOCTYPE html> es la secuencia de caracteres más corta que se acepta como elemento doctype válido, que indica estamos utilizando la última versión de HTML (HTML5).

En segundo lugar debemos utilizar obligatoriamente el elemento <html> (elemento raíz), que incluirá todo el contenido de la página.

En resumen, todos los documentos HTML deben comenzar con una declaración de tipo de documento seguida del código de la página web en sí entre las etiquetas <html> and </html>:

<!doctype html>
<html lang="es">
...
</html>

El elemento <head>

Este elemento actúa como contenedor para todos los parámetros que se quieran incluir en el documento HTML que no serán visibles a los visitantes de la página. Incluye cosas como palabras clave y la descripción de la página que se quieran mostrar en los resultados de búsqueda, así como la hoja de estilo para formatear nuestro contenido, declaraciones de codificación de caracteres y más. Por ejemplo:

<!doctype html>
<html lang="es">
  <head>
    <!-- Etiquetas obligatorias -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Hoja de estilos (CSS) de Bootstrap -->
    <link rel="stylesheet" href="bootstrap.min.css" />
    ...
  </head>  
  ...
</html>

El elemento <meta>

Metadata

Es importante que las páginas web contengan una lista de elementos de metadatos para proporcionar a los motores de búsqueda (por ejemplo, Google, DuckDuckGo, Bing, etc.) información semántica como el autor, palabras clave, descripción, etc. Dado que este tipo de información no se muestra al usuario directamente por el navegador, los elementos de metadatos deben colocarse dentro del elemento <head>:

<head>
  <meta name="description" content="My página web" />
  <meta name="keywords" content="HTML, CSS, JavaScript" />
  <meta name="author" content="Fernando" />
</head>

Charset

Uno de los elementos <meta> más importantes es el que define la especificación del charset. Es muy habitual especificar que el documento HTML usará la codificación UTF-8, que incluye la gran mayoría de caracteres de todos los idiomas humanos escritos. De esta forma, el navegador mostrará correctamente cualquier contenido textual que pongamos en el documento, tales como caracteres á, é, ü, ñ, etc.:

<meta charset="utf-8" />

Viewport

HTML5 introdujo un método para permitir a los desarrolladores controlar ciertos parámetros del área visible de la página web (viewport), a través de la etiqueta <meta> . El viewport puede variar dependiendo del dispositivo, y puesto que hay diferencias entre un móvil y una pantalla de ordenador, es conveniente establecer el comportamiento adecuado para que nuestra página web se muestre correctamente en cualquier dispositivo. Podemos utilizar por ejemplo la siguiente línea de código en todas nuestras páginas web:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

El elemento <title>

Este elemento establece el título de la página web, que es el título que aparece en la pestaña del navegador en la que se carga dicha página. El título también se utiliza para describir la página cuando se marca como favorita. Se puede definir de la siguiente forma:

<title>Mi primera página web</title>

El elemento <link>

El elemento <link> especifica que el documento actual se encuentra enlazado con un recurso externo. El uso más habitual de este elemento es el de aplicar hojas de estilos al documento.

Mediante el atributo <rel> especificaremos el tipo de relación del documento enlazado con el actual. El atributo debe ser una lista de tipos de enlaces separados por espacio. El uso más común para este atributo es especificar el enlace a una hoja de estilos externa: el atributo rel se establece con valor stylesheet, y el atributo href se establece con la URL de la hoja de estilos externa para dar formato a la página:

<link rel="stylesheet" href="estilos.css" />

El elemento <script>

El elemento <script> se utiliza para incluir código ejecutable o datos. Se usa principalmente para incluir o enlazar código JavaScript, aunque también se puede usar para incluir otros lenguajes de programación tales como  WebGL o incluso también datos en formato JSON. Utilizando el atributo <src> podemos especificar la url de un fichero externo (esto se puede usar como alternativa a incluir el código JavaScript directamente en nuestro documento). Por ejemplo, en el caso de querer utilizar código JavaScript en nuestra página web, procederíamos de la siguiente forma:

<!-- Fichero externo con código JavaScript -->
<script src="javascript.js"></script>
...
<!-- Definimos código JavaScript dentro del fichero HTML -->
<script>
function miFuncion() {
  document.getElementById("demo").innerHTML = "¡Hola JavaScript!";
}
</script>

El elemento <body>

El elemento <body> contiene todo el contenido que quieres mostrar a los usuarios cuando visitan tu página, ya sea texto, imágenes, vídeos, juegos, pistas de audio reproducibles o cualquier otra cosa. Se abre justo después de cerrar el elemento <head> y se debe cerrar justo antes de cerrar el elemento <html>. Por ejemplo, con el siguiente código, el navegador sólo mostrará en pantalla el texto «¡Hola mundo!»:

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="description" content="Mi primera página web" />
  <meta name="keywords" content="HTML, CSS, JavaScript" />
  <meta name="author" content="Fernando" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>Página de ejemplo</title>
</head>
<body>
  ¡Hola mundo!
</body>
</html>

Debemos matizar que dentro de una página web no podemos poner directamente los caracteres “<” y “>” porque el navegador los confundiría con los caracteres que se utilizan para la creación de etiquetas.

Para cierto tipo de caracteres, es necesario utilizar otra sintaxis que suele constar de un ampersand seguido de su nombre identificativo y un punto y coma. Por ejemplo:

&amp;&
&lt;<
&quot;
&gt;>
&copy;©
&divide;÷
&euro;

Ejercicio propuesto: Hola mundo

Crea una página web para mostrar el texto «¡Hola mundo, mi nombre es … !» dentro del elemento <body>. Además, deberás utilizar el elemento <head> para mostrar el texto «Saludos» como título en la pestaña del navegador. Para finalizar, añade y completa la página web con el resto de elementos <meta> (charset, viewport, author, description y keywords), y comprueba el resultado en el navegador.

Párrafos y secciones

Para que el contenido textual de una página web resulte más legible, es muy importante utilizar párrafos y secciones.

El texto de cada párrafo se debe colocar entre las etiquetas <p> y </p>, y para indicar el comienzo de cada sección de nuestro contenido, disponemos de encabezados de varios niveles: <h1>, <h2>, <h3>, <h4>, <h5> y <h6> (del más grande al más pequeño). Podemos utilizar estos elementos de la siguiente forma:

...
<h1>Encabezado de primer nivel</h1>
<p>Mi primer párrafo</p>
<p>Mi segundo párrafo</p>
<p>Mi tercer párrafo</p>

<h2>Encabezado de segundo nivel</h2>
<p>Mi cuarto párrafo</p>
<p>Mi quinto párrafo</p>
...

Ejercicio propuesto: Párrafos

Crea una página web para mostrar diferentes párrafos utilizando las etiquetas <p> y </p>, todos ellos con diferentes líneas de cualquier texto. A continuación, añade el resto de elementos <meta> (charset, viewport, author, description, keywords y title), y comprueba el resultado utilizando tu navegador.

Ejercicio propuesto: Encabezados y párrafos

Crea una página web para mostrar varios encabezados de diferentes niveles, utilizando las etiquetas <h1> a <h6>. Añade además varios párrafos (encerrados entre las etiquetas <p> y </p> ) con cualquier texto, colocando un párrafo diferente después de cada encabezado. Para concluir, añade el resto de elementos <meta> (charset, viewport, author, description, keywords and title), y comprueba el resultado en tu navegador.

Ejercicio propuesto: Párrafos dentro de la misma sección

Utilizando las etiquetas correspondientes (<h1> y <p>), añade el código HTML necesario para crear una página web que muestre el siguiente texto con el formato correcto:

Alicante

Alicante (en valenciano y cooficialmente Alacant) es una ciudad y un municipio de España, capital de la provincia homónima, en la Comunidad Valenciana. Ciudad portuaria, está situada en la costa mediterránea. Con 337.482 habitantes (INE, 2020), es el segundo municipio más poblado de la comunidad autónoma y el undécimo del país.

Forma una conurbación de 468.782 habitantes con muchas de las localidades de la comarca del Campo de Alicante: San Vicente del Raspeig, San Juan de Alicante, Muchamiel y Campello. Estadísticamente se asocia también con el área metropolitana de Alicante-Elche, que cuenta con 757 085 habitantes. 

Ciudad eminentemente turística y de servicios, es uno de los destinos turísticos más importantes de España.

Ejercicio propuesto: Encabezados de diferente nivel

Utilizando las etiquetas HTML adecuadas, crea una página web que tenga seis encabezados con el texto «Hola». Comienza con el encabezado más importante (el más grande) y ves bajando hasta el de menor relevancia (el más pequeño).

Ejercicio propuesto: Encabezados, niveles y párrafos

Utiliza las etiquetas correctas (<h1>, <h2>, <h3> y <p>) sobre el texto que aparece a continuación:

Valencia

Valencia (en valenciano y oficialmente, València) ​es un municipio y una ciudad de España, capital de la provincia homónima y de la Comunidad Valenciana. Con una población de 800.215 habitantes (2020), que sube a 1.581.057 habitantes (2020) si se incluye su espacio urbano.​ Es la tercera ciudad y área metropolitana más poblada de España, por detrás de Madrid y Barcelona.

Geografía

Localización

La ciudad de Valencia se encuentra en la costa mediterránea de la península ibérica, sobre la gran llanura aluvial de los ríos Júcar y Turia, justo en el centro del golfo de Valencia. La ciudad primitiva estaba ubicada a unos cuatro kilómetros del mar, en una isla fluvial del Turia. Los montes más cercanos a la ciudad son algunas de las últimas estribaciones del sistema Ibérico en la Comunidad Valenciana, como el Cabeçol de El Puig y la sierra Calderona, a unos 12 km y 25 km al norte de la ciudad respectivamente.

Clima

Valencia cuenta con un clima mediterráneo suave y ligeramente lluvioso durante los inviernos y caluroso y seco durante los veranos. De acuerdo con los criterios de la clasificación climática de Köppen, Valencia tiene un clima de transición entre los climas mediterráneo y semiárido cálido. La temperatura media anual es de 18.4 °C.

El elemento <br>

El elemento HTML line break <br> produce un salto de línea en el texto (retorno de carro). Es útil para escribir un poema o una dirección, donde la división de las líneas es muy relevante.

Debemos tener en cuenta que no se debe utilizar <br> para incrementar el espacio entre líneas de texto; para ello se debe utilizar la propiedad margin de CSS o el elemento <p>.

Como se puede observar en el siguiente ejemplo, se utiliza un elemento <br /> cada vez que queremos cambiar de línea. El texto que coloquemos después del elemento <br /> aparecerá al comienzo de la siguiente línea:

<p> 
  Mozilla Foundation<br />
  1981 Landings Drive<br />
  Building K<br />
  Mountain View, CA 94043-0801<br />
  USA
</p>

Ejercicio propuesto: Poemas

Crea una página web que contenga diversos poemas de diversos autores, como el que tienes a continuación. Debes utilizar <h1> y <h2> para los títulos, y párrafos y saltos de línea para el resto.

Nota: Deberías utilizar <h1> para el encabezado principal y <h2> para el resto de encabezados. Ten en cuenta también que no puedes utilizar <br /> para crear márgenes entre cada poema. Deberás usar párrafos que contengan cada poema, y saltos de línea para cada verso.
POEMAS

Gustavo Adolfo Bécquer

Del salón en el ángulo oscuro,
de su dueña tal vez olvidada,
silenciosa y cubierta de polvo,
veíase el arpa.

¡Cuánta nota dormía en sus cuerdas,
como el pájaro duerme en las ramas,
esperando la mano de nieve
que sabe arrancarlas!

¡Ay!, pensé; ¡cuántas veces el genio
así duerme en el fondo del alma,
y una voz como Lázaro espera
que le diga «Levántate y anda»!

...

Ejercicio propuesto: Direcciones

Crea una página web para mostrar diferentes direcciones, similares a la que tienes a continuación (debes usar encabezados de tipo <h1> y <h2> , párrafos y saltos de línea).

Nota: Deberías utilizar un encabezado <h1> para el título principal y <h2> para el resto de encabezados. Ten en cuenta también que no debes utilizar <br /> para crear márgenes entre cada dirección. Al igual que el ejercicio anterior, utiliza párrafos para cada dirección y saltos de línea para el resto.
DIRECCIONES

Mozilla

331 E. Evelyn Avenue
Mountain View, CA
94041
USA

...

El elemento <pre>

El elemento <pre> (o Texto HTML Preformateado) representa texto que mantiene la estructura que se utilizó en el editor. El texto en este elemento típicamente se muestra con una fuente fija o monoespaciada (no proporcional), exactamente como se mostraba en el archivo mientras se editaba. Los espacios dentro de este elemento también se muestran como se escribieran en el editor. Por ejemplo:

<pre>
 -----------------------------
< Soy un experto en mi campo. >
 -----------------------------
         \   ^__^ 
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||
</pre>

Ejercicio propuesto: ASCII art

Crea un documento para mostrar diversos dibujos utilizando caracteres, de forma similar al ejemplo.

Nota: Puedes encontrar diversos ejemplos en los siguientes enlaces: https://www.asciiart.eu/ , https://en.wikipedia.org/wiki/ASCII_art , https://asciiart.website/ , https://fsymbols.com/text-art/ , etc.
 
  ----------------------------
< Soy un experto en mi campo. > 
  ----------------------------
        \   ^__^
         \  (oo)\_______ 
            (__)\       )\/\ 
                ||----w | 
                ||     ||


         .^.    .^.
        (   \  (   \
         \   }  \   }
        ( `  { ( `  {
         \   }  \   }
         ( `  \ ( `  \
          \   }  \   }
         ( `  { ( `  {
        .-\   |-^-. /
       (  .\ /     '.
        '/  O _______\
         | .-'#### ###
       ,-./  # / \ / \___
      { ,-     \@/_\@'   '.
      { `.       .'        }
       `._   /    )._     _"
          \   `--' __"---"
           `. /  ,'  \  \
   Ahas      /  /     |  )
            |  /      ; /
             \/ '-,,-'\/


$$$_____$$$$$$$_$$$$$$$_$$$_______$$$_$$$$$$$$$$
$$$____$$$____$$$____$$$_$$$_____$$$__$$$_______
$$$____$$$_____$_____$$$_$$$_____$$$__$$$_______
$$$_____$$$_________$$$___$$$___$$$___$$$$$$$$__
$$$______$$$_______$$$_____$$$_$$$____$$$_______
$$$_______$$$_____$$$______$$$_$$$____$$$_______
$$$$$$$$$___$$$$$$$_________$$$$$_____$$$$$$$$$$

...

Quiz

Test your skills with this quiz about paragraphs, headings, and some other concepts related to this unit.