Guía básica de HTML y CSS para WordPress. Entender HTML

Entender HTML es el primer capítulo de La Guía Básica de HTML y CSS en WordPress.

La Guía Básica de HTML y CSS en WordPress es una serie de 3 tutoriales sobre como modificar y mejorar el código de tu web o blog creado en WordPress. Esta Guía está diseñada para principiantes y no es necesario tener ninguna experiencia previa.

Los contenidos de estos 3 tutoriales son:

  1. Entender HTML. Incluye una Hoja de Etiquetas de referencia de HTML básico para descargar gratuitamente.
  2. Entender CSS. Incluye una Hoja de propiedades de referencia de CSS para descargar gratuitamente.
  3. CSS para WordPress.

Guía básica de HTML y CSS para WordPress. Entender HTML

¿El editor de texto de WordPress te da problemas? ¿te gustaría utilizar algún color especial o tipografía y el editor no te lo permite? En esta guía básica de HTML y CSS te voy a enseñar las herramientas esenciales para que puedas personalizar tus entradas y más elementos de tu blog o web.

Como ya habrás visto, WordPress viene con dos formas de editar las páginas y posts, el editor visual y el editor de texto.

Editor de entradas de WordPress

Ambos editores utilizan el mismo lenguaje de codificación, el HTML (Hyper Text Markup Language), sin embargo, cada uno tiene maneras diferentes de escribir y editar HTML en WordPress.

Para usar WordPress no tienes que aprender HTML, ya que el Editor visual escribe el HTML para ti, aunque no siempre el resultado es el deseado. El Editor visual de WordPress no es perfecto (y en algún momento querrás utilizar un diseño que sea imposible de conseguir con las herramientas estándar que ofrece).
Al contrario ocurre con el Editor de texto, aquí sí que es necesario saber un poco de HTML y CSS para poder formatear el texto, pero esto te ahorrará mucha frustración cuando necesites arreglar algo que el editor visual ha interpretado mal o darle un estilo adicional a tu texto.

Así que, si has decidido aprender HTML y CSS, te diré que empezar a utilizarlos no es tan difícil como parece. Solo tienes que entender una serie de conceptos básicos para comenzar a utilizarlos.

¡Empezamos!

Qué es HTML y CSS

Pero, ¿realmente que son exactamente HTML y CSS?

HTML y CSS son lenguajes de programación de web. Son dos lenguajes separados, pero que trabajan juntos.

HTML significa Hyper Text Markup Language ( o lo que es lo mismo, Lenguaje de Marcado de Hipertexto) que, básicamente significa texto interactivo. Es el código que se utiliza para construir la estructura de una página web.

CSS significa Cascading Style Sheet (o lo que es lo mismo, Hojas de Estilo en Cascada), que se utiliza para definir los estilos que formatean la página web.

Como decía antes, ambos lenguajes trabajan juntos. Puedes tener HTML sin CSS (aunque el resultado sería bastante feo!), pero no puede tener CSS sin HTML.

El código CSS se aplica al código HTML.

HTML es el contenido de una página web. CSS es estilo o la apariencia de ese contenido (cómo está situado, los colores que utiliza, la fuente, el tamaño de la letra, etc.).

HTML y CSS deben mantenerse siempre en archivos separados. Aunque hay formas de incluir CSS en un documento HTML, la mejor práctica es mantenerlo en su propio documento separado al que se vincula el documento HTML.

Entender cómo funciona HTML

Aquí vamos a ver el HTML en acción.

Imagina que tienes un documento de Word con tu contenido. Este documento está formateado con títulos y párrafos, listas con viñetas, texto en negrita, etc.

Documento de Word ejemplo

Mira lo que sucede cuando copias y pegas el contenido del documento de Word tal y como está en un documento HTML y cómo se ve en un navegador…

Ejemplo html

El formato se ha perdido, ¿verdad? Entonces, ¿cómo podemos arreglar esto? Pues con etiquetas HTML.
Las etiquetas HTML nos ayudarán a estructurar el contenido de la página.

Y echemos un vistazo a nuestro documento HTML en el navegador de nuevo, ahora con las etiquetas HTML añadidas en:

Ejemplo HTML con etiquetas

Está un poco mejor, ¿verdad?

Los navegadores añaden estilos por defecto a algunas etiquetas

¿Te has dado cuenta de que los títulos son automáticamente más grandes que el resto del texto? ¿Y que los párrafos tienen automáticamente saltos de línea y márgenes añadidos después de ellos? Aunque no hayamos definido de estilo CSS a un documento HTML, el navegador añadirá automáticamente un estilo a ciertos elementos para darle al contenido algún tipo de estructura. Aunque un estilo es mejor que ninguno, todavía tiene un largo camino por recorrer.

¿y qué ocurre si copio y pego el contenido del documento de Word en el Editor de textos de WordPress?

El estilo en WordPress está controlado por la plantilla que utilice tu web o blog. Las plantillas de WordPress tienen un archivo de hoja de estilo CSS (busca un archivo llamado style.css en la carpeta donde se encuentra tu plantilla).

Es por esto que al copiar y pegar el contenido de tu Word en el Editor de textos de WordPress, en un navegador ya veremos correctamente formateado el texto.

Así veríamos el contenido sin etiquetas:
Ejemplo HTML en WordPress
Y así con etiquetas:
Ejemplo HTML en WordPress con etiquetas

Para modificar el estilo de un elemento tienes que, o bien escribir CSS en línea o, si quieres modificar el estilo globalmente para toda la plantilla, editar el archivo styles.css. Esto lo veremos cuando hablemos de CSS.

Nota Importante: No es recomendable personalizar los archivos de plantillas WordPress directamente sin haber hecho previamente una copia de seguridad. (Y para asegurarte de que tus personalizaciones se mantienen en futuras actualizaciones, sería necesario crear un Child Theme. Pero esto ya es un tema más avanzado del que no hablaremos aquí.)

Etiquetas HTML

Ahora vamos a ver cómo funcionan las etiquetas HTML y cómo podemos dar formato a nuestros documentos HTML para que sean visualmente más atractivos e interactivos. Echa un vistazo al documento HTML que creamos anteriormente:

HTML con etiquetas

Date cuenta de que:

  • Las etiquetas rodean cada elemento separado de la página: como los encabezados, los párrafos, la lista, etc.
  • Una etiqueta tiene un bracket de apertura < y un bracket de cierre:>
  • También hay una etiqueta de apertura y una etiqueta de cierre
  • El contenido va entre las etiquetas

Estas son las etiquetas que utilizamos en el ejemplo anterior

Utilizamos las etiquetas H para los encabezados, de los cuales hay seis:

<H1> Título </ h1>
<H2> Subtítulo </ h2>
<H3> Sub-subtítulo </ h3>
y así…

La etiqueta <p> define los párrafos.

La etiqueta <ul> define una lista ordenada (o desordenada) y las etiquetas <li> definen cada elemento de la lista. Si quieres mostrar una lista numerada en su lugar, simplemente utilice <ol> en lugar de <ul>.

La etiqueta  <strong> hace que el texto esté negrita </ ​​strong>.Y la etiqueta <em> en cursiva </em>. Para crear un link o hipervínculo se parece a esto se utiliza la etiqueta <a> de la siguiente manera:

<a href=”http://linkaddress.com/”> El texto de anclaje es el texto visible que se puede hacer clic en un vínculo </a>

 


Y hasta aquí llega la explicación de HTML. El próximo post será sobre el uso de CSS.

Aquí puedes descargarte la hoja de referencia de código HTML básico para que puedas modificar el contenido de tu WordPress.

No hay comentarios para este post

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *