Uso básico de HTML y CSS

Transcripción

1 Implantación de Aplicaciones Web Nacho Iborra IES San Vicente Esta obra está licenciada bajo la Licencia Creative Commons Atribución-NoComercial-CompartirIgual 4.0 Internacional. Para ver una copia de esta licencia, visita

2 Introducción al diseño web En este tema trataremos de dar una visión lo más completa posible de lo que es el diseño web, que junto con Javascript, conforman toda la parte que afecta al cliente de una aplicación web, es decir, la programación en el lado del cliente. A la hora de afrontar el diseño web de un sitio, fundamentalmente vamos a acudir a dos tipos de documentos, que pueden formar uno solo o estar enlazados entre sí: Los documentos HTML, mediante los que dotaremos de estructura y contenido a cada página, es decir, indicaremos qué tipos de contenidos tendrán (imágenes, párrafos, títulos, subtítulos, etc), y en qué orden. Los documentos CSS, mediante los que dotaremos de estilo a las páginas, es decir, indicaremos aspectos como el tipo de letra, tamaño, colores, bordes, márgenes, etc. Como veremos a lo largo de este capítulo, ambos conceptos son independientes, es decir, podemos tener páginas HTML que no tengan ningún estilo CSS (aunque no es lo habitual), y documentos de estilos CSS que no apliquemos a ninguna página (aunque serían inútiles). Así, estas dos herramientas de diseño pueden caminar en paralelo, vincularse la una a la otra en las páginas que nos interesen, o bien embeber los estilos en la propia página. Veremos más adelante qué ventajas y desventajas tiene cada una de estas formas de diseñar. A lo largo del capítulo, se irán intercalando algunos conceptos de HTML con otros de CSS, de forma que se irá avanzando por igual en ambas materias. En otros libros es habitual contar primero una cosa (normalmente HTML) y después la otra (normalmente CSS), pero son dos espacios bastante amplios, y podría ocurrir que nos aburramos de estar trabajando con uno de ellos sin ver qué posibilidades reales tiene en una web, combinado con el otro. Diseño web 2

3 Introducción a HTML Veremos a continuación que una página web no es más que un archivo de texto (que podemos hacer con el mismo bloc de notas) donde, mediante una serie de etiquetas, configuramos la estructura y el contenido que va a tener dicha página. Estas etiquetas que empleamos forman un lenguaje, llamado H T M L (siglas de HyperText Markup Language) que es el lenguaje con el que se escriben la mayoría de páginas web. Es un lenguaje estándar, reconocido en todo el mundo, y definido por el W3C (World Wide Web Consortium), una entidad sin ánimo de lucro. Historia Su historia se remonta a los años 80, cuando se propusieron sistemas de hipertexto para compartir documentos. Veremos que el hipertexto es un mecanismo mediante el cual, desde un documento, podemos acceder a otros relacionados con el mismo, normalmente mediante lo que se denominan links o enlaces. Durante los años 90 trató de definirse un estándar mundialmente reconocido, con las primeras versiones de HTML. Fue con HTML 2.0 en 1996 cuando se consiguió el primer estándar, publicado entonces por otra organización, llamada IETF (Internet Engineering Task Force). Ya después fue el W3C quien publicó las nuevas versiones que pasarían a ser estándares: HTML 3.2 en 1997 (que permitía entre otras cosas incorporar applets Java a las páginas), y HTML 4.0 en 1998 (que permitía incluir hojas de estilo CSS y pequeños programas llamados scripts). Durante un tiempo, la actividad en torno a HTML se detuvo, hasta que en los últimos años se ha dado un nuevo empujón desde la publicación de los primeros borradores de la nueva versión, HTML 5, en 2008, con mejoras muy significativas. Paralelamente a este proceso, desde el año 2000, el organismo W3C ha venido desarrollando otro estándar, llamado XHTML, que podemos considerar una mezcla de HTML y XML. Partió de la versión 1.0, y ya se han publicado borradores de versiones posteriores, como la 1.1 o la 2.0. Estructura básica de una página HTML Si probamos a cargar en el navegador cualquier página web, y accedemos con clic derecho (o con el menú Ver del navegador) a su código fuente, se abrirá una especie de bloc de notas, y lo que podamos leer en él probablemente nos suene a chino. La página original que vemos en el navegador, con sus tipos de letra, imágenes, colores, etc., internamente esconde un montón de texto aparentemente sin sentido, lleno de palabras extrañas que luego no aparecen por ninguna parte en la página. Por ejemplo, un fragmento del código fuente de la página principal de Google podría ser algo así: <html > <head> </head> <body class="hp vasq" onload=""> <div class="ctr-p" id="viewport"> Diseño web 3

4 En general, cualquier página web escrita con HTML tiene una estructura común compuesta por: <html> <head> </head> <body> </body> </html> En esta estructura, podemos diferenciar los siguientes apartados: Toda la estructura y contenido de la página está englobada por el par de etiquetas <html> y </html> La sección englobada entre las etiquetas <head> y </head> se denomina cabecera, y en ella se definen aspectos generales de la página, pero no su estructura y contenido. Por ejemplo, aquí definiremos el juego de caracteres empleado, o el título (title) de la página, que podremos ver en la pestaña correspondiente del navegador. La sección entre las etiquetas <body> y </body> define la estructura y contenido de la página (lo que vemos en la ventana del navegador). Dentro de esta sección podemos utilizar una serie de etiquetas para definir ciertos tipos de contenidos, como por ejemplo encabezados, párrafos, listas, tablas, imágenes, etc. Algunas versiones de HTML, como XHTML, añaden otros elementos básicos a esta estructura, como una etiqueta <?xml> al principio de todo, o una etiqueta <DOCTYPE> bajo la anterior, que definen el tipo de documento XHTML que se está escribiendo. Pero lo importante por ahora es hacernos una idea de que los contenidos se organizan en etiquetas, y que (normalmente) éstas van por parejas, una que inicia una sección, y otra que la cierra (precedida por una barra /). También es importante recalcar que las etiquetas van siempre en minúscula (html, head, body), aunque luego el contenido y otros atributos que veremos después sí pueden contener mayúsculas. Uso básico de la etiqueta <head> Hemos explicado anteriormente que la etiqueta <head> se utiliza para definir aspectos generales de la página, independientemente del contenido y estructura que tendrá. Fundamentalmente, la utilizaremos para: Indicar el título de la página (visible en la pestaña del navegador) Indicar el juego de caracteres que vamos a usar (codificación del archivo, a fin de que luego se puedan ver bien símbolos específicos de ciertos idiomas, como por ejemplo los acentos). Algunos de los juegos más utilizados son UTF 8 o ISO (para alfabeto latino). Este apartado conviene que sea el primero en el head, para que el navegador lo lea cuanto antes. Indicar la(s) hoja(s) de estilo CSS que se van a aplicar a la página Indicar otros recursos externos (como por ejemplo archivos de código Javascript) que se van a utilizar en la página. Diseño web 4

5 De las últimas dos opciones hablaremos más adelante. En cuanto a las dos primeras, si queremos añadir un título a la página, lo haremos mediante el par de etiquetas title (dentro del bloque head), y si queremos especificar un juego de caracteres, lo haremos con la etiqueta meta. Por ejemplo, si queremos poner como título el texto Bienvenido/a, y utilizar el juego de caracteres ISO , pondríamos algo como esto dentro del bloque head: <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <title>bienvenido/a</title> </head> La etiqueta meta se utiliza en general para definir metainformación de la página (es decir, información sobre la información que hay en la página). Puede haber varias dentro del bloque head, y con ellas podemos indicar distintos elementos además del juego de caracteres, como por ejemplo el autor de la página, o un conjunto de palabras clave útiles para que los buscadores puedan localizar mejor la página. Por ejemplo, en la siguiente página indicamos el autor y un conjunto de palabras clave de la página: <html> <head> <title></title> <meta author="ignacio Iborra"/> <meta keywords="curso, HTML, CSS, web, PHP, aplicaciones"/> </head> Notar también que la etiqueta meta no tiene pareja, va ella sola, y termina con una barra /> (aunque si no la ponemos, también es correcta en HTML no estricto). Uso básico de la etiqueta <body> La etiqueta <body> define el contenido y estructura de la página, es decir, lo que se ve en la ventana del navegador cuando cargamos la página (textos, imágenes, etc.). En el interior de esta etiqueta podremos utilizar una gran variedad de etiquetas, que veremos en las siguientes secciones, para definir cada uno de los tipos de texto y apartados de la página. Para empezar, si ponemos cualquier texto entre el par de etiquetas body, se mostrará ese texto tal cual en el navegador, aunque sin contar los saltos de línea (Intros) que pongamos. <body> Hola, buenos días. Esto es una página web de prueba. </body> </html> Se vería algo así en el navegador: Hola, buenos días. Esto es una página web de prueba. Diseño web 5

6 Comentarios en HTML Al igual que cualquier otro lenguaje de programación, HTML permite añadir comentarios en el código. Estos comentarios pueden servir para dos cosas: explicar una parte del código (en este caso, de la estructura o contenidos de la página web) que no quede clara, o delimitar / marcar una zona del código para poderla localizar o identificar más fácilmente. Los comentarios en HTML comienzan con el símbolo <!-- y terminan con el símbolo -->. Lo que haya entre estos símbolos no se muestra en el contenido de la página, sólo se puede leer mirando el código fuente. Veamos un ejemplo: <html> <head> <!-- Añadimos el juego de caracteres ISO > <meta http-equiv="content-type" content="text/html; charset=iso "/> <!-- Título de la página --> <title>bienvenido/a</title> </head> <body> <!-- En este ejemplo, simplemente mostraremos un texto de saludo --> Hola, buenos días. </body> </html> Qué necesitamos para escribir páginas web? Cualquier editor de textos simple sirve, como por ejemplo el bloc de notas (si estamos en Windows) o gedit (si estamos en Linux). Una opción muy recomendable en Windows es utilizar Notepad++. Es un editor gratuito, que permite editar diferentes tipos de archivos (por ejemplo, páginas HTML, páginas PHP, etc.) y tiene realce de sintaxis (es decir, que muestra con distintos colores los distintos elementos del documento, para poderlos diferenciar mejor). En general, cualquier editor de textos sencillo con realce de sintaxis (como por ejemplo gedit en Linux, o TextWrangler en Mac OS X) nos puede servir. Ejercicio 1 Crea con tu editor de textos un nuevo documento, y llámalo pagina1.html. Dentro, añade una estructura básica de etiquetas HTML para que el documento tenga lo siguiente: Un título que sea Mi primera página HTML Un juego de caracteres ISO o UTF-8. Un texto (en el body) con tu nombre Guarda la página (a ser posible, en formato UTF-8), y prueba a abrirla con un navegador para comprobar que se ve correctamente (incluyendo los acentos que pueda haber). Diseño web 6

