Графіка для веб-середовища
Формати графічних файлів
Найпоширенішими графічними форматами в Web є GIF, JPG , JPEG і PNG - найбільш поширені формати для обміну зображеннями між системами. Дані формати підтримують багато графічних додатків, в тому числі всі програми перегляду графіки World Wide Web.
Однак для великих зображень фотографічної якості більше підходить формат JPEG.
Формат JPEG відрізняється від інших графічних форматів насамперед тим, що він використовує метод стиснення "з втратами". JPEG частково ідентифікує і видаляє ту інформацію, яка є несуттєвою для сприйняття зображення. В результаті JPEG може досягати високого рівня стиснення без помітних втрат в якості зображення.
Додавання графічних файлів в код HTML здійснюється за допомогою тега <img>.
Тег <img>
На web-сторінку зображення безпосередньо не додається!
В коді html міститься тільки посилання на файл зображення, який може зберігатися або в тій самій папці, що і сама web-сторінка, або у іншій папці чи навіть на сервері в мережі інтернет.
Тег <img> призначений для відображення на веб-сторінці зображень в графічному форматі GIF, JPEG або PNG. Адреса файлу з картинкою задається через атрибут src.
<img src = "URL" alt = "альтернативний текст">
Атрибути:
Також для цього тега доступні універсальні атрибути і події.
Приклад:
...
<body bgcolor="PaleGreen">
<p><img src="Khimedzi.jpg" width="189" height="">
Замок Хімедзі — японський замок у місті Хімедзі, префектури Хьоґо, Японія. Назва походить від гори Хіме, у підніжжя якої він розташований. Також популярна назва «замок білої чаплі». Збудований у 1346 як один із замків роду Акамацу на високому пагорбі, оточеному трьома кільцями фортечних стін білого кольору, верхня частина яких вкрита сірою черепицею.</p>
</body>
...
Якщо файл зображення міститься в одній папці з html-файлом, в url-адресі записується лише ім'я цього файлу:
<img src="Khimedzi.jpg">
За замовчуванням зображення на сторінці вирівнюється за лівим краєм. Текст, розташований після зображення починається на рівні правого нижнього кута цього зображення.
Для зміни вирівнювання та способу обтікання зображення текстом використовують атрибут align тега <img>:
Верхня межа зображення вирівнюється по найвищому елементу поточного рядка:
<img src="Khimedzi.jpg" align="top">
Верхня межа зображення вирівнюється по найвищому текстовому елементу поточного рядка:
<img src="Khimedzi.jpg" align="texttop">
Вирівнювання середини зображення по базовій лінії поточного рядка:
<img src="Khimedzi.jpg" align="middle">
Вирівнювання середини зображення посередині поточного рядка:
<img src="Khimedzi.jpg" align="absmiddle">
Зображення притискається до лівого поля вікна. Текст обтікає зображення з правого боку:
<img src="Khimedzi.jpg" align="left">
Зображення притискається до правого поля вікна. Текст обтікає зображення з лівого боку:
<img src="Khimedzi.jpg" align="right">
Вирівнювання нижньої межі зображення по базовій лінії поточного рядка:
<img src="Khimedzi.jpg" align="bottom">
Вирівнювання нижньої межі зображення по нижній межі поточного рядка:
<img src="Khimedzi.jpg" align="absbottom">
Для вирівнювання зображення по центру, необхідно розмістити тег <img> між тегами параграфу (абзацу) <p></p> та додати атрибут вирівнювання align до тегу параграфа:
<p align="center"><img src="Khimedzi.jpg"></p>
Зображення в таблиці
Зображення можна додавати в таблицю як в якості фону, так і в окремі комірки. Для додавання фонового зображення до таблиці використовується атрибут background тегу <table>:
...
<table background="water.jpg" width="100%" border="3" cellpadding="5" cellspacing="5">
<tr>
<th colspan="2"><h2>Агрегатні стани води</h2></th>
</tr>
<tr>
<th>Рідкий стан</th>
<td>...</td>
</tr>
<tr>
<th>Твердий стан</th>
<td>...</td>
</tr>
<tr>
<th>Газоподібний стан</th>
<td>...</td>
</tr>
</table>
...
Щоб розмістити зображення в окремій комірці таблиці тег <img> записують між відповідними тегами <td></td>:
...
<tr>
<td><img src="water.jpg"></td>
<td>...</td>
</tr>
<tr>
<td><img src="ice.jpg"></td>
<td>...</td>
</tr>
<tr>
<td><img src="steam.jpg"></td>
<td>...</td>
</tr>
...
Зображення в якості гіперпосилань
Якщо необхідно, то малюнок можна зробити посиланням на інший файл, помістивши тег <img> в контейнер <a>. При цьому навколо зображення відображається рамка, яку можна прибрати, додавши атрибут border = "0" в тег <img>.
Малюнки також можуть застосовуватися в якості карт-зображень, коли картинка містить активні області, які виступають в якості посилань. Така карта за зовнішнім виглядом нічим не відрізняється від звичайного зображення, але при цьому воно може бути розбите на невидимі зони різної форми, де кожна з областей служить посиланням.
Приклад:
...
<body bgcolor="PaleGreen">
<p>
<a href="https://uk.wikipedia.org/wiki/%D0%97%D0%B0%D0%BC%D0%BE%D0%BA_%D0%A5%D1%96%D0%BC%D0%B5%D0%B4%D0%B7%D1%96">
<img src="Khimedzi.jpg" align="right" width="200" height="" alt="Castle Khimezі">
</a>
...
</p>
</body>
...
Опрацюйте теоретичні відомості:
07_Графіка.pdfПрактична частина
Вправа 8
Виконайте завдання за зразком:
Вимоги до web-сторінки:
Вміст тегу заголовку сторінки – Вправа 8.
Кольори фону та тексту, заголовків, вирівнювання об’єктів та обтікання зображення текстом максимально наближені до зразка.
Відступи на сторінці:
зліва – 30px;
зверху – 50px;
справа – 20px.
Відступи від зображення до решти контенту:
по вертикалі – 10px;
по горизонталі – 10px.
Перше зображення має бути посиланням на відповідну сторінку сайту «Вікіпедія» (натисніть, шоб перейти).
Ширина цього зображення - 30%.
Відстань між границями комірок таблиці та їх вмістом - 10px.
Посилання на скачування текстового та графічних файлів https://drive.google.com/open?id=1P8QWQc_6vKlqRb908G0mzs2GOKNJNUl1
Зберегти файл з іменем index8_своє прізвище.html. Наприклад, index8_simakova.html