Lenguajes del lado del navegador web

Introducción a HTML y CSS

En este documento podrán encontrar una serie de contenidos básicos sobre Lenguajes de etiquetado o marcado: la tecnología necesaria para comprender como presentan y organizan contenidos los clientes web (Mozilla Firefox, Chrome, etc.).

Esta es información de referencia fundamental que debemos tener a mano para poder gestionar contenidos en la web. Ya sea con sistemas de administración de contenidos o con servicios web.

Índice

Índice

  1. HTML
    1. Estructura de un documento HTML
    2. Elementos HTML
    3. Atributos
    4. Tablas
  2. CSS
    1. Cómo dar estilo a un documento
    2. Unidades de medida
    3. Selectores y herencia
    4. Modelo de caja
    5. Propiedades
  3. Anexos
    1. CSS3: estilos "web 2.0" y lo que vendrá después
    2. Herramientas avanzadas
    3. Bibliografía

Estructura de un documento HTML

Un documento HTML tiene dos partes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Curso de HTML y CSS</title>
	</head>
	<body>
    	Hola Mundo
	</body>
</html>

Elementos HTML

Un documento HTML está formado por elementos, son la estructura básica de HTML, y proporcionan tanto el contenido como la estructura de la información en la página web:

Ejemplo, el elemento párrafo p:

<p>Bienvenidos al curso de páginas web.</p>

Todo lo que vemos es el elemento, y está formado por varias partes:

Otro ejemplo, el elemento enlace a:

<a href="http://www.google.es">Google.com</a>

Las partes de este elemento son:

Los elementos no tienen que tener todas estas partes siempre, ni etiqueta de cierre, ni atributos necesariamente:

<img src="logo.gif" alt="Logotipo de la Universidad" />
<br />

Estructura

Listas

Ejemplos de uso, lista desordenada, países que he visitado:

<ul>
	<li>España</li>
	<li>Portugal</li>
	<li>Alemania</li>
</ul>

Lista ordenada, clasificación de la liga de fútbol profesional:

<ol>
	<li>F.C. Barcelona</li>
	<li>Real Madrid</li>
	<li>Valencia</li>
</ol>

Texto

Multimedia

Atributos

Los atributos definen propiedades de un elemento añadiendo significado o funcionalidad.

Su estructura es la siguiente: nombre-del-atributo="valor-del-atributo", como por ejemplo: href="http://google.es".

Hay elementos que no necesitan ningún atributo para tener todo su significado, como por ejemplo un encabezado h1 o un párrafo p.

Pero hay otros elementos que sí necesitan atributos para tener significado o para cumplir su función adecuadamente:

También hay algunos atributos genéricos, que pueden usarse con cualquier elemento HTML. Veremos algunos de los más importantes:

id

Atributo que sirve para identificar de manera única a un elemento en el documento. No se puede repetir en una página.

Con este atributo id podremos hacer referencia al elemento que lo tiene desde una hoja de estilo CSS para darle un diseño, o desde javascript para que tenga un comportamiento concreto.

Sirve también para definir anclas con enlaces. Por ejemplo, si tenemos un encabezado con id="inicio":

<h1 id="inicio">Bienvenidos al curso</h1>

Podemos crear un enlace para desplazarnos hacia ese encabezado al hacer click:

<a href="#inicio" title="Volver al inicio de la página">↑ subir</a>

Así funcionan por ejemplo los enlaces para volver al índice del tema en esta página web:

<p class="nav"><a href="#index">&uarr; volver al índice</a></p>

Importante: los valores del atributo id no pueden contener caracteres especiales (ñ, tildes...) y no pueden empezar por número, aunque sí contenerlos en otras posiciones.

class

Atributo que sirve para identificar un elemento en el documento, pero no de forma única. En la práctica, se utiliza también para dar diseño a los elementos con estilo CSS, o para darles un comportamiento con javascript.

Puede aplicarse a varios elementos en el mismo documento:

<a class="navegacion">ir a la portada</a>
<a class="navegacion">ir a la sección anterior</a>

La forma correcta de usarlo es darle un significado por su contenido, no por el estilo que le vamos a dar:

Mal:<div class="fondorojo">
Bien:<div class="destacado">

