Застосування графіки для створення HTML сторінок

Про матеріал

Наукова розробка на тему "Застосування графіки для створення HTML сторінок" допоможе учням та вчителям розширити та поглибити свої знання у створенні HTML сторінок. Основну увагу приділено використанню графіки при створенні HTML сторінок.

Перегляд файлу

ЗАСТОСУВАННЯ ГРАФІКИ ДЛЯ СТВОРЕННЯ HTML СТОРІНОК

ЗМІСТ

1.Поняття про HTML

2. Графіка на веб-сторінці

2.1 Основні способи застосування графіки

2.2 Графічні формати web-сторінок

2.3. Графічні фігури в HTML

2.4. Використання графіки в HTML-документах

СПИСОК ДЖЕРЕЛ ТА ЛІТЕРАТУРИ

1. Поняття про HTML

HTML (англ. Hyper Text Markup Language — Мова розмітки гіпертексту) — стандартна мова розмітки документів у Всесвітній павутині. Більшість веб-сторінок створюються за допомогою мови HTML (або XHTML). Документ HTML оброблюється браузером та відтворюється на екрані у звичному для людини вигляді.

HTML є похідною мовою від SGML, успадкувавши від неї визначення типу документу та ідеологію структурної розмітки тексту. HTML разом із CSS та cкриптингом — це три основні технології побудови веб-сторінок.

HTML впроваджує засоби для:

створення структурованого документу шляхом позначення структурного складу тексту: заголовки, абзаци, списки, таблиці, цитати та інше;

отримання інформації із Всесвітньої мережі через гіперпосилання;

створення інтерактивних форм;

включення зображень, звуку, відео, та інших об'єктів до тексту.

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

логотип компанії на діловій сторінці;

графіка для рекламного оголошення;

різні малюнки;

діаграми і графіки;

художні шрифти;

підпис автора сторінки;

застосування графічного рядка як горизонтальна розділова лінія;

застосування графічних маркерів для створення красивих маркірованих списків.

2. Графіка на веб-сторінці

2.1. Основні способи застосування графіки Зараз в Інтернеті залишилися не так багато сторінок без графічних елементів, оскільки за допомогою графіки можна не тільки проілюструвати пропонований матеріал, але і небагато “пожвавити” загальне оформлення розділів.

Фонове зображення. Щоб помістити малюнок на веб-сторінку як фон, потрібно встановити в тезі <BODY> атрибут BACKGROUND= із значенням, що містить ім'я файлу малюнка.Якщо малюнок менший вікна броузера, то він повторюватиметься по горизонталі і по вертикалі. Це відбувається автоматично, і до недавнього часу це не можна було відмінити.Можна вказати або відносне місцеположення файлу малюнка (тобто шлях доступу до нього відносне розташування початкового HTML-файлу), або його повну URL-адресу. Коли фон має яскраво виражену “клітинну структуру”, текст читається не дуже добре: для його сприйняття доводиться напружувати зір, особливо при великих екранних дозволах. Потрібно трохи зменшити розмір фонового малюнка, щоб залишити в нім тільки кольори приблизно одної яскравості.Оскільки текст білий, потрібно для покращення його прочитування підвищити контрастність тексту з фоном. Графічні ілюстрації. Вставити ілюстрації в текст можна з допомогою тега <IMG>, наприклад, от так: <IMG SRC="Images/clavi.gif">. Треба пам'ятати, що картинки завантажуються з мережі завжди набагато повільніше, ніж звичайний текст.Але для читача було б зручніше, якби текст продовжував завантажуватися з картинкою: поки вона довантажується, можна було б щось вже читати. Для цього браузеру потрібно явно вказати розміри майбутньої картинки за допомогою атрибутів WIDTH= і HEIGHT=: Навколо малюнка можна відобразити рамку. Товщина цієї рамки задається як значення атрибуту BORDER=. Якщо ми не хочемо відображати рамку навколо малюнка, то можемо нічого і не указувати, оскільки більшість броузерів за умовчанням рамку не малюють. Але деякі броузери все ж таки це роблять, і “для вірності” непогано б вказати і відсутність рамки теж: <IMG SRC="Images/clavi.gif" WIDTH="300" HEIGHT="200" АLТ="Клавинова" BORDER="0"> . Без гіперпосилань будь-який документ в Інтернеті сприймається набагато нудніше, оскільки відвідувач відразу бачить, що зайшов в безвихідь. Тому обов'язково додайте гіперпосилання скрізь, де це тільки можна.

