HTML

HTML (HyperText Markup Language, язык гипертекстовой разметки) — стандартный язык разметки документов в Интернете. На Фэндоме редакторы могут использовать как HTML, так и викиразметку. Несмотря на то, что последнюю применять предпочтительнее, она так или иначе преобразуется в HTML парсером.

Важно отметить, что при использовании HTML на Фэндоме нет необходимости использовать некоторые теги (html, head и body), поскольку они добавляются MediaWiki автоматически.

Использование

Рассматривая HTML, стоит выделить два уровня его использования:

• На всей странице — если просмотреть исходный код любой страницы на Фэндоме с помощью инструментов разработчика, то можно увидеть, что она использует HTML. В данном случае можно найти ранее написанные теги html, head и другие, однако для обычных пользователей они практически не представляют никакого интереса.
• В редакторах — при изменении страниц можно использовать HTML для модификации отображения содержимого (данная возможность используется почти на каждом проекте).

Описание

Язык гипертекстовой разметки HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986—1991 годах в стенах ЦЕРНа в Женеве. HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. Изначально HTML являлся приложением SGML (Standard Generalized Markup Language — стандартный обобщённый язык разметки) и при этом был проще его, а также позволял использовать гипертекст, то есть ссылки.

Со временем HTML приобретал новые возможности (поддержка мультимедийных элементов, форм и т.д.), в итоге став практически стандартом для создания web-страниц. Этому способствовала и относительно невысокая сложность языка, и его активное продвижение. На данный момент актуальной версией HTML является HTML5, который применяется на Фэндоме.

Характеристика

HTML — это теговый язык разметки документов, то есть любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками, называемыми тегами. HTML достаточно «спокойно» относится к неправильному использованию разметки. Например, если в тексте есть два открывающих тега и лишь один закрывающий, это не приведёт к тому, что документ не будет отображаться (но, скорее всего, внешний вид страницы будет не таким, каким был задуман).

Как уже было сказано ранее, актуальной версией языка является HTML5 (англ. HyperText Markup Language, version 5). Его разработка которого началась ещё в 2004 году, а его публикация была произведена 28 октября 2014 года. Целью разработки HTML5 является улучшение уровня поддержки мультимедиа-технологий с одновременным сохранением обратной совместимости и удобочитаемости кода для человека.

В HTML5 реализовано множество новых синтаксических особенностей. Например, элементы <video>, <audio> и <canvas>, а также возможность использования SVG и математических формул. Кроме того появились теги для формирования структуры страницы — <header>, <footer>, <nav>, и т. д. Одновременно с этим <center> и <font> были признаны устаревшими (это означает, что стоит отказаться от их использования, так как поддержка этих элементов может быть прекращена в любой момент).

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

Теги

Теги (также Дескрипторы) — важный элемент разметки при редактировании, придаёт словам или предложениям определённые особенности. Общий синтаксис написания тегов следующий:

• <тег атрибут1="значение" атрибут2="значение" />
• <тег атрибут1="значение" атрибут2="значение">...</тег>

Как видно из примеров, существуют два вида тегов: одиночные и парные. Одиночный тег используется самостоятельно, а парный чаще всего служит для включения внутрь себя текста (в том числе и других тегов). Также при использовании тегов важно соблюдать следующие правила:

• Если вы используете теги внутри тегов, то их следует правильно закрывать: содержимое одного тега не должно «пересекаться» с другим. Например, конструкция <div><span><sub>Тут текст...</sub></span></div> написана правильно и не вызовет ошибок.
• Не забывайте закрывать все теги (в этом особенно помогает подсветка в классическом исходном коде);
• Все атрибуты нужно помещать в двойные (желательно) или одинарные кавычки;
• Теги можно писать как прописными, так и строчными буквами. Тем не менее рекомендуется задавать их строчными буквами и не использовать разные варианты написания в рамках одной страницы;
• Между атрибутами можно добавлять переносы строк, однако это не рекомендуется;
• Использование неизвестных или недоступных на Фэндоме тегов приведёт к тому, что они будут показаны как обычный текст.

