Bienvenidos

Te interesa aprender a diseñar páginas para Internet? Aquí te voy a enseñar los conocimientos
fundamentales para que puedas hacerlo desde hoy. Crear una página Web es realmente fácil. Sin
meternos mucho en la gran cantidad de detalles que tiene HTML (el lenguaje con el que se
diseñan las páginas Web), existen algunos conceptos básicos que te pueden ayudar a hacer tu
primera página y dar a conocer lo que tú quieras a la enorme cantidad de usuarios de Internet en
todo el mundo.

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.

Volver al Contenido

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.

Volver al Contenido
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.

Volver al Contenido

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.

Volver al Contenido

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.
Volver al Contenido

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>

<HR WIDTH=20% ALIGN=RIGHT SIZE=7>

<HR WIDTH=250 ALIGN=CENTER SIZE=5 NOSHADE>

*** 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

Volver al Contenido

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

Volver al Contenido

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">

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:
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

Volver al Contenido

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.usatoday.com">Periódico USA Today</A>

Periódico USA Today

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 se inserta una imagen como las que ya hemos visto.

Ejem:

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

www.goto.com

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://www.interhelp.org/historia01.html">www.interhelp.org</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

Volver al Contenido

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.oocities.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.

Si quieres encontrar más información sobre diseño de páginas web o cualquier otra cosa que
pueda estar en Internet, usa este motor de búsqueda: