Download Uso básico de HTML y CSS

Document related concepts

Hoja de estilos en cascada wikipedia , lookup

Twitter Bootstrap wikipedia , lookup

Reset CSS wikipedia , lookup

Tableless wikipedia , lookup

Diseño web wikipedia , lookup

Transcript

Uso básico de HTML y CSS
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
http://creativecommons.org/licenses/by-nc-sa/4.0/
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
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-88591 (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
Uso básico de HTML y CSS
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-8859-1, pondríamos algo como esto dentro del bloque
head:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<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
Uso básico de HTML y CSS
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 . 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>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

<title>Bienvenido/a</title>
</head>
<body>

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-8859-1 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
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
<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
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
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:
Diseño web
Símbolo
Código
<
<
>
>
&
&
10
Uso básico de HTML y CSS
“
"
‘
'
(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
Uso básico de HTML y CSS
•
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-8859-1.
•
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
Uso básico de HTML y CSS
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 1996. 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
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
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:
p { line-height: 1.5em; }
Ejercicio 4
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
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
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í:
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.
Ejercicio 8
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
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
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
padding
Esto es una
región del
documento
color de
fondo
Esto es otra
región del
documento
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
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
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).
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.
Ejercicio 9
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
Uso básico de HTML y CSS
•
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:
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
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).
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).
2
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
Uso básico de HTML y CSS
2
1
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):
2
1
3
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
Uso básico de HTML y CSS
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
•
Diseño web
Mark Ruffalo
29
Uso básico de HTML y CSS
•
•
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
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
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-8859-1 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
Uso básico de HTML y CSS
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="http://www.ua.es">web 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="http://www.ua.es" 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
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
<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:
Fila 1, Columna 1
Fila 1, Columna 2
Fila 2, Columna 1
Fila 2, Columna 2
Atributos de las tablas
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
Uso básico de HTML y CSS
Dos
Uno
Tres
Cinco
Cuatro
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, Email, 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
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
•
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
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
•
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
Uso básico de HTML y CSS
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="http://www.ua.es"] { ... }
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
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 (e-mail,
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 e-mail 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.
Uso básico de HTML y CSS
•
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
Uso básico de HTML y CSS
•
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 email, 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 e-mail:</p>
<input type="text" name="email" 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 e-mail:
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
Uso básico de HTML y CSS
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 e-mail, 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="email">Introduce tu e-mail:</label>
<br />
<input type="text" name="email" 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>
Texto de la noticia
Listas
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
Uso básico de HTML y CSS
•
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
Uso básico de HTML y CSS
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
Uso básico de HTML y CSS
Ejercicio 21
Crea una página llamada formProducto.html con el siguiente formulario (más el
encabezado 1 con el texto "Información sobre el producto", y un botón de "Enviar",
centrado en la parte inferior):
Diseño web
52

Top subcategories

Top subcategories

Top subcategories

Top subcategories

Top subcategories

Top subcategories

Top subcategories

Download Uso básico de HTML y CSS