Заказать услугу
  • +38 099 227-70-70
  • +38 097 770-63-63

Пишем HTML-код быстрее

zen-coding

Zen Coding — плагин для редакторов кода, который позволяет быстро создавать HTML, XML, XSL разметку. Принцип работы основан на использовании аббревиатур для обозначения HTML-тегов, их аттрибутов, а также их вложенности.




Начнем с простого. Пишем в редакторе:

span#date

нажимаем Ctrl-E (комбинация клавиш зависит от редактора) и получаем:

<span id=»date»></span>

Вложенность символизирует символ «>». Также есть возможность указать число элементов:

ol>li*5

=

<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>

Пример посложнее. Типичный код HTML-документа:

<div id="header">
<div class="logo"></div>
<ul id="navigation">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>

С Zen Coding это делается так:

div#header>div.logo+ul#navigation>li*5>a

Также плагин поддерживает группировку элементов с помощью круглых скобок:

div#wrap>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer

=

<div id="wrap">
<div id="header">
<ul id="nav">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
<div id="page">
<h1><span></span></h1>
<p></p>
<p></p>
</div>
<div id="footer"></div>
</div>

В общем, вся разметка HTML-страницы может быть написана одной строкой.

На данный момент плагин Zen Coding доступен для большинства распостраненных редакторов кода.

Сайт проекта

Посты этой рубрики посвящены инструментам и стратегиям интернет-маркетинга, призванным увеличить конверсию сайта. Статьи будут интересны и полезны нынешним и будущим владельцам онлайн-бизнеса.
Интересуют последние веяния в дизайне сайтов и айдентики? Хотите правильно сочетать цвета и шрифты? Тогда вам сюда.
В рубрике «Разбор заплывов» специалисты студии Webakula делятся не только своими опытом, наблюдениями, выводами, но и практическими советами.
Рубрика поможет разобраться с базовыми терминами интернет-маркетинга, веб-разработки и дизайна. Статьи пригодятся любознательным индивидуумам, которым не безразлична тема сайтостроения.
Мы рады познакомиться и поделиться информацией о насыщенных буднях и ярких выходных компании Webakula с нашими клиентами, читателями и случайными «прохожими». Заходите, располагайтесь, чувствуйте себя, как дома :)