¿Cómo usar HTML en WordPress?

Domina HTML WordPress

Cuando alguien se embarca en el diseño y desarrollo de su proyecto web en WordPress comienza con la instalación del CMS, la selección del tema o plantilla, implementa algún que otro plugin y poco más. Que llegue la necesidad de personalizar el código HTML WordPress con CSS será cuestión de tiempo pero siempre llega.

Para los que no quieran quedarse en la simple publicación de un post y pretendan crear y editar sus propios elementos web, va destinado este tutorial de HTML WordPress. Que también puede ser una introducción a la programación HTML para otro tipo de páginas web.

¿Cómo personalizar el HTML WordPress?

WordPress viene con varios temas preinstalados entre los que escoger. Unas plantillas muy básicas con las que un principiante poco va a saber qué hacer.

Las soluciones pasan por la compra de un tema premium, con el que aparecerán otro tipo de problemas y cuestiones, o por aprender a personalizar los temas gratuitos de WordPress nosotros mismos. Para cualquiera de las dos opciones es válido este tutorial que te permitirá añadir elementos a cualquier tipo de plantilla, tanto en las entradas como en los widgets.

Temas gratuitos donde programar HTML en WordPress

¿Para qué sirve HTML?

En la creación de contenidos web intervienen entre otros lenguajes mucho más especializados para el desarrollo web dos tipos de código imprescindibles. El lenguaje HTML escribe en un idioma que pueden interpretar los navegadores y el CSS le aplica el estilo que le da su aspecto final.

Sin el uso de CSS HTML coloca los elementos unos debajo de otros, con los tipos de fuente y colores predeterminados por el navegador con el que se accede a la web (Chrome, Firefox, Safari…). Más tarde CSS permite dar la estética, la posición y ciertos comportamientos a los elementos HTML.

Durante la edición de una entrada o página, mientras escribimos de forma natural WordPress genera código HTML en secreto. Podemos acceder a este desde su editor dentro del propio WordPress. Aprenderemos cómo editar ese HTML WordPress para poder personalizar una web por completo.

Vista de los editores visual y HTML WordPress

En la imagen anterior tienes cómo se ve el mismo texto en los dos editores que ofrece el CMS. Escrito a la izquierda en el editor visual y a la derecha su interpretación en el editor HTML WordPress.

¿Qué es HTML WordPress?

HTML WordPress es un término que “he improvisado” para describir las pocas etiquetas HTML que necesitaremos utilizar normalmente en este gestor de contenidos.

HTML es un código, un lenguaje de marcas de hipertexto (HyperText Markup Language) compuesto por etiquetas que definen la estructura de una web. Las etiquetas HTML que formen la página web serán interpretadas más tarde por los navegadores.

El contenido de cada elemento estará definido por dos etiquetas, una de apertura y otra de cierre.

Formato de una etiqueta HTML en WordPress

Para comenzar a aprender HTML WordPress veamos un ejemplo en el que “programaremos” en este orden un titular de tipo 2, un párrafo y un enlace.

<h2>Texto del titular</h2>
<p>Texto de un párrafo</p>
<a href="http://url-de-enlace">Texto del enlace</a>

Esta sintaxis se cumple en todos los casos con excepción de las imágenes <img/>, los saltos de párrafo <br/> y las líneas <hr/> que se abren y cierran en la misma etiqueta.

<img src="url-de-la-imagen"/>
<br/>
<hr/>

En cualquiera de los elementos que tienen etiquetas independientes de apertura y cierre puede anidarse otros en su interior.

Anidado de elementos HTML WordPress

Por ejemplo un párrafo puede contener un enlace:

<p>Este párrafo tiene <a href="url-de-enlace">un enlace</a> en su interior</p>

que daría este resultado en el navegador:

Este párrafo tiene un enlace en su interior

El estándar actual es HTML5 y sus elementos pueden ser contenedores, textos, enlaces, sonidos, vídeos, imágenes…

Usar HTML en WordPress

WordPress nos permite sobrevivir sin necesidad de saber programar HTML, por eso es el gestor de contenidos más popular tanto para un diseñador web especializado o un blogger que se inicia. Para cuando no te conformas con el aspecto predefinido de tu web, WordPress te permite escribir HTML y CSS desde su editor de código.

Aprender a programar HTML en WordPress