Атрибуты

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

• Цвет;
• Размер;
• Адрес.

На Фэндоме можно найти примеры применения всех трёх видов, однако чаще всего используется изменение цвета (поскольку размер и адрес практически всегда задаются через викиразметку).

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

• style — позволяет задать стиль для элемента непосредственно на странице;
• class — задает класс элемента (в дальнейшем можно изменить оформление на страницах MediaWiki);
• id — по своему принципу похож на class, но задаёт элементу уникальный идентификатор.

Доступные теги

Ниже приведёт список всех тегов, которые доступны во время редактирования статей.

<abbr> <acronym> (устарел) <b> <big> (устарел) <blockquote> <br /> <caption> <center> (устарел) <cite> <code> <dd> <del> <div> <dl> <dt> <em> <font> (устарел)

<h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <ins> <li> <ol> <p> <pre> <q> <rb> <rp> <rt>

<ruby> <s> <small> <span> <strike> (устарел) <strong> <sub> <sup> <table> <td> <th> <tr> <tt> (устарел) <u> <ul> <var> <!-- ... -->

Среди них наиболее часто используемыми (и при этом не имеющих аналогов в викиразметке) являются следующие теги:

• <div> — является универсальным блочным элементом и предназначен для группирования элементов страницы с целью изменения вида содержимого через стили. Как и при использовании других блочных элементов, содержимое тега всегда начинается с новой строки, после него также добавляется перенос строки (если не изменить это поведение с помощью CSS, что не рекомендуется делать).
• <span> — предназначен для выделения отдельных строк, символов или других строчных элементов для дальнейшего изменения их оформления с помощью стилей. Менее универсален, чем <div>.
• <center> — несмотря на то, что тег считается устаревшим, его использование пока что является наиболее простым способом разместить текст по центру страницы. В качестве замены рекомендуется производить выравнивание с помощью CSS.
• <br> — данный элемент служит для переноса строк, при этом не добавляя отступ между строками. Часто используется для форматирования страниц.
• <code> — используется для отображения строк текста как фрагментов кода. Обычно браузеры отображают содержимое тега как моноширинный текст.
• <pre> — определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами.
• <blockquote> — данный элемент используется для выделения цитат на странице. Текст внутри тега отображается как выровненный блок с отступами.
• <!-- ... --> — использование комментариев в исходном коде страницы помогает выделить те места, которые необходимо изменить. Для обычных пользователей они не будут видны.

Сравнение с викиразметкой

HTML сложнее викиразметки и, в отличие от последней, полностью построен на тегах. В викиразметке многие элементы проще в добавлении, однако не всегда к ней можно применить стили оформления (например, для тега <hr /> удобнее указать нужный класс, чем для его аналога в викиразметке).

Ниже приведены примеры фрагментов текста в html и викиразметке:

Викиразметка	HTML	Результат
'''Жирный текст'''	<b>Жирный текст</b>	Жирный текст
	<strong>Жирный текст</strong>
''Курсив''	<i>Курсив</i>	Курсив
	<em>Курсив</em>
----	<hr />
;Описание :Информация	<dl> <dt>Описание</dt> <dd>Информация</dd> </dl>	Описание Информация
* Элементы * Маркированного * Списка	<ul> <li>Элементы</li> <li>Маркированного</li> <li>Списка</li> </ul>	Элементы Маркированного Списка
# Элементы # Нумерованного # Списка	<ol> <li>Элементы</li> <li>Нумерованного</li> <li>Списка</li> </ol>	Элементы Нумерованного Списка
{| border="1" |- |+ Заголовок ! колонка 1 | колонка 2 |}	<table border="1"> <caption>Заголовок</caption> <tbody><tr> <th> колонка 1</th> <td> колонка 2</td> </tr></tbody></table>	Заголовок колонка 1 колонка 2

Также каждому заголовку раздела соответствует свой тег <h1></h1> для = Заголовка с одним тире =,<h2></h2> для == Заголовка с двумя == и т.д. вплоть до <h6></h6>.