Qué son los comandos HTML: algunos ejemplos

Por Felipe

Publicado en:

El lenguaje de marcado HTML es una de las tecnologías en las que se sustenta el desarrollo y diseño web. Cualquier blog, página web o eCommerce cuenta con código HTML para poder mostrar a los usuarios su contenido y funcionalidades, utilizando para ellos una serie de comandos HTML.

Conocer comandos básicos de HTML es fundamental en la programación web, pues las páginas creadas en este lenguaje permiten conectar con otras tecnologías web importantes como el lenguaje de programación web JavaScript o la hora de estilos CSS.

 

Qué son los comandos HTML

Los comandos HTML son una serie de etiquetas que permiten estructurar y añadir elementos a un sitio web. En el lenguaje HTML existen muchos comandos que son fundamentales para dotar a una web de una arquitectura adecuada, y de añadir aquellos componentes propios de un sitio como imágenes, enlaces, y otros elementos importantes.

Los comandos o etiquetas HTML disponen de una serie de atributos que permiten personalizar o configurar de forma más precisa sus funciones. La mayoría de etiquetas usan un sistema de apertura y cierre, comenzando por definir la etiqueta, siguiendo por su contenido, y finalizando por su cierre, como por ejemplo: <TITLE>Título de la web</TITLE>.

 

Comandos principales de HTML

A continuación, veremos comandos para hacer páginas HTML que son vitales en el desarrollo web, mostrando un ejemplo de cada uno de ellos.

 

Comandos HTML fundamentales

En una página HTML hay una serie de comandos principales o básicos que estructuran todo el contenido. Estos comandos son:

  • <HTML>. Dentro de esta etiqueta se incluye todo el código de una página.
  • <HEAD>. Dentro de la cabecera se incluye información y vinculaciones importantes del sitio, como por ejemplo, el título, la descripción, el código para enlazar con Google Search Console, la definición de scripts…
  • <BODY>. En el body se introduce todo el código HTML de los elementos que se muestran en la web, como tablas, imágenes o enlaces.

Un ejemplo básico de estructura web sería el siguiente:

<HTML>

<HEAD>

título de la web, descripción…

</HEAD>

<BODY>

imágenes, tablas, enlaces…

</BODY>

</HTML>

Comandos HTML para enlaces e imágenes

Los enlaces e imágenes son dos elementos básicos en cualquier sitio web. Los comandos HTML que utilizan para insertarlos son <A HREF> y <IMG>. Veamos ejemplos de ambos:

<a href = “URL del enlace”>texto del enlace</a>. Para implementar un enlace HTML.

<img src = “URL de la imagen”>. Para insertar una imagen en HTML.

<a href = “URL del enlace”><img src = “URL de la imagen”></a>. Para insertar una imagen con un enlace.

 

Comandos de HTML para colores y fuentes

Las fuentes de texto y colores en HTML se introducen con una serie de comandos, aunque lo habitual en el desarrollo web moderno, es dejar la programación de ambos al CSS relacionado.

Para indicar el color con comandos de HTML hay que introducir el atributo COLOR dentro del comando FONT: <font color = ” red”>Texto en color rojo</font>.

Para poner un color de fondo al sitio web se debe utilizar el atributo: BGCOLOR: <BODY BGCOLOR = “green”></BODY>.

 

Comandos HTML para crear tablas

Las tablas son elementos muy sencillos de implementar con HTML, y elementos que se utilizan de forma habitual en los sitios web para mostrar datos de forma mucho más fácil de visualizar y comprender por parte de los usuarios.

Veamos un ejemplo de tabla utilizando comandos HTML:

<TABLE BORDER=”2″>

 <TR>

 <TD>Nombre</TD>

 <TD>Apellido</TD>

 </TR>

 <TR>

 <TD>Alejandro</TD>

 <TD>Ramos</TD>

 </TR>

</TABLE>

El comando TABLE abre y cierra la tabla y permite incluir atributos para configurarla (en el caso del ejemplo se asigna un borde de tamaño determinado. El comando TR se utiliza para ir añadiendo las distintas filas o registros de la tabla, mientras que con el comando TD se añaden los datos a las columnas.

 

Comandos HTML para listas

Las listas se utilizan para enumerar datos dentro de un sitio web o de un contenido. Para utilizarlas en HTML se utiliza el comando UL en caso de ser listas con viñetas, o el comando OL en caso de tratarse de listas numeradas:

<UL>

<LI>Dato 1

<LI>Dato 2

<LI>Dato 3

</UL>

<OL>

<LI>Dato 1

<LI>Dato 2

<LI>Dato 3

</OL>

 

Comandos HTML para encabezados

Con los encabezados se puede estructurar el contenido en un sistema jerarquizado que facilita su lectura y comprensión. Además, Google favorece el posicionamiento web de contenido que utilice de forma correcta los encabezados.

Para implementar encabezados en HTML hay que utilizar la etiquetas <H1>, <H2>, <H3>… y así sucesivamente el resto de niveles.

<H1>Título<H1>

<H2>Subtítulo<H2>

 

Hemos visto los comandos principales de HTML para crear un sitio web. Este lenguaje de marcado es la base donde se cimienta el desarrollo web, conectando con otras tecnologías como CSS, JavaScript o PHP.

Conocer los distintos comandos HTML es fundamental para poder desarrollar un sitio web y para poder realizar modificaciones y cambios para optimizarlos.