i.e.s. suárez de figueroa @vanza c.f.g.s. administración de...
TRANSCRIPT
I.E.S. Suárez de Figueroa @vanza
C.F.G.S. Administración de Sistemas Informáticos en Red Módulo "Lenguajes 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++, con la opción "Ejecutar" del menú superior.
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, por tanto 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 HTML 4.0 //EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
o 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 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">
o 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á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 Inglés (Gran Bretaña) en-US Inglés americano es Español fr Francés fr-CA Francés de Canadá ja 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.
Algunas etiquetas o elementos no funcionan correctamente con versiones antiguas de
navegadores. 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; guárdalo en un archivo con extensión .html; 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 Mayúsculas á á Á Á é é É É í í Í Í ó ó Ó Ó ú ú Ú Ú ñ ñ Ñ Ñ Por ejemplo, la á se sustituye por á del modo:
<body>Contenido de la pá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.
Elementos no contenedores: <base> 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 blanco. </pre> </body> 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. Por otro lado, para insertar varios espacios seguidos en un HTML puede usarse la notación que corresponde al espacio en blanco. Por ejemplo: <body> Varios espacios en blanco seguidos en esta línea. </body> El navegador mostrará: Varios espacios en blanco seguidos en esta línea. <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 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 style="background-color: yellow">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>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.
<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.
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.
<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 usa el estilo list-style-type, como veremos más adelante. <li></li>
Cada entrada de una lista ordenada (posteriormente veremos que este elemento <li> también se utiliza en listas desordenadas). En el navegador se muestran los distintos elementos de la lista dejando espacio por la izquierda. <ol style="list-style-type:upper-roman"> <li>XML</li> <li>HTML</li> <li>XHTML</li> </ol>
Se puede crear listas anidadas: <ol style="list-style-type:decimal"> <li>XML</li> <li>HTML</li>
<ol style="list-style-type:lower-alpha"> <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 con el estilo list-style-type; las opciones son círculo, cuadrado, disco o nada. Los elementos de la lista 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 list-style-type, por ejemplo: <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">Elemento</a>
Inserta un enlace o hipervínculo (link); URL será la dirección del enlace; el "Elemento" puede ser un texto, una imagen, etc. y queda marcado como enlace, de forma que al pulsar sobre él se muestra el enlace del URL. 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:[email protected]">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, con # delante) 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. Como vemos, la etiqueta area shape no lleva la barra / de cierre de etiqueta al final. No hay que poner la barra de <area shape ... />. No es necesaria esa barra, ya que el cierre lo marca la etiqueta </map>. <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é</td>
<td>120</td> </tr> </tbody> </table> <caption></caption> La etiqueta caption permite poner un título antes de la primera fila de la tabla, centrado. Esta etiqueta se coloca debajo de table, del modo: <table style="border-style:solid; width: 200px;"> <caption style="background-color:lightblue;"> 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> El navegador mostrará:
<colgroup></colgroup> Permite especificar un grupo de columnas, para poder aplicar 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> Se utiliza dentro de colgroup para ir indicando el estilo de cada grupo de columnas de la tabla. La etiqueta span permitirá indicar cuantas columnas abarca el elemento col en cuestión. Si en una <col> no se pone span, se toma como span=1. 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> <thead> <tr> <th>Cliente</th> <th>Tfno</th>
<th>Email</th> <th>Saldo</th> </tr> </thead> <tr> <td>Juan</td> <td>666777666</td> <td>[email protected]</td> <td>1000</td> </tr> <tr> <td>José</td> <td>655555999</td> <td>[email protected]</td> <td>800</td> </tr> <tr> <td>David</td> <td>644555444</td> <td>[email protected]</td> <td>1100</td> </tr> </table> Como los estilos suelen colocarse en un fichero CSS externo, los distintos estilos de los elementos col se indican mediante clases, del modo: <colgroup> <col class="FondoAzul"> <col span="3" class="FondoVerde"> </colgroup> Al final de esta unidad se aborda el concepto de clase. Atributos colspan y rowspan. 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. <head> <title>Ejemplo colspan</title> <style type="text/css"> td, th { border-style: solid; } </style> </head> <body> <table> <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> </body> 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. <head> <title>Ejemplo rowspan</title> <style type="text/css"> td, th { border-style: solid; } </style> </head> <body> <table> <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> </body> Con ese código, la celda "Tfnos:" abarcará dos filas; el navegador mostrará:
Una tabla con todos los elementos vistos podría quedar: <table> <caption style="background-color:orange">Datos de Clientes</caption> <colgroup> <col style="background-color:lightblue"> <col span="3" style="background-color:lightgreen"> </colgroup> <thead> <tr> <th>Cliente</th> <th colspan="2">Tfno y email</th> <th>Saldo</th> </tr> </thead> <tfoot style="background-color:yellow;"> <tr> <td colspan="4">PIE DE TABLA</td> </tr> </tfoot> <tbody> <tr> <td>Juan</td> <td>666777666</td> <td>[email protected]</td> <td>1000</td> </tr> <tr> <td rowspan="2">José</td> <td>655555999</td> <td>[email protected]</td> <td>800</td> </tr> <tr> <td>651111188</td> <td>[email protected]</td> <td>800</td> </tr> <tr> <td>David</td> <td>644555444</td> <td>[email protected]</td> <td>1100</td> </tr> </tbody> </table> El navegador muestra:
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ítulo de la página</title> </head> <body> PÁGINA WEB PRINCIPAL<br/> Esta página tiene 3 marcos, para mostrar una pá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és de los marcos puede haber más contenido de la pá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. Estos 2 valores siempre se toman en píxeles, excepto cuando se añade el símbolo % (width="50%"), en cuyo caso indica que el marco ocupará ese porcentaje respecto al elemento padre (respecto a la ventana del navegador en este caso). Si el marco estuviera dentro de una tabla, sería el porcentaje referido al tamaño de la tabla (la tabla sería el elemento padre).
Los tres marcos anteriores 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. En este caso no es necesario usar el atributo src del iframe. Por ejemplo:
<body> <iframe width="500" name="Marco1"></iframe> <br/> <a href="http://www.suarezdefigueroa.es" target="Marco1">I.E.S. Suá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, que vemos a continuación. Un formulario se abre con la etiqueta <form> al principio y se cierra con la etiqueta </form> al final, colocando entre ambas etiquetas todos los campos que formen parte del formulario. Éste suele incluir un botón "Enviar" (tipo "submit" que veremos más adelante), el cual envía todo lo que esté dentro de las etiquetas <form>...</form>. Lógicamente no debe crearse una etiqueta <form> para cada campo, sino para todos los campos que componen el formulario.
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"> <input type="number" name="name" min="míni" max="máxi" value="defec" step="salto">
Elemento que permite introducir un número en el campo llamado "name". El número puede introducirse por teclado o pulsando con el ratón sobre las flechitas de aumentar o disminuir el valor. <body> <form> Edad:<br/> <input type="number" name="Edad" min="0" max="99" value="18" step="0.5"> </form> </body>
El navegador mostrará:
El valor que aparecerá por defecto al abrir la página será el indicado en value. El valor mínimo se indica con min y el máximo con max. El salto al pulsar las flechitas será el indicado en step (0.5 en este caso, es decir que avanza o retrocede 0.5 con cada pulsación). <input type="range" name="name" min="míni" max="máxi" value="defec" step="salto"> Elemento que permite elegir un valor a través de una barra de desplazamiento, en el campo llamado "name". <body> <form> Saldo:<br/> <input type="range" name="saldo" min="-50" max="50" value="10" step="5"> </form> </body>
El navegador mostrará:
El valor que aparecerá por defecto al abrir la página será el indicado en value. El valor mínimo se indica con min y el máximo con max. El salto al pulsar las flechitas será el indicado en step. <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í 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í <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" value="Lengua">Lengua <br/> <input type="checkbox" name="Mat" value="Matematicas">Matemáticas <br/> <input type="checkbox" name="Geo" value="Geografia">Geografía <br/> <input type="checkbox" name="Ing" value="Ingles">Inglés <br/> </form> </body> 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ó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áceres"> <option value="Mé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áticas <br/> <input type="checkbox" name="Geo" value="Geografia">Geografía <br/> <input type="checkbox" name="Ing" value="Ingles">Inglé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. El formulario suele tener los botones "Enviar" y "Borrar", del modo:
<form action="http://www.suarezdefigueroa.es/formu.php" method="GET"> <label for="nomb">Nombre:</label> <input type="text" name="nom" id="nomb"> <br/> <label for="ap">Apellidos:</label> <input type="text" name="apel" id="ap"> <br/> <input type="submit" value="Enviar"> <input type="reset" value="Borrar"> </form> Se verá como sigue:
<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á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én dentro de párrafo.<br/> Para ello viene bien el uso de la etiqueta span del modo <span style="color:blue">, estas palabras saldrá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úa el pá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. 3.3. Anchura de una página web. La gran diversidad de resoluciones de monitores, los distintos tamaños de ventanas del navegador y la amplia variedad de dispositivos donde se muestra una página web dificulta la decisión de la anchura más adecuada para dicha página.
Como veremos más adelante, la anchura puede indicarse de forma relativa o absoluta. Si se utiliza la forma relativa (en %), se presenta el problema de que la posición de los distintos elementos de la página puede cambiar en función de los factores indicados anteriormente (resolución, ventana, etc.), descolocándose dichos elementos respecto al diseño original. Lo más frecuente es usar una anchura absoluta expresada en píxeles (px). Hoy en día la anchura más habitual es de 960px, ya que se adapta bien a la mayoría de las resoluciones de monitor que se usan actualmente. Esa anchura debe indicarse para el elemento body de la página. Los elementos hijos de body, es decir el contenido de la página, se distribuirán teniendo en cuenta esa anchura total de 960px. Si se pusiera una anchura de página mayor, por ejemplo 1280px, y el monitor estuviera a 1024px, aparecería en el navegador la barra de desplazamiento horizontal para poder ver la página completa, que siempre resulta incómodo. Por ello, 960px es un buen valor. Lo que se suele hacer es poner la anchura de página a 960px y centrarla, de ese modo si la resolución del monitor tiene una anchura mayor (por ejemplo 1280px), el navegador simplemente deja los espacios laterales sin ocupar. Por tanto, para el elemento body de una página deben ponerse las reglas de estilo siguientes (veremos las reglas de estilo más adelante):
width: 960px; margin: 0 auto;
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 el programa "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++, 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. El código CSS, al igual que HTML, puede validarse en W3C, con la dirección:
https://jigsaw.w3.org/css-validator/ 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 o mediante <style> con import, como veremos más adelante.
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.
Los ficheros .css no tienen prólogo ni cabecera, sino que directamente se escriben las reglas de estilo como vamos a ver en los apartados siguientes. - 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ítulo de la pá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 h3 { color: green; } p { color: orange; font-family: Verdana; } Archivo HTML <!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ítulo de la página</title> <style type="text/css"> p { color: white; background-color:black; } </style> </head> <body> <p>Este párrafo se muestra en color de texto blanco, con fondo negro.</p> <p style=" color: green; background-color:yellow; ">Sin embargo, este pá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 tanto, queda:
selector { declaración; }
La declaración puede ser una pareja propiedad:valor o muchas del modo:
selector { propiedad1: valor1; propiedad2: valor2; propiedad3: valor3; etc etc
}
Por ejemplo, una regla será:
p { color: blue;
}
En este caso el selector es "p" (elemento párrafo de HTML); la declaración es una pareja de propiedad:valor, en este caso "color : blue", donde la propiedad es "color" y el valor
es "blue". Es decir, que el color del texto de cada párrafo que haya en el documento .html será azul.
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 píxeles. Un archivo CSS puede contener muchas reglas CSS; dicho archivo tendrá la extensión
.css después del nombre. Por ejemplo: UnFichero.css p {
color: blue; font-size: 2em;
} table { width: 300px; border-style: solid; } img { height: 100px; margin-left: 20px; border-style: solid; } 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. 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ítulo de la pá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> 6.3.1. Selectores descendentes. Existen los llamados selectores descendentes. Veámoslo con un ejemplo: p span { color: red; } Si una regla de estilo tiene dos (o más) selectores separados por un espacio, p y span en este caso, se trata de una regla con selectores descendentes. En ese ejemplo, el color rojo sólo se aplica a los elementos span que estén dentro de elementos p. Por ejemplo, si el documento html es:
<p>ESTO ES UN PARRAFO <span>Y ESTE SPAN ESTA DENTRO DEL PARRAFO </span> Y AQUI SIGUE EL PARRAFO</p> <span>ESTE SPAN NO ESTA DENTRO DE UN PARRAFO</span>
El navegador mostrará:
Como vemos, solo está rojo el span que está dentro del párrafo. Otro ejemplo:
table { width: 200px; border-style: solid; } img { width: 80px; } table img { width:150px; }
Si el html es:
<img src="./imagen01.jpg"> <table> <tr> <td><img src="./imagen02.jpg"></td> </tr> </table>
El navegador muestra:
Es decir, la imagen01 se ve con 80px de ancho (no está dentro de tabla), mientras que la imagen02 se ve con 150px de ancho, ya que está dentro de tabla. 6.4. Atributos principales.
En los siguientes subapartados vamos a ver las distintas propiedades o atributos principales que se usan en CSS como son:
Atributos de color y fondo. Atributos de fuente. Atributos de texto. Atributos de caja. Atributos de clasificación. Atributos de posicionamiento.
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 line-through (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 (line-height).
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ínea. <span>Este elemento está en lí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í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; Este valor "auto" hace lo siguiente: - En margen superior e inferior equivale a margen 0.
- Si margen derecho es 0 e izquierdo es auto, se pega a la derecha. - Si margen derecho es auto e izquierdo es 0, se pega a la izquierda. - Si márgenes derecho e izquierdo son auto, el elemento queda centrado.
Para centrar una página web en la ventana del navegador pueden aplicarse los
siguientes estilos al elemento body: width: 960px;
margin: 0 auto;
De ese modo la anchura es de 960 píxeles (la anchura habitual actualmente) y los márgenes superior e inferior son 0, mientras que los márgenes derecho e izquierdo son auto. Si no se indica nada, la página se coloca a la izquierda. 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 border-color, 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; si el contenido no cabe en el tamaño del párrafo, 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 del mismo:
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ínea; pero cuando el texto no cabe, salta a la siguiente lí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; por ejemplo, si un elemento li de
la lista tiene color de fondo (o borde), el marcador queda fuera de ese fondo (o borde); outside 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); si un elemento li de la lista tiene color de fondo (o borde), el marcador queda dentro de ese fondo (o borde).
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", ya que con "inside" la marca queda dentro del espacio dedicado al elemento li, mientras que con "outside" la marca queda fuera (más a la izquierda) del espacio dedicado al elemento li:
Debemos tener en cuenta que si el color de fondo se aplica a la lista (ol o ul) en lugar de aplicarlo al elemento li, las marcas quedan siempre dentro del color de fondo, tanto con inside como con outside. Por ejemplo: ul { list-style-type: square; list-style-position: outside; background-color: pink; } Se verá como sigue:
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.4.6. Atributos 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:
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. z-index: Como se ve en los ejemplos anteriores, al usar posicionamiento pueden superponerse distintos elementos de una página; con el atributo z-index 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.5. Unidades de medida (unidades CSS). 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 lo
controla el creador de la página web y no el usuario; con la herramienta zoom del navegador el usuario sí podrá cambiar el tamaño de la vista de la página. font-size: 20px;
<img src="./imag.jpg" style="width:200px;height:200px" alt="imagen"/> - 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 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;
<img src="./imag.jpg" style="width:10em;" alt="imagen"/> <!-- Esta imagen se muestra con anchura de 160px -->
- % porcentaje: tamaño relativo al tamaño de fuente del navegador (para elemento texto) o al elemento padre (para otros elementos); si el navegador tiene tamaño de 16px y se indica en la página 150%, el texto se verá a 24px. Para elementos que no sean texto, por ejemplo imagen, si se pone 50%, ocupará la mitad del tamaño del elemento padre, que podría ser la ventana del navegador; si la imagen está dentro de una tabla, ocuparía la mitad del tamaño de la tabla (en ese caso la tabla sería el elemento padre). font-size: 150%;
<img src="./imag.jpg" style="width:50%;" alt="imagen"/> 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.6. 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> Estas clases comentadas anteriormente son clases abiertas, es decir que pueden aplicarse a cualquier tipo de elemento. Sin embargo, 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 (que debe ser párrafo p) 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 puede aplicarse distintos estilos a un mismo tipo de elemento; si a cada párrafo aplicamos una clase diferente tendrán estilos diferentes. Por ejemplo, podemos declarar las clases p.clase_blanco_negro y p.clase_verde_azul; después podremos aplicar a unos párrafos la primera clase con <p class="clase_blanco_negro ...> y a otros párrafos la otra con <p class="clase_verde_azul" ...>.
Las clases abiertas, es decir con la sintaxis .nombreclase, en las cuales no se indica a qué tipo de elemento se va a aplicar, sólo deben utilizarse cuando la clase va a aplicarse a distintos tipos de elementos. Por ejemplo, si una clase se va aplicar a los párrafos (elementos p), a los enlaces (elementos a) y a las divisiones (elementos div), esa clase se puede dejar abierta con la sintaxis .nombreclase. Por el contrario, si una clase va a aplicarse sólo a un tipo de elemento, lo más correcto es declararla para ese tipo, con la sintaxis selector.nombreclase (selector es el tipo de elemento, por ejemplo para párrafo será p.nombreclase). Por otra parte, si se desea aplicar a un mismo elemento varias clases puede utilizarse la sintaxis en el HTML:
<elemento class="clase1 clase2">etc etc
Como vemos, se ponen las clases separadas por un espacio dentro del atributo class. 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 estilos a muchos elementos. 6.6.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;
} Con esa sintaxis, para aplicar la pseudoclase a los elementos del HTML no hay que indicar nada (no hay que poner class="..."), basta con definir la pseudoclase en el fichero CSS. En ese ejemplo anterior, se aplica la pseudoclase a todos los párrafos (p) usados en el fichero HTML, sin indicar nada en esos párrafos. Si en el HTML tenemos: <body> <p>PRIMER PARRAFO</p> <p>SEGUNDO PARRAFO</p> <p>TERCERPARRAFO</p> </body> A esos tres párrafos del ejemplo se les aplicará la pseudoclase hover. Más adelante se explica cómo se puede aplicar la pseudoclase a algunos párrafos y no a todos. 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 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; }
Para aplicar esas pseudoclases en el documento HTML escribimos: <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. De este modo podremos aplicar una pseudoclase sólo a algunos elementos del fichero HTML y no a todos. También se puede dar el siguiente caso. En el CSS tenemos las dos pseudoclases para los elementos a (enlaces) siguientes: a.estilo1:hover { color: green; } a:hover { color: red; } En el HTML podríamos tener los tres enlaces siguientes: <a href="...">Primer enlace</a> <a class="estilo1" href="...">Segundo enlace</a> <a href="...">Tercer enlace</a> El color rojo (red) se aplicará a todos los enlaces del HTML (primero y tercero en este ejemplo), excepto a los que tengan el atributo class="estilo1" (segundo en este ejemplo), a los que se les aplicará el color verde (green). Lógicamente eso es válido para otros tipos de pseudoclases CSS y de elementos HTML. 6.7. Ejemplo genérico.
A lo largo de la unidad se han expuesto una gran cantidad de ejemplos, pero en este apartado tenemos un caso general de documento HTML con los estilos declarados en un fichero CSS externo.
Lógicamente no incluye todos los elementos tratados, ni todos los estilos, pero sí presenta una idea general sobre la creación de una página completa, con diferentes elementos a los que se les aplican distintos estilos, clases, pseudoclases, etc. Fichero.css body { width: 960px; margin: 0 auto; border-style: solid; text-align: justify; } p { font-size: 1.3em; margin: 30px; } p.fondoazul { background-color: blue; color: yellow; } p.sombra { text-shadow: 3px 3px 2px green; letter-spacing: 4px; word-spacing: 10px; } .centrado{ text-align: center; } span { color: red; font-family: Arial; font-style: italic; } img { border-style: ridge; border-color: red; border-width: 8px; padding: 8px; } div{ background-color: lightblue; } pre { font-size: 17px; text-shadow: red; } a.rojo { color: red;
} a:hover { color: orange; } a:visited { color: yellow; } Fichero.html <!DOCTYPE html> <html> <head> <title>Ejemplo general</title> <link rel="stylesheet" type="text/css" href="./Fichero.css" /> </head> <body> <a id="Principio"></a> <p>Este es el primer párrafo.</p> <p class="fondoazul">Este es el segundo párrafo cuyo fondo es azul con fuente en amarillo, estilos aplicados mediante una clase. Sin embargo el <span>tamaño de fuente</span> se aplica por el estilo indicado para todos los párrafos del documento, sin usar clase.</p> <div> <p class="centrado">ESTE PÁRRAFO ESTÁ CENTRADO.<br/> La clase centrado se declara abierta (sin indicar el elemento al que se va a aplicar) porque se utiliza no solo en elemento p, también se aplica en elemento h2. Las clases se dejan abiertas cuando se van a utilizar en varios tipos de elementos, en caso contrario la clase debe declararse para el tipo de elemento al cual se va a aplicar.<br/> <a href="http://www.suarezdefigueroa.es" target="_blank"><img src="./imagen01.jpg" alt="Imagen Ejemplo"/></a><br/> La imagen también está centrada porque va dentro del párrafo. Además las imágenes del documento tienen borde. Esta imagen tiene asociado un enlace, ya que está dentro de "a href". </p> Para poner estos elementos con fondo azul, los incluyo dentro de un elemento div, al que le aplico el estilo "color de fondo". Este texto tiene un tamaño de fuente menor por no estar dentro de párrafo. </div> <h2 class="centrado"><b>Ir a <a href="http://avanza.educarex.es">Avanza</a> Ir a <a href="http://www.educarex.es" class="rojo">Educarex</a></b></h2> El enlace Educarex se muestra en rojo, usando una clase que no se aplica al otro enlace.<br/> <p class="sombra">Este último párrafo tiene otro estilo aplicado con otra clase.</p> <a href="#Principio">Ir al principio de la página (arriba).</a> </body> </html> El navegador mostrará:
