En este artículo, aprenderemos sobre el preprocesador HTML y exploraremos el preprocesador utilizado para HTML. Como su nombre lo indica, el preprocesador es la primera etapa de todo el proceso de compilación que incluye la eliminación de comentarios, la expansión de macros, la inclusión de encabezados, etc. Cuando escribimos HTML y CSS, a veces necesitamos repetir los pasos específicos. tarea varias veces, por lo que conducirá a la ineficiencia. Los preprocesadores pueden superar estos problemas.
El preprocesador es un programa que acepta una forma de entrada de datos y la convierte en otra forma de datos de entrada, generalmente en HTML y CSS. El preprocesador se realiza con el fin de incluir nuevas funciones con las existentes sin violar la compatibilidad del navegador. La razón para agregar el preprocesador se indica a continuación:
- Sigue la regla DRY (No se repita), es decir, no necesitamos volver a escribir o repetir el mismo bloque de código varias veces para reutilizar la misma funcionalidad.
- Mantener el código de gran tamaño será más fácil.
- Reduce el tiempo de desarrollo general y nos ayuda a organizar el código correctamente.
Preprocesador HAML: Haml significa HTML Abstraction Markup Language, creado por Hampton Catlin y el único objetivo detrás de su creación es hacer que el marcado sea hermoso. Es básicamente un preprocesador basado en Ruby y requiere la instalación de Ruby. El preprocesador HTML también se puede entender como un programa que ayuda al desarrollador a generar la sintaxis HTML a partir de la sintaxis del preprocesador. Agregará algunas características únicas que no se presentan en la sintaxis HTML pura. Por lo tanto, Haml está diseñado para escapar de la escritura de código en línea para los documentos web que harán que el HTML sea más limpio y también brinda la flexibilidad de tener contenido dinámico en el HTML. Como los preprocesadores son los programas, siempre se procesan en algunos lenguajes, por lo que Haml se procesa en HTML y Sass. Seguiremos los siguientes pasos para instalar el HAML:
Para instalar HAML:
gem install haml
Para convertir HAML a HTML:
haml index.haml index.html
Nota: El comando debe ejecutarse dentro del mismo directorio donde reside el archivo de índice.
Ejemplo 1: en este ejemplo, simplemente crearemos un encabezado usando HTML y HAML. Podemos notar que la redundancia en el código se reducirá después de convertir de HTML a HAML usando preprocesadores.
Código para el encabezado en Haml Pre-Processor:
%body %center %header %h1GeeksforGeeks %section %bA Computer Science Portal for Geeks
Código de código HAML convertido en HTML:
HTML
<body> <center> <header> <h1>GeeksforGeeks</h1> </header> <section> <b>A Computer Science Portal for Geeks</b> </section> </center> </body>
Producción:
Nota: El código Haml reducirá la legibilidad del código para el código HTML, pero el código se reducirá sintácticamente y también por línea.
Ejemplo 2: En este ejemplo , aprenderemos otro conjunto de preprocesadores para sustituir clases en <div>.
Código HAML:
!!! 5
%html
%head
%title GeeksforGeeks HAML Tutorial
%body
%h3
.head HTML Abstraction Markup Language
.container HAML is basically a Ruby-based pre-processor &
required Ruby to be installed in your local machine for the
Mac OS, Ruby comes preinstalled while for windows users.
Código HAML convertido a HTML:
HTML
<!DOCTYPE html> <html> <head> <title>GeeksforGeeks HAML Tutorial</title> </head> <body> <div id="content"> <h3>HTML Abstraction Markup Language</h3> <div class="container"> HAML is basically a Ruby-based pre-processor and required Ruby to be installed in your local machine for the Mac OS, Ruby comes preinstalled while for windows users. </div> </div> </body> </html>
Producción:
Ejemplo 3: En este ejemplo; aprenderemos a usar <blockquote>.
Código HAML:
%blockquote %div GeeksforGeeks has best minds
Código de código HAML convertido a HTML:
HTML
<html> <head> <body> <blockquote> <div> GeeksforGeeks has best minds </div> </blockquote> </body> </html>
Producción:
VENTAJAS
Los siguientes puntos para los que se considera útil el preprocesador HAML:
- Prefiere el marcado hermoso: facilita el marcado organizado del código con una experiencia fácil de usar y también presenta la salida de manera estructurada.
- Regla DRY (Don’t Repeat Yourself): sigue el enfoque DRY para descartar el código HTML innecesario que implica una mayor repetición.
HTML
<body> 2 3 <!--Heading tags are opened and closed--> 4 <h2>GeeksforGeeks, A Computer Science portal for geeks.</h2> 5 6 <!--Body is closed--> 7 </body>
Los preprocesadores de HTML evitan todo esto al confiar en la sangría, no en el texto, para determinar dónde comienzan y terminan los elementos y bloques de código. No solo funciona en plantillas grandes, sino que da como resultado plantillas más pequeñas, lo que hace que el código sea mucho más limpio de ver.
Producción:
%cuerpo
%h2 GeeksforGeeks, un portal de informática para geeks.
- Se debe preferir el marcado con buena sangría: para mejorar la apariencia, el lenguaje de marcado debe tener una buena sangría, lo que facilita la lectura. También determina dónde comienza y termina un elemento.
- Debe haber una estructura HTML clara: con un esfuerzo mínimo, ayuda a mantener el lenguaje de marcado con una estructura clara y una comprensión lógica del resultado final.
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA