MARCAS Tema 1 (Parte 2)

LENGUAJES PARA LA VISUALIZACIN DE INFORMACIN
HTML5 Y HOJAS DE ESTILO (CSS3) (Basado en el libro del mismo ttulo de Ediciones eni)
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin
Curso 2012-2013
ndice
LENGUAJES PARA LA VISUALIZACIN DE INFORMACIN ....................................................................... 1 1. 2. 3. 4. ESTRUCTURA BSICA DE UN DOCUMENTO ................................................................................ 6 CARACTERES ESPECIALES EN HTML5........................................................................................... 6 CITAS EN HTML5 .......................................................................................................................... 7 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 definicin .............................................................................................................. 9 5. DIVISIONES DE PGINA ............................................................................................................. 10 5.1 Las etiquetas de renderizado o generacin de imagen CSS en bloque (block). ...................... 10 5.2. Las etiquetas de renderizado CSS en lnea (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. Notacin de los colores ......................................................................................................... 16 6.6. Incorporacin del estilo .......................................................................................................... 17 6.7. Nocin de cascada (orden de prioridad) ................................................................................ 20 7. IMGENES ................................................................................................................................. 20 7.1. 7.2. 7.3. 7.4. 7.5. 8. Insertar un color de fondo................................................................................................. 21 Insertar una imagen de fondo ........................................................................................... 23 Insertar un enlace sobre una imagen ................................................................................ 23 Posicionamiento de la imagen de fondo ........................................................................... 24 Los formatos grficos ms utilizados en los navegadores son: ......................................... 26
HOJAS DE ESTILO (CSS): DAR FORMATO AL TEXTO ................................................................... 28 8.1. Negrita .................................................................................................................................... 28 8.2. Cursiva .................................................................................................................................... 29 8.3. Tamao de letra ..................................................................................................................... 29 8.4. Color del texto ........................................................................................................................ 30 8.5. Alineacin ............................................................................................................................... 30 8.6. Alineacin vertical .................................................................................................................. 31 2
Curso 2012-2013
8.7. Subrayado ............................................................................................................................... 34 8.8. Transformacin ...................................................................................................................... 35 8.9. Indentacin............................................................................................................................. 36 8.10. Separadores horizontales ..................................................................................................... 37 8.11. Columnas mltiples .............................................................................................................. 39 9. HOJAS DE ESTILO (CSS3) ............................................................................................................ 40 9.1. 9.2. 10. Fondos mltiples ............................................................................................................... 40 Opacidad y transparencia .................................................................................................. 41 ENLACES ................................................................................................................................ 45 Insertar un enlace .......................................................................................................... 46 Enlaces a una pgina situada en la misma carpeta ....................................................... 47 Enlaces a una pgina situada en otra carpeta ............................................................... 47
10.1. 10.2. 10.3.
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. 10.5. 10.6. 10.7. 10.8. 10.9. 10.10. 11. Enlaces al interior de una pgina .................................................................................. 49 Enlace hacia un ancla situada en otra pgina ............................................................... 51 Enlaces a otro sitio ........................................................................................................ 51 Enlace a una direccin email ......................................................................................... 51 Enlaces para descargar un archivo ................................................................................ 52 Enlaces hacia una ventana especfica............................................................................ 52 Descripcin acerca del enlace ....................................................................................... 54
TABLAS................................................................................................................................... 55 Creacin de una tabla .................................................................................................... 55
11.1.
11.2. Ancho de la tabla .................................................................................................................. 55 11.3. Bordes de la tabla ................................................................................................................ 56 11.4. Alineacin de la tabla ........................................................................................................... 58 11.5. Alineacin de las celdas de la tabla ...................................................................................... 59 11.6. Celdas de la tabla.................................................................................................................. 60 A. Fusin de columnas .............................................................................................................. 68 B. Fusin de filas ......................................................................................................................... 69 11.7. Leyenda de la tabla............................................................................................................... 71 11.8. Agrupar columnas ................................................................................................................ 72 11.9. Estructuracin de la tabla..................................................................................................... 74 3
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin 12.
Curso 2012-2013
PROPIEDADES DE CAJA .......................................................................................................... 76 Concepto de modelo de caja o bloque.......................................................................... 76 Elemento en bloque o en lnea ..................................................................................... 78 Anchura y altura ............................................................................................................ 80 Mrgenes externos........................................................................................................ 82 Mrgenes internos ........................................................................................................ 84 Color del borde .............................................................................................................. 85 Grosor del borde ........................................................................................................... 87 Estilo del borde .............................................................................................................. 89 Escritura abreviada del borde ....................................................................................... 91
12.1. 12.2. 12.3. 12.4. 12.5. 12.6. 12.7. 12.8. 12.9. 13.
FORMULARIOS....................................................................................................................... 92 Declarar el formulario ................................................................................................... 93 Campo de texto ............................................................................................................. 95 rea de texto ................................................................................................................. 98 Lista desplegable ......................................................................................................... 100 Botones de seleccin nica (radio) ............................................................................. 103 Botones de seleccin mltiple (checkbox) .................................................................. 104 Botn de envo ............................................................................................................ 106 Botn de anulacin...................................................................................................... 107 Botn de accin ........................................................................................................... 109 Campos de transferencia de archivos ......................................................................... 111 Campos de contrasea ................................................................................................ 112 Organizacin de los campos de formulario ................................................................. 113 Etiquetado de los campos de formulario .................................................................... 114 Campo de texto para la direccin de correo electrnico ............................................ 116 Campo de texto con formato numrico ...................................................................... 118 Campo de texto con formato de fecha ....................................................................... 119 Una aplicacin completa ............................................................................................. 123
13.1. 13.2. 13.3. 13.4. 13.5. 13.6. 13.7. 13.8. 13.9. 13.10. 13.11. 13.12. 13.13. 13.14. 13.15. 13.16. 13.17. 14.
MULTIMEDIA ....................................................................................................................... 128
14.1. Insertar un archivo de audio .............................................................................................. 128 14.2. Insertar un archivo de vdeo............................................................................................... 133 15. Etiquetas semnticas y de organizacin.............................................................................. 136 Antiguas etiquetas semnticas .................................................................................... 136 Las nuevas etiquetas semnticas ................................................................................ 137 4
15.1. 15.2.
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin 15.3. 16.
Curso 2012-2013
Las nuevas etiquetas de organizacin ......................................................................... 140
Algunas propiedades de visualizacin ................................................................................. 151 Posicionamiento .......................................................................................................... 151
16.1.
1. Posicionamiento esttico ........................................................................................................... 151 2. Posicionamiento relativo............................................................................................................ 151 3. Posicionamiento absoluto .......................................................................................................... 153 4. Posicionamiento fijo ................................................................................................................... 155 16.2. Flotar ........................................................................................................................... 156
Curso 2012-2013
1. ESTRUCTURA BSICA 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 codificacin por defecto de numerosos protocolos de red, garanta de una excelente interoperabilidad. UTF-8 Aplicacin de la codificacin Unicode, se presenta como la solucin del futuro. Su uso est frenado a causa de ciertos problemas en algunos lenguajes de programacin (PHP).
2. CARACTERES ESPECIALES EN HTML5

Existe una lista de elementos a evitar en la codificacin 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 carcter. Se codificar mediante & En principio, si el carcter 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 cdigo. Por el contrario, con la codificacin iso-8859-1, el signo no existe, siendo necesario usar obligatoriamente la entidad €. Para saber ms acerca de este tema, se pueden consultar las indicaciones de W3C en la siguiente direccin: www.la-grange.net/w3c/html4.01/charset.html. 6
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin Es recomendable especificar bien el charset.
Curso 2012-2013
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 lnea antes y otro despus, igual que los prrafos, y con un ligero desplazamiento respecto al margen izquierdo.
Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Sneca afirma:<br> <blockquote>Admira a quien lo intenta,<br> aunque fracase.</blockquote> </body> </html>
Solucin: Sneca afirma: Admira a quien lo intenta, aunque fracase.

Existe tambin la etiqueta <q> ... </q> para las citas. sta no muestra espacio antes ni despus, ni tampoco desplazamiento a la derecha. En este caso, la cita se visualiza entre comillas.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <p>Sneca afirma: <q>Admira a quien lo intenta, aunque fracase.</q> </p> </body> </html>
Curso 2012-2013
Sneca afirma: Admira a quien lo intenta, aunque fracase.
4. LISTA DE ELEMENTOS
Las listas permiten estructurar diversos tipos de contenido. En funcin de la informacin que contienen se clasifican en: 1. Listas numeradas u ordenadas. 2. Listas sin numerar o desordenadas. 3. Listas anidadas. 4. Listas de definicin. 4. 1.- Las listas numeradas representarn los elementos de la lista, numerando cada uno de ellos, segn el lugar que ocupan en la lista. Para este tipo se utiliza la etiqueta <OL></OL>. Cada uno de los elementos de la lista ir precedido de la etiqueta <LI>.
Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Listas en Html5: <ol> <li>Listas ordenadas</li> <li>Listas no ordenadas</li> <li>Listas anidadas</li> <li>Listas de definicin</li> </ol> </body> </html>
El atributo start permite empezar la numeracin en una cifra distinta al 1. EJ: <ol start="3" reversed> el atributo reversed no est implementado en ningn navegador. 4.2. Las listas sin numerar representan los elementos de la lista con una marca que antecede a cada uno de ellos. 8
Curso 2012-2013
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 vaco) la determina el navegador. Con las hojas de estilo CSS se puede modificar la forma de las marcas o reemplazarlas por imgenes. 4.3. Las listas anidadas Nada impide elaborar listas ordenadas y listas no ordenadas anidadas. La codificacin es, simplemente, un poco ms compleja. Ejemplo: Una lista numerada en la que se anida una lista no ordenada. <body> <ol> <li>Ttulos</li> <li>Listas en Html5 <ul> <li>Listas ordenadas</li> <li>Listas no ordenadas</li> <li>Listas anidadas</li> <li>Listas de definicin</li> </ul></li> <li>Tablas en Html5</li> <li>Formularios en Html5</li> </ol> </body>
4.4. Las listas de definicin muestran los elementos tipo Diccionario, o sea, trmino y definicin. Se utiliza para ellas la etiqueta <dl></dl> para definir la lista. Entre estas etiquetas, se declara lo que se llama el trmino mediante la etiqueta <dt> ... </dt> seguida de su definicin en la etiqueta <dd> ... </dd>. La estructura general de una lista de definicin es la siguiente: <dl> <dt>Trmino 1</dt> <dd>Definicin 1</dd> <dt>Trmino 2</dt> <dd>Definicin 2</dd> <dt>Trmino 3</dt> 9
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <dd>Definicin 3</dd> </dl>
Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <p>Etiquetas de lista disponibles:</p> <dl> <dt>ol</dt> <dd>Lista ordenada</dd> <dt>ul</dt> <dd>Lista no ordenada</dd> <dt>dl</dt> <dd>Lista de definicin</dd> </dl> </body> </html>
Curso 2012-2013
5. DIVISIONES DE PGINA
El navegador interpreta cada etiqueta Html y determina la visualizacin a travs de las hojas de estilo CSS aplicadas por defecto. Existen dos grandes grupos de etiquetas: 5.1 Las etiquetas de renderizado o generacin de imagen CSS en bloque (block). stas ocupan, por defecto, toda la longitud de la ventana del navegador. Se sitan as unas debajo de las otras. Generalmente, el navegador inserta automticamente 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 prrafo. Los principales elementos de divisin de tipo bloque son: Etiquetas de ttulo <hx> ... </hx>. Etiquetas de prrafo <p> ... </p>. Etiquetas de cita <blockquote> ... </blockquote>. 10
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin La etiqueta <hr> que inserta una lnea 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 declaracin de formularios <form> ... </form>.
Curso 2012-2013
La etiqueta <div> ... </div> concebida especialmente para introducir una divisin sin tener que usar alguna de las etiquetas mencionadas antes.
5.2. Las etiquetas de renderizado CSS en lnea (inline). Al contrario que los elementos de bloque, los elementos en lnea se sitan siempre uno al lado del otro, permaneciendo en el mismo flujo de texto. De este modo, el cdigo: texto en <b>negrita</b> y en <i>cursiva</i> se escribe en una sola lnea, sin interrumpir el flujo del texto: texto en negrita y en cursiva. Las principales etiquetas en lnea 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 lnea. La etiqueta <a> para los enlaces. La etiqueta <img> para las imgenes. Las etiquetas de campos de formulario <input>, <select> ... </select> y <textarea> ... </textarea>. La etiqueta <span> para introducir una divisin en lnea en el texto.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <h1>Html5</h1> <h3>Documento Html5 mnimo</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 artculo:</p> <form action="">
11

<textarea rows="2" cols="25"></textarea><br> <input value="Enviar" type="submit"> <input value="Deshacer" type="reset"> </form> </body> </html>
Curso 2012-2013
6. INICIO A LAS HOJAS DE ESTILO
6.1 Propiedades de estilo

Las hojas de estilo abarcan todo aquello relacionado con la presentacin del documento Html como el color, la alineacin, el tamao, los bordes, los fondos o el interlineado.
Aunque las hojas de estilo no son sensibles a la distincin entre maysculas y minsculas, es conveniente que su codificacin se realice en minsculas.
La declaracin de un estilo se hace mediante el binomio propiedad: valor;
Ejemplo: text-align: center; Se interpreta como: "alinear el texto de forma centrada". 12
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin background-color: red; "asignar al color de fondo el valor rojo".
Curso 2012-2013
Detallemos esta notacin: Propiedad indica el elemento de presentacin que se ve implicado; por ejemplo color para el color, text-align para la alineacin, border para los bordes, font-size, para el tamao de la fuente, background para el fondo. Valor especifica una palabra clave, un porcentaje o un tamao, en funcin de la propiedad a la que est asignado. El punto y coma final es obligatorio e indica que se ha terminado la declaracin 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 cdigo. 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 cdigo Html que se vern afectados por el efecto de presentacin. stos pueden ser de distintos tipos:
6.2.1 Selectores bsicos

