martes, noviembre 09, 2004

Consejos HTML

Tipo de documento

La primera línea de la página debe ser el DOCTYPE. Es obligatoria. Es para decirle al navegador qué versión de HTML es la que usas en la página.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Estructura básica de una web

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Título</title>
</head>
<body>
Contenido
</body>
</html>


Título

El elemento title es lo más importante de una web, porque lo usan los buscadores para indexar la página.

Etiquetas

Deben ir en minúsculas y cerrarse.

Juego de caracteres (charset)

Tu servidor normalmente mandará el tipo MIME del documento (text/html) y la codificación (ISO-8859-1 para el español). Pero, por si acaso puedes especificarlo con esta etiqueta (dentro del <head>):

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

Formato

<span>: Para dar formato a unas cuantas palabras, sin romper el flujo del texto.
<div>: Para dar formato a unos cuantos elementos juntos, rompiendo el flujo de texto (que se le dedique una línea nueva y toda la anchura de la página).

Márgenes

Para hacer que la primera línea de cada párrafo quede un poco más a la derecha, se debe 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.

Centrados

Para centrar el contenido de dentro de un elemento, basta con el estilo text-align:center;.

<div style="border:1px solid black; width:70%; text-align:center">Este texto está centrado.</div>

Este texto está centrado.


Para centrar el propio elemento, y no su contenido, tienes que darle una anchura (width), y decir que el navegador se ocupe de los márgenes. Se hace con margin-left:auto; margin-right:auto;, o, abreviado: margin: 0 auto;.

<div style="border:1px solid black; width:70%; margin: 0 auto;">Centrado el div</div>

Centrado el div


Enfasis

La etiqueta <em> sirve para marcar las palabras a las que quieres dar énfasis, y <strong> para dar un énfasis mayor. Normalmente los navegadores las representan en cursiva y en negrita, respectivamente, pero puedes cambiarlo con CSS.

Para especificar un estilo concreto:
font-weight:bold para negrita
font-style:italic para cursiva
text-decoration:underline para subrayado
text-decoration:overline para una línea por encima
text-decoration:line-through para tachado.

Listas

Usando CSS para las listas (<ul> y <ol>) se pueden hacer menús de navegación, botones, pestañas, tablas, etc.

En Listamatic tienes muchas posibilidades de listas.

Identificar elementos

Para aplicar un estilo a varios elementos a la vez, inventamos un nombre (clase) para ellos, con el atributo class, y cambiamos el estilo a todos los de la clase a la vez con el CSS.

Por ejemplo, en los <div> de ayuda pondremos <div class="ayuda">.

Y aplicamos CSS:
div.ayuda {border:2px solid black; background:yellow;}

Cuando quieres dar estilo a un único elemento, se le da un identificador con el atributo id; por ejemplo <div id="titulo">.

Y en la hoja de estilos:

div#titulo {border:12px solid blue; background:gray; color:black;}

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 todos los <p> que estén dentro de un <div>), y pon sólo <p> en cada párrafo.

Tamaño del texto

Para cambiar el tamaño del texto, usa el CSS font-size, no las cabeceras <h1>, <h2>,...

Ref:
Cómo hacer buenas páginas web
Who Links Here