¿Cómo se hace una web?
Escrito por VeDa

Publicado: 01/05/2001
   Actualizado: 01/05/2001
 

******************************************

MI PRIMERA WEB. PASOS A SEGUIR

1. Programas ke necesito

2. Notepad. codigo HTML

3. Conseguir alojador para mi Web

4. Configuraci�n FTP y subir Web

5. direcciones interesantes

******************************************
1. PROGRAMAS KE NECESITO:- NOTEPAD de windows - Internet Explorer para bajarme los programas ke necesito y para pedir espacio en un alojador. - Paint Shop Pro (editor de gr�ficos, www.softonic.com ) Valdr�n Gifs, jpgs, bmps, cualquier formato pero se recomienda por tama�o ke sean GIF o JPG.- CuteFTP , para subir mi web al alojador, www.cuteftp.comNOTA:

Si esta es tu primera web te recomiendo ke crees una carpeta en tu disco duro. En ella ir�s metiendo todos los archivos ke componen tu web. Mas adelante te explicar� cuales son y para ke.. kedate solo con esa idea. Luego ya te dir� ke fallos provoca usar archivos de distintas carpetas para dise�ar tu web si no tienes experiencia como webmaster.

ACLARACION: las frases ke van entre // son comentarios mios.

2. NOTEPAD. EL DISE�O DE TU WEB

Una p�gina web se crea utilizando codigo HTML. En el mercado hay varios y famosos programas como FrontPage o Dreamweaver que son de f�cil manejo y adem�s de modo "visual". La finalidad de este manual es ke crees tu p�gina web del modo mas sencillo. Si utilizase estes programas para ayudarte te haria "dependiente" de programas como el FrontPage, ke mete demasiado codigo Basura en mi opinion, y te costar�a aprender HTML. Adem�s tendr�a ke hacer un manual de FrontPage y de DreamWeaver. Al caso... NotePad.... codigo HTML a pelo. ;)

ESTA ES LA BASE DE UNA P�GINA WEB:

<html><head><title>Titulo de tu pagina ke se visualizar� en el bot�n de la barra de herramientas de windows</title>     </head><body></body></html>

 Como ves son como llaves....  el cuerpo de tu web ira entre  <body> y </body>. Que deseamos hacer?

a) Poner Fondo de pantalla a la web: codigo: sustituye la linea <body> por <body background="fondo.gif">       //Da igual ke sea GIF o JPG//

b) Insertar un gr�fico: codigo: <p><img src="grafico.gif" width="333" height="501"> </p>     //width="333" height="501" es opcional. si no pones nada lo pone a tama�o real. Aconsejable ke se cambie tama�o de imagen con paint shop pro y se muestre a tama�o real en vez de hacer cargar un grafico de mayor tama�o para mostrarlo peke�o despues.<P> y </p> designa parrafos. Por tanto donde hay un </p> har� un punto y aparte.//

c) Insertar texto: El texto se teclea. Cada frase ir� entre <p> y </p>. Esto supone los distintos parrafos. </p> cierra parrafo y por tanto es punto y aparte.

d) Alinear parrafo o imagen: c�digo de alineado de texto: <p align="center"> El texto ke kiero ke se vea en mi web lo tecleo sin mas</p>

c�digo de alineado de imagen: <p align="center"><img src="001.jpg"></p> Posibilidades: Center  (centro) , right (derecha)  y por defecto lo alinea a la izquierda.

e) Color texto: codigo: <p><font color="#0000FF">Este texto se ver� en azul</font></p> El n�mero ekivale al color. El Paint Shop Pro en su paleta muestra el color y el n�mero. Ser�a recomendable mirar alli el color ke deseamos. Dar� algunos ejemplos: blanco=#FFFFFF   negro=#000000  azul=#0000FF  rojo=#FF0000