<A HREF="http://www.yamaha.com">Yamaha</A>

При центруванні звичайного тексту - використовують конструкцію <DIV ALIGN="center">. До речі, тег <IMG> може мати власний атрибут ALIGN=, який управляє розташуванням малюнка щодо тексту. Але якщо малюнок “вбудований” в текст, то де є кілька варіантів його розташування: ALIGN="left" - текст обтікає малюнок, який розташовується зліва; ALIGN="right" - текст обтікає малюнок, який розташовується справа; ALIGN="top" - малюнок розташовується усередині текстового рядка, і його верхня межа співпадає з верхньою межею букв тексту (можна також застосовувати значення "texttop");

ALIGN="middle" - малюнок розташовується усередині текстового рядка, який вертикально вирівнюється по центру малюнка (можна також при міняти значення "absmiddle");

ALIGN="bottom" - малюнок розташовується усередині текстового рядка, і його нижня межа співпадає з нижньою межею букв тексту (можна також застосовувати значення "absbottom" або "baseline").

Крім того, щоб малюнок не дуже “притискався” до тексту, можна залишити між ними трохи “повітря”. Для цього в тезі <IMG> використовують атрибути HSPACE= і VSРАСЕ=, значення яких задають відповідно горизонтальне і вертикальне “поля” малюнка. І ще броузер Internet Explorer (версія 4 і вище) дозволяє за допомогою тега <IMG> завантажувати і проглядати також відеофрагменти у форматі AVI (Video for Windows). Для цього можна встановити атрибут DYNSRC=, як значення якого вказати ім'я AVT-файлу. При цьому можна додатково вказати в атрибуті START=, коли слід починати програвання відео: "FILEOPEN" - відразу після завантаження файлу або "MOUSEOVER" - після наведення покажчика миші на зображення. Атрибут LOOP= дозволяє встановити кількість програвань: "О" означає нескінченне повторення, а інше число указує точну кількість повторів.

2.2. Графічні формати web-сторінок

Основними форматами рисунків, що відображаються програмами браузерів, є GIF (скорочення від «Graphics Interchange Format»), JPEG (скорочення від «Joint Photographic Experts Group») та PNG ( скорочення від «Portable Network Graphics»). GIF – Grafic Interchange Format можна назвати традиційним форматом файлів Web. Він був першим форматом файлів, який підтримували Web-браузери і до цього дня продовжує залишатися основним графічним форматом Web. Це 8-бітний растровий графічний формат, що використовує до 256 чітких кольорів із 24-бітного діапазону RGB. Формат було розроблено компанією CompuServe у 1987 р. і з того часу набув широкої популярності у всесвітній павутинi завдяки своїй відносній простоті та мобільності. Одними із головних особливостей формату є підтримка анімації та прозорості. GIF використовує формат стискування LZW. Таким чином, добре стискуються зображення, рядки яких мають ділянки, що повторюються. Особливо зображення, в яких багато пікселів одного кольору по горизонталі. Метод стискування LZW розроблений в 1978 р. Абрамом Лемпелем і Якобом Зівом, а пізніше допрацьований в США Тері Велчем. Метод LZW, так само, як і RLE, краще діє на ділянках однорідних, вільних від шуму кольорів, він діє набагато краще, ніж RLE, при стискуванні довільних графічних даних, але процес кодування і розпаковування відбувається повільніше. Існує дві специфікації формату GIF — GIF 87a і GIF 89a. Перша специфікація була створена в 1987 р. компанією Compuserve для заміни застарілого формату RLE. GIF став популярним з розвитком Інтернету, оскільки дозволяв використовувати компактніші (за розміром файлу) в порівнянні з іншими форматами картинки на веб-сторінках. Хоча до теперішнього часу формат багато в чому застарілий, і для його заміни створений формат PNG, але він досі широко використовується. У 2011 р. GIF-формат зажадав створення так званих "синемаграфів". GIF спочатку був пропрієтарним форматом, проте термін його патентного захисту витік. У США патент на алгоритм стискування LZW, що використовується в GIF витік 20 червня 2003 р. Термін дії канадського завершився 7 липня 2004 р. Дія патенту для Великобританії, Франції, Німеччини і Італії завершилася 18 червня 2004 р., а для Японії — 20 червня 2004 р. Термін дії останнього патенту на GIF закінчився 11 серпня 2006 р. Існує формат APNG, створений в 2004 р.,який використовує 24-біт кольору і 8-біт напівпрозорості, і працює в браузерах Mozilla Firefox і Opera починаючи з 2007 р. Деякі програми і розширення теж підтримують APNG.