Como lo que pretendemos no es ser unos maestros de la programación sino poder gestionar nuestra web, no vamos a andarnos con rodeos y vamos a atacar el tema de forma directa. Vamos a revisar las etiquetas HTML más habituales que vamos a necesitar en WordPress durante la creación de una entrada, también llamada post.

Listado de etiquetas HTML WordPress

Como estamos en proceso de aprendizaje y aunque existen más de 100 etiquetas en el lenguaje HTML, la cantidad que necesitaremos en nuestro caso es limitada. Las que usaremos en WordPress con más frecuencia son las que se enumeran a continuación:

  • <h1> </h1> Título de tipo 1
  • <h2> </h2> Título de tipo 2
  • <h3> </h3> Título de tipo 3
  • <h4> </h4> Título de tipo 4
  • <h5> </h5> Título de tipo 5
  • <h6> </h6> Título de tipo 6
  • <p> </p> Párrafo de texto
  • <strong> </strong> Texto importante en negrita
  • <em> </em> Texto enfatizado en cursiva
  • <span> </span> Texto sin un significado específico
  • <a> </a> Enlace
  • <img/> Imagen
  • <ol> </ol> Lista ordenada
  • <ul> </ul> Lista sin orden
  • <li> </li> Elemento de una lista
  • <hr/> Línea
  • <br/> Salto de párrafo
  • <div> </div> Contenedor genérico sin ningún significado especial
  • <iframe> </iframe> Documento HTML embebido

Títulos

Además de asignar un tamaño de fuente, los títulos estructuran el contenido de la página. Es un error frecuente no tener en cuenta este dato y solo usarse según su tamaño para destacar algún texto.

Para la correcta estructuración de un post solo puede haber un h1. Dentro de este podemos usar los h2 necesarios, que si hiciera falta podrán contener algún h3, que a su vez podrá contener un h4…. así hasta el de tipo h6.

Imagina que en vez de un post estás redactando una noticia para un periódico y tienes toda una página para hablar sobre esa única noticia. Pues para una web es exactamente lo mismo. Tendrás un título general y apartados que desglosarán la información.

Jerarquía de los títulos HTML WordPress en un post

Etiqueta de título h1

Normalmente corresponde al título del post y WordPress lo pone por defecto. Así que en la mayoría de los casos prescindiremos de su uso. Podemos saber si nuestra plantilla lo aplica automáticamente al enunciado revisando el código que lee el navegador.

¿Cómo comprobar que solo tenemos un h1?

Durante la edición del artículo en la vista previa que ofrece la plataforma y clicando Ctrl+U accedemos al código completo de la página en una pestaña nueva. Clica esas dos teclas ahora y verás lo que pasa.

¿Ya lo has hecho? muy bien, desde esa pestaña pulsa las teclas Ctrl+F para que aparezca en la parte superior o inferior (según el navegador) una caja donde introducir un texto que buscar. Te dirá además las veces que se repite.

Escribe <h1. Si solo te aparece 1 ya sabes que tu tema asigna el título del artículo a ese h1. Si no aparece ninguno, serás tú el que tenga que añadirlo al principio y antes de cualquier texto.

Buscar texto en el código HTML de WordPress

En el caso de que aparezcan dos o más h1 puede que hayas asignado ese grado a alguno de tus títulos por accidente y debes modificarlo.

Etiqueta de título h2

Tan importante o más que el h1, el h2 titula los contenidos importantes del artículo, facilitando a los robots que rastrean tu web la comprensión del argumento. Por lo menos uno de ellos deberá contener la palabra clave que queremos posicionar o una semánticamente similar.

Etiqueta de título H3 a H6

Menos importantes que el resto, son los encargados de estructurar de forma lógica el contenido y de guiar al usuario durante la lectura. Google no suele tener muy en cuenta los h5 y h6, así que procura no poner contenido demasiado importante dentro de ellos.

Aspecto de los títulos

Como puedes ver en la imagen inferior, el tamaño, el alto de línea o los márgenes superiores e inferiores predeterminados de los títulos pocas veces nos van a convencer y es muy probable que queramos cambiarlos.

Títulos por defecto en WordPress sin tocar el HTML ni el CSS

Para cambiar el tamaño hay que añadirles estilo CSS. Tienes un completo tutorial para usar CSS en un artículo anterior en el que puedes aprender a implementar CSS en HTML WordPress añadiendo reglas de estilo dentro de las propias etiquetas.

