Урок "Поняття гіпертекстового документу"

Про матеріал

Презентація та завдання до уроку з теми "Поняття гіпертекстового документу"

Зміст архіву

çáóñá¡¡∩_1.docx docx
î«óá HTML.pptx pptx

Перегляд файлу

Завдання
1. Зайти на https://codepen.io/pen/ (можна з мобільних пристроїв)

2. У розділі HTML створити розмітку за зразком на зображенні:

Посилання має бути на https://www.google.com/, текст можна скопіювати.

1 абзац:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis convallis facilisis ornare. Nulla sodales nisi id quam semper dictum. Donec id blandit dolor. Phasellus congue eu libero sit amet commodo. Fusce lectus eros, ultricies et vehicula vitae, congue non diam. Phasellus ultrices condimentum diam, eu malesuada nulla egestas et.

2 абзац:

Donec pulvinar varius fringilla. Quisque fermentum auctor est, et ultrices risus ornare sit amet. Phasellus urna arcu, varius id dolor eget, dapibus sagittis massa. Integer non nisi vel eros pretium hendrerit eu quis leo. Cras ut maximus lectus.

Використовуйте теги: <span>, <a>, <div>, <p> або інші.

Результат надіслати у вигляді скріншоту сайту codepen з виконаним завданням (код HTML і розмітка).

P.S. Скріншот можна зробити кнопкою prtsc на клавіатурі або кнопками блокування + звуку на телефоні.

Перегляд файлу

{C5238 D0 C-0769-4 B14-81 FC-500677929423}Створення веб-сайтів

Попередній слайд 1 / 13 Наступний слайд

Зміст слайдів

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

{C5238 D0 C-0769-4 B14-81 FC-500677929423}Створення веб-сайтів

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

Гіпертекст – це текстовий документ, у якому містяться посилання на інші документи чи інші фрагменти цього ж документа. Термін гіпертекст був уведений американським філософом Тедом Нельсоном у 1965 р. Гіпертекстове посилання (гіперпосилання) — це об'єкт у документі, за допомогою якого можна перейти до іншого фрагмента цього ж документа або до іншого документа. Гіперпосиланням може бути фрагмент тексту або графічне зображення. Зазвичай, гіперпосилання виділяються кольором або підкресленням.

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

Веб-сторінка - це електронний документ, який містить текст, графічні зображення, мультимедійні об'єкти, гіперпосилання та спеціальні команди форматування. Веб-сторінки створюються за допомогою мов: HTML i XHTML (мови розмітки гіпертексту).https://css.in.ua/html/tags - Довідник по HTML тегам

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

Ми вивчатимемо спосіб створення web-сторінки за допомогою мови HTML. Для підготовки html-файлу можна використати текстовий редактор Блокнот. Після написання html-файл потрібно зберегти на диску з деякою назвою з розширенням назви htm чи html.( Документ.html )

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