Відмінні характеристики:

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

Іншим найбільш популярним графічним форматом в Web є JPEG – Joint Photographic Experts Group. Він містить 24-розрядну інформацію про колір. Це 16,77 млн. кольорів на відміну від 256 кольорів формату GIF. У JPEG використовується так зване стиснення з втратами. Певна інформація про зображення в процесі стиснення відкидається, але в більшості випадків погіршення якості зображення не завдає шкоди і часто навіть не помітно. Файли, що містять дані JPEG, зазвичай мають розширення. jpeg,. jfif,. jpg,. JPG, або. JPE. Однак з них. jpg найпопулярніше розширення на всіх платформах. MIME-типом є image / jpeg. Алгоритм JPEG дозволяє стискати зображення як з втратами, так і без втрат (режим стискання lossless JPEG). Область застосування. Алгоритм JPEG найбільшою мірою придатний для стиснення фотографій і картин, які містять реалістичні сцени з плавними переходами яскравості і кольору. Найбільшого поширення JPEG отримав в цифровій фотографії та для зберігання і передачі зображень з використанням мережі Інтернет. З іншого боку, JPEG малопридатний для стиснення креслень, текстової і знаковою графіки, де різкий контраст між сусідніми пікселями приводить до появи помітних артефактів. Такі зображення слід зберігати у форматах без втрат, таких як TIFF, GIF, PNG або RAW. JPEG (як і інші методи спотворює стиснення) не підходить для стиснення зображень для багатоступеневої обробки, так як спотворення в зображеннях будуть вноситися щоразу при збереженні проміжних результатів обробки. JPEG не повинен використовуватись і в тих випадках, коли недопустимі навіть мінімальні втрати. У таких випадках може бути рекомендований передбачений стандартом JPEG режим стиснення Lossless JPEG (який, на жаль, не підтримується більшістю популярних кодеків) або стандарт стиснення JPEG-LS. При стисненні зображення перетворюється з колірного простору RGB в YCbCr (YUV). Стандарт JPEG допускає також використання більш ефективного арифметичного кодування, однак через патентні обмеженян (патент на описаний в стандарті JPEG арифметичний QM-кодер належить IBM) на практиці воно використовується рідко. Стандарт JPEG передбачає два основних способи представлення кодованих даних. Найбільш поширеним, підтримуваним більшістю доступних кодеків, є послідовне (sequential JPEG) подання даних, яка передбачає послідовний обхід кодованого зображення поблочно зліва направо, зверху вниз. Над кожним кодуючим блоком здійснюють описані вище операції, а результати кодування поміщаються у вихідний потік у вигляді єдиного «скана», тобто масиву кодованих даних, відповідного послідовно пройденого («просканувати») зображенню. Основний або «базовий» (baseline) режим кодування допускає тільки таке подання. Розширений (extended) режим поряд з послідовним допускає також прогресивне (progressive JPEG) подання даних.У разі progressive JPEG стислі дані записуються в вихідний потік у вигляді набору сканів, кожен з яких описує зображення повністю з все більшим ступенем деталізації. Файл JPEG містить послідовність маркерів, кожен з яких починається з байта 0xFF, що свідчить про початок маркера, і байти - ідентифікатоар. Деякі маркери складаються тільки з цієї пари байтів, інші ж містять додаткові дані,складаються з двухбайтового поля з довжиною інформаційної частини маркера (включаючи довжину цього поля, але за вирахуванням двох байтів початку маркера тобто 0xFF і ідентифікатора) і власне даних. До недоліків стиснення за стандартом JPEG слід віднести появу на відновлених зображеннях при високих ступенях стиснення характерних артефактів: зображення розсипається на блоки розміром 8x8 пікселів в областях з високою просторовою частотою виникають артефакти у у вигляді шумових ореолів. Слід зазначити, що стандарт JPEG передбачає використання спеціальних фільтрів для придушення блокових артефактів, але на практиці подібні фільтри, незважаючи на їх високу ефективність, практично не використовуються. Фотографії або будь-які зображення з плавними градаціями кольорів краще за все зберігати в JPEG-форматі, тому що він пропонує вищу якість зображень, що вміщуються у файл меншого об'єму. Проте, JPEG не є кращим рішенням для графічних зображень з одноколірними областями, оскільки цей формат має тенденцію псувати кольори цятками і кінцевий файл, як правило, буде дещо більшим та гіршої якості, ніж GIF-файл для того ж зображення. PNG (Portable Network Graphics) — растровий формат збереження графічної інформації, що використовує стиснення без втрат. PNG був створений для заміни формату GIF, графічним форматом, який не потребує ліцензії для використання. Зазвичай файли формату PNG мають розширення .png і використовують позначення MIME-типу image/png. Формат PNG зберігає інформацію у стиснутому вигляді, при чому стиснення проводиться без втрат якості, на відміну від формату JPEG. Формат PNG спроектований для заміни застарілого і простішого формату GIF, а також у деякій мірі, для заміни складнішого формату TIFF. Формат PNG характеризується більш сильним рівнем стиснення для файлів з великою кількістю кольорів ніж GIF, але різниця складає близько 5-25%, чого недостатньо для абсолютної переваги формату, тому, що маленькі картинки GIF стискає щонайменше не гірше. Існує також одна особливість GIF, яку не повторює PNG — це можливість збереження множинного зображення, особливо мультиплікації. Призначення PNG — зберігати лише одне зображення. Для передачі множинних зображень використовується розширений формат MNG, опублікований в середині 1999 р. і який підтримується у різних прикладних програмах. Патент на формат GIF належить компанії CompuServe, що обмежує його використання у вільному програмному забезпеченні. До того ж у основі методу стиснення, що застосовується до графічних файлів при збереженні їх у GIF, лежить алгоритм стиснення LZW, патент на який належить компанії Unisys. Слід також відмітити, що строк дії патенту на формат GIF витік 11 серпня 2006 р.PNG використовує відкритий, не запатентований алгоритм стиснення Deflation, безплатні реалізації якого доступні в Internet. Цей же алгоритм використовують і багато інших програм компресії даних у тому числі PKZIP та GNU GZIP. Проблема підтримки 24-бітної (повної) прозорості зображення формату PNG у браузері Internet Explorer виробництва Microsoft, розв'язана компанією-виробником цього програмного продукту у сьомій його версії. Незважаючи на це, існує ряд прийомів і технік, які дозволяють веб-майстрам уникнути цієї проблеми, застосовуючи різні скрипти і функції. Щодо історії формату, то вперше PNG запропонував Томас Боутелл у ряді конференцій Usenet 4 січня 1995 р. Його пропозиція полягала у створенні вільного формату, який би не був гіршим за GIF і мав ряд переваг. Одразу через три тижні після публікації були розроблені три версії нового формату. Спочатку він мав назву PBF (Portable Bitmap Format), а нинішню назву отримав 23 січня 1995 р. Вже в грудні того ж року специфікація PNG версії 0.26 була розглянута консорціумом W3C, а з виходом 1 жовтня 1996 р. версії 1.0 PNG був рекомендований у якості повноправного графічного формату, що використовується у комп'ютерних мережах.Це третій графічний формат, що конкурує за постійне використання в Web.Крім того, файли PNG мають деякі чудові функції, наприклад, вбудоване управління коефіцієнтом гамма, і змінні рівні прозорості (це дозволяє показувати малюнок фону крізь відкидані м'які тіні).

