Тема: «Мій ідеальний туристичний маршрут»

 

Опис сайту:

Створіть сайт, де ви плануєте власну подорож (реальну або вигадану).

Створення багатосторінкового сайту: «Подорож річкою Південний Буг»

📌 Завдання для учнів:

1. Створити всі файли
2. Додати власні фото (або з інтернету) замість слів Фото-0, Фото-1,Фото-2,Фото-3
3. Змінити опис локацій
   Завдання для 10-12 балів
4. Додати ще 1 локацію (додаткове завдання ⭐)
5. Змінити кольори сайту

project_name
│
├── index.html
├── loc1.html
├── loc2.html
├── loc3.html
├── style.css

Створіть просту вебформу "Анкета учня", у якій користувач може ввести свої дані

 

Створення простої вебформи «Анкета учня»

Мета роботи

Навчитися створювати прості вебформи за допомогою HTML, оформлювати їх за допомогою CSS та використовувати JavaScript для зміни елементів сторінки.

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

 

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

Навчальний проєкт для 7 класу «Створення навчального сайту в Google Sites»

🧩 Тема проєкту (оберіть одну або призначається вчителем)

Рекомендована тема:

«Безпечний інтернет для підлітків»

Можливі альтернативи:

• «Цифрові пристрої в нашому житті»

• «Історія комп’ютерів простими словами»

• «Соціальні мережі: користь і небезпека»

• «Штучний інтелект для школярів»

• «Кібербезпека: як не стати жертвою шахраїв»

Створення HTML-сторінки «Правила безпечного інтернету»

 

Практична робота: CSS до Дня святого Валентина

 Оформлення тексту засобами CSS

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

 

HTML (HyperText Markup Language) — це мова розмітки, яка описує структуру вебсторінки.

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

Автоматизовані засоби для створення та публікації веб-ресурсів

 

Створення вебсайту засобами онлайн-системи конструювання сайтів відбувається в кілька кроків:

ЗАВДАННЯ ДЛЯ УЧНІВ (HTML + ФІЗИКА)

 

Завдання 1. Створити базову структуру

Таблиці в HTML. Практична робота

Виконати практичну інструкція
Використовувати тільки HTML

Створення веб-сторінки за допомогою «Мови гіпертекстової розмітки». Нумеровані списки

 

Завдання використовуючи ресурси
Редактор HTML

Довідник

1.     Створити на робочому столі папку та назвати її власним прізвищем та ім’ям.

2.     У власні папці створити два html документа та назвати «index.html», «Timetable.html».

3. У документі index.html створіть гіперпосилання на файл «Timetable.html»

3.     У документі «Timetable.html» реалізувати наступний список:

4. У документі  створіть Timetable.html гіперпосилання на файл «index.html»

Вступ до HTML. Створення першої веб-сторінки

 

Що таке HTML?

HTML (HyperText Markup Language) — мова розмітки, яка задає структуру веб-сторінки.
HTML складається з тегів — команд у кутових дужках.

Тема: «Зима в лісі»

 

Використовувати ресурс:
https://w3schoolsua.github.io/html/html_basic.html#gsc.tab=0

1.Структура сайту «Зима в лісі»

Створити сторінку новорічного подарунку

 

Дані для подарунку

Демонстраційна платформа для створення HTML

 

Сайт http://blocklyhtml.zgtm.de/ є демонстраційною платформою для створення HTML-коду за допомогою блоків Blockly. Це частина проєкту "Blockly-HTML" на GitHub, яка дозволяє користувачам будувати HTML-код візуально, розміщуючи блоки. Це корисно для навчальних цілей і для початківців, які вивчають HTML.

Сайт підтримує попередній перегляд коду в реальному часі, імпорт та експорт блоків, а також експортування HTML-документа. Інтерфейс доступний англійською та німецькою мовами. Проєкт також може бути налаштований для використання офлайн за допомогою бібліотеки Blockly від Google

На сторінці 110 виконай завдання

https://drive.google.com/file/d/11ChUQ1MXT0MaOv8NGJ21YISg3Z938tjV/view

Практична робота Тема: Додаємо контент на сайт

 Алгоритм виконання роботи (чітка покрокова інструкція)

 Етап 1. Підготовка структури сайту (5 хв)

Створити свою папку:
podillia_viktor
├── index.html
└── style.css