Ahora llega lo interesante. Pongo errores típicos de webs, que veo muy a menudo (también en páginas que hice yo hace tiempo), y cómo corregir las malas costumbres para al final conseguir hacer una web accesible por cualquier navegador, con diseño y contenido por separado, y que sea fácil de mantener.
Son trucos sueltos y desordenados, y seguro que voy añadiendo más con el tiempo.
Es obligatorio ponerla, y muy importante. Es para decirle al navegador qué versión de HTML es la que usas en la página. Si no se pone, el navegador no tiene forma de detectarlo, así que entra en modo Quirks (modo chapuzas) e intentará arreglar a su manera las cosas que no entienda, imáginandose qué quiere decir cada etiqueta, y representándolas tanto si son válidas como si no.
Si se usa una versión de HTML que sea Strict, entonces el navegador usa el modo Standards compliance (cumplimiento de los estándares), y cada etiqueta tendrá el significado normal.
Por ejemplo, en esta web la primera línea es:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Recuerda que no es una etiqueta, y por eso es tan rara, va en mayúsculas, y no se cierra.
Un ejemplo de lo mínimo que tiene que tener:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mi web. Qué bonita que es mi
web.</title>
</head>
<body>
Aquí va el contenido.
</body>
</html>
Dicen que el <title> es, con mucha
diferencia, lo más importante de una web.
La verdad es que sí que es importante: lo usan los buscadores para indexar la página, pero (aún más importante) lo usamos las personas para saber en qué web entrar cuando un buscador muestra cientos de ellas. Así que elige un buen título, y ni se te ocurra dejarlo en blanco.
Se aceptan tanto mayúsculas como minúsculas, pero es mejor que elijas un estilo fijo y no lo vayas cambiando. Yo he decidido las minúsculas por muchas cosas:
No está permitido hacer cosas como <td><a>enlace</td>, ni
<ul><li>uno<li>dos<li>tres</ul>,
ni <strong>código
<em>incorrecto</strong></em>. Eso causa
desastres en muchos navegadores: imagina que empiezas un enlace
al principio de la página, y no lo cierras nunca. Entonces
¡toda la página forma parte del enlace! y puede
salir toda subrayada (es muy asqueroso).
Hay algunas etiquetas que no se cierran porque no tienen
contenido por dentro, como <img> o
<br>. En XHTML es obligatorio cerrarlas, y
para no tener que escribir <br></br>, se
permite <br />. Pero eso es XHTML... de
momento en el HTML no cierres <br> y ya
está.
En realidad sólo es obligatorio poner entre comillas
los atributos que tienen caracteres no alfanuméricos, por
ejemplo en <body bgcolor="#E099F5"> (por el
#).
Pero es mucho mejor que las pongas siempre, porque así no hay que pensar cuándo sí y cuándo no, y además es como hay que hacerlo en XML y XHTML. De todas formas, no hace falta poner casi atributos en el HTML correcto.
Puedes usar varios tipos de comillas, pero lo más
normal es la comilla doble, ".
Tu servidor ya tiene que estar preparado para mandar el tipo
MIME del documento (que debe ser text/html) y la
codificación (que es ISO-8859-1 para el español
o ISO-8859-15 si usas el símbolo del euro, €).
Pero, por si acaso al navegador no le llega esta
información, puedes decírsela con esta etiqueta
dentro del <head>:
<meta content="text/html; charset=utf-8"
http-equiv="content-type">
Así también se le dice el juego de caracteres a usar, y te aseguras de que los acentos se verán bien. Otro character encoding es UTF-8 (Unicode), que permite representar casi cualquier letra (japonesas, tibetanas, consonantes acentuadas, ...). Lo malo es que aún hay navegadores que se confunden (ya que algunos caracteres ocupan más de un byte), pero es el formato único al que habrá que migrar para evitar problemas con las codificaciones.
<font>...para nada. No es necesaria en absoluto. Con CSS se puede hacer mucho mejor, eligiendo los colores/fuente/tamaño una sola vez, y aplicándolos a todos los elementos a la vez.
Si quieres dar un estilo especial sólo a unas letras o palabras, mira el siguiente consejo:
<span> y
<div>Estas etiquetas las vas a usar mucho. Por sí solas no hacen nada; tienes que darles estilo.
Primero, una explicación importante sobre el cómo funciona el HTML:
Cada elemento HTML es (básicamente) de tipo inline o block. Los elementos de tipo inline siguen el flujo del texto, y se pueden meter como si fueran una palabra más. Por ejemplo, las imágenes y los enlaces se comportan así, porque puedo poner un enlace como si fueran palabras normales (le he puesto un borde para que veas en qué consiste el elemento).
En cambio, un elemento de tipo block rompe el flujo
de texto: hace que se le dedique una línea nueva y toda la
anchura de la página. Un ejemplo de esto son las cabeceras
(<h1>, etc): no pueden compartir espacio con
otro elemento. Los párrafos también son así:
fíjate qué pasa si pongo
un párrafo
en medio de una línea.
Bueno, pues el <span> es inline y
el <div> es block. Cuando quieras dar
formato a unas cuantas palabras, sin romper el flujo del texto,
mete esas palabras dentro del <span>, y cuando
quieras formatear un montón de elementos juntos (un trozo
de página, de una línea o varias), mételo
todo dentro de un <div>.
Un ejemplo (y el cómo queda):
<p>Puedes aplicar <span style="font-size: 120%;
text-transform: uppercase; color: blue;
cursor:pointer;">muchos efectos</span> a un trozo de
texto sin necesidad de usar la etiqueta font.</p>
<div style="text-align: center; border: 3px dashed orange;
background: yellow; font-style:italic;">
<p>Y puedes formatear todo un trozo de página a la
vez...</p>
<p>si lo metes dentro de un div.</p>
</div>
Puedes aplicar muchos efectos a un trozo de texto sin necesidad de usar la etiqueta font.
Y puedes formatear todo un trozo de página a la vez...
si lo metes dentro de un div.
Recuerda que no es cómodo usar el atributo
style. Es mejor definir clases (atributo
class) y luego darles estilo a todos los de la misma
clase a la vez. Lo explico en otra sección.
<br>, usa
párrafos: <p>El contenido de casi cualquier web se organiza por
párrafos (mira ésta, por ejemplo). Los
párrafos no hay que separarlos por saltos de línea
(<br>), sino que sólo con poner
<p> al principio y </p> al
final ya quedan bien ordenados y con la separación
adecuada.
Muy pocas veces hay que escribir un salto de línea de
verdad... sólo se me ocurre el caso de que quieras poner
un listado del código fuente de un programa: consiste en
varias líneas (incluso algunas en blanco), una debajo de
otra. Cada línea no es un párrafo por sí
sola, así que sería más inteligente bajar a
la siguiente con un <br>. Pero en general no
hace falta; es mucho más cómodo usar
párrafos.
para
hacer márgenesPara hacer que la primera línea de cada párrafo
quede un poquito más a la derecha, muchos ponen tres
espacios: . Eso es una
chapuza; es mejor usar párrafos y aplicarles la siguiente
hoja de estilos:
p {text-indent: 20px}
Con esto, todos los párrafos tendrán la primera línea 20 píxels a la derecha del margen. Elige bien las unidades; ponlas en cm. o mm. si te aclaras más, aunque quizás iría mejor no usar unidades absolutas sino en relación al tipo de letra actual.
Entonces, ¿cuándo hay que usar
? Pues sólo cuando quieras dibujar
un espacio en blanco. Cuando haces un diseño, no creo que
pienses aquí me iría bien poner cinco
espacios...
, sino esto lo quiero un poco más a la
derecha
, y para eso se usa el CSS. Si alguna vez realmente
necesitas poner los cinco espacios (ni 4 ni 6), pon
cinco veces.
<center> no existeLa etiqueta <center> y el atributo
align (como en <table
align="center">) no dejan muy claro su funcionamiento
(¿deben alinearse ellos dentro de la página, o
centrar el texto que viene a continuación?). Con CSS se
puede especificar mejor los temas de centrado, pero hay que
entender un poco qué es lo que queremos centrar, y
recordar lo del tipo de los elementos (block o
inline).
Para centrar el contenido que hay dentro de un elemento (por
ejemplo, todo el texto de dentro de un <div>),
basta con el estilo text-align:center;. Por
ejemplo:
<div style="border:1px solid green;
background:rgb(50,240,60); width:60%;
text-align:center;">
Este texto está centrado.
</div>
Y queda:
En cambio, si lo que quieres centrar es el propio
<div> (u otro elemento tipo block), y
no su contenido, tienes que darle una anchura (con
width:75%;), y decir que el navegador se ocupe
automáticamente de los márgenes izquierdo y
derecho. Se hace con margin-left:auto;
margin-right:auto;, o, abreviado: margin: 0
auto;. Las dos formas hacen lo mismo, pero si te interesa
entender por qué la corta funciona, busca
información sobre CSS shorthand
.
Ejemplo para alinear un bloque:
<div style="border:1px solid green;
background:rgb(50,240,60); width:60%; margin: 0 auto;">
Ahora es el div el que está centrado, y no su
contenido.
</div>
Y queda:
Así ya sabes centrar tanto el contenido de un elemento,
como cualquier elemento de tipo block.
¿Cómo se centraría un elemento
inline, como una imagen o un <span>?
Pues podrías meterla dentro de un <div>
y usar text-align:center; margin: 0 auto; combinando
los dos métodos anteriores, pero es más
fácil pedirle que se comporte como un bloque, con
display:block; margin: 0 auto; (así te
ahorras el <div>).
align no existeLee el consejo anterior para ver cómo centrar cosas.
He visto que mucha gente usaba el align="center"
en los <td>, para centrar el contenido de las
celdas. Es mucho más fácil con CSS:
td {text-align:center;}
¡Y ya están todas las celdas de todas las tablas
centradas! Si te interesa escoger sólo algunas celdas,
estudia lo de darles nombre y clase (atributos id o
class, que explico más adelante).
<nobr> no es necesarioAlgunos navegadores hacen que el texto entre un
<nobr> y </nobr> no se
separe en varias líneas si la ventana en la que se muestra
es pequeña.
En realidad, cuando usas esta etiqueta es porque quieres
dibujar un espacio en blanco (quieres que sea como una letra
más de una palabra, y asegurarte de que se dibuja en
pantalla como las demás), y lo correcto sería usar
el y olvidarse del
<nobr>.
Lo bueno es que se puede hacer más fácil por CSS:
table tbody tr th {white-space:nowrap;}
Así, todas las cabeceras de las tablas ocuparán siempre una sola línea.
<i>,
<b>, <u>, sino
<em>, <strong> y CSS.Cuando estás escribiendo algo y llegas a una palabra
especial, supongo que no pensarás ay, esto tiene que ir
cursiva
sino en quiero resaltar esto
. Lo de ponerlo en
negrita, cursiva o subrayado forma parte del diseño, y ya
hemos quedado en que el diseño se hará al final,
cuando esté todo escrito.
De momento, lo que tienes que hacer es marcar las palabras a
las que quieres dar énfasis con la etiqueta
<em>, y si quieres dar un énfasis
aún mayor, <strong>. Lo normal es que
los navegadores representen el énfasis en cursiva
y el énfasis mayor en negrita, pero lo
bueno es que puedes cambiarlo mediante el CSS (incluso
podrías desactivarlo).
Cuando realmente quieras especificar un estilo concreto,
puedes usar font-weight:bold para negrita,
font-style:italic para cursiva,
text-decoration:underline para subrayado, y muchas
más cosas, como text-decoration:overline para
una línea por
encima, o text-decoration:line-through para
tachado.
Para poner caracteres especiales (como acentos) hay que
escribir cosas como á (se llaman
entidades
). Empiezan por & (en inglés,
ampersand
; y
o et
en español)
y acaban por ;. Por eso, cada vez
que el navegador encuentra un &, se cree que vas
a escribir una entidad, y ésa es la razón por la
que hay que poner & para dibujar un
ampersand de verdad en la página.
Pues las URIs (y URLs) no son una excepción: si una
dirección cualquiera (de una imagen, enlace, o lo que sea)
tiene ampersands en su interior, los debes escribir como
&. Por ejemplo, si quieres poner este enlace
en tu web:
http://www.google.es/search?hl=es&q=142857,
tienes que hacer esto:
<a
href = "http://www.google.es/search?hl=es&q=142857">
Información sobre el 142857</a>
Tranquilo, que ni siquiera los navegadores viejos o simples se van a confundir. Precisamente esto les ayuda a no liarse con las entities.
Las listas (sobre todo <ul> y
<ol>) son los elementos con los más se
puede jugar al aprender CSS. Sólo con HTML son muy
aburridas, pero añadiendo pocos estilos se pueden hacer
maravillas como menús de navegación, botones,
pestañas, tablas, y muchas más cosas.
En las páginas web abundan muchas listas, aunque no te hayas dado cuenta. Son una forma muy buena de estructurar la información, aparte de ser sencillas y de verse bien en todos los navegadores.
Puedes mirar páginas como Listamatic para probar las posibilidades de las listas.
class e
idMuchas veces querrás aplicar un estilo a varios
elementos, pero no a todos a la vez; por ejemplo, si en tu
página tuvieras muchos <div> con ayuda
para los visitantes, y quieres que salgan todos igual, con el
mismo estilo, no te iría bien una hoja de estilos
como:
div {border:2px solid black; background:yellow;}
ya que cambiaría el diseño de todos los
<div> de la página (aunque no sean los
de ayuda). Hace falta algo para elegir unos pocos elementos
concretos, y aplicar el estilo sólo a esos.
Como siempre, hay una solución elegante y sencilla que no requiere copiar y pegar estilos. La solución es distinta dependiendo de si hay varios elementos a los que aplicar el estilo, o sólo uno.
Cuando tenemos varios elementos parecidos que queremos
agrupar, lo que hay que hacer es inventarse un nombre (nombre de
clase) para asignárselo a todos ellos (porque
pertenecerán a la misma clase). Eso se hace con el
atributo class. Por ejemplo, en todos los
<div> de ayuda tendremos que poner
<div class="ayuda"> (en los que no son de
ayuda, <div> sólo).
Entonces les podemos cambiar el estilo a todos los de la clase a la vez, con el CSS. Se hace así:
div.ayuda {border:2px solid black;
background:yellow;}
Eso quiere decir: todos los <div> que
pertenecen a la clase ayuda. También
podrías poner .ayuda para referirte a
cualquier elemento que pertenezca a la clase ayuda
(sea <div> o no), pero la primera forma es
más clara.
En cambio, habrá veces en las que el elemento al que
quieres dar estilo es único, o sea, sólo sale una
vez en la página. Lo puedes hacer con class
igual que antes, claro, pero si prefieres dejar constancia de que
el elemento es único, dale un identificador con el
atributo id; por ejemplo <div
id="titulo">. No puede haber ids repetidos
ya que son únicos.
Luego, en la hoja de estilos, se pone:
div#titulo {border:12px solid blue; background:gray;
color:black;}
con un # (sostenido
, almohadilla
, o
como quieras llamarle). Date cuenta de que el estilo se refiere a
un sólo elemento de la página, no a varios.
También podrías poner #titulo y se
aplicaría al elemento que tenga id="titulo",
sea cual sea (en este caso es un <div>).
Otra forma de "seleccionar" elementos es intentar ser
más específico. Por ejemplo, si todos los
párrafos que hay dentro de un <div> son
especiales, en vez escribir <p
class="especial"> para cada párrafo, define la
regla CSS como div p { ........... }, que quiere
decir lo mismo (todos los
), y pon
sólo <p> que
estén dentro de un <div><p> en cada párrafo.
Por cierto, ya has visto qué hace class e
id. Aún hay otro atributo, name,
que no hay que usar porque es lo mismo que id.
<script> y
<style> requieren type, no
languageHay que poner <script
type="text/javascript">. El atributo
language no se usa (de todas formas cada uno lo
escribía como quería, o no lo ponía porque
iba igual). Lo mismo con el <style>: si es
CSS, pon <style type="text/css">.
Esta información sí que es útil, porque son tipos MIME estandarizados, no palabritas cualquiera.
<h1>,
<h2>, <h3>, ... son para
cabecerasNo uses etiquetas de cabecera sólo porque el texto sale más grande. Sirven para definir la estructura del texto, y poder poner títulos de sección, subsecciones, etc. Los buscadores las usan para saber de qué se habla en una página, así que es importante usarlas sólo para lo que se han diseñado.
Cuando quieras cambiar el tamaño del texto, usa el CSS
(propiedad font-size).
<body> no necesita
atributosLos atributos como topmargin,
leftmargin, marginheight,
marginwidth, background,
bgcolor, bgproperties,
text, link, vlink,
alink son un ejemplo de lo mal que estaba Internet
antes de CSS. Todos ellos se aplicaban al
<body>, aunque algunos atributos fueron
inventados por cierta empresa y no funcionaban igual en todos
lados.
El caso es que todos ellos forman parte del diseño de
la página (márgenes, fondos, colores, ...), y lo
mejor es hacerlo con hojas de estilo. El
<body> hay que acabar escribiéndolo
como <body>, sin atributos (como la
mayoría de etiquetas en HTML).
Hay muchas etiquetas para las cosas que salen normalmente en
páginas web: direcciones, citas, código,
referencias, variables, ... ¿Conocías
<abbr>, <acronym>,
<address>, <bdo>,
<cite>, <code>,
<del>, <dfn>,
<ins>, <kbd>,
<q>, <samp> o
<var>?
Bastantes se comportan de la misma forma, pero al que lee el código le sirven para entender mejor la estructura del documento. También le van muy bien al diseñador, que podrá aplicar estilos diferentes a cada tipo de elemento sin tener que ir definiendo clases.
Puedes mirar las etiquetas aceptadas en la especificación de HTML 4.01.
<marquee> ni
<blink>Son etiquetas propietarias (inventadas por empresas malas) y sirven para molestar. Una lo hace con texto que se mueve, y la otra hace que parpadee.
Por suerte, no van en muchos navegadores. Si quieres irritar a tus visitantes de una forma más efectiva, puedes usar imágenes (un GIF animado, por ejemplo), que eso sí que lo podrán ver... a menos que tengan un navegador que permita bloquear los banners con dos clics, como el mío.