Maquetación web perfecta para buscadores.

En este artículo aprenderás a aplicar estilo a los textos, o mejor dicho, a las etiquetas de texto, por medio de CSS. Esto es un paso fundamental cuando pasamos de un psd a html, logrando que nuestros textos sean mejor indexados por los buscadores.
Para esto utilizamos lo mismo que en el artículo anterior: 1 archivo CSS y 1 archivo HTML.

En el HTML utilizamos varios textos, alguno con formato de titular, y otro como texto de parrafo normal. Para esto usaremos las etiquetas estándard que se utilizan para maquetacion web: <h1> y <p>

Para los titulares se utilizan las etiquetas <h1> al <h6>, en este ejemplo solo usaremos hasta la <h4> (cuando mas chico es el numero, mas grande será la letra)
Y para los textos de parrafo, la etiqueta <p>.

Entonces el HTML nos quedaría asi:

<html>
<head>
<title>Titulo del documento</title>
<link href=”estilos.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<h1>Titular 1</h1>
<h2>Titular 2</h2>
<h3>Titular 3</h3>
<h4>Titular 4</h4>
<p>Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. </p>
<p>Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. Texto de parrafo. </p>
</body>
</html>

Aqui creamos 4 titulares con las etiquetas <h1> al <h4>, y dos parrafos de texto con la etiqueta <p>. (ademas de linkear el archivos CSS como aprendiste en al articulo anterior)

Y el a archivo CSS,  seria:

body {
background-color: #ff0000;
margin-top: 0px;
margin-left: 0px;
}
h1 {
color: #00ff00;
font-family: Verdana, Geneva, sans-serif;
}

h2 {
color: #0000ff;
font-family: “Courier New”, Courier, monospace;
}

h3 {
color: #ffff00;
font-family: Tahoma, Geneva, sans-serif;
}

h4 {
color: #000000;
font-family: “Times New Roman”, Times, serif;
}

p {
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}

Aqui definimos los estilos para el body, para los 4 titulares, y para los textos de parrafo.
Al “body” le indicamos un color de fondo rojo (background-color: #ff0000;), y un margen superior e izquierdo de 0 pixel. (margin-top: 0px; margin-left: 0px;)

Luego definimos el color y la familia tipográfica para cada titular (<h1>,  <h2>,<h3>,<h4>).

Y por ultimo, para los textos de parrafo definimos el color, la familia tipografica, el tamaño y un estilo bold.

Como puedes ver, es muy fácil dar formato a los textos mediante el CSS y este es un elemento escencial cuando pasamos de psd a html ya que nos permite separar los textos de los graficos, y esto hace que los mismos sean indexados perfectamente por los buscadores.
De hecho, los buscadores como Google, recorren nuestro documento buscando las etiquetas <h1> al <h6>, y las etiquetas <p>.

Aqui les dejo la descarga de los archivos usados. Descargar archivos.

En los próximos artículos, comenzaremos  con la maquetacion web de los diferentes sectores del documento. Hasta la próxima !!

—————————————————————————
Me gustaría que me dejaras un comentario sobre este artículo que acabas de leer y también que me contaras un poco cual es tu principal complicación, a la hora de tratar de pasar un psd a html.
YO personalmente estaré contestando tus preguntas y comentarios para ayudarte.

Anuncios

7 pensamientos en “Maquetación web perfecta para buscadores.

  1. David Martín

    Muy interesante lo explicado hasta ahora, aunque también muy básico, al menos para mí claro. Esperando ansioso que te metas en harina de verdad, cómo cortar los PSD y maquetar luego sin problemas esas imágenes con xhtml y css (más allá de “usar la iamgen como fondo de celda…”).

    Gracias por toda la información.
    Un saludo.

    Responder
    1. Psd a Html Autor de la entrada

      Hola Martin.
      Si es muy basico por ahora porque quiero explicarlo desde las bases para que se entienda el concepto principal y luego puedan desarrollar cualquier tipo de maquetacion web con XHTML y CSS.
      No te preocupes que en los siguientes artículos, estaré explicando como pasar de psd a html, cortando las imagenes y trabajando con DIVs. (olvidate de la imagen de fondo de celda jajaja)
      Un abrazo !!!

      Responder
    1. Psd a Html Autor de la entrada

      Tambien podés suscribirte arriba a la derecha donde dice “Suscripcion por E-mail” y te llegarán avisos automaticos cuando publique nuevos artítulos.
      Saludos y espero seguirte viendo por aqui !

      Responder
  2. Pingback: De Psd a Html: define tu estilo usando las Clases de CSS. | Psd a Html: hazlo rápido y profesionalmente

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s