Para el mismo elemento, pueden aplicarse varias clases, su efecto será sumativo, es decir, se aplicarán los estilos definidos en todas las clases aplicadas:

<div class="articulo destacado reciente"></div>

Así el contenido de este div tendrá los estilos y propiedades de comportamiento que definamos para articulo, para destacado y también para reciente.

Importante: los valores del atributo class no pueden contener caracteres especiales (ñ, tildes...) y no pueden empezar por número, aunque sí contenerlos en otras posiciones.

title

Proporciona información adicional sobre un elemento, que aparece como un texto de ayuda al poner el ratón sobre él.

Por ejemplo, en un enlace, puede dar más información sobre el sitio web de destino aparte del que aparece en el propio texto del enlace.

En acrónimos y abreviaturas es muy importante ya que indica el significado literal:

<acronym title="Personal de Administración y Servicios>PAS</acronym>

Importante: a diferencia de los anteriores, los valores del atributo title sí pueden contener caracteres especiales (ñ, tildes...) y sí pueden empezar por número, aunque sí contenerlos en otras posiciones.

lang

Indica el idioma en el que está escrito el elemento, es útil para indicar cambios en el idioma dentro de un documento.

<p>Y como decían en su novela favorita:</p>
<blockquote lang="en" >And with a certain <span lang="fr">je ne sais quoi</span>, she
entered both the room, and his life, forever.</blockquote>

En los enlaces también disponemos del atributo hreflang que sirve para indicar el idioma en el que está la página a la que lleva el enlace, si es diferente del de la página en la que estamos.

Importante: los valores de estos atributos deben corresponder con los códigos de lenguajes ISO 639-1.

Tablas

Las tablas son una estructura formada por varios elementos que sirven para representar conjuntos de datos en filas y columnas, y nunca deben utilizarse para diseñar o maquetar un documento.

Los elementos que se usan para definir una tabla son los siguientes:

Algunos de los atributos más comunes que se usan en las tablas son:

Cómo dar estilo a un documento

Una vez que hemos trabajado con la estructura y contenido, vamos a ver cómo aplicar estilos que definan el aspecto de la página web.

Se puede aplicar estilo a un documento de varias formas:

Unidades de medida

En CSS tenemos dos tipos fundamentales de unidades de medida:

Selectores, cascada y herencia

¿Cómo indicar el estilo que quieres dar a un elemento en la hoja de estilo externa? por ejemplo a un enlace a ponerle color rojo, utilizaremos el siguiente código en una hoja de estilo:

a {
	color:#f00;
}

Para aplicar el mismo estilo a varios elementos, podemos indicarlos separados por comas:

a, em, strong {
	color:#f00;
}

Este código hará que tanto los enlaces a, como los elementos de énfasis em y los strong aparezcan en color rojo.

Para dar estilo a un elemento que esté dentro de otro, se ponen juntos, separados sólo por un espacio. Por ejemplo, para el siguiente código:

<div>Dentro de un div podemos poner cualquier cosa</div>
<p>Párrafos</p>
<blockquote>
	blockquotes...
	<p>aquí también puede haber párrafos</p>
</blockquote>
<ul>
	<li>
		Y aquí también...
		<p>Párrafos</p>
	</li>
</ul>

Y este CSS:

li p {
	color:#f00;
}
blockquote p {
	font-size:150%;
}

Los p que estén dentro de un li serán rojos, y los que estén dentro de un blockquote tendrán el tamaño de fuente más grande. Esta forma de hacer referencia a los elementos podemos usarla por la cascada de los documentos, gracias a la estructura que nos da HTML, y nos permitirá ahorrar mucho en clases y en id y tener un código más sencillo.

class

Para dar estilo a los elementos que hemos identificado con el atributo class:

<h1 class="navegacion">Bienvenidos al curso</h1>
<p class="navegacion">Bienvenidos al curso</p>

Haremos referencia con . (punto) de la siguiente forma:

.navegacion {
	text-decoration:underline;
}

Este código hará que cualquier elemento con el atributo class igual a "navegacion" esté subrayado.

h1.navegacion {
	text-decoration:underline;
}

Este código hará que sólo los h1 con el atributo class igual a "navegacion" estén subrayados, pero no otros.

