Todo lo que necesitas saber para hacer tu primer página de HTML

código fuente de la página de inicio de Google

Este artículo es para hablar de lo básico de lo básico en cuanto al diseño web. Aunque seguramente ya conozcas algo, es muy recomendable que le des una revisión para que queden claros algunos conceptos. Y al final terminaremos haciendo nuestro primer documento. Pero antes:

¿Qué es HTML?

Significa Hyper Text Markup Language, o lo que vendría siendo Lenguaje de Etiquetas de HiperTexto. Seguramente con esto no queda muy claro a qué se refiere, pero quizá entendiendo para qué sirve es que nos quede claro para qué debemos conocerlo al hacer sitios web. Y poco a poco iremos descifrando los elementos de su nombre.

¿Por qué debo saber HTML?

Simplemente, por que es el lenguaje principal con que se realiza un sitio web. Seguramente más adelante se hablen de otros lenguajes, como Javascript o Php, así como bibliotecas (jQuery, Bootstrap). Pero todo parte del html. Es la parte medular. Aunque no dominemos HTML por completo, mientras más lo conozcamos más fácil nos resultarán las demás tecnologías.

Y realmente html no es complicado. A diferencia de otros lenguajes, no requiere de definir funcionalidad, lógica, condiciones y elementos parecidos. Incluso en muchos casos no debe escribirse de un modo estricto. Si en javascript me equivocó en poner algo en minúsculas cuando debía ser en minúsculas, estoy en problemas. En HTML no. Pero cuidado, no con esto quiero decir que se puede poner  cualquier cosa. Vale la pena que empieces con buenas costumbres al escribir código para que más adelante todo resulte más sencillo.

La función de HTML es describir. ¿Qué describe? un documento web. Indica qué texto tiene, qué imágenes mostrar, dónde se encuentran, etc. Para que quede más claro, recordemos cómo está conformada la World Wide Web.

  1. En el mundo hay miles de computadoras que tienes billones de documentos, ya sean de audio, video, texto, imágenes. Estas computadoras son los servidores.
  2. Por otro lado, están las personas que quieren ver esos documentos. Estos somos nosotros, los usuarios. Y también contamos con computadoras para acceder a esa información.
  3. Sin importar si es una computadora de escritorio o un dispositivo móvil, para llegar a esa información necesitamos un programa especial, que es el navegador. Hay varios navegadores: Google Chrome, Firefox, Safari, Explore, Opera. Todos ellos cumplen con una misma función: solicitar documentos que están en la web, e interpretar su contenido.
  4. ¿Y qué tipo de documentos solicita? ¡HTML! Bueno, seguramente alguno dirá que puedo pedir documentos con otra extensión, como .php, .aspx, .jsp, .cfm. Más allá de la extensión, su contenido es html.

Veamos un ejemplo. Utilizando algún navegador, entra a un sitio web. Yo voy a usar Chrome para entrar a la página de su creador, o sea google. Tengo este resultado.

sitio de google.com

Esto es lo que nosotros vemos, pero lo que sucede entre bambalinas es lo siguiente. Nuestro navegador buscó entre todas las computadoras del mundo una en particular, que es la de Google. Al conectarse a ella, esta le regresó un documento de texto, caracteres raros y demás cosas. Como normalmente no nos interesa ver esta parte, lo que hace el navegador es interpretarlo para que veamos lo que representa, que es esta hermosa y sencilla página.




Sin embargo, ahora que estamos estudiando a las páginas web, debemos recordar eso: lo que se recibe es un documento con texto, y en nuestra computadora se hace la interpretación. Es más, si queremos, podemos ver ese documento. Simplemente podemos hacer click derecho sobre la página y seleccionar la opción que diga “Ver código fuente” (o algo así. Puede variar el título o estar en otro idioma).

Comando para ver el código fuente de la página

Al hacer esto, el navegador nos va a dejar entrar a The Matrix y con ello descubrir las  entrañas de una página. Advertencia, podemos quedar ciegos al realizar esto.

código fuente de la página de inicio de Google

Lo que ha sucedido es como en los programas policiacos donde un testigo le dice a un dibujante cómo es el asesino. En este caso el código de html le dijo a Google cómo es el aspecto de la página web y este lo ha interpretado. Debo decir también que, al igual que en esos programas, el dibujo no es exactamente igual al verdadero. Cada navegador hace una interpretación del documento, la cual comúnmente es un 99% exacta, pero es ese 1% el que luego causa dolores de cabeza. No nos preocupemos en este momento. Lo importante a rescatar de aquí es que nosotros vamos a realizar, letra por letra, un documento así.

Tras el primer shock por ver este código, podemos detenernos a analizar su estructura. Y aún suponiendo que no entendiéramos el lenguaje inglés, podríamos empezar a detectar algunos patrones. Por ejemplo, de color. Hay texto en rojo, en azul, también en morado. El código de este último color es el que nos va interesar ahora. Ya viéndolo a detalle, nos fijaremos que si bien dice cosas como “a” ó “div”, tienen en alguna parte estos signos: “<” ó “>”. Esta parte del código, mi querido aprendiz, son las etiquetas: el markup language.

Ya sabemos cómo son las etiquetas. En el siguiente artículo vamos a escribirlas.

 

Be the first to comment

Leave a Reply

Your email address will not be published.


*