HTML, ¿Qué es y porqué es importante en la era digital?
3 mayo, 2021 2023-01-10 15:28HTML, ¿Qué es y porqué es importante en la era digital?
HTML, ¿Qué es y porqué es importante en la era digital?
¿Querés saber qué es y cómo funciona un HTML? Si estás incursionando en la programación o te gustaría conocer más tenemos la información que buscas. En esta nota te contamos todo lo que tenes que saber de este elemento tan importante para la era digital.
Índice del Artículo
¿Qué es HTML?
En inglés, HTML significa Hypertext Markup Language. En español, podemos traducirlo como lenguaje de marcación de hipertexto.
Suena complicado, ¿no? Sin embargo, el HTML no es más que un lenguaje usado para crear páginas webs por medio de marcadores (tags) y atributos. Estos elementos definen cómo va a ser presentado el contenido en un navegador web.
Pero ¿qué es un hipertexto? Un hipertexto hace referencia a un texto con bloques interconectados, que contienen palabras, imágenes, sonidos, tablas y otros elementos. También pueden tener rutas que apunten a otros hipertextos, como los hipervínculos.
Desde su implementación, en los inicios de la década de los 90, el HTML pasó por diversas mejoras que lo convierten hoy en la base para blogs, ecommerces, redes sociales y todo tipo de páginas accesibles desde un navegador web. por lo tanto, es una herramienta indispensable para la era digital.
¿Cuáles son los elementos principales del HTML?
Ahora que sabemos lo que es el HTML, vamos a ver los principales marcadores que definen las funciones de los elementos que forman parte de la página. Es decir, aquello que conforma el diseño web de cualquier página.
Mediante esta combinatoria de elementos básicos, podemos crear una estructura de HTML sin problema. ¿Empezamos?
Primero, es necesario recordar que estos tags o marcadores son identificadas con un signo de menor que (<), seguido del nombre de la etiqueta y un signo mayor que (>). La mayoría de los tags deben ser cerradas, lo que se hace con una barra (/) entre el signo «<» y el nombre de la etiqueta. De este modo, veamos algunos ejemplos:
Mira también: ¿Por qué deberías hacer un rediseño de página web?
Párrafo (<p>)
En primer lugar, el tag o marcador <p> debe abrirse y cerrarse para definir un párrafo. A continuación, te mostramos cómo debería quedar en el código.
<p>Este es un párrafo en HTML. </p>
Encabezado (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)
Por otro lado, las heading tags o las etiquetas de cabecera, ayudan a crear una jerarquía entre las partes del texto, que lo separa en secciones. El <h1> es el encabezado más relevante, seguido del <h2>, <h3> y así sucesivamente al <h6>, de menor importancia. Ejemplo:
<h1>Título principal</h1>
<p>Párrafo de introducción. </p>
<h2>1. Primer subtítulo</h2>
Imagen (<img>)
En este caso, no es necesario cerrar el tag de la imagen como hacíamos con los elementos anteriores, ya que su contenido se define en la etiqueta con el atributo «src».
<img src=» (aquí iría el enlace de la imagen)»>
Ancla (<a>)
Por otro lado, el tag de anclaje define un enlace a otra página. El atributo «href» determina el destino de este link.
<a href=» (enlace)/a>
¡Comentario (<! – ->)
Por último, usamos este tag para escribir algún comentario que ayude a comprender el código. ¡Todo lo escrito entre los marcadores <! – -> no se mostrará al usuario. Entonces, es muy útil para comunicarse entre aquellos que estén trabajando en el código.
Mira también: Top 10 mejores CMS para tiendas online
¿Cómo crear tu primer código HTML?
Por lo tanto, ahora que sabemos los elementos podemos crear nuestro primer código HTML. Para crear código HTML, solo necesitamos un editor de texto simple (bloc de notas, por ejemplo) y un navegador web (Chrome, Firefox, Safari, entre otros) para visualizar cómo se verá tu página.
Los editores de código más especializados usan editores más profesionales. Pero, para aquellos que recién están empezando, estos dos elementos que te contamos funcionan sin ningún problema.
En primer lugar, hay que crear un nuevo archivo y guardarlo con la extensión .html. Para este tutorial podemos nombrarlo index.html.
A continuación, copia y pega el código que te dejamos más abajo. Pero cuidado, ya que dejamos algunas anotaciones para que veamos cómo lo estamos haciendo.
<!DOCTYPE html>
<html>
<head>
Esta primera parte es común a todas las páginas web, consta de una estructura fija.
<meta charset=» utf-8″>
<title>Mi primera página</title>
La última función que agregamos te resultará familiar, ya que es la manera de insertar un título.
</head>
<body>
<h1>Mi primera página</h1>
También ésta debería resultarte familiar. Como podrás ver, acabamos de agregar un subtitulo.
<p>Mi primer párrafo! </p>
¡Y ahora un párrafo!
</body>
</html>
Por último, cerramos el código.
Para terminar, guarda el archivo. Una vez que hayamos hecho esto, basta solamente con abrir el archivo en el navegador que usemos. ¡Y listo! Terminaste de crear tu primer código HTML.
Finalmente, hasta acá llegamos con la información acerca de qué es y cómo funciona el código HTML. Tener una página web puede ser un antes y un después para tu negocio, aunque sea un lugar físico. No obstante, siempre es importante ver qué están haciendo quienes venden lo mismo.
Necesitas información clara y de valor para analizar el mercado y a tu competencia ¿Querés saber todo sobre tu industria? Descargá nuestra guía para crear tu propio bechmarking ¡y empezá a sacarle provecho!
ÚLTIMAS NOTAS
