Лайфхаки для wiki: различия между версиями

Материал из wiki Владимир
Перейти к навигации Перейти к поиску
(Новая страница: «<div style="background-color:#0772A1; color:white; font-size:30px"> <p align="center">ПОЛЕЗНЫЕ СОВЕТЫ ДЛЯ ТЕХ, КТО СОЗДАЕТ СТРА...»)
 
 
(не показано 14 промежуточных версий 1 участника)
Строка 1: Строка 1:
<div style="background-color:#0772A1; color:white; font-size:30px"> <p align="center">ПОЛЕЗНЫЕ СОВЕТЫ ДЛЯ ТЕХ, КТО СОЗДАЕТ СТРАНИЦУ НА WIKI ВЛАДИМИР</p>
 
__NOTOC__<div style="background-color:#0772A1; color:white; font-size:30px">  
[[Файл:Пример логотипа.jpg|слева|100px|]]
<p align="center">ПОЛЕЗНЫЕ СОВЕТЫ ДЛЯ ТЕХ, КТО СОЗДАЕТ СТРАНИЦУ НА WIKI ВЛАДИМИР</p>
</div>
</div>
{| class="wikitable mw-collapsible mw-collapsed autocollapse" style="width:100%; -webkit-border-radius:10px"
|- style="text-align:left; color:#A62A00; background:#cedff2;"
|<b>Как создать простую "шапочку" для страницы без логотипа</b>
|-style="vertical-align:top;"
|Код для вставки: <br>
'''<nowiki><div style="background-color:#0772A1; color:white; font-size:30px"></nowiki>''' <br>
'''<nowiki><p align="center">АВТОРСКОЕ НАЗВАНИЕ СТРАНИЦЫ</p></nowiki>''' <br>
'''<nowiki></div></nowiki>'''</br>
|}
----
{| class="wikitable mw-collapsible mw-collapsed autocollapse" style="width:100%; -webkit-border-radius:10px"
|- style="text-align:left; color:#A62A00; background:#cedff2;"
|<b>Как создать простую "шапочку" для страницы  с логотипом слева</b>
|-style="vertical-align:top;"
|Код для вставки: <br>
'''<nowiki><div style="background-color:#0772A1; color:white; font-size:30px"></nowiki>''' <br>
'''<nowiki>[[Файл:Пример логотипа.jpg|слева|140x140px|]]</nowiki>''' <br>
'''<nowiki><p align="center">АВТОРСКОЕ НАЗВАНИЕ СТРАНИЦЫ</p></nowiki>''' <br>
'''<nowiki></div></nowiki>'''</br>
|}
----
{| class="wikitable mw-collapsible mw-collapsed autocollapse" style="width:100%; -webkit-border-radius:10px"
|- style="text-align:left; color:#A62A00; background:#cedff2;"
|<b>Как создать простой заголовок раздела</b>
|-style="vertical-align:top;"
|Код для вставки:<br> 
'''<nowiki><h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Как создать простой заголовок раздела</b></font></h2> </nowiki>'''</br>
Не забудьте вставить где-то выше  на странице '''<nowiki>__NOTOC__</nowiki>'''
|}
----
{| class="wikitable mw-collapsible mw-collapsed autocollapse" style="width:100%; -webkit-border-radius:10px"
|- style="text-align:left; color:#A62A00; background:#cedff2;"
|<b>Как создать заголовок в прямоугольной рамке</b>
|-style="vertical-align:top;"
|Код для вставки: <br>
'''<nowiki>{| width="70%" cellpadding="2" cellspacing="5" style="vertical-align:top; background:#FFFFFF;"</nowiki>''' <br>
'''<nowiki>!<div style="border: 1px solid #a3b0bf; -moz-border-radius: 10px; padding: 5px; margin: 0px 0px 0px 0px; background: #cedff2; text-align:left; color:#A62A00; text-size:20px; padding:0.2em 0.4em;">Как создать заголовок в прямоугольной рамке</nowiki>''' <br>
'''<nowiki>|}</nowiki>'''</br>
'''<nowiki><div align="justify"></nowiki>''' <br>
'''<nowiki> ----</nowiki>'''
|}
----
{| class="wikitable mw-collapsible mw-collapsed autocollapse" style="width:100%; -webkit-border-radius:10px"
|- style="text-align:left; color:#A62A00; background:#cedff2;"
|<b>Как создать текст с боковой прокруткой (''скролл'' для страницы)</b>
|-style="vertical-align:top;"
|<div align="justify">
<div style="border:1px solid #9999FF;border-left:3px solid #9966CC;padding:5px 5px 0 5px;overflow-y:scroll;height:300px; width:100%;">
<font color="blue"> <b> Авторский текст заголовка</b></font></br>
'''Например, такой''': Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><div style="background-color:#0772A1; color:white; font-size:30px">
[[Файл:Пример логотипа.jpg|слева|140x140px|]]
<p align="center">АВТОРСКОЕ НАЗВАНИЕ СТРАНИЦЫ</p>
</div>
----
Код для вставки: <br>   
'''<nowiki><div style="border:1px solid #9999FF;border-left:3px solid #9966CC;padding:5px 5px 0 5px;overflow-y:scroll;height:300px; width:100%;"></nowiki>''' <br>
'''<nowiki><font color="blue"> <b> Авторский текст заголовка</b></font><br></nowiki>''' <br>
'''<nowiki>'''Например, такой''': Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br></nowiki>''' <br>
'''<nowiki></div></nowiki>''' <br>
</div>
|}
----
{| class="wikitable mw-collapsible mw-collapsed autocollapse" style="width:100%; -webkit-border-radius:10px"
|- style="text-align:left; color:#A62A00; background:#cedff2;"
|<b>Как создать спойлер</b>
|-style="vertical-align:top;"
|Код для вставки: <br>   
'''<nowiki>{| class="wikitable mw-collapsible mw-collapsed autocollapse" style="width:70%; -webkit-border-radius:10px"</nowiki>''' <br>
'''<nowiki>|- style="text-align:left; color:#A62A00; background:#cedff2;"</nowiki>''' <br>
'''<nowiki>|<b>Как создать спойлеры</b></nowiki>''' <br>
'''<nowiki>|-style="vertical-align:top;"</nowiki>''' <br>
'''<nowiki>|Сюда вставляется авторский текст </nowiki>''' <br>
'''<nowiki>|}</nowiki>'''</br>
'''<nowiki><div align="justify"></nowiki>''' <br>
'''<nowiki> ----</nowiki>'''  <br>
|}
----
{| class="wikitable mw-collapsible mw-collapsed autocollapse" style="width:100%; -webkit-border-radius:10px"
|- style="text-align:left; color:#A62A00; background:#cedff2;"
|<b>Как поместить логотип сверху справа (на примере шаблона и логотипа конкурса Грамотеи.РУ)</b>
|-style="vertical-align:top;"
|Код для вставки: <br>
'''<nowiki>{| width="70%"</nowiki>''' <br>
'''<nowiki>|style="width:100%; text-align:right;" |{{Участник областного конкурса знатоков русского языка Грамотеи.РУ-2022}}</nowiki>''' <br>
'''<nowiki>|}</nowiki>'''</br>
'''<nowiki><div align="justify"></nowiki>''' <br>
Если используется шаблон страницы конкурса или проекта, то этот код вставляется после ссылки на шаблон: <br>
'''<nowiki>{{Страница конкурса ГРАМОТЕИ}}</nowiki>''' <br>'''
'''<nowiki>{| width="70%"</nowiki>''' <br>
'''<nowiki>|style="width:100%; text-align:right;" |{{Участник областного конкурса знатоков русского языка Грамотеи.РУ-2022}}</nowiki>''' <br>
'''<nowiki>|}</nowiki>'''</br>
'''<nowiki><div align="justify"></nowiki>'''
|}
----
{| class="wikitable mw-collapsible mw-collapsed autocollapse" style="width:100%; -webkit-border-radius:10px"
|- style="text-align:left; color:#A62A00; background:#cedff2;"
|<b>Как разместить текст на странице с использованием сложной таблицы</b>
|-style="vertical-align:top;"
|Код для вставки: <br>
'''<nowiki>{| width="70%" border="1"</nowiki>''' <br>
'''<nowiki>|-</nowiki>''' <br>
'''<nowiki>| width="70%" |Ячейка 1</nowiki>'''</br>
'''<nowiki>|Ячейка 2</nowiki>''' <br>
'''<nowiki>|-</nowiki>''' <br>
'''<nowiki>|colspan="2" style="width:100%; text-align:justify;" | Эта ячейка 3 - широкая. Сюда можно записывать текст задания 1 этапа. Расскажите о себе, о своей команде, о своем отношении к теме конкуса-2022</nowiki>''' <br>'''
'''<nowiki>|}</nowiki>'''
|}
----
{| class="wikitable mw-collapsible mw-collapsed autocollapse" style="width:100%; -webkit-border-radius:10px"
|- style="text-align:left; color:#A62A00; background:#cedff2;"
|<b>Как разместить текст на странице с использованием нескольких колонок wiki-таблицы</b>
|-style="vertical-align:top;"
|Код для вставки: <br>
'''<nowiki>{| width="70%" border="1"</nowiki>''' <br>
'''<nowiki>|- valign="top"</nowiki>''' <br>
'''<nowiki>| style="vertical-align:top; padding-right: 1em; width:50%"| </nowiki>'''</br>
'''<nowiki><h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 1</b></font></h2></nowiki>''' <br>
'''<nowiki>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </nowiki>''' <br>
'''<nowiki><h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 2</b></font></h2></nowiki>''' <br>
'''<nowiki>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </nowiki>''' <br>
'''<nowiki><h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 3</b></font></h2></nowiki>''' <br>
'''<nowiki>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </nowiki>''' <br>
'''<nowiki><h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 4</b></font></h2></nowiki>''' <br>
'''<nowiki>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </nowiki>''' <br>
'''<nowiki>| style="vertical-align:top; padding-right: 1em; width:50%"| </nowiki>''' <br>
'''<nowiki><h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 5</b></font></h2></nowiki>''' <br>
'''<nowiki>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </nowiki>''' <br>
'''<nowiki><h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 6</b></font></h2></nowiki>''' <br>
'''<nowiki>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </nowiki>''' <br>
'''<nowiki><h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 7</b></font></h2></nowiki>''' <br>
'''<nowiki>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </nowiki>''' <br>
'''<nowiki><h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 8</b></font></h2></nowiki>''' <br>
'''<nowiki>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </nowiki>''' <br>
'''<nowiki>|}</nowiki>'''</br>
'''<nowiki><div align="justify"></nowiki>'''
|}
----
{| class="wikitable mw-collapsible mw-collapsed autocollapse" style="width:100%; -webkit-border-radius:10px"
|- style="text-align:left; color:#A62A00; background:#cedff2;"
|<b>Как вставить картинку туда, куда надо, ...</b>
|-style="vertical-align:top;"
|... а не туда, куда ей захочется. Для этого используем либо предыдущий вариант сложной таблицы, либо простую таблицу <br>
Код для вставки: <br>
'''<nowiki>{|border="1" width="70%"</nowiki>''' <br>
'''<nowiki>|[[Файл:Пример логотипа.jpg|слева|140px|]]</nowiki>''' <br>
'''<nowiki>|Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br></nowiki>'''</br>
'''<nowiki>|}</nowiki>'''</br>
|}
----
{| class="wikitable mw-collapsible mw-collapsed autocollapse" style="width:100%; -webkit-border-radius:10px"
|- style="text-align:left; color:#A62A00; background:#cedff2;"
|<b>Как создать текстовый блок с "цитатой" и картинкой слева</b>
|-style="vertical-align:top;"
|Код для вставки: <br>   
'''<nowiki>{|align="justify" cellpadding="0" cellspacing="0" style="margin-left:1em" width="70%"</nowiki>''' <br>
'''<nowiki>|- </nowiki>''' <br>
'''<nowiki>|[[Файл:Пример логотипа.jpg|слева|100px|]]</nowiki>''' <br>
'''<nowiki>|<blockquote><i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</i></blockquote></nowiki>''' <br>
'''<nowiki>|}</nowiki>'''</br>
|}
----
{| class="wikitable mw-collapsible mw-collapsed autocollapse" style="width:100%; -webkit-border-radius:10px"
|- style="text-align:left; color:#A62A00; background:#cedff2;"
|<b>Как создать галерею изображений</b>
|-style="vertical-align:top;"
|Код для вставки: <br>
'''<nowiki><gallery></nowiki>''' <br>
'''<nowiki>Пример логотипа.jpg|[https://edu.gov.ru/ Подпись 1]</nowiki>''' <br>
'''<nowiki>Пример логотипа.jpg|[http://obrnadzor.gov.ru/o-rosobrnadzore/ Подпись 2]</nowiki>''' <br>
'''<nowiki>Пример логотипа.jpg|[[Сообщество учителей математики | Подпись 3]]</nowiki>''' <br>
'''<nowiki></gallery></nowiki>'''</br>
|}
----
{| class="wikitable mw-collapsible mw-collapsed autocollapse" style="width:100%; -webkit-border-radius:10px"
|- style="text-align:left; color:#A62A00; background:#cedff2;"
|<b>Как создать слайд-шоу у себя на странице - без всяких презентаций</b>
|-style="vertical-align:top;"
|Код для вставки: <br>
'''<nowiki><gallery mode="slideshow" type="slideshow" navigation="true"></nowiki>''' <br>
'''<nowiki>Пример логотипа.jpg|Подпись 1</nowiki>''' <br>
'''<nowiki>Пример логотипа.jpg|Подпись 2</nowiki>''' <br>
'''<nowiki>Пример логотипа.jpg|Подпись 3</nowiki>''' <br>
'''<nowiki></gallery></nowiki>'''</br>
|}
----
{| class="wikitable mw-collapsible mw-collapsed autocollapse" style="width:100%; -webkit-border-radius:10px"
|- style="text-align:left; color:#A62A00; background:#cedff2;"
|<b>Как разместить 3 блока на странице с использованием "гибкого макета" (flexbox - это круто современно!)</b>
|-style="vertical-align:top;"
|Код для вставки: <br>
первая строка - <br>
'''<nowiki><div style="display: flex;
  flex-direction: row;
  text-align: left;
  background: gray;></nowiki>''' <br>
'''<nowiki><div style="flex:0 33%; background: yellow;; margin: 15px;"></nowiki>''' <br>
'''<nowiki><div style="position: absolute; color: #a60000; font-size: 16px;padding-left: 100px;padding-top: 20px;"></nowiki>''' <br>
'''<nowiki>текст1текст2</nowiki>''' <br>
'''<nowiki></div></nowiki>'''</br>
'''<nowiki>[[Файл:Пример_логотипа.jpg|100px]]</nowiki>'''</br>
'''<nowiki></div></nowiki>'''</br>
'''<nowiki><div style="flex:0 33%; background: yellow;; margin: 15px;"></nowiki>''' <br>
'''<nowiki><div style="position: absolute; color: #a60000; font-size: 16px;padding-left: 100px;padding-top: 20px;"></nowiki>''' <br>
'''<nowiki>текст1текст2</nowiki>''' <br>
'''<nowiki></div></nowiki>'''</br>
'''<nowiki>[[Файл:Пример_логотипа.jpg|100px]]</nowiki>'''</br>
'''<nowiki></div></nowiki>'''</br>
'''<nowiki><div style="flex:0 33%; background: yellow;; margin: 15px;"></nowiki>''' <br>
'''<nowiki><div style="position: absolute; color: #a60000; font-size: 16px;padding-left: 100px;padding-top: 20px;"></nowiki>''' <br>
'''<nowiki>текст1текст2</nowiki>''' <br>
'''<nowiki></div></nowiki>'''</br>
'''<nowiki>[[Файл:Пример_логотипа.jpg|100px]]</nowiki>'''</br>
'''<nowiki></div></nowiki>'''</br>
'''<nowiki></div></div></nowiki>'''</br>
Так можно оформлять любое количество строк с блоками. Подробнее о flex -''' [https://habr.com/ru/post/467049/ ЗДЕСЬ]'''
|}
----

Текущая версия на 10:21, 9 февраля 2024

Пример логотипа.jpg

ПОЛЕЗНЫЕ СОВЕТЫ ДЛЯ ТЕХ, КТО СОЗДАЕТ СТРАНИЦУ НА WIKI ВЛАДИМИР

Как создать простую "шапочку" для страницы без логотипа
Код для вставки:

<div style="background-color:#0772A1; color:white; font-size:30px">
<p align="center">АВТОРСКОЕ НАЗВАНИЕ СТРАНИЦЫ</p>
</div>

Как создать простую "шапочку" для страницы с логотипом слева
Код для вставки:

<div style="background-color:#0772A1; color:white; font-size:30px">
[[Файл:Пример логотипа.jpg|слева|140x140px|]]
<p align="center">АВТОРСКОЕ НАЗВАНИЕ СТРАНИЦЫ</p>
</div>

Как создать простой заголовок раздела
Код для вставки:

<h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Как создать простой заголовок раздела</b></font></h2>
Не забудьте вставить где-то выше на странице __NOTOC__

Как создать заголовок в прямоугольной рамке
Код для вставки:

{| width="70%" cellpadding="2" cellspacing="5" style="vertical-align:top; background:#FFFFFF;"
!<div style="border: 1px solid #a3b0bf; -moz-border-radius: 10px; padding: 5px; margin: 0px 0px 0px 0px; background: #cedff2; text-align:left; color:#A62A00; text-size:20px; padding:0.2em 0.4em;">Как создать заголовок в прямоугольной рамке
|}
<div align="justify">
----

Как создать текст с боковой прокруткой (скролл для страницы)

Авторский текст заголовка
Например, такой: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Пример логотипа.jpg

АВТОРСКОЕ НАЗВАНИЕ СТРАНИЦЫ

Код для вставки:
<div style="border:1px solid #9999FF;border-left:3px solid #9966CC;padding:5px 5px 0 5px;overflow-y:scroll;height:300px; width:100%;">
<font color="blue"> <b> Авторский текст заголовка</b></font><br>
'''Например, такой''': Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
</div>

Как создать спойлер
Код для вставки:

{| class="wikitable mw-collapsible mw-collapsed autocollapse" style="width:70%; -webkit-border-radius:10px"
|- style="text-align:left; color:#A62A00; background:#cedff2;"
|<b>Как создать спойлеры</b>
|-style="vertical-align:top;"
|Сюда вставляется авторский текст
|}
<div align="justify">
----

Как поместить логотип сверху справа (на примере шаблона и логотипа конкурса Грамотеи.РУ)
Код для вставки:

{| width="70%"
|style="width:100%; text-align:right;" |{{Участник областного конкурса знатоков русского языка Грамотеи.РУ-2022}}
|}
<div align="justify">
Если используется шаблон страницы конкурса или проекта, то этот код вставляется после ссылки на шаблон:
{{Страница конкурса ГРАМОТЕИ}}
{| width="70%"
|style="width:100%; text-align:right;" |{{Участник областного конкурса знатоков русского языка Грамотеи.РУ-2022}}
|}
<div align="justify">

Как разместить текст на странице с использованием сложной таблицы
Код для вставки:

{| width="70%" border="1"
|-
| width="70%" |Ячейка 1
|Ячейка 2
|-
|colspan="2" style="width:100%; text-align:justify;" | Эта ячейка 3 - широкая. Сюда можно записывать текст задания 1 этапа. Расскажите о себе, о своей команде, о своем отношении к теме конкуса-2022
|}

Как разместить текст на странице с использованием нескольких колонок wiki-таблицы
Код для вставки:

{| width="70%" border="1"
|- valign="top"
| style="vertical-align:top; padding-right: 1em; width:50%"|
<h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 1</b></font></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
<h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 2</b></font></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
<h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 3</b></font></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
<h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 4</b></font></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
| style="vertical-align:top; padding-right: 1em; width:50%"|
<h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 5</b></font></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
<h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 6</b></font></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
<h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 7</b></font></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
<h2> <font face="Segoe Print" size="3" color="#8B0000"><b>Заголовок 8</b></font></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|}
<div align="justify">

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

Код для вставки:
{|border="1" width="70%"
|[[Файл:Пример логотипа.jpg|слева|140px|]]
|Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
|}

Как создать текстовый блок с "цитатой" и картинкой слева
Код для вставки:

{|align="justify" cellpadding="0" cellspacing="0" style="margin-left:1em" width="70%"
|-
|[[Файл:Пример логотипа.jpg|слева|100px|]]
|<blockquote><i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</i></blockquote>
|}

Как создать галерею изображений
Код для вставки:

<gallery>
Пример логотипа.jpg|[https://edu.gov.ru/ Подпись 1]
Пример логотипа.jpg|[http://obrnadzor.gov.ru/o-rosobrnadzore/ Подпись 2]
Пример логотипа.jpg|[[Сообщество учителей математики | Подпись 3]]
</gallery>

Как создать слайд-шоу у себя на странице - без всяких презентаций
Код для вставки:

<gallery mode="slideshow" type="slideshow" navigation="true">
Пример логотипа.jpg|Подпись 1
Пример логотипа.jpg|Подпись 2
Пример логотипа.jpg|Подпись 3
</gallery>

Как разместить 3 блока на странице с использованием "гибкого макета" (flexbox - это круто современно!)
Код для вставки:

первая строка -
<div style="display: flex; flex-direction: row; text-align: left; background: gray;>
<div style="flex:0 33%; background: yellow;; margin: 15px;">
<div style="position: absolute; color: #a60000; font-size: 16px;padding-left: 100px;padding-top: 20px;">
текст1текст2
</div>
[[Файл:Пример_логотипа.jpg|100px]]
</div>
<div style="flex:0 33%; background: yellow;; margin: 15px;">
<div style="position: absolute; color: #a60000; font-size: 16px;padding-left: 100px;padding-top: 20px;">
текст1текст2
</div>
[[Файл:Пример_логотипа.jpg|100px]]
</div>
<div style="flex:0 33%; background: yellow;; margin: 15px;">
<div style="position: absolute; color: #a60000; font-size: 16px;padding-left: 100px;padding-top: 20px;">
текст1текст2
</div>
[[Файл:Пример_логотипа.jpg|100px]]
</div>
</div></div>
Так можно оформлять любое количество строк с блоками. Подробнее о flex - ЗДЕСЬ

Источник — https://wiki.i-edu.ru/mediawiki/index.php?title=Лайфхаки_для_wiki&oldid=43684