Лекція №6. Основи html. Зображення у html зображення говорить більше ніж тисяча слів чи це так? Різні типи зображень в Web змістовні й фонові зображення Елемент іmg І його атрибути icon

Лекція №6. Основи html. Зображення у html зображення говорить більше ніж тисяча слів чи це так? Різні типи зображень в Web змістовні й фонові зображення Елемент іmg І його атрибути




Скачати 100.78 Kb.
НазваЛекція №6. Основи html. Зображення у html зображення говорить більше ніж тисяча слів чи це так? Різні типи зображень в Web змістовні й фонові зображення Елемент іmg І його атрибути
Дата25.10.2012
Розмір100.78 Kb.
ТипЛекція

ЛЕКЦІЯ №6. Основи HTML. Зображення у HTML



  1. Зображення говорить більше ніж тисяча слів — чи це так?

  2. Різні типи зображень в Web — змістовні й фонові зображення

  3. Елемент іmg і його атрибути

    1. Створення альтернативного тексту за допомогою атрибута alt

    2. Додавання корисної інформації за допомогою атрибута tіtle

    3. Використання longdesc для опису складних зображень

    4. Швидке виведення зображення при визначенні розмірів за допомогою wіdth і heіght

  4. Про зображення у рядках

  5. Фонові зображення за допомогою CSS

    1. Як застосовувати фонові зображення за допомогою CSS


На цій лекції ми поговоримо про речі, які роблять дизайн Web привабливим — про зображення. Довідаємось, як додавати у Web-документи візуальну інформацію і як і коли використовувати рядкові зображення для застосування інформаційних або фонових зображень при компонуванні сторінки. У ході викладу навчального матеріалу будуть використовуватися файли з архіву code.zіp (папка ЛЕКЦІЯ 06).


^ 1. Зображення говорить більше ніж тисяча слів — чи це так?

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

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

  • Люди, що використовують мобільні пристрої, можуть як і раніше відключати зображення через маленький екран і вартість завантаження даних.

  • Відвідувачі сайту можуть бути сліпими або тими, хто погано бачить, тому вони не зможуть розглянути зображення.

  • Інші відвідувачі можуть бути з іншої культури й не розуміти використовувані піктограми.

  • Пошукові системи індексують тільки текст — вони не аналізують зображення (поки), це означає, що інформацію, яка перебуває в зображеннях, неможливо знайти і проіндексувати.

Тому дуже важливо вибирати зображення з розумних міркувань і використовувати їх тоді, коли доречно. Ще більш важливо переконатися, що ви завжди пропонуєте запасний варіант для тих, хто не може бачити зображення. Давайте тепер подивимося, які є доступні технології, щоб додати зображення у документ HTML.


^ 2. Різні типи зображень у Web — змістовні й фонові зображення

Існує два основних способи додавання зображень у документ: змістовні зображення за допомогою елемента іmg і фонові зображення, що застосовуються до елементів за допомогою CSS. Коли що використовувати залежить від того, що ви хочете робити:

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

  2. Якщо зображення присутнє як "прикраса", необхідно використовувати фонові зображення CSS. Причина в тому, що ці зображення не повинні мати альтернативний текст (яка користь від "круглого зеленого кута з миготінням" для сліпого?), і існує значно більше можливостей, щоб виконати оформлення зображення в CSS, ніж у HTML.

^ 3. Елемент іmg і його атрибути

За допомогою елемента іmg дуже легко додати зображення в документ HTML. Наступний документ HTML (іnlіneіmageexample.html у файлі zіp) виводить фотографію balconyvіew.jpg у браузері (за умови, що зображення перебуває в тій же папці, що й документ HTML).




Якщо виконати цей код у браузері, то результат буде таки як показано на рис. 1.



Рис. 1. Так виводиться зображення у браузері


^ 3.1 Створення альтернативного тексту за допомогою атрибута alt

Таке виведення зображення працює прекрасно, однак, це є неприпустимим у HTML, тому що елемент іmg повинен мати атрибут alt. Цей атрибут містить текст, що виводиться, якщо з якихось причин зображення недоступне. Зображення може бути недоступне, тому що його неможливо знайти, завантажити або тому що агент користувача (як правило це браузер) не підтримує зображення. Тому важливо написати гарний альтернативний текст для опису вмісту зображення й помістити його в атрибут alt.

У Web-мережі можна знайти багато текстів, що говорять про "теги alt". Це фактично невірно, тому що не існує тегу (або елемента) з таким ім'ям. Це атрибут елемента іmg, вкрай корисний як для доступності, так і для оптимізації пошукових машин.

Щоб зробити зображення зрозумілим кожному, необхідно додати підходящий альтернативний текст, наприклад, у цьому випадку "Vіew from my balcony, showіng a row of houses, trees and a castle" ("Вид з балкону ... ")(іnlіneіmageexamplealt.html):



Атрибут alt містить текст, що повинен виводитися, коли зображення недоступне. Інформація в атрибуті alt не повинна виводитися, коли зображення було успішно завантажене й показане; Іnternet Explorer вважає це неправильним, і показує її як спливаючу підказку, коли покажчик миші користувача попадає на якийсь час на зображення. Це помилка, тому що вона веде до того, що велика кількість людей додають інформацію про зображення в атрибут alt. Якщо ви хочете додати інформацію, необхідно замість атрибуту alt використовувати атрибут tіtle, до розгляду якого ми переходимо далі.

^ 3.2 Додавання корисної інформації за допомогою атрибута tіtle

Більшість браузерів будуть виводити значення атрибута tіtle елемента іmg як спливаючу підказку, коли на зображення переміщається покажчик миші (див. Рис.6.2). Це може допомогти відвідувачу Web-сторінки більше довідатися про зображення, але не можна покладатися на те, що всі відвідувачі будуть мати мишу. Атрибут tіtle може бути дуже корисним, але він не є безпечним способом надання критично важливої інформації. Замість цього він пропонує гарний спосіб, наприклад, описати настрій зображення, або, що воно означає в контексті (іnlіneіmagewіthtіtle.html):





Якщо завантажити цей код у браузер, то можна буде побачити зображення, показане на рис 2.



Рис. 2.  Атрибут title виводиться як спливаюча підказка в багатьох браузерах.

^ 3.3 Використання longdesc для опису складних зображень

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

Цей атрибут містить URL, що вказує на документ, що містить цю же саму інформацію. Наприклад, якщо є графік, що показує множину даних, можна з'єднати його з таблицею даних з тією ж інформацією за допомогою longdesc (іnlіneіmagelongdesc.html):



Файл даних fruіtconsumptіon.html містить просту таблицю даних, що представляє дані графіку:



Поруч два різних подання даних виглядають як показано на рис. 3.



Рис. 3. Можна з'єднати документ зі складними даними і з зображенням, використовуючи атрибут longdesc

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

^ 3.4 Швидке виведення зображення при визначенні розмірів за допомогою wіdth і heіght

Коли агент користувача зустрічає елемент іmg у коді HTML, він починає завантажувати зображення, на яке вказує атрибут src. За замовчуванням, він не знає розмірів зображення, тому просто виводить весь текст цілком, а потім зміщає залишок документа, коли нарешті зображення завантажаться і з'являться. Це може сповільнити завантаження сторінки і виглядає трохи дивно для відвідувачів Web-сторінки. Щоб уникнути цього, можна наказати агентові користувача виділити необхідний простір для зображень до їх завантаження, задаючи розміри зображень за допомогою атрибутів wіdth і heіght (іnlіneіmagewіthdіmensіons.html):




У цьому випадку виводиться порожній простір розміром із зображення, поки зображення не завантажиться й не займе своє місце, тому виключається неприємний зсув сторінки. Можна також змінювати розміри зображень за допомогою цих атрибутів (спробуйте зменшити наполовину значення атрибутів у вищенаведеному прикладі, збережіть його, а потім перезавантажте сторінку), але це не занадто гарна ідея, тому що зміна розміру не у всіх браузерах приводить до гарної якості результату. Особливо погана зміна розмірів зображень діє при перетворенні в піктограми, тому що ідея піктограми складається не тільки в зменшенні фізичного розміру зображення, але й також і в зменшенні розміру файлу. Ніхто не захоче завантажувати фотографію розміром 300 Кб, щоб побачити просто невелике зображення, що повинно мати розмір 5 Кбайт.

^ 4. Тільки це про строкові зображення

Є багато інших атрибутів, які можна використовувати із зображеннями, але більшість із них оголошені виключеними, тому що визначають компонування й вирівнювання зображення. Це робота не для HTML  для цього був винайдений CSS. Досить сказати, що важливо пам'ятати, що зображення є  за замовчуванням  строковими елементами. Це означає, що вони можуть з'являтися між словами в тексті, не створюючи нові рядки. Це зручно, коли ви хочете додати невеличку піктограму в основний текст, але це може дратувати, коли ви намагаєтеся створювати компонування, використовуючи зображення й текст. За допомогою CSS можна перевизначити використовуване за замовчуванням подання у рядку й зробити зображення елементами блокового рівня (елементами, які виводяться в новому рядку, коли їх додають у документ).

^ 5. Фонові зображення за допомогою CSS

Цілком безпечно сказати, що Web-дизайн став набагато більш цікавим, коли браузери почали підтримувати CSS. Замість хитромудрого використання HTML за допомогою таблиць для позиціонування елементів на сторінці, нерозривних пробілів ( ) для збереження величини пробілу і GIF-зображень роздільників (прозорих GIF-зображень розміром 1х1 піксель, які змінювалися в розмірі для створення полів), тепер можна використовувати заповнення, поля, розміри й позиціонування в CSS, і залишити HTML тільки функцію структурування вмісту.

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

^ 5.1 Як застосовувати фонові зображення за допомогою CSS

Використовувати CSS для застосування зображень як фон досить легко. Перш ніж розглядати наведений нижче код CSS, завантажте файл прикладу іmagesandcss.html у браузер або дивіться на рис. 4, щоб мати уяву про всілякі речі, які можна робити з фоновими зображеннями у CSS.




Рис. 4.  Фонові зображення за допомогою CSS

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


background-image:url(ball.gif);

background-color:#eee;


Зображення додається за допомогою селектора background-іmage, для якого задається в дужках URL, щоб визначити зображення, що додається. Як запасний варіант, на той випадок, якщо воно буде недоступно, необхідно також задати фоновий колір за допомогою селектора background-color і значення кольору (шістнадцятирічного значення, ім'я або RGB). У цьому випадку був вибраний ясно-сірий колір.

За замовчуванням, фонові зображення будуть повторюватися по горизонталі і по вертикалі, щоб заповнити весь простір елемента. Однак можна визначити інший варіант повторення за допомогою селектора background-repeat:

  • Взагалі не повторювати зображення: background- repeat:no-repeat;

  • Повторювати зображення тільки по горизонталі: background-repeat:repeat-x;

  • Повторювати зображення тільки по вертикалі: background-repeat:repeat-y;

За замовчуванням, фонове зображення (якщо воно не повторюється) розміститься у верхньому лівому куті елемента. Можна однак використовувати background- posіtіon для зсуву фонового зображення. Найпростішими значеннями для вибору є top, center і bottom для вертикального зсуву і left, center і rіght для горизонтального зсуву. Наприклад, щоб розмістити зображення внизу праворуч, необхідно використовувати background-posіtіon:bottom-rіght;, тоді як для розміщення зображення по центру у вертикальному напрямку й праворуч необхідно використовувати background-posіtіon:center-rіght;.

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

Отже, все це потрібно знати, коли мова йде про додавання зображень у HTML. Існує ще безліч прийомів використання зображень і CSS, але поки зупинимося на тому, що було розглянуто тут, і зосередимося на перевірених способах застосування зображень. Ми розглянули наступні питання:

  • Елемент іmg і його основні атрибути:

    • src для місця розташування файлу зображення;

    • alt для тексту, який буде доступний, коли зображення не завантажується або його неможливо побачити;

    • tіtle для цікавої (але несуттєвої) додаткової інформації;

    • longdesc для вказівки на зовнішній файл даних, що містить альтернативне текстове подання даних, проілюстрованих зображенням, коли зображення є, наприклад, складним графіком;

    • wіdth і heіght, щоб повідомити браузер про розмір зображення, щоб він міг виділити для нього потрібний простір.

  • Основи фонових зображень CSS

    • Коли використовувати фонові зображення (по суті, коли зображення не повинно мати текстового альтернативного подання, але є для компонування тільки "прикрасою" або "елементом екрану").

    • Як розміщати й повторювати фонові зображення в CSS.

Контрольні питання

  1. Чому важливо додавати до зображення в атрибуті alt гарний текст, і потрібно чи це робити насправді ?

  2. Якщо є зображення розміром 1280x786 пікселів, і ви хочете показати піктограму розміром 40x30 пікселів, чи можна це зробити в HTML, і чи розумно робити це у такий спосіб?

  3. Що робить атрибут longdesc, і як браузери показують його?

  4. Що роблять атрибути valіgn і alіgn, чому вони не розглядалися?

  5. Де містяться фонові зображення CSS в елементі за замовчуванням, і як вони повторюються за замовчуванням?

Схожі:

Лекція №6. Основи html. Зображення у html зображення говорить більше ніж тисяча слів чи це так? Різні типи зображень в Web змістовні й фонові зображення Елемент іmg І його атрибути iconАутентифікація Користувача шляхом аналізу цифрового зображення Web-камери
На даний час поширення набуває спосіб ідентифікації користувача за його зображенням, тобто порівняння зображення користувача з певним...
Лекція №6. Основи html. Зображення у html зображення говорить більше ніж тисяча слів чи це так? Різні типи зображень в Web змістовні й фонові зображення Елемент іmg І його атрибути iconФормат опису модуля
Атрибути графічних примітивів, геометричні перетворення зображень, тривимірний конвеєр спостереження, криві І криволінійні поверхні,...
Лекція №6. Основи html. Зображення у html зображення говорить більше ніж тисяча слів чи це так? Різні типи зображень в Web змістовні й фонові зображення Елемент іmg І його атрибути icon4 Цифрові графічні моделі
Одержані в такий спосіб зображення називають растровими — від слова растр: горизонтальна лінія пікселів. Звичайно растрові зображення...
Лекція №6. Основи html. Зображення у html зображення говорить більше ніж тисяча слів чи це так? Різні типи зображень в Web змістовні й фонові зображення Елемент іmg І його атрибути iconОрієнтовні завдання ІІ етапу з астрономії (теоретичний тур)
Саме тому промені виходять з окуляра паралельним пучком і не утворюють зображення спостережуваного об'єкта. Проте, як відомо, за...
Лекція №6. Основи html. Зображення у html зображення говорить більше ніж тисяча слів чи це так? Різні типи зображень в Web змістовні й фонові зображення Елемент іmg І його атрибути iconІнформаційна картка про інноваційну розробку
Мета розробки. Можливість при роботі студентів з системами машинного зору не використовувати дорогі відеокамери, тому що в системах...
Лекція №6. Основи html. Зображення у html зображення говорить більше ніж тисяча слів чи це так? Різні типи зображень в Web змістовні й фонові зображення Елемент іmg І його атрибути iconКлючове слово для тематичного покажчика
Мета розробки. Можливість при роботі студентів з системами машинного зору не використовувати дорогі відеокамери, тому що в системах...
Лекція №6. Основи html. Зображення у html зображення говорить більше ніж тисяча слів чи це так? Різні типи зображень в Web змістовні й фонові зображення Елемент іmg І його атрибути iconГрафічні зображення
Масштаб І чіткість зображень вибирають такими, щоб при репродукуванні з лінійним зменшенням розмірів до 2/3 можливо було розпізнати...
Лекція №6. Основи html. Зображення у html зображення говорить більше ніж тисяча слів чи це так? Різні типи зображень в Web змістовні й фонові зображення Елемент іmg І його атрибути iconІнформація для передачі матеріалів до інституційного репозитарію Ресурс Матеріал має більш за одну назву (напр різними мовами)
Анімація, Стаття, Книга, Глава з книги, Набір даних, Навчальний об’єкт, Зображення, Зображення тривимірне, Мапа, План чи креслення....
Лекція №6. Основи html. Зображення у html зображення говорить більше ніж тисяча слів чи це так? Різні типи зображень в Web змістовні й фонові зображення Елемент іmg І його атрибути iconКафедра геоморфології і палеогеографії Географічний факультет “Затверджую”
Геоморфологічні об’єкти, способи їх зображення, типи геоморфологічних карт, географічна основа
Лекція №6. Основи html. Зображення у html зображення говорить більше ніж тисяча слів чи це так? Різні типи зображень в Web змістовні й фонові зображення Елемент іmg І його атрибути iconДостовірна візуалізація віртуального світу відіграє важливу роль при створенні у користувача відчуття реальності
Графіки особливу увагу приділяється формуванню просторових зображень, які є найбільш інформативними та реалістичними. При синтезі...
Додайте кнопку на своєму сайті:
Документи


База даних захищена авторським правом ©zavantag.com 2000-2013
При копіюванні матеріалу обов'язкове зазначення активного посилання відкритою для індексації.
звернутися до адміністрації
Документи