✏ Памятка по HTML разметке на форуме или как красиво оформить пост

/in progress/

Всем привет! :sunglasses:

Новый форум имеет много функциональных новшеств в сравнении со старым. Не все они очевидны и понятны, поэтому этот небольшой гайд поможет вам разобраться с оформлением тем. :pencil2::scroll:

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

:white_check_mark: Полужирный ctrl+B

<b>Пишем полужирным!</b>Пишем полужирным!
Также работают теги:
<strong>Hello world!</strong>
[b]Hello world![/b]
**Hello world!**
__Hello world!__

Hello world!

:white_check_mark: Курсив ctrl+I

<i>Пишем курсивом!</i>Пишем курсивом!
Также работают теги:
<i>Hello world!</i>
<em>Hello world!</em>
[i]Hello world![/i]
*Hello world!*
_Hello world!_

Hello world!

:white_check_mark: Зачеркнутый s

<s>Пишем зачеркнутым</s>Пишем зачеркнутым
Также работают теги:
<s>Hello world!</s>
<strike>Hello world!</strike>
[s]Hello world![/s]
~~Hello world!~~

Hello world!

:white_check_mark: Аббревиатуры

Для просмотра значения аббревиатуры нужно навести мышку.

<abbr title="Good Luck, Have Fun!">GL, HF!</abbr>GL, HF!

:white_check_mark: Добавленный блок текста

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

<ins>Добавленный текст</ins>Добавленный текст

:white_check_mark: Удаленный блок текста

Специальный тег для того, чтобы указать, какой фрагмент текста был удален.

<del>Удаленный текст/del>Удаленный текст

:white_check_mark: Текст-клавиша

Позволяет выделить букву или фразу так, что она становится похоже на кнопку.

Нажмите <kbd>Ctrl</kbd> + <kbd>Esc</kbd> + <kbd>N</kbd> чтобы открыть меню «Старт» ⇒ Нажмите Ctrl + Esc чтобы открыть меню «Старт»

:white_check_mark: Цитата Control+Shift+9

[quote]Цитируемый текст[/quote]
Также работают теги:
<blockquote>Цитируемый текст</blockquote>
> Цитируемый текст

Цитируемый текст

:white_check_mark: Отформатированный текст Control+Shift+C

<code>Hello world!</code>
Также работают теги:
[code]Hello world![/code]
~~~
Hello world!
~~~

Hello world!

:white_check_mark: Надстрочный текст

Например, формулы:

B<sup>2</sup>-4AC ⇒ B2-4AC

:white_check_mark: Подстрочный текст

И не только математические:

C<sub>2</sub>H<sub>5</sub>OH ⇒ C2H5OH

Выравнивание

:white_check_mark: Выравнивание по левому краю.

<div align="left">Hello world!</div>

Hello world!

:white_check_mark: Выравнивание по центру.

<div align="center">Hello world!</div>

Hello world!

:white_check_mark: Выравнивание по правому краю.

<div align="right">Hello world!</div>

Hello world!

:white_check_mark: Выравнивание по левому и правому краю.

<div align="justify">В начале каждого года в Hearthstone мы производим переоценку карт из базового и классического набора. По мере развития игры уже определились четкие особенности каждого класса, и некоторые карты из этих наборов иногда вступают в противоречие с общей концепцией. Каждый год мы переводим такие карты в «Зал славы», чтобы они не нарушали уникальные архетипы классов, сглаживая их сильные и слабые стороны.</div>

В начале каждого года в Hearthstone мы производим переоценку карт из базового и классического набора. По мере развития игры уже определились четкие особенности каждого класса, и некоторые карты из этих наборов иногда вступают в противоречие с общей концепцией. Каждый год мы переводим такие карты в «Зал славы», чтобы они не нарушали уникальные архетипы классов, сглаживая их сильные и слабые стороны.

:white_check_mark: Отступ текста

Немного сдвигает текст так, что можно делать красивые описания.

<b>Зажжем в год Дракона!</b>
<dd>Вот и наступила заветная пора, когда часы Hearthstone начали отсчет нового цикла. Приготовьтесь встречать новый год в Hearthstone — год Дракона!</dd>

Зажжем в год Дракона!

Вот и наступила заветная пора, когда часы Hearthstone начали отсчет нового цикла. Приготовьтесь встречать новый год в Hearthstone — год Дракона!

:white_check_mark: Неразрывный пробел

Хотите сделать расстояние между буквами\словами?

Hello &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; world!

Hello         world!

Размеры текста

:white_check_mark: Большой текст

<big>Здоровенный текст</big>Здоровенный текст

:white_check_mark: Маленький текст

<small>Малюсенький текстуля</small>Малюсенький текстуля

:white_check_mark: Заголовок 1

<h1>Заголовок</h1>
# Заголовок

Заголовок

:white_check_mark: Заголовок 2

<h2>Заголовок</h2>
## Заголовок

Заголовок

:white_check_mark: Заголовок 3

<h3>Заголовок</h3>
### Заголовок