El primer selector que nos viene a la mente es la etiqueta h1. De este modo, podemos, por ejemplo, "enganchar" la declaracin de estilo anterior (alinear el texto de forma centrada) a la etiqueta <h1>. Ejemplo La sintaxis es: selector { propiedad: valor;} 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 declaracin de estilo se efecta entre dos llaves. No hay que olvidar la llave de cierre ya que, en caso contrario, el navegador no tendr en cuenta la declaracin de estilo. 13
Curso 2012-2013
De este modo, todas las etiquetas <h1> se alinearn de forma centrada.
6.2.2. Selectores de clase

En ciertas situaciones, no queremos agregar un efecto de presentacin a todas las etiquetas de un tipo determinado, sino a ciertas etiquetas elegidas libremente. Las hojas de estilo cuentan para ello con la nocin de clases (class) que permite al diseador definir sus propios selectores. De ah el nombre de selector universal. La etiqueta a la que se quiere aplicar la declaracin de estilo se distinguir de las dems por el atributo class="nombre_clase" Por ejemplo: <h1 class="efecto1"> ... </h1>. Declaracin de estilo: .nombre_clase { propiedad: valor;} El nombre de la clase, precedido de un punto y seguido de la declaracin de estilo.
Ejemplo .efecto1 {text-align: center;} Aqu atributo class="efecto1" estar centrada. nicamente la etiqueta <h1> con el
.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>
Adems, esta etiqueta de presentacin podr aplicarse a otras etiquetas del cdigo como por ejemplo un prrafo 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 ms que a un nico elemento de la pgina. Este elemento nico se identifica mediante el atributo id="nombre_ identificador siendo, por ejemplo, <h2 id="titulo2"> ... </h2>. Declaracin de estilo: Ejemplo: #identificador { propiedad: valor;}
#titulo2 {text-align: center;}

14
Curso 2012-2013
#rojo {background-color: red;}

Caractersticas
Un identificador id no puede figurar ms de una vez en el documento Html con el mismo nombre. En caso contrario, el resto del cdigo ser incorrecto! <p id="rojo"> ... </p> ... <p id="rojo"> ... </p>
Un documento s puede contener varios identificadores id con nombres diferentes aunque slo pueden utilizarse una nica vez. Es posible mezclar declaraciones de estilo class e id. El nombre de un identificador puede contener letras, nmeros, el guin y el carcter de subrayado.
6.3. Comentarios
Las hojas de estilo como todo lenguaje de definicin o de programacin permiten insertar comentarios para facilitar as la comprensin del cdigo 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 centmetros, en milmetros, en puntos, en picas, en pxeles o en porcentaje. Tambin se distingue entre valores relativos, que pueden variar segn el ordenador utilizado, y valores absolutos, que permanecen constantes sea cual sea el dispositivo o el software utilizado.
Los valores absolutos son: Unidad pt Nombre punto Descripcin 72 pt = 1 inch Valor entero Ejemplo 48pt
15

Unidad pc mm cm in pica milmetro centmetro pulgada (inch) Nombre Descripcin 1 pc = 12 pt 1 mm = .24 pc 1 cm = 10 mm 1 in = 2.54 cm Valor real entero entero real
Curso 2012-2013
Ejemplo 4.5pc 60mm 6cm 0.1in
Los valores relativos son: Unidad em Descripcin Unidad relativa que se basa en el tamao del tipo de letra por defecto de la pgina. Unidad relativa a la altura de la letra minscula en el elemento seleccionado. Un pxel es la parte ms pequea de una imagen. Depende de la resolucin de pantalla. Porcentaje. Valor real Ejemplo 1.8em
ex
real
1.3ex
px
entero
220px
entero
80%
Comentarios No puede dejarse un espacio entre el valor y la unidad. Si se deja algn 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 tamao del tipo de letra, y as lograr una estabilidad mayor entre los distintos sistemas operativos y navegadores.
6.5. Notacin de los colores

Las hojas de estilo CSS proporcionan mltiples notaciones para declarar un color. stas son: La notacin hexadecimal clsica, es decir #ffcc00. Esta notacin es muy conocida para aquellos que estn habituados a los colores en Html. Define el color, o ms bien los tres componentes del color: rojo (r de red), verde (g de green) y azul (b de blue), mediante una notacin hexadecimal de tipo #rrggbb. La notacin decimal, por ejemplo, color: rgb(0, 0, 255). El cdigo RGB del color no se codifica segn su valor hexadecimal sino por un nmero comprendido entre 0 y 255. Es el equivalente decimal a la notacin hexadecimal. La notacin en porcentaje, por ejemplo, color: rgb(25%, 50%, 0%). El valor 0% significa la ausencia de dicho componente y 100% su valor mximo. Palabras clave, por ejemplo, color: red. Ver archivo: Paleta de colores. A estas notaciones, la especificacin CSS3 aade:
16
Curso 2012-2013
La notacin RGBa, que obedece las mismas reglas de funcionamiento que la notacin clsica RGB,
sabiendo que la parte inicial de la declaracin 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 notacin HSL (Hue Saturation Luminance), en castellano Tonalidad, Saturacin, Luminosidad. La notacin HSL consiste en tres valores. El primero se expresa en grados, de 0 a 359 (aunque el smbolo de grado no aparece en la notacin). Se corresponde con un color de la rueda cromtica: 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 saturacin y la luminosidad. Por ejemplo, color: hsl(0, 100%, 50%) para el rojo. La notacin 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 ms completa referente a la codificacin de colores, los siguientes sitios Web le sern 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. Incorporacin del estilo

Existen mltiples formas de incorporar las declaraciones de estilo en una pgina Html. De momento, vamos a indicar las elementales.
6.6.1. Estilo en lnea.

La declaracin de estilo se agrega directamente a una etiqueta concreta del cdigo Html mediante el atributo style. Ejemplo <h1 style="text-align: center;"> ... </h1> Esta forma bsica no respeta la regla de separacin de contenido y presentacin. 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
17

<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> h1 { color: red;} .efecto1 { padding-left: 20px; font-style: italic;} </style> </head> <body> <h1>Titulo 1 en rojo</h1>
Curso 2012-2013
<h2 class="efecto1">Subttulo en cursiva e identacin izquierda</h2> <h1>Ttulo 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 separacin entre contenido y presentacin. Adems es posible crear una hoja de estilo que se aplica no slo a una nica pgina Html sino a un conjunto de pginas en un sitio o en una aplicacin. Esta tcnica emplea dos archivos:
Un archivo que contiene la declaracin de estilo. Este archivo tiene la extensin .css. Un documento Html que contiene un enlace hacia el archivo CSS as creado.
18

A)La hoja de estilo externa
Curso 2012-2013
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 extensin .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 cuestin. <link rel="stylesheet" type="text/css" href="ejemplo.css"> Veamos esta lnea de cdigo:

Ejemplo El cdigo del archivo de la hoja de estilo ejemplo.css es simplemente: h1 { text-decoration: overline;} El cdigo 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>Ttulo de nivel 1</h1> </body> </html> Todos los ttulos h1 de todas las pginas que hagan referencia a esta hoja de estilo aparecern subrayados por encima. Solucin: _____________ Ttulo de nivel 1
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 clsica 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, adems, una hoja de estilo interna.
19
Curso 2012-2013
6.7. Nocin de cascada (orden de prioridad)

En los apartados anteriores hemos visto varias definiciones de estilo, bien en lnea, interna(s) o externa(s). En caso de que exista una competencia entre varios elementos de estilo, interviene la nocin de "cascada" (la palabra Cascading en Cascading Style Sheets) u orden de prioridad. El navegador toma primero en consideracin las especificaciones de las hojas de estilo externas (con la extensin css), a continuacin las hojas de estilo internas (aquellas situadas en el interior de las etiquetas <head>) y a continuacin las hojas de estilo en lnea (aquellas ligadas a un elemento Html5). De este modo, en caso de conflicto entre una especificacin de estilo definida al mismo tiempo en una hoja de estilo externa y en una hoja de estilo interna, la especificacin 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 declaracin en lnea, 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 lnea. Los estilos declarados en la hoja de estilo en lnea tienen, por tanto, la prioridad ms alta.
7. IMGENES
Para incluir una imagen en nuestra pgina Web, utilizaremos la etiqueta <img>, que es nica, sin etiqueta de cierre. En Html5, la etiqueta imagen <img> slo 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 direccin relativa del archivo de la imagen que tiene que mostrarse en la pgina. De este modo, para una imagen situada en la misma carpeta que la pgina 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 notacin Xhtml 1.0, tambin admitida. Los atributos opcionales de la etiqueta imagen <img>son: 20
Curso 2012-2013
Los atributos height y width. Estos atributos permiten definir respectivamente, en pxeles, el alto y el ancho de la imagen en pantalla. La definicin de estos atributos hace que el navegador reserve un lugar para la imagen antes de descargarla completamente, permitindole as continuar con la composicin de la pgina y la visualizacin del texto de la misma. Definiendo las dimensiones de la imagen se acelera la carga de la pgina. Si bien son opcionales, estos atributos estn considerados como esenciales por parte de los diseadores 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 descripcin de la imagen. Este texto est pensado principalmente para las personas invidentes, pues ser ledo por las interfaces vocales. Ms recientemente, el contenido del atributo alt se usa en los motores de bsqueda (Google por ejemplo) para indexar y clasificar el contenido de un sitio Web y alimentar su base de datos de imgenes.
Los atributos de presentacin
align, border, hspace y vspace, ya deprecados (deprecated)
en Html 4.0, no se han mantenido en Html5. Ser preciso usar hojas de estilo CSS para reemplazar estos atributos desaparecidos.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <img src="globo.jpg" width="120" height="120" alt="Globo terrestre"> </body> </html>
7.1. Insertar un color de fondo

Es preciso usar de forma obligatoria propiedades de estilo CSS, background-color en este caso. Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> 21
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <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 divisin <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>
Curso 2012-2013
El valor transparent, cuando est aplicado al fondo de la pgina, retoma el valor por defecto del navegador.
22
Curso 2012-2013
7.2. Insertar una imagen de fondo

Es preciso usar de forma obligatoria propiedades de estilo CSS, background-image en este caso. Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type=text/css> body {background-image: url(bg.gif);} </style> </head> <body> Creando una imagen de fondo </body> </html>
7.3. Insertar un enlace sobre una imagen

Los enlaces desde una imagen se realizan simplemente insertndola entre las etiquetas de enlace <a> ... </a>. Algunos navegadores continan dibujando un borde alrededor de la imagen (poco esttico) para sealar el enlace. Para quitar este borde, es preciso utilizar una declaracin de estilo. Aunque, de momento, basta con agregar a la etiqueta <img> la declaracin style="border: none;". El cdigo completo es:
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <a> <img src="Globo-terraqueo.jpeg" width="120" height="120" alt="Globo terraqueo" style="border: none;"> </a> </body> </html>
23
Curso 2012-2013
7.4. Posicionamiento de la imagen de fondo

Esta propiedad nos permite posicionar con precisin la imagen de fondo de un elemento, a nivel de pxel. 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 declaracin de estilo slo tiene sentido si la imagen de fondo se ha definido mediante la declaracin background-image: url (archivo_imagen) de dir. relativa. Generalmente slo se utiliza esta declaracin cuando la imagen no est repetida (background-norepeat). El primer valor indica la posicin 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 tamao 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 automtica al valor por defecto center o 50%. Es posible combinar los valores en porcentaje y en longitud. Por ejemplo, la declaracin background-position: 50px 30%; es correcta. Los valores left (izquierda), center (centro) o right (derecha) determinan la posicin horizontal. Los valores top (arriba), center (centro), bottom (abajo) determinan la posicin vertical. Los valores negativos tambin estn aceptados.
24

Ejemplo 1 <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> div { width: 250px; height: 200px; border: 1px solid gray; background-image: url(papel1.png); background-repeat: no-repeat; background-position: 20px 20px;} </style> </head> <body> <div> </div> </body> </html>
Curso 2012-2013
Ejemplo 2 <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> div { width: 250px; height: 200px; border: 1px solid gray; background-image: url(papel3.png);
25

background-repeat: no-repeat; background-position:bottom right;} </style> </head> <body> <div> </div> </body> </html>
Curso 2012-2013
7.5. Los formatos grficos ms utilizados en los navegadores son:

1. GIF 2. PNG 3. JPG que ocupan poco espacio y se cargan rpidamente.
El formato GIF (Graphics Interchange Format)

Caractersticas: El formato GIF slo permite codificar imgenes con un mximo de 256 colores. Esto hace que las imgenes sean fcilmente editables y modificables, pero no resulta prctico con los desarrollos y posibilidades de las imgenes digitales actuales. Por el contrario, es excelente para la elaboracin de logotipos, botones, puntos, barras, smbolos, y otros elementos de clip art (ya elaborados) frecuentes en ciertos grficos de la Web que no precisan de una paleta de colores muy extensa.
26
Curso 2012-2013
Es un formato de compresin eficaz y rpido. Las imgenes GIF tienen un peso muy reducido en nmero de bytes. La compresin se realiza sin prdida de datos y sin prdida de calidad. Es el nico formato que permite construir animaciones, en forma de pequeos dibujos animados, segn lo que se conoce por GIFs animados. Est siendo, no obstante, sustituido por el formato PNG.
El formato JPEG (Joint Photographic Expert Group)

Caractersticas Es el tipo de formato ms extendido en el universo de la fotografa 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 compresin es eficaz en lo que respecta al tamao de la imagen resultante. Permite modificar la tasa de compresin segn las necesidades del diseador. Una compresin de entre el 15% y el 20% generar una imagen de calidad satisfactoria con un tamao de archivo reducido. A mayor factor de compresin, mayor prdida de calidad de la imagen. Es por tanto una compresin destructiva. A causa de estas prdidas 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)

Caractersticas El formato PNG, se presenta como el formato del futuro. Se trata de un formato digital concebido especialmente para el uso de imgenes en pginas Web. La recomendacin de W3C respecto a PNG se remonta a 1996. PNG debera, en teora, reunir todas las ventajas de GIF y JPEG. En la actualidad, est empezando a ser considerado seriamente por parte de los diseadores de aplicaciones Web. Soporta 16,7 millones de colores igual que el formato JPEG. Es una especificacin concebida especialmente para Internet y es objeto de una recomendacin por parte de W3C.
27
Curso 2012-2013
Su compresin tiene muy buen rendimiento. La tasa de compresin del formato PNG es de entre el 5% y el 25%, superior a la del formato GIF. Esta compresin se realiza sin prdida de datos ni de calidad. El formato PNG es un formato abierto y no est patentado. Su funcin de entrelazado permite una visualizacin progresiva. No es capaz de generar imgenes animadas. Los profesionales lo estn adoptando mayoritariamente en lugar del formato GIF para fotografas de tamao pequeo.
El formato WebP
Caractersticas WebP es un nuevo formato de imagen que seguramente gane importancia en los prximos aos. Este formato est desarrollado por Google a partir de uno de los formatos de la nueva etiqueta <video> de Html5 (el WebM). Segn los primeros ensayos, WebP reducir el tamao de los archivos en un 39% respecto a los formatos JPEG, PNG y GIF, con una prdida de calidad imperceptible.
Nota: una pgina interesante para trabajar con tutoriales es: http://www.w3schools.com/html/
8. HOJAS DE ESTILO (CSS): DAR FORMATO AL TEXTO

Se introducen a continuacin algunos elementos de las hojas de estilo para poder realizar
tareas
bsicas de presentacin en Html5 de forma ms cmoda.
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> 28
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <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>
Curso 2012-2013
Solucin: Texto en negrita La propiedad de estilo font-weight (textualmente, el tamao o la importancia de la fuente) se define a bold (ms 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> Solucin: 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. Tamao de letra

Con la eliminacin de la etiqueta <font> y de su atributo size, el tamao de la fuente se define nicamente mediante la propiedad de estilo CSS font-size. 29
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <!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>
Curso 2012-2013
Texto en grande
El tamao de la fuente (font-size) se fija a 36 pxeles (36px). No aplicar ms que a la etiqueta <div> identificada por el id="grande".
8.4. Color del texto

Con la eliminacin 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>Ttulo en rojo</h1> </body> </html> Solucin: Titulo en rojo
Las etiquetas <h1> escribirn su texto en color (color) rojo (red).
8.5. Alineacin
La alineacin del texto se realiza mediante la propiedad de estilo CSS text-align. Esta propiedad permite realizar una alineacin, como en el ms bsico de los procesadores de texto. text-align: left; Texto alineado a la izquierda (valor por defecto). right; Texto alineado a la derecha. 30
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin center; Texto centrado. justify; Texto justificado. auto; Alineacin por defecto.
Curso 2012-2013
La justificacin del texto, que proporciona a cada lnea 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. Alineacin vertical

Esta propiedad determina la alineacin vertical del texto respecto a otros elementos del cdigo. vertical-align: baseline; (valor por defecto en la lnea base del texto). sub; (por debajo de la lnea base) super; (por encima de la lnea 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 lnea de texto. El valor baseline alinea el texto respecto a la parte inferior de la lnea de texto (lnea de base). El valor sub escribe el texto con formato de subndice, normalmente por debajo de la lnea de base. El valor super escribe el texto con formato de superndice o exponente, normalmente por encima de la lnea de base.
31

Curso 2012-2013
La alineacin sin definir, con valor de longitud o con porcentaje deja que el navegador gestione la visualizacin. 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 alineacin respecto a la parte superior del elemento padre. El valor middle realiza la alineacin respecto a la parte intermedia del elemento padre. El valor bottom realiza la alineacin respecto a la parte inferior del elemento padre. Un valor de longitud positivo alinea el texto por encima de la lnea de base. Un valor negativo lo hace por debajo. Por ejemplo, vertical-align: 1.7em escribir el texto en superndice situado a 1.7 em. Un porcentaje positivo alinea el texto por encima de la lnea de base. Un valor negativo lo hace por debajo. Por ejemplo,vertical-align: -20% escribir un subndice 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">Informticos</i></h2> <h2>Recursos <i class="align2">Informticos</i></h2> <h2>Recursos <i class="align3">Informticos</i></h2> </body> </html>
32
Curso 2012-2013
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>
33
Curso 2012-2013
8.7. Subrayado
En la red, el subrayado es la convencin adoptada para sealar un enlace. Cualquier otro subrayado del texto puede inducir a error a su visitante. Por ello debera evitarse, incluso prohibirse, a la hora de escribir cdigo Html. La eliminacin 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> Solucin: Texto subrayado La propiedad de estilo indica que la decoracin 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 lnea sobre el texto, en su mitad (tachado). none. Quita cualquier apariencia definida anteriormente. Comentarios
Nada nos impide definir varios valores de decoracin. 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 revisin en los precios. Aplicada a una etiqueta de enlace (<a>), la declaracin de estilo text-decoration: none; suprimir el subrayado por defecto en los enlaces. Este es, probablemente, su principal uso. 34

Curso 2012-2013
No use, sino muy ocasionalmente, el subrayado en el diseo de sus pginas y aplicaciones Html5 ya que el subrayado en la Web indica, por convencin, un enlace. El valor blink que haca parpadear el texto ha desaparecido en la especificacin 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. Transformacin
Esta propiedad muestra un texto en maysculas o en minsculas, independientemente de la forma en que aparezcan los caracteres en el cdigo fuente. 35
Curso 2012-2013
text-transform:
capitalize. Escribe la primera letra de cada palabra en maysculas. uppercase. Escribe todas las letras en maysculas. lowercase. Escribe todas las letras en minsculas. none. Deja las letras sin modificacin 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 minsculas</h2> <h2 class="transformacion2">texto en minsculas</h2> <h2 class="transformacion3">TEXTO EN MAYSCULAS</h2> </body> </html>
Comentario Si esta propiedad no parece tener una utilidad evidente en lo que respecta a la edicin, ser muy apreciada para formatear los datos destinados a, o provenientes de, una base de datos.
8.9. Indentacin
Esta propiedad permite indentar la primera lnea del texto en un prrafo.
36

text-indent: valor preciso (por ejemplo 20px) o bien
Curso 2012-2013
valor relativo en porcentaje respecto al ancho del prrafo. Este ligero desplazamiento, que no estaba previsto en Html, se obtena mediante la repeticin en el cdigo fuente de varios espacios ( ). Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .indentacion { text-indent: 30px;} </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus... </p> <p class="indentacion">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus... </p> </body> </html>
Comentario El valor de indentacin 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 funcin. Ejemplo <!DOCTYPE html> <html lang="es"> 37
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Captulo 1 <hr> Captulo 2 </body> </html>

Curso 2012-2013
Por defecto esta lnea horizontal ocupa toda la longitud de la ventana del navegador. Los diseadores prefieren a menudo reemplazar este trazo, muy bsico en su aspecto esttico, por una imagen grficamente ms 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 alineacin, el tamao 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> Captulo 1 <hr> Captulo 2 </body> </html>
Solucin: Captulo 1 _________________ Captulo 2
38
Curso 2012-2013
8.11. Columnas mltiples

Presentar un contenido en varias columnas, como con Adobe InDesign, es otra novedad de las hojas de estilo CSS3. column-count: column-width: column-gap: column-rule: Valor entero que determina el nmero de columnas en las que se va a visualizar el contenido del elemento. Valor que describe el ancho ptimo de cada columna (opcional). Valor que determina el espacio o el padding entre dos columnas. Define un borde entre las columnas.
A da de hoy las columnas mltiples no estn implementadas en Internet Explorer 9 ni en Opera 10.6. nicamente Firefox 3+, Safari 3.1+ y Chrome 4+ permiten realizar esta composicin 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> 39
Curso 2012-2013
9. HOJAS DE ESTILO (CSS3)

9.1. Fondos mltiples
Las hojas de estilo CSS3 hacen posible visualizar varias imgenes en un mismo plano de fondo, y permiten acumular valores en las propiedades background-image, backgroundposition y background-repeat (Parte CSS3 - Fondos). Este efecto no era posible sino superponiendo divisiones <div> definidas con posicin absoluta, un poco a la manera de los calcos en las aplicaciones grficas. Todos los navegadores de nuestro estudio implementan los fondos mltiples: Internet Explorer 9, Firefox 3.6+, Opera 10.1+, Safari 4+ y Chrome 4+. Ejemplo Tomemos las imgenes flores1.png, flores2.png, flores3.png y flores4.png:
<!DOCTYPE html> <html lang="es"> <head> 40
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <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>
Curso 2012-2013
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.
41
Curso 2012-2013
Comentarios
El resultado de la propiedad opacity est muy prximo al de la notacin 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 translcido, y deja entrever el elemento que se encuentra situado por debajo de l (ver los ejemplos a continuacin).
Internet Explorer no implementa la propiedad opacity. Es preciso pasar por el filtro alpha, propietario de Microsoft. filter:alpha(opacity=x) donde x es un valor comprendido entre 100 y 0.
Ejemplo 1
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <body> <img src="flor.png" style="opacity: 1; filter:alpha(opacity=100)"> <img src="flor.png" style="opacity: 0.6; filter:alpha(opacity=60)"> <img src="flor.png" style="opacity: 0.3; filter:alpha(opacity=30)"> </body> </html>
42
Curso 2012-2013
Ejemplo 2 Ilustremos la translucidez. <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> div.background { width: 250px; height: 108px; background:url(blue.png); border: 2px solid black;} div.box { width: 200px; height: 60px;
margin: 24px 25px; border: 1px solid black; background-color: #ffffff; filter: alpha(opacity=50); opacity: 0.5; text-align: center;} </style> </head> <body> <p></p>
43

<div class="background"> <div class="box"> <h2>Lorem ipsum dolor</h2> </div> </div> </body> </html>
Curso 2012-2013
Ejemplo 3 Es tentador modificar la opacidad de la imagen cuando se pase el cursor del ratn sobre ella. <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <body> <img src="invierno.jpg" style="opacity: 0.4; filter:alpha(opacity=40)" onmouseover="this.style.opacity=1; this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4; this.filters.alpha.opacity=40"> </body> </html>
44
Curso 2012-2013
En un primer instante la imagen se muestra con una opacidad de 0.4. Al pasar por encima el cursor del ratn (onmouseover) sta se muestra con una opacidad mxima. Cuando se retira el cursor de la misma (onmouseout) la imagen vuelve a su estado inicial con una opacidad de 0.4.
10. ENLACES
45
Curso 2012-2013
10.1.
Insertar un enlace
Los enlaces constituyen la esencia del lenguaje Html y de las pginas Web. La etiqueta <a> ... </a> inserta un enlace. Su sintaxis bsica es: <a href="destino_del_enlace">Texto del enlace</a> El destino del enlace puede ser:

Un lugar de la pgina en curso. Otra pgina del sitio Web. Algn lugar de otra pgina del sitio web. Una pgina de otro sitio existente en la Web. Una direccin de correo electrnico. Un archivo para descargar.
La etiqueta de enlace tiene varios atributos: href El atributo href define la direccin (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 notificacin 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 peticin POST a la direccin url especificada en el atributo. Este nuevo atributo va a ser particularmente til para realizar las estadsticas de un sitio Web. En el caso anterior, nos permitir conocer el nmero 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 pestaa del navegador (target="_blank"), en la misma ventana de la pgina 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 especificacin 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
46
Curso 2012-2013
10.2. Enlaces a una pgina situada en la misma carpeta

Los primeros enlaces que se realizan apuntan a otra pgina situada en el sitio Web (direccin 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 direccin relativa causar problemas en el caso de tener una organizacin de archivos compleja.
Comenzaremos por el caso ms sencillo. Supongamos dos archivos (pagina1.htm y pagina2.htm) situados en la misma carpeta.
Insertemos en la pgina 1 un enlace hacia la pgina 2. El cdigo del enlace en la pgina 1 es: <a href="pagina2.htm">Enlace hacia la pgina 2</a>
Es imprescindible respetar las maysculas y minsculas en el nombre del archivo y evitar los espacios, para que no se produzcan errores de interpretacin en los distintos entornos Web.
10.3. Enlaces a una pgina 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 situacin en la que la carpeta de origen (raz) contiene: - un archivo indice.htm, - una subcarpeta carpeta1 con el archivo pagina1.htm y - otra subcarpeta carpeta2 con el archivo pagina2.htm. Esta organizacin arborescente nos permitir abordar varios casos.
47
Curso 2012-2013
a. Enlace desde indice.htm hacia pagina1.htm
El cdigo de indice.htm es: <a href="carpeta1/pagina1.htm">Texto del enlace</a> Comentarios

El archivo indice.htm y la carpeta carpeta1 se sitan 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 cdigo 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 notacin "../". Una vez hemos subido un nivel, hay que descender a carpeta2 y, una vez en carpeta2, descender para llegar a pagina2.htm.
48
Curso 2012-2013
c. Enlace desde pagina2.htm hacia indice.htm
El cdigo 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 notacin "../". Descendiendo llegamos directamente a indice.htm.
10.4. Enlaces al interior de una pgina

En una pgina de cierta importancia, generalmente de tipo texto, es interesante poder llevar al usuario a un lugar concreto del documento. Se utiliza la tcnica de las anclas (anchor) o puntos de fijacin. Este enlace al interior de la pgina se realiza en dos tiempos:

La declaracin del ancla. El enlace hacia el ancla.
Declaracin del ancla Las anclas van a definir un lugar en la pgina, lo que permitir despus hacer un enlace hacia ella. La sintaxis de creacin de un ancla es: <a id="nombre del ancla"></a> 49
Curso 2012-2013
Con la desaparicin del atributo name en Html5, la declaracin 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 pgina 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 captulo 2</a> <h3>Captulo 1</h3> <p>...</p> <h3>Captulo 2</h3> <a id="capitulo2"></a> <p>Contenido del captulo 2</p> </body> </html>
50
Curso 2012-2013
10.5. Enlace hacia un ancla situada en otra pgina

El principio es el mismo aunque habr que definir tambin la direccin (relativa o absoluta) de la pgina. 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 pginas de otros sitios situados en otra direccin en la Web. El destino indicado en la etiqueta de enlace ser la direccin completa del sitio o de la pgina. Hablamos de direccionamiento absoluto. Por ejemplo: <a href="http://www.w3.org/standards/index.htm">Enlace</a> Precisemos que se trata de la direccin completa, con la mencin explcita del protocolo http://. En efecto, con los navegadores recientes, esta mencin la ignoran gran parte de los usuarios.
10.7. Enlace a una direccin email

Para agregar cierto componente de interaccin, es interesante permitir a los visitantes de su sitio la posibilidad de contactar por correo electrnico. El destino en la etiqueta de enlace ser entonces una direccin de correo electrnico, precedida del protocolo de correo electrnico (mail), es decir mailto: (con dos puntos solamente). <a href="mailto: ies.luisvives.leganes@educa.madrid.org>El autor</a> La activacin del enlace abrir una ventana de la aplicacin de correo electrnico configurada por defecto en el puesto del visitante. Por ejemplo, Microsoft Outlook. Si bien no se trata de cdigo Html propiamente dicho, es posible predefinir el asunto del mensaje o incluir el envo de una copia a otro destinatario.
Para predefinir el asunto del e-mail: <a href="mailto:ediciones@eni.com?subject=Formacin Html5">Ediciones ENI</a> donde el contenido de subject es el asunto (predefinido). En nuestro ejemplo es "Formacin Html5". Para incluir el envo de una copia a otro destinatario: <a ref="mailto:ediciones@eni.com?cc=autor@eni.com">Ediciones ENI</a> donde el contenido de cc es la direccin de correo electrnico del destinatario de la copia. Para combinar las dos posibilidades: <a href="mailto:ediciones@eni.com?subject=Formacin Html5&cc=autor@eni.com">Ediciones ENI</a> 51
Curso 2012-2013
Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <a href="mailto:ediciones@eni.com?subject=Formacin Html5&cc=autor@eni.com">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 extensin). Este modo de proceder es vlido siempre que el archivo Html y el archivo ofrecido para su descarga estn situados en la misma carpeta o subcarpeta. Para un archivo "formacion.pdf" situado en la misma carpeta, el cdigo es: <a href="formacion.pdf">Versin en PDF</a> Si en el ordenador del visitante no hay ninguna aplicacin 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 aplicacin Adobe Acrobat Reader est presente en el puesto del visitante, el navegador abre la aplicacin y muestra el archivo. Pasar igual para el resto de tipos de archivo. Cuando no existe una aplicacin definida por defecto para la extensin del archivo, el navegador descarga el archivo, tras haber mostrado la ventana que invita a la descarga.
10.9. Enlaces hacia una ventana especfica

Las pginas de destino de un enlace pueden abrirse en ventanas especficas gracias al atributo target. Veamos las distintas posibilidades:
target="_self" (por defecto). La pgina de destino se abre en la misma ventana que la pgina de origen del enlace. target="_top". La pgina 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 pgina de destino del enlace se abre en una nueva instancia o en una nueva pestaa del navegador.
Ilustremos este atributo target, y especialmente target="_blank". 52
Curso 2012-2013
En el archivo Pgina 1: <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> Ir a <a href="pagina2.htm" target="_blank">Pgina 2</a> </body> </html>
53
Curso 2012-2013
10.10.
Descripcin acerca del enlace
El atributo title="texto" (que no es especfico a la etiqueta del enlace) permite mostrar una descripcin explicativa sobre el enlace cuando se pasa por encima el cursor del ratn. Este pequeo "extra" en ergonoma se aprecia especialmente, en trminos de accesibilidad, por las interfaces vocales que guan a los internautas invidentes. <a href="pagina2.htm" title="Enlace al captulo 2">Sigue</a> Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <a href="pagina2.htm" title="Enlace al captulo 2">Sigue</a> </body> </html>
54
Curso 2012-2013
11. TABLAS
11.1. Creacin de una tabla
Una tabla (<table>) se compone de filas <tr>. Estas filas contienen celdas <td>. La distribucin de las distintas etiquetas para mostrar una tabla sigue la lgica 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, bsica 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). 55
Curso 2012-2013
Ejemplo El cdigo anterior para una tabla de 250 pxeles 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>
Tambin 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 clsicos de una tabla, la declaracin es un poco particular. 56
Curso 2012-2013
Nuestro objetivo es agregar un borde de 1 pxel (1px), de color negro (black) con un trazo slido (solid). Adems 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.
57
Curso 2012-2013
11.4. Alineacin de la tabla

La tabla est, en este caso, alineada a la izquierda. Para obtener una alineacin centrada, hay que usar cierta argucia. El hecho de incluir un margen (margin) automtico a izquierda (left) y derecha (right) de la tabla provoca la alineacin 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>
58
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin 11.5. Alineacin de las celdas de la tabla
Curso 2012-2013
El contenido de las celdas est, en nuestro caso, alineado a la izquierda. Ser ms esttico centrarlo (center) en las celdas. Para ello se usa la propiedad de estilo text-align.
Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { text-align: center; border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body> </html>
59
Curso 2012-2013
Comentario
Con text-align: center aplicado a la tabla (<table>), todas las celdas de la tabla mostrarn 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, imgenes, 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 segn 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 ocasin a la etiqueta <td>, para uniformar el ancho de las celdas. Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black; width: 33%;} </style>
60

</head> <body> <table> <tr> <td>Celda 1</td><td>Cel 2</td><td>3</td> </tr> <tr> <td>Celda 4</td><td>Cel 5</td><td>6</td> </tr> </table> </body> </html>
Curso 2012-2013
11.6.2. Alineacin 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 textalign puede tomar los valores left (izquierda), center (centrado) o right (derecha). El valor por defecto es left. Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 290px;} td { border: 1px solid black; width: 33%;} </style> </head> <body> <table> <tr> <td style="text-align: left;">Producto 1</td> <td style="text-align: center;">En stock</td>
61

<td style="text-align: </tr> <tr> <td style="text-align: <td style="text-align: <td style="text-align: </tr> </table> </body> </html> right;">3.43 </td> left;">Producto 2</td> center;">En pedido</td> right;">6.72 </td>
Curso 2012-2013
Aqu, la propiedad de estilo se ha aplicado directamente en el cdigo de la etiqueta <td> mediante style="text-align: xxx;" (estilo en lnea).
11.6.3. Alineacin vertical

Por defecto, la alineacin vertical del contenido de una celda se realiza en la mitad de la celda. Esto puede provocar situaciones poco estticas a la hora de elaborar su tabla.
Es prudente prever una alineacin vertical hacia la parte superior mediante la propiedad de estilo vertical-align:top aplicada a las celdas <td>. Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> 62
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin table { border: 1px solid black; border-collapse: collapse; width: 140px;} td { border: 1px solid black; vertical-align:top;} </style> </head> <body> <table> <tr> <td style="width: 10%;">1</td> <td>xxxxx xxxxx xxxxx xxxxx xxxxx</td> </tr> <tr> <td style="width: 10%;">2</td> <td>xxxxx xxxxx</td> </tr> <tr> <td style="width: 10%;">3</td> <td>xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx</td> </tr> </table> </body> </html>
Curso 2012-2013
63
Curso 2012-2013
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 esttico y ensucia la legibilidad de los datos. La propiedad de estilo padding permite agregar un espacio entre el contenido de la celda y el borde de la misma. Es importante distinguir el margen exterior, llamado margin, del margen interior designado por el vocablo padding. Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black; padding: 15px;} </style> </head> <body> <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> </table> </body> </html>
64
Curso 2012-2013
Destacamos el hecho de que la propiedad de estilo padding ha agregado espacio por todo alrededor del contenido de la celda. Es posible agregar solamente un espacio entre el borde izquierdo y el contenido mediante la propiedad padding-left.
Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black; width: 33%;} </style> </head> <body> <table> <tr> <td>Celda 1</td><td>Cel 2</td><td>3</td> </tr> <tr> <td>Celda 4</td><td>Cel 5</td><td>6</td> </tr> </table> </body> </html>
65
Curso 2012-2013
11.6.5. Color de fondo Tras la desaparicin del atributo bgcolor, agregar un color de fondo se hace mediante la propiedad de estilo background-color.
Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { text-align: center; border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} .color { background-color: #99ccff;} </style> </head> <body> <table> <tr> <td>1</td> <td class="color">2</td> </tr> 66
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <tr> <td>3</td> <td class="color">4</td> </tr> </table> </body> </html>
Curso 2012-2013
Esta propiedad de estilo de color de fondo background-color tambin puede aplicarse a las etiquetas <table> y <tr>.
11.6.6. Fusin 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> 67
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </body> </html>
Curso 2012-2013
A. Fusin de columnas
Para fusionar columnas, Html5 proporciona el atributo de celda colspan="x" donde x se corresponde con el nmero 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;">Ttulo de la tabla</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> 68
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin </table> </body> </html>
Curso 2012-2013
B. Fusin de filas
Para fusionar filas, Html5 proporciona el atributo de celda rowspan="x" donde x se corresponde con el nmero 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> 69
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin </tr> </table> </body> </html>
Curso 2012-2013
Comentario
Se ha fusionado la primera columna de dos filas. Observe la alineacin 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 algn modo, ttulo 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>Funcin</th> </tr> <tr> <td><i>colspan</i></td> 70
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <td>Para fusionar columnas</td> </tr> <tr> <td><i>rowspan</i></td> <td>Para fusionar filas</td> </tr> </table> </body> </html>
Curso 2012-2013
11.7. Leyenda de la tabla

La etiqueta <caption> permite asociar un ttulo o una leyenda a la tabla. Debe situarse justo despus de la etiqueta de apertura <table> y debe aparecer una sola vez en la tabla. Por defecto, la mayora 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> 71
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <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>
Curso 2012-2013
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 nmero 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 definicin, 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 alineacin centrada a las dos primeras columnas. <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> 72
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <meta charset="iso-8859-1">
<style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} colgroup { background-color : #99ccff; text-align: center;} </style> </head> <body> <table> <colgroup span="2"></colgroup> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> </body> </html>
Curso 2012-2013
Ejemplo 2 Si deseamos agrupar las dos ltimas columnas, es preciso declarar varias etiquetas <colgroup>. <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> table { border: 1px solid black; border-collapse: collapse; width: 250px;} td { border: 1px solid black;} #columnas { background-color : #99ccff; text-align: center;} </style> </head> <body> <table>
73

<colgroup span="1"></colgroup> <colgroup id="columnas" span="2"></colgroup> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> </body> </html>
Curso 2012-2013
11.9. Estructuracin de la tabla

Html5 proporciona etiquetas para estructurar de forma lgica el contenido de una tabla. Estas etiquetas son:

<thead> para agrupar la informacin referente al encabezado de la tabla, como por ejemplo el ttulo y el subttulo 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 pgina, como por ejemplo anotaciones o una leyenda.
Esta divisin lgica no afecta en nada a la presentacin por defecto de la tabla, aunque puede retomarse en las propiedades de estilo para adornar la presentacin 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 pgina antes de la recepcin de las filas con los datos. Ejemplo Apliquemos estas etiquetas a una tabla.
74
Curso 2012-2013
<!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;">Fusin 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>
75
Curso 2012-2013
12. PROPIEDADES DE CAJA

12.1. Concepto de modelo de caja o bloque
El elemento caja es una nocin importante en CSS. Es importante captar bien esta nocin, algo abstracta, para comprender el posicionamiento (captulo Propiedades de visualizacin Posicionamiento). Este elemento caja tambin 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 prrafo. Est rodeado por un espacio en torno al texto hasta los bordes del cuadro, que llamaremos margen interior o interno. A continuacin estn 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 nocin de caja y proporcionan al diseador un control total sobre los mrgenes interior y exterior, as como del borde. Con las hojas de estilo CSS podremos, por ejemplo, regular de forma independiente:

Los cuatro mrgenes exteriores en cualquier sentido, Los cuatro bordes (dimensin, estilo, color), Las cuatro mrgenes interiores en cualquier sentido, Las dimensiones (anchura y altura) del contenido.
La principal fuente de confusin es que, tras haber precisado la anchura y/o la altura del contenido, no se ha definido de forma explcita la dimensin total del elemento caja, que comprende la dimensin del contenido, ms el margen interior, ms la dimensin del borde ms el margen exterior. 76
Curso 2012-2013
De este modo, la propiedad width aplicada al contenido (el pequeo rectngulo central) no es ms que uno de los elementos de la dimensin 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 dimensin total del elemento caja se calcula del siguiente modo: contenido + mrgenes interiores + bordes + mrgenes exteriores. Tomemos una caja con las propiedades siguientes:

anchura del contenido igual a 200 pxeles, margen interior de 20 pxeles, borde con una anchura de 10 pxeles, margen exterior de 20 pxeles.
La anchura del elemento caja es, en este caso, de 300 pxeles que se descomponen de la forma siguiente (de izquierda a derecha): 20 pxeles de margen exterior + 10 pxeles para el borde + 20 pxeles de margen interior + 200 pxeles de contenido + 20 pxeles de margen interior + 10 pxeles de borde + 20 pxeles de margen exterior. El total es, en efecto, 300 pxeles. 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>Nocin de caja en CSS</p> </body> </html>
77
Curso 2012-2013
12.2. Elemento en bloque o en lnea

Ya hemos abordado anteriormente la nocin de elemento en bloque o en lnea. La propiedad de estilo display permite redefinir un elemento en lnea como un elemento en bloque, y a la inversa. display: inline; (en lnea) block; (de tipo bloque) Esta propiedad es muy rica en posibilidades de presentacin y se utiliza a menudo en hojas de estilo CSS complejas. Ejemplo 1 Las nuevas etiquetas semnticas son elementos en lnea. Para atribuirles una funcin de presentacin, 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> | 78
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <a>Productos</a> | <a>Soluciones</a> | <a>Puntos de venta</a> | <a>Contacto</a> </nav> </body> </html>
Curso 2012-2013
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 lnea. <!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> 79
Curso 2012-2013
12.3. Anchura y altura

Las propiedades de estilo width y height van a fijar respectivamente la anchura y la altura del elemento caja. width: auto o bien valor de longitud o bien porcentaje height: auto o bien valor de longitud o bien porcentaje Comentarios

Los valores width y height especifican la anchura y la altura del contenido (sin mrgenes interiores, sin bordes y sin mrgenes exteriores). El valor auto ajusta automticamente la dimensin 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 tamaos mnimo y mximo de un elemento de tipo caja o un elemento reemplazado dinmicamente mediante JavaScript. max-height: min-height: max-width: min-width: Fija la altura mxima Fija la altura mnima Fija la anchura mxima Fija la anchura mnima
La propiedad max-height se utiliza generalmente de forma conjunta con la propiedad minheightpara fijar un margen de maniobra en lo que respecta a la visualizacin de los elementos afectados. Este concepto tambin 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 80
Curso 2012-2013
su diseo de forma que se adapte a cualquier resolucin 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 basndose 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 funcin del valor determinado en min-width. El navegador procede de forma similar para las propiedades maxheight y min-height. Cabe destacar que las propiedades max-height, min-height, max-width y min-width no incluyen los mrgenes interiores, los bordes ni los mrgenes exteriores. Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <p>width</p> <div style= "border: 2px solid black; width: 250px;"> xxx xxx xxx xxx xxx xxx xxx xxx </div> <p>min-width</p> <div style="border: 2px solid black; min-width: 250px;"> xxx xxx xxx xxx xxx xxx xxx xxx </div> <p>max-width</p> <div style="border: 2px solid black; width: 250px; max-width: 150px;"> xxx xxx xxx xxx xxx xxx xxx xxx </div> </body> </html>
81
Curso 2012-2013
Para la primera divisin, la anchura se ha fijado mediante width: 250px. En la segunda, sta se ha determinado mediante min-width: 250px. Como este valor mnimo no se ha alcanzado, la divisin ocupa toda la anchura de la ventana. En la ltima divisin, la anchura responde al valor mximo max-width: 150px.
12.4. Mrgenes externos

Esta propiedad permite definir el margen exterior del elemento caja. margin: margin-top: margin-right: marginbottom: margin-left: Comentarios

auto o bien valor de longitud o bien porcentaje
El valor auto deja al navegador la gestin de los mrgenes externos. Un valor de longitud define con precisin los mrgenes 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 disean, respectivamente, los bordes superior, derecho, inferior e izquierdo. Estas propiedades son especificaciones CSS2. Es posible abreviar la escritura de las propiedades del margen externo margintop,margin-right, margin-bottom y margin-left, informado uno, dos, tres o cuatro valores mediante la propiedad margin. 82
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin Si se informa un nico margen, se aplica a los cuatro lados.
Curso 2012-2013
Con dos mrgenes, el primero se aplica a los lados superior e inferior. El segundo se aplica a los laterales (mrgenes derecho e izquierdo). Con tres valores, el primero se aplica al lado superior, el segundo a los mrgenes laterales y el tercero al lado inferior. Con cuatro mrgenes, stos se aplican en el sentido de las agujas del reloj partiendo del lado superior, es decir superior, derecho, inferior e izquierdo.
Los mrgenes pueden definirse con valores negativos, lo que puede generar efectos visuales interesantes, aunque tambin existe el riesgo de que se interpreten de forma distinta segn cada navegador.
Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .body { margin: 0px;} .bloque { border: 1px solid black; margin: 20px 20px 0px 20px; text-align: center;} </style> </head> <body> <div class="bloque"> margen exterior </div> </body> </html>
83
Curso 2012-2013
12.5. Mrgenes internos

Esta propiedad permite definir el margen interior del elemento caja. padding: padding-top: paddingright: paddingbottom: padding-left: Comentarios auto o bien valor de longitud o bien porcentaje
El valor auto deja al navegador la gestin para la visualizacin de los mrgenes internos. Un valor de longitud define con precisin los mrgenes 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 paddingtop,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 mrgenes, el primero se aplica a los lados superior e inferior. El segundo se aplica a los laterales (mrgenes derecho e izquierdo). Con tres valores, el primero se aplica al lado superior, el segundo a los mrgenes laterales y el tercero al lado inferior. Con cuatro mrgenes, stos se aplican en el sentido de las agujas del reloj partiendo del lado superior, es decir superior, derecho, inferior e izquierdo.
84

Ejemplo
Curso 2012-2013
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .marge { width: 300px; padding-left: 50px; border: solid 1px gray;} </style> </head> <body> <div class="margen"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. </div> </body> </html>
12.6. Color del borde

Estas propiedades de estilo permiten definir el color de los cuatro bordes del elemento caja o de cada borde tomado individualmente. border-color: border-top-color: nombre del color o bien notacin hexadecimal en formato #rrggbb o bien 85
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin border-right-color: border-bottom-color: border-left-color:
Curso 2012-2013
notacin hexadecimal abreviada en formato #rgb o bien notacin en formato RGB mediante enteros entre 0 y 255 o bien notacin en formato RGB con porcentajes entre 0% y 100% o bien notacin en formato RGBa donde a est comprendido entre 0 y 1 o bien notacin en formato HSL o bien notacin 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 tendrn 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-rightcolor, border-bottom-color y border-left-color, informando uno, dos, tres o cuatro colores en la propiedad border-color. Si se indica un solo color, se aplicar a los cuatro lados. Con dos colores, el primero se aplicar en los lados superior e inferior. El segundo valor se aplicar en los laterales (derecho e izquierdo). Con tres colores, el primero se aplicar al lado superior, el segundo en los laterales y el tercero al lado inferior. Con cuatro colores, stos se aplican en el sentido de las agujas del reloj partiendo del lado superior, es decir superior, derecho, inferior e izquierdo.
Con el valor transparent, el color de los bordes es transparente aunque el borde existe y tiene presencia. Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> 86
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <meta charset="iso-8859-1"> <style type="text/css"> h1 { border-style: solid; border-width: 7px; border-top-color: rgb(215,230,245); border-bottom-color: rgb(215,230,245); border-left-color: rgb(125,165,205); border-right-color: rgb(125,165,205); text-align: center;} </style> </head> <body> <p></p> <h1>Html5 + CSS3</h1> </body> </html>
Curso 2012-2013
12.7. Grosor del borde

Esta propiedad permite definir el grosor de los cuatro bordes de forma simultnea o de cada borde de forma individual. border-width: border-top-width: border-right-width: border-bottomwidth: valor de longitud; thin; medium; thick;
87
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin border-left-width:

Comentarios
Curso 2012-2013
El valor thin se traduce en un borde fino, medium en un borde medio y thick en un borde grueso. La interpretacin 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-topwidth, 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-rightwidth, border-bottom-width y border-left-width, informando uno, dos, tres o cuatro colores en la propiedad border-width. Si se indica un grosor, se aplicar a los cuatro lados. Con dos grosores, el primero se aplicar en los lados superior e inferior. El segundo valor se aplicar en los laterales (derecho e izquierdo). Con tres grosores, el primero se aplicar al lado superior, el segundo en los laterales y el tercero al lado inferior. Con cuatro grosores, stos se aplican en el sentido de las agujas del reloj partiendo del lado superior, es decir superior, derecho, inferior e izquierdo.
Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> h1 { border-style: solid; border-color: rgb(125,165,205); border-width: thin thick; text-align: center;} </style> </head> <body> <h1>Html5 + CSS3</h1> </body> </html> 88
Curso 2012-2013
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 outs et o hidden o none;
Comentarios
Es interesante ilustrar estos bordes, la mayora de ellos nuevos en el mbito del diseo de pginas Web. De este modo, cada palabra clave muestra: solid: un trazo liso, dashed: guiones, dotted: pequeos puntos, double: trazos lisos dobles, groove: efecto 3D de relieve incrustado en la pgina (opuesto a ridge), ridge: efecto 3D de relieve saliendo de la pgina (opuesto a groove), inset: bordes entrantes, incrustados en la pgina (inverso de outset), outset: bordes salientes, biselados de la pgina (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.
89

solid dashed dotted double groove ridge inset outset
Curso 2012-2013
Para double, la longitud definida mediante border-width corresponde con el tamao de ambos trazos ms 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-rightstyle, 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 mtodo abreviado, no est garantizado.
Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1">
90

<style type="text/css"> h2 { border-style: double; border-width: 10px; border-color: gray; text-align: center;} </style> </head> <body> <h2>Un borde con estilo</h2> </body> </html>
Curso 2012-2013
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 borderwidth. Ejemplo border: red double 5px; Comentarios

Esta forma slo vale en el caso de que los cuatro bordes sean idnticos. 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.
91

Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> h1 { border: dotted 1px black; text-align: center;} </style> </head> <body> <h1>Borde abreviado</h1> </body> </html>
Curso 2012-2013
13. FORMULARIOS
Los formularios ocupan un lugar predominante en el diseo y explotacin de una aplicacin o un sitio Web. Es la nica forma de recibir de vuelta la informacin que proviene directamente del usuario final, estructurada, adems, segn las necesidades del diseador. Basta con pensar en todos los sitios de carcter comercial en los que los formularios resultan indispensables. La primera preocupacin de los desarrolladores de una aplicacin Web es recuperar datos vlidos. Tomemos por ejemplo el dato de un cdigo postal espaol, de cinco caracteres numricos, o una direccin de correo electrnico en la que la sintaxis sea vlida. Los formularios forman parte del lenguaje Html desde hace ya unos quince aos y no se han modificado desde entonces. El propsito ltimo de los formularios es el procesamiento automtico de los datos devueltos. Por ello es preciso mencionar, del lado del servidor, los lenguajes de programacin de gestin 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 direccin de correo electrnico. 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. Adems, el procesamiento posterior de los datos tendr que hacerse de forma manual. 92
Curso 2012-2013
13.1. Declarar el formulario

La etiqueta <form> ... </form> tiene como nica funcin la de declarar al navegador que debe incluir un formulario. Esta etiqueta englobar los elementos o campos de formulario como por ejemplo una lnea de texto, casillas a marcar, listas desplegables, etc. <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> Elementos del formulario </form> </body> </html> En s, la etiqueta <form> no muestra nada en la ventana del navegador. No tiene sentido mostrar una captura de pantalla. Los atributos usuales de la etiqueta <form> son:
name
Para asignar un nombre (name) al formulario.
action
Cuando demos la orden al navegador de emitir los datos del formulario, aqul precisa conocer la accin que debe realizar. Esta accin 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 direccin de correo electrnico 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 vaco. Por ejemplo action="".
Si usa el validador de W3C (http://validator.w3.org), ver que la presencia del atributo action es obligatoria.
enctype
93
Curso 2012-2013
El atributo enctype especifica en qu formato informtico (mime type) se transmitirn 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 envo de datos a una direccin de correo electrnico mediante el protocolo mailto, el valor ser text/plain.
method
La transmisin de datos de un formulario se realiza mediante el mtodo GET o el mtodo POST. El mtodo GET realiza la transferencia de los datos en caracteres ASCII y los datos no pueden exceder los 100 caracteres. El mtodo POST gestiona los caracteres no ASCII y tiene una capacidad de caracteres ilimitada. En la prctica se ha impuesto el mtodo 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 intiles puesto que no se hace llamada al servidor. Comentarios

Esta etiqueta, bsica 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 ningn campo del formulario.
94
Curso 2012-2013
13.2. Campo de texto

Este campo de texto permite captar la introduccin de datos tanto alfabticos como numricos. Ejemplo Propongamos al usuario un campo de texto para introducir su nombre.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> Nombre: <input type="text"> </form> </body> </html> Comentarios
Esta etiqueta, bsica 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 enva el formulario. size Define el nmero 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. 95
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin El valor por defecto de este campo es 20. maxlength
Curso 2012-2013
Determina el nmero mximo de caracteres que el usuario puede introducir en el campo de texto. Este atributo es particularmente til para datos con un nmero concreto de caracteres como, por ejemplo, cinco cifras para introducir un cdigo postal espaol. value Define el valor por defecto del campo de texto. Aparece como valor del campo de texto cuando se carga la pgina. 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 pgina y desaparece cuando el usuario sita el foco o cursor en el elemento afectado. Este atributo todava 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">
96
Curso 2012-2013
Hay quien podr sealar que el atributo value realiza la misma funcin. 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 automticamente cuando se sita el foco sobre el elemento afectado. Adems, con el atributo value, en caso de que se enve el formulario sin haber modificado el valor de esta propiedad por defecto, ser ste el valor que se enve. autofocus Sita el foco sobre el elemento una vez cargada la pgina. Este atributo parece que slo est implementado de momento en Safari4+, Chrome 3+ y Opera 10+ , por lo que se ignora en los dems navegadores, donde an 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 direccin de correo electrnico del usuario. Opera 10+ nos proporciona una ilustracin de la reaccin del navegador cuando un campo required se deja vaco a la hora de enviar el formulario. <form action=""> Email (obligatorio): <input type="text" name="mail" required><br> <input type="submit" value="Enviar"> </form>
Sera interesante tener no obstante una representacin grfica un poco ms elaborada desde el punto de vista esttico. pattern Define una expresin regular JavaScript que se usar para realizar la validacin del valor del campo. Por ejemplo pattern="[0-9]" indica que el valor del elemento debe ser un nmero entero comprendido entre 0 y 9.
97
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin height
Curso 2012-2013
Determina, en pxeles o en porcentaje, la altura del campo de texto. Puede reemplazarse por la propiedad CSS height. width Determina, en pxeles 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 ms 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 lneas. 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>
98
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin Comentarios

Curso 2012-2013
Esta etiqueta, bsica en Html, es perfectamente compatible hacia atrs en los distintos navegadores. La etiqueta <textarea> precisa una etiqueta de cierre </textarea>. Es posible indicar un valor por defecto en el rea de texto, no mediante el atributo value sino de la forma siguiente: <textarea rows="4" cols="25">Escriba aqu sus sugerencias!</textarea>.
Los posibles atributos son: name Define un nombre para el elemento. cols Define el nmero de caracteres visibles en anchura para el rea de texto. Puede reemplazarse por la propiedad CSS width. rows Define el nmero de lneas 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 Sita el foco sobre el elemento una vez cargada la pgina. maxlength Determina el nmero mximo 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 automticos de lnea en el texto a la hora de enviar el contenido. Con wrap="hard", se inserta un carcter de salto de lnea junto con el texto. Con wrap="soft" (por defecto), no se inserta ningn carcter de salto de lnea a la hora de transmitir la informacin. Para los puristas, este atributo ya no formaba parte de la especificacin Html 4.0. Se ha vuelto a introducir en la especificacin Html5, no obstante bajo un aspecto modificado. placeholder Inserta un texto en el campo del formulario tras la carga de la pgina. Este texto se borra automticamente cuando el usuario sita el foco en el rea de texto.
99
Curso 2012-2013
13.4. Lista desplegable

La lista desplegable proporciona distintas opciones al usuario.
La etiqueta <select>... </select> indica al navegador el uso de una lista desplegable. Los elementos de la lista se introducen mediante las etiquetas <option> ... </option>.
Ejemplo: Preguntemos al usuario su navegador preferido:
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> <p>Su navegador preferido: <select> <option value="1">Internet Explorer</option> <option value="2">Firefox</option> <option value="3">Safari</option> <option value="4">Opera</option> <option value="5">Google Chrome</option> </select> </p> </form> </body> </html>
Los posibles atributos son: name Define un nombre para la lista desplegable, para un posible procesamiento posterior. size Por defecto el atributo size de la etiqueta <select> es igual a 1, lo que resulta muy prctico dado que permite ganar bastante espacio en la disposicin de la pgina. No obstante mediante el atributo size="x" 100
Curso 2012-2013
usted puede definir el nmero 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 aos</option> <option>De 20 a 40 aos</option> <option>De 40 a 60 aos</option> <option>Ms de 60 aos</option> </select> </form> </body>
multiple Por defecto, el usuario no puede seleccionar ms de un elemento del men desplegable. Con el atributo mltiple 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 ratn. En tal caso es aconsejable recordar al usuario en la pgina esta forma de proceder, poco comn para un internauta intermedio. El atributo size debe especificarse y ser igual al nmero de etiquetas <option>. selected Por defecto aparece seleccionado el primer elemento de la lista. No obstante es posible preseleccionar algn otro elemento mediante el atributo selected de la etiqueta <option>. <body> <form action=""> <p>Su navegador preferido: <select> 101
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <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>
Curso 2012-2013
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 numrico) para transmitirlo, mediante el atributo value="valor".
102
Curso 2012-2013
13.5. Botones de seleccin nica (radio)

Los botones de seleccin nica, tambin llamados botones radio, tienen la particularidad de que slo permiten seleccionar una opcin 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. Adems, en el caso de los botones radio, el nombre debe ser idntico para todos los botones. checked Permite preseleccionar un botn radio. value En vista de un procesamiento posterior, es posible atribuir un valor a cada botn radio mediante el atributo value="valor".
103
Curso 2012-2013
13.6. Botones de seleccin mltiple (checkbox)

El uso de estos botones de seleccin mltiple, tambin llamados checkbox, es similar a los botones de seleccin nica aunque, en este caso, es posible seleccionar varias opciones. Ejemplo Pidamos al usuario que precise los ingredientes de una pizza. <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> Su pizza con:<br> <input type="checkbox" name="n1"> Mozzarella<br> <input type="checkbox" name="n2"> Jamn<br> <input type="checkbox" name="n3"> Salsa de tomate<br> <input type="checkbox" name="n4"> Pimientos<br> <input type="checkbox" name="n5"> Championes<br> <input type="checkbox" name="n6"> Olivas negras<br> <input type="checkbox" name="n7"> Salsa picante </form> </body> </html>
104

Comentarios
Curso 2012-2013
Esta etiqueta es perfectamente compatible entre los diferentes navegadores. La etiqueta <input> no tiene etiqueta de cierre. La sintaxis <input type="checkbox" />, inspirada en Xhtml, est igualmente aceptada en Html5.
Los posibles atributos son: name El atributo name="nombre" es obligatorio. Las reglas son menos precisas que para los botones de opcin. Es posible usar nombres idnticos 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"> Jamn<br> <input type="checkbox" name="n3" checked > Salsa de tomate<br> <input type="checkbox" name="n4"> Pimientos<br> <input type="checkbox" name="n5"> Championes<br> <input type="checkbox" name="n6"> Olivas negras<br> <input type="checkbox" name="n7"> Salsa picante
</form>
105
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin value
Curso 2012-2013
Para poder procesarlos posteriormente es preciso indicar un valor a cada botn checkbox mediante el atributo value="valor".
13.7. Botn de envo

<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> <input type="submit"> </form> </body> </html>
Comentarios
Esta etiqueta es perfectamente compatible entre los diferentes navegadores. La etiqueta <input> no tiene etiqueta de cierre. La sintaxis <input type="submit" />, inspirada en Xhtml, est igualmente aceptada en Html5. El texto del botn lo selecciona el navegador. En efecto, vara 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 botn mediante el atributo value. La sintaxis es, por ejemplo, <input type="submit" value="Enviar el formulario">. Es posible reemplazar el botn de envo por una imagen grfica gracias a la etiqueta <input type="image>.
106
Curso 2012-2013
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> Nombre: <input type="text"><br> e-Mail: <input type="text"><br> <input type="image" src="submit.gif" alt="Enviar" width="50" height="50"> </form> </body> </html>
13.8. Botn de anulacin

<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> 107
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <input type="reset"> </form> </body> </html>
Curso 2012-2013
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 ttulo del botn lo selecciona el navegador. La mayora de ellos optan por Restablecer, salvo Safari que prefiereRestaurar. Es posible modificar el texto por defecto del botn mediante el atributo value. La sintaxis es, por ejemplo, <input type="reset" value="Reiniciar">.
108
Curso 2012-2013
13.9. Botn de accin
En materia de botones (button), existe tambin la etiqueta <button> ... </button>. Esta etiqueta permite ejecutar, al hacer clic sobre el botn, una accin especfica definida por el diseador del sitio Web, generalmente mediante algn cdigo de JavaScript. Ofrece igualmente la posibilidad de realizar el envo y la anulacin 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, imgenes o incluso contenido Html. Destaquemos tambin que esta etiqueta <button> no tiene por qu estar anidada obligatoriamente en un formulario <form> y puede usarse en mltiples contextos. Todo esto la convierte en una etiqueta polivalente y justifica su xito entre los desarrolladores. Ejemplo Al hacer clic en el botn, se abre una ventana de alerta:
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <button onclick="alert(Accin 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 botn se declara entre ambas etiquetas, y no en el atributo value. Por ejemplo <button>Haga clic aqu</button>.
Los posibles atributos son:

name Especifica un nombre para el botn.
109

type El atributo type admite tres argumentos:
Curso 2012-2013
button: se utiliza cuando el botn inicia un script (es el valor por defecto del atributo en la mayora 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 botn cuando se carga la pgina. En este caso el botn aparece sombreado en gris. Es posible activarlo (enabled) con un script mediante una accin del usuario, por ejemplo despus 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 pequeo icono (ok.png) disponible en el rea de descargas del libro. <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <button><img src="ok.png" alt="Enviar" width="15" height="15"> Enviar </button> </body> </html>
110
Curso 2012-2013
13.10.
Campos de transferencia de archivos
La etiqueta <input type="file"> permite transferir un archivo (file) desde el puesto del usuario a otro ordenador de tipo servidor.
Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action="" method="post" enctype="multipart/form-data"> <input type="file"> </form> </body> </html>
Un clic en el botn Examinar (de nombre variable segn 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 tamao mximo del archivo a transferir. 111
Curso 2012-2013
En la declaracin de la etiqueta <form>, es preciso usar los atributos method="post" y enctype="multipart/form-data"para realizar la transferencia segn el formato correcto del archivo. Existe tambin 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 descripcin de los archivos es posible usar el carcter * como comodn. 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 contrasea
Este tipo de campo es de hecho un simple campo de texto donde la codificacin se sustituye, en la visualizacin, por puntos o asteriscos. Este campo de contrasea no protege en ningn caso los datos, que se transmitirn sin cifrar. nicamente nos protegen de las personas que pudieran estar mirando la pantalla en el momento de la introduccin de la contrasea.
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>
112
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin Comentarios

Curso 2012-2013
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 tambin pueden usarse aqu: name, size, maxlength, etc.
13.12.
Organizacin de los campos de formulario
En el caso de formularios largos y complejos, en ocasiones resulta til reagrupar grficamente ciertos elementos para organizar la pgina de forma lgica. Les etiquetas <fieldset> y <legend>permiten mejorar sensiblemente la ergonoma 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 despus de la etiqueta <fieldset>, agrega una leyenda relacionada con aquellos campos que hayamos agrupado mediante la etiqueta<fieldset> (vase la siguiente captura de pantalla). Ejemplo Reagrupemos los entrantes, las pizzas y los postres en una lista de seleccin mltiple: <!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"> Chikenitos<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"> Clsica<br> <input type="checkbox" name="n5"> Campesina<br> <input type="checkbox" name="n6"> Diablica<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> 113
Curso 2012-2013
Comentarios
Esta etiqueta es perfectamente compatible entre los diferentes navegadores. No hay que olvidar incluir las etiquetas de cierre. Ya no existe una alineacin de la leyenda a la derecha o a la izquierda en Html5. Esta operacin debe realizarse mediante una hoja de estilos CSS.
13.13.
Etiquetado de los campos de formulario
La etiqueta <label> asocia explcitamente el ttulo a un campo de formulario particular. Es como si pegramos una etiqueta (label) delante de un elemento del formulario. En un primer momento, la etiqueta <label> mejora en gran medida la ergonoma de los formularios permitiendo activar un elemento del grupo, por ejemplo un botn radio, haciendo clic sobre el botn radio o sobre el ttulo, 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> 114
Curso 2012-2013
A continuacin es preciso asociar esta etiqueta label al control del formulario correspondiente. Para ello, el elemento de formulario tiene que definirse mediante un identificador de tipo id. <label>Nombre</label>: <input type="text" id="f1"><br> El atributo for="..." dentro de la etiqueta <label> permite asociar directamente la etiqueta al campo haciendo referencia a este identificador. <label for="f1">Nombre</label>: <input type="text" id="f1"><br> Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> <p>Forma de pago:<br> <label for="cash1">Visa</label> <input type="radio" name="cash" id="cash1"><br> <label for="cash2">American Express</label> <input type="radio" name="cash" id="cash2"><br> <label for="cash3">Mastercard</label> <input type="radio" name="cash" id="cash3"> </p> </form> </body> </html>
115
Curso 2012-2013
13.14.
Campo de texto para la direccin de correo electrnico
Esta etiqueta no ha sido implementada todava ms que por el navegador ms 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 validacin directa en el navegador, sin que el diseador tenga que agregar JavaScript.
Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <form action=""> e-mail: <input type="email" name="mail" required> <input type="submit" value="OK"> </form> </body> </html>
A priori, el campo de texto no se distingue de un campo de texto normal.
116
Curso 2012-2013
No obstante, cuando intentamos enviar una direccin de correo electrnico mal formada, el navegador nos informa de que la direccin 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 estticamente mejores.
117
Curso 2012-2013
Aprovechamos esta etiqueta email para hablar del atributo autocomplete de Html5, disponible en varios elementos de los formularios. Cuando esta opcin est activada en las preferencias del navegador, este atributo proporciona la opcin de completar automticamente el campo de formulario con su direccin de correo electrnico.
13.15.
Campo de texto con formato numrico
Otro campo nuevo incluido en Html5 son los contadores numricos. Estos contadores, que se encuentran frecuentemente en aplicaciones como los procesadores de texto, se usan tambin en aplicaciones Web. Esta nueva etiqueta <input type="number"> tiene atributos especficos: min Indica el valor mnimo del contador. max Indica el valor mximo del contador. step Determina el incremento del contador cada vez que se hace clic en las flechitas o value Indica el valor inicial del contador. Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head>
118

<body> <form action=""> Numero de artculos (grupos de 2):<br>
Curso 2012-2013
<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 avin o una habitacin de hotel. Para los desarrolladores, los formatos de fecha suponen un verdadero problema, sobretodo en los sitios Web de vocacin internacional (dd/mm/aa o mm/dd/aa). Se trata de uno de los avances ms importantes de Html5 en cuando al diseo de sitios Web. A da de hoy, solamente Opera 10+ permite ilustrar esta nueva funcionalidad. 119
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin Al inicio:
Curso 2012-2013
Al situar el foco en el campo, aparece un calendario:
Este cdigo se reduce a unas pocas lneas: <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1">
120

<form action=""> Fecha de llegada: <input type="date" name="in"><br> Fecha de partida: <input type="date" name="out"> </form> </body> </html>
Curso 2012-2013
Esta etiqueta <input> con formato de fecha se declina en los siguientes formatos. <input type="date"> La ms general, ilustrada anteriormente. Permite seleccionar el ao, el mes y el da. <input type="month"> Para seleccionar el mes y el ao. Es til por ejemplo para introducir la fecha de expiracin de una tarjeta de crdito.
Fecha de expiracin: <input type="month" name="in"> <input type="week"> Para una semana determinada.
121
Curso 2012-2013
Semana reservada: <input type="week" name="in"> No obstante Html5 no se queda aqu. Proporciona tambin 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>
122
Curso 2012-2013
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 aplicacin completa
Vamos a elaborar un formulario completo para dar soporte a una actividad comercial. Los primeros campos del formulario procesarn los datos del cliente: nombre y apellidos, direccin, cdigo postal y pas (Espaa exclusivamente). Los dems elementos servirn 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 lmites, se utilizar para enviar un correo con los datos del formulario (por motivos prcticos de aprendizaje). <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> fieldset { border : 1px solid black;} </style> </head> <body> 123
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <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> Direccin: <input type="text" name="Direccin"><br> Cdigo Postal: <input type="text" name="CP" size="4" maxlength="5"><br> Pas: <input type="text" readonly name="Pas" value="Espaa"> </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>
Curso 2012-2013
124
Curso 2012-2013
En el momento de la recepcin, el correo electrnico puede tomar el siguiente aspecto: Nombre=Andrs Espinar Direccin=Calle de la Estacin, 22 Madrid CP=28000 Pas=Espaa 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 estndar de Html 4.0. Resulta interesante agregar algunas etiquetas y atributos propios de Html5 para aprovechar algunas de las nuevas funcionalidades aportadas por Html5.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style> fieldset { border : 1px solid black;} </style> </head>
125

<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> Direccin: <input type="text" name="Direccin" required><br>
Curso 2012-2013
Cdigo Postal: <input type="text" name="CP" size="4" maxlength="5" required pattern="[0-9]"><br> Pas: <input type="text" readonly name="Pas" value="Espaa"> </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>
126
Curso 2012-2013
Este formulario, que incluye funcionalidades propias de Html5, es visualmente muy distinto al anterior, con la introduccin del cursor para informar las tallas o del contador para la cantidad. Los campos Nombre y apellidos y Direccin 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 envo, aparece una etiqueta informativa indicando que es preciso completar este campo. Hemos dotado al cdigo postal de una expresin regular (atributo pattern) que exige una codificacin exclusivamente numrica. Aparece una etiqueta informativa si el formato no es vlido. El contador, para introducir la cantidad, permite limitar una cantidad mxima, 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.
127
Curso 2012-2013
14. MULTIMEDIA
14.1. Insertar un archivo de audio
14.1.1 . Etiqueta <audio>
Hasta el presente, no exista un estndar para agregar sonido en una aplicacin Web. Esta operacin se realizaba mediante un plug-in, por ejemplo Flash, aunque no todos los navegadores disponan de los mismos plug-ins. Html5 proporciona a da 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 implementacin de la etiqueta <audio> es todava muy limitada en los navegadores existentes, no es intil agregar un mensaje para aquellos navegadores que no puedan procesar esta etiqueta. <audio src="archivo_sonido"> Su navegador no soporta la etiqueta audio. </audio> Veamos un primer ejemplo: <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <audio src="piano_ogg.ogg" controls> Su navegador no soporta la etiqueta audio. </audio> </body> </html> La ruta del archivo de audio supone, en este caso, que el archivo se encuentra en la misma carpeta del servidor que el archivo Html que contiene la etiqueta audio. El resultado en Firefox 3.6, que reconoce la etiqueta <audio> y el formato ogg:
128
Curso 2012-2013
Los atributos de la etiqueta <audio> son: src Obligatorio. Define la ruta del archivo de sonido. controls Muestra los controles del reproductor de audio (vase la captura de pantalla). Incluye las funcionalidades de reproduccin, 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"tambin es vlida. autoplay Define la reproduccin automtica del archivo de sonido desde el momento en que est disponible, tras la carga de la pgina. <audio src="sonido.ogg" autoplay> Es preciso recordar que esta lectura automtica del archivo de sonido no siempre es bienvenida por parte de los usuarios. Aquellos que estn escuchando su propia msica o que estn consultando su pgina Web desde un lugar silencioso pueden verse molestados. Por otro lado, esta reproduccin automtica ser especialmente molesta para los usuarios de programas de sntesis vocal. La sintaxis Xhtml del atributo autoplay="autoplay" tambin es vlida. 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" tambin es vlida. preload Indica al navegador que debe descargar el archivo de audio durante la carga de la pgina de modo que est disponible para una reproduccin inmediata una vez la solicite el usuario. <audio src="sonido.ogg" preload> 129
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin Este atributo puede tomar los valores:

Curso 2012-2013
preload="none". Sin carga previa. preload="metadata". Carga previa de los metadatos (metadata) asociados al archivo. preload="auto". Carga previa automtica.
Este atributo preload se ignorar si el atributo autoplay est activado. Destacamos lo concisa que resulta la insercin etiqueta <audio> y sus atributos de forma reducida. de un archivo sonoro gracias a esta
14.1.2. Formatos de archivo de audio

La situacin 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 opcin de Firefox, primer navegador en implementar la etiqueta <audio>. El formato ogg se ha mantenido. Ogg es el nombre del principal proyecto de la fundacin 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 extensin .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 ms 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 difcil olvidarse del emblemtico formato mp3 para los archivos de sonido. MPEG-1/2 Audio Layer 3, ms conocido por su abreviatura MP3, es la especificacin sonora del estndar MPEG-1/MPEG-2, deMoving Picture Experts Group (MPEG). Se trata de un algoritmo de compresin de audio capaz de reducir drsticamente la cantidad de datos necesaria para restituir el sonido, pero que, para el oyente, se asemeja a una reproduccin del sonido original sin compresin, es decir con prdida de calidad significativa pero aceptable para el odo humano (fuente Wikipedia). Mp3 se percibe a menudo por parte del usuario como una tecnologa gratuita. Esto permite que pueda codificar y descodificar su msica de forma totalmente legal siempre y cuando el archivo original le pertenezca o se trate de una copia de uso privado. No obstante, esta tecnologa 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 trminos de compresin que el formato ogg o el mp3. Se trata del formato acc. 130
Curso 2012-2013
El formato ACC (Advanced Audio Coding) es un algoritmo de compresin de audio con prdida de datos pero que tiene mejor rendimiento en trminos de compresin que el formato ms antiguo MPEG-1/2 Audio Layer 3 (ms 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 porttil iPod y en su software iTunes. Se trata tambin 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 clsico formato wav que, por su ausencia de compresin, no parece uno de los ms adaptados para competir en la red. En efecto, el tamao 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+ ogg mp3 acc wav s s s no Firefox 3.6+ s no no s Opera 10.6+ s no no s Safari 5+ no s s s Explorer 9 no s s no
Para concluir:

La etiqueta <audio> ha sido implementada en los navegadores ms recientes. Google Chrome 5+ es, con diferencia, el navegador ms polivalente en lo referente a formatos de audio.
Html5 est todava en un estado incipiente. Es posible que aparezca algn nuevo formato de audio. Del mismo modo, cualquier navegador puede incorporar cualquier tipo de archivo que no reconozca a da 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 problemtica de los distintos formatos de archivo. 131
Curso 2012-2013
La etiqueta <source> se utiliza para especificar varios tipos de archivos de audio. Cada navegador escoger el formato que mejor le convenga o el que pueda reproducir.
Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <audio controls> <source src="piano_ogg.ogg"> <source src="piano_mp3.mp3"> <source src="piano_acc.acc"> Su navegador no soporta la etiqueta audio. </audio> </body> </html>
Es importante comprender el funcionamiento de las distintas etiquetas <source>. Supongamos que leemos esta pgina 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. 132
Curso 2012-2013
Por el contrario, Firefox, que soporta los archivos ogg, utilizar el primer recurso. Las dems etiquetas <source> sern ignoradas. Las etiquetas <source> se leen en el orden de aparicin en el cdigo fuente. El navegador usar el primer recurso que soporte. Las mltiples etiquetas <source> aseguran una perfecta reproduccin del archivo de sonido en sus distintos formatos por parte de los navegadores. No obstante, el diseador del sitio o de la aplicacin Web tiene que codificar el mismo archivo de sonido en varios formatos para asegurar la compatibilidad entre los distintos formatos. Los atributos de la etiqueta <audio> son: src Obligatorio. Define la ruta del archivo de sonido. type Define el tipo MIME del contenido. Puede valer:

type="audio/ogg". type="audio/mpeg". type="audio/acc".
Tambin 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> ms adecuada para el navegador.
14.2. Insertar un archivo de vdeo

14.2.1. Etiqueta <video>
Tras varios aos, el vdeo ha invadido la Web. Basta, por ejemplo, con pensar en el xito de YouTube. No obstante en Html 4.0 no exista un estndar para agregar vdeo en una aplicacin Web. Esta operacin se realizaba con la llamada a algn plugin: QuickTime, RealPlayer o Flash. Esto implicaba contar con el plugin adecuado en cada momento. Html5 proporciona a da de hoy una etiqueta nueva para reproducir los archivos de vdeo, independientemente de los plugins instalados en el puesto del usuario. Insertar un archivo de vdeo se realiza de forma muy sencilla mediante la etiqueta: <video src="archivo_video"></video> Dado que la implementacin de esta etiqueta<video> es muy limitada a da de hoy en los navegadores existentes, no es descabellado prever un mensaje para los usuarios de aquellos navegadores que todava 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 vdeo. width
133

Determina la anchura del vdeo. height Determina la altura del vdeo.
Curso 2012-2013
Igual que con la etiqueta <img>, usted puede definir de forma explcita las dimensiones del vdeo. En otro caso, el elemento se muestra por defecto con la altura y la anchura propias del vdeo. Si especifica una dimensin, pero no la otra, el navegador ajustar automticamente el tamao de la dimensin que no se haya especificado para preservar la proporcin de aspecto del vdeo. poster El atributo poster permite especificar una imagen que el navegador usar mientras se est descargando el vdeo o hasta que el usuario inicie su reproduccin. Si no se especifica este atributo, se inserta la primera imagen del vdeo en su lugar. <video src="video_ogv.ogv" poster="imagen.png"> controls Muestra los controles del reproductor del vdeo (vase la captura de pantalla). Se incluyen las funciones de reproduccin, pausa, avance y volumen. <video src="video_ogv.ogv" controls> En ausencia del atributo controls, no se mostrarn los controles del reproductor en el navegador. La sintaxis Xhtml del atributocontrols="controls" tambin es vlida. autoplay Define la lectura automtica del archivo de vdeo una vez est disponible, tras la carga de la pgina. <video src="video_ogv.ogv" autoplay> Recordemos que esta reproduccin automtica no siempre es apreciada por los usuarios, especialmente si la pgina contiene algo de texto. La sintaxis Xhtml del atributoautoplay="autoplay" tambin es vlida. loop Especifica que el archivo de vdeo se reproducir en bucle. De este modo, el vdeo se reproduce nuevamente una vez ha llegado a su fin. <video src="video_ogv.ogv" loop> La sintaxis Xhtml del atributo loop="loop"tambin es vlida. preload Indica al navegador que debe descargar el archivo de vdeo durante la carga de la pgina de modo que est disponible para una reproduccin 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 automtica.
Este atributo preload se ignora si est presente el atributo autoplay.
134
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin 14.2.3. Etiqueta <source>
Curso 2012-2013
La etiqueta <source> nos va a permitir resolver la problemtica de los distintos formatos de archivo. La etiqueta <source> se utiliza para especificar varios tipos de archivos de vdeo. Cada navegador escoger el formato que mejor le convenga o el que pueda reproducir. Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <video controls> <source src="video_ogv.ogv"> <source src="video_mp4.mp4"> <source src="video_webm.webm"> Su navegador no soporta la etiqueta video. </video> </body> </html> Las etiquetas <source> se leen en el orden de aparicin en el cdigo fuente. El navegador usar el primer recurso que soporte. Las mltiples etiquetas <source> aseguran una perfecta reproduccin del archivo de vdeo en sus distintos formatos por parte de los navegadores. No obstante, el diseador del sitio o de la aplicacin Web tiene que codificar el mismo archivo de vdeo en varios formatos para asegurar la compatibilidad entre los distintos formatos. Los atributos de la etiqueta <source> son: src Obligatorio. Define la ruta del archivo de sonido. type Define el tipo MIME del contenido. Puede valer:
type="video/ogg". type="video/mp4". type="video/webm".

Tambin 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".
135
Curso 2012-2013
Especificando el atributo type acelerar el proceso de carga de la etiqueta <source> ms adecuada para el navegador.
15. Etiquetas semnticas y de organizacin

15.1. Antiguas etiquetas semnticas
Html5 hereda las antiguas etiquetas semnticas de Html 4.0. Estas etiquetas tienen un formato especfico. Estas etiquetas semnticas son:
<abbr> ... </abbr> que indica una abreviatura, por ejemplo SA o IVA. Adems de su funcin
semntica, esta etiqueta sirve para indicar a los programas de sntesis vocal que no traten de leer la palabra tal y como est escrita, sino deletrendola. <acronym> ... </acronym> que indica un acrnimo, es decir una palabra formada por slabas de varias palabras como ONU (Organizacin de las Naciones Unidas), ya no existe en Html5. Usaremos en adelante la etiqueta <abbr>. <address> ... </address> que indica una direccin de contacto. Su contenido se visualiza por defecto en cursiva y con letra ms pequea. Precisemos que no se realiza ningn enlace hacia la direccin mediante esta etiqueta. <cite> ... </cite> que indica una cita. Por defecto esta cita se visualiza en cursiva. <code> ... </code> que seala una sintaxis o un cdigo informtico. 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 definicin de un trmino. Por defecto esta definicin 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 representacin distinta a la usada por defecto mediante las hojas de estilo.
Ejemplo <!DOCTYPE html> <html lang="es"> 136
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p> <address> Escrito por Juan Prez</b> <a href="mailto:juanperez@ejemplo.org">Contactar por e-mail</a><br> Direccin: BP 58 Ciudadela<br> Telfono: 91 654 32 10 </address> </body> </html>
Curso 2012-2013
15.2. Las nuevas etiquetas semnticas
137
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin Html5 introduce tambin toda una cantidad de etiquetas semnticas. Etiqueta <hgroup>
Curso 2012-2013
La etiqueta <hgroup> pretende contener un grupo de etiquetas <hx> (al menos dos). Es una frmula derivada de la etiqueta <header>. Ejemplo: <hgroup> <h1>Ttulo del artculo</h1> <h2>Subttulo del artculo</h2> </hgroup>
Etiqueta <mark> La etiqueta <mark> remarca parte del texto. Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <mark>Html5</mark> reemplaza a Html 4.0. </body> </html>
El contenido de esta etiqueta debera subrayarse sobre fondo amarillo, de forma idntica a como hacen algunos navegadores con los resultados de la bsqueda. A da de hoy, slo las versiones ms recientes de Google Chrome y de Firefox interpretan esta etiqueta <mark>. 138
Curso 2012-2013
Etiqueta <figure> La etiqueta <figure> puede usarse para reagrupar elementos tales como imgenes, vdeos o incluso texto que forma parte de una ilustracin del contenido principal. La etiqueta <figcaption>, usada de forma conjunta con la etiqueta <figure>, proporciona una leyenda a los elementos as agrupados. Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <h3>Los aerogeneradores</h3> <p>Un aerogenerador es un generador elctrico movido por una turbina accionada por el viento (turbina elica). En este caso, la energa elica proporciona energa mecnica a un rotor hlice que hace girar el rotor de un generador que convierte la energa mecnica rotacional en energa elctrica [Fuente Wikipdia].</p> <figure> <img src="aerogenerador1.jpg" alt=""> <img src="aerogenerador2.jpg" alt=""> <figcaption>Algunos aerogeneradores</figcaption> </figure> </body> </html>
139
Curso 2012-2013
15.3. Las nuevas etiquetas de organizacin

Estas etiquetas de organizacin estn destinadas principalmente al diseo de la pgina con el objetivo de poder distinguir con mayor facilidad las secciones de cdigo.
15.3.1. Etiquetas <header>, <nav>, <footer> y <aside>

Si hiciramos una sntesis de las pginas Web existentes en la red, verificaramos que todas ellas comparten, la mayora de las veces, en totalidad o en parte, los siguientes elementos:
Un encabezado de pgina con, por ejemplo, un logotipo, un banner, el nombre del sitio, un eslogan o una caja de bsqueda. Herramientas de navegacin, 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 pgina con la mencin, 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 continuacin:
140
Curso 2012-2013
O bien
141
Curso 2012-2013
Html5 intenta crear nuevas etiquetas para poder identificar de manera ms clara y ms rpidamente los grandes bloques en el diseo de la pgina. De este modo:
<header> ... </header> reagrupa los elementos del encabezado de pgina. Esta etiqueta
puede reemplazar de forma natural los<div id="header"> que encontramos con frecuencia.
<nav> ... </nav> indica los elementos de un men de navegacin. <footer> ... </footer> seala los elementos del pie de pgina. 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 cdigo: <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <img src="logo.png"> <h1>Nombre del sitio Web</h1> <form action="http://www.google.com/search"> <input type="text" size="15" value=""> <input type="submit" value="Buscar"> </form> <div> 142
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <a href="index.htm">Inicio</a> | <a href="item1.htm">Item 1</a> | <a href="item2.htm">Item 2</a> | <a href="item3.htm">Item 3</a> | <a href="item4.htm">Item 4</a> | <a href="contacto.htm">Contacto</a> </div> <h2>Nombre de la pgina</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p> <hr> <p>Copyright 201x</p> </body> </html> Se trata de una pgina bastante corriente con:

Curso 2012-2013
Un logotipo. El nombre del sitio Web. Un formulario de bsqueda. Enlaces de navegacin dentro del sitio. El ttulo de la pgina. Contenido. Una lnea horizontal. Una mencin de copyright.
143
Curso 2012-2013
Se trata de un cdigo bastante corriente, que es vlido en Html5, aunque no incorpora ningn elemento para organizar la pgina y distinguir las principales secciones del cdigo relativas al encabezado, los mens de navegacin y el pie de pgina. Esta informacin la aportan las nuevas etiquetas Html5 <header>, <nav> y <footer>.
Con las nuevas etiquetas de organizacin de Html5, este cdigo podra presentar el aspecto siguiente:
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> 144
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <body> <header> <img src="logo.png"> <h1>Nombre del sitio Web</h1> <form action="http://www.google.com/search"> <input type="text" size="15" value=""> <input type="submit" value="Buscar"> </form> </header> <nav> <a href="index.htm">Inicio</a> | <a href="item1.htm">Item 1</a> | <a href="item2.htm">Item 2</a> | <a href="item3.htm">Item 3</a> | <a href="item4.htm">Item 4</a> | <a href="contacto.htm">Contacto</a> </nav> <h2>Nombre de la pgina</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p> <footer> <hr> <p>Copyright 201x</p> </footer> </body> </html>
Curso 2012-2013
145
Curso 2012-2013
El cdigo es mucho ms legible, pudiendo diferenciar de un vistazo aquellos elementos de cdigo relativos al encabezado de pgina, a las herramientas de navegacin y al pie de pgina. Esta es la nica funcin que tienen las nuevas etiquetas semnticas en Html5. No cabe buscar en ellas funciones para dar formato a la pgina o de presentacin. No sirven ms que para organizar la pgina y mejorar la lectura del cdigo por parte de los diseadores y programadores. La captura de pantalla es totalmente idntica a la anterior. Queda al criterio del diseador la posibilidad de asociar hojas de estilo CSS a estas etiquetas para modificar la presentacin.
15.2.2. Etiquetas <section> y <article>

El contenido principal de la pgina puede organizarse en distintas partes:

La etiqueta <section> indica que una parte del contenido de la pgina se refiere a un tema concreto. La etiqueta <article> define un contenido del documento que posee una identidad independiente dentro de la pgina, como puede ser el artculo de un blog, un post en un foro o un producto en un sitio comercial.
Tomemos como ejemplo un blog con distintos temas abordados de forma diaria. <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <h1>Da 1</h1> <h2>Artculo 1</h2> <div>Presentacin del artculo 1</div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p> <h2>Artculo 2</h2> <div>Presentacin del artculo 2</div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices 146
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin diam.</p> <hr> <h1>Da 2</h1> <h2>Artculo 1</h2> <div>Presentacin del artculo 1</div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p> </body> </html> Que tiene la siguiente apariencia en el navegador:
Curso 2012-2013
147
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin Apliquemos las etiquetas <section> y <article>. <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <section> <h1>Da 1<h1> <article> <h2>Artculo 1</h2> <div>Presentacin del artculo 1</div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p> </article> <article> <h2>Artculo 2</h2> <div>Presentacin del artculo 2</div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p> </article> <hr> </section> <section> <h1>Da 2<h1> <article> <h2>Artculo 1</h2 <div>Presentacin del artculo 1</div>
Curso 2012-2013
148
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.</p> </article> <hr> </section> </body> </html> Esta organizacin del cdigo se puede visualizar as:
Curso 2012-2013
15.2.3. Ejemplo completo

Organicemos ahora una pgina completa etiquetas <header>, <nav>, <footer>, <aside>, <section> y <article>. <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <header> 149 usando las
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <img src="logo.png"> <span>Nombre del sitio Web</span> </header> <nav> <ul> <li><a href="">Inicio</a></li> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Contacto</a></li> </ul> </nav> <section> <h1>Asunto de la pgina</h1> <article> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p> </article> </section> <aside> <h3>Archivos</h3> <ul> <li><a href="">Agosto 201x</a></li> <li><a href="">Julio 201x</a></li> <li><a href="">Junio 201x</a></li> <li><a href="">Mayo 201x</a></li> </ul> </aside> </body> </html>
Curso 2012-2013
Todo esto, adornado con algunas hojas de estilo, puede dar, por ejemplo, el siguiente resultado:
150
Curso 2012-2013
16. Algunas propiedades de visualizacin

16.1. Posicionamiento
Un elemento puede posicionarse de cuatro formas distintas. 1. Posicionamiento esttico Es el posicionamiento normal del elemento segn la forma habitual de proceder del navegador. El posicionamiento esttico se determina mediante el atributo: position: static; El diseador 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 posicin del elemento. 2. Posicionamiento relativo Es el posicionamiento de un elemento respecto a su posicin normal o esttica. Este elemento permanece en el flujo de los datos aunque est, en cierta medida, descentrado respecto a su posicin normal. La posicin se define mediante las coordenadas (x,y) donde: 151
Curso 2012-2013
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 pgina y right la distancia entre la parte derecha del elemento y el borde derecho de la pgina. 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 pgina y bottom la distancia entre el borde inferior del elemento y el borde inferior de la pgina.
El posicionamiento relativo se determina por: position: relative; left: valor o %; top: valor o %; right:valor o %; bottom:valor o %; Comentarios

En la prctica, basta con informar una sola especificacin 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> 152
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <div class="normal"> Posicin normal esttica </div> <p>. . . . . . . . . . . . . . . . . . . . .</p> <div class="relativa"> Posicin relativa </div> </body> </html>
Curso 2012-2013
3. Posicionamiento absoluto El posicionamiento absoluto crea un elemento independiente del resto del documento. Los elementos definidos con posicin absoluta se retiran del flujo normal y se posicionan en el lugar exacto definido por el diseador. La posicin 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 pgina y right, la distancia entre el borde derecho del elemento y el borde derecho de la pgina. 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 pgina y bottom la distancia entre el borde inferior del elemento y el borde inferior de la pgina.
El posicionamiento absoluto se determina por: position: absolute; left: valor o %; top: valor o %; right:valor o %; bottom:valor o %; Ejemplo 153
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .absoluta { position: absolute; left: 50px; top: 50px; width: 180px; border: 2px solid black; text-align: center;} </style> </head> <body> <div class="absoluta"> Posicin absoluta </div> </body> </html>
Curso 2012-2013
Comentarios
El posicionamiento absoluto tiene el riesgo de no mostrar correctamente la pgina en resoluciones de pantalla diferentes a la utilizada en tiempo de diseo puesto que los elementos que se hayan posicionado mediante esta propiedad pueden superponerse sobre los elementos del flujo normal de la pgina. Conviene recordar que los navegadores agregan por defecto un margen al cuerpo de la pgina Html y que este margen por defecto vara de un navegador a otro. Por ello es prudente, en caso de usar posicionamiento absoluto, especificar los mrgenes de la etiqueta <body>. 154
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin 4. Posicionamiento fijo
Curso 2012-2013
El posicionamiento fijo tambin crea un elemento independiente del que se puede definir la posicin 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 da de hoy ya est perfectamente integrado en los navegadores ms usuales. Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> <style type="text/css"> .fija { position: fixed; top: 50%; left: 50px; width: 180px; border: 2px solid black; text-align: center;} </style> </head> <body> <div class="fija"> Posicin fija </div> </body> </html>
155
Curso 2012-2013
16.2. Flotar
La propiedad float permite retirar un elemento de tipo caja del flujo normal para situarlo lo ms a la derecha o lo ms 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 dems elementos hacia la izquierda. El valor left alinea a la izquierda el elemento indicado, empujando a los dems elementos hacia la derecha. El valor none no especifica nada y deja la gestin al navegador. La posicin float no puede aplicarse en caso de posicionamiento absoluto.
Ejemplo <!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="iso-8859-1"> </head> <body> <div style="float:right;"> <img src="cup.png"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 156
IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p> </div> </body> </html>
Curso 2012-2013
El elemento contenedor es la divisin 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.
157

MARCAS Tema 1 (Parte 2)

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

MARCAS Tema 1 (Parte 2)

Enviado por

Direitos autorais:

Formatos disponíveis

LENGUAJES PARA LA VISUALIZACIN DE INFORMACIN

IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin

IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin

10.1. 10.2. 10.3.

TABLAS................................................................................................................................... 55 Creacin de una tabla .................................................................................................... 55

IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin 12.

MULTIMEDIA ....................................................................................................................... 128

Las nuevas etiquetas de organizacin ......................................................................... 140

Algunas propiedades de visualizacin ................................................................................. 151 Posicionamiento .......................................................................................................... 151

IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin

1. ESTRUCTURA BSICA DE UN DOCUMENTO

2. CARACTERES ESPECIALES EN HTML5

Solucin: Sneca afirma: Admira a quien lo intenta, aunque fracase.

IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin

Sneca afirma: Admira a quien lo intenta, aunque fracase.

IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin

IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin

6. INICIO A LAS HOJAS DE ESTILO

6.1 Propiedades de estilo

La declaracin de un estilo se hace mediante el binomio propiedad: valor;

Ejemplo: text-align: center; Se interpreta como: "alinear el texto de forma centrada". 12

6.2.1 Selectores bsicos

IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin

De este modo, todas las etiquetas <h1> se alinearn de forma centrada.

6.2.2. Selectores de clase

<div class="rojo">Item 1</div> <div>Item 2<div> <div class="rojo">Item 3</div>

6.2.3 Selectores de identificador

#titulo2 {text-align: center;}

IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin

#rojo {background-color: red;}

6.4. Unidades de medida

IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin

6.5. Notacin de los colores

IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin

6.6. Incorporacin del estilo

6.6.1. Estilo en lnea.

6.6.2. Estilo interno.

IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin

<h2 class="efecto1">Subttulo en cursiva e identacin izquierda</h2> <h1>Ttulo 2 en rojo</h1> </body> </html>

6.6.3. Estilo externo.

IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin

B)El documento Html5

IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin

6.7. Nocin de cascada (orden de prioridad)

IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin

align, border, hspace y vspace, ya deprecados (deprecated)

7.1. Insertar un color de fondo

IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin

7.2. Insertar una imagen de fondo

7.3. Insertar un enlace sobre una imagen

IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin

7.4. Posicionamiento de la imagen de fondo

IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin

IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin

7.5. Los formatos grficos ms utilizados en los navegadores son:

El formato GIF (Graphics Interchange Format)

IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin

El formato JPEG (Joint Photographic Expert Group)

El formato PNG (Portable Network Graphic)

IES Luis Vives UT2 Lenguajes para la visualizacin de la informacin

8. HOJAS DE ESTILO (CSS): DAR FORMATO AL TEXTO

bsicas de presentacin en Html5 de forma ms cmoda.

8.3. Tamao de letra

8.4. Color del texto