Презентація на тему "Розмітка гіпертексту засобами HTML"

Номер слайду 1

Розмітка гіпертексту засобами HTML 9 клас Ларіонова Наталія Володимирівна

Номер слайду 2

Мова розмітки гіпертексту. HTML (Hypertext Markup Language — мова гіпертекстової розмітки) служить для опису Web-сторінки, що зберігається у виді звичайного текстового файлу з розширенням *.htm або *.html. Гіпертекст — це текст, у який вбудовані спеціальні коди, що задають форматування тексту, наявність у ньому ілюстрацій, мультимедійних вставок та гіперпосилань

Номер слайду 3

Мова розмітки гіпертексту був розроблений британським вченим Тімом Бернерсом-Лі приблизно в 1986-1991 роках в стінах Європейського Центру ядерних досліджень в Женеві (Швейцарія).

Номер слайду 4

Сервер. Клієнт. Верстка, структура ОформленняформатуванняІнтерактивність, «спілкування» з сервером. Javascript. CSSHTML

Номер слайду 5

Способи створення web-сторінок. Звичайним текстовим редактором: Блокнот або Notepad++;Візуальним HTML редактором: Front. Page, Macromedia Dreamveawer, Netscape Navigator Gold та ін.;Редактором HTML текстів: Home. Site, Hot. Dog.

Номер слайду 6

Створення веб сторінки. Відкрити програму БЛОКНОТВвести HTML-код:3. Зберегти файл з розширенням htm або html: Файл /Сохранить как… Index.html4. Запуск збереженого файлу за допомогою будь-якого браузера:

Номер слайду 7

Поняття тегу. Головна мета HTML — описати формат вмісту Web-сторінки, він описується з допомогою дескрипторів (tag) HTML. Дескриптори також часто називають «тегами». Без тегів не існує HTML документу.< ім’я_тега, атрибут > вміст < / ім’я_ тега >Відкриваючий тег. HTML елемент. Закриваючий тег. Вміст елемента <Р> текст абзацу

Номер слайду 8

Парні та непарні теги. За виглядом теги поділяються на парні і непарні. До парних тегів належать ті теги, які повторюються і двічі оточують ту частину, над якою виконується певна конкретна функція. Приклад: , <В> , , <НЗ>,

,

. Непарні теги відрізняються тим, що вони не виділяють певну частину коду, над якою виконується функція тега. Функція тегу поширюється або на весь документ, або на конкретне місце документу. Зразок:
,

, <МЕТА>, , , .

Номер слайду 9

Атрибути — це імена, яким через знак рівності (=) привласнюються визначені значення. Приклади тегу з атрибутами: wisdomweb.ru Мой сайт

просто текст

Номер слайду 10

Загальна структура HTML- коду web-документу. Заголовна частина документа. Тіло документа. Службова інформація для браузера

Номер слайду 11

Простий приклад Web-сторінки Простий приклад </ТІТLЕ> </HEAD> <BODY> <H1>Це приклад HTML-документа </H1> </BODY> </HTML></p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/36611/176475/189202_images/12.jpg" data-lightbox="slides" data-title="Слайд №12"><img src="/uploads/files/36611/176475/189202_images/thumb_12.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 12</div> <p>Пояснення прикладу12 Тег <HTML> оголошує початок і кінець HTML документа; Тег <BODY> містить все видиме вміст HTML сторінки; Тег <H1> дозволяє "розмітити" вкладений в нього текст як заголовок;</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/36611/176475/189202_images/13.jpg" data-lightbox="slides" data-title="Слайд №13"><img src="/uploads/files/36611/176475/189202_images/thumb_13.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 13</div> <p>Заголовки. Для того щоб розбити текст на логічні частини, використовують заголовки. (Існує 6 рівнів заголовків документів). Вони позначені тегами від <h1>…</h1> - 1 рівень<h2>…</h2> - 2 рівень<h3>…</h3> - 3 рівень<h4>…</h4> - 4 рівень<h5>…</h5> - 5 рівень<h6>…</h6> - 6 рівень</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/36611/176475/189202_images/14.jpg" data-lightbox="slides" data-title="Слайд №14"><img src="/uploads/files/36611/176475/189202_images/thumb_14.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 14</div> <p>{5 C22544 A-7 EE6-4342-B048-85 BDC9 FD1 C3 A}Теги. Що означають. Кольори та зображення для всього документа і його тла задають за допомогою тегу <BODY>. Він може мати такі атрибути: VLINK=“значення”задає колір переглянутих гіперпосилань. ALINK=“значення”задає колір гіперпосилань під час клацання;LINK=“значення”визначає колір гіперпосилань у документі;ТЕХТ=“значення”задає колір тексту;BGC0 L0 R=“значення”задає колір, який має бути фоновим для документа;BACKGROUND="URL" замість URL вказують адресу малюнка, який має бути тлом для сторінки;Основні теги</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/36611/176475/189202_images/15.jpg" data-lightbox="slides" data-title="Слайд №15"><img src="/uploads/files/36611/176475/189202_images/thumb_15.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 15</div> <p>{5 C22544 A-7 EE6-4342-B048-85 BDC9 FD1 C3 A}Теги. Що означають<Р>Цей тег означає початок нового абзацу. Його можна записувати в кінці попереднього. Наступне після тега <Р> речення починатиметься з нового, вирівняного до лівого краю, абзацу без відступу. Між абзацами буде порожній рядок. Зауважимо, що тег <Р> може використовуватися як парний: <Р> текст абзацу </Р><BR>Наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка<HR>У рядку буде проведена горизонтальна лінія. Гарнітуру, розмір та колір шрифту для фрагмента тексту задають за допомогою тегу <FONT АТРИБУТИ> Текст </FONT>. <font face =?> текст</font>face - назва шрифта ( Arial, Verdana, Georgia і т.п.),<font size =?> текст</font> size - розмір тексту від 1 до 7<font color =?> текст</font>color - колір тексту( Red, RRGGBB, 000000 ). Основні теги</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/36611/176475/189202_images/16.jpg" data-lightbox="slides" data-title="Слайд №16"><img src="/uploads/files/36611/176475/189202_images/thumb_16.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 16</div> <p>{5 C22544 A-7 EE6-4342-B048-85 BDC9 FD1 C3 A}Теги. Що означають. Теги форматування символів тексту (вони парні):<В> текст </В>Товстий шрифт тексту<І> текст </І>Шрифт-курсив<U> текст </U>Підкреслений шрифт<SUB> текст </SUB>Нижній індекс. Вираз H2 O, пишуть H<SUB>2</SUB>О<SUP> текст </SUP>Верхній індекс,<BIG> текст </BIG>ВЕЛИКИЙ шрифт<SMALL> текст </SMALL>Малий шрифт<B> <I> текст </І></В>Товстий курсив. Цей приклад демонструє застосування принципу вкладення тегів. Основні теги</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/36611/176475/189202_images/17.jpg" data-lightbox="slides" data-title="Слайд №17"><img src="/uploads/files/36611/176475/189202_images/thumb_17.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 17</div> <p>{5 C22544 A-7 EE6-4342-B048-85 BDC9 FD1 C3 A}Теги. Що означають. Теги вирівнювання тексту (вони парні):< р align="left">За лівим краєм< р align="center">За центром< р align="right">За правим краєм. Теги графічні елементи (вони парні):<img src = ”name” > Додає зображення в HTML документ.<img src = ”name” align = ? > Вирівнює зображення до однієї з сторін документа, приймає значення: left, right, center; bottom, top, middle.<img src="4.gif" align="right"> <img src = ”name” border = ?> Встановлює товщину рамки навколо зображення.<hr> Додає в HTML документ горизонтальну лінію.<hr size = ?>Встановлює висоту(товщину) лінії. <hr width = ?> Встановлює ширину лінії.<hr color = ?> Визначає лінії певний колір. Основні теги</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/36611/176475/189202_images/18.jpg" data-lightbox="slides" data-title="Слайд №18"><img src="/uploads/files/36611/176475/189202_images/thumb_18.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 18</div> <p>{5 C22544 A-7 EE6-4342-B048-85 BDC9 FD1 C3 A}Теги. Що означають. Теги Нумеровані списки (вони парні):<ol type="N"> <li>...</li></ol>де N – символ, що описує спосіб нумерації(1, А, а, І або і)Інформатика. Фізика. Хімія. Біологія. Теги Марковані списки (вони парні):<ul> <li>...</li></ul>disc - зафарбований кружок,circle - незафарбований кружок,square - зафарбований квадратик.Інформатика. Фізика. Хімія. Біологія. Теги Посилання (вони парні):<a href="адрес">Текст посилання </a> Зовнішні посилання <a href="#bookmark«>Текст посилання </a>  <a id="bookmark">Текст закладки. </a> Внутрішні посилання. Основні теги</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/36611/176475/189202_images/19.jpg" data-lightbox="slides" data-title="Слайд №19"><img src="/uploads/files/36611/176475/189202_images/thumb_19.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 19</div> <p>{5 C22544 A-7 EE6-4342-B048-85 BDC9 FD1 C3 A}Теги. Що означають. Теги таблиці (вони парні):<table> </table> Створює таблицю.<tr> </tr> Визначає рядок таблиці.<td> </td> Визначає окрему комірку в таблиці.<th> </th> -Визначає заголовок таблиці (нормальна осередок з відцентрованим жирним текстом)Атрибути таблиці<table border=#> Задає товщину рамки таблиці.х<table cellspacing=#> Задає відстань між осередками таблиці.<table cellpadding=#> Задає відстань між вмістом комірки і її рамкою.<table width=#> Встановлює ширину таблиці в пікселях або відсотках від ширини документа.<tr align=?> або <td align=?> Встановлює вирівнювання в клітинках таблиці, приймає значення: left, center, або right. Основні теги</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/36611/176475/189202_images/20.jpg" data-lightbox="slides" data-title="Слайд №20"><img src="/uploads/files/36611/176475/189202_images/thumb_20.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 20</div> <p>{5 C22544 A-7 EE6-4342-B048-85 BDC9 FD1 C3 A}Теги. Що означають. Атрибути таблиці<tr valign=?> або <td valign=?>Встановлює вертикальне вирівнювання клітинок таблиці, приймає значення : top, middle, або bottom.<td colspan=#> -Вказує кількість столбцев яке об'єднано в одній клітинці. (за замовчуванням=1)<td rowspan=#> -Вказує кількість рядків яке об'єднано в одній клітинці. (за замовчуванням=1)<td nowrap> Не дозволяє програмі перегляду робити переклад тексту у клітинці таблиці. Основні теги</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/36611/176475/189202_images/21.jpg" data-lightbox="slides" data-title="Слайд №21"><img src="/uploads/files/36611/176475/189202_images/thumb_21.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 21</div> <p>Таблиця кольорів</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/36611/176475/189202_images/22.jpg" data-lightbox="slides" data-title="Слайд №22"><img src="/uploads/files/36611/176475/189202_images/thumb_22.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 22</div> <p></p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/36611/176475/189202_images/23.jpg" data-lightbox="slides" data-title="Слайд №23"><img src="/uploads/files/36611/176475/189202_images/thumb_23.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 23</div> <p></p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/36611/176475/189202_images/24.jpg" data-lightbox="slides" data-title="Слайд №24"><img src="/uploads/files/36611/176475/189202_images/thumb_24.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 24</div> <p>Увага!!! Під час роботи за комп’ютером дотримуйтесь правил безпеки та санітарно-гігієнічних норм. </p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/36611/176475/189202_images/25.jpg" data-lightbox="slides" data-title="Слайд №25"><img src="/uploads/files/36611/176475/189202_images/thumb_25.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 25</div> <p>Домашнє завдання:1. Читати параграф 9.32. Дайти відповіді на запитання в зошиті: 1. Що таке мова HTML?2. Яка структура html-документа?3. Що таке тег, атрибут тегу?4. Які теги використовують для створення списків?3. Розробити web-сторінку на тему «Розповідь про себе» за допомогою мови HTML </p> </div> </div> </div> </div> </div> </div> <div class="col-md-3 col-sm-4 col-xs-12"> <div class="file-info pptx"> <div class="filetype">pptx</div> <div class="hidden-xs visible-sm visible-md visible-lg"> <a class="btn btn-orange btn-block" href="#" data-toggle="modal" data-target="#registration"><i class="fa fa-download" aria-hidden="true"></i> Завантажити</a> <div class="bookmark-file"><a href="#" class="" data-toggle="modal" data-target="#registration"><span>Зберегти на потім</span> <i class="fa fa-bookmark" aria-hidden="true"></i></a></div> </div> <div class="author"> <div class="control-label">Додав(-ла) </div> <a href="/profile/36611">Ларіонова Наталія Володимирівна</a> <div class="clearfix"></div> </div> <div class="taxonomy"> <div class="control-label">Пов’язані теми</div> <a href="/biblioteka/informatika">Інформатика</a>, <a href="/biblioteka/informatika/klas-9">9 клас</a>, <a href="/biblioteka/typ-2">Матеріали до уроків</a> </div> <div class="meta"> <div class="control-label">Додано</div> <span><i class="fa fa-calendar" aria-hidden="true"></i> 26 квітня 2020</span> </div> <div class="meta"> <div class="control-label">Переглядів</div> <span><i class="fa fa-eye" aria-hidden="true"></i> 5482</span> </div> <div class="taxonomy"> <div class="control-label">Оцінка розробки</div> <div class="rating-view rating-left"> <div class="rating-mark"> Відгуки відсутні </div> </div> </div> </div> <a class="show-time-item margbottom" href="/site/go/317"><img src="https://naurok.com.ua/uploads/banner/317/1677852034.png" width="100%" alt="" target="_blank"></a> <div class="promo-cert promo-cert-top"> <div class="promo-cert-preview"> <img src="/img/mart-cert-lg.png" /> </div> <div class="promo-cert-name">Безкоштовний сертифікат<br />про публікацію авторської розробки</div> <div style="font-size:12px;">Щоб отримати, додайте розробку</div> <br /> <a class="btn btn-primary btn-block" href="/biblioteka/upload"><i class="fa fa-plus" aria-hidden="true"></i> Додати розробку</a> </div> <div class="items related"> <div class="related-head">Рекомендовані матеріали</div> <div class="file-item pptx"> <div class="filetype">pptx</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 3027</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 4.7</span> </div> <div class="headline"> <a href="/prezentaciya-mova-rozmitki-gipertekstu-chastina-1-176516.html">Презентація "Мова розмітки гіпертексту. Частина 1"</a> </div> </div> <div class="file-item pptx"> <div class="filetype">pptx</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 757</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 0</span> </div> <div class="headline"> <a href="/prezentaciya-ponyattya-gipertekstu-chastina-2-176517.html">Презентація "Поняття гіпертексту. Частина 2"</a> </div> </div> <div class="file-item docx"> <div class="filetype">docx</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 2521</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 0</span> </div> <div class="headline"> <a href="/zbirnik-praktichnih-robit-z-informatiki-dlya-uchniv-9-klasu-178387.html">Збірник практичних робіт з інформатики для учнів 9 класу</a> </div> </div> <div class="file-item ppt"> <div class="filetype">ppt</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 12552</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 0</span> </div> <div class="headline"> <a href="/prezentaciya-z-informatiki-dlya-9-klasu-tablichni-velichini-ta-algoritmi-h-opracyuvannya-178404.html">Презентація з інформатики для 9 класу "«Табличні величини та алгоритми їх опрацювання».</a> </div> </div> </div> <div class="items related"> <div class="related-head">Схожі матеріали</div> <div class="file-item pptx"> <div class="filetype">pptx</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 5494</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 0</span> </div> <div class="headline"> <a href="/prezentaciya-do-uroku-v-9-klasi-na-temu-animaciya-video-ta-zvuk-u-prezentaciyah-768.html">Презентація до уроку в 9 класі, на тему: "Анімація, відео та звук у презентаціях" </a> </div> </div> <div class="file-item docx"> <div class="filetype">docx</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 3644</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 0</span> </div> <div class="headline"> <a href="/konspekt-uroku-9-klas-na-temu-animaciya-video-ta-zvuk-u-prezentaciyah-771.html">Конспект уроку 9 клас, на тему: "Анімація, відео та звук у презентаціях" </a> </div> </div> <div class="file-item pptx"> <div class="filetype">pptx</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 18043</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 5</span> </div> <div class="headline"> <a href="/tablichni-velichini-ta-algoritmi-h-opracyuvannya-odnovimirniy-masiv-danih-1301.html">Презентація. Одновимірний масив даних.</a> </div> </div> <div class="file-item zip"> <div class="filetype">zip</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 5235</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 5</span> </div> <div class="headline"> <a href="/urok-dlya-9-klasu-ponyattya-pro-movu-html-1305.html">Урок. 9 клас. Тема: "Розмітка гіпертексту засобами мови HTML. Основні поняття."</a> </div> </div> <div class="file-item zip"> <div class="filetype">zip</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 6672</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 4.7</span> </div> <div class="headline"> <a href="/urok-9-klas-tema-rozmitka-gipertekstu-zasobami-movi-html-formatuvannya-tekstu-1865.html">Урок. 9 клас. Тема: "Розмітка гіпертексту засобами мови HTML. Форматування тексту."</a> </div> </div> </div> <div class="file-share hidden-xs"> <div class="share-head">Поділитись матеріалом</div> <a href="javascript:void(0)" onclick="Share.facebook('https://naurok.com.ua/prezentaciya-na-temu-rozmitka-gipertekstu-zasobami-html-176475.html', 'Презентація на тему "Розмітка гіпертексту засобами HTML"'); Share.log('doc',176475,'facebook');" class="sth-btn btn-block sth-upper sth-btn-facebook"><span class="network-name">facebook</span> <span class="share-count hide">0</span></a> <a href="javascript:void(0)" onclick="Share.viber('https://naurok.com.ua/prezentaciya-na-temu-rozmitka-gipertekstu-zasobami-html-176475.html', 'Презентація на тему "Розмітка гіпертексту засобами HTML"'); Share.log('doc',176475,'viber');" class="sth-btn btn-block sth-upper sth-btn-viber"><span class="network-name">viber</span> <span class="share-count hide">0</span></a> <a href="javascript:void(0)" onclick="Share.telegram('https://naurok.com.ua/prezentaciya-na-temu-rozmitka-gipertekstu-zasobami-html-176475.html', 'Презентація на тему "Розмітка гіпертексту засобами HTML"'); Share.log('doc',176475,'telegram');" class="sth-btn btn-block sth-upper sth-btn-telegram"><span class="network-name">telegram</span> <span class="share-count hide">0</span></a> <a href="javascript:void(0)" onclick="Share.twitter('https://naurok.com.ua/prezentaciya-na-temu-rozmitka-gipertekstu-zasobami-html-176475.html', 'Презентація на тему "Розмітка гіпертексту засобами HTML"'); Share.log('doc',176475,'twitter');" class="sth-btn btn-block sth-upper sth-btn-twitter"><span class="network-name">Twitter</span> <span class="share-count hide">0</span></a> <a href="javascript:void(0)" onclick="Share.google('https://naurok.com.ua/prezentaciya-na-temu-rozmitka-gipertekstu-zasobami-html-176475.html'); Share.log('doc',176475,'google');" class="sth-btn btn-block sth-upper sth-btn-google-plus"><span class="network-name">Google+</span> <span class="share-count hide">0</span></a> </div> </div> </div> </div> </div> </div> <div class="fixed-bottom-overlay visible-upto-l socialbar clearfix" style="visibility: visible;"> <div class="new-variation-3 new-variation-3-library"> <div class="library-panel"> <div class="row"> <div class="col-xs-6"> <a class="btn btn-orange btn-block btn-download-panel" href="/registration?file_id=176475"><i class="fa fa-download" aria-hidden="true"></i> Завантажити</a> </div> <div class="col-xs-6"> <div class="bookmark-file"><a href="/registration?file_id=176475" class="" onClick="libsBookmark.save(176475);"><span>Зберегти на потім</span> <i class="fa fa-bookmark" aria-hidden="true"></i></a></div> </div> </div> </div> </div> </div> <style> .library .document-content-block { -webkit-touch-callout: initial !important; -webkit-user-select: initial !important; -khtml-user-select: initial !important; -moz-user-select: initial !important; -ms-user-select: initial !important; user-select: initial !important; } </style> </div> <style> .field-recaptcha{ display: none; } .grecaptcha-badge { visibility: hidden; } </style> <footer class="site-footer"> <div class="site-footer__document-check"> <div class="container-fluid"> <form id="w5" action="/proof" method="POST"> <input type="hidden" name="_csrf" value="T8PvFDilg7GTI97N7zC-rEinZvpdL-OnYsypvjbFVVg1ldt7DMnp3Ntl7fmqYM_FIeUNjCpfgcUzjpzEBvwcDw=="> <div class="row"> <div class="col-xs-12 text-center"> <span class="site-footer__title"> Перевірка виданих документів </span> </div> <div class="col-xs-12 text-center"> <small class="site-footer__title site-footer__title--small"> Вкажіть номер документа (використовуйте кириличну розкладку) </small> </div> <div class="col-xs-12"> <div class="site-footer__form"> <div class="site-footer__input-wrapper"> <input type="text" name="number" value="" placeholder="ВXXX-XXXX" > </div> <div class="site-footer__button-wrapper"> <button type="submit">ПЕРЕВІРИТИ</button> </div> </div> </div> </div> </form> </div> </div> <div class="site-footer__main"> <div class="container-fluid"> <div class="row site-footer__main-row"> <div class="col-xs-6 col-md-3"> <ul class="site-footer__list"> <li> <span class="site-footer__title"> Підвищення кваліфікації </span> </li> <li><a class="site-footer__item" href="/upgrade">Підвищення кваліфікації</a></li> <li><a class="site-footer__item" href="/webinar">Вебінари</a></li> <li><a class="site-footer__item" href="/conference">Конференції</a></li> <li><a class="site-footer__item" href="/courses">Курси</a></li> </ul> </div> <div class="col-xs-6 col-md-3"> <ul class="site-footer__list"> <li> <span class="site-footer__title"> Розділи </span> </li> <li><a class="site-footer__item" href="/journal">Журнал</a></li> <li><a class="site-footer__item" href="/biblioteka">Бібліотека розробок</a></li> <li><a class="site-footer__item" href="/test">Тести</a></li> <li><a class="site-footer__item" href="/labs">Лабораторні роботи</a></li> <li><a class="site-footer__item" href="/project">Проєкти</a></li> <li><a class="site-footer__item" href="/konkurs">Конкурси</a></li> <li><a class="site-footer__item" href="/olimpiada">Олімпіади</a></li> <li><a class="site-footer__item" href="/assistant">Штучний інтелект для вчителів</a></li> <li><a class="site-footer__item" href="https://naurok.ua/course/english">Курси англійської мови</a> </ul> </div> <div class="col-xs-6 col-md-3 site-footer__social"> <ul class="site-footer__list"> <li> <span class="site-footer__title"> Про нас </span> </li> <li><a class="site-footer__item" href="/page/about">Про «На Урок»</a></li> <li><a class="site-footer__item" href="/school/request">Співпраця закладів освіти</a></li> </ul> <a href="/page/contact-us" class="button button--primary"> Зворотний зв'язок </a> <div class="site-footer__social-group"> <a target="_blank" href="https://www.youtube.com/channel/UCMCYaKTwZ1Olw1fuzLvgA_Q" class="site-footer__social-item site-footer__social-item--youtube"> <img src="/img/footer/youtube-ico.svg" alt=""> </a> <a target="_blank" href="https://www.facebook.com/naurok.com.ua/" class="site-footer__social-item site-footer__social-item--facebook"> <img src="/img/footer/facebook-ico.svg" alt=""> </a> <a target="_blank" href="https://t.me/naurok" class="site-footer__social-item site-footer__social-item--telegram"> <img src="/img/footer/telegram-ico.svg" alt=""> </a> </div> </div> <div class="col-xs-6 col-md-3"> <ul class="site-footer__list"> <li> <span class="site-footer__title"> Інше </span> </li> <li><a class="site-footer__item" href="https://naurok.ua">Вхід для учнів (naurok.ua)</a></li> <li><a class="site-footer__item" href="/calendar">Матеріали до свят</a></li> <li><a class="site-footer__item" href="/five">Конкурс «Фантастична п’ятірка»</a></li> </ul> </div> </div> <div class="row site-footer__copyright"> <div class="site-footer__copyright-info"> <div class="row"> <div class="col-xs-12 col-lg-6"> <small class="site-footer__title site-footer__title--small"> © 2017-2024, ТОВ «На Урок» </small> </div> <div class="col-xs-12 col-lg-6 text-xl-right"> <a href="/page/terms-of-use" class="site-footer__title--small">Угода користувача</a> | <a href="/page/terms" class="site-footer__title--small">Умови користування</a> | <a href="/page/privacy-policy" class="site-footer__title--small">Політика конфіденційності</a> </div> </div> </div> </div> </div> </div> </footer> <div class="modal fade" id="registration" tabindex="-1" role="dialog" aria-labelledby="registration"> <div class="modal-dialog modal-registration" role="document"> <div class="modal-content"> <div class="modal-body"> <div class="account-page account-registration" style="margin-top:10px"> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="h1-block text-center" style=" margin: 0 0 10px; font-weight: 700; font-size: 30px; line-height: 1; color: #bdbdbd;">Реєстрація на сайті «На Урок»</div> <div class="sth-form sth-form-white"> <div class="auth-clients"> <a class="facebook auth-link-facebook" href="/account/auth?authclient=facebook" title="Facebook"> <i class="fa fa-facebook-square" aria-hidden="true"></i> Зареєструватись за допомогою Facebook </a> </div> <div class="auth-clients"> <a class="google auth-link-google" href="/account/auth?authclient=google" title="Facebook"> <i class="fa fa-google-plus-square" aria-hidden="true"></i> Зареєструватись за допомогою Google </a> </div> <div class="auth-or">або</div> <form id="w6" action="/registration" method="post"> <input type="hidden" name="_csrf" value="T8PvFDilg7GTI97N7zC-rEinZvpdL-OnYsypvjbFVVg1ldt7DMnp3Ntl7fmqYM_FIeUNjCpfgcUzjpzEBvwcDw=="> <div class="form-group field-lastname required"> <label class="control-label" for="lastname">Прізвище</label> <input type="text" id="lastname" class="form-control input-lg" name="lastName" maxlength="255" placeholder="Вкажіть прізвище" aria-required="true"> <p class="help-block help-block-error"></p> </div> <div class="form-group field-firstname required"> <label class="control-label" for="firstname">Ім'я</label> <input type="text" id="firstname" class="form-control input-lg" name="firstName" maxlength="255" placeholder="Вкажіть ім'я" aria-required="true"> <p class="help-block help-block-error"></p> </div> <div class="form-group field-email required"> <label class="control-label" for="email">Email</label> <input type="text" id="email" class="form-control input-lg" name="email" placeholder="Вкажіть ваш email" aria-required="true"> <p class="help-block help-block-error"></p> </div> <div class="form-group field-password required"> <label class="control-label" for="password">Пароль</label> <input type="password" id="password" class="form-control input-lg" name="password" placeholder="Придумайте пароль" aria-required="true"> <p class="help-block help-block-error"></p> </div> <div class="form-group field-recaptcha"> <label class="control-label" for="recaptcha"></label> <input type="hidden" id="recaptcha" class="form-control" name="reCaptcha"> <p class="help-block help-block-error"></p> </div> <p style="margin-top:20px; text-align:center;">Реєструючись, ви погоджуєтеся з <a target="_blank" href="/page/terms-of-use">угодою користувача</a> та <a target="_blank" href="/page/privacy-policy">політикою конфіденційності</a>.</p> <button type="submit" class="sth-btn-shaped sth-btn-shaped-lime btn-block"> Зареєструватись</button> </form> <div class="text-center" style="margin-top:20px;"> Вже зареєстровані? <a class="sth-underline-reverse" href="/login">Спробуйте увійти</a> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="FacebookAlert" tabindex="-1" role="dialog" aria-labelledby="FacebookAlert"> <div class="modal-dialog" role="document"> <div class="modal-content modal-facebook"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <div class="modal-message-title">Давай дружити!</div> <div class="modal-message">Оновлення «На Урок» — в кожну стрічку Facebook</div> <div class="modal-facebook-widget"> <div class="fb-page" data-href="https://www.facebook.com/naurok.com.ua" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/naurok.com.ua" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/naurok.com.ua">«На Урок». Освітній інтернет-проект</a></blockquote></div> </div> <div class="modal-close-link"> <a href="javascript:void(0)" data-dismiss="modal"> Дякую, Я вже давно з вами</a> </div> </div> </div> </div> </div> <div class="modal fade" id="SubscribeAlert" tabindex="-1" role="dialog" aria-labelledby="SubscribeAlert"> <div class="modal-dialog" role="document"> <div class="modal-content modal-email"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <i class="fa fa-paper-plane" aria-hidden="true"></i> <div class="modal-message-title">Розсилка «На Урок»</div> <div class="modal-message">Ми надсилатимемо наші цікаві та дуже корисні статті щоп’ятниці</div> <div class="form-inline"> <div class="form-group"> <label class="sr-only" for="emailForm">Ваш e-mail</label> <input type="email" class="form-control email-subscribe" id="emailForm" placeholder="Ваш e-mail"> </div> <button type="submit" class="btn btn-primary btn-subscribe">Підписатись</button> <div class="alert alert-success success-form hide">Дякуємо! Ми будемо тримати Вас в курсі!</div> </div> </div> </div> </div> </div> <script src="https://www.gstatic.com/firebasejs/5.11.0/firebase.js"></script> <script> // Initialize Firebase var config = { apiKey: "AIzaSyDqZNEmjh0EBu1hQqQR22QswP2ZFoOAnTE", authDomain: "naurok-com-ua.firebaseapp.com", databaseURL: "https://naurok-com-ua.firebaseio.com", projectId: "naurok-com-ua", storageBucket: "naurok-com-ua.appspot.com", messagingSenderId: "756484883010" }; firebase.initializeApp(config); </script> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Organization", "name": "«На Урок»", "url": "https://naurok.com.ua", "logo": "https://naurok.com.ua/img/logo_new3.png", "sameAs": [ "https://www.facebook.com/naurok.com.ua", "https://www.facebook.com/groups/naurok.com.ua/", "https://plus.google.com/116882310924056429434", "https://www.youtube.com/channel/UCMCYaKTwZ1Olw1fuzLvgA_Q" ] } </script> <script src="//www.google.com/recaptcha/api.js?render=6Lfj5vQUAAAAAOjsdAMk32BeA8J-E7c86_GWFvco"></script> <script src="/js/app_core.js?4.1"></script> <script src="/assets/cb30fc59caa0617bdb70be372b05a914/jquery.js"></script> <script src="/assets/af03f6b16f606305d9cf827034cc8968/yii.js"></script> <script src="/js/app_set.js?9"></script> <script src="/js/script.full.js?v1.2.5"></script> <script src="/assets/f0db75bd7fb3b61fd5c2b967f1a77e3e/js/bootstrap.js"></script> <script src="/assets/af03f6b16f606305d9cf827034cc8968/yii.activeForm.js"></script> <script>jQuery(function ($) { jQuery('.webinar-link').click(function(){ window.location.href=$(this).attr('data-url'); }); jQuery('#w5').yiiActiveForm([], []); "use strict"; grecaptcha.ready(function() { grecaptcha.execute("6Lfj5vQUAAAAAOjsdAMk32BeA8J-E7c86_GWFvco", {action: "reg"}).then(function(token) { jQuery("#" + "recaptcha").val(token); const jsCallback = ""; if (jsCallback) { eval("(" + jsCallback + ")(token)"); } }); }); jQuery('#w6').yiiActiveForm([], []); $('.btn-subscribe').click(function(){ if($('.email-subscribe').val() != ''){ Cookies.set('modal_subscribe', 'subscribed'); $.post('/api/subscriber',{email:$('.email-subscribe').val(),_csrf:'T8PvFDilg7GTI97N7zC-rEinZvpdL-OnYsypvjbFVVg1ldt7DMnp3Ntl7fmqYM_FIeUNjCpfgcUzjpzEBvwcDw=='},function(data){ console.log(data); $('.modal-email .alert').text('Дякуємо! Ми будемо тримати Вас в курсі!').removeClass('hide alert-warning').addClass('alert-success'); }).fail(function(data) { $('.modal-email .alert').text(data.responseJSON[0].message).removeClass('hide alert-success').addClass('alert-warning'); }); } }) });</script> </body> </html>