Cómo crear bloques div HTML, fácil y sin Gutenberg – Videotutorial y PDF

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.

COMO-CREAR-BLOQUES-DIV-HTML-3-1024x576 Cómo crear bloques div HTML, fácil y sin Gutenberg - Videotutorial y PDF

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.

Este post está dedicado a Eric Meyer, Jeffrey Zeldman, Dave Shea y Molly E. Holzschlag, que -entre 2003 y 2005-, desde la lejanía y a través de la versión francesa de la tienda online de Amazon, me enseñaron todos los secretos del HTML y CSS modernos. ¡Gracias! 🙂

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.

El código HTML y CSS que has visto tanto en el videotutorial, como los que puedes ver en el PDF y en este artículo no está optimizado. El propósito es divulgar el método no el código, por lo que se ha desarrollado de forma que sea más rápido entender el funcionamiento de los bloques div. En muchos casos, no es recomendable emplear el sistema de incluir las propiedades dentro del atributo «style» en la misma etiqueta div. Se ha hecho así para no agobiar al lector principiante con demasiados conceptos, en este primer artículo dedicado a este tema.

Por otra parte, no se pretende entrar en los detalles sino realizar una primera aproximación a vista de pájaro.

¿Qué es HTML?

libros-html-css-1024x1024 Cómo crear bloques div HTML, fácil y sin Gutenberg - Videotutorial y PDF

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.

visual-html-1024x515 Cómo crear bloques div HTML, fácil y sin Gutenberg - Videotutorial y PDF

Fíjate en la imagen anterior, donde se señalan las pestañas «Visual» y «HTML». Si nunca has utilizado la pestaña HTML, atrévete ahora: entra en uno de tus posts con el editor clásico de WordPress y échale un vistazo al código HTML.

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.

HTML-BASICO-TRANSPARENTE Cómo crear bloques div HTML, fácil y sin Gutenberg - Videotutorial y PDF

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

Tanto la codificación de los archivos HTML como el de los de CSS; así como el modo de llamar al CSS desde una página HTML (incluso el uso de recursos como JavaScript), condiciona el rendimiento de ésta. Por ejemplo, el uso excesivo de archivos CSS, si no están comprimidos y «minificados» (reducción del tamaño en base a eliminar caracteres que no sirven, como los espacios en blanco), va a provocar el retardo en la carga de las páginas. Hay que hacer todo esto bien porque el factor WPO es muy importante a la hora de valorar un sitio web. El diseño es importante pero todos esos temas, asociados al rendimiento, lo son más. Ya sabes que en Blogpocket tenemos un método para desarrollar el mejor sitio web rápido, seguro, preparado para el SEO y optimizado para móviles: WPO en WordPress, cómo lograr un blog rápido, seguro y optimizado para móviles.

The_Zen_of_CSS_Design-cover Cómo crear bloques div HTML, fácil y sin Gutenberg - Videotutorial y PDF

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.

html-div-id-1024x476 Cómo crear bloques div HTML, fácil y sin Gutenberg - Videotutorial y PDF

Ejemplo de uso de id. Por ejemplo, la imagen anterior muestra un contenedor div con el atributo id que sirve de marcador para saltar directamente a ese lugar de la página desde un enlace. Imagínate un menú al principio de la página con opciones que sean las distintas secciones. Cada una de estas opciones sería un enlace HTML cuyo atributo href llevase a cada div en cuestión. Para el ejemplo de la imagen: <a href=”#id1″>Sección 1</a>.

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
El método para construir landing pages con bloques div HTML pasa primero por instalar y activar este plugin. Con él dispones de todo el ancho de la pantalla, conservando cabecera y footer de tu theme si así lo deseas. Una vez hecho eso, diseña una cuadrícula de filas y columnas usando bloques div HTML, tal como se explica en el videotutorial de este artículo.

Cómo construir una fila de varias columnas con bloques div HTML

Ahora viene la parte más bonita de este artículo 😉 .

columnas-div-1024x427 Cómo crear bloques div HTML, fácil y sin Gutenberg - Videotutorial y PDF

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

ver-web-safari-1024x725 Cómo crear bloques div HTML, fácil y sin Gutenberg - Videotutorial y PDF

Generalmente, si consigues que se vea bien en Safari lo más probable es que también se vea bien en Firefox.

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?

¿Estás buscando hosting?
SiteGround es el hosting de Blogpocket ¡pruébalo!:HOSTEAME-EN-SITEGROUND Cómo crear bloques div HTML, fácil y sin Gutenberg - Videotutorial y PDF

2 comentarios

Deja un comentario

Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a SiteGround que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido