HTML y CSS

HTML & CSS
HTML & CSS

(Versin 1.5)
Jos Mara Morales Vzquez josemaria@morales-vazquez.com
Jos Mara Morales Vzquez
Pgina 1
HTML & CSS
CONTENIDO
1. INTRODUCCIN...............................................................................................................6 Historia de los lenguajes de marcas.............................................................................6 Algunos lenguajes de marcas.......................................................................................7 Componentes de un lenguaje de marcas..................................................................8 Diferencias entre HTML y XHTML....................................................................................9 Editores de texto enriquecido.....................................................................................10 Navegadores.................................................................................................................11 HTML4 vs HTML5..............................................................................................................11 2. HTML BSICO..................................................................................................................14 2.1. ESQUELETO BSICO....................................................................................................14 El DOCTYPE.....................................................................................................................14 Los elementos Bsicos..................................................................................................14 2.2. ELEMENTOS DE BLOQUE Y ELEMENTOS DE LNEA.....................................................15 2.3. LAS ETIQUETAS MS COMUNES.................................................................................16 Listas................................................................................................................................17 Las imgenes.................................................................................................................18 Los hiperenlaces............................................................................................................18 Comentarios...................................................................................................................20 Direccin del texto........................................................................................................20 Acrnimos y abreviaturas.............................................................................................21 Caracteres especiales..................................................................................................21 2.4. TABLAS..........................................................................................................................21 2.5. ALGUNAS ETIQUETAS Y ATRIBUTOS DESACONSEJADOS MS................................24 3. CSS. SELECTORES BSICOS............................................................................................25 3.1. INTEGRACIN DE HTML CON CSS.............................................................................25 Comentarios en hojas de estilo CSS...........................................................................26 3.2. SELECTORES BSICOS.................................................................................................26 Selectores de tipo o de etiqueta................................................................................26 Selector universal...........................................................................................................27 Colores y propiedades bsicas del texto..................................................................27 Selectores descendientes............................................................................................30 Selectores de clase.......................................................................................................31 Selectores de ID.............................................................................................................32 3.3. COMBINANDO SELECTORES......................................................................................32 4. UNIDADES DE MEDIDA Y OTRAS PROPIEDADES..........................................................34 Unidades de medida....................................................................................................34 Unidades de medida especficas de las tipografas................................................34 Unidades absolutas.......................................................................................................34 Unidades relativas.........................................................................................................35 Porcentajes....................................................................................................................36 4.1. MS PROPIEDADES PARA EL TEXTO..........................................................................36 4.2. APLICAR ESTILOS A LAS LISTAS...................................................................................38 4.3. DOS NUEVAS ETIQUETAS HTML: div y span...............................................................39 4.4. HERENCIA.....................................................................................................................40
Jos Mara Morales Vzquez Pgina 2
HTML & CSS 4.5. ESPECIFICIDAD............................................................................................................41 La clausula !important..................................................................................................43 5. EL MODELO DE CAJAS..................................................................................................44 5.1. EL CONCEPTO DE CAJA............................................................................................44 div es la caja ms versatil.............................................................................................45 5.2. PROPIEDADES DE LA CAJA........................................................................................45 Las dimensiones del contenido...................................................................................45 Mrgenes interior y exterior..........................................................................................45 El borde de la caja........................................................................................................46 Imgenes de fondo en las cajas y sus propiedades................................................48 Cajas y jerarqua de elementos..................................................................................49 5.3. POSICIONANDO LAS CAJAS (Y OTROS ELEMENTOS)..............................................49 Las propiedades float y clear......................................................................................50 Introduciendo la tercera dimensin en el documento...........................................52 Visibilidad, desbordamientos y recortes....................................................................53 5.4. OTRAS PROPIEDADES..................................................................................................54 Cambiar el aspecto del puntero del ratn...............................................................54 Alterando si un elemento es de bloque o de lnea..................................................55 Modificando el aspecto de los bordes de las celdas de una tabla......................55 6. SELECTORES AVANZADOS.............................................................................................56 Selector de hijos.............................................................................................................56 Selector de hermanos adyacentes (o adyacente, sin ms)..................................56 Selector de atributos.....................................................................................................57 6.1. PSEUDO-CLASES Y PSEUDO-ELEMENTOS...................................................................58 Pseudo-clases................................................................................................................58 Pseudo-elementos.........................................................................................................59 7. ALGUNOS DISEOS Y EFECTOS TILES.........................................................................61 7.1. DISEOS DE ANCHO FIJO, LQUIDOS (O FLUIDOS) Y ELSTICOS...........................61 Ejemplo 1 Cajas..........................................................................................................61 Ejemplo 2 Tres columnas............................................................................................65 Ejemplo 3 Diseo de alto y ancho fijo.....................................................................66 Ejemplos 4 y 5 Diseos de ancho lquido................................................................67 Ejemplo 6 Diseo fijo, fluido, fijo................................................................................67 Ejemplo 7 Separadores entre columnas transparentes........................................68 Ejemplo 8 Sombras y diagonales..............................................................................68 7.2. DISEO DE TABLAS......................................................................................................69 7.3 OTROS TRUCOS.............................................................................................................70 Ejemplos 10 y 11 Transpariencias..............................................................................70 Ejemplo 12 Box Punch................................................................................................72 Ejemplos 13 y 14 Tooltips............................................................................................73 Ejemplos 15 y 16 Mens.............................................................................................75 Ejemplo 17 Esquinas redondeadas..........................................................................77 Ejemplo 18 Sprites.......................................................................................................77 Ejemplo 19 Solapas.....................................................................................................78 Ejemplos 20 y 21 Contorneos....................................................................................79
HTML & CSS 8. FORMULARIOS Y JAVASCRIPT.......................................................................................81 8.1. FUNCIONES Y EMPLAZAMIENTO DEL CDIGO JAVASCRIPT..................................81 8.1.1 Funciones...............................................................................................................81 8.2. FORMULARIOS.............................................................................................................83 8.2.1. Caja de edicin de texto (type=text)...........................................................84 8.2.2 Caja de edicin de contraseas (type=password).....................................85 8.2.3. Etiquetas (label)...................................................................................................85 8.2.4 Radio Buttons (type=radio).............................................................................85 8.2.5 Checkboxes (type=checkbox).......................................................................86 8.2.6. Agrupacin de objetos......................................................................................86 8.2.7 Caja de edicin de texto de mltiples lneas..................................................87 8.2.8 Caja de seleccin de ficheros...........................................................................87 8.2.9 Cajas de seleccin (Comboboxes y Listboxes)...............................................87 8.2.10 Botones................................................................................................................88 8.2.11. Nuevos elementos en HTML5...........................................................................89 8.3. CSS EN LOS ELEMENTOS DE LOS FORMULARIOS......................................................89 8.4. VALIDACIN DE FORMULARIOS MEDIANTE JAVASCRIPT.......................................91 8.4.1. Mtodos, eventos y propiedades.....................................................................91 8.4.2. Eventos del elemento form................................................................................91 8.4.3. Eventos de los botones.......................................................................................91 8.4.4. DOM, Modelo de objetos del documento......................................................92 8.4.5. Validacin del formulario...................................................................................93 8.4.6. Lista de eventos de Javascript disponibles en los formularios......................95 8.5. JAVASCRIPT FUERA DE LOS FORMULARIOS..............................................................97 8.5.1. Alert y otras ventanas de confirmacin o entrada de datos.......................97 8.5.2. Lista de eventos de Javascript disponibles de forma genrica...................98 8.5.3. Los objetos document y window......................................................................99 9. HTML5............................................................................................................................100 9.1. ESTRUCTURA DE UN DOCUMENTO HTML5 O XHTML5............................................100 9.2. CAMBIOS EN LAS ETIQUETAS....................................................................................101 Etiquetas eliminadas...................................................................................................101 Nuevas etiquetas para la organizacin del documento......................................101 Solventando los problemas de versiones antiguas de Internet Explorer.............101 9.3. MEJORAS EN LOS FORMULARIOS: NUEVOS TIPOS DE INPUT.................................102 9.4. MODERNIZR................................................................................................................104 9.5. ETIQUETAS MULTIMEDIA............................................................................................107 Audio.............................................................................................................................107 Formatos de audio......................................................................................................108 Vdeo.............................................................................................................................108 Formatos de vdeo......................................................................................................109 Archivos de Flash.........................................................................................................109 9.6. DIBUJO MEDIANTE LA ETIQUETA CANVAS..............................................................109 9.7. GEOLOCALIZACIN.................................................................................................113 9.8. MS COSAS...............................................................................................................114 10. CSS3.............................................................................................................................116
HTML & CSS 10.1. LOS NUEVOS SELECTORES DE CSS3.......................................................................116 Pseudo-elementos.......................................................................................................116 Pseudo-clases..............................................................................................................116 Nuevos selectores para uso con formularios...........................................................117 El selector :not()...........................................................................................................117 Nuevos selectores de atributos.................................................................................118 Selector general de elementos hermanos..............................................................119 9.2. LAS NUEVAS PROPIEDADES DE CSS3.......................................................................119 Gradientes y una nueva paleta de colores............................................................119 Fondos mltiples..........................................................................................................120 Esquinas redondeadas y bordes decoradas..........................................................121 Sombras........................................................................................................................122 Opacidad.....................................................................................................................123 Ms control de la tipografa......................................................................................123 Columnas ms fciles.................................................................................................124 Transformaciones y trancisiones................................................................................125 11.ENLACES, BIBLIOGRAFA Y REFERENCIAS..................................................................128
Pgina 5
HTML & CSS
1. INTRODUCCIN
Un lenguaje de marcas es una forma de codificar un documento que, junto con el texto, incorpora etiquetas (o marcas) que contienen informacin adicional acerca de la estructura del texto o su presentacin. Tal vez la forma ms primitiva que hemos usado de lenguaje de marcas fuera un dictado en el que la persona que dicta nos va dando notas acerca de lo que tenemos que poner en negritas, cursivas, etc. En el mundo de los ordenadores llevamos mucho tiempo usando lenguajes de marcas. Wordstar, uno de los primeros procesadores de texto que existieron para el mundo de los PC o Latex, el programa de autoedici n favorito para edicin profesional de textos, son dos ejemplos de ello: Wordstar La lluvia en ^BSevilla^S es una ^Ymaravilla^S. LATEX La lluvia en \textbf{Sevilla} es una \textit{maravilla}. Resultado: La lluvia en Sevilla es una maravilla. Es comn en muchos mbitos confundir un lenguaje de marcas con un lenguaje de programacin. Pero no: se trata de cosas diferentes. Hay, fundamentalmente, tres carencias de los lenguajes de marcas que los distinguen: No tienen funciones aritmticas No tienen variables No tienen estructuras de control Las caractersticas principales de un lenguaje de marca son las siguientes: Se usan siempre sobre texto plano. Las marcas se entremezclan con el contenido del documento aunque, en general, es fcil distinguir unas del otro. Su procesamiento es muy sencillo. Son muy flexibles.
Historia de los lenguajes de marcas

La primera referencia que se tiene de un lenguaje de marcas como tal est an alejado de la informtica. Se trata de la prctica de los empleados de imprenta de anotar marcas con instrucciones en los mrgenes de las pruebas de impresin:
Pgina
HTML & CSS
En el mundo de la informtica el padre de los lenguajes de marcas ms importantes de la actualidad surge en los aos 80. Se llama SGML (Standard Generalized Markup Language) y define unas reglas bsicas para el etiquetado de documentos mediante marcas. SGML no es en realidad un lenguaje sino un metalenguaje, es decir, un lenguaje creado con la finalidad de definir otros lenguajes a partir de l. RTF (Rich Text Format), HTML (HyperText Markup Language) o XML (Extensible Markup Language) derivan de SGML.
Algunos lenguajes de marcas

HTML es, sin duda, el lenguaje de marcas ms usado y la base de las pginas web. Su primera versin, que data de los aos 90, describa slo 22 elementos diferentes. La versin actual es la 4.01 aunque la versin 5 est en una fase muy avanzada y se empieza a utilizar cada vez ms a pesar de que se trata de una norma que no est an aprobada de forma definitiva. XML deriva de SGML y se trata tambin de otro metalenguaje. Parte de un subconjunto de SGML y aade algunas restricciones nuevas de forma que los lenguajes derivados a partir de XML resulten ms sencillos y fciles de interpretar que los derivados directamente de SGML. XHTML (Extensible HTML) es equivalente a HTML pero deriva de XML. La versi n actual es la 1.1 y la versin 2.0 est en borrador. Las diferencias entre HTML 4 y XHTML 1 son nmias. CSS (Cascading Style Sheets) es un lenguaje usado para definir la presentaci n de un documento en HTML o XHTML. No se trata en realidad de un lenguaje de marcas, pero se encuentra indisolublemente unido a estos dos. La versi n actual es la 2 y la versin 3 se encuentra en fase de borrador. Al igual que ocurre con HTML5, CSS3 se usa cada vez ms a pesar de no tratarse de una norma definitiva. XSL (Extensible Stylesheet Language) describre la forma en que deber a de mostrarse la informacin contenida en un documento con formato XML.
Pgina !
HTML & CSS SGML est definido como una norma ISO mientras que el resto de los lenguajes mencionados estn definidos por la W3C (Worl Wide Web Consortium).
Componentes de un lenguaje de marcas

Veamos un primer ejemplo muy simple de HTML y analicemos los diferentes componentes que pueden aparecer en un lenguaje de marcas y algunas de las caractersticas particulares de HTML: <html> <head> <title>.:: PAGINA DE PRUEBAS ::.</title> </head> <body bgcolor !blac"! te#t !$hite!> <ce%ter><h&>'I'U(AR</h&></ce%ter> Pr)eba de <*tro%g>te#to %ormal</*tro%g> Seg)%da li%ea +'ambie% e% la *eg)%da li%ea </body> </html> Se trata de un ejemplo reducido al mnimo y que, incluso, presenta algunos defectos o incorrecciones, pero nos vale como primer contacto. Veamos como se vera en un navegador:
Pgina "
HTML & CSS Elementos: Constan de una etiqueta de inicio, una de fin y todo lo que haya enmedio. Los elementos constan, a su vez, de tres elementos: etiquetas, atributos y contenido. Un ejemplo de elemento sera este: <*tro%g>te#to %ormal</*tro%g> Etiquetas o tags: Son las marcas propiamente dichas y habitualmente van entre corchetes quebrados <> Las hay de inicio y de fin aunque, en algunos casos, ambas pueden coincidir en una sla partcula con una sintaxis especial cuando el elemento no tiene contenido: <title> ... </title> Contenido: Es el texto base informativo del documento. Por ejemplo, en el anterior elemento con las etiquetas strong el contenido sera el texto que luego aparecer en negritas. Atributos: Es una pareja compuesta por un nombre y un valor que se encuentra dentro de una etiqueta de inicio e identifica las propiedades asociadas al elemento. bgcolor !blac"! En realidad, en HTML convencional es posible encontrar atributos sin valor, pero en XHTML, que ser nuestro preferido, esto no es vlido como veremos a continuacin.
Diferencias entre HTML y XHTML

Como hemos dicho hace un momento, XHTML introduce ciertas restricciones a HTML para hacer que el lenguaje resultante sea ms sencillo y fcil de interpretar. Estas diferencias son las siguientes: Los elementos deben de cerrarse siempre. En HTML normal es perfectamente vlido, por ejemplo, empezar un prrafo con la etiqueta y, sin poner la marca de fin de prrafo comenzar un segundo prrafo de nuevo con . Puesto que no podemos anidar dos p rrafos uno dentro de otro el intrprete debe de reconocer que al empezar el segundo prrafo debera antes de terminar el primero. En XHTML hay que cerrar el primero explicitamente o en caso contrario tendremos un error de validacin: ,'-(: <.>Primer ./rra0o <.>Seg)%do ./rra0o 1,'-(: <.>Primer ./rra0o</.><.>Seg)%do ./rra0o</.> Los elementos sin contenido deben de cerrarse siempre usando una etiqueta especial que realiza el autocierre en la misma etiqueta de inicio: ,'-(: 
Pgina #
HTML & CSS 1,'-(: Los elementos anidados no deben solaparse. En HTML est permitido pero en XHTML es incorrecto: ,'-(: <*tro%g>'e#to</*tro%g> 1,'-(: <*tro%g>'e#to</*tro%g> Los valores de los atributos deben de ir siempre entre comillas simples o dobles: ,'-(: <body bgcolor blac" te#t $hite> 1,'-(: <body bgcolor !blac"! te#t 2$hite2> Los nombres de etiquetas y atributos deben de ir siempre en minsculas ,'-(: <body BG34(4' blac" te#t 5,I'E> 1,'-(: <body bgcolor !blac"! te#t !$hite!> No est permitido usar un atributo sin valor (minimizacin de atributos) ,'-(: <te#tarea reado%ly> 1,'-(: <te#tarea reado%ly !reado%ly!> Los atributos y etiquetas desaprobados o desaconsejados (deprecated) en HTML 4 no son vlidos en XHTML. Los veremos ms adelante. Una aclaracin en todo esto: un fichero que valida correctamente como XHTML siempre validar como HTML pero no a la inversa, es decir, si escribimos de acuerdo a la norma marcada por XHTML tambin conseguimos ficheros vlidos para HTML con una sintaxis ms clara, legible y menos sujeta a errores de interpretacin. Por eso ser nuestra eleccin a lo largo de todo este manual.
Editores de texto enriquecido

A la hora de trabajar con lenguajes de marcas, la eleccin de un editor de texto enriquecido con ayuda contextual es muy importante:
Pgina 1$
HTML & CSS
Existen muchos editores que cumplen para esta labor, pero si te ves perdido a la hora de empezar puedes probar con uno de estos dos: Bluefish (multiplataforma): http://bluefish.openoffice.nl/ Notepad++ (slo Windows): http://notepad-plus-plus.org/
Navegadores
En el caso del HTML y el XHTML, el navegador web funciona como visor o intrprete del lenguaje de marcas y su respeto por los est ndares es fundamental. Muchas veces en el pasado se ha utilizado la posici n de supremaca de uno de ellos para desviarse del estndar y perjudicar a la competencia. Afortunadamente estas prcticas parecen abandonadas hoy en da. Tenemos varios recursos para comprobar la validez de un fichero escrito en HTML o la forma en que el navegador implementa los estndares: Validadores de HTML y CSS: http://validator.w3.org/ http://jigsaw.w3.org/css-validator/ Tests de cumplimiento de estndares: http://acid2.acidtests.org/ http://acid3.acidtests.org/ http://www.css3.info/selectors-test/
HTML4 vs HTML5
HTML5, an est en estado de borrador, pero supone un enorme y esperado cambio. La ltima revisin de HTML, la 4.01, se hizo en 1999 y desde entonces Internet, nuestros hbitos y nuestras espectativas sobre lo que deberamos de recibir al visitar una web han cambiado mucho. En paralelo a HTML5 existir una versin de XHTML5 ms estricta que tambin se encuentra an en estado de borrador. Las diferencias entre HTML5 y XHTML5 sern las mismas que las ya vistas para HTML4 y XHTML4: apenas unas restricciones extras para facilitar la interpretacin del lenguaje. HTML5, adems, ir acompaado de CSS3 que mejora y simplifica el diseo web. Las principales novedades de HTML5 y CSS3 son las siguientes: Ya no se habla de pginas web sino de aplicaciones web. Esto quiere reforzar el cambio en la filosofa que se persigue con esta nueva versin del lenguaje. La separacin entre presentacin y contenido se ve reforzada. En HTML5 todo lo relativo al diseo ir en los CSS. HTML5 sin CSS es en blanco y negro y no se debera siquiera elegir un tipo de letra diferente al que el navegador
HTML & CSS nos muestra por defecto. Existe una gran mejora en todo lo relativo al manejo de formularios HTML5 se encuentra plenamente integrado con Javascript. De hecho, se encuentra ligado de forma casi indisoluble a una amplia colecci n de API's de Javascript que le proporcionan soporte para dise o 2D y 3D, geolocalizacin, arrastrar y soltar, multimedia, etc. Entonces, si existen todas estas ventajas y el borrador de HTML5 est ya prcticamente cerrado por qu cuesta tanto trabajo encontrar webs realizadas en HTML5?Por qu no empezamos nosotros a trabajar directamente con l? La respuesta est en los navegadores, los intrpretes de todo esto. Veamos una fotografa de los navegadores ms usados (en septiembre de 2011):
Las cifras impresas en rojo representan el porcentaje de HTML5 que ese navegador es capaz de interpretar correctamente. Como vemos, IE8, el navegador ms usado con ms de un cuarto del total, slo interpreta el 20% de la norma HTML5. En una infografa ms reciente (septiembre 2012) se confirman estos porcentajes: uno de cada cuatro de los navegadores actuales no proporciona a n soporte para HTML5:
Pgina 12
HTML & CSS
Hoy, febrero de 2014, las tornas han cambiado bastante desde que empezamos a escribir este manual y ya es perfectamente factible encontrar bastante a menudo aplicaciones web construidas completamente en torno a HTML5
Pgina 13
HTML & CSS
2. HTML BSICO
En este segundo apartado trataremos los elementos ms bsicos de HTML siguiendo las siguientes normas: Nos centraremos en la versin 4.01, tratando de respetar la norma XHTML 1.0 ms estricta (aunque siempre hablaremos de html por simplificar) y acercndonos cuanto podamos a cumplir con lo que establecer HTML5 para facilitar una futura trancisin. Veremos en algunos casos algunas de las etiquetas y/o argumentos de uso desaconsejado indicndolo siempre a continuacin. Puesto que en nuestro desempeo no slo haremos pginas web sino que tendremos que modificar las que otros han creado necesitamos saber para quer sirven. Trataremos, tambin, de proporcionar siempre que podamos un contenido semntico a nuestras etiquetas Separaremos la parte de diseo (que en un futuro aprenderemos a aplicar mediante CSS) del contenido del documento. No te preocupes si, por el momento, tus pginas resultan demasiado simples.
2.1. ESQUELETO BSICO

El DOCTYPE
Todas las pginas HTML deberan de comenzar por un DOCTYPE o Declaracin de tipo de documento que es la que asocia dicha p gina con un DTD (Document Type Definition) o Definicin de Tipo de Documento e indica esto al navegador. En realidad, y para no hacerlo ms complicado de lo que necesitamos saber, se trata meramente de una lnea formal en la que indicamos al navegador la norma que sigue el lenguaje de marcas que debe de interpretar. En la Wikipedia tenemos diferentes tipos de DOCTYPE: http://es.wikipedia.org/wiki/Declaraci%C3%B3n_de_tipo_de_documento La definicin de HTML 4.01 Trancisional, la ms habitual, es esta:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiti na!//E"" "#tt$%//&&&.&3. r'/T(/#t)!4/! s*.+t+",
El DOCTYPE debe de ocupar siempre la primera lnea del documento html sin que exista ni un slo espacio antes de ella o no tendremos garantas de que todos los navegadores la reconozcan.
Los elementos Bsicos

Los elementos bsicos en una pgina HTML son html, head y body. La expresin mnima formal de un documento HTML sera este:
Pgina 14
HTML & CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiti na!//E"" "#tt$%//&&&.&3. r'/T(/#t)!4/! s*.+t+", <#t)! !an'-"*s", <#*a+, <)*ta #tt$-*./i0-"C nt*nt-T1$*" 2 nt*nt-"t*3t/#t)!42#ars*t-UT5-6" /, <tit!*,L*n'/a7*s +* Mar2as</tit!*, </#*a+, <8 +1, <$,9H !a )/n+ !</$, </8 +1, </#t)!,
El contenido del elemento html es toda nuestra pgina web (salvo el DOCTYPE). Lleva un atributo denominado lang que indica el idioma con que est hecha la web. El contenido del elemento head est formado, a su vez, por una serie de elementos que no se visualizan directamente (salvo el t tulo o title que aparecer en la barra del navegador). El elemento meta puede aparecer con diferentes indicaciones dentro de esta seccin de cabecera. La ms importante es, tal vez, el juego de caractres con que hemos escrito el documento HTML. Si nos equivocamos puede que algunos caracteres especiales (vocales acentuadas, signos de puntuacin, etc.) no aparezcan correctamente. En Linux se suele usar UTF-8 mientras que si usas windows suele ser el ISO-8859-1. Por ltimo, el elemento body contendr toda la parte visible de la web. En este caso se trata de un nico prrafo (etiqueta p) con un mensaje tpico de bienvenida.
2.2. ELEMENTOS DE BLOQUE Y ELEMENTOS DE LNEA
Las pginas web estn hechas siempre de elementos rectangulares que se colocan uno debajo de otro, uno junto a otro o uno encima de otro. No hay nada ms. Cualquier cosa que nos parezca diferente se trata de un truco de diseo. Dentro de esto, tenemos que distinguir entre los elementos de bloque y los de lnea. Los de bloque podramos asemejarlos con los prrafos de un texto: ocupan todo el ancho de la superficie til del documento (o del rea del documento al que han sido restringidos) y pueden tener otros elementos, iguales o diferentes, arriba, abajo o, en algunas ocasiones, en su interior (aunque esto ltimo no siempre es correcto). Un prrafo, por ejemplo, no debera de contener a otro prrafo en su interior. Tambin pueden contener elementos de lnea. Los elementos de lnea se sitan uno debajo de otro, uno al lado de otro (como, por ejemplo, un texto en negrita que puede ir seguido de otro en cursiva) o, incluso, uno dentro de otro (una cita puede tene una palabra en negrita en su interior). Los elementos de lnea no pueden tener en su interior un elemento de bloque. Otra caracterstica importante de HTML es que por defecto los saltos de l nea
HTML & CSS consecutivas que hagamos manualmente en nuestro documento no se respetan. Por ejemplo, si yo escribiera lo siguiente:
<$,H !a a t + s
! s 2 )$a:*r s +*! 2/rs +* HTML</$,
En el navegador se mostrara lo siguiente:

H !a a t + s ! s 2 )$a:*r s +*! 2/rs +* HTML
Cuando aparecen mltiples espacios en blanco slo se respeta el primero. Por ejemplo:
<$,H !a a t + s ! s 2 )$a:*r s +*! 2/rs +* HTML</$,
Se vera en el navegador as:

H !a a t + s ! s 2 )$a:*r s +*! 2/rs +* HTML
2.3. LAS ETIQUETAS MS COMUNES

<$,</$, <8r /, <8,</8, <str n',</str n', <i,</i, <*),</*), <s/$,</s/$, <s/8,</s/8, <+*!,</+*!, <$r*,</$r*, <#1,</#1, <#;,</#;, """ <#<,</#<, <2it*,</2it*, <.,</., <8! 2=./ t*,</8! 2=./ t*, <#r /, Define un prrafo Salto de lnea Negritas Negritas Cursivas Cursivas Superndice Subndice Texto tachado Preformateado Encabezado de nivel Encabezado de nivel ! Encabezado de nivel # Cita corta Cita corta Cita larga $nea horizontal
Todas las etiquetas llevan asociada una informacin de estilo por defecto, pero esta puede variar entre cada navegador. Ms adelante, cuando veamos CSS, veremos como modificar dicho estilo y tratar de que sea lo m s independiente posible del navegador que usemos para verlas. En las etiquetas en las que podemos elegir, preferiremos siempre las que conllevan informacin semntica (strong, em, cite)frente a las que slo nos dan informacin de estilo (b, i, q).
HTML & CSS
La etiqueta pre de texto preformateado define un rea en el que se respeta de forma ntegra los saltos de lnea y espacios en blanco que hayamos realizado al escribir el texto. Las etiquetas h1, h2, h3, h4, h5, h6, p, blockquote, y pre son etiquetas que defienen elementos de bloque, mientras que strong, b, em, i, sup, sub , del, bdo, cite o q son etiquetas de elementos de lnea.
Listas
Las listas se definen mediante las etiquetas ul, li y ol.
</!,<//!, < !,</ !, <!i,</!i, Define una lista no ordenada %con &boliches'( Define una lista ordenada Define cada item de la lista en cual)uiera de los anteriores
Por ejemplo:
< !, <!i,L/n*s</!i, <!i,Mart*s</!i, <!i,Mi>r2 !*s</!i, <!i,?/*0*s</!i, </ !,
Las listas se pueden anidar, pero teniendo en cuenta que la nueva lista tiene que abrirse antes de cerrar el item anterior. Por ejemplo:
</!, <!i,P/nt 1</!i, <!i,P/nt ; </!, <!i,@$arta+ <!i,@$arta+ <//!, </!i, <!i,P/nt 3</!i,
@ +*! $/nt B +*! $/nt
;</!i, ;</!i,
<//!,
El atributo type (de uso desaconsejado!!!) nos permitira cambir el tipo de smbolo en las listas desordenadas. Por ejemplo <ul type=square>. Otros valores vlidos para este atributo son disc o circle. Con la etiqueta ol tenemos dos atributos (tambin de uso desaconsejado) que nos permiten cambiar el comportamiento de la lista: start para variar el nmero por el que se inicia la lista ordenada (que por defecto es el 1) y type para cambiar el formato de enumeracin que usamos. Ejemplos: <ol start=50> o <ol type=A>. Otros tipos vlidos son 1, I, i o a.
Pgina 1!
HTML & CSS
La etiqueta li se puede usar fuera de un bloque ol o ul y puede llevar un atributo denominado type con cualquiera de las opciones vlidas en ol o ul (tambin est desaconsejado su uso).
Las imgenes
Para insertar imgenes se utiliza la etiqueta img Es una etiqueta nica (sin contenido) por lo que tenemos que usar el mtodo de auto-cerrado para cumplir las normas de XHTML. La sintaxis bsica es esta:
<i)' sr2-Ai)a'*n.7$'A a!t-AT*3t a!t*rnati0 A /,
El atributo src es obligatorio e indica el lugar donde est la imagen. Se puede usar una ruta relativa, absoluta o indicar una URL web.:
<i)' sr2-A$i2s/;01;/i)a'*n.7$'A a!t-AT*3t a!t*rnati0 A /, <i)' sr2-A#tt$%//&&&.*3a)$!*.2 )/i)a'*n.7$'A a!t-AT*3t a!t*rnati0 A /,
El atributo alt tambin es obligatorio en XHTML. Algunos otros atributos tiles y habituales y muestra un texto alternativo que se mostrar cuando la imagen no pueda visualizarse por cualquier motivo:
<i)' sr2-Ai)a'*n.7$'A a!t-AT*3t a!t*rnati0 A tit!*-AT*3t $asar *! ratBnA #*i'#t-A;00A &i+t#-A400A /, r*sa!ta+ a!
El atributo title muestra un tooltip al pasar el ratn sobre la imagen. width y height nos permiten modificar el ancho y/o el alto de la imagen expresando el tamao deseado en pxeles. Si no los usamos la imagen se mostrar con su tamao original. Si modificamos slo uno de ellos el otro quedar con su tamao original y la imagen resultar anamrfica. El atributo border muy til para indicar que queremos una imagen con borde (sin l cuando lleva incorporado un hiperenlace) est desaconsejado en HTML4 y no existe en HTML5. Indica el nmero de pxeles que tendr el borde de la imagen. Por defecto las imgenes se muestran sin borde salvo que pertenezcan a un hiperenlace (ver el punto siguiente)
<i)' sr2-A$i2s/;01;/i)a'*n.7$'A a!t-AT*3t a!t*rnati0 A 8 r+*r-A;A/,
La etiqueta img es una etiqueta de lnea.
Los hiperenlaces
Los enlaces a otras pginas se realizan mediante la etiqueta a
<a #r*C-A#tt$%//&&&.' '!*.*sA /,D '!*</a,
Pgina 1"
HTML & CSS El atributo href es obligatorio e indica la direccin destino del enlace. Puede ser una pgina web en el mismo disco, en el mismo servidor, en otro servidor, a un punto de la misma pgina, a una direccin de correo, etc.
<a #r*C-"a!8/).#t)!",E!8/) +* C t s</a, <a #r*C-")ai!t %7 s*)ariaF/$ na+a1.n*t",En0iar /n 2 rr* </a,
Otros atributos son title y target:

<a #r*C-"a!8/).#t)!" tit!*-AT*3t tar'*t-AG8!an= ,E!8/) +* C t s</a, r*sa!ta+ a! $asar *! ratBnA
El atributo title nos muestra un tooltip al pasar el ratn sobr el enlace, mientras que target nos permite indicar donde queremos que se abra la nueva p gina a la que hace referencia el enlace. El valor por defecto de target es _self e indica que se abrir en la misma pgina donde lo pulsamos. Si usamos el valor _blank la pgina se abrir en una solapa o ventana nueva. Para hacer un enlace a un punto dentro de la misma pgina usamos la siguiente sintaxis:
<a #r*C-"HC4",I*r *! 2a$Jt/! ... <a i+-"C4",C@PKTULO 4</a, 4</a,
Como vemos, usamos un elemento a para crear el hiperenlace usando un trmino a nuestra eleccin precedido del carcter especial #. En el punto de destino del hiperenlace debemos de crear otro elemento a pero en este caso usaremos el atributo id y como contenido del mismo pondremos el mismo trmino que pusimos como valor del atributo href pero en este caso prescindiendo del carcter # Para ir a un punto dentro de otra pgina usamos un formato similar:
<a #r*C-" tra$a'ina.#t)!HC4",I*r *! 2a$Jt/! 4 +* tra$a'ina.#t)!</a,
En esa otra pgina deberamos de tener un elemento a con un atributo id de forma similar al caso que hemos visto antes:
<a i+-"C4",C@PKTULO 4</a,
Antes de HTML4 se usaba el atributo name en lugar de id. En HTML4 name est desaconsejado y en HTML5 no existe. El atributo id que nos sirve como referencia para el destino del hipervnculo no tiene porque ir en un elemento de tipo a. Podra ir en casi cualquier otro elemento. Por ejemplo:
<a #r*C-"H!istaG1",I*r !a !ista +* 2ara2t*rJsti2as</a, ...
Pgina 1#
HTML & CSS

</! i+-A!istaG1A, <!i,Pr 2*sa+ r @(M</!i, <!i,1;6 M81t*s (@M</!i, <!i,1< D81t*s HDD C )$a2t 5!as#</!i, <//!,
El valor del atributo id debe de ser nico y no debe repetirse nunca en la misma pgina web. Un ejemplo ms completo para un enlace a email en el que rellenamos no solo la direccin de destino, sino tambin el asunto y el campo cc:
<a #r*C-")ai!t %7 s*)ariaF/$ na+a1.n*tLs/87*2t-D* /n a!/)n D@WM22-+*$arta)*nt Fr*1C*rnan+ 0i.2 )",En0iar 2 rr* </a, +*
NOTA IMPORTANTE: Para que valide correctamente como XHTML estricto debemos de sustituir el signo & por el cdigo & No se ha hecho por claridad, pero lo veremos ms adelante. La etiqueta a es una etiqueta de lnea.
Comentarios
Los comentarios en HTML se escriben entre los smbolos 


<in$/t t1$*-"n/)8*r" na)*-"*+a+" )in-"16" )a3-"100" st*$-"1" 0a!/*-"16" /, <in$/t na)*-"2/rs r" na)*-"/ni+a+*s" t1$*-"ran'*" )in-"3" )a3-"1;" 0a!/*-"<" st*$-"3" /,


<in$/t <in$/t <in$/t <in$/t <in$/t <in$/t <in$/t t1$*-"+at*" na)*-"na2i)i*nt " /, t1$*-") nt#" na)*-"a!ta" /, t1$*-"&**=" na)*-"0a2a2i n*s" /, t1$*-"ti)*" )in-"0[%00" )a3-";3%00" st*$-"3<00" 0a!/*-"0]%00" /, t1$*-"+at*ti)*" na)*-"C*2#a1" /, t1$*-"+at*ti)*-! 2a!" na)*-"C*2#a;" /, t1$*-"2 ! r" na)*-"2 ! r" 0a!/*-"H20CC**" /,


<in$/t t1$*-"s*ar2#" na)*-"8/s./*+a" /, <in$/t t1$*-"8/tt n" 0a!/*-"B/s2ar" /, <in$/t t1$*-"t*!" na)*-"t*!*C n " /,
Intimamente relacionado con los formularios, aunque mucho ms universal y sin dependencia directa con estos, tenemos el nuevo agumento contenteditable que convierte, cuando su valor es true, a casi cualquier elemento, ya sea de bloque o de linea, en editable de forma directa por el usuario:
<#1 2 nt*nt*+ita8!*-"tr/*",Tit/!ar *+ita8!*</#1, <$ 2 nt*nt*+ita8!*-"tr/*",Est* $NrraC ta)8i>n *s *+ita8!*</$, <+i0 2 nt*nt*+ita8!*-"tr/*",Y *st* 8! ./* +i0 ! )is) </+i0, <$,P*r R in2!/s <str n' 2 nt*nt*+ita8!*-"tr/*",*stas n*'ritas</str n', *st* <s$an 2 nt*nt*+ita8!*-"tr/*",t*3t 2 n /n s$an</s$an, ./* s n *!*)*nt s +* !Jn*a $/*+*n s*r *+ita8!*s</$,
9.4. MODERNIZR
Modernizr es una librera escrita en javascript y que nos sirve de ayuda en la transicin a HTML5. Su funcionamiento es muy simple: nos permite interrogar al navegador del usuario que est viendo nuestras pginas sobre si entiende determinadas caractersticas de HTML5 o CSS3 y, en ese caso, elegir lo que vamos a mostrarle. Veamos un ejemplo muy sencillo y explicamos con l como instalarlas
Pgina 1$4
HTML & CSS y hacerlas funcionar de forma bsica. Lo primero que debemos de hacer es descargar las libreras de modernizr de la web http://www.modernizr.com/ y copiar el fichero js en el directorio de nuestro proyecto. Tenemos dos opciones: o descargarnos las libreras completas de la versin de desarrollo o generar una librera a medida que slo contenga las comprobaciones de las etiquetas y atributas que usamos. Esta segunda opci n ser mucho ms ligera y acelerar la carga y ejecucin de nuestro proyecto. En segundo lugar tenemos que incluir una llamada a la librer a en el head de nuestro html:
<!DOCTYPE #t)!, <#t)! !an'-"*s", <#*a+, <)*ta 2#ars*t-"UT5-6" /, <s2ri$t sr2-") +*rniOr-;.P.3.7s",</s2ri$t, <!in= r*!-"st1!*s#**t" #r*C-"*sti! s.2ss" )*+ia-"a!!" /, <tit!*,E7*)$! +* /s +* M +*rniOr</tit!*, </#*a+, <8 +1, </8 +1, </#t)!,
Dos indicaciones en este paso: en primer lugar el nombre de la librer a puede cambiar segn lo que nos descarguemos de la web. Revsalo antes de incluirlo en tu proyecto. En segundo lugar, la carga de la librer a de modernizr debe de hacerse antes de la carga de las hojas de estilo si queremos hacer comprobaciones tambin en estas. Ahora ya lo nico que tenemos que hacer es, desde nuestro documento, interrogar a Modernizr si el navegador es capaz de interpretar determinadas etiquetas y/o argumentos y actuar en consecuencia. Podemos ver una demostracin sencilla introduciendo este cdigo en el body de nuestro ejemplo anterior:
<s2ri$t, iC ZM +*rniOr.in$/t.r*./ir*+\ X a!*rtZ"T/ na0*'a+ r s $ rta *! atri8/t r*./ir*+"\4 Y *!s* X a!*rtZ"T/ na0*'a+ r n s $ rta *! atri8/t r*./ir*+"\4 Y iC ZM +*rniOr.in$/tt1$*s.ran'*\ X a!*rtZ"T/ na0*'a+ r s $ rta *! in$/t t1$*-ran'*"\4 Y *!s* X a!*rtZ"T/ na0*'a+ r n s $ rta *! in$/t t1$*-ran'*"\4 Y </s2ri$t,
Pgina 1$5
HTML & CSS Pero lo que nosotros realmente queremos, la mayora de las veces, no es advertir de nada al usuario sino crear una pgina 'alternativa' de forma que el no se de cuenta de nada aunque, lgicamente, pierda algunas de las funcionalidades que ofrece HTML5. Para ello usamos la funcin document.write de javascript que nos permite crear parte del documento HTML en el mismo momento de su ejecucin y dependiendo de las indicaciones que nos haga Modernizr. Veamos una alternativa ms til al cdigo anterior con estas indicaciones:
<s2ri$t, iC ZM +*rniOr.in$/t.r*./ir*+\ X + 2/)*nt.&rit*Z"<!a8*!," )8r*% <in$/t na)*-^n )8r*^ t1$*-^t*3t^ r*./ir*+-^r*./ir*+^ /,</!a8*!,<8r/,"\4 Y *!s* X + 2/)*nt.&rit*Z"<!a8*!," )8r*% <in$/t na)*-^n )8r*^ t1$*-^t*3t^ /,</!a8*!,<8r/,"\4 Y iC ZM +*rniOr.in$/tt1$*s.ran'*\ X + 2/)*nt.&rit*Z"<!a8*!,E+a+% <in$/t na)*-^*+a+^ t1$*-^ran'*^ )in-^1^ )a3-^1;0^ 0a!/*-^16^ st*$-^1^ /,</!a8*!,<8r/,"\4 Y *!s* X + 2/)*nt.&rit*Z"<!a8*!,E+a+% <in$/t na)*-^*+a+^ t1$*-^t*3t^ siO*-^3^ )a3!*n'#t-^3^ 0a!/*-^16^ /,</!a8*!,<8r/,"\4 Y </s2ri$t,
Otra posibilidad es cargar una hoja de estilos diferente de forma condicional a los elementos que nuestro navegador soporte usando la funci n load de Modernizr. A continuacin vemos un ejemplo sencillo:
<s2ri$t, M +*rniOr.! a+ZX t*st% M +*rniOr.in$/t.$!a2*# !+*r MM M +*rniOr.in$/tt1$*s.+at*R 1*$ % ^*sti! s1.2ss^R n $*% ^*sti! s;.2ss^ Y\4 </s2ri$t,
En el ejemplo anterior testeamos dos elementos HTML5 (el tipo de input date y el argumento placeholder) y en funcin de que estn soportados, o no, cargamos una hoja de estilos diferente. Lgicamente, se trata de una funcin que encontraremos ms til a la hora de probar el soporte de elementos de CSS3, pero puesto que an no los hemos tocado lo vemos aqu y ms adelante haremos algn otro ejemplo. Dos apuntes importantes sobre esto. La funcin load de Modernizr no viene en la versin de desarrollo de la libera y, por tanto, para usarla debemos de generar una librera desde la opcin de produccin incluyendo esta utilidad (est marcada por defecto en el apartado de extras) y todas las comprobaciones
Pgina 1$
HTML & CSS adicionales de tipos, argumentos o propiedades que vayamos a hacer. NOTA IMPORTANTE: Lo visto aqu se trata de un uso muy bsico de estas libreras que no incluye todas las posibilidades y comprobaciones previas que deber amos de hacer en un proyecto profesional. Para ms informacin visita la pgina de documentacin: http://www.modernizr.com/docs/
9.5. ETIQUETAS MULTIMEDIA
HTML5 incluye dos etiquetas, audio y video para facilitar la interpretacin directa por parte del navegador de contenido multimedia y embed para incrustar archivos en formato flash.
Audio
La etiqueta audio nos permite insertar un archivo de audio en nuestra p gina web sin necesidad de usar flash ni un plugin de javascript como hac amos hasta ahora. Ser el propio navegador el que realice la reproduccin y dependemos tanto de que la etiqueta est implementada como de los codecs de audio que sea capaz de interpretar. El uso bsico es este:
<a/+i sr2-Aar2#i0 Ga/+i A,U/ na0*'a+ r n a/+i </a/+i , s $ rta !a *ti./*ta
El argumento src, que define dnde se encuentra el archivo de audio a reproducir, es el nico obligatorio. El contenido de la etiqueta slo ser visible si el navegador no la soporta, pero si lo que no soporta es el codec de audio, no ser capaz de reproducir el archivo pero no nos informar sobre ello. As escrito, el archivo no se reproducir ni se har visible de ninguna forma. Existen dos argumentos adicionales, que pueden usarse a la vez, para permitir que el archivo se reporduzca: controls y autoplay. El primero mostrar un pequeo cuadro de mandos con un botn de play/pausa, sonido on/off y una barra de progreso de la duracin del archvio. El segundo har que el sonido se reproduzca al cargar la pgina. Ambos son parmetros sin valor por lo que en XHTML tendremos que usarlos de esta forma:
<a/+i sr2-Aar2#i0 Ga/+i A 2 ntr !s-A2 ntr !sA na0*'a+ r n s $ rta !a *ti./*ta a/+i </a/+i , a/t $!a1-Aa/t $!a1A ,U/
El argumento loop (loop=loop) reproducira en bucle una y otra vez el sonido. Por ltimo, el parmetro preload nos permite cargar el archivo de audio al mismo tiempo que la pgina y no cuando el usuario le da a play para evitar demoras. Este ltimo tiene tres valores posibles: none, metadata (para precargar slo los metadatos del archivo o auto).
Pgina 1$!
HTML & CSS
Formatos de audio
Son cuatro los codecs de audio diferente a los que, en la actualidad, se da soporte (de forma irregular) en los diferentes navegadores que implementan esta etiqueta: ogg, mp3, wav y acc ( m4a). Ningn navegador los implementa todos ni ninguno de ellos es implementado por todos los navegadores. Al menos no por el momento. Para solucionar esto tenemos la etiqueta source que nos permite especificar diferentes archivos de forma que el navegador tenga eleccin:
<a/+i 2 ntr !s-"2 ntr !s" , <s /r2* sr2-"Cina!+*tra1*2t . ''" /, <s /r2* sr2-"Cina!+*tra1*2t .)$3" /, <s /r2* sr2-"Cina!+*tra1*2t .&a0" /, Eti./*ta n s $ rta+a </a/+i ,
Cuando el navegador procese estas etiquetas se quedar con el primer archivo que sea capaz de reproducir. Por tanto el orden en que aparezcan es importante. Si nosotros preferimos que un navegador que pueda reproducir tanto el .ogg como el .mp3 se quede con el primero, este deber a de aparecer tambin por delante. La etiqueta source tiene un parametro opcional para especificar el tipo de archivo y el codec que usa el mismo, por ejemplo type="audio/mpeg" o type="audio/ogg; codecs=vorbis"
Vdeo
La etiqueta video, su uso y problemtica es muy similar a la de audio. El caso ms sencillo de uso sera este:
<0i+* sr2-"ar2#i0 G0i+* ", 0i+* </0i+* , U/ na0*'a+ r n s $ rta !a *ti./*ta
En este caso al usar la nueva etiqueta sin especificar autoplay ni controls si que se reserva espacio para el primer fotograma del mismo pero la nica forma de reproducirlo sera pulsando con el botn derecho y usando el men contextual que nos suele ofrecer el navegador. El atributo src sigue siendo, pues, el nico obligatorio. Los parmetros controls, autoplay, loop y preload tambin existen y su uso es idntico a los vistos para la etiqueta audio. Los nuevos par metros disponibles para la etiqueta video son los siguientes: width y height nos permiten controlar las dimensiones de visualizacin del vdeo. Si no usamos ninguno de estos parmetros el navegador nos mostrar el vdeo con sus dimensiones originales. Si especificamos uno cualquiera de ambos, pero no el otro, se ajustar el no especificado para respetar la proporcionalidad de la imagen. El atributo poster nos permite definir una imagen esttica que aparecer mientras que el vdeo se carga o hasta que el usuario decide comenzar su reproducci n pulsando el botn de play. Si no se especifica aparecer el primer fotograma del vdeo. Un ejemplo con algunos de estos argumentos:
Jos Mara Morales Vzquez Pgina 1$"
HTML & CSS
<8 +1, <0i+* sr2-"0i+* G '0. '0" 2 ntr !s-"2 ntr !s" &i+t#-"[00" $ st*r-"t#atsa!!C !=.7$'", U/ na0*'a+ r n s $ rta !a *ti./*ta 0i+* </0i+* , </8 +1,
Formatos de vdeo
Con los formatos de vdeo tenemos el mismo problema que con los de audio: ningn navegador implementa todos los reconocidos ni existe ninguno de ellos que sea soportado por todos los navegadores. Ogv, H.264, y WebM son las posibilidades con las que jugamos en este caso. Ogv es el m s libre, equivalente al formato ogg de audio. H.264 y WebM son dos formatos propietarios, el primero empujado por Apple y el segundo propiedad de Google. La etiqueta source se puede usar tambin en este caso para proporcionar alternativas al navegador:
<0i+* 2 <s <s <s U/ </0i+* , ntr !s-"2 ntr !s" , /r2* sr2-"0i+* G '0. '0" /, /r2* sr2-"0i+* G)$4.)$4" /, /r2* sr2-"0i+* G&*8).&*8)" /, na0*'a+ r n s $ rta !a *ti./*ta 0i+* .
Archivos de Flash
HTML5 incorpora tambin la posibilidad de incrustar directamente archivos de animacin flash a travs de la etiqueta embed:
<*)8*+ sr2-"ani)a2i nGC!as#.s&C" /,
src es, al igual que en audio y video, el nico atributo obligatorio. height y width tambin son vlidos y funcionan de igual forma que hemos descrito en la etiqueta vdeo.
9.6. DIBUJO MEDIANTE LA ETIQUETA CANVAS
La etiqueta canvas define un objeto que actuar como un lienzo dibujable mediante la llamada a funciones de javascript, proporcionando un potente elemento de dibujo y diseo capaz de hacer competencia directa con flash. El siguiente ejemplo dibuja un rcuadrado verde:
<2an0as i+-")1Can0as" #*i'#t-"300" &i+t#-"P00", Ta na0*'a+ r n s $ rta !a *ti./*ta 2an0as. </2an0as, <s2ri$t, 0ar 2an0as-+ 2/)*nt.'*tE!*)*ntB1I+Z")1Can0as"\4 0ar 2t3 - 2an0as.'*tC nt*3tZ";+"\4 2t3.Ci!!Ut1!* - "H00CC00"4 2t3.Ci!!(*2tZ0R0R100R100\4 </s2ri$t,
Pgina 1$#
HTML & CSS El contenido de la etiqueta canvas slo se visualizar si nuestro navegador no la soporta. canvas define un lienzo transparente susceptible de ser rellenado mediante funciones de dibujo de un API de javascript incorporado al navegador. En las dos primeras lneas del script del ejemplo anterior obtenemos primero una referencia al objeto y en el segundo elegimos el API que usaremos para el dibujo en funcin del argumento de la funcin. El contexto 2d es el ms extendido por el momento aunque existe una especificacin muy avanzada que permite el dibujo en 3D usando el argumento webgl y las libreras de dibujo OpenGL, la competencia libre de las DirectX: http://www.khronos.org/registry/webgl/specs/latest/ Las dos lneas siguientes del ejemplo dibujan un rectngulo de 100 pxeles de ancho por 100 de alto (un cuadrado, en realidad) que empieza en la coordenada 0,0 (en la esquina superior derecha del canvas) y que se rellena de color verde (#00ff00 en hexadecimal). Veamos algunas de las funciones bsicas del dibujo mediante canvas: fillStyle y strokeStyle son variables que nos permiten elegir el color, patr n o gradiente de color que usaremos para relleno o lnea de dibujo, respectivamente. Para seleccionar un color podemos usar los mismos mtodos que en CSS (por ejemplo, #c0ffee, #fff, orange o rgb(255,160,23)) pero siempre entre comillas como si fuese una cadena. Para seleccionar un gradiente o un patrn asignamos el objeto donde est definido el mismo (veremos como hacerlo mas adelante). fillRect y strokeRect son funciones que nos permiten dibujar un rect ngulo especificando cuatro parmetros: el punto de su vrtice superior derecho y las dimensiones de sus lados (x, y,ancho, alto). clearRect (x,y,ancho,alto) limpia el contenido del rectngulo especificado. Para reiniciar el canvas completo podemos hacer un clearRect con las dimensiones totales del mismo o reasignar el valor de ancho o de alto del mismo, como por ejemplo as: cv.&i+t# - 20.&i+t#4 moveTo (x,y) mueve el pincel de dibujo al punto de coordenadas especificadas. lineTo (x,y) dibuja una lnea desde el punto actual done se encuentra el pincel hasta el punto especificado en las coordenadas. En realidad las lneas no se dibujan sobre el lienzo del canvas sino que se almacenan en una especie de buffer temporal que slo se volcar realmente en la pgina web cuando llamemos a la funcin stroke(). El color usado ser el que hayamos definido en strokeStyle. lineWidth es una propiedad que define, en pixeles, el ancho de las l neas
Pgina 11$
HTML & CSS trazadas. font es una variable que nos permite definir un tipo de letra. Recibe una cadena con las caractersticas de este, de forma similar a la de la propiedad font de CSS. Por ejemplo "bold italic 30px monospace" fillText(texto, x, y) es una funcin que escribe el texto que recibe como primer parmetro a partir del punto definido mediante su segundo y tercer parmetro. El color que escoger ser el ltimo que hayamos definido mediante fillStyle. strokeText(texto, x, y) hace lo mismo pero slo dibujando la lnea de contorno del texto sin rellenarlo.
El trabajo con gradientes es bastante ms delicado. En el siguiente ejemplo vemos como definir un gradiente y rellenar un rectangulo con l:
'ra+i*nt* - 20.2r*at*Lin*arDra+i*ntZ;P0R P0R 3P0R ;P0\4 'ra+i*nt*.a++C ! rUt $Z0R "H0C0"\4 'ra+i*nt*.a++C ! rUt $Z1R "HC00"\4 20.Ci!!Ut1!* - 'ra+i*nt*4 20.Ci!!(*2t Z;P0R P0R 100R ;00\4
La primera lnea crea el objeto que contendr el gradiente. Este ser lineal e ir desde el punto 250,50 hasta el 350,250. Las coordenadas est n refereridas a la superficie del canvas. Las dos siguientes lneas definen los colores inicial y final del gradiente. Por ltimo, usamos el objeto gradiente para definir la variable fillStyle y dibujamos un rectngulo que se rellenar con el mismo. Nota que el rectangulo coincide exactamente con la superficie del gradiente pero no tendr a porque ser as. El gradiente lineal puede crearse mediante una diagonal (como en el ejemplo) pero tambin mediante una lnea vertical u horizontal. Tambin podemos crear un radiante cnico mediante la siguiente funcin:
2r*at*(a+ia!Dra+i*ntZ30R 10R r0R 31R 11R r1\
Los tres primeros parmetros definen un crculo y los tres ltimos otro. El gradiente se crear dibujando una superficie cnica entre ambos crculos. El dibujo de arcos se realiza mediante la funcin arc que recibe seis parmetros: las coordenadas del centro, el radio, el punto de inicio y de final del arco en radianes y una variable booleana que define si el arco se trazar en sentido horario (false) o antihorario (true). El 0 de los grados estara situado en el punto de las tres en una esfera horaria. La constante Math.PI tambin nos resultar til para expresar los grados en radianes. Una vez definido el arco o el c rculo podemos llenarlo o dibujar slo su lnea mediante las funciones fill o stroke, respectivamente. Veamos un ejemplo:
20.8*'inPat#Z\4 20.ar2Z1P0R 300R [0R 0R ; W Mat#.PIR tr/*\4 20.Ci!!Ut1!* - "H]2C"4 20.Ci!!Z\4 Jos Mara Morales Vzquez Pgina 111
HTML & CSS
20.8*'inPat#Z\4 20.ar2Z100R 1P0R ;00R 0R Mat#.PIR Ca!s*\4 20.!in*Wi+t# - 104 20.str =*Ut1!* - "8!a2="4 20.str =*Z\4
La funcin beginPath sirve para indicar a canvas que comenzamos un nuevo trazado independiente de lo que hayamos hecho anteriormente y es v lida tanto al trazar arcos como lneas rectas. Los efectos de sombreado se consiguen mediante las propiedades shadowOffsetX, shadowOffsetY, shadowBlur y shadowColor que definen, respectivamente, el desplazamiento horizontal y vertical de la sombra en p xeles, el difuminado y el color de la misma. Una vez ajustados estos valores todos los elementos tendrn su sombra hasta que los pongamos a cero. Un ejemplo:
20.s#a+ &OCCs*t_ - 104 20.s#a+ &OCCs*tY - 104 20.s#a+ &B!/r - P4 20.s#a+ &C ! r - "8!a2=" 20.Ci!!(*2tZ400R;P0R[PR[P\4
Tenemos disponibles tres funciones que nos van a permitir hacer transformaciones sobre los elementos dibujados: translate(x,y), rotate (angulo) y scale(x,y). La primear desplaza un elemento al punto indicado por las coordenadas que enviamos como parmetros. La segunda va a rotar el elemento el nmero de grados (en radianes) en el sentido de las agujas del reloj. Por ltimo la tercera permite cambiar la escala de un objeto indicando el factor de escalado horizontal y vertical como parmetros. Todas ellas son acumulativas y se aplican sobre todos los elementos que se vayan a dibujar desde el momento en que se indican hasta que se desactivan. Un ejemplo:
C rZ7-04 7<<4 7TT\X 20.Ci!!(*2tZ400RP0R[PR[P\4 20.trans!at*ZP0R P0\4 20.r tat*ZMat#.PI/1<\4 20.s2a!*Z0.[R 0.[\4 Y
Canvas nos va a permir tambin interactuar con las coordenadas del ratn para realizar grficos interactivos. En el siguiente ejemplo del libro diveintohtml5 puedes ver un ejemplo y pulsando sobre el enlace etiquetado como Rules of play te explican lo fundamental de su funcionamiento: http://diveintohtml5.ep.io/examples/canvas-halma.html En los siguientes enlaces tienes todas las funciones, su descripcin y algunos ejemplos de lo que puedes usar como contenido de la etiqueta canvas usando el
HTML & CSS API 2d: http://www.whatwg.org/specs/web-apps/current-work/multipage/thecanvas-element.html http://www.w3schools.com/html5/html5_ref_canvas.asp
9.7. GEOLOCALIZACIN
La geolocalizacin consiste en situar exactamente mediante coordendas geogrficas (longitud y latitud) al usuario que est viendo nuestra pgina web en un plano. HTML5 introduce esta posibilidad de forma nativa mediante su propio API y sin necesidad de usar libreras externas como hasta ahora. Los datos para proporcionar dichas coordenadas pueden tomarse de tres formas diferentes, que pueden ser complementarias y que, en escala de menor a mayor precisin son las siguientes: A travs de la direccin IP pblica de acceso a Internet proporcionada por nuestro proveedor. Por triangularizacin a travs de la localizacin de los puntos de acceso wifi a los que estemos conectados. A travs de un GPS integrado en nuestro equipo. El navegador, si soporta esta funcin, tomar las coordenadas de geolocalizacin del usuario de la forma ms precisa posible y en base a estos mtodos (segn los que tenga disponibles) y siempre despus de pedir autorizacin al usuario. Veamos el body de un pequeo ejemplo:
</!, <!i,Latit/+% <s$an i+-"!atit/+",5a0 r +* *s$*rar...</s$an,</!i, <!i,L n'it/+% <s$an i+-"! n'it/+",5a0 r +* *s$*rar...</s$an,</!i, <!i,Pr*2isiBn% <s$an i+-"$r*2isi n",5a0 r +* *s$*rar...</s$an,</!i, <!i,@!t/ra% <s$an i+-"a!t/ra",5a0 r +* *s$*rar...</s$an,</!i, <!i,Pr*2isiBn *n !a a!t/ra% <s$an i+-"$r*2isi n@!t/ra",5a0 r +* *s$*rar...</s$an,</!i,
<//!,
<s2ri$t, iC Zna0i'at r.'* ! 2ati n\ X na0i'at r.'* ! 2ati n.'*tC/rr*ntP siti nZC/n2ti nZ$ siti n\ X 0ar !atit/+ - $ siti n.2 r+s.!atit/+*4 0ar ! n'it/+ - $ siti n.2 r+s.! n'it/+*4 0ar a!t/ra - $ siti n.2 r+s.a!tit/+*4 0ar $r*2isi n - $ siti n.2 r+s.a22/ra214 0ar $r*2isi n@!t/ra - $ siti n.2 r+s.a!tit/+*@22/ra214 + 2/)*nt.'*tE!*)*ntB1I+Z"!atit/+"\.inn*rHTML - !atit/+4 + 2/)*nt.'*tE!*)*ntB1I+Z"! n'it/+"\.inn*rHTML ! n'it/+4 + 2/)*nt.'*tE!*)*ntB1I+Z"a!t/ra"\.inn*rHTML - a!t/ra4 + 2/)*nt.'*tE!*)*ntB1I+Z"$r*2isi n"\.inn*rHTML $r*2isi n4
Pgina 113
HTML & CSS

+ 2/)*nt.'*tE!*)*ntB1I+Z"$r*2isi n@!t/ra"\.inn*rHTML $r*2isi n@!t/ra4 \4 s $ rta !a '* ! 2a!iOa2iBn"\4
Y Y *!s* X a!*rtZ"U/ na0*'a+ r n Y </s2ri$t,
El script, que es donde usamos las funciones, tiene tres partes bien diferenciadas. En primer lugar comprobamos si nuestro navegador soporta la funci n de geolocalizacin interrogando a la variable navigator.geolocation. Si el resultado es negativo mostramos una alerta y, en caso contrario, llamamos a una funci n (navigator.geolocation.getCurrenPosition) a travs de la cual obtenemos la latitud y la longitud (positions.coords.latitude y position.coords.longitude), la precisin en estas medidas segn el mtodo empleado para obtenerlas de los tres vistos en metros (position.coords.accuracy), la altura (position.coords.accuracy) y la precisin en la medida de esta ( position.coords.altitudeAccuracy). La altura y la precisin en ella slo estar disponible si contamos con GPS y ser cero en otro caso. La ltima parte del script muestra los datos obtenidos en nuestra p gina HTML usando la funcin Javascript document.getElementById que nos permite sustituir el contenido de cualquier etiqueta ( innerHTML) simplemente indicando el ID de la misma. Existen otros dos parmetros ms adems de los vistos en este ejemplo: position.coords.heading que te proporciona la posicin en grados respecto al norte y position.coords.speed que, tomando como referencia la ltima posicin y el tiempo transcurrido entre una y otra, nos proporciona la velocidad a la que nos movemos en metros por segundo. Tienes otro ejemplo ms completo que enlaza con el API de google maps para mostrar las coordenadas en un plano aqu: http://benwerd.com/lab/geo.php
9.8. MS COSAS
Existen muchas otras novedades en HTML5: funcionalidad de arrastrar-soltar (dragdrop) nativa en el navegador, un sistema mejorado de comunicaciones bidireccionales con el servidor, cookies que permitiran almacenar m s informacin, etc. Muchas de estas nuevas funcionalidades, al igual que ocurre con las antes vistas de geolocalizacin o de canvas, todas ellas se proporcionan mediante el uso de un API externo realizado en javascript. Para seguir aprendiendo y ampliando conocimientos, as como novedades y cambios de ltima hora, la mejor referencia es la que proporciona el comit del W3C: http://dev.w3.org/html5/spec/Overview.html
HTML & CSS
Y si quieres algo ms didctico puedes consultar el libro gratuito diveintohtml5: http://diveintohtml5.ep.io/
Pgina 115
HTML & CSS
10. CSS3
Los cambios en CSS3 han sido amplios y significativos para conseguir p ginas web ms lmpias y atractivas con un menor esfuerzo para el codifidador. Repasaremos algunas de las ms importantes pero no olvidemos que ni el est ndar est cerrado ni lo que hay es compatible con muchos de los navegadores que se siguen usando ampliamente.
10.1. LOS NUEVOS SELECTORES DE CSS3

Pseudo-elementos
Los pseudo-elementos existentes en CSS2.1 se mantienen invariables en CSS3 salvo un pequeo detalle: ahora se distinguen ms claramente de las pseudo-clases usando :: delante en lugar de : como hasta ahora. As , por ejemplo, usaremos p::first-letter en lugar de p:first-letter como hasta ahora. Adem s, se aade un nuevo pseudo-elemento llamado ::selection que permite aplicar estilos diferenciados al texto que el usuario ha seleccionado mediante el rat n o el teclado.
Pseudo-clases
El principal cambio en los selectores de CSS3 se encuentra aqu , donde se han aadido 14 selectores nuevos. El selector :root representa al elemento raz del documento HTML que siempre ha de ser la propia etiqueta html. No existe ninguna diferencia apreciable entre usarl este o la etiqueta body, salvo que :root tendra una mayor especificidad. :empty es un selector que demarca a todos los elementos vac os de contenido y sin hijos. Por ejemplo, tengamos el siguiente HTML:
<$,@ $ara'ra$#.</$, <$,</$, <$,@n t#*r $ara'ra$#.</$,
El prrafo central, vaco y sin hijos, sera el nico que respondera a este selector:
p,empt+- .idth,!//px0 height, 1/px0 bac2ground, red0 3
El selector :target sirve para seleccionar el elemento activo, o sea, aqu l enlace interno realizado mediante la etiqueta a y que acabas de visitar. Veamos este cdigo:
<$,<a <$,<a <$,<a <$,<a #r*C-"H*n!a2*1",Ir a! $/nt 1</a,</$, #r*C-"H*n!a2*;",Ir a! $/nt ;</a,</$, na)*-"*n!a2*1",</a,LaR !aR !a...</$, na)*-"*n!a2*;",</a,BraR 8raR 8ra...</$,
Y usemos esta regla combinada con el selector :before
Pgina 11
HTML & CSS

%tar'*t%8*C r*X 2 nt*nt% "EstNs a./J -, "4 Y
:last-child viene a acompaar al selector :first-child que ya conocamos y selecciona a un determinado elemento siempre y cuando sea el ltimo hijo de un padre cualquiera. Por ejemplo, supongamos el siguiente cdigo:
<8 +1, <$,Pri)*r $NrraC +*! 8 +1</$, <#1,Tit/!ar</#1, <+i0, <$,Pri)*r $NrraC +*! +i0</$, <$,U*'/n+ $NrraC +*! +i0</$, <$,T*r2*r $NrraC +*! +i0</$, </+i0, </8 +1,
El selector p:first-child seleccionara a los prrafos marcados en azul (el primer hijo del body y el primer hijo del div), mientras que el selector p:last-child seleccionara al prrafo marcado en rojo (el ltimo hijo del div). Siguiendo en esta lnea, :only-child seleccionaria a un elemento que fuese hijo nico de su padre. :nth-child(n) seleccionara al elemento que est en la posicin n dentro de la descendencia de su padre. El primer elemento ser a el 1 y, por lo tanto, p:nth-child(1) sera equivalete a p:first-child. Por ltimo, :nth-last-child(n) seleccionara al elemento que est en la posicin n pero empezando a contar por el ltimo y no por el primero. :nth-child(n) permite un uso avanzado configurando adecuadamente su argumento nico. Podemos cambiar la letra n por las palabras claves odd o even y, en ese caso, seleccionaramos a todos los elementos impares o pares, respectivamente. Tambin podemos usar expresiones como 3n (los elementos mltiplos de 3) o usar tres reglas diferentes ( 3n+1, 3n+2 y 3n+3) para alternar entre tres estilos diferentes en una lista de elementos iguales. Similares a estos, tenemos un conjunto de selectores que se comportan de igual forma pero con los elementos de un determinado tipo. Son :first-of-type, :last-oftype, only-of-type, :nth-of-type(n) y :nth-last-of-type(n).
Nuevos selectores para uso con formularios

Existen, adems, tres pseudo-clases nuevas especificamente pensadas para su uso con formularios que son :enabled, :disabled y :checked. Como su nombre indica, aplican a los elementos de tipo input que cumplen con lo especificado en el nombre del selector.
El selector :not()
Existe una ltima pseudo-clase que trataremos aparte por su especial
HTML & CSS importancia. Se trata del selector :not() que sirve para aplicar estilos a aquellos elementos que no cumplen lo especificado ente parntesis. Veamoslo con algunos ejemplos. La siguiente regla se apliara al contenido de cualquier div que no fuese de la clase comun
+i0%n tZ.2 )/n\X2 ! r% r*+4 Y
La siguiente regla aplicara a todos los elementos strong que estn dentro de un div pero que no estn dentro de un p
+i0 W%n tZ$\ str n'X2 ! r% r*+4 Y
En la siguiente, lo combinamos con un selector de atributo para seleccionar todos los input salvo aquellos de tipo password.
in$/t%n tZbt1$*-"$ass& r+"c\X2 ! r% r*+4 Y
Podemos usar tambin una lista como argumento del not. Lo siguiente se aplicar a todos los titulares de nivel h2 salvo a aquellos que pertenecen a las clases politica y economia:
#;%n tZ.$ !iti2aR .*2 n )ia\X2 ! r% r*+4 Y
Y, por supuesto, se puede combinar con cualquier otro selector que hemos visto antes: descendientes, etc.
Nuevos selectores de atributos

CSS3 aade, adems, tres nuevos selectores de atributos que nos permiten un control ms fino. El primer selector que veremos, que usa el s mbolo distintivo ^ sirve para seleccionar a etiquetas con un atributos cuyo valor empieza por una cadena. En el ejemplo, a aquellas etiquetas a con un atributo href cuyo valor empieze por mailto:
ab#r*Cl-")ai!t %"cX 2 ! r% 8!/*4 Y
El segundo selector de atributo, que usa el s mbolo distintivo $ selecciona a aquellas etiquetas con un atributo concreto cuyo valor termina en determinada cadena. Por ejempo, las etiquetas a cuyo atributo href terminan en html:
ab#r*Cm-".#t)!"c X 2 ! r% 1*!! &4 Y
Por ltimo, se incluye un selector que usa el smbolo * que selecciona a aquellas etiquetas con un atribuyo cuyo valor contenga en cualquier posici n la cadena especificada. En el siguiente ejemplo, seleccionara a cualquier imagen cuyo ttulo contenga la palabra importante.
i)'btit!*W-"i)$ rtant*"c X8 r+*r% 3$3 r*+ +as#*+4 Y
Todos los selectores de atributo pueden combinarse entre si y, por supuesto, con otros selectores como siempre. Por ejemplo, el siguiente selector cuadrar a con las
Jos Mara Morales Vzquez Pgina 11"
HTML & CSS imgenes cuyo titulo empieze por Estadsticas y contenga la palabra importante:
i)'btit!*l-"Esta+Jsti2as"cbtit!*W-"i)$ rtant*"c X8 r+*r% 3$3 r*+ +as#*+4 Y
Selector general de elementos hermanos

El ltimo de los nuevos selectores de CSS3 ampla las posibilidades del selector de hermanos existente en la versin anterior. Recordemos que el selector de hermanos (que usaba el smbolo +) slo se activaba cuando los dos elementos de la regla eran hermanos e iban uno a continuaci n de otro de forma inmediata. El nuevo selector usa el smbolo ~ y se activa cuando ambos elementos son hermanos y el segundo va despus del primero pero sin importar que sea de forma inmediata. Veamos un ejemplo sencillo:
<#1,Tit/!ar 1</#1, <#;,Tit/!ar ;</#;, <$,PNrraC 1</$, <+i0, <#;,Tit/!ar 3</#;, </+i0, <#;,Tit/!ar 4</#;,
Una regla que use el selector de hermanos clsico ( por ej. h1+h2 {color: red;}) slo seleccionara el Titular 2, mientras que usando el selector general h1 ~ h2 {color: red; } seleccionara el Titular 2 y el Titular 4.
9.2. LAS NUEVAS PROPIEDADES DE CSS3
Son muchas las propiedades aadidas en CSS3 y muy irregular la implantacin en los diferentes navegadores hasta el punto de que cada uno de ellos en muchos casos ha desarrollado por su cuenta algunas de las implementaciones a adiendo un prefijo distintivo que es -o- para pera -moz- para firefox, -webkit- para chrome, safari y otros que usen el Webkit y -ms- para Internet Explorer. Veremos ejemplos de esto en varios de los apartados siguientes.
Gradientes y una nueva paleta de colores

CSS3 adopta (con ligeros cambios) la paleta de colores st ndard de X11 que consta de 147 elementos que podemos usar mediante un nombre caracter stico. La lista de colores X11 puedes consultarla aqu: http://en.wikipedia.org/wiki/X11_color_names#Color_name_charts En CSS3 los usaremos siempre en minsculas y eliminando los espacios. Por ejemplo, el color Blanched Almond pasara a ser blanchedalmond. Adems, se incorpora la posibilidad de realizar degradados de forma que ya no necesitamos usar imgenes estticas para estos fines. Existen dos tipos de gradientes: lineales y radiales. Veamos un ejemplo de cada uno:
8a2='r /n+-i)a'*% !in*ar-'ra+i*ntZ8 tt )R r'8Z10[R1<6R104\ 13VR r'8Z;04R13[R160\ P[VR r'8Z1<4R;1]R;4P\ 63V\4 8a2='r /n+% ra+ia!-'ra+i*ntZ2*nt*rR 2ir2!*R &#it*R H[D@PCD\4
Pgina 11#
HTML & CSS Desglosemos las particularidades de estas reglas. En primer lugar, cualquiera de ellas puede ir en la propiedad background o background-image. En segundo, el valor de la propiedad debera de empezar por linear-gradient o radial-gradient segn el tipo de gradiente deseado. En tercer lugar, ambas deben de llevar un nmero de parmetros separados por comas que sern un mnimo de tres en el caso del lineal y de cuatro en el caso del radial. Veamos estos parmetros. En el caso del lineal, el primer parmetro define la direccin del degradado definiendo su inicio y pudiendo usar para ello una o dos de las palabras clave top, bottom, right o left. A continuacin se enumeran los colores del degradado (dos, al menos pero pudiendo ser ms). Cada color se define de cualquiera de las formas admitidas habitualmente en CSS (con un valor hexadecimal, una palabra distintiva o una funcin rgb) y pudiendo ir acompaado de un porcentaje que define la suavidad de la trancisin entre uno y otro color. En el caso del radial, el primer parmetro tambin define la direccin pero adems de las palabras claves anteriores tenemos otra, center, que en caso de usarse debera de ir sola. El segundo parmetro define la forma del degradado y puede ser circle o ellipse. A continuacin iran los colores del degradado que siguen el mismo formato explicado anteriormente y deberan de ser al menos dos. Se trata esta de una de las propiedades de que habl bamos cuyo estndard no se encuentra generalizado, as que si queremos que los principales navegadores lo entiendad debemos repetir la regla con los diferentes prefijos distintivos. Por ejemplo as:
$.+*'ra+a+ ra+ia!X 8a2='r /n+% ra+ia!-'ra+i*ntZ2*nt*rR 2ir2!*R &#it*R H[D@PCD\4 8a2='r /n+% - -ra+ia!-'ra+i*ntZ2*nt*rR 2ir2!*R &#it*R H[D@PCD\4 8a2='r /n+% -) O-ra+ia!-'ra+i*ntZ2*nt*rR 2ir2!*R &#it*R H[D@PCD\4 8a2='r /n+% -&*8=it-ra+ia!-'ra+i*ntZ2*nt*rR 2ir2!*R &#it*R H[D@PCD\4 8a2='r /n+% -)s-ra+ia!-'ra+i*ntZ2*nt*rR 2ir2!*R &#it*R H[D@PCD\4 Y
En el caso de los gradientes lineales, tenemos una herramienta web muy til que nos permite generar las reglas de forma automtica aqu: http://gradients.glrzad.com/
Fondos mltiples
CSS3 incorpora la posibilidad de incluir fondos m ltiples en una misma caja sin necesidad de tener que superponer una caja por cada imagen. La posici n, y caractersticas de cada imagen (repeticin, etc.) se define tambin de forma independiente para cada una de ellas. Veamos un par de ejemplos. Ahora definir imgenes independientes para personalizar las esquinas de una caja es tan sencillo como esto:
$.2a7a;X $a++in'% <0$34 8 r+*r% 1$3 s !i+ 8!a2=4
Pgina 12$
HTML & CSS

8a2='r /n+% /r!Z*s./ina1.$n'\ /r!Z*s./ina;.$n'\ /r!Z*s./ina3.$n'\ /r!Z*s./ina4.$n'\ 8a2='r /n+-2 ! r% &#it*4 Y t t 8 8 $ !*Ct n -r*$*atR $ ri'#t n -r*$*atR tt ) ri'#t n -r*$*atR tt ) !*Ct n -r*$*at4
Y si queremos solapar dos imgenes de fondo transparente en la misma caja nos basta con hacer lo siguiente:
$.2a7a3X &i+t#% 300$34 #*i'#t% 400$34 8a2='r /n+% /r!Zi)a'*n1.'iC\ 8 tt ) n -r*$*atR /r!Zi)a'*n;.'iC\ 8 tt ) n -r*$*at4 Y
Esquinas redondeadas y bordes decoradas

CSS3 incluye, por fin, la posibilidad de redondear bordes sin necesidad de complicadas maniobras como hemos tenido que hacer hasta el momento. La propiedad para hacer esto se llama border-radius. Su sintaxis es bien sencilla:
8 r+*r-ra+i/s% 10$34
El valor indica el radio del arco de circunferencia que delimita el arco. Se puede usar cualquier unidad de medida vlida en CSS (pulgadas, em, etc.) y definir de forma independiente cada una de las cuatro esquinas de la caja con la siguiente sintaxis:
8 8 8 8 r+*r-t r+*r-8 r+*r-8 r+*r-t $-ri'#t-ra+i/s% P$34 tt )-ri'#t-ra+i/s% ;*)4 tt )-!*Ct-ra+i/s% 3*)4 $-!*Ct-ra+i/s% 10$34
Con el formato abreviado podemos poner dos valores diferentes (el primero para las esquina superior izquierda e inferior derecha y el otro para las otras dos) o cuatro valores (uno para cada esquina empezando por la superior izquierda y continuando en el sentido de las agujas del reloj):
8 r+*r-ra+i/s% 10$3 P$34 8 r+*r-ra+i/s% 10$3 P$3 ;0$3 ;P$34
Podemos usar tambin esquinas irregulares especificando dos radios diferentes: uno para el eje X y otro para el eje Y. El formato cuando todas las esquinas son iguales es este:
8 r+*r-ra+i/s% 10$3 / P0$34
Cuando especificamos las esquinas una a una no necesitamos la barra:

8 r+*r-t $-ri'#t-ra+i/s% P$3 10$34 Jos Mara Morales Vzquez Pgina 121
HTML & CSS
Y cuando las esquinas son diferentes pero las especificamos en grupo:

8 r+*r-ra+i/s% 10$3 10$3 / ;0$3 30$34 8 r+*r-ra+i/s% P$3 10$3 P$3 10$3 / 10$3 P$3 10$3 P$34
El redondeado de esquinas mediante esta propiedad se puede aplicar, adem s de a una caja, tambin directamente a una tabla o a una imagen:
ta8!* X &i+t#% ;00$34 8a2='r /n+-2 ! r% r'8Z16PR;0PR;;P\4 t*3t-a!i'n% 2*nt*r4 )ar'in% 30$34 8 r+*r% 1$3 s !i+ 'ra14 8 r+*r-ra+i/s% ;0$34 Y Hi)'r*+ n+ X &i+t#% <00$34 #*i'#t% 1P0$34 )ar'in% 0 a/t 4 8 r+*r-ra+i/s% 1*)4 8 r+*r% 1$3 s !i+ 'ra14 8a2='r /n+-i)a'*% /r!Z#*a+*r.7$'\4 Y
Sombras
CSS3 incorpora dos propiedades que sirven par dar sombras a textos y cajas que se llaman, respectivamente, text-shadow y box-shadow. El formato bsico de ambas es similar. Veamos un par de ejemplos:
t*3t-s#a+ &% 1P$3 P$3 10$3 ran'*4 8 3-s#a+ &% -P$3 -10$3 P*) H0004
Los dos primeros parmetros son el desplazamiento vertical y horizontal de la sombra. Valores positivos desplazan esta haca abajo y la derecha. Valores negativos hacia arriba y la izquierda. El tercer parmetros marca la intensidad y/o difuminacin de la sombra (valores ms pequeos definen una sombra ms intensa y marcada, mientras que valores grandes crean una sombra muy difuminada y poco definida). No se puede usar un porcentaje como ninguno de estos tres parmetros. El cuarto parmetro es el color de la sombra y puede expresarse de cualquiera de las formas vlida vistas en CSS. box-sahdow permite, adems, dos parmetros opcionales: uno de ellos ira delante del color y define, mediante una medida, la distancia al objeto del foco que provoca la sombra, de forma que valores positivos acercan el foco provocando una sombra mayor y valores negativos alejan el foco provocando una sombra menor. El siguiente parmetro opcional es la palabra clave inset que ira al final de la declaracin y provocara una sombra interior a la caja.
HTML & CSS
8 3-s#a+ &% -P$3 -10$3 P*) 1P$3 H000 ins*t4
Opacidad
La propiedad opacity permite definir elementos parcial o totalmente transparentes. El valor de esta propiedad es un nmero decimal entre 0 y 1, de forma que 1 define la total opacidad (cuerpo s lido y no translucido) y el 0 la total transpariencia.
$a2it1% .34
Ms control de la tipografa
En CSS3 se normaliza el uso de tipografas externas (como las de Google Fonts que vimos hace ya tiempo) de forma que podamos usar cualquier tipo de fuente disponible en la red en nuestras pginas. La incorporacin y descarga de fuentes se hace mediante la instruccin @font-face que tiene el siguiente formato:
FC nt-Ca2* X C nt-Ca)i!1% "Cantasia"4 /r!Z"Cantasia.ttC"\4 Y
Si quisiramos importar ms de una fuente en nuestro proyecto necesitamos una instruccin @font-face por cada una de ellas:
FC nt-Ca2* X C nt-Ca)i!1% 0*ra4 sr2% /r!Z"I*raU*B+.ttC"\4 Y FC nt-Ca2* X C nt-Ca)i!1% Cantasia4 sr2% /r!Z"Cantasia.ttC"\4 Y
Inexplicablemente, aunque las fuentes ttf se han popularizado gracias a Microsoft, estas no son soportadas por ninguan versi n de explorer. Microsoft prefiere usar las tipografas eot. Para que los usuarios con Explorer vean la fuentes necesitamos convertir las ttf a este formato y usar esta sintaxis que contempla ambos tipos:
FC nt-Ca2* X C nt-Ca)i!1% Cantasia4 sr2% /r!Z"Cantasia.ttC"\4 sr2% /r!Z"Cantasia.* t"\4 Y
Existen diferentes programas capaces de convertir entre diferentes formatos. Tambin puedes usar este recurso web: http://www.kirsle.net/wizards/ttf2eot.cgi La nueva propiedad font-size-adjust permite ajustar la altura de fuentes diferentes mediante el uso de un coeficiente de ajuste. Slo est implementada en Firefox:
C nt-siO*-a+7/st% .4464
Pgina 123
HTML & CSS
Aunque puede aproximarse a ojo por el m todo de prueba y de error, existe un recurso web que nos lista las fuentes disponibles en nuestro sistema y nos calcula los coeficientes de ajuste: http://www.brunildo.org/test/xheight.pl La propiedad text-overflow decide lo que se har con un texto que no cabe completamente dentro de la caja en la que se encuentra. Tiene dos posibles valores: clip (lo corta sin ms) o (lo corta pero antes coloca tres puntos suspensivos). La propiedad font-stretch permitir ajustar el ancho de los caracteres, pero por el momento ningn navegador la implementa. Sus valores posibles son, de ms ancha a ms estrecha, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extraexpanded y ultra-expanded. La propiedad text-wrap define como cortar las lneas de un texto y tampoco est implementada por el momento. El valor normal, por defecto, indica que slo se pueden romper en los espacios y puntos. none indica que no pueden romperse, unrestricted que pueden romperse entre dos caracteres cualesquiera y suppress indica que no slo no pueden romperse sino que se suprimen incluso los saltos de lnea manuales que hayamos colocado.
Columnas ms fciles
CSS3 dispone de siete propiedades que nos van a permitir mostrar el texto mediante columnas de forma muy fcil. Son columns, column-gap, column-fill, column-span y column-rule. Al igual que ocurre con las propiedades relacionadas con los gradientes, esta coleccin de propiedades precisa llevar el prefijo del navegador (-moz-, -webkit-) para funcionar en firefox y chrome pero no as en opera. Explorer no las implementa an. Los ejemplos a continuacin se vern con la sintaxis necesaria para mozilla salvo que se indique lo contrario. columns define el nmero de columnas y el ancho mnimo esperado para cada una de ellas. Puede separarse en dos propiedades independientes: columnwidth y column-count. El funcionamiento de ambos parmetros est ntimamente relacionado pero la interpretacin que hacen de ellos los diferentes navegadores no es unnime. Mozilla, por ejemplo, da preferencia al nmero de columnas mientras que Opera lo hace con el ancho de estas.
/W -) O-2 !/)ns% ;00$3 34 W/ -) O-2 !/)n-&i+t#% ;00$34 -) O-2 !/)n-2 /nt% 34
La propiedad column-rule define un separador entre las columnas y tambin
Pgina 124
HTML & CSS puede dividirse en tres propiedades distintas: column-rule-width, column-rule-style y column-rule-color. Los estilos permitidos son los mismos que los de un borde.
/W -) -) -) -) O-2 !/)n-r/!*% 1$3 s !i+ 'ra14 W/ O-2 !/)n-r/!*-&i+t#% 1$34 O-2 !/)n-r/!*-st1!*% s !i+4 O-2 !/)n-r/!*-2 ! r% 'ra14
column-gap define el espacio de separacin entre columnas:

-) O-2 !/)n-'a$% P0$34
column-span nos permite marcar algn elemento para que no se propague entre diferentes columnas sino que est completo en una de ellas. Imaginemos, por ejemplo, un texto de entradilla o un titular. Tiene dos valores v lidos: 1 y auto segn que deba limitarse a la primera columna o expandirse por las que precise. Slo lo implementan Opera y Chrome:
2 !/)n-s$an% 14 -&*8=it-2 !/)n-s$an% 1
column-fill define como se llenaran las columnas. Por defecto su valor es balance, que hace que el navegador divida el contenido de la caja en tantas partes iguales como columnas para que estas sean lo ma uniformes y parejas posible. Si su valor es auto, el navegador llenar primero la primera columna y no pasar a la segunda hasta que no quepa nada en ella y as sucesivamente. Esta propiedad an no est implementada en ningn navegador.
Transformaciones y trancisiones
La propiedad transform permite realizar diferentes transformaciones en 2D o 3D sobre cualquier elemento (textos, cajas...) de nuestra web. Se trata de una de las propiedades sobre las que an se est trabajando (sobre todo en el terreno de 3D), implementada en todos los navegadores excepto el explorer, que hay que usar con los prefijos propios de cada navegador ( -moz-, -webkit- y -o-) y para la que slo veremos algunos ejemplos bsicos. Las transformaciones disponibles son rotacin cambio de escala, deformacin oblicua y desplazamiento. La rotacin se puede expresar en grados ( deg), radianes (rad), aplicarse a los ejes X e Y por separado (rotateX y rotateY), a ambos por igual (rotate), y especificar un nmero de grados positivo (en el sentido de las agujas del reloj) o negativo (sentido contrario). Un ejemplo:
transC r)% r tat*Z-;0+*'\4 -) O-transC r)% r tat*Z-;0+*'\4 -&*8=it-transC r)% r tat*Z-;0+*'\4 - -transC r)% r tat*Z-;0+*'\4
Los cambios de escala se especifican mediante un nmero entero o decimal que

HTML & CSS puede ser mayor que cero (ampliacin). Menor (reduccin) o negativo (reflexin). Tambin podemos aplicar un factor de escala diferente al eje X y al Y (scaleX y scaleY). Otro ejemplo:
-) O-transC r)% s2a!*Z;.P\4 -&*8=it-transC r)% s2a!*Z;.P\4 - -transC r)% s2a!*Z;.P\4 transC r)% s2a!*Z;.P\4
La deformacin oblicua usa el parmetro shew y nos permite especificar un ngulo en grados, radianes o gradientes ( grad), positivos, negativos (para el sentido, igual que en la rotacin) y especificar una deformacin comn o separada para cada eje:
-) O-transC r)% s=*&Z-30+*'\4 -&*8=it-transC r)% s=*&Z-30+*'\4 - -transC r)% s=*&Z-30+*'\4 transC r)% s=*&Z-30+*'\4
Por ltimo, translate nos permite definir un desplazamiento indicando este en una medida concreta o en tanto por ciento, con valores positivos (abajo y hacia la derecha) o negativos (arriba y hacia la izquierda). En este caso el valor de la propiedad puede llevar uno o dos valores aplicando en el primer caso a ambos ejes y en el segundo distinguiendo entre ambos:
-) O-transC r)% trans!at*Z100$3R -P0$3\4 -&*8=it-transC r)% trans!at*Z100$3R -P0$3\4 - -transC r)% trans!at*Z100$3R -P0$3\4 transC r)% trans!at*Z100$3R -P0$3\4
Otras transformaciones en diferentes estados de normalizacin son: matrix, matrix3d, translate3d, translateZ, scale3d, scaleZ, rotate3d, rotateZ y perspective. La propiedad transition, por ltimo, nos va a permitir realizar pequeos efectos de animacin sin necesidad de recurrir a javascript. Usamos para ello cuatro propiedades: transition-property, transition-duration, transition-timing-function y transition-delay (o transition, sin ms). Tampoco est disponible para Explorer. Veamos primero un ejemplo y luego explicaremos los diferentes parmetros:
+i0.tran2isi n X )ar'in% 10$3 a/t 4 $a++in'% 10$34 t*3t-a!i'n% 2*nt*r4 &i+t#% ;00$34 #*i'#t% 100$34 8a2='r /n+-2 ! r% $in=4 8 r+*r% P$3 s !i+ 8!/*4 -&*8=it-transiti n% 8 r+*r Ps *as*- /t 4 -) O-transiti n% 8 r+*r Ps *as*- /t4 - -transiti n% a!! Ps *as*- /t4
Pgina 12
HTML & CSS

transiti n% 8 r+*r Ps *as*- /t4 Y +i0.tran2isi n%# 0*rX 8 r+*r-ri'#t% ;00$3 s !i+ H]2C4 Y
En la primera regla especificamos que la trancisin afectar al borde (trancisionproperty), que durar 5 segundos (trancision-timing-function) y que ser rpida al principio y ms lenta al final (ease-out). En la segunda regla, que se activar al colocar el ratn encima, hacemos un cambio en el borde del elemento (tanto de tamao como de color) y la trancisin realizar la transformacin entre el estado original y el final con los datos especificados. Al retirar el rat n la animacin se invertir. La propiedad puede ser el ancho ( width), el alto (height), el color, una lista de propiedades diferentes separadas por coma o all (todas las propiedades que cambien entre uno y otro estado). Los tiempos y retrasos se especifican en segundos (s) o milisengudos (ms). Por ltimo, el timing-function puede ser constante (linear), de lento a rpido (ease-in), de rpido a lento (ease o easeout) o lento al principio y al final y ms rpido en el centro (ease-in-out). Se pueden especificar propiedades: tambin diferentes parmetros para diferentes
transiti n% &i+t# ;s *as*R #*i'#t 3s !in*ar4
Pgina 12!
HTML & CSS
11.ENLACES, BIBLIOGRAFA Y REFERENCIAS
Es absolutamente imposible resear todas las ayudas y referencias que a lo largo del ao en que he redactado estos apuntes y durante mucho tiempo antes he tomado de la web, libros de consulta, ejemplos de p ginas encontradas en Internet, etc. Pero si tuviera que quedarme con algunas como referencias de cabecera, sera justo mencionar al menos a las siguientes. http://www.librosweb.es/ es una coleccin de libros web escritos en castellano que abarcan todas las disciplinas que hemos tocado aqu . http://www.w3schools.com/ es, sin duda, la mejor referencia que existe en la web cuando quieres consultar los argumentos de una etiqueta, los valores que puede tomar o, simplemente, ver algunos ejemplos simples de cualquier elemento HTML y/o CSS http://meyerweb.com/ es la pgina web de Eric A. Meyer, un verdadero monstruo de esta disciplina y artfice de la gran mayora de trucos y tcnicas que hemos visto en el captulo 7 Y, para los fanticos del papel, si tengo que mencionar dos libros de mi biblioteca personal sobre este tema me quedo con estos: HTML5 y CSS3. Van Lancker, Luc. Ediciones ENI. 2011 CSS, Tcnicas profesionales para el diseo moderno. Meyer, Eric A. Editorial Anaya Multimedia. 2011
Pgina 12"

HTML y CSS

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML y CSS

Загружено:

Авторское право:

Доступные форматы

HTML & CSS

HTML & CSS

Jos Mara Morales Vzquez josemaria@morales-vazquez.com

Jos Mara Morales Vzquez

HTML & CSS

Jos Mara Morales Vzquez

HTML & CSS

Historia de los lenguajes de marcas

Jos Mara Morales Vzquez

HTML & CSS

Algunos lenguajes de marcas

Jos Mara Morales Vzquez

Componentes de un lenguaje de marcas

Jos Mara Morales Vzquez

Diferencias entre HTML y XHTML

Jos Mara Morales Vzquez

Editores de texto enriquecido

Jos Mara Morales Vzquez

HTML & CSS

Jos Mara Morales Vzquez

HTML & CSS

Jos Mara Morales Vzquez

HTML & CSS

2.1. ESQUELETO BSICO

Los elementos Bsicos

Jos Mara Morales Vzquez

HTML & CSS

2.2. ELEMENTOS DE BLOQUE Y ELEMENTOS DE LNEA

! s 2 )$a:*r s +*! 2/rs +* HTML</$,

En el navegador se mostrara lo siguiente:

Se vera en el navegador as:

2.3. LAS ETIQUETAS MS COMUNES

HTML & CSS

@ +*! $/nt B +*! $/nt

Jos Mara Morales Vzquez

HTML & CSS

La etiqueta img es una etiqueta de lnea.

Jos Mara Morales Vzquez

Otros atributos son title y target:

Jos Mara Morales Vzquez

HTML & CSS

Direccin del texto

HTML & CSS izquierda. El valor por defecto es ltr.

NOTA IMPORTANTE: acroym desaparece en HTML5, as que no conviene usarlo.

Existen tambin un caracter especial que pueden sernos ti:

Jos Mara Morales Vzquez

Jos Mara Morales Vzquez

HTML & CSS

2.5. ALGUNAS ETIQUETAS Y ATRIBUTOS DESACONSEJADOS MS

La etiqueta u para subrayar texto tambin deja de estar soportada.

big y small tambin desaparecen en HTML5

Jos Mara Morales Vzquez

HTML & CSS

3. CSS. SELECTORES BSICOS

3.1. INTEGRACIN DE HTML CON CSS

HTML & CSS

Comentarios en hojas de estilo CSS

3.2. SELECTORES BSICOS

Selectores de tipo o de etiqueta

HTML & CSS

Colores y propiedades bsicas del texto

HTML & CSS RGB, ya sea en hexadecimal, decimal o porcentual:

Jos Mara Morales Vzquez

Y nuestra regla CSS sera as:

! s 2 )$a:r s +! 2/rs +* HTML</$,

@ +! $/nt B +! $/nt