Щоб не витрачати час на створення нової панелі навігації, файл для виконання цього завдання створіть як копію будь-якої іншої сторінки сайту, крім головної. Наприклад, копію файла pochatok.html назвіть picture.html. Очевидно, що цей файл також повинен бути розташований у папці вашого навчального сайту.
Сподіваємось, ви ознайомились де і як можуть бути використані зображення у html-документі, прочитавши відповідний розділ посібника Основи HTML. Можемо приступити до роботи.
Підготуйте матеріали для використання на вебсторінці. У мережі є досить багато хостінгів, фото і рисунки з яких можна безкоштовно використовувати навіть у комерційних цілях. Наприклад, деякі фото ви можете завантажити з ресурсу Unsplash.
Для роботи вам знадобиться три фото, які слугуватимуть ілюстраціями до тексту. Завантажте їх у папку images. Також у цю папку додайте два рисунки з прозорим фоном: один для іконки сайту і другий - «стрілка вгору» - для відповідного якірного посилання. Ви можете завантажити їх з мережі Інтернет або створити самостійно у якомусь графічному редакторі.
ЗАУВАЖЕННЯ: Пам'ятайте про те, що зображення перед використанням для вебсторінок необхідно готувати. Встановлювати оптимальні розміри висоти та ширини, намагатися зберігати рисунки гарної якості, але з найменш можливим обсягом файлу. Для іконки сайту рекомендуємо обрати квадратну картинку зі стороною приблизно 50 пікселів. Такого ж розміру може бути й стрілка. Розміри фотографій обирайте самостійно. Якщо не хочете витрачати час на пошук та завантаження зображень, можете завантажити рисунки, використані для прикладів у цій роботі.
Якщо ви працюєте з копією сторінки pochatok.html, пропонуємо вам залишити її вміст. Але обов'язково підніміться вгору документа і видаліть або закоментуйте тег <link>, який підключає стильовий файл outline.css. І, у будь якому разі, змініть назву сторінки на Зображення на вебсторінках.
Додайте перед футером ще одну секцію, у якій згенеруйте декілька абзаців контенту. Наприклад, запис p*20>lorem і наступне натискання клавіші Tab додасть у третю секцію 20 абзаців з текстом. Серед цих абазаців розташуйте три фотографії як «ілюстрації» до тексту − з вирівнюванням по лівому краю, по центру і по правому краю.
Встановіть курсор перед першим абзацом і додайте img, натисніть Tab. Заповніть атрибути тега. Перегляньте результат у браузері. Зображення розташовано ліворуч сторінки, а текст абзацу починається під ним.
Додайте до цього тега атрибут align="left", щоб фото залишилось ліворуч, а текст розташувався праворуч від нього. Варто також додати атрибут hspace="10", щоб від краю картинки до тексту з'явився вільний простір розміром 10px.
Якщо ви скористались запропонованими нами зображеннями, вам обов'язково прийдеться змінити їх розмір. Але, ширина усіх запропонованих нами фото складає 640px, а «вага» файлів − від 55Kb до 150Kb. Тому, на наш погляд, змінювати ці фото у графічному редакторі не варто. Змінимо розмір зображення за допомогою атрибута width="30%". У разі використання власних зображень, вам, можливо, необхідно буде попередньо змінити розмір зображення у якомусь графічному редакторі.
Якщо ви додали всі вказані атрибути, ваш код буде відрізнятись від нижче наведеного хіба що назвою файлу, значеннями ширини або відступів та вмістом атрибуту alt.
<img src="images/dave-hoefler-unsplash1.jpg"
alt="photo of Dave Hoefler on Unsplas.com"
align="left" hspace="10" width="30%">
Рис. 1. Використані атрибути вирівнювання, горизонтальних відступів і ширини надали фото додаткових властивостей. У сучасній верстці замість цих атрибутів для впливу на зображення використовують відповідні стильові властивості
Порахуйте на сторінці кількість абзаців, після яких доцільно вставити зображення по центру. В залежності від ширини вебсторінки і фото (горизонтального чи вертикального) їх кількість може бути більшою, або меншою. Прийміть до уваги, що в реальному тексті зображення росташовують не раніше ніж текст, який вони ілюструють. А зараз оберіть таку кількість абзаців, щоб перший і другий малюнки не зачіпали один одного. Поверніться у редактор коду і після визначеного абзацу, наприклад, 12-го, додайте абзац з вирівнюванням вмісту по центру <p align="center"></p>. Всередині цього контейнера розташуйте ще одне зображення. За необхідності додайте йому атрибут ширини.
Рис. 2. Взаємне розташування фотографій залежить від різних факторів, зокрема, від ширини вікна браузера. Створюючи ілюстрації до тексту, необхідно враховувати і вимоги до розташування ілюстрацій у тексті, і необхідність адаптації сторінки до розмірів екрану.
Фото, яке буде розташовано на сторінці праворуч, у коді розмістіть так, щоб воно було відокремлено від попереднього хоча б одним абзацом і за ним ще був текст, який буде обтікати це зображення. Якщо тексту буде мало, ви завжди зможете «дописати» ще трохи текстового контенту. Атрибут align зі значенням right, вирівняє зображення по правому краю. Текст, який знаходиться в коді за цим тегом <img>, на вебсторінці буде розташований ліворуч від зображення. Як і у попередніх випадках ви можете додати атрибути ширини і відступів (рис.3).
Рис. 3. Для привабливого вигляду обтікання рисунку текстом при різних розмірах вікна браузера довелося «дописати» ще 10 абзаців.
ЗАУВАЖЕННЯ: Ще раз звертаємо вашу увагу на те, що для розташування ілюстрації на сторінці достатньо тега <img src="" alt=""> з приведеними зараз атрибутами. Як вплинути на розміри та розташування цього зображення будемо розглядати у відповідному практикумі з основ CSS.
Створіть якірне посилання на початок згенерованого тексту. Підніміться вгору вашого html-документа до першого абзацу згенерованого тексту. За відкриваючим тегом <section> створіть заголовок другого рівня. Вміст його може бути будь-яким. Якщо використати запис h2#start>lorem3 і натиснути клавішу Tab, отримаємо заголовок який складається з трьох слів, з ідентифікатором start:
<h2 id="start">Lorem, ipsum dolor.</h2>
Опустіться вниз html-документа. Перез закриваючим тегом </body> розташуйте якірне посилання на щойно створений заголовок. Замість тексту посилання використайте зображення стрілки вгору (рис.4). У нашому прикладі цей код виглядає наступним чином:
<p><a href="#start" title="До початку статті">
<img src="images/up-arrow.png" alt="стрілка вгору"></a></p>
Рис. 4. Якщо сторінка має значну висоту, то одна з вимог юзабіліті ─
можливість швидкого переміщення по сторінці. Даний приклад найпростіший спосіб реалізації такої можливості
Використаємо маленьке зображення з прозорим фоном для іконки навчального сайту. Додають іконку всередині контейнера <head>..</head>. Встановіть курсор за тегом </title> і натисніть Enter. Уведіть код
Значенням атрибуту href є відносна (до даного файлу) адреса зображення-іконки. Після похилої риски в атрибуті type вкажіть тип файлу (ico, gif, png тощо).
Рис. 5. Спостерігаючи однакову іконку вкладки на різних сторінках сайту користувач буде впевнений, що при переході на іншу сторінку він залишився на тому ж ресурсі. Також іконка робить ресурс швидше впізнаваним серед закладок у браузері
Скопіюйте ваш тег для вставки іконки, відкрийте в редакторі коду усі інші існуючі сторінки вашого навчального сайту, та вставте цей код у рядку за контейнером <title>..</title>.
Якщо ви працюєте з копією сторінки pochatok.html, пропонуємо вам залишити її вміст. Але обов'язково підніміться вгору документа і видаліть або закоментуйте рядок коду, який підключає стильовий файл outline.css. Змініть назву сторінки на Зображення на вебсторінках.
Додайте перед футером ще одну секцію, у якій згенеруйте 20 абзаців контенту. Використовуйте можливості, які надає плагін Emmet. Серед цих абазаців розташуйте три фотографії як «ілюстрації» до тексту − з вирівнюванням по лівому краю, по центру і по правому краю. Використовуйте для цього відповідні атрибути. Зображення, розташоване на початку, повино бути ліворуч (рис.1).
Рис. 1. Використані атрибути вирівнювання, горизонтальних відступів і ширини надали фото додаткових властивостей. У сучасній верстці замість цих атрибутів для впливу на зображення використовують відповідні стильові властивості
Порахуйте на сторінці кількість абзаців, після яких доцільно вставити зображення по центру. В залежності від ширини вебсторінки і фото (горизонтального чи вертикального) їх кількість може бути більшою, або меншою. Прийміть до уваги, що в реальному тексті зображення росташовують не раніше ніж текст, який вони ілюструють. Додаючі ілюстрацію по центру, оберіть таку кількість абзаців, щоб перший і другий малюнки не зачіпали один одного. При необхідності згенеруйте ще декілька абзаців. За необхідності додайте зображенню атрибут ширини (рис.2).
Рис. 2. Взаємне розташування фотографій залежить від різних факторів, зокрема, від ширини вікна браузера. Створюючи ілюстрації до тексту, необхідно враховувати і вимоги до розташування ілюстрацій у тексті, і необхідність адаптації сторінки до розмірів екрану.
Фото, яке буде розташовано на сторінці праворуч, у коді розмістіть так, щоб воно було відокремлено від попереднього хоча б одним абзацом і за ним ще був текст, який буде обтікати це зображення. Якщо тексту буде мало, ви завжди зможете «дописати» ще трохи текстового контенту. Як і у попередніх випадках ви можете додати атрибути ширини і відступів (рис.3).
Рис. 3. Для привабливого вигляду обтікання рисунку текстом при різних розмірах вікна браузера довелося «дописати» ще 10 абзаців.
ЗАУВАЖЕННЯ: Ще раз звертаємо вашу увагу на те, що для розташування ілюстрації на сторінці достатньо тега <img src="" alt=""> з приведеними зараз атрибутами. Як вплинути на розміри та розташування цього зображення будемо розглядати у відповідному практикумі з основ CSS.
Створіть якірне посилання на початок згенерованого тексту. За відкриваючим тегом <section> додайте заголовок другого рівня. Вміст його може бути будь-яким. Тому можна сміливо використовувати можливості плагіна Emmet.
Перед закриваючим тегом </body> розташуйте якірне посилання на щойно створений заголовок. Замість тексту посилання використайте зображення стрілки вгору (рис.4).
Рис. 4. Якщо сторінка має значну висоту, то одна з вимог юзабіліті ─
можливість швидкого переміщення по сторінці. Даний приклад найпростіший спосіб реалізації такої можливості
Використаємо маленьке зображення з прозорим фоном для іконки навчального сайту. Додайте посилання на нього за тегом </title> (рис.5).
Рис. 5. Спостерігаючи однакову іконку вкладки на різних сторінках сайту користувач буде впевнений, що при переході на іншу сторінку він залишився на тому ж ресурсі. Також іконка робить ресурс швидше впізнаваним серед закладок у браузері
Скопіюйте ваш код для вставки іконки, відкрийте в редакторі коду усі інші існуючі сторінки вашого навчального сайту, та вставте цей код у рядку за контейнером <title>..</title>.
ЗАУВАЖЕННЯ:
Наступного разу, при верстці багатосторінкового сайту, ви додасте іконку в самий перший html-документ. Якщо наступні сторінки будуть створюватись шляхом копіювання першої сторінки, іконка вже буде на них присутня.
Додаткове завдання
Ви можете ще потренуватись із додаванням зображень на вебсторінки. Наприклад, додати своє фото на головну сторінку сайту, ліворуч вашої розповіді про себе.
