Інформатика 2024-2025 - Урок № 32. Інструктаж з БЖД. Розмітка таблиць засобами мови HTML.

Інформатика 2024-2025

Інструктаж з БЖД. Розмітка таблиць засобами мови HTML.

Мета уроку :

Ознайомити учнів з основами створення таблиць в HTML, пояснити їх структуру та елементи.
Навчити використовувати теги для розмітки таблиць: <table>, <tr>, <th>, <td>, а також атрибути для форматування таблиць.
Показати способи додавання рядків та стовпців, об’єднання клітинок, а також налаштування вигляду таблиць за допомогою CSS.
Розвинути вміння створювати прості таблиці для відображення даних на веб-сторінках.
Сформувати уявлення про практичне застосування таблиць у веб-розробці для структуризації та організації інформації.

Актуалізація опорних знань

Завдання

Вивчення нового матеріалу

27_РозмІтка таблиць.pptx

Практичне завдання

Пояснення до кожного рядка вашого HTML-коду:

html

Копіювати код

<!DOCTYPE html>

Цей рядок визначає тип документа HTML5. Він вказує браузеру, що сторінка використовує HTML5, що забезпечує правильну обробку документа.

html

Копіювати код

Цей тег вказує, що документ є HTML-кодом і використовується для визначення мови сторінки (у цьому випадку — українська).

html

Копіювати код

<head>

Тег <head> містить мета-дані для документа, такі як метатеги, посилання на стилі, шрифти, скрипти та інші ресурси.

html

Копіювати код

Цей метатег вказує на використання кодування символів UTF-8, яке підтримує більшість мов, включаючи українську.

html

Копіювати код

Цей метатег дозволяє правильно відображати сторінку на мобільних пристроях. width=device-width забезпечує адаптацію ширини сторінки під розмір екрану пристрою, а initial-scale=1.0 встановлює початковий масштаб сторінки.

html

Копіювати код

<title>Таблиця</title>

Тег <title> задає назву веб-сторінки, яка відображатиметься в заголовку вкладки браузера.

html

Копіювати код

<style>

Тег <style> містить CSS-стилі для оформлення сторінки. Це дозволяє змінювати вигляд елементів HTML, таких як таблиця, текст, кольори тощо.

html

Копіювати код

table {

width: 100%;

border-collapse: collapse;

}

Цей стиль застосовується до елементів <table>. Встановлюється ширина таблиці на 100% від ширини контейнера та використовується властивість border-collapse, щоб межі клітинок таблиці зливались в одну лінію.

html

Копіювати код

table, th, td {

border: 1px solid black;

}

Цей стиль застосовується до таблиці, заголовків таблиці (<th>) та клітинок таблиці (<td>). Встановлюється чорна рамка товщиною 1 піксель навколо всіх елементів.

html

Копіювати код

th, td {

padding: 8px;

text-align: center;

}

Цей стиль додає відступи по 8 пікселів з усіх боків для заголовків та клітинок таблиці. Встановлюється вирівнювання тексту по центру для всіх клітинок таблиці.

html

Копіювати код

th {

background-color: #f2f2f2;

}

Цей стиль змінює фон заголовків таблиці на світло-сірий колір (#f2f2f2), щоб зробити їх відмінними від інших клітинок таблиці.

html

Копіювати код

</style>

Закриває тег <style>, який містить CSS-стилі для оформлення сторінки.

html

Копіювати код

</head>

Закриває тег <head>, який містить мета-дані та стилі сторінки.

html

Копіювати код

<body>

Тег <body> містить основний вміст сторінки, який буде відображатися на екрані користувача.

html

Копіювати код

<h1>Приклад таблиці</h1>

Тег <h1> визначає заголовок першого рівня (найбільший заголовок), в якому написано "Приклад таблиці". Це буде основний заголовок на сторінці.

html

Копіювати код

<table>

Тег <table> починає визначення таблиці.

html

Копіювати код

<thead>

Тег <thead> вказує на розділ таблиці, який містить заголовки стовпців. Цей розділ зазвичай використовують для визначення заголовків таблиці.

html

Копіювати код

<tr>

Тег <tr> визначає рядок таблиці. Всі клітинки (теги <td> або <th>) повинні бути в середині цього тегу.

html

Копіювати код

<th>Прізвище</th>

Теги <th> визначають заголовки стовпців таблиці. Вони містять текст, який пояснює, які дані будуть у стовпцях таблиці. У цьому випадку: "№", "Ім'я", "Прізвище", "Вік".

html

Копіювати код

</tr>

Закриває тег рядка таблиці <tr>.

html

Копіювати код

</thead>

Закриває розділ заголовка таблиці <thead>.

html

Копіювати код

<tbody>

Тег <tbody> визначає розділ таблиці, який містить основні дані. Зазвичай дані таблиці містяться саме в цьому розділі.

html

Копіювати код

<tr>

<td>Іванов</td>

</tr>

Цей рядок містить дані для першого рядка таблиці. Тег <td> використовується для визначення клітинок таблиці:

Перший стовпець: "1" (номер)
Другий стовпець: "Іван" (ім'я)
Третій стовпець: "Іванов" (прізвище)
Четвертий стовпець: "25" (вік)

html

Копіювати код

<tr>

<td>Марія</td>

<td>Петренко</td>

</tr>

Другий рядок таблиці з аналогічними клітинками даних.

html

Копіювати код

<tr>

<td>Олександр</td>

<td>Коваль</td>

</tr>

Третій рядок таблиці з даними.

html

Копіювати код

</tbody>

Закриває розділ даних таблиці <tbody>.

html

Копіювати код

</table>

Закриває тег таблиці <table>.

html

Копіювати код

</body>

Закриває тег тіла сторінки <body>.

html

Копіювати код

</html>

Закриває тег самого документа HTML.

Це базовий HTML-код, який створює веб-сторінку з таблицею, що містить дані про людей. Всі елементи структурують сторінку та визначають, як вона виглядатиме.

Домашнє завдання : Створити сайт з таблицю мовою HTML.

Page updated

Report abuse