Sin un poco de HTML es imposible triunfar con WordPress

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

Las siglas HTML corresponden a HyperText Markup Language.

Conocer un poco de HTML es de gran utilidad si administramos una página en WordPress, ya que nos permite leer el código de los contenidos que publicaremos y hacer pequeños ajustes si es necesario.

Instrucciones en HTML que deberías conocer

Veamos algunas instrucciones comunes que son muy útiles a la hora de escribir artículos en WordPress y en general para ir por la vida online por decirlo de forma campechana.

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

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> Lo que queda dentro de las etiquetas entonces constituye un texto en forma de párrafo.

Por otro lado algunas etiquetas se acompañan de atributos, que especifican detalles y características de la instrucción original. Por ejemplo la etiqueta <video> se puede completar con los atributos autoplay, controls, loop y otras más. A algunas etiquetas también les podemos añadir estilos.

Para empezar veamos las partes del cuerpo de un documento típico programado con HTML

En líneas generales se puede afirmar que una pagina web, al igual que sucedía en papel, consta de tres partes definidas que son cabeza, cuerpo y pie.

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 por ejemplo.

Etiquetas para definir títulos

En el editor de WordPress tenemos un desplegable para marcar textos como títulos y en base a su importancia tenemos Título 1, Título 2, etc…

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

En HTML 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.

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

Vamos a traducir 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 <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.

<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, lefet, center y justify.

Listas numeradas o sin numerar

Al trabajar con textos en un post o artículo aveces nos surge la necesidad de hacer una lista, no necesariamente numerada. Esto en HTML 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> .

Vamos a ver un ejemplo:

<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.

Poner un enlace o link en el texto

Los links o enlaces entre páginas webs son uno de los mayores logros de internet. Veamos la forma de poner un enlace con HTML. La instrucción principal es . Entre la etiquetas <a> y hasta que se cierra con </a> va a parecer el texto con el enlace. La dirección del link es un atributo que especificamos con href=”direccion-web.

La cosa quedaría así:

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

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

<a href=”direccion-web” target=”_blank”>El texto que va a quedar enlazado</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 sabemnos que se llaman atributos. Con ellos damos las indicaciones precisas acerca de qué foto cargar y las medidas con las que debe aparecer en el navegador.

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

En el ejemplo anterior cargamos una foto de 42×42 pixels de tamaño. La dirección de la foto entre comillas la sustituimos por la localización en nuestra biblioteca de medios. Podría ser parecido a eltallerdewordpress.files.wordpress.com/2017/10/screenshot-www-host-fusion-com-2017-10-16-13-59-42-957.png

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.

Anuncios

Curso de WordPress en Casa Golferichs

Está en marcha nueva edición del curso de WordPress que esta vez imparto en Casa Golferichs. Después de las primeras sesiones llega el momento de compartir aquí algunos de los proyectos de los alumnos para poder comentarlos en el aula y trastear un poco. Entre todos y compartiendo aprendemos más.

Casa Golferichs de Barcelona

Casa Golferichs de Barcelona

Proyectos del Taller de WordPress

Cambiar la apariencia del blog. Plantillas o Themes para WordPress

Una de las gracias que tiene el sistema WordPress es que uno puede diseñar, o mejor dicho encontrar, el estilo gráfico que más se ajusta a su proyecto y plasmarlo sin mucho esfuerzo. No hace falta saber demasiado de estilos, diseño online o photoshop, podemos personalizar nuestro blog en base a nuestro propio gusto en pocos pasos.

¿Cómo cambio y ajusto el diseño de mi blog?

Adaptar la apariencia de un blog lo hacemos ayudados principalmente por las plantillas, o themes en inglés. Independientemente del contenido, un blog en WordPress siempre lleva asociado una plantilla determinada, que podremos sustituir según nuestro antojo. Para ello basta seleccionar una de las opciones que se nos ofrecen en la sección de “Apariencia / Temas“.

Sigue leyendo