I.E.S. Suárez de Figueroa @vanza C.F.G.S. Administración de Sistemas Informáticos en Red
Anuncio
I.E.S. Suárez de Figueroa
@vanza
C.F.G.S. Administración de Sistemas Informáticos en Red
Módulo "Lenguaje de Marcas y Sistemas de Gestión de la Información"
Unidad 2. Utilización de lenguajes de marcas en entornos web.
1. Del HTML al XHTML: evolución y versiones.
HTML es un lenguaje de marcas, utilizado para crear la mayor parte de las páginas
webs. Es un estándar reconocido en todos los navegadores, por lo tanto, todos ellos visualizan
una página HTML de forma muy similar independientemente del sistema operativo sobre el
que se ejecutan.
La evolución de sus versiones, desde su creación hasta la creación del XHTML podemos
verla a continuación.
El origen de HTML fue un sistema de hipertexto para compartir documentos electrónicos
en 1980. La primera propuesta oficial para convertir HTML en un estándar se realizó en 1993.
Aunque ninguna de las dos propuestas de estándar que se hicieron (HTML y HTML+)
consiguieron convertirse en estándar oficial. Después vino el siguiente desarrollo:
HTML 2.0 fue la primera versión oficial de HTML. El IETF publicó el estándar en
septiembre de 1995.
HTML 3.2 se publicó el 14 de Enero de 1997 por el W3C. Incorpora los applets de Java
y texto alrededor de las imágenes.
HTML 4.0 se publicó el 24 de Abril de 1998. Entre las novedades que presenta se
encuentran las hojas de estilos CSS y la posibilidad de incluir pequeños programas en
las páginas webs.
HTML 4.01 se publicó el 24 de diciembre de 1999. Es una actualización de la versión
anterior. En ese momento el W3C detuvo la actividad de estandarización de HTML
hasta marzo de 2007, momento en que se retoma debido a la fuerza de las empresas
que forman el grupo WHATWG y a la publicación de los borradores de HTML 5.0, que
será la siguiente versión de este lenguaje.
HTML 5.0 se utilizó como borrador durante varios años, pero no se publicó hasta el 28
de octubre de 2014, fecha en la que finalmente el W3C lo aceptó. Esta versión elimina
algunos elementos o etiquetas (obsoletos o "deprecated"), añade otros y algunos
otros los modifica, respecto a la versión anterior.
Tras la publicación del estándar HTML 4.01 se detecta su incompatibilidad con
herramientas basadas en XML. Para evitar estos problemas se crea lenguaje XHTML, que
combina la sintaxis de HTML 4.0 con la de XML. Se puede decir que XHTML es una versión más
estricta de HTML. XHTML pretende combinar la sintaxis HTML para mostrar datos, con la
sintaxis de XML para describir los datos.
XHTML 1.0 fue la primera versión, se publicó el 26 de Enero de 2000. Es una
adaptación de HTML 4.01 al lenguaje XML, por lo que mantiene sus características y
añade algunas restricciones y elementos de XML.
La versión XHTML 1.1, del 31 de mayo de 2001, añade el concepto de modularización
al XHTML 1.0, es decir que permite el uso de módulos o componentes.
El grupo de trabajo de desarrollo de XHTML 2.0 se disolvió antes de finalizar
completamente su trabajo; por ello, lo que se ha publicado de esta versión es un
borrador, que presenta importantes modificaciones respecto a la versión anterior.
Los distintos navegadores actuales siguen reconociendo y mostrando correctamente
páginas webs creadas con versiones de HTML anteriores a la 5. Por ejemplo, el elemento <font
...> ya no existe en HTML5, sin embargo los navegadores lo siguen reconociendo e
interpretando correctamente.
Nosotros sólo podremos utilizar estrictamente los elementos (etiquetas) de HTML5 y
para comprobar si una página está bien creada utilizaremos el validador HTML de W3C. Esto
quiere decir que aunque una página se muestre bien en un navegador, puede que la página no
sea correcta, por utilizar elementos (etiquetas) que ya no corresponden al HTML5 (elementos
obsoletos). Por tanto, si en un página se utiliza por ejemplo la etiqueta <font...> no será
correcta.
2. Documento HTML.
2.1. Edición y validación de un documento HTML.
Al igual que XML, para escribir código HTML se puede utilizar cualquier editor de texto,
pero existen programas que aportan ciertas ayudas en esta tarea. Uno de ellos es el editor
Notepad++, de licencia libre. Puedes descargarlo de http://notepad-plus-plus.org. Este editor
colorea las distintas etiquetas, hace sugerencias al iniciar la escritura de elementos, añade los
espacios por la izquierda para ordenar el código, etc. Para aprovechar esas características, al
comenzar al escribir el código HTML, debe guardarse con la extensión .html pulsando en
Archivo - Guardar como. Una vez guardado, el archivo puede abrirse con un navegador web
para ver el resultado. Esto puede hacerse sin salir del Notepad++, en la opción "Ejecutar" del
menú superior.
Nosotros usaremos el programa "XML Copy Editor", que puede descargarse de
http://xml-copy-editor.sourceforge.net de forma gratuita (licencia GNU). Además de ofrecer
un editor de código, también permite comprobar si el fichero .html es correcto
sintácticamente, es decir si está "Bien-Formado" (well-formed) en cuanto a la estructura XML
(un documento HTML debe cumplir la sintaxis XML), pulsando en la marca azul.
- Marca azul de la izquierda: "Comprobar Bien-Formado".
- Marca verde de la derecha: "Validar" (de momento no la usamos).
Un documento guardado con la extensión .html podrá abrirse con un navegador web
para ver el resultado.
Como hemos indicado antes, para comprobar si un documento cumple la norma
HTML5 usaremos el validador HTML de W3C. Una página puede mostrarse bien en el
navegador, aun siendo incorrecta. Para asegurarnos si es correcta debemos pasar la página por
dicho validador.
El validador de W3C es: http://validator.w3.org/
En ese validador, en el apartado "More Options" debemos elegir en el campo
"Document Type" o "Doctype" la opción "HTML5 (experimental)", para asegurarnos que es la
versión 5 la que utilizará para validar. Si al validar no aparecen errores se debe a que el
documento es válido HTML5.
Este validador permite validar una dirección web (URI), un fichero que sea subido o un
código que se escriba directamente en el validador; para ello se usarán las pestañas superiores
"Validate by URI", "Validate by File Upload" o "Validate by Direct Input" respectivamente.
Nosotros usaremos sobre todo la última opción, "Validate by Direct Input", copiando
directamente nuestro código en la ventana correspondiente.
2.2. Estructura de un documento HTML.
Tanto XML como HTML tienen su origen en el lenguaje SGML, por lo que, aunque
presentan diferencias funcionales, la estructura del documento es semejante en ambos.
La estructura de una página HTML ha de ser coherente con la que hemos visto en el
tema anterior para cualquier documento XML. Por ello tendrá un prólogo y un ejemplar:
Prólogo: Todo documento HTML ha de tener una declaración del tipo de documento
donde se le indica al navegador el tipo de documento que se va a iniciar y la versión de
HTML utilizada para la codificación del mismo y, además, le permite interpretarlo
correctamente.
Para la versión HTML 4.0, hay tres prólogos distintos que definen tres tipos de
documentos HTML:
o
HTML 4.0 Strict. Es la DTD utilizada por defecto con HTML 4.0. En estos
documentos no se permite el uso de los elementos declarados deprecated
(obsoletos) en otras versiones o recomendaciones HTML. La declaración del
tipo de documento correspondiente es:
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
"http://www.w3.org/TR/REC-html40/strict.dtd">
o
HTML
4.0
//EN"
HTML 4.0 Transitional. Permite el uso de todos los elementos que permite el
HTML 4.0 Strict, además de los elementos deprecated. La declaración del tipo
de documento correspondiente es:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
o
HTML 4.0 Frameset. Es una variante de HTML 4.0 Transitional para
documentos que usan frames. En estos documentos el elemento body hay que
reemplazarlo por un elemento frameset. La declaración del tipo de documento
correspondiente es:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
"http://www.w3.org/TR/REC-html40/frameset.dtd">
o
4.0
Frameset//EN"
HTML 5. En HTML 5 esta etiqueta queda resumida respecto a las versiones
anteriores, del modo:
<!DOCTYPE html>
Ejemplar: En un documento HTML está delimitado por las etiquetas <html> y </html>.
El ejemplar puede a su vez dividirse en dos partes:
o
La cabecera, delimitada por las etiquetas <head> y </head>. Contiene la
información sobre el título de la página, el autor, palabras clave, etc. Dentro de
esta sección es obligatorio definir el título del documento, para ello se usan las
etiquetas <title> </title>. Esta información no se presentará en la ventana del
navegador, salvo el título que aparecerá en la barra de título de la parte
superior.
o
El cuerpo, que contiene la información que se va a presentar en la pantalla.
Está limitado por las etiquetas <body> y </body>, salvo en los documentos de
tipo HTML 4.0 Frameset donde éstas se sustituyen por <frameset> y
</frameset>.
Por tanto, la estructura general de un documento HTML podría expresarse como sigue:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
Contenido de la página
</body>
</html>
Si se guarda ese código en un fichero con extensión .html y ese fichero se abre con un
navegador web se mostrará una página con la frase "Contenido de la página"; la otra frase,
"Título de la página" se mostrará en la barra superior (o pestaña) del navegador.
3. Identificación de etiquetas y atributos de HTML.
Un documento HTML está formado por etiquetas y atributos. En XML las etiquetas y
los atributos los define el programador, mientras que en HTML están predefinidos.
Al igual que en XML, las etiquetas pueden ser de apertura, <etiqueta>, o de cierre,
</etiqueta>. Una de las diferencias con XML es que la cantidad de etiquetas de HTML está
limitada a aquellas que están definidas por el lenguaje.
Aunque HTML define una gran cantidad de etiquetas, estas no son suficientes para
crear páginas complejas, ya que la definición completa de ciertos elementos, como las
imágenes y los enlaces, requiere información adicional. Como no es posible crear una etiqueta
por cada elemento diferente, se añade la información adicional a las etiquetas mediante los
atributos dando lugar a los elementos.
Cada atributo tiene predefinido un conjunto de valores posibles. Si el valor de un
atributo no es válido, el navegador lo ignora.
Cada etiqueta HTML define los atributos que puede utilizar, aunque algunos de ellos
son comunes a muchas etiquetas.
3.1. Clasificación de los atributos comunes según su funcionalidad.
- Atributos básicos: se pueden usar en casi todas las etiquetas HTML.
name="texto"
Asigna el nombre "texto" a un elemento. Por ejemplo, para un párrafo:
<p name="parrafo1">Esto es un p&aacute;rrafo con nombre</p>
id="identificador"
Asigna un identificador único a un elemento; no puede coincidir con otros id del
documento HTML. Sólo es útil cuando se trabaja con CSS y con Javascript. El "identificador" no
puede empezar por número y sólo puede contener letras, números y guiones medios y bajos.
title="titulo"
Asigna un título a un elemento. Éste será mostrado cuando se pase el ratón por encima
del elemento en cuestión.
style = "texto"
Permite aplicar al elemento HTML el estilo "texto" directamente. Se verá en detalle
más adelante.
class = "texto"
Permite aplicar al elemento HTML el estilo "texto" definido en las CSS. No puede
empezar por número y sólo puede contener letras, números y guiones medios y bajos. Se verá
en detalle más adelante.
En función del elemento, veremos que esos atributos son necesarios para algunas tareas.
- Atributos para internacionalización: los utilizan las páginas que muestran sus contenidos en
varios idiomas o aquellas que quieren indicar de forma explícita el idioma de sus contenidos.
dir="ltr" o dir="rtl"
Indica la dirección del texto por lo que sólo puede tomar dos valores:
ltr (left to right), de izquierda a derecha (es el valor por defecto); o rtl (right to left), de derecha
a izquierda. El valor rtl ajusta el texto a la parte derecha, mientras que ltr lo ajusta a la
izquierda. Por ejemplo, un párrafo escrito de izquierda a derecha y el siguiente de derecha a
izquierda:
<p dir="ltr">Este texto se pega a la izquierda de la ventana.</p>
<p dir="rtl">Este texto se pega a la derecha de la ventana.</p>
lang="codigo"
Especifica el idioma del elemento mediante un código predefinido. Los posibles valores
de este atributo se encuentran en el documento RFC 1766. Ayuda a representar la información
de la forma más adecuada para un idioma dado. Algunos de los valores posibles son:
en
en-US
Inglés (Gran Bretaña)
Inglés americano
es
fr
fr-CA
ja
Español
Francés
Francés de Canadá
Japonés
xml:lang="codigo"
Especifica el idioma del elemento mediante un código definido según la
recomendación RFC 1766. En las páginas XHTML, el atributo xml:lang tiene más prioridad que
lang y es obligatorio incluirlo siempre que se incluye el atributo lang.
3.2. Elementos HTML.
Un elemento HTML está formado por:
Una etiqueta de apertura.
Cero o más atributos.
Texto encerrado por la etiqueta; es opcional, no todas las etiquetas encierran texto.
Una etiqueta de cierre.
Según el modo en que ocupan el espacio disponible en la página los elementos pueden
ser de dos tipos:
Elementos en línea (inline elements). Sólo ocupan el espacio necesario para mostrar
sus contenidos. Su contenido puede ser texto u otros elementos en línea (un elemento
en línea dentro de otro). Si a continuación de un elemento en línea hay otro elemento
en línea, se mostrarán ambos seguidos en la misma línea. Algunos elementos en línea
son: un enlace o link <a ...>; un texto en negrita <b>, una imagen <img ...>, un texto en
cursiva<i>, etc.
<b>Texto en negrita. <a href="http://www.unapagina.es">Entrar</a>; sigue en negrita.</b>
Todo ese texto se mostrará en la misma línea, incluido el enlace. Tenemos un
elemento en línea, el <b>, que incluye otro elemento en línea, el link <a>.
Elementos de bloque (block elements). Los elementos de bloque siempre empiezan en
una nueva línea y ocupan todo el espacio disponible hasta el final de la línea, aunque
sus contenidos no lleguen hasta el final. Por tanto, el elemento que haya a
continuación (sea en línea o de bloque) se mostrará en una nueva línea. Su contenido
puede ser texto, elementos en línea u otros elementos de bloque. Algunos elementos
de bloque son: párrafo <p>, encabezados <h1> ... <h6>, sección <div>, etc.
<div>Este texto comenzará siempre en una nueva línea.<h1> Esto se mostrará en la línea
siguiente y en grande por tener encabezado h1.</h1> <b>Y esto aparecerá en otra nueva línea
en negrita</b>.</div>
Veamos un caso concreto de elementos en línea y de bloque:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo: elementos en línea y de bloque</title>
</head>
<body>
Esta es la primera línea.
<h1>Texto
con
encabezado
h1.
Aparece
en
la
segunda
línea.</h1><p>Esto saldrá en la tercera línea <b>y esto en
negrita
sigue
en
la
tercera
línea</b>,
junto
con
<a
href="http://www.suarezdefigueroa.es"> este enlace</a>.</p>
<i>Esto se muestra en otra nueva línea, en cursiva.</i>
</body>
</html>
Al guardar ese código en un fichero con extensión .html y abrirlo con el navegador, se
mostrará:
Un elemento de bloque no puede estar dentro de un elemento en línea. El navegador
web lo mostrará sin errores, pero el validador de W3C avisará del error. Por ejemplo:
<b>Esto está en negrita. <p>Esto es un elemento de bloque dentro de un elemento en línea,
que dará error en el validador W3C.</p> Sigue texto en negrita.</b>
Existen elementos cuyo comportamiento puede ser en línea o de bloque según las
circunstancias.
3.2.1. Elementos sobre la estructura básica del documento.
La estructura básica de un documento viene determinada por las siguientes etiquetas:
<html></html>
Abre y cierra un documento HTML Es el ejemplar o elemento raíz.
<head></head>
Encabezado de la página: aquí se coloca titulo, etiquetas meta e información para
buscadores entre otras cosas. Está información no es visible.
<title></title>
Título de la página web: aparecerá en el borde superior de la ventana del navegador.
Esta etiqueta se coloca dentro del elemento <head> anterior.
<body></body>
Cuerpo del documento. Dentro de esta etiqueta va toda la parte visible de la página
web. Permite definir formatos que se aplican a los elementos de la página de manera global,
como son el color del fondo del texto, los márgenes, el color de los enlaces, etc.
Ejemplo 1: escribe el siguiente código con "XML Copy Editor"; guárdalo en un archivo con
extensión .html y abre dicho archivo con un navegador web. Comprueba la posición donde se
muestra el título y el contenido. Valida el código para HTML5 con el validador de W3C.
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
Contenido de la página
</body>
</html>
La mejor manera de evitar problemas con las vocales con tilde y con la ñ es escribirlas
en código nemotécnico (o entidad HTML), que comienza por &. Éstos son:
Minúsculas
á
&aacute;
é
&eacute;
í
&iacute;
ó
&oacute;
ú
&uacute;
Mayúsculas
Á
&Aacute;
É
&Eacute;
Í
&Iacute;
Ó
&Oacute;
Ú
&Uacute;
ñ
Ñ
&ntilde;
&Ntilde;
Por ejemplo, la á se sustituye por &aacute; del modo:
<body>Contenido de la p&aacute;gina</body>
Por otra parte, en cualquier parte de un documento HTML puede insertarse un
comentario con el mismo formato que en XML, es decir:
<!-- comentario -->
Los navegadores ignoran los comentarios; éstos son usados por el creador de la página
web para dejar una explicación o información que puede ser útil para otra persona que lea el
código HTML.
3.2.2. Elementos de la sección de cabecera.
Elementos contenedores:
<title></title>
Título de la página web: aparecerá en el borde superior de la ventana del navegador.
Se coloca dentro de <head>.
<script></script>
Permite insertar códigos script (como JavaScript).
<style></style>
Estilo aplicado al documento utilizando CSS. Lo veremos más adelante.
<base>
Elementos no contenedores:
Indica el URI (la dirección) base del elemento.
<link></link>
Enlaces a documentos externos de librerías. Esta etiqueta se usa normalmente para
realizar la carga de hojas de estilo CSS, como veremos más adelante.
<meta></meta>
Permite indicar el tipo de codificación de nuestro documento, nombre, autor,
información que agiliza la búsqueda del documento en buscadores, etc.
3.2.3. Elementos que dan formato al texto.
Los distintos elementos que podemos utilizar para dar formato a nuestro texto son:
<pre></pre>
Texto pre-formateado. El siguiente código:
<body>
Varios espacios en blanco seguidos
en esta línea.
Otra línea que comienza más a la derecha.
Esta línea viene después de una línea en
blanco.
</body>
El navegador mostrará ese texto seguido, sin respetar varios espacios juntos, ni los
saltos de línea, ni el espacio por la izquierda, quedando:
Varios espacios en blanco seguidos en esta línea. Otra línea que comienza más a la derecha.
Esta línea viene después de una línea en blanco.
Sin embargo, si se utiliza la etiqueta <pre> del modo:
<body>
<pre>
Varios espacios en blanco seguidos
en esta línea.
Otra línea que comienza más a la derecha.
Esta línea viene después de una línea en
</pre>
</body>
blanco.
El navegador respetará el formato y mostrará:
Varios espacios en blanco seguidos
en esta línea.
Otra línea que comienza más a la derecha.
Esta línea viene después de una línea en
blanco.
<h1></h1> hasta <h6></h6>
Encabezados (h de head): texto del más grande hasta el más pequeño. Con el código
siguiente:
<body>
<h1>Texto más grande</h1>
<h6>Texto más pequeño</h6>
</body>
El navegador mostrará:
<b></b>
Negrita
<u></u>
Subrayado
<i></i>
Cursiva
<cite></cite>
Cursiva (cite viene de cita)
<em></em>
Resalta una palabra, con negrita o cursiva, lo decide el navegador.
<strong></strong>
Negrita
<sub></sub>
Subíndice: xi se escribe con el código x<sub>i</sub>
<sup></sup>
Superíndice: x2 se escribe con el código x<sup>2</sup>
Ejemplo 2: escribe un código para mostrar el texto "Hoya, soy yo" en el tamaño más grande en
cursiva y en la siguiente línea en el tamaño más pequeño en negrita y subrayado. Valida el
código en W3C.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 2</title>
</head>
<body>
<h1><i>Hola, soy yo</i></h1>
<h6><b><u>Hola, soy yo</u></b></h6>
</body>
</html>
3.2.4. Elementos sobre formatos de presentación.
<p></p>
Inserta un nuevo párrafo. Un párrafo está formado por los elementos incluidos entre
esas etiquetas, es decir entre <p> y </p>. Una ventaja de utilizar párrafos es que se podrán
aplicar propiedades al párrafo completo, por ejemplo el color de fondo (se aplica con CSS,
como veremos más adelante). Cuando se cierra el párrafo (con </p>) automáticamente se
inserta un salto de línea y además se añade un espacio de separación con el elemento
siguiente que tenga la página. Por ejemplo:
Este párrafo tiene un color de fondo. Puede verse que el párrafo no acaba donde
finaliza el texto, sino que llega hasta los bordes de la ventana, es decir un párrafo es siempre
rectangular (puede comprobarse en el segundo párrafo). También vemos que al finalizar el
párrafo, se genera una espacio antes de comenzar el siguiente elemento, que puede ser otro
párrafo.
Este es el segundo párrafo.
Este sería el tercer párrafo. Aunque una línea acabe en mitad de la ventana, el párrafo
llega siempre hasta el final.
Ejemplo 3: uso de etiqueta <p> para insertar saltos de línea; escribe los códigos y muéstralos
en el navegador. Valida los códigos en W3C.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 3</title>
</head>
<body>
Este es el primer párrafo.
Este NO es el segundo párrafo, porque el navegador muestra este
texto a continuación del primero.
No se ha usado etiqueta de párrafo.
Por tanto todo este texto está en un mismo párrafo.
Aunque al escribirlo en el XML Copy Editor hemos puesto saltos
de línea.
</body>
</html>
Resultado en el navegador; muestra todo el texto seguido, sin los saltos de línea
escritos en el código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 3</title>
</head>
<body>
<p>Este es el primer párrafo.</p>
<p>Este SÍ es el segundo párrafo, porque al utilizar la etiqueta
de párrafo aplica un cambio de párrafo y pasa a la siguiente
línea.</p>
<p style="background-color: yellow">Este sería el tercer
párrafo.</p></body>
</html>
Resultado en el navegador; entre los párrafos queda un espacio, es decir que además
de cambiar de línea añade un espacio de separación con el siguiente párrafo; el segundo
párrafo tiene un color de fondo distinto del resto (está aplicado con style de CSS; esto se
tratará más adelante):
<br/>
Inserta un salto de línea, como un punto y aparte. Esta etiqueta no necesita la pareja
de cerrado, sino que se escribe como ahí se indica, con la / al final: <br/>
Aunque al escribir el código se usen distintas líneas, el navegador lo mostrará todo
seguido en la misma línea. Si se desea que un elemento se muestre en la siguiente línea debe
utilizarse <br/> para saltar.
Ejemplo 4:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 4</title>
</head>
<body>
Esta frase la escribo en una línea.
Esta frase está en la segunda línea del código.
El navegador muestra estas tres líneas juntas.
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 4</title>
</head>
<body>
Esta frase la escribo en una línea.<br/> Esta frase aparecerá en
la segunda línea en el navegador, ya que he insertado un br o
salto de línea.<br/> Aunque en el código escriba todo seguido,
el navegador insertará saltos de línea en las posiciones donde
haya etiqueta br.
</body>
</html>
<blockquote> </blockquote>
Sangría o espacio por la izquierda.
Este texto no tiene espacio por la izquierda, está escrito sin las etiquetas
blockquote, por lo que no tendrá esa sangría.
Este texto sí tiene espacio por la izquierda, ya que en el código se ha
escrito entre las etiquetas blockquote, por lo que sí tendrá esa sangría.
<q></q>
Para insertar una cita. El navegador le añade las comillas al texto.
<q>Este texto se mostrará entre comillas en el navegador.</q>
Veamos las listas de definiciones. Hay tres tipos de listas: ordenadas, desordenadas y
listas de definición.
<dl></dl>
Lista de definiciones, como un glosario. Una lista que incluye una serie de términos y
cada uno de ellos lleva su definición. Se pueda aplicar a otros usos.
<dt></dt>
Para indicar cada término de la lista de definición.
<dd></dd>
Para indicar la definición del término. Automáticamente se le inserta un espacio por la
izquierda.
<dl>
<dt>Etiqueta p</dt>
<dd>Inserta un párrafo</dd>
<dt>Etiqueta br</dt>
<dd>Inserta un salto de línea</dd>
<dt>Etiqueta blockquote</dt>
<dd>Inserta sangría </dd>
</dl>
<ol></ol>
Lista ordenada; cada elemento llevará una marca que lo ordena, como 1, 2, 3... o a, b,
c... u otros. Para elegir la marca se puede usar el atributo type, del modo <ol type="1">; los
valores posibles de type son:
type="1"
type="A"
type="a"
type="I"
type="i"
1, 2, 3 ... (es el type por defecto, si no se pone type se usa éste).
A, B, C ...
a, b, c ...
Es i mayúscula: I, II, III, IV, V, VI ... (romanos)
i, ii, iii, iv, v, vi ... (romanos en minúsculas)
<li></li>
Cada entrada de una lista ordenada. Se le inserta un espacio por la izquierda.
<ol type="I">
<li>XML</li>
<li>HTML</li>
<li>XHTML</li>
</ol>
Se puede crear listas anidadas:
<ol type="1">
<li>XML</li>
<li>HTML</li>
<ol type="a">
<li>Prólogo</li>
<li>Cabecera</li>
<li>Cuerpo</li>
</ol>
<li>XHTML</li>
</ol>
<ul></ul>
Lista sin ordenar con viñeta. Cada elemento de la lista será marcado con una viñeta
que puede ser elegida, como círculo, cuadrado, disco o nada. Los elementos se indican como
en el caso de las listas ordenadas, con <li></li>.
<ul>
<li>XML</li>
<li>HTML</li>
<li>XHTML</li>
</ul>
Para elegir el tipo de viñeta se utiliza el estilo, del modo:
<ul style="list-style-type:disc">
En el lugar de "disc" los valores posibles son: disc (por defecto, si no se pone estilo se
usará disc), circle, square, none (ninguno).
<ul style="list-style-type:circle">
<li>XML</li>
<li>HTML</li>
<li>XHTML</li>
</ul>
<div></div>
Se puede utilizar para marcar una sección o un grupo de elementos a los que se desea
aplicar alguna característica común.
Por ejemplo, si una página tiene una serie de párrafos con color de texto en negro,
excepto dos párrafos consecutivos que llevan color de texto en rojo, esos dos párrafos pueden
colocarse dentro de una sección <div> y así se le aplica el color a los párrafos de una vez, en
lugar de tener que ir aplicando el color a cada párrafo de forma separada.
<body>
<p>Este es el primer párrafo, que está antes de la sección
div.</p>
<div style="color:red">
<p>Este párrafo y el siguiente tienen color de texto en rojo,
que se ha aplicado a la vez a los dos párrafos utilizando
div.</p>
<p>Este párrafo y el anterior tienen color de texto en rojo,
que se ha aplicado a la vez a los dos párrafos utilizando
div.</p>
</div>
<p>Este es el último párrafo, que ya está fuera de la sección
div, por tanto no tiene color rojo.</p>
</body>
3.2.5. Elementos sobre enlaces (links) de una página web.
<a href="URL">Texto</a>
Inserta un enlace o hipervínculo (link). URL será la dirección del enlace; el "Texto"
quedará marcado como enlace y es donde debe pulsarse para entrar en ese enlace. Por
ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Enlace a google</title>
</head>
<body>
Pulsa <a href="http://www.google.es">aquí</a> para entrar en
google.
</body>
</html>
El navegador muestra:
Un atributo que puede resultar práctico con <a href...> es target="_blank", que abrirá
el enlace en una nueva ventana del navegador web. Un ejemplo puede ser:
<a href="http://www.google.es" target="_blank">Ia a Google</a>
<a href="mailto:EMAIL">Texto</a>
Inserta un enlace a la dirección de email indicada en "EMAIL". Al pulsar en "Texto" se
abre automáticamente el gestor de correo electrónico (por ejemplo, Outlook, Thunderbird,
etc. ) instalado en el equipo (si hay alguno instalado), para poder enviar un email a la dirección
indicada. Por ejemplo:
<a href="mailto:prueba@servidor.es">Enviar email a prueba</a>
<a id="ancla"></a>
Coloca un ancla en la posición del documento donde esté esta etiqueta y le da el
nombre "ancla". Un ancla no se ve, simplemente es una marca interna que tiene la página, que
se puede usar para saltar a ella de forma directa mediante un enlace interno de la propia
página. Por ejemplo, si una página es muy grande (ocupa muchas líneas), resulta conveniente
colocar al final un enlace para que al pulsar sobre él vayamos al inicio de la página de forma
directa; en esa situación, debemos colocar un ancla al inicio de la página, es decir la posición
donde queremos saltar. El enlace que se debe poner al final se llama enlace interno de la
página y la etiqueta es la siguiente.
<a href="#ancla">Texto</a>
Inserta un enlace interno de la página, es decir un salto a una posición de la misma
página en la que está esa etiqueta. El "Texto" es la palabra donde se debe pulsar para saltar a
la posición mencionada. La palabra "ancla" debe coincidir con la palabra usada en la etiqueta
<a id=...> anterior. Por ejemplo:
<a id="Inicio"></a>
Aquí va todo el contenido de la página, que puede ser muy largo
y ocupar varias pantallas hacia abajo.
<a href="#Inicio">Pulsa para ir al inicio de la página</a>
3.2.6. Elementos sobre imágenes.
<img src="name"/>
Insertar una imagen. En "name" se coloca la ruta (directorio o carpeta) y el nombre del
fichero donde está la imagen, que puede ser .jpg, .gif, .png, etc. Si la imagen está en la misma
carpeta que la página web, se suele escribir simplemente:
<img src="./fichero.jpg"/>
Si dentro de la carpeta donde está la página, existe otra carpeta llamada "imagenes"
donde están las imágenes usadas en la página, se escribiría:
<img src="./imagenes/fichero.jpg"/>
La imagen podría estar en otro servidor, por lo que se pondría la dirección donde está
la imagen en el otro servidor incluyendo las carpetas, del modo siguiente:
<img src="http://www.otroservidor.es/imagenes/fichero.jpg"/>
Es obligatorio que una imagen lleve el atributo alt="texto descriptivo", ya que en caso
contrario el validador oficial W3C mostrará error. El texto debe describir la imagen, por
ejemplo:
<img src="./imagenes/fichero.jpg" alt="Mapa local"/>
Si no se indica lo contrario, la imagen se muestra con su tamaño real, pero puede
mostrarse con otro tamaño usando style con width (ancho) y height (alto), del modo:
<img src="./fichero.jpg" alt="Mapa local" style="width:200px;height:200px"/>
<map></map>
Permite mapear una imagen, es decir delimitar diferentes zonas de la misma, para
asociar un enlace (link) a cada zona. Por tanto, se podrá saltar a un enlace distinto al pulsar en
cada zona.
<img src="./imagen.jpg" alt="Mapa" style="width:200px;height:300px" usemap="#mapaimg">
<map name="mapaimg">
<area shape="rect" coords="0,0,200,150" alt="Caceres" href="./caceres.html">
<area shape="rect" coords="0,151,200,300" alt="Badajoz" href="./badajoz.html">
</map>
Como vemos, el valor del atributo usemap (mapaimg en este ejemplo) de la imagen
debe coincidir con el valor del atributo name (mapaimg) de la etiqueta map. Cada área tendrá
una breve descripción con el atributo alt.
En el ejemplo anterior tenemos un mapa de 200 píxeles de ancho y 300 de alto (por
ejemplo de Extremadura). Podemos hacer que al pulsar en la mitad superior
(coords="0,0,200,150") salte a la página caceres.html, mientras que al pulsar en la mitad
inferior (coords="0,151,200,300") salte a badajoz.html. Cada área es delimitada por sus
coordenadas. Las coordenadas son 2 parejas de números; la primera pareja indica la esquina
superior izquierda del rectángulo y la segunda indica la esquina inferior derecha. En cada
pareja de números, el primer número indica la coordenada del eje de izquierda a derecha,
mientras que el segundo número indica la coordenada del eje de arriba a abajo, como puede
verse en la siguiente figura:
Eso corresponde a shape="rect" (forma rectangular), pero si se desea delimitar un área
circular (shape="circle"), en coords se ponen 3 números, donde los dos primeros son las
coordenadas del centro del círculo y el tercero será el radio. Por ejemplo, si en la imagen
anterior de 200x300 de tamaño queremos delimitar un área circular justo en el centro de radio
50 píxeles, sería:
<area shape="circle" coords="100,150,50" alt="Centro" href="./centro.html">
Incluso se puede usar shape="poly" para delimitar un área en forma de un polígono
cualquiera; en tal caso en coords se pondrá una sucesión de parejas de números, donde cada
pareja indicará las coordenadas de cada vértice del polígono; lógicamente, debe haber al
menos tres parejas de números, que delimitaría un triángulo.
<hr/>
Inserta una línea horizontal.
3.2.7. Elementos sobre tablas.
<table></table>
Inserta una tabla, es decir una estructura compuesta de filas (horizontales) y columnas
(verticales). La intersección de una fila con una columna será una celda de la tabla.
<tr></tr>
Inserta una fila (row) dentro de una tabla.
<td></td>
Inserta una columna (la d es de data, datos) dentro de una fila de una tabla.
Por ejemplo, una tabla con 2 filas y en cada fila 3 columnas o datos sería:
<table style="width:100%">
<tr>
<td>Juan</td>
<td>Gómez</td>
<td>43</td>
</tr>
<tr>
<td>José</td>
<td>López</td>
<td>32</td>
</tr>
</table>
<th></th>
Encabezamiento (heading) de tabla. Si en lugar de td se usa th, el contenido de esa
celda se mostrará en negrita y centrado; se suele utilizar para la primera fila de la tabla, a
modo de encabezamiento, cuando esa primera fila es diferente del resto, por ejemplo para
mostrar los títulos de cada columna:
<table style="width:100%">
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Edad</th>
</tr>
<tr>
<td>Juan</td>
<td>Gómez</td>
<td>43</td>
</tr>
<tr>
<td>José</td>
<td>López</td>
<td>32</td>
</tr>
</table>
<thead></thead>
En una tabla, la fila de la cabecera puede incluirse entre las etiquetas
<thead></thead>. La ventaja de tener esa etiqueta es que podremos aplicar un estilo (style)
propio a esa fila, diferente de las otras filas (colores distintos, tipos de letras, etc.).
<tfoot></tfoot>
Una tabla puede tener pie, es decir que la última fila no es como las anteriores, sino
que se usa para mostrar totales u otros datos distintos del resto de filas. La fila del pie puede
incluirse entre las etiquetas <tfoot></tfoot>. Al igual que con thead, la ventaja de tener esa
etiqueta es que podremos aplicar un estilo (style) propio a esa fila, diferente de las otras filas.
Aunque tfoot se escriba al inicio de la tabla, el navegador mostrará esa fila al final, en el pie.
<tbody></tbody>
Para usar thead y/o tfoot es conveniente aplicar las etiquetas tbody, para englobar el
cuerpo de la tabla, apartando cabecera y pie. Al usar tbody, podremos aplicar estilos que
afecten sólo al cuerpo de la tabla.
<table>
<thead>
<tr>
<th>Cliente</th>
<th>Saldo</th>
</tr>
</thead>
<tfoot style="color:red">
<tr>
<td>Total</td>
<td>210</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Juan</td>
<td>90</td>
</tr>
<tr>
<td>Jos&eacute;</td>
<td>120</td>
</tr>
</tbody>
</table>
<caption></caption>
La etiqueta caption permite poner un título fuera de la tabla, centrado. Esta etiqueta
se coloca debajo de table, de modo:
<table border="2">
<caption>Usuarios con edad<caption>
<tr>
<td>Juan</td>
<td>Gómez</td>
<td>43</td>
</tr>
<tr>
<td>José</td>
<td>López</td>
<td>32</td>
</tr>
</table>
<colgroup></colgroup>
Permite especificar un grupo de columnas, para poder aplicarle un estilo que sólo
afecte a ese grupo y no al resto de columnas de la tabla. Nos ofrece la ventaja de no tener que
ir aplicando un mismo estilo columna por columna o celda por celda, sino a todas las columnas
indicadas de una vez. Colgroup debe escribirse dentro de table, después de caption (si lo hay) y
antes de thead, tfoot, tbody y tr.
<col></col>
Se utiliza dentro de colgroup para ir indicando el estilo de cada columna o grupo de
columnas de la tabla. La etiqueta span permitirá indicar cuantas columnas abarca el elemento
col en cuestión. Por ejemplo, si una tabla tiene 4 columnas, podremos aplicar un estilo a la
primera y otro estilo a las 3 siguientes, de la manera:
<table>
<colgroup>
<col style="background-color:blue">
<col span="3" style="background-color:green">
</colgroup>
<tr>
<th>Cliente</th>
<th>Tfno</th>
<th>Email</th>
<th>Saldo</th>
</tr>
<tr>
<td>Juan</td>
<td>666777666</td>
<td>juan@servidor.es</td>
<td>1000</td>
</tr>
<tr>
<td>Jos&eacute;</td>
<td>655555999</td>
<td>jose@servidor.es</td>
<td>800</td>
</tr>
<tr>
<td>David</td>
<td>644555444</td>
<td>david@servidor.es</td>
<td>1100</td>
</tr>
</table>
Aparte de todos esos elementos de tablas, podemos también destacar que las líneas
de las tablas (bordes) pueden indicarse con el atributo border en HTML5, aunque este atributo
ha quedado obsoleto para otros elementos, como las imágenes. De todos modos, para los
bordes es conveniente utilizar los estilos (style de CSS), como veremos más adelante.
<table border="2">
...
...
</table>
El numero 2 de border="2" indicará la anchura de la línea del borde.
Con HTML5, muchos de los atributos de los elementos tratados en este capítulo se
aplican utilizando CSS.
Con el atributo colspan de una celda (en td o th) se puede indicar cuántas columnas
abarcará (span) hacia la derecha la celda donde se coloque el colspan.
<table border="1">
<tr>
<th>Nombre</th>
<th colspan="2">Apellidos</th>
<th>Edad</th>
</tr>
<tr>
<td>Juan</td>
<td>Pinto</td>
<td>Fdez.</td>
<td>43</td>
</tr>
<tr>
<td>Pedro</td>
<td>Pons</td>
<td>Tella</td>
<td>32</td>
</tr>
</table>
Con ese código, la celda "Apellidos" de la cabecera abarcará dos columnas; el
navegador mostrará:
Con el atributo rowspan de una celda (en td o th) se puede indicar cuántas filas
abarcará (span) hacia abajo la celda en cuestión.
<table border="1">
<tr>
<td>Nombre:</td>
<td>Juan Pinto</td>
</tr>
<tr>
<td rowspan="2">Tfnos:</td>
<td>924000000</td>
</tr>
<tr>
<td>567567567</td>
</tr>
<tr>
<td>Edad:</td>
<td>32</td>
</tr>
</table>
Con ese código, la celda "Tfnos:" abarcará dos filas; el navegador mostrará:
3.2.8. Elementos sobre marcos (frames).
<iframe></iframe>
Inserta un marco en línea (inline frame) dentro de una página. El marco no ocupa la
línea completa, por lo que si después del marco hay más elementos, éstos se muestran en la
misma línea. En ese marco puede colocarse cualquier recurso, como otra página web, una
imagen, etc.
Por ejemplo, una página web principal puede ser dividida en tres zonas (marcos) para
mostrar una página distinta en cada zona del siguiente modo:
<!DOCTYPE html>
<html>
<head>
<title>T&iacute;tulo de la p&aacute;gina</title>
</head>
<body>
P&Aacute;GINA WEB PRINCIPAL<br/>
Esta p&aacute;gina tiene 3 marcos, para mostrar una p&aacute;gina en cada
uno:<br/>
<iframe src="./alumnos.html" width="300" height="100"></iframe>
<iframe src="./profesores.html" width="300" height="100"></iframe>
<iframe src="./modulos.html" width="300" height="100"></iframe>
<br/>Despu&eacute;s de los marcos puede haber m&aacute;s contenido de la
p&aacute;gina principal.
</body>
</html>
El navegador mostrará:
Como vemos en el ejemplo, se puede indicar la anchura y altura de los marcos con
width y height respectivamente. Los tres marcos se muestran en línea (inline), no uno debajo
del anterior, sino a continuación. Para colocar uno debajo del anterior se podría colocar un
salto de línea <br/> después de cada iframe.
Se le puede asignar un nombre a un iframe con el atributo name.
<iframe src="./modulos.html" width="300" name="Marco1"></iframe>
Ese nombre puede ser utilizado para que al pulsar en un enlace (link) de la página
principal, se abra dicho enlace en el iframe indicado, en lugar de ocupar la ventana completa
del navegador. Por ejemplo:
<body>
<iframe width="500" src="alumnos.html" name="Marco1"></iframe>
<br/>
<a href="http://www.suarezdefigueroa.es" target="Marco1">I.E.S.
Su&aacute;rez de Figueroa</a>
</body>
Como se ve en el ejemplo, el valor del atributo name del iframe tiene que coincidir con
el valor del atributo target del enlace (<a href...). El enlace (www.suarezdefigueroa.es) se
abrirá en el iframe cuyo nombre coincida con el target del enlace, que en este caso es
"Marco1".
3.2.9. Elementos sobre formularios.
<form></form>
Inserta un formulario, en el que se podrá introducir valores en distintos tipos de
campos. Algunos de estos tipos de campos son los siguientes.
<input type="text" name="name">
Elemento que permite introducir un texto en el campo llamado "name".
<body>
<form>
Nombre:<br/>
<input type="text" name="Nombre">
<br/>
Apellidos:<br/>
<input type="text" name="Apellidos">
</form>
</body>
El navegador mostrará:
La longitud del campo donde se introduce el dato puede especificarse con el atributo
size, por ejemplo:
<input type="text" name="Apellidos" size="50">
<textarea name="name" ></textarea>
Permite intruducir texto en un campo de varias líneas. El campo donde se almacena el
texto tecleado se llamará "name". El número de filas y columnas que ocupa el campo en
pantalla se indicará con los atributos rows y cols respectivamente.
<body>
<form>
Observaciones:<br/>
<textarea name="Obser" rows="5" cols = "25">
Escriba aqu&iacute; las observaciones
</textarea>
</form>
</body>
El texto introducido se guarda en el campo Obser. En la zona donde se va a teclear se
visualizará de inicio el texto entre <textarea> y </textarea>, en este caso es "Escriba aquí las
observaciones". El navegador mostrará:
<input type="radio" name="name" value="valor">
Elemento que permite elegir un solo valor de un conjunto de valores posibles. Uno de
los valores puede mostrarse ya seleccionado por defecto con el atributo "checked". Todos los
campos de tipo "radio" de un mismo conjunto deben tener el mismo valor en el atributo name.
El valor elegido (indicado en el atributo value) se guarda en el campo con nombre "name".
<form>
<input type="radio" name="voto" value="SI" checked>S&iacute;
<br/>
<input type="radio" name="voto" value="NO">No
<br/>
<input type="radio" name="voto" value="NSNC">No sabe/No contesta
</form>
Vemos en el ejemplo que los tres atributos name tienen el mismo valor, "voto". El
primer campo se muestra por defecto activado, por tener "checked". Sólo se permitirá elegir
uno de los tres valores (SI, NO o NSNC). El navegador mostrará:
<input type="checkbox" name="name" checked value="valor">
Elemento que permite seleccionar un valor. Con el atributo "checked" se mostrará por
defecto seleccionado. Si se escriben varias etiquetas del tipo checkbox, se pueden elegir varios
valores. Cada etiqueta checkbox debe tener un valor distinto en el atributo name. El "valor"
del checkbox marcado se guarda en el campo con nombre "name" de ese checkbox.
<body>
Elige las asignaturas:<br/>
<form>
<input type="checkbox" name="Len"
<br/>
<input type="checkbox" name="Mat"
<br/>
<input type="checkbox" name="Geo"
<br/>
<input type="checkbox" name="Ing"
<br/>
</form>
</body>
value="Lengua">Lengua
value="Matematicas">Matem&aacute;ticas
value="Geografia">Geograf&iacute;a
value="Ingles">Ingl&eacute;s
En ese ejemplo, ningún valor aparecerá ya seleccionado por defecto, porque ningún
checkbox tiene el atributo checked; lógicamente se podrán elegir varias asignaturas; cada
name debe tener un valor distinto (Len, Mat, Geo e Ing). El texto indicado fuera del <input...>
es el que se muestra en pantalla, mientras que el valor indicado en value es el que se guarda
en el campo "name" si se marca el checkbox. El navegador mostrará:
<select name="name"></select>
Inserta una lista desplegable de valores de los que sólo se puede elegir uno. El valor
elegido se guarda en el campo con nombre "name". Para indicar la lista de valores se utilizan
etiquetas option dentro del select, del modo siguiente:
<select name="Modulo">
<option value="LMSGI" selected>Lenguajes de marcas</option>
<option value="REDES">Planificaci&oacute;n de Redes</option>
<option value="SO">Sistemas Operativos</option>
</select>
El texto indicado fuera del <option...> es el que se muestra en pantalla, mientras que el
valor indicado en el value de la opción elegida es el que se guarda en el campo cuyo nombre se
indica en "name". Con el atributo selected en uno de los option indicamos el valor que
aparecerá elegido por defecto, "Lenguajes de marcas" en el ejemplo. El navegador mostrará de
inicio:
Al pulsar en la flecha hacia abajo se despliega la lista con todas las opciones (tres en
nuestro ejemplo) para poder elegir una de ellas.
<datalist></datalist>
Para un campo de introducción de texto, el datalist permite mostrar una lista de
opciones para elegir una de ellas, en lugar de teclear todo el texto. Al pulsar en el campo se
mostrará la lista.
<input list="Ciudades" name="Ciudad">
<datalist id="Ciudades">
<option value="Badajoz">
<option value="C&aacute;ceres">
<option value="M&eacute;rida">
<option value="Almendralejo">
<option value="Zafra">
</datalist>
Como vemos, el valor del atributo list del input debe coincidir con el valor del atributo
id de datalist. El navegador muestra:
<label></label>
Permite poner una etiqueta (o título) a un elemento del formulario; la etiqueta y el
elemento irán asociados, para ello deben coincidir el atributo for del label con el atributo id del
elemento. Al pulsar sobre el texto del label el cursor se posicionará en el campo a teclear.
Veamos un código y lo que muestra el navegador:
<label for="nombre">Nombre:</label> <input type="text" name="nombre" id="nombre">
<fieldset></fieldset>
Este elemento permite agrupar una serie de elementos del formulario, los enmarca y
les pone un título con la etiqueta legend.
<legend></legend>
Permite poner un título al grupo de elementos de fieldset.
<form>
<fieldset style="width:300px">
<legend>Elige asignaturas:</legend>
<input type="checkbox" name="Len" value="Lengua">Lengua
<br/>
<input type="checkbox" name="Mat" value="Matematicas">Matem&aacute;ticas
<br/>
<input type="checkbox" name="Geo" value="Geografia">Geograf&iacute;a
<br/>
<input type="checkbox" name="Ing" value="Ingles">Ingl&eacute;s
<br/>
<br/>
<label for="alu">Alumno:</label> <input type="text" name="alumno" id="alu">
</fieldset>
</form>
En el ejemplo, vemos que con style="width:300px" se puede indicar el ancho del
marco del fieldset.
<input type="reset" value="name">
Inserta un botón para que al pulsarlo se borren los datos introducidos en los campos
del formulario, para reiniciarlo o empezar de nuevo. El texto que aparece en el botón será el
valor colocado en el atributo value.
<input type="submit" value="name">
Inserta un botón para enviar los datos introducidos en el formulario. El texto que
aparece en el botón será el valor colocado en el atributo value.
Los datos se envían a una página (generalmente en .php) que se ocupará de
procesarlos, para almacenarlos en una base de datos, para enviarlos a un email o para otra
acción. A esa página llegará el nombre de cada campo (indicado en name) con el valor elegido;
por ejemplo, teniendo en cuenta los ejemplos anteriores, a la página le llegaría algo como:
Nombre=José
Voto=SÍ
Len=Lengua
Mat=Matemáticas
Modulo=LMSGI
Estos procesos quedan fuera de los objetivos de este módulo, pero sí se abordarán en
otro módulo del ciclo formativo.
En la etiqueta <form ...> debe añadirse el atributo action para indicar la página donde
se envían los datos para que los procese, del modo siguiente:
<form action="./paginaprocesa.php" method="GET">
En el atributo method se puede indicar valor GET (es el valor por defecto) o valor
POST. Con GET los datos se muestran en la barra de direcciones del navegador (junto con la
página web), pero con POST no, por lo que POST es más seguro. Podemos probarlo con una
web de google que está programada para procesar el dato que se le envíe (un texto a buscar),
del siguiente modo:
<form action="http://www.google.es/search" method="GET">
Teclee el texto a buscar en google:
<input type="text" name="q">
<input type="submit" value="Buscar">
</form>
El navegador muestra:
La web http://www.google.es/search está programada para buscar el valor que se le
envíe en un campo llamado "q", por ello a nuestro campo de introducción de texto le hemos
dado ese nombre (name="q"). Al pulsar el botón "Buscar" en nuestro navegador se abre la
web de google y busca el texto introducido. Veremos en la barra de direcciones superior que
se muestra el texto introducido, por ser método GET. Esa web está programada para ese
método, con POST no funciona. De ese modo podrás incluir fácilmente en tu propia web una
opción de búsqueda en google.
<input type="image" name="name" src="./fichero.jpg">
Inserta un botón para enviar los datos, como en el caso anterior "submit", pero ahora
el botón es la imagen de fichero.jpg (podría ser .gif, .png, etc.). Por tanto, al pulsar en la
imagen se envían los datos del formulario.
3.2.10. Otros elementos.
<span> </span>
Permite aplicar un estilo a un grupo de elementos. Cuando se tiene una parte de una
página web con un estilo definido (por ejemplo, color de texto en rojo), y dentro de esa parte
se quiere aplicar un estilo diferente a un grupo de elementos, se aplica <span> a este grupo.
<p style="color:red">
Este p&aacute;rrafo se muestra con color de texto rojo (red), pero
puede resultar interesante que una serie de palabras consecutivas se
muestren en color azul, aunque est&eacute;n dentro de
p&aacute;rrafo.<br/>
Para ello viene bien el uso de la etiqueta span del modo <span
style="color:blue">, estas palabras saldr&aacute;n en azul (blue) en
el navegador.</span> Ahora ya vuelve a aparecer el texto en rojo,
porque se ha cerrado el span, pero contin&uacute;a el p&aacute;rrafo.
</p>
El navegador mostrará:
<abbr> </abbr>
Permite insertar abreviaturas, de forma que con el atributo title se especifica a qué se
refiere la abreviatura. El title será mostrado al dejar el ratón encima de la abreviatura. El uso
de esta etiqueta aporta más información de la página web a los motores de búsqueda.
<abbr title="HyperText Markup Language">HTML</abbr>
<audio controls></audio>
Permite insertar en la web un control para reproducir un fichero de sonido (mp3, ogg o
wav). Algunos navegadores no admiten estos controles o sólo permiten algunos formatos de
audio.
El control de audio que se muestra en el navegador permite reproducir, pausar y subir
o bajar volumen.
<audio controls>
<source src="./audio.mp3" type="audio/mpeg">
</audio>
Si el fichero de sonido no está en la misma carpeta que la página web, se puede indicar
la ruta o incluso su URL (dirección web).
<audio controls>
<source src="./sonidos/audio.mp3" type="audio/mpeg">
</audio>
<audio controls>
<source src="http://www.suarezdefigueroa.es/files/audio.mp3" type="audio/mpeg">
</audio>
Se suele poner el fichero de audio en distintos formatos, para que sea más probable
que el navegador reconozca alguno de ellos. En la página web se mostrará sólo un reproductor
de audio
<audio controls>
<source src="./audio.mp3" type="audio/mpeg">
<source src="./audio.ogg" type="audio/ogg">
<source src="./audio.wav" type="audio/wav">
</audio>
<video controls></video>
Permite insertar en la web un control para reproducir un fichero de vídeo (mp4, ogg o
webm). Algunos navegadores no admiten estos controles o sólo permiten algunos formatos de
audio. Se admitirán algunas acciones en el reproductor de vídeo que aparece: pausar, control
del volumen, etc. Se pueden incluir varios formatos de vídeo como ocurre con el audio.
<video controls width="640" height="480">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
</video>
Como vemos en el ejemplo, con los atributos width y height se indica el ancho y alto
respectivamente de la ventana del reproductor de vídeo.
Como ocurre con el audio, el fichero de sonido podría estar en una carpeta distinta
que la página, incluso podría estar en un servidor distinto, por lo que en el atributo src puede
indicarse la ruta del fichero o el URL.
Debes conocer
HTML5. Recomendación del W3C.
4. XHTML frente a HTML.
El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, no es más que una
adaptación de HTML al lenguaje XML. El estándar XHTML 1.0 sólo añade pequeñas mejoras y
modificaciones menores al estándar HTML 4.01, por lo que éste último está prácticamente
incluido en el primero, lo que hace que pasar del HTML 4.01 Strict a XHTML no requiere casi
ningún cambio.
El lenguaje HTML tiene una sintaxis muy permisiva, por lo que es posible escribir sus
etiquetas y atributos de muchas formas diferentes. Las etiquetas, por ejemplo, podían
escribirse en mayúsculas, en minúsculas e incluso combinando mayúsculas y minúsculas. El
valor de los atributos de las etiquetas se puede indicar con o sin comillas. Además, el orden en
el que se abrían y cerraban las etiquetas no era importante.
La flexibilidad de HTML da lugar a páginas con un código desordenado, difícil de
mantener y muy poco profesional. XHTML soluciona estos problemas añadiendo ciertas
normas en la forma de escribir las etiquetas y atributos.
4.1. XHTML: diferencias sintácticas y estructurales con HTML.
El esquema básico del documento XHTML, para considerarse conforme a la
especificación, deberá cumplir las siguientes condiciones:
El elemento raíz del documento debe ser <html>.
El elemento raíz del documento debe indicar el espacio nominal XHTML usando el
atributo xmlns. El espacio nominal para XHTML es http://www.w3.org/1999/xhtml
Debe haber una declaración DOCTYPE en el prólogo del documento. El identificador
público incluido en la declaración DOCTYPE debe hacer referencia a alguna de las tres
DTD definidas por el W3C usando el Identificador Formal Público correspondiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Las restricciones básicas que introduce XHTML respecto a HTML en la sintaxis de sus
etiquetas:
Las etiquetas se tienen que cerrar en orden inverso al que se abren, nunca pueden
solaparse.
Los nombres de las etiquetas y atributos siempre se escriben en minúsculas.
El valor de los atributos, incluso los numéricos, siempre se encierra entre comillas.
Los atributos en los que el nombre coincide con su valor, no puede darse el valor por
entendido, es decir, no se pueden comprimir. Este tipo de atributos no son muy
habituales.
Todas las etiquetas deben cerrarse siempre. XHTML permite que en lugar de abrir y
cerrar de forma consecutiva la etiqueta (<br></br>) se puede utilizar la sintaxis <br/>
para indicar que es una etiqueta vacía que se abre y se cierra en ese mismo punto.
Además de las cinco restricciones básicas, XHTML incluye otros cambios más
avanzados respecto a HTML; entre ellas son:
Antes de acceder al valor de un atributo, se eliminan todos los espacios en blanco que
se encuentran antes y después del valor. Además, se eliminan todos los espacios en
blanco sobrantes dentro del valor de un atributo.
El código JavaScript debe encerrarse entre las etiquetas especiales
<![CDATA[
..... código .....
]]>
para evitar que el navegador interprete de forma errónea caracteres como & y <.
Las páginas XHTML deben prescindir del atributo name; en su lugar siempre debe
utilizarse el atributo id.
En XHTML es necesario separar el formato del contenido. Los párrafos deben
separarse consistentemente y las cabeceras h1-h6 sólo deben usarse para destacar los
diferentes apartados. Es recomendable dar formato a los datos por medio del uso de
las CSS.
4.2. Ventajas e inconvenientes de XHTML sobre HTML.
Las ventajas son:
o
Compatibilidad parcial con navegadores antiguos: la información se visualiza,
aunque sin formato.
o
Un mismo documento puede adoptar diseños radicalmente distintos en
diferentes apartados.
o
Sencillez a la hora de editar y mantener el código.
o
Es compatible con los estándares que está desarrollando el W3C como
recomendación para futuros agentes de usuario o navegadores.
o
Los documentos escritos conforme a XHTML 1.0 presentan mejor rendimiento
en las actuales herramientas web que aquellos escritos conforme a HTML.
o
La separación de los contenidos y su presentación hace que los documentos
XHTML se adapten mejor a las diferentes plataformas: pantallas de ordenador,
pantallas de dispositivos móviles, etc.
o
Como ocurre con XML, se pueden utilizar fácilmente herramientas creadas
para procesar documentos XML genéricos (editores, XSLT, etc.).
Los inconvenientes de XHTML sobre HTML son:
o
Algunos navegadores antiguos no son totalmente compatibles con los
estándares, lo que hace que las páginas no siempre se muestren
correctamente. Esto cada vez es menos problemático ya que estos
navegadores van cayendo en desuso.
o
Muchas herramientas de diseño web aún no generan código XHTML correcto.
5. Herramientas de diseño web.
Actualmente hay herramientas que permiten diseñar un sitio web sin necesidad de
saber programar HTML. Las más populares:
Macromedia Dreamweaver.
Microsoft Front Page.
Adobe Go live.
NetObjects Fusion.
Amaya es una herramienta de libre distribución creada por el W3C que permite
visualizar y editar páginas HTML y XHTML con hojas de estilo CSS, expresiones MathML
y dibujos SVG, además de documentos XML. Está disponible para plataformas
Windows, GNU/Linux, Mac OS X, entre otras.
Además de las anteriores, para generar páginas web son útiles algunas de las
siguientes herramientas:
Software de diseño
o Macromedia Flash para hacer animaciones, banners o sitios enteros con esta
tecnología.
o Macromedia Fireworks o Adobe Illustrator para diseñar botones, logos,
imágenes, etc.
o Adobe Photoshop o Gimp, para retocar fotografías y trabajar con imágenes.
Recursos: diseño web
o My Fonts, es un sitio web que nos vende fuentes que pueden ser utilizadas
para la web.
o Color Voodoo, tiene interesante información sobre el uso de los colores y su
influencia en la web.
o moreCrayons, una paleta de colores web seguros (Pues no todos los colores se
ven iguales en distintos sistemas operativos).
o Yafla Color, permite crear la gama a partir del color que se elija como principal
además funciona como conversor entre los modelos de color RGB y HSV.
o ColorJack, permite crear una gama a partir de un color y además calcula
equivalencias de colores entre RGB, HSV y CMYK.
o Kuler, es una aplicación online de Adobe Labs en la que se puede elegir una
combinación de colores y compartirla con otros usuarios, que pueden votar
sus favoritas. Requiere registro.
Nosotros no utilizaremos ninguna de esas herramientas indicadas, sino que
realizaremos la programación de la página web escribiendo directamente el código en modo
texto, utilizando para ello programas como "XML Copy Editor" y "Notepad++".
6. Hojas de estilo o CSS.
CSS (Cascading Style Sheets) permite a los desarrolladores web controlar el estilo y el
formato de múltiples páginas webs al mismo tiempo.
Antes del uso de CSS, los diseñadores de páginas webs debían definir el aspecto de
cada elemento dentro de las etiquetas HTML de la página. El principal problema de esta forma
de definir el aspecto de los elementos es que habría que definir el formato de cada uno de los
elementos que formen la página, lo cual hace que sea muy difícil de actualizar.
CSS permite separar los contenidos de la página y su aspecto. Para ello se define en
una zona reservada el formato de cada uno de los elementos de la web. Cualquier cambio en
el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a ella en
las que aparezca ese elemento. Las hojas de estilo están compuestas por una o más reglas de
estilo aplicadas a un documento HTML o XML.
Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para
marcar los contenidos, es decir, para designar la función de cada elemento dentro de la
página: párrafo, cabecera, texto destacado, etc. Una vez creados los contenidos, se utiliza el
lenguaje CSS para definir el formato de cada elemento.
CSS obliga a crear documentos semánticos HTML/XHTML, mejora la accesibilidad del
documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo
documento en infinidad de dispositivos diferentes.
Las hojas de estilos aparecieron poco después que el lenguaje de etiquetas SGML,
alrededor del año 1970. Desde la creación de SGML, se observó la necesidad de definir un
mecanismo que permitiera aplicar estilos a los documentos electrónicos. La guerra de
navegadores y la falta de un estándar para la definición de los estilos dificultaban la creación
de documentos que tuvieran igual apariencia en distintos navegadores.
El organismo W3C propuso la creación de un lenguaje de hojas de estilos específico
para el lenguaje HTML.
En 1995, el W3C añadió a su grupo de trabajo de HTML el desarrollo y estandarización
de CSS. Tenemos las versiones:
- CSS 1, se publicó en 1996, es la primera recomendación oficial.
- CSS 2, publicada en 1998, es la segunda recomendación oficial.
- CSS 2.1, no fue aceptada por W3C hasta 2011.
- CSS 3, desarrollada en módulos, algunos aceptados desde 2011.
- CSS 4, se encuentra en desarrollo.
El diseño web siempre está limitado por las posibilidades de los navegadores que
utilizan los usuarios para acceder a sus páginas. Por este motivo es imprescindible conocer el
soporte de CSS en cada uno de los navegadores más utilizados del mercado.
Para escribir código CSS basta con cualquier editor de texto, pero puede resultar
interesante utilizar Notepad++ (en lugar de XML Copy Editor), ya que al guardar el archivo con
extensión .css, Notepad++ detecta que es código CSS y ayuda en su escritura, usando distintos
colores y ofreciendo las distintas etiquetas CSS que se pueden utilizar en cada momento. Por el
contrario, el programa XML Copy Editor no ofrece ayuda, ya que CSS no respeta la sintaxis ni
estructura de los documentos XML.
6.1. Soporte de CSS en los navegadores.
El soporte de CSS de un navegador viene determinado por el motor del mismo ya que
es éste el encargado de interpretar el CSS.
6.2. Cómo incluir CSS en un documento HTML o XHTML.
Existen tres opciones para incluir CSS en un documento HTML o XHTML:
- Definir CSS en un archivo externo.
En este caso, todos los estilos CSS se incluyen en uno, o varios, archivos de texto plano,
cuya extensión es .css, que las páginas HTML enlazan mediante el elemento <link> de la
cabecera del fichero HTML.
Puesto que una página web puede tener asociados varios ficheros CSS, es
recomendable agrupar estos últimos en un directorio.
El navegador descarga los archivos CSS externos, además de la página web asociada a
ellos, y aplica los estilos a los contenidos de la página antes de mostrar sus contenidos.
Esta es la forma de incluir CSS en las páginas HTML más utilizada. La principal ventaja
es que se puede incluir un mismo archivo CSS en multitud de páginas HTML, por lo que se
garantiza la aplicación homogénea de los mismos estilos a todas las páginas que forman un
sitio web.
Además, el mantenimiento del sitio web se simplifica al máximo, ya que el cambio en
un solo archivo CSS permite variar de forma instantánea los estilos de todas las páginas HTML
asociadas.
Puede hacerse de dos modos diferentes: mediante enlaces; o importando el fichero
CSS.
- Incluir CSS en el documento HTML.
Este método se emplea cuando se definen pocos estilos o cuando se quieren incluir
estilos específicos en una determinada página HTML que completen los estilos globales
definidos en archivos externos.
Tiene el inconveniente de que para modificar los estilos definidos, es necesario
modificar todas las páginas que incluyen el estilo que se va a cambiar.
- Incluir CSS en los elementos HTML.
El último método para incluir estilos CSS en documentos HTML es el peor y el menos
utilizado, ya que para modificar un formato hay que cambiar todos los elementos que estén
asociados a él.
Solamente se utiliza en determinadas situaciones en las que se debe incluir un estilo
muy específico para un solo elemento concreto.
6.2.1. Definir CSS en un archivo externo enlazado (link).
Para realizar una página web usando un archivo CSS externo, se deben seguir los tres
pasos siguientes:
Se crea un archivo de texto plano con las definiciones de los formatos.
Dicho archivo de texto se guarda con extensión .css
Se enlaza el archivo CSS externo mediante la etiqueta <link> en la cabecera de la
página web.
El elemento <link> puede tener definidos cuatro atributos cuando se enlaza un archivo
CSS:
rel, indica el tipo de relación que tiene el archivo enlazado y la página HTML. Para los
archivos CSS, siempre se utiliza el valor stylesheet
type, indica el tipo de recurso enlazado. Para los archivos CSS su valor siempre es
text/css
href, indica la URL del archivo CSS que contiene los estilos. Puede ser relativa o
absoluta y puede referenciar a un recurso interno o externo al sitio web.
media, indica el medio en el que se van a aplicar los estilos del archivo CSS (no lo
usaremos).
El código HTML podría quedar como sigue:
<!DOCTYPE html>
<html>
<head>
<title>T&iacute;tulo de la p&aacute;gina</title>
<link rel="stylesheet" type="text/css" href="./ruta/fichero.css" />
</head>
<body>
...
</body>
</html>
El método más habitual para utilizar código CSS en una página web es link, es decir un
enlace a un fichero exterior CSS. Esto permitirá utilizar el mismo fichero CSS en todas las
páginas webs que compongan el sitio web que se esté diseñando.
<link rel="stylesheet" type="text/css" href="./ruta/fichero.css" />
En el atributo href se indica el nombre del fichero CSS, así como la carpeta donde se
encuentra. Si el fichero CSS está en la misma carpeta que la página HTML, se escribe:
<link rel="stylesheet" type="text/css" href="./fichero.css" />
Si el fichero CSS está en otro servidor, en href se indica el URL completo:
<link rel="stylesheet" type="text/css" href="http://www.servidor.es/carp/fichero.css" />
Un ejemplo del uso de archivos externos CSS enlazados con link para la construcción
de páginas webs es:
Archivo fichero.css (escrito con Notepad++)
h3 { color: green; }
p { color: orange; font-family: Verdana; }
Archivo HTML (escritro con XML Copy Editor)
<!DOCTYPE html>
<html>
<head>
<title>CSS en fichero externo con link</title>
<link rel="stylesheet" type="text/css" href="./fichero.css" />
</head>
<body>
<h3>La etiqueta h3 tiene definido un estilo en fichero.css</h3>
<p>Los párrafos de esta web tienen estilo definido en
fichero.css. Este fichero está en la misma carpeta que la página
web, ya que en href no se ha puesto ruta, sino simplemente
./fichero.css</p>
</body>
</html>
Al abrir el documento HTML en el navegador se mostrará:
6.2.2. Definir CSS en un archivo externo importado (import).
Se puede obtener el mismo resultado anterior utilizando el elemento <style> en lugar
de <link>.
En este caso se usa una regla de tipo @import seguida de una cadena de texto
encerrada con comillas simples o dobles, que se corresponde con la URL del archivo CSS. La
cadena @import también puede ir segudia de url() conteniendo dicha cadena de texto entre
los paréntesis, teniendo el mismo significado. Es decir, las siguientes 4 reglas @import son
equivalentes para el fichero formatos.css que está en el directorio css:
@import '/css/formatos.css';
@import "/css/ formatos.css";
@import url('/css/ formatos.css');
@import url("/css/ formatos.css");
En el ejemplo el apartado anterior, el fichero CSS no cambia, sin embargo el fichero
HTML con import quedaría:
<!DOCTYPE html>
<html>
<head>
<title>CSS en fichero externo con link</title>
<style type="text/css">
@import "./fichero.css";
</style>
</head>
<body>
<h3>La etiqueta h3 tiene definido un estilo en fichero.css</h3>
<p>Los párrafos de esta web tienen estilo definido en fichero.css.
Este fichero
está en la misma carpeta que la página web, ya que en href no se ha
puesto ruta, sino
simplemente ./fichero.css</p>
</body>
</html>
Por supuesto, en el navegador se vería igual que antes (son los mismos estilos).
Como se ve en el ejemplo, la etiqueta style lleva el atributo type="text/css".
Nosotros usaremos link en lugar de style (con @import), por ser el método más
común.
6.2.3. Definir CSS en el documento HTML.
En algunos casos concretos, por ejemplo si el sitio web está formado por un solo
fichero HTML, podría tener sentido incluir todo el código CSS en el apartado <head> de la
página, con la etiqueta style. Por tanto, no habrá fichero CSS aparte, sino que el código CSS va
incluido en el documento HTML.
Es como el caso anterior, pero en el lugar donde está @import se escriben las líneas
CSS que definen el formato. Por ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>CSS en fichero externo con link</title>
<style type="text/css">
h3 { color: green; }
p { color: orange; font-family: Verdana; }
</style>
</head>
<body>
<h3>La etiqueta h3 tiene definido un estilo en fichero.css</h3>
<p>Los párrafos de esta web tienen estilo definido en fichero.css.
Este fichero
está en la misma carpeta que la página web, ya que en href no se ha
puesto ruta, sino
simplemente ./fichero.css</p>
</body>
</html>
En el navegador se mostrará igual que en los ejemplos anteriores.
Si en <head> se especifican estilos usando link y también <style>, se van aplicando los
estilos según el orden de escritura de esas etiquetas. Por ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>CSS en fichero externo con link</title>
<style type="text/css">
h3 { color: blue; }
p { color: orange; font-family: Verdana; }
</style>
<link rel="stylesheet" type="text/css" href="./fichero.css" />
</head>
<body>
<h3>La etiqueta h3 tiene definido un estilo en fichero.css</h3>
</body>
</html>
En el ejemplo, con style indicamos que el color del texto h3 sea azul (blue), pero si en
fichero.css se indica otro color para h3, se aplica este segundo color, por estar escrito el link
después de style.
6.2.4. Incluir CSS en los elementos HTML.
Por otra parte, la inclusión del código CSS en un elemento concreto del fichero HTML
se suele utilizar para aplicar a dicho elemento un estilo distinto del especificado en el fichero
externo indicado con link o del estilo indicado en <head> con style. Tiene prioridad el estilo
indicado en el propio elemento, respecto a los otros dos. Por ejemplo:
<head>
<title>T&iacute;tulo de la p&aacute;gina</title>
<style type="text/css">
p { color: white; background-color:black; }
</style>
</head>
<body>
<p>Este p&aacute;rrafo se muestra en color de texto blanco, con fondo
negro.</p>
<p style=" color: green; background-color:yellow; ">Sin embargo, este
p&aacute;rrafo se muestra con texto verde y fondo amarillo, porque estamos
aplicando el estilo en el propio elemento, que tiene prioridad sobre el estilo
indicado en head.</p>
</body>
El navegador mostrará:
6.3. Sintaxis de las reglas de estilo.
Cada uno de los estilos que componen una hoja de estilos CSS se denomina regla. Cada
regla se forma por:
Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
Llave de apertura, {
Declaración: especifica los estilos que se aplican a los elementos.
o Propiedad: especifica el atributo del elemento que deseamos modificar.
o Valor: indica el nuevo valor del atributo indicado en propiedad.
Llave de cierre, }
Por ejemplo, una regla será:
p { color : blue; }
En este caso el selector es "p" (elemento párrafo de HTML); la declaración es: "color :
blue"; dentro de ésta, podemos diferenciar la propiedad "color" y el valor "blue". Es decir, que
el color del texto del párrafo será azul.
Un archivo CSS puede contener infinitas reglas CSS, cada regla puede contener varios
selectores y cada declaración puede estar formada por diferentes declaraciones.
Un archivo externo que contiene reglas de estilo CSS tendrá la extensión .css después
del nombre.
El contenido de dicho archivo será una sucesión de reglas de estilo (reglas CSS).
Si no se usa un fichero externo, sino que los estilos se indican en el apartado head del
documento HTML, también se debe hacer con reglas de estilo.
Cada regla de estilo, que se puede indicar en el archivo .css o directamente en la
sección head del documento HTML, tiene la sintaxis genérica siguiente:
selector { propiedad1: valor1; propiedad2: valor2; ... }
El selector es el tipo de elemento HTML al que se aplicará el estilo indicado. Por
ejemplo:
p { color: red; background-color: green; }
En ese ejemplo, el selector es el tipo de elemento párrafo (p), por tanto cada párrafo
que tenga el documento HTML se mostrará con texto en rojo (red) y fondo en verde (green).
Otro ejemplo puede ser:
a { font-family: Arial; font-size: 14px; }
Donde se indica que los elementos de tipo enlace (a) del documento HTML se
muestran con el tipo de letra Arial y en tamaño 14.
Cuando varios elementos tienen los mismos atributos con valores idénticos, se pueden
declarar de forma agrupada. A continuación se ve un ejemplo de tres elementos con estilos
idénticos declarados de forma normal:
span {
color: blue;
background-color: gray;
}
h1 {
color: blue;
background-color: gray;
}
p {
color: blue;
background-color: gray;
}
Ese ejemplo escrito de forma agrupada quedaría:
span, h1, p {
color: blue;
background-color: gray;
}
Cuando el estilo se especifica dentro del propio elemento HTML, la sintaxis genérica
es:
<selector style="propiedad1: valor1; propiedad2: valor2; ... ">
Por ejemplo:
<a style="color: red; background-color: black; "
href="http://www.google.es>Ir a google</a>
En el ejemplo, ese enlace concreto de la página HTML se mostrará con texto rojo y
fondo negro. Vemos que aparte del formato indicado en style, dentro de la etiqueta <a> se
incluye el resto de atributos del elemento, en este caso el atributo href. El navegador mostrará
ese enlace de la siguiente forma:
En un documento HTML, cuando un elemento está dentro de otro, el primero se llama
hijo del segundo. Por ejemplo, en el siguiente código el elemento <body> es el padre y <p> es
el hijo:
<body>
Con este texto comienza la parte del cuerpo de la web. El body es el elemento padre.
<p>Esto es un elemento hijo de body</p>
</body>
Si se aplica una propiedad al elemento padre y esa propiedad no la tiene el elemento
hijo, éste la hereda del padre. Por ejemplo, si la propiedad color se define para body y no para
el párrafo, éste se mostrará con el color del body:
<head>
<title>T&iacute;tulo de la p&aacute;gina</title>
<style type="text/css">
body { color: blue; }
</style>
<body>
Este texto se muestra con el color azul definido en head para body, blue.
<p>Este texto se muestra en azul, porque para el parrafo no hay definido
color, pero hereda el color del padre, body, por estar dentro </p>
</body>
Veamos las distintas propiedades o atributos CSS que se pueden utilizar.
6.4. Atributos principales.
En los siguientes subapartados vamos a ver los atributos principales que se usan en
CSS como son:
Atributos de color.
Atributos de fuente.
Atributos de texto.
Atributos de caja.
Atributos de clasificación.
6.4.1. Atributos de color y fondo.
color:
Color del texto. El valor del color puede indicarse de tres maneras:
- El nombre del color en inglés: yellow, green, black, etc. Por ejemplo:
color: red;
- El símbolo # seguido de 3 parejas de dígitos hexadecimales; cada pareja indica la
cantidad de color rojo, verde y azul (rgb, red green blue) respectivamente, para que al
mezclarlos se obtenga el color deseado. Por ejemplo, si mezclas la máxima cantidad de rojo y
de verde, se obtiene amarillo, lo cual sería:
color: #ffff00;
Cada pareja de dígitos hexadecimales va desde 00 hasta ff (cada dígito puede valer 0,
1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f). Por ejemplo, si queremos mezclar poca cantidad de rojo,
mucha de verde y media de azul, podría ser #33ee88. Cada pareja puede tener los dos dígitos
distintos, por ejemplo una cantidad de rojo de af es más que a0.
El negro es: #000000
El blanco es: #ffffff
Los grises se obtienen mezclando la misma cantidad de los tres colores (rojo, verde y
azul), por ejemplo #999999 (o por ejemplo #919191).
Un gris claro (que está cerca del blanco) se obtiene mezclando la misma cantidad de
los 3 colores, pero mucha cantidad, por ejemplo: #bbbbbb (o por ejemplo #b8b8b8).
Un gris oscuro (que está cerca del negro) se obtiene mezclando la misma cantidad de
los 3 colores (rojo, verde y azul), pero poca cantidad, por ejemplo: #333333 (o por ejemplo
#3a3a3a).
- La tercera forma de indicar un color es:
color: rgb(xxx,xxx,xxx);
Ahora la cantidad (xxx) de rojo, verde y azul se indica con un valor de 0 a 255, por
ejemplo el amarillo (rojo más verde) sería:
color: rgb(255, 255, 0);
background-color:
Color de fondo del elemento. El valor del color se indica del mismo modo indicado
anteriormente.
background-image:
Coloca una imagen de fondo del elemento. El valor de esta propiedad es
url("fichimg.ext"), donde fichimg.ext es el nombre del fichero que almacena la imagen, con su
ruta relativa o absoluta (ext puede ser gif, png, jpg, etc.). Por ejemplo:
body { color: blue; background-image: url("./images/fondo.gif"); }
En ese caso, la imagen está en la carpeta images, la cual se sitúa en el mismo directorio
donde se encuentra la página HTML.
Si la imagen está en otro servidor, puede indicarse su URL completa:
body { color: blue; background-image: url("http://www.servid.es/img/fondo.gif"); }
Una imagen con zonas transparentes dejará ver por detrás el color de fondo del
elemento en cuestión.
Por defecto, la imagen se muestra repetida hasta cubrir toda la extensión del
elemento. Esto puede modificarse con el atributo siguiente.
background-repeat:
Indicar si la imagen de fondo se repite o no. Si no se usa este atributo, la imagen se
repite en horizontal y vertical, pero si se utiliza los valores posibles son:
repeat: la imagen se repite en horizontal y en vertical; es el valor por defecto.
no-repeat: la imagen sólo se muestra una vez, sin repetirse.
repeat-x: la imagen se repite en horizontal.
repeat-y: la imagen se repite en vertical.
body {
background-image: url("./fondo.gif");
background-repeat: repeat-y;
}
background-attachment:
Puede tomar los valores:
scroll: la imagen se desplaza a la vez que mueves el contenido de la página; es el valor
por defecto.
fixed: la imagen queda fija en la ventana, por lo que no se mueve a la vez que el
contenido de la página cuando desplazas éste en vertical u horizontal.
background-position:
Posición de la imagen en la página. El valor por defecto es 0% 0%. Veamos los valores
posibles con ejemplos:
background-position: 30px 100px;
La imagen se coloca 30 pixels desde el borde derecho de la ventana y 100 píxeles
desde el borde superior. Si se ponen los valores 0px 0px la imagen aparece pegada a la esquina
superior izquierda.
background-position: 50% 20%;
La imagen se coloca en la mitad (50%) de la anchura de la ventana y a un 20% de la
altura total de la página desde el borde superior.
background-position: left top;
La imagen se coloca pegada a la izquierda y arriba. La pareja de valores puede ser:
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
Si sólo se indica un valor, el otro tomará el valor center.
background:
Con este único atributo se pueden aplicar los anteriores sobre fondo. Por ejemplo:
background: red url("./fondo.gif") no-repeat fixed left center;
6.4.2. Atributos de fuente.
font-size:
Tamaño de la fuente (texto), que puede expresarse de forma absoluta o relativa. El
valor puede indicarse en:
- px (píxeles): tamaño relativo a la resolución del monitor; será por tanto
independiente del tamaño de fuente establecido en el navegador, de este modo el tamaño del
texto lo controla el creador de la página web y no el usuario; con la herramienta zoom del
navegador sí podrá cambiarse el tamaño de la vista de la página, y por tanto del texto.
font-size: 20px;
- em: tamaño relativo al tamaño de fuente establecido en el navegador, por lo que la
página se ajustará a los distintos tamaños que tengan los usuarios establecidos en sus
navegadores; permitirá al usuario cambiar el tamaño de texto con la herramienta del
navegador correspondiente; el valor 1em equivale al tamaño de fuente especificado en el
navegador; el valor por defecto de los navegadores para el tamaño de texto es 16px; con ese
tamaño, un valor de 1.5em mostrará el texto en 24 píxeles (1,5x16=24); como vemos se usa el
punto decimal en lugar de coma.
font-size: 1.5em;
- % porcentaje: tamaño relativo al tamaño de fuente del navegador; si el navegador
tiene tamaño de 16px y se indica en la página 150%, el texto se verá a 24px.
font-size: 150%;
- mm (milímetros), cm (centímetros), in (inch o pulgadas), pt (puntos): tamaños
absolutos, siendo 1cm = 10mm, 1in = 2,54cm, 1pt = 0.353mm.
Todas ellas se denominan unidades CSS: px, em, mm, cm, in y pt.
Si no se especifica font-size, el valor por defecto es 1em, es decir una vez el tamaño de
fuente indicado en el navegador, que por defecto es 16px.
font-family:
Tipo de letra (familia de fuente). Se deben especificar varios (separados por comas),
por si el navegador no admite alguno, lo intenta con el siguiente.
font-family: "Times New Roman", Times, Arial;
font-weight:
Grosor de los caracteres. Los valores posibles son: normal (valor por defecto), bold
(negrita), bolder (más negrita), lighter (más fina), 100, 200, 300, 400, 500, 600, 700, 800 o 900
(400 equivale al valor normal y 700 equivale a bold).
font-weight: bolder;
font-style:
Se suele usar para mostrar texto en cursiva. Los valores posibles son: normal, italic,
oblique (muy parecida a cursiva).
font-style: italic;
font-variant:
Fuente normal o mayúsculas pequeñas. El texto en mayúsculas no se ve afectado, pero
el texto en minúsculas se mostrará en mayúsculas pero más pequeñas que las mayúsculas
normales. Los valores son: normal (por defecto) o small-caps.
font-variant: small-caps;
line-height:
Altura de línea, es decir tamaño del interlineado o espaciado entre líneas. Se puede
especificar de la misma forma que font-size (px, em, %, mm, cm, in, pt). Si se usan las unidades
em o %, estarán referidas al tamaño de fuente establecida. Por ejemplo, si el tamaño de
fuente es 30px y ponemos "line-height: 1em;", la altura de línea será 30px (una vez el tamaño
de la fuente); si ponemos "line-height: 100%;", también la altura de línea será de 30px.
Por ejemplo, para que la altura de cada línea sea 1.5 veces el tamaño de fuente,
pondremos:
line-height: 1.5em;
Por defecto, el texto (o cualquier otro objeto) se muestra en la mitad de la altura de la
línea, es decir que no queda pegado a la parte inferior de la línea. Por ejemplo, si tenemos una
altura de línea mucho mayor que el tamaño del texto y pintamos una raya para separar una
línea de otra, quedaría:
El texto aparece en la mitad de la altura de la línea
El texto aparece en la mitad de la altura de la línea
El texto aparece en la mitad de la altura de la línea
font:
Para especificar varios de los atributos anteriores con una sola directiva. Se pueden
establecer los valores de: font-style, font-variant, font-weight, font-size/line-height y font
family, en ese mismo orden. No es necesario indicar todas las propiedades. En el siguiente
ejemplo no se indica el valor de font-variant.
font: italic bold 20px/32px Arial, Serif;
6.4.3. Atributos de texto.
text-decoration:
Establece si el texto está subrayado, sobrerayado o tachado. Los valores que puede
tomar son: none (valor por defecto), underline (subrayado), overline (sobrerayado) y linethrough (tachado).
text-decoration: line-through;
Suele utilizarse para quitar el subrayado con el que se muestran los enlaces de una
página web (links, elementos a):
a {
text-decoration: none;
}
text-align:
Alineación horizontal del texto. Los valores que puede tomar son: left (izquierda), right
(derecha), center (centrado) y justify (justificado, todas las líneas se ajustan a la misma
longitud).
text-align: center;
text-indent:
Indentación (inserción de espacios por la izquierda o tabulación) de la primera línea de
un bloque de texto.
El valor se le indica con una longitud, expresada en los mismos términos indicados en
el elemento font-size (px, em, mm, pt, %, etc.). El valor por defecto es 0 (cero).
Si se expresa en %, será el porcentaje sobre la anchura del elemento padre. Por
ejemplo, si un párrafo (elemento hijo) está dentro del body (elemento padre), cuando el body
ocupa toda la anchura de la ventana, al definir para el párrafo un "text-indent: 50%;", la
primera línea de éste comenzará en la mitad de la ventana. Otra forma de expresarlo en con
em:
text-indent: 3em;
text-transform:
Transforma el texto en cuanto a mayúsculas y minúsculas. Los valores posibles son:
none (no cambia el texto, valor por defecto), uppercase (todo en mayúsculas), lowercase (todo
en minúsculas) y capitalize (la primera letra de cada palabra en mayúsculas y las letras
restantes no las modifica).
text-transform: capitalize;
text-shadow:
Sombra del texto. Por ejemplo:
text-shadow: 5px -5px 3px grey;
Como vemos, se indican 4 valores: el primero será el desplazamiento horizontal de la
sombra respecto al texto (valores negativos muestran la sombra más a la izquierda que el
texto); el segundo valor será el desplazamiento vertical de la sombra respecto al texto (valores
negativos muestran la sombra más arriba que el texto); el tercer valor es el difuminado de la
sombra (un valor alto muestra la sombra más borrosa que uno bajo; valores negativos no se
deben usar, ya que hacen que la sombra desaparezca); el cuarto valor será color de la sombra.
En ese ejempo, el texto se mostrará con una sombra de color gris claro, 5 píxeles más a
la derecha y 5 más arriba que el texto; la sombra saldrá borrosa por el 3px. El resultado podría
ser:
Si no ponemos difuminado (0px) y color gris claro:
text-shadow: 5px -5px 0px lightgrey;
Quedaría la sombra nítida:
word-spacing:
Espaciado entre palabras. Los valores posibles son: normal (valor por defecto) y una
longitud expresada como se indicó en el apartado font-size. Se puede poner una longitud con
valor negativo, lo cual puede provocar que el inicio de una palabra aparezca encima del final
de la anterior.
word-spacing: -3px;
letter-spacing:
Espaciado entre caracteres de un texto. Los valores posibles son: normal (valor por
defecto) y una longitud expresada como se indicó en el apartado font-size. Se puede poner una
longitud con valor negativo, lo cual puede provocar que unas letras se superpongan sobre
otras.
letter-spacing: -2px;
vertical-align:
Alineación vertical. Sólo afecta a elementos inline (de línea), es decir a elementos
distintos que se muestran en una misma línea; algunos de esos elementos pueden ajustarse a
la parte superior de la línea, otros a la parte inferior, otros al centro, etc.; o sea, todos esos
elementos se pueden colocar a distintas alturas dentro de la altura de línea establecida (lineheight).
Además la alineación vertical afecta al elemento y no a su contenido, por ejemplo:
p {
line-height: 200px;
vertical-align: top;
}
El texto contenido en ese párrafo no se ajustará a la parte superior (top) de la línea de
200 píxeles. Ese vertical-align no hará nada, ya que un párrafo no es un elemento inline (es de
bloque).
Se puede probar con el siguiente ejemplo:
<head>
<title>Ejemplo</title>
<style type="text/css">
body {
line-height: 2em;
}
span {
line-height: 1em;
vertical-align: top;
background-color: pink;
}
</style>
</head>
<body>
Texto en l&iacute;nea. <span>Este elemento est&aacute; en l&iacute;nea.</span>
</body>
El navegador muestra:
Si cambiamos el valor "top" por "bottom", quedaría:
Con imágenes:
<head>
<title>Ejemplo</title>
<style type="text/css">
img {
vertical-align: top;
}
</style>
</head>
<body>
Texto en l&iacute;nea. <img src="./imagen.gif" alt="prueba"/>
</body>
En el navegador aparece:
Si cambiamos "top" por "middle":
Cuando vertical-align se aplica a celdas de una tabla, afectará al contenido de la celda y
no a la celda como elemento.
Los valores posibles para vertical-align son:
- baseline: línea base, es el valor por defecto; alinea la línea base de un elemento con
la línea base del elemento padre.
- sub/super: alinea como subíndice/superíndice respectivamente.
- top/bottom: alinea la parte superior/inferior del elemento con la parte
superior/inferior del elemento más alto/bajo de la línea.
- middle: alinea al medio del elemento padre.
- text-top/text-bottom: alinea el elemento con la parte superior/inferior de la fuente
del elemento padre.
- % (porcentaje): sube o baja el elemento el porcentaje indicado sobre la altura de
línea (line-height). Se pueden usar valores negativos (para desplazar hacia abajo).
- Un valor (longitud): sube o baja el elemento el valor indicado; este valor puede estar
expresado como font-size (em, px, mm, etc.). Admite valores negativos (para desplazar hacia
abajo).
6.4.4. Atributos de caja.
Cada elemento HTML puede ser considerado como una caja (box) más su contenido;
esta caja rodea al elemento y está formada por los márgenes del elemento, los bordes y los
padding (espacio entre contenido y borde).
margin-left:
margin-right:
margin-top:
margin-bottom:
margin:
Margen izquierdo (left), derecho (right), superior (top) e inferior (bottom), es decir que
se insertan espacios por la izquierda, derecha, arriba y abajo respectivamente. Se puede
expresar en cualquier unidad CSS, como las indicadas en la propiedad font-size. También
puede utilizarse un porcentaje (%), que será sobre la anchura del elemento padre; por
ejemplo:
body {
width: 600px;
}
p {
margin-left: 50%;
}
...
<body>
<p>ESTE PARRAFO COMIENZA EN LA MITAD DE LA ANCHURA DE BODY,
QUE SON 600 PIXELES, ES DECIR QUE SE LE INSERTAN ESPACIOS POR
LA IZQUIERDA HASTA QUE OCUPEN 300 PIXELES.
</p>
</body>
Si se aplica un margen de 50% al elemento body, que es el primero y por tanto no
tiene padre, ese porcentaje estará referido a la anchura de la ventana del navegador.
Se puede utilizar el valor "auto", para que el navegador lo calcule, por ejemplo:
margin-top: auto;
La zona de margen es transparente, no tendrá el color de fondo que tenga el elemento
con margen, pero sí tiene el color de fondo del elemento padre. Por ejemplo, un margen de un
párrafo tendrá el color de fondo del body (si éste es el padre del párrafo).
Se puede utilizar el atributo "margin" para indicar los cuatro márgenes en una sola
instrucción, en el orden superior, derecha, inferior e izquierda; por ejemplo:
p {
margin: 50% 20px 4em 1cm;
}
Margen superior: 50 % de la anchura del elemento padre.
Margen derecho: 20 píxeles.
Margen inferior: 4 veces el tamaño de fuente.
Margen izquierdo: 1 centímetro.
Si con "margin" sólo se pone un valor, ese valor es aplicado al margen por los 4 lados;
por ejemplo, un margen de 20 píxeles por los 4 lados se indicará como sigue:
p {
margin: 20px;
}
Sin embargo, también se pueden poner 2 o 3 valores, con el siguiente significado:
- "margin" con 3 valores: el primer valor para margen superior, el segundo para
derecho e izquierdo, el tercero para inferior; si queremos un margen superior de 25 píxeles,
derecho e izquierdo de 20 píxeles e inferior de 10 píxeles, sería:
p {
margin: 25px 20px 10px;
}
- "margin" con 2 valores: el primer valor será para margen superior e inferior, el
segundo para derecho e izquierdo; si queremos un margen de 30 píxeles por arriba y abajo y
de 20 píxeles por la izquierda y derecha, sería:
p {
margin: 30px 20px;
}
Si se le pone margen izquierdo y/o derecho a distintos elementos inline (en la misma
línea), esos elementos quedarán separados entre ellos. Se puede usar por ejemplo para
mostrar varias imágenes seguidas en horizontal con separación entre las mismas.
border-style:
Los elementos de una página web pueden tener bordes, es decir que aparecen
rodeados de líneas por algunos de sus lados (superior, derecho, inferior e izquierdo). Con
border-style se indica el estilo del borde.
Los valores posibles son: none (sin borde, es el valor por defecto), dotted (con
puntitos), dashed (rayitas, línea discontinua), solid (borde normal, una línea), double (borde
con línea doble); además los valores groove, ridge, inset y outset son bordes con varios efectos
3D que varían en función del color del borde. Por ejemplo, un párrafo con fondo amarillo y
estilo de borde "ridge" tendrá el siguiente código y se verá como sigue:
p {
width: 450px;
border-style: ridge;
background-color: yellow;
}
En border-style se pueden indicar 1, 2, 3 o 4 valores, con el siguiente significado:
- 1 valor: ese valor se aplica a los 4 lados.
- 2 valores: primer valor para borde superior e inferior; segundo valor para derecho e
izquierdo.
- 3 valores: primer valor para borde superior; segundo valor para derecho e izquierdo;
tercer valor para borde inferior.
- 4 valores: para bordes superior, derecho, inferior, izquierdo en ese orden.
Por ejemplo, para bordes punteados por arriba y abajo, y de línea doble por la derecha
e izquierda, será:
border-style: dotted double;
border-top-color:
border-right-color:
border-bottom-color:
border-left-color:
border-color:
Indica el color del borde superior, derecho, inferior e izquierdo respectivamente. El
color se especifica como ya se explicó en el atributo color (con su nombre en inglés; con # y 3
parejas de dígitos hexadecimales; con rgb() y tres valores de 0 a 255).
border-top-color: #8866aa;
El color por defecto para el borde es el color del elemento que se quiere bordear.
Se pueden establecer los colores para los 4 lados con un sólo atributo llamado bordercolor, en orden superior, derecho, inferior y derecho; por ejemplo:
border-color: gray yellow blue green;
En border-color se pueden indicar 1, 2, 3 o 4 valores, con el mismo significado que en
border-style en cuanto a los bordes afectados en cada caso.
border-top-width:
border-right-width:
border-bottom-width:
border-left-width:
border-width:
Grosor del borde superior, derecho, inferior e izquierdo respectivamente. Los posibles
valores son thin (fino), medium (medio, que es el valor por defecto), thick (grueso) o un grosor
expresado en cualquier unidad CSS (px, em, mm, etc.).
border-bottom-width: thick;
border-left-width: 10px;
Se pueden establecer los grosores para los 4 bordes con un sólo atributo llamado
border-width, en orden superior, derecho, inferior y derecho; por ejemplo:
border-width: thick medium thin 11px;
En border-width se pueden indicar 1, 2, 3 o 4 valores, con el mismo significado que en
border-style en cuanto a los bordes afectados en cada caso.
padding-top:
padding-right:
padding-bottom:
padding-left:
padding:
Indica el espacio entre los bordes de un elemento y su contenido. Ese espacio se
especifica en cualquier unidad CSS (px, em, mm, pt, etc.). También puede expresarse en un
porcentaje (%) sobre la anchura del elemento padre. Aunque el elemento no tenga bordes,
padding también funciona, es decir que deja espacio alrededor del elemento, para que otros
elementos no queden pegados a él.
padding-right: 20px;
Se pueden establecer los espacios entre borde y contenido por los 4 lados con un sólo
atributo llamado padding, en orden superior, derecho, inferior y derecho; por ejemplo:
padding: 10px 1em 12pt 3mm;
En padding se pueden indicar 1, 2, 3 o 4 valores, con el mismo significado que en
border-style en cuanto a los bordes afectados en cada caso.
El espacio entre el borde y el contenido se rellenará con el color de fondo establecido
para el elemento en cuestión.
width:
height:
Anchura y altura respectivamente de un elemento. Los posibles valores son auto (el
navegador lo calcula, es el valor por defecto), una longitud expresada en unidad CSS (px, em,
cm, etc.) o un porcentaje (%) aplicado sobre la anchura y altura del elemento padre. Por
ejemplo, si un párrafo de anchura 600 píxeles contiene una imagen con "width: 10%;", ésta se
mostrará con una anchura de 60 píxeles.
width: 10%;
La anchura o altura especificada no incluirá los bordes, los padding ni los márgenes.
Cuando no se indica el atributo width o height, se toma el valor por defecto, que es
"auto", es decir el navegador lo decide. Por ejemplo, si para una imagen se indica la altura
(height), pero no la anchura (width), el navegador la muestra con la altura indicada, y en la
anchura utiliza el valor adecuado para que la imagen no pierda su proporción original (para
que no se deforme). Si la imagen original es de 600x400 píxeles (anchura x altura) y se indica:
img {
height: 200px;
}
El navegador la mostrará con el tamaño de 300x200, ya que así no se deformará.
Cuando se le aplica width y/o height a una imagen, esta no se recorta o se rellena con espacio
blanco, sino que se muestra entera pero reducida o ampliada según el tamaño especificado.
Se puede indicar anchura y altura de un párrafo para marcar el rectángulo donde
aparecerá el contenido de dicho párrafo, pero si el contenido no cabe en ese rectángulo se
mostrará fuera mientras no se indique lo contrario, no se cortará dicho contenido. Por
ejemplo, marcamos el tamaño de un párrafo con fondo verde, pero su contenido sigue
mostrándose fuera de ese fondo:
p {
width: 200px;
height: 50px;
background-color: green;
}
...
<p>ESTE PARRAFO ES DE 200x50 PIXELES. SI ESTE TEXTO NO CABE EN
ESE RECTANGULO, SEGUIRA MOSTRANDOSE FUERA.</p>
float:
Alinea un elemento a la izquierda o la derecha, dejando el lado contrario (derecho o
izquierdo) libre para ser ocupado por otros elementos (si caben); éstos por tanto no se
muestran debajo, sino ocupando ese espacio libre.
El uso de float sobre los distintos elementos de una página puede resultar complicado,
con resultados inesperados. Para facilitarlo, siempre debe tenerse en cuenta que cada
elemento de la página ocupará el primer espacio libre que encuentre, siempre que quepa en
ese espacio (depende de su anchura y altura).
El atributo float se usa frecuentemente con imágenes, para que el texto rodee a la
misma. Si no usamos float, la imagen no deja espacio libre a su lado.
<body>
<img src="./imagen.jpg" alt="prueba"/> Tanto la imagen como este texto
son elementos inline, por lo que se muestran seguidos en la misma
l&iacute;nea; pero cuando el texto no cabe, salta a la siguiente
l&iacute;nea, debajo de la imagen, debido a que esta imagen no tiene
float.
</body>
Quedaría:
Si ponemos float a la imagen por la izquierda:
img {
float: left;
}
El mismo código anterior (cambiando el texto) se mostraría como sigue:
Un párrafo seguido de una imagen aparecerá siempre debajo de ésta, ya que el párrafo
no es elemento inline (ya que comienza en una nueva línea, es un elemento de bloque); pero si
la imagen tiene float, el párrafo se mostrará al lado de la imagen, no debajo.
img {
float: right;
}
p {
background-color: yellow;
}
body {
<img src="./imagen.jpg" alt="prueba"/>
<p>ESTO ES UN PARRAFO</p>
<p>ESTO ES OTRO PARRAFO</p>
<p>ESTO ES UN TERCER PARRAFO</p>
}
Debe tenerse en cuenta que los elementos anteriores al elemento float (dentro de
body) no se verán afectados por el float; el atributo float afecta sólo a los elementos escritos
después. Por ejemplo, si en el código anterior escribimos primero los párrafos y después la
imagen con float:
img {
float: right;
}
p {
background-color: yellow;
}
body {
<p>ESTO ES UN PARRAFO</p>
<p>ESTO ES OTRO PARRAFO</p>
<p>ESTO ES UN TERCER PARRAFO</p>
<img src="./imagen.jpg" alt="prueba"/>
}
El navegador mostrará primero los párrafos (no ocupan el espacio libre a la izquierda
de la imagen) y después más abajo la imagen:
clear:
Indica si un elemento puede tener otro elemento float por alguno de sus lados. Por
tanto, con clear limpiamos el lado indicado (o ambos) del elemento en cuestión, para que no
se muestre nada.
El atributo clear se aplica a elementos que no tengan atributo float.
Los valores posibles son: left (nada por la izquierda), right (nada por la derecha) o both
(nada por ambos lados).
Con el código siguiente, aplicando un clear al tercer párrafo (con style en el propio
elemento); los dos primeros párrafos quedan a la izquierda de la imagen, pero el tercero se
desplaza debajo:
img {
float: right;
}
p {
background-color: yellow;
}
body {
<img src="./imagen.jpg" alt="prueba"/>
<p>ESTO ES UN PARRAFO</p>
<p>ESTO ES OTRO PARRAFO</p>
<p style="clear: right">ESTO ES UN TERCER PARRAFO</p>
}
6.4.5. Atributos de clasificación.
display:
Permite indicar que un elemento se comporte como inline (de línea) o de bloque,
aunque no lo sea. Por ejemplo, si un elemento por defecto es de bloque, como un párrafo, con
display podemos hacer que se comporte como inline. El siguiente código mostrará los párrafos
como aparecen a continuación:
<p>ESTO ES UN PARRAFO</p>
<p>ESTO ES OTRO PARRAFO</p>
<p>ESTO ES UN TERCER PARRAFO</p>
Pero si añadimos el atributo display del modo:
p {
display: inline;
}
Los párrafos quedan seguidos (en línea):
Una imagen es inline; si tiene texto a continuación, se mostrará en la misma línea que
la imagen. Pero si ésta tiene el atributo "display: block;" el texto quedará debajo, no en línea.
white-space:
Indica qué hacer con los espacios en blanco de un elemento. Los valores posibles son:
- normal: varios espacios seguidos quedan en uno sólo; es el valor por defecto.
- nowrap: varios espacios seguidos quedan en uno sólo; además un texto largo no pasa
a la siguiente línea (nowrap) aunque no quepa en la ventana del navegador; para ver el texto
que no quepa se usará la barra de desplazamiento horizontal de esa ventana. El texo pasará a
la siguiente línea cuando se encuentre un salto de línea <br/>.
- pre: mantiene los espacios tal y como están (no quita ninguno aunque estén
seguidos), pero el texto no pasa a la siguiente línea (como ocurre con nowrap).
list-style-type:
Especifica el símbolo que se utiliza como marcador en las listas. Los valores posibles
son: disc (disco, valor por defecto), circle (círculo), square (cuadrado), decimal (número, 1, 2, 3,
...), lower-roman (número romano en minúsculas), upper-roman (número romano en
mayúsculas), lower-alpha (letras en minúsculas: a, b, c, ...), upper-alpha (letras en mayúsculas:
A, B, C, ...) y none (sin marcador). Por ejemplo, el siguiente código muestra la lista que se
muestra a continuación:
<head>
<title>Ejemplo</title>
<style type="text/css">
ol {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<ol>
<li>UNO</li>
<li>DOS</li>
<li>TRES</li>
</ol>
</body>
list-style-image:
Indica la imagen que se desea usar como marcador en una lista. El valor será
"url(fichero)", es decir el nombre del fichero que contiene la imagen, incluyendo la ruta
(carpetas donde se encuentra el fichero). Por ejemplo, si en el directorio donde se encuentra la
página web hay una carpeta llamada "imagenes" que contiene la imagen marcador.gif,
pondríamos:
ul {
list-style-image: url("./imagenes/marcador.gif");
}
Podría quedar una lista como:
Si la imagen está en otro servidor se pondrá el URL completo, del modo:
ul {
list-style-image: url("http://www.serv.es/carpe/marc.gif");
}
list-style-position:
Indica la posición del marcador en una lista. Los valores son:
- outside: el marcador queda fuera del flujo del texto; es el valor por defecto.
- inside: el marcador queda dentro del flujo del texto; es decir añade más espacio por
la izquierda (indentación adicional).
Para ver la diferencia podemos poner color de fondo a los elementos de la lista (<li>);
observaremos que con inside los marcadores quedan dentro del color de fondo y con outside
quedan fuera.
ul {
list-style-type: square;
list-style-position: inside;
}
li {
background-color: pink;
}
Cambiando en ese código inside por outside, los marcadores quedarán fuera del color
rosa:
Comparado con el resto del texto de la página web, vemos que con "inside" la lista
queda más a la derecha que con "outside":
list-style:
Establece los atributos list-style-type, list-style-position y list-style-image, en ese
orden, en una sola línea.
ul {
list-style: square inside url("./imagen.gif");
}
Si se pone una imagen como marcador, no tendrá efecto el list-style-type (square en el
ejemplo anterior).
Si en list-style no se especifica tipo de marcador, se aplica el valor por defecto, es decir
disc. La siguiente lista estará marcada con discos:
ul {
list-style: inside;
}
Si en list-style no se especifica posición del marcador, se aplica el valor por defecto, es
decir outside. La siguiente lista tendrá los marcadores en posición outside:
ul {
list-style: square;
}
6.5. CSS de posicionamiento.
top:
bottom:
left:
right:
Indican la posición de un elemento. Pueden expresarse en unidades CSS como px, em,
pt, etc., así como en porcentaje (%).
Con top se indica la posición donde aparecerá la parte superior del elemento y con left
la parte izquierda; igualmente con bottom para la parte inferior y right para la parte derecha.
Para indicar la posición se suelen utilizar sólo top y left.
img {
top: 20px;
left: 35px;
}
En ese ejemplo la parte superior de la imagen se mostrará en el píxel 20 y la parte
izquierda en el píxel 35.
position:
z-index:
El atributo position indica el tipo de posicionamiento de un elemento. Permitirá
colocar un elemento detrás de otro (superpuestos).
Los atributos top, bottom, left y right indicarán la posición del elemento, pero con el
atributo position se especificará el comportamiento del elemento en esa posición.
El posicionamiento puede ser static, fixed, relative y absolute.
Por defecto, el posicionamiento es estático (static), es decir el normal según el flujo de
la página web. Los atributos top, bottom, left y right no afectan a los elementos con
posicionamiento estático.
p {
position: static;
}
El posicionamiento fijo (fixed) es relativo a la ventana del navegador. Aunque se haga
scroll (desplazar vertical u horizontalmente) en el navegador, el elemento quedará fijo, no se
moverá. El siguiente código se muestra del modo indicado a continuación:
span {
position: fixed;
top: 30px;
left: 40px;
background-color: yellow;
}
...
<body>
ESTE TEXTO NO TIENE POSICIONAMIENTO FIXED.<br/>
ESTE TEXTO NO TIENE POSICIONAMIENTO FIXED.<br/>
ESTE TEXTO NO TIENE POSICIONAMIENTO FIXED.<br/>
ESTE TEXTO NO TIENE POSICIONAMIENTO FIXED.<br/>
<span>AQUI SI HAY POSITION: FIXED</span><br/>
ESTE TEXTO NO TIENE POSICIONAMIENTO FIXED.<br/>
ESTE TEXTO NO TIENE POSICIONAMIENTO FIXED.<br/>
</body>
Como vemos, el elemento span (fondo amarillo) se muestra en una posición (píxel
superior 30px e izquierdo 40px) encima del resto de texto; si desplazas la ventana hacia abajo,
ese elemento no se mueve. Los elementos fixed no siguen el flujo normal de la página. El
espacio donde se coloca el elemento fixed también estará ocupado por los otros elementos de
la página, que quedarán por detrás (tapados) del elemento fixed.
El posicionamiento relativo (relative) es relativo a su posición normal, es decir que se
desplaza desde la posición donde debería aparecer normalmente. Por ejemplo:
span {
position: relative;
left: 20px;
top: -30px;
background-color: yellow;
}
...
<body>
ESTE TEXTO NO TIENE POSICIONAMIENTO.<br/>
ESTE TEXTO NO TIENE POSICIONAMIENTO.<br/>
ESTE TEXTO NO TIENE POSICIONAMIENTO.<br/>
<span>AQUI SI HAY POSITION: RELATIVE</span><br/>
ESTE TEXTO NO TIENE POSICIONAMIENTO.<br/>
ESTE TEXTO NO TIENE POSICIONAMIENTO.<br/>
</body>
Como en el ejemplo, se pueden usar valores negativos con el siguiente efecto: un top
negativo mueve el elemento hacia arriba; en bottom hacia abajo; en left hacia la izquierda; en
right hacia la derecha. Los valores positivos lógicamente tienen el efecto contrario.
El posicionamiento absoluto (absolute) es relativo al primer elemento padre que tenga
posicionamiento diferente de static; si no hay ninguno, será relativo al elemento <html>, que
es lo más habitual. La diferencia con fixed es que ahora si se hace scroll en la ventana el
elemento absolute sí se mueve. Por ejemplo:
span {
position: absolute;
left: -25px;
top: 35px;
background-color: yellow;
}
...
<body>
ESTE TEXTO NO TIENE POSICIONAMIENTO.<br/>
ESTE TEXTO NO TIENE POSICIONAMIENTO.<br/>
ESTE TEXTO NO TIENE POSICIONAMIENTO.<br/>
<span>AQUI SI HAY POSITION: ABSOLUTE</span><br/>
ESTE TEXTO NO TIENE POSICIONAMIENTO.<br/>
ESTE TEXTO NO TIENE POSICIONAMIENTO.<br/>
</body>
El espacio que ocupa el elemento absolute también estará ocupado por los otros
elementos de la página, que quedarán por detrás (tapados) del elemento absolute.
Cuando se especifica posicionamiento, si no se indican atributos para colocar el
elemento (top, left, bottom o right), éste quedará en el lugar que le corresponda según el flujo
normal de la página.
Como puede suponerse, además se ve en los ejemplos anteriores, al usar
posicionamiento pueden superponerse distintos elementos de una página; con el atributo zindex se indica el orden de superposición (el elemento que va debajo y el que va encima),
como si fueran capas; un z-index mayor estará en una capa más arriba que uno menor. Por
ejemplo:
span {
position: absolute;
top: 35px;
left: 25px;
background-color: yellow;
z-index: 2;
}
img {
position: absolute;
top: 15px;
left: 25px;
z-index: 1;
}
...
<body>
ESTE TEXTO NO TIENE POSICIONAMIENTO.<br/>
ESTE TEXTO NO TIENE POSICIONAMIENTO.<br/>
ESTE TEXTO NO TIENE POSICIONAMIENTO.<br/>
<span>AQUI SI HAY POSITION: ABSOLUTE</span><br/>
ESTE TEXTO NO TIENE POSICIONAMIENTO.<br/>
<img src="./fondo.gif" alt="prueba"/><br/>
ESTE TEXTO NO TIENE POSICIONAMIENTO.<br/>
</body>
Vemos que el elemento span (z-index:2) queda por encima de la imagen (z-index:1). El
texto normal sin posicionamiento tiene por defecto z-index:0, por lo que si ponemos a la
imagen z-index:-1 (negativo), quedará por detrás del texto, del modo:
visibility:
Indica si el elemento será visible o no. Los valores que puede tomar son: visible (por
defecto), hidden (oculto ocupando espacio) y collapse (oculto sin ocupar espacio, para tablas).
Un elemento "hidden" no se muestra pero sigue ocupando su espacio.
El valor "collapse" se suele aplicar a filas de tablas; se puede aplicar a otros elementos,
pero en ese caso tiene el mismo efecto que "hidden". Cuando se aplica a una fila de una tabla,
dicha fila no será mostrada y además su espacio será ocupado por la fila siguiente. Si en lugar
de "collapse" se usara "hidden", la fila en cuestión no se mostraría pero seguiría ocupando el
espacio, es decir que quedaría la tabla con una fila en blanco.
overflow:
Indica si el contenido de un elemento será visible o no en caso de superar los límites
de la caja del elemento. Los valores que pueden tomar son:
- visible: el contenido no se corta, será visible; es el valor por defecto.
- hidden: el contenido se corta, la parte que no quepa en la caja se oculta.
- scroll: el contenido sobrante no se muestra, pero se añaden barras de
desplazamiento horizontales y verticales para poder consultarlo.
- auto: como scroll, pero sólo se añaden las barras de desplazamiento cuando sea
necesario.
Por ejemplo, con un párrafo de 200x150 píxeles de tamaño y fondo rosa, si el texto
contenido no cabe, se verá de la siguiente forma con cada una de las 4 opciones posibles de
overflow:
p {
width: 200px;
height: 150px;
background-color: pink;
overflow: visible;
}
...
<p>ESTE TEXTO ESTA EN UN PARRAFO DE 200x180 PIXELES. SI NO CABE
EN ESA ZONA, PUEDE SEGUIR VISIBLE FUERA DEL MISMO, O SE PUEDEN COLOCAR
BARRAS DE SCROLL HORIZONTALES Y/O VERTICALES, O SIMPLEMENTE SE PUEDE
CORTAR EL TEXTO SOBRANTE.</p>
overflow: visible
overflow: hidden
overflow: scroll
overflow: auto
clip:
Selecciona una zona rectangular de un elemento, para que sólo se muestre esa zona,
recortando el elemento:
clip: rect (top, right, bottom, left);
Se indica el píxel superior, derecho, inferior e izquierdo, en ese orden.
La propiedad clip sólo funciona con elementos que tienen posicionamiento (atributo
position) fixed o absolute.
Los cuatro datos que se proporcionan (top, right, bottom, left) deben medirse desde la
esquina superior izquierda del elemento. Por ejemplo, un elemento de 200x150 píxeles
(anchura x altura), al aplicar clip: rect(10,170,100,20) se cortarán las siguientes zonas: por
arriba no se mostrará desde el píxel 0 hasta el 10 (realmente hasta el 9, el 10 sí se muestra) no
se mostrará; por la derecha no se mostrará desde el píxel 170 hasta el 200; por abajo no se
mostrará desde el píxel 100 hasta el 150; por la izquierda no se mostrará desde el píxel 0 hasta
el 20. En el siguiente dibujo, la zona punteada no sería mostrada, se cortaría, quedando visible
sólo la zona central blanca:
6.6. Unidades de tamaño.
Como ya se ha explicado dentro del atributo font-size, son varias las unidades que se
usan en CSS. Estas unidades pueden ser relativas o absolutas.
Las relativas son:
- px (píxeles): tamaño relativo a la resolución del monitor; será por tanto
independiente del tamaño de fuente establecido en el navegador, de este modo el tamaño del
texto lo controla el creador de la página web y no el usuario; con la herramienta zoom del
navegador sí podrá cambiarse el tamaño de la vista de la página, y por tanto del texto.
font-size: 20px;
- em: tamaño relativo al tamaño de fuente establecido en el navegador, por lo que la
página se ajustará a los distintos tamaños que tengan los usuarios establecidos en sus
navegadores; permitirá al usuario cambiar el tamaño de texto con la herramienta del
navegador correspondiente; el valor 1em equivale al tamaño de fuente especificado en el
navegador; el valor por defecto de los navegadores para el tamaño de texto es 16px; con ese
tamaño, un valor de 1.5em mostrará el texto en 24 píxeles (1,5x16=24); como vemos se usa el
punto decimal en lugar de coma.
font-size: 1.5em;
- % porcentaje: tamaño relativo al tamaño de fuente del navegador; si el navegador
tiene tamaño de 16px y se indica en la página 150%, el texto se verá a 24px.
font-size: 150%;
Las unidades absolutas son:
- mm (milímetros), cm (centímetros), in (inch o pulgadas), pt (puntos): tamaños
absolutos, siendo 1cm = 10mm, 1in = 2,54cm, 1pt = 0.353mm.
Todas ellas se denominan unidades CSS: px, em, mm, cm, in y pt.
6.7. Definición y uso de clases.
Hasta ahora, al especificar un estilo indicamos previamente el tipo de elemento al que
se le va a aplicar (párrafo, imagen, tabla, etc.); por ejemplo, antes de elegir un color de fondo
rojo, hay que indicar para qué tipo de elemento será. Ese tipo de elemento lo hemos llamado
"selector" al inicio de este documento:
selector {
propiedad1: valor1; propiedad2: valor2; ... ;
}
Primero ponemos "selector" y después las propiedades o atributos con sus valores.
Con el uso de clases eso puede cambiar. Podremos definir una serie de propiedades
con sus valores sin especificar el "selector" (tipo de elemento), es decir sin decidir previamente
a qué se le aplicará. La sintaxis para declarar una clase es:
.nombre_de_clase {
propiedad1: valor1;
propiedad2: valor2;
... ;
}
Por ejemplo:
.clase_blanco_negro {
color: white;
background-color: black;
}
Las clases se pueden declarar en un fichero CSS externo o en la sección <style> que
colocamos en la cabecera (etiqueta <head>) de la página web.
Para aplicar esa clase a un elemento de la página se indica en el código HTML, dentro
del propio elemento (en la sección <body> de la página), usando el atributo class con la
sintaxis:
<elemento class="nombre_de_clase">CONTENIDO DEL ELEMENTO</elemento>
Por ejemplo:
<p class="clase_blanco_negro">CONTENIDO DEL PARRAFO, QUE APARECE CON
TEXTO EN BLANCO SOBRE FONDO NEGRO.</p>
Aunque se aplique class a un elemento (como el párrafo del ejemplo anterior), éste
puede tener también definido un estilo normal; si algún atributo coincide en la clase y en el
estilo normal, tiene prioridad el de la clase, que sobrescribirá al otro. Por ejemplo:
<style type="text/css">
.clase_blanco_negro {
color: white;
background-color: black;
}
p {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
...
<body>
<p class="clase_blanco_negro">A ESTE PARRAFO SE LE APLICA UN ESTILO
NORMAL Y UN ESTILO CON CLASE. SI COINCIDE ALGUN ATRIBUTO, TIENE
PRIORIDAD LA CLASE, POR EJEMPLO ESTE PARRAFO TENDRA COLOR DE FONDO
NEGRO (BLACK) EN LUGAR DE ROSA (PINK); EL BACKGROUND-COLOR ESTA
DEFINIDO EN LA CLASE Y EN EL ESTILO DE PARRAFO.</p>
</body>
Una clase queda abierta, para aplicarla a cualquier elemento, pero también se puede
restringir su uso a algún tipo de elemento concreto (selector). Para ello la declaración de la
clase tiene la sintaxis:
selector.nombre_de_clase {
propiedad1: valor1;
propiedad2: valor2;
... ;
}
Por ejemplo, si declaro una clase para que sólo pueda aplicarse a los párrafos,
tendremos:
p.clase_blanco_negro {
color: white;
background-color: black;
}
Para aplicar esa clase a un elemento debemos mantener el atributo class según se ha
indicado previamente. Para el caso del párrafo del ejemplo anterior, si se escribe un párrafo
sin atributo class no se le aplicará el estilo de la clase, pero sí otros estilos normales que
tuviera definidos. Por ejemplo:
<style type="text/css">
p.clase_blanco_negro {
color: white;
background-color: black;
}
p {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
...
<body>
<p class="clase_blanco_negro">A ESTE PARRAFO SE LE APLICA UN ESTILO
NORMAL Y UN ESTILO CON CLASE (TIENE ATRIBUTO CLASS); TENDRA COLOR DE
FONDO NEGRO (BLACK) EN LUGAR DE ROSA (PINK).</p>
<p>A ESTE PARRAFO NO SE LE APLICA EL ESTILO CON CLASE PORQUE NO TIENE
ATRIBUTO CLASS. SE LE APLICA EL ESTILO NORMAL Y TENDRA COLOR DE FONDO
ROSA (PINK).</p>
</body>
Por tanto, según ese ejemplo anterior con el uso de clases pueden aplicarse distintos
estilos a un mismo tipo de elemento; varios párrafos a los que se les aplique distintas clases
tendrán estilos diferentes.
Se puede obtener un resultado similar al de una clase (class) con otra sintaxis.
Podemos escribir el siguiente código en el fichero externo .css o en la sección <style>:
#rojo {
color: red;
}
Como vemos, en el lugar donde se pone el punto usado en una clase CSS, aquí se pone
la almohadilla #.
Para aplicar ese estilo a un elemento del fichero HTML, en lugar de utilizar el atributo
class como en una clase CSS, se usa el atributo id del elemento en cuestión, del modo:
<p id="rojo">Este párrafo se muestra en color rojo</p>
En id debe escribirse el nombre utilizado en la #, al definir el estilo (rojo en este caso).
Como se ha indicado en un apartado anterior, el atributo id debe ser distinto para cada
elemento del documento HTML, por lo que ese estilo sólo puede aplicarse a un elemento. Es
decir, el siguiente código dará error al validarlo en W3C:
<p id="rojo">Este párrafo se muestra en color rojo</p>
<h3 id="rojo">Este texto con encabezamiento h3 se muestra en rojo</h3>
Ese error aparece porque hay dos elementos con el mismo valor (rojo) en su atributo
id.
Por tanto, la sintaxis de la almohadilla # (con id) sólo se puede utilizar cuando se va a
aplicar el estilo a un solo elemento del documento HTML. Sin embargo, la sintaxis del punto .
(con class) se puede utilizar para aplicar estilo a muchos elementos.
6.7.1. Pseudoclases en CSS.
Existen clases ya predefinidas en CSS, porque ya tienen un nombre asignado (no lo
elige el programador) y un significado; lo que elige el programador son las propiedades y sus
valores. La sintaxis es:
selector:pseudoclase {
propiedad1: valor1;
propiedad2: valor2;
... ;
}
Como vemos en esa sintaxis, la pseudoclase va siempre asociada a un selector (un tipo
de elemento), no se puede quedar abierta como ocurre con las clases.
Por ejemplo, la pseudoclase "hover" (ya viene predefinida en CSS) aplica las
propiedades indicadas cuando el ratón pasa por encima del elemento. En este ejemplo, el
párrafo cambiará a fondo rojo y texto azul cuando se ponga el ratón encima (sin necesidad de
pulsar):
p:hover {
background-color: red;
color: blue;
}
Las pseudoclases más frecuentes son:
- active: se aplica a enlaces (elementos a); las propiedades elegidas se aplican desde que se
pulsa el enlace hasta que aparece la nueva página (a veces no da tiempo a verlo).
a:active {
background-color: black;
color: gray;
}
- hover: las propiedades elegidas se aplican al pasar el ratón por encima del elemento.
a:hover {
background-color: white;
color: gray;
}
- link: se aplica a enlaces (elementos a); las propiedades elegidas se aplican a los enlaces no
visitados.
a:link {
background-color: red;
color: green;
}
- visited: se aplica a enlaces (elementos a); las propiedades elegidas se aplican a los enlaces
visitados.
a:visited {
background-color: green;
color: blue;
}
- checked: afecta a formularios; las propiedades elegidas se aplican a los elementos del
formulario que estén "checked" (marcados). Por ejemplo, los elementos marcados se
desplazan 5 píxeles desde la izquierda hacia la su derecha.
input:checked {
position: relative;
left: 5px;
}
- focus: afecta a elementos input de formularios; las propiedades elegidas se aplican al
elemento input del formulario que tenga el focus (donde esté el cursor).
input:focus{
background-color: red;
position: relative;
top: 15px;
}
Con esa sintaxis de pseudoclases se aplica el estilo a todos los elementos de la página
web. Por ejemplo, con a:hover{ color: red; } al pasar el ratón por encima de
todos los enlaces de la página se verán en rojo. Pero si no queremos ese mismo estilo para
todos los elementos puede utilizarse otra sintaxis, que veremos con un ejemplo:
a.estilo1:hover { color: red; }
a.estilo2:hover { color: green; }
Al aplicar esos estilos en el documento HTML podemos escribir:
<a class="estilo1" href="...">Primer enlace</a>
<a class="estilo2" href="...">Segundo enlace</a>
En ese caso, al pasar el ratón por encima del primer enlace se verá en rojo, mientras
que el segundo enlace se verá en verde.
