Что такое препроцессор HTML?

10 лучших проектов для начинающих по отработке навыков HTML и CSS Программирование и разработка

В этой статье мы узнаем о препроцессоре HTML и рассмотрим препроцессор, используемый для HTML. Как следует из названия, препроцессор — это первый этап всего процесса компиляции, который включает удаление комментариев, расширение макросов, включение заголовков и т.д. Когда мы пишем HTML и CSS, иногда нам нужно повторить конкретный задача несколько раз, что приведет к неэффективности. Препроцессоры могут решить эти проблемы.

Препроцессор — это программа, которая принимает одну форму ввода данных и преобразует ее в другую форму входных данных, обычно в HTML и CSS. Препроцессор сделан с целью включения новых функций в существующие без нарушения совместимости браузера. Причина добавления препроцессора указана ниже:

  • Он следует правилу DRY (Don’t Repeat Yourself), т.е. Нам не нужно переписывать или повторять один и тот же блок кода несколько раз для повторного использования одной и той же функции.
  • Будет проще поддерживать код большого размера.
  • Сокращает общее время разработки и помогает нам правильно организовать код.

Препроцессор HAML: Haml означает язык разметки абстракции HTML, созданный Хэмптоном Кэтлином, и единственная цель его создания — сделать разметку красивой. По сути, это препроцессор на основе Ruby, и для его установки требуется Ruby. Препроцессор HTML также можно понять, поскольку это программа, которая помогает разработчику сгенерировать синтаксис HTML из синтаксиса препроцессора. Он добавит некоторые уникальные функции, которых нет в синтаксисе чистого HTML. Следовательно, Haml разработан, чтобы избежать написания встроенного кода для веб-документов, который сделает HTML более чистым, а также обеспечивает гибкость, позволяющую иметь некоторый динамический контент в HTML. Поскольку препроцессоры — это программы, они всегда обрабатываются на некоторых языках, поэтому Haml обрабатывается в HTML и Sass. Мы выполним следующие шаги, чтобы установить HAML:

Для установки HAML:

gem install haml

Для преобразования HAML в HTML:

haml index.haml index.html

Примечание. Команда должна выполняться в том же каталоге, где находится индексный файл.

Пример 1

В этом примере мы просто создадим заголовок, используя HTML и HAML. Мы можем заметить, что избыточность кода уменьшится после преобразования из HTML в HAML с помощью препроцессоров.

Читайте также:  Как разработать свое первое приложение для Android на Kotlin

Код для заголовка в Haml Pre-Processor:

%body
%center
%header
 %h1bestprogrammer
%section 
 %bA Computer Science Portal for Geeks

Код HAML преобразован в HTML:

HTML

<body>
    <center>
        <header>
            <h1>bestprogrammer</h1>
        </header>
        <section>
            <b>A Computer Science Portal for Geeks</b>
        </section>
    </center>
</body>

Примечание. Код Haml снижает читаемость кода HTML, но код сокращается синтаксически, а также по строкам.

Пример 2

В этом примере, мы будем изучать другой набор препроцессоров заменить классы в <div>.

Код HAML:

!!! 5
%html
 %head
  %title bestprogrammer 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.

Код HAML преобразован в HTML:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>bestprogrammer 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>

Пример 3

В этом примере; мы узнаем, как использовать <blockquote>.

Код HAML:

%blockquote
%div 
 bestprogrammer has best minds

Код HAML преобразован в HTML:

HTML

<html>
<head>
<body>
    <blockquote>
        <div>
            GeeksforGeeks has best minds
        </div>
    </blockquote>
</body>
</html>

ПРЕИМУЩЕСТВА

Следующие моменты, для которых препроцессор HAML считается полезным:

  • Предпочитайте красивую разметку:она облегчает организованную разметку кода с удобным интерфейсом, а также структурированно отображает вывод.
  • Правило DRY (Don’t Repeat Yourself):оно следует СУХОМУ подходу для отбрасывания ненужного HTML-кода, который требует большого повторения.

HTML

<body>
2
3
<!--Heading tags are opened and closed-->
4
<h2>bestprogrammer, A Computer Science portal for geeks.</h2>  
5
6
<!--Body is closed-->
7
</body>

Препроцессоры HTML избегают всего этого, полагаясь на отступ, а не на текст. Чтобы определить, где элементы и блоки кода начинаются и заканчиваются. Это работает не только с большими шаблонами, но и с меньшими шаблонами, что делает код более понятным.

Выход:

%body

%h2 bestprogrammer, A Computer Science portal for geeks.

Следует отдавать предпочтение разметке с хорошим отступом : для улучшения внешнего вида язык разметки должен иметь хороший отступ, чтобы ее было легко читать. Он также определяет, где элемент начинается и заканчивается.
Должна быть четкая структура HTML:с минимальными усилиями он помогает поддерживать язык разметки с четкой структурой и логическим пониманием конечного результата.

Оцените статью
bestprogrammer.ru
Добавить комментарий