Si no quieres complicarte aprendiendo CSS aquí tienes unos ejemplos de formatos para los títulos, en los que solo variando el tamaño en píxeles puedes apañarte.

Si te fijas la regla está formada por selectores y propiedades dentro del atributo style=”” de la etiqueta HTML.

Sintaxis para añadir estilo en línea al HTML WordPress

En HTML para modificar varias propiedades de una misma etiqueta lo escribiríamos así:

<h2 style="font-size:37px; line-height:45px; margin-top:5px; margin-bottom:16px; text-transform:uppercase">Titular h2</h2>

Ejercicio: ¿Cómo personalizar los títulos de WordPress?

Antes de hacer la práctica debes saber que aunque los colores en CSS suelen asignarse en hexadecimal o rgb, ahora para hacerlo más fácil usaremos nombres reconocibles por humanos. Te dejo una página donde tienes las equivalencias de nombres y colores.

Nombre de algunos colores HTML que puedes usar en WordPress

Para practicar puedes abrir el editor HTML de WordPress. Solo tienes que copiar el siguiente código en tu página y cambiar los valores en píxeles para las propiedades y los nombres para los colores.

<h1 style="font-size:43px; line-height:50px; margin-top:5px; margin-bottom:18px; color:darkslategray">Titular h1</h1>
<h2 style="font-size:37px; line-height:45px; margin-top:5px; margin-bottom:16px; color:dimgray">Titular h2</h2>
<h3 style="font-size:33px; line-height:40px; margin-top:5px; margin-bottom:12px; color:silver">Titular h3</h3>
<h4 style="font-size:28px; line-height:35px; margin-top:5px; margin-bottom:12px; color:orangered">Titular h4</h4>
<h5 style="font-size:23px; line-height:29px; margin-top:5px; margin-bottom:10px; color:orange">Titular h5</h5>
<h6 style="font-size:20px; line-height:25px; margin-top:5px; margin-bottom:10px; color:gold">Titular h6</h6>

Si ejecutas la pagina en el navegador este será el resultado del código anterior, que en función de tus cambios podrá variar.
Manipular títulos HTML WordPress

Párrafos

Vienen definidos por las etiquetas <p> </p>. Los textos introducidos desde el editor visual serán interpretados como párrafos por el navegador. Al escribir párrafos WordPress no les añade etiquetas de apertura y cierre, mientras que a otros elementos si se las asigna (tal vez por facilitar la lectura y escritura del código).

Si que pondrá etiquetas de apertura y cierre cuando le asignemos algún tipo de estilo desde la barra de herramientas del editor visual (izquierda de la imagen), como puedes comprobar en la imagen donde se ha centrado uno de los párrafos desde el icono centrar texto. Aunque los dos textos son párrafos, solo al centrado se la ha asignado una etiqueta (derecha de la imagen).

Etiqueta HTML automática en WordPress

Evidentemente cuando nosotros queramos añadir un estilo al párrafo si que deberemos crear las etiquetas de apertura y cierre para insertar dentro la regla CSS.

Ejercicio: ¿Cómo personalizar párrafos HTML en WordPress?

Puedes practicar con algunos ejemplos de párrafo para dar un estilo diferente al que viene por defecto. Puedes copiar y pegar el código cambiando las medidas a tu gusto. Trabaja desde el editor de código de WordPress y cámbiales también el color.

<p style="font-size:24px; line-height:31px; margin-top:5px; margin-bottom:18px;">Párrafo con letras más grandes</p>
<p style="font-size:18px; line-height:26px; margin-top:5px; margin-bottom:17px;">Texto de tamaño mediano</p>
<p style="font-size:14px; line-height:21px; margin-top:5px; margin-bottom:16px;">Fragmento de texto más pequeño</p>

El resultado obtenido con el código anterior sin tus cambios será:

Párrafo con letras más grandes

Texto de tamaño mediano

Fragmento de texto más pequeño

Negrita

Para dar importancia a una palabra o a un grupo de ellas usaremos las negritas. Desde el editor visual de WordPress clicaremos sobre el icono  y desde el editor HTML introduciremos el texto dentro de las etiquetas <strong> </strong>.

Código y resultado:

<p>Párrafo con <strong>palabras en negrita</strong> y el resto normal</p>

Párrafo con palabras en negrita y el resto normal.

Cursiva

