MARCAS Tema 1 (Parte 2)

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


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


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


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


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.

http://www.la-grange.net/w3c/html4.01/charset.html


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>



</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>



</head>

<body>

<p>Séneca afirma:

<q>Admira a quien lo intenta,

aunque fracase.</q>

</p>

</body>

</html>


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>



</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.


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>


<dt>Término 3</dt>


10


</dl>

Ejemplo

<!DOCTYPE html>

<html lang="es">

<head>



</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>.


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>



</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="">


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".


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.


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;}


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


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:


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

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


18

<!DOCTYPE html>

<html lang="es">

<head>



<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.


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


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:


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>



</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>




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.


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>



<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>



</head>

<body>

<a>

<img src="Globo-terraqueo.jpeg" width="120" height="120" alt="Globo

terraqueo" style="border: none;">

</a>

</body>

</html>


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.


25

Ejemplo 1

<!DOCTYPE html>

<html lang="es">

<head>




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>




div { width: 250px;

height: 200px;

border: 1px solid gray;

background-image: url(papel3.png);


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.


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.


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>

http://www.w3schools.com/html/


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.


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.


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.


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>


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>


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.


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.


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.


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>




.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">


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


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>


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>


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.


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>



<body>

<img src="flor.png" style="opacity: 1;

filter:alpha(opacity=100)">

<img src="flor.png" style="opacity: 0.6;


<img src="flor.png" style="opacity: 0.3;


</body>

</html>


43

Ejemplo 2

Ilustremos la translucidez.

<!DOCTYPE html>

<html lang="es">

<head>




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>


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>



<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>


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


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


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.


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.


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>


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>


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>


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".


53

En el archivo Página 1:

<!DOCTYPE html>

<html lang="es">

<head>



</head>

<body>

Ir a <a href="pagina2.htm" target="_blank">Página 2</a>

</body>

</html>


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>



</head>

<body>

<a href="pagina2.htm" title="Enlace al capítulo 2">Sigue</a>

</body>

</html>


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).


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.


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.


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>


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>



<style>

table { text-align: center;


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>


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>



<style>

table { border: 1px solid black;


width: 250px;}

td { border: 1px solid black;

width: 33%;}

</style>


61

</head>

<body>

<table>

<tr>

<td>Celda 1</td><td>Cel 2</td><td>3</td>

</tr>

<tr>


</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>



<style>



width: 290px;}


width: 33%;}

</style>

</head>

<body>

<table>

<tr>

<td style="text-align: left;">Producto 1</td>

<td style="text-align: center;">En stock</td>


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>



<style>


63



width: 140px;}


vertical-align:top;}

</style>

</head>

<body>

<table>

<tr>

<td style="width: 10%;">1</td>

<td>xxxxx xxxxx xxxxx xxxxx xxxxx</td>

</tr>

<tr>


<td>xxxxx xxxxx</td>

</tr>

<tr>


<td>xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx</td>

</tr>

</table>

</body>

</html>


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>



<style>



width: 250px;}


padding: 15px;}

</style>

</head>

<body>

<table>

<tr>

<td>1</td><td>2</td><td>3</td>

</tr>

<tr>


</tr>

</table>

</body>

</html>


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>



<style>



width: 250px;}


width: 33%;}

</style>

</head>

<body>

<table>

<tr>


</tr>

<tr>


</tr>

</table>

</body>

</html>


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>



<style>

table { text-align: center;



width: 250px;}


.color { background-color: #99ccff;}

</style>

</head>

<body>

<table>

<tr>

<td>1</td>

<td class="color">2</td>

</tr>


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>


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>


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>


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>


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>


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>


73

<meta charset="iso-8859-1"> <style>



width: 250px;}


colgroup { background-color : #99ccff;


</style>

</head>

<body>

<table>

<colgroup span="2"></colgroup>

<tr>


</tr>

<tr>


</tr>

<tr>


</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>



<style>



width: 250px;}


#columnas { background-color : #99ccff;


</style>

</head>

<body>

<table>


74

<colgroup span="1"></colgroup>

