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 imágen de fondo. No poner una imágen 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 linea 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 lineas 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áginaEsta página se encuentra en Montevideo Uruguay,
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 dé é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 básicos 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 el texto seleccionado más fuerte. |
<EM> </EM> |
Muestra en texto sellecionado con énfasis. |
<BR> |
Indica un corte de linea. (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. Util 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 es 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 pixels 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 imágen 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 imágen a incluir. |
HEIGHT |
Indica la altura de la imágen. El Netscape, si la altura no coincide con la original de la imágen, esta es estirada o achicada para llegar a la altura especificada en este parámetro. |
WIDTH |
Indica el ancho de la imágen. |
BORDER |
Si la imágen tiene una conexión, especificando BORDER=0 desaparece el borde caracteristico de una imágen con conexión. Si no deseamos que se vea el border, este es el comando a utilizar. |
ALIGN |
Permite alinear una imágen. Acepta LEFT, RIGHT, BOTTOM, TOP, MIDDLE, etc. |
LOWSRC |
Indica el nombre de archivo de la versión de carga rápida de una imágen. 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 hypertexto. En toería las conexiones podrían ser infinitas, navegando entre diferentes temas con solo seleccionarlos. Imaginen una hyperenciclopedia, donde cada tema puede ir profundizandose y ramificandose 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 se ve asi: |
Bienvenido a mi páginaEsta página se encuentra en Montevideo Uruguay, 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>.
Black Hat por Email
Black Hat por Feed
No hay comentarios:
Publicar un comentario