En los textos con énfasis o para destacar una palabra como especial por ser en otro idioma por ejemplo, usaremos las cursivas. Desde el editor visual usaremos el icono   y desde el editor de código la etiqueta <em> </em> con el texto en el interior.

Código y resultado:

<p>Párrafo con <strong>palabras en cursiva</strong> y el resto normal</p>

Párrafo con palabras en cursiva y el resto normal.

Por supuesto tenemos la opción de que un texto sea negrita y cursiva al mismo tiempo. Prueba tú mismo copiando este código y ejecutándolo en el navegador.

<p>Párrafo con <strong>palabras en negrita y <em>cursiva</em></strong> y el resto normal</p>

Por si no te lo has planteado, debes saber que tanto las negritas como las cursivas se pueden modificar. Como en el caso de los párrafos puedes cambiar sus propiedades dentro de su etiqueta:

<p>Párrafo con <strong style="color:green">palabras en negrita y <em>cursiva coloreadas</em></strong> y el resto normal</p>

Párrafo con palabras en negrita y cursiva coloreadas y el resto normal.

Span

Aunque sus usos son variados, en nuestro código HTML WordPress lo veremos aplicado al colorear textos desde el editor visual mediante el icono A  que asignará color a un párrafo.

Hemos aprendido que desde la etiqueta <p> se puede cambiar el color a uno de los párrafos, pero el uso de <span> te va a permitir cambiar el estilo a una parte del texto.

Código y resultado:

<p>Párrafo de color predeterminado <span style="color:green;">con parte de color verde</span> y el resto igual que al principio</p>

Párrafo de color predeterminado con parte de color verde y el resto igual que al principio

Recibe nuevos artículos mensualmente

y aprende más sobre los temas que te interesan directamente desde la bandeja de entrada de tu correo electrónico.

Enlaces

Podemos crear enlaces simplemente desde el editor visual mediante el icono   con el texto a enlazar seleccionado, que se convertirá en el anchor text. Pero si lo hacemos desde el editor de HTML de WordPress además podremos añadirle atributos, por ejemplo que se abra en una pestaña diferente, que no sea rastreado por los robots de google o que directamente se descargue un archivo enlazado.

<a href="http://dominio.es/archivo-enlazado" target="_blank">Enlace que se abre en una pestaña nueva</a>
<a href="http://dominio.es/archivo-enlazado" rel="nofollow">El enlace no será seguido por los robots de Google</a>
<a href="http://dominio.es/archivo-enlazado" download>El enlace hará la función de botón de descarga directa</a>

Podemos enlazar el anchor text (texto del enlace) a una página interna, una externa, un pdf, una imagen, etc. Y por supuesto también podemos asignarle tamaño y otras propiedades vistas en anteriores ejemplos.

Ejercicio: Crea un enlace HTML en WordPress

Tú solo/a y siguiendo las referencias de código que se muestran arriba, crea un enlace desde el editor HTML que apunte a una imagen de internet y que además se abra en una pestaña nueva.

Recuerda que al ser una foto la url deberá terminar con una extensión de imagen (.jpg o .png). Una url de ejemplo sería: “http://undominio.es/imagen-a-mostrar.jpg”.

Ejercicio: ¿Cómo crear un botón HTML?

En el siguiente ejercicio vamos a crear nuestro primer botón, un elemento que seguro necesitaremos a menudo en nuestra web.

Partiremos de un enlace al que le añadiremos un color de fondo y otras propiedades para darle el aspecto de botón.

<a href="http://url-enlazada" style="background-color:cornflowerblue;border:1px solid royalblue;display:inline-block;cursor:pointer;color:white;font-size:20px;font-weight:bold;padding:17px 54px;text-decoration:none;text-shadow:0px 2px 0px midnightblue;">BOTÓN</a>

Añade este código a tu entrada de prueba y tendrás un resultado como este:
BOTÓN

Te recomiendo que hagas varias pruebas cambiando todos los colores posibles: fondo, texto, sombra… aprender HTML con o sin WordPress se basa en la repetición y en la práctica.

Para cambiar el estilo cuando ponemos el cursor sobre el botón será necesario trabajar con un archivo CSS externo creando una regla con el selector :hover. Este tema está explicado en profundidad en la 4ª parte del tutorial de CSS enlazado anteriormente.

Imagen

La etiqueta <img/> es de las pocas de HTML que se abre y se cierra en una sola. La barra ( / ) de cierre se coloca al final.

