1 Esta obra está bajo una licencia Reconocimiento-NoComercial-CompartirIgual 2.5 Spain de Creative Commons. Para ver una copia de esta licencia, visite http://creativecommons.org/licenses/by-nc-sa/2.5/es/ o envie una carta a Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA. XHTML y CSS Jorge García (aka Bardok) eGhost Julio 2008 bardok EN gmail PUNTO com

2 24/09/2016 2 Índice ● Introducción ● Estructura básica de una página XHTML – Una página básica – Aplicando estilos ● Insertando elementos (y sus estilos) – Insertando texto – Insertando hiperenlaces – Insertando imágenes – Insertando listas – Insertando tablas – Insertando formularios ● Maquetación con DIVs ● Referencias y recomendaciones

3 24/09/2016 3 Introducción (I) ● HTML: HyperText Markup Language – Lenguaje de etiquetas de hipertexto – Permite definir el diseño y contenido de un documento, utilizando etiquetas – Es una aplicación de SGML ● La sintaxis no es muy estricta, por lo que la compatibilidad resulta complicada ● XHTML: eXtensible HyperText Markup Language – Similar a HTML, pero no es una aplicación SGML, sino XML ● Tiene una sintaxis y unas reglas más estrictas, que permiten que los documentos sean más estándares ● W3C: organización que los estandariza

4 24/09/2016 4 Introducción (II) ● Diferentes estándares a lo largo del tiempo – HTML ● El más extendido 4.01 – XHTML ● 1.0 Transitional – Transición entre HTML y XHTML – Es el estándar que usaremos en el seminario ● 1.0 Strict – Sintaxis más estricta ● 1.0 Frameset – Permite uso de marcos ● 1.1 – Más estricto – La presentación se controla únicamente por hojas de estilo, y se separa así del contenido

5 24/09/2016 5 Introducción (III) ● CSS: Cascading Style Sheets – Definen los estilos de presentación de los elementos de un documento – Son documentos “en cascada” ● Se pueden definir en varios puntos, y se aplican en cascada, según prioridad ● Un elemento definido en un nivel con mayor prioridad tiene más valor que uno definido en un nivel inferior ● Niveles 1. Navegador 2. Hoja de estilo externa 3. Estilos en la cabecera del documento 4. Estilos en un elemento – Un documento debería de poder leerse sin aplicarle estilos ● Algunos dispositivos no los soportan

6 24/09/2016 6 Estructura básica de una página XHTML (I) ● Documento XHTML: XML – Etiquetas ● Una etiqueta tiene un nombre ● Tiene que abrirse y cerrarse ● Puede tener o no contenido – Ej: la etiqueta “p” define un párrafo. Para utilizarla, abriremos la etiqueta ( ) escribiremos su contenido, y la cerraremos ( ): Esto es un párrafo XHTML – Ej: la etiqueta “br” define un salto de línea. No tiene contenido: ● Puede tener atributos, que se escribirán entre comillas (dobles o simples) – Ej: la etiqueta “img” define una imagen. No tiene contenido, y tiene un atributo, “src” que indica el fichero con la imagen, y otro “alt”, con un texto alternativo:

7 24/09/2016 7 Estructura básica de una página XHTML (II) – Documento XHTML: partes ● Definición de documento xml ● Tipo de documento XHTML ● Un documento XML tiene una etiqueta “raíz” que contiene a todo el documento – En XHTML, la etiqueta es “html”:...

8 24/09/2016 8 Estructura básica de una página XHTML (III) ● Atributos de la etiqueta raíz: – xmlns: espacio de nombres XML. Indica el documento en el que están definidas todas las etiquetas XHTML. – xml:lang: indica el lenguaje del documento ● “es” para español ● “en” para inglés ● “eu” para euskera ●... ● Dentro del elemento raíz (html) habrá otros elementos, siempre en forma de árbol – Si un elemento contiene a otro, tiene que contener tanto su etiqueta de inicio, como su etiqueta de fin: ● Correcto: Texto ● Incorrecto: Texto

9 24/09/2016 9 Estructura básica de una página XHTML (IV) ● Secciones del documento: – Encabezado (etiqueta “head”) ● Contiene información sobre la página ● Ej.: título de la página (title): Página de prueba ● Puede tener otras informaciones (más adelante) – Cuerpo (etiqueta “body”) ● Contiene el cuerpo de la página ● Ej: página con un párrafo (p): ¡Hola mundo desde XHTML!

10 24/09/2016 10 Estructura básica de una página XHTML (V) ● Poniendo todo junto: – Ej.: basico.html Página de prueba ¡Hola mundo desde XHTML!

11 24/09/2016 11 Aplicando estilos (I) ● Un estilo se define como: – Selector ● Nombre del estilo – Puede ser una etiqueta xhtml, una clase o un identificativo – Atributos ● Características de ese estilo – Ej.: párrafo genérico: p{font-family:serif;} – Ej.: párrafo en negrita (si se omite la “p” es genérico): p.negrita{font-weight:bold;} – Ej.: encabezado de primer nivel, identificativo “título” en rojo: h1#titulo{color:red;}

12 24/09/2016 12 Aplicando estilos (II) ● ¿Dónde se definen los estilos? – Por nivel de prioridad (de menor a mayor): ● Navegador – Vienen por defecto, algunos permiten modificarlos. ● Hojas de estilo externas – En ficheros “.css” que contienen los estilos – Se incluyen en el encabezado del documento, con “link”: ● En el encabezado de la página – Etiqueta “style” p{font-family:serif;} ● En una etiqueta: – No se pone el selector, sólo las características del estilo: En negrita

13 24/09/2016 13 Aplicando estilos (III) ● ¿Cómo referenciamos un estilo? – Si define una etiqueta, no hay que hacer nada – Si es una clase: atributo “class” Negrita – Si es un identificativo: atributo “id” ● Sólo un mismo “id” por documento Encabezado de la página – Si es un estilo en línea, ya se hace referencia al estilo En negrita

14 24/09/2016 14 Aplicando estilos (IV) ● Ej.: Página con estilos en el encabezado – basico-estilo-head.html Página de prueba p{font-family:serif;} p.negrita{font-weight:bold;} h1#titulo{color:red;} Esta es la cabecera de la página. ¡Hola mundo desde XHTML! Esto está en negrita.

15 24/09/2016 15 Aplicando estilos (V) ● Ej.: página con estilos en fichero externo – estilos.css p { font- family:serif; } p.negrita { font- weight:bold; } h1#titulo { color:red; }

16 24/09/2016 16 Aplicando estilos (VI) ● Ej.: página con estilos en fichero externo – Ej.: basico-estilo-externo.html Página de prueba Esta es la cabecera de la página. ¡Hola mundo desde XHTML! Esto está en negrita.

17 24/09/2016 17 Aplicando estilos (VII) ● Ej.: página con estilos en linea: – basico-estilo-inline.html Página de prueba Esta es la cabecera de la página. ¡Hola mundo desde XHTML! Esto está en negrita.

18 24/09/2016 18 Aplicando estilos (VIII) ● Ej.: prioridad de estilos – basico-estilos-prioridad.html Página de prueba p{font-family:monospace;} ¡Hola mundo desde XHTML!

