RGBLAB: Curso HTML parte #1

Busqueda en Google

HTML al instante - Parte #1

Versión: 1.1
Autor: Santiago Badano
Ultima actualización: 13 Oct 96

HTML significa HyperText Markup Language. Es el lenguaje en que se escriben los millones de documentos que hoy existen en el World Wide Web. Cuando accedemos a uno de estos documentos, el cliente (Netscape, IE, Mosaic, Lynx, IBrowse) los interpreta y los despliega. Existen clientes gráficos como Netscape, y otros como el Lynx que solo despliegan texto. Es muy importante no olvidar esto cuando se diseña una página web. Crear una buena página tiene dos aspectos; por un lado el conocimiento técnico para crear código HTML correcto, por otro lado el claro diseño para presentar la información.

Estructura de un documento HTML
Una página web es un archivo de texto, se puede crear con cualquier editor de texto como el edit de DOS. Todas las páginas web tienen la siguiente estructura:

<HTML> <HEAD> <TITLE>primera página</TITLE> </HEAD> <BODY> ... ... ... </BODY> </HTML>

En la primer linea encontramos el comando <HTML>. Esto le indica al cliente (ej: Netscape) que comienza un documento HTML. Luego viene <HEAD>, la primer parte de un documento HTML. Dentro de HEAD puede ir el titulo <TITLE> del documento (Netscape lo muestra en la barra superior de la ventana) y otros comandos mas avanzados que luego veremos. Luego de HEAD viene <BODY>, que es donde se coloca la información que queremos mostrar. El comando BODY acepta varios parámetros muy interesantes:

Tip: un documento HTML consta de dos partes: HEAD y BODY. Siempre deben estar presentes.

Parámetros de BODY

BACKGROUND="imagen.gif" Permite incluir una imagen de fondo. No poner una imagen muy 'pesada' de fondo, no mas de 15k. No olvidar verificar que no dificulte la lectura del texto.
BGCOLOR="#xxxxxx" Cambia el color de fondo de una página. Donde va cada x va un número hexadecimal, del 0 a la F. Las dos primeras xx corresponden al rojo, las 2 siguientes al verde y las restantes al azul. Ej: para un fondo blanco poner todos los valores al máximo: FFFFFF. Para un fondo rojo: FF0000.
TEXT="#xxxxxx" Cambia el color del texto de toda una página. La selección de color funciona igual para todos los casos.
LINK="#xxxxxx" Cambia el color de todas las conexónes (links) de toda una página.
VLINK="#xxxxxx" Cambia el color de todas las conexónes visitadas (links) de toda una página.

Tip: Para ver un ejemplo de como se usa esto pueden fijarse en el código de esta misma página.

En la última línea del código del ejemplo esta </HTML>. Esto le indica al cliente ( Netscape) que terminó el documento. Noten que: <HEAD> tiene su correspondiente llave de cierre </HEAD>, y <BODY> tiene </BODY>. Esto es fundamental incluirlo en la página para tener un documento HTML correcto. Esta estructura de cabezal (HEAD) y cuerpo (BODY) siempre debe ser mantenida. Envolviendo estas dos secciones va el <HTML> y </HTML>.

Incluyendo texto
Si cargamos el código del primer ejemplo veremos que no aparece nada. (solo el titulo!)
Tenemos la estructura, ahora hace falta agregarle la información. Lo primero que debemos tener claro es que al cliente web (Netscape) no le importa los espacios, tabs, o fin de líneas que tenga un texto creado con el edit. Como ejemplo, veamos la siguiente página:

<HTML> <HEAD> <TITLE>primera página</TITLE> </HEAD> <BODY> <H1>Bienvenido a mi página</H1> Esta página se encuentra en <STRONG>Montevideo Uruguay</STRONG>,<BR> en el <EM>servidor web</EM> de Compuservice. <HR> Hasta luego! </BODY> </HTML>

Este código de ve asi:

Bienvenido a mi página
Esta página se encuentra en Montevideo Uruguay,
en el servidor web de Compuservice.
Hasta luego!