Las clases se pueden combinar, aplicar varias al mismo elemento, y sus propiedades se acumularán, prevaleciendo las de la clase que se indique en último lugar:

<p class="navegacion previo">» anterior</p>
.navegacion {
	font-weight:bold;
	color:#f00;
}
.previo {
	text-align:left;
}

Con este código, el párrafo con las clases "navegación" y "previo", tendrá la fuente en negrita y el color rojo, que se los da la clase "navegacion", y también el texto alineado a la izquierda, que lo da la clase "previo".

id

Para dar estilo a un elemento con id en CSS, se utiliza # (almohadilla):

<h1 id="logotipo">Universidad</h1>
#logotipo {
	font-size:180%;
}

Funciona igual que class, salvo en que, como ya hemos dicho, sólo puede haber uno por documento, y además no puede tener varios valores.

Hay que tener cuidado con el abuso de las clases e id, y usar la cascada para las referencias, con esto ahorraremos mucho código:

Mal:<div class="navegacion">
	<h1 class="titulo_menu">
	<ul class="menu">
		<li class="item">Inicio</li>
		<li class="item">Opciones</li>
		<li class="item">Salir</li>
	</ul>
</div>
.navegacion { ... }
.titulo_menu { ... }
.menu { ... }
.item { ... }

Con este código podemos dar estilo a cada clase y así definir el aspecto de un menú de navegación como podemos encontrarnos muy frecuentemente. No es que esté mal, pero también podemos hacerlo con menos código, más sencillo y será menos probable equivocarnos:

Bien:<div class="navegacion">
	<h1>
	<ul>
		<li>Inicio</li>
		<li>Opciones</li>
		<li>Salir</li>
	</ul>
</div>

Y el CSS:

.navegacion { ... }
.navegacion h1 { ... }
.navegacion ul { ... }
.navegacion li { ... }

¿Qué es más importante, id o class?

En el siguiente código, ¿qué color prevalece?

<h1 id="logotipo" class="navegacion">Universidad</h1>
#logotipo {
	color:#f00;
}
.navegacion {
	color:#00f;
}

En este caso, el color que prevalece es #f00 porque id es más específico, en caso de que las propiedades no se sobreescribieran, se aplicarían todas:

#logotipo {
	color:#f00;
}
.navegacion {
	font-weight:bold;
}

En este caso el texto sería de color #f00 y también negrita.

También hay que tener en cuenta que si declaramos varias veces una propiedad para un elemento en la hoja de estilo, prevalecerá la última que se haya declarado.

Cuando definimos una propiedad para un elemento, dependiendo de la propiedad (y también del elemento), ésta se hereda o no. Esto quiere decir que si, por ejemplo, definimos el color de fuente para un div, lo que vaya dentro tendrá también el mismo color, a menos que indiquemos otro.

Hay propiedades que se heredan y otras que no, la forma más fácil de familiarizarse con esto es la práctica.

Modelo de caja

Todos los elementos HTML cuando se muestran en pantalla forman un rectángulo, una caja que según el tipo de elemento se comportará de una forma u otra:

Con CSS podemos modificar el aspecto de los elementos para hacer que aparezcan como elementos en línea algunos que originalmente son de bloque, y viceversa. Cuando hacemos esto, se dice que los elementos están reemplazados.

Las propiedades de un rectángulo o caja son las siguientes:

Modelo de caja explicado en la línea siguienteImagen: minid.net

Modelo de caja estándar: el margen es el espacio transparente entre un elemento y los que le rodean. El borde es una línea de un grosor y estilo determinados con CSS, que delimita la zona que ocupa el elemento. El padding es un margen interior, con el color o imagen de fondo definida para el elemento, y el contenido es el texto, imágenes y otros elementos HTML que puede contener éste.

La anchura total de un elemento es la suma de la anchura de su contenido (bien definida por la propiedad width, bien porque el elemento tenga una anchura de por sí, como una imagen u objeto flash), el margin izquierdo y derecho, el border izquierdo y derecho, y el padding izquierdo y derecho. Este es el espacio que ocupará en el documento, hay que saber calcularlo para poder ubicar los elementos donde queramos.