19 24/09/2016 19 Aplicando estilos (IX) ● Estilos para la etiqueta body (sólo algunos) – Texto ● color: color del texto: – Valor RGB (#RRGGBB) o color en inglés: (white, black, red, green, blue...) ● font-style: estilo de fuente – normal, italic ● font-weight: grosor de la fuente – normal, bold, bolder ● font-family: tipografía a utilizar – sans-serif, serif, monospace ● text-align: alineación del texto – center, left, right, justify ● line-height: altura de línea: – Medida en píxels o “em” (1 em = tamaño de fuente actual) ● font-size: tamaño de la fuente – Tamaño en “em” (1 em: tamaño por defecto), en píxels, etc.

20 24/09/2016 20 Aplicando estilos (X) – Fondo: ● background-color: color de fondo: – #RRGGBB – Color en inglés ● background-image: imagen de fondo: – url("fichero de imagen"), none ● background-repeat: modo de repetición de la imagen de fondo: – repeat, repeat-x, repeat-y, no-repeat – Tamaño: ● width: ancho del elemento – porcentaje (100%), tamaño en píxeles (400px), tamaño en “em” (30em) ● height: alto del elemento – porcentaje (100%), tamaño en píxeles (400px), tamaño en “em” (30em)

21 24/09/2016 21 Aplicando estilos (XI) – Márgenes: ● margin: aplica todos los márgenes de una vez – separados por espacios – Tamaño (%, px, em) ● margin-top: margen superior – Tamaño ● margin-bottom: margen inferior – Tamaño ● margin-left: margen izquierdo – Tamaño ● margin-right: margen derecho – Tamaño – Irán apareciendo muchos más ● http://www.culturedcode.com/css/reference.html – Éstos se pueden utilizar en el cuerpo (body) y en muchos otros elementos (p, img, table...)

22 24/09/2016 22 Aplicando estilos (XII) ● Ej.: hacer una página como la que se muestra en la imagen (solución: estilos-body.html/css): ● La imagen de fondo es el fichero “logo-suave.jpg” ● Todos los estilos se han aplicado en el cuerpo (body)

23 24/09/2016 23 Insertando elementos (y sus estilos) ● Vamos a ver cómo insertar en una página web distintos elementos, que pasan desde textos sencillos, hasta tablas y formularios. ● Podremos aplicar estilos a cada uno de éstos elementos. – Algunos ya los hemos visto en la sección anterior, y son genéricos (se pueden aplicar a cualquier elemento de la página). – Otros son exclusivos para cada tipo de elemento.

24 24/09/2016 24 Insertando texto (I) ● La manera más básica de insertar textos ya la hemos visto: – Párrafos ● Etiqueta Esto es un párrafo. ● Los estilos vistos anteriormente para el cuerpo también pueden aplicarse a un párrafo (fuente, color de letra, color de fondo, imagen de fondo, altura de linea, etc.) ● Otros modos de insertar texto: – Encabezados ● Etiquetas de diferente nivel de encabezado Título Subtítulo ● El último nivel: ● Mismos estilos que antes

25 24/09/2016 25 Insertando texto (II) ● Podemos enriquecer el texto con: – Explicaciones de abreviaturas ● Etiqueta Esto es un texto XHTML. – Superíndices ● Etiqueta 2 2 =4 – Subíndices ● Etiqueta H 2 O – Saltos de linea: ● Etiqueta

26 24/09/2016 26 Insertando texto (III) ● Ejemplo: hacer una página similar a ésta: – solución en textos-estilos.html

27 24/09/2016 27 Insertando hiperenlaces (I) ● Un hiperenlace nos permite navegar de un recurso a otro de la red – Generalmente: de una página a otra ● Pero también puede ser de una página a un documento PDF, a una imagen, etc. ● La etiqueta que nos permite navegar es “a” – Su uso es muy sencillo: elemento de enlace – Vamos a ver dos cosas con respecto a enlaces: ● Formato de la dirección de destino ● Formas de aplicar estilos a los enlaces ● Enlaces dentro de una misma página

28 24/09/2016 28 Insertando hiperenlaces (II) ● Formato de la dirección de enlace: – La dirección de enlace es el recurso al que se apunta ● Puede tener tres formatos. – Imaginemos que actualmente estamos en: ● http://home.bardok.net/~bardok/test/index.html – Enlace absoluto: Absoluto ● Nos lleva a: http://www.google.com ● Es decir, damos la dirección completa – Enlace relativo Relativo ● Nos lleva a http://home.bardok.net/~bardok/test/pagina.html ● Es decir, lo que pongamos, se pone después de la última “/” – Enlace absoluto con respecto al dominio: Relativo ● Nos lleva a http://home.bardok.net/pagina.html ● Es decir, lo que pongamos, se pone después del dominio

29 24/09/2016 29 Insertando hiperenlaces (III) ● Estilos en los enlaces – Un enlace puede tener cuatro estilos: ● No visitado, ni con el ratón encima, ni pulsándose (link) ● Visitado (visited) ● Con el ratón encima (hover) ● Con el ratón siendo pulsado (active) – Hay que definirlos en orden. – Se definen con pseudoclases: a.enlace:link {color:blue;} /* Enlace normal */ a.enlace:visited {color:green;} /* Enlace visitado */ a.enlace:hover {color:red;} /* Enlace con el ratón encima */ a.enlace:active {color:purple;} /* Enlace siendo pulsado */... Si pulsas en el texto del enlace, irás a una página.

30 24/09/2016 30 Insertando hiperenlaces (IV) ● Una última opción es insertar enlaces dentro de una misma página. – El enlace tendrá la forma: ● #destino – El destino será una etiqueta con su atributo “id” con el mismo valor que lo que hayamos puesto en “destino”: Índice Sección 1 Sección 2 Sección 3 Sección 4... Sección 3 Lorem ipsum dolor [...] sunt in culpa qui officia deserunt mollit anim id est laborum.

31 24/09/2016 31 Insertando hiperenlaces (V) ● Ejemplo: página con estilos de enlaces – estilos-enlaces.html ● Ejemplo: enlaces dentro de una misma página – enlaces-pagina.html

32 24/09/2016 32 Insertando imágenes (I) ● Insertar una imagen es algo muy sencillo: – Elemento “img” ● Atributos: – src: enlace al fichero de la imagen – alt: texto alternativo, en caso de tener las imágenes desactivadas en el navegador ● También útil para personas que acceden con un lector de pantalla, debido a discapacidades visuales – longdesc: descripción larga, en el caso de que la imagen requiera una explicación larga ● Relacionado con lo dicho en el punto anterior ● Ejemplo:

33 24/09/2016 33 Insertando imágenes (II) – Una imagen es un elemento más, puede estar dentro de un enlace, en medio de un texto... – Con estilos podemos controlar su tamaño: ● width: anchura de la imagen ● height: altura de la imagen – Si sólo ponemos uno de los dos, el otro será proporcional Lorem ipsum dolor sit amet, [...]anim id est laborum.

34 24/09/2016 34 Insertando imágenes (III) – Una imagen puede estar a la derecha o izquierda de un texto ● Usaremos el estilo “float” – Valores: left o right – Su uso es complejo, lo veremos más adelante Lorem ipsum dolor sit amet, [...] ccaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, [...] ccaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

35 24/09/2016 35 Insertando imágenes (IV) ● Ejemplo: insertar y posicionar imágenes – estilos-imagen.html ● Algunas cosas que aparecen en el fichero de ejemplo se explicarán más adelante

36 24/09/2016 36 Insertando listas (I) ● Insertar una lista es algo muy sencillo: – Se define el tipo de lista ● Ordenada (ol) ● Desordenada (ul) ● De definiciones (dl) – Se insertan elementos en la lista ● En listas ordenadas y desordenadas: “li” ● En listas de definición: términos (dt) y descripciones (dd) – Como con la mayor parte de elementos en XHTML, es posible anidar una lista dentro de otra

37 24/09/2016 37 Insertando listas (II) ● Listas ordenadas: – Los elementos aparecen numerados ● El estilo de numeración se define con el estilo: – list-style-type ● decimal (por defecto), lower-roman, upper-roman, lower-greek, etc. Eddard Stark Catelyn Stark Robb Stark Sansa Stark Arya Stark Brandon Stark Rickon Stark John Nieve

38 24/09/2016 38 Insertando listas (III) ● Listas no ordenadas – Los elementos aparecen con viñetas delante ● Podemos definir el estilo de la viñeta con “list-style-type” – square, circle, etc. ● Podemos poner una imagen en lugar de una viñeta, con: – url(“fichero de la imagen”) lorem ipsum dolor sit amet

39 24/09/2016 39 Insertando listas (IV) ● Listas de definición – Son parejas término-descripción ● El navegador escoge cómo renderizar, generalmente, el término aparece en la línea superior, y la descripción bajo ella, con una determinada sangría Gato Mamífero cuadrúpedo doméstico. Perro Mamífero cuadrúpedo doméstico. Ornitorrinco Según Kevin Smith, director de la película Dogma, señal inequívoca de que Dios tiene sentido del humor.

40 24/09/2016 40 Insertando listas (V) ● Ejemplo: diferentes listas con estilos en – Fichero listas-estilos.html

41 24/09/2016 41 Insertando tablas (I) ● Las tablas sirven para presentar información en forma tabular (filas y columnas) – Es una costumbre muy habitual utilizarlas también para maquetar, pero nosotros no lo vamos a hacer, porque va en contra de la accesibilidad ● Para maquetar se usan capas (divs), que veremos más adelante – Una tabla (table) se compone de filas (tr), que están divididas en celdas ● Las celdas pueden ser: – Celdas de datos (td) – Celdas de la cabecera de la tabla (th) – Es posible (y muy aconsejable, en términos de accesibilidad) añadir una leyenda a la tabla, para saber qué contenido tiene ésta (caption)

42 24/09/2016 42 Insertando tablas (II) ● Una tabla sencilla: – Una tabla con tres filas y tres columnas, cabeceras y leyenda incluidas. ● Formato por defecto del navegador ● No queda muy clara la separación de las celdas ● La leyenda aparece en la parte de arriba ● Vamos a cambiar el formato con estilos Película Director Género El Señor de los Anillos Peter Jackson Histórica, si te parece :-D Blade Runner Ridley Scott Ciencia ficción Tabla con tres filas y tres columnas

43 24/09/2016 43 Insertando tablas (III) – Formato básico de la tabla (tablas-estilos-inicial.html): ● Anchura: 100% de la ventana – Estilo para la tabla: ● width: 100% ● Celdas con borde delgado – Estilo para la tabla y las celdas (tanto cabecera como datos): ● border-style:solid;border-width:thin;

44 24/09/2016 44 Insertando tablas (IV) – Seguimos con el formato de la tabla (tablas-estilos- avanzado.html) ● Ponemos la leyenda debajo: – Estilo para la tabla: “caption-side:bottom;” ● Quitamos los bordes intermedios: – Estilo para la tabla: “border-collapse:collapse;” ● Ponemos un color de fondo a la cabecera: – Estilo para las celdas de cabecera: “background-color:silver;”

45 24/09/2016 45 Insertando tablas (V) ● Es posible agrupar varias celdas en una sóla: – atributo “colspan” dice cuantas columnas ocupa una celda – atributo “rowspan” dice cuantas filas ocupa una celda A B C D Tabla con... ¿cuatro filas y cuatro columnas?

46 24/09/2016 46 Formularios (I) ● Un formulario nos permite recoger datos de un usuario, para su posterior tratamiento – Nosotros no vamos a ver ese tratamiento, eso es programación en el servidor, nosotros estamos centrados en la programación en el cliente ● El tratamiento puede venir dado por páginas activas (PHP, JSP...), procesos de servidor... – ¿Qué tipos de datos podemos recoger? ● Campos de texto ● Passwords ● Selecciones, tanto simples como múltiples ● Ficheros ●...

47 24/09/2016 47 Formularios (II) ● Esquema básico: – Elemento de formulario (etiqueta “form”) – Destino de los datos del formulario (atributo “action”) – Modo de envío de los datos (atributo “method”) ● Puede ser de dos tipos – get: los datos se envían en la URL – post: los datos se envían en la petición web, ocultos (pero sin cifrar, así que se pueden ver fácilmente) – Componentes del formulario ● Los veremos a continuación form action="http://localhost/~bardok/parametros.php" method="get">...

48 24/09/2016 48 Formularios (III) ● Elementos del formulario – Grupos de controles (“fieldset”) ● Es aconsejable agrupar los controles de un formulario en “fieldset”s ● Un fieldset tiene dentro los controles de usuario, y un elemento de tipo “legend” – Éste elemento identifica al grupo de controles – Controles ● Elemento “input” – Línea de texto única, botón, checkbox, radiobutton, texto enmascarado... ● Elemento “select” – Lista para realizar selecciones ● Elemento “textarea” – Varias líneas de texto ● Elemento “label” – Etiqueta asociada a un control (excepto para botones)

49 24/09/2016 49 Formularios (IV) – Elemento input: ● Es un caso especial – Según el valor de su atributo “type” mostrará un control u otro, los veremos uno por uno... ● Otros atributos: – name: nombre del control, es necesario para recuperar su valor y tratarlo (será el nombre de un parámetro) – id: identificativo, es necesario para asociar un label – value: valor por defecto, en controles de texto, o valor asociado al control, en el caso de ser un control seleccionable – checked (el único valor posible es “checked”): si está asignado, el elemento estará seleccionado por defecto (para seleccionables) – Elemento label ● Se pone alrededor del control al que se refiere (no es necesario, pero sí recomendable) – Su atributo, “for”, indica a qué control se refiere

50 24/09/2016 50 Formularios (V) – Línea de texto ● Elemento input, de tipo “text” – Texto enmascarado ● Elemento input, de tipo “password” – Botón de envío ● Elemento input, de tipo “submit” ● El texto en “value” aparece en el botón – Botón de borrado (se vuelve a los valores por defecto) ● Elemento input, de tipo “reset” ● El texto en “value” aparece en el botón Formulario de prueba: Login: Password:

51 24/09/2016 51 Formularios (VI) – Seleccionable (checkbox) ● Elemento input, de tipo “checkbox” – Radiobutton ● Elemento input, de tipo “radio” ● Similar al checkbox, pero si varios tienen el mismo nombre (atributo “name”) sólo uno de ellos puede seleccionarse cada vez Opciones Recordar en éste equipo. Registrar ¿Desea asesoramiento? Sí No

52 24/09/2016 52 Formularios (VII) – Listas seleccionables ● Elemento “select” ● Puede englobar elementos “option”, que contienen las opciones – El atributo “value” indica el valor del parámetro, en el caso de que sea el seleccionado – El atributo “selected”, con valor “selected” indica el seleccionado por defecto ● El atributo “size” indica el número de líneas Busca el que no pinta nada: Blind Guardian Rage Ramoncín Evergrey

53 24/09/2016 53 Formularios (VIII) – Elementos de texto (varias líneas) ● Elemento “textarea” ● El atributo “rows” indica cuántas líneas de texto se admiten ● El atributo “cols” indica cuántas columnas de texto se admiten Escribe algo:

54 24/09/2016 54 Formularios (IX) ● Ahora juntamos todo en una página de prueba... – Ej: formulario-basico.html

55 24/09/2016 55 Formularios (X) ● Un último apunte sobre formularios: – En los elementos de tipo checkbox y radio, si pulsamos sobre el texto del “label”, también podemos interactuar con ellos – Podemos utilizar la pseudoclase “focus” para cambiar la apariencia de un control, cuando esté seleccionado input:focus { background-color:aqua; }

56 24/09/2016 56 Maquetación con DIVs (I) ● Hemos visto los elementos constitutivos de una página web – ¿Cómo los situamos en pantalla? ● Columnas, encabezado de la página, contenido... – Vamos a utilizar el elemento “div” ● El elemento “div”, por defecto, se sitúa como un bloque independiente, que no tiene nada a la derecha ni a la izquierda – Cada div estaría “en una línea independiente” ● Podemos cambiar este comportamiento con estilos, y es lo que vamos a hacer Lorem ipsum dolor sit amet, [...] qui officia deserunt mollit anim id est laborum.

57 24/09/2016 57 Maquetación con DIVs (II) – Estilos para aplicar a los divs ● Float: posiciona al elemento a un lado de la pantalla – valores: left, right, none – Los bloques se van poniendo a la derecha o a la izquierda de la pantalla, bajo el anterior bloque a ese lado, si no caben, junto a él, si caben ● Width: especifica la anchura del elemento – Puede ser una media porcentual (diseño líquido), según la fuente (diseño elástico) o en píxeles (diseño estático) ● Vamos a utilizar diseño líquido div#derecha {background- color:silver;width:50%;float:right;} div#izquierda {width:50%;float:left;}... Lorem ipsum dolor sit amet, [...] qui officia deserunt mollit anim id est laborum.

58 24/09/2016 58 Maquetación con DIVs (III) – Con el estilo “margin” podemos posicionar el elemento en una posición concreta ● La posición puede ir en porcentaje, “em” o píxeles ● Paso por paso... – Sin posicionar: div#derecha {background-color:#FFBBBB;} div#izquierda {background-color:#BBFFBB;} div#centro {background-color:#BBBBFF;}... Lorem ipsum dolor sit amet, [...] qui officia deserunt mollit anim id est laborum.

59 24/09/2016 59 Maquetación con DIVs (IV) – Ponemos la columna derecha: div#derecha{background-color:#FFBBBB;float:left;width:40%} div#izquierda{background-color:#BBFFBB;} div#centro{background-color:#BBBBFF;}... Lorem ipsum dolor sit amet, [...] qui officia deserunt mollit anim id est laborum.

60 24/09/2016 60 Maquetación con DIVs (V) – Ponemos la columna izquierda div#derecha{background-color:#FFBBBB;float:left;width:40%} div#izquierda{background-color:#BBFFBB;float:right;width:30%} div#centro{background-color:#BBBBFF;}... Lorem ipsum dolor sit amet, [...] qui officia deserunt mollit anim id est laborum.

61 24/09/2016 61 Maquetación con DIVs (VI) – Para ajustar la columna central, tenemos que utilizar una de estas dos alternativas: ● Opción A: ponemos la columna central “a la izquierda” de la de la izquierda (se podría poner también “a la derecha” de la derecha) div#centro {background-color:#BBBBFF;width:30%;float:left;}

62 24/09/2016 62 Maquetación con DIVs (VII) ● Opción B: ajustar los márgenes: ponemos el margen izquierdo a distancia 40% del lado izquierdo, y el derecho a distancia 30% del lado derecho: div#centro {background-color:#BBBBFF;margin-left:40%;margin-right:30%;}

63 24/09/2016 63 Maquetación con DIVs (VIII) ● Vamos a maquetar un poco más: – Texto justificado – El texto con un desplazamiento del 1% a cada lado de su contenedor (tenemos que restarlo a la anchura del contenedor) div{text-align:justify;padding:1%;} div#derecha{background-color:#FFBBBB;float:left;width:38%;} div#izquierda{background-color:#BBFFBB;float:right;width:28%} div#centro{background-color:#BBBBFF;margin-left:40%;margin-right:30%;}

64 24/09/2016 64 Maquetación con DIVs (IX) ● Poniendo todo esto junto: – Ej.: capas-estilos.html

65 24/09/2016 65 Maquetación con DIVs (X) ● Jugando con los colores de fondo y el margen y desplazamiento de los párrafos (estilos margin y padding) – Atentos a cómo se define un párrafo dentro de un div: div p { padding-bottom:0.5em; } – Ej.: capas-estilos-colores.html

66 24/09/2016 66 Maquetación con DIVs (XI) ● Para terminar, el estilo “display:table” nos permite posicionar los contenidos de un div sin que se salgan de éste: ● Vamos a utilizar el siguiente código, modificando el estilo para el elemento “centro” – Vamos a ver cómo queda sin “display:table” y cómo queda con él – El código del ejemplo está en: capas-columnas-form.html div#centro { background-color:#BBBBFF; margin-left:40%; margin-right:30%; display:table; }... Lorem Ipsum Dolor Sit

67 24/09/2016 67 Maquetación con DIVs (XII) ● Sin el estilo “display:table”:

68 24/09/2016 68 Maquetación con DIVs (XIII) ● Con el estilo “display:table”:

69 24/09/2016 69 Posicionando formularios con DIVs ● Para terminar, vamos a recopilar y hacer este formulario: – Fichero boton-centro.html

70 24/09/2016 70 Referencias y recomendaciones (I) ● Páginas básicas: – HyperText Markup Language (HTML) Home Page ● http://www.w3.org/MarkUp/ http://www.w3.org/MarkUp/ – Cascading Style Sheets home page ● http://www.w3.org/Style/CSS/ http://www.w3.org/Style/CSS/ – Validador w3c ● http://validator.w3.org/ http://validator.w3.org/ ● Utilidades – Cascading Style Sheets 2.1 Reference : Properties ● http://www.culturedcode.com/css/reference.html http://www.culturedcode.com/css/reference.html – Tabla de valores para lang y xml:lang ● http://www.tierradenomadas.com/rc007.phtml http://www.tierradenomadas.com/rc007.phtml

71 24/09/2016 71 Referencias y recomendaciones (II) ● Esto no es una referencia, sino un consejo: – Si no sabéis cómo hacer algo, buscad una página que lo haga ● Podéis mirar el código fuente tanto de la página como de sus estilos – Esta es una de las maravillas de tener disponible el código de las cosas: ● Podemos aprender todo lo que queramos, y permitir que, a su vez, otros también aprendan ● Finalmente, tened en cuenta aquellas cosas vistas que pueden parecer irrelevantes: – Imágenes siempre con descripción – No usar tablas para maquetar – Utilizar estilos para la presentación ● Estas cosas permitirán que la gente pueda acceder a los contenidos de vuestras páginas, aunque tengan algún tipo de discapacidad: a esto se le llama accesibilidad