Este post es una introducción al mundo del HTML en WordPress: vamos a ver cómo crear bloques div HTML de la manera más fácil. Se incluye un videotutorial con 3 trucos para trabajar mejor con bloques en HTML y la descarga de un PDF titulado «HTML nivel -1» solo para suscriptores.
Con la llegada de Gutenberg, se ha instaurado el trabajo con bloques. Acerca de qué es un bloque y el funcionamiento de Gutenberg, puedes leer Gutenberg de WordPress 5.0: qué es y cómo funciona el nuevo editor.
Pero trabajar con bloques para desarrollar páginas de aterrizaje o páginas web completas se puede hacer de muchas maneras. Existen plugins de WordPress como Page Builder by Origin, Elementor o frameworks como Divi. Aquí lo que vamos a ver, no obstante, es cómo crear bloques con HTML directamente.
Podríamos haber escrito un artículo explicando HTML y CSS de pe a pa. Pero de esos artículos hay millones en Internet y en la blogosfera. Se ha preferido contar, a nuestro estilo, el método y los trucos, como una primera aproximación a las técnicas de HTML y CSS buscando despertar el interés del lector.
¿Lo conseguiremos? Ahí vamos 😉 .
¿Ready?
¿Te gusta el método de inmersión?
¿Sí? Pues vayamos, directamente, al videotutorial con esos tres trucos para trabajar mejor con bloques div HTML.
¿A qué es bonito el mundo del HTML en WordPress?
¿Te quedaste con ganas de más?
¿Sigues todavía con nosotros, aquí en Blogpocket? Vamos, entonces, a desgranar, paso a paso, el método para crear bloques div HTML y construir bonitas landing pages para tu sitio web de WordPress.
Por otra parte, no se pretende entrar en los detalles sino realizar una primera aproximación a vista de pájaro.
¿Qué es HTML?
En 2005, cuando yo llevaba cuatro años en el mundo de los blogs, la tendencia era lo que se denominó el desarrollo de páginas web bajo los estándares. Uno de sus divulgadores fue Jeffrey Zeldman, cuyo libro Designing with web standars fue una verdadera revelación para mí. Otro autor destacado fue Eric Meyer con otra gran publicación: Eric Meyer on CSS. Y como no, Dave Shea y Molly E. Holszschlag con la obra de arte The Zen of CSS design. Con todos esos libros aprendí desarrollo web hace más de una década, cuando lo importante era separar el contenido de la presentación y hacerlo bien con una metodología concreta, cuyo fundamento era el uso conveniente de la etiqueta div.
HTML significa “HyperText Markup Language” y es el lenguaje en el que se escriben las páginas web. Cuando escribes un nuevo post en tu blog, si utilizas un editor enriquecido (también denominado visual), al final todo ello se traduce a lenguaje HTML. Sin embargo, plataformas como Blogger o WordPress te ofrecen la posibilidad de editar los posts directamente en HTML. Eso es una ventaja para realizar pequeños cambios a posteriori, como por ejemplo si quieres añadir un salto de línea.
Los editores visuales (aquellos que te permiten escribir sin preocuparte del código interno, añadiendo enlaces, imágenes, etc) convierten a etiquetas e instrucciones propias que, muchas veces, son innecesarias. Y, en algunos casos, la presentación del post no se ajusta a lo que habías pensado. Aunque tu propósito no sea dedicarte técnicamente a tu blog, es conveniente que conozcas algo de HTML básico para realizar pequeños trucos y que puedas resolver posibles problemas de maquetación por tí mismo.
HTML es un lenguaje de etiquetas
HTML es un lenguaje basado en etiquetas (palabras rodeadas de corchetes angulares) y sirve para describir la estructura y el contenido de una página web. De alguna forma, también describe su aspecto visual, pero esto más bien se lleva a cabo con las hojas de estilo (CSS). Se trata, pues, de separar las descripciones del contenido y la presentación y es una de las normas fundamentales de los estándares web.
Una de las principales reglas de un lenguaje de estas características es que toda etiqueta debe tener su etiqueta de cierre, identificada por la barra inclinada detrás del corchete angular de apertura. Por ejemplo: </etiqueta 1>.
La evolución de HTML es HTML5, que aúna dos variantes de la sintáxis HTML: la clásica (la que más o menos veremos en este artículo) y el XHTML. Realmente, XHTML es un lenguaje para describir datos. Por ejemplo, la sindicación RSS, que tanta importancia tiene para la distribución de contenidos, está basada en XHTML.
HTML básico
Hay muchos sitios donde puedes aprender HTML. Pero si quieres una introducción «nivel -1» hemos elaborado una guía rápida en PDF que puedes descargar haciéndote suscriptor de la newsletter.
¿Qué son los bloques div HTML?
Hay que decir que HTML es el lenguaje para decirle al navegador el qué tiene que mostrar. Por otra parte, CSS es el lenguaje para decirle al navegador cómo tiene que mostrarlo (colores, tamaños, lugar dentro de la pantalla, etc. Es lo que se llama separar el contenido de su presentación.
Combinando HTML y CSS, la información se puede mostrar de muchas maneras. Ahí entran tus gustos y los conocimientos de diseño que tengas.
Aprendí mucho con The Zen of CSS design en 2005. En este libro se introduce el bloque div HTML de la siguiente manera:
Unos cuantos divs en puntos lógicos a lo largo de su documento proporcionarán control de estilo adicional y separación lógica de secciones. Piense en un div como un contenedor reutilizable: no desea enterrar su contenido en demasiados contenedores, pero unos pocos divs bien colocados pueden mantener el contenido ordenado.
Un bloque div HTML es, por lo tanto, una «caja» de elementos (incluso otros divs) que se pueden ubicar en cualquier sitio de una página web. Podemos utilizarlos para estructurar la información de una página web, si pensamos en ésta como una cuadrícula de filas y columnas.
Uso de clases e id apropiadamente
Un bloque div HTML se caracteriza porque, además de ser un contenedor, permite diferenciarse de otros por el atributo «clase» o por el atributo «id».
Una clase es un atributo reusable y puede aplicarse a cualquier otro elemento en una página (no solo a los bloques div HTML), mientras que un id es un atributo único que solo puedes ser usado una única vez por página.
Puedes aplicar más de una clase a un elemento; y aplicar una clase mas de una vez en una página. También puedes aplicar una clase y un id al mismo elemento, pero usar más de una instancia del mismo id dentro de una página está prohibido.
Distintas maneras de unir HTML y CSS en una página web
Para que las clases e id de un bloque div HTML funcionen (y como cualquier otro elemento HTML) es necesario asociar las definiciones realizadas a nivel de CSS y el HTML.
Esto se puede hacer de tres formas, cuyos detalles los encontrarás en el ebook «HTML nivel -1», un PDF del que disfrutan solo nuestros suscriptores.
- Llamada a un archivo CSS externo desde la cabecera del HTML.
- Definiciones del CSS incluidas en la cabecera del HTML.
- Definiciones del CSS directamente en el div, dentro del atributo «style»
Trucos para trabajar mejor con bloques div HTML
En el videotutorial visto al principio de este artículo se explican detenidamente estos tres trucos. Pero vamos a repasarlos aquí a continuación.
Cómo alterar las definiciones CSS del theme activo de WordPress y ocupar todo el ancho de la pantalla
Lo normal cuando uno trabaja con un theme de WordPress es que tiene que ajustarse a la estructura diseñada. Por ejemplo, si en una página o post el contenido principal se muestra en una columna con un ancho que es un porcentaje del total de la pantalla.
Para «romper» la estructura de un theme de WordPress y poder, por ejemplo, usar todo el ancho de la pantalla es preciso toquetear el código HTML y CSS.
El «truco» para no hacer eso es instalar y activar el plugin Fullwidth Templates for Any Theme & Page Builder.
Con este plugin puedes elegir entre tres nuevas opciones, en el editor Clásico, dentro del apartado «Atributos de página». Dichas opciones aparecen en el desplegable «Plantilla» y son autoexplicativas:
- FW Fullwidth
- FW Fullwidth no header footer
- FW no sidebar
Cómo construir una fila de varias columnas con bloques div HTML
Ahora viene la parte más bonita de este artículo 😉 .
Fíjate en la imagen anterior, que se ha implementado con bloques div HTML y CSS.
Para presentar elementos de información en columnas con HTML, el truco que te propongo es usar clases de CSS y tres bloques div. Pero usaremos un pequeño gran «huevo de Pascua» que contienen muchos themes de WordPress.
Dicha sorpresa es una serie de clases CSS, cuyo origen es el proyecto Bootstrap y que se pueden asignar a cualquier etiqueta de tu HTML. En concreto, para implementar las columnas de la imagen, se empleó la clase «one-third» que divide el ancho de la pantalla en tres partes iguales.
Pero hay bastantes posibilidades, como la clase «one-half» para dividir en dos columnas o la clase «two-third» que combinada con «one-third» permite tener una columna ocupando dos tercios de la pantalla a la izquierda y otra de un tercio a la derecha.
Cómo comprobar rápidamente que tu HTML funciona en todos los dispositivos y navegadores
El tercer, y último truco, consiste en comprobar si tu diseño web se ve igual y sin errores en todos los y navegadores.
Esto es un hándicap porque Chrome suele aceptar todas las instrucciones CSS y HTML. Sin embargo no sucede así con Safari y Firefox.
Para realizar esta comprobación prueba tu página web en Safari y ejecuta la combinación de teclas CMD+ALT+R (Mac), o la correspondiente en Windows, para obtener la página de pruebas similar a la imagen siguiente.
Ahí podrás elegir dispositivo y sistema operativo; y ver cómo se ve tu diseño en iPad, iPhone o escritorio (Safari).
Conclusiones
Hemos visto, paso a paso, una introducción al proceso de la creación de bloques div HTML.
Ahora solo resta conocer tu experiencia en el uso de HTML y CSS; así como este tipo de técnicas.
¿Te atreves a crear una pequeña landing page para tu blog mediante HTML y CSS?
SiteGround es el hosting de Blogpocket ¡pruébalo!:
Deja una respuesta