El desarrollo web o programación web utiliza tres principales tecnologías; HTML, CSS y Javascript. Juntas permiten crear aplicaciones sofisticadas, facebook es el ejemplo más conocido, también mercadolibre, instagram y twitter, por mencionar algunas.

HTML permite crear el contenido de nuestro página o aplicación de manera organizada. CSS se encarga de la apariencia visual del contenido generado por HTML, con CSS podemos establecer el diseño, colores, tamaño de letra, dimensiones de cada elemento, posiciones y alineados, bordes, sombras y demás características de diseño. Y finalmente Javascript te permite interactuar dinamicamente con la aplicación, claro ejemplo del uso de Javascript son las notificaciones de facebook, el chat de este mismo, cuando damos me gusta, creamos una publicación o escribimos un comentario.

El siguiente ejemplo muestra como crear tu primera página web, si lo quieres probar en tu computadora, crea un archivo llamado index.html, después copia y pega el código de este ejemplo, para ver tu página recien creada solo realiza un doble click sobre index.html desde tu explorador de archivos.

Podemos observar que lo primero que existe en nuestro código es la etiqueta <!DOCTYPE html>, esta etiqueta o tag en ingles indica al navegador las sintaxis y reglas que formaran a nuestra página web. Pero ¿Qué es una etiqueta o tag?, una etiqueta es la unidad principal con la que se crea el contenido de una página o aplicación web.

En la línea 2, tenemos a la etiqueta <html>, la cual indica el inicio de nuestra página web, todas las demas etiquetas deben estar dentro de esta, el final de la etiqueta se marca en la línea 38 con </html> este cierre de etiqueta indica el fin de nuestra página a través de una diagonal /. Podemos notar que la mayoría de las etiquetas tiene su correspondiente cierre o fin </nombre-etiqueta>.

Algo que destacar en la etiqueta <html lang="es">es que tiene este atributolang, el cual quiere decir language(idioma) y su valores significa español. Este atributo es muy importante porque ayuda al navegador a hacer muchas cosas, entre ellas la selección de texto, revisar la ortografía, traducir tu página, convertir el texto en audio y más.

Ahora bien, <html> tiene solo dos etiquetas hijas, <head> (cabeza) y <body> (cuerpo), <head> puede contener lo que se le llama metadatos y demás información no visible sobre la página. Y <body>contiene toda la información visible que deseas mostrar al usuario.

Dentro de la etiqueta <head>(cabeza) podemos ver dos etiquetas <meta>, meta viene de metainformation. En el meta de la línea 4 <meta charset="utf-8"> también vemos el uso de un atributo charset con valor utf-8, esto indica la codificación de caracteres de la página y nos permite tener caracteres raros de otros idiomas que de otra manera no se visualizarían correctamente, ejemplos concretos serian la ñ y vocales con acentos para el idioma español.

Aún teniendo este meta, es importante guardar el archivo en tu editor de código con codificación de caracteres UTF-8, probablemente no tengas que preocuparte de esto en los editores modernos como Sublime text, Atom y Visual Studio Code. Como dato curioso, Atom y Visual Studio Code estan creados con Javascript.

El meta de la línea 5 <meta name="viewport" content="width=device-width,initial-scale=1"> es muy útil cuando nuestra página es visualizada en dispositivos moviles, width=device-width permite tomar todo el ancho de nuestra pantalla móvil, initial-scale=1 evita que ciertos dispositivos le apliquen algún tipo de zoom o aumento inicial a nuestra página. Con este meta obtenemos un diseño congruente entre navegadores web, computadoras y dispositivos móviles por lo que te recomiendo que lo incluyas en todas tus páginas web.

Una nota importante es que las etiquetas <meta> y <!DOCTYPE html> no tienen su correspondiente cierre o final de etiqueta, esto es así porque estas etiquetas realmente no tienen contenido visible del elemento como pasa con la etiqueta <html></html>, <body></body> o el encabezado <h1></h1>.

El único elemento visible dentro de la etiqueta <head>, es la etiqueta <title>, el contenido de title se muestra en la pestaña de tu navegador.

Después tenemos a la etiqueta <body>, la cual contiene todo el demás contenido visible de nuestra página, dentro tenemos 6 etiquetas, <h1>a <h6>, la hsignifica Heading(encabezado), se ocupan para mostrar títulos o encabezados, <h1>es el mayor y <h6>es el menor.

Más abajo tenemos nuestro primer parrafo, para crear un parrafo se utiliza la etiqueta <p>, p significa Paragraph(parrafo). Luego tenemos dos listas de elementos ordenados y desordenados.

Para crear una lista de elementos desordenados utilizamos la etiqueta <ul>, ul(Unorder List). Para crear una lista ordenada utilizamos <ol>, ol(Order List). Estas dos listas contiene 3 etiquetas <li>, lisignifica List Item(Elemento de Lista).

Como vemos, no es difícil crear contenido para nuestra página, lo único que necesitamos saber son los nombres de las etiquetas y para que nos sirven, aquí puedes encontrarlas, no tienes que memorizarlas, pero si comprender como se usan, así cada vez que necesites de alguna siempre puedes consultar en el anterior enlace.

En futuras publicaciones profundizaremos como funciona nuestro contenido HTML con CSS (Cascade Style Sheet, Hojas de Estilo en Cascada), para terminar incluyendo también Javascript.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.