Тема сайту: Смартфон у житті підлітка
🎯 Мета роботи:
Навчитися додавати структурований контент на сайт:
текст, зображення, список, таблицю, посилання та стилі CSS.
📌 Організація роботи (чіткий алгоритм для учнів)
🔹 Етап 1. Підготовка (5 хв)
Створити папку phone_site
У ній створити:
index.htmlstyle.css
Створити папку img
🔹 Етап 2. Тема та структура сайту (3 хв)
Тема сайту:
Мій Смартфон (вказати модель) у житті сучасного підлітка
Структура сайту має містити:
Заголовок
Опис (2–3 абзаци)
Зображення Вашого смартфона зберегти phone.jpg збрегти в папку IMG
Список: для чого я використовую телефон
Таблицю: плюси і мінуси
Посилання на джерело інформації
🔹 Етап 3. Джерела інформації (обов’язково)
🔹 Текст брати звідси:
👉 https://uk.wikipedia.org/wiki/Смартфон
(дозволено адаптувати текст своїми словами)
🔹 Зображення брати звідси:
👉 https://www.pexels.com/uk-ua/search/smartphone/
👉 https://unsplash.com/s/photos/smartphone
(завантажити одне зображення та зберегти у папку img)
🔹 Етап 4. Наповнення HTML (15 хв)
Учні копіюють шаблон і заповнюють своїм контентом.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Смартфон у житті підлітка</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Смартфон у житті сучасного підлітка</h1>
<p>Смартфон — це багатофункціональний мобільний пристрій, який поєднує в собі телефон, комп’ютер, фотоапарат та інші можливості.</p>
<p>Сьогодні майже кожен підліток користується смартфоном для навчання, спілкування, розваг та пошуку інформації.</p>
<img src="img/phone.jpg" alt="Смартфон">
<h2>Для чого підлітки використовують смартфон?</h2>
<ul>
<li>Спілкування в месенджерах</li>
<li>Навчання та виконання домашніх завдань</li>
<li>Перегляд відео та ігор</li>
<li>Соціальні мережі</li>
<li>Фотографування</li>
</ul>
<h2>Переваги та недоліки смартфонів</h2>
<table>
<tr>
<th>Переваги</th>
<th>Недоліки</th>
</tr>
<tr>
<td>Швидкий доступ до інформації</td>
<td>Залежність</td>
</tr>
<tr>
<td>Зручне спілкування</td>
<td>Погіршення зору</td>
</tr>
<tr>
<td>Допомога в навчанні</td>
<td>Відволікання</td>
</tr>
</table>
<p>
Джерело інформації:
<a href="https://uk.wikipedia.org/wiki/Смартфон" target="_blank">
Вікіпедія — Смартфон
</a>
</p>
</div>
</body>
</html>
🔹 Етап 5. Оформлення CSS (10 хв)
body {
background: #ecf0f1;
font-family: Arial, sans-serif;
}
.container {
width: 850px;
margin: auto;
background: white;
padding: 20px;
border-radius: 12px;
}
h1, h2 {
text-align: center;
color: #2c3e50;
}
img {
width: 100%;
border-radius: 10px;
margin: 15px 0;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
td, th {
border: 1px solid #333;
padding: 8px;
text-align: center;
}
a {
color: #2980b9;
font-weight: bold;
}
🧮 Оцінювання (12 балів)
| Критерій | Бали |
|---|---|
| Структура HTML | 2 |
| Текст + заголовки | 2 |
| Зображення | 2 |
| Список | 2 |
| Таблиця | 3 |
| CSS оформлення | 1 |
🎯 Результат
Учень отримує реальний інформаційний сайт, максимально наближений до практичного використання.
Немає коментарів:
Дописати коментар