Aprendé a Programar páginas Web en HTML

Bueno taringueros, les voy a enseñar algo que muchos no deben saber pero deben querer aprender!

Programar una página web!


A través de los siguientes pasos les voy a enseñar a programar una página web sencilla, pero bien armada. Si les gustó, genial! Busquen material adicional en internet o páguense un curso

Sepan perdonar si hay algún error, el que hizo parte de este tuto no es un profesor certificado o algo por el estilo. Y yo estudio ingeniería en sistemas en la U.T.N. y quiero compartir conocimientos con gente que seguro quiere aprender!

Todos los sitios y máquinas que se encuentren en Internet tienen asignada una dirección IP, no importa si es un celular con conexión a Internet o uno de los servidores de Google, todos y cada uno de los dispositivos que están conectados a Internet tienen su propia IP la cual es única (esta puede variar de equipo a equipo, pero nunca van a haber dos equipos conectados a Internet con la misma dirección).

Estas direcciones IP son asignadas por los ISP (Internet Service Providers), o sea, los proveedores de Internet como es el caso de Fibertel, Netizen, Ciudad Internet, Speedy, Arnet, etc.

Debido a que nadie se acuerda de todos los números de todas las máquinas de todo el mundo, a alguien se le ocurrió la brillante idea de ponerle "letras" a esos números, de manera que 200.49.147.26 pueda ser mejor conocido como Alkon.com.ar.

Ahora, ¿Cómo se "resuelve" que 200.49.147.26 es Alkon y no es Yahoo? ¿Donde está ese enorme listado que indica cual es la dirección IP de cada sitio web?

La respuesta viene de nuestros proveedores (ISPs), ya que tienen servidores especializados en esa tarea los cuales son llamados DNS (Domain Name Servers) o servidores de nombres de dominio. Ahora, ¿Cómo hacen los servidores de DNS para saber que página corresponde a tal IP?

