logo frax design
qr

HTML

El HTML no es más que una aplicación del SGML (Standard Generalized Markup Language), un sistema para definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. El término HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas.

Fue creado en 1986 por el físico nuclear Tim Berners-Lee; el cual tomo dos herramientas preexistentes: El concepto de Hipertexto (Conocido también como link o ancla) el cual permite conectar dos elementos entre si y el SGML (Lenguaje Estándar de Marcación General) el cual sirve para colocar etiquetas o marcas en un texto que indique como debe verse. HTML no es propiamente un lenguaje de programación como C++, Visual Basic, etc., sino un sistema de etiquetas.

El entorno para trabajar HTML es simplemente un procesador de texto, como el que ofrecen los sistemas operativos Windows (Bloc de notas), UNIX (el editor vi o ed) o el que ofrece MS Office (Word). El conjunto de etiquetas que se creen, se deben guardar con la extensión .htm o .html

Estos documentos pueden ser mostrados por los visores o "browsers" de páginas Web en Internet, como Netscape Navigator, Mosaic, Opera y Microsoft Internet Explorer.

También existe el HTML Dinámico (DHTML), que es una mejora de Microsoft de la versión 4.0 de HTML que le permite crear efectos especiales como, por ejemplo, texto que vuela desde la página palabra por palabra o efectos de transición al estilo de anuncio publicitario giratorio entre página y página.

Ventajas de HTML:

  • Cada documento de HTML es pequeño, así que cada documento puede ser transferido de forma rápida.
  • Los documentos HTML pueden ser leídos en cualquier plataforma.
  • Es especialmente pequeño y fácil de aprender

CREACIÓN DE DOCUMENTOS HTML

Necesitamos un procesador de textos para escribir y editar el código HTML. Este podrá ser cualquiera que no formatee el texto, ya que el leguaje HTML está basado en el código ASCCI. Si usamos un procesador como el Word, tendremos que guardar el documento como "sólo texto".

La secuencia de trabajo para crear nuestro documento es:

  1. Con el procesador de texto crearemos el documento HTML y lo guardaremos con el nombre que deseemos, a excepción de la extensión, que deberá ser necesariamente .htm ó .html.
  2. Para visualizar nuestro documento HTML abriremos el documento con el programa navegador.

Todos los navegadores usan unas reglas básicas para poder mostrar una página web con un buen formato:

  • El espacio en blanco es ignorado. Ya que un documento HTML puede estar en cualquier tipo de fuente y además la ventana del navegador puede ser de cualquier tamaño.
  • Las etiquetas pueden ser escritas en mayúsculas o en minúsculas. En todo caso se aconseja su escritura en mayúsculas para poder distinguirlas del texto normal.
  • Existe normalmente una etiqueta de inicio y otra de fin. La etiqueta de fin contendrá el mismo texto que la de inicio añadiéndole al principio una barra inclinada /. La etiqueta afectará por tanto a todo lo que esté incluido entre las etiquetas de inicio y fin. No obstante, existen algunas que no necesitan cierre, ya que en estas etiquetas se presupone su final.

TÍTULO

