Для розміщення зображень на web сторінках використовується. Ілюстрований самовчитель по Web-графіку. Атрибут alt як запасний варіант

Ім'я файлу: Для розміщення зображень на web сторінках використовується. Ілюс
Розширення: docx
Розмір: 55кб.
Дата: 20.02.2022
скачати
Пов'язані файли:
Державний стандарт обліковці ТУ.doc
БПАЛ_розробка_інформатика_алгоритми.docx
розробка уроку гіпертекст.docx
Засоби діагностики і технічне обслуговування ПК.docx

^{Для розміщення зображень на}web сторінках використовується. Ілюстрований самовчитель по Web-графіку. Атрибут alt - як запасний варіант

визначення 1

Web-сторінка - це текстовий файл, Створений на мові HTML і розміщений в World Wide Web (WWW). У Web-сторінці крім тексту можуть міститися гіпертекстові посилання, за якими можна здійснити перехід до інших Web-сторінок і переглянути їх, а також вставки у вигляді графіки, анімації, відеокліпів і музики.

За допомогою мови HTML можна:

Створювати і редагувати Web-сторінки.
Редагувати документи HTML-формату з Інтернету з урахуванням функціонування всіх впроваджених в документ об'єктів (картинок, анімацій і т.д.).
Використовуючи гіпертекстові посилання і можливість впровадження в документ HTML-формату малюнків, діаграм, анімації, відеокліпів, музичного та мовного супроводу, текстових спецефектів, створювати мультимедійні презентації, слайд-шоу, демонстраційні проекти.

зауваження 1

Графічні зображення, як правило, зберігаються в окремих файлах. У мові HTML є особливі теги, за допомогою яких в кодах Web-сторінок прописуються посилання, що представляють собою фактичні адреси цих файлів в мережі Інтернет. Зустрічаючи такі теги, Web-оглядач робить запит Web-сервера на відповідний файл із зображенням, аудіо - або відеороликом і виводить його на Web-сторінку в місце знаходження даного тега. Будь-які дані (зображення, аудіо- та відеоролики та ін.), Які зберігаються в окремих від Web-сторінки файлах, називають впровадженими елементами Web-сторінок. Розглянемо докладніше процес додавання зображення на Web-сторінку.

Додавання зображень на Web-сторінку

Привабливість Web-сторінок полягає саме в використовуваної на них графіку і інших різних об'єктах. Додати зображення на сторінку не складно. А додати графіку, здатну зробити зовнішній вигляд Web-сторінки більш презентабельним і професійним, набагато складніше, будуть потрібні спеціальні знання.

Додати зображення на сторінку можна, використовуючи тег джерела зображення, який має вигляд:

де - власне сам тег, а scr - його атрибут. Так як атрибут scr є обов'язковим, то можна сказати, що вся ця запис являє собою один загальний тег. У тезі джерела зображення не використовується відповідного закриває тeга, так як тег джерела є самодостатнім, і тому при його використанні необхідно додавати в кінці закриває косу рису:.

Додавання альтернативних написів

В Інтернеті дуже часто можна зустріти різні написи, які відображаються при наведенні курсором на який-небудь графічний об'єкт Web-сторінки. У цих написах зазвичай міститься додаткова інформація про самому зображенні або ж про область сторінки, на якій воно знаходиться.

Нижче представлений НТМ-код, в якому атрибут alt доданий всередину тега. Даний атрибут аналогічно атрибуту src повідомляє браузеру якусь додаткову інформацію про зображення і його також завжди можна використовувати разом з тeгом.

alt \u003d "(! LANG: Це картинка!" />!}

Функція атрибута alt полягає у визначенні для доданого на Web-сторінку графічного елементу альтернативного тексту. Альтернативним він називається тому, що відображається на екрані як альтернатива для самого зображення. Атрибут alt виконує ще одну важливу функцію. Він дозволяє веб-дизайнеру бути впевненим в тому, що, якщо відвідувач сторінки не побачить на своєму екрані зображення, він у будь-якому випадку хоча б зможе ознайомитися з доданою до цього зображення текстовою інформацією.