La altura se calcula de la misma forma, pero ojo! hay que tener en cuenta una cosa: los navegadores colapsan los márgenes verticales en los elementos, es decir, si tenemos un p con margen inferior 10px, y después otro p con margen superior 15px, en lugar de estar separados por 25px, que sería lo normal, estarán separados por 15px, el mayor valor de los dos.

Esto no ocurre cuando los elementos tienen las propiedades position:absolute o float (las veremos después).

Para más información, se puede consultar la especificación oficial que describe el modelo de caja.

Propiedades

Todos los navegadores tienen una serie de estilos predefinidos que ponen márgenes a los párrafos y listas, negrita al énfasis, unos determinados tamaños a los encabezados... esto hace que los documentos sean legibles también sin estilos, pero puede entorpecernos a la hora de diseñar nuestras hojas de estilo.

Para poder empezar desde cero con nuestras hojas de estilo, podemos usar uno de los muchos códigos de reset que se encuentran en páginas de diseño con estándares. Un ejemplo puede ser este:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,p,blockquote,th,td {
margin:0; padding:0;
}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;font-weight:normal;
}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
q:before,q:after {content:”;}

Quita los márgenes, espaciados, tamaños de fuente, negritas, decoración en listas... evitando que se hereden propiedades no deseadas en nuestro diseño.

Veremos las propiedades más comunes de CSS, para más información se puede consultar la referencia de propiedades CSS de HTML Dog, y como referencia más completa pero más esquemática, la chuleta de CSS o la Guía de referencia rápida (en castellano).

Posición

Comportamiento

Tamaño

Nota: cuando calculamos el tamaño de un elemento para ubicarlo en nuestra maqueta, hay que recordar siempre que la anchura y altura total se calculan según el modelo de caja visto previamente. Tener en cuenta todas las propiedades que suman: margen, padding, bordes y anchura o altura.

Márgenes y bordes

Texto

Fondos y colores

HTML5 y CSS3: estructura y estilos web 2.0 y lo que vendrá después

Aunque el concepto web 2.0 no es fácil de definir, ni tampoco tan relevante, está claro que ha marcado un antes y un después en el diseño web, y no siempre para bien.

Pueden consultar esta infografía sobre la evolución del diseño web para hacerse una idea de la época a la que se llama web 2.0 en relación al diseño.

Hacia 2008-2009, la web 2.0 se caracteriza por usar la interactividad, ajax y otras tecnologías asíncronas, el diseño se enfoca en apoyar al contenido, y los sitios web se hacen más sociales

¿Qué es HTML5? es una nueva colección de elementos y atributos, que además incluye la mayoría de los que ya conocemos de HTML4 y XHTML. De hecho se puede escribir HTML5 sin usar los elementos nuevos, pero éstos nos darán mayor flexibilidad y nuevas funcionalidades para vídeo, audio, formularios...

¿Qué es CSS3? también es una nueva colección de propiedades CSS, y más, que permite tener más control sobre el aspecto de nuestros sitios web, y además proporciona capacidad de forma nativa para implementar diseños con esquinas redondeadas, sombras en cajas y texto, animaciones más elaboradas, fuentes alojadas en servidor, mayor control sobre los colores...

Las tendencias de diseño recientes, surgidas durante este periodo 2.0, ahora son más fáciles de implementar con la llegada de los nuevos estándares, HTML5 y CSS3, pero todavía no son soportados por todos los navegadores comerciales, y además aún no es recomendación de W3C. Siempre vivimos la misma historia los desarrolladores :-) pero siempre hay que evitar la tentación de usar propiedades no estándar, por ejemplo los prefijos de navegadores para propiedades CSS3 no soportadas.

Aunque los nuevos estándares se salen de los contenidos que planeamos abordar en este curso, os dejamos algunos recursos para que podáis investigar un poco más si os interesa:

Herramientas avanzadas

Cuando tengamos algo de experiencia, podemos pasar a herramientas que nos facilitarán mucho el trabajo, aunque son algo más complicadas de usar:

Para poder probar nuestras páginas en navegadores antiguos podemos usar simuladores o herramientas de emulación:

Bibliografía

HTML y CSS

En castellano

Compilado por Christian Silva