<colgroup id="columnas" span="2"></colgroup>

<tr>


</tr>

<tr>


</tr>

<tr>


</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.


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>


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.


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>


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> |


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>


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


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


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>



</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;">


</div>

<p>max-width</p>

<div style="border: 2px solid black;

width: 250px;

max-width: 150px;">


</div>

</body>

</html>


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


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.


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>




.body { margin: 0px;}

.bloque { border: 1px solid black;

margin: 20px 20px 0px 20px;


</style>

</head>

<body>

<div class="bloque">

margen exterior

</div>

</body>

</html>


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


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.


85

Ejemplo

<!DOCTYPE html>

<html lang="es">

<head>




.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


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>



87



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);


</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;


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>




h1 { border-style: solid;

border-color: rgb(125,165,205);

border-width: thin thick;


</style>

</head>

<body>

<h1>Html5 + CSS3</h1>

</body>

</html>


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.


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>




91


h2 { border-style: double;

border-width: 10px;

border-color: gray;


</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.


92

Ejemplo

<!DOCTYPE html>

<html lang="es">

<head>




h1 { border: dotted 1px black;


</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.


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>



</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


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.


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>



</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.


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">


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.


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>


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>.


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.


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>


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"


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>


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".


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".


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>



</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>


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.


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>


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>



</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>.


107

<!DOCTYPE html>

<html lang="es">

<head>



</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>



</head>

<body>

<form action="">


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">.


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>



</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>.


name

Especifica un nombre para el botón.


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>



</head>

<body>

<button><img src="ok.png" alt="Enviar" width="15" height="15">

Enviar

</button>

</body>

</html>


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>



</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.


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>


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>


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>


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>



</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>


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>



</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.


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.


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>



</head>


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.


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>




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.


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>


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>



<style>

fieldset { border : 1px solid black;}

</style>

</head>

<body>


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>


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>



<style>

fieldset { border : 1px solid black;}

</style>

</head>


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>


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.


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>



</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:


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>


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.


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.


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>



</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.


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


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


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.


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>



</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


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"’.


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">


137

<head>



</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


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>



</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>.


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>



</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>


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:


141

O bien


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>



</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>


143

<a href="index.htm">Inicio</a> |

<a href="item1.htm">Item 1</a> |




<a href="contacto.htm">Contacto</a>

</div>

<h2>Nombre de la página</h2>




diam.</p>




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.


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>



</head>


145

<body>

<header>


<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="contacto.htm">Contacto</a>

</nav>

<h2>Nombre de la página</h2>




diam.</p>




diam.</p>

<footer>

<hr>

<p>Copyright 201x</p>

</footer>

</body>

</html>


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>



</head>

<body>

<h1>Día 1</h1>

<h2>Artículo 1</h2>

<div>Presentación del artículo 1</div>




diam.</p>







147

diam.</p>

<hr>

<h1>Día 2</h1>






diam.</p>

</body>

</html>

Que tiene la siguiente apariencia en el navegador:


148

Apliquemos las etiquetas <section> y <article>.

<!DOCTYPE html>

<html lang="es">

<head>



</head>

<body>

<section>

<h1>Día 1<h1>

<article>






diam.</p>

</article>

<article>






diam.</p>

</article>

<hr>

</section>

<section>

<h1>Día 2<h1>

<article>

<h2>Artículo 1</h2



149




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>



</head>

<body>

<header>


150


<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="">Contacto</a></li>

</ul>

</nav>

<section>

<h1>Asunto de la página</h1>

<article>




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:


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:


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>


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


154

<!DOCTYPE html>

<html lang="es">

<head>




.absoluta { position: absolute;

left: 50px; top: 50px;

width: 180px;



</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>.


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>




.fija { position: fixed;

top: 50%;

left: 50px;

width: 180px;



</style>

</head>

<body>

<div class="fija">

Posición fija

</div>

</body>

</html>


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>



</head>

<body>

<div style="float:right;">

<img src="cup.png">



157



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.

MARCAS Tema 1 (Parte 2)

Documents

Transcript of MARCAS Tema 1 (Parte 2)