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

1. Створіть папку Урок_2.5.
2. Збережіть у цій папці файл Тема_2_5_1.html та архів images.rar (файли внизу сторінки)
3. Розархівуйте файли архіву images.rar в цій папці. Має утворитися папка images, в якій будуть фотографії гетьманів.
4. Змініть стиль оформлення зображення згідно зразка.
5. Скоригуйте веб-сторінку Тема_2_5_1.html, доповнивши контент текстовою інформацією про заданих гетьманів.
6. Доповніть сторінку інформацією про інших гетьманів, фотографії яких є в архіві.
7. Вставте 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.

Поекспериментуйте зі стилями, кольором, товщиною рамки та розміром зображень.

Page updated

Google Sites

Report abuse