неділя, 1 лютого 2026 р.

Перші кроки в HTML та CSS

 


HTML (HyperText Markup Language) — це мова розмітки, яка описує структуру вебсторінки.
CSS (англ. Cascading Style Sheets, укр. Каскадні таблиці стилів) — спеціальна мова, яка використовується для опису зовнішнього вигляду сторінок, написаних мовами розмітки даних
CSS (Cascading Style Sheets) — це мова стилів, яка відповідає за вигляд сторінки.

 Приклад 1. CSS у <style> (всередині HTML)

<html>
<head>
  <meta charset="UTF-8">
  <title>Моя перша сторінка</title>

  <style>
    body {
      background-color: lightblue;
    }

    h1 {
      color: white;
      text-align: center;
    }

    p {
      font-family: Verdana;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <h1>Привіт, світ!</h1>
  <p>Це мій перший документ HTML.</p>

  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
</body>
</html>

👉 Пояснення для учнів:
CSS пишеться між <style> і </style> та застосовується до тегів.

🔹 Приклад 2. Оформлення списку <ul> і <li>

ul {
  background-color: white;
  width: 200px;
}

li {
  color: darkblue;
  font-size: 18px;
}

🔍 Що зміниться:

  • список стане на білому фоні

  • текст елементів буде синій і більший

🔹 Приклад 3. Зміна фону і рамки

body {
  background-color: lightyellow;
}

p {
  border: 2px solid black;
  padding: 10px;
}

👉 Поясни:

  • border — рамка

  • padding — відступ всередині рамки

🔹 Приклад 4. Колір списку + вирівнювання

ul {
  text-align: left;
}

li {
  color: green;
}

🔹 Приклад 5. Inline CSS (показати як ПОГАНИЙ, але простий варіант)

<h1 style="color: red;">Привіт, світ!</h1>
<p style="font-size: 18px;">Це мій перший документ HTML.</p>

👉 Скажи учням:
⚠️ Так можна, але краще використовувати <style> або окремий CSS-файл

🔹 Приклад 6. Клас CSS (важливо!)

<p class="info">Це важлива інформація</p>

.info {
  color: blue;
  font-size: 22px;
}

👉 Пояснення:

  • class дозволяє оформлювати окремі елементи

🔹 Приклад 7. Завдання для учнів 👨‍🎓

Зроби так, щоб:

  1. Фон сторінки був світло-зелений

  2. Заголовок — по центру і червоний

  3. Список — синій

  4. Абзац — шрифт 18px

🔹 Шпаргалка для учнів 🧠

color: red;          /* колір тексту */
background-color: ; /* фон */
font-size: ;        /* розмір */
text-align: center; /* вирівнювання */



Практична робота
Тема: Оформлення вебсторінки засобами HTML та CSS

🔹 Вихідний HTML-код (початковий)
<html>
<head>
  <meta charset="UTF-8">
  <title>Україна — моя Батьківщина</title>

  <style>
  </style>
</head>

<body>
  <h1>Україна — моя Батьківщина</h1>

  <p>
    Україна — це незалежна держава в центрі Європи.
    Ми пишаємося своєю мовою, культурою та народом.
  </p>

  <ul>
    <li>Державний прапор</li>
    <li>Державний герб</li>
    <li>Державний гімн</li>
  </ul>
</body>
</html>



🔹 Завдання 1. Фон сторінки
Теорія:

Властивість background-color змінює колір фону елемента.
CSS:
body {
  background-color: lightgreen;
}



🔹 Завдання 2. Заголовок сторінки
Теорія:

color — колір тексту

text-align — вирівнювання
CSS:
h1 {
  color: blue;
  text-align: center;
}



🔹 Завдання 3. Розмір тексту абзацу
Теорія:

font-size задає розмір шрифту.
CSS:
p {
  font-size: 18px;
}



🔹 Завдання 4. Шрифт абзацу
Теорія:

font-family визначає тип шрифту.
CSS:
p {
  font-family: Arial;
}

(або Tahoma)


🔹 Завдання 5. Оформлення списку
Теорія:

CSS можна застосувати до всіх елементів <li>.
CSS:
li {
  color: green;
}



🔹 Завдання 6. Рамка навколо абзацу
Теорія:

border створює рамку навколо елемента.
CSS:
p {
  border: 2px solid black;
}





🔹 Завдання 7. Внутрішній відступ
Теорія:

padding — відстань між текстом і рамкою.
CSS:
p {
  padding: 10px;
}





🔹 Завдання 8. Маркери списку
Теорія:

list-style-type змінює вигляд маркерів.
CSS:
ul {
  list-style-type: square;
}





🔹 Завдання 9. CSS-клас .important
Теорія:

Клас дозволяє стилізувати окремі елементи.
HTML:
<p class="important">
  Україна бореться за свободу, незалежність і майбутнє.
</p>

CSS:
.important {
  color: red;
  font-size: 20px;
}





🔹 Завдання 10 ⭐ Творче оформлення
Умова:

Зробіть сторінку більш привабливою, використавши будь-які 3 CSS-властивості.
Приклад можливого рішення:
body {
  background-color: #f0fff0;
}

h1 {
  color: #0057b7;
}

p {
  background-color: #ffffff;
}





✅ Підсумковий результат
Учень:
  • створив HTML-сторінку з патріотичним змістом;
  • послідовно застосував базові CSS-властивості;
  • навчився оформлювати текст, списки та окремі елементи.
Опубліковано о
Мітки: ,

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

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

Підписатися на: Дописати коментарі (Atom)