Мова гіпертекстової розмітки. Гіпертекстовий документ та його елементи

Про матеріал
Завдання уроку: • Познайомитися з деякими засобами мови HTML форматування тексту; • Навчитися використовувати відповідні теги для зміни вигляду; • Доповнити та відформатувати власну веб-сторінку.
Перегляд файлу
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Пригадайте: Проектування та верстка веб-сторінок. Що таке веб-сайт?Що таке веб-сторінка?Які Вам відомі способи створення веб-сайтів?
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Ти дізнаєшся: Проектування та верстка веб-сторінок
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Мова гіпертекстової розмітки. Гіпертекстовий документ та його елементи
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLБазові конструкції мови HTMLГіпертекст — це текст, у який вбудовані спеціальні коди, що задають форматування тексту, наявність у ньому ілюстрацій, мультимедійних вставок та гіперпосилань. HTMLHyper Text Markup Language Мова гіпертекстової розмітки. Процес вставляння в текст кодів HTML називають розміткою
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПоняття тегу. Коди мови HTML, за допомогою яких розмічають вихідний текст, називають тегами. Приклади тегів HTML: <TITLE>,<BODY>, <TABLE>, </A>, <IMG>, </CENTER>.<>Парні теги</>Відкривальнийзадає ефект Закривальнийприпиняє його дію. Приклади парних тегів HTML: <HTML></HTML><В></В> <HEAD></HEAD><НЗ></Н3> <ADDRESS></ADDRESS><LI></LI>
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLБазові конструкції мови HTMLКоди мови HTML, за допомогою яких розмічають вихідний текст, називають тегами. Приклади одинарних тегів HTML: <BR>, <HR>, <МЕТА>, <BASEFONT>, <FRAME>, <INPUT>Атрибути — це додаткові ключові слова, відокремлені від основного ключового слова тегу та один від одного символами пробілу.<BODY BGCOLOR=
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСтруктура HTML-документа<HTML><HEAD><ТІТLЕ>Заголовок документа</ТІТLЕ></HEAD><BODY>Текст, що відображається на екрані</BODY></HTML>Коди мови HTML, за допомогою яких розмічають вихідний текст, називають тегами
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСтруктура HTML-документа<HTML><HEAD><ТІТLЕ>Заголовок документа</ТІТLЕ></HEAD><BODY>Текст, що відображається на екрані</BODY></HTML>Повідомляє браузеру, що це. HTML-документ. Коди мови HTML, за допомогою яких розмічають вихідний текст, називають тегами
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСтруктура HTML-документа<HTML><HEAD><ТІТLЕ>Заголовок документа</ТІТLЕ></HEAD><BODY>Текст, що відображається на екрані</BODY></HTML>Розділ заголовківІнформація про документ. Коди мови HTML, за допомогою яких розмічають вихідний текст, називають тегами
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСтруктура HTML-документа<HTML><HEAD><ТІТLЕ>Заголовок документа</ТІТLЕ></HEAD><BODY>Текст, що відображається на екрані…</BODY></HTML>Див. Структура HTML-документа.html. Коди мови HTML, за допомогою яких розмічають вихідний текст, називають тегами
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLБазові конструкції мови HTMLРівні заголовків <H1> Заголовок першого рівня </H1><H2> Заголовок другого рівня </H2><H3> Заголовок третього рівня </H3><H4> Заголовок четвертого рівня </H4><H5> Заголовок п'ятого рівня </H5><H6> Заголовок шостого рівня </H6>Див. Рівні_заголовків.html. Коди мови HTML, за допомогою яких розмічають вихідний текст, називають тегами
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLБазові конструкції мови HTMLТег абзаца. Для визначення звичайних абзаців у мові HTML використовують теги <Р> і </Р>. Текст, розміщений між ними, власне і буде одним абзацом. У разі переходу на новий рядок без створення абзацу використовується одинарний тег <BR>. Розділювачами в тексті у вигляді горизонтальної лінії створюють за допомогою одинарного тегу <HR>. Вирівнювання тексту ALIGN=center \ right \ left. Коди мови HTML, за допомогою яких розмічають вихідний текст, називають тегами
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLБазові конструкції мови HTMLКольори та зображення. Кольори та зображення. BACKGROUND=
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Домашнє завдання. Вивчити тему. Підготуйте інформацію «Кольори в HTML» Заповнити словничок HTML, гіпертекст, теги
Робота з комп'ютером. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Вправа 2.1 Створимо HTML-документ за допомогою найпростішого текстового редактора.1. Відкрийте текстовий редактор Блокнот (Notepad).2. Для створення HTML-документа наберіть такий текст:
Робота з комп'ютером. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Вправа 2.1 (продовження)Збережіть файл у створеній папці, назвавши його 1.html. Закрийте текстовий редактор. Запустіть браузер та відкрийте файл 1.html. Перегляньте отриманий результат. Проаналізуйте, як відтворено веб-сторінку. Якщо потрібно внести зміни, виберіть команду Перегляд HTML-коду в меню Вигляд. Збережіть зміни та поновіть веб-сторінку за допомогою клавіші F5 або кнопки Оновити панелі інструментів.
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Працюємо за комп’ютером
Зміст слайдів
Номер слайду 1

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк

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

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок

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

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Пригадайте: Проектування та верстка веб-сторінок. Що таке веб-сайт?Що таке веб-сторінка?Які Вам відомі способи створення веб-сайтів?

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

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Ти дізнаєшся: Проектування та верстка веб-сторінок

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

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Мова гіпертекстової розмітки. Гіпертекстовий документ та його елементи

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

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLБазові конструкції мови HTMLГіпертекст — це текст, у який вбудовані спеціальні коди, що задають форматування тексту, наявність у ньому ілюстрацій, мультимедійних вставок та гіперпосилань. HTMLHyper Text Markup Language Мова гіпертекстової розмітки. Процес вставляння в текст кодів HTML називають розміткою

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

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПоняття тегу. Коди мови HTML, за допомогою яких розмічають вихідний текст, називають тегами. Приклади тегів HTML: ,<BODY>, <TABLE>, </A>, <IMG>, </CENTER>.<>Парні теги</>Відкривальнийзадає ефект Закривальнийприпиняє його дію. Приклади парних тегів HTML: <HTML></HTML><В></В> <HEAD></HEAD><НЗ></Н3> <ADDRESS></ADDRESS><LI></LI></p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/92446/98459_images/8.jpg" data-lightbox="slides" data-title="Слайд №8"><img src="/uploads/files/289925/92446/98459_images/thumb_8.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 8</div> <p>Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLБазові конструкції мови HTMLКоди мови HTML, за допомогою яких розмічають вихідний текст, називають тегами. Приклади одинарних тегів HTML: <BR>, <HR>, <МЕТА>, <BASEFONT>, <FRAME>, <INPUT>Атрибути — це додаткові ключові слова, відокремлені від основного ключового слова тегу та один від одного символами пробілу.<BODY BGCOLOR="#000000" TEXT="#FFFFFF"BACKGROUND="rain.gif"><OPTION SELECTED><FRAME SCR="file.html" NORESIZE>Приклади атрибутів HTML: </p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/92446/98459_images/9.jpg" data-lightbox="slides" data-title="Слайд №9"><img src="/uploads/files/289925/92446/98459_images/thumb_9.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 9</div> <p>Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСтруктура HTML-документа<HTML><HEAD><ТІТLЕ>Заголовок документа</ТІТLЕ></HEAD><BODY>Текст, що відображається на екрані</BODY></HTML>Коди мови HTML, за допомогою яких розмічають вихідний текст, називають тегами</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/92446/98459_images/10.jpg" data-lightbox="slides" data-title="Слайд №10"><img src="/uploads/files/289925/92446/98459_images/thumb_10.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 10</div> <p>Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСтруктура HTML-документа<HTML><HEAD><ТІТLЕ>Заголовок документа</ТІТLЕ></HEAD><BODY>Текст, що відображається на екрані</BODY></HTML>Повідомляє браузеру, що це. HTML-документ. Коди мови HTML, за допомогою яких розмічають вихідний текст, називають тегами</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/92446/98459_images/11.jpg" data-lightbox="slides" data-title="Слайд №11"><img src="/uploads/files/289925/92446/98459_images/thumb_11.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 11</div> <p>Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСтруктура HTML-документа<HTML><HEAD><ТІТLЕ>Заголовок документа</ТІТLЕ></HEAD><BODY>Текст, що відображається на екрані</BODY></HTML>Розділ заголовківІнформація про документ. Коди мови HTML, за допомогою яких розмічають вихідний текст, називають тегами</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/92446/98459_images/12.jpg" data-lightbox="slides" data-title="Слайд №12"><img src="/uploads/files/289925/92446/98459_images/thumb_12.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 12</div> <p>Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСтруктура HTML-документа<HTML><HEAD><ТІТLЕ>Заголовок документа</ТІТLЕ></HEAD><BODY>Текст, що відображається на екрані…</BODY></HTML>Див. Структура HTML-документа.html. Коди мови HTML, за допомогою яких розмічають вихідний текст, називають тегами</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/92446/98459_images/13.jpg" data-lightbox="slides" data-title="Слайд №13"><img src="/uploads/files/289925/92446/98459_images/thumb_13.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 13</div> <p>Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLБазові конструкції мови HTMLРівні заголовків <H1> Заголовок першого рівня </H1><H2> Заголовок другого рівня </H2><H3> Заголовок третього рівня </H3><H4> Заголовок четвертого рівня </H4><H5> Заголовок п'ятого рівня </H5><H6> Заголовок шостого рівня </H6>Див. Рівні_заголовків.html. Коди мови HTML, за допомогою яких розмічають вихідний текст, називають тегами</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/92446/98459_images/14.jpg" data-lightbox="slides" data-title="Слайд №14"><img src="/uploads/files/289925/92446/98459_images/thumb_14.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 14</div> <p>Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLБазові конструкції мови HTMLТег абзаца. Для визначення звичайних абзаців у мові HTML використовують теги <Р> і </Р>. Текст, розміщений між ними, власне і буде одним абзацом. У разі переходу на новий рядок без створення абзацу використовується одинарний тег <BR>. Розділювачами в тексті у вигляді горизонтальної лінії створюють за допомогою одинарного тегу <HR>. Вирівнювання тексту ALIGN=center \ right \ left. Коди мови HTML, за допомогою яких розмічають вихідний текст, називають тегами</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/92446/98459_images/15.jpg" data-lightbox="slides" data-title="Слайд №15"><img src="/uploads/files/289925/92446/98459_images/thumb_15.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 15</div> <p>Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLБазові конструкції мови HTMLКольори та зображення. Кольори та зображення. BACKGROUND="URL" — замість URL вказують адресу малюнка, який має бути тлом для сторінки;BGC0 L0 R=значення — задає колір, який має бути фоновим для документа;ТЕХТ=значення — задає колір тексту;LINK=значення — визначає колір гіперпосилань у документі;ALINK=значення — задає колір гіперпосилань під час клацання; LINK=значення — задає колір переглянутих гіперпосилань.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/92446/98459_images/16.jpg" data-lightbox="slides" data-title="Слайд №16"><img src="/uploads/files/289925/92446/98459_images/thumb_16.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 16</div> <p>Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Домашнє завдання. Вивчити тему. Підготуйте інформацію «Кольори в HTML» Заповнити словничок HTML, гіпертекст, теги</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/92446/98459_images/17.jpg" data-lightbox="slides" data-title="Слайд №17"><img src="/uploads/files/289925/92446/98459_images/thumb_17.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 17</div> <p>Робота з комп'ютером. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Вправа 2.1 Створимо HTML-документ за допомогою найпростішого текстового редактора.1. Відкрийте текстовий редактор Блокнот (Notepad).2. Для створення HTML-документа наберіть такий текст:</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/92446/98459_images/18.jpg" data-lightbox="slides" data-title="Слайд №18"><img src="/uploads/files/289925/92446/98459_images/thumb_18.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 18</div> <p>Робота з комп'ютером. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Вправа 2.1 (продовження)Збережіть файл у створеній папці, назвавши його 1.html. Закрийте текстовий редактор. Запустіть браузер та відкрийте файл 1.html. Перегляньте отриманий результат. Проаналізуйте, як відтворено веб-сторінку. Якщо потрібно внести зміни, виберіть команду Перегляд HTML-коду в меню Вигляд. Збережіть зміни та поновіть веб-сторінку за допомогою клавіші F5 або кнопки Оновити панелі інструментів.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/92446/98459_images/19.jpg" data-lightbox="slides" data-title="Слайд №19"><img src="/uploads/files/289925/92446/98459_images/thumb_19.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 19</div> <p>Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Працюємо за комп’ютером</p> </div> </div> </div> </div> </div> <div role="tabpanel" class="tab-pane " id="file98460"> <div class="content-block"> <div class="doc-content-head">Перегляд файлу</div> <div class="doc-content" style="overflow-x: scroll;"> <div class="WordSection1"> <p class="MsoNormal" style='margin-top:0in;margin-right:9.0in;margin-bottom:0in; margin-left:-1.0in;margin-bottom:.0001pt'><img width=962 height=720 src="/uploads/files/289925/92446/98460_html/images/var-www-user-data-www-naurok-com-ua-web-uploads-files-289925001.png"><br clear=ALL> <br clear=all style='page-break-before:always'> </p> <p class="MsoNormal" style='margin-top:0in;margin-right:9.0in;margin-bottom:0in; margin-left:-1.0in;margin-bottom:.0001pt'><img width=962 height=720 src="/uploads/files/289925/92446/98460_html/images/var-www-user-data-www-naurok-com-ua-web-uploads-files-289925002.png"><br clear=ALL> <br clear=all style='page-break-before:always'> </p> <p class="MsoNormal" style='margin-top:0in;margin-right:9.0in;margin-bottom:0in; margin-left:-1.0in;margin-bottom:.0001pt'><img width=960 height=720 src="/uploads/files/289925/92446/98460_html/images/var-www-user-data-www-naurok-com-ua-web-uploads-files-289925003.png"><br clear=ALL> <br clear=all style='page-break-before:always'> </p> <p class="MsoNormal" style='margin-top:0in;margin-right:9.0in;margin-bottom:0in; margin-left:-1.0in;margin-bottom:.0001pt'><img width=962 height=734 src="/uploads/files/289925/92446/98460_html/images/var-www-user-data-www-naurok-com-ua-web-uploads-files-289925004.png"><br clear=ALL> </p> </div> </div> </div> </div> <div role="tabpanel" class="tab-pane " id="file98461"> <div class="content-block"> <div class="doc-content-head">Перегляд файлу</div> <div class="presentation-preview"> <div class="slides"> <div data-index="1" class="slide slide1 show" slidenumber="1"> <img class="slide_image" src="/uploads/files/289925/92446/98461_images/1.jpg" alt="Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Мова гіпертекстової розмітки. Гіпертекстовий документ та його елементи" title="Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Мова гіпертекстової розмітки. Гіпертекстовий документ та його елементи"> </div> <div data-index="2" class="slide slide2 hide" slidenumber="2"> <img class="slide_image" src="/uploads/files/289925/92446/98461_images/2.jpg" alt="Робота з комп'ютером. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Вправа 2.1 Створимо HTML-документ за допомогою найпростішого текстового редактора.1. Відкрийте текстовий редактор Блокнот (Notepad).2. Для створення HTML-документа наберіть такий текст:" title="Робота з комп'ютером. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Вправа 2.1 Створимо HTML-документ за допомогою найпростішого текстового редактора.1. Відкрийте текстовий редактор Блокнот (Notepad).2. Для створення HTML-документа наберіть такий текст:"> </div> <div data-index="3" class="slide slide3 hide" slidenumber="3"> <img class="slide_image" src="/uploads/files/289925/92446/98461_images/3.jpg" alt="Робота з комп'ютером. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Вправа 2.1 (продовження)Збережіть файл у створеній папці, назвавши його 1.html. Закрийте текстовий редактор. Запустіть браузер та відкрийте файл 1.html. Перегляньте отриманий результат. Проаналізуйте, як відтворено веб-сторінку. Якщо потрібно внести зміни, виберіть команду Перегляд HTML-коду в меню Вигляд. Збережіть зміни та поновіть веб-сторінку за допомогою клавіші F5 або кнопки Оновити панелі інструментів." title="Робота з комп'ютером. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Вправа 2.1 (продовження)Збережіть файл у створеній папці, назвавши його 1.html. Закрийте текстовий редактор. Запустіть браузер та відкрийте файл 1.html. Перегляньте отриманий результат. Проаналізуйте, як відтворено веб-сторінку. Якщо потрібно внести зміни, виберіть команду Перегляд HTML-коду в меню Вигляд. Збережіть зміни та поновіть веб-сторінку за допомогою клавіші F5 або кнопки Оновити панелі інструментів."> </div> <div data-index="4" class="slide slide4 hide" slidenumber="4"> <img class="slide_image" src="/uploads/files/289925/92446/98461_images/4.jpg" alt="Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Домашнє завдання. Вивчити тему. Підготуйте інформацію «Кольори в HTML» Заповнити словничок HTML, гіпертекст, теги" title="Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Домашнє завдання. Вивчити тему. Підготуйте інформацію «Кольори в HTML» Заповнити словничок HTML, гіпертекст, теги"> </div> </div> <div class="navigator"> <a class="prev disabled" href="javascript:void(0)" onClick="slider.prev()"><i class="fa fa-angle-left" aria-hidden="true"></i> Попередній слайд</a> <span class="numbers"> <span class="current">1</span> / <span class="total">4</span> </span> <a class="next" href="javascript:void(0)" onClick="slider.next()">Наступний слайд <i class="fa fa-angle-right" aria-hidden="true"></i></a> </div> </div> </div> <div class="content-block"> <div class="block-head">Зміст слайдів</div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/92446/98461_images/1.jpg" data-lightbox="slides" data-title="Слайд №1"><img src="/uploads/files/289925/92446/98461_images/thumb_1.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 1</div> <p>Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Мова гіпертекстової розмітки. Гіпертекстовий документ та його елементи</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/92446/98461_images/2.jpg" data-lightbox="slides" data-title="Слайд №2"><img src="/uploads/files/289925/92446/98461_images/thumb_2.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 2</div> <p>Робота з комп'ютером. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Вправа 2.1 Створимо HTML-документ за допомогою найпростішого текстового редактора.1. Відкрийте текстовий редактор Блокнот (Notepad).2. Для створення HTML-документа наберіть такий текст:</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/92446/98461_images/3.jpg" data-lightbox="slides" data-title="Слайд №3"><img src="/uploads/files/289925/92446/98461_images/thumb_3.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 3</div> <p>Робота з комп'ютером. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Вправа 2.1 (продовження)Збережіть файл у створеній папці, назвавши його 1.html. Закрийте текстовий редактор. Запустіть браузер та відкрийте файл 1.html. Перегляньте отриманий результат. Проаналізуйте, як відтворено веб-сторінку. Якщо потрібно внести зміни, виберіть команду Перегляд HTML-коду в меню Вигляд. Збережіть зміни та поновіть веб-сторінку за допомогою клавіші F5 або кнопки Оновити панелі інструментів.</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/289925/92446/98461_images/4.jpg" data-lightbox="slides" data-title="Слайд №4"><img src="/uploads/files/289925/92446/98461_images/thumb_4.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 4</div> <p>Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Домашнє завдання. Вивчити тему. Підготуйте інформацію «Кольори в HTML» Заповнити словничок HTML, гіпертекст, теги</p> </div> </div> </div> </div> </div> </div> <div class="document-content-block"> </div> </div> <div class="col-md-3 col-sm-4"> <div class="file-info zip"> <div class="filetype">zip</div> <div class="hidden-xs"> <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> <img src="/uploads/avatars/289925.JPG" class="profile-avatar-mini"/> <a href="/profile/289925">Чашук Олександр Федорович</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-7">Розробки уроків</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> 14 лютого</span> </div> <div class="meta"> <div class="control-label">Переглядів</div> <span><i class="fa fa-eye" aria-hidden="true"></i> 1069</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/73"><img src="/uploads/banner/73/1571208101.gif" 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" onClick="gtag('event', 'Кнопка в сайдбаре (нет разработок)', {'event_category': 'Додати розробку'});"><i class="fa fa-plus" aria-hidden="true"></i> Додати розробку</a> </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> 1264</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 1</span> </div> <div class="headline"><a href="/tekstovi-elementi-veb-storinki-tegi-ta-h-atributi-giperposilannya-92454.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> 1018</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 5</span> </div> <div class="headline"><a href="/elementi-multimedia-v-html-rozmischennya-na-veb-storinkah-audio-ta-video-fayliv-92590.html">Елементи мультимедіа в 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> 291</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 0</span> </div> <div class="headline"><a href="/priznachennya-matematichnih-procesoriv-programno-metodichniy-kompleks-gran-92634.html">Призначення математичних процесорів. Програмно-методичний комплекс GRAN</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> 471</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 0</span> </div> <div class="headline"><a href="/ekonomichni-zadachi-u-seredovischi-excel-92691.html">Урок "Економічні задачі у середовищі EXCEL"</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> 1000</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> 1199</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 0</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> 1456</span> <span><i class="fa fa-comment-o" aria-hidden="true"></i> 0</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> 1651</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> 2132</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 style="height:154px; margin-top:15px; margin-bottom:15px;"> <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="file-share hidden-xs"> <div class="share-head">Поділитись матеріалом</div> <a href="javascript:void(0)" onclick="Share.facebook('https://naurok.com.ua/mova-gipertekstovo-rozmitki-gipertekstoviy-dokument-ta-yogo-elementi-92446.html', 'Мова гіпертекстової розмітки. Гіпертекстовий документ та його елементи'); Share.log('doc',92446,'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/mova-gipertekstovo-rozmitki-gipertekstoviy-dokument-ta-yogo-elementi-92446.html', 'Мова гіпертекстової розмітки. Гіпертекстовий документ та його елементи'); Share.log('doc',92446,'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/mova-gipertekstovo-rozmitki-gipertekstoviy-dokument-ta-yogo-elementi-92446.html', 'Мова гіпертекстової розмітки. Гіпертекстовий документ та його елементи'); Share.log('doc',92446,'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/mova-gipertekstovo-rozmitki-gipertekstoviy-dokument-ta-yogo-elementi-92446.html', 'Мова гіпертекстової розмітки. Гіпертекстовий документ та його елементи'); Share.log('doc',92446,'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/mova-gipertekstovo-rozmitki-gipertekstoviy-dokument-ta-yogo-elementi-92446.html'); Share.log('doc',92446,'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"> <div class="bookmark-file"><a href="/registration?file_id=92446" class="" onClick="bookmark.save(92446);"><span>Зберегти на потім</span> <i class="fa fa-bookmark" aria-hidden="true"></i></a></div> </div> <div class="col-xs-6"> <a class="btn btn-orange btn-block btn-download-panel" href="/registration?file_id=92446"><i class="fa fa-download" aria-hidden="true"></i> Завантажити</a> </div> </div> </div> <span class="share-button fb-share-button"> <a href="javascript:void(0)" class="facebook" onclick=" window.open( 'https://www.facebook.com/dialog/share?app_id=589149888143238&display=popup&href='+encodeURIComponent('https://naurok.com.ua/mova-gipertekstovo-rozmitki-gipertekstoviy-dokument-ta-yogo-elementi-92446.html')+'&redirect_uri='+encodeURIComponent('https://naurok.com.ua/site/close'), 'facebook-share-dialog', 'width=626,height=436'); Share.log('doc',92446,'facebook'); return false;"> <svg class="svg-icon icon-facebook-share" role="img" height="46" width="46" viewBox="0 0 46 46"><path d="M43.5,0H2.5C1.1,0,0,1.1,0,2.5v40.9C0,44.9,1.1,46,2.5,46h22V28.2h-6v-6.9h6v-5.1c0-5.9,3.6-9.2,8.9-9.2 c2.5,0,4.7,0.2,5.4,0.3v6.2l-3.7,0c-2.9,0-3.4,1.4-3.4,3.4v4.4h6.9l-0.9,6.9h-6V46h11.7c1.4,0,2.5-1.1,2.5-2.5V2.5 C46,1.1,44.9,0,43.5,0z"></path></svg> Поширити у Facebook </a> </span> </div> </div> </div><!-- /.container --> <div class="olymp4-promo hidden-xs hidden-sm"> <div class="olymp4-promo-bg"> <div class="olymp4-promo-action animated pulse infinite slow"> <a target="_blank" href="/olimpiada"><img src="/img/olymp4/start.svg"/></a> </div> </div> </div> <footer class="sth-footer"> <div class="container-fluid"> <div class="row"> <div class="col-md-3 hidden-sm hidden-xs"> <img src="https://naurok.com.ua/img/logo.png" width="30%"/> <p class="sth-footer-about">Освітній проект «На Урок» <br />Створює необмежені можливості для обміну досвідом між освітянами</p> </div> <div class="col-md-4 col-sm-6 col-xs-7"> <ul class="sth-footer-nav"> <li><a href="/school/request">Співпраця закладів освіти з «На Урок»</a> <sup style="color:red;">NEW</sup></li> <li><a href="/olimpiada">Олімпіада «На Урок» <span style="color:#FF9800; font-weight:bold; text-decoration:none !important;">Осінь 2019</span></a></li> <li><a href="/store">Оформлення класу</a></li> <li><a href="/calendar">Матеріали до свят</a></li> <li><a href="/five">Конкурс «Фантастична п’ятірка»</a></li> <li><a href="/desyatka">Конкурс «Вчительська десятка»</a></li> <li><a href="/super-teacher">Конкурс «Класні керівники – супергерої»</a></li> <li><a href="/page/partners">Партнери</a></li> </ul> </div> <div class="col-md-2 col-sm-3 col-xs-5"> <ul class="sth-footer-nav"> <li><a href="/journal">Журнал</a></li> <li><a href="/biblioteka">Бібліотека розробок</a></li> <li><a href="/test">Тести</a></li> <li><a href="/webinar">Вебінари</a></li> <li><a href="/intensive">Інтенсиви</a></li> <li><a href="/conference">Конференції</a></li> <li><a href="/labs">Лабораторні роботи</a></li> <li><a href="/konkurs">Конкурси</a></li> </ul> </div> <div class="col-md-3 col-sm-3 col-xs-5"> <ul class="sth-footer-nav"> <li><span hashstring="about" hashtype="content">Про проект</span></li> <li><span hashstring="contact" hashtype="content">Зворотний зв'язок</span></li> <li><a href="https://www.facebook.com/naurok.com.ua/">Facebook</a></li> <li><a href="https://www.youtube.com/channel/UCMCYaKTwZ1Olw1fuzLvgA_Q">YouTube</a></li> <li><a href="https://t.me/naurok">Telegram</a></li> <li><a href="https://invite.viber.com/?g2=AQAa%2B9y2ntwa2Ui9%2Frsb2ifynb9JqV5JyDlUvYc3wCigUjAidgk4aZ%2B1hPRABdGp">Viber</a></li> <li>Email: <a href="mailto:info@naurok.com.ua">info@naurok.com.ua</a></li> </ul> </div> </div> <div class="sth-footer-copy"> <div class="row"> <div class="col-md-7 col-sm-6"> © 2017-2019, ТОВ «<a href="/">Освітній проект «На Урок</a>». Всі права захищені. <br /> <span hashstring="terms" hashtype="content">Умови користування</span> | <span hashstring="privacy" hashtype="content">Політика конфіденційності</span> </div> <div class="col-md-5 col-sm-6"> <div class="check-document-proof"> <div class="check-document-proof-label"><a href="https://naurok.com.ua/proof">Перевірка виданих документів</a> <sup>NEW</sup></div> <form id="w3" action="/proof" method="POST"> <input type="hidden" name="_csrf" value="bLmQYH__0HSNZuos_ihA8PyX48YYrCIHZL_x0XrD_Qogjd4kMNKnMshe03-_fHS9v-HQ61HbFkRQicG9NveXSw=="> <div class="row"> <div class="col-md-8 col-sm-8 col-xs-7"> <div> <div class="form-group"> <div class="input-group input-group-sm"> <span class="input-group-addon" id="sizing-addon1" style="border-top-left-radius: 4px; border-bottom-left-radius: 4px;">№</span> <input name="number" type="text" class="form-control" value="" placeholder="ВXXX-XXXX" style="border-top-right-radius: 4px; border-bottom-right-radius: 4px;"> </div> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-5"> <div class="form-group"> <button class="btn btn-default btn-block btn-proof-action" type="submit">Перевірити</button> </div> </div> </div> </form> </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"> <div class="row"> <div class="col-md-10 col-md-offset-1 col-sm-12"> <div class="h1-block">Реєстрація на сайті</div> <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="w4" class="form-horizontal" action="/registration" method="post"> <input type="hidden" name="_csrf" value="bLmQYH__0HSNZuos_ihA8PyX48YYrCIHZL_x0XrD_Qogjd4kMNKnMshe03-_fHS9v-HQ61HbFkRQicG9NveXSw=="> <div class="sth-form sth-form-white"> <div class="form-group field-lastname required"> <label class="control-label col-sm-4" for="lastname">Прізвище</label> <div class="col-sm-8"> <input type="text" id="lastname" class="form-control" name="lastName" maxlength="255" placeholder="Вкажіть прізвище" aria-required="true"> <p class="help-block help-block-error "></p> </div> </div> <div class="form-group field-firstname required"> <label class="control-label col-sm-4" for="firstname">Ім'я</label> <div class="col-sm-8"> <input type="text" id="firstname" class="form-control" name="firstName" maxlength="255" placeholder="Вкажіть ім'я" aria-required="true"> <p class="help-block help-block-error "></p> </div> </div> <div class="form-group field-email"> <label class="control-label col-sm-4" for="email">Email</label> <div class="col-sm-8"> <input type="text" id="email" class="form-control" name="email" placeholder="Вкажіть ваш email"> <p class="help-block help-block-error "></p> </div> </div> <div class="form-group field-password required"> <label class="control-label col-sm-4" for="password">Пароль</label> <div class="col-sm-8"> <input type="password" id="password" class="form-control" name="password" placeholder="Придумайте пароль" aria-required="true"> <p class="help-block help-block-error "></p> </div> </div> <br /> <span class="form-title">Тип користувача</span> <div class="form-group field-type"> <div class="col-sm-12"><input type="hidden" name="type" value=""><div id="type" role="radiogroup"><div class="sth-radio"><input type="radio" id="ati0" name="type" value="1" checked><label for="ati0">педагог (вчитель, завуч, вихователь...)</label></div> <div class="sth-radio"><input type="radio" id="ati1" name="type" value="2"><label for="ati1">батько чи мати учня</label></div></div><p class="help-block help-block-error "></p></div> </div> </div> <div class="form-group field-recaptcha required"> <div class="col-sm-12"><input type="hidden" id="recaptcha" class="form-control" name="reCaptcha" aria-required="true"><div id="recaptcha-recaptcha-w4" class="g-recaptcha" data-sitekey="6Lfce0kUAAAAAPZ3Gpd37f9NNjS5SwfyWanHiacN" data-input-id="recaptcha" data-form-id="w4"></div><p class="help-block help-block-error "></p></div> </div> <button type="submit" class="sth-btn-shaped sth-btn-shaped-lime btn-block"> Зареєструватись</button> </form> <hr /> <div> Вже зареєстровані? <a class="sth-underline-reverse" href="/login">Спробуйте увійти</a> </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?hl=uk&render=explicit&onload=recaptchaOnloadCallback" async defer></script> <script src="/js/app_core.js?4.1"></script> <script src="/assets/7b72d060/jquery.js"></script> <script src="/assets/3418286d/yii.js"></script> <script src="/js/bootstrap.min.js"></script> <script src="/js/app_set.js?9"></script> <script src="/js/app.js"></script> <script src="/js/share.js"></script> <script src="/js/script.js?v2.2.77"></script> <script src="/js/lightbox.js"></script> <script src="/js/jquery.history.min.js"></script> <script src="/js/jquery.pin.min.js"></script> <script src="/js/katex.js"></script> <script src="/js/base64.js"></script> <script src="/js/content.js"></script> <script src="/js/headline.js"></script> <script src="/js/student.js"></script> <script src="/js/push.js"></script> <script src="/assets/3418286d/yii.activeForm.js"></script> <script>function recaptchaOnloadCallback() { "use strict"; jQuery(".g-recaptcha").each(function () { const reCaptcha = jQuery(this); if (reCaptcha.data("recaptcha-client-id") === undefined) { const recaptchaClientId = grecaptcha.render(reCaptcha.attr("id"), { "callback": function (response) { if (reCaptcha.data("form-id") !== "") { jQuery("#" + reCaptcha.data("input-id"), "#" + reCaptcha.data("form-id")).val(response) .trigger("change"); } else { jQuery("#" + reCaptcha.data("input-id")).val(response).trigger("change"); } if (reCaptcha.attr("data-callback")) { eval("(" + reCaptcha.attr("data-callback") + ")(response)"); } }, "expired-callback": function () { if (reCaptcha.data("form-id") !== "") { jQuery("#" + reCaptcha.data("input-id"), "#" + reCaptcha.data("form-id")).val(""); } else { jQuery("#" + reCaptcha.data("input-id")).val(""); } if (reCaptcha.attr("data-expired-callback")) { eval("(" + reCaptcha.attr("data-expired-callback") + ")()"); } }, }); reCaptcha.data("recaptcha-client-id", recaptchaClientId); } }); }</script> <script>jQuery(function ($) { $('.document-content-block').bind('copy',function(e) { e.preventDefault(); return false; }); jQuery('.webinar-link').click(function(){ window.location.href=$(this).attr('data-url'); }); jQuery('#w3').yiiActiveForm([], []); jQuery('#w4').yiiActiveForm([], []); $('.btn-subscribe').click(function(){ if($('.email-subscribe').val() != ''){ Cookies.set('modal_subscribe', 'subscribed'); $.post('/api/subscriber',{email:$('.email-subscribe').val(),_csrf:'bLmQYH__0HSNZuos_ihA8PyX48YYrCIHZL_x0XrD_Qogjd4kMNKnMshe03-_fHS9v-HQ61HbFkRQicG9NveXSw=='},function(data){ console.log(data); gtag('send', 'event', 'journal', 'subscribe', 'popup'); $('.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>