--- 
title: "Web-book"
author: "J. Doe, M. Smith"
description: "Powered by MarkHub at markhub.io"
date: "`r Sys.Date()`"
site: bookdown::bookdown_site
documentclass: book
output: bookdown::gitbook
apple-touch-icon: "inc/img/touch-icon.png"
apple-touch-icon-size: 120
favicon: "inc/img/favicon.ico"
---

# Титульна сторінка {- #index}

`r title_page('MarkHub',  'Web-book', 'content/img/titul.jpg', 'J.&nbsp;Doe, M.&nbsp;Smith', 'MarkHub Notation', 'Ukrainian version', 'Kharkiv', '2019')`

<!--
## Вихідні відомості {- #about .hidden-header}

*Електронне мультимедійне інтерактивне видання комбінованого використовування*

<p style="text-align: center; text-indent: 0px;">
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ<br>
ВИЩИЙ НАВЧАЛЬНИЙ ЗАКЛАД</p>

<p style="text-align: center; text-indent: 0px;">І.\ Б.\ Прізвище, І.\ Б.\ Прізвище, І.\ Б.\ Прізвище, І.\ Б.\ Прізвище, І.\ Б.\ Прізвище</p>

<p style="text-align: center; text-indent: 0px;">**Назва видання**</p>

<p style="text-align: center; text-indent: 0px;">Тип видання </p>

*Рецензенти*: 

- наукове звання, посада; *І.\ Б.\ Прізвище*; 
- наукове звання, посада; *І.\ Б.\ Прізвище*; 

Рекомендація до видання(?).

Протокол №.

---

<p style="text-indent: 0px;">
Відповідальний за видання *І.\ Б.\ Прізвище* \
Редактори: *І.\ Б.\ Прізвище*, *І.\ Б.\ Прізвище* \
Дизайн сторінок *І.\ Б.\ Прізвище* \
Консультант *І.\ Б.\ Прізвище* \
</p>

<p style="text-indent: 0px;">
Комп'ютерне верстання, оброблення зображень *І.\ Б.\ Прізвище* \
Оброблення звуку, відеомонтаж, анімація *І.\ Б.\ Прізвище* \
Візуальне програмування *І.\ Б.\ Прізвище*
<p style="text-align: center; text-indent: 0px;">

<p style="text-indent: 0px;">
Середовище розробки *RStudio (пакет Bookdown)*\
План 0000 р. Поз. № ЕП. Обсяг __ Мб.
</p>

---

<p style="text-indent: 0px;">
Видавець – Видавництво
</p>

---

<p style="text-indent: 0px;">
Свідоцтво про внесення суб'єкта видавничої справи до Державного реєстру ДК.
</p>

<p style="text-align: left; width: 50%; margin-left: 50%; text-indent: 0px;">
© І.\ Б.\ Прізвище, І.\ Б.\ Прізвище, І.\ Б.\ Прізвище, І.\ Б.\ Прізвище, І.\ Б.\ Прізвище<br>
© Вищий навчальний заклад
імені\ Семена\ Кузнеця, 0000 рік
</p>

**ISBN 000-000-000-000-0**

## Анотація {- #annotation}

Тут має бути анотація.

## Інструкція користувача {- #user-guide}

Електронний підручник складаеться з контентного та інтерактивного рівня. Він ретельно структурований та має основний та додатковий рівні. Кожна тема може мати такий контент: основні питання, ключові слова, теоретичний матеріал, запитання для сомопідготовки, приклади з формулами та зображеннями, тестові завдання, вспливаючі підсказки, перелік посилань та інше. Дана версія підручника оптимізована для персональних компьютерів та мобільних пристроїв. 

1. **Зміст.** Відкривши підручник ви побачите зміст усіх розділів ліворуч (зміст, всуп, теми (розділи), підтеми (підрозділи) та ін.). При необхідності ви можите "звернути" зміст, натиснувши на значок, який зображено на рис. 0.1.

<details class="image" open>
<summary>Інструмент для змісту</summary>

![Рис. 0.1. Інструмент для змісту](media/user-guide/app_prefece.png "Інструмент для змісту")

</details>

При натисканні на розділ підручника, вам стануть доступні його підрозділи другого, третього та інших рівнів.

2. **Розмір шрифту.** Ви можите збільшити або зменшити шрифт у підручнику, натискаючи на спецільні кнопки `А` у верхньому лівому кутку.

<details class="image" open>
<summary>Зміна розміру шрифту</summary>

![Рис. 0.2. Зміна розміру шрифту](media/user-guide/diffrents-type.png "Зміна розміру шрифту")

</details>

3. **Зовнішній вигляд шрифта.** Ви можите змінити вигляд шрифта, натискаючи на кнопки `Serif` або `Sans`

<details class="image" open>
<summary>Зміна вигляду шрифту</summary>

![Рис. 0.3. Зміна вигляду шрифту](media/user-guide/Serif.png "Зміна вигляду шрифту")

</details>

4. **Загальний вигляд.** Натискаючи на кнопки `White`, `Sepia` та `Night` ви можете змінювати загальний фон та колір шрифтів за вподобанням, як показано на рис. 0.4.

<details class="image" open>
<summary>Зміна кольорів</summary>

![Рис. 0.4. Зміна кольорів](media/user-guide/book-colors.png "Зміна кольорів")

</details>

5. **Перехід на нову сторінку.** Для переходу на іншу сторінку використовуйте стрілки, які знаходятся ліворуч та праворуч від сторінки підручника або можете переключати стрілками на клавіатурі для того самого ефекту.

<details class="image" open>
<summary>Перехід на нову сторінку</summary>

![Рис. 0.5. Перехід на нову сторінку](media/user-guide/arrow_guide.png "Перехід на нову сторінку")

</details>

6. **Підказки.** Вспливаючі підказки виділені подвійним підкресленням. Щоб переглянути його, необхідно навести на нього мишкою (рис. 0.6).

<details class="image" open>
<summary>Підказки</summary>

![Рис. 0.6. Підказки](media/user-guide/tooltips.png "Вспливаючі підказки")

</details>

7. **Друк.** Для друку поточної сторінки підручника потрібно натиснути кнопку
з зображенням принтера <img src="media/user-guide/printpage.png" style="display: inline-block; width: 50px;"> та обрати потрібні вам параметри друку.

8. **Пошук.** Натисніть на зображення лупи <img src="media/user-guide/search.png" style="display: inline-block; width: 45px;">, введіть потрібне вам слово, система здійснить пошук та покаже розділи, в яких є це слово, та виділить його жовтим кольором у самому підручнику, як показано на рис. 0.7.

<details class="image" open>
<summary>Пошук</summary>

![Рис. 0.7. Пошук](media/user-guide/search2.png "Пошук")

</details>

9. **Збільшення зображення.** Натисніть лівою кнопкою миші на потрібне вам зображення для його збільшення. Ви можете продивитися всі зображення розділу, використовуючи стрілки вправо та вліво на вікні зображення. Нижче показується кількість вкладених зображень в підручнику.

<details class="image" open>
<summary>Збільшення зображення</summary>

![Рис. 0.8. Збільшення зображення](media/user-guide/image_guide.png "Збільшення зображення")

</details>

10. **Реєстрація.** Для того, щоб мати змогу залишати анотації та нотатки до розділів вам потрібно зареєструватися на сайті <img src="media/user-guide/hypotesis_is.png" style="display: inline-block; width: 105px;">.
Для цього вам потрібно натиснути `Sign up`.

<details class="image" open>
<summary>Реєстрація</summary>

![Рис. 0.9. Реєстрація](media/user-guide/register.png "Реєстрація")

</details>

Ввести ваші дані.

<details class="image" open>
<summary>Процес реєстрації</summary>

![Рис. 0.10. Процес реєстрації](media/user-guide/register1.png "Процес реєстрації")

</details>

Та підтвердити свою пошту у власній поштовій скриньці.

<details class="image" open>
<summary>Підтвердження пошти</summary>

![Рис. 0.11. Підтвердження пошти](media/user-guide/register2.png "Підтвердження пошти")

</details>

Після реєстрації для входу у свій акаунт використовуйте кнопку  <img src="media/user-guide/log_in.png" style="display: inline-block; width: 45px;">.


11. **Анотація.**  Для створення анотації виділіть потрібний вам текст. На екрані з'явиться позначка `Annotate`, натисніть на неї.

<details class="image" open>
<summary>Анотація</summary>

![Рис. 0.12. Анотація ](media/user-guide/annotate.png "Анотація")

</details>

Вам відкриється вікно у якому ви зможете внести свою анотацію. Вома може бути як приватною (для цого натисніть на кнопку `Only me`) так і публічною (для цього натисніть кнопку `Public` або `Post to Public` )

<details class="image" open>
<summary>Анотація</summary>

![Рис. 0.13. Анотація ](media/user-guide/moreannotate.png "Анотація")

</details>

У вас є можливість відповісти на анотацію, натиснувши кнопку `Reply`, або редагувати її, за допомогою відповідної панелі інструментів.

<details class="image" open>
<summary>Анотація</summary>

![Рис. 0.14. Анотація ](media/user-guide/replytoannotate.png "Анотація")

</details>

12.**Нотатки.** Для створення нотатки на поточній сторінці вам потрібно натиснути на кнопку <img src="media/user-guide/note.png" style="display: inline-block; width: 30px;">.

<details class="image" open>
<summary>Нотатки</summary>

![Рис. 0.15. Нотатки ](media/user-guide/notes.png "Нотатки")

</details>

13.**Виділення.** Для визначення основних моментів зі сторінки підручника вам необхідно виділити потрібний вам текст і натиснути <img src="media/user-guide/highlight.png" style="display: inline-block; width: 43px;">.

<details class="image" open>
<summary>Нотатки</summary>

![Рис. 0.16. Нотатки ](media/user-guide/highlight1.png "Виділення")

</details>

14. **Сховати виділення.** Для приховування виділень та нотаток ви можете натиснути<img src="media/user-guide/hideHighlights.png" style="display: inline-block; width: 30px;">.
-->
