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

SoVa-2298 · Июль 10, 2019, 4:45д. п.

/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 ⇒ B²-4AC

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

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

C<sub>2</sub>H<sub>5</sub>OH ⇒ C₂H₅OH

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

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

<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">Diablo III — игра в жанре action-RPG, события которой разворачиваются в мрачном фэнтэзийном мире – Санктуарии. Вы управляете героем, который сражается в стремительных схватках с чудовищами: достойное испытание скорости реакции и тактической смекалки. Вы будете убивать бесчисленные полчища монстров и сражаться с боссами; чем дальше вы продвинетесь, тем больше опыта, способностей и новых навыков, а также невероятно могущественных артефактов вы получите.</div>
⇓
Diablo III — игра в жанре action-RPG, события которой разворачиваются в мрачном фэнтэзийном мире – Санктуарии. Вы управляете героем, который сражается в стремительных схватках с чудовищами: достойное испытание скорости реакции и тактической смекалки. Вы будете убивать бесчисленные полчища монстров и сражаться с боссами; чем дальше вы продвинетесь, тем больше опыта, способностей и новых навыков, а также невероятно могущественных артефактов вы получите.

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

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

<b>Предыстория</b>
<dd>Демоны пылающей Преисподней давно горели желанием покорить мир людей. Могущественные владыки демонических полчищ, известные нам как малые воплощения зла, изгнали своих родичей, Великих воплощений зла, из Преисподней в Санктуарий, обитель людей.</dd>
⇩
Предыстория

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

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

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

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/d3/">Форум игры</a> ⇒ Форум игры

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

Картинки

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

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

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

<img src="https://blzmedia-a.akamaihd.net/d3/media/artwork/artwork-class-barbarian02-large.jpg" alt="" width="" height="200" />
⇩

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

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

<a href="https://eu.diablo3.com/ru/class/barbarian/"><img src="https://blzmedia-a.akamaihd.net/d3/media/artwork/artwork-0097-large.jpg" width="140" height="200" /></a> ⇩

Видео\Аудио

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

Аудио

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

Видео

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

Youtube

Vimeo

Twitch

Giphy

Video Games Diablo GIF - Find & Share on GIPHY

Опросы

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

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

[poll name="1 вариант"]
* Варвар
* Монах
* Чародейка
* Охотник на демонов
[/poll]

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

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

[poll type=multiple min=2 max=3]
* Варвар
* Монах
* Чародейка
* Охотник на демонов
[/poll]

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

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

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

SoVa-2298 · Июль 29, 2019, 8:20д. п.

В тему внесены мелкие правки и корректировки.
Если у вас есть вопросы по разметке на форуме, не стесняйтесь — спрашивайте в этой теме.

ДекардКаин-2680 · Июль 30, 2019, 3:03п. п.

Ура, спойлеры!

я̵̸̧͎̪͙̖̗̘͟͠ ҉̱͍̝̘͓̟͎̰͈͉͚̼́̕ч̴̨̘͍̲̩̤͇͇̟̀͢͠ͅт̣̪̗̹̻͔͓̦̪̳͓͎̞̲̻̩̝̘͘͜͡о҉̴̧̪̖̰̙͕̙̹̝͎̺̬̀ͅ-̶͓͚̦͈̮̘̙͡т͉̞̯̰̮̠̼̩͎͕͍̩̼͔͇͖͉̠̕͞о̨̧͕͎̪͇̹̩͖͇̀͠ ̵̛͇̤̣͉̞̞͙̯̘̼͔̼͘͜н҉̡̩͈͔̠̳̼̜̱̦̼̻̠̥̭̼ͅа̢̢̞͍̲̗̜̘̙͇̭̝̙̭̱̠̮̲͚̖ж̩̭͕̠̖̗̥͍̰̮̗̤̀͢ͅа̹͍̺̱̳͈͔̣̼̯̮͜͝л̛̣͓̤͔̭͖͕̣̝̙͍͘а͎͚̩̀̕͞ͅ ̸̛̥̯͎̼̖̯̼̞̫̼̹͎͔̮̞͢͞и̧̧̛͓̟̼̘̭̝̣̙͠ ̵̵̛͎̖͖͈̱̖̬̰̫͈͈̩̦͘т̵͎̜̯͍͓̫̲̫̠̝̦̲̜̪̝̰͞е̵̵̶̻̯͙͎͇̲̙̗̬̠͉͔̙͈̖̠̯͚̞п̀͢͡͏̧͚͚̪̗͎͉͇ѐ̪̼̩̫̻͜р̫̺̠̱̹̜̼̣̱͈͞͝͡ͅь̛͍̰̗̳̰͓͡ ̨̡̛̛͖͈̯͓͔̰̲̞̻͎͙͖̟͉̻̕в̦̣͎͖̻̖̖̼͘͞с̡̨̛̟͙̝̫̲̬̯̘̪̝͉̣̻͎̺̺̩͍̖ё̢̦͎̝͈̙ ͕̰̹͉͔̝̞͘͟͞ͅн͏̸̸̷͍̙̭͇̪̝̺͎̪ͅе̢̧̭̗̪͎̝͚̮̭̬̺͞͝ͅ ̶͎̲̫̻͇͝ͅр̶̷̧̝̞̬̘̜̣̺̘͍̳ͅа͖̖̭̹̥̹̙̙̝̩̹͝б̀͜͞͏͚̬̬̦̺̝о҉̶̣̹̼̘͕͇̠͈̠̫͘͢͠ͅт̙̣̣̱̩͚̞̫̺͙̫̀͟͝а̴̰̝̤̼͢ͅе̶̨̡̲͇̰̹̺͝т̛͉̜̜̜͔̹̝̪̮̯̱̹͠

