Mucho se habla de que Internet es el futuro. Pero en realidad es el presente.

Desde leer las noticias hasta ver películas y editar tus fotos... hay páginas web de todo tipo y de todos los colores.

¿Quién las hace?

Pues las personas que algún día en su vida decidieron dedicarse al desarrollo web. Todas esas personas tienen una cosa en común, y no es que tengan superpoderes ni que sean más inteligentes que los demás.

No. Lo único que tienen en común es que empezaron por el principio, sin excepción.

Así que vamos a hacer lo mismo. Y el principio más lógico es hacernos una pregunta:

¿Qué es una página web?

Ya que vas a hacer páginas web, está bien empezar por saber qué es eso.

Fácil.

Una página web es una página que está en la web.

Igual que la página de un libro, pero en vez de estar en un papel está en internet.

Y puede contener todo tipo de elementos:

  • Fotos.
  • Vídeos.
  • Textos.
  • Colores.

Así de sencillo.

Hay que admitir que en el caso de un libro la cosa es mucho más simple, porque las letras y fotos están impresas en el papel y ya está.

En el caso de una página web los contenidos están escritos con unos códigos que definen la estructura, los colores, la posición de los elementos, las funcionalidades, etc...

Y esos códigos llegan hasta el navegador web que es quien se encarga de poner todo bonito para mostrarlo en la pantalla. Pero vamos a ver bien eso del navegador.

¿Qué es exactamente y por qué importa?

El navegador web

Para ver una página web hace falta un navegador web.

Esto que estás usando para navegar y mirar por internet.

Probablemente sea Firefox, Chrome, Edge o Safari, aunque hay muchos más.

Ese navegador es un intérprete, que transforma el código de la web en lo que ves.

Así:

  • El desarrollador web desarrolla la web en código web: HTML.
  • El navegador web traduce (interpreta) el HTML para convertirlo en colores y formas en la pantalla.
  • El usuario final disfruta de la web.

Bien.

Ya sabes lo que es un navegador web y sabes que una página de internet no es solo lo que ves, sino lo que el navegador está interpretando a partir de un código de fondo, que se llama código HTML.

HTML viene del inglés Hyper-Text Markup Language. No es un lenguaje de programación, es un lenguaje de marcado. Un lenguaje de marcado es un lenguaje que se usa para marcar cosas. Para darles formato y forma. Por ejemplo, poner algo en negrita. Este lenguaje empezó siendo muy básico, de uso comunicativo entre militares. Y ha evolucionado, bastante.

¿Qué necesito para hacer un sitio web?

Pues necesitas poquita cosa.

Yo te recomiendo estos ingredientes:

¿Para qué es cada cosa?

1. El ordenador es más o menos obvio que lo necesitas.

2. El navegador lo necesitas para ver el resultado de lo que estás haciendo. Cuando tengas práctica, podrás hacer las webs sin tener que mirarlas, porque tu imaginación hará de navegador directamente. Puedes usar cualquier otro de los que te he recomendado, pero bueno ahí están mis recomendaciones por si no conoces otros.

3. El editor es un programa para escribir el código de forma cómoda. Yo te recomiendo esos porque son los más usados (y ambos son gratis). Si conoces otro que te guste más, bravísimo.

¿Qué hago ahora?

Pues si ya tienes instalado el editor de código, ábrelo como un programa cualquiera.

Tendrás un área de escritura. Ahí vamos a escribir lo siguiente:

<html>
<head>
<title>Cocodrilolandia</title>
<meta charset="utf-8">
</head>
<body>
Mi primera web. Bienvenidos a Cocodrilolandia.
</body>
</html>

Puedes copiar y pegar si quieres, de momento no te asustes.

Ahora lo que nos interesa es que puedas entender cómo funciona todo esto.

Cuando hayas copiado y pegado en el programa, verás que aparece todo coloreado de forma muy agradable.

Depende del editor que uses se verá de una forma o de otra, pero eso da igual, porque el editor simplemente sirve para escribir el código. Es como cocinar en una sartén o en otra, lo que importa es hacer las cosas bien.

En mi caso se ve así:

como-hacer-web-1

Pues eso es un editor de código, y para eso sirve: para trabajar con comodidad.

Visualizar el HTML en el navegador

Vamos a ver cómo se vería en internet lo que hemos hecho en el editor.

Para eso vamos a guardar el archivo en algún lugar del ordenador.

No importa dónde lo guardes.

Pero para hacerlo fácil, vamos a guardarlo en una carpeta en el Escritorio, que se llame "Cocodrilolandia".

El nombre del archivo no importa, pero la extensión del archivo tiene que ser .html

¿La extensión?

La extensión es el formato, el tipo de archivo.

Todos los archivos de un ordenador tienen un formato, para que tu ordenador sepa abrirlos y entenderlos correctamente.

En nuestro caso lo guardamos por ejemplo como "web.html" para que el navegador, cuando lo vea, sepa que es una página web.

Vamos a abrir el archivo en el navegador

Hay muchas formas de hacerlo.

  • Puedes arrastrar el archivo al simbolito del navegador.
  • Puedes pinchar dos veces encima de él.
  • Puedes abrir el menú contextual y hacer clic en "Abrir con...".
  • Puedes seleccionar la opción Abrir archivo directamente desde el navegador.
  • Etcétera...

Todo depende de tu sistema operativo, de la versión, del navegador que estés usando... pero bueno, confío en que conseguirás abrir el archivo con tu navegador web.

Y cuando lo abras, verás algo similar a esto:

como-hacer-web-2

Esa es tu primera página web.

¡Enhorabuena!

El navegador está interpretando el archivo que hemos escrito.

Así a simple vista parece una tontería.

Sin color, sin forma, sin nada.

Pero si has llegado hasta aquí, tienes que ir corriendo a encontrar el primer espejo.

Mírate a los ojos y aplaude, porque has aprendido todo esto:

  • Las webs son en realidad códigos HTML.
  • Los navegadores web interpretan los códigos HTML.
  • Las webs se desarrollan en un editor de código.
  • Desarrollar una web es en realidad escribir en el idioma HTML.

Ahora solo te queda aprender a fondo el idioma HTML y todos los trucos.

Pero para eso estamos aquí.

Curso de Desarrollo Web