f) Insertar link : Un link no es m�s ke una palabra, frase o imagen por el cual se permite al visitante de nuestra web acceder a otra web haciendo click sobre �l. Ahora entra el concepto de p�gina principal y p�gina secundaria en juego. Cuando el visitante ve nuestra pagina principal (index.htm SIEMPRE) y hace click en nuestro link, se le mostrar� otra hoja, otra p�gina, la secundaria a la ke llamamos por ejemplo nueva.html. Puede haber tantas paginas secundarias como deseemos. Esto supone ke si en nuestra web tenemos 3 links, tendremos 1 archivo index.htm ke es la pagina principal y tantos htmls mas como saltos existan. Puede seguir una jerarkia de arbol simple o estar anidadas...     Muestro un ejemplo secillo de una p�gina en la ke existen dos links. Uno es una frase. EL otro una imagen:<body> <p><a href="http://nueva.html">pincha aki para ir a la pagina nueva</a></p><p><a href="http://nueva.html"><img src="pinchaenmi.jpg"></a></p></body> Tanto la palabra o frase como el gr�fico soportan formatos de color o aliniaci�n de igual modo que vimos antes.Tendremos ke crear por tanto un archivo ke llamaremos nueva.html. Las pautas a seguir son las mismas ke con el principal. Este segundo archivo tambien puede contener links.Si keremos ke el link realice una descarga, solo tendremos ke meter el archivo que se desea ofrecer en un ZIP y como destino del link no pondremos un HTML sino el ZIP. Kedar�a asi:

codigo: <p><a href="manualword.zip">pincha aki para descargar el manual de Word a tu pc</a></p>   

 

Creemos una web simple. Una web en la ke existan gr�ficos y links, mezclados con texto: <html><head> <title>Mi pagina</title></head> <body><p align="center">Manual de como crear una web</p><p><img src="grafico.gif"></p> <p>Pincha <a href="minick.htm">aki</a> para leer mi nick</p> <p align="left"><a href="minick.htm"><img src="grafico2.gif"> </a>Pincha en el gr�fico para leer mi nick</p> </body></html> vistapagina.gif (6565 bytes)


NOTA: Recomiendo que se incluyan todos los archivos en una carpeta y se trabaje con ella para ahorrarnos el engorro de mantener en los nombres de los archivos la ruta del gr�fico o del archivo. Piensa ke en el alojador no existe la unidad C .. y si metes un archivo c:\carpeta\grafico.gif tendras ke mantener esa misma jerarkia de carpetas en el alojador... sino no se ver�.

NOTA: Decir HTM y HTML es lo mismo .


3. CONSEGUIR ALOJAMIENTO

 www.geocities.es es una p�gina ke ofrece 50 megas y ke esta en espa�ol. Tienes ke darte de alta para conseguir el espacio. Tu ID ser� el nombre de tu web. Pincha donde dice CREE SU SITIO WEB y cubre los datos ke te pide. Cuando termines correctamente (si das algun dato mal te lo pedir� y en rojo) te encontrar�s con los datos de tu web.

 



4. CONFIGURACI�N FTP Y SUBIR LA WEB

Ahora solo keda instalar un FTP y configurarlo para conectar con el alojador y subir la p�gina web. En nuestra p�gina www.ayuda-internet.net seccion tutoriales tienes un tutorial detallado de ke es y como funciona le Cute FTP.

Datos a cubrir para subir nuestra web a Geocities:

  Estes datos se obtienen al pedir espacio en el alojador.  

Sigue el manual de cute Ftp de la secci�n Tutoriales para ver como se sube la web. La teoria es simple. Una vez conectado, a la izquierda ves tu disco duro y a la derecha el disco del pc ke aloja tu web (geocities). Tienes ke marcar los archivos a subir (sin carpeta MiNuevaWeb) y boton derecho Subir.

Cuando termines con el proceso tu pagina web ya estar� publicada.

5. DIRECCIONES INTERESANTES

Manuales de HTML: mira en nuestra web en la seccion de links www.abcdatos.com/tutoriales/html.html http://www.programadores.net  - Javascript (copy y paste, nivel sencillo) www.via-modem.com/scriptionario - Gr�ficos: www.gograph.com

Si tienes alguna duda no dudes en entrar en #Ayuda_I nternet y formular tu pregunta.

VeDa