/in progress/
Всем привет!
Новый форум имеет много функциональных новшеств в сравнении со старым. Не все они очевидны и понятны, поэтому этот небольшой гайд поможет вам разобраться с оформлением тем.
Форматирование текста
Полужирный ctrl+B
<b>Пишем полужирным!</b>
⇒ Пишем полужирным!
Также работают теги:
<strong>Hello world!</strong>
[b]Hello world![/b]
**Hello world!**
__Hello world!__
⇓
Hello world!
Курсив ctrl+I
<i>Пишем курсивом!</i>
⇒ Пишем курсивом!
Также работают теги:
<i>Hello world!</i>
<em>Hello world!</em>
[i]Hello world![/i]
*Hello world!*
_Hello world!_
⇓
Hello world!
Зачеркнутый s
<s>Пишем зачеркнутым</s>
⇒Пишем зачеркнутым
Также работают теги:
<s>Hello world!</s>
<strike>Hello world!</strike>
[s]Hello world![/s]
~~Hello world!~~
⇓
Hello world!
Аббревиатуры
Для просмотра значения аббревиатуры нужно навести мышку.
<abbr title="Good Luck, Have Fun!">GL, HF!</abbr>
⇒ GL, HF!
Добавленный блок текста
Специальный тег для того, чтобы указать, какой фрагмент текста был добавлен.
<ins>Добавленный текст</ins>
⇒ Добавленный текст
Удаленный блок текста
Специальный тег для того, чтобы указать, какой фрагмент текста был удален.
<del>Удаленный текст/del>
⇒Удаленный текст
Текст-клавиша
Позволяет выделить букву или фразу так, что она становится похоже на кнопку.
Нажмите <kbd>Ctrl</kbd> + <kbd>Esc</kbd> + <kbd>N</kbd> чтобы открыть меню «Старт»
⇒ Нажмите Ctrl + Esc чтобы открыть меню «Старт»
Цитата Control+Shift+9
[quote]Цитируемый текст[/quote]
Также работают теги:
<blockquote>Цитируемый текст</blockquote>
> Цитируемый текст
⇓Цитируемый текст
Отформатированный текст Control+Shift+C
<code>Hello world!</code>
Также работают теги:
[code]Hello world![/code]
~~~
Hello world!
~~~
⇓
Hello world!
Надстрочный текст
Например, формулы:
B<sup>2</sup>-4AC
⇒ B2-4AC
Подстрочный текст
И не только математические:
C<sub>2</sub>H<sub>5</sub>OH
⇒ C2H5OH
Выравнивание
Выравнивание по левому краю.
<div align="left">Hello world!</div>
⇓Hello world!
Выравнивание по центру.
<div align="center">Hello world!</div>
⇓Hello world!
Выравнивание по правому краю.
<div align="right">Hello world!</div>
⇓Hello world!
Выравнивание по левому и правому краю.
<div align="justify">В начале каждого года в Hearthstone мы производим переоценку карт из базового и классического набора. По мере развития игры уже определились четкие особенности каждого класса, и некоторые карты из этих наборов иногда вступают в противоречие с общей концепцией. Каждый год мы переводим такие карты в «Зал славы», чтобы они не нарушали уникальные архетипы классов, сглаживая их сильные и слабые стороны.</div>
⇓В начале каждого года в Hearthstone мы производим переоценку карт из базового и классического набора. По мере развития игры уже определились четкие особенности каждого класса, и некоторые карты из этих наборов иногда вступают в противоречие с общей концепцией. Каждый год мы переводим такие карты в «Зал славы», чтобы они не нарушали уникальные архетипы классов, сглаживая их сильные и слабые стороны.
Отступ текста
Немного сдвигает текст так, что можно делать красивые описания.
<b>Зажжем в год Дракона!</b>
<dd>Вот и наступила заветная пора, когда часы Hearthstone начали отсчет нового цикла. Приготовьтесь встречать новый год в Hearthstone — год Дракона!</dd>
⇩
Зажжем в год Дракона!Вот и наступила заветная пора, когда часы Hearthstone начали отсчет нового цикла. Приготовьтесь встречать новый год в Hearthstone — год Дракона!
Неразрывный пробел
Хотите сделать расстояние между буквами\словами?
Hello world!
⇓
Hello world!
Размеры текста
Большой текст
<big>Здоровенный текст</big>
⇒ Здоровенный текст
Маленький текст
<small>Малюсенький текстуля</small>
⇒ Малюсенький текстуля
Заголовок 1
<h1>Заголовок</h1>
# Заголовок
⇓Заголовок
Заголовок 2
<h2>Заголовок</h2>
## Заголовок
⇓Заголовок
Заголовок 3
<h3>Заголовок</h3>
### Заголовок
⇓Заголовок
Заголовок 4
<h4>Заголовок</h4>
⇒
#### Заголовок
⇓Заголовок
Заголовок 5
<h5>Заголовок</h5>
##### Заголовок
⇓Заголовок
Заголовок 6
<h6>Заголовок</h6>
###### Заголовок
⇓Заголовок
Таблицы и списки
Таблицы
Таблица (простая)
Этот способ для выравнивания каждого столбца с помощью : и -.
| Столбец 1 | Столбец 2 | Столбец 3 |
| :-- | :-: | --: |
| 1 | 2 | 3 |
| Влево | Центр| Вправо|
| 4 | 5 | 6 |
Столбец 1 | Столбец 2 | Столбец 3 |
---|---|---|
1 | 2 | 3 |
Влево | Центр | Право |
4 | 5 | 6 |
Таблица (расширенная)
Тег table служит контейнером для элементов таблицы.
Тег th служит для создания одной ячейки таблицы (заглавной)
Тег td служит для создания содержимого ячейки.
Тег tr служит для создания строки таблицы.
<table>
<th>Столбец 1</th>
<th>Столбец 2</th>
<th>Столбец 3</th>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</table>
Столбец 1 | Столбец 2 | Столбец 3 |
---|---|---|
1 | 2 | 3 |
4 | 5 | 6 |
Ненумерованный список Control+Shift+8
Аналогично состоит из общего тега «ul» — unordered list (ненумерованный список) и отдельных на каждый элементов тегов «li» — list item (элемент списка).
<ul>
<li>Легенда</li>
<li>10 ранг</li>
<li>50 ранг</li>
</ul>
⇩
- Легенда
- 10 ранг
- 50 ранг
Нумерованный список Control+Shift+7
Здесь открывающий тег уже «ol» — ordered list (нумерованный список) и продолжается с «li» на каждый элемент. Здесь допустимо задать параметр, с которого начнётся отсчёт — start.
<ol start="5">
<li>Легенда</li>
<li>10 ранг</li>
<li>50 ранг</li>
</ol>
⇩
- Легенда
- 10 ранг
- 50 ранг
Прочее
Перевод строки
Срочный перевод<br>строки!
⇨ Срочный перевод
строки!
Спойлер
Два тега вместе, общий details и «заголовок» summary:
<details><summary>Просто магия...</summary><img src="https://media.giphy.com/media/1pAe88hQLZ376QO2jM/giphy.gif"></img></details>
⇩Просто магия...
Горизонтальная линия
Красивая линия. Идеально для подписи!
<hr>
***
⇩
Заголовок с ссылкой
<h2 id=heading--primer>Заголовок с ссылкой</h2>
⇒ Заголовок с ссылкой
Рамка
Тег создает пустую рамку. Размер задается с помощью width и height.
<iframe width="300" height="145">
⇩
Описанные выше опции доступны почти всем участникам форума (подробнее о ролях). Ниже опции доступные при более высоком уровне доверия:
Ссылки и картинки
Ссылки
Основа Интернета!
<a href="https://eu.forums.blizzard.com/ru/hearthstone/">Форум игры</a>
⇒ Форум игры
Примечание : форум умеет делать красивые превью по ссылкам. Т.е. можно просто вставить ссылку на один из поддерживаемых ресурсов и опубликовать. Поддерживает: ссылки внутри Battle.net\Blizzard.com, Twitter, Imgur, Youtube, Vimeo, Reddit, Giphy и пр.
Картинки
Тег img, который позволяет использовать такие параметры как:
- src — ссылка на картинку
- alt — текст который будет отображаться вместо картинки если она, например, удалена (необязательный);
- width — ширина (необязательный);
- height — высота (необязательный);
Допустимые форматы .jpg, .jpeg, .png, .gif и .bmp
<img src="https://i.imgur.com/KyLjAIw.png" alt="Мяу!" width="" height="200" />
⇩
Картинка со ссылкой
Секретная техника заключается в том, чтобы вместо текста вписать между тегами А тег с картинкой.
<a href="https://www.hearthpwn.com/cards/22325-aviana"><img src="https://i.imgur.com/83v7UKP.png" width="140" height="200" /></a>
⇩
Видео\Аудио
Форум автоматически распознает некоторые ссылки с медиа информацией.Аудио
Форум понимает формат .ogg
. Плеер вставится автоматически.
Видео
Форум поддерживает несколько дефолтных площадок. Просто вставьте ссылку на видео.
Twitch
Giphy
Опросы
Увы, этот функционал не поддерживается обычной html-разметкой, и придётся прибегнуть к языку «markdown». Он довольно сильно распространён, и частично используется в чатах battle.net и Discord. Вместо угловых скобок <> для обозначения тегов в нём используются в данном случае квадратные [].
Опрос с возможностью выбора 1 варианта
[poll name="1 вариант"]
* Легенда
* Ранг 5
* Ранг 10
* Ранг 50
[/poll]
Опрос с возможностью множественного выбора
Особенностью здесь является параметр type который укажет, что выбирать можно будет больше, чем 1 вариант, а так же параметры min и max которые, соответственно, указывают минимальное количество для выбора и максимальное.
[poll type=multiple min=2 max=3]
* Легенда
* Ранг 5
* Ранг 10
* Ранг 25
* Ранг 50
[/poll]
Числовой опрос
Здесь есть так же необязательный параметр step, который задаёт «шаг».
[poll type=number min=1 max=9 step=3] [/poll]
Оригинальный пост © Pachimari