Cómo hacer un sitio web – El sueño de la páginaweb propia

Introducción

En el siguiente cursillo aprenderemos a hacer una página web y cómo subirla a un alojamiento web gratuito para que se pueda ver en internet. También describiremos herramientas que nos faciliten estas tareas y para seguir aprendiendo y perfeccionándonos.

Abrir el NOTEPAD

Primero tenemos que abrir el notepad. El documento nuevo lo guardamos como index.html en alguna carpeta adecuada. Luego vas a esa carpeta y le haces doble click al archivo. Si se abre con el navegador, sea IExplorer o Mozilla Firefox, estamos listo para seguir con nuestro tutorial. Si escribes algo en el index.html, guardas y recargas la página en el navegador se verá lo que has escrito.

EL HTML
El HTML significa Lenguaje Marcado de Hípertexto. El lenguaje de HTML es el que manipula la información dentro de una página web. Establece qué información es título, párrafo, imágen, formulario, enlaces etc,

Se llama marcado porque utiliza marcas llamadas etiquetas (tags en inglés) para establecer el contenido. El marcado tiene esta estructura:

<ETIQUETA> Contenido </ETIQUETA>

El contenido va dentro de estas dos etiquetas. Fíjate que la segunda le lleva un / antes de ETIQUETA. Este es un ejemplo ficticio porque esta etiqueta no hace nada. De hecho la mayoría de las etiquetas son en inglés.

Algunas etiquetas reales

Estas etiquetas las puedes ir poniendo dentro del archivo index.html que creaste. Luego te mostraré un ejemplo de como quedan.

<h1>Título Uno</h1>

Dice que lo que está entre medio es un título con jerarquía uno, del inglés heading 1.

<p>Este es un párrafo</p>

Dice que lo que está entremedio es un párrafo, del inglés paragraph.

<a href="http://google.cl">Google</a>

Este se llama ancla, del inglés anchor, y crea un enlace o link. HREF es el destino del enlace o de la palabra que está entre la etiqueta.

<img src="images/gorro.jpg" />

Etiqueta de imagen que tiene una forma especial, termina con />. Dentro de src="" ponemos la dirección de la imagen. Es tradición póner la imagen dentro de una carpeta llamada "images" para tener más ordenada la estructura de nuestro sitio web. En este caso apunta a una imagen llamada gorro.jpg dentro de la carpeta “images”.

Hay chorrocientas etiquetas y excelentes sitios webs que explican su funcionamiento. La idea es que te las aprendas de apoquito. Ah, y se vale hacer trampa, que es mirar cómo otras personas usan las etiquetas.

http://www.webestilo.com/html/cap1b.phtml
http://www.jmarshall.com/easy/html/spanish/

Ejemplo práctico

Utiliza el siguiente ejemplo. Pégalo en el index.html que tienes abierto con el notepad.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Completin: un sitio</title>
</head>
<body>
<h1>Título 1</h1>
<p>Este es un párrafo.</p>
<a href="http://google.cl">Google</a>
<img src="images/gorro.jpg" />
</body>
</html>

Si recargas esta página en el navegador verás algo parecido a esto:

ejemplo_local

La primera línea <!DOCTYPE HTML PUBLIC"- etc, establece el tipo de estándar de nuestra página web. Es útil aunque en esta etapa no tan necesario para identificar el tipo de HTML que utilizamos.

La página HTML comienza con la etiqueta <html> que también es la que cierra el documento con </html>.

Luego sigue <head></head> que contiene información sobre la página que no aparecerá directamente. En este caso contiene la etiqueta <title></title>, que es la establece el título de la página web y que aparece en la parte superior del navegador.

Luego sigue <body></body> que es donde se ponen las etiquetas que ya hemos visto.

Si guardas este archivo como index.html y lo abres en el navegador ya puedes ver tu página web.

ALOJAMIENTO WEB
Si bien se puede hacer un sitio web en un computador sin internet la idea es que lo pueda ver para todo el mundo. Por eso necesitamos el llamado hosting o alojamiento web, que es simplemente una carpeta en internet que permite alojar o contener nuestro sitio web e imágenes.

Existen diversas opciones para el alojamiento web y algunas son gratuitas y sin esos molestos popups o propaganda que ponen algunos sitios webs.

En particular utilizo un sitio web llamado www.000webhost.com.

Creamos una cuenta en el sitio web yendo a http://www.000webhost.com/order.php

sign_up2

LLenamos los datos y pulsamos create my account.

Ahora tenemos listo nuestro servicio.

Tomamos nota de la siguiente dirección donde podremos entrar al panel de control de nuestra cuenta: http://members.000webhost.com

website_details1 website_details2

Si vamos a la dirección de nuestro sitio encontraremos el mensaje de bienvenida por defecto porque todavía no hemos subido nada.

http://completin.comze.com/

mensaje_sitio_por_defecto

Creación de las páginas web.
Para que nuestro sitio web funcione tenemos que aprender un poco de los códigos o lenguajes que permiten hacer páginas web. Existen dos fundamentales el HTML y el CSS.

FTP
Otra cosa importante es poder subir nuestro sitio web al internet y para eso utilizamos FTP que es el programa que permite subir archivos al hosting gratuito. Vamos a nuestro servicio de hosting y copiamos la información que necesitamos.

website_details2

Aquí de FTP Upload Details, tomamos nota del FTP user name, FTP host name y de la password que es la misma que pusiste al principio.

ftp://USUARIO:PASSWORD@DOMINIO
FTP://a4026939:PASSWORD@completin.comze.com

USUARIO: a4026939
PASSWORD: ******
DOMINIO: completin.comze.com

Luego creamos la siguiente dirección web cambiando lo que haya que cambiar. Puse acá abajo mi propio ejemplo. Esto lo ponemos en la barra de direcciones de cualquier ventana de windows.

FTP_Conect

Le damos enter y nos lleva a nuestra carpeta en internet.

FTP_Conect_ADENTRO

Debes ingresar a public_html. Que es donde se encontrará el sitio web. Vemos que adentro hay un default.php. Este es l archivo que estaba por defecto.

FTP_Conect_PUBLIC

Ahora metemos el index.html y nuestra carpeta de images.

FTP_Conect_ARRASTRANDO FTP_Conect_ACOPYING

Nuestro y se verá en internet, en nuestra dirección:

listo_arriba

http://completin.comze.com/

Listo, tenemos nuestro sitio web corriendo.

Se ve muy charcha todavía porque no le hemos puesto pino, pero eso lo haremos con tiempo. Ahora sabemos que tenemos un sitio web y no le pedimos ayuda ni a google ni a blogspot ni a facebook!

Podemos decir que es nuestro!

Comentarios