Поняття мови розмітки гіпертексту. Зображення на веб сторінці. Інструктаж з БЖД

1. 1
Урок №28 8 __ клас 1 група ________________
2 група ________________
Тема. Поняття мови розмітки гіпертексту. Списки та гіперпосилання. Інструктаж
з БЖД
Цілі:
 навчальна: сформувати уявлення про метод і засоби створення гіпертексту
на сторінках сайту; познайомити учнів із тегами організації списків та
гіперпосилань на веб сторінках.
 розвивальна: розвивати логічне мислення; формувативміння діяти за
інструкцією, плануватисвою діяльність, аналізуватиi робити висновки;
 виховна: виховувати інформаційну культуру учнів, уважність, акуратність,
дисциплінованість.
Тип уроку: комбінований;
Хід уроку
І. Організаційний етап
 привітання
 перевірка присутніх
 перевірка готовності учнів до уроку
ІІ. Актуалізаціяопорних знань
Виконання інтерактивного завдання на актуалізацію знань
ІІІ. Оголошеннятеми та мети уроку. Мотиваціянавчальної діяльності
IV. Вивчення нового матеріалу
1. Марковані списки
Тег <ul> встановлює маркований список. Кожен елемент списку повинен
починатися з тега <li>. Якщо до тегу <ul> застосовується таблиця стилів, то елементи
<li> успадковують цівластивості.
Синтаксис:
<ul>
<li>Елемент маркованого списку</li>
</ul>
Атрибути:

2. 2
type – встановлюєтип маркера
Синтаксис:
<ul type="disc | circle | square">...</ul>
2. Нумеровані списки
Тег <ol> встановлює нумерований список. Кожен елемент списку повинен
починатися з тега <li>. Якщо до тегу <ol> застосовується таблиця стилів, то
елементи <li> успадковують цівластивості.
Синтаксис:
<ol>
<li>Елемент нумерованого списку</li>
<li>Елемент нумерованого списку </li>
</ol>
Атрибути:
type – встановлюєтип маркера
Синтаксис:
<ol type="A | a | I | i | 1">...</ol>
reversed - змінює нумерацію в списку на зворотний порядок, замість 1,2,3
будевиводитися 3,2,1.
Синтаксис:
<ol reversed>
...
</ol>
start – встановлює номер, з якого буде починатися перелік. При цьому не
має значення, який тип списку встановлений за допомогою type, атрибут start
однаково працюєі з римськимиі з арабськими числами.
Синтаксис:
<ol start="число">
<li>Елемент списку</li>
</ol>
3. Багаторівневі списки
Для організації багаторівневого списку достатньо один список помістити в
середину іншого. Наприклад:

3. 3
<ol>
<li>Понеділок</li>
<ul>
<li>Математика</li>
<li>Фізика</li>
<li>Хімія</li>
<li>Фізкультура</li>
</ul>
<li>Вівторок</li>
<li>Середа</li>
<li>Четвер</li>
<li>П’ятниця</li>
</ol>
4. Гіперпосилання
Тег <a> є одним з важливих елементів HTML і призначений для створення
посилань. Залежно від присутності атрибутів name або href тег <a> встановлює
посилання або якір. Якорем називається закладка всередині сторінки, яку можна
вказати в якості мети посилання. При використанні посилання, яка вказує на якір,
відбувається перехід до закладкивсерединівеб-сторінки.
Для створення посилання необхідно повідомити браузеру, що є
посиланням, а також вказати адресу документа, на який слід зробити посилання.
Як значення атрибута href використовується адреса документа (URL, Universal
Resource Locator, універсальний покажчик ресурсів), на який відбувається перехід.
Адреса посилання може бути абсолютною і відносною. Абсолютні адреси
працюють по всіх усюдах незалежно від імені сайту або веб-сторінки, де

4. 4
прописане посилання. Відносні посилання, як випливає з їх назви, побудовані
щодо поточного документа або кореня сайту.
Синтаксис:
<a href="URL">...</a>
<a name="ідентифікатор">...</a>
Атрибути:
coords- Встановлює координатиактивної області.
download - Пропонуєзавантажити вказанийпо посиланню файл.
href - Задаєадресу документа, на який слід перейти.
hreflang - Ідентифікуємову тексту за посиланням.
name - Встановлює ім'я якоря всередині документа.
shape - Задає форму активної області посилання для зображень.
tabindex - Визначає послідовність переходу між посиланнями при
натисканні на кнопку Tab.
target- Ім'я вікна або фрейму, кудибраузер будезавантажувати документ.
title - Додає підказку до тексту посилання.
V. Інструктаж з ТБ
VI. Засвоєння нових знань, формування вмінь
Завдання: Створити веб сторінку з розкладом ваших уроків у вигляді
багаторівневого списку, використовуючи теги для створення списків. Задати
нумерацію днів тижня великими римськими числами, а нумерацію уроків -
арабськими.
1. Створити сторінку у власнійпапці з назвою page4.html
2. У створеному документістворити структуру пустоївеб сторінки.
3. Використовуючитеги списків, створити розклад уроків на тиждень.
4. Використовуючиатрибут type задативідповідний вигляд нумерації.
5. Додати над списком відповідний заголовок.
6. Використовуючи атрибут створення гіперпосилань <a> прив’язати до
заголовку посилання на раніше створену веб сторінку page3.html, яка
містить розклад уроків у виглядітаблиці.
7. Зберегти створений документта перевірити його працездатність.
VІІ. Підсумки уроку
 Виставлення оцінок.
 Виконання інтерактивного завдання для закріплення знань.

5. 5
Рефлексія
 сьогоднія дізнався...
 було цікаво....
 було важко...
 я зрозумів, що...
 тепер я можу...
VІІI. Домашнєзавдання
Опрацюватидодатковіматеріали до уроку
IХ. Оцінювання роботи учнів