Заголовок

:white_check_mark: Заголовок 4

<h4>Заголовок</h4>
#### Заголовок

Заголовок

:white_check_mark: Заголовок 5

<h5>Заголовок</h5>
##### Заголовок

Заголовок

:white_check_mark: Заголовок 6

<h6>Заголовок</h6>
###### Заголовок

Заголовок
Таблицы и списки

Таблицы

:white_check_mark: Таблица (простая)

Этот способ для выравнивания каждого столбца с помощью : и -.

| Столбец 1 | Столбец 2 | Столбец 3 |
| :-- | :-: | --: |
| 1 | 2 | 3 |
| Влево | Центр| Вправо|
| 4 | 5 | 6 |
Столбец 1 Столбец 2 Столбец 3
1 2 3
Влево Центр Право
4 5 6

:white_check_mark: Таблица (расширенная)

Тег 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

:white_check_mark: Ненумерованный список Control+Shift+8

Аналогично состоит из общего тега «ul» — unordered list (ненумерованный список) и отдельных на каждый элементов тегов «li» — list item (элемент списка).

<ul>
<li>Легенда</li>
<li>10 ранг</li>
<li>50 ранг</li>
</ul>

  • Легенда
  • 10 ранг
  • 50 ранг

:white_check_mark: Нумерованный список Control+Shift+7

Здесь открывающий тег уже «ol» — ordered list (нумерованный список) и продолжается с «li» на каждый элемент. Здесь допустимо задать параметр, с которого начнётся отсчёт — start.

<ol start="5">
<li>Легенда</li>
<li>10 ранг</li>
<li>50 ранг</li>
</ol>

  1. Легенда
  2. 10 ранг
  3. 50 ранг
Прочее

:white_check_mark: Перевод строки

Срочный перевод<br>строки! ⇨ Срочный перевод
строки!

:white_check_mark: Спойлер

Два тега вместе, общий details и «заголовок» summary:

<details><summary>Просто магия...</summary><img src="https://media.giphy.com/media/1pAe88hQLZ376QO2jM/giphy.gif"></img></details>

Просто магия...

:white_check_mark: Горизонтальная линия

Красивая линия. Идеально для подписи!

<hr>
***


:white_check_mark: Заголовок с ссылкой

<h2 id=heading--primer>Заголовок с ссылкой</h2>Заголовок с ссылкой

:white_check_mark: Рамка

Тег создает пустую рамку. Размер задается с помощью width и height.

<iframe width="300" height="145">

:warning: Описанные выше опции доступны почти всем участникам форума (подробнее о ролях). Ниже опции доступные при более высоком уровне доверия:

Ссылки и картинки

:white_check_mark: Ссылки

Основа Интернета!

<a href="https://eu.forums.blizzard.com/ru/hearthstone/">Форум игры</a>Форум игры

Примечание : форум умеет делать красивые превью по ссылкам. Т.е. можно просто вставить ссылку на один из поддерживаемых ресурсов и опубликовать. Поддерживает: ссылки внутри Battle.net\Blizzard.com, Twitter, Imgur, Youtube, Vimeo, Reddit, Giphy и пр.

:white_check_mark: Картинки

Тег img, который позволяет использовать такие параметры как:

  • src — ссылка на картинку
  • alt — текст который будет отображаться вместо картинки если она, например, удалена (необязательный);
  • width — ширина (необязательный);
  • height — высота (необязательный);

Допустимые форматы .jpg, .jpeg, .png, .gif и .bmp

<img src="https://i.imgur.com/KyLjAIw.png" alt="Мяу!" width="" height="200" />

Мяу!

:white_check_mark: Картинка со ссылкой

Секретная техника заключается в том, чтобы вместо текста вписать между тегами А тег с картинкой.

<a href="https://www.hearthpwn.com/cards/22325-aviana"><img src="https://i.imgur.com/83v7UKP.png" width="140" height="200" /></a>

Видео\Аудио Форум автоматически распознает некоторые ссылки с медиа информацией.

:white_check_mark: Аудио

Форум понимает формат .ogg. Плеер вставится автоматически.

:white_check_mark: Видео

Форум поддерживает несколько дефолтных площадок. Просто вставьте ссылку на видео.

Youtube
Vimeo

Twitch

Giphy

Опросы

Увы, этот функционал не поддерживается обычной html-разметкой, и придётся прибегнуть к языку «markdown». Он довольно сильно распространён, и частично используется в чатах battle.net и Discord. Вместо угловых скобок <> для обозначения тегов в нём используются в данном случае квадратные [].

:white_check_mark: Опрос с возможностью выбора 1 варианта

[poll name="1 вариант"]
* Легенда
* Ранг 5
* Ранг 10
* Ранг 50
[/poll]

:white_check_mark: Опрос с возможностью множественного выбора

Особенностью здесь является параметр type который укажет, что выбирать можно будет больше, чем 1 вариант, а так же параметры min и max которые, соответственно, указывают минимальное количество для выбора и максимальное.

[poll type=multiple min=2 max=3]
* Легенда
* Ранг 5
* Ранг 10
* Ранг 25
* Ранг 50
[/poll]

:white_check_mark: Числовой опрос

Здесь есть так же необязательный параметр step, который задаёт «шаг».

[poll type=number min=1 max=9 step=3] [/poll]

Оригинальный пост © Pachimari

Лайков: 13

Эм…Может надо было всё же не просто взять и перекопировать, а сравнить и проверить где правильно написал и “сработало”? а то примеры корявые… да и последнюю строчку можно было перевести…))

This guide was inspired with original Pachimari’s post.

Да, спасибо за замечания. Я еще редактирую тему и напишу больше, когда права отсыпят. :smiley:

А как красивее всего скопированные деки размещать?

Напомню, что если вы хотите, чтобы короткое сообщение выглядело прилично и не хотите к нему добавлять фразочки по типу “20 символов!!”, то можно просто приписать к тексту любой несуществующий тэг, например < fasfagasga >(без пробелов). Он отображаться в сообщении не будет, но в учет количества символов пойдет.

Лайков: 8

Лучше всего кодом:

AAECAR8MyQT+DNPFAs/HAtPNAsLOAobTApboAvLqAqbwAqCAA5uFAwn7AbUDxQjd0gLf0gLj0gLh4wKH+wKnigMA

Если мы говорим про большой код, то лучше ставить спойлер (а там уже внутри что хочешь писать):

Спойлер на большую деку

Пристодавка

Класс: Друид

# Формат: Вольный
#
# 1x (1) Исполины джунглей
# 2x (3) Вайш'ирский оракул
# 2x (3) Защитник холмов
# 2x (4) Быстроногая вестница
# 1x (4) Волхвица Умбра
# 2x (4) Проклятый ученик
# 2x (4) Развилка
# 2x (4) Ядовитые семена
# 2x (5) Охотница на грязней
# 2x (5) Плотоядный куб
# 2x (5) Пряха Судьбы
# 1x (6) Моджомастер Зихи
# 2x (6) Нерубский мастер сетей
# 2x (7) Аманийский медведь
# 1x (7) Графиня Эшмор
# 1x (8) Безумный доктор
# 1x (9) Хадронокс
# 1x (10) Н'Зот
# 1x (10) Тотальное заражение
# 
AAEBAbSKAwjgrAKLwQLJwgKHzgKv0wLA7AKb8ALAjwML+AeKDpvCAvfMAqfOAp7SAovhAprkApDvAvbzAtiMAwA=
# 
# Чтобы использовать эту колоду, скопируйте ее в буфер обмена и создайте новую колоду в Hearthstone.

Я бы еще добавил

<h2 id=heading--with-link>Заголовок с ссылкой</h2>
[ссылка](#heading--with-link)

превращается в

ссылка


идентификатор должен начинаться с heading-- а дальше любой текст.

Обновил тему: скорректировал неработающие теги, добавил информация по картинкам, ссылкам, видео и опросам. Свои замечание и предложения пишите в этой теме с тегом @SoVa. Спасибо!

Если вдруг кто-то не сразу осилил как же этот спойлер делается, то вот вам пример более интуитивно понятный.
<details><summary>Название Спойлера</summary>Текст, скрытый спойлером</details>

Название СпойлераТекст, скрытый спойлером
3 Симпатий

Аббревиатуры не работают.

ВСНР

ВНРОИВПА

Просто стало интересноÕ Ō Ø Œ Ó Ò Ö Ô O

À Á Â Ä Æ Ã Å Ā A

È É Ê Ë Ē Ė Ę

Ÿ Y

Ū Ú Ù Ü Û U

Ì Į Ī Í Ï Î I

Ś Š

Ł L

Ž Ź Ż Z

Ç Ć Č C

Ń Ñ N


:thinking:

На телефоне, кстати, этот пунктир выглядит линией.
Ща покажу.

h.ttps://imgur.com/a/IwJtegx

Лайков: 1

Все работает, но в посте у меня действительно была ошибочка в коде. Исправлено.

Что касается отображения точек у меня в Хроме тоже не под всеми буквами они есть. Но это не косяк форума, а формат отображения в зависимости от ос\браузера\настроек. : )

Да, также на iOS.

Лайков: 1

Странно это, ведь зелёный текст и подчёркивание работают нормально и там, и тут, а вот с Аббревиатурами (их подчёркиванием по умолчанию) проблема на некоторых устройствах браузерах.

Тут не в устройстве дело, а в браузере.
https://i.imgur.com/uZoCM4L.png
Слева IE, справа Опера.

Кстати, если в Опере поставить увеличение текста на 125%, то проблема пропадает.

Ага, на iOS также. Вообще в грамматике html подчеркивание это все-таки гиперссылка (традиция). А вот всякие всплывающие значения это пунктиры\точки.

Лайков: 1

Или 90%.

С кириллицей и цифрами не пашет. С латиницей ок.