aquí aparecen varios comandos nuevos. <H1> es para indicar el que texto es un título. Cuando esta página es cargada ese texto aparece en un tipo de letra más grande. <H1> es un comando 'contenedor', significa que necesita una llave de cierre que es </H1>. Esta llave indica que hasta ahí llega el título, sino toda la página aparecería con letras gigantes.
<STRONG> le indica al cliente que muestre 'Montevideo, Uruguay' más fuerte. <EM> indica que le de énfasis. Generalmente todos los clientes muestran al texto <STRONG> como bold, y <EM> como italic.
<BR> no es un comando contenedor. Cuando colocamos un <BR>, indica un corte de línea (CR). <HR> tampoco es contenedor, indica incluir un separador.

Comandos basicos de formateo de texto

<H1> </H1> Indica que el texto en un título. El mas importante (grande) es H1, luego H2 y asi hasta H7. Los más usados son hasta H3.
<STRONG> </STRONG> Muestra en texto seleccionado más fuerte.
Casi todos lo muestran como bold.
<EM> </EM> Muestra en texto seleccionado con énfasis.
Casi todos lo muestran como italic.
<BR> Indica un corte de línea. (CR)
<HR> Inserta un separador.
<P> </P> Indica un comienzo de párrafo. Tiene como opciones ALIGN (center, left y right) y otras más que luego veremos. Útil para centrar o alinear a la derecha texto. Cada comiezo de párrafo deja un espacio separador.

Tip: para centrar un texto: <P ALIGN=CENTER>.

Incluyendo imágenes
Incluir imágenes en una página web es muy sencillo. Primero ciertas consideraciones:

JPG vs GIF
Solo usar JPG cuando la imagen sea una foto. Cuando sea un logo, letras, o un dibujo utilizar GIF. Existen excepciones, pero esta es una buena regla general. Lo principal es que la imagen ocupe lo mínimo posible y que tenga una calidad aceptable. Todo vale, un GIF de 256 colores generalmente en un desperdicio, con 64 colores casi no hay diferencia y puede ocupar bastante menos. Una foto en GIF de 256 colores, en JPG puede quedar a menos de la mitad. No olvidar que a nadie (va, a muy pocos) le sobra ancho de banda, y menos en nuestro país. Como regla, si una sola imagen pesa más de 50k hay que hacerla adelgazar! Muy grande para Internet. Si quieren poner una imagen grande (hay casos que no hay otra), no obligar a la gente a bajarla poniéndola directamente en la página, primero pongan un versión mini de digamos 150 x 100 píxeles con una conexión a la grande, y avisando cuanto ocupa la grande antes de obligar a bajarla. Existen otras consideraciones sobre la paleta de colores, pero eso lo dejo para el último capitulo.

Tip: el código para aliner la moto de arriba es: <IMG SRC="imagenes/moto.jpg" ALIGN=RIGHT>

IMG SRC
Para incluir una imagen se utiliza el comando <IMG>.
IMG acepta una gran variedad de parámetros y es muy flexible. Veamos algunos:

Párametros de IMG

SRC Indica el nombre de archivo de la imagen a incluir.
HEIGHT Indica la altura de la imagen. El Netscape, si la altura no coincide con la original de la imagen, esta es estirada o achicada para llegar a la altura especificada en este parámetro.
WIDTH Indica el ancho de la imagen.
BORDER Si la imagen tiene una conexión, especificando BORDER=0 desaparece el borde característico de una imagen con conexión. Si no deseamos que se vea el border, este es el comando a utilizar.
ALIGN Permite alinear una imagen. Acepta LEFT, RIGHT, BOTTOM, TOP, MIDDLE, etc.
LOWSRC Indica el nombre de archivo de la versión de carga rápida de una imagen. Muy útil para agilizar el despliegue de una página pesada.

Tip: Siempre escribir el nombre del archivo entre comillas.

Usando IMG

Top Middle Bottom