2.3. Графічні фігури в HTML

Щоб підготувати браузер до сприйняття графічних елементів треба дещо помістити в початок HTML-файлу:

<html

xmlns:v="urn:schemas-microsoft-com:vml">

<head>

<style>

v\:* {behavior:url(#default#VML); position:absolute;}

</style>

</head>

<div>

...Тут графіка...

</div>

</body>

</html>

Графічні елементи:

1. Лінія задається тегом <V:LINE>. Має закриваючий тег.
Атрибути: FROM. Координати початку лінії в пунктах. TO. Координати кінця лінії в пунктах. STROKEWEIGTH. Ширина лінії в пунктах. За замовчуванням - тонка лінія. STROKECOLOR. Колір лінії. За замовчуванням - чорний.

Наприклад:

<v:line from="0,0" to="200,60"

strokeweight="1.5pt" strokecolor="#00FF00">

</v:line>

Позначення пунктів (pt) необхідно в значенні атрибуту STROKEWEIGTH, але необов'язково в FROM і TO.

2.Ламана лінія задається тегом <V:POLYLINE>. Має закриваючий тег.
Атрибути: POINTS. Координати точок лінії в пунктах. STROKEWEIGTH. Ширина лінії в пунктах. STROKECOLOR. Колір лінії. FILLED. Заливка. Приймає значення "f" (немає заливки) або "t" (є заливка). За замовчуванням "t". FILLCOLOR. Колір заливки. За замовчуванням - білий.

Наприклад:

<v:polyline points="0,5,300,50,500,10,600,40"

strokeweight="3pt" strokecolor="#FF0000"

filled="f">

</v:polyline>

3.Прямокутник задається тегом <V:RECT>. Має закриваючий тег.
Атрибути: STYLE. Задає відступ зліва (MARGIN-LEFT), відступ зверху (MARGIN-TOP) для лівого верхнього кута прямокутника, а також ширину (WIDTH) і висоту (HEIGHT). STROKEWEIGTH, STROKECOLOR, FILLED, FILLCOLOR. Аналогічні однойменним атрибутам тега <V:POLYLINE>.

Наприклад:

<v:rect style="margin-left:5;margin-top:5;width:350;height:40"

fillcolor="yellow"strokeweight="1.5pt"

strokecolor="fuchsia">

</v:rect>

4.Еліпс задається тегом <V:OVAL>. Має закриваючий тег.
Атрибути: STYLE. Задає відступ зліва (MARGIN-LEFT), відступ зверху (MARGIN-TOP) для лівого верхнього кута прямокутника, описаного навколо еліпса, а також його ширину (WIDTH), і висоту (HEIGHT). STROKEWEIGTH, STROKECOLOR, FILLED, FILLCOLOR. Аналогічні однойменним атрибутам тега <V:RECT>.

Наприклад:

<v:oval style="margin-left:100;margin-top:2;width:100;height:50"

fillcolor="silver" strokeweight="1.5pt"

strokecolor="red">

</v:oval>

5.Види ліній задаються тегом <V:STROKE>. Поміщається в контейнер <V:LINE> ... </ V: LINE>, <V:POLYLINE> ... </ V: POLYLINE> і т.д. Немає закриваючого тега, але обов'язково перед закриваючою кутовою дужкою ставиться знак /.

Атрибути: DASHSTYLE. Вид штриховий лінії. Може приймати значення: "DASH" (штрих), "LONGDASH" (довгий штрих), "DASHDOT" (штрих-пунктир), "LONGDASHDOT" (довгий штрих-пунктир). LINESTYLE. Вид подвійний лінії. Може приймати значення: "THINTHIN" (дві тонкі лінії), "THINTHICK" (тонка лінія над товстої), "THICKTHIN" (тонка лінія під товстої), "THICKBETWEENTHIN" (товста лінія між тонкими). Треба мати на увазі, що кожен з цих видів потребує також завдання певної сумарної ширини лінії. STARTARROW. Вид стрілки на початку лінії. Може приймати значення: "CLASSIC" (звичайна стрілка), "OPEN" (тонка стрілка), "BLOCK" (трикутна стрілка), "OVAL" (овальчік), "DIAMOND" (ромб). STARTARROWWIDTH. Ширина стрілки. Може приймати значення: "WIDE" (широка), "NARROW" (вузька). За замовчуванням - середня ширина. STARTARROWLENGTH. Довжина стрілки. Може приймати значення: "LONG" (довга), "SHORT" (коротка). За замовчуванням - середня довжина. ENDARROW, ENDARROWWIDTH, ENDARROWLENGTH. Вид, ширина і довжина стрілки на кінці лінії. Аналогічні атрибутам STARTARROW, STARTARROWWIDTH, STARTARROWLENGTH.

Наприклад:

<v:line from="30,3" to="600,3"

strokeweight="1.5pt" strokecolor="#0000FF">

<v:stroke dashstyle="Dash"/>

</v:line>

<v:line from="30,3" to="600,3"

strokeweight="1.5pt" strokecolor="#00FF00">

<v:stroke dashstyle="DashDot"/>

</v:line>

6.Види заливок задаються тегом <V:FILL>. Поміщається в контейнери <V:POLYLINE> ... </ V: POLYLINE>, <V:RECT> ... </ V: RECT> і т.д. Немає закриваючого тега, але обов'язково перед закриваючою кутовою дужкою ставиться знак /.

Атрибути: TYPE. Тип заливки. Може приймати значення: "PATTERN" (візерунок), "TILE" (текстура), "GRADIENT" (градієнтна заливка). SRC. Ім'я gif-файла зразка заливки. Для візерунка і текстури. COLOR2. Колір фону. FOCUS. Центр розповсюдження заливки. Може приймати значення від "-100%" до "100%". Для градієнтної заливки. ANGLE. Кут нахилу заливки. Може приймати значення від "-90" до "90". Для градієнтної заливки.

Приклади:

<v:rect style="margin-left:5;margin-top:2;width:350;height:40"

fillcolor="#FF0000"strokeweight="1.5pt"strokecolor="#00FF00">

<v:fill src="fill1.gif" type="pattern" color2="#00FF00"/>

<v:rect style="margin-left:5;margin-top:2;width:350;height:40">

<v:fill src="fill2.gif" type="tile"/>

</v:rect>

2.4. Використання графіки в HTML-документах

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

- багато браузери підтримують тільки графічні формати GIF і JPEG;

- файли, що містять графіку, передаються повільно;

- деякі користувачі не мають графічних браузерів, або має намір відключають завантаження зображень;

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

Атрибут	Призначення
SRC="файл"	Задає URL-адресу зображення (можна вказувати як абсолютний, так і відносний URL-адреса; якщо файл із зображенням знаходиться в тій же директорії, що і HTML-документ, то досить просто вказати ім'я файлу); цей атрибут є обов'язковим
ALT="текст"	Задає альтернативний текст для браузерів, що не підтримують роботу з зображеннями
ALIGN="тип"	Задає розташування картинки щодо тексту, тип може приймати наступні значення: ТОР, MIDDLE, BOTTON, LEFT, RIGHT
BORDER=n	Встановлює товщину обрамлення навколо зображення у пікселях
HEIGHT=n (%)	Встановлює висоту зображення в пікселах або у відсотках від висоти вікна браузера
WIDTH=n (%)	Встановлює ширину зображення в пікселах або у відсотках
HSPACE=n	Задає вільний простір зліва і праворуч від зображення (у пікселях)
VSPACE=n	Здається вільний простір над і під зображенням (у пікселях)

Зверніть увагу, що ширина і висота зображення можуть бути задані не тільки в пікселах, а й у відсотках від розмірів вікна браузера. Багато компонентів, що включаються до складу Web-сторінок (зображення, таблиці, аплети і т. д.), дозволяють задавати розмір у відносних одиницях (тобто в відсотках). Це дозволяє зменшити залежність зовнішнього вигляду документа від поточних установок конкретного браузера і особливостей операційної системи. Рекомендується задавати тільки один з атрибутів пари "ширина-висота" зображення, інакше малюнок може бути непропорційно деформований і змінить свій вигляд. Оскільки зображення Web існують лише на екрані дисплея, буде технічно правильно вимірювати їх роздільність в пікселях на дюйм (ppi – pixels per inch). Інша одиниця вимірювання роздільності – кількість точок на дюйм (dpi – dots per inch) відноситься до роздільності друкарських зображень і залежить від роздільності друкуючого пристрою. Але, оскільки реальні розміри графіки залежать від роздільності дисплею, вимірювання в дюймах стає для Web-застосувань неприйнятним. Єдиною значущою одиницею вимірювання стає піксель. В процесі створення графіків на Web можна взагалі не використовувати дюйми. Важливим є розмір зображення у порівнянні з іншими зображеннями на сторінці і загальним розміром вікна браузера. Без сумніву, саме графіка зробила Web таким, який він є сьогодні, але потрібно знати, що багато користувачів переживають до графіки в Web почуття на межі любові і ненависті. Не варто забувати, що графіка збільшує час, що необхідний для передачі по мережі Web-сторінки; великий об'єм графіки означає істотний час завантаження, який випробовує терпіння читача, особливо якщо він додзвонюється з використанням стандартного модемного з'єднання. В цьому відношенні для Web-дизайнера існує єдине найбільш важливе правило: розмір файлу графічного зображення повинен бути мінімально можливим. Створення зображень, призначених для передачі по мережі,ставить відповідальність на розробників, серйозно відноситися до проблеми часу завантаження.

СПИСОК ДЖЕРЕЛ ТА ЛІТЕРАТУРИ:

1. http://www.victoria.lviv.ua/html/gim/8.html#6 – Національний університет «Львівська політика, Курс лабораторних робіт "Глобальні інформаційні мережі"

http://iem.arnit.com.ua›laboratory/robota…html_teory.html – Київський славістичний університет Інститут Економіки та Управління Економічна інформатика, Лабораторна робота
http://wiki.fizmat.tnpu.edu.ua/index.php/Розміщення_графічних_зображень_на_веб-сторінках - Фізмат Вікіпедія
http://skater.in.ua/3.htm - створити свій сайт
http://htmlweb.ru/html/graph.php - Web-технологии, Графика в HTML

doc

Завантажити

Зберегти на потім

Додав(-ла)

Данека Марія Володимирівна

Пов’язані теми

Інформатика, Матеріали до уроків

Додано

4 травня 2020

Переглядів

3518

Оцінка розробки

Відгуки відсутні