Home - Redes de área local - Sistemas punto a punto - Sistemas cliente/servidor - Selección del NOS - Comandos UNIX - Comandos NetWare - Acrónimos - Manual de HTML- Programación en C
Encuentra más información en Internet con GoTo.com

(Diseño de páginas de Internet)

Contenido


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>
   &ltHEAD>
   <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.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.

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:


Ir a la página principal
Accesos desde 8/may/99
Ultima actualización: Febrero 2000

Cualquier comentario dirigirlo a:

me_techpage@usa.net
Ing. Manuel Espinoza Curiel
Cd. Obregón, Sonora, México
- Template.$[AnyExtension] expressShow\SSWFTemplate-body.htm expressShow\SSWFTemplate-header.htm C:\Documents and Settings\Juan José\Mis documentos\Camtasia Studio\COMO DESCARGAR EL UTORRENT BY BLAS0215\COMO DESCARGAR EL UTORRENT BY BLAS0215.mp4 Created by Camtasia Studio 6 0 bytes 0 bytes 0 bytes COMO DESCARGAR EL UTORRENT BY BLAS0215 0 640 480 15.00 1024 768 15.00 0 0 0.00 694.87 694.87 15.00 10.00 640 498 640 480 160 120 -1 160 18 1 6948666667 18 320 0 0 160 480 0 0x000000 COMO DESCARGAR EL UTORRENT BY BLAS0215_config.xml COMO DESCARGAR EL UTORRENT BY BLAS0215_controller.swf 0 0 0 0 1 0 6948666667 -1 -1 - - 0 6948666667 - - 6948666667 - - 0 0 Question @ of @ Prev Submit Next Done Preview Send You have reached the end of the questions and this video. Your answers are ready to be sent. E-mail Contents E-mail to Your answers have been sent. You have completed @ of @ questions. Score = @/@ Answers Summary - - Introduction 0 0 0 23 32 0 0 382 - - Title COMO DESCARGAR EL UTORRENT BY BLAS0215 DC.title 6 - - Video - HTMLFile - FlashController - FlashStartThumbnail - FlashUpgradeFile - ProductionInfoXML 7 - - C:\Documents and Settings\Juan José\Mis documentos\Camtasia Studio\COMO DESCARGAR EL UTORRENT BY BLAS0215\COMO DESCARGAR EL UTORRENT BY BLAS0215.mp4 26638126 Video 0 1 - C:\Documents and Settings\Juan José\Mis documentos\Camtasia Studio\COMO DESCARGAR EL UTORRENT BY BLAS0215\COMO DESCARGAR EL UTORRENT BY BLAS0215.html 0 HTMLFile 0 1 - C:\Documents and Settings\Juan José\Mis documentos\Camtasia Studio\COMO DESCARGAR EL UTORRENT BY BLAS0215\COMO DESCARGAR EL UTORRENT BY BLAS0215_controller.swf 408840 FlashController 0 1 - C:\Documents and Settings\Juan José\Mis documentos\Camtasia Studio\COMO DESCARGAR EL UTORRENT BY BLAS0215\FirstFrame.png 68410 FlashStartThumbnail 0 1 - C:\Documents and Settings\Juan José\Mis documentos\Camtasia Studio\COMO DESCARGAR EL UTORRENT BY BLAS0215\expressInstall.swf 0 FlashUpgradeFile 0 1 - C:\Documents and Settings\Juan José\Mis documentos\Camtasia Studio\COMO DESCARGAR EL UTORRENT BY BLAS0215\ProductionInfo.xml 0 ProductionInfoXML 0 1 C:\Documents and Settings\Juan José\Mis documentos\Camtasia Studio\COMO DESCARGAR EL UTORRENT BY BLAS0215\ MP4 MP4 1 1 27115376 -1 -1 C:\DOCUME~1\JUANJO~1\CONFIG~1\Temp\ 0 0 1 0 Template.$[AnyExtension] 1 0 1 1 0 1 17 1 0 1 0 1 0 ID-7D78ECC6-CEC1-474C-A0EA-A2E6217F842C 0:00:19.07 en 2 14 COMO DESCARGAR EL UTORRENT BY BLAS0215 0 Techsmith Screen Capture Codec 1 0 0 Microsoft Sans Serif 0 0 0 1 0 30 30 0 0 onyx 8 0 1 1 1 10 3 0x00C0C0C0 0 336 225 1 MM:SS 0 1 1 100 0 1 1 1 Arial 0x00000000 0 3 1 0 0 1 1 0x00000000 0 FirstFrame.png 45 TOCMedia

Juega con las teclas: J  K  L

Estos son los archivos de imagen y la página HTM burbujas.zip

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Estos son los archivos de imagen y la página HTM burbujas.zip