[How-To] ¿Como hacer un página web? (I)

Escrito por Penguino - November 29, 2008 – 5:30 pm -

Muchos de los que han visitado mi página me han preguntado alguna vez: ¿como puedo hacer una página web? Me han preguntado si usé algún programa, si me demoré mucho, si es difícil… Aquí la respuesta a todas esas preguntas.

Para entender todo esto, debemos empezar a entender que pasa cuando ingresamos una dirección web a nuestro navegador favorito, ya sea Internet Explorer (no recomiendo que usen ese), Firefox, Opera, Safari, Google Chrome, en fin.

Explicación de la primera fase de la visita a una web

Ilustración de la primera fase de la visita a una web

En esta primera fase se da lo siguiente:

Escribes la dirección de la página web (la de Google, por ejemplo) [das enter]
La dirección sale de tu casa y pasa por el servidor DNS, que es el servidor que convierte la dirección que escribiste a una dirección IP
El navegador web envía una petición al servidor por medio de un pequeño paquete de datos
El servidor analiza la petición

Hasta el punto 4 todo tiene que ver con un envío que hacemos nosotros desde nuestro navegador.

Explicación de la segunda fase de la visita a una web

Ilustración de la segunda fase de la visita a una web

Aquí se invierte el proceso, ya que dependiendo de la respuesta del servidor van estos pasos:

Si la petición fue aceptada, devuelve el archivo que pedimos. En este caso, entramos a google.com, así que si acepta la petición devuelve el archivo que nos muestra la página principal de Google, con el logo, el cuadro de búsqueda, bueno, todo eso.
Si la petición fue rechazada, puede devolvernos algún error con su respectivo código. El error más común es el 404 File Not Found, que significa que todo el proceso de envío estuvo bien, pero que el archivo no se encuentra o ya no existe. Si entran a http://www.google.com/sdfsdafsadf se encontrarán ese error.

Después de todo este proceso de las peticiones, el archivo se devuelve por medio de un paquete de datos, en el que viene un archivo HTML, PHP, CGI, o cualquier otro tipo de archivo web.
Ese archivo llega a nuestra casa, entra por el router, y él decide si bloquea o no la página, en caso de tener un filtro de contenidos, o si existe un firewall, antivirus, antispyware, lo mismo, se decide si se bloquea o no la página.
El archivo llega a nuestro navegador, y el navegador convierte todo el código el archivo que nos llegó del servidor en lo que podemos ver: en el caso de Google, el logo, el cuadro de búsqueda, los botones…

Ahora ya sabemos que pasa cuando escribimos alguna dirección de alguna página web; todo esto se hace en tan corto tiempo (generalmente segundos tarda esto).

Lo primero que necesitamos saber para hacer nuestra página web es decidir que tipo de página queremos crear. Si queremos un portal web (como la de los bancos, los colegios, las páginas de juegos), un foro (como psicofxp.com, forosdelweb), un wiki (como la famosísima Wikipedia), un blog (como los periódicos o como esta misma página que están viendo )… hay una buena variedad de tipos de páginas web, y para ellos muchas herramientas que nos ayudan a hacerlo sin necesidad de estar escribiendo exageradas cantidades de código, que puede ser aburrido para unos o entrenido para otros.

A pesar de que todas estas herramientas nos facilitan mucho el proceso de la creación de una página web, puede presentarse un problema, o puede que queramos insertar algo de otra web, o queramos hacer alguna modificación a la herramienta que hayamos conseguido, y para ellos debemos aprender dos lenguajes muy utilizados en la Web: hablo del HTML y el CSS. Empecemos por el HTML:

Que es el HTML? Es un lenguaje de programación usado en la web y en algunos programas en menor parte que significa Hypertext Markup Language (Lenguaje de Etiquetas de Hipertexto) y que consiste en un lenguaje hecho de etiquetas (palabras encerradas en <>, como en <html>) que definen la estructura de una página web o aplicación web. Un ejemplo de un documento HTML sería

<html>

<head>

<title>Mi primera página web</title>

</head>

<body>

<h1>Hola, este es mi primer archivo HTML</h1>

</body>

</html>

Que mostraría algo así:

Así quedaría una web hecha con el código de arriba (click para ampliar)

Ahora analizemos el código:

El <html> le dice al navegador que desde ahí empieza el código HTML
El <head> dice que ahí empiezan todos los datos de cabecera: el título, la codificacíon, el origen, los datos más importantes que el navegador debe saber.
El <title> es el título de la página, el que aparece en la barra de arriba, al lado del “Mozilla Firefox” y los botones “Minimizar, Maximizar, Cerrar”, y arriba de la barra de menús.
El </title> dice que hasta ahí va el título. Estas etiquetas de la forma </***> se llaman etiquetas de cierre, y significa que hasta ahí va el contenido de la etiqueta que abre. En ese caso, “….<title>Mi primera página web</title>….” dice que el título será “Mi primera página web”, y los puntos suspensivos no quedarán.
El </head> dice que hasta ahí llegan los datos de cabecera.
El <body> dice que ahí empieza el verdadero contenido del texto. Es el body todo lo que podemos editar, el cuerpo en sí de la página web.
El <h1> significa “Header 1″, que quiere decir “Título o Cabecera 1″, que dice que desde ahí empieza el Título 1. Así como algunos han visto en Micro$oft Word que aparece “Título 1, Título 2, Título 3….”, así se aplica acá, pero eso lo veremos con más detalle después.
El </h1> significa que ahí se acaba el título 1.
El </body> dice que ahí se acabó el contenido de la página.
El </html> dice que ahí se acabó el código HTML.

Ahora que sabemos como hacer un documento HTML muy sencillo, puedes hacerlo:

Copia y pega el código a un editor cualquiera de textos (Word, Wordpad, Notepad, o el que uses).
Cuando lo vayas a guardar, guárdalo como Archivo HTML.
Y abrelo con tu navegador web favorito (repito, no recomiendo Internet Explorer, es malo, lento, inseguro…)

Creo que esto es todo por hoy. Si hay alguna duda, comentario, sugerencia, o queja (xD) no dudes en comentar!

PD: Esto no es todo, el proceso de crear una página web es muy largo… así que publico la segunda parte después.

Otras partes del tutorial

¿Cómo hacer una página web? (I)

Tags: HOW-TOs, Tutoriales, Web
Archivado en General, HOW-TOs, Tutoriales | 0 Comentarios »

Geek Penguin