LENGUAJES PARA LA VISUALIZACIÓN
DE INFORMACIÓN
HTML5 Y HOJAS DE ESTILO (CSS3) (Basado en el libro del mismo título de Ediciones eni)
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
2
Índice LENGUAJES PARA LA VISUALIZACIÓN DE INFORMACIÓN ....................................................................... 1
1. ESTRUCTURA BÁSICA DE UN DOCUMENTO ................................................................................ 6
2. CARACTERES ESPECIALES EN HTML5 ........................................................................................... 6
3. CITAS EN HTML5 .......................................................................................................................... 7
4. LISTA DE ELEMENTOS .................................................................................................................. 8
4. 1.- Las listas numeradas .............................................................................................................. 8
4.2. Las listas sin numerar ............................................................................................................... 8
4.3. Las listas anidadas .................................................................................................................... 9
4.4. Las listas de definición .............................................................................................................. 9
5. DIVISIONES DE PÁGINA ............................................................................................................. 10
5.1 Las etiquetas de renderizado o generación de imagen CSS en bloque (block). ...................... 10
5.2. Las etiquetas de renderizado CSS en línea (inline) ................................................................. 11
6. INICIO A LAS HOJAS DE ESTILO .................................................................................................. 12
6.1 Propiedades de estilo .............................................................................................................. 12
6.2. Selectores ............................................................................................................................... 13
6.3. Comentarios ........................................................................................................................... 15
6.4. Unidades de medida ............................................................................................................... 15
6.5. Notación de los colores ......................................................................................................... 16
6.6. Incorporación del estilo .......................................................................................................... 17
6.7. Noción de cascada (orden de prioridad) ................................................................................ 20
7. IMÁGENES ................................................................................................................................. 20
7.1. Insertar un color de fondo ................................................................................................. 21
7.2. Insertar una imagen de fondo ........................................................................................... 23
7.3. Insertar un enlace sobre una imagen ................................................................................ 23
7.4. Posicionamiento de la imagen de fondo ........................................................................... 24
7.5. Los formatos gráficos más utilizados en los navegadores son: ......................................... 26
8. HOJAS DE ESTILO (CSS): DAR FORMATO AL TEXTO ................................................................... 28
8.1. Negrita .................................................................................................................................... 28
8.2. Cursiva .................................................................................................................................... 29
8.3. Tamaño de letra ..................................................................................................................... 29
8.4. Color del texto ........................................................................................................................ 30
8.5. Alineación ............................................................................................................................... 30
8.6. Alineación vertical .................................................................................................................. 31
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
3
8.7. Subrayado ............................................................................................................................... 34
8.8. Transformación ...................................................................................................................... 35
8.9. Indentación ............................................................................................................................. 36
8.10. Separadores horizontales ..................................................................................................... 37
8.11. Columnas múltiples .............................................................................................................. 39
9. HOJAS DE ESTILO (CSS3) ............................................................................................................ 40
9.1. Fondos múltiples ............................................................................................................... 40
9.2. Opacidad y transparencia .................................................................................................. 41
10. ENLACES ................................................................................................................................ 45
10.1. Insertar un enlace .......................................................................................................... 46
10.2. Enlaces a una página situada en la misma carpeta ....................................................... 47
10.3. Enlaces a una página situada en otra carpeta ............................................................... 47
a. Enlace desde indice.htm hacia pagina1.htm ............................................................................. 48
b. Enlace desde pagina1.htm hacia pagina2.htm .......................................................................... 48
c. Enlace desde pagina2.htm hacia indice.htm ............................................................................. 49
10.4. Enlaces al interior de una página .................................................................................. 49
10.5. Enlace hacia un ancla situada en otra página ............................................................... 51
10.6. Enlaces a otro sitio ........................................................................................................ 51
10.7. Enlace a una dirección email ......................................................................................... 51
10.8. Enlaces para descargar un archivo ................................................................................ 52
10.9. Enlaces hacia una ventana específica............................................................................ 52
10.10. Descripción acerca del enlace ....................................................................................... 54
11. TABLAS ................................................................................................................................... 55
11.1. Creación de una tabla .................................................................................................... 55
11.2. Ancho de la tabla .................................................................................................................. 55
11.3. Bordes de la tabla ................................................................................................................ 56
11.4. Alineación de la tabla ........................................................................................................... 58
11.5. Alineación de las celdas de la tabla ...................................................................................... 59
11.6. Celdas de la tabla.................................................................................................................. 60
A. Fusión de columnas .............................................................................................................. 68
B. Fusión de filas ......................................................................................................................... 69
11.7. Leyenda de la tabla ............................................................................................................... 71
11.8. Agrupar columnas ................................................................................................................ 72
11.9. Estructuración de la tabla ..................................................................................................... 74
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
4
12. PROPIEDADES DE CAJA .......................................................................................................... 76
12.1. Concepto de modelo de caja o bloque .......................................................................... 76
12.2. Elemento en bloque o en línea ..................................................................................... 78
12.3. Anchura y altura ............................................................................................................ 80
12.4. Márgenes externos ........................................................................................................ 82
12.5. Márgenes internos ........................................................................................................ 84
12.6. Color del borde .............................................................................................................. 85
12.7. Grosor del borde ........................................................................................................... 87
12.8. Estilo del borde .............................................................................................................. 89
12.9. Escritura abreviada del borde ....................................................................................... 91
13. FORMULARIOS ....................................................................................................................... 92
13.1. Declarar el formulario ................................................................................................... 93
13.2. Campo de texto ............................................................................................................. 95
13.3. Área de texto ................................................................................................................. 98
13.4. Lista desplegable ......................................................................................................... 100
13.5. Botones de selección única (radio) ............................................................................. 103
13.6. Botones de selección múltiple (checkbox) .................................................................. 104
13.7. Botón de envío ............................................................................................................ 106
13.8. Botón de anulación...................................................................................................... 107
13.9. Botón de acción ........................................................................................................... 109
13.10. Campos de transferencia de archivos ......................................................................... 111
13.11. Campos de contraseña ................................................................................................ 112
13.12. Organización de los campos de formulario ................................................................. 113
13.13. Etiquetado de los campos de formulario .................................................................... 114
13.14. Campo de texto para la dirección de correo electrónico ............................................ 116
13.15. Campo de texto con formato numérico ...................................................................... 118
13.16. Campo de texto con formato de fecha ....................................................................... 119
13.17. Una aplicación completa ............................................................................................. 123
14. MULTIMEDIA ....................................................................................................................... 128
14.1. Insertar un archivo de audio .............................................................................................. 128
14.2. Insertar un archivo de vídeo ............................................................................................... 133
15. Etiquetas semánticas y de organización.............................................................................. 136
15.1. Antiguas etiquetas semánticas .................................................................................... 136
15.2. Las nuevas etiquetas semánticas ................................................................................ 137
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
5
15.3. Las nuevas etiquetas de organización ......................................................................... 140
16. Algunas propiedades de visualización ................................................................................. 151
16.1. Posicionamiento .......................................................................................................... 151
1. Posicionamiento estático ........................................................................................................... 151
2. Posicionamiento relativo ............................................................................................................ 151
3. Posicionamiento absoluto .......................................................................................................... 153
4. Posicionamiento fijo ................................................................................................................... 155
16.2. Flotar ........................................................................................................................... 156
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
6
1. ESTRUCTURA BÁSICA DE UN DOCUMENTO
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
</body>
</html>
ISO-8859-1 es la codificación por defecto de numerosos protocolos de red, garantía de una
excelente interoperabilidad.
UTF-8 Aplicación de la codificación Unicode, se presenta como la solución del futuro. Su uso
está frenado a causa de ciertos problemas en algunos lenguajes de programación (PHP).
2. CARACTERES ESPECIALES EN HTML5
Existe una lista de elementos a evitar en la codificación del texto. Estos elementos son, por
ejemplo:
El signo < que indica la apertura de una etiqueta. Se codificará mediante <
El signo > que marca el cierre de una etiqueta. Se codificará mediante >
El signo " usado en los atributos de la etiqueta. Se codificará mediante "
El signo & que marca el inicio de una referencia de carácter. Se codificará mediante &
En principio, si el carácter existe en el juego de caracteres (charset) declarado en el
documento Html5, no es preciso escribir los caracteres especiales mediantes entidades Html.
Así, en las codificaciones iso-8859-1 e iso-8859-15, la é existe y no es necesario recurrir a la
entidad é. Esto mejora la legibilidad del código.
Por el contrario, con la codificación iso-8859-1, el signo € no existe, siendo necesario usar
obligatoriamente la entidad €.
Para saber más acerca de este tema, se pueden consultar las indicaciones de W3C en la
siguiente dirección:
www.la-grange.net/w3c/html4.01/charset.html.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
7
Es recomendable especificar bien el charset.
3. CITAS EN HTML5
Las citas se escriben por delante del contenido de tipo texto mediante las
etiquetas <blockquote> ... </blockquote>. La cita se visualiza con un salto de línea antes y
otro después, igual que los párrafos, y con un ligero desplazamiento respecto al margen
izquierdo.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
Séneca afirma:<br>
<blockquote>Admira a quien lo intenta,<br>
aunque fracase.</blockquote>
</body>
</html>
Solución:
Séneca afirma:
Admira a quien lo intenta, aunque fracase.
Existe también la etiqueta <q> ... </q> para las citas. Ésta no muestra espacio antes ni
después, ni tampoco desplazamiento a la derecha. En este caso, la cita se visualiza entre
comillas.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<p>Séneca afirma:
<q>Admira a quien lo intenta,
aunque fracase.</q>
</p>
</body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
8
Séneca afirma: “Admira a quien lo intenta, aunque fracase.”
4. LISTA DE ELEMENTOS
Las listas permiten estructurar diversos tipos de contenido. En función de la información que
contienen se clasifican en:
1. Listas numeradas u ordenadas.
2. Listas sin numerar o desordenadas.
3. Listas anidadas.
4. Listas de definición.
4. 1.- Las listas numeradas representarán los elementos de la lista, numerando cada uno de ellos,
según el lugar que ocupan en la lista. Para este tipo se utiliza la etiqueta <OL></OL>. Cada uno de los
elementos de la lista irá precedido de la etiqueta <LI>.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
Listas en Html5:
<ol>
<li>Listas ordenadas</li>
<li>Listas no ordenadas</li>
<li>Listas anidadas</li>
<li>Listas de definición</li>
</ol>
</body>
</html>
El atributo start permite empezar la numeración en una cifra distinta al 1.
EJ: <ol start="3" reversed> el atributo reversed no está implementado en ningún navegador.
4.2. Las listas sin numerar representan los elementos de la lista con una marca que antecede a
cada uno de ellos.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
9
Se utiliza la etiqueta <UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los elementos.
La forma de las marcas (disco lleno o disco vacío) la determina el navegador.
Con las hojas de estilo CSS se puede modificar la forma de las marcas o reemplazarlas por imágenes.
4.3. Las listas anidadas
Nada impide elaborar listas ordenadas y listas no ordenadas anidadas. La codificación es,
simplemente, un poco más compleja.
Ejemplo: Una lista numerada en la que se anida una lista no ordenada.
<body>
<ol>
<li>Títulos</li>
<li>Listas en Html5
<ul>
<li>Listas ordenadas</li>
<li>Listas no ordenadas</li>
<li>Listas anidadas</li>
<li>Listas de definición</li>
</ul></li>
<li>Tablas en Html5</li>
<li>Formularios en Html5</li>
</ol>
</body>
4.4. Las listas de definición muestran los elementos tipo Diccionario, o sea, término y definición.
Se utiliza para ellas la etiqueta <dl></dl> para definir la lista.
Entre estas etiquetas, se declara lo que se llama el término mediante la etiqueta <dt> ...
</dt> seguida de su definición en la etiqueta <dd> ... </dd>.
La estructura general de una lista de definición es la siguiente:
<dl>
<dt>Término 1</dt>
<dd>Definición 1</dd>
<dt>Término 2</dt>
<dd>Definición 2</dd>
<dt>Término 3</dt>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
10
<dd>Definición 3</dd>
</dl>
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<p>Etiquetas de lista disponibles:</p>
<dl>
<dt>ol</dt>
<dd>Lista ordenada</dd>
<dt>ul</dt>
<dd>Lista no ordenada</dd>
<dt>dl</dt>
<dd>Lista de definición</dd>
</dl>
</body>
</html>
5. DIVISIONES DE PÁGINA
El navegador interpreta cada etiqueta Html y determina la visualización a través de las hojas
de estilo CSS aplicadas por defecto.
Existen dos grandes grupos de etiquetas:
5.1 Las etiquetas de renderizado o generación de imagen CSS en bloque (block).
Éstas ocupan, por defecto, toda la longitud de la ventana del navegador. Se sitúan así unas
debajo de las otras. Generalmente, el navegador inserta automáticamente un espacio
encima y debajo del contenido de la etiqueta. Una etiqueta de tipo bloque puede contener
una (o varias) etiqueta(s) de tipo bloque. Es el caso, por ejemplo, de una cita incluida en un
párrafo.
Los principales elementos de división de tipo bloque son:
◦ Etiquetas de título <hx> ... </hx>.
◦ Etiquetas de párrafo <p> ... </p>.
◦ Etiquetas de cita <blockquote> ... </blockquote>.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
11
◦ La etiqueta <hr> que inserta una línea horizontal.
◦ Las etiquetas <ol> ... </ol> de las listas ordenadas.
◦ Las etiquetas <ul> ... </ul> de las listas no numeradas.
◦ Las etiquetas <dl> ... </dl> de las listas de definiciones.
◦ Etiquetas de tabla <table> ... </table>.
◦ Etiquetas de declaración de formularios <form> ... </form>.
◦ La etiqueta <div> ... </div> concebida especialmente para introducir una división
sin tener que usar alguna de las etiquetas mencionadas antes.
5.2. Las etiquetas de renderizado CSS en línea (inline). Al contrario que los elementos
de bloque, los elementos en línea se sitúan siempre uno al lado del otro, permaneciendo en
el mismo flujo de texto. De este modo, el código: texto en <b>negrita</b> y en
<i>cursiva</i> se escribe en una sola línea, sin interrumpir el flujo del texto: texto
en negrita y en cursiva.
Las principales etiquetas en línea son:
La etiqueta <b> ... </b> para escribir un texto en negrita.
La etiqueta <i> ... </i> para escribir un texto en cursiva.
La etiqueta <br> de salto de línea.
La etiqueta <a> para los enlaces.
La etiqueta <img> para las imágenes.
Las etiquetas de campos de formulario <input>, <select> ... </select>
y <textarea> ... </textarea>.
La etiqueta <span> para introducir una división en línea en el texto.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<h1>Html5</h1>
<h3>Documento Html5 mínimo</h3>
<p>Un documento Html5 debe contener:</p>
<ul>
<li>un doctype</li>
<li>la etiqueta html</li>
<li>la etiqueta head</li>
<li>la etiqueta title</li>
<li>la etiqueta body</li>
</ul>
<p>Comentar este artículo:</p>
<form action="">
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
12
<textarea rows="2" cols="25"></textarea><br>
<input value="Enviar" type="submit">
<input value="Deshacer" type="reset">
</form>
</body>
</html>
6. INICIO A LAS HOJAS DE ESTILO
6.1 Propiedades de estilo
Las hojas de estilo abarcan todo aquello relacionado con la presentación del documento
Html como el color, la alineación, el tamaño, los bordes, los fondos o el interlineado.
Aunque las hojas de estilo no son sensibles a la distinción entre mayúsculas y minúsculas,
es conveniente que su codificación se realice en minúsculas.
La declaración de un estilo se hace mediante el binomio propiedad: valor;
Ejemplo:
text-align: center; Se interpreta como: "alinear el texto de forma centrada".
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
13
background-color: red; "asignar al color de fondo el valor rojo".
Detallemos esta notación:
Propiedad indica el elemento de presentación que se ve implicado; por ejemplo color para el
color, text-align para la alineación, border para los bordes, font-size, para el tamaño de la
fuente, background para el fondo.
Valor especifica una palabra clave, un porcentaje o un tamaño, en función de la propiedad a
la que está asignado.
El punto y coma final es obligatorio e indica que se ha terminado la declaración de estilo.
Se permite el uso de espacios. Así, ciertos autores tienen la costumbre de incluir un espacio
entre los dos puntos y el valor para mejorar la legibilidad del código.
Es posible definir varias declaraciones de estilo en el mismo selector.
Por ejemplo:
propriedad1:valor; propriedad2:valor; propriedad3:valor;
6.2. Selectores
Los selectores se utilizan para determinar los elementos del código Html que se verán afectados por
el efecto de presentación. Éstos pueden ser de distintos tipos:
6.2.1 Selectores básicos
El primer selector que nos viene a la mente es la etiqueta h1. De este modo, podemos, por
ejemplo, "enganchar" la declaración de estilo anterior (alinear el texto de forma centrada) a la
etiqueta <h1>.
◦ La sintaxis es: selector { propiedad: valor;}
Ejemplo h1 { text-align: center;}
div { background-color: red;}
Comentarios:
Se usa simplemente el texto de la etiqueta, sin los signos menor que (<) y mayor que (>).
La declaración de estilo se efectúa entre dos llaves.
No hay que olvidar la llave de cierre ya que, en caso contrario, el navegador no tendrá en
cuenta la declaración de estilo.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
14
De este modo, todas las etiquetas <h1> se alinearán de forma centrada.
6.2.2. Selectores de clase
En ciertas situaciones, no queremos agregar un efecto de presentación a todas las etiquetas
de un tipo determinado, sino a ciertas etiquetas elegidas libremente. Las hojas de estilo cuentan para
ello con la noción de clases (class) que permite al diseñador definir sus propios selectores. De ahí el
nombre de selector universal.
La etiqueta a la que se quiere aplicar la declaración de estilo se distinguirá de las demás por
el atributo class="nombre_clase"
Por ejemplo: <h1 class="efecto1"> ... </h1>.
Declaración de estilo: .nombre_clase { propiedad: valor;} El nombre de la clase, precedido
de un punto y seguido de la declaración de estilo.
Ejemplo
.efecto1 {text-align: center;} Aquí únicamente la etiqueta <h1> con el
atributo class="efecto1" estará centrada.
.rojo { background-color: red;} únicamente la etiqueta <div> con el atributo class=”rojo” se visualizará en rojo. Pero una misma clase se puede invocar varias veces en el documento Html.
Por ejemplo:
<div class="rojo">Item 1</div> <div>Item 2<div> <div class="rojo">Item 3</div>
Además, esta etiqueta de presentación podrá aplicarse a otras etiquetas del código como por
ejemplo un párrafo o una imagen.
6.2.3 Selectores de identificador
Su concepto es muy cercano a los selectores de clase pero, aquí, no se desea aplicar el efecto
del estilo más que a un único elemento de la página.
Este elemento único se identifica mediante el atributo id="nombre_ identificador” siendo,
por ejemplo, <h2 id="titulo2"> ... </h2>.
Declaración de estilo: #identificador { propiedad: valor;}
Ejemplo: #titulo2 {text-align: center;}
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
15
#rojo {background-color: red;}
Características
Un identificador id no puede figurar más de una vez en el documento Html con el mismo nombre. En caso contrario, ¡el resto del código será incorrecto!
<p id="rojo"> ... </p> ... <p id="rojo"> ... </p>
Un documento sí puede contener varios identificadores id con nombres diferentes aunque sólo pueden utilizarse una única vez.
Es posible mezclar declaraciones de estilo class e id. El nombre de un identificador puede contener letras, números, el guión y el carácter de
subrayado.
6.3. Comentarios
Las hojas de estilo como todo lenguaje de definición o de programación permiten insertar comentarios para facilitar así la comprensión del código y su mantenimiento posterior. En una hoja de estilo CSS, un comentario comienza con los caracteres de apertura barra oblicua y asterisco (es decir /*) y termina con los caracteres asterisco y barra oblicua (es decir */). Es posible situar comentarios en cualquier lugar de la hoja de estilo, salvo en el interior de una cadena de caracteres.
Ejemplo
/* Esto es un comentario */
6.4. Unidades de medida
Las hojas de estilo CSS permiten utilizar numerosas unidades de medida, bien en pulgadas (inches), en centímetros, en milímetros, en puntos, en picas, en píxeles o en porcentaje.
También se distingue entre valores relativos, que pueden variar según el ordenador utilizado, y valores absolutos, que permanecen constantes sea cual sea el dispositivo o el software utilizado.
Los valores absolutos son:
Unidad Nombre Descripción Valor Ejemplo
pt punto 72 pt = 1 inch entero 48pt
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
16
Unidad Nombre Descripción Valor Ejemplo
pc pica 1 pc = 12 pt real 4.5pc
mm milímetro 1 mm = .24 pc entero 60mm
cm centímetro 1 cm = 10 mm entero 6cm
in pulgada (inch) 1 in = 2.54 cm real 0.1in
Los valores relativos son:
Unidad Descripción Valor Ejemplo
em Unidad relativa que se basa en el tamaño del tipo de letra por defecto de la página.
real 1.8em
ex Unidad relativa a la altura de la letra minúscula en el elemento seleccionado.
real 1.3ex
px Un píxel es la parte más pequeña de una imagen. Depende de la resolución de pantalla.
entero 220px
% Porcentaje. entero 80%
Comentarios
No puede dejarse un espacio entre el valor y la unidad. Si se deja algún espacio entre el valor y la unidad, la hoja de estilo no se acepta y por lo tanto no se muestra.
Ciertas propiedades aceptan valores negativos.
Por lo general, se recomienda utilizar la unidad em para describir el tamaño del tipo de letra, y así lograr una estabilidad mayor entre los distintos sistemas operativos y navegadores.
6.5. Notación de los colores
Las hojas de estilo CSS proporcionan múltiples notaciones para declarar un color. Éstas son:
La notación hexadecimal clásica, es decir #ffcc00. Esta notación es muy conocida para aquellos que están habituados a los colores en Html. Define el color, o más bien los tres componentes del color: rojo (r de red), verde (g de green) y azul (b de blue), mediante una notación hexadecimal de tipo #rrggbb.
La notación decimal, por ejemplo, color: rgb(0, 0, 255). El código RGB del color no se codifica según su valor hexadecimal sino por un número comprendido entre 0 y 255. Es el equivalente decimal a la notación hexadecimal.
La notación en porcentaje, por ejemplo, color: rgb(25%, 50%, 0%). El valor 0% significa la ausencia de dicho componente y 100% su valor máximo.
Palabras clave, por ejemplo, color: red. Ver archivo: Paleta de colores.
A estas notaciones, la especificación CSS3 añade:
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
17
La notación RGBa, que obedece las mismas reglas de funcionamiento que la notación clásica RGB, sabiendo que la parte inicial de la declaración se corresponde con el valor:rgb(0,0,0). Se convierte por tanto en rgba(0,0,0,0). Aquí el último valor indica el grado de opacidad o de transparencia, definido entre 0 y 1.
La notación HSL (Hue Saturation Luminance), en castellano Tonalidad, Saturación, Luminosidad. La notación HSL consiste en tres valores. El primero se expresa en grados, de 0° a 359° (aunque el símbolo de grado ° no aparece en la notación). Se corresponde con un color de la rueda cromática: rojo (0°), amarillo (60°), verde (120°), cian (180°), azul (240°) y magenta (300°). El segundo y tercer valor se expresan en porcentaje y describen respectivamente la saturación y la luminosidad. Por ejemplo, color: hsl(0, 100%, 50%) para el rojo.
La notación HSLa, que agrega un valor comprendido entre 0 y 1 para la transparencia o la opacidad. Por ejemplo, color: hsl(0, 100%, 50%, 0.5) para obtener un color rojo semitransparente.
Para obtener una ayuda más completa referente a la codificación de colores, los siguientes sitios Web le serán de gran utilidad:
http://html-color-codes.info/codigos-de-colores-hexadecimales/
http://es.wikipedia.org/wiki/Colores_HTML
http://www.lawebera.es/recursos/herramientas/colores.php
http://www.usuarios.sion.com/pauluk/coloreshtml.htm
http://www.htmlquick.com/es/reference/color-codes.html
6.6. Incorporación del estilo
Existen múltiples formas de incorporar las declaraciones de estilo en una página Html. De
momento, vamos a indicar las elementales.
6.6.1. Estilo en línea.
La declaración de estilo se agrega directamente a una etiqueta concreta del código Html
mediante el atributo style.
Ejemplo
<h1 style="text-align: center;"> ... </h1>
Esta forma básica no respeta la regla de separación de contenido y presentación. Su uso será,
por tanto, excepcional.
6.6.2. Estilo interno.
Las declaraciones de estilo se agrupan en el encabezado del documento entre las
etiquetas <head> ... </head>. La sintaxis es la siguiente:
<style type=“text/css"> Declaraciones de estilo </style>
Ejemplo
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
18
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style type="text/css">
h1 { color: red;}
.efecto1 { padding-left: 20px;
font-style: italic;}
</style>
</head>
<body>
<h1>Titulo 1 en rojo</h1>
<h2 class="efecto1">Subtítulo en cursiva e identación izquierda</h2>
<h1>Título 2 en rojo</h1>
</body>
</html>
6.6.3. Estilo externo.
Del mismo modo, es posible reagrupar las declaraciones de estilo en un archivo externo (diferente) al archivo Html.
Este modo de proceder respeta mejor el principio de separación entre contenido y presentación.
Además es posible crear una hoja de estilo que se aplica no sólo a una única página Html sino a un conjunto de páginas en un sitio o en una aplicación.
Esta técnica emplea dos archivos:
Un archivo que contiene la declaración de estilo. Este archivo tiene la extensión .css.
Un documento Html que contiene un enlace hacia el archivo CSS así creado.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
19
A)La hoja de estilo externa
h1 {text-decoration: overline;}
Destacamos:
Que este archivo de texto puede crearse, por ejemplo, con el Bloc de Notas de Windows.
Que únicamente contiene declaraciones de estilo. Por consiguiente, no puede contener etiquetas
Html y en particular las etiquetas <style type="text/css"> ... </style> que se usan para definir
las hojas de estilo internas.
Es preciso guardar este archivo con un nombre cualquiera seguido de la extensión .css.
En nuestro caso, ejemplo.css.
Por simplicidad, este archivo se situará en la misma carpeta que el documento Html
(direccionamiento relativo o local).
B)El documento Html5
Se agregará en el encabezado, entre las etiquetas <head> y </head>, un enlace hacia la hoja de estilo
en cuestión.
<link rel="stylesheet" type="text/css" href="ejemplo.css">
Veamos esta línea de código:
link indica al navegador que lo que sigue es un enlace. rel="stylesheet" precisa que este enlace es relativo a una hoja de estilo. href="ejemplo.css" es la escritura clásica de un enlace en Html. El enlace puede ser absoluto (comenzando por http://...) o relativo. Nada impide incluir varias etiquetas <link> hacia hojas de estilo externas diferentes. Nada impide utilizar, además, una hoja de estilo interna.
Ejemplo
El código del archivo de la hoja de estilo ejemplo.css es simplemente:
h1 { text-decoration: overline;}
El código del archivo Html5:
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <link rel="stylesheet" type="text/css" href="ejemplo.css"> </head> <body> <h1>Título de nivel 1</h1> </body> </html>
Todos los títulos h1 de todas las páginas que hagan referencia a esta hoja de estilo aparecerán subrayados
por encima.
Solución: _____________ Título de nivel 1
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
20
6.7. Noción de cascada (orden de prioridad)
En los apartados anteriores hemos visto varias definiciones de estilo, bien en línea, interna(s) o
externa(s). En caso de que exista una competencia entre varios elementos de estilo, interviene la noción de "cascada" (la palabra Cascading en Cascading Style Sheets) u orden de prioridad.
El navegador toma primero en consideración las especificaciones de las hojas de estilo externas
(con la extensión css), a continuación las hojas de estilo internas (aquellas situadas en el interior de las etiquetas <head>) y a continuación las hojas de estilo en línea (aquellas ligadas a un
elemento Html5).
De este modo, en caso de conflicto entre una especificación de estilo definida al mismo tiempo en una hoja de estilo externa y en una hoja de estilo interna, la especificación que prevalece en el
navegador es la correspondiente a la hoja de estilo interna. Del mismo modo, en caso de conflicto entre una hoja de estilo interna y una declaración en línea, es la última la que prevalece.
El orden creciente de prioridad (de menor a mayor) es:
1. Propiedades por defecto del navegador.
2. Hojas de estilo externas.
3. Hojas de estilo internas.
4. Hojas de estilo en línea.
Los estilos declarados en la hoja de estilo en línea tienen, por tanto, la prioridad más alta.
7. IMÁGENES
Para incluir una imagen en nuestra página Web, utilizaremos la etiqueta <img>, que es única,
sin etiqueta de cierre.
En Html5, la etiqueta imagen <img> sólo tiene un atributo obligatorio:
El atributo src="ruta del archivo de la imagen". En Html, la imagen no se inserta
directamente en el documento sino que proviene de un archivo externo, designado por el
atributo src, que precisa la dirección relativa del archivo de la imagen que tiene que
mostrarse en la página.
De este modo, para una imagen situada en la misma carpeta que la página Html (ruta
relativa), se escribe:
<img src="imagen.png">o<img src="imagen.png" />
Para referenciar una imagen de un sitio Web (ruta absoluta), se escribe:
<img src="http://www.html5.com/images/imagen.png"> indicando el protocolo,
servidor y ruta.
o bien:
<img src=http://www.html5.com/images/imagen.png /> en notación Xhtml 1.0,
también admitida.
Los atributos opcionales de la etiqueta imagen <img>son:
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
21
Los atributos height y width. Estos atributos permiten definir respectivamente, en píxeles, el
alto y el ancho de la imagen en pantalla. La definición de estos atributos hace que el
navegador reserve un lugar para la imagen antes de descargarla completamente,
permitiéndole así continuar con la composición de la página y la visualización del texto de la
misma. Definiendo las dimensiones de la imagen se acelera la carga de la página. Si bien son
opcionales, estos atributos están considerados como esenciales por parte de los diseñadores
profesionales.
Si el archivo no está disponible o si la ruta es incorrecta, se muestra un icono en lugar de la
imagen deseada.
El atributo alt="texto alternativo", que contiene una breve descripción de la imagen. Este
texto está pensado principalmente para las personas invidentes, pues será leído por las
interfaces vocales. Más recientemente, el contenido del atributo alt se usa en los motores de
búsqueda (Google por ejemplo) para indexar y clasificar el contenido de un sitio Web y
alimentar su base de datos de imágenes.
Los atributos de presentación align, border, hspace y vspace, ya deprecados (deprecated)
en Html 4.0, no se han mantenido en Html5. Será preciso usar hojas de estilo CSS para
reemplazar estos atributos desaparecidos.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<img src="globo.jpg" width="120" height="120" alt="Globo terrestre">
</body>
</html>
7.1. Insertar un color de fondo
Es preciso usar de forma obligatoria propiedades de estilo CSS, background-color en este caso.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
22
<style>
body {background-color: rgb(200,215,230);}
</style>
</head>
<body>
Creando un color de fondo
</body>
</html>
Ejemplo 2
Aplicamos un color de fondo a una división <div>.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> div { width: 300px; background-color: #9cf; font-size: 250%; text-align: center;} </style> </head> <body> <div> <p>HTML5 + CSS3</p> </div> </body> </html>
El valor transparent, cuando está aplicado al fondo de la página, retoma el valor por defecto
del navegador.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
23
7.2. Insertar una imagen de fondo
Es preciso usar de forma obligatoria propiedades de estilo CSS, background-image en este
caso.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style type=”text/css”>
body {background-image: url(´bg.gif´);}
</style>
</head>
<body>
Creando una imagen de fondo
</body>
</html>
7.3. Insertar un enlace sobre una imagen
Los enlaces desde una imagen se realizan simplemente insertándola entre las etiquetas de enlace <a> ... </a>.
Algunos navegadores continúan dibujando un borde alrededor de la imagen (poco estético) para señalar el enlace.
Para quitar este borde, es preciso utilizar una declaración de estilo. Aunque, de momento, basta con agregar a la etiqueta <img> la declaración style="border: none;".
El código completo es:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<a>
<img src="Globo-terraqueo.jpeg" width="120" height="120" alt="Globo
terraqueo" style="border: none;">
</a>
</body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
24
7.4. Posicionamiento de la imagen de fondo
Esta propiedad nos permite posicionar con precisión la imagen de fondo de un elemento, a nivel de píxel.
background-position: valor de longitud, espacio, valor de longitud;
porcentaje, espacio, porcentaje;
left o center o right / top o center o bottom;
Por ejemplo:
background-position: 50px 100px; background-position: 20% 50%; background-position: center center;
Comentarios
Esta declaración de estilo sólo tiene sentido si la imagen de fondo se ha definido mediante la declaración background-image: url (archivo_imagen) de dir. relativa.
Generalmente sólo se utiliza esta declaración cuando la imagen no está repetida (background-norepeat).
El primer valor indica la posición respecto al borde izquierdo (eje horizontal) y el segundo valor respecto al borde superior (eje vertical). Ambos valores tienen que estar separados mediante un espacio.
Los porcentajes respetan el mismo principio aunque evidentemente en porcentaje respecto al tamaño del elemento padre.
Es posible asignar un único valor. En este caso, será interpretado como el valor horizontal (el primer valor). El valor vertical o segundo valor se definirá de forma automática al valor por defecto center o 50%.
Es posible combinar los valores en porcentaje y en longitud. Por ejemplo, la declaración background-position: 50px 30%; es correcta.
Los valores left (izquierda), center (centro) o right (derecha) determinan la posición horizontal.
Los valores top (arriba), center (centro), bottom (abajo) determinan la posición vertical. Los valores negativos también están aceptados.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
25
Ejemplo 1
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style type="text/css">
div { width: 250px;
height: 200px;
border: 1px solid gray;
background-image: url(papel1.png);
background-repeat: no-repeat;
background-position: 20px 20px;}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Ejemplo 2
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style type="text/css">
div { width: 250px;
height: 200px;
border: 1px solid gray;
background-image: url(papel3.png);
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
26
background-repeat: no-repeat;
background-position:bottom right;}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
7.5. Los formatos gráficos más utilizados en los navegadores son: 1. GIF
2. PNG
3. JPG
que ocupan poco espacio y se cargan rápidamente.
El formato GIF (Graphics Interchange Format)
Características:
El formato GIF sólo permite codificar imágenes con un máximo de 256 colores. Esto hace que
las imágenes sean fácilmente editables y modificables, pero no resulta práctico con los
desarrollos y posibilidades de las imágenes digitales actuales.
Por el contrario, es excelente para la elaboración de logotipos, botones, puntos, barras,
símbolos, y otros elementos de clip art (ya elaborados) frecuentes en ciertos gráficos de la
Web que no precisan de una paleta de colores muy extensa.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
27
Es un formato de compresión eficaz y rápido. Las imágenes GIF tienen un peso muy reducido
en número de bytes.
La compresión se realiza sin pérdida de datos y sin pérdida de calidad.
Es el único formato que permite construir animaciones, en forma de pequeños dibujos
animados, según lo que se conoce por GIFs animados.
Está siendo, no obstante, sustituido por el formato PNG.
El formato JPEG (Joint Photographic Expert Group)
Características
Es el tipo de formato más extendido en el universo de la fotografía digital, por resultar
excelente especialmente en aquellas donde existen tonalidades diversas y degradados de
color. El formato JPEG permite salvar hasta 16,7 millones de colores por imagen.
Su tasa de compresión es eficaz en lo que respecta al tamaño de la imagen resultante.
Permite modificar la tasa de compresión según las necesidades del diseñador. Una
compresión de entre el 15% y el 20% generará una imagen de calidad satisfactoria con un
tamaño de archivo reducido. A mayor factor de compresión, mayor pérdida de calidad de la
imagen. Es por tanto una compresión destructiva.
A causa de estas pérdidas de datos y de las deformaciones, es imprescindible guardar la
imagen originar y trabajar únicamente sobre copias de la misma.
El formato JPEG no permite elaborar transparencias ni animaciones.
El formato PNG (Portable Network Graphic)
Características
El formato PNG, se presenta como el formato del futuro. Se trata de un formato digital
concebido especialmente para el uso de imágenes en páginas Web. La recomendación de
W3C respecto a PNG se remonta a 1996. PNG debería, en teoría, reunir todas las ventajas de
GIF y JPEG. En la actualidad, está empezando a ser considerado seriamente por parte de los
diseñadores de aplicaciones Web.
Soporta 16,7 millones de colores igual que el formato JPEG.
Es una especificación concebida especialmente para Internet y es objeto de una
recomendación por parte de W3C.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
28
Su compresión tiene muy buen rendimiento. La tasa de compresión del formato PNG es de
entre el 5% y el 25%, superior a la del formato GIF.
Esta compresión se realiza sin pérdida de datos ni de calidad.
El formato PNG es un formato abierto y no está patentado.
Su función de entrelazado permite una visualización progresiva.
No es capaz de generar imágenes animadas.
Los profesionales lo están adoptando mayoritariamente en lugar del formato GIF para
fotografías de tamaño pequeño.
El formato WebP
Características
WebP es un nuevo formato de imagen que seguramente gane importancia en los próximos
años.
Este formato está desarrollado por Google a partir de uno de los formatos de la nueva
etiqueta <video> de Html5 (el WebM).
Según los primeros ensayos, WebP reducirá el tamaño de los archivos en un 39% respecto a
los formatos JPEG, PNG y GIF, con una pérdida de calidad imperceptible.
Nota: una página interesante para trabajar con tutoriales es:
http://www.w3schools.com/html/
8. HOJAS DE ESTILO (CSS): DAR FORMATO AL
TEXTO
Se introducen a continuación algunos elementos de las hojas de estilo para poder realizar tareas básicas de presentación en Html5 de forma más cómoda.
8.1. Negrita
Es posible escribir un texto en negrita con las hojas de estilo CSS sin tener que recurrir a la etiqueta <b>.
<!DOCTYPE html> <html lang="es"> <head>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
29
<title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> span { font-weight: bold;} </style> </head> <body> Texto en <span>negrita</span> </body> </html>
Solución:
Texto en negrita
La propiedad de estilo font-weight (textualmente, el tamaño o la importancia de la fuente) se define
a bold (más grueso, es decir, en negrita). Esta propiedad CSS aplica a las etiquetas <span>.
La propiedad completa span { font-weight: bold;} escribirá todas las etiquetas <span> del documento
en negrita.
8.2. Cursiva
Es posible escribir un texto en cursiva con las hojas de estilo CSS sin tener que recurrir a la etiqueta <i>.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .cursiva {font-style: italic;} </style> </head> <body> Texto en <span class="cursiva">cursiva</span> </body> </html>
Solución: Texto en cursiva
Aquí la propiedad de estilo font-style (el estilo de la fuente) se pone a italic (en cursiva). Esta
propiedad CSS aplica a las etiquetas con un atributo de clase que hemos definido class="cursiva". La
propiedad completa .cursiva { font-style: italic;} escribirá todas las etiquetas del documento con el
atributo class="cursiva" en cursiva.
8.3. Tamaño de letra
Con la eliminación de la etiqueta <font> y de su atributo size, el tamaño de la fuente se define únicamente mediante la propiedad de estilo CSS font-size.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
30
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #grande { font-size: 36px;} </style> </head> <body> <div id="grande">Texto en grande</div> </body> </html>
Texto en grande
El tamaño de la fuente (font-size) se fija a 36 píxeles (36px). No aplicará más que a la
etiqueta <div> identificada por el id="grande".
8.4. Color del texto
Con la eliminación del atributo color de la etiqueta <font>, el color del texto se define mediante la propiedad de estilo CSS color.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> h1 {color: red;} </style> </head> <body> <h1>Título en rojo</h1> </body> </html>
Solución: Titulo en rojo
Las etiquetas <h1> escribirán su texto en color (color) rojo (red).
8.5. Alineación
La alineación del texto se realiza mediante la propiedad de estilo CSS text-align.
Esta propiedad permite realizar una alineación, como en el más básico de los procesadores de texto.
text-align: left; Texto alineado a la izquierda (valor por defecto).
right; Texto alineado a la derecha.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
31
center; Texto centrado.
justify; Texto justificado.
auto; Alineación por defecto.
La justificación del texto, que proporciona a cada línea de texto la misma anchura, provoca en ocasiones efectos inesperados en pantalla, incluso decepcionantes. Las opiniones difieren en lo que a legibilidad respecta.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #centrado {text-align: center;} </style> </head> <body> <div id="centrado">Texto alineado al centro</div> </body> </html>
8.6. Alineación vertical
Esta propiedad determina la alineación vertical del texto respecto a otros elementos del código.
vertical-align: baseline; (valor por defecto en la línea base del texto). sub; (por debajo de la línea base) super; (por encima de la línea base) top; (arriba) middle; (medio) bottom; (abajo) sin definir. valor de longitud. porcentaje.
Comentarios
Los valores baseline, sup y super se usan respecto a una línea de texto. El valor baseline alinea el texto respecto a la parte inferior de la línea de texto (línea de
base). El valor sub escribe el texto con formato de subíndice, normalmente por debajo de la
línea de base. El valor super escribe el texto con formato de superíndice o exponente, normalmente por
encima de la línea de base.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
32
La alineación sin definir, con valor de longitud o con porcentaje deja que el navegador gestione la visualización.
Los valores top, middle, bottom alinean el texto respecto al elemento padre, que puede ser un texto o incluso las celdas de una tabla.
El valor top realiza la alineación respecto a la parte superior del elemento padre. El valor middle realiza la alineación respecto a la parte intermedia del elemento padre. El valor bottom realiza la alineación respecto a la parte inferior del elemento padre. Un valor de longitud positivo alinea el texto por encima de la línea de base. Un valor
negativo lo hace por debajo. Por ejemplo, vertical-align: 1.7em escribirá el texto en superíndice situado a 1.7 em.
Un porcentaje positivo alinea el texto por encima de la línea de base. Un valor negativo lo hace por debajo. Por ejemplo,vertical-align: -20% escribirá un subíndice situado al 20%.
Ejemplo 1
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .align1 { vertical-align:super;} .align2 { vertical-align:baseline;} .align3 { vertical-align:sub;} </style> </head> <body> <h2>Recursos <i class="align1">Informáticos</i></h2> <h2>Recursos <i class="align2">Informáticos</i></h2> <h2>Recursos <i class="align3">Informáticos</i></h2> </body> </html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
33
Ejemplo 2
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> table { border: 1px solid gray; border-collapse: collapse; width: 200px;} td { border: 1px solid gray; width: 100px;} .top { vertical-align:top;} .middle { vertical-align: middle;} .bottom { vertical-align: bottom;} </style> </head> <body> <table> <tr> <td><br> </td> <td class="top">texto</td> </tr> <tr> <td><br> </td> <td class="middle">texto</td> </tr> <tr> <td><br> </td> <td class="bottom">texto</td> </tr> </table> </body> </html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
34
8.7. Subrayado
En la red, el subrayado es la convención adoptada para señalar un enlace. Cualquier otro subrayado del texto puede inducir a error a su visitante. Por ello debería evitarse, incluso prohibirse, a la hora de escribir código Html.
La eliminación de la etiqueta de subrayado del texto <s> es un buen ejemplo.
No obstante sigue siendo posible subrayar un texto mediante una propiedad de estilo.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .subrayado { text-decoration: underline;} </style> </head> <body> Texto <span class="subrayado">subrayado</span> </body> </html>
Solución:
Texto subrayado
La propiedad de estilo indica que la decoración del texto (text-decoration) es un subrayado
(underline).
Esta propiedad permite personalizar la apariencia del texto, por ejemplo, mediante el subrayado o el subrayado por encima.
text-decoration: underline. Subraya el texto (por debajo).
overline. Subraya el texto por encima.
line-through. Traza una línea sobre el texto, en su mitad (tachado).
none. Quita cualquier apariencia definida anteriormente.
Comentarios
Nada nos impide definir varios valores de decoración. Basta con separarlos mediante un espacio, por ejemplo: text-decoration: underline overline;. En este caso, el texto aparecerá subrayado al mismo tiempo por debajo y por encima.
El valor line-through es particularmente útil en aquellos sitios comerciales que quieren destacar una revisión en los precios.
Aplicada a una etiqueta de enlace (<a>), la declaración de estilo text-decoration: none; suprimirá el subrayado por defecto en los enlaces. Este es, probablemente, su principal uso.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
35
No use, sino muy ocasionalmente, el subrayado en el diseño de sus páginas y aplicaciones Html5 ya que el subrayado en la Web indica, por convención, un enlace.
El valor blink que hacía parpadear el texto ha desaparecido en la especificación CSS3.
Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .deco1 { text-decoration: overline;} .deco2 { text-decoration: underline;} .deco3 { text-decoration: underline overline;} .deco4 { text-decoration: line-through;} </style> </head> <body> <p class="deco1">Texto con subrayado superior</p> <p class="deco2">Texto con subrayado inferior</p> <p class="deco3">Texto con subrayado inferior y subrayado superior</p> <p class="deco4">Texto tachado</p> </body> </html>
8.8. Transformación
Esta propiedad muestra un texto en mayúsculas o en minúsculas, independientemente de la forma en que aparezcan los caracteres en el código fuente.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
36
text-transform: capitalize. Escribe la primera letra de cada palabra en mayúsculas. uppercase. Escribe todas las letras en mayúsculas. lowercase. Escribe todas las letras en minúsculas. none. Deja las letras sin modificación alguna.
Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .transformacion1 { text-transform: capitalize;} .transformacion2 { text-transform: uppercase;} .transformacion3 { text-transform: lowercase;} </style> </head> <body> <h2 class="transformacion1">texto en minúsculas</h2> <h2 class="transformacion2">texto en minúsculas</h2> <h2 class="transformacion3">TEXTO EN MAYÚSCULAS</h2> </body> </html>
Comentario
Si esta propiedad no parece tener una utilidad evidente en lo que respecta a la edición, será muy apreciada para formatear los datos destinados a, o provenientes de, una base de datos.
8.9. Indentación
Esta propiedad permite indentar la primera línea del texto en un párrafo.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
37
text-indent: valor preciso (por ejemplo 20px) o bien
valor relativo en porcentaje respecto al ancho del párrafo.
Este ligero desplazamiento, que no estaba previsto en Html, se obtenía mediante la repetición en
el código fuente de varios espacios ( ).
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style type="text/css">
.indentacion { text-indent: 30px;}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Sed non risus. Suspendisse lectus...
</p>
<p class="indentacion">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Sed non risus. Suspendisse lectus...
</p>
</body>
</html>
Comentario
El valor de indentación puede ser negativo. Esto permite obtener efectos no esperados y el resultado no siempre está garantizado.
8.10. Separadores horizontales
El trazo horizontal puede ser muy útil para definir un cambio en el contenido. La etiqueta <hr>realiza esta función.
Ejemplo
<!DOCTYPE html> <html lang="es">
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
38
<head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Capítulo 1 <hr> Capítulo 2 </body> </html>
Por defecto esta línea horizontal ocupa toda la longitud de la ventana del navegador. Los diseñadores prefieren a menudo reemplazar este trazo, muy básico en su aspecto
estético, por una imagen gráficamente más elaborada. Todos los atributos align, noshade, size, width, deprecados (deprecated) en Html 4.0, ya no
existen en Html5. Es preciso usar hojas de estilo para determinar la alineación, el tamaño y la longitud.
Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> hr { text-align: center; height: 3px; background-color: black; width: 100px;} </style> </head> <body> Capítulo 1 <hr> Capítulo 2 </body> </html>
Solución:
Capítulo 1
_________________
Capítulo 2
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
39
8.11. Columnas múltiples
Presentar un contenido en varias columnas, como con Adobe InDesign, es otra novedad de las hojas de estilo CSS3.
column-count: Valor entero que determina el número de columnas en las que se va a visualizar el contenido del elemento.
column-width: Valor que describe el ancho óptimo de cada columna (opcional). column-gap: Valor que determina el espacio o el padding entre dos columnas. column-rule: Define un borde entre las columnas.
A día de hoy las columnas múltiples no están implementadas en Internet Explorer 9 ni en Opera 10.6. Únicamente Firefox 3+, Safari 3.1+ y Chrome 4+ permiten realizar esta composición aunque haciendo uso de los prefijos -moz y -webkit.
-moz-column-count: -moz-column-width: -moz-column-gap: -moz-column-rule:
-webkit-column-count: -webkit-column-width: -webkit-column-gap: -webkit-column-rule:
Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #box { width: 420px; height: 240px; text-align: justify; column-count: 2; column-gap: 2em; column-rule: 1px solid silver; -moz-column-count: 2; -moz-column-gap: 2em; -moz-column-rule: 1px solid silver; -webkit-column-count: 2; -webkit-column-gap: 2em; -webkit-column-rule: 1px solid silver;} </style> </head> <body> <div id="box"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit in amet, adipiscing nec, ... </div> </body> </html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
40
9. HOJAS DE ESTILO (CSS3)
9.1. Fondos múltiples
Las hojas de estilo CSS3 hacen posible visualizar varias imágenes en un mismo plano de fondo, y permiten acumular valores en las propiedades background-image, background-position y background-repeat (Parte CSS3 - Fondos).
Este efecto no era posible sino superponiendo divisiones <div> definidas con posición absoluta, un poco a la manera de los calcos en las aplicaciones gráficas.
Todos los navegadores de nuestro estudio implementan los fondos múltiples: Internet Explorer 9, Firefox 3.6+, Opera 10.1+, Safari 4+ y Chrome 4+.
Ejemplo
Tomemos las imágenes flores1.png, flores2.png, flores3.png y flores4.png:
<!DOCTYPE html> <html lang="es"> <head>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
41
<title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> #box { width: 300px; height: 200px; border: 1px solid gray; background: url(flores1.png) top left no-repeat, url(flores2.png) top right no-repeat, url(flores3.png) bottom right no-repeat, url(flores4.png) bottom left no-repeat;} </style> </head> <body> <div id="box"></div> </body> </html>
9.2. Opacidad y transparencia
Con las hojas de estilo CSS3 es posible variar la opacidad o la transparencia de un elemento.
Esta propiedad ha sido adoptada desde bien temprano y es compatible con Firefox 1+, Safari 1+, Chrome 1+ y Opera 9+.
No hay que preocuparse por los prefijos -moz y -webkit.
opacity: Valor comprendido entre 1 y 0. Con el valor 1, la opacidad es completa y la transparencia nula. Con 0, la opacidad es nula y el elemento completamente transparente.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
42
Comentarios
El resultado de la propiedad opacity está muy próximo al de la notación de color RGBa con transparencia. No obstante hay que destacar que la propiedad opacity se aplica al elemento íntegro, y a todos sus descendientes. RGBa solamente se aplica al elemento seleccionado.
El elemento dotado de la propiedad opacity es translúcido, y deja entrever el elemento que se encuentra situado por debajo de él (ver los ejemplos a continuación).
Internet Explorer no implementa la propiedad opacity. Es preciso pasar por el filtro alpha, propietario de Microsoft.
filter:alpha(opacity=x) donde x es un valor comprendido entre 100 y 0.
Ejemplo 1
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<body>
<img src="flor.png" style="opacity: 1;
filter:alpha(opacity=100)">
<img src="flor.png" style="opacity: 0.6;
filter:alpha(opacity=60)">
<img src="flor.png" style="opacity: 0.3;
filter:alpha(opacity=30)">
</body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
43
Ejemplo 2
Ilustremos la translucidez.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style type="text/css">
div.background { width: 250px; height: 108px;
background:url(blue.png);
border: 2px solid black;}
div.box { width: 200px; height: 60px;
margin: 24px 25px;
border: 1px solid black;
background-color: #ffffff;
filter: alpha(opacity=50);
opacity: 0.5;
text-align: center;}
</style>
</head>
<body>
<p></p>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
44
<div class="background">
<div class="box">
<h2>Lorem ipsum dolor</h2>
</div>
</div>
</body>
</html>
Ejemplo 3
Es tentador modificar la opacidad de la imagen cuando se pase el cursor del ratón sobre ella.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<body>
<img src="invierno.jpg" style="opacity: 0.4;
filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1; this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;
this.filters.alpha.opacity=40">
</body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
45
En un primer instante la imagen se muestra con una opacidad de 0.4. Al pasar por encima el cursor
del ratón (onmouseover) ésta se muestra con una opacidad máxima. Cuando se retira el cursor de
la misma (onmouseout) la imagen vuelve a su estado inicial con una opacidad de 0.4.
10. ENLACES
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
46
10.1. Insertar un enlace
Los enlaces constituyen la esencia del lenguaje Html y de las páginas Web.
La etiqueta <a> ... </a> inserta un enlace.
Su sintaxis básica es: <a href="destino_del_enlace">Texto del enlace</a>
El destino del enlace puede ser:
Un lugar de la página en curso. Otra página del sitio Web. Algún lugar de otra página del sitio web. Una página de otro sitio existente en la Web. Una dirección de correo electrónico. Un archivo para descargar.
La etiqueta de enlace tiene varios atributos:
href
El atributo href define la dirección (url) del destino del enlace.
ping
Es nuevo en Html5. El atributo ping puede contener una lista de direcciones url (separadas por espacio) que reciben una notificación cuando el usuario sigue el enlace. <a href="html5.htm" ping="http://www.misitioweb.com/data/visitas.php">Html5</a>
El navegador nos enviará una petición POST a la dirección url especificada en el atributo. Este nuevo atributo va a ser particularmente útil para realizar las estadísticas de un sitio Web. En el caso anterior, nos permitirá conocer el número de visitantes de la parte dedicada a Html5.
target
Especifica al navegador la forma de visualizar el destino del enlace. Puede ser en una nueva instancia o en una nueva pestaña del navegador (target="_blank"), en la misma ventana de la página de origen del enlace (target="_self") y en la misma ventana pero ocupando toda la ventana del navegador. type Indica al navegador el tipo MIME del destino si no se trata de un documento Html5, por ejemplo un archivo de sonido o una imagen. Los atributos Html 4.0 siguientes han desaparecido de la especificación Html5: charset, coords, name, rev y shape. El atributo que se usaba con mayor frecuencia era el atributo name para definir las anclas en el interior de un documento
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
47
10.2. Enlaces a una página situada en la misma carpeta
Los primeros enlaces que se realizan apuntan a otra página situada en el sitio Web (dirección relativa). Para crear un sitio Web, se aconseja agrupar todos los archivos relativos al sitio en una única carpeta, que podrá contener subcarpetas.
Pero la dirección relativa causará problemas en el caso de tener una organización de archivos compleja.
Comenzaremos por el caso más sencillo. Supongamos dos archivos (pagina1.htm y pagina2.htm) situados en la misma carpeta.
Insertemos en la página 1 un enlace hacia la página 2.
El código del enlace en la página 1 es:
<a href="pagina2.htm">Enlace hacia la página 2</a>
Es imprescindible respetar las mayúsculas y minúsculas en el nombre del archivo y evitar los espacios,
para que no se produzcan errores de interpretación en los distintos entornos Web.
10.3. Enlaces a una página situada en otra carpeta
En ocasiones, no es posible alojar todos los archivos en una única carpeta. Para estructurar el sitio, es posible tener en la misma carpeta de origen varias subcarpetas. En este caso, se le indicará la ruta de acceso al archivo. Veamos una situación en la que la carpeta de origen (raíz) contiene:
- un archivo indice.htm,
- una subcarpeta carpeta1 con el archivo pagina1.htm y
- - otra subcarpeta carpeta2 con el archivo pagina2.htm. Esta organización arborescente nos permitirá abordar varios casos.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
48
a. Enlace desde indice.htm hacia pagina1.htm
El código de indice.htm es:
<a href="carpeta1/pagina1.htm">Texto del enlace</a>
Comentarios
El archivo indice.htm y la carpeta carpeta1 se sitúan en el mismo nivel de la arborescencia. Una vez en carpeta1, basta con "descender" hasta pagina1.htm. Observe que es preciso usar la barra oblicua / y no la barra inversa \ que encontramos en ocasiones en Windows.
b. Enlace desde pagina1.htm hacia pagina2.htm
El código en pagina1.htm es:
<a href="../carpeta2/pagina2.htm">Texto del enlace</a>
Comentarios
Para ir desde pagina1.htm hacia pagina2.htm es preciso en primer lugar subir un nivel para salir de carpeta1. Para subir un nivel se utiliza la notación "../". Una vez hemos subido un nivel, hay que descender a carpeta2 y, una vez en carpeta2, descender para llegar a pagina2.htm.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
49
c. Enlace desde pagina2.htm hacia indice.htm
El código en pagina2.htm es: <a href="../indice.htm">Texto del enlace</a>
Comentarios
Para ir de pagina2.htm hacia indice.htm es preciso en primer lugar subir un nivel en la arborescencia para salir de carpeta2, de ahí la notación "../". Descendiendo llegamos directamente a indice.htm.
10.4. Enlaces al interior de una página
En una página de cierta importancia, generalmente de tipo texto, es interesante poder llevar al usuario a un lugar concreto del documento. Se utiliza la técnica de las anclas (anchor) o puntos de fijación.
Este enlace al interior de la página se realiza en dos tiempos:
La declaración del ancla. El enlace hacia el ancla.
Declaración del ancla
Las anclas van a definir un lugar en la página, lo que permitirá después hacer un enlace hacia ella. La sintaxis de creación de un ancla es: <a id="nombre del ancla"></a>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
50
Con la desaparición del atributo name en Html5, la declaración de anclaje se realiza mediante un identificador id. Este ya era el caso en Xhtml 1.0.
El ancla no se visualiza en el navegador.
Enlace hacia un ancla situada en la misma página
Tras haber definido el ancla, basta con efectuar un enlace hacia ella.
Para crear el enlace, se escribe del siguiente modo:
<a href="#nombre del ancla">Texto del enlace</a>
Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <a href="#capitulo2">Ir al capítulo 2</a> <h3>Capítulo 1</h3> <p>...</p> <h3>Capítulo 2</h3> <a id="capitulo2"></a> <p>Contenido del capítulo 2</p> </body> </html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
51
10.5. Enlace hacia un ancla situada en otra página
El principio es el mismo aunque habrá que definir también la dirección (relativa o absoluta) de la página.
Ejemplo
A partir del archivo indice.htm, efectuamos un enlace hacia un ancla en el archivo pagina1.htm de la
subcarpeta carpeta1.
Tras haber incluido el ancla, <a id="ancla"></a>, en el archivo pagina1.htm, el enlace en el archivo
indice.htm queda:<a href="carpeta1/pagina1.htm#ancla”>Texto del enlace</a>
10.6. Enlaces a otro sitio Un enlace puede hacer referencia a páginas de otros sitios situados en otra dirección en la Web. El destino indicado en la etiqueta de enlace será la dirección completa del sitio o de la página. Hablamos de direccionamiento absoluto.
Por ejemplo:
<a href="http://www.w3.org/standards/index.htm">Enlace</a>
Precisemos que se trata de la dirección completa, con la mención explícita del protocolo http://.
En efecto, con los navegadores recientes, esta mención la ignoran gran parte de los usuarios.
10.7. Enlace a una dirección email
Para agregar cierto componente de interacción, es interesante permitir a los visitantes de su sitio la posibilidad de contactar por correo electrónico. El destino en la etiqueta de enlace será entonces una dirección de correo electrónico, precedida del protocolo de correo electrónico (mail), es decir mailto: (con dos puntos solamente). <a href="mailto: [email protected]”>El autor</a> La activación del enlace abrirá una ventana de la aplicación de correo electrónico configurada por defecto en el puesto del visitante. Por ejemplo, Microsoft Outlook. Si bien no se trata de código Html propiamente dicho, es posible predefinir el asunto del mensaje o incluir el envío de una copia a otro destinatario. Para predefinir el asunto del e-mail:
<a href="mailto:[email protected]?subject=Formación Html5">Ediciones ENI</a> donde el contenido de subject es el asunto (predefinido). En nuestro ejemplo es "Formación Html5".
Para incluir el envío de una copia a otro destinatario: <a ref="mailto:[email protected][email protected]">Ediciones ENI</a> donde el contenido de cc es la dirección de correo electrónico del destinatario de la copia.
Para combinar las dos posibilidades: <a href="mailto:[email protected]?subject=Formación Html5&[email protected]">Ediciones ENI</a>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
52
Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <a href="mailto:[email protected]?subject=Formación Html5&[email protected]">Ediciones ENI</a> </body> </html>
10.8. Enlaces para descargar un archivo
Para permitir la descarga de un archivo, basta con especificar el nombre del mismo (con su extensión). Este modo de proceder es válido siempre que el archivo Html y el archivo ofrecido para su descarga estén situados en la misma carpeta o subcarpeta. Para un archivo "formacion.pdf" situado en la misma carpeta, el código es: <a href="formacion.pdf">Versión en PDF</a> Si en el ordenador del visitante no hay ninguna aplicación instalada para leer los archivos pdf (Adobe Acrobat Reader por ejemplo), el navegador abre una ventana que invita a descargar el archivo. Por el contrario, si la aplicación Adobe Acrobat Reader está presente en el puesto del visitante, el navegador abre la aplicación y muestra el archivo. Pasará igual para el resto de tipos de archivo. Cuando no existe una aplicación definida por defecto para la extensión del archivo, el navegador descarga el archivo, tras haber mostrado la ventana que invita a la descarga.
10.9. Enlaces hacia una ventana específica
Las páginas de destino de un enlace pueden abrirse en ventanas específicas gracias al atributo target.
Veamos las distintas posibilidades:
target="_self" (por defecto). La página de destino se abre en la misma ventana que la página de origen del enlace.
target="_top". La página de destino del enlace se abre en la misma ventana pero ocupará la totalidad de la ventana mostrada. En este punto de nuestro estudio, self y top tienen un efecto equivalente.
target="_blank". La página de destino del enlace se abre en una nueva instancia o en una nueva pestaña del navegador.
Ilustremos este atributo target, y especialmente target="_blank".
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
53
En el archivo Página 1:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
Ir a <a href="pagina2.htm" target="_blank">Página 2</a>
</body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
54
10.10. Descripción acerca del enlace
El atributo title="texto" (que no es específico a la etiqueta del enlace) permite mostrar una descripción explicativa sobre el enlace cuando se pasa por encima el cursor del ratón. Este pequeño "extra" en ergonomía se aprecia especialmente, en términos de accesibilidad, por las interfaces vocales que guían a los internautas invidentes.
<a href="pagina2.htm" title="Enlace al capítulo 2">Sigue</a>
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<a href="pagina2.htm" title="Enlace al capítulo 2">Sigue</a>
</body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
55
11. TABLAS
11.1. Creación de una tabla
Una tabla (<table>) se compone de filas <tr>. Estas filas contienen celdas <td>.
La distribución de las distintas etiquetas para mostrar una tabla sigue la lógica que se ilustra en el siguiente ejemplo:
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body> </html>
La tabla en Html se construye así:
Comentarios
Esta etiqueta, básica en Html, es compatible con todos los navegadores. La etiqueta <table> debe cerrarse obligatoriamente. En caso de que nos olvidemos la
etiqueta de cierre </table>, corremos el riesgo de que la tabla no muestre todo su contenido o de que no se muestre correctamente.
11.2. Ancho de la tabla
El ancho de la tabla se define mediante la propiedad de estilo CSS width (ancho).
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
56
Ejemplo
El código anterior para una tabla de 250 píxeles es:
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { width: 250px;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body> </html>
También es posible determinar la altura de la tabla mediante la propiedad de estilo height.
<style> table { height: 150px;} </style>
11.3. Bordes de la tabla
Los bordes de una tabla y otros elementos Html se introducen mediante la propiedad de estilo CSS border (que significa borde).
Para obtener los bordes clásicos de una tabla, la declaración es un poco particular.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
57
Nuestro objetivo es agregar un borde de 1 píxel (1px), de color negro (black) con un trazo sólido (solid).
Además de agregar un borde a la tabla (table), hay que agregar el borde a las celdas <td> que
componen la tabla y eliminar un espacio entre el borde de la tabla y los bordes de las celdas.
Para reducir ambos bordes a uno solo, se usa la propiedad de estilo border-collapse.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body> </html>
Existen otras formas de bordes en CSS.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
58
11.4. Alineación de la tabla
La tabla está, en este caso, alineada a la izquierda. Para obtener una alineación centrada, hay que usar cierta argucia. El hecho de incluir un margen (margin) automático a izquierda (left) y derecha (right) de la tabla provoca la alineación centrada.
Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { margin-left: auto; margin-right: auto; border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
59
11.5. Alineación de las celdas de la tabla
El contenido de las celdas está, en nuestro caso, alineado a la izquierda. Será más estético centrarlo (center) en las celdas. Para ello se usa la propiedad de estilo text-align.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style>
table { text-align: center;
border: 1px solid black;
border-collapse: collapse;
width: 250px;}
td { border: 1px solid black;}
</style>
</head>
<body>
<table>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>
</body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
60
Comentario
Con text-align: center aplicado a la tabla (<table>), todas las celdas de la tabla mostrarán el contenido centrado dentro de ellas.
11.6. Celdas de la tabla
Las celdas pueden contener cualquier elemento definido en Html, bien sea un texto, imágenes, un enlace, un fondo e incluso otra tablas.
En Html5 han desaparecido los atributos width, height, align, valign, abbr, axis y scope de Html 4.0.
11.6.1. Ancho de las celdas
Por defecto, el navegador adapta el ancho de las celdas según su contenido.
Vea el siguiente ejemplo de una tabla con tres columnas sin especificaciones particulares.
Habrá que recurrir a la propiedad de estilo width, pero aplicada en esta ocasión a la etiqueta <td>, para uniformar el ancho de las celdas.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style>
table { border: 1px solid black;
border-collapse: collapse;
width: 250px;}
td { border: 1px solid black;
width: 33%;}
</style>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
61
</head>
<body>
<table>
<tr>
<td>Celda 1</td><td>Cel 2</td><td>3</td>
</tr>
<tr>
<td>Celda 4</td><td>Cel 5</td><td>6</td>
</tr>
</table>
</body>
</html>
11.6.2. Alineación horizontal
El contenido de una celda puede alinearse a la izquierda, centrado o a la derecha. El resultado se obtiene mediante la propiedad de estilo text-align aplicada a una celda. La propiedad text-align puede tomar los valores left (izquierda), center (centrado) o right (derecha). El valor por defecto es left.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style>
table { border: 1px solid black;
border-collapse: collapse;
width: 290px;}
td { border: 1px solid black;
width: 33%;}
</style>
</head>
<body>
<table>
<tr>
<td style="text-align: left;">Producto 1</td>
<td style="text-align: center;">En stock</td>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
62
<td style="text-align: right;">3.43 €</td>
</tr>
<tr>
<td style="text-align: left;">Producto 2</td>
<td style="text-align: center;">En pedido</td>
<td style="text-align: right;">6.72 €</td>
</tr>
</table>
</body>
</html>
Aquí, la propiedad de estilo se ha aplicado directamente en el código de la etiqueta <td> mediante
style="text-align: xxx;" (estilo en línea).
11.6.3. Alineación vertical
Por defecto, la alineación vertical del contenido de una celda se realiza en la mitad de la celda. Esto puede provocar situaciones poco estéticas a la hora de elaborar su tabla.
Es prudente prever una alineación vertical hacia la parte superior mediante la propiedad de estilo vertical-align:top aplicada a las celdas <td>.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
63
table { border: 1px solid black;
border-collapse: collapse;
width: 140px;}
td { border: 1px solid black;
vertical-align:top;}
</style>
</head>
<body>
<table>
<tr>
<td style="width: 10%;">1</td>
<td>xxxxx xxxxx xxxxx xxxxx xxxxx</td>
</tr>
<tr>
<td style="width: 10%;">2</td>
<td>xxxxx xxxxx</td>
</tr>
<tr>
<td style="width: 10%;">3</td>
<td>xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx</td>
</tr>
</table>
</body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
64
11.6.4. Margen interior de las celdas
En nuestras capturas de pantalla, el contenido de la celda está pegado al borde de la misma. Esto no resulta muy estético y ensucia la legibilidad de los datos. La propiedad de estilo padding permite agregar un espacio entre el contenido de la celda y el borde de la misma.
Es importante distinguir el margen exterior, llamado margin, del margen interior designado por el vocablo padding.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style>
table { border: 1px solid black;
border-collapse: collapse;
width: 250px;}
td { border: 1px solid black;
padding: 15px;}
</style>
</head>
<body>
<table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>
</body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
65
Destacamos el hecho de que la propiedad de estilo padding ha agregado espacio por todo alrededor
del contenido de la celda. Es posible agregar solamente un espacio entre el borde izquierdo y el
contenido mediante la propiedad padding-left.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style>
table { border: 1px solid black;
border-collapse: collapse;
width: 250px;}
td { border: 1px solid black;
width: 33%;}
</style>
</head>
<body>
<table>
<tr>
<td>Celda 1</td><td>Cel 2</td><td>3</td>
</tr>
<tr>
<td>Celda 4</td><td>Cel 5</td><td>6</td>
</tr>
</table>
</body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
66
11.6.5. Color de fondo
Tras la desaparición del atributo bgcolor, agregar un color de fondo se hace mediante la propiedad de estilo background-color.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style>
table { text-align: center;
border: 1px solid black;
border-collapse: collapse;
width: 250px;}
td { border: 1px solid black;}
.color { background-color: #99ccff;}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td class="color">2</td>
</tr>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
67
<tr>
<td>3</td>
<td class="color">4</td>
</tr>
</table>
</body>
</html>
Esta propiedad de estilo de color de fondo background-color también puede aplicarse a las etiquetas <table> y <tr>.
11.6.6. Fusión de celdas
Es posible fusionar horizontalmente o verticalmente las celdas. Partiendo de una tabla con dos filas y tres columnas:
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
68
<tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </body> </html>
A. Fusión de columnas
Para fusionar columnas, Html5 proporciona el atributo de celda colspan="x" donde x se corresponde con el número de columnas que se desea fusionar.
Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <tr> <td colspan="3" style="text-align: center;">Título de la tabla</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
69
</table> </body> </html>
B. Fusión de filas
Para fusionar filas, Html5 proporciona el atributo de celda rowspan="x" donde x se corresponde con el número de filas que se desea fusionar verticalmente.
Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <tr> <td rowspan="2">1</td> <td>2</td> <td>3</td> </tr> <tr> <td>5</td> <td>6</td>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
70
</tr> </table> </body> </html>
Comentario
Se ha fusionado la primera columna de dos filas. Observe la alineación vertical por defecto, centrada.
11.6.7. Celdas de encabezado
Las celdas de encabezado de columnas o de filas se definen mediante la etiqueta <th> ... </th>. Estas celdas proporcionan, de algún modo, título a los datos de la columna o de la fila.
Su apariencia puede modificarse mediante las hojas de estilo CSS.
Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <tr> <th>Atributo</th> <th>Función</th> </tr> <tr> <td><i>colspan</i></td>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
71
<td>Para fusionar columnas</td> </tr> <tr> <td><i>rowspan</i></td> <td>Para fusionar filas</td> </tr> </table> </body> </html>
11.7. Leyenda de la tabla
La etiqueta <caption> permite asociar un título o una leyenda a la tabla. Debe situarse justo después de la etiqueta de apertura <table> y debe aparecer una sola vez en la tabla.
Por defecto, la mayoría de navegadores visualizan el contenido de la etiqueta <caption> de forma centrada y sobre la tabla. Es posible situar esta leyenda debajo de la tabla con ayuda de la propiedad de estilo CSS caption {caption-side: bottom}.
Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <caption>Leyenda de la tabla</caption>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
72
<tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </body> </html>
11.8. Agrupar columnas
La etiqueta <colgroup> se usa para agrupar columnas con el objetivo de aplicar el mismo formato al conjunto de etiquetas del grupo mediante una hoja de estilo CSS.
El atributo span="x" determina el número de columnas así agrupadas. Por defecto, el valor de x es 1. El atributo span es el único atributo de la etiqueta<colgroup>. Los atributos align, valign, width de Html 4.0 han desaparecido.
Por otro lado, la etiqueta <colgroup> se posiciona justo tras la etiqueta <table> (o justo tras la etiqueta<caption> si se está usando) y delante de cualquier etiqueta <tr> o <td>.
Por definición, la etiqueta <colgroup> solamente se aplica para las tablas.
Ejemplo 1
He aquí una tabla de tres filas y tres columnas. Se aplica un color de fondo y una alineación centrada a las dos primeras columnas.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
73
<meta charset="iso-8859-1"> <style>
table { border: 1px solid black;
border-collapse: collapse;
width: 250px;}
td { border: 1px solid black;}
colgroup { background-color : #99ccff;
text-align: center;}
</style>
</head>
<body>
<table>
<colgroup span="2"></colgroup>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td>7</td><td>8</td><td>9</td>
</tr>
</table>
</body>
</html>
Ejemplo 2 Si deseamos agrupar las dos últimas columnas, es preciso declarar varias etiquetas <colgroup>.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style>
table { border: 1px solid black;
border-collapse: collapse;
width: 250px;}
td { border: 1px solid black;}
#columnas { background-color : #99ccff;
text-align: center;}
</style>
</head>
<body>
<table>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
74
<colgroup span="1"></colgroup>
<colgroup id="columnas" span="2"></colgroup>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td>7</td><td>8</td><td>9</td>
</tr>
</table>
</body>
</html>
11.9. Estructuración de la tabla
Html5 proporciona etiquetas para estructurar de forma lógica el contenido de una tabla.
Estas etiquetas son:
<thead> para agrupar la información referente al encabezado de la tabla, como por ejemplo el título y el subtítulo de las columnas.
<tbody> para el cuerpo de la tabla, es decir el conjunto de datos de la misma. <tfoot> para el contenido del pie de página, como por ejemplo anotaciones o una
leyenda.
Esta división lógica no afecta en nada a la presentación por defecto de la tabla, aunque puede retomarse en las propiedades de estilo para adornar la presentación de la tabla.
Destaquemos que la etiqueta <tfoot> debe situarse antes de la etiqueta <tbody> de modo que el navegador pueda prever el pie de página antes de la recepción de las filas con los datos.
Ejemplo
Apliquemos estas etiquetas a una tabla.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
75
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <thead> <tr> <td colspan="2" style="text-align: center;">Fusión de filas y columnas</td> </tr> </thead> <tfoot> <td colspan="2" style="text-align: center;">W3C Working Draft 24 June 2010</td> </tfoot> <tbody> <tr> <td><i>colspan</i></td> <td>Para fusionar columnas</td> </tr> <tr> <td><i>rowspan</i></td> <td>Para fusionar filas</td> </tr> </tbody> </table> </body> </html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
76
12. PROPIEDADES DE CAJA
12.1. Concepto de modelo de caja o bloque
El elemento caja es una noción importante en CSS. Es importante captar bien esta noción, algo abstracta, para comprender el posicionamiento (capítulo Propiedades de visualización - Posicionamiento).
Este elemento caja también se llama contenedor o bloque (block).
El W3C define un elemento caja como una zona rectangular constituida por:
- un contenido,
- un margen interior (padding),
- un borde (border),
- y un margen exterior (margin).
Precisemos que:
El contenido puede ser, por ejemplo, el texto de un párrafo. Está rodeado por un espacio en torno al texto hasta los bordes del cuadro, que
llamaremos margen interior o interno. A continuación están los bordes del cuadro (opcionales). Por último existe un espacio que envuelve todo el conjunto, llamado margen exterior o
externo.
Las hojas de estilo extienden esta noción de caja y proporcionan al diseñador un control total sobre los márgenes interior y exterior, así como del borde.
Con las hojas de estilo CSS podremos, por ejemplo, regular de forma independiente:
Los cuatro márgenes exteriores en cualquier sentido, Los cuatro bordes (dimensión, estilo, color), Las cuatro márgenes interiores en cualquier sentido, Las dimensiones (anchura y altura) del contenido.
La principal fuente de confusión es que, tras haber precisado la anchura y/o la altura del contenido, no se ha definido de forma explícita la dimensión total del elemento caja, que comprende la dimensión del contenido, más el margen interior, más la dimensión del borde más el margen exterior.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
77
De este modo, la propiedad width aplicada al contenido (el pequeño rectángulo central) no es más que uno de los elementos de la dimensión del elemento caja, es preciso agregar el margen interior, el borde y el margen exterior para obtener el espacio total real del elemento caja.
Del mismo modo ocurre con la altura, determinada mediante la propiedad height.
La dimensión total del elemento caja se calcula del siguiente modo: contenido + márgenes interiores + bordes + márgenes exteriores.
Tomemos una caja con las propiedades siguientes:
anchura del contenido igual a 200 píxeles, margen interior de 20 píxeles, borde con una anchura de 10 píxeles, margen exterior de 20 píxeles.
La anchura del elemento caja es, en este caso, de 300 píxeles que se descomponen de la
forma siguiente (de izquierda a derecha): 20 píxeles de margen exterior + 10 píxeles para el borde +
20 píxeles de margen interior + 200 píxeles de contenido + 20 píxeles de margen interior + 10 píxeles
de borde + 20 píxeles de margen exterior. El total es, en efecto, 300 píxeles.
Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> p { width: 200px; border: 10px solid rgb(125,165,205); padding: 20px; margin: 20px; background-color: rgb(215,230,245); </style> </head> <body> <p>Noción de caja en CSS</p> </body> </html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
78
12.2. Elemento en bloque o en línea
Ya hemos abordado anteriormente la noción de elemento en bloque o en línea.
La propiedad de estilo display permite redefinir un elemento en línea como un elemento en bloque, y a la inversa.
display: inline; (en línea)
block; (de tipo bloque)
Esta propiedad es muy rica en posibilidades de presentación y se utiliza a menudo en hojas de estilo CSS complejas.
Ejemplo 1
Las nuevas etiquetas semánticas son elementos en línea. Para atribuirles una función de presentación, es preciso definirlas como elementos de tipo bloque. Apliquemos esta propiedad a la etiqueta <nav>.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> nav { display: block; width: 360px; border: 1px solid gray; background-color: rgb(215,230,245); padding-left: 4px;} a { text-decoration; none;} </style> </head> <body> <nav> <a>Inicio</a> |
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
79
<a>Productos</a> | <a>Soluciones</a> | <a>Puntos de venta</a> | <a>Contacto</a> </nav> </body> </html>
Ejemplo 2
Los items de las listas son elementos de bloque. Aparecen unos debajo de otros. Mediante la propiedad display: inline, es posible mostrarlos en pantalla en una única línea.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> ul { list-style: none ; padding: 5px;} li { display: inline; border: 1px solid gray; background-color: rgb(215,230,245); text-align: center; margin-right: 3px; padding-right: 15px; padding-left: 15px;} </style> </head> <body> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </body> </html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
80
12.3. Anchura y altura
Las propiedades de estilo width y height van a fijar respectivamente la anchura y la altura del elemento caja.
width: auto o bien
valor de longitud o bien
porcentaje
height: auto o bien
valor de longitud o bien
porcentaje
Comentarios
Los valores width y height especifican la anchura y la altura del contenido (sin márgenes interiores, sin bordes y sin márgenes exteriores).
El valor auto ajusta automáticamente la dimensión del contenido. El valor de longitud especifica un valor fijo. El porcentaje especifica un valor relativo.
Destacamos que en CSS 2 existen propiedades para determinar los tamaños mínimo y máximo de un elemento de tipo caja o un elemento reemplazado dinámicamente mediante JavaScript.
max-height:
min-height:
max-width:
min-width:
Fija la altura máxima
Fija la altura mínima
Fija la anchura máxima
Fija la anchura mínima
La propiedad max-height se utiliza generalmente de forma conjunta con la propiedad min-heightpara fijar un margen de maniobra en lo que respecta a la visualización de los elementos afectados. Este concepto también sirve para las propiedades max-width y min-width. Con la ayuda de estas propiedades CSS max-width y min-width, tendrá la posibilidad de controlar la anchura de
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
81
su diseño de forma que se adapte a cualquier resolución de pantalla de los visitantes de su sitio Web.
De este modo, si la anchura sobrepasa la anchura especificada por max-width, el navegador recalcula la anchura del elemento basándose en el valor de max-width. Del mismo modo, si la anchura es inferior a la de min-width, el navegador recalcula la anchura en función del valor determinado en min-width. El navegador procede de forma similar para las propiedades max-height y min-height.
Cabe destacar que las propiedades max-height, min-height, max-width y min-width no incluyen los márgenes interiores, los bordes ni los márgenes exteriores.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<p>width</p>
<div style= "border: 2px solid black;
width: 250px;">
xxx xxx xxx xxx xxx xxx xxx xxx
</div>
<p>min-width</p>
<div style="border: 2px solid black;
min-width: 250px;">
xxx xxx xxx xxx xxx xxx xxx xxx
</div>
<p>max-width</p>
<div style="border: 2px solid black;
width: 250px;
max-width: 150px;">
xxx xxx xxx xxx xxx xxx xxx xxx
</div>
</body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
82
Para la primera división, la anchura se ha fijado mediante width: 250px. En la segunda, ésta
se ha determinado mediante min-width: 250px. Como este valor mínimo no se ha alcanzado, la
división ocupa toda la anchura de la ventana. En la última división, la anchura responde al valor
máximo max-width: 150px.
12.4. Márgenes externos
Esta propiedad permite definir el margen exterior del elemento caja.
margin:
margin-top:
margin-right:
margin-bottom:
margin-left:
auto o bien
valor de longitud o bien
porcentaje
Comentarios
El valor auto deja al navegador la gestión de los márgenes externos. Un valor de longitud define con precisión los márgenes exteriores. Un porcentaje define la longitud respecto a un elemento padre. El margen exterior de cada lado del elemento caja puede definirse, igualmente, con
ayuda de las propiedades margin-top, margin-right, margin-bottom y margin-left. Las direcciones top, right, bottom, left diseñan, respectivamente, los bordes superior, derecho, inferior e izquierdo. Estas propiedades son especificaciones CSS2.
Es posible abreviar la escritura de las propiedades del margen externo margin-top,margin-right, margin-bottom y margin-left, informado uno, dos, tres o cuatro valores mediante la propiedad margin.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
83
Si se informa un único margen, se aplica a los cuatro lados.
Con dos márgenes, el primero se aplica a los lados superior e inferior. El segundo se aplica a los laterales (márgenes derecho e izquierdo).
Con tres valores, el primero se aplica al lado superior, el segundo a los márgenes laterales y el tercero al lado inferior.
Con cuatro márgenes, éstos se aplican en el sentido de las agujas del reloj partiendo del lado superior, es decir superior, derecho, inferior e izquierdo.
Los márgenes pueden definirse con valores negativos, lo que puede generar efectos visuales interesantes, aunque también existe el riesgo de que se interpreten de forma distinta según cada navegador.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style type="text/css">
.body { margin: 0px;}
.bloque { border: 1px solid black;
margin: 20px 20px 0px 20px;
text-align: center;}
</style>
</head>
<body>
<div class="bloque">
margen exterior
</div>
</body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
84
12.5. Márgenes internos
Esta propiedad permite definir el margen interior del elemento caja.
padding:
padding-top:
padding-
right:
padding-
bottom:
padding-left:
auto o bien
valor de longitud o bien
porcentaje
Comentarios
El valor auto deja al navegador la gestión para la visualización de los márgenes internos. Un valor de longitud define con precisión los márgenes interiores. Un porcentaje define la longitud respecto al elemento padre. El margen interior a cada lado del elemento caja puede definirse de forma individual
mediante las propiedades padding-top, padding-right, padding-bottom y padding-left. Las direcciones top, right, bottom, left indican respectivamente los bordes superior, derecho, inferior e izquierdo.
Es posible abreviar la escritura de las propiedades del margen interno padding-top,padding-right, padding-bottom y padding-left, informando uno, dos, tres o cuatro valores de la propiedad padding.
Si se informa un único margen, se aplica a los cuatro lados.
Con dos márgenes, el primero se aplica a los lados superior e inferior. El segundo se aplica a los laterales (márgenes derecho e izquierdo).
Con tres valores, el primero se aplica al lado superior, el segundo a los márgenes laterales y el tercero al lado inferior.
Con cuatro márgenes, éstos se aplican en el sentido de las agujas del reloj partiendo del lado superior, es decir superior, derecho, inferior e izquierdo.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
85
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style type="text/css">
.marge { width: 300px;
padding-left: 50px;
border: solid 1px gray;}
</style>
</head>
<body>
<div class="margen">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non
risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing
nec, ultricies sed, dolor. Cras elementum ultrices diam.
</div>
</body>
</html>
12.6. Color del borde
Estas propiedades de estilo permiten definir el color de los cuatro bordes del elemento caja o de cada borde tomado individualmente.
border-color:
border-top-color:
nombre del color o bien
notación hexadecimal en formato #rrggbb o bien
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
86
border-right-color:
border-bottom-color:
border-left-color:
notación hexadecimal abreviada en formato #rgb o bien
notación en formato RGB mediante enteros entre 0 y 255 o bien
notación en formato RGB con porcentajes entre 0% y 100% o bien
notación en formato RGBa donde a está comprendido entre 0 y 1 o bien
notación en formato HSL o bien
notación en formato HSLa donde a está comprendido entre 0 y 1 o bien
transparent
Comentarios
La propiedad CSS 1 border-color define el color (único) de los cuatro lados del elemento caja. De este modo, con la propiedad border-color: red, los cuatro bordes tendrán el mismo color rojo.
El color no puede aplicarse si no se han definido el tipo de borde (border-style) ni el grosor del mismo (border-width), sin los cuales el borde no existe.
Los colores de cada lado del elemento caja pueden definirse individualmente gracias a las propiedades border-top-color, border-right-color, border-bottom-color y border-left-color. Las direcciones top, right, bottom, left informan respectivamente los bordes superior, derecho, inferior e izquierdo.
Es posible abreviar la escritura (algo larga) de las propiedades border-top-color, border-right-color, border-bottom-color y border-left-color, informando uno, dos, tres o cuatro colores en la propiedad border-color.
Si se indica un solo color, se aplicará a los cuatro lados.
Con dos colores, el primero se aplicará en los lados superior e inferior. El segundo valor se aplicará en los laterales (derecho e izquierdo).
Con tres colores, el primero se aplicará al lado superior, el segundo en los laterales y el tercero al lado inferior.
Con cuatro colores, éstos se aplican en el sentido de las agujas del reloj partiendo del lado superior, es decir superior, derecho, inferior e izquierdo.
Con el valor transparent, el color de los bordes es transparente aunque el borde existe y tiene presencia.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
87
<meta charset="iso-8859-1">
<style type="text/css">
h1 { border-style: solid;
border-width: 7px;
border-top-color: rgb(215,230,245);
border-bottom-color: rgb(215,230,245);
border-left-color: rgb(125,165,205);
border-right-color: rgb(125,165,205);
text-align: center;}
</style>
</head>
<body>
<p></p>
<h1>Html5 + CSS3</h1>
</body>
</html>
12.7. Grosor del borde
Esta propiedad permite definir el grosor de los cuatro bordes de forma simultánea o de cada borde de forma individual.
border-width:
border-top-width:
border-right-width:
border-bottom-width:
valor de longitud;
thin;
medium;
thick;
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
88
border-left-width:
Comentarios
El valor thin se traduce en un borde fino, medium en un borde medio y thick en un borde grueso. La interpretación del grosor, a partir de las palabras clave, puede variar de un navegador a otro.
El grosor no se muestra si el tipo de borde (border-style) no se ha definido. Es posible definir el grosor de cada lado de forma individual gracias a las propiedadesborder-top-
width, border-right-width, border-bottom-width y border-left-width. Las direcciones top, right, bottom, left informan respectivamente los bordes superior, derecho,
inferior e izquierdo. Es posible abreviar la escritura (algo larga) de las propiedades border-top-width, border-right-
width, border-bottom-width y border-left-width, informando uno, dos, tres o cuatro colores en la propiedad border-width.
Si se indica un grosor, se aplicará a los cuatro lados.
Con dos grosores, el primero se aplicará en los lados superior e inferior. El segundo valor se aplicará en los laterales (derecho e izquierdo).
Con tres grosores, el primero se aplicará al lado superior, el segundo en los laterales y el tercero al lado inferior.
Con cuatro grosores, éstos se aplican en el sentido de las agujas del reloj partiendo del lado superior, es decir superior, derecho, inferior e izquierdo.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style type="text/css">
h1 { border-style: solid;
border-color: rgb(125,165,205);
border-width: thin thick;
text-align: center;}
</style>
</head>
<body>
<h1>Html5 + CSS3</h1>
</body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
89
12.8. Estilo del borde
Esta propiedad CSS aporta cierta variedad a los bordes respecto al estilo único de los bordes de Html.
border-style:
border-top-style:
border-right-style:
border-bottom-style:
border-left-style:
solid o dashed o dotted o double o groove o ridge o inseto outset o hidden o none;
Comentarios
Es interesante ilustrar estos bordes, la mayoría de ellos nuevos en el ámbito del diseño de páginas Web. De este modo, cada palabra clave muestra:
solid: un trazo liso,
dashed: guiones,
dotted: pequeños puntos,
double: trazos lisos dobles,
groove: efecto 3D de relieve incrustado en la página (opuesto a ridge),
ridge: efecto 3D de relieve saliendo de la página (opuesto a groove),
inset: bordes entrantes, incrustados en la página (inverso de outset),
outset: bordes salientes, biselados de la página (inverso de inset),
hidden: sin borde (influye sobre el borde adyacente),
none: equivalente a border-width: 0px o, lo que es lo mismo, sin borde.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
90
solid
dashed
dotted
double
groove
ridge
inset
outset
Para double, la longitud definida mediante border-width corresponde con el tamaño de ambos trazos más el espacio entre ellos.
El estilo de borde no se mostrará si no se ha definido el grosor del borde (border-width). El estilo de cada lado puede igualmente definirse de forma individual gracias a las
propiedades border-top-style, border-right-style, border-bottom-style y border-left-style. Las direcciones top, right, bottom, left informan respectivamente los bordes superior, derecho, inferior e izquierdo.
Es posible abreviar la escritura de las propiedades border-top-style, border-right-style, border-bottom-style y border-left-style, informando uno, dos, tres o cuatro colores en la propiedad border-style.
Si se indica un estilo, se aplicará a los cuatro lados.
Con dos estilos, el primero se aplicará en los lados superior e inferior. El segundo valor se aplicará en los laterales (derecho e izquierdo).
Con tres estilos, el primero se aplicará al lado superior, el segundo en los laterales y el tercero al lado inferior.
Con cuatro estilos, éstos se aplican en el sentido de las agujas del reloj partiendo del lado superior, es decir superior, derecho, inferior e izquierdo.
El resultado, en lo que respecta al método abreviado, no está garantizado.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
91
<style type="text/css">
h2 { border-style: double;
border-width: 10px;
border-color: gray;
text-align: center;}
</style>
</head>
<body>
<h2>Un borde con estilo</h2>
</body>
</html>
12.9. Escritura abreviada del borde
Esta propiedad de estilo para informar de forma abreviada las diferentes propiedades permite definir los bordes de un elemento, es decir las propiedades border-color, border-style y border-width.
Ejemplo
border: red double 5px; Comentarios
Esta forma sólo vale en el caso de que los cuatro bordes sean idénticos. Los valores para las diferentes propiedades se reagrupan y pueden informarse, no
importa en qué orden, separadas por espacios. Para asegurar la compatibilidad óptima entre los distintos navegadores, se recomienda
informar las tres propiedades.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
92
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style type="text/css">
h1 { border: dotted 1px black;
text-align: center;}
</style>
</head>
<body>
<h1>Borde abreviado</h1>
</body>
</html>
13. FORMULARIOS
Los formularios ocupan un lugar predominante en el diseño y explotación de una aplicación o un sitio Web. Es la única forma de recibir de vuelta la información que proviene directamente del usuario final, estructurada, además, según las necesidades del diseñador. Basta con pensar en todos los sitios de carácter comercial en los que los formularios resultan indispensables.
La primera preocupación de los desarrolladores de una aplicación Web es recuperar datos válidos. Tomemos por ejemplo el dato de un código postal español, de cinco caracteres numéricos, o una dirección de correo electrónico en la que la sintaxis sea válida. Los formularios forman parte del lenguaje Html desde hace ya unos quince años y no se han modificado desde entonces.
El propósito último de los formularios es el procesamiento automático de los datos devueltos. Por ello es preciso mencionar, del lado del servidor, los lenguajes de programación de gestión de bases de datos como por ejemplo PHP o MySQL. Afortunadamente para los debutantes existe el protocolo mailto, que permite enviar datos de formularios a una dirección de correo electrónico. Si bien este sistema presenta la ventaja de que puede usarlo todo el mundo, sin tener que recurrir a recursos externos, comporta no obstante ciertas limitaciones. Además, el procesamiento posterior de los datos tendrá que hacerse de forma manual.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
93
13.1. Declarar el formulario
La etiqueta <form> ... </form> tiene como única función la de declarar al navegador que debe incluir un formulario. Esta etiqueta englobará los elementos o campos de formulario como por ejemplo una línea de texto, casillas a marcar, listas desplegables, etc.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<form action="">
Elementos del formulario
</form>
</body>
</html>
En sí, la etiqueta <form> no muestra nada en la ventana del navegador. No tiene sentido mostrar una captura de pantalla.
Los atributos usuales de la etiqueta <form> son:
name
Para asignar un nombre (name) al formulario.
action
Cuando demos la orden al navegador de emitir los datos del formulario, aquél precisa conocer la acción que debe realizar.
Esta acción será:
bien la llamada a un programa de procesamiento de datos, alojado en el servidor, en CGI, Perl, PHP, ASP…
Por ejemplo, action = "http://www.servidor/procesamiento.php".
bien una dirección de correo electrónico para recuperar simplemente los datos. Se utiliza el protocolo mailto. Por ejemplo, action="mailto:mi_correo@servidor".
bien el procesamiento de los datos del formulario de forma interna (de lado cliente) mediante JavaScript, en cuyo caso el atributo action está vacío. Por ejemplo action="".
Si usa el validador de W3C (http://validator.w3.org), verá que la presencia del atributo action es obligatoria.
enctype
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
94
El atributo enctype especifica en qué formato informático (mime type) se transmitirán los datos del formulario. El valor por defecto es application/x-www-form-urlencoded. Para enviar archivos, este campo debe valer multipart/form-data y por último, para el envío de datos a una dirección de correo electrónico mediante el protocolo mailto, el valor será text/plain.
method
La transmisión de datos de un formulario se realiza mediante el método GET o el método POST. El método GET realiza la transferencia de los datos en caracteres ASCII y los datos no pueden exceder los 100 caracteres. El método POST gestiona los caracteres no ASCII y tiene una capacidad de caracteres ilimitada. En la práctica se ha impuesto el método POST por motivos de facilidad y de eficacia.
Cuando los datos del formulario se procesan de forma interna (action=""), los atributos method y enctype son inútiles puesto que no se hace llamada al servidor.
Comentarios
Esta etiqueta, básica en Html, es perfectamente compatible en los distintos navegadores. La etiqueta <form> debe, obligatoriamente, cerrarse. En caso de olvidar la etiqueta de
cierre </form> el navegador no mostrará ningún campo del formulario.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
95
13.2. Campo de texto
Este campo de texto permite captar la introducción de datos tanto alfabéticos como numéricos.
Ejemplo
Propongamos al usuario un campo de texto para introducir su nombre.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<form action="">
Nombre: <input type="text">
</form>
</body>
</html>
Comentarios
Esta etiqueta, básica en Html, es perfectamente compatible en los distintos navegadores. La etiqueta <input> no tiene etiqueta de cierre. La sintaxis <input type="text" />, inspirada en Xhtml,
está aceptada igualmente en Html5.
Los posibles atributos son:
name
Define un nombre (name) único para este elemento. Este atributo se utiliza para recoger el contenido del campo de texto cuando se envía el formulario.
size
Define el número de caracteres visibles del campo de texto y, por tanto, la longitud de la zona de texto. El usuario puede no obstante introducir tantos caracteres como quiera, incluso aunque sobrepasen la zona visible.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
96
El valor por defecto de este campo es 20.
maxlength
Determina el número máximo de caracteres que el usuario puede introducir en el campo de texto. Este atributo es particularmente útil para datos con un número concreto de caracteres como, por ejemplo, cinco cifras para introducir un código postal español.
value
Define el valor por defecto del campo de texto. Aparece como valor del campo de texto cuando se carga la página. Por ejemplo, <input type="text" value="¡Escriba su nombre aquí!">.
readonly
Indica que el usuario no puede modificar el valor por defecto del campo de texto. En Html5 han aparecido nuevos atributos. Actualmente no todos los navegadores los soportan. He aquí algunos ejemplos:
placeholder
Permite incluir una sugerencia acerca del valor que se debe introducir en el campo de texto. Esta sugerencia aparece de color gris en el campo de formulario tras cargar la página y desaparece cuando el usuario sitúa el foco o cursor en el elemento afectado. Este atributo todavía no está implementado en todos los navegadores recientes, aunque sí lo implementan Firefox 4+, Safari4+ y Chrome 3+. Este atributo se ignora en los navegadores que no lo implementan. <input type="text" placeholder="Su apellido">
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
97
Hay quien podrá señalar que el atributo value realiza la misma función. La diferencia es sutil. Con value, el usuario tiene que borrar el contenido antes de introducir su propio texto. Con placeholder, el texto se borra automáticamente cuando se sitúa el foco sobre el elemento afectado. Además, con el atributo value, en caso de que se envíe el formulario sin haber modificado el valor de esta propiedad por defecto, será éste el valor que se envíe.
autofocus
Sitúa el foco sobre el elemento una vez cargada la página. Este atributo parece que sólo está implementado de momento en Safari4+, Chrome 3+ y Opera 10+ , por lo que se ignora en los demás navegadores, donde aún no está implementado.
required
Convierte un elemento en obligatorio a la hora de enviar el formulario para su procesamiento posterior. Es muy útil para definir aquellos elementos obligatorios como el nombre o la dirección de correo electrónico del usuario. Opera 10+ nos proporciona una ilustración de la reacción del navegador cuando un campo required se deja vacío a la hora de enviar el formulario. <form action=""> Email (obligatorio): <input type="text" name="mail" required><br> <input type="submit" value="Enviar"> </form>
Sería interesante tener no obstante una representación gráfica un poco más elaborada desde el punto de vista estético.
pattern
Define una expresión regular JavaScript que se usará para realizar la validación del valor del campo.
Por ejemplo pattern="[0-9]" indica que el valor del elemento debe ser un número entero comprendido entre 0 y 9.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
98
height
Determina, en píxeles o en porcentaje, la altura del campo de texto. Puede reemplazarse por la propiedad
CSS height.
width
Determina, en píxeles o en porcentaje, la anchura del campo de texto. Puede reemplazarse por la propiedad
CSS width.
13.3. Área de texto
En ciertas situaciones, es preciso prever algo más de espacio para que el usuario pueda expresarse.
Es el caso, por ejemplo, de los comentarios o sugerencias.
Se utiliza en este caso la etiqueta <textarea> ... </textarea> que incluye un área de texto de varias líneas.
Ejemplo
Un área de texto dedicada para los comentarios del usuario:
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> <p>Comentarios: </p> <textarea rows="4" cols="30"></textarea> </form> </body> </html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
99
Comentarios
Esta etiqueta, básica en Html, es perfectamente compatible hacia atrás en los distintos navegadores. La etiqueta <textarea> precisa una etiqueta de cierre </textarea>. Es posible indicar un valor por defecto en el área de texto, no mediante el atributo value sino de
la forma siguiente: <textarea rows="4" cols="25">¡Escriba aquí sus sugerencias!</textarea>.
Los posibles atributos son:
name
Define un nombre para el elemento.
cols
Define el número de caracteres visibles en anchura para el área de texto. Puede reemplazarse por la
propiedad CSS width.
rows
Define el número de líneas visibles en altura para el área de texto. Puede reemplazarse por la propiedad
CSS height.
readonly
Indica que el valor informado por defecto en el área de texto no puede modificarse.
En Html5 han aparecido nuevos atributos. Actualmente no todos los navegadores los soportan. He aquí algunos ejemplos:
autofocus
Sitúa el foco sobre el elemento una vez cargada la página.
maxlength
Determina el número máximo de caracteres que el usuario puede introducir en el área de texto. Permite limitar a los usuarios prolijos.
required
Hace que sea obligatorio informar este elemento.
wrap
Especifica la forma en que se gestionan los saltos automáticos de línea en el texto a la hora de enviar el contenido. Con wrap="hard", se inserta un carácter de salto de línea junto con el texto. Con wrap="soft" (por defecto), no se inserta ningún carácter de salto de línea a la hora de transmitir la información. Para los puristas, este atributo ya no formaba parte de la especificación Html 4.0. Se ha vuelto a introducir en la especificación Html5, no obstante bajo un aspecto modificado.
placeholder
Inserta un texto en el campo del formulario tras la carga de la página. Este texto se borra automáticamente cuando el usuario sitúa el foco en el área de texto.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
100
13.4. Lista desplegable
La lista desplegable proporciona distintas opciones al usuario.
La etiqueta <select>... </select> indica al navegador el uso de una lista desplegable. Los elementos de la lista se introducen mediante las etiquetas <option> ... </option>.
Ejemplo: Preguntemos al usuario su navegador preferido:
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> <p>Su navegador preferido: <select> <option value="1">Internet Explorer</option> <option value="2">Firefox</option> <option value="3">Safari</option> <option value="4">Opera</option> <option value="5">Google Chrome</option> </select> </p> </form> </body> </html>
Los posibles atributos son:
name
Define un nombre para la lista desplegable, para un posible procesamiento posterior.
size
Por defecto el atributo size de la etiqueta <select> es igual a 1, lo que resulta muy práctico dado que permite ganar bastante espacio en la disposición de la página. No obstante mediante el atributo size="x"
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
101
usted puede definir el número de elementos del menú que será visible. ¡En este caso su menú no tendrá
nada de desplegable!
body>
<form action="">
<select size="4">
<option>Menos de 20 años</option>
<option>De 20 a 40 años</option>
<option>De 40 a 60 años</option>
<option>Más de 60 años</option>
</select>
</form>
</body>
multiple
Por defecto, el usuario no puede seleccionar más de un elemento del menú desplegable. Con el atributo múltiple de la etiqueta <select>, es posible seleccionar varios elementos a la vez. Para hacer esto, el usuario debe mantener pulsada la tecla [Ctrl] en el teclado y hacer clic sobre los elementos con el ratón. En tal caso es aconsejable recordar al usuario en la página esta forma de proceder, poco común para un internauta intermedio. El atributo size debe especificarse y ser igual al número de etiquetas <option>.
selected
Por defecto aparece seleccionado el primer elemento de la lista. No obstante es posible preseleccionar algún otro elemento mediante el atributo selected de la etiqueta <option>.
<body>
<form action="">
<p>Su navegador preferido:
<select>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
102
<option value="IE">Internet Explorer</option>
<option value="FF">Firefox</option>
<option value="S" selected>Safari</option>
<option value="O">Opera</option>
<option value="GC">Google Chrome</option>
</select>
</p>
</form>
</body>
value
En principio es el texto del elemento seleccionado, situado tras la etiqueta <option>, el que se transmite a la hora de enviar el formulario. No obstante es posible especificar un valor diferente (generalmente un valor numérico) para transmitirlo, mediante el atributo value="valor".
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
103
13.5. Botones de selección única (radio) Los botones de selección única, también llamados botones radio, tienen la particularidad de que sólo permiten seleccionar una opción a la vez (el "o" exclusivo). Ejemplo Preguntemos el sexo del interlocutor:
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> Sexo:<br> <input type="radio" name="sexo">Masculino <input type="radio" name="sexo">Femenino </form> </body> </html>
Comentarios Esta etiqueta es perfectamente compatible entre los distintos navegadores.
La etiqueta <input> no tiene etiqueta de cierre. La sintaxis <input type ="radio"/>, inspirada
en Xhtml, está igualmente aceptada en Html5.
Los posibles atributos son: name
Aquí el atributo name es obligatorio. Además, en el caso de los botones radio, el nombre debe ser idéntico
para todos los botones. checked
Permite preseleccionar un botón radio. value En vista de un procesamiento posterior, es posible atribuir un valor a cada botón radio mediante el atributo value="valor".
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
104
13.6. Botones de selección múltiple (checkbox)
El uso de estos botones de selección múltiple, también llamados checkbox, es similar a los botones de
selección única aunque, en este caso, es posible seleccionar varias opciones.
Ejemplo
Pidamos al usuario que precise los ingredientes de una pizza.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<form action="">
Su pizza con:<br>
<input type="checkbox" name="n1"> Mozzarella<br>
<input type="checkbox" name="n2"> Jamón<br>
<input type="checkbox" name="n3"> Salsa de tomate<br>
<input type="checkbox" name="n4"> Pimientos<br>
<input type="checkbox" name="n5"> Champiñones<br>
<input type="checkbox" name="n6"> Olivas negras<br>
<input type="checkbox" name="n7"> Salsa picante
</form>
</body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
105
Comentarios Esta etiqueta es perfectamente compatible entre los diferentes navegadores. La etiqueta <input> no tiene etiqueta de cierre. La sintaxis <input type="checkbox" />, inspirada
en Xhtml, está igualmente aceptada en Html5.
Los posibles atributos son:
name
El atributo name="nombre" es obligatorio. Las reglas son menos precisas que para los botones de opción. Es posible usar nombres idénticos o nombres diferentes para cada casilla. No obstante, es preciso indicar nombres diferentes para tratar los elementos dentro de un script.
checked
El atributo checked permite preseleccionar una casilla.
<form action="">
Su pizza con:<br>
<input type="checkbox" name="n1" checked > Mozzarella<br>
<input type="checkbox" name="n2"> Jamón<br>
<input type="checkbox" name="n3" checked > Salsa de tomate<br>
<input type="checkbox" name="n4"> Pimientos<br>
<input type="checkbox" name="n5"> Champiñones<br>
<input type="checkbox" name="n6"> Olivas negras<br>
<input type="checkbox" name="n7"> Salsa picante
</form>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
106
value
Para poder procesarlos posteriormente es preciso indicar un valor a cada botón checkbox mediante el atributo value="valor".
13.7. Botón de envío
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<form action="">
<input type="submit">
</form>
</body>
</html>
Comentarios
Esta etiqueta es perfectamente compatible entre los diferentes navegadores. La etiqueta <input> no tiene etiqueta de cierre. La sintaxis <input type="submit" />,
inspirada en Xhtml, está igualmente aceptada en Html5. El texto del botón lo selecciona el navegador. En efecto, varía de un navegador a otro:
Enviar consulta en Internet Explorer y Firefox, Enviar en Opera, Safari y Google Chrome. Es posible modificar el texto por defecto del botón mediante el atributo value. La sintaxis es, por ejemplo, <input type="submit" value="Enviar el formulario">.
Es posible reemplazar el botón de envío por una imagen gráfica gracias a la etiqueta <input type="image>.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
107
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<form action="">
Nombre: <input type="text"><br>
e-Mail: <input type="text"><br>
<input type="image" src="submit.gif" alt="Enviar" width="50"
height="50">
</form>
</body>
</html>
13.8. Botón de anulación
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<form action="">
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
108
<input type="reset">
</form>
</body>
</html>
Comentarios
Esta etiqueta es perfectamente compatible entre los diferentes navegadores. La etiqueta <input> no tiene etiqueta de cierre. La sintaxis <input type="reset" />,
inspirada en Xhtml, está igualmente aceptada en Html5. El título del botón lo selecciona el navegador. La mayoría de ellos optan por Restablecer,
salvo Safari que prefiereRestaurar. Es posible modificar el texto por defecto del botón mediante el atributo value. La sintaxis es, por ejemplo, <input type="reset" value="Reiniciar">.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
109
13.9. Botón de acción
En materia de botones (button), existe también la etiqueta <button> ... </button>. Esta etiqueta permite ejecutar, al hacer clic sobre el botón, una acción específica definida por el diseñador del sitio Web, generalmente mediante algún código de JavaScript. Ofrece igualmente la posibilidad de realizar el envío y la anulación del formulario (submit y reset).
Por otro lado, esta etiqueta <button> tiene la ventaja de tener una etiqueta de apertura y otra de cierre. De este modo es posible incluir texto, imágenes o incluso contenido Html. Destaquemos también que esta etiqueta <button> no tiene por qué estar anidada obligatoriamente en un formulario <form> y puede usarse en múltiples contextos.
Todo esto la convierte en una etiqueta polivalente y justifica su éxito entre los desarrolladores. Ejemplo Al hacer clic en el botón, se abre una ventana de alerta:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<button onclick="alert(’Acción JavaScript’)">
Haga clic aquí</button>
</body>
</html>
Comentarios
Esta etiqueta es perfectamente compatible entre los diferentes navegadores. La etiqueta <button> tiene una etiqueta de cierre:</button>. El texto del botón se declara entre ambas etiquetas, y no en el atributo value. Por
ejemplo <button>Haga clic aquí</button>.
Los posibles atributos son:
name
Especifica un nombre para el botón.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
110
type
El atributo type admite tres argumentos:
button: se utiliza cuando el botón inicia un script (es el valor por defecto del atributo en
la mayoría de navegadores).
submit: para enviar el formulario.
reset: para reinicializar el formulario.
Los sitios Web y los foros especializados recomiendan especificar siempre el valor del atributo type puesto que el argumento button no es el valor por defecto en todos los
navegadores.
disabled
Permite desactivar el botón cuando se carga la página. En este caso el botón aparece sombreado en gris. Es posible activarlo (enabled) con un script mediante una acción del usuario, por ejemplo
después de haber aceptado las condiciones de uso.
Dejando a parte autofocus, no hay nuevos atributos significativos en Html5.
Veamos la posibilidad de asignar una imagen a la etiqueta<button> agregando un pequeño icono
(ok.png) disponible en el área de descargas del libro.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<button><img src="ok.png" alt="Enviar" width="15" height="15">
Enviar
</button>
</body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
111
13.10. Campos de transferencia de archivos
La etiqueta <input type="file"> permite transferir un archivo (file) desde el puesto del usuario a otro ordenador de tipo servidor.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<input type="file">
</form>
</body>
</html>
Un clic en el botón Examinar (de nombre variable según el navegador) abre el explorador de carpetas del ordenador del usuario para seleccionar el archivo que se quiere transferir.
Comentarios
Esta etiqueta es perfectamente compatible entre los diferentes navegadores. La etiqueta <input> no tiene etiqueta de cierre. La sintaxis <input type="file" />,
inspirada en Xhtml, está igualmente aceptada en Html5. Los atributos habituales de la etiqueta <input> pueden utilizarse igualmente. Destacamos
no obstante el atributo maxlength que permite fijar el tamaño máximo del archivo a transferir.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
112
En la declaración de la etiqueta <form>, es preciso usar los atributos method="post" y enctype="multipart/form-data"para realizar la transferencia según el formato correcto del archivo.
Existe también el atributo accept que permite limitar la transferencia a ciertos tipos de archivos concretos. Por ejemplo, archivos de texto (txt), Word (doc), Excel (xls), pdf, archivos de imagen (jpeg, gif o png), etc. En la descripción de los archivos es posible usar el carácter * como comodín.
Destacamos que esta etiqueta Html sirve únicamente para seleccionar el archivo que se quiere transferir. La transferencia en sí debe tenerse en cuenta en las aplicaciones del lado servidor, como por ejemplo, PHP.
13.11. Campos de contraseña
Este tipo de campo es de hecho un simple campo de texto donde la codificación se sustituye, en la visualización, por puntos o asteriscos.
Este campo de contraseña no protege en ningún caso los datos, que se transmitirán sin cifrar. Únicamente nos protegen de las personas que pudieran estar mirando la pantalla en el momento de la introducción de la contraseña.
Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> Login: <input type="password"> </form> </body> </html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
113
Comentarios Esta etiqueta es perfectamente compatible entre los diferentes navegadores. La etiqueta <input> no tiene etiqueta de cierre. La sintaxis <input type="password" />,
inspirada en Xhtml, está igualmente aceptada en Html5. Los atributos del campo de texto también pueden usarse aquí: name, size, maxlength,
etc.
13.12. Organización de los campos de formulario
En el caso de formularios largos y complejos, en ocasiones resulta útil reagrupar gráficamente ciertos elementos para organizar la página de forma lógica. Les etiquetas <fieldset> y <legend>permiten mejorar sensiblemente la ergonomía y la usabilidad de los formularios.
La etiqueta <fieldset> ... </fieldset> engloba los campos de formulario que usted determine. Estos campos se muestran en la pantalla rodeados por un borde.
La etiqueta <legend> ... </legend>, situada justo después de la etiqueta <fieldset>, agrega una leyenda relacionada con aquellos campos que hayamos agrupado mediante la etiqueta<fieldset> (véase la siguiente captura de pantalla).
Ejemplo Reagrupemos los entrantes, las pizzas y los postres en una lista de selección múltiple:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="iso-8859-1"> </head> <body> <form action=""> <fieldset> <legend>Nuestros entrantes</legend> <input type="checkbox" name="n1"> Chikenito’s<br> <input type="checkbox" name="n2"> Ensalada de temporada<br> <input type="checkbox" name="n3"> Buffalo wings<br> </fieldset> <fieldset> <legend>Nuestras pizzas</legend> <input type="checkbox" name="n4"> Clásica<br> <input type="checkbox" name="n5"> Campesina<br> <input type="checkbox" name="n6"> Diabólica<br> </fieldset> <fieldset> <legend>Nuestros postres</legend> <input type="checkbox" name="n7"> Helados variados<br> <input type="checkbox" name="n8"> Cookies<br> <input type="checkbox" name="n9"> Tarta de chocolate<br> </fieldset> <input type="submit"> <input type="reset"> </form> </body> </html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
114
Comentarios
Esta etiqueta es perfectamente compatible entre los diferentes navegadores. No hay que olvidar incluir las etiquetas de cierre. Ya no existe una alineación de la leyenda a la derecha o a la izquierda en Html5. Esta
operación debe realizarse mediante una hoja de estilos CSS.
13.13. Etiquetado de los campos de formulario
La etiqueta <label> asocia explícitamente el título a un campo de formulario particular. Es como si pegáramos una etiqueta (label) delante de un elemento del formulario.
En un primer momento, la etiqueta <label> mejora en gran medida la ergonomía de los formularios permitiendo activar un elemento del grupo, por ejemplo un botón radio, haciendo clic sobre el botón radio o sobre el título, indiferentemente.
En primer lugar el texto asignado a un elemento de formulario debe situarse entre las etiquetas <label> ... </label>.
<label>Nombre</label>: <input type="text"><br>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
115
A continuación es preciso asociar esta etiqueta label al control del formulario correspondiente. Para ello, el elemento de formulario tiene que definirse mediante un identificador de tipo id.
<label>Nombre</label>: <input type="text" id="f1"><br>
El atributo for="..." dentro de la etiqueta <label> permite asociar directamente la etiqueta al campo haciendo referencia a este identificador.
<label for="f1">Nombre</label>: <input type="text" id="f1"><br>
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<form action="">
<p>Forma de pago:<br>
<label for="cash1">Visa</label>
<input type="radio" name="cash" id="cash1"><br>
<label for="cash2">American Express</label>
<input type="radio" name="cash" id="cash2"><br>
<label for="cash3">Mastercard</label>
<input type="radio" name="cash" id="cash3">
</p>
</form>
</body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
116
13.14. Campo de texto para la dirección de correo electrónico
Esta etiqueta no ha sido implementada todavía más que por el navegador más innovador y confidencial del mercado: Opera. Este navegador nos permitirá ilustrar las perspectivas abiertas mediante esta nueva etiqueta introducida por Html5.
Se convierte en una etiqueta particularmente interesante a la hora de realizar la validación directa en el navegador, sin que el diseñador tenga que agregar JavaScript.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<form action="">
e-mail: <input type="email" name="mail" required>
<input type="submit" value="OK">
</form>
</body>
</html>
A priori, el campo de texto no se distingue de un campo de texto normal.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
117
No obstante, cuando intentamos enviar una dirección de correo electrónico mal formada, el
navegador nos informa de que la dirección es incorrecta.
Por otro lado, es posible agregar el atributo required que indica que se trata de un campo
obligatorio.
Esperemos que en un futuro estos mensajes sean estéticamente mejores.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
118
Aprovechamos esta etiqueta email para hablar del atributo autocomplete de Html5, disponible en varios elementos de los formularios. Cuando esta opción está activada en las preferencias del navegador, este atributo proporciona la opción de completar automáticamente el campo de formulario con su dirección de correo electrónico.
13.15. Campo de texto con formato numérico
Otro campo nuevo incluido en Html5 son los contadores numéricos. Estos contadores, que se encuentran frecuentemente en aplicaciones como los procesadores de texto, se usan también en aplicaciones Web.
Esta nueva etiqueta <input type="number"> tiene atributos específicos:
min
Indica el valor mínimo del contador.
max
Indica el valor máximo del contador.
step
Determina el incremento del contador cada vez que se hace clic en las flechitas
o
value
Indica el valor inicial del contador.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
119
<body>
<form action="">
Numero de artículos (grupos de 2):<br>
<input type="number" name="q" min="2" max="10" step="2" value="2">
</form>
</body>
</html>
Al inicio:
Haciendo clic en las flechitas el usuario puede aumentar o disminuir el contador.
13.16. Campo de texto con formato de fecha
Los calendarios han cobrado especial importancia en las aplicaciones de la Web 2.0. Su uso es indiscutible en todos los sitios de reservas on-line, bien sea para reservar un billete de avión o una habitación de hotel.
Para los desarrolladores, los formatos de fecha suponen un verdadero problema, sobretodo en los sitios Web de vocación internacional (dd/mm/aa o mm/dd/aa).
Se trata de uno de los avances más importantes de Html5 en cuando al diseño de sitios Web.
A día de hoy, solamente Opera 10+ permite ilustrar esta nueva funcionalidad.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
120
Al inicio:
Al situar el foco en el campo, aparece un calendario:
Este código se reduce a unas pocas líneas:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
121
<form action="">
Fecha de llegada: <input type="date" name="in"><br>
Fecha de partida: <input type="date" name="out">
</form>
</body>
</html>
Esta etiqueta <input> con formato de fecha se declina en los siguientes formatos.
<input type="date">
La más general, ilustrada anteriormente. Permite seleccionar el año, el mes y el día.
<input type="month">
Para seleccionar el mes y el año. Es útil por ejemplo para introducir la fecha de expiración de una tarjeta de crédito.
Fecha de expiración: <input type="month" name="in">
<input type="week">
Para una semana determinada.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
122
Semana reservada: <input type="week" name="in">
No obstante Html5 no se queda aquí. Proporciona también una herramienta para el formato horario:
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <form action=""> Entrega de la pizza a las: <input type="time" min="11:00" max="23:00" step="900" value="11:00"> </form> </body> </html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
123
El atributo min permite fijar una hora de inicio del contador, max una hora de fin y step el paso de avance, en este ejemplo de 15 en 15 minutos (900 segundos) cada vez que se hace clic en una flechita.
13.17. Una aplicación completa
Vamos a elaborar un formulario completo para dar soporte a una actividad comercial.
Los primeros campos del formulario procesarán los datos del cliente: nombre y apellidos, dirección, código postal y país (España exclusivamente). Los demás elementos servirán para procesar el pedido (modelo Road 66), la talla y la cantidad.
Los grupos Cliente y Pedido se pueden agrupar mediante la etiqueta <fieldset>.
El protocolo mailto, a pesar de sus límites, se utilizará para enviar un correo con los datos del formulario (por motivos prácticos de aprendizaje).
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style>
fieldset { border : 1px solid black;}
</style>
</head>
<body>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
124
<form action="mailto:su_direccion_email" method="post"
enctype="text/plain">
<fieldset>
<legend><i>Cliente</i></legend>
Nombre y apellidos: <input type="text" name="Nombre"><br>
Dirección: <input type="text" name="Dirección"><br>
Código Postal: <input type="text" name="CP" size="4"
maxlength="5"><br>
País: <input type="text" readonly name="País" value="España">
</fieldset>
<br>
<fieldset>
<legend><i>Pedido</i></legend>
Modelo: <input type="text" readonly name="Modelo" value="Road
66"><br>
Talla: <br>
<input type="radio" name="Talla" value="S">S<br>
<input type="radio" name="Talla" value="M">M<br>
<input type="radio" name="Talla" value="L">L<br>
<input type="radio" name="Talla" value="XL">XL<br>
Cantidad: <input type="text" name="Cantidad" value="1"><br>
</fieldset>
<br>
<input type="submit" value="Realizar pedido">
<input type="reset" value="Anular">
</form>
</body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
125
En el momento de la recepción, el correo electrónico puede tomar el siguiente aspecto:
Nombre=Andrés Espinar Dirección=Calle de la Estación, 22 Madrid CP=28000 País=España Modelo=Road 66 Talla=L Cantidad=2
Se trata de una lista de parejas con el nombre (name) que hayamos dado al campo de formulario seguido del signo igual = y los datos introducidos por el usuario.
Este formulario es muy similar a un formulario estándar de Html 4.0. Resulta interesante agregar algunas etiquetas y atributos propios de Html5 para aprovechar algunas de las nuevas funcionalidades aportadas por Html5.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style>
fieldset { border : 1px solid black;}
</style>
</head>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
126
<body>
<form action="mailto:su_direccion_email" method="post"
enctype="text/plain">
<fieldset>
<legend><i>Cliente</i></legend>
Nombre y apellidos: <input type="text" name="Nombre" required
placeholder="Nombre y apellidos"><br>
Dirección: <input type="text" name="Dirección" required><br>
Código Postal: <input type="text" name="CP" size="4" maxlength="5"
required pattern="[0-9]"><br>
País: <input type="text" readonly name="País" value="España">
</fieldset>
<br>
<fieldset>
<legend><i>Pedido</i></legend>
Modelo: <input type="text" readonly name="Modelo" value="Road
66"><br>
Talla: <br>
<input type="range" name="Talla" min="1" max="4" step="1"
value="2">
<div>
<span>S</span>
<span>M</span>
<span>L</span>
<span>XL</span>
</div>
<br>
Cantidad: <input type="number" name="Cantidad" min="1" max="6"
step="1" value="1"><br>
</fieldset>
<br>
<input type="submit" value="Realizar pedido">
<input type="reset" value="Anular">
</form>
</body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
127
Este formulario, que incluye funcionalidades propias de Html5, es visualmente muy distinto al anterior, con la introducción del cursor para informar las tallas o del contador para la cantidad.
Los campos Nombre y apellidos y Dirección aparecen completados por una sugerencia sombreada (atributo placeholder).
Algunos campos se han complementado con el atributo required, que los vuelve obligatorios. En el momento de realizar el envío, aparece una etiqueta informativa indicando que es preciso completar este campo.
Hemos dotado al código postal de una expresión regular (atributo pattern) que exige una codificación exclusivamente numérica. Aparece una etiqueta informativa si el formato no es válido.
El contador, para introducir la cantidad, permite limitar una cantidad máxima, 6 unidades en este caso, mediante el atributo max.
He aquí las diferencias respecto a Html 4.0, que abren perspectivas prometedoras para las
aplicaciones Html del futuro.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
128
14. MULTIMEDIA
14.1. Insertar un archivo de audio
14.1.1 . Etiqueta <audio>
Hasta el presente, no existía un estándar para agregar sonido en una aplicación Web. Esta operación se realizaba mediante un plug-in, por ejemplo Flash, aunque no todos los navegadores disponían de los mismos plug-ins.
Html5 proporciona a día de hoy una etiqueta nueva para reproducir archivos de audio, independientemente de los plug-ins instalados en el puesto del usuario.
Insertar un archivo de audio puede realizarse de forma muy sencilla mediante la etiqueta:
<audio src="archivo_sonido"></audio>
Dado que la implementación de la etiqueta <audio> es todavía muy limitada en los navegadores existentes, no es inútil agregar un mensaje para aquellos navegadores que no puedan procesar esta etiqueta.
<audio src="archivo_sonido"> Su navegador no soporta la etiqueta audio. </audio>
Veamos un primer ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<audio src="piano_ogg.ogg" controls>
Su navegador no soporta la etiqueta audio.
</audio>
</body>
</html>
La ruta del archivo de audio supone, en este caso, que el archivo se encuentra en la misma carpeta del servidor que el archivo Html que contiene la etiqueta audio.
El resultado en Firefox 3.6, que reconoce la etiqueta <audio> y el formato ogg:
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
129
Los atributos de la etiqueta <audio> son:
src
Obligatorio. Define la ruta del archivo de sonido.
controls
Muestra los controles del reproductor de audio (véase la captura de pantalla). Incluye las funcionalidades de reproducción, pausa, avance y volumen.
<audio src="sonido.ogg" controls>
En ausencia del atributo controls, el navegador no mostrará los controles del reproductor de audio.
La sintaxis Xhtml para los atributos controls="controls"también es válida.
autoplay
Define la reproducción automática del archivo de sonido desde el momento en que esté disponible, tras la carga de la página.
<audio src="sonido.ogg" autoplay>
Es preciso recordar que esta lectura automática del archivo de sonido no siempre es bienvenida por parte de los usuarios. Aquellos que estén escuchando su propia música o que estén consultando su página Web desde un lugar silencioso pueden verse molestados. Por otro lado, esta reproducción automática será especialmente molesta para los usuarios de programas de síntesis vocal.
La sintaxis Xhtml del atributo autoplay="autoplay" también es válida.
loop
Especifica que el archivo de sonido se reproduzca en bucle. De este modo, el sonido comienza de nuevo una vez termina.
<audio src="sonido.ogg" loop>
La sintaxis Xhtml del atributo loop="loop" también es válida.
preload
Indica al navegador que debe descargar el archivo de audio durante la carga de la página de modo que esté disponible para una reproducción inmediata una vez la solicite el usuario.
<audio src="sonido.ogg" preload>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
130
Este atributo puede tomar los valores:
preload="none". Sin carga previa. preload="metadata". Carga previa de los metadatos (metadata) asociados al archivo. preload="auto". Carga previa automática.
Este atributo preload se ignorará si el atributo autoplay está activado.
Destacamos lo concisa que resulta la inserción de un archivo sonoro gracias a esta etiqueta <audio> y sus atributos de forma reducida.
14.1.2. Formatos de archivo de audio
La situación ideal hubiera sido que se hubiera adoptado un único formato de archivo de audio, y que se hubiera tratado de un formato libre.
Formato ogg
Esta ha sido la opción de Firefox, primer navegador en implementar la etiqueta <audio>. El formato ogg se ha mantenido.
Ogg es el nombre del principal proyecto de la fundación Xiph.org que tiene como objetivo proporcionar a la comunidad de usuarios formatos y codecs multimedia abiertos, libres y desprovistos de cualquier tipo de patente. La extensión .ogg es una de las extensiones posibles para los archivos de formato ogg. Por abuso del lenguaje, se denomina de forma corriente "archivo Ogg" de audio a un archivo de formato ogg que contenga datos de audio comprimidos con Vorbis, uno de los codecs del proyecto ogg (fuente Wikipedia).
Los archivos ogg suponen una alternativa libre al formato mp3, mucho más conocido y expandido.
El formato ogg está reconocido en Firefox 3.6+, Chrome 5+ y Opera 10.6+. No lo reconocen los navegadores Safari 5+ ni Internet Explorer 9.
Formato mp3
Es difícil olvidarse del emblemático formato mp3 para los archivos de sonido.
MPEG-1/2 Audio Layer 3, más conocido por su abreviatura MP3, es la especificación sonora del estándar MPEG-1/MPEG-2, deMoving Picture Experts Group (MPEG). Se trata de un algoritmo de compresión de audio capaz de reducir drásticamente la cantidad de datos necesaria para restituir el sonido, pero que, para el oyente, se asemeja a una reproducción del sonido original sin compresión, es decir con pérdida de calidad significativa pero aceptable para el oído humano (fuente Wikipedia).
Mp3 se percibe a menudo por parte del usuario como una tecnología gratuita. Esto permite que pueda codificar y descodificar su música de forma totalmente legal siempre y cuando el archivo original le pertenezca o se trate de una copia de uso privado. No obstante, esta tecnología propietaria forma parte de una patente y una licencia comercial.
El formato mp3 lo reconocen Chrome 5+, Safari 5+ e Internet Explorer 9. No se reconoce en Firefox 3.6 y 4 ni en Opera 10.6.
Formato acc
Existen otros formatos con mejor rendimiento en términos de compresión que el formato ogg o el mp3. Se trata del formato acc.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
131
El formato ACC (Advanced Audio Coding) es un algoritmo de compresión de audio con pérdida de datos pero que tiene mejor rendimiento en términos de compresión que el formato más antiguo MPEG-1/2 Audio Layer 3 (más conocido como mp3). Por este motivo ha sido escogido por algunas firmas como Apple o RealNetworks (fuente Wikipedia).
El formato acc es el formato de los archivos de audio soportados por Apple en su reproductor portátil iPod y en su software iTunes.
Se trata también de un formato propietario.
El formato acc lo reconocen Chrome 5+, Safari 5+ e Internet Explorer 9. No lo reconocen los navegadores Firefox 3.6 y 4 ni Opera 10.6.
Formato wav
Citamos el clásico formato wav que, por su ausencia de compresión, no parece uno de los más adaptados para competir en la red. En efecto, el tamaño de los archivos wav es muy (o demasiado) grande.
El formato wav lo reconocen Firefox 3.6+, Safari 5+ y Opera 10.6+. No se reconoce en Chrome 5+ ni en Internet Explorer 9.
Tabla comparativa
Chrome 5+ Firefox 3.6+ Opera 10.6+ Safari 5+ Explorer 9
ogg sí sí sí no no
mp3 sí no no sí sí
acc sí no no sí sí
wav no sí sí sí no
Para concluir:
La etiqueta <audio> ha sido implementada en los navegadores más recientes. Google Chrome 5+ es, con diferencia, el navegador más polivalente en lo referente a
formatos de audio.
Html5 está todavía en un estado incipiente. Es posible que aparezca algún nuevo formato de audio. Del mismo modo, cualquier navegador puede incorporar cualquier tipo de archivo que no reconozca a día de hoy. El autor le aconseja consultar regularmente el apartado Html5 Audio Codecs del sitio Web www.findmebyip.com/litmus/ para consultar los futuros desarrollos y avances a este respecto.
14.1.3. Etiqueta <source>
La etiqueta <source> nos va a permitir resolver la problemática de los distintos formatos de archivo.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
132
La etiqueta <source> se utiliza para especificar varios tipos de archivos de audio. Cada navegador escogerá el formato que mejor le convenga o el que pueda reproducir.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<audio controls>
<source src="piano_ogg.ogg">
<source src="piano_mp3.mp3">
<source src="piano_acc.acc">
Su navegador no soporta la etiqueta audio.
</audio>
</body>
</html>
Es importante comprender el funcionamiento de las distintas etiquetas <source>.
Supongamos que leemos esta página en el navegador Safari que, recordemos, no soporta el formato ogg. Safari ignorará la primera etiqueta <source> que redirige a un archivo de tipo ogg. Pasa a la segunda etiqueta <source> que propone un archivo mp3. Como el formato mp3 sí está soportado en Safari, será este recurso el que se usará para reproducir el archivo de sonido.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
133
Por el contrario, Firefox, que soporta los archivos ogg, utilizará el primer recurso. Las demás etiquetas <source> serán ignoradas.
Las etiquetas <source> se leen en el orden de aparición en el código fuente. El navegador usará el primer recurso que soporte.
Las múltiples etiquetas <source> aseguran una perfecta reproducción del archivo de sonido en sus distintos formatos por parte de los navegadores. No obstante, el diseñador del sitio o de la aplicación Web tiene que codificar el mismo archivo de sonido en varios formatos para asegurar la compatibilidad entre los distintos formatos.
Los atributos de la etiqueta <audio> son:
src
Obligatorio. Define la ruta del archivo de sonido.
type
Define el tipo MIME del contenido. Puede valer:
type="audio/ogg". type="audio/mpeg". type="audio/acc".
También puede especificarse el codec utilizado. El atributo type queda: type="audio/ogg; codecs=vorbis".
Especificando el atributo type, acelerará el proceso de carga de la etiqueta <source> más adecuada para el navegador.
14.2. Insertar un archivo de vídeo
14.2.1. Etiqueta <video>
Tras varios años, el vídeo ha invadido la Web. Basta, por ejemplo, con pensar en el éxito de
YouTube. No obstante en Html 4.0 no existía un estándar para agregar vídeo en una aplicación Web. Esta operación se realizaba con la llamada a algún plugin: QuickTime, RealPlayer o Flash. Esto implicaba contar con el plugin adecuado en cada momento.
Html5 proporciona a día de hoy una etiqueta nueva para reproducir los archivos de vídeo, independientemente de los plugins instalados en el puesto del usuario.
Insertar un archivo de vídeo se realiza de forma muy sencilla mediante la etiqueta:
<video src="archivo_video"></video>
Dado que la implementación de esta etiqueta<video> es muy limitada a día de hoy en los
navegadores existentes, no es descabellado prever un mensaje para los usuarios de aquellos navegadores que todavía no tienen en cuenta esta etiqueta.
<video src="archivo_video">
Su navegador no soporta la etiqueta video.
</video>
Los atributos de la etiqueta <video> son:
src
Obligatorio. Define la ruta del archivo de vídeo.
width
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
134
Determina la anchura del vídeo.
height
Determina la altura del vídeo.
Igual que con la etiqueta <img>, usted puede definir de forma explícita las dimensiones del vídeo.
En otro caso, el elemento se muestra por defecto con la altura y la anchura propias del vídeo. Si especifica una dimensión, pero no la otra, el navegador ajustará automáticamente el tamaño de la dimensión que no se haya especificado para preservar la proporción de aspecto del vídeo.
poster
El atributo poster permite especificar una imagen que el navegador usará mientras se está
descargando el vídeo o hasta que el usuario inicie su reproducción. Si no se especifica este atributo, se inserta la primera imagen del vídeo en su lugar.
<video src="video_ogv.ogv" poster="imagen.png">
controls
Muestra los controles del reproductor del vídeo (véase la captura de pantalla). Se incluyen las funciones de reproducción, pausa, avance y volumen.
<video src="video_ogv.ogv" controls>
En ausencia del atributo controls, no se mostrarán los controles del reproductor en el
navegador.
La sintaxis Xhtml del atributocontrols="controls" también es válida.
autoplay
Define la lectura automática del archivo de vídeo una vez esté disponible, tras la carga de la página.
<video src="video_ogv.ogv" autoplay>
Recordemos que esta reproducción automática no siempre es apreciada por los usuarios, especialmente si la página contiene algo de texto.
La sintaxis Xhtml del atributoautoplay="autoplay" también es válida.
loop
Especifica que el archivo de vídeo se reproducirá en bucle. De este modo, el vídeo se reproduce nuevamente una vez ha llegado a su fin.
<video src="video_ogv.ogv" loop>
La sintaxis Xhtml del atributo loop="loop"también es válida.
preload
Indica al navegador que debe descargar el archivo de vídeo durante la carga de la página de modo que esté disponible para una reproducción inmediata una vez lo solicite el usuario.
<video src="video_ogv.ogv" preload>
Este atributo puede tomar los valores:
preload="none". No existe carga previa.
preload="metadata". Carga previa de los metadatos asociados al archivo.
preload="auto". Carga previa automática.
Este atributo preload se ignora si está presente el atributo autoplay.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
135
14.2.3. Etiqueta <source>
La etiqueta <source> nos va a permitir resolver la problemática de los distintos formatos de
archivo.
La etiqueta <source> se utiliza para especificar varios tipos de archivos de vídeo. Cada
navegador escogerá el formato que mejor le convenga o el que pueda reproducir.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<video controls>
<source src="video_ogv.ogv">
<source src="video_mp4.mp4">
<source src="video_webm.webm">
Su navegador no soporta la etiqueta video.
</video>
</body>
</html>
Las etiquetas <source> se leen en el orden de aparición en el código fuente. El navegador usará
el primer recurso que soporte.
Las múltiples etiquetas <source> aseguran una perfecta reproducción del archivo de vídeo en sus
distintos formatos por parte de los navegadores. No obstante, el diseñador del sitio o de la
aplicación Web tiene que codificar el mismo archivo de vídeo en varios formatos para asegurar la compatibilidad entre los distintos formatos.
Los atributos de la etiqueta <source> son:
src
Obligatorio. Define la ruta del archivo de sonido.
type
Define el tipo MIME del contenido. Puede valer:
type="video/ogg".
type="video/mp4".
type="video/webm".
También puede especificarse el codec utilizado. El atributo type queda:
type=’video/ogg; codecs="theora, vorbis"’.
type=’video/webm; codecs="vp8, vorbis"’.
type=’video/mp4; codecs="avc1.42E01E, mp4a.40.2"’.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
136
Especificando el atributo type acelerará el proceso de carga de la etiqueta <source> más
adecuada para el navegador.
15. Etiquetas semánticas y de organización
15.1. Antiguas etiquetas semánticas
Html5 hereda las antiguas etiquetas semánticas de Html 4.0. Estas etiquetas tienen un formato específico.
Estas etiquetas semánticas son:
<abbr> ... </abbr> que indica una abreviatura, por ejemplo SA o IVA. Además de su función semántica, esta etiqueta sirve para indicar a los programas de síntesis vocal que no traten de leer la palabra tal y como está escrita, sino deletreándola.
<acronym> ... </acronym> que indica un acrónimo, es decir una palabra formada por sílabas de varias palabras como ONU (Organización de las Naciones Unidas), ya no existe en Html5. Usaremos en adelante la etiqueta <abbr>.
<address> ... </address> que indica una dirección de contacto. Su contenido se visualiza por defecto en cursiva y con letra más pequeña. Precisemos que no se realiza ningún enlace hacia la dirección mediante esta etiqueta.
<cite> ... </cite> que indica una cita. Por defecto esta cita se visualiza en cursiva. <code> ... </code> que señala una sintaxis o un código informático. Por defecto su contenido
se visualiza con un tipo de letra de paso fijo. <samp> ... </samp> que pone de relieve un texto de ejemplo. Por defecto su contenido se
visualiza con un tipo de letra de paso fijo. <dfn> ... </dfn> que indica la definición de un término. Por defecto esta definición se
visualiza en cursiva. <kbd> ... </kbd> que indica al usuario las letras del teclado que tiene que pulsar. Por defecto
su contenido se visualiza con un tipo de letra de paso fijo. <var> ... </var> que contiene una variable. Por defecto el texto de la variable se representa
con letra cursiva. <strong> ... </strong> define un texto importante. Por defecto su contenido se visualiza en
negrita. <em> ... </em> indica un texto sobre el que se pretende insistir o hacer énfasis. Por defecto
su contenido se visualiza en cursiva.
Comentario Es posible asignar una representación distinta a la usada por defecto mediante las hojas de estilo.
Ejemplo
<!DOCTYPE html>
<html lang="es">
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
137
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices
diam. Maecenas ligula massa, varius a, semper congue, euismod non,
mi.</p>
<address>
Escrito por Juan Pérez</b>
<a href="mailto:[email protected]">Contactar por e-mail</a><br>
Dirección: BP 58 Ciudadela<br>
Teléfono: 91 654 32 10
</address>
</body>
</html>
15.2. Las nuevas etiquetas semánticas
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
138
Html5 introduce también toda una cantidad de etiquetas semánticas.
Etiqueta <hgroup>
La etiqueta <hgroup> pretende contener un grupo de etiquetas <hx> (al menos dos). Es una fórmula derivada de la etiqueta <header>.
Ejemplo:
<hgroup> <h1>Título del artículo</h1> <h2>Subtítulo del artículo</h2> </hgroup>
Etiqueta <mark>
La etiqueta <mark> remarca parte del texto.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<mark>Html5</mark> reemplaza a Html 4.0.
</body>
</html>
El contenido de esta etiqueta debería subrayarse sobre fondo amarillo, de forma idéntica a como hacen algunos navegadores con los resultados de la búsqueda.
A día de hoy, sólo las versiones más recientes de Google Chrome y de Firefox interpretan esta etiqueta <mark>.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
139
Etiqueta <figure>
La etiqueta <figure> puede usarse para reagrupar elementos tales como imágenes, vídeos o incluso texto que forma parte de una ilustración del contenido principal.
La etiqueta <figcaption>, usada de forma conjunta con la etiqueta <figure>, proporciona una leyenda a los elementos así agrupados.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<h3>Los aerogeneradores</h3>
<p>Un aerogenerador es un generador eléctrico movido por una
turbina accionada por el viento (turbina eólica). En este caso,
la energía eólica proporciona energía mecánica a un rotor hélice
que hace girar el rotor de un generador que convierte la
energía mecánica rotacional en energía eléctrica [Fuente Wikipédia].</p>
<figure>
<img src="aerogenerador1.jpg" alt="">
<img src="aerogenerador2.jpg" alt="">
<figcaption>Algunos aerogeneradores</figcaption>
</figure>
</body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
140
15.3. Las nuevas etiquetas de organización
Estas etiquetas de organización están destinadas principalmente al diseño de la página con
el objetivo de poder distinguir con mayor facilidad las secciones de código.
15.3.1. Etiquetas <header>, <nav>, <footer> y <aside>
Si hiciéramos una síntesis de las páginas Web existentes en la red, verificaríamos que todas ellas comparten, la mayoría de las veces, en totalidad o en parte, los siguientes elementos:
Un encabezado de página con, por ejemplo, un logotipo, un banner, el nombre del sitio, un eslogan o una caja de búsqueda.
Herramientas de navegación, útiles e indispensables para consultar las diferentes
secciones del sitio.
Una zona dedicada al contenido.
Una zona anexa que permite agregar aquellos elementos accesorios al contenido
propiamente dicho, como por ejemplo la publicidad.
Un pie de página con la mención, por ejemplo, del copyright, el mapa del sitio, indicaciones legales, reglas de accesibilidad, etc.
Elementos que, de modo visual, pueden tomar las distintas formas que se muestra a continuación:
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
141
O bien
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
142
Html5 intenta crear nuevas etiquetas para poder identificar de manera más clara y más rápidamente los grandes bloques en el diseño de la página. De este modo:
<header> ... </header> reagrupa los elementos del encabezado de página. Esta etiqueta puede reemplazar de forma natural los<div id="header"> que encontramos con frecuencia.
<nav> ... </nav> indica los elementos de un menú de navegación. <footer> ... </footer> señala los elementos del pie de página. Esta etiqueta puede
reemplazar de forma natural los <div id="footer"> que encontramos con frecuencia. <aside> ... </aside> indica que se trata de elementos anexos al contenido.
Tomemos el siguiente ejemplo de código:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<img src="logo.png">
<h1>Nombre del sitio Web</h1>
<form action="http://www.google.com/search">
<input type="text" size="15" value="">
<input type="submit" value="Buscar">
</form>
<div>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
143
<a href="index.htm">Inicio</a> |
<a href="item1.htm">Item 1</a> |
<a href="item2.htm">Item 2</a> |
<a href="item3.htm">Item 3</a> |
<a href="item4.htm">Item 4</a> |
<a href="contacto.htm">Contacto</a>
</div>
<h2>Nombre de la página</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices
diam.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices
diam.</p>
<hr>
<p>Copyright 201x</p>
</body>
</html>
Se trata de una página bastante corriente con:
Un logotipo. El nombre del sitio Web. Un formulario de búsqueda. Enlaces de navegación dentro del sitio. El título de la página. Contenido. Una línea horizontal. Una mención de copyright.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
144
Se trata de un código bastante corriente, que es válido en Html5, aunque no incorpora
ningún elemento para organizar la página y distinguir las principales secciones del código relativas al
encabezado, los menús de navegación y el pie de página. Esta información la aportan las nuevas
etiquetas Html5 <header>, <nav> y <footer>.
Con las nuevas etiquetas de organización de Html5, este código podría presentar el aspecto siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
145
<body>
<header>
<img src="logo.png">
<h1>Nombre del sitio Web</h1>
<form action="http://www.google.com/search">
<input type="text" size="15" value="">
<input type="submit" value="Buscar">
</form>
</header>
<nav>
<a href="index.htm">Inicio</a> |
<a href="item1.htm">Item 1</a> |
<a href="item2.htm">Item 2</a> |
<a href="item3.htm">Item 3</a> |
<a href="item4.htm">Item 4</a> |
<a href="contacto.htm">Contacto</a>
</nav>
<h2>Nombre de la página</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices
diam.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices
diam.</p>
<footer>
<hr>
<p>Copyright 201x</p>
</footer>
</body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
146
El código es mucho más legible, pudiendo diferenciar de un vistazo aquellos elementos de código relativos al encabezado de página, a las herramientas de navegación y al pie de página.
Esta es la única función que tienen las nuevas etiquetas semánticas en Html5. No cabe buscar en ellas funciones para dar formato a la página o de presentación. No sirven más que para organizar la página y mejorar la lectura del código por parte de los diseñadores y programadores.
La captura de pantalla es totalmente idéntica a la anterior.
Queda al criterio del diseñador la posibilidad de asociar hojas de estilo CSS a estas etiquetas para modificar la presentación.
15.2.2. Etiquetas <section> y <article>
El contenido principal de la página puede organizarse en distintas partes:
La etiqueta <section> indica que una parte del contenido de la página se refiere a un tema concreto.
La etiqueta <article> define un contenido del documento que posee una identidad independiente dentro de la página, como puede ser el artículo de un blog, un post en un foro o un producto en un sitio comercial.
Tomemos como ejemplo un blog con distintos temas abordados de forma diaria.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<h1>Día 1</h1>
<h2>Artículo 1</h2>
<div>Presentación del artículo 1</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices
diam.</p>
<h2>Artículo 2</h2>
<div>Presentación del artículo 2</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
147
diam.</p>
<hr>
<h1>Día 2</h1>
<h2>Artículo 1</h2>
<div>Presentación del artículo 1</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices
diam.</p>
</body>
</html>
Que tiene la siguiente apariencia en el navegador:
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
148
Apliquemos las etiquetas <section> y <article>.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<section>
<h1>Día 1<h1>
<article>
<h2>Artículo 1</h2>
<div>Presentación del artículo 1</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices
diam.</p>
</article>
<article>
<h2>Artículo 2</h2>
<div>Presentación del artículo 2</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices
diam.</p>
</article>
<hr>
</section>
<section>
<h1>Día 2<h1>
<article>
<h2>Artículo 1</h2
<div>Presentación del artículo 1</div>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
149
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices
diam.</p>
</article>
<hr>
</section>
</body>
</html>
Esta organización del código se puede visualizar así:
15.2.3. Ejemplo completo
Organicemos ahora una página completa usando las etiquetas <header>, <nav>, <footer>, <aside>, <section> y <article>.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<header>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
150
<img src="logo.png">
<span>Nombre del sitio Web</span>
</header>
<nav>
<ul>
<li><a href="">Inicio</a></li>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Contacto</a></li>
</ul>
</nav>
<section>
<h1>Asunto de la página</h1>
<article>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices
diam.Lorem ipsum dolor sit amet, consectetuer adipiscing
elit...</p>
</article>
</section>
<aside>
<h3>Archivos</h3>
<ul>
<li><a href="">Agosto 201x</a></li>
<li><a href="">Julio 201x</a></li>
<li><a href="">Junio 201x</a></li>
<li><a href="">Mayo 201x</a></li>
</ul>
</aside>
</body>
</html>
Todo esto, adornado con algunas hojas de estilo, puede dar, por ejemplo, el siguiente resultado:
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
151
16. Algunas propiedades de visualización
16.1. Posicionamiento
Un elemento puede posicionarse de cuatro formas distintas.
1. Posicionamiento estático
Es el posicionamiento normal del elemento según la forma habitual de proceder del navegador.
El posicionamiento estático se determina mediante el atributo:
position: static;
El diseñador no tiene el control. El elemento no puede posicionarse ni reposicionarse y su visibilidad no puede modificarse. Del mismo modo, no es posible utilizar JavaScript para cambiar la posición del elemento.
2. Posicionamiento relativo
Es el posicionamiento de un elemento respecto a su posición normal o estática.
Este elemento permanece en el flujo de los datos aunque está, en cierta medida, descentrado respecto a su posición normal.
La posición se define mediante las coordenadas (x,y) donde:
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
152
x es la distancia respecto al borde izquierdo del elemento padre o de la ventana del navegador (eje horizontal). De este modo,left determina la distancia entre la parte izquierda del elemento y el borde izquierdo de la página y right la distancia entre la parte derecha del elemento y el borde derecho de la página.
y es la distancia respecto al borde superior del elemento padre o de la ventana del navegador (eje vertical). De este modo, topdetermina la distancia entre el borde superior del elemento y el borde superior de la página y bottom la distancia entre el borde inferior del elemento y el borde inferior de la página.
El posicionamiento relativo se determina por:
position: relative; left: valor o %;
top: valor o %;
right:valor o %;
bottom:valor o %;
Comentarios
En la práctica, basta con informar una sola especificación en el eje horizontal (left o right) y otra sobre el eje vertical (top obottom).
Los valores de top, left, right y bottom pueden ser negativos.
Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .normal { width: 180px; border: 2px solid gray; text-align: center;} .relativa { position: relative; top: 30px; left: 60px; width: 180px; border: 2px solid gray; text-align: center;} </style> </head> <body>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
153
<div class="normal"> Posición normal estática
</div> <p>. . . . . . . . . . . . . . . . . . . . .</p> <div class="relativa"> Posición relativa </div> </body> </html>
3. Posicionamiento absoluto
El posicionamiento absoluto crea un elemento independiente del resto del documento. Los elementos definidos con posición absoluta se retiran del flujo normal y se posicionan en el lugar exacto definido por el diseñador.
La posición se define mediante las coordenadas (x,y) donde:
x es la distancia respecto al borde izquierdo del elemento padre o de la ventana del navegador (eje horizontal). De este modo,left determina la distancia entre el borde izquierdo del elemento y el borde izquierdo de la página y right, la distancia entre el borde derecho del elemento y el borde derecho de la página.
y es la distancia respecto al borde superior del elemento padre o de la ventana del navegador (eje vertical). De este modo, topdetermina la distancia entre el borde superior del elemento y el borde superior de la página y bottom la distancia entre el borde inferior del elemento y el borde inferior de la página.
El posicionamiento absoluto se determina por:
position: absolute; left: valor o %;
top: valor o %;
right:valor o %;
bottom:valor o %;
Ejemplo
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
154
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style type="text/css">
.absoluta { position: absolute;
left: 50px; top: 50px;
width: 180px;
border: 2px solid black;
text-align: center;}
</style>
</head>
<body>
<div class="absoluta">
Posición absoluta
</div>
</body>
</html>
Comentarios
El posicionamiento absoluto tiene el riesgo de no mostrar correctamente la página en resoluciones de pantalla diferentes a la utilizada en tiempo de diseño puesto que los elementos que se hayan posicionado mediante esta propiedad pueden superponerse sobre los elementos del flujo normal de la página.
Conviene recordar que los navegadores agregan por defecto un margen al cuerpo de la página Html y que este margen por defecto varía de un navegador a otro. Por ello es prudente, en caso de usar posicionamiento absoluto, especificar los márgenes de la etiqueta <body>.
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
155
4. Posicionamiento fijo
El posicionamiento fijo también crea un elemento independiente del que se puede definir la posición exacta. En este caso el elemento se mantiene fijo aunque el documento se desplace o se deslice en pantalla.
position: fixed;
Los navegadores han ignorado durante mucho tiempo este tipo de posicionamiento fijo, aunque a día de hoy ya está perfectamente integrado en los navegadores más usuales.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style type="text/css">
.fija { position: fixed;
top: 50%;
left: 50px;
width: 180px;
border: 2px solid black;
text-align: center;}
</style>
</head>
<body>
<div class="fija">
Posición fija
</div>
</body>
</html>
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
156
16.2. Flotar
La propiedad float permite retirar un elemento de tipo caja del flujo normal para situarlo lo más a la derecha o lo más a la izquierda posible dentro de su elemento padre, es decir su contenedor.
float: right;o bien
left; o bien
none;
Comentarios
El valor right alinea a la derecha el elemento indicado, empujando a los demás elementos hacia la izquierda.
El valor left alinea a la izquierda el elemento indicado, empujando a los demás elementos hacia la derecha.
El valor none no especifica nada y deja la gestión al navegador. La posición float no puede aplicarse en caso de posicionamiento absoluto.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
</head>
<body>
<div style="float:right;">
<img src="cup.png">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
IES Luis Vives UT2 Lenguajes para la visualización de la información Curso 2012-2013
157
non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices
diam. Maecenas ligula massa, varius a, semper congue, euismod non,
mi.</p>
</div>
</body>
</html>
El elemento contenedor es la división box. La propiedad de estilo float: right; fuerza a la imagen a posicionarse en la parte derecha del contenedor. El texto se distribuye a la izquierda.
Top Related