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


#1

/in progress/

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

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

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

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

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

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

Предыстория

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

: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/d3/">Форум игры</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://blzmedia-a.akamaihd.net/d3/media/artwork/artwork-class-barbarian02-large.jpg" alt="" width="" height="200" />

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

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

<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>

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

:white_check_mark: Аудио

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

:white_check_mark: Видео

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

Youtube
Vimeo

Twitch

Giphy

Опросы

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

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

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

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

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

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

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

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

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


:ok_hand: Уровни доверия на форуме
:white_check_mark: [FAQ] Есть вопрос? Напиши здесь — получи ответ
Достижение - Все элитные и редкие монстры
ИК+Рекор+Мудрец -> Фарм дыханий+коробок+0
Клуб "Легенда варвара"
Закрепил тему #2

#3

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


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

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

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

#5

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

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


#6

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


#7

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


#8

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


#9

Пример кода:

<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>

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


#10

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


#11

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

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


#12

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

А если так:

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


#13

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


#14

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


#15

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


#16

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

<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>

#17

Проверка

СОДЕРЖАНИЕ

Сработало :+1:

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


#18

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


#19

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


#20

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