El título es utilizado por los marcadores del visualizador o programas de lista importante así como por otros programas que clasifican las páginas Web. Para dar un título a un documento utilice la etiqueta <title>, estas siempre van dentro de la cabeza del documento (la etiqueta <head>, y describen el contenido de la página, de la siguiente manera: <TITLE>titulodetupagina</TITLE>

Sólo puede tener un título en el documento, y dicho título solo debe contener texto simple, es decir no debe haber otras etiquetas dentro del título.

El título debe ser tanto corto como descriptivo acerca del contenido de la página

ENCABEZADOS

Los encabezados se utilizan para dividir de secciones del texto, tal como se divide un libro. HTML define seis niveles de encabezado. Las etiquetas para los encabezados son como las siguientes: < H1 >Encabezado con HTML</H1>

Los números indican los niveles de encabezado (H1-H6). Los encabezados, cuando se despliegan, no aparecen numerados. Se despliegan en textos más grandes o más negros o se centran o se subrayan o en mayúsculas- algo que los resalte del texto normal. Considere los encabezados como elementos de un esquema. Si el texto que está escribiendo tiene una estructura, use los encabezados para indicar dicha estructura.

A diferencia de los títulos, los encabezados pueden tener cualquier longitud, incluso varias líneas de texto (no obstante, ya que resaltan los encabezados, tener varias líneas de texto destacado tal vez canse al lector).

Utilizar los encabezados para algo diferente a ello, podría despistar a los programas de búsqueda y provocar resultados inesperados.

PÁRRAFOS

Los párrafos en HTML son engañosos. La definición de párrafos ha cambiado entre las tres versiones de HTML. En lo único que concuerdan las tres versiones es en que un párrafo de texto simple se indica mediante la etiqueta <p>.

Las etiquetas de párrafo son de dos lados (<p>…</p>), <p> indica el principio del párrafo. Del mismo modo, la etiqueta de cierre </p> es optativa. Estas son importantes ya que se puede definir la alineación y otras características de cada párrafo.

COMENTARIO

Se pueden colocar comentarios en el documento HTML para describir el documento mismo o para proporcionar algún tipo de indicación acerca del estado del documento. Los comentarios se ven de la siguiente forma: <!—este es un comentario-- >

Cada línea debe ser comentada de manera individual, y por lo general es una buena idea no incluir otras etiquetas HTML dentro de los comentarios

LISTAS

HTML define tres clases de listas importantes: numeradas o listas ordenadas, de viñetas o listas sin orden y listas de glosario.

IMÁGENES

La etiqueta que sirve para agregar imágenes es <img> pero al igual que la etiqueta para crear enlaces, necesitamos agregar un atributo para especificar la ubicación, en este caso, de la imagen.

Para insertar una imagen lo haremos así: <img src="ubicación" alt="descripción" />

"alt" sirve para agregar una descripción a la imagen, que aparecerá cuando pasemos el mouse por encima de ella.

Para crear un enlace en la imagen para que al hacer clic en ella nos abra otra página, solo debemos poner la etiqueta <img> dentro de <a> y </a>

ELEMENTOS META

Nuestro objetivo es aparecer en los primeros resultados en los buscadores. Fundamentales por lo que se refiere a este objetivo resultan las marcas de meta información (META), cadenas de códigos que figuran en la cabecera del documento, entre <HEAD></HEAD> y que son las primeras que leen los buscadores.

Las palabras clave (keywords) son los términos que, de manera resumida, describen el contenido de una página web.

La marca META deberá impostarse como sigue: <META name="keywords" Content="palabra1, frase corta, palabra2, …">

La coma divide unos términos de otros. No se escriben comas dentro de las frases que constan de más de un vocablo para que el buscador puede encontrarlas tal y como aparecen escritas.

Naturalmente, si vuestro sitio es multilingüe será recomendable incluir palabras clave en todos los idiomas del sitio, prestando siempre mucha atención para evitar usar términos demasiado genéricos.

En el caso de que se tratara de nombres propios, es aconsejable incluir la forma singular y plural. El buscador considera el número de veces que se repite un término dentro de la página y de las palabras clave; sin embargo, repetir exageradamente la misma palabra en la marca META tiene el efecto contrario al deseado ya que la mayor parte de las arañas cancelan estos sitios de las propias bases de datos.

Otras marcas de meta información se refieren al autor de la página web: <META name="author" content="Nombre Apellidos">

El título que aparecerá tras la búsqueda: <META name="description" content="Mi primera portada con la guía de HTMLpoint">

Y el nombre del editor con el que se ha generado el documento HTML: <meta name="GENERATOR" content="BLOC DE NOTAS Win95">

Si por cualquier razón quieres que una de tus páginas no sea indiciada en los motores de búsqueda, deberás incluir la siguiente marca de meta información: <META NAME="ROBOTS" CONTENT="NOINDEX">

Otra marca META es la que permite el "refresh" de la página. Esto significa que la misma página u otra diferente puede lanzarse automáticamente tras un cierto número de segundos determinado por nosotros mismos: <META HTTP-EQUIV="Refresh" CONTENT="5; url=ejemplo.htm">

Donde Content="5 es el número de segundos en los que la nueva página será cargada, mientras que url=ejemplo.htm" es el archivo que será cargado.

Ir arriba