Если под спойлером есть текст, то шрифт не режется.
А если нету, как в примере внизу, то режется.
Хотя это не то, чтобы уж очень актуально))

Ура, спойлеры!

я̵̸̧͎̪͙̖̗̘͟͠ ҉̱͍̝̘͓̟͎̰͈͉͚̼́̕ч̴̨̘͍̲̩̤͇͇̟̀͢͠ͅт̣̪̗̹̻͔͓̦̪̳͓͎̞̲̻̩̝̘͘͜͡о҉̴̧̪̖̰̙͕̙̹̝͎̺̬̀ͅ-̶͓͚̦͈̮̘̙͡т͉̞̯̰̮̠̼̩͎͕͍̩̼͔͇͖͉̠̕͞о̨̧͕͎̪͇̹̩͖͇̀͠ ̵̛͇̤̣͉̞̞͙̯̘̼͔̼͘͜н҉̡̩͈͔̠̳̼̜̱̦̼̻̠̥̭̼ͅа̢̢̞͍̲̗̜̘̙͇̭̝̙̭̱̠̮̲͚̖ж̩̭͕̠̖̗̥͍̰̮̗̤̀͢ͅа̹͍̺̱̳͈͔̣̼̯̮͜͝л̛̣͓̤͔̭͖͕̣̝̙͍͘а͎͚̩̀̕͞ͅ ̸̛̥̯͎̼̖̯̼̞̫̼̹͎͔̮̞͢͞и̧̧̛͓̟̼̘̭̝̣̙͠ ̵̵̛͎̖͖͈̱̖̬̰̫͈͈̩̦͘т̵͎̜̯͍͓̫̲̫̠̝̦̲̜̪̝̰͞е̵̵̶̻̯͙͎͇̲̙̗̬̠͉͔̙͈̖̠̯͚̞п̀͢͡͏̧͚͚̪̗͎͉͇ѐ̪̼̩̫̻͜р̫̺̠̱̹̜̼̣̱͈͞͝͡ͅь̛͍̰̗̳̰͓͡ ̨̡̛̛͖͈̯͓͔̰̲̞̻͎͙͖̟͉̻̕в̦̣͎͖̻̖̖̼͘͞с̡̨̛̟͙̝̫̲̬̯̘̪̝͉̣̻͎̺̺̩͍̖ё̢̦͎̝͈̙ ͕̰̹͉͔̝̞͘͟͞ͅн͏̸̸̷͍̙̭͇̪̝̺͎̪ͅе̢̧̭̗̪͎̝͚̮̭̬̺͞͝ͅ ̶͎̲̫̻͇͝ͅр̶̷̧̝̞̬̘̜̣̺̘͍̳ͅа͖̖̭̹̥̹̙̙̝̩̹͝б̀͜͞͏͚̬̬̦̺̝о҉̶̣̹̼̘͕͇̠͈̠̫͘͢͠ͅт̙̣̣̱̩͚̞̫̺͙̫̀͟͝а̴̰̝̤̼͢ͅе̶̨̡̲͇̰̹̺͝т̛͉̜̜̜͔̹̝̪̮̯̱̹͠

