Урок 1. Мова гіпертекстової розмітки HTML. Структура та базові теги
🎯 Мета уроку: Ознайомитися з базовою структурою HTML-документа, навчитися створювати заголовки <h1>–<h6> та абз
ТеоріяВідкрити ↗
Платформа для навчання веброзробці
Створюйте, навчайтеся,
відкривайте веб.
Тренувальні матеріали та практичні роботи з HTML, CSS і JavaScript. Учителям — класи й журнал, учням — простір для практики.
Демо можна спробувати без реєстрації. Прогрес демо не зберігається.
Бібліотека
Каталог матеріалів
Тренувальні
8Повторіть теорію та закріпіть нові поняття.
Урок 2. Текстові елементи веб-сторінки, теги та їх атрибути. Гіперпосилання.
🎯 Мета уроку: Навчитися оформлювати текст за допомогою тегів форматування, створювати заголовки й абзаци, додавати гіперпосилання з різними атрибутами. 📋 Шпа
ТеоріяВідкрити ↗
Урок 3. Списки на веб-сторінках.
🎯 Мета уроку: Навчитися створювати ненумеровані, нумеровані та вкладені списки, а також використовувати атрибут списку. 📝 Завдання У стартовому коді вж
ТеоріяВідкрити ↗
Урок 4.1. Створення простої таблиці
🎯 Мета уроку: Навчитися створювати прості таблиці за допомогою тегів <table>, <tr>, <td> і <th>. 📝 Завдання У стартовому коді в
ТеоріяВідкрити ↗
Урок 4.2. Створення таблиці
🎯 Мета уроку: Навчитися об'єднувати комірки таблиці за допомогою атрибутів colspan і rowspan. 📝 Завдання У стартовому коді вже є повна сітка таблиці —
ТеоріяВідкрити ↗
Урок 5.1. CSS: Inline-стилі
🎯 Мета уроку: Навчитися додавати inline-стилі до HTML-елементів через атрибут style. 📋 Завдання У редакторі нижче вже є готовий HTML-код — сторінка про
ТеоріяВідкрити ↗
Урок 5.2. CSS класи.
🎯 Мета: Навчитися писати CSS-правила для класів. 📋 Завдання У редакторі вже є HTML-код — сторінка про улюблену книжку. У тегах уже розставлені класи. А
ТеоріяВідкрити ↗
Урок 5.3. CSS. HTML. Коментарі.
🎯 Мета: Навчитися коментувати код HTML і CSS — щоб тимчасово вимикати частини без видалення. 📋 Завдання У редакторі вже є готовий HTML-код із вбудовани
ТеоріяВідкрити ↗
Практичні
10Виконайте завдання та перевірте результат у редакторі.
Додавання аудіо та відео
🎯 Мета уроку: Навчитися додавати на вебсторінку зображення, аудіо та відео, використовуючи теги <img>, <audio> та <video> з правильними атрибутами.
HTML · CSSВідкрити ↗
Практична робота №8. Карти зображень.
🎯 Мета уроку: Навчитися створювати інтерактивні карти посилань (Image Maps) та самостійно знаходити інформацію для посилань в Інтернеті. 📝 Завдання Перед вам
HTML · CSSВідкрити ↗
Практична робота №1. Знайомство з HTML та перша веб-сторінка
🔑 Перед початком роботи: Переконайся, що ти увійшов(ла) у систему за кодом доступу. Якщо працювати в режимі гостя, зберегти чернетку
ПрактикаВідкрити ↗
Практична робота №2. Текстові елементи веб-сторінки, теги та їх атрибути. Гіперпосилання.
🎯 Мета роботи: Навчитися самостійно розмічати текст веб-сторінки за допомогою тегів HTML, створювати заголовки, абзаци, форматування та гіперпосилання. 📝 Завд
ПрактикаВідкрити ↗
Списки на веб-сторінках.
🎯 Мета роботи: Навчитися змінювати тип списку та використовувати атрибути списків на практиці. 📝 Завдання У редакторі вже введено готовий код сторінки
ПрактикаВідкрити ↗
Практична робота №3. Cтворення списку
📝 Завдання У редакторі немає готового коду — потрібно написати його з нуля. Подивіться на зразок нижче й створіть сторінку з двома списками. Що потрібно зроби
ПрактикаВідкрити ↗
Практична робота №4. Сворення простої таблиці.
🎯 Мета уроку: Навчитися доповнювати таблицю новими рядками та використовувати об'єднання комірок. 📝 Завдання У стартовому коді вже є таблиця з одним ря
ПрактикаВідкрити ↗
Практична робота №5. Створення таблиці
🎯 Мета роботи: Навчитися самостійно об'єднувати комірки таблиці за допомогою атрибутів colspan і rowspan. 📝 Завдання У стартовому коді вже є повна сітк
ПрактикаВідкрити ↗
Практична робота №6. CSS.
🎯 Мета: Попрактикуватися з трьома інструментами CSS одночасно: inline-стилями, класами в <style> та коментарями. 📋 Завдання У редакторі вже є HTM
ПрактикаВідкрити ↗
Практична робота №7. Додавання зображень.
🎯 Мета уроку: Навчитися додавати зображення на вебсторінку за допомогою тегу <img> та керувати їхнім розташуванням за допомогою CSS. 📝 Завдання У старт
ПрактикаВідкрити ↗
Для вчителів
Ваш клас. Ваші завдання.
Ваш журнал.
Створіть кабінет, зберіть клас і призначте роботу з бібліотеки.