Завдання 1
Переписати текст, та виконати завдання як на картинці.
body: фон сторінки світло-сірий (#f0f0f0), шрифт "Comic Sans MS", текст вирівняний по центру.
h1: колір темно-сірий (#333), розмір шрифту 36px.
h2: колір темно-сірий (#444), розмір шрифту 28px.
p: розмір шрифту 20px, колір чорний.
img: ширина 200px, висота 300px, рамка 3px solid brown, заокруглення кутів 10px.
a: колір червоний, font-size 18px, text-decoration: none.
У тілі сторінки:
Створіть заголовок h1 з назвою "Топ фільми".
Створіть заголовок h3 з назвою "Натисніть на картинку, щоб перейти до Вікіпедії".
Для кожного фільму створіть підзаголовок h2 з назвою фільму, картинку, обгорнуту у тег <a>, при натисканні відкриває посилання у новій вкладці (target="_blank"), з посиланням на статтю у Вікіпедії, і опис у абзаці <p>.
Фільми:
Матриця
Посилання: https://en.wikipedia.org/wiki/The_Matrix
Картинка: https://upload.wikimedia.org/wikipedia/en/d/db/The_Matrix.png
Опис: «Матриця — культовий науково-фантастичний фільм про віртуальний світ супергероїчні пригоди.»
Термінатор
Посилання: https://en.wikipedia.org/wiki/The_Terminator
Картинка: https://upload.wikimedia.org/wikipedia/en/6/6d/The_Terminator.png
Опис: «Термінатор — фільм про роботів майбутнього та подорож у часі, щоб змінити долю людства.»
Втеча з Шоушенка
Посилання: https://en.wikipedia.org/wiki/The_Shawshank_Redemption
Картинка: https://upload.wikimedia.org/wikipedia/en/8/81/ShawshankRedemptionMoviePoster.jpg
Опис: «Втеча з Шоушенка — історія про дружбу та надію, навіть у найтемніших обставинах.»
h1: колір темно-сірий (#333), розмір шрифту 36px.
h2: колір темно-сірий (#444), розмір шрифту 28px.
p: розмір шрифту 20px, колір чорний.
img: ширина 200px, висота 300px, рамка 3px solid brown, заокруглення кутів 10px.
a: колір червоний, font-size 18px, text-decoration: none.
У тілі сторінки:
Створіть заголовок h1 з назвою "Топ фільми".
Створіть заголовок h3 з назвою "Натисніть на картинку, щоб перейти до Вікіпедії".
Для кожного фільму створіть підзаголовок h2 з назвою фільму, картинку, обгорнуту у тег <a>, при натисканні відкриває посилання у новій вкладці (target="_blank"), з посиланням на статтю у Вікіпедії, і опис у абзаці <p>.
Фільми:
Матриця
Посилання: https://en.wikipedia.org/wiki/The_Matrix
Картинка: https://upload.wikimedia.org/wikipedia/en/d/db/The_Matrix.png
Опис: «Матриця — культовий науково-фантастичний фільм про віртуальний світ супергероїчні пригоди.»
Термінатор
Посилання: https://en.wikipedia.org/wiki/The_Terminator
Картинка: https://upload.wikimedia.org/wikipedia/en/6/6d/The_Terminator.png
Опис: «Термінатор — фільм про роботів майбутнього та подорож у часі, щоб змінити долю людства.»
Втеча з Шоушенка
Посилання: https://en.wikipedia.org/wiki/The_Shawshank_Redemption
Картинка: https://upload.wikimedia.org/wikipedia/en/8/81/ShawshankRedemptionMoviePoster.jpg
Опис: «Втеча з Шоушенка — історія про дружбу та надію, навіть у найтемніших обставинах.»

Завдання 2
Переписати текст, та виконати завдання як на картинці.
body: фон сторінки - зображення (Pokemons.png), background-size: cover, background-repeat: no-repeat, шрифт Comic Sans MS, текст вирівняний по центру;
a: текст червоний, фон bisque, шрифт 36px, рамка 5px solid black, без підкреслення;
a:hover: фон жовтий, рамка 5px solid red;
a:focus: рамка 5px solid green, border-radius 10px, фон сірий, текст білий;
img: ширина 200px, висота 200px, рамка 5px solid brown, border-radius 10px, фон moccasin;
img:active: ширина 300px, висота 300px, рамка 5px solid yellow.
У тілі сторінки:
Заголовок h1 «Покемони»;
Підзаголовок h3 «Виберіть покемона»;
Блок посилань a на сторінки Wikipedia для Pikachu, Eevee, Squirtle, Bulbasaur, Jigglypuff, Meowth (target="_blank");
Блок зображень img для Pikachu, Eevee, Squirtle, Bulbasaur, Jigglypuff, Meowth, при наведенні кожне зображення збульшується, має рамку, закруглені кути.
Створіть посилання на сторінки Вікіпедії англійською мовою для покемонів:
Pikachu - https://en.wikipedia.org/wiki/Pikachu
Eevee - https://en.wikipedia.org/wiki/Eevee
Squirtle - https://en.wikipedia.org/wiki/Squirtle
Bulbasaur - https://en.wikipedia.org/wiki/Bulbasaur
Jigglypuff - https://en.wikipedia.org/wiki/Jigglypuff
Meowth - https://en.wikipedia.org/wiki/Meowth_(Pok%C3%A9mon)
Нижче вставте картинки відповідних покемонів (по одній для кожного):
Pikachu: https://upload.wikimedia.org/wikipedia/en/a/a6/Pok%C3%A9mon_Pikachu_art.png
Eevee: https://upload.wikimedia.org/wikipedia/en/thumb/a/a9/Pok%C3%A9mon_Eevee_art.png/225px-Pok%C3%A9mon_Eevee_art.png
Squirtle: https://upload.wikimedia.org/wikipedia/en/5/59/Pok%C3%A9mon_Squirtle_art.png
Bulbasaur: https://upload.wikimedia.org/wikipedia/en/thumb/2/28/Pok%C3%A9mon_Bulbasaur_art.png/255px-Pok%C3%A9mon_Bulbasaur_art.png
Jigglypuff: https://upload.wikimedia.org/wikipedia/en/thumb/2/22/Pok%C3%A9mon_Jigglypuff_art.png/255px-Pok%C3%A9mon_Jigglypuff_art.png
Meowth: https://upload.wikimedia.org/wikipedia/en/9/99/Meowth.png
a: текст червоний, фон bisque, шрифт 36px, рамка 5px solid black, без підкреслення;
a:hover: фон жовтий, рамка 5px solid red;
a:focus: рамка 5px solid green, border-radius 10px, фон сірий, текст білий;
img: ширина 200px, висота 200px, рамка 5px solid brown, border-radius 10px, фон moccasin;
img:active: ширина 300px, висота 300px, рамка 5px solid yellow.
У тілі сторінки:
Заголовок h1 «Покемони»;
Підзаголовок h3 «Виберіть покемона»;
Блок посилань a на сторінки Wikipedia для Pikachu, Eevee, Squirtle, Bulbasaur, Jigglypuff, Meowth (target="_blank");
Блок зображень img для Pikachu, Eevee, Squirtle, Bulbasaur, Jigglypuff, Meowth, при наведенні кожне зображення збульшується, має рамку, закруглені кути.
Створіть посилання на сторінки Вікіпедії англійською мовою для покемонів:
Pikachu - https://en.wikipedia.org/wiki/Pikachu
Eevee - https://en.wikipedia.org/wiki/Eevee
Squirtle - https://en.wikipedia.org/wiki/Squirtle
Bulbasaur - https://en.wikipedia.org/wiki/Bulbasaur
Jigglypuff - https://en.wikipedia.org/wiki/Jigglypuff
Meowth - https://en.wikipedia.org/wiki/Meowth_(Pok%C3%A9mon)
Нижче вставте картинки відповідних покемонів (по одній для кожного):
Pikachu: https://upload.wikimedia.org/wikipedia/en/a/a6/Pok%C3%A9mon_Pikachu_art.png
Eevee: https://upload.wikimedia.org/wikipedia/en/thumb/a/a9/Pok%C3%A9mon_Eevee_art.png/225px-Pok%C3%A9mon_Eevee_art.png
Squirtle: https://upload.wikimedia.org/wikipedia/en/5/59/Pok%C3%A9mon_Squirtle_art.png
Bulbasaur: https://upload.wikimedia.org/wikipedia/en/thumb/2/28/Pok%C3%A9mon_Bulbasaur_art.png/255px-Pok%C3%A9mon_Bulbasaur_art.png
Jigglypuff: https://upload.wikimedia.org/wikipedia/en/thumb/2/22/Pok%C3%A9mon_Jigglypuff_art.png/255px-Pok%C3%A9mon_Jigglypuff_art.png
Meowth: https://upload.wikimedia.org/wikipedia/en/9/99/Meowth.png

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

Додатково:
- Створіть посилання на будь-який сайт, який вам подобається, і обгорніть його зображенням (як у прикладі з <a><img></a>).
- Спробуйте змінити border або колір рамки при наведені курсора за допомогою псевдокласу :hover.
- Використайте псевдоклас :active та задайте інший стиль, коли елемент натиснутий (наприклад, змініть колір рамки або фон).
- Використайте псевдоклас :focus і змініть стиль елемента, коли він отримує фокус клавіатурою (наприклад, border або фон).
- У Paint створіть свою власну кнопку (можна просто малюнок з текстом) і збережіть її у форматі .png або .jpg.
- Використайте цю картинку як посилання для переходу на ваш улюблений сайт (<a href="https://мій_ улюблений_сайт.com"><img src="моя_кнопка.png"></a>).
- Добавте до першого завдання ще кілька фільмів на свій розсуд.
build info
- compiler
- 2.0.5.1 · 4054EF9BF6C4510A
- built
- 2026-11-08 14:31:25 UTC
WebUniverse