Сторінки

▼

вівторок, 17 березня 2026 р.

Додаємо контент на вебсторінку (HTML + CSS)

 


Тема сайту: Смартфон у житті підлітка

🎯 Мета роботи:

Навчитися додавати структурований контент на сайт:
текст, зображення, список, таблицю, посилання та стилі CSS.

📌 Організація роботи (чіткий алгоритм для учнів)

🔹 Етап 1. Підготовка (5 хв)

  1. Створити папку phone_name

  2. У ній створити:

    • index.html

    • style.css

      3) Запускаємо Notepad++

      4) Копіюємо HTML код в новий документ і зберігаємо як

      index.html

      5) Копіюємо CSS код в новий документ і зберігаємо як

      style.css

🔹 Етап 2. Тема та структура сайту (3 хв)

Тема сайту:

Мій Смартфон (вказати модель) у житті сучасного підлітка

Структура сайту має містити:

  1. Заголовок

  2. Опис (2–3 абзаци)

  3. Шукаємо картинку сфого телефону і вставляємо URL посилання на картинку замість img/phone.jpg

  4. Анкета: для чого я використовую телефон

  5. Копіюємо HTML код в новий документ і зберігаємо як

    index.html

  6. Копіюємо CSS код в новий документ і зберігаємо як

    style.css

  7. Анкета: для чого я використовую телефон

  8. Посилання на джерело інформації

🔹 Етап 3. Джерела інформації (обов’язково)

🔹

🔹 Зображення брати звідси:

👉 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>



<ol>

  <li>Яка марка і модель твого телефону?</li>
<li>Яка операційна система встановлена на телефоні?</li>
<li>Скільки часу ти користуєшся цим телефоном?</li>
<li>Хто купив тобі телефон?</li>
<li>Скільки приблизно коштує твій телефон?</li>
<li>Скільки пам’яті має твій телефон?</li>
<li>Чи вистачає тобі пам’яті?</li>
<li>Який додаток ти використовуєш найчастіше?</li>
<li>Скільки годин на день ти користуєшся телефоном?</li>
<li>Для чого ти найчастіше використовуєш телефон?</li>
<li>Чи використовуєш ти телефон для навчання?</li>
<li>Чи граєш ти в ігри на телефоні?</li>
<li>Яка твоя улюблена гра на телефоні?</li>
<li>Чи є пароль або інший захист на телефоні?</li>
<li>Чи користуєшся ти мобільним інтернетом?</li>
<li>Скільки тримає заряд батареї?</li>
<li>Чи часто телефон зависає або працює повільно?</li>
<li>Що тобі найбільше подобається у телефоні?</li>
<li>Що тобі не подобається у телефоні?</li>
<li>Чи хотів(ла) би ти змінити свій телефон?</li>

</ol>



<h2>Відповіді. Анкета (Замінити питання відповідями)</h2>

<ol>

  <li>Яка марка і модель твого телефону?</li>
<li>Яка операційна система встановлена на телефоні?</li>
<li>Скільки часу ти користуєшся цим телефоном?</li>
<li>Хто купив тобі телефон?</li>
<li>Скільки приблизно коштує твій телефон?</li>
<li>Скільки пам’яті має твій телефон?</li>
<li>Чи вистачає тобі пам’яті?</li>
<li>Який додаток ти використовуєш найчастіше?</li>
<li>Скільки годин на день ти користуєшся телефоном?</li>
<li>Для чого ти найчастіше використовуєш телефон?</li>
<li>Чи використовуєш ти телефон для навчання?</li>
<li>Чи граєш ти в ігри на телефоні?</li>
<li>Яка твоя улюблена гра на телефоні?</li>
<li>Чи є пароль або інший захист на телефоні?</li>
<li>Чи користуєшся ти мобільним інтернетом?</li>
<li>Скільки тримає заряд батареї?</li>
<li>Чи часто телефон зависає або працює повільно?</li>
<li>Що тобі найбільше подобається у телефоні?</li>
<li>Що тобі не подобається у телефоні?</li>
<li>Чи хотів(ла) би ти змінити свій телефон?</li>

</ol>



<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 балів)

КритерійБали
Структура HTML2
Текст + заголовки2
Зображення2
Список2
Таблиця3
CSS оформлення1

🎯 Результат

Учень отримує реальний інформаційний сайт, максимально наближений до практичного використання.

о

Немає коментарів:

Дописати коментар