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:
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
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
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/
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.
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.
Le damos enter y nos lleva a nuestra carpeta en internet.
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.
Ahora metemos el index.html y nuestra carpeta de images.
Nuestro y se verá en internet, en nuestra dirección:
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!
Etiquetas: cómo lo hace
