Язык разметки Web Site Pad

Язык разметки предназначен для описания html-страниц, определения макросов и их использования в шаблоне и тексте самих страниц. Основной идеей языка разметки являются макросы, секции и упрощенный синтаксис для генрации html-кода. Эти средства позволяют создавать наборы html-страниц из единого текста исходного кода.

Основные понятия

Комментарии

В исходном коде веб проекта можно использовать комментарии которые не будут сохранятся в создаваемых программой файлах. Комментарий начинается с новой строки и символа ';':

; Это строка комментария

Макросы

Макросы позволяют определить фрагмент текста под определенным именем, а затем выполнить вставку текста, указав только имя.

Определение макроса начинается с новой строки, имя макроса должно начинаться с символа '$' за именем должно следовать текст макроса:

;name - имя макроса
;value - текст макроса
$name value

При определении макроса в памяти создается макропеременная с этим именем, в которой и хранится определенный им текст.

Вызов макроса, выполняется указанием имени макроса в фигурных скобках:

; в это место будет вставлен текст определенный в макросе под именем - name
{$name}

При вызове макроса, в памяти ищется макропеременная с заданным именем и из нее извлекается значение для вставки.

Пример:

; Определяем макрос "program" и присваиваем ему значение "Web Site Pad"
$program Web Site Pad
      
; Используем макрос в тексте
Добро пожаловать в {$program}! {$program} позволяет создавать мини-сайты.

Результат:

Добро пожаловать в Web Site Pad! Web Site Pad позволяет создавать мини-сайты.

Существуют специальные макропеременные: $charset, $template, $name, $content и т.д. назначение которых будет рассмотрено ниже.

Секции

Секции предназначены для того чтоб программа при сборке проекта могла определить какую часть текста в какой файл сохранить. Секция помечается специальным символом определения - указанием имени файла заключенным в квадратные скобки. Таким образом, чтоб создать 2 файла необходим следующий исходный код:

[index.html]

Этот текст будет сохранен в файле index.html

[about.html]

А этот текст в файле about.html

При разборе секции анализируется его имя и расширение (расширение отделяется от имени символом ".") и в зависимости от этого выполняются следующие действия:

Случай определения макросекции (с именем без расширения) можно считать еще одним способом определения макроса. Определенный таким образом макрос можно так же использовать для вставки текста как в другой секции, так и определить место для вставки в шаблоне.

Может возникнуть случай когда нужно в файл вывести текст заключенный в квадратные скобки и начинающийся с новой строки, например, для ini-файлов. В этом случае, чтобы эта строка не была воспринята программой как начало новой секции перед открывающей квадратной скобкой нужно поставить экранирующий символ: '\', при генерации текста он будет проигнорирован:

[info.ini]
\[general]
key=value

В результате в файл info.ini будет помещен текст:

[general]
key=value

Генерация HTML: заголовки, параграфы и списки

Одним из достоинств языка разметки является генерация html-кода на основе упрощенного синтаксиса. Аналогом этого являются языки разметки для написания комментариев в форумах и различных Wiki-подобных системах.

Заголовки

= Заголовок 1

== Заголовок 2

=== Заголовок 3

Заголовок первого уровня должен начинаться с символа "=" и последующего пробела. Заголовки второго и третьего уровня должны начинаться с двух и трех сиволов "=" соответственно. В результате будет сгенерирован html-код:

<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>

Параграфы

Текст отделенный от предыдущего текста пустой строкой выделяется в параграф. Если внутри текста параграфа встречается переход на новую строку, то в html-код добавляется тег перевода строки:


Это новый параграф,
с переводом строки.

Будет сгенерирован html-код:

<p>Это новый параграф,<br/>с переводом строки.</p>

Списки

Имеется возможность создавать нумерованные и ненумерованные списки:

* Ненумерованный элемент 1
* Ненумерованный элемент 2

# Нумерованный элемент 1
# Нумерованный элемент 2

Будет сгенерирован html-код:

<ul>
<li>Ненумерованный элемент 1</li>
<li>Ненумерованный элемент 2</li>
</ul>
<ol>
<li>Нумерованный элемент 1</li>
<li>Нумерованный элемент 2</li>
</ol>

Списки могут быть вложенными, для этого каждый уровень нужно отделять от другого отступом в 2 пробела.

Форматирование текста

Выделение текста

Для написания текста полужирным шрифтом или курсивом используется следующий синтаксис:

Текст может быть написан _[полужирным], __[курсивом] или ___[полужирным курсивом].

