¿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 nuetra 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_Internet y formular tu pregunta.

VeDa