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. Фотогалерея. При клацанні будь-якої із заданих фотографій відкриється вона ж у повному розмірі або здійснюється перехід на інший сайт.

  1. В папку images завантажте три довільні фотографії формату jpg із зображенням міст та задайте їм імена f1.jpg, f2.jpg, f3.jpg.

  2. Реалізуйте код та збережіть його у папці Урок_2.5 з іменем Тема_2_5_2.html

  3. Змініть гіперпосилання так, щоб клацання зображення Львів відкривало сайт Львівської ОДА.(Якщо необхідно пригадати створення посилання, перейдіть на сторінку)

Завдання 3.

  1. У NotPade++ створіть файл Тема_2_5_3.html, збережіть його у папці Урок_2.5 .

  2. У розділі стилів цього документа опишіть 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 ;
}

  1. Застосуйте стилі до зображення dim.jpg, попередньо зберігши його в папці images.

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