При використанні атрибуту alt для кожного тега, важливо бути уважним, щоб не призначити графічним елементам невідповідні їм текстові повідомлення. Наприклад, немає сенсу в додаванні альтернативних текстових написів до елементів зовнішнього оформлення сторінки. Щоб уникнути таких помилок, можна привласнити атрибуту alt цих елементів пусте значення (alt \u003d ""). Якщо не поставити значень інших атрибутів, браузер відтворить зображення в вихідному розмірі, При цьому вирівняє верхній край зображення з верхнім краєм знаходиться поруч текстового рядка. Однак можна змінити обидва цих параметра, використовуючи теги стильових таблиць.

атрибути зображення

У тезі є атрибути, які дозволяють змінювати розмір зображень. Ось деякі з них:

height - за допомогою нього визначається висота зображення в пікселях або відсотках;
width - за допомогою нього визначається ширина зображення в пікселях або відсотках.

Налаштування висоти і ширини зображення

Розміри зображень, розміщених на Web-сторінках, можуть задаватися за допомогою вищеназваних атрибутів. Причому їх значення задають або як фіксована кількість пікселів, або у відсотках щодо розмірів сторінки. У представленому нижче коді HTML перший тег містить розміри вихідного зображення в пікселях (60 пікселів по вертикалі і 60 пікселів по горизонталі), другий тег ширину того ж зображення встановлює рівний 6% від ширини сторінки, а висоту - 10% відносно висоти сторінки.

аlt \u003d "Це картинка!" hеight \u003d "60" width \u003d "60" /\u003e

аlt \u003d "Це картинка!" height \u003d "10%" width \u003d "6%" /\u003e

зауваження 2

При відтворенні зображень в своєму вікні браузер однаково добре справляється з обробкою значень обох видів. Однак необхідно пам'ятати про те, що у відвідувачів Web-сторінок на комп'ютерах може бути встановлено екранне дозвіл, відмінне від вашого. Тому при зміні розмірів зображення, потрібно обов'язково ставити обидва значення зображення (висоту і ширину). При зміні тільки одного з цих значень, на екрані зображення може виявитися витягнутим по вертикалі або горизонталі.

Можна використовувати створення ілюзії швидкого завантаження фотографій. Для цього потрібно завжди вказувати значення атрибутів height і width в незалежності від того, змінені розміри зображення чи ні. Оскільки вони повідомляють браузеру важливі відомості про кількість місця, необхідного для розміщення зображення на сторінці. У відповідь браузер позначає необхідне для зображення простір і продовжує будувати інші елементи сторінки, не припиняючи завантаження самого зображення. У зв'язку з цим здається, що сторінка вантажиться швидше, так як її відвідувачам не доводиться чекати повного завантаження зображення, щоб побачити іншу інформацію на сторінці.

Для того щоб зображення на будь-якому екрані незалежно від його дозволу займало точно певний простір по ширині сторінки, необхідно використовувати процентні значення. Якщо ж потрібно, щоб постійним був дозвіл самого малюнка (його розмір у пікселях), необхідно використовувати значення в пікселях.

Вирівнювання тексту та графіки

Для вирівнювання зображення по правому (right) або лівому (left) краю текстового рядка використовується атрибут align тега. наприклад:

аlt \u003d "Це картинка!" hеight \u003d "60" width \u003d "60" align \u003d "right" /\u003e

Для вирівнювання зображення по вертикалі щодо текстового рядка можна також використовувати цей атрибут, який може приймати значення top, bottom і center. Значення top вказує на вирівнювання верхнього краю зображення по верхньому краю навколишнього його тексту. Значення bottom вказує на вирівнювання нижнього краю зображення по нижньому краю навколишнього його тексту. Значення center вказує на вирівнювання центру зображення по центру текстового рядка.

Використання зображень як посилання

Зображення використовуються також для оформлення гіперпосилань на інші документи. В HTML зображення перетворюється в гіперпосилання так само, як і напис. Для цього використовується тeг, в який полягає елемент сторінки (в нашому випадку зображення), який повинен стати посиланням. Перехід за посиланням буде здійснюватися після клацання на дане зображення.

мініатюри зображень

