Uno de los temas más importantes, o bueno por no decir el más importante dentro de la programación y desarrollo web es HTML. Saber qué es HTML y para qué sirve es clave para cualquier proyecto, por complejo que sea dentro del mundo del desarrollo.
Por esto hoy quiero dedicar este post específicamente para hablar de qué es HTML y para qué sirve. De esta manera sabrás qué es lo que puede esperarte en este mundo de la programación a corto y largo plazo.
Contenido
Qué es HTML
Cómo crear contrato solidity: lotería en ethereum
En esta tercera sesión del curso veremos cómo crear contrato solidity para ethereum con base en una …
Qué es Gas y GasPrice: transacciones y congestión en blockchain
Cuando ejecutamos transacciones en blockchain es probable que desconozcamos los costos o tiempos de …
Entorno de prueba blockchain con truffle ganache Nodejs: sesión 1
Si estás iniciando en la programación blockchain, es demasiado importante conocer los entornos de pr…
En su definición, HTML significa hypertext markup language. Donde hypertext hace referencia a enlaces en texto, o adjuntar un enlace en un texto y markup language hace referencia a lenguaje de macado. HTML es interpretado por los navegadores, dando así la visualización que conocemos comunmente al abrir un sitio web ya sea desde un teléfono o desde pc.
Hypertext
En esencia o por definición, hypertext es texto que contiene enlaces a otros textos. A inicios de internet podíamos ver algunos sitios web que a pesar de no tener el mejor estilo, si contenían muchos textos con enlaces, llevando al visitante por diferentes lugares de la web. Justo como llegaste a este post, es el ejemplo concreto.
Estos enlaces permitían y permiten que el visitante de la web pueda no solamente navegar dentro de la web sino que pueda hacerlo en todo internet. De entrada podrás encontrar que es una función nativa y que todos los sitios lo contienen. Es la forma de navegar dentro de una web.
Markup language
El lenguaje de marcado por otro lado no es un lenguaje de programación como javascript, sino es un lenguaje que contiene etiquetas, marcas o información para dar estructura a un texto. Si bien al entrar a internet, cualquier página que veas tendrá un estilo diferente, elementos en diferentes partes, menús, fotos, entre otros que hacen diferencia o bien, buscan representar su marca en sí. Lo cual es genial.
Ahora aunque sean sitios sean contruídos con wordpress, wix o shopify, son código en su esencia. Es decir una o cientos de hojas de texto, de código en diferentes lenguajes de programación y aquí es donde entra HTML. HTML permite que ese código sea estructurado para así ser mostrado al visitante o cliente final. Pero, ¿cómo lo organiza? para eso existen las etiquetas, atributos y otros elementos que veremos.
Elemento HTML
Todo HTML está compuesto por elementos, valga la redundancia y este concepto lo verás todo el tiempo, en todo momento cuando trabajas con HTML y es el siguiente:
< etiqueta de apertura > < contenido del elemento > </ etiqueta de cierre > Estos 3 conceptos definen el elemento html:
- Etiqueta de apertura: contiene el tipo de etiqueta que vamos a utilizar y su personalización que ya veremos más adelante.
- Contenido: dependiendo del tipo de etiqueta, este contenido puede variar pero en sí describe qué es lo que contiene esta etiqueta.
- Etiqueta de cierre: se identifica con el slash dando a entender al intérprete o navegador, que esta etiqueta ha finalizado.
Estructura HTML
Lo primero que tenemos que saber es que un documento HTML estructura todo en 3 partes: head, body y footer. Estas 3 partes tienen una función diferente dentro de la organización y las podemos reconocer así:
<head>
// CONTENIDO DE HEAD
</head>
<body>
// CONTENIDO DE BODY
</body>
<footer>
// CONTENIDO DE FOOTER
</footer>
Head
En esta primera sección no visible al usuario, podremos ingresar todo lo que va a permitir un control o acceso a todo nuestro documento, o bien cómo los navegadores deben interpretar nuestro documento HTML. Contiene metadatos clave para su ejecución como:
- Título de la página.
- Dónde se encuentra la hoja de estilos o archivos públicos.
- Favicon o pequeño ícono que veremos al lado de abrir una nueva pestaña en el navegador.
- Permisos especiales como facebook ads, google tag manager.
- Codificación de caracteres especiales.
Esta sección como lo mencioné anteriormente no es visible par el visitante, pero si es muy imporante para el correcto funcionamiento del documento o de la web en general.
Body
Por otro lado la sección o etiqueta Body si es la sección visible al usuario. Todo lo que escribas en esta sección será vista en el navegador. Cualquier caracter será mostrado. Más adelante veremos unos ejemplos con las etiquetas y atributos.
Footer
Pie de página de todo el documento. Es clave en el diseño y desarrollo web porque aquí viven los redireccionamientos, guías, menús o información de la empresa para que el usuario pueda ver todo en una pequeña sección. De hecho lo podemos definir como una zona donde vive toda la web, pero en una versión corta.
Etiquetas HTML
Las etiquetas nos van a permitir estructurar el texto, documento o web de una mejor forma, dependiendo del tipo. Claro que hay muchos tipos diferentes de etiquetas pero aquí veremos algunos de los principales. Claro que ya conocimos head, body y footer. Ahora conoceremos otros importantes como:
<h1> Etiqueta de encabezado </h1>
<p> Etiqueta de párrafo </p>
<a> Etiqueta de link </a>
<img> Etiqueta de imagen </img>
<ul> Etiqueta de lista </ul>Estas anteriores sean tal vez las que más utilices dentro de tu código. Cada una de ellas funciona por si sola o bien necesitan otros datos adicionales para poder ser mostrados y para esto existen los atributos.
Atributos HTML
Los atributos permiten añadir información adicional y en algunos casos necesaria para que la etiqueta o el elemento html sea completado. Los atributos siempre están ubicados en la etiqueta de apertura justo después del nombre de la etiqueta. El mejor ejemplo es el mismo enlace o etiqueta de enlace.
<a href="https://eduardo-arias.com/nodecron-funciones-en-segundo-plano-para-nodejs/" target="_blank" >Este es mi sitio web</a>En el fragmento anterior podemos ver que href contiene la url hacia donde irá dirigido una vez el usuario oprima el texto «Este es mi sitio web», el cual es el contenido de la etiqueta.
Luego vemos el atributo target el cual indica en su contenido «_blank» que al hacer click se abrirá en una nueva pestaña y no en la actual.
Como vemos, un enlace no puede funcionar si no le indicamos hacia donde puede ir, por ende, el enlace siempre necesitará el atributo href. Cabe aclarar que hay muchos tiempos de atributos como src para img, el cual indica la fuente de la imagen que se va a mostrar.
En el siguiente post, veremos CSS y cómo podemos combinarlo con HTML para poder construir un sitio web de una forma sencilla.
Video de ayuda
Hice este video en mi canal de youtube para que puedas ver el paso a paso del proceso realizado. Si te gusta, no olvides dar like y suscribirte!
Producto sugerido
Si eres como yo que pasa bastatne tiempo frente al compu, puede que la barra de luz te sirva bastante para cuidar tu vista en esas largas jornadas. También te dejo aquí el post para que veas la reseña completa.
Quntis Lámpara para monitor de computadora, barra de luz para monitor de pantalla para el cuidado de los ojos, lámpara de tareas LED de lectura electrónica con atenuación automática, barra de lámpara regulable, control táctil, sin deslumbramiento de pantalla, ahorro de espacio, lámparas de escritorio para oficina en casa
- Sin reflejos de pantalla y sin parpadeo, antiluz azul: la barra de luz para monitor de computadora Quntis tiene un diseño óptico asimétrico único que ilumina solo tu escritorio y teclado mientras garantiza que no se reflejen en la pantalla. Gracias a su avanzado sistema de protección ocular, nuestras lámparas de escritorio para oficina en casa bloquean la luz azul y la radiación óptica, aliviando eficazmente la fatiga ocular para proteger tus ojos. Es la opción ideal para estudiantes, diseñadores de pintura y trabajadores de oficina de negocios.
Conclusión
Conocer HTML es clave para el desarrollo web y en si, no hay mejor lugar para empezar a programar que conocer la estructura de la web en general.
