¿Cómo crear mi primera página web? HTML

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

HTMLpermite crear el contenido de nuestro página o aplicación de manera organizada. CSSse 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 Javascriptte 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.htmldesde tu explorador de archivos.

Podemos observar que lo primero que existe en nuestro código es la etiqueta <!DOCTYPE html>, esta etiquetao tagen 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 38con </html>este cierre de etiqueta indica el fin de nuestra página a traves 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 valoressignifica 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 demas 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 metade la línea 4 <meta charset="utf-8">también vemos el uso de un atributocharsetcon valorutf-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 acentospara 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, Atomy Visual Studio Code. Como dato curioso, Atom y Visual Studio Code estan creados con Javascript.

El metade 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-widthpermite tomar todo el ancho de nuestra pantalla móvil, initial-scale=1evita 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 recomiedo 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 asi porque estas etiquetas realmento no tienen contenido visible del elementocomo 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 titlese 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>, psignifica 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 unico 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 anterio enlace.

En futuras publicaciones profundizaremos como funciona nuestro contenido HTMLcon 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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.