Перебіг уроку
Перебіг уроку
Повторити актуальні питання у онлайн вправі 1
Пройти інтерактивне опитування щодо матеріалу навчального відео.
Виконати практичне завдання 1
Виконати практичне завдання 2
Embedded Files
Опрацювати веб конспект і у коментарях на особистій сторінці класу запишіть інструменти, необхідні для відображення графіки на сайті (2 - 3 рядка)
Опрацювати веб конспект і у коментарях на особистій сторінці класу запишіть інструменти, необхідні для відображення графіки на сайті (2 - 3 рядка)
Зразок розміщення картинки для практичного завдання 1
Завдання: створити сторінки сайту з графічними об’єктами (за зразком)
Завдання: створити сторінки сайту з графічними об’єктами (за зразком)
Перебіг виконання практичного завдання № 1.
Перебіг виконання практичного завдання № 1.
1.) Зайти за посиланням https://jsfiddle.net/ , для того, щоб створити вебсторінку galerya
3) Cкопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область HTML (CTRL+V) і натиснути RUN, щоб переглянути результат у області перегляду
3) Cкопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область HTML (CTRL+V) і натиснути RUN, щоб переглянути результат у області перегляду
4) Натиснути Save, щоб сгенерувати URL адресу вебсторінки (дивись відеопояснення!!!)
6) Cкопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область HTML (CTRL+V) і натиснути RUN, щоб переглянути результат у області перегляду
6) Cкопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область HTML (CTRL+V) і натиснути RUN, щоб переглянути результат у області перегляду
7) Натиснути Save, щоб згенерувати URL адресу вебсторінки
8) На сторінці “galerya.html” пропишемо код з тегом <img> для вставлення картинки та текст (скопіюйте текст або https://docs.google.com/document/d/1ClHNI7rPx4K7MzIzJy4vUUHYWIEaZ_S_PVB7NYLDclM/edit?usp=sharing) Вставити код між <div class="content"> .............</div> [рядок 73]
<div class="content">
<hr>
<h2> <a href="#">День відкритих дверей</a> </h2>
<div class="galerya">
<img src="img/p5.jpg">
Де? м. Одеса, вул. Мельницька 24 А Коли? 11:00, 18 березня 11:00, 13 травня Ви зможете ознайомитися з переліком професій, умовами вступу, матеріально-технічною базою, прийняти участь у майстер-класах наших учнів, випускників та майстрів.
</div>
</div>
9) Натиснути RUN, щоб переглянути результат у області перегляду та Save, щоб згенерувати URL адресу вебсторінки
9) Натиснути RUN, щоб переглянути результат у області перегляду та Save, щоб згенерувати URL адресу вебсторінки
10) Знайти в Інтернеті фото, яке анонсує ваш майбутній фах ПКМ / копіювати адресу зображення та вставити адресу у код HTML на місце червоного адресу <img src="img/p5.jpg"> . Натиснути RUN, щоб переглянути результат у області перегляду та Save, щоб згенерувати URL адресу вебсторінки
Результат розміщення фото не не відповідає умові завдання
Розмісти фото на вебсторінці за зразком
11) Щоб виконати умови завдання 1, у таблиці стилів створимо класи: “galerya img” та пропишемо їх властивості.
.galerya img {
display: block;
margin-top: 15px;
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
border: solid 5px #dad7d5;
width: 50%;
}
або код тут https://docs.google.com/document/d/1MfwUs3wUvpnpbqCiHMCVeBUl4pezk1Vl35uPL9FbLxc/edit?usp=sharing
Вставити цей код CSS у вікно CSS перед .footer { [рядок 349]
12) Натиснути RUN, щоб переглянути результат у області перегляду та Save, щоб згенерувати URL адресу вебсторінки і надіслати URL адресу викладачеві для звітування.
результат виконання практичного завдання 1
Практичне завдання № 2 : встановити фонове зображення на вебсторінку
Практичне завдання № 2 : встановити фонове зображення на вебсторінку
Перебіг виконання практичного завдання № 2.
Перебіг виконання практичного завдання № 2.
1.) Зайти за посиланням https://jsfiddle.net/ , для того, щоб створити вебсторінку fon
3) Cкопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область HTML (CTRL+V) і натиснути RUN, щоб переглянути результат у області перегляду
3) Cкопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область HTML (CTRL+V) і натиснути RUN, щоб переглянути результат у області перегляду
4) Натиснути Save, щоб сгенерувати URL адресу вебсторінки (дивись відеопояснення!!!)
6) Cкопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область HTML (CTRL+V) і натиснути RUN, щоб переглянути результат у області перегляду та натиснути Save, щоб згенерувати URL адресу вебсторінки
6) Cкопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область HTML (CTRL+V) і натиснути RUN, щоб переглянути результат у області перегляду та натиснути Save, щоб згенерувати URL адресу вебсторінки
7) У таблицю стилів “style.css” ввести наступний код:
body {
padding: 20px;
background-image: url(../img/w-20.jpg);
}
або тут https://docs.google.com/document/d/1GJRPyIDhSEH9Z97bovSFPEL4z_X-BElKReJrNfjzkns/edit?usp=sharing
8) натиснути RUN, щоб переглянути результат у області перегляду та натиснути Save, щоб згенерувати URL адресу
9) Результату не побачимо, бо на місце локальнльної адреси поставити URL адресу.
10) Знайти в Інтернеті зразки безшовного фону, ПКМ / копіювати адресу зображення та вставити адресу у код HTML на місце червоного адресу url(../img/w-20.jpg) . Натиснути RUN, щоб переглянути результат у області перегляду та Save, щоб згенерувати URL адресу вебсторінки і надіслати URL адресу викладачеві для звітування.
Page updated
Google Sites
Report abuse