Contenido

Bienvenidos
Antes de empezar
Qué necesitas...
Inicio
Estructura básica de un documento en HTML
Texto
Color
Imágenes
Enlaces (Links)
Dónde coloco mi página?

La manera de explicarte todo este asunto del diseño lo quiero hacer de la forma más sencilla posible. Y cuál es ésta? pues utilizando un lenguaje nada técnico, como si te estuviera explicando un amigo. Así para aquellas personas que nunca han estado en contacto con el argot informático, este breve manual podrá ser más que entendible.
 

Antes de empezar
Parece muy obvio, pero a veces no es así. Antes de iniciar con el diseño de tu página, debes tener en mente qué quieres poner en ella. Si tienes idea de lo que quieres hacer será mucho más fácil.
Aquí te doy unos tips sobre lo que puede tratarse tu página:
- Información personal.
- Artista favorito.
- Cualquier disciplina: Computación, artes, deportes, música, etc.
- Manuales: computadoras, mecánica, recetas de cocina, etc.
- Tu región: país, ciudad, etc.
- Una combinación de todos.
En fin, los temas son inagotales y depende de tu creatividad e imaginación el que decidas elegir.

Qué necesitas...
Para empezar a crear tu página necesitas un editor de textos, o sea, un programa en el que puedas teclear el código de tu página. Si tienes Windows en tu computadora puedes usar el Bloc de notas o Notepad, que sería lo más práctico y sencillo. No te recomiendo por ahora usar el Word o algún programa similar porque podría haber problemas con los formatos, pero si de todas maneras decides utilizarlo, recuerda guardar la información sólo como texto simple (extensión .txt).

Otra cosa que necesitas es un navegador de Internet para poder ver como está quedando tu página. Estos navegadores de Internet pueden ser Netscape Navigator o Internet Explorer. Para diseñar tu página no es necesario por el momento que dispongas de una conexión a Internet. Puedes estar modificando el código de tu archivo en el editor de textos y estarlo visualizando en el navegador sin tener que conectarte.

Inicio
Entra al editor de textos (Bloc de notas) y crea un archivo nuevo; no tienes que escribir nada todavía en él. Puedes llamarlo como quieras pero de preferencia nómbralo prueba, ya que es el ejemplo que se manejará en este manual. Es necesario que le pongas la extensión htm o html a ese archivo para que lo puedas visualizar en el navegador. Entonces el archivo quedará así: prueba.htm y deberá estar guardado en alguna carpeta de tu disco duro.

Para ver como está quedando tu página (cuando hayas empezado con el diseño) haz lo siguiente:

Para Netscape Navigator o Communicator:
Ve a File en el menú y escoge Open Page (Open File para otras versiones). Escoge Choose File y dale la dirección en la que tienes guardado tu archivo prueba.htm. Ya que tengas la dirección correcta dale Aceptar y verás tu página.

Para Internet Explorer:
Te vas al menú y selecciona Archivo, luego Abrir y pulsa Examinar para darle la dirección en donde se encuentra tu archivo prueba.htm. Ya que lo tengas le das Aceptar y tu archivo se visualizará en el navegador.

Ahora sí, que ya tienes tu archivo listo y sabes como visualizarlo, lo que sigue es empezar a programar en html.

Estructura básica de un documento en HTML
El lenguaje html trabaja con etiquetas (tags) que tienen diferentes usos. Por ejemplo <TITLE> </TITLE> sirve para colocar el nombre de la página en el marco superior del navegador. Las mayoría de las etiquetas necesitan cerrarse y modifican la información contenida dentro de ellas. Algunas como <BR> no necesitan cerrarse. Después se explicará mejor el significado de éstas y otras más.

Todos los documentos en html deben tener la siguiente estructura:

<HTML>
<HEAD>
<TITLE>Mi página</TITLE>
</HEAD>
<BODY>
Aquí va todo el contenido del programa.
</BODY>
</HTML>

Este formato debe seguirse siempre como una regla. El uso de las demás etiquetas y el contenido del programa irá dentro de la etiqueta <BODY> </BODY>. El título va a ser el nombre que le quieras dar a tu página.

*** Ahora comienza lo interesante, vamos a empezar a construir nuestra página de Internet. Entra al editor de textos, carga tu archivo prueba.htm (que por ahora debe estar vacío) y teclea lo siguiente:
 

   <HTML>
   <HEAD>
   <TITLE>Historia de Internet</TITLE>
   </HEAD>
   <BODY>
   En esta página explicaremos brevemente los inicios de la red de redes.
   </BODY>
   </HTML>
 

Lo que estamos haciendo aquí es generando el esqueleto de nuestra página. Estas son las etiquetas básicas para cualquier diseño. El título de esta página-ejemplo es Historia de Internet y aparece en el marco superior del navegador. Como se acaba de mencionar, dentro de las etiquetas <BODY> </BODY> desarrollaremos todo nuestro contenido.

Presiona el enlace que aparece subrayado para ver como debe lucir nuestra página hasta ahora. Ver página web

Pulsa Guardar en el editor de textos para grabar en prueba.htm lo que acabamos de codificar. Recuerda que ya has aprendido cómo visualizarlo.

Texto
Ya sabemos cómo es la estructura de un documento en html. Es el momento de empezar a manipular los elementos de nuestra página. El elemento fundamental en Internet es el texto. Aunque el auge de los últimos años se ha debido principalmente al contenido multimedia, (gráficos, sonido y video) el texto sigue siendo la base de todo documento en la red.

A diferencia de los procesadores de texto comerciales (Word, WordPerfect, etc.), la manipulación de texto en html está un tanto limitada y es necesario utilizar ciertas etiquetas para modificar el texto a nuestro gusto. Enseguida se muestran algunas de las etiquetas más populares en el manejo de texto.

<PRE> </PRE>
Permite que el texto que se encuentre dentro de ella se visualice tal como se creó en la página origen, respetando espaciado, salto de línea, salto de párrafo, tabulación, etc.

<BR>
Realiza un salto de línea. Esta etiqueta no necesita cerrarse.

<P>
Realiza un salto de párrafo. Tampoco necesita cerrarse.

<CENTER> </CENTER>
Posiciona el texto seleccionado en el centro de la página. También puede aplicarse a gráficos.

<Hx> </Hx>
Se utiliza para resaltar encabezados. La x son números que van del 1 al 6, siendo el 1 el encabezado más grande y resaltado, el 2 un poco menos y así sucesivamente.
Ejem:

<H1>Encabezado</H1>
<H2>Encabezado</H2>
<H3>Encabezado</H3>
<H4>Encabezado</H4>
<FONT SIZE=x> </FONT>
Sirve para cambiar el tamaño de las letras. La x es un número que indica el tamaño de la letra y va del 1 al 7. El número predeterminado es el 3.

Texto en <B>Negritas</B>

Texto en <I>Itálica</I>

Texto <U>subrayado</U>

<ADDRESS>

Dirección
</ADDRESS>
<HR>
Se utiliza como línea separadora. Tiene algunos atributos que la modifican. WIDTH indica la longitud, SIZE indica la altura, ALIGN la colocación de la línea y NOSHADE que no tenga relieve y además le añade un color gris más fuerte.
Ejem:
<HR>
 
 

*** Vamos a utilizar en nuestra página algunas de éstas etiquetas para modificar texto. Carga prueba.htm y teclea lo siguiente:
 

   <HTML>
   <HEAD>
   <TITLE>Historia de Internet</TITLE>
   </HEAD>
   <BODY>
   <h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br>
   <h3>Introducción</h3><p>
   El mundo de las telecomunicaciones ha tenido un crecimiento acelerado
   en los últimos años, en el que <b>Internet</b> ha sido
   pieza clave. Hace unas décadas atrás, cuando el Departamento de
   Defensa de los Estados Unidos desarrollaba una red de comunicaciones
   que fuera capaz de soportar un ataque externo durante la guerra fría,
   nadie se imaginó que después de transferir el control de esa red
   llamada <u>ARPANET</u> a los investigadores universitarios,
   ésta crecería exponencialmente involucrando significativamente a
   toda la sociedad.
   <hr>
   <font size=2>Documento creado en Febrero del 2000</font>
   </BODY>
   </HTML>

*****************
Presiona el enlace para ver nuestra página después de agregar más información y de utilizar algunos de los modificadores de texto explicados en esta sección. Ver página web

Color
Con el fin de hacer un documento más agradable y atractivo a la vista, es necesario en algunas ocasiones resaltarlo con un color diferente. Esto se puede aplicar al fondo, a un enlace, al texto, a una palabra o a una letra.

Para poder representar un color en html, se deben utilizar 6 números hexadecimales. Ejem:
 

ROJO                        FF0000
VERDE                      00FF00
AZUL                        0000FF
MAGENTA               FF00FF
VIOLETA                 9900DD
ROSA CLARO         FFDDFF

Aunque se ve un poco complicado en realidad no lo es. Lo que te recomiendo hacer es jugar con las combinaciones hasta que encuentres la que te gusta. Tomando los colores básicos de la tabla anterior puedes variar los números (0-9) o las letras (A-F) y ver cómo cambian las tonalidades.
Html también acepta los nombres de los colores en lugar de los números hexadecimales, por ejemplo "RED" en lugar de "FF0000", o "BLUE" en lugar de "0000FF", pero tiene la limitante de que solamente reconoce unos cuantos colores.

Se pueden seleccionar los colores deseados desde el inicio del documento en la etiqueta <BODY> </BODY> por ejemplo:
<BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00AEFF">
donde:
BGCOLOR es el color del fondo.
TEXT es el color del texto.
LINK es el color del enlace.
Ojo: En este ejemplo se ve que antes del color siempre se coloca un signo "#".

También se puede cambiar el color sólo para un segmento deseado como:
<FONT COLOR="#FF0000">Texto</FONT>
 

*** Sigamos con nuestro ejemplo; cargamos el archivo prueba.htm y le agregamos lo siguiente:
 

   <HTML>
   <HEAD>
   <TITLE>Historia de Internet</TITLE>
   </HEAD>
   <BODY BGCOLOR="#0FF0FF">
   <h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br>
   <h3>Introducción</h3><p>
   El mundo de las telecomunicaciones ha tenido un crecimiento acelerado
   en los últimos años, en el que <b>Internet</b> ha sido
   pieza clave. Hace unas décadas atrás, cuando el <font color=RED>Departamento de
   Defensa de los Estados Unidos</font> desarrollaba una red de comunicaciones
   que fuera capaz de soportar un ataque externo durante la guerra fría,
   nadie se imaginó que después de transferir el control de esa red
   llamada <u>ARPANET</u> a los investigadores universitarios,
   ésta crecería exponencialmente involucrando significativamente a
   toda la sociedad.
   <hr>
   <font size=2>Documento creado en Febrero del 2000</font>
   </BODY>
   </HTML>

*****************
Las modificaciones hechas a nuestro archivo deben ser evidentes. En la etiqueta <BODY> </BODY> hemos agregado un determinado color para el fondo. También hemos especificado que sólo un segmento del texto sea de color rojo.

Presiona para ver nuestro diseño: Ver página web

Imágenes
Una característica muy importante en las páginas de Internet son los gráficos o imágenes. Estos elementos contribuyen a hacer más completa una página proporcionando mayor realce. Las imágenes se pueden usar como fondo de nuestra página, como complemento y apoyo visual para cierta información, vínculos hacia otras páginas, etc. Los formatos de imágenes más comunes en Internet son los .gif y .jpg, así que si queremos introducir un gráfico, éste tiene que cumplir con estos formatos.

Para agregar una imagen en un documento se utiliza la etiqueta <IMG>.
Ejem:
<IMG SRC="home2.jpg" ALT="Casa azul">

Donde:
IMG indica el deseo de cargar una imagen.
SRC indica la ruta en la que se encuentra nuestro gráfico. Este puede estar en el mismo directorio de nuestra página, en otro directorio, o incluso en un servidor en algún lugar del mundo.
Ejem:
<IMG SRC="../web/imagen/home2.jpg" ALT="Casa azul">
ALT asigna un nombre a la imagen para que cuando alguien cargue nuestra página desde un navegador que no despliegue gráficos, pueda saber que en ese lugar existe una imagen.

Existen una serie de atributos que modifican las imágenes de diferente forma, aquí están algunos:
ALIGN=left|right|top|middle|bottom
Las opciones para ALIGN sitúan al gráfico en diferentes posiciones con respecto al texto.
BORDER=n
Le agrega un borde a la imagen y "n" indica el grosor.
WIDTH=n, HEIGHT=n
Especifican la altura y la anchura de la imagen, cuyas unidades se dan en pixels.
VSPACE=n, HSPACE=n
Se utiliza para dejar espacio tanto vertical como horizontal entre la imagen y el texto que la rodee.
Ejem:
<IMG SRC="grafico1.gif" ALIGN=left HSPACE=10 BORDER=2>
Este ejemplo mostrará una imagen alineada a la izquierda del texto y separada de él horizontalmente 10 unidades con un borde de grosor 2.

*** Agreguemos ahora una imagen a nuestro diseño. Carga prueba.htm y realiza la modificación.
 

   <HTML>
   <HEAD>
   <TITLE>Historia de Internet</TITLE>
   </HEAD>
   <BODY BGCOLOR="#0FF0FF">
   <h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br>
   <h3>Introducción</h3><p>
   El mundo de las telecomunicaciones ha tenido un crecimiento acelerado
   en los últimos años, en el que <b>Internet</b> ha sido
   pieza clave. Hace unas décadas atrás, cuando el <font color=RED> Departamento de
   Defensa de los Estados Unidos </font> desarrollaba una red de comunicaciones
   que fuera capaz de soportar un ataque externo durante la guerra fría,
   nadie se imaginó que después de transferir el control de esa red
   llamada <u>ARPANET</u> a los investigadores universitarios,
   ésta crecería exponencialmente involucrando significativamente a
   toda la sociedad.
   <hr>
   <font size=2>Documento creado en Febrero del 2000</font>
   <center><IMG SRC="home2.jpg" ALT="Casa azul"></center>
   </BODY>
   </HTML>

