BlogInternet26 julio

¿Qué son los códigos HTML? Ejemplos simples

Tiempo de lectura: 7 minutos

Generalmente, solemos pensar que una página web no es más que un conjunto de elementos gráficos y de textos, que reflejan la esencia de una empresa en Internet. Si bien esto es una parte de los sitios web, también lo son los códigos HTML dentro de su construcción.

Los códigos HTML pueden resultarnos algo complicado y aterrador, pero no tendrá por qué ser así­, después de que leas la siguiente explicación sencilla de lo qué son los códigos HTML y cómo funcionan junto a algunos ejemplos sencillos y actualizados.

¿Qué son los códigos HTML?

Muchas personas tienden a confundir los códigos HTML con un lenguaje de programación, pero no es así­. Los códigos HTML componen un lenguaje basado en el etiquetado o modelado de información que se utiliza para desarrollar sitios web en Internet.

Las siglas HTML significan "HyperText Markup Language", lo que quiere decir en español, "Lenguaje de Marcas de Hipertexto", lo que efectivamente da cuenta de su significado y uso dentro de Internet. En esencia, se trata de la descripción textual de tu página web.

Este tipo de lenguaje nos permite presentar organizadamente una determinada información en la red, usando las famosas tags, lo cual significa etiquetas en Hipertexto.

No obstante, todos los sitios web en Internet utilizan este lenguaje HTML, por lo que aprender algunos códigos simples podrí­an serte de mucho provecho para el desarrollo del sitio web de tu negocio.

¿Podemos aprender este lenguaje?

Actualmente, los códigos HTML son utilizados por muchos usuarios, incluso pueden ser empleados por cualquier persona que esté interesada, ya que se trata de un lenguaje muy sencillo de aprender, incluso existen cursos en lí­nea para iniciar a los niños a emplear este código.

Para qué sirven los códigos HTML

Además de proporcionar el orden adecuado a la información que queremos presentar en Internet, los códigos HTML también sirven como punto de enlace entre esta información y el buscador (Google, Bing, Yahoo! Search, entre otros) que usamos para navegar en la red.

En este sentido, los códigos HTML indican al navegador cómo debe leer la información que está en un sitio web, para luego mostrarla a los visitantes.

¿Cómo funcionan los códigos HTML?

Imaginemos que debemos queremos redactar un artí­culo sencillo. Sabemos que este debe contener una estructura acorde, es decir, debe llevar un tí­tulo, subtí­tulos, una introducción breve, imágenes, entre otros.

De igual forma, las etiquetas HTML cumplen esta función de ordenar la información e indicar qué es cada uno de los segmentos presentados. En sí­ntesis, tenemos que cada uno de los sitios web es en realidad un archivo en HTML.

Así­, si tenemos una etiqueta que señala un Tí­tulo, entonces el navegador entenderá que esa información es un Tí­tulo, igualmente pasa con los subtí­tulos, imágenes, párrafos, etc.

¿Cómo podemos ver los Códigos HTML de una web?

Una forma muy clara de ver los códigos de un sitio web, es visitar el sitio web, y en cualquier espacio vací­o, darle clic derecho a tu mouse, se desplegará un pequeño menú en el que darás un nuevo clic a "Ver código fuente de la página".

Inmediatamente, se abrirá una pestaña nueva en tu navegador donde se te mostrarán los códigos HTML que conforman ese sitio web. A primera vista, te parecerá una serie de textos sin sentido alguno y además, muy complicado de entender. Pero ya verás que no es nada difí­cil.

¿Cuál es el formato de un archivo HTML? ¿Una página puede tener varios archivos en HTML?

Cada archivo HTML es solo un archivo de texto sin formato, pero con una extensión de archivo .html en lugar de .txt, y está compuesto por muchas etiquetas HTML y el contenido de una página web, como bien señalamos en lí­neas anteriores.

Por otro lado, un sitio web a menudo contiene muchos archivos HTML que enlazan entre sí­, y que asimismo dan forma a un sitio web para que este sea leí­do correctamente por nuestros navegadores y buscadores, para así­ mostrarla.