El botón de Añadir objeto del editor visual es muy goloso y muy cómodo de usar, pero si insertas una imagen con ese método siempre comprueba que dispone de atributos. Las fotos tienen gran relevancia para el posicionamiento y dan valor al contenido, por lo que hay que optimizar las imágenes antes de subirlas a WordPress y deben tener los atributos title, alt, with y height.

<img src="http://dominio.es/imagen.jpg" title="título de la imagen" alt="Texto alternativo de la imagen" width="900" height="400"/a>

Al subir imágenes a una web, siempre debes hacerlo con el tamaño adecuado porque todo el trabajo que no hagas tú lo tendrá que hacer el navegador mientras abre tu página. Cosa que afectará al tiempo de carga de la web.

Puedes añadir fotos a tus artículos como imágenes (<img/>) o como fondos con la propiedad background de CSS, de la que veremos un ejemplo un poco más adelante.

Ejercicio: ¿Cómo cambiar el tamaño visualización de una imagen en HTML?

Los atributos width y height de una imagen, indican con que tamaño debe mostrarse. Cuando vas a añadir una imagen a un post WordPress te deja decidir el tamaño. Una vez insertada también puedes modificarlo desde HTML.

Sube una imagen a WordPress de 900px x 600px e insértala en tu artículo desde el editor visual. Si compruebas el editor HTML verás que el código se parece mucho al que te he mostrado hace un momento. Copia ese código y pégalo justo debajo del anterior para tener dos imágenes iguales y del mismo tamaño.

Ahora cambia las medidas de ancho y alto de una de ellas por estas otras 450px x 300px.

Cambiar tamaño de visualización de una imagen desde HTML en WordPress

Aunque te recuerdo que lo más adecuado es subir las imágenes directamente con el tamaño que se van a mostrar en la página.

Imagen banner diseño web valencia

¿Hacemos juntos tu

Página web?

Te ofrezco un diseño web y un desarrollo de la página a la medida de tus necesidades.

Solicitar un Presupuesto!

Listas

Las listas enumeran elementos y se pueden crear desde el editor visual con los iconos   y  , según sean ordenadas o desordenadas. Estas listas no mostrarán ningún contenido hasta que no les añadas como mínimo un elemento de lista <li> </li>.

Lista ordenada

La lista ordenada se representa con la etiqueta <ol> </ol> y mostrará a los elementos ordenados de forma numérica o alfabética.

Código y resultado de lista ordenada por orden numérico:

<ol>
<li>Primer elemento de la lista ordenada por números</li>
<li>Segundo elemento de la lista ordenada por números</li>
<li>Tercer elemento de la lista ordenada por números</li>
</ol>
  1. Primer elemento de la lista ordenada por números
  2. Segundo elemento de la lista ordenada por números
  3. Tercer elemento de la lista ordenada por números

Código y resultado de lista ordenada alfabéticamente:

<ol type="A">
<li>Primer elemento de la lista ordenada por letras</li>
<li>Segundo elemento de la lista ordenada por letras</li>
<li>Tercer elemento de la lista ordenada por letras</li>
</ol>
  1. Primer elemento de la lista ordenada por letras
  2. Segundo elemento de la lista ordenada por letras
  3. Tercer elemento de la lista ordenada por letras

Lista desordenada

La lista desordenada representada en HTML por <ul> </ul>, mostrará los elementos que la compongan sin ningún orden jerárquico.

Código y resultado de lista desordenada:

<ul>
<li>Primer elemento de la lista desordenada</li>
<li>Segundo elemento de la lista desordenada</li>
<li>Tercer elemento de la lista desordenada</li>
</ul>
  • Primer elemento de la lista desordenada
  • Segundo elemento de la lista desordenada
  • Tercer elemento de la lista desordenada

Las viñetas o caracteres especiales que marcan el inicio de un nuevo elementos pueden modificarse con la propiedad CSS list-style-type.

<ul style="list-style-type:square">
<li>Primer elemento de la lista desordenada</li>
<li>Segundo elemento de la lista desordenada</li>
<li>Tercer elemento de la lista desordenada</li>
</ul>
  • Primer elemento de la lista desordenada
  • Segundo elemento de la lista desordenada
  • Tercer elemento de la lista desordenada

Elementos de un lista