*****************
Se ha insertado un gráfico a nuestra página que debe aparecer centrado. Da un click al enlace para ver el archivo.
Ver página web

Enlaces (Links)
El poder verdadero de html radica en la capacidad de manejar hipertexto o hipermedios como algunos le llaman, y se logra por medio de enlaces o links. Esto es, a través de un click en un segmento de texto o una imagen, es posible encontrar más información relacionada con la que originó ese click. Dicha información puede encontrarse en otras páginas dentro y fuera de nuestro servidor*, o en algún punto concreto de páginas dentro y fuera de nuestro servidor.
*La computadora donde tenemos montada nuestra página.

El enlace por definición aparece en nuestras páginas subrayado y de color azul. Como ya se vió anteriormente, el color del enlace puede cambiarse al gusto.

La etiqueta encargada de establecer un enlace es:
<A> </A>.
Dentro de esta etiqueta está la función HREF en la cual se debe indicar la dirección donde está la información a enlazar y también el tipo de protocolo* utilizado. Con HREF es posible también hacer enlaces directos hacia imágenes, sonidos, etc.
*El protocolo son las normas o reglas utilizadas para diferentes tipos de servicios como documentos hipertexto, transferencia de archivos, correo electrónico, etc. Ejem: HTTP, FTP, MAILTO, GOPHER, etc.

Ejem:
<A HREF="http://www.tickets.com">Tickets Homepage</A>
Tickets Homepage
Dale un click al enlace creado y después pulsa "Back" o "Atrás" para regresar.
Este ejemplo muestra un link hacia otra página fuera de la nuestra en otro servidor.

Ejem:
<A HREF="index.html">Página principal</A>
Página principal
Dale un click al enlace creado y después pulsa "Back" o "Atrás" para regresar.
Este ejemplo muestra un link hacia otra página dentro del mismo servidor en el que se encuentra esta página tutorial de html.

También es posible crear un enlace a través de una imagen en lugar de utilizar un segmento de texto. Esto se hace de la misma manera que los ejemplos anteriores, sólo que en lugar de escribir texto entre las etiquetas <A> </A> se inserta una imagen como las que ya hemos visto.

Ejem:
<A HREF="http://www.goto.com"><IMG SRC="logo.gif"></A>

Dale un click al enlace gráfico creado y después pulsa "Back" o "Atrás" para regresar.
Este ejemplo muestra un link gráfico hacia otra página web.

*** Vamos ahora a aplicar enlaces en nuestro ejemplo. Carga prueba.htm
 

<HTML>
<HEAD>
<TITLE>Historia de Internet</TITLE>
   </HEAD>
   <BODY BGCOLOR="#0FF0FF">
   <h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br>
   <h3>Introducción</h3><p>
   El mundo de las telecomunicaciones ha tenido un crecimiento acelerado
   en los últimos años, en el que <b>Internet</b> ha sido
   pieza clave. Hace unas décadas atrás, cuando el <font color=RED> Departamento de
   Defensa de los Estados Unidos </font> desarrollaba una red de comunicaciones
   que fuera capaz de soportar un ataque externo durante la guerra fría,
   nadie se imaginó que después de transferir el control de esa red
   llamada <u>ARPANET</u> a los investigadores universitarios,
   ésta crecería exponencialmente involucrando significativamente a
   toda la sociedad.<P>

   * Más información sobre este tema en:
   <A HREF="http://tdi.uregina.ca/~ursc/internet/history.html">University of Regina</A>
   <hr>
   <font size=2>Documento creado en Febrero del 2000</font>
   <center><A HREF="index.html"><IMG SRC="home2.jpg" ALT="Casa azul"></A>;</center>
   </BODY>
   </HTML>

*****************
Da un click para ver el resultado. Ver página web

Donde coloco mi página?
Ahora que ya tienes lista tu página hay que saber en qué servidor montarla para que todos puedan verla. Si dispones de una conexión a Internet en tu casa o negocio, tu proveedor tiene la obligación de proporcionarte espacio en su servidor para tu página. Si no dispones de una conexión a Internet existen algunas compañías que ofrecen este servicio de manera gratuita. Ahí te va una lista de algunas de estas compañías en Internet:

www.geocities.com
www.tripod.com
www.starmedia.com

Por el momento hasta aquí llega este breve tutorial, con lo que has aprendido hasta ahora estás capacitado para poner tu página en Internet y darte a conocer con el resto del mundo!!!
Pronto voy a agregar algunas cosas a este manual de html para que esté más completo, así que no te olvides de seguir entrando a esta página para ver lo nuevo.

Saludos afectuosos.