Generando conexiones (links)
Las conexiones (en ingles links) son un elemento fundamental del HTML. Supongamos que tenemos una lista de servicios. Lo ideal es que cuando seleccionamos un servicio, saltemos a una página con mas detalles sobre ese servicio. Eso es el hipertexto. En teoría las conexiones podrían ser infinitas, navegando entre diferentes temas con solo seleccionarlos. Imaginen una hyperenciclopedia, donde cada tema puede ir profundizándose y ramificándose hacia todas las áreas del conocimiento. En la realidad es bastante complicado lograrlo.
En un documento HTML, se especifica una conexión mediante el comando <A> (Anchor). Por ejemplo, para realizar una conexión sería: <A HREF="index.html"> </A>. Para verlo mas claro, veamos como agregarle una conexión a nuestra 'primer página'.

<HTML> <HEAD> <TITLE>primera página</TITLE> </HEAD> <BODY> <H1>Bienvenido a mi página</H1> Esta página se encuentra en <STRONG>Montevideo</STRONG>,<BR> en el <EM>servidor</EM> de <A HREF="http://w3.cs.com.uy">Compuservice.</A> <HR> Hasta luego! </BODY> </HTML>

Este código de ve asi:

Bienvenido a mi página
Esta página se encuentra en Montevideo Uruguay,
en el servidor web de Compuservice.
Hasta luego!

En este caso, la dirección completa es especificada. Al seleccionar Compuservice saltamos a la página principal de Compuservice. Cuando hacemos referencia a una página dentro del mismo directorio donde esta nuestra primera página solo alcanza con incluir su nombre. Por ejemplo, si estamos en index.html y queremos hacer una conexión a servicios.html que esta en el mismo directorio, solo alcanza con <A HREF="servicios.html">texto</A>.

Fin de primera parte.
Bueno, hasta aquí la primera parte del mini curso de HTML. Todavía quedan muchas cosas, la semana que viene va la parte #2. Si alguien desea tratar algún tema en particular, o simplemente comentar lo aquí expuesto, no duden en hacérmelo saber.
Enviar e-mail a: rgblab@cs.com.uy.

Pagina Principal

`BACKGROUND="imagen.gif"`	Permite incluir una imagen de fondo. No poner una imagen muy 'pesada' de fondo, no mas de 15k. No olvidar verificar que no dificulte la lectura del texto.
`BGCOLOR="#xxxxxx"`	Cambia el color de fondo de una página. Donde va cada x va un número hexadecimal, del 0 a la F. Las dos primeras xx corresponden al rojo, las 2 siguientes al verde y las restantes al azul. Ej: para un fondo blanco poner todos los valores al máximo: FFFFFF. Para un fondo rojo: FF0000.
`TEXT="#xxxxxx"`	Cambia el color del texto de toda una página. La selección de color funciona igual para todos los casos.
`LINK="#xxxxxx"`	Cambia el color de todas las conexónes (links) de toda una página.
`VLINK="#xxxxxx"`	Cambia el color de todas las conexónes visitadas (links) de toda una página.

`<H1> </H1>`	Indica que el texto en un título. El mas importante (grande) es H1, luego H2 y asi hasta H7. Los más usados son hasta H3.
`<STRONG> </STRONG>`	Muestra en texto seleccionado más fuerte. Casi todos lo muestran como bold.
`<EM> </EM>`	Muestra en texto seleccionado con énfasis. Casi todos lo muestran como italic.
`<BR>`	Indica un corte de línea. (CR)
`<HR>`	Inserta un separador.
`<P> </P>`	Indica un comienzo de párrafo. Tiene como opciones ALIGN (center, left y right) y otras más que luego veremos. Útil para centrar o alinear a la derecha texto. Cada comiezo de párrafo deja un espacio separador.

SRC	Indica el nombre de archivo de la imagen a incluir.
HEIGHT	Indica la altura de la imagen. El Netscape, si la altura no coincide con la original de la imagen, esta es estirada o achicada para llegar a la altura especificada en este parámetro.
WIDTH	Indica el ancho de la imagen.
BORDER	Si la imagen tiene una conexión, especificando BORDER=0 desaparece el borde característico de una imagen con conexión. Si no deseamos que se vea el border, este es el comando a utilizar.
ALIGN	Permite alinear una imagen. Acepta LEFT, RIGHT, BOTTOM, TOP, MIDDLE, etc.
LOWSRC	Indica el nombre de archivo de la versión de carga rápida de una imagen. Muy útil para agilizar el despliegue de una página pesada.