Крім вищевказаного способу, в якому зображення виступає в якості гіперпосилання, його також можна використовувати як гіперпосилання, що здійснює перехід від одного зображення до іншого. Це необхідно в тих випадках, коли розмір зображення, яке хочуть опублікувати на Web-сторінці, досить великий і буде дуже довго завантажуватися, що неприйнятно для багатьох відвідувачів. Тому створюють зменшену копію цього зображення (мініатюру) і представляють її гіперпосиланням. Якщо відвідувач сторінки зацікавиться даними зображенням, він, клацнувши на мініатюру, зможе перейти до перегляду повноцінного зображення. Наведемо приклад коду:

аlt \u003d "Клацніть, щоб побачити нормальне зображення."

hеight \u003d "60" width \u003d "60" /\u003e

Секрети успішного використання зображень

Зображення несуть масу наочної інформації для відвідувачів, і це робить їх привабливими, до того ж їх досить-таки просто додавати на Web-сторінку, але при цьому необхідно дотримуватися певних правил створення сайту, якщо ми хочемо, щоб він став популярним в мережі.

При створенні сторінок потрібно намагатися розміщувати на них зображення невеликих розмірів, оскільки зображення великих розмірів зажадають для завантаження багато часу, а деякі користувачі все ще для доступу до мережі як і раніше використовують канали зв'язку з низькою пропускною здатністю, і тому розміри завантаження мають для них принципове значення.

зауваження 3

Важливим є і загальний розмір файлу всього HTML-документа, який, в свою чергу, буде залежати не тільки від розміру зображень, що містяться в ньому, а й від їх кількості. Потрібно бути уважними при використанні атрибуту alt, щоб зміст текстового повідомлення завжди відповідало самому зображенню. І в зворотному випадку: необхідно стежити за тим, щоб зображення відповідало представленої на сторінці текстової інформації.

При використанні зображень, запозиченим у мережі Інтернет, на створюваної сторінці, Необхідно перевірити, чи не захищені ці зображення авторськими правами.

HTML-зображення додаються на веб-сторінки за допомогою тега . Використання графіки робить веб-сторінки візуально привабливішим. Зображення допомагають краще передати суть і зміст веб-документа.

За допомогою HTML-тегів і можна створювати карти-зображення з активними областями.

Вставка зображень в HTML-документ

1. Тег

елемент представляє зображення і його резервний контент, який додається за допомогою атрибута alt. Так як елемент є рядковим, то рекомендується розташовувати його всередині блочного елемента, Наприклад,

або

.

тег має обов'язковий атрибут src, значенням якого є абсолютний або відносний шлях до зображення:
для тега доступні наступні атрибути:
Таблиця 1. Атрибути тега

Атрибут	Опис, прийняте значення
alt	Атрибут alt додає альтернативний текст для зображення. Виводиться на місці появи зображення до його завантаження або при відключеній графіку, а також виводиться спливаючій підказкою при наведенні курсору миші на зображення. Синтаксис: alt \u003d "(! LANG: опис зображення" . !}
crossorigin	Атрибут crossorigin дозволяє завантажувати зображення з ресурсів іншого домену за допомогою CORS-запитів. Зображення, завантажені в полотно за допомогою CORS-запитів, можуть бути використані повторно. Допустимі значення: anonymous - Cross-origin запит виконується за допомогою HTTP-заголовка, при цьому облікові дані не передаються. Якщо сервер не дає облікові дані сервера, з якого запитується контент, то зображення буде зіпсовано і його використання буде обмежено. use-credentials - Cross-origin запит виконується з передачею облікових даних. Синтаксис: crossorigin \u003d "anonymous".
height	Атрибут height задає висоту зображення в px. Синтаксис: height \u003d "300".
ismap	Атрибут ismap вказує на те, що картинка є частиною зображення-карти, розташованого на сервері (зображення-карта - зображення з інтерактивними областями). При натисканні на зображення-карту координати передаються на сервер у вигляді рядка запиту URL-адреси. Атрибут ismap допускається тільки в разі, якщо елемент є нащадком елемента з дійсним атрибутом href. Синтаксис: ismap.
longdesc	URL розширеного опису зображення, яке доповнює атрибут alt. Синтаксис: longdesc \u003d "http://www.example.com/description.txt".
src	Атрибут src задає шлях до зображення. Синтаксис: src \u003d "flower.jpg".
sizes	Задає розмір зображення в залежності від параметрів відображення. Працює тільки при заданому атрибуті srcset. Значенням атрибута є одна або кілька рядків, зазначених через кому.
srcset	Створює список джерел для зображення, які будуть обрані, виходячи з дозволу екрану. Може використовуватися разом або замість атрибута src. Значенням атрибута є одна або кілька рядків, розділених комою.
usemap	Атрибут usemap визначає зображення в якості карти-зображення. Значення обов'язково має починатися з символу #. Значення асоціюється зі значенням атрибута name або id тега і створює зв'язок між елементами і . Атрибут не можна використовувати, якщо елемент є нащадком елемента або . Синтаксис: usemap \u003d "# mymap".
width	Атрибут width задає ширину зображення в px. Синтаксис: width \u003d "500".

1.1. Адреса зображення

Адреса зображення може бути вказаний повністю (абсолютний URL), наприклад:
url (http://anysite.ru/images/anyphoto.png)

Або ж через відносний шлях від документа або кореневого каталогу сайту:
url (../ images / anyphoto.png) - відносний шлях від документа,
url (/images/anyphoto.png) - відносний шлях від кореневого каталогу.

Це інтерпретується наступним чином:
../ - означає піднятися вгору на один рівень, до кореневого каталогу,
images / - перейти до папки з зображеннями,
anyphoto.png - вказує на файл зображення.

1.2. розміри зображення

Без завдання розмірів зображення малюнок відображається на сторінці в реальному розмірі. Відредагувати розміри зображення можна за допомогою атрибутів width і height. Якщо буде поставлено тільки один з атрибутів, то другий буде обчислюватися автоматично для збереження пропорцій малюнка.

1.3. Формати графічних файлів

формат JPEG (Joint Photographic Experts Group). зображення JPEG ідеальні для фотографій, вони можуть містити мільйони різних квітів. Стискають зображення краще GIF, але текст і великі площі із суцільним кольором можуть покритися плямами.

формат GIF (Graphics Interchange Format). Ідеальний для стиснення зображень, в яких є області із суцільним кольором, наприклад, логотипів. GIF-файли дозволяють встановити один з кольорів прозорим, завдяки чому фон веб-сторінки може проявлятися через частину зображення. Також GIF-файли можуть включати в себе просту анімацію. GIF-зображення містять всього лише 256 відтінків, через що зображення виглядають плямистими і нереалістичного кольору, як плакати.

формат PNG (Portable Network Graphics). Включає в себе кращі риси GIF- і JPEG-форматів. Містить 256 кольорів і дає можливість зробити один з кольорів прозорим, при цьому стискає зображення в менший розмір, ніж GIF-файл.

формат APNG (Animated Portable Network Graphics). Формат зображення, заснований на форматі PNG. Дозволяє зберігати анімацію, а також підтримує прозорість.

формат SVG (Scalable Vector Graphics). SVG-малюнок складається з набору геометричних фігур, описаних у форматі XML: лінія, еліпс, багатокутник і т.п. Підтримується як статична, так і анімована графіка. Набір функцій включає в себе різні перетворення, альфа-маски, ефекти фільтрів, можливість використання шаблонів. Зображення в форматі SVG можуть змінюватися в розмірі без зниження якості.

формат BMP (Bitmap Picture). Являє собою нестиснене (оригінальна) растрове зображення, шаблоном якого є прямокутна сітка пікселів. Bitmap-файл складається з заголовка, палітри і графічних даних. У заголовку зберігається інформація про графічному зображенні і файлі (глибина пікселів, висота, ширина і кількість квітів). Палітра вказується тільки в тих Bitmap-файлах, які містять палітровие зображення (8 і менше біт) і перебуває не більше ніж з 256 елементів. Графічні дані представляють саму картинку. Глибина кольору в даному форматі може бути 1, 2, 4, 8, 16, 24, 32, 48 біт на піксель.

формат ICO (Windows icon). Формат зберігання значків файлів в Microsoft Windows. Також, Windows icon, використовується як іконка на сайтах в інтернеті. Саме картинка такого формату відображається поруч з адресою сайту або закладкою в браузері. Один ICO-файл містить один або кілька значків, розмір і кольоровість кожного з яких задається окремо. Розмір значка може бути будь-яким, але найбільш вживані квадратні значки зі сторонами 16, 32 і 48 пікселів.

2. Тег

тег служить для представлення графічного зображення у вигляді карти з активними областями. Активні області визначаються по зміні виду курсора миші при наведенні. Клацаючи мишею на активних областях, користувач може переходити до пов'язаних документів.

Для тега доступний атрибут name, який задає ім'я карти. Значення атрибут name для тега повинна відповідати імені в атрибуті usemap елемента :

...

елемент містить ряд елементів , Що визначають інтерактивні області в зображенні карти.

3. Тег

тег описує тільки одну активну область у складі карти зображень на стороні клієнта. Елемент не має закриває тега. Якщо одна активна область перекриває іншу, то буде реалізована перша посилання зі списку областей.

Таблиця 2. Атрибути тега

Атрибут	Короткий опис
alt	Задає альтернативний текст для активної області карти.
coords	Визначає позицію області на екрані. Координати задаються в одиницях довжини і розділяються комами: для кола - координати центру і радіус кола; для прямокутника - координати верхнього лівого і правого нижнього кутів; для багатокутника - координати вершин багатокутника в потрібному порядку, також рекомендується вказувати останні координати, рівні першим, для логічного завершення фігури.
download	Доповнює атрибут href і повідомляє браузеру, що ресурс повинен бути завантажений в момент, коли користувач клацає по посиланню, замість того, щоб, наприклад, попередньо відкрити його (як PDF-файл). Ставлячи ім'я для атрибута, ми таким чином задаємо ім'я завантажуваного об'єкту. Дозволяється використовувати атрибут без вказівки його значення.
href	Вказує URL-адресу для посилання. Може бути вказано абсолютний або відносний адресу посилання.
hreflang	Визначає мову пов'язаного веб-документа. Використовується тільки разом з атрибутом href. Прийняті значення - абревіатура, що складається з пари букв, що позначають код мови.
media	Визначає, для яких типів пристроїв файл буде оптимізовано. Значним може бути будь-який медіа-запит.
rel	Доповнює атрибут href інформацією у цій справі між поточним і пов'язаним документом. Прийняті значення: alternate - посилання на альтернативну версію документа (наприклад, друковану форму сторінки, переклад або дзеркало). author - посилання на автора документа. bookmark - постійний URL-адреса, що використовується для закладок. help - посилання на довідку. license - посилання на інформацію про авторські права на даний веб-документ. next / prev - вказує зв'язок між окремими URL. Завдяки цій розмітці Google може визначити, що зміст даних сторінок пов'язано в логічній послідовності. nofollow - забороняє пошуковій системі переходити за посиланнями на даній сторінці або по конкретній посиланням. noreferrer - вказує, що переході по посиланню браузер не повинен посилати заголовок HTTP-запиту (Referrer), в який записується інформація про те, з якої сторінки прийшов відвідувач сайту. prefetch - вказує, що цільовий документ повинен бути кешуватися, тобто браузер у фоновому режимі завантажує вміст сторінки до себе в кеш. search - вказує, що цільовий документ містить інструмент для пошуку. tag - вказує ключове слово для поточного документа.
shape	Задає форму активної області на карті і її координати. Може приймати наступні значення: rect - активна область прямокутної форми; circle - активна область в формі кола; poly - активна область в формі багатокутника; default - активна область займає всю площу зображення.
target	Вказує, куди буде завантажений документ при переході по посиланню. Набуває таких значень: _self - сторінка завантажується в поточне вікно; _blank - сторінка відкривається в новому вікні браузера; _parent - сторінка завантажується у фрейм-батько; _top - сторінка завантажується в повне вікно браузера.
type	Вказує MIME-тип файлів посилання, тобто розширення файлу.

4. Приклад створення карти-зображення

1) Розмічаємо вихідне зображення на активні області потрібної форми. Координати областей можна обчислити за допомогою програми для обробки фотографій, наприклад, Adobe Photoshop або Paint.

