Тема 8 Гіперпосилання

Завдання 1

Переписати текст, та виконати завдання як на картинці.

body: фон сторінки - зображення (background.jpg), background-size: cover, шрифт Comic Sans MS;
h1: колір red, розмір 38px;
h2: колір darkblue, розмір 28px;
p: шрифт 30px, чорний;
a: текст червоний, білий фон, шрифт 20px, без підкреслення, margin: 10px; (відступ у меню);
img: висота 300px, рамка 5px solid brown, border-radius 10px;
#menu: білий фон.

У тілі сторінки:
Заголовок h1 «Світ Маріо» (align="center");
Меню (p id="menu") з навігаційними посиланнями-якорями (<a href="">):

Маріо (#mario)
Луїджі (#luigi)
Принцеса Піч (#peach)
Боузер (#bowser)

Зображення Маріо (align="left"), h2 «Маріо» (align="center"), опис у p (align="center" id="mario"), <br clear="all">
Текст абзацу: Маріо — відважний сантехнік, який завжди рятує принцесу.
Він стрибає по блоках і перемагає ворогів у грибному королівстві.

Зображення Луїджі (align="right"), h2 «Луїджі» (align="center"), опис у p (align="center" id="luigi"), <br clear="all">
Текст абзацу: Луїджі — молодший брат Маріо.
Він високий і трохи боязкуватий, але завжди допомагає Маріо у пригодах.

Зображення Піч (align="left"), h2 «Принцеса Піч» (align="center"), опис у p (align="center" id="peach"), <br clear="all">
Текст абзацу: Принцеса Піч — добра правителька грибного королівства.
Вона часто потрапляє у біду і потребує допомоги Маріо та Луїджі.

Зображення Боузер (align="right"), h2 «Боузер» (align="center"), опис у p (align="center" id="bowser"), <br clear="all">
Текст абзацу: Боузер — головний ворог Маріо.
Це велетенська черепаха-дракон, яка викрадає принцесу Піч.

Наприкінці - посилання <a href="#menu"> «Повернутись нагору».

Посилання на картинки:
Маріо — https://upload.wikimedia.org/wikipedia/en/5/5c/Mario_by_Shigehisa_Nakaue.png
Луїджі — https://upload.wikimedia.org/wikipedia/en/b/be/Luigi_by_Shigehisa_Nakaue.png
Принцеса Піч — https://upload.wikimedia.org/wikipedia/en/1/16/Princess_Peach_Stock_Art.png
Боузер — https://upload.wikimedia.org/wikipedia/en/d/d1/Bowser_by_Shigehisa_Nakaue.png

Щоб завантажити, клікніть правою кнопкою миші на зображення та оберіть «Зберегти як…».

Фон:

Завдання 2

Переписати текст, та виконати завдання як на картинці.

body: колір тексту білий, фон - зображення background.jpg, яке розтягується на весь екран (background-size: cover).
p: шрифт Palatino, розмір 20px.
img: ширина 200px, висота 150px, рамка 5px dashed red.
a: без підкреслення (text-decoration: none), колір тексту жовтий.
h1: колір тексту червоний.

У тілі сторінки:
Заголовок h1 з назвою: "Обери свого Дігімона-партнера".
Підзаголовок h3 з текстом: "Натиснувши на назву можна завантажити картинку. Для початку оберіть собі стартового Дігімона:".
Вставлені зображення стартових Дігімонів (Агумон, Габумон, Патамон) з посиланнями на завантаження, align="middle" в тег p.
Додано підзаголовок h3: "А тепер оберіть еволюцію:".
Вставлені зображення еволюцій (Греймон, Гарурумон, Ангемон) з посиланнями на завантаження, align="middle" в тег p.
Додано підзаголовок h3: "Якщо ви вже вибрали для себе партнера – можете нам зателефонувати, або написати лист за допомогою посилань нижче".
Підсумковий блок: текст з посиланнями на телефон tel: та email mailto:.
Використовуємо вирівнювання align="center" за необхідності.

Щоб завантажити, клікніть правою кнопкою миші на зображення та оберіть «Зберегти як…».

Фон:

JPG:

Додатково:

Створіть посилання на будь-який сайт, який ви часто відвідуєте.
Додайте 2 заголовки з різними id і зробіть посилання для переходу до кожного з них.
Зробіть посилання на будь-який сайт із підказкою (title).
Створіть посилання на улюблений сайт, щоб воно відкривалося у новій вкладці (target="_blank").
Зробіть посилання для надсилання листа на свою або вигадану пошту (mailto).
Додайте посилання на номер телефону у форматі +380… (tel).
Створіть посилання для завантаження будь-якого файлу (наприклад, картинки) з атрибутом download.

build info

compiler: 2.0.5.1 · 4054EF9BF6C4510A
built: 2026-11-08 14:31:25 UTC