1.
Створіть у теці site теку images. Збережіть у ній
будь-яку завантажену з інтернету фотографію з іменем 1.jpg.
2.
Завантажте у редактор коду файл info.html, створений у попередніх практичних завданнях, і таблицю
стилів style.css.
3.
Додайте збережену фотографію
так, щоб вона обтікалася текстом зліва або справа.
4.
У таблиці стилів створіть
класи: .img, .left і .right, пропишіть їхні властивості:
Властивості класів:
.img{
width: 200рх;
}
.left{
float: left;
}
.right{
float: right;
}
5.
У файлі info.html після другого й четвертого текстових абзаців по
ставте одинарний тег:
<img src="images/1.jpg"
class="lmg left">
6.
Після першого й третього текстових абзаців
поставте тег:
<img src="images/1.jpg"
class="lmg right">
7.
Збережіть зміни у файлах і
перегляньте результат.
8.
Додайте на головну сторінку (index.html) три фотографії в одному рядку.
9.
Під час виконання практичного завдання
3 було створено три сторінки, а в меню подано чотири. Створіть четверту
сторінку — gallery.html. На ній створіть галерею, де будуть відображатися
фотографії.
Примітка. Існує
багато способів створення галереї, ми розглянемо два з них.
10.
Використайте 1-й спосіб — із уже
відомих вам списків. У таблиці стилів пропишіть новий клас img-container із властивостями:
.img-container li{
display: inline-block;
width: 32%;
padding: 18px;
}
.img-container{
text-align: center;
margin-top: 26px;
width: 100%;
}
.img-container img{
width: 80%;
display: inline-block;
transition: -25s;
}
.img-container ul li{
list-style-type: none;
}
11.
Збережіть сторінку index.html як gallery.html. Після закриття контейнера класу <header> додайте код:
<div
id="main">
<div
class="img-container">
<ul>
<li><img src="images/2.jpg” alt=" "></li>
<li><img src="images/2.jpg' alt=" "></li>
<li><img src="images/2.jpg' alt=" "></li>
<li><img src="images/2.jpg' alt=" "></li>
<li><img src="images/2.jpg' alt=" "></li>
<li><img src="images/2.jpg' alt=" "></li>
</ul>
</div>
</div>
12. Збережіть змінені файли й перегляньте результат.
13.
Використайте 2-й спосіб. Пропишіть у
таблиці стилів новий клас. У файл стилів додайте контейнер inline-img додаємо у файл style.css із такими властивостями:
inline-img{
width: 250рх;
display: inline-block;
border-radius: 15px;
text-align: center; }
14. Додайте у файл із галереєю контейнер <div
class="inline-img">.
15.
Додайте в контейнер ваші 4
фотографії (Додаємо у файл gallery.html):
<div>
<img src="img/1.jpg" alt="List picture">
<img src="img/1.jpg" alt="List picture">
<img src="img/1.jpg" alt="List picture">
<img src="img/1.jpg" alt="List picture">
</div>
16. Закрийте контейнер. Якщо потрібно створити декілька рядків
із фотографіями, слід додати стільки контейнерів, скільки є рядків із
фотографіями
17.
Перевірте галереї, створені різними
способами, на адаптивність. Запишіть свої висновки.
Зробіть
висновок за результатами роботи.