Flag of Ukraine Мы солидарны с Украиной. Узнайте здесь, как можно поддержать Украину.

HTML в MediaWiki

Материал из Викисфера
Перейти к навигации Перейти к поиску

HTML в MediaWiki — особенности применения языка гипертекстовой разметки HTML в википроектах на основе движка MediaWiki.

Особенности[править | править код]

В MediaWiki при редактировании страниц помимо викиразметки допускается применение некоторых HTML-тегов. Применение HTML обусловлено тем, что HTML расширяет возможности форматирования и оформления внешнего вида викистраниц. Чаще всего HTML-код можно встретить в шаблонах, но работает он и в статьях. Однако использование HTML при этом имеет свои особенности. В википроектах HTML-код взаимодействует с викиразметкой, «волшебными словами» и функциями парсера, и его применение имеет более сложный характер, чем полноценное использование гипертекстовой разметки при создании обычных веб-страниц. При использовании в википроектах вместе с викиразметкой HTML-тегов возможны дополнительные неожиданные эффекты и скрытые ограничения, которые при обычной вёрстке веб-страниц не встречаются.

Шаблон:Note Кроме HTML-тегов в MediaWiki применяются другие различные теги (<gallery>, <nowiki>, <poem>, <ref> и т. д.), которые не следует путать с HTML-тегами. Они не работают в HTML и HTML-тегами не являются.

HTML-теги, работающие в MediaWiki[править | править код]

Большинство распространённых HTML-тегов работает в коде викистраниц как отдельно, так и в сочетании с викиразметкой. Теги представляют собой парную конструкцию с открывающим и закрывающим тегами (<тег>содержимое</тег>), и заключенным в них содержимым (текстом или блочными элементами), вид которого они меняют. Некоторые теги не являются парными, и имеют вид: <тег>.

Шаблон:Note По правилам HTML теги могут вкладываться друг в друга, но блочные теги нельзя помещать внутри текстовых.

Теги имеют дополнительные атрибуты, среди которых есть универсальные (работающие во всех тегах), и специфические для конкретных тегов: <тег атрибут="значение">содержимое</тег>

Одним из универсальных атрибутов является атрибут title, который добавляет к элементу всплывающую подсказку с текстом: <тег title="Ваш текст">содержимое</тег>. При наведении курсором мыши на элемент всплывающая подсказка всплывает (пример).

Ещё один важный универсальный атрибут — атрибут style, с помощью которого в теги добавляют встроенные стили CSS: <тег style="стилевое свойство1:значение1; стилевое свойство2:значение2;">содержимое</тег>

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

Заголовки[править | править код]

<h1></h1> — заголовок 1 уровня (блочный элемент)

<h2></h2> — заголовок 2 уровня (блочный элемент)

<h3></h3> — заголовок 3 уровня (блочный элемент)

<h4></h4> — заголовок 4 уровня (блочный элемент)

<h5></h5> — заголовок 5 уровня (блочный элемент)

<h6></h6> — заголовок 6 уровня (блочный элемент)

Все заголовки являются аналогами заголовков викиразметки (== ==, === === и т. д.). Являются блочными элементами: располагаются с новой строки. Отображаются в виде текста крупным шрифтом с подчёркиванием, но без ссылки [править]. Отображаются в блоке «Содержание» викистраницы.

Форматирование текста[править | править код]

Тэг Описание Тип Пример
<p>
</p>
Абзац с новой строки. Абзацы разделяются отбивкой — увеличенным отступом по вертикали. блочный
элемент

Абзац 1 текст текст текст текст текст текст.

Абзац 2 текст текст текст текст текст текст.

<span>
</span>
HTML-тег для добавления в текст встроенных стилей (CSS), так называемая стилевая «обёртка» для текста. Работает в MediaWiki. Сам по себе без стилей ничего не делает. При добавлении стилей (<span style=""></span>) может менять внешний вид текста. строчный
элемент
Например, код <span style="color:red;"></span> сделает текст красным.
<b>
</b>
Жирный шрифт (физическая разметка). В викиразметке аналогом является Полужирное начертание (''' '''). В отличие от викиразметки (''' '''), которая работает только в одной строке и не работает при переносах строки, в тег <b></b> можно заключать сразу несколько строк, и он работает при наличии переносов. строчный
элемент
текст
<strong>
</strong>
Жирный шрифт (логическая разметка). строчный
элемент
текст
<i>
</i>
Курсив (физическая разметка). В викиразметке аналогом является Курсивное начертание ('' ''). В отличие от викиразметки ('' ''), которая работает только в одной строке и не работает при переносах строки, в тег <i></i> можно заключать сразу несколько строк, и он работает при наличии переносов. строчный
элемент
текст
<em>
</em>
Курсив (логическая разметка). строчный
элемент
текст
<tt>
</tt>
Моноширинный шрифт (физическая разметка). строчный
элемент
текст
<big>
</big>
Увеличивает размер шрифта. строчный
элемент
текст
<small>
</small>
Уменьшает размер шрифта. строчный
элемент
текст
<sub>
</sub>
Нижний индекс. строчный
элемент
текст
<sup>
</sup>
Верхний индекс. строчный
элемент
текст
<<u>
</u>
Подчеркивание текста. строчный
элемент
текст
<s>
</s>
Перечеркнутый текст. строчный
элемент
текст
<abbr>
</abbr>
Аббревиатура (подчеркивание пунктиром). строчный
элемент
текст
<dfn>
</dfn>
Новый термин в тексте (курсив). строчный
элемент
текст
<kbd>
</kbd>
Текст на клавиатуре (моноширинный шрифт). строчный
элемент
текст
<samp>
</samp>
Вывод компьютерной программы. строчный
элемент
текст
<font>
</font>
Тег, указывающий тип, размер и цвет шрифта. строчный
элемент
Например, код <font color="green" face="serif" size="5">текст</font> даёт текст:
текст

Цитаты[править | править код]

Тэг Описание Тип Пример
<blockquote>
</blockquote>
Цитата. Начинается всегда с красной строки. блочный
элемент

Текст цитаты

<cite>
</cite>
В этот тег помещается ссылка на источник цитируемого текста. Отображается курсивным шрифтом. Применяется обычно совместно с тегом <blockquote></blockquote>, помещается внутри него. строчный
элемент
Ссылка на источник цитаты.

Списки[править | править код]

Списки в HTML являются блочными элементами с новой строки.

Тэг Описание Пример
<ul>
<li>Строка 1</li>
<li>Строка 2</li>
</ul>
Маркированный список. В викиразметке его аналогом является символ *, применяемый в начале новой строки. HTML-теги, в отличие от викиразметки, работают не только с новой строки, но и в любом месте.
  • Строка 1
  • Строка 2
<ol>
<li>Строка 1</li>
<li>Строка 2</li>
</ol>
Нумерованный список. В викиразметке его аналогом является символ #, применяемый в начале новой строки. HTML-теги, в отличие от викиразметки, работают не только с новой строки, но и в любом месте.
  1. Строка 1
  2. Строка 2
<dl>
<dt>Термин</dt>
<dd>Определение термина</dd>
</dl>
Список определений. В викиразметке ему соответствуют символы с новой строки:
;Термин
:Определение термина
Термин
Определение термина.

Таблицы[править | править код]

HTML-теги таблиц,
работающие в MediaWiki
Викиразметка Значение
<table> {| Начало таблицы
<caption></caption> |+ Заголовок таблицы
<tr></tr> |- Строка таблицы
<th></th> ! Заголовок столбца
<td></td> | Ячейка таблицы
</table> |} Конец таблицы
Код
<table>

<caption>Заголовок таблицы</caption>
<tr>
<th>Заголовок1</th>
<th>Заголовок2</th>
</tr>
<tr>
<td>строка1-ячейка1</td>
<td>строка1-ячейка2</td>
</tr>
</table>

{|

|+Заголовок таблицы
|-
!Заголовок1
!Заголовок2
|-
|строка1-ячейка1
|строка1-ячейка2
|}

Код
таблицы
Результат
Заголовок таблицы
Заголовок1 Заголовок2
строка1-ячейка1 строка1-ячейка2
Заголовок таблицы
Заголовок1 Заголовок2
строка1-ячейка1 строка1-ячейка2
Общий
вид
таблицы

Прочие HTML-теги[править | править код]

<div></div> — блочный HTML-тег, являющийся «обёрткой» для своего содержимого, меняющей его отображение на основе стилей (CSS). Работает и в HTML, и в википроектах наряду с викиразметкой.

<br> — перенос строки. В викиразметке применяется как <br />, но работают оба варианта.

<hr> — горизонтальная линия. В викиразметке её аналогом является последовательность ---- с новой строки. Сам этот тег в вики работает, но атрибуты и стилевые свойства для него не работают.

<pre></pre> — отмена форматирования (моноширинный шрифт).

<center></center> — выравнивает содержимое по центру. Работает в MediaWiki и в HTML, но в HTML является устаревшим тегом и не рекомендуется к применению.

<!-- --> — комментарий в коде. Работает как в HTML, так и в викиразметке.

HTML-теги, не работающие в MediaWiki[править | править код]

Следующие HTML-теги не работают при помещении их в коде викистраницы:

Теги <html></html>, <head></head>, <body></body>, <title></title>, <link></link>, <meta></meta> в коде викистраницы всегда отключены.

<acronym></acronym> — акроним (подчеркивание пунктиром).

<q></q> — кавычки.

<a></a> — веб-ссылка. В MediaWiki данный HTML-код не работает, вместо него применяется конструкция [http://www.example.com внешняя ссылка]:

<a href="URL"></a> — ссылка на URL
<a name="якорь"></a> — определения якоря внутри страницы. В викиразметке в качестве якорей выступают заголовки разделов. Для произвольной расстановки якорей в теле статьи используется шаблон {{anchor}}.
<a href="#якорь"></a> — ссылка на якорь. В викиразметке вместо этого используются внутренние ссылки с указанием разделов ([[Название страницы#Раздел]]).

<img> — непарный HTML-тег, размещающий на веб-странице изображение. В MediaWiki не работает. В викиразметке вместо него используется конструкция [[Файл:Имя файла.jpg]], вставляющая на викистранице изображение, предварительно загруженное в википроект.

<thead></thead>, <tfoot></tfoot>, <tbody></tbody>, <col>табличные HTML-теги, не работающие в коде викистраниц.

<marquee></marquee> — бегущая строка в HTML. В MediaWiki не работает.

Стилевые свойства, не работающие в MediaWiki[править | править код]

В википроектах в случае применения в коде страниц HTML-тегов со встроенными стилями CSS не все стилевые свойства работают:

  • background-image: url(путь к файлу) — данное стилевое свойство добавляет в блочный элемент HTML фоновое изображение на основе гиперссылки на файл изображения. Не работает в MediaWiki (в том числе, в теге <div> и HTML-тегах таблиц, в викиразметке таблиц).
  • Параметр type="" для тега маркированного списка <ul> имеет фиксированное значение (в Викиреальности это square) и не может быть изменён.

Ссылки[править | править код]


HTML в MediaWiki относится к темам:
[[Шаблон:Навигация/HTML|Шаблон:Навигация/HTML]] MediaWiki
1