Просмотр кода страницы Лайфхаки для wiki


__NOTOC__<div style="background-color:#0772A1; color:white; font-size:30px"> 
[[Файл:Пример логотипа.jpg|слева|100px|]]
<p align="center">ПОЛЕЗНЫЕ СОВЕТЫ ДЛЯ ТЕХ, КТО СОЗДАЕТ СТРАНИЦУ НА WIKI ВЛАДИМИР</p>
</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/ ЗДЕСЬ]'''
|}
----