Tabla de Contenidos

(X)HTML & CSS

(X)HTML

Formato de un documento

Un documento xhtml contiene tags (elementos entre los signos < y >). Es decir, está basado en XML, por lo tanto sigue su especificación.
La base de un documento xhtml cualquiera consiste en una tag principal, html, y dentro de esta el head y el body. En el body se encuentra todo el contenido de la web.
La primera línea que debe contener un fichero xhtml (como todo documento basado en XML es cualquiera de las dos siguientes, según la codificación elegida: 

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml version="1.0" encoding="UTF-8"?>

Si el documento es un .php puede que nos sea más útil (para que no haya problemas con el parser) utilizar en el bloque head el equivalente, que sería: 

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Para indicar el idioma de la página (es, en, fr, ca…) lo pondremos como propiedad en el html: 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

Contenido dentro del head

Podemos encontrarnos tags como:

El DOCTYPE

La segunda línea que debe de contener un documento xhtml es la que indique qué tipo de documento y versión es. De esta forma la página web puede validarse y a la vez la fuerza a seguir el standard. Las definiciones más comunes de DOCTYPE son: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">

Ideado para combinar el xhtml con una hoja de estilos CSS, por lo que no permite tags como font, center… 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/xhtml1-frameset.dtd">

Una variante del strict pero que permite frames.

Escribir\formatear texto

Mi ordenador tiene 512 <abbr title="Megabytes">Mb</abbr> de memoria <acronym title="Random Access Memory">RAM</acronym>.

Listas

Con las tags ul y ol podemos crear listas; el primero (ul) lo utilizaremos para listas desordenadas, estas aparecerán con signos como rombos, cuadrados…, el segundo (ol) para ordenadas, las cuales seguirán una numeración.
Cada elemento de una lista irá entre el tag il. 

<h2>Animales:</h2>
<ul>
	<li>Tigre</li>
	<li>Pantera</li>
	<li>...</li>
</ul>
<h2>Cosas a hacer por las mañanas:</h2>
<ol>
	<li>Levantarse</li>
	<li>Desayunar</li>
	<li>Ir al curro</li>
</ol>

Podemos anidar listas creando sublistas, únicamente tenemos que insertar una tag ul o ol dentro de un li.

Formatear listar ordenadas

La tag ol permite la propiedad type, esta formateará los elementos de la lista según su valor: 

<ol type="i">
	<li>Levantarse</li>
	<li>Desayunar</li>
	<li>Ir al curro</li>
</ol>

Formatear listas desordenadas

Al igual que ol, ul también permite la propiedad type con valores que representan el tipo de forma que aparecería:

Listas de definiciones

Para una lista de definiciones utilizaremos la tag dl, a partir de entonces utilizaremos dt (para un término) y dd (para una definición). 

<dl>
	<dt>HTML</dt>
	<dd>HyperText Markup Language</dd>
	<dt>Element</dt>
	<dd>Describes document content.</dd>
</dl>

Tablas

Para organizar los datos en tablas utilizaremos la tag table. Una tabla contiene filas y una fila contiene celdas, en xhtml todas las filas deben de contener el mismo número de celdas (a no ser que se especifique lo contrario). Para poder montar la tabla utilizaremos las tags tr y td; dentro de la table abriremos y cerraremos los tr's y dentro de cada tr abriremos y cerraremos los td's, estos útlimos corresponden a las celdas. 

<table>
	<tr> <td>A</td> <td>B</td>
	<tr> <td>C</td> <td>D</td>
</table>

Dentro de una table podemos añadir otro tipo de tags: 

<table>
	<caption>How to Use Tables</caption>
	<tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> </tr>
	<tr> <td>X</td> <td>X</td> <td>X</td> </tr>
	<tr> <td>X</td> <td>X</td> <td>X</td> </tr>
</table>
<table>
	<col width="50px" />
	<colgroup>
		<col width="30px" />
		<col width="30px" />
	</colgroup>
	<tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> </tr>
	<tr> <td>X</td> <td>X</td> <td>X</td> </tr>
	<tr> <td>X</td> <td>X</td> <td>X</td> </tr>
</table>

Propiedades de table

Propiedades de td

Enlaces y anclas

Para un enlace utilizamos la tag a, la página donde apunta estará indicada en su propiedad href: 

<a href="www.google.es">Buscador</a>

Podemos poner un tooltip al enlace mediante la propiedad title.
Podemos hacer un link a una parte de la misma página (ancla) añadiendo una almoadilla al principio de la dirección. La dirección será el identificador (definido por la propiedad id) de la tag: 

<!-- pagina1.html -->
...
<h2 id="comentarios">Comentarios</h1>
...
<a href="#comentarios">Ir a comentarios en esta página</a>
<!-- pagina2.html -->
...
<a href="pagina1.html#comentarios">Ir a comentarios en otra página</a>

Existe otra forma de crear un ancla utilizando la tag a, para ello no definiremos la propiedad href pero sí la name: 

<a name="comentarios" />

Imágenes

Para incrustar imágenes utilizaremos la tag img; para ver exáctamente cómo funciona echemosle un vistazo a sus propiedades: 

<img src="imagen.gif" alt="Una imágen cualquiera" /></html>

Si quisiesemos que la imágen funcionase como un link deberemos anidar el tag img dentro del a.

Formularios

Los formularios se montan dentro de la etiqueta form, a esta etiqueta podemos añadirle las siguientes propiedades:

Introducción de datos

A partir de aquí los campos que tendrá el formulario vendrán dados por la tag input y el tipo se distinguirá según el valor de la propiedad type que podrá ser:

Según el tipo de campo la tag input admite también la propiedad size que corresponde al ancho de este.

Otros tipos de campos

Existe otro elemento llamado textarea que sustituye al input type=“text”, este permite introducir texto en varias líneas. Para indicar su tamaño utilizaremos sus propiedades cols y rows.
Otro campo posible es el combo, para utilizarlo usaremos la tag select y, anidados, todos los elementos del combo en tags option. Una option puede tener un value que correspondrá al valor que enviará si esa es seleccionado. 

<select name="peli" id="peli">
   <option value="hope">A New Hope</option>
   <option value="empire">The Empire Strikes Back</option>
   <option value="jedi" selected ="selected">The Return of the Jedi</option>
</select>

Referenciar datos

Existen, también, otras propiedades que pueden sernos de utilidad a la hora de tratar los datos que contienen. name nos servirá para crear una variable que tendrá como valor el contenido del campo, para referenciar esa variable tendremos que hacerlo por el valor de esta propiedad. id, en cambio, será un identificador el cual no podrá estar repetido en todo el documento.

Labels

La forma para asignar un texto que acompañe a un campo de texto es utilizando la tag label, esta permite la propiedad for a la cual asignaremos el nombre del campo que acompañará: 

<label for="nombre">Nombre:</label>
<input type="text" name="nombre"/>

Fieldsets

Existe una tag, la llamada fieldset, que engloba elementos relacionados de un formulario. A esta agrupación podemos asignarle un título con la tag legend: 

<form>
 <fieldset>
  <legend>Titular:</legend>
  <label for="nombre">Nombre:</label><input name="nombre" type="text" value="" />
  <label for="apellido">Apellido:</label><input name="apellido" type="text" value="" />
 </fieldset>
</form>

Meta tags

Las meta tags son unas tags que se colocan en el head a parte de la title, style o script. Algunas tienen un uso funcional respecto a la página, es decir, que realizan acciones sobre esta; otras contienen información general sobre la página muy útil para los buscadores.

Trucos (X)HTML

<link href="imgs/tiny.ico" rel="icon"/>
<link href="imgs/tiny.ico" rel="shortcut icon" />
<link rel="shortcut icon" href="imgs/tiny.ico" type="image/x-icon" />
<object type="image/svg+xml" data="firewall.svg" width="50" height="50" />
<!-- deshabilita el toolbar en imagen.gif, pero el html no validará -->
<img src="imagen.gif" galleryimg="no" />
<!-- deshabilita el toolbar en todas las imágenes -->
<meta http-equiv="imagetoolbar" content="no" />

CSS

Una declaración css puede ser añadida en una misma tag o hacerla a parte.

Todo valor de cualquier propiedad se define como propiedad:valor, y si queremos incluir más propiedades las separaremos por ;: propiedad:valor;propiedad:valor;propiedad:valor.
Si los estilos los especificamos de forma externa a la tag podremos ubicarlos en… 

<link href="hoja_estilos.css" rel="stylesheet" type="text/css"/>

Podemos también “importar” otra página de estilos, es decir, ponerla al principio usando @import url: 

@import url("prueba2.css");

La etiqueta style o la link permiten la propiedad media, con esta podemos indicar si se aplicará una hoja de estilos cuando se vaya a imprimir u otra: 

<link rel=”stylesheet” type=”text/css” media=”screen” href=”screen.css” />
<link rel=”stylesheet” type=”text/css” media=”print” href=”print.css” />
<!-- o -->
<style type=”text/css” media=”screen”>@import url(“screen.css”); />
<style type=”text/css” media=”print”>@import url(“print.css”); />

Cómo se definen?

Los colocaremos en la tag style o en el archivo .css y en ellos crearemos bloques del estilo siguiente: 

body {
  background-color: #fff;
  color: #666;
  font-family: Arial, sans-serif;
  font-size: 10 pt;
}

La estructura es un selector del bloque, abrimos corchete, propiedades y valores separados por puntos y coma, y cerramos el corchete. Si el selector es…

Ejemplo 1: 

ul li {
  color: red;
}

La herencia en CSS se basa en que si damos un estilo a un elemento contenedor todos los elementos dentro de este lo heredarán también. Por ejemplo si damos un color al texto del body, los textos de las tablas, de los párrafos y demás también pillarán ese color.
La cascada aparece cuando dos selectores se especifican sobre un mismo elemento, entonces se aplica el último definido.

Selectores extendidos

:!: No he conseguido que funcionen: p[title=perro viejo], p[title~=viejo] ni p[tittle|=pe].

Como...

Tabla de colores:

Estilos para contenedores

En los contenedores de las páginas (tags como body, div…) utilizaremos los siguientes estilos:

Si por ejemplo queremos colocar una imágen en el borde superior haremos algo así: 

background-image: url(comillas.gif);
background-position: top left ;
background-repeat: no-repeat;

Estilos para texto

En tags como p y también pueden ir en contenedores como body, div…

Estados o pseudo elementos:

Estilos para...

Un link dispone de cuatro estados link (normal, sin visitar), visited (visitados anteriormente), hover (cuando pasamos el mouse por encima) y active (al hacer click); y, debido a fallos con algunos navegadores, estos han de definirse en el orden en el que se han nombrado. Por ejemplo, si queremos que los links sean verdes y al pasar el mouse por encima rojos: 

a:link {
  color:#0f0;
}
a:hover {
  color:#f00;
}

Si queremos quitar el subrayado de un link tenemos que definir el estilo text-decoration:none;.

Elementos de un formulario

Listas

Tablas

<div>

La tag de xhtml div crea un bloque\contenedor en la página, es muy útil en el momento de agrupar elementos con el mismo formato.
Sólo una propiedad habita en el maravilloso mundo de las propiedades del div (a parte, claro está, del id, title, class), esta es align y permite indicar cómo se alineará el contenido de este bloque, admite los valores: bottom, left, right, top.

Estilos

Maquetar con divs

Tipos

Existen dos tipos de divs las inline y las block, las block se insertar entre el contenido de la página (como si fuesen un párrafo) separando el contenido anterior del posterior, las inline aparecerían como una palabra dentro de un párrafo (como… como un toro, no?), sin “romper” el flujo de la página. Los block no podrían estar uno al lado de otro. Para definir el tipo, en el estilo de la div usaremos la propiedad display la cual acepta block o inline.
Si no se indica lo contrario, las div block irán colocándose una debajo de otra y las inline una al lado de otra. 

<span style="display:inline">hola</span><span style="display:inline">adios</span>
<br />
<span style="display:block">hola</span><span style="display:block">adios</span>

Todos los elementos de xhtml son inline o block. Las características de los block son:

Las de los inline:

Existen otras posivilildades a parte del block o del inline más específicas: none, list-item, run-in (se mostrará como block o como inline dependiendo del contexto), compact (se mostrará como block o como inline dependiendo del contexto), marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell (necesario si quieres alinear el texto en vertical), table-caption.

Colocación

Las divs permiten la propiedad position, esta indica cómo se colocará la div en la página. Acepta static (valor por defecto), relative (la posición del div se define a partir de la posición que le tocaría), absolute (se posiciona en la posición x,y dada por las propiedades top y left) y fixed (calculada a partir de un punto concreto del browser, si el usuario mueve el scroll la div seguirá ahí).
Para indicar posiciones a partir de un punto del div usaremos las propiedades top, bottom, left y right.

Por ejemplo, teniendo: 

div {
 background-color:white; 
 width:100px; 
 height:100px; 
 border: 1px solid black; 
 display: block;
}
esquina {
 position: fixed;
 bottom: 0px;
 right: 0px;
}
capa {
 position: relative;
 top: 10px;              /* también podrías usar números negativos */
}

z-index y overflow

Otra propiedad… z-index. Cuando dos divs se solapan (esto pasa cuando definimos nosotros la posición) podemos indicar cual estará sobre la otra, sólo es aplicable a aquellos div que tengan position definida como absolute o relative. El valor que se le asigna es un número, mientras más grande sea este más cercana será la capa.
La propiedad overflow corresponde a cómo reaccionará la div si su contenido sobresale de esta, acepta los valores visible (si el contenido continuará visible por mucho que sobresalga), hidden (el contenido se corta), scroll (aparece un scroll que se activa si el contenido sobresale) o auto (como scroll, pero sólo saldrá la barra de scroll sí y sólo sí el contenido sobresale).

float y clear

La propiedad float no sólo puede aplicarse a divs, también a párrafos, títulos, imágenes… su función es que el contenido en vez de seguir hacia abajo siga hacia otra dirección; acepta left, right, none e inherit. Por defecto está a none y, si por ejemplo, tenemos una div\imágen y luego un párrafo, si esa div\imágen tiene float:left el párrafo se colocará a la derecha (recuerda, también podríamos ponerle padding), y si ponemos float:right el texto se colocará a la izquierda de esta.
Para complementar a float existe la clear, que más que complementarlo lo que hace es anularlo. Acepta left, right, both y none, funciona, utilizando el ejemplo anterior de una imágen con float:left y un párrafo que se coloca a la derecha, añadiendo a las propiedades del párrafo clear:left, entonces se anula el float de la imágen y el párrafo se coloca abajo en vez de a la derecha. left anula el float del elemento a la izquierda, right el de la derecha, both el de ambos y none no anula float alguno.
El float y el clear se han explicado para imágenes y párrafos, pero es totalmente válido para capas. Por ejemplo podríamos poner 5 capas: una para título con float a none, 3 para contenido, con float a left y un pie de página con clear a both. Nos quedaría arriba la cabecera, en medio las capas y abajo el pie. 

div {
	background-color:white; 
	width:100px; 
	height:100px; 
	border: 1px solid black; 
	display: block;
	overflow: auto;
}
.cabecera {
	width: 300px;
}
.contenido {
	float: left;
	height: 300px;
}
.pie {
	width: 300px;
	clear: both;
}

Trucos CSS

<input style="background-color:transparent; border:0; padding:0; cursor:pointer;" type="submit" value="Enviar >>" />

Botones

Anterior\Siguiente

Si queremos hacer un “menú” de dos botones (anterior y siguiente) empezaremos, como en cada menú que se precie, utilizando una lista: 

<ul id="navigation">
 <li class="left"><a href="#">Back</a></li>
 <li class="right"><a href="#">Next</a></li>
</ul>
  1. Quitaremos el adorno de la lista: ul#navigation { list-style-type: none; }
  2. Le quitaremos también la apariencia de lista haciendo que queden los dos elementos uno abajo del otro como si fuesen textos independientes añadiendo: margin: 0; padding: 0;
  3. Colocaremos cada elemento a un lado añadiendo dos definiciones de clase más:
    • ul#navigation .left { float: left; width: 5em; }
    • ul#navigation .right { float: right; width: 5em; }
  4. La colocación de una línea sobre ellos no es mala idea, en la clase de la lista añadiremos: border-top: 1px solid #666
  5. También indicamos en la clase de la lista que haya algo de espacio entre la línea y los elementos pero ninguno entre los elementos y los bordes modificando el padding: padding: .5em 0;
  6. Damos un formato a los elementos de la lista para que se muestren como botones:
    • ul#navigation li a {display: block; width: 5em; color: #FFF; background-color: #036; padding: .2em 0; text-align: center; text-decoration: none; }
  7. Y para que quede más bonito, cuando el ratón pase encima del elemento que su fondo cambie de color:
    • ul#navigation li a:hover {color: #FFF; background-color: #69C; }
a {
	display: block;
	border: 1px solid;
	border-color: #aaa #000 #000 #aaa;
	width: 8em;
	background: #fc0;
}
 
a:hover {
	position: relative;
	top: 1px;
	left: 1px;
	border-color: #000 #aaa #aaa #000;
}

Tenemos un menú en forma de lista: 

<ul id="navlist">
 <li><a href="#">Item one</a></li>
 <li><a href="#">Item two</a></li>
 <li><a href="#">Item three</a></li>
</ul>
  1. Quitaremos el formato de lista:
    • ul#navlist { padding: 0; margin: 0; list-style-type: none; }
  2. Indicamos que los elementos de la lista son elementos inline, para que se coloquen uno al lado del otro:
    • ul#navlist li { display: inline; }
  3. Hacemos que los links tengan forma de botones:
    • ul#navlist li a { float: left; width: 5em; color: #fff; background-color: #036; padding: 0.2em 1em; text-decoration: none; border-right: 1px solid #fff; }
  4. Hacemos que los botones cambien al posicionarse el cursor sobre ellos:
    • ul#navlist li a:hover { background-color: #369; color: #fff; }
  5. Damos a la lista un parecido a menú añadiendo las siguientes propiedades a su clase: float: left; width: 100%; color: #fff; background-color: #036;

Maquetar

3 columnas

Utilizaremos los siguientes divs:

  1. Uno que lo contenga todo, contenedor.
  2. Uno para el título principal.
  3. Dos para las columnas izquierda y derecha.
  4. Uno para el contenido principal.
  5. Y otro para el pie de página.
<div id="container">			<!-- 1 -->
 <div id="top"><h1>Header</h1></div>	<!-- 2 -->
 <div id="leftnav">			<!-- 3 -->
  <p>Lorem ipsum ...</p>
 </div>
 <div id="rightnav">			<!-- 3 -->
  <p>Lorem ipsum ...</p>
 </div>
 <div id="content">			<!-- 4 -->
  <h2>Subheading</h2>
  <p>Lorem ipsum dolor...</p>
  <p>Ut wisi enim ...</p>
 </div>
 <div id="footer">Footer</div>		<!-- 5 -->
</div>
  1. Empezaremos formateando el contenedor (centrándolo, dándole color, incrementando el interlineado…):
    • #container { width: 90%; margin: 10px auto; background-color: white; border: 1px solid gray; line-height: 130%; }
  2. Ahora formateamos el título:
    • Primero la div: #top { padding: .5em; background-color: #ddd; border-bottom: 1px solid gray; }
    • Luego el título en sí: #top h1 { padding: 0; margin: 0; }
  3. Colocamos las columnas de la izquierda y de la derecha:
    • #leftnav { float: left; width: 160px; margin: 0; padding: 1em; }
    • #rightnav { float: right; width: 160px; margin: 0; padding: 1em; }
  4. La columna correspondiente al contenido la adornamos un poco, añadimos un par de rayitas a los lados para que quede bien y potito…
    • #content { margin-left: 200px; border-left: 1px solid gray; margin-right: 200px; border-right: 1px solid gray; padding: 1em; }
  5. Y damos el estilo al pie:
    • #footer { clear: both; margin: 0; padding: .5em; color: #333; background-color: #ddd; border-top: 1px solid gray;}
  6. Y para finalizar…
    • Empequeñecemos la columna del contenido añadiendo a su clase: max-width: 36em;
    • Dejamos tó cucos los márgenes con dos nuevas clases:
      • #leftnav p, #rightnav p { margin: 0 0 1em 0; }
      • #content h2 { margin: 0 0 .5em 0; }

Estética

Bordes redondeados

En CSS2 no existe la posivilidad (de forma stándard) de redondear los bordes de las div, como mucho puedes utilizar las extensiones que te dan los navegadores. Aún así existe el truco de colocar 4 imágenes en los vertices con lo que serían los bordes redondeados de estos, entonces pinar el fondo del div de ese color y… tachán! un div de bordes redondeados!!!.
Dejo aquí unos posibles bordes: link.
En el ejemplo siguiente se utilizan dos elementos div donde se colocarán los bordes y se colocarán, uno en la parte superior de otra que sería la contenedora de los datos y el otro en en la inferior. Para colocar las dos imágenes que representarán los bordes utilizaremos un elemento img para una y para la otra aprovecharemos la propiedad background de una div, aunque bien podríamos hacerlo con otro img. El código xhtml es el siguiente: 

<div class="rndbox">
  <div class="rndtop"><img src="top-left.gif" alt="" width="18" height="19" /></div>
  <p>Lorem ipsum dolor sit amet, a at ac aliquet eu nulla nec, consequat cras nulla magna ut, cum incepto. </p>
  <div class="rndbottom"><img src="bottom-left.gif" alt="" width="18" height="19" /></div>
</div>
  1. Configuramos el fondo de la página para que coincida con el de los bordes: body {background: white;}
  2. Añadimos el color de fondo a la div que contiene los bordes redondeados: .rndbox { background: #89AC10; width: 300px; }
  3. Damos las propiedades a las div superior e inferior, asignándoles la imágen de fondo:
    • .rndtop { background: url(top-right.gif) no-repeat right top; }
    • .rndbottom { background: url(bottom-right.gif) no-repeat right bottom; }
  4. Acabamos con los últimos retoques, asignando los márgenes al texto y colocando el display de la imágen como block:
    • .rndbox p { margin: 0 0.4em 0 0.4em; }
    • .rndbottom img { display:block; }

Gráfico dinámico

Podemos crear un gráfico dinámico cogiendo una imágen como la siguiente: Esta tiene una estructura… uniforme. Son 20 cuadrados de 30×30 seguidos, por lo que podemos calcular más o menos a ojo qué porción le toca a qué porcentaje. Ahora sólo debemos crear una div de 30×30 y añadirle una imágen de fondo, esta estará a una distancia a la derecha concreta, asignada según qué gráfico queramos añadirle: 

div {
 	width: 30px; height: 30px;
	border: 1pt solid black;
	background-image: url('slices.gif');
	font-size: 10pt;
	text-align: center;
}
.graff {
	background-position: -150px 0;
}
<div class="graff">37%</div>

De la misma forma podríamos utilizar una barra horizontal para representar porcentajes. Tendríamo una imágen de, por ejemplo 100×10, entonces crearíamos una div del mismo tamaño, le asignaríamos como imágen de fondo la barra pero su posición sería [el tanto por ciento que debe representar] - 100.

Consejos

Notas

Orden de propiedades

Por si quieres ponerlas en una sola línea:

Enlaces