Los elementos que conforman las listas vienen definidos por <li> </li>. A esta etiqueta también se le puede aplicar el atributo list-style-type, pudiendo crear estilos personalizados para cada uno de los elementos de una lista.

<ul>
<li>Primer elemento de la lista desordenada con la viñeta por defecto</li>
<li style="list-style-type:square">Segundo elemento de la lista desordenada con la viñeta cuadrada</li>
<li style="list-style-type:circle">Tercer elemento de la lista desordenada con la viñeta circular</li>
</ul>
  • Primer elemento de la lista desordenada con la viñeta por defecto
  • Segundo elemento de la lista desordenada con la viñeta cuadrada
  • Tercer elemento de la lista desordenada con la viñeta circular

Ejercicio: Crear una lista anidada en otra.

Pongamos que necesitas publicar una receta en tu blog de cocina. En el artículo además del proceso deberás enumerar los ingredientes. Además en el ejercicio vamos a hacer que cada lista sea de un color diferente, y para complicarlo una de las listas será ordenada y la otra desordenada.

  • Carne picada
  • Pasta
  • Verdura:
    1. Tomate pelado
    2. 1 diente de ajo
    3. Pimiento rojo
  • Pimienta
  • Sal

Para resolver la situación deberás anidar la segunda lista dentro de uno de los elementos <li> </li>:

<ul style="color:dimgrey;">
<li>Carne picada</li>
<li>Pasta</li>
<li>Verdura:
<ol style="color:cadetblue;">
<li>Tomate pelado</li>
<li>1 diente de ajo</li>
<li>Pimiento rojo</li>
</ol>
</li>
<li>Pimienta</li>
<li>Sal</li>
</ul>

Línea

<hr/> es la etiqueta que representa a una línea. Las propiedades CSS que puedes necesitar para modificarla son el margin, border y width. En ocasiones la verás sin la barra de cierre, pero siempre es recomendable añadirla. Este elemento que no puede crearse desde el editor visual tendrá un ancho por defecto del 100% de la pantalla.

<hr style="width:50%; border:2px solid"/>
<hr style="border:2px solid silver;"/>
<hr style="border:2px solid orange; margin-top:50px"/>



Salto de párrafo

Aunque los elementos HTML suelen colocarse uno debajo de otros, debido al comportamiento del propio elemento o al estilo aplicado desde el archivo externo, pueden mostrarse uno al lado de otro. <br/> fuerza un salto de línea obligando al siguiente elemento a ponerse debajo. Este elemento tampoco puede crearse desde el editor visual.

Sin el salto de párrafo <br/> los enlaces consecutivos se mostrarán en la misma línea uno junto otro.

<a href="http://dominio.es/archivo-enlazado">Primer enlace</a>
<a href="http://dominio.es/archivo-enlazado">Segundo enlace</a>
<a href="http://dominio.es/archivo-enlazado">Tercer enlace</a>
Primer enlace Segundo enlace Tercer enlace

Pero si añadimos el salto de párrafo <br/> la disposición de los enlaces será uno debajo de otro sin necesidad de meterlos en una lista.

<a href="http://dominio.es/archivo-enlazado">Primer enlace</a>
<br/>
<a href="http://dominio.es/archivo-enlazado">Segundo enlace</a>
<br/>
<a href="http://dominio.es/archivo-enlazado">Tercer enlace</a>
Primer enlace
Segundo enlace
Tercer enlace

Div

Un <div> </div> es un elemento que tampoco puede crearse desde el editor visual. Es un contenedor usado para agrupar bloques de contenido o secciones de una página y que permite dar estilos globales a los elementos que contiene.

Podemos colorear el contenedor y además asignar estilo a los elementos contenidos. En el ejemplo vamos a colorear un párrafo asignándole estilo desde su contenedor.

<div style="background:#484848; padding:25px 15px; text-align:center; font-size:25px; color:white;">
<p style="margin:0;">Texto centrado y coloreado en un div</p>
</div>

Texto centrado y coloreado en un div

O podemos anidarlos para crear efectos más visuales, por ejemplo añadiendo una imagen de fondo al contenedor general:

<div style="background:url('url-de-imagen.jpg'); background-position:center; padding:40px;">
<div style="background: rgba(250,250,250,0.7);  margin-bottom:0; padding:25px 15px; text-align:center; font-size:20px; color:#484848;">
<p style="margin: 0;">Texto centrado y coloreado en un div con imagen de fondo</p>
</div>
</div>

Texto centrado y coloreado en un div con imagen de fondo

Los <div> son por defecto transparentes, y si no tiene implementadas propiedades como ancho, alto y background será totalmente invisibles.

Iframe

Un <iframe> </iframe> se usa para insertar parte de otra web dentro del documento actual. Suele utilizarse para la implementación de mapas o vídeos, y normalmente el código nos lo ofrecerá el propio YouTube o Google Maps.

<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2215.468336455406!2d-74.04575539414306!3d40.689613390861105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sEstatua+de+la+Libertad!5e1!3m2!1ses!2ses!4v1488975981906" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Cómo crear un banner en HTML WordPress

Para finalizar el tutorial de HTML WordPress vamos a realizar una práctica en la que vamos a crear un banner que perfectamente podría estar en una página web.

Crear un banner con HTML en WordPress

Vamos a revisar el código básico que necesitamos, aunque luego añadiremos algo más:

  • Un <div>  que contiene a todo el conjunto.
  • Otro <div>  que forma el borde blanco y que a su vez contiene al texto.
  • Un título <h2> para la marca.
  • Un título <h3> para el eslogan.
  • Un enlace que apunte a tu web.

Como por sí solo HTML no aplica comportamientos a los elementos, recurriremos a CSS en línea como hemos hecho en los ejemplos anteriores. Te lo voy a ir contando paso a paso para que lo puedas hacer por tu cuenta y al final mostraré el código completo.

Paso 1: preparar la imagen de fondo

Antes de nada optimiza una imagen de 900px x 600px y súbela a WordPress. Recuerda añadir un título y un texto alternativo cuando lo hagas.

Paso 2: crear los contenedores

En este paso vamos a crear un contenedor (div) que englobe a todos los demás elementos, y otro más en su interior que quedará transparente y que usaremos para añadir el borde blanco.

Dentro de la etiqueta del primer div añadimos estilo:

  • padding: 10px; Que nos dejará un espacio de relleno entre este elemento y el siguiente.
  • max-width: 800px; Como vamos a hacerlo responsive, le decimos que como mucho tenga 800px de ancho.
  • background: url(‘tu-imagen.jpg’); Tu imagen la insertaremos como fondo.
  • background-position: center; Para que la imagen de fondo quede centrada.
  • text-align: center; Esta instrucción centrará todos los textos que pongamos después.

Dentro del segundo div asignamos el estilo:

  • border: 2px solid white; Que creará el borde blanco.

En este momento si ejecutas el código te quedará así:

Div sin contenido HTML WordPress

Paso 3: introducir el texto

Dentro del div que tiene el borde blanco introducimos las etiquetas para un título h2, un h3 y un párrafo. Escribe el código y ejecútalo.

Aún no hemos dado estilo al texto HTML WordPress

Como no hemos dado estilo a las etiquetas, de momento se verá con los colores y tamaños que tenga tu WordPress por defecto.

Paso 4: dar estilo CSS al texto

El estilo para los distintos elementos será:

Para el título h2

  • font-weight: normal; Dará grosor al texto.
  • letter-spacing: 3px; Deja más espacio entre letras.
  • color: white; Pinta el texto de color blanco.
  • font-size: 50px; Tamaño del texto.
  • line-heigth: 56px; Espacio que ocupa el texto en altura.
  • margin-bottom: 10px; Margen inferior
  • border: 3px solid white; Tamaño , tipo y color del borde.
  • display: inline-block; Le da al h2 solo la medida del texto (si no, su borde ocuparía el total del ancho).
  • padding: 10px 30px 15px 30px; Relleno arriba, derecha, abajo e izquierda.

Para el título h3

  • color: white; Colorea el texto.
  • font-size: 24px; Tamaño del texto.
  • font-weight: normal; Grosor de las letras.
  • letter-spacing: 2px; Espacio entre letras.
  • margin-bottom: 10px; Margen inferior del texto.

Para el párrafo

  • margin-bottom: 30px; Margen inferior.
  • letter-spacing: 1px; Espacio entre letras.

Si ejecutas la página observarás que casi lo tenemos. Nos falta que el párrafo sea de otro color y además lo queremos en cursiva. Por otro lado queremos un enlace a nuestra web ¿no es así?

Paso 5: añadir un enlace al banner

En lo que hasta ahora solo era un párrafo vamos a meter un enlace. Toda esta vuelta para meter el enlace al final ha sido para insistir que se puede anidar elementos dentro de otros.

