Lección 04

HTML y CSS para WordPress

Cuando se comenzaron a desarrollar sitios web, era necesario tener conocimientos de HTML. Hoy en día, gracias a los CMS, prácticamente no es necesario tener conocimientos de códigos ni programación.

De por si, la mayoría de sitios web desarrollados en la actualidad están creados con este lenguaje aunque ya no se hacen a mano sino que se automatizan gracias a los gestores de contenido.

Sin embargo, si eres exigente y te gusta un trabajo bien hecho, es recomendable que tengas algo de conocimientos de HTML y CSS para personalizar más tus proyectos.

Índice del contenido
    Add a header to begin generating the table of contents

    1. HMTL, ¿eso qué es?

    Si estás usando WordPress para diseñar tu sitio web, te preguntarás, ¿por qué tengo que aprender HTML?

    En realidad no es necesario que conozcas este lenguaje para crear un sitio web con WordPress. Sin embargo, si te familiarizas con HTML, te ayudará a entender y personalizar tu sitio web ya que, el código fuente de WordPress, está desarrollado con HTML.

    HTML, que significa Lenguaje de Marcado para Hipertextos (HyperText Markup Language), es el lenguaje de construcción más básico de un sitio web y se usa para crear y representar visualmente sitios web.

    Determina el contenido del sitio web, pero no su funcionalidad. Otras tecnologías distintas de HTML son usadas generalmente para describir la apariencia/presentación de un sitio web (CSS) o su funcionalidad (JavaScript).

    En WordPress, el lenguaje HTML se utiliza en la caja de edición de texto. Todo lo que allí se escriba estará etiquetado y será parte del HTML del sitio web.

    Anuncio publicitario

    2. CSS: hojas de estilo en cascada

    Las hojas de estilo en cascada, CSS (Cascading Style Sheets), actualmente son utilizadas en un gran número de sitios web y ayudan a mejorar el diseño visual además de reducir y simplificar el trabajo.

    En WordPress, las hojas de estilo en cascada, son frecuentemente utilizadas en la creación de temas y controlan principalmente el color, formato, tipografía y tamaños además de otros parámetros que permiten hacer que un sitio web se vea atractivo.

    Al igual que sucede con HTML, en WordPress no es necesario tener conocimientos de CSS para crear un sitio web ya que, con el uso de los temas, esta tarea se simplifica mucho lo que hace que el desarrollo del sitio sea una tarea sencilla.

    3. Caja de edición de texto de WordPress

    La siguiente imagen representa la caja de edición de texto de WordPress:

    Caja de edición de texto de WordPress
    Caja de edición de texto de WordPress

    En este editor de texto es donde, normalmente, se añade cualquier tipo de contenido en una página o entrada en WordPress.

    Con la llegada de los editores de contenido, la caja de edición de texto de WordPress prácticamente no se utiliza.

    Fíjate en la siguiente imagen:

    Editor de texto en Elementor
    Editor de texto en Elementor

    Corresponde al widget Editor de Texto de Elementor. Este editor de texto es prácticamente igual al editor de texto nativo de WordPress pero ahora es un elemento dedicado solo al texto.

    Los editores de texto cuentan con todo lo necesario para que puedas redactar el contenido sin necesidad de tener conocimientos de HTML y CSS.

    Cada uno de los elementos añade etiquetas HTML y CSS al código automáticamente a medida que los vas usando.

    En la parte superior derecha de la caja de edición de texto hay dos pestañas:

    La idea principal es utilizar el editor de texto de Elementor solo para texto: párrafos, listas y enlaces.

    Para archivos multimedia como imágenes, audios y vídeos, existen elementos individuales y ya no será necesario añadirlos desde el editor de texto como se hacía anteriormente con WordPress.

    Para el desarrollo de este curso de WordPress vamos a utilizar el editor de contenidos Elementor que posee todas las herramientas necesarias para desarrollar un sitio web con WordPress.

    Si aún no conoces Elementor, en la lección instalación de Elementor, puedes encontrar una breve reseña de este plugin.

    Curso de WordPress

    Uno de los mejores editores de contenido que puedes instalar para crear un proyecto profesional con WordPress, es Elementor. Ofrece una versión gratuita, que puedes instalar desde WordPress y, una de pago, con excelentes opciones de diseño.

    Es rápido, fiable y poderoso. Se adapta perfectamente a "casi" cualquier tema y posee una estructura perfecta para el desarrollo de sitios web profesionales.

    4. Reglas básicas de HTML y CSS para WordPress

    A continuación te indico algunas de las reglas HTML y CSS que más se utilizan en el editor de texto. Tu trabajarás en la pestaña Visual y la regla HTML se creará en la pestaña HTML.

    La idea es que te familiarices con el uso de estos códigos por si en algún momento quieres personalizar el contenido de tu sitio web.

    Cuando trabajes con textos en WordPress, no hace falta que añadas ningún código. El Editor de texto posee sus propias herramientas con las cuales crea el código automáticamente (muy similar a trabajar con Word, por ejemplo).

    4.1 Párrafos y textos

    En la pestaña HTML:En la pestaña Visual:
    <p style="text-align: left;">Alineado a la izquierda</p>

    Alineado a la izquierda

    <p style="text-align: center;">Centrado</p>

    Centrado

    <p style="text-align: right;">Alineado a la derecha</p>

    Alineado a la derecha

    <p style="text-align: justify;">Texto justificado</p>

    Texto justificado

    <strong>Texto en negrita</strong>Texto en negrita
    <em>Texto en cursiva</em>Texto en cursiva

    Para alinear un texto o párrafo hay que añadir la etiqueta <p> (paragraph, párrafo en inglés) y el estilo correspondiente mediante la propiedad "style" que es código CSS.

    Aunque <p style="text-align: left;"> se utiliza para alinear un texto a la izquierda, no se necesario utilizarlo ya que, por defecto, cualquier texto se alinea a la izquierda ya que así funciona nuestro idioma.

    Si estás utilizando un editor de contenidos como Elementor, no hace falta utilizar las etiquetas de párrafo ya que Elementor cuenta con la pestaña Estilo donde se puede alinear el contenido sin necesidad de utilizar código.

    Alineación del texto en Elementor
    Alineación del texto en Elementor

    4.2 Enlaces

    En la pestaña HTML:En la pestaña Visual:
    <a href="URL">Esto es un enlace</a>Esto es un enlace
    <a href="URL" target="_blank">Este es otro enlace</a>Este es otro enlace

    En este caso el primer enlace abre en la misma ventana. El segundo enlace, gracias a la propiedad target="_blank", hace que el enlace abra en una nueva ventana (o pestaña) del navegador.

    En la etiqueta href="URL" es donde se declara el destino del enlace siendo URL el enlace de destino. Por ejemplo: https://es.wordpress.org/.

    4.3 Títulos y subtítulos

    En la pestaña HTML:En la pestaña Visual:
    <h1>Título h1</h1>

    Título h1

    <h2>Título h2</h2>

    Título h2

    <h3>Título h3</h3>

    Título h3

    <h4>Título h4</h4>

    Título h4

    <h5>Título h5</h5>
    Título h5
    <h6>Título h6</h6>
    Título h6

    Muy importante...

    Los encabezados se declaran con las etiquetas h1 hasta h6. H1 es el título principal y, en una página o entrada, solo puede estar 1 sola vez.

    Desde h2 hasta h6 son subtítulos y pueden haber varios siempre y cuando se respete la jerarquía. Para el SEO es muy importante respetar esta regla.

    A los títulos y subtítulos también se les puede aplicar las propiedades de los párrafos y enlaces: alinearlos a la izquierda, derecha o centrarlos.

    En la pestaña HTML:En la pestaña Visual:
    <h2 style="text-align: center;">Título h2 centrado</h2>

    Título h2 centrado

    <h3 style="text-align: right;">Título h3 a la derecha</h3>

    Título h3 a la derecha

    <h4><a href="#">Título h4 con enlace</a></h4>

    Título h4 con enlace

    Si estás utilizando un editor de contenidos como Elementor, no hace falta utilizar etiquetas ya que Elementor incluye el widget Encabezado, para títulos y subtítulos, y ofrece todas las opciones para configurarlos sin utilizar código.

    Encabezados en Elementor
    Encabezados en Elementor

    4.4 Listas

    En la pestaña HTML:En la pestaña Visual:
    <ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    </ul>
    • Elemento 1
    • Elemento 2
    • Elemento 3
    <ol>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    </ol>
    1. Elemento 1
    2. Elemento 2
    3. Elemento 3

    La primera es una lista con viñetas y la segunda es una lista numerada que podrás utilizar según el tipo de contenido.

    En el código HTML, las listas con viñetas tienen la etiqueta <ul> y las listas numeradas tienen la etiqueta <ol>.

    4.5 Uso de una clase con CSS

    Para ver el uso de una clase con CSS, supongamos que queremos formatear un texto en color rojo, centrarlo y modificar el tamaño de la fuente.

    El código CSS sería algo como:

    .textorojo {color:#FF0000; text-align:center; font-size:24px;} 

    Donde:

    • textorojo es el nombre de la clase.
    • color: #FF0000; es el color rojo en formato hexadecimal.
    • text-align: center; es la alineación del texto.
    • font-size: 24px; es el tamaño del texto.

    Cuando se declara una clase en un archivo .css, el nombre de la clase deberá comenzar con un "punto".

    El código HTML quedaría de la siguiente manera:

    <p class="textorojo">Ejemplo de uso de CSS</p> 

    Como puedes observar, dentro de la etiqueta <p> (párrafo) se ha añadido la clase con el formato class="textorojo".

    El resultado sería el siguiente:

    Ejemplo de uso de CSS

    5. Márgenes, rellenos y bordes

    Otros conceptos fundamentales que debes conocer son: margin (margen), padding (relleno) y border (borde).

    Estas son propiedades de CSS que se suelen aplicar mediante reglas al contenido aunque, con los editores de contenido como Elementor, solo tendrás que escribir los valores en unos recuadros sin necesidad de utilizar código.

    • Contenido: es el elemento de un sitio web al que se le aplican estas propiedades.
    • Border: es el borde del contenido.
    • Padding (espacio interno): es el espacio entre el borde y el elemento. Los valores solo pueden ser positivos.
    • Margin (espacio externo): es el espacio entre el borde y el exterior. Los valores pueden ser positivos y negativos.
    Margen y relleno en Elementor
    Margen y relleno en Elementor

    En las propiedades border, padding y margin se indican 4 valores en el siguiente orden:

    • Top: el valor superior (arriba).
    • Right: el valor de la derecha.
    • Bottom: el valor inferior (abajo).
    • Left: el valor de la izquierda.

    En la siguiente imagen se ilustra cómo se aplican estas propiedades a un elemento.

    Márgenes, rellenos y bordes en un elemento
    Márgenes, rellenos y bordes en un elemento

    El recuadro interno de color negro es el contenido y el recuadro de color rojo es el borde.

    Por defecto, el borde suele ser una línea imaginaria (invisible) que pertenece al contenido. Cuando se indican valores para esta propiedad es cuando se vuelve visible.

    Anuncio publicitario

    7. Conclusión

    La finalidad de esta lección no es que aprendas HTML y CSS sino que te familiarices con estos códigos que son actualmente utilizados para el desarrollo de sitios web con WordPress.

    Igualmente, no está de más ampliar este tipo de conocimientos ya que nunca sabrás cuando los puedas necesitar.

    ¿Te ha gustado?

    Te estaría muy agradecido si pudieras valorar esta lección y compartirla en las redes sociales. De esta manera me animas a continuar trabajando en este curso de WordPress y ayudas a otras personas que desean aprender.

    (6 votos, promedio: 4.7 de 5)

    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on linkedin
    LinkedIn
    Share on telegram
    Telegram
    Share on whatsapp
    WhatsApp
    Share on email
    Email

    Este curso es gratis y siempre lo será pero, mantenerlo, requiere de mucho tiempo y esfuerzo. Si te gusta el curso y te ha ayudado, considera invitarme un café haciendo un pequeño donativo a este proyecto que he creado con el para ti y muchas personas que desean aprender. Las donaciones me ayudan a seguir trabajando en este fantástico curso gratuito. ¿Me invitas un café?.

    Suscríbete y aprende WordPress desde cero.

    No me gusta el SPAM y se que a ti tampoco. Sólo recibirás información útil sobre WordPress.

    Al enviar, confirmas que has leído y aceptas la política de privacidad. Conoce nuestro compromiso con tu privacidad.

    Comparte tu experiencia

    Deja un comentario si tienes alguna duda o cuéntanos cómo ha sido tu experiencia.

    guest
    0 Comentarios
    Inline Feedbacks
    Ver todos los comentarios
    0
    ¿Dejas un comentario? Gracias!x
    ()
    x
    Ir arriba

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Suscribirte a la lista de correos electrónicos.
    • Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en legal@gianoliveira.com, así como el derecho a presentar una reclamación ante una autoridad de control.
    • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal.
    • Información adicional: En mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal incluida información sobre acceso, conservación, rectificación, eliminación, seguridad y otros temas.