Мал. 1. Приклад розмітки зображення для створення карти

2) Задаємо ім'я карти, додавши його в тег за допомогою атрибута name. Це ж значення присвоюємо атрибуту usemap тега .

J pg "alt \u003d" (! LANG: flowers_foto" width="680" height="383" usemap="#flowers"> !}
Мал. 2. Приклад створення карти-зображення, при натисканні курсора миші на квітку здійснюється перехід на сторінку з описом

У більшості Web-сторінок зустрічається графіка. Вона дозволяє барвисто і наочно представити інформацію. У багатьох випадках краще показати картинку, ніж давати довге текстовий опис.

Існують два способи розміщення графічних зображень на сторінці:

вставка окремих картинок;
заповнення фону картинкою.

У будь-якому випадку графічне зображення береться з файлу.

Вставка графічних зображень

Вставка на сторінку графічного зображення з файлу графічного формату проводиться за допомогою тега (Від англ, image - зображення) із зазначенням адреси файлу в якості аргументу атрибута SRC:

< IMG SRC = "адрес_графического_файла" >

Адреса графічного файлу - етолібо URL-адресу, або ім'я файлу, можливо, із зазначенням шляху. Наприклад, для показу графічного файлу logotip.jpg слід написати тег:

< IMG SRC = "logotip.jpg" >

Для збільшення швидкості передачі графічного зображення в тезі можна використовувати атрибут ( додатковий параметр) LOWSRC, який приймає в якості аргументу адресу графічного файлу. Ви можете створити два графічних файлу: один (наприклад, нехай це файл logotip.jpg) містить картинку, отриману з високою роздільною здатністю, а інший (наприклад, logotip.gif) - картинку, отриману з низьким дозволом. Тоді тег:

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

... накаже браузеру спочатку завантажити файл logotip.gif, а потім у міру прийому замінити його файлом logotip.jpg.

Інший спосіб прискорення завантаження графіки полягає в завданні розмірів прямокутної області, в якій буде розміщено графічне зображення, за допомогою атрибутів WIDTH (Ширина) і HEIGHT (Висота), вимірюваних в пікселах. Якщо вказати ці атрибути, то браузер спочатку виділить місце під графіком, підготує макет документа, відобразить текст і тільки потім завантажить графіком. Зауважимо, що браузер стискає або розтягує зображення, вставляють його в рамки зазначеного розміру. Приклад вказівки розмірів зображення:

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

Графіка зазвичай використовується разом з текстом, тому виникає задача вирівнювання тексту і графічного зображення. Це завдання вирішується за допомогою атрибута ALIGN тега із застосуванням різних аргументів. Наприклад, ми можемо побажати, щоб текст обтікав картинку справа або зліва. Зазвичай картинка вбудовується впритул з текстом, що може бути некрасиво. Щоб уникнути цього, можна задати порожні поля навколо ілюстрації. Поля створюються за допомогою атрибутів VSРАСЕ для верхнього і нижнього полів і НSPACE для бічних полів в тезі . Аргументи цих атрибутів вказуються у вигляді чисел, що визначають розміри полів в пікселах. Для скасування обтікання графіки текстом служить тег
.

Наступний тег задає обтікання графіки з файлу logotip.jpg справа (картинка буде знаходитися зліва від тексту):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

Якщо потрібно розташувати картинку праворуч від тексту, то потрібно атрибуту ALIGN привласнити аргумент RIGHT:

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

Щоб задати поля навколо картинки, треба написати тег виду:

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

Тут числа 20 і 10 визначають розміри полів.

Розглянемо приклад спільного використання графіки і текстів. Відкрийте Блокнот (текстовий редактор Notepad) Windows. Напишіть в ньому HTML-код з використанням розглянутих вище тегів. Нижче наводиться програма, що виводить деякий текст і графіку. В якості графічного файлу можна використовувати будь-який з наявних у вас файлів. Тут використовується файл logotip.gif.

< HTML >

< HEAD >

< TITLE > Вправа 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 > Текст обтікає графіку праворуч< / H1 >

Мал. 657. Текст обтікає картинку справа

Широкі можливості точного позиціонування зображень (як і інших елементів) на сторінці надають таблиці і стилі. Ці елементи HTML будуть розглянуті пізніше. Наприклад, ви можете визначити таблицю без видимих \u200b\u200bрамок, а в осередках цієї таблиці розмістити картинки, тексти та інші елементи.

Існують сотні графічних форматів, але тільки деякі з них підтримуються веб-браузерами. У даній статті ми опишемо різні графічні формати файлів, які доступні для веб-дизайнерів і в якому випадку вони повинні бути використані.

Графічні формати файлів, які підтримуються більшістю популярних веб-браузерів є: Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) і векторна графіка. Деякі властивості графічних файлів:

Прозорість - це властивість дозволяє зображенню бути в різному ступені прозорості від твердого стану до повністю прозорого.
Стиснення - це властивість дозволяє зображенню зберігатися в набагато меншому файлі, за допомогою математичних алгоритмів для обробки групи пікселів як єдиного елемента.
Переплетення - дозволяє зображенню бути завантаженим спочатку по непарних рядках, а потім парних. Це дозволяє відвідувачеві швидше побачити зображення.
Анімація - створює видимість руху за допомогою серії послідовних знімків. Для анімованого GIF не потрібно плагін в браузері і він може працювати практично на всіх пристроях.
Прогресивна завантаження - схожа на переплетення тим, що вона завантажує тільки частина зображення спочатку, але не на основі чергуються рядків.

GIF заснований в 1980 році і прийнятий веб-дизайнерами на початку 1990-х років в якості основного графічного формату для веб-сторінок. GIF файли використовують алгоритм стиснення, який робить розміру файлу маленьким для швидкого завантаження. GIF обмежений 256 кольорами (8 біт), підтримкою прозорості і черезстрочной графіки. Також є можливість створювати анімовану графіку використовуючи цей формат. Всі браузери можуть відображати GIF файли без проблем.

Переваги GIF:

Найбільш широко підтримуваний графічний формат
Схеми виглядають краще в цьому форматі
підтримка прозорості