¿Cómo podemos identificar las etiquetas HTML de una web?

Ahora bien, las etiquetas HTML de una web son las "palabras clave" que no podemos ver a simple vista, ya que permanecen ocultas dentro del código fuente, como pudimos comprobar hace un momento.

La forma en la que podemos detectarlas dentro de los códigos, es a través de un par de signos bien conocidos: menor que < y mayor que >.

En este sentido, las etiquetas HTML deben tener dos partes, una apertura (menor que <) y una parte de cierre (mayor que >). Dentro de estos signos estará encapsulado el nombre de la etiqueta. Por ejemplo:

<Title> que significa: "Tí­tulo".

Adicional a esto, debemos tener en cuenta que la etiqueta de cierre tiene el mismo texto que la etiqueta de apertura, pero tiene un carácter de barra diagonal (/) añadido. Así­, podemos entender esto como el carácter que cierra esa etiqueta HTML.

Por ejemplo:

<Title>Mi página web </Title>

Sin embargo, hay algunas etiquetas que son una excepción a esta regla donde no se requiere una etiqueta de cierre. La etiqueta  <img> para mostrar imágenes es un ejemplo claro de esta excepción. También lo es la etiqueta BR que indica un salto de lí­nea.

Estructura de un archivo básico de códigos HTML

Para comenzar a escribir los códigos HTML de tu página web, es necesario contar con un editor de texto de HTML. Uno de los más usados y recomendados es el editor Sublime Text, ya que proporciona herramientas que facilitan el desarrollo de los códigos.

Especialistas del área, también recomiendan los editores: Brackets, Adobe Dreamweaver, Atom Editor, entre otros.

Ahora bien, un documento de HTML básico debe comenzar siempre con el código de apertura HTML, seguido su código HTML de cierre. Así­:

<html>

</html>

Entre estos dos, incluimos la etiqueta "head" que significa "cabecera" y en ella incluimos la etiqueta Title junto a su correspondiente Title de cierre. La etiqueta "head" nos permite identificar el sitio web que no se muestra en la página, es decir, su nombre, descripción, o cualquier otro elemento especial.

En este caso, solo nos limitamos a modo de ejemplo, a señalar el Tí­tulo de la página, como veremos a continuación:

<html>

 <head>

  <title> Tí­tulo de la página web </title>

 </head>

</html>

Después de señalar el nombre de la página web dentro de la etiqueta <head> junto a su correspondiente cierre, procedemos a estructurar la etiqueta "Body", la cual significa "cuerpo", esto es el contenido visual del sitio web, es decir, todo lo que podemos ver en el sitio.

Aquí­ podemos añadir un Tí­tulo visible en H1, que generalmente se muestra más resaltado que otros tí­tulos visuales. También podemos añadir párrafos de texto dentro de la etiqueta <p>, como veremos en el siguiente ejemplo:

<html>

 <head>

 <title> Tí­tulo de la página web </title>

 </head>

<body>

<h1> Titular de la página principal </h1>

<p> Esto es un párrafo. </p>

</body>

</html>

Atributos de la etiqueta HTML

Los atributos te permiten personalizar una etiqueta, y se indican dentro de la etiqueta de apertura, por ejemplo:

<img src=”image1.jpg”>

A los atributos frecuentemente se les asigna un valor con el signo de igualdad, como:

width=”50%”

La mayorí­a de los atributos son opcionales para una gran parte de las etiquetas, y solo se usan cuando se desea cambiar algo sobre la forma establecida en la que navegador muestra una etiqueta dentro de la página web.

Sin embargo, algunas etiquetas, como la <img> etiqueta (etiqueta de imagen), han requerido atributos tales como srcy alt que son necesarios para que el navegador muestre la página web correctamente.

Ejemplos de códigos HTML básicos

Ahora te mostramos varios ejemplos de un archivo HTML básico, que contiene todas las etiquetas esenciales. Puedes copiar el código a continuación, pegarlo en tu editor de preferencia y guardarlo como mypage.html para iniciar tu propia página web.

Etiquetas para el Encabezado

Los encabezados pueden ser uno de los códigos más fáciles de aprender y además, componen una de las etiquetas más importantes para trabajar el SEO de nuestra página web en los buscadores.

Hay seis tipos diferentes, como se veremos a continuación. Para crear un encabezado, simplemente ajusta tu texto dentro de las etiquetas de encabezado que hayas seleccionado de acuerdo a tu contenido, así­:

<h1> Encabezado 1 </h1>

<h2> Encabezado 2 </h2>

<h3> Encabezado 3 </h3>

Y así­ sucesivamente...

Etiquetas para añadir párrafos

Como es de esperar, cada uno de los encabezados contiene sus correspondientes párrafos, así­ como el que estás leyendo ahora mismo. Solo debes añadirlo dentro de la etiqueta <p>.

Recuerda que no debe quedar abierta, es decir, debemos cerrarla así­: </p>.

<p> Párrafo </p>

Se muestra: Párrafo.

Etiquetas para mostrar enlaces

Nuestro sitio web podrí­a no obtener mucha importancia, si antes no añadimos enlaces o links hacia otros sitios web.

Para vincular nuestros contenidos, debemos usar la etiqueta <a>, junto a la frase o palabra que contendrá el ví­nculo, la palabra href indica la dirección del sitio web de destino a la que desea que vaya tu ví­nculo, así­:

<a href=”https://www.nibiru.com/blog/”> ¡Visitemos el increí­ble Blog de Nibiru! </a>

Y se muestra así­:

¡Visitemos el increí­ble Blog de Nibiru!

Etiquetas para los saltos de lí­neas

Como mencionamos anteriormente, los saltos de lí­neas no necesitan una etiqueta de cierre, ya que indican un espacio vací­o dentro del texto. Un salto de lí­nea es esencialmente un espacio añadido entre dos lí­neas de texto, y lo creamos con la etiqueta <br>.

<p> Colocamos un salto de lí­nea debajo de esta oración.

<br>

Colocamos un salto de lí­nea sobre esta frase. </p>

Etiquetas para las imágenes

Ningún artí­culo que mostremos en nuestra página web debe publicarse sin al menos, una imagen. De hecho, las imágenes son componentes altamente atractivos para atraer a nuevos lectores hacia nuestros contenidos.

<img src = ” https://cdn.pixabay.com/photo/2016/02/10/16/37/cat-1192026_960_720.jpg” alt = “Cute Kitty” style = “width: 500px; height: 555px;”>

Debido a que la etiqueta de imagen solo posee atributos, no es necesario cerrarla. Los atributos de este elemento incluyen “src” o URL de imagen. Es importante añadir el tí­tulo de la imagen, para optimizar el SEO de dicha imagen, así­ como las propiedades visuales (estilo): ancho y alto que se muestran.

Etiquetas de listas organizadas en números

Para finalizar, mencionaremos la etiqueta para crear listas ordenadas dentro de nuestro contenido web. Las listas organizadas son presentadas con números en el orden correcto.

Para crear códigos de listas, usaremos la etiqueta <ol> que es la “lista ordenada” completa, mientras que <li> es cada uno de los “elementos de lista”. Puedes incluir tantos elementos de lista como necesites. Así­:

<ol>

<li> Primer í­tem </li>

<li> Segundo í­tem </li>

<li> Tercer í­tem </li>

</ol>

Etiquetas para listas desordenadas en viñetas

Solo necesitamos cambiar el nombre de la etiqueta para indicar la creación de una lista desordenada, que no es más que una lista sin orden, pero dividida en viñetas. El nombre de esta etiqueta es <ul>.

<ul>

<li> Primer í­tem </li>

<li> Segundo í­tem </li>

<li> Tercer í­tem </li>

</ul>

Por el momento eso es todo sobre el mundo de los códigos HTML. ¿Qué te han parecido estos ejemplos? Cuéntanos, te leemos.

¿Necesitas un web hosting profesional y de confianza?

¡Obtén tu dominio y correo electrónico propio!