HTML, Hypertext Markup Language



Te recuerdo que HTML quiere decir Hypertext Markup Language, en español equivale a Lenguaje de Marcas de Hipertexto.

El objetivo de este mini-curso no es aprender este lenguaje, pero es conveniente que conozcas cómo funciona. HTML es un lenguaje para la construcción de páginas web. Los navegadores de Internet (Internet Explorer, Firefox o Netscape) lo decodifican para elaborar la estructura y el contenido de una página en forma de textos e imágenes. Se escribe en forma de etiquetas o tags, entre corchetes angulares y se definen con dos elementos:

Una etiqueta de apertura: <html> y una etiqueta de cierre: </html>.

Un documento HTML se divide en dos partes principales:

1. La cabecera del documento (head).
2. El cuerpo del documento (body).

• La cabecera (head) tiene información del contenido de la página. (relevante para los motores de búsqueda y no visible para los visitantes.) La cabecera va entre las etiquetas: < head> </head >.

• En el cuerpo del documento (body) se colocan el texto y las imágenes. El cuerpo va entre las etiquetas: <body> </body>.

La estructura general de un documento será la siguiente:

<html>

<head> Aquí va la información básica de la web </head>

<body> entre estas dos etiquetas van los texto e imágenes </body>

Analicemos estas partes más a fondo:

• La cabecera (head) contiene la información básica de una página y se divide en dos elementos:

• El título (title) de la página que sí podrá ver el visitante sobre la barra de información de su navegador.

• Los metatags son etiquetas que informan a los motores de búsqueda sobre el contenido de tu página; tienen un formato diferente a los tags normales de apertura/cierre:

< > </>.

Muchos editores web generan metatags de manera automática al colocar la información en unos cuadros de diálogo; comprueba que estén ahí, en caso de que no estarlo puedes escribirlos directamente. Los metatags se sitúan al principio del documento HTML, por lo que no te costará encontrarlos. Su estructura es la siguiente:

<meta name="" content="">

<meta name=“aquí va el nombre del metatag” content=“aquí el contenido del metatag”>

Veamos los tipos de metatags y hagamos un ejercicio.

• Metatag de descripción: contiene información sobre la página que muestra el motor de búsqueda en sus resultados.

<meta name=“Description” content=“aquí pondrás una breve descripción de la página”>

• Metatag de palabras clave: con él informamos al buscador cuáles son la principales palabras clave de nuestra página.

< meta name=“keywords”content=“aquí ponemos la(s) palabra(s) clave por las que queremos que se encuentre nuestra web” >

Los metatags anteriores son los más importantes e imprescindibles junto con el de título. Existen otros opcionales que son:

<meta name="author" content="nombre del autor de la página web">

<meta name="owner" content="nombre del propietario de la web">

<meta name="robots" content="aquí informaremos al motor de búsqueda si queremos que registre esta página o no">

El metatag “robots” es importante cuando tenemos páginas privadas y no queremos que aparezcan en los resultados de búsqueda, así como las páginas de información del tipo “contáctenos”, “aviso legal”, etcétera que no tienen mayor interés ni relación con nuestro tema. Para que los buscadores no indexen (registren) estas página y no sigan sus enlaces, sólo escribe “noindex”, “nofollow”.

Si quieres que los buscadores indexen tu página escribe “index, follow” o simplemente omite el metatag “robots”.

Dentro del cuerpo (body) de tu documento HTML estará todo lo que tus visitantes podrán ver: texto, imágenes, tablas, colores, enlaces, etcétera.

También podrás usar otras etiquetas para dar formato al texto o a los diferentes elementos de la página como el color, el tipo y tamaño de letra, la alineación, entre otros.

Veamos algunos ejemplos:

B (bold) = Negrita

<b>el texto dentro de esta etiqueta saldrá escrito en negrita</b>

U(underlined) = Subrayado

<u>el texto dentro de este tag estará subrayado</u>

De esta forma existirá una etiqueta similar para cada función. Tu editor WYSIWYG las creará en automático, ¡no hay que preocuparse por ellas!

Más tips: Veamos ahora con qué etiqueta le indicamos al navegador que nos muestre una determinada imagen. La estructura del tag es la siguiente:

<img src=“ nombre del archivo de la imagen ” alt=“ texto que se leerá al pasar el ratón por encima de la imagen ”>

Ejemplo: si queremos que en un lugar de nuestro website se muestre una imagen que tenemos en un archivo llamado fotoproducto.jpg, el metatag dirá:

<img src=“ fotoproducto.jpg ” alt=“ imagen producto ”>

Es importante poner la extensión. Recordemos que para que las imágenes no pesen mucho, usaremos archivos con extensiones “.jpg” o “.gif.”

-La mayoría de las etiquetas HTML, además de su contenido principal, permiten añadir atributos adicionales que queramos darle al texto, a la imagen o algún otro elemento.

-Nuestro editor web creará en automático los tags de los enlaces y a veces conviene retocarlos.

Para evitar que el robot de Google indexe y acceda a una página determinada de nuestra web usamos el metatag “robots”. Esto sirve para páginas internas, pero ¿qué hacemos si lo que no queremos es que Google siga un enlace a una página externa? ¡muy fácil! podemos añadir al enlace un atributo que se llama “rel=nofollow” que indica al robot que no debe seguirlo.

Ejemplo: <a href=http://www.marketingcientifico.com/boletines.html rel=”nofollow”> lea el artículo del experto en mkt…., esto hará que el buscador no siga el enlace, pero continuaría activo para nuestros visitantes. Este ejemplo tiene que ver con la optimización en los motores de búsqueda en relación a las páginas web que enlazamos desde la nuestra. No olvides cómo se utiliza el atributo “nofollow”.

Con esto terminamos nuestra breve introducción al HTML y sus etiquetas más importantes. No necesitas manejar HTML para poder hacer páginas web, porque contarás con un editor WYSIWYG, en el que podrás trabajar en un entorno 100% visual.

Te recomiendo que tengas a mano este capítulo para que puedas controlar que tu editor haya generado correctamente todos los metatags. Añadir la etiqueta “robots” o el atributo “rel=nofollow” si quieres que alguna página no sea listada e indexada por el buscador o verificar que tus imágenes estén formateadas con medidas en valores absolutos.

CONTINUAR CON: Motores de Búsqueda y SEO