Cualquier persona puede comenzar a codificar desde su computadora (sin importar el sistema operativo que lleve). Abriendo el bloc de notas y escribiendo algunas líneas de código ya se puede comenzar el armado de una página web.
Antes de comenzar a codificar debemos conocer los distintos elementos que el lenguaje HTML brinda para poder armar la página, explicaré las más básicas en este artículo.
Los elementos tienen dos propiedades: contenido y atributos. Un elemento comienza con una etiqueta de inicio y otra de cierre que se identifican con corchetes angulares y barras (<, >, /). Entre una etiqueta de inicio (<nombre-del-elemento>) y una de cierre (</nombre-del-elemento>) es donde se encuentra el contenido. A continuación, un ejemplo de un elemento que muestra en la página web el título principal (h1):
<h1>Primer título</h1>
El contenido puede ser el texto a mostrar u otros elementos. Por ejemplo, se quiere mostrar un párrafo (p), pero que algunas palabras estén en negrita (strong):
<p>Esto es un párrafo con una palabra en <strong>negrita</strong></p>
Los atributos se ubican en la etiqueta de inicio y tienen un nombre-valor separados por un signo de igual (=) y el valor se lo encierra entre comillas. Estos controlan el comportamiento del elemento. Para mostrar un enlace, se utiliza el elemento “anchor” (a) con el atributo “href” y el valor que es la dirección del enlace:
<a href = “https://www.google.com”>Google</a>
Este ejemplo se ve de la siguiente manera en el navegador: Google
Existen una gran cantidad de elementos y atributos que puedes aprenderlo mirando páginas web. Buscas una página web, apretas la tecla F12 y en el panel de la derecha (en Chrome, en otros navegadores lo abre en diferentes lugares), en la pestaña “elements”, encontrarás todos los elementos y atributos que se utilizaron.
¡A codificar!
A medida que avanzamos en la escritura iré explicando el funcionamiento de cada elemento.
Abrimos el bloc de notas. Para que el navegador sepa que código tiene que interpretar, al principio de cada archivo, se le escribe lo siguiente: <!doctype html> No es un elemento de html, pero ayuda a los navegadores que esperar.
Continuo al “doctype” escribimos el primer elemento que engloba toda la página web y es el elemento “html”. Lo abrimos, apretamos enter y lo cerramos como aprendimos anteriormente.
Todas las páginas web se dividen en dos: cabeza (head) y cuerpo (body). En la cabeza se encuentran diferentes elementos para que la pestaña del navegador lo interprete (como el título de la pestaña) o elementos para el posicionamiento en buscadores (como las etiquetas meta) y en el cuerpo se escriben todos los elementos que se muestran en la página web. Entonces, como contenido del elemento “html” escribimos los siguientes elementos: “head” y “body”.
Para que la pestaña del navegador tenga el título que querramos, dentro del elemento “head” escribimos otro elemento llamado “title” y en el contenido del elemento “title” ingresamos el texto.
Otro elemento importante que debe estar en el elemento “head” es el elemento “meta” con su atributo “charset” y el valor “utf-8”. Esto ayuda al navegador a mostrar cualquier carácter o símbolo del mundo. Por ejemplo, las tildes o diéresis y demás caracteres que otros idiomas usan. Este elemento se le dice “elemento vacío” porque solo lleva atributos y no tiene una etiqueta de cierre (otros iguales son los “link” o “img”). Encima del elemento “title” escribimos este elemento.
¡Ahora vamos a mostrar nuestro primer contenido en el cuerpo de la página! Para mostrar un título de primer nivel se utiliza el elemento “h1” y en su contenido el texto que deseemos. Este elemento lo escribimos en el contenido del elemento “body”.
Una buena práctica en el mundo de la programación es el “código limpio”. Existen muchas reglas para mostrar un código entendible y fácil de interpretar su intención a demás programadores. Una de ellas es la “indentación”. Les dejo un artículo por Sthefany Floriano donde explica a detalle este concepto.
Para lograrlo en bloc de notas sencillamente utilizamos el tabulador (tecla tab) y así ir acomodando el código para sea legible. De esta manera entendemos qué elemento esta dentro de que elemento.
Ahora debemos guardarlo con la extensión “.html” para que el navegador lo pueda abrir y leer. No dirigimos a la pestaña “archivo” y hacemos click en “guardar como”.
Como nombre le ponemos “index” seguido de “.html”.
Nos dirigimos a donde lo guardamos y vamos a encontrarnos que el archivo tiene el logo del navegador que tengamos como predeterminado (en mi caso “Brave”).
Al abrirlo, el navegador interpretará el código y lo dibujará.
¡Creaste una página web con el bloc de notas! Existen diferentes programas que facilitan a la hora de codificar, como “Visual Studio Code” o “Sublime Text”.
Para poder conocer los elementos, sus funciones y demás es a través de la práctica. Ver otras páginas, ver en su código que elementos utilizaron y tratar de aplicarlos.
En otros artículos hablaré de cómo introducir diseño a estos elementos y así crear una página web más moderna.
