HTML y CSS
Departamento de Informática
I. E. S. Villa de Aspe.
1
I. E. S. Villa de Aspe
Departamento de Informática
Índice
Apuntes de CSS
Objetivos y alcance de este documento.........................................................................3
Analogía para describir HTML y CSS..............................................................................4
Repaso de HTML...........................................................................................................8
¿Qué es HTML?......................................................................................................8
Elementos del HTML...............................................................................................9
Etiquetas más comunes de HTML............................................................................11
Elementos de bloque y en línea..............................................................................12
Tablas.................................................................................................................13
Creación de página HTML.......................................................................................14
Otros elementos y caracteres especiales..................................................................14
Doctype...............................................................................................................18
Sección <head>...................................................................................................18
CSS........................................................................................................................20
¿Qué son las hojas de estilo?.................................................................................20
Formas y preferencias al aplicar estilos....................................................................21
Modelo de Cajas...................................................................................................26
Propiedades CSS..................................................................................................28
Unidades de medida..............................................................................................29
Colores................................................................................................................29
Elementos HTML div y span...................................................................................31
Posicionamiento de cajas.......................................................................................32
Versiones HTML / XHTML...........................................................................................36
2
Departamento de Informática
I. E. S. Villa de Aspe
Objetivos y alcance de este documento
Para sacar el máximo partido a un editor de páginas web como Kompozer, es aconsejable que
conozcamos los elementos esenciales de los HTML y CSS. Nos ayudará a crear mejores
páginas y a tener un mayor control sobre el diseño de las mismas.
Alguien preguntará ¿pero no aprende uno a utilizar un editor como Kompozer precisamente
para evitar 'enredarse' con esos lenguajes? Bueno, en cierta manera sí y no. Sí, en el sentido
de que no tenemos porque tener memorizados o conocer al detalle todas las etiquetas y
propiedades, sus atributos y sintaxis: el programa nos va ayudar en esta tarea de una manera
muy intuitiva.
Esa ayuda, en forma de botones, menús y en definitiva de una interfaz gráfica fácil de
entender, va a ser mucho más productiva si intentemos comprender qué estamos haciendo, o
mejor dicho, qué está haciendo el programa por nosotros. Además, nos ayudará a construir
páginas cada vez mejor diseñadas.
Vamos a ver que tanto HTML como CSS no son lenguajes de programación sino de marcado,
descriptivos de la estructura y presentación de la página que creamos, y por tanto de mucha
menor complejidad. Sus fundamentos y aplicación están al alcance de una persona sin
especiales conocimientos informáticos.
En cualquier caso, los apartados que vienen a continuación, no pretenden ser un manual
exhaustivo de HTML/CSS. Es solo un resumen completo para que nos sintamos cómodos y
no nos perdamos, trabajando con estos lenguajes al utilizar un editor de páginas web como
KompoZer. A partir de aquí, nuestro consejo es que sigáis aprendiendo para dominar mejor
estos lenguajes. Hay múltiples recursos (cursos, libros, tutoriales, páginas web) disponibles
sobre este tema, entre ellos se encuentran los siguientes:
http://html.conclase.net/tutorial/html/
http://es.html.net/
3
Departamento de Informática
I. E. S. Villa de Aspe
Analogía para describir HTML y CSS
Vamos a emplear una analogía que nos puede ayudar a comprender mejor el papel de cada
uno de estos lenguajes.
Consideremos una noticia en un periódico que llega al redactor jefe tal como aparece en la
imagen de abajo, como 'texto sin formato' (esta analogía no pretende ser un fiel reflejo del
proceso de publicación en un periódico, tan solo una situación que podamos entender
fácilmente). Vemos que el texto es legible, pero no es fácil comprenderlo, al menos en una
primera lectura rápida. El redactor, para preparar la noticia para su publicación marca con
rotuladores la estructura de la misma: dónde empieza y acaba la noticia, y sus diferentes
partes (titular, subtítulo principal, la fuente de la que proviene la noticia y los distintos párrafos
que la componen...).
Una vez marcada su estructura, y de acuerdo a la página del periódico donde se vaya a
publicar, el espacio que le vayan a dedicar y en general las normas de estilo de dicho
periódico, se definirá para esos elementos marcados que presentación tendrán, como por
ejemplo el diseño (o 'layout') o las tipografías a utilizar.
Ilustración 1: formateando una noticia de un medio impreso. Analogía con HTML/CSS
4
Departamento de Informática
I. E. S. Villa de Aspe
Para comprender mejor la analogía que estamos planteando, este marcado a mano de la
estructura o semántica del contenido de la noticia, podríamos representarlo (o haberlo hecho)
de una manera más detallada, utilizando etiquetas de inicio y fin para cada elemento que ha
identificado el editor. Para ello, utilizaremos brackets (paréntesis angulados) '< >'.
Ilustración 2: marcado de una noticia con etiquetas.
Similitud con HTML
A partir de este ejemplo, veamos el paralelismo que guarda con HTML y CSS. Si nos fijamos
en la siguiente imagen:
5
Departamento de Informática
I. E. S. Villa de Aspe
Ilustración 3: Funciones del HTML y de CSS
el lenguaje HTML juega el papel de las marcas o anotaciones que realizaba el redactor:
definen la estructura del documento, la semántica del contenido, lo que podríamos
denominar el marcado lógico del documento.
Si vemos con más detenimiento, las etiquetas que identifican el fin de un elemento llevan el
caracter '/'. Podemos ver que marcamos un inicio y un fin de la noticia (o en este caso, página)
con las marcas <html> y </html> respectivamente. Podemos adivinar también marcas para
los elementos destacados de la noticia, distintos al cuerpo de la misma: <h1>, <h2>, <h3> y
<h4> con sus respectivas acotaciones o finales: </hx>, que corresponden al titular, subtítulo,
autor y origen de la noticia. También podemos distinguir etiquetas para los párrafos (<p>),
otras que parecen definir secciones de la página (<div id=”titulares”, “columna izquierda”,
“columna derecha”>) y otras que quizás ahora no entendamos del todo (<head>, <title>,
<body>) y que iremos viendo.
A partir de este marcado HTML, el lenguaje de hojas de estilo (CSS) nos permitiría definir la
presentación o apariencia de dicha página web, mediante la aplicación de determinadas
reglas de estilo a cada elemento identificado en el contenido.
6
Departamento de Informática
I. E. S. Villa de Aspe
Comentario: en este ejemplo, el etiquetado no es exactamente igual
al realizado por el redactor. Aparecen elementos que tienen más que
ver con la presentación, como <div id=”columna_izquierda> y el
<div id=”columna_derecha”> y en cambio no vemos el mismo
significado semántico que conseguíamos con la etiqueta <fuente>.
Ambas objeciones son correctas, pero recordemos que utilizamos una
analogía, no una transcripción literal, para ayudarnos a comprender el
papel de HTML y CSS. Los divs 'columna' no marcan la estructura
interna del documento, pero nos sirven para aplicar estilos
posteriormente. HTML 'ayuda' en algunas funciones de presentación
(de hecho, hasta aparecer CSS, las ejercía él). En cualquier caso, no
dice cómo hay que presentar esos 'bloques'; podría decidirse que
“columna_izquierda” fuera arriba y “columna_derecha” abajo, o no
haber hecho nada con ellos. Es CSS la que lo determina como se
presentarán.
Igual ocurre con <fuente>. Podríamos haber definido un bloque con la
etiqueta <div id=”fuente”> englobando a <h3> y <h4>. La
flexibilidad de HTML, principalmente a través de los identificadores
'class' e 'id' que podemos colocar en ciertas etiquetas (y que veremos
más adelante) le permite ir más allá, pero no vamos a profundizar
para no apartarnos de lo que pretende ser un sencillo ejemplo
introductorio
7
Departamento de Informática
I. E. S. Villa de Aspe
Repaso de HTML
¿Qué es HTML?
Una vez presentados los conceptos generales, vamos a dar definiciones más precisas.
HTML son las siglas de: Lenguaje de Marcado (o Anotación) de Hipertexto ('HyperText Markup
Language')
No es propiamente un lenguaje de programación, sino de marcación, diseñado para estructurar
documentos mediante etiquetas.
Estas etiquetas no se visualizan, pero indican al navegador (recordemos, los programas que
nos ayudan a visualizar las páginas web en Internet: Firefox, Internet Explorer,...) qué tipo de
contenido es, para que pueda tratarlo/mostrarlo adecuadamente (por ejemplo: si es una
cabecera, un párrafo o una tabla). Por supuesto esto incluye uno de los elementos principales,
que de alguna manera es la seña de identidad del HTML: los enlaces de hipertexto, que
conectan a esa página con otros páginas, permitiendo al usuario 'navegar' por ese sitio y por
todos los sitios web a los que esté enlazado utilizando el protocolo HTTP (*).
Aunque originalmente el HTML permitía también indicar el formato de presentación, lo que
denominamos marcado físico, a partir de la versión 4, esa función se encomienda (**) a un
lenguaje de presentación específico: CSS, al que se conoce como 'Hojas de Estilo'.
Nota (*): HTTP: Protocolo de Transferencia de Hipertexto (HyperText
Transfer Protocol): es el sistema por el cuál se envían las peticiones
para acceder a una página web (el navegador/cliente) y la respuesta
de esa web (servidor) remitiendo la información.
Nota (**): según especificaciones del W3C, “Consorcio de la WWW”
Organismo encargado de coordinar y establecer los estándares en
Internet. Lo han definido muy acertadamente como 'la ONU de
Internet': no siempre los actores principales, como las empresas que
desarrollan software y que además forman parte de él, siguen a
rajatabla sus recomendaciones.
8
Departamento de Informática
I. E. S. Villa de Aspe
Elementos del HTML
Las páginas HTML se construyen con elementos que son identificados mediante etiquetas.
Estos elementos pueden definir:
1) Los 'contenedores' principales de la propia página (algo así como el armazón)
página HTML debe tener al menos esta estructura:
Toda
Ilustración 4: estructura de una página HTML
Nota: también es recomendable incluir antes de <html> el Doctype
de la página (en xhtml es obligatorio). Lo veremos más adelante.
2) Las distintas partes del contenido de la página: un encabezamiento un párrafo, una lista,
una tabla, una imagen, un enlace,... (veremos más adelante las más comunes)
3) Información sobre la página (las meta-etiquetas ó 'metatags') que no se muestra por el
navegador (p.ej.: el autor, descripción, conjunto de caracteres empleados,...)
Salvo algunas pocas excepciones, la parte de contenido que define una etiqueta se delimita
mediante una etiqueta de apertura y otra de cierre:
9
Departamento de Informática
I. E. S. Villa de Aspe
Las etiquetas pueden incluir información adicional mediante los atributos, que permiten:
•
Que un mismo elemento sea tratado de forma diferente.
P.ej: <h1 style=”font-family: Arial”>
(indica un tipo de fuente particular para h1)
•
Especificar algún valor necesario para ese elemento
P.ej: <a href=”http://iespascualcarrion.edu.gva.es”>IES SAX</a>
(indica a qué página enlaza ese vínculo)
La estructura general de una etiqueta con atributos sería:
Ilustración 5: estructura general de una etiqueta HTML
10
I. E. S. Villa de Aspe
Departamento de Informática
Etiquetas más comunes de HTML
Vamos a listar algunas de las etiquetas más utilizadas. Puedes consultar todas en algunas de
las páginas que indicamos en http://www.delicious.com/tallercpep/html.
<title></title>
título de la página que se muestra en el navegador
<hx></hx>
encabezamientos de orden/nivel x=1, 2, 3, 4, 5 ó 6
<p></p>
párrafo
<br> (ó <br/>
salto de línea (no tiene etiqueta de cierre)
<hr> (ó <hr/>)
línea horizontal
<div></div>
división
de
contenedor)
<span></span>
selecciona / delimita una porción de contenido
<table></table>
tabla
<tr></tr>
fila de la tabla
<td></td>
celda de la tabla
<ul></ul>
lista no numerada
<ol></ol>
lista numerada
<li></li>
cada elemento (item) de la lista
<img> (ó <img />)
Imagen. En esta etiqueta deberemos indicar cuál es el fichero
la
página
(define
un
área/sección como
imagen que utilizamos. Para ello empleamos el atributo src
(source: fuente), donde incluimos la URL (dirección) absoluta o
relativa del fichero : <img src”...” />
<a></a>
Enlace. En esta etiqueta debemos indicar la página web a la que
enlazamos. Para ello usamos el atributo href, donde incluimos la
URL (dirección) absoluta o relativa de dicha página: <a
href=”...”></a>. También es posible crear enlaces internos a
zonas dentro de la propia página con el atributo name.
<em></em>
texto enfatizado (itálica)
<strong></strong>
texto enfatizado (negrita)
<!-- -->
Comentarios. Para insertar comentarios en la página (no se
procesan ni se muestra en el navegador)
11
Departamento de Informática
I. E. S. Villa de Aspe
Comentario: algunas etiquetas de presentación se descartaron
en la versión HTML 4 (ver apartado versiones HTML) en favor del
lenguaje CSS específico para definir estilos. Aunque son 'obsoletas',
los navegadores suelen visualizarlas bien y aunque cada vez menos,
se siguen utilizando en muchos webs. Ejemplo destacado: la etiqueta
<font> que define las características de la fuente.
Aconsejamos introducir las etiquetas en minúscula. Proporciona
mayor claridad y uniformidad y cumple los estándares HTML y XHTML
Elementos de bloque y en línea
Un concepto importante que influye en las propiedades y tratamiento de los elementos de
contenidos, es la clasificación que HTML hace de ellos en dos grupos:
•
Elementos de bloque:
◦ empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la
línea.
◦ pueden contener elementos en línea
◦ algunos pueden contener a su vez otro elementos de bloque (por ejemplo, el
elemento div, que se utiliza como contenedor y que veremos más adelante)
◦ los bloques se apilan de arriba a abajo, es decir, cada uno ocupa todo el ancho de la
página, colocándose debajo del bloque que le precede en el código (X)HTML.
◦ Ejemplos: encabezamientos, párrafos, listas, tablas, divisiones,..
•
Elementos en línea:
◦ ocupan el espacio necesario para mostrar su contenido
◦ no pueden contener elementos de bloques
◦ siguen un flujo izquierda-derecha y arriba-abajo, es decir, se colocan al lado
derecho del anterior elemento en línea, salvo que no haya suficiente espacio
disponible, en cuyo caso se colocarán debajo, lo más a la izquierda posible.
◦ Ejemplos: enlaces, imágenes, énfasis,...
En el apartado de estilos (CSS), al explicar el modelo de cajas, volveremos sobre estas
características y el tratamiento que tienen a la hora de disponer los elementos en la página.
12
Departamento de Informática
I. E. S. Villa de Aspe
Tablas
Por ser un elemento muy utilizado con múltiples opciones, vamos a hacer una breve reseña de
ellas.
En la imagen vemos la representación de una tabla muy simple, de dos filas y dos columnas,
visualizando los elementos que corresponden a las etiquetas:
•
<table> (tabla)
•
<tr> ('table row', es decir, fila)
•
<td> ('table data', celda).
Vemos que no existe ninguna etiqueta 'columna'. En su lugar empleamos las 'celdas' definidas
en cada 'fila' para delimitarlas.
Ilustración 6: visualización etiquetado de tablas en HTML
Además de estos elementos básicos, las tablas pueden contener otros como: <thead>
(cabecera), <tbody> (sección), <tfoot> (pié), <caption> (título) ó <th> (celda de cabecera).
También pueden realizarse tablas con estructuras más complejas, por ejemplo uniendo
columnas o filas mediante los atributos colspan y rowspan, respectivamente, en la etiqueta
<td>. Podemos asimismo, fijar los tamaños (anchuras, alturas, espacio entre celdas, …), tipo
de bordes, fondos, y otra serie de propiedades.
No vamos a entrar en todas las posibilidades que nos ofrecen las tablas ya que excede de esta
breve introducción. No obstante, con un editor de páginas web, el tratamiento de las mismas
es similar al que podemos tener en un procesador de texto avanzado, con opciones de menú
en la barra de herramientas, menús contextuales y otras ayudas que facilitan enormemente la
tarea.
13
Departamento de Informática
I. E. S. Villa de Aspe
Creación de página HTML
Para crear una página HTML simplemente debemos generar un documento de texto sin
formato que incluya el contenido de la página, estructurado con las etiquetas adecuadas, y
guardándolo con la extensión '.html'
Aunque si utilizamos un editor de páginas web como KompoZer ya nos guarda la página con
dicha extensión, podríamos hacer una prueba con algún editor de textos simple, como el 'Bloc
de Notas' (ó Notepad), que viene instalado por defecto en Windows o bien el Editor de Textos
Gedit que viene incorporado en Linux.
Si utilizas Gedit, accede al programa en Aplicaciones/Accesorios/Editor de Textos y puedes
crear esta sencilla página (prueba.html):
Ilustración 7: fichero de texto guardado como página web
Otros elementos y caracteres especiales
Para finalizar esta rápida introducción al etiquetado HTML, mostramos otro ejemplo de página
Web, donde además de encabezamientos y párrafos, incluimos algunos de los elementos más
usuales:
•
Listas (en este caso no numerada)
•
Imagen
•
Enlace
•
Tabla
14
Departamento de Informática
I. E. S. Villa de Aspe
Asimismo, se han incluido algunos caracteres especiales como 'espacios en blanco', símbolo
'&', vocales acentuadas,...para los que necesitamos un tratamiento especial en HTML. Para ello
podemos emplear los denominados 'Entidades de Caracteres HTML' que permiten resolver los
siguientes problemas:
•
emplear caracteres que tienen un significado en HTML y que por lo tanto podrían
confundirse con parte del lenguaje si los utilizamos tal cual en el texto: < > & ' ”
•
poder introducir varios espacios en blanco seguidos,
•
introducir caracteres/símbolos que no están representados en nuestro teclado.
•
emplear, con la seguridad de ser representados adecuadamente, caracteres del
lenguaje que no pertenecen al conjunto mínimo común ASCII. Por ejemplo en español
las vocales acentuadas o la ñ, particulares de nuestro idioma (o por ejemplo, la ç ó los
acentos circunflejos en otros casos). Aunque en principio si utilizamos un conjunto de
caracteres como UTF-8, éstos están contemplados, la página pasará por diferentes
programas y sistemas operativos (navegador usuario, servidor web,...) y corre el riesgo
de que algún eslabón de la cadena no se utilice dicha codificación y la conversión no se
haga correctamente.
En el propio texto de la página se explican sus características y como incluirlos con la
expresión &código; (si bien, es algo de los editores HTML, como Kompozer, hacen
automáticamente sin necesidad de que tengamos que recordar dichos códigos)
Elementos div y span: aunque son elementos de HTML, dada su
estrecha relación con la aplicación de estilos, los veremos en la
sección dedicada a CSS
15
Departamento de Informática
I. E. S. Villa de Aspe
Ilustración 8: página web con caracteres especiales en su contenido (ver código HTML en
imagen siguiente)
16
Departamento de Informática
I. E. S. Villa de Aspe
Ilustración 9: código HTML correspondiente a la imagen anterior
17
Departamento de Informática
I. E. S. Villa de Aspe
Doctype
Al inicio de la página, antes de la etiqueta <html> los editores de páginas web como
KompoZer incluyen una declaración indicando que norma HTML ó XHTML seguimos y si
lo hacemos de forma estricta o no, (según lo hayamos definido previamente) para que el
navegador la interprete adecuadamente.
La ausencia de un Doctpe, podría hacer que algunas versiones de navegadores entren en lo
que se denomina 'quirck mode' con una incorrecta visualización de la página (esta cuestión es
un poco más enrevesada de lo que comentamos aquí tan brevemente. Si quieres conocer más
o
en
detalles
sobre
esto
puedes
consultar:
http://www.quirksmode.org/css/
http://www.cs.tut.fi/~jkorpela/quirks-mode.html).
No debemos preocuparnos por lo farragoso de la expresión, un editor como Kompozer la
colocará automáticamente mediante una sencilla selección de menú. Un ej.:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
En esta página de wikipedia (http://es.wikipedia.org/wiki/DOCTYPE)
diferentes versiones de Doctype y su explicación.
podemos
ver
las
Al final de este documento hemos incluido un apartado, explicando
brevemente las diferentes versiones de los lenguajes (HTML/XHTML)
Sección <head>
Como indicamos al principio de esta introducción, las páginas HTML se dividen en dos
secciones: el cuerpo, delimitado por las etiquetas <body></body> y donde incluimos el
contenido a visualizar en la página y una sección cabecera, delimitado por las etiquetas
<head></head>.
En esta sección <head>, incluimos meta-etiquetas con información acerca de la página, que
no se visualiza en el navegador (salvo la etiqueta <title>, que aparece como título de dicha
página en la pestaña del navegador).
En un editor de páginas web como Kompozer vemos que estos datos se pueden configurar en
un menú de propiedades para que se introduzcan automáticamente o bien, editarlos si
queremos introducir algún cambio. Mostramos un ejemplo de algunas de estas meta-etiquetas:
18
Departamento de Informática
I. E. S. Villa de Aspe
Ilustración 10: Meta-etiquetas en sección <head>
19
Departamento de Informática
I. E. S. Villa de Aspe
CSS
¿Qué son las hojas de estilo?
Una vez creada la estructura del documento y definido sus contenidos a nivel semántico con
(X)HTML, podemos darle una apariencia y presentación personalizada mediante la utilización
de CSS (Hojas de Estilo en Cascada / 'Cascade Style Sheets' ).
Con CSS podemos indicar el aspecto de cada elemento de la página, como por ejemplo, el tipo
de letra de un título, el color con que se mostrará un enlace o el interlineado de un párrafo o
una lista.
También veremos que CSS puede posicionar y dimensionar los distintos bloques de la página,
de forma que podamos establecer la disposición de todos los elementos en la misma.
Solo haremos una breve introducción para ver los conceptos básicos de CSS que nos ayuden a
entender mejor el diseño y la construcción de Sitios Web.
Ilustración 11: aplicación de estilos de presentación a una página web con CSS
20
Departamento de Informática
I. E. S. Villa de Aspe
Formas y preferencias al aplicar estilos
Las Hojas de Estilo (ó Estilos) se pueden incluir de 3 formas diferentes:
•
Estilo en línea: definido dentro de las propias etiquetas HTML
•
Hoja de estilo interna: en la sección <head> del mismo documento HTML
•
Hoja de estilo externa: en un archivo diferente al documento HTML
¿Por qué se denominan hojas de estilos 'en cascada'? Pues porque estas tres formas de
incluir estilos no son excluyentes y pueden combinarse (por ejemplo, utilizando una hoja de
estilos externa general e incluyendo estilos en línea en algunas etiquetas del documento). En
caso
de
conflicto,
prevalece
el
estilo
más
'interno'.
La
prioridad
es:
1ª - estilo en linea --> 2ª - hoja estilo interna --> 3ª - hoja estilo externa
Ejemplos:
1. Estilo en línea:
<p style=”color: blue; font-family: Tahoma;”>Texto con fuente Tahoma azul</p>
visualización:
Texto con fuente Tahoma azul
En el ejemplo de arriba, incluimos en una etiqueta párrafo <p>, el atributo 'style', cuyo valor
son dos características de estilo de la fuente a mostrar: color azul y tipografía Tahoma.
21
I. E. S. Villa de Aspe
Departamento de Informática
2. Hoja de estilo interna:
1. Incluimos las reglas de estilo entre las etiquetas:
<style type=”text/css”>..................</style>
2. Elegimos el elemento (selector) al que queremos dar un determinado
estilo de presentación (en este caso 'p': los párrafos) e incluimos entre llaves
“{}” las características que vamos a aplicarle:
p {font-family:...... ;
(acabadas en ';')
…................... ; }
(podemos agrupar varios selectores (p,h1 {....}) y/o declaraciones)
3. Cada característica (declaración), se compone de una propiedad (p.ej.
font-size - tamaño de letra) y un valor (en este caso:'large' – grande).
22
Departamento de Informática
(Sax)
Ilustración 12: estructura de una regla de estilo
23
Departamento de Informática
3.
I. E. S. Villa de Aspe
Hoja de estilo externa:
Incluimos la etiqueta <link> (enlace) en la cabecera del documento HTML.
En ella se describe:
– rel: tipo de relación; “stylesheet”: hoja de estilo
– href: la dirección URL donde se encuentra la hoja
– type: tipo de archivo (una CSS)
Creamos un fichero de texto sin formato donde incluiremos las reglas de
estilo que se aplicarán a ese documento HTML.
El nombre del archivo (y su dirección) debe coincidir con el incluido en el
atributo 'href' de la etiqueta <link>. Debe guardarse con la extensión '.css'
24
Departamento de Informática
I. E. S. Villa de Aspe
La utilización de CSS respecto a las antiguas etiquetas de estilo de HTML confiere importantes
ventajas, además de cumplir con los estándares y estructurar mejor los documentos. Dos de
ellas son: la posibilidad de reutilizar las hojas para distintas páginas y facilitar el
mantenimiento de un sitio web. Un simple ejemplo: podemos cambiar el tamaño del texto de
todos los párrafos modificando simplemente en el en el selector 'p' de la hoja de estilo, sin
tener que cambiar en cada etiqueta <p> de cada página web.
25
Departamento de Informática
I. E. S. Villa de Aspe
Modelo de Cajas
Otra función muy importante de los estilos, es aplicar dimensiones y posición a los elementos
HTML, basándose en el denominado Modelo de cajas, uno de los conceptos fundamentales de
CSS.
Según este modelo, los navegadores ven o tratan cada elemento en la página HTML como
una caja rectangular. Recordemos que HTML diferencia dos tipos de elementos: bloques y en
línea. De acuerdo a esas características la representación y disposición de los mismos en una
página sería del tipo que mostramos en la siguiente imagen:
26
Departamento de Informática
I. E. S. Villa de Aspe
Estas cajas se componen de diversos elementos:
CSS puede configurar las propiedades de estas cajas: dimensiones, espaciados de relleno
interior (padding), borde, imagen de fondo, color de fondo y márgenes, como veremos en el
apartado siguiente.
Nota: este esquema de caja (contenido, padding, borde y margen) es
tridimensional. Para completarlo, habría que añadir: 'imagen de
fondo' y 'color de fondo'. Podemos verlo en este gráfico:
http://www.hicksdesign.co.uk/boxmodel
27
I. E. S. Villa de Aspe
Departamento de Informática
Propiedades CSS
Existen numerosas propiedades que pueden controlarse con CSS. No vamos a listar todos
de forma exhaustiva, solo algunos ejemplos. En http://www.delicious.com/tallercpep/css
indicamos algunos sitios web donde consultar la referencia completa de propiedades.
Fuentes
Texto
Listas
Fondo
font-family: tipos
(arial,verdana,...). Se
puede especificar una
lista de opciones.
font-weight: grosor
font-size: tamaño
font-style: estilo
(itálica,..)
color: color
text-decoration:
efectos
(subrayado,...)
text-align: alineación
line-height:
interlineado
text-indent:
tabulación
letterspacing:espaciado
entre letras
background-color:
list-style-type: tipo color
de
background-image:
viñeta
(círculo, poner una imagen
cuadrado,
background-repeat:
como se repite la
número,letra...)
imagen de
list-style-image:
fondo
utilizar
imágenes
en
las (vertical,horizontal,..)
backgroundviñetas
position:
list-style-position:
alineación texto con posición imagen de
fondo
viñeta
Algunas propiedades relacionadas con el modelo de cajas
Contenido
Borde
width: anchura
height: altura
line-height: distancia
entre líneas
overflow:mayor que el
espacio asignado (scroll,
ocultar,mostrarl..)
border-width: anchura
border-style: tipo
(linea, puntos,guiones...)
border-color: color
Padding y Márgenes
padding: anchura de la zona de relleno
margin: anchura de los márgenes
Pueden aplicarse valores distintos a cada lado: arriba (top), derecha (right), abajo (bottom),
izquierda (left)
Ejemplos: margin-top
padding-right
border-width-bottom
border-style-left
28
I. E. S. Villa de Aspe
Departamento de Informática
Además, CSS puede alterar el flujo normal en que se disponen estas cajas en la página,
definiendo la forma en que se posicionarán y visualizarán, lo que nos permite establecer el
layout de la misma. Lo veremos en el apartado de Posicionamiento.
Unidades de medida
Los valores para propiedades que tienen dimensión (p.ej.,tamaño de letra, anchura de
márgenes/padding, grosor bordes,...), pueden definirse de forma muy diversa:
valores relativos
valores absolutos
Pixels (px) (relativa
resolución de pantalla)
respecto
a
Milímetros (mm) y centímetros (cm)
Puntos (pt) y picas (pc) (1 pc = 12 pt)
Pulgadas (in) (1 pulgada = 72 puntos)
la Porcentajes (%)
factor escala (em)
(% y em, respecto al tamaño de fuente del
elemento padre. Ej: body: 14px -->
h1: 1.2 em = 17px;
h1: 150% = 21px)
respecto a la altura de la letra 'x' (ex)
Expresiones: (xx-/x-) small, medium, (x-/xx-) large, smaller, larger
Por el carácter de esta introducción, no podemos ver en detalle todos los posibles valores que
pueden tomar las diferentes propiedades.
En cualquier caso, al trabajar con un editor de html como Kompozer. veremos que no es
imprescindible (al igual que sucede con la sintaxis de las propiedades) conocer todas estas
abreviaturas/expresiones, ya que podemos seleccionar los valores mediante menús.
Colores
Los colores en HTML/CSS se definen por una combinación (suma) de los tres colores
primarios: rojo, verde y azul (modelo RGB: red-green-blue).
Los colores que podemos aplicar resultan de la combinación de un valor (entre 0-255) de cada
uno de estos 3 colores. Estas combinaciones pueden especificarse de formas distintas en CSS:
•
Notación en porcentaje: rgb(x%, y%, z%) (x,y,z entre 0-100): Ej: rgb(90%, 27%,
32%)
•
Notación absoluta decimal: rgb(x, y, z) (x,y,z entre 0-255). Ej: rgb(203, 0, 15)
•
Notación absoluta hexadecimal: #xxyyzz (xx,yy,zz entre 00 y ff): Ej.:#23a73f
•
Con un nombre en inglés (no pueden utilizarse todos, solo un subconjunto. Ver tabla
con palabras clave en la imagen más abajo). Ej: red, blue....
29
I. E. S. Villa de Aspe
Departamento de Informática
Ilustración 13: modelo RGB
(imagen de Wikipedia)
Ilustración 14: Colores definidos en CSS(Imagen
procedente de la especificación del W3C)
Al utilizar un editor web como Kompozer, podremos seleccionar visualmente los colores y
convertir entre notaciones, sin necesidad de conocer estos códigos. Además, existen múltiples
herramientas complementarias para gestionar los colores de un web
30
Departamento de Informática
I. E. S. Villa de Aspe
Elementos HTML div y span
Explicamos brevemente dos elementos HTML que nos permiten delimitar contenidos y áreas en
la página:
•
span: permite delimitar un contenido interior mediante las etiquetas <span></span> y
darle un estilo particular distinto al elemento en que se encuentra. Por ejemplo, escoger
solo una parte de texto en un párrafo y darle otro formato:
<p>Este párrafo <span style=”color:red”;>tiene esta parte
de texto en rojo</span> y esta parte no.</p>
Mostraría en el navegador:
Este párrafo tiene esta parte de texto en rojo y esta parte no.
•
div: es un elemento de bloque que permite delimitar contenedores (denominadas
divisiones o capas) mediante las etiquetas <div></div>, pudiendo englobar múltiples
elementos.
Utilizando los elementos <div> con los atributos de identificación 'id', podemos
estructurar lógicamente nuestro documento, diferenciando distintas secciones dentro
del
mismo:
cabecera,
menú,
multicolumnas,
pie...
Con CSS, podemos aplicar a estas secciones dimensiones y posicionamiento en la
página, es decir, configurar su visualización, rompiendo el flujo que siguen por defecto
de acuerdo al modelo de cajas que vimos anteriormente. Esto nos permite maquetar la
página, es decir, diseñar su presentación estableciendo la disposición de los distintos
elementos en la misma (lo que se denomina layout). Describiremos este aspecto en un
apartado posterior.
Atributos id y class
Podemos aplicar estilos a un conjunto particular de selectores utilizando los atributos 'class' e
'id' en las etiquetas HTML, permitiéndonos identificar elementos concretos en la página.
•
class: incluyendo este atributo con un nombre (<selector class = ”nombre”>) podemos
aplicar estilos diferenciados a esos selectores, refiriéndonos a ellos en la hoja de estilo
con: selector.nombre
•
id: misma función que 'class' pero se utiliza para un único elemento (<selector
id=”nombre”>). En la hoja de estilo los identificamos con la expresión:
selector#nombre
31
I. E. S. Villa de Aspe
Departamento de Informática
Ilustración 15: atributo Class: modos y ejemplo de aplicación
Posicionamiento de cajas
Como comentamos anteriormente, podemos alterar el flujo normal de la disposición de las
cajas mediante CSS. Para ello contamos con dos propiedades: position (posicionamiento) y
float (posicionamiento flotante). Vamos a describir su funcionamiento a través de los valore
que pueden tomar:
•
Position: esta propiedad se puede aplicar a cualquier elemento y permite establecer
donde se mostrará éste en la página. Los valores que puede tomar son:
◦ static (estático ó normal): es el valor por defecto. El elemento se posicionará según
el flujo normal del documento. (ver apartado elementos de bloque y en línea)
◦ relative (relativo): se desplaza en los ejes horizontal y vertical respecto de su
posicionamiento normal (valor static), según el espacio que indiquemos. El resto de
cajas no se ven alteradas en cuanto a su ubicación.
◦ absolute (absoluto): se desplaza horizontal y/o verticalmente como el relativo pero
con dos diferencias: la referencia la toma del primer elemento padre posicionado y
la caja sale totalmente del flujo del documento, ses decir, otras ocupan el espacio
que deja vacío al desplazarse.
◦ fixed: igual al absoluto salvo que la caja permanece inamovible en la ventana del
navegador, aunque hagamos scroll en ella
◦ float:
la
describimos
más
adelante
32
Departamento de Informática
I. E. S. Villa de Aspe
Como puede deducirse de su definición, aplicar cualquiera de las tres últimas
propiedades puede producir solapamientos con otros elementos de la página.
Para establecer cuánto se mueve la caja, se utilizan las propiedades top, right, bottom,
left (arriba, derecha, abajo, izquierda) con valores que pueden especificarse en
unidades de medida absolutas o relativas.
Para visualizar de forma genérica como se calcula ese desplazamiento, mostramos en
la siguiente imagen un elemento (caja verde) con un movimiento referenciado a dos
elementos distintos. Respecto al elemento body (representado por el rectángulo mayor
con origen de coordenadas indicado por la cruceta en la parte superior izquierda de la
imagen) se desplaza 18px a la derecha (right) y 10 px hacia abajo (down). Respecto al
div central, se desplaza 6 px arriba (top) y 10px a la derecha (right).
Ilustración 16: referencias de posicionamiento
Para consultar más en detalle estas propiedades y visualizar su efecto en algunas imágenes,
puedes consultar por ejemplo este capítulo sobre posicionamiento de un libro on-line sobre
CSS o el web de w3school.com (en inglés) donde podrás hacer incluso ejercicios interactivos.
33
Departamento de Informática
•
I. E. S. Villa de Aspe
Float: esta propiedad hace moverse al elemento tan a la izquierda o la derecha de
la página como le sea posible, según tenga el valor left o right respectivamente.
Las características principales de este desplazamiento son:
◦ el elemento sale del flujo normal del documento; en ese momento el resto de
cajas ocupan su lugar y a continuación la caja flotante se posiciona lo más a la
izquierda o derecha posible según se haya definido
◦ aunque la caja puede posicionarse sobre otra que haya ocupado su lugar, los
elementos en línea (por ejemplo el texto) hacen sitio y adaptan su anchura al
espacio libre que deja esa caja flotante (lo que se denomina reflow, es decir,
refluyen, como si depositaramos un elemento sólido en la corriente de un fluido)
◦ si hay varias cajas flotantes, se respetan entre ellas la posición, es decir, no hay
solapamientos y se alinean según su orden en el código HTML. Por ejemplo, si
hay 2 divs flotantes a la derecha, el primero que se define se sitúa a la derecha
del todo, y el siguiente se pondrá a su izquierda, pegada a la anterior (lo más a
la derecha posible) y si no tiene espacio en esa línea, pasará a la derecha de la
línea siguiente.
◦ existe otra propiedad, clear (que en este caso podríamos traducir por
'despejar'), que se utiliza normalmente en conjunto con float y que impide a un
elemento que se posicione a un lado un otro o a ambos (valores right, left, both)
de una caja flotante, pudiéndole obligar a que se desplace hacia abajo a una
nueva línea.
En la siguiente imagen, mostramos el ejemplo que citábamos del comportamiento
de 3 cajas a las que se aplica la propiedad float con valor a la derecha.
Puede consultarse más en detalle en las mismas referencias que dábamos para la
propiedad
position
34
Departamento de Informática
(Sax)
I.E.S. Villa de Aspe
Ilustración 17: aplicación de la propiedad 'float'
35
Departamento de Informática
I. E. S. Villa de Aspe
Versiones HTML / XHTML
Desde 1989 en que se publicó la primera versión de HTML, ha habido una evolución de este
lenguaje, marcado principalmente por dos facetas:
•
la incorporación de nuevas etiquetas que permitieran ampliar la 'funcionalidad' del
lenguaje (muchas de ellas, en un principio, fueron adopciones de características que
iban incorporando de forma particular, fuera del estándar, los navegadores más
utilizados en el mercado como Netscape Navigator y posteriormente Microsoft IE).
•
La separación paulatina de las funciones de estructurar y presentar el contenido de las
páginas web. En las primeras versiones, HTML comprendía ambas facetas y a partir de
1998, con HTML 4.0 se empiezan a separar, descartando muchas de las etiquetas
relacionadas con la presentación en favor de un nuevo lenguaje, el CSS 2 (hojas de
estilo en cascada) al que se encomienda esta tarea.
En el año 2000, se publicó un nuevo estándar: el XHTML 1.0, una adaptación del HTML a las
normas del XML (otro lenguaje de marcaje). XHTML es muy similar en sintaxis al HTML 4,
aunque con una serie de reglas XML algo más estrictas , entre otras, que las etiquetas han de
escribirse en minúsculas (*) (aún podemos ver muchas páginas en HTML con etiquetas en
mayúsculas, ya que éste no las diferencia de las minúsculas. Para muchos autores de páginas
web, cuando utilizaban editores sin resaltado de código, se les hacía más fácil distinguir las
etiquetas del contenido de esta forma).
Actualmente conviven distintas 'variantes' en la última versión de HTML 4.01: TransitionalStrict y Frameset, las dos primeras relacionadas con la permisividad o restricción de uso
respectivamente de etiquetas de presentación o físicas, y el tercero regulando el uso de
frames ó marcos (aunque no se recomienda la utilización de estos últimos y por tanto, cada
vez más en desuso).
En XHTML, también se dan las variantes Transitional y Strict, que admiten o no,
respectivamente, algunos elementos de HTML 4. Además se aprobó la versión XHTML 1.1
(2001) que introducía el concepto de modularización,
para facilitar la creación de
subconjuntos más reducidos o para ampliar el lenguaje según distintas necesidades, pero que
ha tenido poca utilización.
Para un próximo futuro, se está trabajando en fase de borrador en las nuevas versiones HTML
5, XHTML 2.0 y CSS3, si bien, la W3C decidió parar el avance de la nueva versión XHTML en
favor de HTML 5. Algunos navegadores ya empiezan a incorporar algunas funcionalidades que
se han propuesto en estas nuevas recomendaciones.
36
I. E. S. Villa de Aspe
Departamento de Informática
Respecto a qué versión conviene utilizar ahora para crear páginas, hay bastante discusión. La
recomendaciones mayoritarias se centran lógicamente en las versiones HTML 4.01 ó XHTML
1.0 ambos en modo estricto (strict) si el web es nuevo y no tenemos necesidad de
compatibilidad 'hacia atrás'.
Aunque aparentemente el etiquetado en XHTML podría pensarse como más recomendable,
algunos programadores expusieron argumentos en contra, quizás demasiado técnicos para
alguien que empieza y no esté suficientemente familiarizado con HTML y XML, pero que dejaba
la cuestión más en el aire. Además, la más que probable evolución a HTML5, resta atractivo a
la opción XHTML (aunque siga siendo perfectamente válida). Para los muy interesados pueden
ver un par de artículos (en inglés) sobre este tema:
(Send
XHTML
as
•
Enviar XHTML como text/html, considerado peligroso
considered harmful)
•
¿HTML o XHTML: importa de verdad? (HTML or XHTML: does it really matter?)
text/html
Resumen de versiones
•
HTML 1.0 y 2.0 (1989, 1991) presentación
•
HTML 4.0 (1998) HTML 4.01 (1999): estructura + CSS 2 (1998): presentación. En
estas versiones de HTML se dan distintas variantes:
•
XHTML 1.0 (2000): adaptación del HTML a las normas del XML (otro lenguaje de
marcaje). XHTML es muy similar en sintaxis al HTML 4.01, aunque con una serie de
reglas XML algo más estrictas . También se dan las variantes Transitional y Strict
(admite o no algunos elementos de HTML 4)
•
XHTML 1.1 (2001): introduce el concepto de modularización para facilitar la creación
de subconjuntos más reducidos o para ampliar el lenguaje según distintas necesidades.
•
HTML 5, XHTML 2.0 y CSS 3: están aún en fase borrador, si bien, la W3C decidió
parar el avance de la nueva versión XHTML en favor de HTML 5. Algunos navegadores
ya empiezan a incorporar algunas funcionalidades que se han propuesto en estas
nuevas recomendaciones.
HTML 3.0/3.2 (1995/1997): estructura +
37
