Nociones básicas de HTML para triunfar con WordPress

Conocer un poco de HTML es de gran utilidad si administramos una página en WordPress, ya que nos permite leer y entender el código de los contenidos que publicamos y hacer pequeños ajustes si es necesario. Tener aunque sea pequeñas nociones de HTML puede resultar muy interesante para editar contenidos en WordPress y moverse con mayor soltura por internet.

La base de programación sobre la que se sustenta WordPress está codificada con el lenguaje PHP, pero hay otro lenguaje, mucho más sencillo, que nos encontraremos al administrar un proyecto web que es HTML. Hay todavía más lenguajes de programación, por ejemplo el CSS, pero de momento no lo vamos a tratar y nos centraremos en el HTML.

Para empezar, veamos el significado de las siglas. HTML es la abreviación de Hypertext Markup Language.

Instrucciones básicas en HTML que deberías conocer

Veamos algunas instrucciones comunes que son muy útiles a la hora de escribir o editar artículos en WordPress. Vamos a empezar por lo más básico.

El lenguaje en HTML se basa en etiquetas o tags en los que de forma abreviada se dan instrucciones de programación.

Dichas etiquetas se abren y se cierran para dar las órdenes. Si escribimos la etiqueta de párrafo <p> más adelante se debe cerrar añadiendo una barra inclinada a la etiqueta. Sería así: <p> Párrafo </p>. Lo que queda dentro de las etiquetas entonces constituye un texto en forma de párrafo.

Algunas etiquetas se acompañan de atributos, que especifican detalles y características de la instrucción original. Por ejemplo la etiqueta <video> se podría completar con los atributos autoplay, controls, loop y otras más.

A algunas etiquetas también les podemos añadir estilos, lo que nos da la posibilidad de marcar una palabra en negrita o alinear un texto a la derecha por ejemplo.

Resumiendo, en HTML se usan etiquetas que se abren y cierran, y que se pueden modular con atributos y asignarles estilos.

Partes básicas de una página en HTML

En líneas generales se puede afirmar que una pagina web consta de tres partes definidas que son cabeza, cuerpo y pie. Es una analogía de la hoja de papel de toda la vida.

Cada una de estas zonas tiene su expresión o etiqueta en HTML. Así tenemos en la parte superior <head>, en la parte central el <body> y cerrando la zona inferior <footer>. Esto está bien saberlo para luego entender los sitios en los que situamos algunos widgets o el menú de navegación si estamos montando una web en WordPress.

Etiquetas en HTML para definir títulos en tus textos

En el editor de WordPress tenemos un menú desplegable para marcar textos como párrafos o títulos. Según su importancia tenemos la posibilidad de seleccionar Título 1, Título 2, etc…

Traducido a lenguaje HTML cada título tiene su etiqueta equivalente. Título 1 se especifica con <h1> en HTML, Título 2 es <h2>, Título 3 es <h3> y así sucesivamente. No hay que olvidar cerrar la instrucción.

En HTML asignar un título h1 sería así:

<h1>El título de mayor importancia de la web</h1>

Tenemos que usar las etiquetas de título con sentido común, tratando de establecer las jerarquías o importancia relativa de cada parte del texto. Así quedará mejor maquetado y además redundará en un buen posicionamiento de la web ya que la web será más comprensible para los buscadores.

Efectos básicos de texto y su código HTML

Vamos a introducir algunas características básicas del texto con el lenguaje HTML.

Para poner un texto en negrita usaremos <strong>Texto</strong>.

Para poner un texto en cursiva usaremos <em>Texto</em>.

Los párrafos. Ya hemos visto más arriba que se definen con el tag o etiqueta <p>. Vamos a aplicar algunos cambios a un párrafo. Para ello introducimos los estilos. Por ejemplo un párrafo con alineación a la derecha.

Mencionamos el estilo dentro de la instrucción del párrafo y les damos un valor. <p style=”text-align: right;”>

