2.5.1 Використання зображень у веб-документах
Для вставки зображень в HTML служить тег img. Це непарний тег.
src- місце розташування, ім'я та розширення файла зображення;
alt- альтернативний текст, який відображає зміст зображення і використовується пошуковими системами
За допомогою стилів можна змінити оформлення та розміри зображення. Однак, не варто width і height використовувати одночасно. Краще задавати лише ширину width або висоту height. Тоді зображення не будуть спотворюватися.
img{
width:250px; /* ширина зображення */
height:50px; /* висота зображення */
margin: 10px; /* зовнішні відступи */
border: 5px solid red; /*товщина стиль та колір рамки */
float: right; /* горизонтальне вирівнювання за правим краєм */
}
img{
border-top: 2px dotted red; /*товщина стиль та колір верхньої межі рамки */
}
border-style стиль рамки
none - без рамки; ( border-style : none ;)
hidden - невидима рамка; ( border-style : hidden ;)
dotted - точкова рамка; ( border-style : dotted ;)
dashed - штрихова рамка; ( border-style : dashed ;)
solid - лінія; ( border-style : solid ;)
double - подвійна лінія;
groove - контур рамки заглиблений (3D-ефект);
ridge - контур рамки виступає (3D-ефект);
inset - внутрішня поверхня заглиблена ;
outset - внутрішня поверхня виступає .
border-width ширина рамки.
(border-width: 7px;)
border-color визначає колір рамки
border-color: #aaff77;
/* одноколірна рамка */border-color: blue yellow;
/* двоколірна рамка */
border-top: межа рамки зверху
border-bottom: межа рамки знизу
border-right: межа рамки праворуч
border-left: межа рамки ліворуч
Завдання 1
Створіть папку Урок_2.5.
Збережіть у цій папці файл Тема_2_5_1.html та архів images.rar (файли внизу сторінки)
Розархівуйте файли архіву images.rar в цій папці. Має утворитися папка images, в якій будуть фотографії гетьманів.
Змініть стиль оформлення зображення згідно зразка.
Скоригуйте веб-сторінку Тема_2_5_1.html, доповнивши контент текстовою інформацією про заданих гетьманів.
Доповніть сторінку інформацією про інших гетьманів, фотографії яких є в архіві.
Вставте id-мітки (якорі) перед інформацією про кожного гетьмана. Вгорі сторінки помістіть перелік прізвищ гетьманів та організуйте внутрішні посилання на id-мітки. (Якщо необхідно пригадати, як створюються посилання, перейдіть на сторінку)
Завдання 2. Фотогалерея. При клацанні будь-якої із заданих фотографій відкриється вона ж у повному розмірі або здійснюється перехід на інший сайт.
В папку images завантажте три довільні фотографії формату jpg із зображенням міст та задайте їм імена f1.jpg, f2.jpg, f3.jpg.
Реалізуйте код та збережіть його у папці Урок_2.5 з іменем Тема_2_5_2.html
Змініть гіперпосилання так, щоб клацання зображення Львів відкривало сайт Львівської ОДА.(Якщо необхідно пригадати створення посилання, перейдіть на сторінку)
Завдання 3.
У NotPade++ створіть файл Тема_2_5_3.html, збережіть його у папці Урок_2.5 .
У розділі стилів цього документа опишіть 5 різних селекторів класів
.img1{
border: 1px dotted black;
border-bottom-color: red;
border-left-width: 2mm;
}
.img2{
border-bottom: 1px dashed black;
border-bottom-style: solid;
}
.img3{
border-left: 4px outset red;
}
.img4{
border-top: 1mm solid green;
border-bottom: 1mm solid green;
border-right: 2mm dotted red;
border-left: 2mm dotted blue;
}
.img5{
border-top: 4mm solid green;
border-bottom: ridge ;
border-right: 4mm dashed red;
border-left: outset ;
}
Застосуйте стилі до зображення dim.jpg, попередньо зберігши його в папці images.
Поекспериментуйте зі стилями, кольором, товщиною рамки та розміром зображень.