Файли стиснуті, але підтримують "справжні кольори" (24 біт) і є добрим форматом для фотографій, де питання про якість дуже важливий. JPEG підтримує прогресивний формат, який дозволяє майже миттєво бачити зображення, яке покращитися в якість, коли закінчиться завантаження.

На відміну від GIF файлів, веб-дизайнери можуть управляти стислими файлами JPEG, що допускає мати різні рівні якості зображення і розміри файлу.

Переваги JPEG:

Велике стиснення означає більш швидку швидкість завантаження.
Виробляє відмінну якість для фотографій і складних малюнків.
Підтримка 24-бітного кольору.

PNG є відносно недавнім форматом, який був введений як альтернатива для GIF файлів. PNG підтримує до 24 бітний колір, прозорість, переплетення і може містити короткий текстовий опис зображення, яке використовується в пошукових системах.

Переваги PNG:

Долає 8-бітний колір обмежень в GIF
Дозволяє текстовий опис зображень для пошукових систем
підтримує прозорість
Схеми виглядають краще, ніж в JPEG

Векторна графіка

Більшість веб-графіки є растровим зображенням або малюнком, який складається з сітки кольорових пікселів. Ілюстрації повинні бути створені в векторній графіці, яка складається з математичного опису кожного елемента, який становить форми ліній і кольору зображення. Векторна графіка створюється шляхом залучення таких програм, як Adobe Illustrator або CorelDRAW. Векторна графіка повинна бути перетворені в будь-якому форматі GIF, JPEG або PNG для використання на веб-сторінках.

Який формат слід використовувати?

Веб-дизайнер може вибрати або GIF або JPEG формат для більшості застосувань. Але, так як розмір файлів GIF, як правило, невеликий у порівнянні з розміром файлу JPEG, Більшість веб-дизайнерів будуть використовувати формат GIF для фону, коробок, кадрів і будь-яких інших графічних елементів, які виглядають відмінно за допомогою 8-бітного кольору.

Більшість дизайнерів виберуть формат JPEG для зображень, публікування і, де стиск не йде на компроміс візуальному якості зображення.

Як говорилося, HTML на сьогоднішній день є основою для написання будь-якої веб сторінки у Всесвітній павутині. При використанні CSS створення коду на мові HTML докорінно змінюється. Можна попрощатися з перепрофілюванням незграбних HTML тегів просто для того, щоб досягти тих чи інших візуальних ефектів. Про деякі HTML тегів атрибутах, таких як, наприклад, застарілий тег ...
скачати

© Усі права захищені
написати до нас