Simple. Deben saber que cada país que tenga acceso a Internet en el mundo cuenta con un NIC (Network Information Center), en nuestro caso de Argentina ese NIC es Nic.ar (http://www.nic.ar) el cual devolverá todas las direcciones registradas que terminen en .com.ar, en Estados Unidos hay otro NIC que devuelve el listado de todas las direcciones terminadas en .com, otro NIC en el Reino Unido que devuelve el listado de todos las direcciones terminadas en .co.uk y así para todos los paises.

Los servidores de DNS se conectan a esos NICs y bajan las últimas definiciones de dominio entre otras cosas mediante herramientas como el WHOIS (en realidad el funcionamiento es un tanto más complejo, pero no viene al caso), el cual explicaré que es más adelante.

Una cosa que deben tener en claro es que al ser una invención Norteamericana, las direcciones web no pueden contener espacios o caracteres no-anglosajones como los acentos. Este "problema" se resolverá seguramente cuando se empiece a aplicar la versión 6 del protocolo IP, para lo cual faltan (lamentablemente) muchos años todavía.

Para "complicar" un poco más las cosas, también existen distintos "lenguajes" para comunicarse con los servidores, donde cada uno de ellos cumple una tarea diferente.
Estos vendrían a ser por ejemplo Gopher, Telnet, Mail o el más utilizado de todos ellos (y en el que estamos interesados) HTTP.

HTTP significa "HyperText Transfer Protocol" (Protocolo de transferencia de hipertexto), el cual también verán con una S adelante en algunos sitios como los bancos o servidores de email (HTTPS), la S significa "Secure" o "Seguro" y significa que todos los datos comunicados entre la máquina del usuario y ese servidor estarán encriptados con un algoritmo de por lo general 64 o 128 bits.

Seguramente habrán notado que hasta aquí hemos utilizado la palabra "Servidor" para describir la máquina que contiene un sitio web. ¿Por qué nos referimos a ellas como servidor?

La respuesta se encuentra en que estas máquinas se encargar de "servir" datos a un "cliente". En el caso de la web, el servidor sería el servidor de HTTP, como es el caso del Microsoft IIS o Apache y nuestro cliente sería el navegador web.
En el caso de un juego MMORPG como lo es el World of Warcraft, el servidor sería el servidor del juego, mientras que el cliente sería el juego que tenemos instalado en nuestra máquina. Lo mismo con el Email, donde el servidor podría ser por ejemplo GMail o Hotmail y nuestro cliente podría ser Outlook/Outlook Express, Thunderbird, etc.

Todos los clientes web, como es el caso del Microsoft Internet Explorer, Mozilla Firefox, Opera o Safari nos permiten trabajar con un set de "lenguajes" de programación que están estandarizados por una institución llamada W3C (World Wide Web Consortium). Eso nos permite saber que todo lo que hagamos se verá de manera "mas o menos" igual en todos estos navegadores. Algunos de ellos cumplen al pie todos los estándares ( como es el caso de Safari y Opera) y otros nos "perdonan" un poco mas las cosas, como es el caso del Internet Explorer.

A pesar de que les parezca algo muy tonto lo que acabamos de explicar, nos parece coherente decirles que por lo menos el 60% de lo que es el desarrollo web profesional se concentra en hacer que las cosas se vean exactamente igual en todos los navegadores, ya que al perdonar tanto "Internet Explorer" lamentablemente hay veces en que se sale bastante de los estándares y debemos hacer increíbles proezas para hacer que todo se vea como se tiene que ver.

Ahora si, enfoquémonos de lleno en lo que es el desarrollo web.



Aprendiendo HTML

HTML (Hypertext Markup Language) o Lenguaje de marcas de hipertexto es un lenguaje de programación que recae dentro de la categoría de lo que son los lenguajes "Interpretados", esto es, que no se necesita compilarlo en forma de un archivo para poder ejecutarlo como es el caso de otros lenguajes de programación como Visual Basic o C.

En el caso de HTML, este es interpretado por los navegadores de Internet como el Internet Explorer o el Mozilla Firefox. En cuanto a esto, nos gustaría pedirles que por favor descarguen el Mozilla Firefox de www.getfirefox.com ya que estaremos utilizando ese navegador para ver las páginas que desarrollemos ya que utilizar el Internet Explorer hará que se nos peguen muchas "mañas" que serán complicadas de dejar en el futuro.

HTML trabaja con un sistema de "etiquetas", o tags (en inglés) en donde cada etiqueta cumple un rol específico. Debido a que los navegadores soportan otros lenguajes aparte de HTML (Como por ejemplo MathML que es utilizado para hacer anotaciones científicas) la primera etiqueta que debemos utilizar de ahora en adelante es HTML.

Las etiquetas son identificadas porque están rodeadas de los signos mayor y menor, de esta manera podemos identificar fácilmente cual es la etiqueta que "comienza" con la que "termina" ya que las que terminan utilizan la barra /, de manera que una página web muy simple sería:

<html></html>



Código 1.1


Todo lo que programemos de ahora en más, tendrá que ir entre esas dos etiquetas ya que estas le indican al interpretador (nuestro navegador) que todo el código contenido ahí dentro es código HTML.

Después tenemos otras dos etiquetas muy importantes, una de ellas es la etiqueta BODY y otra, la etiqueta HEAD.

La etiqueta HEAD nos va a servir para especificar cosas como la metadata del documento, el título de la página y todos los archivos que tiene que "incluir" el documento (o sea, una especie de attachment como en un mail).
Por otro lado, la etiqueta BODY es la que nos va a permitir definir la estructura y el contenido del documento HTML en sí. El 98% de nuestro código HTML estará contenido dentro de la etiqueta BODY.

Nuevamente vamos a hacer nuestra página incluyendo las dos nuevas etiquetas:

<html>
<head></head>
<body></body>
</html>


Código 1.2

La etiqueta BODY tiene la particularidad que soporta texto sin estar dentro de una etiqueta, o sea, todo lo que escribamos dentro de la etiqueta BODY será mostrado en la pantalla de nuestro navegador.
Entonces, vamos a nuevamente realizar nuestra página, está vez mostrando un poco de texto:

<html>
<head></head>
<body>
Esta es mi primera página web! (o el texto que quieran)
</body>
</html>

Código 1.3


Copiemos el texto de arriba desde la etiqueta , abramos el notepad y peguémoslo.

Luego vayamos a Archivo (File) - Guardar Como... (Save as...) y en el nombre del archivo pongamos ejemplo.html, en el tipo de archivo especifiquemos que lo queremos guardar como "Todos los archivos" (All files), ya que si no especificamos este último paso el archivo será guardado como ejemplo.html.txt y asegurémonos de ponerlo en una ubicación en donde sepamos que lo vamos a encontrar fácilmente como por ejemplo el escritorio. Hagamos doble click sobre el archivo ejemplo.html y listo, tenemos nuestra primera página web.

Una peculiaridad interesante es que en HTML tener este código:

<html>
<head></head>
<body>
Esta es mi primera página web! (o el texto que quieran)
</body>
</html>


Código 1.4

O tener este otro:

<html>
<head></head>
<body>
Esta es mi primera
página web!
(o el texto que quieran)
</body>
</html>


Código 1.5


Nos mostrarán exactamente el mismo resultado, el cual es "Esta es mi primera página web! (o el texto que quieran)" mostrado en una sola línea. No importa cuantos "Enters" apretemos, el texto seguirá siendo mostrado todo en una sola línea.

Esto es porque necesitamos una etiqueta especial que cumple la función de realizar el retorno de línea (o sea, el "Enter". Esa etiqueta es la etiqueta BR. La peculiaridad de esta etiqueta es que, a diferencia de las que aprendimos anteriormente esta no necesita una etiqueta de "finalización".

Vamos a probar el ejemplo mostrado en el código 1.5, pero esta vez agreguemos la etiqueta BR a cada retorno de línea:

<html>
<head></head>
<body>
Esta es mi primera <br>
página web!<br>
(o el texto que quieran)
</body>
</html>


Código 1.6


Si guardan el código y lo previsualizan en su navegador, podrán notar que esta vez sí estará mostrada la frase en 3 líneas.

Dentro de la etiqueta HEAD, como ya había explicado anteriormente, se utilizan datos que son específicamente del documento en sí y creemos conveniente que es hora de darle un lindo título a nuestra página.

Para hacerlo, necesitaremos utilizar la etiqueta TITLE. Todo lo que aparezca dentro de la etiqueta TITLE será mostrado en la barra superior de nuestro navegador.
Pero basta de charlas, vamos a probarlo:

<html>
<head>
<title>Bienvenidos a mi Web!</title>
</head>
<body>
Esta es mi primera <br>
página web!<br>
(o el texto que quieran)
</body>
</html>


Código 1.7

También nos parece prudente decirles que la etiqueta TITLE no resiste otras etiquetas dentro de ella, lo que significa que la etiqueta BR no funcionará dentro de la etiqueta TITLE. La etiqueta TITLE solo resiste texto y solo texto, nada más.

Si se preguntan como hacen algunas páginas para poner títulos animados (como una marquesina), eso es realizado por medio de Javascript el cual veremos más adelante, pero lo importante es que quede bien el claro de que la etiqueta TITLE por si misma, no resiste otra cosa más que texto estático y este será el título que aparecerá en la parte superior de la ventana de nuestro navegador.

Ya pusimos un título para nuestra página que será mostrado en la parte superior de nuestro navegador, ahora, ¿Qué tal si ponemos un título dentro de la página en sí?

Para eso, necesitaremos utilizar las etiquetas HEADERS, las cuales son identificadas por la letra H, y por un número que puede variar según nosotros queramos pero los "soportados" son por lo general del 1 al 7 (h1, h2, h3, h4, h5, h6, h7, etc.). Mientras menor sea el número, mayor será su importancia. Y recuerden, esta etiqueta va dentro de la etiqueta BODY.
Vamos a probarlo:

<html>
<head>
<title>Bienvenidos a mi Web!</title>
</head>
<body>
<h1>Bienvenidos a mi Web!</h1>
<h3>Espero que la disfruten</h3>
Esta es mi primera <br>
página web!<br>
(o el texto que quieran)
</body>
</html>



Código 1.8

Ya tenemos una página web con título, copete, un texto y que muestra un título en la parte superior del navegador. ¿Por qué no ponemos unos links?
La etiqueta para poner links se llama A (que proviene de la palabra ANCHOR). La mayoría de las etiquetas en HTML también resisten "atributos". Estos atributos pueden ser desde el color de la fuente, el tamaño, alineación, entre otros. Depende de la etiqueta, algunos atributos están habilitados y otros no. En el caso de la etiqueta A, existe un atributo llamado HREF, el cual nos sirve para poner hacia donde apunta el vínculo (link). La etiqueta A también es bastante flexible sobre lo que "vamos a mostrar". O sea, HREF nos permite definir hacia donde va a apuntar todo lo que esté definido dentro de la etiqueta A. Dentro de esta, podemos incluso poner imágenes u otros textos que no tienen nada que ver con lo que esté definido dentro de HREF.
Otro ejemplo de atributo de la etiqueta A es el atributo TARGET, el cual nos dice hacia que ventana apuntar el resultado. Pero eso es algo que veremos en otra oportunidad.

Un ejemplo de un link podría ser:

<a href="www.taringa.net">Taringa</a>

o

<a href="www.google.com">Ir a Google!</a>

o

<a href="www.taringa.net/foro">
<h1>Ir a Taringa!</h1>
</a>



Código 1.9

Para terminar con este Tuto introductorio de HTML vamos a poner un par de links en nuestra reluciente página:

<html>
<head>
<title>Bienvenidos a mi Web!</title>
</head>
<body>
<h1>Bienvenidos a mi Web!</h1>
<h3>Espero que la disfruten</h3>
Esta es mi primera <br>
página web!<br>
(o el texto que quieran)<br>
<br>
<a href="www.taringa.net">Ir a Taringa</a><br>
<a href="www.google.com">Ir a Google</a>
</body>
</html>




Bueno gente espero que les hayan salido sus páginas y le saquen provecho más que para ver los links mal posteados


Parte de la fuente: http://www.alkon.com.ar/tech/articulos/2190

11 comentarios - Aprendé a Programar páginas Web en HTML

mocho89
jeje interesante. me puse a practicar y ta bueno
SeGu17
te quedaste en los 90, amigo. Ahora existen los free html templates y listo, adio creativida :p

Igual buen aporte