Результат:

Текст может быть написан полужирным, курсивом или полужирным курсивом.

html-код:

Текст может быть написан <strong>полужирным</strong>, <em>курсивом</em> или <strong><em>полужирным курсивом</em></strong>.

Стили

Написанному тексту можно задать произвольный стиль:

Текст может быть написан .[color:red красным цветом] или .[color:green зеленым]. Можно задать .[mystyle определенный класс стиля].

Результат:

Текст может быть написан красным цветом или зеленым. Можно задать определенный класс стиля.

html-код:

Текст может быть написан <span style="color:red">красным цветом</span> или <span style="color:green">зеленым</span>. Можно задать <span class="mystyle">свой стиль</span>.

Стиль может быть распространен на параграф или любой другой блочный элемент. Для этого нужно указать определение стиля перед нужным элементом:

.[color:red]
= Красный заголовок

.[color:blue]
Параграф с синим текстом

Результат:

Красный заголовок

Параграф с синим текстом

html-код:

<h1 style="color:red">Красный заголовок</h1>
<p style="color:blue">Параграф с синим текстом</p>

Изображения и ссылки

Ссылки

Для добавления в текст ссылок используется синтаксис:

*[http://www.websitepad.com]
*[http://www.websitepad.com Посетите www.websitepad.com]
*[http://www.websitepad.com target=_new Открыть www.websitepad.com в новом окне]

Результат:

http://www.websitepad.com
Посетите www.websitepad.com
Открыть www.websitepad.com в новом окне

html-код:

<a href="http://www.websitepad.com">http://www.websitepad.com</a>
<a href="http://www.websitepad.com">Посетите www.websitepad.com</a>
<a href="http://www.websitepad.com" target="_new">Открыть www.websitepad.com в новом окне</a>

Изображения

Для добавления изображений используется синтаксис:

![download.gif]

Результат:

html-код:

<img src="download.gif" border="0"/>

Определен упрощенный вариант ссылки-изображения. Для этого к определению изображения нужно дополнительно написать атрибуты href и при необходимости target:

![download.gif href=http://ru.websitepad.com target=_new title="Щёлкни по мне!"]

Результат:

html-код:

<a href="http://ru.websitepad.com" target="_new"><img src="download.gif" title="Щёлкни по мне!" border="0"/></a>

Текстовые блоки

Для размещения в тексте блоков с исходным кодом или заранее отформатированным текстом используется следующий синтаксис:

>Предварительно
>отформатированный текст.

Результат:

Предварительно
отформатированный текст.

html-код:

<pre>
Предварительно
отформатированный&#32;текст.
</pre>

Стили текстовых блоков

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

.[mystyle]
>Предварительно
>отформатированный текст.

Результат:

Предварительно
отформатированный текст.

html-код:

<div class="mystyle">
Предварительно<br/>отформатированный&#32;текст.<br/>
</div>

Таблицы

Для упрощенной разметки таблиц используется следующий синтаксис:

.[width:100%]
^ Заголовок 1^ Заголовок 2
|Ячейка 1-1|  Ячейка 1-2
.[background-color:#c0e0ff]            
|| Объединенная ячейка с голубым фоном            

Результат:

Заголовок 1Заголовок 2
Ячейка 1-1Ячейка 1-2
Объединенная ячейка с голубым фоном

html-код:

<table style="width:100%">
<thead>
<tr><td align="center">Заголовок 1</td><td align="center">Заголовок 2</td></tr>
</thead>
<tbody>
<tr><td>Ячейка 1-1</td><td align="right">Ячейка 1-2</td></tr>
<tr style="background-color:#c0e0ff"><td align="center" colspan="2">Объединенная ячейка с голубым фоном</td></tr>
</tbody>
</table>

Для управления форматированием ячеек таблицы, после символа разделения ячеек "|" нужно указать необходимое количество пробелов. Если пробел отсутствует - то выравнивание отсутствует (по умолчанию, по левому краю), если один пробел - выравнивание по центру, если два и более, то по правому краю:

|Ячейка 1-1|  Ячейка 1-2

Ячейчки можно объединять, для этого нужно поставить подряд столько знаков разделения ячеек "|", сколько ячеек объединяется в одну:

|| Объединенная ячейка            

Для каждой строки можно задать определенный стиль, для этого нужно указать стиль перед этой строкой:

.[background-color:#c0e0ff]            
|| Объединенная ячейка с голубым фоном

Другие статьи