7 Etiquetas HTML básicas de texto Veremos en esta sección algunas de las principales etiquetas que podemos utilizar en la sección body de una página web para dotarla de diferentes tipos de textos estructurados. Párrafos Los párrafos en HTML se marcan con la pareja de etiquetas p. Un párrafo es un elemento separado del resto. Cuando lo terminamos y empezamos otro, se tiene un punto y aparte automático, y una separación automática entre párrafos. <body> <p>esto es un párrafo.</p> <p>esto es otro párrafo.</p> </body> Que se vería en el navegador más o menos así: Esto es un párrafo. Esto es otro párrafo. Secciones o headings Si todo el contenido de una página web fueran párrafos, se haría bastante pesado leer y localizar la información. Para organizar mejor el contenido, debemos separarlo en secciones o encabezados (en inglés, headings), cada una con su correspondiente título. Así, podemos tener secciones o headings principales, divididas a su vez en subsecciones, y éstas a su vez en más subsecciones, etc., y cada una con su(s) correspondiente(s) párrafo(s). En total, podemos tener hasta 6 niveles. Los principales se marcan con la etiqueta h1, los de segundo nivel con la etiqueta h2 y así sucesivamente hasta h6 (aunque generalmente se suele llegar hasta h3 o h4). Por ejemplo, una página con 2 apartados principales sobre HTML y CSS y cada uno con 2 subapartados dentro, podría tener una estructura como: <body> <h1>html</h1> <h2>introducción a HTML</h2> <p>html es un lenguaje que</p> <p>su historia se remonta a</p> <h2>etiquetas básicas de HTML</h2> <p>algunas de las etiquetas que podemos utilizar son</p> <h1>css</h1> <p>css es</p> <h2>estructura de un documento CSS</h2> <p>un documento CSS se compone de</p> Diseño web 7

8 <h2>principales tipos de reglas</h2> <p>los principales tipos de reglas CSS son</p> </body> En un navegador, esto podría verse más o menos así: HTML Introducción a HTML HTML es un lenguaje que Su historia se remonta a Etiquetas básicas de HTML Algunas de las etiquetas que podemos utilizar son CSS CSS es Estructura de un documento CSS Un documento CSS se compone de Principales tipos de reglas Los principales tipos de reglas CSS son Ejercicio 2 Crea una página web llamada curriculum.html que tenga lo siguiente: Como título de la página (etiqueta title dentro de head), ponle tu nombre En el cuerpo (body), deberá tener: Un encabezado principal (h1) llamado Datos personales, donde deberás indicar en uno o dos párrafos información sobre ti: nombre y apellidos, dirección y teléfono (te puedes inventar la dirección y el teléfono si quieres). Otro encabezado principal (h1) llamado Formación, que tendrá dentro dos subapartados (h2): uno llamado Idiomas donde deberás indicar los idiomas que puedes hablar o escribir correctamente (en uno o dos párrafos), y otro llamado Estudios donde también en uno dos párrafos indiques los estudios que has alcanzado hasta ahora, incluyendo tus estudios actuales (graduado de ESO, Bachillerato, Ciclos Formativos, etc.) Algunas etiquetas de formato Hasta ahora no hemos hablado de nada de formato en páginas HTML. De hecho, desde el propio HTML no se puede (o no se aconseja) dar formato a los documentos, es decir, definir tipos de letra, tamaños, colores, etc. Eso se hará con estilos CSS, como veremos. Diseño web 8

9 Sin embargo, existen algunas etiquetas en HTML que sí pueden usarse para dar algo de formato a ciertas partes del documento, con el fin de resaltar esas partes sobre el resto. En concreto, podemos: Poner un texto en negrita, utilizando la pareja de etiquetas strong Poner un texto en cursiva, utilizando la pareja de etiquetas em Indentar un texto hacia la derecha (añadirle una sangría por la izquierda) con la etiqueta blockquote Las dos primeras etiquetas (strong y em) se suelen utilizar dentro de párrafos o elementos similares (listas, sangrías, etc.), para resaltar una parte de ese párrafo. La etiqueta para sangrías (blockquote) es una alternativa al párrafo (no se utiliza dentro del párrafo, sino en lugar del párrafo), para sangrar un texto hacia la derecha. Veamos algunos ejemplos: <body> <p>esto es un párrafo con <strong>negrita</strong>.</p> <p>este otro párrafo tiene <em>texto en cursiva</em>.</p> <blockquote>este párrafo está <em>indentado</em> a la derecha.</blockquote> </body> En un navegador, esto quedaría algo así: Esto es un párrafo con negrita. Este otro párrafo tiene texto en cursiva. Este párrafo está indentado a la derecha Otras etiquetas de formato Existen otras etiquetas para formato que no veremos en este tema, como la etiqueta para poner texto subrayado (está desaconsejada para no confundir al usuario y hacerle creer que puede pinchar encima del texto), tachado, superíndice, subíndice, etc. La etiqueta span La etiqueta span se utiliza para marcar (aunque luego no se ve nada diferente en el navegador) una parte de un texto, normalmente contenida dentro de otro mayor (dentro de un párrafo, un h1, etc.). <p>cuentan que sentado bajo un manzano, <span>isaac Newton</span> descubrió la ley de la gravedad.</p> Por sí solas no suponen un cambio visual en la página, pero combinadas con hojas de estilo CSS podemos hacer que esa parte del texto marcada entre span tenga un estilo diferente de lo que le rodea (diferente color, tamaño, etc.), y así resaltar el texto de una forma diferente a poner simplemente negrita y/o cursiva. Etiquetas especiales : br y hr Hasta ahora, hemos visto que todas las etiquetas HTML (salvo la etiqueta meta de la cabecera) van por parejas: una comienza algo y la otra lo termina. Existen algunas Diseño web 9

10 etiquetas que van solas, como es el caso de las etiquetas br y hr (entre otras que veremos más adelante). La etiqueta br se utiliza para forzar un salto de línea (un punto y aparte) allá donde se ponga. Normalmente cuando usamos un párrafo, automáticamente se tiene el punto y aparte al terminarlo, pero puede que nos interese bajar de línea en algún punto intermedio, o fuera de un párrafo, por alguna razón. En este caso, utilizaremos la etiqueta br como sigue: <body> <p>esto sería un párrafo largo, que ocupa varias líneas. Si no ponemos nada, él solo se ajusta con su punto y aparte, pero si ponemos la etiqueta br <br />se produce un salto de línea en el punto donde hayamos colocado esa etiqueta.</p> </body> Esto se vería así en el navegador: Esto sería un párrafo largo, que ocupa varias líneas. Si no ponemos nada, él solo se ajusta con su punto y aparte, pero si ponemos la etiqueta br se produce un salto de línea en el punto donde hayamos colocado esa etiqueta. Por su parte, la etiqueta hr sirve para insertar una línea horizontal en el lugar donde se haya colocado. Se utiliza normalmente para separar contenidos en una página web de forma más visible. Por ejemplo: <body> <p>esto es un párrafo.</p> <hr /> <p>esto es otro párrafo separado por una línea horizontal.</p> Esto se vería así en el navegador: Esto es un párrafo. Esto es otro párrafo separado por una línea horizontal Algunos símbolos especiales Cómo podríamos representar en una página web el símbolo <? Lo utilizamos para las etiquetas, y en el momento en que lo pongamos, el navegador va a creer que estamos empezando una etiqueta y no lo mostrará. Al igual que ese símbolo, o su contrario >, existen ciertos símbolos que, cuando los escribimos directamente en el documento, no se representan bien (o directamente, no se representan) en la página, porque el navegador no los reconoce como símbolos imprimibles. En su lugar, debemos escribir un código alternativo. Por ejemplo, en el caso de < deberemos poner <. Aquí vemos un resumen de algunos símbolos útiles: Símbolo Código < < > > & & Diseño web 10

11 " &apos; (espacio) Respecto a los espacios, aunque si ponemos un espacio entre palabra y palabra, se va a representar bien, en cuanto queramos utilizar el espacio como elemento indentador (por ejemplo, poner un texto cinco espacios hacia dentro) ya no va a ser posible. En estos casos tendremos que utilizar el código del espacio ( ) y repetirlo tantas veces como espacios queramos poner. <body> Texto separado 5 espacios del margen izquierdo. </body> En cuanto a los acentos y letras especiales (como la ñ en español), si utilizamos la codificación adecuada (indicada en las etiquetas meta), los podremos escribir tal cual. En caso contrario, también tienen su codificación particular: Los acentos agudos (los normales en español), se representan con el símbolo &, seguido de la letra que queramos acentuar (en mayúsculas o minúsculas, pero sin el acento), la palabra acute, y el punto y coma. Así, por ejemplo, la a minúscula acentuada (á), se representaría con á y la o mayúscula acentuada (Ó), se representaría con Ó Los acentos graves (o abiertos, propios de idiomas como el catalán o el francés) se representan igual que los agudos, pero sustituyendo la palabra acute por grave. Así, la a minúscula con acento grave (à), se pondría à La eñe se representa con el símbolo & seguido de una n o N (según si queremos ñ o Ñ), y la palabra tilde, finalizado todo en punto y coma. Así, una eñe minúscula (ñ) se representaría ñ Ejercicio 3 Crea una nueva página llamada historiainternet.html. Dentro, vamos a copiar este contenido: Diseño web 11

12 Aunque no se ve en el ejercicio, en la cabecera head del documento debes poner como título (title) la frase Historia de Internet, y como codificación la ISO El primer título (Historia) es un encabezado de nivel 1 (h1). Debajo tiene una línea de división horizontal (hr) Debajo de la línea hay dos párrafos explicativos. Los números de año van en negrita, y puede haber algún texto en cursiva también. El segundo título (Nombres de dominio) es un encabezado de nivel 2 (h2). Debajo de él tiene otro párrafo, donde también deberás poner en cursiva lo que esté en cursiva. Diseño web 12

13 Introducción a CSS Antes de seguir profundizando en HTML, vamos a hacer un alto en el camino para empezar a hablar de CSS. Hasta ahora hemos visto que un documento HTML no tiene formato, mas allá de las negritas, cursivas y poco más. Cómo podemos definir el tipo de letra de un documento, o el color, o el tamaño, entre otras cosas? Para dotar de estilo a una página, a partir de la versión 4 de HTML, disponemos de lo que se llaman hojas de estilo en cascada (en inglés Cascading Style Sheets, abreviado CSS). Se trata de fragmentos de texto que definen estilos para los diferentes elementos de las páginas web, y que pueden ir tanto embebidos en la misma página web, como enlazados desde un fichero aparte. De esta forma se consigue separar por un lado el contenido (que irá en páginas HTML) del estilo (que irá en documentos CSS). Historia La primera versión de CSS (CSS1) fue publicada en En ella se definieron las directrices para ciertos estilos básicos, como tipos de letra, color de texto, alineación, márgenes, bordes Le siguió poco tiempo después CSS2, publicada en 1998, y que corregía y ampliaba las posibilidades de CSS1, añadiendo posicionamientos, sombras, textos bidireccionales, etc. Esta versión tuvo una revisión, la CSS2.1, que corregía algunos errores encontrados y eliminaba algunas funcionalidades que muchos navegadores no soportaban. Finalmente, llegamos a la versión de CSS3. A diferencia de las anteriores, que son especificaciones globales de mucha información contenida, esta versión está formada por una serie de módulos, y cada uno añade un paquete de funcionalidades a lo que ya había en CSS2, por lo que se mantiene la compatibilidad con esta versión. De hecho, se empezó a trabajar con CSS3 en 1999, y cada módulo ha tenido una evolución diferente. Algunos han llegado a estándares o recomendaciones oficiales, otros están a punto de serlo, y otros aún están en vías de desarrollo. Funcionamiento básico Para definir un estilo sobre una página web en CSS, se utiliza lo que se llaman reglas. Una regla se compone del nombre del elemento sobre el que se va a aplicar el estilo y, entre llaves y separados por punto y coma, los estilos que vamos a aplicar sobre ese elemento (por ejemplo, tipo de letra, tamaño, color, bordes). Por ejemplo, si quisiéramos establecer que todos los párrafos de una página web fueran de color rojo y de tamaño 12 puntos tendríamos una regla como la siguiente: p { color:red; font-size: 12pt; } Observemos que lo primero que ponemos es el nombre del elemento (en este caso, de la etiqueta HTML) sobre el que vamos a aplicar el estilo, llamado selector, y después entre llaves los diferentes estilos a aplicar (en el ejemplo, el color del texto y el tamaño del mismo). Este conjunto de estilos se llama declaración, y está formado por parejas de propiedades y valores (por ejemplo, la propiedad color y el valor que va a tener). Diseño web 13

