Вправа 5.3

Тема: HTML та CS. Додаємо контент

Підручник: Додаємо контент

Підручник: HTML та CSS
Перелік усіх доступних властивостей CSS із прикладами

💡 Ідея для проекту: Створіть фан-сайт вашої улюбленої відеогри, музичного гурту, фільму, аніме чи хобі. Шукайте картинки та музику, які вам справді подобаються!

Мета роботи: Навчитися вставляти на вебсторінку зображення та аудіофайли, створювати гіперпосилання та оформлювати сторінку за допомогою каскадних таблиць стилів (CSS).

УВАГА
Абсолютно весь потрібний матеріал із роз'ясненнями є у Підручнику. Я закликаю вас користуватися ним!
Вище є кнопка із вирізкою саме цієї теми
РІВЕНЬ 1: База (Оцінка 1-6)

Підготуємо файли та створимо початкову структуру сторінки.

  1. Створіть у своїй робочій папці новий файл fan.html (або з іншою англійською назвою).
  2. Завантажте з інтернету одне зображення за вашою темою та покладіть його у папку поруч із файлом.
  3. Напишіть базову структуру HTML-документа. Додайте головний заголовок <h1> з назвою вашої теми.
  4. Вставте завантажене зображення за допомогою тегу <img>. Обов'язково налаштуйте його ширину (наприклад, width="400"), щоб воно не займало весь екран.
  5. Додайте абзац тексту по тематиці вашої сторінки
РІВЕНЬ 2: Музика та Навігація (Оцінка 7-9)

Оживимо сторінку звуком та додамо можливість переходити на інші сайти.

  1. Завантажте аудіофайл (у форматі .mp3) з улюбленим саундтреком або піснею у вашу папку.
  2. Вставте музику на сторінку під картинкою за допомогою тегу <audio>. Не забудьте додати атрибут controls, щоб з'явився плеєр.
  3. Створіть панель навігації (тег <nav>) під заголовком. Додайте туди два (можна більше) посилання (<a>):
    • Перше: "На головну" (має вести на ваш файл index.html, створений на минулих уроках).
    • Друге: Тематичне посилання (наприклад, "Офіційний сайт гурту" або "Сторінка у Вікіпедії"). Скопіюйте адресу з інтернету.
    • Третє і т.д: Тематичне посилання за бажанням
  4. Зверніться до с. 157 (161) Підручника внизу сторінки - ознайомтеся із прийомами задання свого шрифту та застосуйте це у себе на сторінці
РІВЕНЬ 3: Оформлення (CSS) (Оцінка 10-12)

Зробимо так, щоб сайт виглядав стильно та сучасно.

  1. Додайте розділ <style>...</style> всередину тегу <head>.
  2. Змініть колір фону всієї сторінки (властивість background-color для тегу body).
  3. Змініть колір тексту головного заголовка та вирівняйте його по центру екрана.
  4. Додайте до вашої картинки або плеєра невелику рамку чи відступи за допомогою CSS (поекспериментуйте!).

📚 Шпаргалка

Картинки:

  • <img src="назва.jpg">
  • Щоб змінити розмір, додайте width="300" (ширина в пікселях).

Аудіо:

  • <audio controls> — сам плеєр.
  • <source src="пісня.mp3"> — вказує, який файл грати.

Посилання:

  • <a href="посилання">Текст</a>
  • Якщо додати target="_blank", сайт відкриється у новій вкладці.

CSS кольори:

Можна писати словами (red, blue, green) або шістнадцятковим кодом (#ff0000).