Структура програми мовою HTML Назва вікна Web-сторінки </ TITLE > </ HEAD ><BODY параметри> Текст</BODY></HTML></p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/96849/338740/391397_images/6.jpg" data-lightbox="slides" data-title="Слайд №6"><img src="/uploads/files/96849/338740/391397_images/thumb_6.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 6</div> <p>Більшість тегів є парними:<HTML> … </HTML> тег означення HTML-файлу<HEAD> … </ HEAD > описує заголовок документа<TITLE> … </ TITLE > назва вікна Web-сторінки <BODY параметри> … </BODY> текст, що має відображатися у вікні браузера.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/96849/338740/391397_images/7.jpg" data-lightbox="slides" data-title="Слайд №7"><img src="/uploads/files/96849/338740/391397_images/thumb_7.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 7</div> <p>Команди мови HTML називаються тегами. Теги бувають : Одинарні Парні </p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/96849/338740/391397_images/8.jpg" data-lightbox="slides" data-title="Слайд №8"><img src="/uploads/files/96849/338740/391397_images/thumb_8.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 8</div> <p>Типи тегів. Рядкові – <span>, <a>, <img> та ін. Займають тільки простір, обмежений тегами і не має переходів на новий рядок. Блокові - <div>, <p>, <h1>, <ul> та ін. Займають всю ширину контейнера, з переходом на новий рядок до та після елементу. </p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/96849/338740/391397_images/9.jpg" data-lightbox="slides" data-title="Слайд №9"><img src="/uploads/files/96849/338740/391397_images/thumb_9.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 9</div> <p>Тег img<img src=“https://upload.wikimedia.org/wikipedia/commons/7/78/Felis_margarita.jpg” alt=“кіт” />Одинарний тег, повинен мати як мінімум 2 артибути: src (шлях до картинки) та alt (назву)Текст атрибуту аlt показується, якщо веб-сторінка не може завантажити картнику. Також використовується браузером для покращення доступності (читачі веб-сторінок для людей з порушеннями зору та ін.) </p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/96849/338740/391397_images/10.jpg" data-lightbox="slides" data-title="Слайд №10"><img src="/uploads/files/96849/338740/391397_images/thumb_10.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 10</div> <p>Теги форматування тексту: <P> - це тег початок нового абзацу <BR /> - наступний за цим тегом текст буде наведено в новому рядку <НR /> - проведена горизонтальна лінія <SUB> текст </SUB> нижній індекс (Н2 О) <SUР> текст </SUР> верхній індекс (а2)</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/96849/338740/391397_images/11.jpg" data-lightbox="slides" data-title="Слайд №11"><img src="/uploads/files/96849/338740/391397_images/thumb_11.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 11</div> <p>Теги форматування тексту: <B> Жирний текст </B> <I> Текст курсивом </I> <B> Підкреслений текст </B> <B> <I>Жирний курсив</I> </B> <Р> Текст абзацу </Р> </p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/96849/338740/391397_images/12.jpg" data-lightbox="slides" data-title="Слайд №12"><img src="/uploads/files/96849/338740/391397_images/thumb_12.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 12</div> <p>Заголовок Теги<Н1> Заголовок1 </Н1><Н2> Заголовок2 </Н2> <Н3> Заголовок3 </Н3> <Н4> Заголовок4 </Н4> <Н5> Заголовок5 </Н5> <Н6> Заголовок6 </Н6> Результат. Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Заголовок 6</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/96849/338740/391397_images/13.jpg" data-lightbox="slides" data-title="Слайд №13"><img src="/uploads/files/96849/338740/391397_images/thumb_13.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 13</div> <p>Тег <table><table> <thead> <th> <td>…</td> <td>…</td> </th> </thead> <tbody> <tr> <td>...</td> <td>...</td> </tr> </tbody></table></p> </div> </div> </div> </div> </div> </div> <div class="document-content-block"> </div> </div> <div class="col-md-3 col-sm-4 col-xs-12"> <div class="file-info zip"> <div class="filetype">zip</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/96849">Сніжок Тетяна Анатоліївна</a> <div class="clearfix"></div> </div> <div class="taxonomy"> <div class="control-label">Пов’язані теми</div> <a href="/biblioteka/informatika">Інформатика</a>, <a href="/biblioteka/informatika/klas-10">10 клас</a>, <a href="/biblioteka/typ-2">Матеріали до уроків</a> </div> <div class="taxonomy"> <div class="control-label">До підручника</div> Інформатика (рівень стандарту) 10 клас (Морзе Н.В., Вембер В.П., Кузьмінська О.Г.) </div> <div class="meta"> <div class="control-label">Додано</div> <span><i class="fa fa-calendar" aria-hidden="true"></i> 8 березня 2023</span> </div> <div class="meta"> <div class="control-label">Переглядів</div> <span><i class="fa fa-eye" aria-hidden="true"></i> 284</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/288"><img src="https://naurok.com.ua/uploads/banner/288/1669640056.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 docx"> <div class="filetype">docx</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 654</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 0</span> </div> <div class="headline"> <a href="/praktichna-robota-stvorennya-videoklipu-339751.html">Практична робота "Створення відеокліпу"</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> 2722</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 0</span> </div> <div class="headline"> <a href="/praktichna-robota-sortuvannya-ta-filtraciya-danih-339755.html">Практична робота "Сортування та фільтрація даних"</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> 1231</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 0</span> </div> <div class="headline"> <a href="/praktichna-robota-robota-z-gotovoyu-bazoyu-danih-vvedennya-ta-otrimannya-danih-339757.html">Практична робота «Робота з готовою базою даних. Введення та отримання даних.»</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> 576</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 0</span> </div> <div class="headline"> <a href="/konspekt-uroku-stvorennya-veb-storinok-340347.html">Конспект уроку "Створення веб-сторінок"</a> </div> </div> </div> <div class="items related"> <div class="related-head">Схожі матеріали</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> 3946</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 5</span> </div> <div class="headline"> <a href="/nastroyuvannya-parametriv-storinok-stvorennya-kolontituliv-druk-dokumenta-praktichna-robota-4-avtomatichne-stvorennya-zmistu-dokumenta-nastroyuvannya-parametriv-storinok-stvorennya-kolontituliv-537.html">Практична робота з інформатики для 10 класу на тему: «Автоматичне створення змісту документа. Настроювання параметрів сторінок. Створення колонтитулів»</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> 3676</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 5</span> </div> <div class="headline"> <a href="/metodichna-rozrobka-pozaklasnogo-zahodu-z-informatiki-bezpechniy-internet-705.html"> Методична розробка позакласного заходу з інформатики “Безпечний Інтернет” </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> 4582</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 5</span> </div> <div class="headline"> <a href="/metodika-vikonannya-laboratornih-robit-z-informatiki-dlya-uchniv-pershogo-kursu-ptnz-riven-standartu-1014.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> 5627</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 5</span> </div> <div class="headline"> <a href="/urok-stvorennya-avtomatizovanogo-saytu-v-google-ta-prezentaciya-do-uroku-stvorennya-avtomatizovanogo-saytu-v-google-2658.html">Урок «Створення автоматизованого сайту в Google» та Презентація до уроку «Створення автоматизованого сайту в Google»</a> </div> </div> <div class="file-item pdf"> <div class="filetype">pdf</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 8588</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 5</span> </div> <div class="headline"> <a href="/elektronniy-laboratorniy-praktikum-na-temu-videomontazh-4422.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/urok-ponyattya-gipertekstovogo-dokumentu-338740.html', 'Урок "Поняття гіпертекстового документу"'); Share.log('doc',338740,'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/urok-ponyattya-gipertekstovogo-dokumentu-338740.html', 'Урок "Поняття гіпертекстового документу"'); Share.log('doc',338740,'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/urok-ponyattya-gipertekstovogo-dokumentu-338740.html', 'Урок "Поняття гіпертекстового документу"'); Share.log('doc',338740,'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/urok-ponyattya-gipertekstovogo-dokumentu-338740.html', 'Урок "Поняття гіпертекстового документу"'); Share.log('doc',338740,'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/urok-ponyattya-gipertekstovogo-dokumentu-338740.html'); Share.log('doc',338740,'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=338740"><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=338740" class="" onClick="libsBookmark.save(338740);"><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="nTHESiADn0G9NG8OVfZEogcjZOvUCbwdHGiot4ubACHrHK8EcUKuAPJ2IkBmuDbHXVoC3eRhyXtZXdDZ4dJhWw=="> <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="nTHESiADn0G9NG8OVfZEogcjZOvUCbwdHGiot4ubACHrHK8EcUKuAPJ2IkBmuDbHXVoC3eRhyXtZXdDZ4dJhWw=="> <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:'nTHESiADn0G9NG8OVfZEogcjZOvUCbwdHGiot4ubACHrHK8EcUKuAPJ2IkBmuDbHXVoC3eRhyXtZXdDZ4dJhWw=='},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>