Презентація до уроку "Створення вебсторінок", для 8-го класу

Про матеріал

Презентація до уроку "Створення вебсторінок" для 8-го класу при вивченні теми "Створення та публікація веб ресурсів"

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

Урок 1 Створення ВЕБСТОРІНКИм. Кривий Ріг КЗШ 125 Костіна А. М.

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

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

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

Урок 1 Створення ВЕБСТОРІНКИм. Кривий Ріг КЗШ 125 Костіна А. М.

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

План урок. УСтворити теку project. Відкрити тепку project в програмі Sublime. Text. Створити новий файл Сtrl + N. Вибрати мову HTML. Побудувати основну структуру сторінки ! Tab. Тег додати текст My page. Збережемо Ctrl + S в теку project з ім'ям index. Подивитися результат в браузері. В тег <body> додати заголовок 1 рівня <h1>, заголовок 2 рівня <h2>, абзац тексту <p>В тег <body> додати зображення <img>В тег <body> додати горизонтальну лінію <hr>, розрив рядка <br>, кнопку <button>, поле для введення <input>11. У тег <body> додати посилання <a> на шкільний сайт http://school-125.dp.ua/м. Кривий Ріг КЗШ 125 Костіна А. М.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/1643375/204840/220803_images/3.jpg" data-lightbox="slides" data-title="Слайд №3"><img src="/uploads/files/1643375/204840/220803_images/thumb_3.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 3</div> <p>1 - 1.2 Відкрити теку project в програмі Sublime Text.м. Кривий Ріг КЗШ 125 Костіна А. М.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/1643375/204840/220803_images/4.jpg" data-lightbox="slides" data-title="Слайд №4"><img src="/uploads/files/1643375/204840/220803_images/thumb_4.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 4</div> <p>3. Створити новий файл Ctrl+N. м. Кривий Ріг КЗШ 125 Костіна А. М.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/1643375/204840/220803_images/5.jpg" data-lightbox="slides" data-title="Слайд №5"><img src="/uploads/files/1643375/204840/220803_images/thumb_5.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 5</div> <p>4. Вибрати мову HTML.м. Кривий Ріг КЗШ 125 Костіна А. М.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/1643375/204840/220803_images/6.jpg" data-lightbox="slides" data-title="Слайд №6"><img src="/uploads/files/1643375/204840/220803_images/thumb_6.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 6</div> <p>Побудувати основну структуру сторінки ! Tab.м. Кривий Ріг КЗШ 125 Костіна А. М.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/1643375/204840/220803_images/7.jpg" data-lightbox="slides" data-title="Слайд №7"><img src="/uploads/files/1643375/204840/220803_images/thumb_7.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 7</div> <p> 6. В тег <title> додати текст - My page.м. Кривий Ріг КЗШ 125 Костіна А. М.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/1643375/204840/220803_images/8.jpg" data-lightbox="slides" data-title="Слайд №8"><img src="/uploads/files/1643375/204840/220803_images/thumb_8.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 8</div> <p>7. Зберегти Ctrl+S в Теку project з іменем index. м. Кривий Ріг КЗШ 125 Костіна А. М</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/1643375/204840/220803_images/9.jpg" data-lightbox="slides" data-title="Слайд №9"><img src="/uploads/files/1643375/204840/220803_images/thumb_9.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 9</div> <p>8. В тег <body> додати заголовок 1 рівня <h1>, заголовок 2 рівня <h2>, абзац тексту <p>.м. Кривий Ріг КЗШ 125 Костіна А. М</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/1643375/204840/220803_images/10.jpg" data-lightbox="slides" data-title="Слайд №10"><img src="/uploads/files/1643375/204840/220803_images/thumb_10.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 10</div> <p>Результат в браузерім. Кривий Ріг КЗШ 125 Костіна А. М</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/1643375/204840/220803_images/11.jpg" data-lightbox="slides" data-title="Слайд №11"><img src="/uploads/files/1643375/204840/220803_images/thumb_11.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 11</div> <p>9. В тег <body> додати Зображення <img>м. Кривий Ріг КЗШ 125 Костіна А. М</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/1643375/204840/220803_images/12.jpg" data-lightbox="slides" data-title="Слайд №12"><img src="/uploads/files/1643375/204840/220803_images/thumb_12.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 12</div> <p>Результат в браузерім. Кривий Ріг КЗШ 125 Костіна А. М</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/1643375/204840/220803_images/13.jpg" data-lightbox="slides" data-title="Слайд №13"><img src="/uploads/files/1643375/204840/220803_images/thumb_13.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 13</div> <p>10. В тег <body> додати горизонтальну лінію<hr>, розрив рядка <br>, кнопку <button>,поле для вводу <input>м. Кривий Ріг КЗШ 125 Костіна А. М</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/1643375/204840/220803_images/14.jpg" data-lightbox="slides" data-title="Слайд №14"><img src="/uploads/files/1643375/204840/220803_images/thumb_14.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 14</div> <p>Результат в браузерІм. Кривий Ріг КЗШ 125 Костіна А. М</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/1643375/204840/220803_images/15.jpg" data-lightbox="slides" data-title="Слайд №15"><img src="/uploads/files/1643375/204840/220803_images/thumb_15.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 15</div> <p>11. В тег <body> додати посилання <a> на шкільний сайт http://school-125.dp.ua/м. Кривий Ріг КЗШ 125 Костіна А. М</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/1643375/204840/220803_images/16.jpg" data-lightbox="slides" data-title="Слайд №16"><img src="/uploads/files/1643375/204840/220803_images/thumb_16.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 16</div> <p>Результат в браузерім. Кривий Ріг КЗШ 125 Костіна А. М</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/1643375">Костіна Анна Миколаївна</a> <div class="clearfix"></div> </div> <div class="taxonomy"> <div class="control-label">Пов’язані теми</div> <a href="/biblioteka/informatika">Інформатика</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> 18 листопада 2020</span> </div> <div class="meta"> <div class="control-label">Переглядів</div> <span><i class="fa fa-eye" aria-hidden="true"></i> 795</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/806"><img src="https://naurok.com.ua/uploads/banner/806/1780480392.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> 866</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 0</span> </div> <div class="headline"> <a href="/test-tekstoviy-dokument-ta-yogo-ob-ekti-204876.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> 2409</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 0</span> </div> <div class="headline"> <a href="/konspekt-uroku-elektronni-tablici-h-priznachennya-mozhlivosti-osnovni-funkci-204884.html">Конспект уроку "Електронні таблиці, їх призначення, можливості, основні функції"</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> 634</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 0</span> </div> <div class="headline"> <a href="/prezentaciya-reklama-korisnogo-servisu-204915.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> 481</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 0</span> </div> <div class="headline"> <a href="/test-programuvannya-na-temu-test-205082.html">Тест програмування на тему "Тест"</a> </div> </div> </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> 5589</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 0</span> </div> <div class="headline"> <a href="/konspekt-uroku-z-informatiki-dlya-10-go-klasu-na-temu-robota-z-elektronnoyu-poshtoyu-z-vikoristannyam-veb-interfeysu-79.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> 24463</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 4</span> </div> <div class="headline"> <a href="/konspekt-uroku-z-informatiki-dlya-5-go-klasu-na-temu-kritichne-ocinyuvannya-informaci-otrimano-z-internetu-102.html">Конспект уроку з інформатики для 5-го класу на тему: "Критичне оцінювання інформації, отриманої з Інтернету".</a> </div> </div> <div class="file-item doc"> <div class="filetype">doc</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 5938</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 0</span> </div> <div class="headline"> <a href="/ponyattya-pro-komp-yuterni-virusi-klasifikaciya-komp-yuternih-virusiv-311.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> 5741</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 0</span> </div> <div class="headline"> <a href="/prezentaciya-do-mayster-klasu-zastosuvannya-komp-yuternih-tehnologiy-yak-zasobu-rozvitku-logichnogo-mislennya-molodshih-shkolyariv-462.html">Презентація до майстер-класу «Застосування комп’ютерних технологій як засобу розвитку логічного мислення молодших школярів»</a> </div> </div> <div class="file-item doc"> <div class="filetype">doc</div> <div class="meta pull-right"> <span><i class="fa fa-eye" aria-hidden="true"></i> 3309</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 0</span> </div> <div class="headline"> <a href="/pidsumkoviy-urok-z-temi-tekstoviy-procesor-833.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-do-uroku-stvorennya-vebstorinok-dlya-8-go-klasu-204840.html', 'Презентація до уроку "Створення вебсторінок", для 8-го класу'); Share.log('doc',204840,'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-do-uroku-stvorennya-vebstorinok-dlya-8-go-klasu-204840.html', 'Презентація до уроку "Створення вебсторінок", для 8-го класу'); Share.log('doc',204840,'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-do-uroku-stvorennya-vebstorinok-dlya-8-go-klasu-204840.html', 'Презентація до уроку "Створення вебсторінок", для 8-го класу'); Share.log('doc',204840,'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-do-uroku-stvorennya-vebstorinok-dlya-8-go-klasu-204840.html', 'Презентація до уроку "Створення вебсторінок", для 8-го класу'); Share.log('doc',204840,'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-do-uroku-stvorennya-vebstorinok-dlya-8-go-klasu-204840.html'); Share.log('doc',204840,'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=204840"><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=204840" class="" onClick="libsBookmark.save(204840);"><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-turnstile{ display: none; } </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="FWJ3C-atTwQoz9Pt9S86f-wuB7h6vbCyswrUJng_Di99Wkdtl-grSX6rhrq-ZnMxlWNw0Qrw5OjJbqJHMnU_YA=="> <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-2026, ТОВ «На Урок» </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="footer-registration-form" action="/registration" method="post"> <input type="hidden" name="_csrf" value="FWJ3C-atTwQoz9Pt9S86f-wuB7h6vbCyswrUJng_Di99Wkdtl-grSX6rhrq-ZnMxlWNw0Qrw5OjJbqJHMnU_YA=="> <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-turnstile"> <label class="control-label" for="turnstile"></label> <input type="hidden" id="cf-turnstile-1-input" name="turnstile" value=""><div id="cf-turnstile-1-widget"></div><script>(function(){var c=document.getElementById("cf-turnstile-1-widget");if(c){var f=c.closest("form");if(f){var b=f.querySelector("button[type=submit],input[type=submit],button:not([type])");if(b){b.disabled=true;var p=b.closest(".form-group")||b.parentNode;var l=document.createElement("div");l.className="cf-loader-text";l.id="cf-turnstile-1-widget-loader";l.innerHTML='<span class="cf-spinner"></span> Перевірка безпеки...';p.appendChild(l);}}}})();</script> <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="/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>(function(){ var widgetId = null; var submitBtn = null; var rendered = false; var containerId = 'cf-turnstile-1-widget'; var inputId = 'cf-turnstile-1-input'; var attempts = 0; console.log('[Turnstile] Widget init: ' + containerId); function doRender(){ attempts++; if(rendered) return true; if(typeof turnstile === 'undefined') { if(attempts % 50 === 0) console.log('[Turnstile] Waiting for API... attempt ' + attempts); return false; } if(typeof turnstile.render !== 'function') { console.error('[Turnstile] API loaded but render is not a function:', turnstile); return false; } var c = document.getElementById(containerId); var inp = document.getElementById(inputId); if(!c || !inp) { console.error('[Turnstile] Container or input not found:', containerId, inputId); return false; } rendered = true; console.log('[Turnstile] Rendering widget: ' + containerId); var form = c.closest('form'); if(form){ // Find submit button - buttons default to type="submit" so also check buttons without explicit type submitBtn = form.querySelector('button[type="submit"],input[type="submit"],button:not([type])'); if(submitBtn){ submitBtn.disabled = true; // Add loader text if not already created by inline script if(!document.getElementById(containerId + '-loader')){ var btnParent = submitBtn.closest('.form-group') || submitBtn.parentNode; var loader = document.createElement('div'); loader.className = 'cf-loader-text'; loader.id = containerId + '-loader'; loader.innerHTML = '<span class="cf-spinner"></span> Перевірка безпеки...'; btnParent.appendChild(loader); } } } try { widgetId = turnstile.render(c, { 'sitekey': '0x4AAAAAACM8akA9pEX9Z7Br', 'theme': 'auto', 'size': 'invisible', 'action': 'reg', 'callback': function(token){ console.log('[Turnstile] Token received for ' + containerId); inp.value = token; if(submitBtn) submitBtn.disabled = false; var loader = document.getElementById(containerId + '-loader'); if(loader) loader.style.display = 'none'; }, 'expired-callback': function(){ console.log('[Turnstile] Token expired for ' + containerId); inp.value = ''; if(submitBtn) submitBtn.disabled = true; var loader = document.getElementById(containerId + '-loader'); if(loader) loader.style.display = 'flex'; if(widgetId !== null) turnstile.reset(widgetId); }, 'error-callback': function(err){ console.error('[Turnstile] Error for ' + containerId + ':', err); } }); console.log('[Turnstile] Render complete for ' + containerId + ', widgetId:', widgetId); } catch(e) { console.error('[Turnstile] Render exception:', e); return false; } if(form && !form.dataset.cfHooked){ form.dataset.cfHooked = '1'; form.addEventListener('submit', function(){ setTimeout(function(){ if(widgetId !== null && typeof turnstile !== 'undefined'){ try { turnstile.reset(widgetId); } catch(e){} } }, 500); }); } return true; } var interval = setInterval(function(){ if(doRender()) clearInterval(interval); }, 100); setTimeout(function(){ clearInterval(interval); if(!rendered){ console.error('[Turnstile] TIMEOUT: Widget did not render after 15s. API loaded:', typeof turnstile !== 'undefined'); if(submitBtn){ submitBtn.disabled = false; var loader = document.getElementById(containerId + '-loader'); if(loader) loader.style.display = 'none'; } } }, 15000); })();</script> <script>jQuery(function ($) { jQuery('.webinar-link').click(function(){ window.location.href=$(this).attr('data-url'); }); jQuery('#w5').yiiActiveForm([], []); jQuery('#footer-registration-form').yiiActiveForm([], []); $('.btn-subscribe').click(function(){ if($('.email-subscribe').val() != ''){ Cookies.set('modal_subscribe', 'subscribed'); $.post('/api/subscriber',{email:$('.email-subscribe').val(),_csrf:'FWJ3C-atTwQoz9Pt9S86f-wuB7h6vbCyswrUJng_Di99Wkdtl-grSX6rhrq-ZnMxlWNw0Qrw5OjJbqJHMnU_YA=='},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>