Алгоритм виконання роботи (чітка покрокова інструкція)
Етап 1. Підготовка структури сайту (5 хв)
Створити свою папку:
podillia_viktor
├── index.html
├── style.css
└── img
├── map.jpg
├── castle.jpg
└── nature.jpg
на 10-12 балів має бути створені усі теми.
файли index.html, index2.html, index3.html, index4.html, index5.html,
У ній створити файли:
index.html
<!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>
<p>
Сьогодні Поділля відоме своїми замками, старовинними містами, народними ремеслами, вишивкою та мальовничою природою.
</p>
<img src="img/map.jpg" alt="Карта Поділля">
<img src="img/castle.jpg" alt="Замки Поділля">
<img src="img/nature.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>
<tr>
<td>Туристична</td>
<td>Розвиток подорожей і відпочинку</td>
</tr>
</table>
<p>
Джерело інформації:
<a href="https://uk.wikipedia.org/wiki/Поділля" target="_blank">
Вікіпедія — Поділля
</a>
</p>
</div>
</body>
</html>
index.html
<!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>
<p>
Сьогодні Поділля відоме своїми замками, старовинними містами, народними ремеслами, вишивкою та мальовничою природою.
</p>
<img src="img/map.jpg" alt="Карта Поділля">
<img src="img/castle.jpg" alt="Замки Поділля">
<img src="img/nature.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>
<tr>
<td>Туристична</td>
<td>Розвиток подорожей і відпочинку</td>
</tr>
</table>
<p>
Джерело інформації:
<a href="https://uk.wikipedia.org/wiki/Поділля" target="_blank">
Вікіпедія — Поділля
</a>
</p>
</div>
</body>
</html>
Створити папку:
IMG
Учні обов’язково повинні знайти та завантажити власні зображення з Google.
🔍 Пошукові запити:
map.jpg
👉карта Поділля Українаcastle.jpg
👉замки та палаци Поділляnature.jpg
👉природа Поділля
style.css — готовий приклад файлу - створити в notepad++
body {
margin: 0;
padding: 0;
background: #ecf0f1;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
}
.container {
width: 900px;
margin: 30px auto;
background: #ffffff;
padding: 25px;
border-radius: 12px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 15px;
}
h2 {
text-align: center;
color: #34495e;
margin-top: 30px;
}
p {
font-size: 16px;
color: #333;
text-align: justify;
margin-bottom: 15px;
}
img {
width: 100%;
border-radius: 10px;
margin: 15px 0;
}
ul {
padding-left: 25px;
}
li {
font-size: 16px;
margin-bottom: 6px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th {
background: #3498db;
color: white;
padding: 10px;
}
td {
border: 1px solid #333;
padding: 8px;
text-align: center;
}
a {
color: #2980b9;
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}Завдання для учнів:
В🔹 Текст 2. Традиційний побут сіл Поділля Села Поділля здавна відзначалися самобутнім способом життя. Основним заняттям селян було землеробство: вирощували пшеницю, жито, кукурудзу, городину. Велику роль відігравало тваринництво. Традиційна подільська хата будувалася з глини та дерева, білилася вапном і прикрашалася орнаментами. Усередині хати були піч, дерев’яні лави, скрині, рушники та ікони. Побут супроводжувався обрядами, святами та народними звичаями, які передавалися з покоління в покоління. 🔍 Завдання для зображень: Знайти: «подільська хата» «інтер'єр української хати» «побут села Поділля» 🔹 Текст 3. Народний одяг Поділля Подільський народний одяг вирізняється яскравими кольорами та багатою вишивкою. Для вишиванок характерні червоні, чорні та сині орнаменти з рослинними та геометричними візерунками. Жінки носили вишиті сорочки, плахти, фартухи та прикраси з бісеру. Чоловіки — сорочки, штани, пояси й капелюхи. Одяг був не лише прикрасою, а й оберегом. Кожен елемент вишивки мав символічне значення та захищав людину від зла. 🔍 Завдання для зображень: Знайти: «подільська вишиванка» «народний одяг Поділля» «український національний костюм Поділля» 🔹 Текст 4. Народні ремесла Поділля Поділля славиться своїми народними ремеслами: гончарством, ткацтвом, різьбленням по дереву, писанкарством. Майстри створювали посуд, рушники, меблі, іграшки та прикраси. Особливо відомі подільські керамічні вироби, які відрізняються міцністю та художнім оздобленням. Рушники й килими прикрашали житло і мали символічне значення. Народні ремесла і сьогодні зберігають культурну спадщину регіону. 🔍 Завдання для зображень: Знайти: «гончарство Поділля» «подільська кераміка» «народні ремесла Поділля» 🔹 Текст 5. Природа Поділля Поділля має надзвичайно мальовничу природу. Тут протікають річки Південний Буг, Дністер, Збруч. Територія багата лісами, пагорбами, каньйонами та степами. Особливу цінність становлять природні заповідники та національні парки. Вони зберігають рідкісні види рослин і тварин. Природа Поділля сприяє розвитку туризму, екологічних маршрутів та відпочинку. 🔍 Завдання для зображень: Знайти: «природа Поділля» «річка Південний Буг» «Дністровський каньйон»Критерії оцінювання практичної роботи
1–3 бали (початковий рівень) Учень: ✔ створив HTML-файл ✔ додав заголовок і короткий текст ✔ сторінка відкривається у браузері Типові недоліки: відсутні зображення відсутній CSS порушена структура помилки у коді 🔵 4–6 балів (середній рівень) виконав тему з текстом 1 (що в зразку) Учень: ✔ створив повноцінну HTML-сторінку ✔ додав текст, зображення ✔ використав список ✔ додав таблицю Недоліки: мінімальне CSS-оформлення відсутнє або некоректне посилання структура сайту частково порушена 🟡 7–9 балів (достатній рівень) (запропонований текст 2-5) Учень: ✔ використав усі елементи контенту: текст 2–3 зображення список таблицю посилання ✔ сторінка має акуратний дизайн ✔ правильну структуру HTML Недоліки: дрібні помилки у верстці неідеальна візуальна композиція 🟠 10–12 балів (високий рівень) створив усі тексти і зробив гіперпосилання між ними Учень: ✔ повністю виконав усі вимоги ✔ грамотно структурований контент ✔ охайний дизайн ✔ коректне підключення CSS ✔ відсутність помилок ✔ логічне наповнення Додаткові бонуси (+1–2 бали в межах 12): меню навігації галерея зображень власний стиль дизайну адаптивність під телефон додаткові інформаційні блоки
Немає коментарів:
Дописати коментар