Bienvenido a lecciones web, si usted llegó a este sitio es por que está tratando de crear una página web desde el principio, y que mejor manera que hacer una página web sencilla para darse una idea.
Me gustaría contarle que gracias a estas lecciones, miles de personas han tenido la oportunidad de empezar y llegar a convertirse en verdaderos Web Masters, por supuesto, debido a la gran dedicación que le han puesto para seguir adelante. He aquí unos ejemplos de lo que algunos de nuestros usuarios han podido llegar a realizar:
¿Qué se necesita para hacer una página WEB?
Como primera cosa, se necesita que el usuario tenga un conocimieto avanzado en el uso de computadoras; además, el material que se necesita para la creación de las páginas es el siguiente:
1. Computadora PC o Macintosh.
Todas nuestras lecciones están basadas en una computadora PC con sistema operativo WINDOWS.
# Cualquier programa editor de páginas WEB.
Aunque se puede utilizar cualquier editor de páginas, aquí en nuestras lecciones, nos basaremos en el programa NETSCAPE COMMUNICATOR versión 4.X ó mejor. Esto no quiere decir que otros programas como Front Page o Dreamweaver no sean buenos, sino que utilizaremos el COMMUNICATOR simplemente por que es gratuito, es muy fácil de utilizar y por que de esa manera podemos estar sicronizados en los comandos para ir haciendo nuestra primera página web.
Si usted no tiene este programa, puede bajarlo GRATIS del siguiente lugar:
http://cgi.netscape.com/intl/cgi-bin/intl_dwnld.cgi?lang=spanish&path=spanish/4.78/windows/windows95_or_nt/complete_install/cc32d478.exe
(ver. Español)
3.# Espacio en un servidor en donde se guardará la página creada.
Usted necesita de un espacio en un servidor para poder subir sus páginas WEB; hay de muchos tipos y de todos los precios desde gratuitos hasta pagados.
MEJOR VALOR:Entre los pagados y como una contribución a fortalecer a todos los principiantes de "Cómo hacer páginas WEB", SecmasNET nos ha dado una oferta que no se puede conseguir en ningún otro lado, para mayor información visite: http://www.leccionweb.org/proyectoweb.html
4.Cualquier programa editor de archivos gráficos.
Entre ellos pueden estar COREL DRAW, FREE HAND, PAGE MAKER. En mis lecciones todo ha sido creado utilizando el COREL DRAW 7.0.
5.Cualquier programa editor de TEXTOS en formato ASCII.
En la PC con el programa WORDPAD es más que suficiente.
¿COMO SE CREA EL TEXTO?
Una vez usted ya tenga instalado el NETSCAPE COMMUNICATOR en su computadora, ejecútelo y entré al NETSCAPE COMPOSER (este es el programa que sirve para la creación de páginas web) y elijamos la opción del menú: NUEVA. Esto hará que nos aparezca una página en blanco que es donde comenzaremos a trabajar.
Como usted ya se habrá dado cuenta NETSCAPE COMPOSER tiene un panel de control igual o similar a este:
Pues bien, estos íconos son los que nos van a ayudar a ir poniendo el TEXTO o IMAGENES en los lugares que lo deseemos.
Como primer punto escribamos el TITULO de la hoja que vamos a crear.
________________________________________________________
Ahora, justifiquémosla al centro de la página:
________________________________________________________
Ahora, hagámosla NEGRITA y con un valor de 18 puntos, tiene que quedar así:
________________________________________________________
Ahora, vamos a crear el cuerpo de la página WEB, para ello escriba el siguiente párrafo por abajo del título que acaba de crear. Tiene que quedar así:
_________________________________________________________
Como puede ver, es muy parecido a trabajar con un procesador de palabras común y corriente. Ahora le toca a usted escribir cualquier párrafo, trate de usar las NEGRILLAS, las ITALICAS y el SUBRAYADO.
¿Cómo se inserta un gráfico?
FOTO DE HOTDOG
DIBUJO DE HOTDOG
Después de copiar estos archivos a su computadora, presione el ícono que dice IMAGEN, como usted verá aparecerá una ventana en la cuál se le pide que ingrese el nombre del archivo que quiere poner, presione en donde dice SELECCIONAR ARCHIVO... y busque la foto del HOT DOG que acabamos de copiar a su computador. Luego de seleccionarla, presione ACEPTAR y luego verá algo así
_________________________________________________________
La posición de la foto va a depender de donde usted la quiera, para nuestro ejercicio la vamos a justificar hacia la izquierda y vamos a poner un texto al lado derecho de la foto. Tiene que quedar así:
_________________________________________________________
Las imágenes o gráficos también se pueden hacer mas grandes o pequeños, para ello se necesita únicamente dar 2 clicks sobre la imagen y aparecerá una ventana en donde podemos decirle cuanto queremos hacer grande o pequeña la imagen. Pruébelo... En esta ventana también puede ver como es que el texto se va a escribir a la par de la imagen.
Si usted utiliza alguna de estas opciones no olvide que en la hoja que está trabajando probablemente usted no va a ver como está quedando; pero para ver como va la hoja que usted está haciendo presione el ícono que dice PRELIMINAR
Ahora, le toca su turno y al finalizar debe quedar una página igual a la que sigue al hacer PRELIMINAR:
¿Cómo hago un ENLACE (link) de mi texto o gráfico?
EJEMPLO DE UN ENLACE HACIA UNA DIRECCIÓN DE E-MAIL:
El ENLACE es la función que nos sirve para que cuando un usuario hace 'click' sobre un texto o gráfico, este texto o gráfico, lo lleve hacia otro lugar o hacia otra página WEB; entre los ENLACES más utilizados están los que nos hacen regresar hacia la página anterior o bien para que nos puedan enviar un email.
Para nuestro ejemplo vamos a preparar un ENLACE que haga que cuando alguien lo presione nos pueda enviar un correo, para ello, presionemos el ícono que se llama ENLACE. Ahora escriba en la casilla que dice ORIGEN DEL ENLACE su dirección de correo electrónico (en este caso vamos a escribir [email protected]). Y en la casilla que dice ENLAZAR CON escriba lo siguiente: mailto: [email protected] (Esté seguro que usted escribió bien la línea anterior en ese lugar de lo contrario no funcionará. Además, usted DEBE cambiar la dirección de correo por la suya). Esto debió haber quedado así:
Listo, de ahora en adelante su página ya tendrá un ENLACE para que le puedan escribir a usted con sólo presionar en donde diga su dirección de correo electrónico.
EJEMPLO DE UN ENLACE HACIA OTRA PAGINA EN EL INTERNET:
Al igual que los ejemplos anteriores, para hacer referencia hacia otra página WEB que esté en el Internet, usted deberá escribir en ORIGEN DEL ENLACE algo como por ejemplo lo siguiente:
LECCIONES GRATIS!!!
Y en ENLAZAR CON escriba lo siguiente:
http://www.leccionweb.org/index.html (siempre asegurese que la dirección que usted escribe, exista.)
Esto debería haber quedado así:
EJEMPLO DE UN LINK HACIA UNA DIRECCIÓN ANTERIOR:
Esto mismo es lo que se haría para hacer un ENLACE que lo regrese hacia un punto o página anterior a la que está diseñando ahora. Para ello, escriba en ORIGEN DEL ENLACE lo siguiente: PRESIONE AQUI PARA REGRESAR POR DONDE VINO. Y en ENLAZAR CON escriba lo siguiente:
javascript:history.go(-1)
(Esté seguro que usted escribió bien la línea anterior en ese lugar.)
Esto debería haber quedado así:
Si todo salió bien, su hoja deberá quedar igual a la que sigue cuando usted haga PRELIMINAR
_______________________________________________________
¿Qué hago para publicar la página que acabo de hacer?
Al terminar de hacer todas las LECCIONES anteriores, usted ya estará listo para poder publicar su página en el INTERNET. Publicar una página se entiende por subir o montar su página a un servidor; y, para ello debe estar seguro que usted ya tiene un espacio disponible. Si todavía no lo tiene diríjase a su proveedor de servicio de Internet y pida el espacio que necesita. Si su proveedor no le dá este espacio GRATUITAMENTE entonces busque dentro del INTERNET lugares en donde se otorga gratuitamente este espacio. Algunos de los lugares mas comunes son:
EN ESPAÑOL:
EN INGLES:
https://www.geocites.com/
Al obtener su espacio, su proveedor le dará un NOMBRE DE USUARIO (LOGIN) y una CONTRASEÑA (PASSWORD) necesarios para ingresar esta información dentro del servidor de páginas WEB. Según el lugar en donde usted guarde su página WEB, deberá seguir algunas reglas generales ya que algunos ISP tienen otras disposiciones.
Si usted ya tiene definido un NOMBRE DE USUARIO y una CONTRASEÑA entonces ya puede publicar su página en ese servidor; pero, independientemente de ello, como primera opción deberá guardar la página en la que ha estado trabajando a su disco duro, así que presione ARCHIVO (FILE) y GUARDAR COMO (SAVE AS) y póngale el siguiente nombre (todo en minúsculas): index.html. El nombre index.html es como se define en todos los servidores a la página principal de un sitio, si no le ponemos este nombre a la hora de entrar a ver nuestra página, ésta no se mostrará.
Luego le preguntará que nombre desea ponerle a esta página, esta información servirá para que cuando alguien haga un AGREGAR A FAVORITOS (ADD TO BOOKMARK) en el navegador, este nombre aparezca allí.
Ahora, conéctese al INTERNET y después presione el ícono PUBLICAR (PUBLISH),http://www.leccionweb.org/pictures/netscape18.jpg aquí aparecerá la siguiente ventana:
y deberá llenar todos los campos que se necesitan de la siguiente manera:
TITULO DE LA PAGINA: Nombre con el que se conocerá a este sitio, puede ser cualquier cosa, como por ejemplo: DESEOS DE UN HOTDOG.
NOMBRE DEL ARCHIVO HTML: Aquí pondremos el nombre del archivo que recién acabamos de guardar: index.html. Tengamos en cuenta que todos los nombres de las páginas deben estar en minúsculas.
DIRECCION HTML O FTP EN LA QUE PUBLICAR: Aquí deberemos escribir la dirección que nos dió nuestro proveedor del espacio, como por ejemplo: .
NOMBRE DEL USUARIO: Aquí deberemos poner el nombre que nos asignó nuestro proveedor del espacio.
CONTRASEÑA: Escribamos aquí la contraseña que nos asignó nuestro proveedor.
OTROS ARCHIVOS A INCLUIR: Para nuestro ejemplo seleccionemos la opción que dice "Archivos asociados a esta página" ya que de esta manera el programa automáticamente subirá las imágenes utilizadas en la elaboración de nuestra página.
¡¡¡ LISTO !!!
Ahora presione ACEPTAR y todo lo que usted ha hecho, inmediatamente será enviado al servidor para que cualquier otra persona pueda ver lo que usted ha creado.
Feliz creación de páginas...
Me gustaría contarle que gracias a estas lecciones, miles de personas han tenido la oportunidad de empezar y llegar a convertirse en verdaderos Web Masters, por supuesto, debido a la gran dedicación que le han puesto para seguir adelante. He aquí unos ejemplos de lo que algunos de nuestros usuarios han podido llegar a realizar:
¿Qué se necesita para hacer una página WEB?
Como primera cosa, se necesita que el usuario tenga un conocimieto avanzado en el uso de computadoras; además, el material que se necesita para la creación de las páginas es el siguiente:
1. Computadora PC o Macintosh.
Todas nuestras lecciones están basadas en una computadora PC con sistema operativo WINDOWS.
# Cualquier programa editor de páginas WEB.
Aunque se puede utilizar cualquier editor de páginas, aquí en nuestras lecciones, nos basaremos en el programa NETSCAPE COMMUNICATOR versión 4.X ó mejor. Esto no quiere decir que otros programas como Front Page o Dreamweaver no sean buenos, sino que utilizaremos el COMMUNICATOR simplemente por que es gratuito, es muy fácil de utilizar y por que de esa manera podemos estar sicronizados en los comandos para ir haciendo nuestra primera página web.
Si usted no tiene este programa, puede bajarlo GRATIS del siguiente lugar:
http://cgi.netscape.com/intl/cgi-bin/intl_dwnld.cgi?lang=spanish&path=spanish/4.78/windows/windows95_or_nt/complete_install/cc32d478.exe
(ver. Español)
3.# Espacio en un servidor en donde se guardará la página creada.
Usted necesita de un espacio en un servidor para poder subir sus páginas WEB; hay de muchos tipos y de todos los precios desde gratuitos hasta pagados.
MEJOR VALOR:Entre los pagados y como una contribución a fortalecer a todos los principiantes de "Cómo hacer páginas WEB", SecmasNET nos ha dado una oferta que no se puede conseguir en ningún otro lado, para mayor información visite: http://www.leccionweb.org/proyectoweb.html
4.Cualquier programa editor de archivos gráficos.
Entre ellos pueden estar COREL DRAW, FREE HAND, PAGE MAKER. En mis lecciones todo ha sido creado utilizando el COREL DRAW 7.0.
5.Cualquier programa editor de TEXTOS en formato ASCII.
En la PC con el programa WORDPAD es más que suficiente.
¿COMO SE CREA EL TEXTO?
Una vez usted ya tenga instalado el NETSCAPE COMMUNICATOR en su computadora, ejecútelo y entré al NETSCAPE COMPOSER (este es el programa que sirve para la creación de páginas web) y elijamos la opción del menú: NUEVA. Esto hará que nos aparezca una página en blanco que es donde comenzaremos a trabajar.
Como usted ya se habrá dado cuenta NETSCAPE COMPOSER tiene un panel de control igual o similar a este:
Pues bien, estos íconos son los que nos van a ayudar a ir poniendo el TEXTO o IMAGENES en los lugares que lo deseemos.
Como primer punto escribamos el TITULO de la hoja que vamos a crear.
________________________________________________________
Ahora, justifiquémosla al centro de la página:
________________________________________________________
Ahora, hagámosla NEGRITA y con un valor de 18 puntos, tiene que quedar así:
________________________________________________________
Ahora, vamos a crear el cuerpo de la página WEB, para ello escriba el siguiente párrafo por abajo del título que acaba de crear. Tiene que quedar así:
_________________________________________________________
Como puede ver, es muy parecido a trabajar con un procesador de palabras común y corriente. Ahora le toca a usted escribir cualquier párrafo, trate de usar las NEGRILLAS, las ITALICAS y el SUBRAYADO.
¿Cómo se inserta un gráfico?
FOTO DE HOTDOG
DIBUJO DE HOTDOG
Después de copiar estos archivos a su computadora, presione el ícono que dice IMAGEN, como usted verá aparecerá una ventana en la cuál se le pide que ingrese el nombre del archivo que quiere poner, presione en donde dice SELECCIONAR ARCHIVO... y busque la foto del HOT DOG que acabamos de copiar a su computador. Luego de seleccionarla, presione ACEPTAR y luego verá algo así
_________________________________________________________
La posición de la foto va a depender de donde usted la quiera, para nuestro ejercicio la vamos a justificar hacia la izquierda y vamos a poner un texto al lado derecho de la foto. Tiene que quedar así:
_________________________________________________________
Las imágenes o gráficos también se pueden hacer mas grandes o pequeños, para ello se necesita únicamente dar 2 clicks sobre la imagen y aparecerá una ventana en donde podemos decirle cuanto queremos hacer grande o pequeña la imagen. Pruébelo... En esta ventana también puede ver como es que el texto se va a escribir a la par de la imagen.
Si usted utiliza alguna de estas opciones no olvide que en la hoja que está trabajando probablemente usted no va a ver como está quedando; pero para ver como va la hoja que usted está haciendo presione el ícono que dice PRELIMINAR
Ahora, le toca su turno y al finalizar debe quedar una página igual a la que sigue al hacer PRELIMINAR:
¿Cómo hago un ENLACE (link) de mi texto o gráfico?
EJEMPLO DE UN ENLACE HACIA UNA DIRECCIÓN DE E-MAIL:
El ENLACE es la función que nos sirve para que cuando un usuario hace 'click' sobre un texto o gráfico, este texto o gráfico, lo lleve hacia otro lugar o hacia otra página WEB; entre los ENLACES más utilizados están los que nos hacen regresar hacia la página anterior o bien para que nos puedan enviar un email.
Para nuestro ejemplo vamos a preparar un ENLACE que haga que cuando alguien lo presione nos pueda enviar un correo, para ello, presionemos el ícono que se llama ENLACE. Ahora escriba en la casilla que dice ORIGEN DEL ENLACE su dirección de correo electrónico (en este caso vamos a escribir [email protected]). Y en la casilla que dice ENLAZAR CON escriba lo siguiente: mailto: [email protected] (Esté seguro que usted escribió bien la línea anterior en ese lugar de lo contrario no funcionará. Además, usted DEBE cambiar la dirección de correo por la suya). Esto debió haber quedado así:
Listo, de ahora en adelante su página ya tendrá un ENLACE para que le puedan escribir a usted con sólo presionar en donde diga su dirección de correo electrónico.
EJEMPLO DE UN ENLACE HACIA OTRA PAGINA EN EL INTERNET:
Al igual que los ejemplos anteriores, para hacer referencia hacia otra página WEB que esté en el Internet, usted deberá escribir en ORIGEN DEL ENLACE algo como por ejemplo lo siguiente:
LECCIONES GRATIS!!!
Y en ENLAZAR CON escriba lo siguiente:
http://www.leccionweb.org/index.html (siempre asegurese que la dirección que usted escribe, exista.)
Esto debería haber quedado así:
EJEMPLO DE UN LINK HACIA UNA DIRECCIÓN ANTERIOR:
Esto mismo es lo que se haría para hacer un ENLACE que lo regrese hacia un punto o página anterior a la que está diseñando ahora. Para ello, escriba en ORIGEN DEL ENLACE lo siguiente: PRESIONE AQUI PARA REGRESAR POR DONDE VINO. Y en ENLAZAR CON escriba lo siguiente:
javascript:history.go(-1)
(Esté seguro que usted escribió bien la línea anterior en ese lugar.)
Esto debería haber quedado así:
Si todo salió bien, su hoja deberá quedar igual a la que sigue cuando usted haga PRELIMINAR
_______________________________________________________
¿Qué hago para publicar la página que acabo de hacer?
Al terminar de hacer todas las LECCIONES anteriores, usted ya estará listo para poder publicar su página en el INTERNET. Publicar una página se entiende por subir o montar su página a un servidor; y, para ello debe estar seguro que usted ya tiene un espacio disponible. Si todavía no lo tiene diríjase a su proveedor de servicio de Internet y pida el espacio que necesita. Si su proveedor no le dá este espacio GRATUITAMENTE entonces busque dentro del INTERNET lugares en donde se otorga gratuitamente este espacio. Algunos de los lugares mas comunes son:
EN ESPAÑOL:
EN INGLES:
https://www.geocites.com/
Al obtener su espacio, su proveedor le dará un NOMBRE DE USUARIO (LOGIN) y una CONTRASEÑA (PASSWORD) necesarios para ingresar esta información dentro del servidor de páginas WEB. Según el lugar en donde usted guarde su página WEB, deberá seguir algunas reglas generales ya que algunos ISP tienen otras disposiciones.
Si usted ya tiene definido un NOMBRE DE USUARIO y una CONTRASEÑA entonces ya puede publicar su página en ese servidor; pero, independientemente de ello, como primera opción deberá guardar la página en la que ha estado trabajando a su disco duro, así que presione ARCHIVO (FILE) y GUARDAR COMO (SAVE AS) y póngale el siguiente nombre (todo en minúsculas): index.html. El nombre index.html es como se define en todos los servidores a la página principal de un sitio, si no le ponemos este nombre a la hora de entrar a ver nuestra página, ésta no se mostrará.
Luego le preguntará que nombre desea ponerle a esta página, esta información servirá para que cuando alguien haga un AGREGAR A FAVORITOS (ADD TO BOOKMARK) en el navegador, este nombre aparezca allí.
Ahora, conéctese al INTERNET y después presione el ícono PUBLICAR (PUBLISH),http://www.leccionweb.org/pictures/netscape18.jpg aquí aparecerá la siguiente ventana:
y deberá llenar todos los campos que se necesitan de la siguiente manera:
TITULO DE LA PAGINA: Nombre con el que se conocerá a este sitio, puede ser cualquier cosa, como por ejemplo: DESEOS DE UN HOTDOG.
NOMBRE DEL ARCHIVO HTML: Aquí pondremos el nombre del archivo que recién acabamos de guardar: index.html. Tengamos en cuenta que todos los nombres de las páginas deben estar en minúsculas.
DIRECCION HTML O FTP EN LA QUE PUBLICAR: Aquí deberemos escribir la dirección que nos dió nuestro proveedor del espacio, como por ejemplo: .
NOMBRE DEL USUARIO: Aquí deberemos poner el nombre que nos asignó nuestro proveedor del espacio.
CONTRASEÑA: Escribamos aquí la contraseña que nos asignó nuestro proveedor.
OTROS ARCHIVOS A INCLUIR: Para nuestro ejemplo seleccionemos la opción que dice "Archivos asociados a esta página" ya que de esta manera el programa automáticamente subirá las imágenes utilizadas en la elaboración de nuestra página.
¡¡¡ LISTO !!!
Ahora presione ACEPTAR y todo lo que usted ha hecho, inmediatamente será enviado al servidor para que cualquier otra persona pueda ver lo que usted ha creado.
Feliz creación de páginas...