Entre las dos etiquetas que forman el párrafo mete el siguiente código. Si tenías un texto puedes sobrescribirlo.

<a href="http://enlace-a-tu-web" style="color:white; margin-bottom:15px;text-decoration:none;font-weight:bold;font-size:25px;"><em>www.tuweb.es</em></a>

¡Ya lo tienes! Además si encojes el navegador, verás que se adapta a la pantalla porque es responsive.
Has creado un banner responsive con HTML en WordPress
Aunque no lo creo, por si te has perdido te muestro el código completo:

<div style="padding:10px;max-width:800px;background:url('tu-foto.jpg');background-position:center;text-align:center;">
<div style="border:2px solid white;">
<h2 style="font-weight:normal;letter-spacing:3px;color:white;font-size:50px;line-heigth:56px;margin-bottom:10px;border:3px solid white;display:inline-block;padding:10px 30px 15px  30px;">TU FOTO</h2>
<h3 style="color:white;font-size:24px;font-weight:normal;letter-spacing:2px;margin-bottom:10px;">BODAS BAUTIZOS Y COMUNIONES</h3>
<p style="margin-bottom:30px;letter-spacing:1px;"><a href="http://enlace-a-tu-web" style="color:white; margin-bottom:15px;text-decoration:none;font-weight:bold;font-size:25px;"><em>www.tuweb.es</em></a></p>
</div>
</div>

Hasta aquí hemos llegado con nuestra iniciación a HTML WordPress, ahora es el momento en que debes aplicar lo estudiado en tu página web o blog.

Ya sabes que si se te ha quedado algo en el tintero no tienes más que escribir un comentario con tus dudas. Estaré encantado de resolverlas.

Si te ha gustado comparte

Más sobre el autor

Ernesto Barrachina

¿Quieres ver mi biografía?

Aunque soy escultor y modelista de profesión, a los 40 decidí adaptar mis herramientas de trabajo. Un teclado y un ratón han sustituido a la arcilla, la silicona o al poliéster. Ahora me dedico al diseño web Valencia y el desarrollo de tu página web o de la imagen de tu marca pueden ser nuestro próximo proyecto.

¿Lo hacemos?

Siguiente
Anterior

4 Comentarios en “¿Cómo usar HTML en WordPress?”

  1. Hola Ernesto,

    Completísima Máster Class de como usar el código HTML en WordPress.

    Te parecerá curioso como he llegado hasta el artículo, pues me lo han puesto de ejemplo para ampliar información sobre la utilización de las etiquetas y de cómo personalizar el código HTML, en el curso SEO que he empezado esta semana

    Cuando lo he visto he pensado… Que grande!!

    Un Saludo y en breve te respondo a la consulta que nos quedó pendiente sobre la tabla de contenidos 😉

    1. Jajajaj, no me digas Manuel 😉

      La intención al escribir el post sobre HTML WordPress no era llegar tan lejos, pero la verdad es que estas cosas animan a continuar escribiendo. Espero que realmente os sirva de ayuda.

      Muchas gracias por tu comentario, y sobre todo dale las gracias al profesor o profesora por seleccionar este artículo para sus clases.

  2. Hola me gustaria saber de que manera en html puedo hacer el punto de subir archivo de un formularia sea mas pequeño y se pueda ajustar a la pantalla de moviles, estoy haciendo un formulario y se me sale de la pantalla.
    agradezco mucho cualquier ayuda

    saludos y gracias por la oportunidad de aprender

    1. Hola Irene,

      para modificar el estilo de un elemento HTML necesitas utilizar código CSS. Tienes una guía con la que empiezas desde cero aquí.

      La forma más sencilla de que el formulario se ajuste al espacio deseado es introducirlo dentro de un contenedor DIV, pero igualmente debes recurrir a CSS.

      Igual esta página, en la que hay un formulario HTML con su CSS, te ayuda. Verás que puedes manipular el código en vivo y ejecutarlo para ir viendo los resultados.

      Gracias a ti por la visita 😉

Deja un comentario

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) +Info

Finalidad de los datos: Gestionar los comentarios que realizas en este blog. +Info

Legitimación: Consentimiento del interesado. +Info

Destinatarios: No se comunican los datos a nadie más. +Info

Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado.

Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (proveedor de hosting de EBWEB) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting.

Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control.

Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.