14 Si quisiéramos añadir otro estilo (otra regla) para que los encabezados de nivel 1 tengan color verde, podríamos añadirlo a continuación (o antes) del anterior: p { color: red; font-size: 12pt; } h1 { color: green; } Veremos más adelante varios ejemplos de estilos que podemos incluir en estas llaves, divididos en categorías, pero primero vamos a ver cómo podemos aplicar estos estilos a una página HTML. Aplicar los estilos a las páginas Para aplicar un estilo (o un conjunto de estilos) a una página web, tenemos varias alternativas: Definir el estilo concreto en un elemento concreto de la página web, mediante un atributo style. Por ejemplo, si queremos que un párrafo concreto tenga el texto de color rojo, podemos poner: <p style="color: red;">párrafo de color rojo.</p> Esta opción no se aconseja mucho, a no ser que sea un caso puntual de un elemento puntual con un estilo particular, ya que de lo contrario costaría mucho revisar todo el código HTML buscando estilos si hay que hacer algún cambio. Definir el conjunto de estilos dentro del bloque head, entre una pareja de etiquetas style. Por ejemplo, para aplicar los dos estilos del ejemplo anterior (para párrafos y h1) a todos los párrafos y h1 de una página, pondríamos algo como esto en el head: <html> <head> <style> p { color: red; font-size: 12pt; } h1 { color: green; } </style> </head> Esta opción tampoco es muy recomendable si queremos aplicar el mismo estilo en diversas páginas, porque tendríamos que repetir el mismo bloque style en todas, con los consiguientes problemas de duplicidad que tendríamos si queremos hacer cualquier cambio. Definir todos los estilos en un documento CSS aparte (guardado con extensión.css) y después enlazar ese archivo con la página web, desde el head de la misma. Por ejemplo, si el archivo de estilos lo hemos llamado estilos.css y está en la misma carpeta que la página web donde aplicarlo, pondríamos algo así en el head (el atributo type es opcional): <html> <head> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head> Diseño web 14

15 Si el archivo estuviera dentro de una subcarpeta llamada estilos, la línea anterior cambiaría por esta otra (para indicar la subcarpeta): <link rel="stylesheet" type="text/css" href="estilos/estilos.css" /> Esta opción es la más recomendada, porque queda todo centralizado en el archivo CSS, y cualquier cambio que haya que hacer, se hace sobre el archivo y repercute a la vez en todas las páginas que lo enlacen. Además, de esta forma se puede dividir mejor el trabajo: una(s) persona(s) se encarga(n) del HTML, y otra(s) del CSS. Diseño web 15

16 Estilos CSS básicos de texto Veremos a continuación algunos estilos que podemos aplicar para modificar el formato del texto de una página HTML: tipos de letra, tamaños, alineaciones, colores así como alineaciones y otros efectos. Formato de carácter Las siguientes propiedades afectan a cada uno de los caracteres del elemento HTML. Sería el equivalente a ir al menú Formato > Fuente en Word, o Formato > Carácter en OpenOffice o LibreOffice. Para definir el tipo de letra utilizaremos la propiedad font-family. En ella podemos poner un tipo de fuente determinado (entre comillas dobles si tiene espacios), o varios separados por comas. En este caso, el navegador elegirá la primera de las fuentes que tenga instaladas el sistema. p { font-family: "Courier New", Arial; } Para definir el tamaño de la letra usamos la propiedad font-size, seguido del tamaño de la letra. Normalmente se expresa en puntos (pt), pero más adelante veremos que podemos utilizar otras unidades de medida. h1 { font-family: Verdana; font-size: 30pt; } Para definir el grosor de la letra (de forma diferente a poner simplemente una negrita), usamos la propiedad font-weight. Para simular un aspecto de negrita, se le da el valor de bold. Otros valores posibles son normal, bolder (aún más negrita de lo normal), lighter (más fina de lo normal), o un valor numérico (400 para normal, 700 para negrita). Por ejemplo, si queremos que los blockquotes sean un poco más gruesos de lo normal, simulando negritas, podríamos poner: blockquote { font-weight: bold; } Para definir el estilo de la letra (de forma diferente a poner simplemente una cursiva), usamos la propiedad font-style. Para simular un aspecto de cursiva, se le da el valor de italic. Otros valores posibles son normal u oblique (este último da un aspecto similar a italic). Por ejemplo, si quisiéramos que los blockquotes estuviesen en cursiva, podríamos poner: blockquote { font-style: italic; } Para definir el color de la letra se usa la propiedad color. Podemos poner un color simple en inglés (blue, red, yellow) como ejemplo. Más adelante veremos que existen otras formas de especificar muchos más colores. h2 { color: blue; } Para establecer la decoración del texto (es decir, otros efectos como subrayados, tachados, etc.), se usa la propiedad text-decoration. Si queremos hacer un efecto de subrayado, le daremos el valor underline. Si queremos un aspecto de tachado, le daremos el valor line-through. Podemos especificar otros valores, como none (ninguna decoración, valor por defecto para la mayoría de etiquetas HTML) u Diseño web 16

17 overline (subrayado por encima o sobrerrayado). Por ejemplo, si queremos poner un subrayado inferior en un h1: h1 { text-decoration: underline; } Formato de párrafo Las siguientes opciones afectan al comportamiento del elemento como conjunto: su alineación, interlineado, etc. Sería el equivalente a las opciones del menú Formato > Párrafo en editores de texto como MS Word u OpenOffice. Para modificar la alineación horizontal del elemento, usamos la propiedad textalign, que puede tomar los típicos valores de cualquier procesador de textos: left, right, center o justify. p { text-align: justify; } Para modificar la alineación vertical del elemento (y colocarlo así verticalmente dentro de otro que lo contenga) está la propiedad vertical-align, que puede valer top (arriba), bottom (abajo) o middle (enmedio), entre otros valores. Sin embargo, esta propiedad no suele funcionar muy bien en la mayoría de los casos, por ejemplo, cuando queremos centrar un texto en el medio de una caja. p { vertical-align: middle; } Para modificar la tabulación o indentación del texto (el equivalente a una sangría izquierda), usamos la propiedad text-indent, seguida de una unidad (veremos más adelante diferentes tipos de unidades). Por ejemplo, para dejar una tabulación de 2 cm: p { text-indent: 2cm; } Para establecer el interlineado (separación de las líneas dentro del mismo elemento, como por ejemplo un párrafo), se usa la propiedad line-height, seguida de una medida. Por ejemplo, para un interlineado de 1,5 líneas usaríamos algo como: Ejercicio 4 p { line-height: 1.5em; } Crea un documento HTML llamado estilostexto.html. Añádele en el head una etiqueta style con los estilos embebidos dentro. Vamos a definir los siguientes estilos: Los encabezados de primer nivel (h1) deberán tener letra Arial de 30 puntos, color rojo y subrayado. Los encabezados de nivel 2 (h2) deberán ser de letra Arial, color azul, tamaño 20 puntos. Deberán tener una alineación horizontal derecha. Los párrafos deberán ser letra "Times New Roman", tamaño 12 puntos, color gris, alineación horizontal justificada e interlineado de 1,5 líneas. En el body del documento, prueba a crear un elemento al menos de cada tipo (h1, h2 y párrafo de 3 o más líneas), para comprobar el estilo de cada cosa. Diseño web 17

18 Selectores Hemos visto que una regla CSS se compone del nombre del elemento sobre el que se aplica el estilo (el selector), y de los estilos a aplicar entre llaves. En cuanto a los selectores, pueden ser de distintos tipos, pero los más habituales son los cuatro que veremos a continuación. El selector de etiqueta El selector de etiqueta aplica el estilo a todas las etiquetas HTML de ese tipo que haya en la página (y a las subetiquetas que estén contenidas en ella). Por ejemplo, si aplicamos el color rojo a los párrafos, también serán rojas todas las negritas y cursivas que haya dentro de los párrafos. Para utilizar este selector, basta con poner el nombre de la etiqueta HTML sobre la que aplicar el estilo, como en los ejemplos que hemos visto en la introducción a CSS: p { } h1 { } Si utilizamos el selector body, estaremos definiendo estilos generales para toda la página (porque todas las demás etiquetas están contenidas dentro de body). Así, se utiliza fundamentalmente para definir tipos de letra generales (por ejemplo, que toda la página tenga fuente Arial, sea cual sea el tamaño), color o imagen de fondo de la página, etc. body { font-family: Arial; background-color: yellow; } Podemos también aplicar los mismos estilos a un conjunto de etiquetas, poniéndolas todas juntas separadas por comas en el selector y luego, en otros selectores, definir estilos particulares para alguna de ellas: h1, h2, h3 { color: blue; } h1 { font-size: 30pt; } h2 { font-size: 24pt; } h3 { font-size: 20pt; } El selector descendente El selector descendente se utiliza para aplicar un estilo a una etiqueta sólo cuando esté contenida dentro de otra. Por ejemplo, si queremos que las negritas contenidas dentro de párrafos (directa o indirectamente) sean de color verde, usaríamos este selector: p strong { color: green; } Notar que se pone primero el nombre de la etiqueta contenedora, y después, separado por espacio, el nombre de la etiqueta contenida. El selector de clase E l selector de clase es muy útil cuando no queremos aplicar un estilo a todas las etiquetas de un tipo en un documento, sino sólo a algunas de ellas. En este caso, se "marcan" esas etiquetas en el archivo HTML con un atributo class, y un nombre que queramos. Por ejemplo, si queremos que algunos párrafos de un documento tengan letra Tahoma, primero marcamos en el documento HTML esos párrafos con un atributo class y Diseño web 18

19 el nombre que queramos (por ejemplo, miestilo). Además, puede haber otros párrafos que no tengan esa clase, como en este ejemplo: <html> <body> <p class="miestilo">este párrafo es del estilo miestilo.</p> <p>este otro párrafo es normal.</p> <p class="miestilo">este párrafo también es de estilo miestilo.</p> Después, en el documento CSS añadimos el selector de clase, que tiene el nombre que le hemos dado a la clase, precedido por un punto (en nuestro ejemplo sería.miestilo).miestilo { font-family: Tahoma; } Este selector también se aplica a otros elementos de otro tipo que tengan la misma clase. Por ejemplo, si pusiéramos un h1 con la misma clase, también tendría este estilo, y por tanto letra Tahoma: <html> <body> <h1 class="miestilo">encabezado con estilo miestilo</h1> <p class="miestilo"> Si queremos evitar esto, y aplicar el estilo sólo a las clases de una cierta etiqueta, se puede anteponer el nombre de la etiqueta al del estilo en el CSS. Por ejemplo, si queremos que el estilo sólo se aplique a los párrafos con clase miestilo, ponemos: p.miestilo { font-family: Tahoma; } También podemos definir más de una clase para un elemento HTML, separando las clases por espacios dentro del atributo class: <p class="miestilo resaltado">este párrafo es</p> Así, podríamos definir un estilo.miestilo y otro estilo.resaltado, y cada uno se aplicaría a las etiquetas que lo tuvieran (las que tengan los dos, recibirán los dos estilos). El selector de "id" En un documento HTML, podemos identificar cada elemento con un identificador diferente. Esto se hace mediante un atributo id que podemos poner en cualquier etiqueta. Por ejemplo, un párrafo concreto puede tener el identificador resumen: <p id="resumen">en resumen, esta página trata de </p> No puede haber en una misma página dos elementos (aunque sean etiquetas diferentes) con el mismo identificador. Esto será útil cuando tratemos el tema de los formularios, más adelante, para identificar unívocamente cada campo, y para acceder a esos elementos desde Javascript. Una vez tenemos puesto un identificador en una etiqueta, podemos definir un estilo que sea único para ese identificador. Por ejemplo, si queremos que el párrafo resumen del Diseño web 19