<p style=”text-align: right;”>He aquí todo un bloque de texto que está alineado a la derecha mediante estilos que modifican el párrafo</p>

Las variantes de estilo para la alineación de los párrafos son: right, left, center y justify.

Hacer listas numeradas o sin numerar

Al trabajar con textos en un post o artículo a veces nos surge la necesidad de hacer una lista, no necesariamente numerada. En muchos artículos de blogs el sumario de contenidos es una lista de HTML, y se indica de la siguiente manera.

Lista no numerada de elementos

La instrucción es <ul> de unordered list en inglés. Abrimos y cerramos la lista con su etiqueta y dentro, cada ítem, tiene la instrucción <li>, que significa list item.

Vamos a ver un ejemplo de cómo sería el código:

<ul>
<li>Tomates de la Murcia</li>
<li>Patatas de Granada</li>
<li>Melocotón de Calanda</li>
</ul>

Lista numerada de elementos

Para una lista numerada usamos la etiqueta <ol></ol> equivalente a ordered list en el idioma de Shakespeare, y dentro seguimos el mismo esquema anterior.

<ol>
<li>Leones de Tanzania</li>
<li>Canguros australianos</li>
<li>Osos de los Pirineos</li>
</ol>

Poner un enlace o link en el texto

Los links o enlaces entre páginas webs son uno de los mayores logros de internet desde sus inicios, la energía nuclear del mundo online. Vamos a inspeccionar la anatomía de los links en detalle.

Veamos la forma de poner un enlace con HTML. La instrucción principal para definir un hyperlink es <a>. Entre la etiquetas <a> y hasta que se cierra con </a> va a parecer el texto con el enlace marcado. El texto que se transforma en link se denomina anchor text. La dirección del link es un atributo que especificamos con href=”direccion-web“.

Un enlace se construye de la siguiente manera:

<a href=”direccion-web“>El texto que va a quedar enlazado o anchor text</a>

Otro ejemplo con instrucciones más reales sería así.

<a href=”https://www.danielruiz.info/“>Página web de Daniel Ruiz</a>

Hay varios atributos interesantes que acompañan al tag <a> como por ejemplo el target, que puede tomar varios valores. Uno de ellos (_blank) hace que los links se abran en una nueva pestaña del navegador.

<a href=”direccion-web” target=”_blank”>El texto enlazado que se abre en una pestaña nueva</a>

Etiquetas HTML para insertar una imagen

Si queremos usar una foto o imagen en la web, la etiqueta para referenciar el fichero con el elemento gráfico es <img> más algunas instrucciones extra que ya sabemos que se llaman atributos. Con ellos podemos damos las indicaciones precisas acerca de qué foto cargar y las medidas con las que debe aparecer en el navegador. Los atributos a usar serían src (source o fuente del fichero gráfico) y las medidas de altura y ancho en inglés, height y width.

Veamos un ejemplo.

<img src=”DireccionFotoejemplpo.jpg” height=”42″ width=”42″>

En el ejemplo anterior cargamos una foto de 42×42 pixels de tamaño. La dirección de la foto (src) entre comillas la sustituimos por la localización en nuestra biblioteca de medios. Localizar y apuntar la fuente es automático si usamos el editor de WordPress, ya que nos conecta con la carpeta de medios.

Para saber más de HTML

Hemos visto una pequeña selección de etiquetas en HTML que pueden ser útiles para trabajar con textos en un artículo, poner fotos y links. Si estás trasteando con tu propio blog te puede venir bien. Es sólo una pincelada ya que existen muchas más instrucciones con sus atributos y estilos posibles.

¿Quieres saber más? Navegando por internet existe mucha información sobre lenguaje HTML y trucos para programar. Si tengo que recomendar un sitio, os invito a conocer la web de W3 Schools. Allí encontrarás una excelente fuente de conocimiento con una completa relación de etiquetas, instrucciones de programación y numerosos ejemplos prácticos.