Урок №27. Поняття мови розмітки гіпертексту. Створення таблиць. Інструктаж з БЖД

1. 1
Урок №27 8 __ клас 1 група ________________
2 група ________________
Тема. Поняття мови розмітки гіпертексту. Інструктаж з БЖД
Цілі:
 навчальна: сформуватиуявлення про метод і засобистворення гіпертексту на
сторінках сайту; познайомити учнів із засобами створення таблиць на
сторінках сайту.
 розвивальна: розвивати логічне мислення; формувативміння діяти за
інструкцією, плануватисвою діяльність, аналізуватиi робити висновки;
 виховна: виховувати інформаційну культуру учнів, уважність, акуратність,
дисциплінованість.
Тип уроку: засвоєння нових знань;
Хід уроку
І. Організаційний етап
 привітання
 перевірка присутніх
 перевірка готовності учнів до уроку
ІІ. Актуалізаціяопорних знань
Виконання інтерактивного завдання
(https://learningapps.org/watch?v=phnrwrg9519)
ІІІ. Оголошеннятеми та мети уроку. Мотиваціянавчальної діяльності
IV. Вивчення нового матеріалу
Для створення таблиці в HTML використовується парний тег <table></table>:
Тег <table></table>
Елемент <table> служить контейнером для елементів, що визначають вміст
таблиці. Будь-яка таблиця складається з рядків і стовпців, які задаються за
допомогою тегів <tr> і <td>.
Атрибути
align - визначає вирівнювання таблиці.
background - задає фоновиймалюнок у таблиці.
bgcolor - колір фону таблиці.

2. 2
border - товщина рамки в пікселях.
bordercolor- колір рамки.
cellpadding - відступ від рамки до вмісту осередку.
cellspacing - відстань між комірками.
cols - число колонок в таблиці.
frame - повідомляєбраузеру, як відображатимежі навколо таблиці.
height - висота таблиці.
rules - повідомляєбраузеру, девідображати межі між комірками.
summary - короткий опис таблиці.
width - ширина таблиці.
Тег <tr></tr>
Тег <tr> служить контейнером для створення рядка таблиці. Кожна клітинка в
межах такого рядка може задаватися за допомогою тега <th> або <td>.
Атрибути
align - визначає вирівнювання вмісту комірок по горизонталі.
bgcolor - колір фону комірок.
bordercolor - колір рамки.
char - вирівнювання вмісту комірок відносно заданого символу.
charoff - зсув вмісту осередків щодо зазначеного символу.
valign - вирівнювання вмісту комірок по вертикалі.
Тег <td></td>
Призначений для створення однієї комірки таблиці. Тег <td> повинен
розміщуватися всередині контейнера <tr>, який в свою чергу розташовується
всередині тега <table>.
Атрибути
abbr - короткий опис вмісту комірки.
align - визначає вирівнювання вмісту коміркипо горизонталі.
axis - групуєосередки пов'язані між собою схожою інформацією.

3. 3
background - задає фоновиймалюнок в комірці.
bgcolor - колір фону комірки.
bordercolor - колір рамки.
char - вирівнює вміст коміркипо заданому символу.
charoff - зміщуєвміст коміркивідносно заданого символу.
colspan - об'єднує горизонтальніосередки.
headers - дозволяєзв'язати осередки з заголовком.
height - висота комірки.
nowrap - забороняє перенесення рядків.
rowspan - об'єднуєвертикальні осередки.
scope - дозволяє зв'язати осередку простий таблиці з заголовками в мовних
браузерах.
valign - вирівнювання вмісту осередку по вертикалі.
width - ширина комірки.
Тег <th></th>
Тег <th> призначений для створення однієї коміркитаблиці, яка позначається
як заголовна. Текст в такій клітинці відображається браузером зазвичай жирним
шрифтом і вирівнюється по центру. Тег <th> повинен розміщуватися всередині
контейнера <tr>, який в свою чергу розташовується всередині тега <table>.
Атрибути – такі ж як і для тега <tr>
V. Інструктаж з ТБ
VI. Засвоєння нових знань, формування вмінь
Завдання:Створити веб сторінкуз розкладомвашихуроків,використовуючи
теги для створення таблиць.
1. Створити сторінку у власнійпапці з назвою page3.html
2. У створеному документістворити структуру пустоївеб сторінки.
3. Використовуючи теги таблиць, створити таблицю розміром 6х9 і
заповнити її розкладом уроків для 8 класу.
4. Першу стрічку створити використовуючитеги <th>
5. Додати над таблицею відповідний заголовок.
6. Зберегти створений документта перевірити його працездатність.

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