SoVa-2298 · Июль 31, 2019, 6:45д. п.

Тут и других фишек много.

Кстати, спойлеры вида [details] не отображают картинки внутри себя, а такие <details> работают ок. Форум поддерживает, разумеется, оба варианта.

ХитрыйКраб-214474 · Август 2, 2019, 5:56п. п.

а цвет текста как-то можно изменить?

SoVa-2298 · Август 3, 2019, 5:13д. п.

Нет. Можно только выделение зеленым сделать. Код: <ins>текст</ins>

ХитрыйКраб-214474 · Август 3, 2019, 10:06д. п.

а можно поподробнее как сделать оглавление и как вставить текст во фрейм?
p.s.
это мне чтобы темы с ачивками привести в более удобный вид

SoVa-2298 · Август 5, 2019, 8:02д. п.

Пример кода:

<h2 id=heading--up><a href="https://eu.forums.blizzard.com/ru/d3/t/gajd-slovar-sleng-terminy-abbreviatury/34#heading--up"><kbd><b>СОДЕРЖАНИЕ</b></kbd>

На форуме никак.

ХитрыйКраб-214474 · Август 6, 2019, 8:33п. п.

спрошу по другому, как сделать рамку вокруг текста? Вот как у тебя в гайде по механике урона

SoVa-2298 · Август 6, 2019, 9:32п. п.

Это просто тег «цитата». Фрейм просто есть как отдельный тег.

Вот в него ничего не вставить, увы.

Kuzmich-2372 · Август 22, 2019, 6:38п. п.

Я, так, чисто попробовать, что тут можно намудрить с оформлением.

А если так:

Особенно интересует скрытый текст aka спойлеры.
Вроде, работает.

MurashRS-2995 · Октябрь 29, 2019, 8:37д. п.

Как я понимаю это доступно только TL3 - печалька, не удобно оформлять красивые гайды с переходами по “меню” в топике.
Придется еще месяц ждать, пока расшилится с TL2…

SoVa-2298 · Ноябрь 1, 2019, 6:59д. п.

Мне кажется на тл2 уже доступно. У вас не получается вставить код или какую ошибку выдает?

MurashRS-2995 · Ноябрь 1, 2019, 8:47д. п.

Спасибо, но нет
Не делает активной ссылку.
Но и на код не ругается

SoVa-2298 · Ноябрь 1, 2019, 11:30д. п.

Попробуйте вставить в пост этот код и опубликовать:

<div align="center">

<h2 id=heading--up><a href="https://eu.forums.blizzard.com/ru/d3/t/gajd-slovar-sleng-terminy-abbreviatury/34#heading--up"><kbd><b>СОДЕРЖАНИЕ</b></kbd></a>
</h2> 
</div>

MurashRS-2995 · Ноябрь 1, 2019, 1:52п. п.

Проверка

`СОДЕРЖАНИЕ`

Сработало

Буду использовать для оформления

MurashRS-2995 · Ноябрь 11, 2019, 2:24п. п.

Кстати реально задалбывает невозможность ответить в собственной теме, пока не получишь ответ от кого-то еще. Может с TL3 снимется ограничение. А то приходится стартовое сообщение править, без возможности при этом поднять тему.

SoVa-2298 · Ноябрь 12, 2019, 6:22д. п.

Точно снимется.
А вообще фича для защиты от спама.

MurashRS-2995 · Ноябрь 12, 2019, 6:48д. п.

Осталось 8 дней подождать вроде бы

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

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

Курсив ctrl+I

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

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

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

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

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

Цитата Control+Shift+9

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

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

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

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

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

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

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

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

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

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

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

Заголовок 1

Заголовок

Заголовок 2

Заголовок

Заголовок 3

Заголовок

Заголовок 4

Заголовок

Заголовок 5

Заголовок

Заголовок 6

Заголовок

Таблицы

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

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

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

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

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

Спойлер

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

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

Рамка

Ссылки

Картинки

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

Аудио

Видео

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

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

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

СОДЕРЖАНИЕ

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

Курсив `ctrl+I`

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

Цитата `Control+Shift+9`

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

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

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

`СОДЕРЖАНИЕ`