20 ejemplo anterior tenga un tipo de letra diferente del resto (por ejemplo, Verdana color gris), en el CSS ponemos el nombre del identificador precedido de una almohadilla (#): #resumen { font-family: Verdana; color: gray; } Al igual que ocurría con el selector de clase, podemos anteponer el nombre de la etiqueta al nombre del id, pero como el id es único, esto no tiene mucho sentido hacerlo, salvo si aplicamos el mismo CSS en varias páginas, y en otras puede haber otros elementos con el mismo id p#resumen { font-family: Verdana; color: gray; } Ejercicio 5 Indica qué selector utilizarías para definir un estilo para cada uno de estos casos: 1. Todos los elementos de una página 2. Todos los párrafos de una página 3. Un encabezado de nivel 2 con id "especial" 4. Todas las negritas de clase "clase1" 5. Todos las cursivas contenidas en encabezados de nivel 2 Ejercicio 6 Dados los siguientes selectores: p { } p.miclase { } p.miclase { } p, #miid { } p span em { }.miclase.miclase2 { } Indica a qué textos del siguiente fragmento HTML se aplicarían: <p>blablablabla <span>blablablabla</span> blablablabla</p> <p class="miclase">blabla <span>blablabla<em>blabla</em></span> </p> <h1 class="miid">blablablabla <span class="miclase">aaaa</span> </h1> <p>blablablabla <span class="miclase">blablabla</span> blabla</p> <p class="miclase">blabla <span class="miclase2">blabla</span> </p> Diseño web 20

21 Unidades de medida y colores Ya hemos visto algunas propiedades básicas de CSS para modificar el estilo del texto. Algunas de estas propiedades hacen uso de unidades de medida (por ejemplo, para definir el tamaño de la fuente) o de colores (para definir el color del texto). Veremos ahora qué tipo de valores podemos dar en estos tipos de propiedades. Unidades de medida En CSS podemos utilizar dos tipos de unidades de medida: relativas o absolutas. Las primeras dependerán de algún factor externo (como la resolución de la pantalla, o el tamaño de fuente establecido), y las segundas no, miden siempre lo mismo independientemente de otros factores externos. Unidades de medida relativas Podemos distinguir las siguientes unidades de medida relativas: em: se utiliza para definir medidas relativas al tamaño en puntos utilizado actualmente. Por ejemplo, si el tamaño (por defecto o por CSS) es de 12 puntos y especificamos una medida de 0.7em, estaremos multiplicando la medida predefinida (los 12 puntos) por 0.7, lo que equivaldría a 8.4 puntos de tamaño real. Así, 1em equivale al 100% del tamaño por defecto. p { font-size: 0.8em; } De esta forma, partiendo de una medida base, se pueden definir todas las demás medidas relativas a ésa, y todo se escala en proporción. px: se utiliza para definir medidas en píxeles. Es una medida relativa porque su tamaño dependerá de la resolución del monitor. p { font-size: 15px; } También podemos utilizar porcentajes, de forma que el elemento afectado tomará ese porcentaje de su tamaño máximo permitido. Unidades de medida absolutas Las unidades de medida absolutas que podemos emplear son c m (centímetros), mm (milímetros) y pt (para dar medidas en puntos, normalmente para fuentes). p { font-size: 12pt; } Ejercicio 7 Crea un documento HTML llamado tamanosem.html. Dentro, embebido en el head con una etiqueta style, define estos estilos: Todo el documento (body) tendrá un tamaño de letra de 20 puntos. Un selector de clase llamado pequeno que ponga el tamaño de letra a 0.8em Otro selector de clase llamado normal que deje el tamaño predefinido (1em) Otro selector de clase llamado grande que ponga el tamaño de letra en 1.2em Diseño web 21

22 Los tres estilos deben aplicarse a tres párrafos diferentes en el documento, para ver cómo cambia el tamaño de letra en cada uno de ellos. Añade también un h1 para ver qué tamaño toma. Colores Podemos indicar una propiedad de color (como por ejemplo, la propiedad color para el color del texto) de diferentes formas: Utilizando alguno de los colores predefinidos que admite CSS. Se trata de colores simples, con el nombre en inglés: black, white, yellow, blue, red p { color: blue; } Utilizando la codificación RGB en decimal del color. Todos los colores se pueden descomponer en una combinación de los colores primarios, que en informática son el rojo (Red), el verde (Green) y el azul (Blue). Cualquier color se puede expresar como una combinación de valores de estos tres, y estos valores van desde el 0 (nada de ese color) hasta el 255 (todo ese color). Por ejemplo, el mismo color rojo se puede expresar como (255, 0, 0). El morado (rojo + azul) se puede expresar como (255, 0, 255). El blanco (unión de todos los colores) sería (255, 255, 255), y el negro (ausencia de color) sería (0, 0, 0). Para indicar un color con este formato, se pone la palabra rgb, seguida de los tres valores numéricos entre paréntesis, separados por comas. Así, el ejemplo anterior se podría poner también como: p { color: rgb(0, 0, 255); } Utilizando la codificación RGB en hexadecimal del color. Sigue la misma filosofía que el caso anterior, pero en este caso, en lugar de dar valores de 0 a 255 para cada color primario, se dan los valores en formato hexadecimal (desde el 00 hasta FF, que equivaldría al 255 decimal). Este formato, a pesar de que puede parecer el más enrevesado, es en realidad el que más se utiliza, porque cada color se representa así con 6 dígitos hexadecimales, precedidos por una almohadilla, lo que hace fácil identificar los colores en la hoja de estilos. Así, el negro se representaría por #000000, el blanco por #FFFFFF, y el rojo por #FF0000. El ejemplo anterior quedaría así: Ejercicio 8 p { color: #0000FF; } Podemos encontrar en Internet diversas páginas con códigos de color, de forma que haciendo clic en el color que queramos, nos aparecerá el código hexadecimal que debemos añadir a la CSS. Crea un documento HTML llamado colorescss.html. Dentro, embebido en el head, añade una etiqueta style para definir tres estilos con selector de clase: uno llamado amarillo para definir un color de texto amarillo, otro llamado rojo para definir un color de texto rojo, y otro llamado verde para definir un color de texto verde. Utiliza para ello formato RGB hexadecimal. Después, añade tres párrafos al documento, cada uno con un estilo (y por tanto, un color) diferente. Diseño web 22

23 Los divisores HTML Vamos a ver ahora una etiqueta que ha resultado ser tremendamente útil desde HTML 4, a pesar de que al principio no se utilizara mucho. Se trata de la etiqueta div. Se utiliza para definir una región, y dividir así el documento en regiones diferentes. Por ejemplo, si queremos tener dos regiones diferentes en un documento, podríamos utilizar una tabla con dos celdas, como veremos en otra sección, o como haríamos en Word. Sin embargo, el uso de tablas para estructurar la información está desaconsejado u obsoleto en HTML, ya que son un mecanismo demasiado rígido para organizar el texto en la página. Qué pasaría si cambiamos la anchura de la ventana? La tabla seguiría intentando ocupar su espacio, y los textos en las casillas se irían acortando y yendo hacia abajo. Para solucionar este problema, y facilitar un diseño más responsive (sensible a los cambios de tamaño de la pantalla), se utilizan los divisores. Así, para crear dos regiones diferentes en una página, podríamos tener un código como éste: <html> <body> <div>una región</div> <div>otra región</div> </body> </html> Si probamos esto en una página y lo visualizamos en el navegador, lo que tendremos será algo como esto: Una región Otra región Es decir, el efecto por ahora es similar a si hubiéramos utilizado dos párrafos. Pero la ventaja de estos divisores es que, con CSS, tenemos muchísimas posibilidades para colocar y dar tamaño a estas dos regiones, como veremos al hablar del modelo de cajas CSS a continuación. Diseño web 23

24 El modelo de cajas en CSS El modelo de cajas en CSS es uno de los aspectos más complicados de dominar, pero que más versatilidad puede dar a nuestras webs. Este modelo se basa en que cada elemento de un documento HTML (cada párrafo, cada h1, cada div, etc.) tiene una caja, un rectángulo que lo engloba y lo separa del resto. Encabezado 1 Párrafo con su contenido. Párrafo con su contenido. Párrafo con su contenido. Párrafo con su contenido. Párrafo con su contenido. Párrafo con su contenido. Párrafo con su contenido. Párrafo con su contenido. Encabezado 2 Otro párrafo. Así, CSS permite definir las características de cada una de estas cajas (altura, anchura, posición, color). Para ello, hemos de tener en cuenta que cada caja se compone de 7 elementos: El contenido HTML que tenga El borde, una línea (visible o no) que encierra al contenido El relleno o padding, que es el espacio entre el contenido y el borde El margen (margin), que es el espacio entre la caja y otras cajas adyacentes. La imagen de fondo (background-image), si hubiera alguna El color de fondo (background-color), si hubiera alguno, y que siempre quedará por debajo de la imagen de fondo El tamaño de la caja (anchura y altura) borde contenido Esto es una región del documento Esto es otra región del documento padding color de fondo margen Propiedades CSS de las cajas Cada característica de las cajas tiene unas propiedades en CSS para poderse configurar: Para el margen, podemos usar la propiedad margin y definir separados por espacios los márgenes de los 4 lados (en el orden arriba, derecha, abajo, Diseño web 24

25 izquierda), o usar las propiedades margin-top, margin-right, margin-bottom y margin-left y definir cada margen por separado. Estas 2 reglas son equivalentes: p { margin: 0 10px 0 20px; } p { margin-right: 10px; margin-left: 20px; } Si en la propiedad margin usamos un solo valor, los 4 márgenes toman ese mismo valor. Si usamos dos valores, el primero se aplica arriba y abajo, y el segundo a izquierda y derecha. Si usamos tres valores, el primero es para arriba, el segundo para izquierda y derecha, y el tercero para abajo. Para el relleno (padding), tenemos propiedades similares al caso del margen: una propiedad global que se llama padding, y cuatro propiedades para cada uno de los lados: padding-top, padding-right, padding-bottom y padding-left, que se utilizan de la misma forma que las que hemos visto para el margen. Para el borde, podemos modificar tres propiedades del mismo: su estilo (simple, doble, punteado, etc.), su color y su grosor. Para ello, tenemos las propiedades border-style, border-color y border-width, respectivamente. Entre los estilos más utilizados está el simple continuo (solid), el doble (double), el punteado (dotted) o ninguno (none, valor por defecto). Por ejemplo, para un borde de un h1 de color rojo y trazo doble, con grosor de 5 píxeles, pondríamos: h1 { border-style: double; border-color: red; border-width: 5px; } Podemos definir estilos de borde para cada lado, colocando el lado en medio de la propiedad. Por ejemplo, para modificar el color del borde inferior, pondríamos border-bottom-color, y para cambiar el grosor del borde derecho, pondríamos border-right-width. Así, el siguiente ejemplo establece un borde inferior y derecho simple, de color azul y 2 píxeles de grosor: h1 { border-bottom-style: solid; border-right-style: solid; border-bottom-color: blue; border-right-color: blue; border-bottom-width: 2px; border-right-width: 2px; } También podemos usar las propiedades border-top, border-bottom, border-left y/o border-right (e incluso la propiedad border a secas) y definirles sus tres propiedades (estilo, grosor y color) separadas por espacios: h1 { border-bottom: solid 2px blue; } Para el color de fondo, tenemos la propiedad background-color. El color se especifica igual que en la propiedad color. Por ejemplo: p { background-color: #FF2233; } Para la imagen de fondo, tenemos la propiedad background-image, a la que debemos decirle la ruta (normalmente relativa a la carpeta de la aplicación web) donde está la imagen a utilizar, precedida de la función url, y entre paréntesis y comillas dobles. h1 { background-image: url("imagenes/fondo.png"); } Si la imagen no es lo suficientemente grande, podemos indicar que ésta se repita vertical y/o horizontalmente, añadiendo la propiedad background-repeat, que puede valer repeat-x (repetir horizontalmente), repeat-y (repetir verticalmente), repeat (repetir en todas direcciones) o no-repeat (no repetir, valor por defecto) h1 { background-image: url("imagenes/fondo.png"); Diseño web 25

26 background-repeat: repeat-x; } Finalmente, podemos cambiar el tamaño de la caja modificando sus dimensiones (anchura y altura) con las propiedades width y height, utilizando el tipo de medida que queramos (normalmente, porcentajes o píxeles). Ejercicio 9 h1 { width: 70%; height: 50px; } También existen las propiedades max-width, min-width, max-height y min-height para establecer unos rangos de anchura y altura variables. Crea un documento llamado cajascss.html que tenga embebida una etiqueta style con un selector de clase llamado caja, que defina los siguientes estilos para una caja: Margen izquierdo y derecho del 20%, superior de 30 píxeles e inferior de 0 Relleno (padding) de 10 píxeles a cada lado Borde superior rojo de 4 píxeles de grosor, derecho azul de 6 píxeles e inferior verde de 2 píxeles, todos con estilo sólido. Color de fondo amarillo Finalmente, crea un párrafo (más o menos largo, de unas 3 o 4 líneas al menos) y aplícale este estilo. Posicionamiento de las cajas A la hora de colocar cada una de las cajas (elementos HTML) en la página, el navegador sigue una serie de pautas, según las características de cada caja y el estilo que tenga configurado en el CSS. Existen diferentes tipos de posicionamiento: Normal: el que utiliza el navegador por defecto, si no se le indica lo contrario en el CSS. Depende de las características de cada caja (si es un elemento en línea o de bloque, si su tamaño permite tener otro elemento al lado, el posicionamiento que tiene el elemento que lo contiene, etc.) Relativo: se desplaza la caja respecto a lo que sería su posicionamiento normal Absoluto: la caja se sitúa en una posición absoluta respecto de su elemento contenedor Fijo: la caja se sitúa en una posición fija en pantalla, independientemente de si el usuario sube o baja la página. Flotante: la caja se sitúa todo lo posible a la izquierda o derecha, dentro de la línea horizontal en que se encuentra. El tipo de posicionamiento se establece con la propiedad position, que puede valer cualquiera de los tipos anteriores, salvo el flotante: static (normal), relative, absolute o fixed. Por ejemplo, la siguiente caja tiene un posicionamiento relativo 20 píxeles por debajo y 10 píxeles más a la derecha de su posicionamiento normal: div { position: relative; top: 20px; left: 10px } En el caso del posicionamiento flotante, se especifica con la propiedad float, que puede valer left, right o none. Diseño web 26

27 Si no existe ningún tipo de posicionamiento flotante, las cajas (los elementos de bloque, como h1, p, div, etc.) se posicionan uno debajo del otro Si algún elemento tiene posicionamiento flotante a izquierda o derecha, queda alineado a la izquierda o derecha de la línea que ocupa. Si son varios los que tienen ese mismo posicionamiento, quedan colocados uno junto a otro, hasta completar la línea (se continúa en la siguiente línea si no hay más espacio). Veamos algunos ejemplos: 1 2 En este primer caso, las cajas 1 y 2 no tienen ningún tipo de posicionamiento flotante, así que se colocan una debajo de la otra. Las cajas pueden ser cualquier elemento de bloque (h1, párrafos, div, blockquote) 1 2 En este caso, la caja 2 tiene un posicionamiento flotante a la derecha. La caja 1 puede tener un posicionamiento flotante a la izquierda, o ninguno (es indiferente). 2 En este caso, la caja 2 tiene un posicionamiento flotante a la izquierda, y la caja 1 no tiene posicionamiento, con lo que queda por detrás de la caja 2 (tapada). 1 2 En este último caso, ambas cajas tienen un posicionamiento flotante a la derecha. El orden en que las pongamos en la página HTML será el orden en que aparezcan en el navegador (en este caso, se habría puesto primero la caja 2 y luego la 1). En el caso de que necesitemos que una caja quede pegada al borde izquierdo o derecho y que ninguna caja le "moleste" para colocarse allí, podemos limpiar la línea con la propiedad clear, que puede valer left, right o both, dependiendo de a qué lado queramos ajustar las cajas. Por ejemplo, en el siguiente caso, si queremos que la caja 3 quede ajustada al margen izquierdo, le pondríamos en su estilo:.caja1 { float: left; }.caja2 { float: left; }.caja3 { float: left; clear:left } Diseño web 27

28 1 2 3 Ejercicio 10 Crea un documento HTML llamado cajas.html. Dentro, crea tres cajas (tres div) y, con el estilo embebido en una etiqueta style, haz que: La primera caja tenga color de fondo azul, borde gris continuo de 2 píxeles de grosor por todo el contorno y margen derecho e inferior de 10 píxeles. Debe tener una anchura (width) del 50% y una altura (height) de 100 píxeles. La segunda caja tenga color de fondo amarillo claro, sin borde. Debe tener una anchura del 20% y una altura de 50 píxeles. La tercera caja debe tener color de fondo rojo claro, con borde negro doble de 1 píxel de grosor. Debe tener una anchura del 20% y una altura de 50 píxeles. Las tres cajas deben tener un posicionamiento flotante a la izquierda, pero la tercera debe tener una propiedad clear para estar alineada con el margen izquierdo. Al final, debe quedarte algo parecido a esto (aunque con otras proporciones seguramente): Prueba a cambiar el tamaño de la ventana para comprobar cómo se ajusta la anchura de las cajas al nuevo tamaño. Diseño web 28

29 Otros elementos HTML Ahora que ya sabemos un poco de HTML y de CSS, vamos a profundizar un poco más en lo primero, y conocer algunas etiquetas más para construir contenidos más variados. En este apartado vamos a aprender a crear diferentes tipos de listas, a colocar imágenes en páginas web, a crear tablas y, algo muy importante, poner enlaces en páginas web para ir a otras páginas o recursos. Listas En HTML podemos crear tres tipos de listas: Numeradas u ordenadas. Van encerradas entre una pareja de etiquetas ol. Cada elemento de la lista va entre una pareja de etiquetas li. Por ejemplo: <html> <body> <p>clasificación de liga:</p> <ol> <li>at. Madrid</li> <li>barcelona</li> <li>real Madrid</li> </ol> que se vería más o menos así: Clasificación de liga: 1. At. Madrid 2. Barcelona 3. Real Madrid Sin numerar. Van encerradas entre una pareja de etiquetas ul, y dentro se tienen etiquetas li para cada elemento de la lista, como en el caso anterior. Ejemplo: <html> <body> <p>reparto de actores:</p> <ul> <li>mark Ruffalo</li> <li>scarlett Johanson</li> <li>matt Damon</li> </ul> que se vería más o menos así: Reparto de actores Mark Ruffalo Diseño web 29

30 Scarlett Johanson Matt Damon Listas de deficiones. Van encerradas entre un par de etiquetas dl, y están formadas por pares de elementos: un término (encerrado entre un par de etiquetas dt) y su definición (encerrado entre un par de etiquetas dd). Se utilizan para hacer listas a modo de diccionarios, con palabras y sus definiciones o traducciones. Por ejemplo: <html> <body> <p>vocabulario en inglés:</p> <dl> <dt>stylesheet</dt> <dd>hoja de estilo</dd> <dt>markup</dt> <dd>marcado, etiquetado</dd> </dl> que se vería más o menos así: Vocabulario en inglés: Stylesheet Hoja de estilo Markup Marcado, etiquetado En ocasiones nos puede interesar hacer listas algo más complejas. HTML permite anidar listas dentro de otras, sean del tipo que sean. Basta con empezar una lista a continuación de un elemento de la lista contenedora. Por ejemplo: <html> <body> <p>listado de planetas:</p> <ul> <li>interiores:</li> <ol> <li>mercurio</li> <li>venus</li> <li>tierra</li> <li>marte</li> </ol> <li>exteriores:</li> <ol> <li>júpiter</li> <li>saturno</li> <li>urano</li> <li>neptuno</li> </ol> </ul> Diseño web 30

31 que se vería más o menos así: Listado de planetas: Interiores: 1. Mercurio 2. Venus 3. Tierra 4. Marte Exteriores: 1. Júpiter 2. Saturno 3. Urano 4. Neptuno Ejercicio 11 Crea una página llamada listas.html que tenga el siguiente contenido: Diseño web 31

32 Vemos que hay tres tipos de listas: ordenada, sin ordenar y múltiple. Cada una de ellas va precedida por un encabezado de nivel 1 (h1). Ponle como título (title) a la página el texto "Practicar con listas". Ejercicio 12 Crea una página llamada prehistoria.html, que tenga el siguiente contenido: El título (title) de la página debe ser "Prehistoria", con codificación ISO o UTF 8 como en otros ejercicios. El encabezado principal ("El concepto de Prehistoria y su periodización") es un h1, seguido de un párrafo explicativo (cuidado con las negritas). Después viene un h2 con otro encabezado (" Cómo podemos"), seguido de una línea horizontal, y después una lista con dos niveles. Enlaces Los enlaces (también llamados hipervínculos, hiperenlaces o links) son quizá el elemento más importante de las páginas web, ya que permiten "saltar" de una página a otra, haciendo clic en ellos. Otro elemento que nos permite cambiar de página son los formularios, cuando los rellenamos o pulsamos alguno de sus botones, pero eso no son enlaces. Los enlaces existen en casi cualquier página web. Por ejemplo, si hacemos una búsqueda en Google, al hacer clic en alguno de los resultados que nos ofrece, estamos haciendo clic en un enlace. Diseño web 32

33 A la hora de colocar un enlace en una página, tenemos que distinguir dos elementos: El texto (o imagen) sobre el que pinchamos en la página HTML, y que puede ser el que nosotros queramos. L a URL (dirección web) a la que queremos ir al pinchar en ese enlace. Esta dirección deberá ser la correcta de la página que queremos visitar. Para añadir enlaces en un documento HTML se utiliza la pareja de etiquetas a. Tienen un único atributo obligatorio, llamado href, que será la URL de la página a la que queremos ir. El texto (o la imagen) que queramos poner para hacer clic sobre él, deberá ir entre el par de etiquetas a. Veamos un ejemplo: <p>ir a la <a href=" de la Universidad de Alicante</a>.</p> que se vería así: Ir a la web de la Universidad de Alicante. Otros atributos útiles La etiqueta a admite, además de href, otros atributos que pueden sernos útiles. Vamos a destacar dos de ellos: El atributo title, que sirve para que, cuando pasemos el ratón por encima del enlace (sin hacer clic en él), nos aparezca un recuadro explicativo sobre dónde vamos a ir con ese enlace. El texto del recuadro será el que pongamos en este atributo title. El atributo target, que sirve para indicar dónde queremos abrir el enlace. Si no ponemos este atributo, el enlace se abrirá en la misma ventana de la página que tenemos actualmente. Pero podemos darle otros valores, como por ejemplo "_blank", para que se abra en una ventana nueva. El siguiente ejemplo modifica el enlace anterior, añadiéndole un title y haciendo que se abra en una ventana nueva: <p>ir a la <a href=" title="ir a la web de la UA" target="_blank">web de la Universidad de Alicante</a>.</p> Rutas relativas y absolutas Cuando queremos ir a una URL de una web diferente a la nuestra, ponemos la dirección completa (como el caso del ejemplo anterior). Pero si queremos saltar a otra página de nuestra misma web, podemos indicar en el atributo href una ruta relativa o absoluta a la página donde estamos. Por ejemplo, si tenemos una aplicación web de varias páginas, repartidas en carpetas y subcarpetas, como en este ejemplo: MiWeb pagina1.html pagina2.html otros pagina3.html Diseño web 33

34 Supongamos que estamos editando la pagina1.html. Si quisiéramos poner un enlace para ir a la pagina2.html, podríamos hacerlo de dos formas: Como una ruta relativa desde la carpeta donde está la pagina1 que estamos editando. En este caso, como ambas páginas están en la misma carpeta, el enlace sería algo así: <a href="pagina2.html">ir a página 2</a> Como una ruta absoluta a la raíz de la aplicación. Como la pagina2 está en la carpeta raíz de la aplicación MiWeb, el enlace quedaría así: <a href="/pagina2.html">ir a página 2</a> En cambio, si desde pagina1 quisiéramos poner un enlace a pagina3.html, los enlaces relativo y absoluto quedarían, respectivamente: <a href="otros/pagina3.html">ir a página 3</a> <a href="/otros/pagina3.html">ir a página 3</a> En el caso contrario (un enlace en la pagina3 para ir a pagina1), los enlaces relativo y absoluto, respectivamente, serían así: <a href="../pagina1.html">ir a página 1</a> <a href="/pagina1.html">ir a página 1</a> En general, ambos tipos de rutas son equivalentes, aunque las rutas absolutas pueden darnos problemas en servidores de pruebas, ya que la raíz de la aplicación web no suele coincidir con la raíz del servidor (el servidor suele tener la raíz en /localhost/ y la aplicación web en una subcarpeta dentro de ésta, por ejemplo /localhost/miweb/), y al poner la barra "/" en la ruta absoluta los servidores interpretan la raíz del servidor. Ejercicio 13 Crea un documento HTML llamado institutos.html. Dentro, genera una lista (no ordenada) con el nombre de al menos 4 o 5 institutos de Ciclos Formativos o Secundaria que conozcas, y pon un enlace en cada uno que vaya a su correspondiente página web, haciendo que se abran en una ventana nueva (distinta a la actual con el listado). Puntos de anclaje y enlaces internos Además de poder enlazar con otras páginas y otras webs, los enlaces también permiten saltar a otras zonas dentro de una misma página. Para ello, debemos seguir dos pasos: 1. Ir a la zona a la que queremos saltar, y definir un punto de anclaje (en inglés, anchor). Para ello, usamos la misma etiqueta a de los enlaces, pero en este caso le pondremos un atributo name con el nombre que queramos (siempre que no se repitan en la misma página). Por ejemplo: <body> <a name="introduccion"></a> <h1>introducción</h1> <p>blablablabla</p> 2. Luego, vamos donde queramos poner el enlace, y utilizamos la misma etiqueta a de los enlaces. En el atributo href pondremos, en lugar de un nombre de archivo o una URL, el nombre del anclaje que hemos usado antes, precedido de una Diseño web 34

35 almohadilla "#". Para el ejemplo anterior, podríamos ir al principio de la página y poner un enlace como este: <body> <a href="#introduccion">introducción</a> <a name="introduccion"></a> <h1>introducción</h1> Ejercicio 14 Crea una página llamada harrypotter.html con la siguiente estructura: Título (title): Harry Potter Introducción (encabezado nivel 1) Un pequeño párrafo o dos que digan de qué va la saga Episodios (encabezado nivel 1) Harry Potter y la piedra filosofal (nivel 2) Harry Potter y la cámara secreta (nivel 2) Harry Potter y el prisionero de Azkaban (nivel 2) Harry Potter y el cáliz de fuego (nivel 2) Harry Potter y la orden del Fénix (nivel 2) Harry Potter y el misterio del Príncipe (nivel 2) Harry Potter y las reliquias de la muerte (nivel 2) Dentro de cada apartado de nivel 2, añade 1 o 2 párrafos que cuenten de qué va el episodio Resumen de personajes (encabezado nivel 1) Dentro tendrá una lista no numerada con los nombres de 5 de los actores y, entre paréntesis, a qué personaje interpretan Pon anclajes en cada encabezado (de nivel 1 y 2) y al principio de todo un índice de enlaces que permitan, pinchándolos, ir a cada apartado de la página. Al final, deberá quedarte algo como esto: Diseño web 35

36 Tablas Las tablas son un elemento muy útil en los procesadores de texto porque permiten estructurar la información en la página de diferentes formas, simulando columnas, o permitiendo textos a diferentes niveles o en diferentes orientaciones. Hasta hace no mucho, también se utilizaban con mucha frecuencia en las páginas web para estructurar de esta misma forma el contenido, pero la W3C las desaconseja o las considera obsoletas, porque hacen que el diseño de la página sea muy rígido (una tabla no va a cambiar su disposición para poderse ver mejor en un móvil, por ejemplo), y dificultan la lectura por los lectores de pantalla. En cualquier caso, veremos brevemente cómo se crean tablas en HTML, tanto por si nos es necesario crearlas en algún momento, como para saberlas identificar en cualquier página web que estemos manipulando. El contenido de una tabla va entre la pareja de etiquetas table. Dentro, distinguimos dos elementos: Cada fila de la tabla, se marca con un par de etiquetas tr. Cada celda dentro de esa fila, se marca con un par de etiquetas td. El contenido de esa celda será lo que pongamos entre ese par de etiquetas td, y puede ser cualquier cosa (texto llano, párrafos, listas, imágenes, otra tabla). La primera fila de la tabla, opcionalmente, se puede marcar con etiquetas th en lugar de td, para indicar que es la cabecera de la tabla (y así poderle poner un estilo diferente). Veamos un ejemplo: Diseño web 36

37 <table> <tr> </tr> <tr> </tr> </table> <td>fila 1, Columna 1</td> <td>fila 1, Columna 2</td> <td>fila 2, Columna 1</td> <td>fila 2, Columna 2</td> Esto se vería más o menos así en el navegador: Atributos de las tablas Fila 1, Columna 1 Fila 1, Columna 2 Fila 2, Columna 1 Fila 2, Columna 2 Las etiquetas que usamos para construir tablas (table, tr, td) admiten una serie de atributos para añadir algunas propiedades. Así, la etiqueta table admite los siguientes atributos: border: grosor del borde. Si no queremos tener borde, pondríamos un borde de 0. width: anchura de la tabla (en píxeles o en porcentaje sobre la anchura máxima) cellspacing: margen entre el interior del borde de cada casilla y el contenido summary: resumen del contenido de la tabla, útil para lectores de pantalla. Por su parte, los elementos tr y td admiten estos atributos: align: alineación horizontal del texto. Puede valer left, right o center. valign: alineación vertical del texto. Puede valer top, bottom o middle. rowspan: sólo para etiquetas td, expande la celda X filas más hacia abajo colspan: sólo para etiquetas td, expande la celda X celdas más hacia la derecha width: se puede utilizar en etiquetas td para indicar la anchura específica de esa columna (en píxeles o porcentaje), aunque el W3C recomienda usar CSS. Veamos todo esto en un ejemplo: <table width="100%" border="1"> <tr> <td rowspan="2" valign="middle" style="width:50%">uno</td> <td>dos</td> <td>tres</td> <td>cuatro</tr> </tr> <tr> <td>cinco</td> <td colspan="2" align="right">seis</td> </tr> </table> Esto se vería más o menos así en el navegador: Diseño web 37

38 Uno Dos Tres Cuatro Cinco Seis Ejercicio 15 Crea una página llamada tablas.html. En ella deberás crear dos tablas: Una sin bordes, con un encabezado de 4 columnas (th): Nombre y apellidos, E- mail, Dirección, Teléfono, y después 4 filas con esos datos rellenos para 4 personas que conozcas o te inventes. Otra tabla con borde de grosor 1 y anchura del 50%, donde la primera fila tenga 3 columnas combinadas y el texto en negrita "Trilogías". Después, habrá información sobre trilogías de cine. Para cada una, añadiremos una fila con las 3 columnas combinadas y el título de la trilogía (El Señor de los Anillos, El Hobbit, Matrix, etc), y después otra fila con los títulos de las 3 películas de la trilogía Imágenes En un procesador de textos al estilo de Word u OpenOffice, para colocar una imagen que nos guste, basta con copiarla y pegarla en el documento, si no la tenemos disponible en alguna carpeta de nuestro ordenador. Pero para añadir imágenes en documentos web, debemos tenerlas localizadas en la misma carpeta (o una subcarpeta) de nuestra web. Si son pocas imágenes, podemos tenerlo todo junto en una misma carpeta, pero si la aplicación web es grande, o hay varias imágenes, lo más normal es crear una carpeta llamada imagenes o imgs, y dejar dentro las imágenes que necesitemos. Una vez tengamos ya guardada la imagen que queremos poner, usaremos la etiqueta img para colocarla en la página HTML. Esta etiqueta tiene un único atributo obligatorio, llamado src, que funciona igual que el atributo href visto para los enlaces: debemos indicar la ruta (absoluta o relativa) hacia la imagen que queremos añadir. También Diseño web 38

39 podemos poner una URL hacia una imagen de otra página, pero corremos el riesgo de que la imagen deje de verse si la página cierra o está caída. Por ejemplo, si queremos añadir la imagen foto.png que está dentro de la subcarpeta imgs, podríamos añadirla con algo como: <img src="imgs/foto.png" /> Observa que la etiqueta img es una etiqueta que no tiene pareja. Ella sola se abre y cierra. Dentro, además del atributo src, podemos tener otros atributos opcionales: width: especifica la anchura que queremos que tenga la imagen. Se la podemos dar en píxeles o en porcentaje. Lo mejor siempre es no tener que usar este atributo, y redimensionar la imagen al tamaño que queramos, para que ocupe menos espacio y cargue más rápido en la página. height: especifica la altura que queremos que tenga la imagen (normalmente en píxeles). Si no ponemos nada, se redimensiona según la anchura que hayamos puesto. Al igual que en el caso anterior, lo mejor es no tener que definir estos parámetros en la etiqueta img, sino redimensionar la imagen directamente al tamaño que queramos. alt: es un texto alternativo que mostrar en el caso de que el navegador no pueda cargar la imagen, o ésta tarde en cargar. Al pasar el ratón por encima de la imagen, se mostrará este texto alternativo. Para según qué versiones de HTML o XHTML, este atributo también es obligatorio (de lo contrario, la página no será correcta). Icono de la aplicación web Últimamente se está poniendo cada vez más de moda que las aplicaciones (tanto en móviles como en ordenadores e incluso las aplicaciones web) tengan su propio icono que las identifique. De hecho, en muchas webs, cuando cargamos la página, aparece su icono en la barra de direcciones, o en la pestaña del navegador donde hemos abierto la web (dependiendo del navegador). Cómo conseguimos esto? En primer lugar, como cualquier otra imagen, tendremos que tener el icono localizado en alguna carpeta o subcarpeta de nuestra web. Normalmente los iconos tienen extensión.ico o.png, y en el caso del icono de la web, se le suele llamar favicon (por lo que el archivo entero suele llamarse favicon.ico o favicon.png). El icono suele tener unas dimensiones de 16x16 o 32x32 píxeles. Una vez tengamos el icono localizado, deberemos añadir la siguiente línea en el head de la(s) página(s) web donde queramos añadir el icono: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> Existen algunas variantes. Por ejemplo, si el icono cumple los estándares de tamaño, podemos poner rel="icon" y type="image/png" (en el caso de que sea un archivo PNG). También para algunos navegadores es suficiente con dejar un archivo llamado favicon.ico en la raíz de nuestra aplicación web, y lo detectan automáticamente. Ejercicio 16 Modifica el ejercicio de Harry Potter que hemos hecho al hablar de enlaces, y haz los siguientes cambios: Diseño web 39

40 Haz que aparezca la portada de cada película justo tras su título. Busca las portadas en Internet y cópialas en una subcarpeta imgs dentro del ejercicio. Las imágenes deben aparecer centradas, entre el título de la película y su resumen, sin texto a los lados. Utiliza el CSS que consideres para ello. Opcionalmente, añade también una foto de cada personaje de la lista del resumen de personajes, a tamaño 100x100, junto al nombre del personaje. Ejercicio 17 Crea una página llamada biografia.html. Vas a crear en ella la biografía de un personaje famoso (el que quieras), de forma que te quede algo como esto: Como ves, deberás crear una tabla, de borde 1, con una columna y dos filas. En la primera fila, centrada, deberá aparecer la imagen del personaje que hayas elegido, a tamaño 300 x 400. En la segunda fila, deberán aparecer al menos un par de párrafos que cuenten algo de su vida. Además, la página debe tener como título (title) el texto "Biografía de XXXXX", siendo XXXXX el nombre del personaje que hayas elegido. Antes de la tabla, debe haber un encabezado de primer nivel (h1) con el nombre de ese personaje. Elementos de bloque y en línea Ahora que ya conocemos unas cuantas etiquetas HTML (h1, p, ul, img), vamos a hablar de un concepto relacionado con todas ellas, y que hemos mencionado con anterioridad en este libro, sin entrar en detalles. Todas estas etiquetas o elementos HTML que estamos aprendiendo se dividen en dos grupos: Los elementos de bloque, que son etiquetas que, por defecto, constituyen un bloque separado verticalmente de los demás. Es el caso de muchas etiquetas, Diseño web 40

41 como h1, p, div Cuando ponemos una de estas etiquetas, el contenido que va justo antes y justo después de ellas toma un punto y aparte, es decir, hay una separación vertical entre estos elementos y los que les rodean. Los elementos en línea, que son etiquetas que, por defecto, se muestran adyacentes unas de otras, sin separación vertical. Es el caso, por ejemplo, de etiquetas como strong, em, o los enlaces. Cuando ponemos algo en negrita, no se pasa automáticamente a la siguiente línea para mostrarlo, sino que va todo seguido en la misma línea donde estaba. Estas propiedades de las etiquetas, como veremos, se pueden modificar desde CSS, pero conviene hacernos una idea de que existen estos dos tipos de elementos para entender mejor cómo se colocan en el navegador las cosas cuando visualizamos una página web. Diseño web 41

42 Otras opciones de CSS Veremos ahora algunas propiedades más que podemos añadir en las reglas CSS para cambiar el estilo de los elementos. Visibilidad Podemos modificar la forma en que se muestran los elementos en las páginas con la propiedad display, que puede tomar, entre otros, los siguientes valores: none: sirve para eliminar el elemento, y que los demás ocupen su lugar. Aparentemente, esta opción no tiene ninguna utilidad. Para qué vamos a poner un elemento en la página si luego no queremos mostrarlo? De momento es una opción inútil, pero más adelante veremos que, combinado con Javascript, puede ser una utilidad muy potente para dar funcionalidad a la web. block: sirve para mostrar el elemento como si fuera un elemento de bloque inline: sirve para mostrar el elemento como si fuera un elemento en línea Por ejemplo, si queremos que un párrafo de clase "linea" deje de ser un elemento en bloque, y se muestre como un elemento en línea, pondríamos: p.linea { display: inline; } Así, si tenemos una página HTML como ésta: <html> <body> <p>un párrafo normal.</p> <p class="linea">un párrafo en línea.</p> <p class="linea">otro párrafo en línea.</p> En el navegador se vería: Un párrafo normal. Un párrafo en línea. Otro párrafo en línea Notar como el primer párrafo, al ser normal, tiene su punto y aparte, pero los otros dos no se separan entre sí, al mostrarse como elementos en línea. Estilos para enlaces Los enlaces son un elemento muy potente en una página web, pero su estilo es difícil de controlar. De hecho, nada más poner el enlace, se nos verá de color azul en la página, y cuando hagamos clic sobre él, el resto de veces aparecerá de color morado, indicando que es un enlace que ya hemos visitado antes. Imaginemos que queremos hacer una página web con el color de fondo azul. Qué pasaría con los enlaces? Apenas se verían. O incluso si usamos otros colores, puede que el color de los enlaces desentone con lo que hay alrededor. Diseño web 42

43 Para cambiar el estilo de los enlaces mediante CSS, es algo más complicado que para un elemento normal (como un párrafo, por ejemplo), ya que los enlaces tienen diferentes estados, y debemos cambiar el estilo para cada uno de esos estados. El estilo para el estado normal de un enlace se cambia con el selector a:link (al igual que para cambiar el estilo de los párrafos usamos el selector p). Por ejemplo, si queremos poner el texto del enlace de color blanco: a:link { color: white } Pero si hacemos clic en el enlace, como ya pasará a ser un enlace visitado, la próxima vez que carguemos la página ya no aparecerá blanco, sino morado (color por defecto para enlaces visitados). Para el estilo para enlaces visitados, usamos el selector a:visited: a:visited { color: white } Adicionalmente, el enlace tiene dos estados más sobre los que podemos actuar: cuando pasamos el ratón por encima del enlace, sin pincharlo (se accede con el selector a:hover) y cuando hacemos clic en el enlace (se accede con el selector a:active). Por ejemplo, si queremos que, en cualquier estado, los enlaces se muestren de color blanco, tendríamos que añadir estas cuatro reglas a nuestro CSS (en realidad bastaría con las dos primeras, si no queremos hacer nada al usar el ratón en los enlaces): a:link { color: white } a:visited { color: white } a:hover { color: white } a:active { color: white } o bien una sola regla conjunta: a:link, a:visited, a:hover, a:active { color: white } aunque la primera opción es más versátil si luego queremos añadir alguna opción extra en algún estado (por ejemplo, cambiar el tamaño de la letra al pasar el ratón por encima). También podemos, entre otras cosas, actuar sobre el subrayado que hay en los enlaces, con la propiedad text-decoration. Si por ejemplo queremos que los subrayados se quiten al pasar el ratón por encima, haríamos: a:hover { color: white; text-decoration: none; } Ejercicio 18 Vamos a seguir modificando el archivo harrypotter.html que hemos venido haciendo en ejercicios anteriores. Añade un bloque style (si no lo has hecho ya) en el head y añade estos estilos: Haz que todo el documento (selector body) tenga tipo de letra Arial y color de fondo azul claro (en formato hexadecimal, busca un tono que te guste). Haz que los enlaces (para el índice inicial) tengan letra de color blanco, sin subrayado, y que al pasar el ratón por encima, o hacer clic en el enlace, la letra cambie a color naranja y subrayado. Estilos para listas CSS también tiene una serie de propiedades útiles para cambiar la apariencia por defecto de las listas. Destacamos las siguientes: Diseño web 43

44 list-style-type: sirve para indicar el estilo de las listas (tipo de viñeta o número). Puede tomar los valores disc (círculos negros), circle (círculos blancos), square (cuadrados), decimal (números), lower-roman y upper-roman (números romanos en minúsculas/mayúsculas), lower-latin y upper-latin (alfabeto latino en minúsculas o mayúsculas, respectivamente), o none (no usar viñeta). ol { list-style-type: lower-roman; } list-style-image: en el caso de que queramos usar una imagen como viñeta, podemos utilizar esta propiedad. La imagen la deberemos tener guardada en alguna carpeta o subcarpeta de nuestra aplicación web, y para cargarla se usa de esta forma: ul { list-style-image: url("imgs/lista.gif"); } También podemos usar las propiedades de visibilidad (propiedad display vista antes) para hacer que los elementos de la lista se muestren en línea, uno tras otro, y no uno debajo de otro, utilizando el valor inline. Esto es útil para hacer menús horizontales. Ejercicio 19 Crea un documento llamado menulista.html. En él, utilizando únicamente CSS y listas, genera una lista como esta. Haz que cada texto sea un enlace a la página de Wikipedia del correspondiente lenguaje de programación. El enlace deberá ser de color negro sin subrayar, y cuando se le pase el ratón por encima se pondrá de color rojo. Estilos para tablas Ya hemos visto que las tablas admiten una serie de atributos para modificar algunos aspectos, como el borde, anchura, margen, etc. Estas cosas también se pueden modificar desde las correspondientes propiedades CSS (width, padding, etc.), pero en general el resultado no suele ser el mismo. Como el uso de tablas está desaconsejado tampoco vamos a profundizar mucho en estas propiedades, pero veamos algunos ejemplos de cómo conseguir estos estilos con CSS. Supongamos que queremos una tabla del 50% de anchura permitida, y borde de 1 píxel. Para ello, podemos tener un CSS como este:.mitabla { width: 50%; border-style: solid; border-width: 1px; } Y luego creamos la tabla así: <table class="mitabla"> Normalmente los bordes no suelen quedar del todo igual, y es posible que nos toque definir el borde de cada celda para que se vea. También podemos usar la propiedad border-collapse de la tabla para juntar bordes (de tabla y de cada celda) y que sean solo uno, y no se dupliquen:.mitabla { width: 50%; border-style: solid; border-width: 1px; border-collapse: collapse; } Diseño web 44

45 Más sobre selectores Vamos a dar una vuelta más de tuerca a lo que son los selectores CSS. En un apartado anterior hemos visto que fundamentalmente se utilizan cuatro tipos: de etiqueta, descendente, de clase y de id. Pero existen algunos otros que pueden sernos útiles. Y además, hemos de tener en cuenta la jerarquía y el orden a la hora de aplicar selectores, cuando varios coinciden para un mismo elemento de la página HTML. Otros selectores avanzados Vamos a ver algunos selectores algo más avanzados, que puede venir bien conocer: El selector de hijos es similar al descendente, pero aplica el estilo sólo a etiquetas que cuelguen directamente de la contenedora. Por ejemplo, para aplicar un estilo a negritas que están en párrafos (sin etiquetas intermedias), pondremos: p > strong { } E l selector adyacente se utiliza para aplicar un estilo a una etiqueta que sea hermana adyacente de otra (es decir, a continuación de otra). Por ejemplo, para cursivas que vayan detrás de negritas (pero no dentro de ellas) usamos: strong + em { } El selector de atributos se utiliza para aplicar el estilo a las etiquetas que tengan un atributo con un cierto valor. Ponemos la etiqueta, y luego entre corchetes el atributo y el valor que debe tener, entre comillas. Por ejemplo, si queremos aplicar un estilo a todos los enlaces que vayan a la página de la Universidad de Alicante, pondríamos algo como: a[href=" { } Conflictos entre selectores Qué ocurre cuando un bloque de contenido HTML encaja con más de un selector en la hoja de estilos CSS? Cuál de todos se aplica? Si los estilos son complementarios (por ejemplo, en uno se le cambia el color del texto y en otro el tamaño), se aplican todos. Pero si hay conflicto (por ejemplo, dos selectores quieren cambiar el color del texto), es una situación compleja y, en general, se aplica el estilo que más exactamente se ajusta. Por ejemplo, si tenemos este párrafo: <p id="miid">este es un párrafo marcado con un ID.</p> De estos tres selectores, se le aplicaría el segundo, porque es el que más se ajusta a lo que el párrafo tiene. p { color: red; } p#miid { color: green; } body { color: blue } En cualquier caso, conviene dejar la hoja de estilos con los estilos más generales al principio (empezando por el body), y con los más específicos al final (selectores de clase, o de ID, o de hijos, etc.), de forma que primero se empezarán a aplicar los estilos generales, y luego se irá afinando a los específicos en los elementos que los tengan. Diseño web 45

46 Formularios Hasta ahora, la única forma que hemos visto de interactuar con una web son los enlaces, haciendo clic en ellos. Pero existe otra opción más potente para que el usuario interactúe con una web: los formularios. Son una herramienta muy útil para enviar información a un servidor. Cuando nos registramos en una web, rellenamos una serie de datos ( , contraseña, etc.) mediante un formulario. Así pues, un formulario es una serie de elementos (llamados normalmente "controles" o "campos") que colocamos en una página web para que el usuario pueda introducir información. Veremos a continuación qué tipos de elementos puede tener un formulario y cómo se colocan en la página. Estructura básica de un formulario Todo el contenido de un formulario va encerrado entre una pareja de etiquetas form. Esta etiqueta tiene, entre otros, los siguientes atributos: action: sería el equivalente al href de los enlaces. Indica a qué página queremos ir cuando rellenemos el formulario y lo enviemos. Podemos utilizar, como en los enlaces, una ruta relativa o absoluta a la página. Lo normal es que la página a la que ir en el action de un formulario sea una página escrita en lenguaje de servidor (PHP, JSP, ASP según el lenguaje que hayamos elegido), ya que normalmente el servidor debe recoger la información que envía el usuario en el formulario, procesarla y hacer algo con ella. Por ejemplo, si nos estamos registrando en la web, el servidor deberá procesar nuestros datos y darnos de alta en la base de datos de usuarios de la web. method: indica la forma en que se envían los datos al servidor. Puede valer get (los datos son visibles en la barra de direcciones del navegador cuando los enviamos) o post (los datos no son visibles desde la barra de direcciones, y por tanto es algo más seguro). <form action="mipagina.php" method="post"> Contenido del formulario </form> Elementos de un formulario Dentro de las etiquetas form que engloban al formulario, podemos poner diferentes tipos de controles. Los más habituales son: Cuadros de texto: para introducir en una línea una información corta y concreta, como por ejemplo un o un password. Áreas de texto: para introducir textos largos, de más de una línea. Por ejemplo, el contenido de una noticia. Checkboxes: casillas de verificación que se marcan y desmarcan Botones de radio o radio buttons: conjunto de botones u opciones entre los que sólo puede haber uno seleccionado.

47 Listas: desplegables o fijas Botones: para enviar el formulario, o borrar los datos del mismo, por ejemplo Etiquetas: dan información de otros controles, indicando para qué sirven. La mayor parte de estos controles (cuadros de texto, checkboxes, botones de radio, botones normales) se añaden con la etiqueta input. Otros controles necesitan de otras etiquetas. Veremos todas ellas a continuación. La etiqueta input La etiqueta input se utiliza para definir distintos tipos de controles, dependiendo de lo que valga su atributo type. Este atributo puede valer: text: para definir cuadros de texto (de una sola línea). password: para definir cuadros de texto enmascarados (para contraseñas) file: para definir controles para subir archivos al servidor. Aparecerá un cuadro de texto y un botón para que, al pinchar en él, podamos elegir el archivo. Estos controles no son de mucha utilidad sin un lenguaje de servidor que les ayude a completar la tarea, como PHP, JSP o ASP.NET. checkbox: para definir casillas de verificación radio: para definir botones de radio submit: para definir el botón que servirá para enviar el formulario al pulsarlo reset: para el botón que servirá para borrar el contenido del formulario al pulsarlo button: para definir otro botón cualquiera, con otra funcionalidad. Esta última opción no es demasiado útil de momento, si no se combina con lenguajes de cliente como Javascript. hidden: sirve para definir campos ocultos, que almacenan información junto con el formulario pero no la muestran al usuario. Aparentemente no tienen utilidad, pero combinado con lenguajes de servidor como PHP, pueden ser de mucha ayuda. Una vez elegido el tipo de control, la etiqueta input tiene otra serie de atributos que debemos tener en cuenta: name: sirve para dar un nombre identificativo al control. Nos será muy útil para identificarlo luego en los lenguajes de cliente o de servidor (Javascript, PHP) id: el identificador del control, al igual que podemos usar este atributo en otras etiquetas HTML. Se utiliza en CSS, y también para algunas cosas con Javascript. A menudo se utiliza junto a name, dando a los dos el mismo nombre o valor. value: sirve para dar un valor inicial con el que rellenar el control (hasta que el usuario se lo cambie) size: sirve para indicar el tamaño del control (en caracteres si es un cuadro de texto, o en píxeles para el resto) maxlength: sirve para indicar el máximo número de caracteres que puede aceptar el control (en el caso de cuadros de texto). Diseño web 47

48 checked: sirve para indicar, si es un checkbox o botón de radio, que está marcado. Su valor siempre es checked, es decir, se usa así: checked="checked" disabled: sirve para deshabilitar un control, y que el usuario no pueda modificar su valor. Se usa sobre todo para dar información al usuario, pero sin que éste la pueda modificar. Su valor siempre es disabled, es decir, se usa de la siguiente forma: disabled="disabled". El dato disabled no se envía con el formulario. readonly: similar al anterior, sirve para que un control sea de sólo lectura y el usuario no pueda modificar su valor. A diferencia del anterior, el contenido no aparece atenuado, y sí se envía con el resto del formulario. alt: al igual que para las imágenes, sirve para dar información sobre para qué sirve este control en concreto, de forma que al pasar el ratón por encima se nos muestre esta información. Veamos algunos ejemplos: un cuadro de texto que admite hasta 50 caracteres para un e- mail, una casilla de verificación para ver si el usuario está casado, dos botones de radio para elegir su idioma preferido, y un botón para enviar el formulario. <form action="mipagina.php" method="post"> <p>introduce tu </p> <input type="text" name=" " size="20" maxlength="50" /> <br /> <input type="checkbox" name="casado" /> Casado <p>elige tu idioma preferido:</p> <input type="radio" name="idioma" value="ingles" checked="checked"/>inglés <br /> <input type="radio" name="idioma" value="frances" />Francés <br /> <input type="submit" value="enviar datos" /> </form> Esto se vería más o menos así en la página: Introduce tu Casado Elige tu idioma preferido: Inglés Francés Enviar Datos Observa algunas cosas interesantes, como que los controles de tipo radio comparten el mismo name (para que al pulsar uno se suelten los demás), y que tienen un value que no se muestra en el formulario realmente, y cuya utilidad escapa al alcance de este tema. Diseño web 48

49 Las etiquetas de formularios: label Con la etiqueta label podemos definir controles de tipo etiqueta, es decir, controles que sirven para dar información sobre otros controles. En realidad, en el ejemplo anterior, no deberíamos haber usado párrafos para indicar que el primer cuadro de texto es para escribir el , o que los botones de radio son para elegir el idioma preferido. Para eso están las etiquetas. La etiqueta label tiene un atributo for, que sirve para indicar el nombre (atributo name) del control sobre el que da información. Así, el formulario anterior se podría haber definido así: <form action="mipagina.php" method="post"> <label for=" ">introduce tu </label> <br /> <input type="text" name=" " size="20" maxlength="50" /> <br /> <input type="checkbox" name="casado" /> Casado <br /> <label for="idioma">elige tu idioma preferido:</label> <br /> <input type="radio" name="idioma" value="ingles" checked="checked"/>inglés <br /> <input type="radio" name="idioma" value="frances" />Francés <br /> <input type="submit" value="enviar datos" /> </form> Áreas de texto Para introducir texto que ocupe más de una línea, no nos sirve la etiqueta input con su atributo type="text". En su lugar, debemos usar la pareja de etiquetas textarea. Esta etiqueta tiene tres atributos: name para ponerle un nombre al control, al igual que hacíamos con input rows para indicar cuántas filas de texto va a haber cols para indicar cuántas columnas de texto va a haber Si luego se ocuparan más filas o columnas que las que indiquemos, aparecerá una barra de desplazamiento para poder ver el resto del texto escrito en el área de texto. Aquí tenemos un ejemplo de uso y cómo se vería: <textarea name="noticia" rows="5" cols="20"> Texto de la noticia </textarea> Listas Texto de la noticia Podemos definir dos tipos de listas para elegir opciones en un formulario: listas fijas (ocupan una altura determinada y dejan visibles X elementos, aunque pueden tener más y verlos mediante barras de desplazamiento) y listas desplegables (sólo es visible un elemento, y los demás se muestran desplegando la lista). Ambas se crean con la etiqueta select, que admite los siguientes atributos: name: para darle un nombre al control, al igual que en textarea o input Diseño web 49

50 size: para indicar el número de filas visibles. Si no usamos este atributo, o ponemos un valor de 1, crearemos una lista desplegable. Si vale más de 1, será una lista fija con el número de filas visibles que hayamos establecido aquí. En este caso, podemos utilizar un atributo llamado multiple (sin valor) que permite seleccionar varios elementos. Internamente, la etiqueta select tiene una serie de etiquetas option, una para cada elemento que queramos añadir a la lista. Estos elementos tienen un atributo value para indicar su valor (que puede ser diferente del que luego se mostrará). Además, para indicar si hay algún elemento preseleccionado de antemano, marcaremos ese elemento con el atributo selected="selected". Veamos aquí un ejemplo y cómo se vería: <select name="navegador" size="5"> <option value="ie" selected="selected"> Internet Explorer</option> <option value="firefox">firefox</option> <option value="chrome">chrome</option> <option value="opera">opera</option> <option value="safari">safari</option> </select> Ejercicio 20 Crea una página llamada formdatos.html para rellenar tus datos personales. Añade un encabezado 1 (h1) que diga "Rellena tus datos", y debajo un formulario como el que tienes a continuación: Diseño web 50

51 Algunas opciones avanzadas Conjuntos de campos o fieldsets Podemos agrupar conjuntos de controles en una especie de "marcos", para poder dividir mejor la información del formulario. Estos marcos se crean con la pareja de etiquetas fieldset. Contiene una subetiqueta legend que es el título de ese marco. Un ejemplo: <fieldset> <legend>datos personales</legend> <label for="nombre">nombre</label> <br/> <input type="text" name="nombre" /> <br /> <label for="apellidos">apellidos</label> <br /> <input type="text" name="apellidos" /> <br /> <label for="dni">dni</label> <br /> <input type="text" name="dni" size="10" maxlength="9" /> <br /> </fieldset> que se vería así en el navegador: Agrupar opciones en listas La etiqueta select admite algunas opciones más para agrupar los elementos que contiene en categorías. Para ello se utiliza la etiqueta optgroup, con un atributo label que da nombre a cada categoría. Veamos un ejemplo y cómo se vería en el navegador: <label for="programa">programa seleccionado</label> <br /> <select name="programa"> <optgroup label="sistemas Operativos"> <option value="windows">windows</option> <option value="mac">mac</option> <option value="linux" selected="selected"> Linux</option> <option value="otro">otro</option> </optgroup> <optgroup label="navegadores"> <option value="ie">internet Explorer</option> <option value="firefox">firefox</option> Diseño web 51