Тема уроку: "Наповнення шаблону контентом веб-сторінок".
1. Відкрий у Блокноті шаблон веб-сторінки shablon.html і окремо першу сторінку page_1.html.
2. Скопіюй контент першої сторінки і встав у середню колонку шаблону.
3. Збережи шаблон під новою назвою сторінки page-1.html.
4. Пророби те саме з іншими сторінками.
5. Заміни назву сторінок у гіперпосиланнях верхнього і бічного меню.
6. Перевір їх роботу. Перехід на будь-яку сторінку повинен здійснюватися у довільному порядку.
7. Папку з файлами веб-сторінок разом з іншими файлами заархівуй і надішли на мою електронну адресу.
Зразки виконання
______________________________________________________
Тема уроку: "Створення меню та шаблону веб-сторінки".
1. Створи верхнє (горизонтальне) меню. Для цього на веб-сторінку додай наступний код:
2. Створи шаблон веб-сторінки, видаливши весь контент з середньої колонки.
3. Під кнопками меню додай свій QR-код.
4. Результат повинен бути таким:
4. Створи папку Шаблон. Збережи у неї цю сторінку під назвою shablon.html. Скопіюй у папку зображення кнопок і "шапки". Заархівуй папку і надішли файл на мою електронну адресу.
_____________________________________________________________________________
Тема уроку: "Створення гіпертекстових зв'язків в HTML-документі".
1. Прочитай параграф 23.7 (стор. 221-222).
2. Використовуючи Microsoft Word, Paint чи Photoshop намалюй 5 кнопок: Головна сторінка, Таблиця, Списки, Фото, Відео. Наприклад:
3. Додай зображення цих кнопок на кожну сторінку у першу колонку (ліворуч).
4. Використай наступний код для вставляння гіперпосилання на відповідну сторінку:
5. Результат повинен бути таким:
6. Розташуй тепер усі інші кнопки на цій сторінці.
_________________________________________________________________________________
Тема уроку: "Додавання до веб-сторінки об'єктів мультимедіа".
1. Для розміщення на веб-сторінці відео слід написати наступний код:
<TD width="70%">
<p><CENTER>
</CENTER></p>
<p></p>
<iframe width="840" height="473" src="https://www.youtube.com/embed/xtjvj4NlI60" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>
<B><FONT size="4" COLOR="blue">Фрідерік Шопен - Етюд 23</FONT></B>
</p>
2. У цій же колонці потрібно також розташувати плеєр для звукового файлу:
<p>
<b>Весела пісенька</b><br>
<audio controls="">
<source src="pisenka-pro-druzhbu.mp3.orig.mp3" type="audio/mpeg">
</audio>
</p>
</TD>
3. Результат повинен бути таким:
4. Збережи сторінку під назвою page_5.html.
5. Заархівуй її разом з музичним файлом і надішли на мою електронну адресу.
______________________________________________________
Тема уроку: "Розбивка HTML-сторінки на колонки".
1. Створи 4 сторінку і розбий її на 3 колонки.
Результат повинен бути таким:
2. Файл сторінки збережи під назвою page_4.html.
3. Заархівуй її разом із фото і надішли на мою електронну скриньку до наступного уроку.
________________________________________________________________________________
Тема уроку: "Вставляння списків до HTML-сторінки".
1. Прочитай параграф 23.4 підручника (стор. 218).
2. Створи файл веб-сторінки під назвою page_3.html.
3. Створи для своєї веб-сторінки іконку, використавши графічний редактор Paint. Іконка повинна мати розмір 100х100 пікселів і мати розширення ico.
4. Додай "шапку" до цієї веб-сторінки.
5. На початку веб-сторінки додай 2 рухомих рядки:
- "Сайт учня 11 класу Петропавлівської ЗОШ №2 Прізвище та ім'я", який весь час повинен рухатися від правого краю сторінки до лівого;
- "Моє захоплення - вкажи яке" - повинен рухатися весь час від правого краю сторінки до лівого і в зворотньому напрямку.
6. Нижче створи меню для сторінок: Головна сторінка, Таблиця, Списки, Фото, Відео.
7. Створи на сторінці 2 списки: нумерований і маркований.
Код сторінки:
8. Файл цієї сторінки надішли мені.
_________________________________________________________________________________
Тема уроку: "Вставляння таблиць до HTML-сторінки".
1. Прочитай параграф 23.8 підручника (стор. 222-223).
2. Створи веб-сторінку за цим зразком:
3. Відкрий Блокнот і набери наступний код:
4. Файл сторінки збережи під назвою page_2.html і надішли його на мою електронну скриньку до наступного уроку.
_________________________________________________________________________________
Тема уроку:"Поняття про мову розмітки гіпертекстових документів"
1. Прочитай параграф 23 підручника (стор. 213-218).
2. Прочитай інструкцію 1 і виконай практичне завдання 1.
3. Прочитай інструкцію 2 і зміни початкові параметри сторінки.
4. Переглянь інструкцію, як задавати кольори.
5. Створи веб-сторінку під назвою "Моє захоплення - (вкажи яке)".
6. Для розташування зображення слід написати наступний код: <p><CENTER><img src="images.jpg" width="600" height="300"></CENTER></p>. Файл зображення повинен знаходитися у тій самій папці, де й файл page_1.html. Ім'я файлу зображення у коді повинно співпадати з його реальним іменем.
7. На сторінці повинно бути не менше 5 абзаців тексту. Дивись зразок:
8. Папку з файлом page_1.html і зображенням заархівуй і надішли мені на адресу: vuktur54@gmail.com.
9. Завдання слід виконати до наступного уроку.
_________________________________________________________________________________
Домашнє завдання
1. Перегляньте відеоурок по створенню власного блогу: Відеоурок.
2. Створіть блог під назвою: "Моя майбутня професія".
3. Блог повинен мати 4 сторінки:
- Головна сторінка;
- Навчальні заклади;
- Фото;
Лікар
- Відео.
4. Головна сторінка повинна мати посередині заголовок з назвою професії. Опис професії повинен містити не менш 3 абзаців. Також на цій сторінці потрібно розташувати 3 фотографії в різних місцях (ліворуч, посередині і праворуч абзаца). Фото повинні мати маленький розмір, наприклад:
 |
| Лікар |
Немає коментарів:
Дописати коментар