Інформатика.
 

Урок 14                                                                                           Інформатика 10 (ІКТ)

Практична робота № 7 «Створення найпростіших малюнків»

2. Практична робота № 7 «Створення найпростіших малюнків»

1. Запустіть CorelDRAW.  Ви маєте намалювати бабку, пока­зану на рисунку.

2.  Для малювання голови бабки виберіть інструмент Эллипс через З точки (Еліпс через 3 точки) і на панелі властивостей клацніть кнопку Эллипс (Еліпс). Встановіть вказівник миші в початок першої умовної осі еліпса й, утримуючи кнопку миші натиснутою, проведіть цю вісь. Відпустіть кнопку та розтягніть еліпс відповідно до розміру другої осі.

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

4. Виберіть інструмент Эллипс (Еліпс), на панелі властивостей клацніть кнопку Эллипс (Еліпс) і намалюйте око. На панелі властивостей задайте товщину контуру — 1,411 мм.

5. Знову перейдіть на палітру кольорів і, клацнувши лівою кноп­кою миші зразок зеленого кольору, зафарбуйте серединку ока, а потім, для фарбування його контуру, правою кнопкою клац­ніть зразок чорного кольору.

6. Вусики можна намалювати за допомогою інструмента Эллипс (Еліпс) в режимі Дуга (Дуга). На панелі властивостей клацніть кнопку Дуги и сектора по часовой стрелке (Дуги та сектори за годинниковою стрілкою), в будь-якому місці робочого поля намалюйте дугу, на панелі властивостей введіть у поля почат­кового та кінцевого кутів значення 170 і 270. Це буде перший вусик бабки.

7.   Намалюйте другий вусик, задавши для дуги кути 130° і 215°.

8. Виділіть спочатку перший вусик, клацнувши його мишею, та прилаштуйте до голови бабки. Потім прилаштуйте другий вусик.

9. Ще раз виберіть інструмент Эллипс через 3 точки (Еліпс через З точки) і на панелі властивостей клацніть кнопку Эллипс (Еліпс). Помістіть курсор у те місце голови бабки, де має бути початок тільця, натисніть ліву кнопку миші та проведіть вісь еліпса довжиною, що відповідає довжині тільця, відпустіть кнопку миші та курсором скоригуйте ширину тільця.

10.Ще раз виберіть інструмент Эллипс через 3 точки (Еліпс через З точки) і на панелі властивостей клацніть кнопку Эллипс (Еліпс). Помістіть курсор у те місце тільця бабки, де має бути початок крила, натисніть ліву кнопку миші та проведіть вісь еліпса довжиною, що відповідає довжині крила, відпустіть кнопку миші та курсором скоригуйте ширину крила.

11. Застосовуючи ті самі прийоми, намалюйте ще три крила.

12. Намалюйте лапки бабки.

3. Самостійна робота

За допомогою графічного редактора Corel Draw, застосовуючи інструменти для створення ліній, еліпс через три точки та градієнтну заливку, виконай малюнок «Комарик».

5. Домашнє завдання.

1. Відпрацювати навички роботи з графічними примітивами.
2. Підготуватись до практичного опитування.
3. Скориставшись досвідом, отриманим під час виконання впра­в на попередньому уроці, намалюйте шахову фігуру «тура», показану на рисунку.

9 клас                                                                                                               Урок 3-4

Типова архітектура персонального комп’ютера.  Класифікація та основні характеристики процесорів. Принцип дії та основні характеристики  найбільш поширених видів запам’ятовуючих пристроїв: дискових накопичувачів, оперативної та флеш-пам’яті.Мета.

Хід уроку

4. Вивчення нового матеріалу.

Поняття про архітектуру і принципи функціонування комп’ю­тера

На рисунку 2.1 подано зовнішній вигляд типового сучасного комп’ю­тера, призначеного для одночасної роботи з ним одного користувача. Такі комп’ютери називають персо­нальними комп’ютерами (ПК).

До складу ПК, зображеного на рисунку 2.1, входять:

• системний блок з розміщеними в ньому:
• процесором - пристроєм для керування роботою комп’ютера й опра­цювання даних;
• пам’яттю - пристроєм для запам’ятовування даних та деякими іншими пристроями;
• клавіатура і маніпулятор «миша» - пристрої для введення даних;
• монітор і звукові колонки - пристрої для виведення даних.

Роботу комп’ютера можна проілюструвати за допомогою схеми, пода­ної на рисунку 2.2.

За допомогою пристроїв введення дані і програми їх опрацювання по­трапляють у пам’ять комп’ютера. З пам’яті комп’ютера дані надсилають­ся до процесора (англ. Central Processing Unit - CPU - модуль централь­ного процесора). Опрацювання даних здійснює арифметично-логічний пристрій. Керує процесами опрацювання даних, їх збереженням і переда­ванням пристрій керування.

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

Дана схема описує логічну орга­нізацію роботи комп’ютера, яку на­зивають архітектурою комп’ютера.

Сучасна архітектура комп’ютерів базується на принципах, які вперше були сформульовані британським ученим Чарльзом Беббіджем (1791-1871) (рис. 2.3), а потім роз­винені й обґрунтовані американ­ським ученим Джоном фон Нейма­ном (1903-1957) (рис. 2.4).

Сформулюємо і коротко пояснимо принципи функціонування сучасних  комп'ютерів.

Принцип двійкового кодування полягає в тому, що всі дані подаються у вигляді двійкових кодів.

Принцип програмного керування полягає в тому, що всі операції з опрацю­вання даних здійснюються відповідно до програм і ці програми розміщуються в пам’яті комп’ютера.

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

Принцип однорідності пам’яті полягає в тому, що всі дані, у тому числі й програми, зберігаються в одному і тому самому запам’ятовуючому пристрої.

З часом принципи побудови комп’ютера розвивалися, набували нового змісту, доповнювалися. Так, в ході розробки комп’ютерів у кінці 70-х років XX ст. і особливо під час створення першого персонального комп’ютера корпорації ІВМ, так званого ІВМ РС (1981 р.), був сформульований магістрально-модуль­ний принцип, який передбачає, що:

• дані між окремими пристроями комп’ютера передаються по єдиній магістралі - системній шині, в якій виділяють три окремі шини: шину даних, шину команд і шину адрес,
• комп’ютер складається з окремих блоків - модулів, кожний з яких виконує певні функції. Це дає змогу звести модернізацію або ремонт комп’ютера до заміни окре­мих модулів. Так, можна замінити процесор, блоки пам’яті, монітор на аналогічні або на пристрої з покращеними значеннями властивостей.

Комп’ютери, які працюють на основі зазначених принципів, мають так звану фоннейманівську архітектуру.

Процесор

Процесор комп’ютера є його основним пристроєм (рис. 2.5). До складу сучасного процесора входять, як зазначалося вище, арифметично-логічний пристрій і пристрій керування.

Процесори для персональних комп’ютерів класифікують за розрядністю, кількістю   ядер, тактовою частотою та іншими властивостями (табл. 2.1).

Процесор вставляється в спеціальне місце - сокет (англ. socket - гніздо, розетка) на системній (материнській)платі (рис. 2.6), яка, у свою чергу, розміщується в системному блоці.

Перший мікропроцесор Intel 4004 (рис. 2.7) був створений фірмою Intel - , у 1971 р. і почав широко використовуватись у калькуляторах. Процесор був 4-розрядний і міг виконувати 45 команд.

У 1974 р. була створена модель 8-розрядного мікропроцесора Intel 8080, який став основою для розробки перших персональних комп’ютерів (комп’ю­тер Altair 8800 компанії MITS). Він виконував понад 250 команд.

Удосконалений 16-розрядний мікропроцесор Intel 8086 з’явився у 1978 р. Ставши базою для створення першого персонального комп’ютера фірми IBM, ці мікропроцесо­ри набули широкого розповсюдження і започаткували 80x86 серію (80286, 80386, 80486) ікропроцесорів кор­порації Intel. Цю серію продовжили у 1993 р. процесори типу Pentium (початкова назва Intel 80586). У 1999 р. для недорогих комп’ютерів було розпочато випуск проце- .   сорів Celeron. У 2000 р. вперше з’явився процесор

З 2006 р. розпочато виробництво багатоядерних процесорів Intel CORE.

Серед фірм-виробників мікропроцесорів, таких як AMD, VIA Technology, Transmeta, IBM, Motorola та інших, тільки AMD склала гідну конкуренцію лідеру - Intel. Моделі мікропроцесорів AMD - спочатку К5 та К6, потім Athlon, Duron і Sempron, а зараз Phenom - з успіхом конкурують з різними типами мікропроцесорів фірми Intel для персональних комп’ютерів.

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

Таблиця 2.2. Значення властивостей першого і сучасного мікропроцесорів

Пам’ять комп’ютера

Однією з основних складових комп’ютера є його пам’ять. Вона призна­чена для збереження даних. Її поділяють на внутрішню та зовнішню (рис. 2.8).

Пам’ять поділяють також на енергозалежну (всі види внутрішньої пам’яті, крім постійної) іенергонезалежну (всі виді зовнішньої пам’яті та постійна пам’ять). Дані з енергозалежної пам’яті зникають при вимк­ненні живлення комп’ютера.

Основними властивостями пам’яті є:

• ємність — максимальна довжина двійкового коду, який можна роз­містити в пам’яті, наприклад 320 Гбайт;
• швидкість зчитування і запису даних - довжина двійкового коду, яку можна зчитати (записати) за одиницю часу, наприклад 120 Кбайт за секунду.

Внутрішня пам’ять

До внутрішньої пам яті відноситься постійна, оперативна і кеш-пам’ять.

Постійну пам’ять скорочено позначають ПЗП - постійний запам’ято­вуючий пристрій або ROM (англ. Read Only Memory - пам’ять тільки для читання). Ця пам’ять невелика за ємністю (кілька сотень кілобайтів) і містить програму тестування пристроїв комп’ютера при ввімкненні - POST (англ. Power-On Self Test - самоперевірка при ввімкненні енергії) та базову систему введення-виведення - BIOS (англ. Basic Input/Output System). Особливістю постійної пам’яті є те, що дані, які в ній містяться, не зникають при вимкненні живлення комп’ютера. Постійна пам’ять ви­готовляється у вигляді спеціальної мікросхеми, яку розміщують на си­стемній платі (див. рис. 2.6, 3).

Дані в постійну пам’ять заносяться у процесі її виготовлення. Розрізняють мікросхеми постійної пам’яті без можливості перепрограмування і з мож­ливістю багаторазового перепрограмування. За потреби користувач може замінити мікросхему постійної пам’яті або виконати її перепрограмування.

Оперативну пам’ять (рис. 2.9) скорочено позначають ОЗП - оператив­ний запам’ятовуючий пристрій абоRAM (англ. Random Access Memory - пам’ять з довільним доступом) і також розміщують на системній платі (див. рис. 2.6, 2). Вона розділена на окремі комірки, кожна з яких має унікальне ім’я (адресу). Процесор у будь-який момент часу може зверну­тися до будь-якої комірки оперативної пам’яті для зчитування або запи­су даних.

Ємність оперативної пам’яті становить від кількох сотень мегабайтів до кількох гігабайтів. Для сучасної оперативної пам’яті швидкість обміну даними між нею і процесором - понад 10 гігабітів за секунду.

У сучасних комп’ютерах процесор досить швидко опрацьовує дані, але відносно довго чекає на надходження нових даних з оперативної пам’яті. Для підвищення швидкості обміну даними між процесором і оператив­ною пам’яттю використовують кеш-пам’ять (англ. cache memory - пам’ять про запас). У ній робиться своєрідний запас даних, до яких може звернутися процесор під час подальшої роботи. Вона має значно більшу швидкість обміну даними з процесором порівняно з оперативною пам’ят­тю. Розрізняють кеш-пам’ять першого рівня (ємність 32 кілобайти), другого рівня (ємність 6 мегабайтів і більше) і третього рівня (ємність більше 8 мегабайтів). Кеш-пам’ять першого і другого рівня розміщують у складі мікросхеми процесора, третього рівня, як правило, - на системній платі.

Зовнішня пам’ять

Зовнішня пам’ять призначена для довготривалого зберігання даних. Кожний вид зовнішньої пам’яті характеризується (табл. 2.3):

• носієм даних;
• пристроєм для зчитування і запису;
• способом запису.

Пристрої зовнішньої пам’яті відносяться до пристроїв, що здійснюють як уведення, так і виведення даних.

Пам’ять на жорстких магнітних дисках є основним видом зовнішньої пам’яті в сучасних комп’ютерах. Вона реалізована за допомогою магнітного способу запису і зчитування даних. Носієм даних є жорсткий (як правило, металевий) диск з нанесеним на нього шаром речовини, яка має магнітні властивості. Зчитування та запис даних здійснює спеціаль­ний пристрій - накопичувач на жорстких магнітних дисках, скорочено НЖМД або HDD (англ. Hard Disc Drive - накопичувач на жорсткому дис­ку) (рис. 2.10).

У НЖМД на одній осі розміщують, як правило, відразу кілька маг­нітних дисків. До кожної з поверхонь дисків підходить своя магнітна головка. Усі головки об’єднані в єдиний блок.

Накопичувач має електричний двигун, який забезпечує рівномірне обертання магнітних дисків, і систему переміщення блока магнітних го­ловок запису/зчитування від краю диска до його центра і в зворотному напрямі. Увесь пристрій поміщають у закритий корпус.

Для збільшення швидкості обміну даними між пристроями зовніш­ньої пам’яті й оперативною пам’яттю комп’ютера використовують кеш- пам’ять, яку розміщують на платі керування пристрою.

Основні властивості сучасних НЖМД:

• ємність - 300 Гбайт і більше;
• швидкість обертання дисків - 5400, 7200 і більше обертів за хвилину;
• ємність кеш-пам’яті - 8 Мбайт і більше.

Перший пристрій для зберігання даних на жорстких магнітних дисках був розроблений корпорацією IBM (англ. International Business Machines Corporation - міжнародна корпорація машин для бізнесу) у 1956 р. під керів­ництвом Рейнольда Джонса. Модель, що була використана в комп’ютері RAMAC 350, називалася IBM 350 Disk File, мала 50 дисків діаметром 24 дюйми і ємність близько 5 Мбайт. Пристрій був розміром як велика шафа для одягу і мав вартість близько 50 тис. доларів.

Серед наступних моделей жорстких дисків виробництва IBM широкого роз­повсюдження набула модель з маркуванням 30/30 (1973 p.), що збіглося з марку­ванням рушниці «вінчестер». За аналогією жорсткі магнітні диски стали називати­ся «вінчестерами». Назва прижилася, і навіть у науковій літературі доволі часто використовують термін «вінчестер» для позначення пристроїв для збереження даних на жорстких магнітних дисках.

Пам’ять на гнучких магнітних дисках також реалізована за допомогою магнітного способу запису і зчитування даних. Носієм даних є гнучкий пластиковий диск, покритий шаром речовини з магнітними властивостя­ми. Він поміщений усередину пластикового футляра. Гнучкий магніт­ний диск разом з футляром називають дискетою (рис. 2.11). Використовують дискети з диском діамет­ра 3,5 дюйма (позначається 3,5", 1" « 2,54 см) і єм­ністю 1,44 Мбайт. Існують дискети і з більшою єм­ністю, але вони не набули широкого розповсюдження.

Зчитування і запис даних на дискети здійснює на- копичувач на гнучких магнітних дисках (НГМД), або дисковод. Принцип його дії аналогічний до принципу дії НЖМД, основною відмінністю є використання змінних носіїв - дискет.                                                                                            

Пам’ять на магнітних стрічках реалізована, як і попередні два види, за допомогою магнітного способу запису, зберігання і зчитування даних. Носієм даних є магнітна стрічка, яка поміщена в жорсткий футляр - касету. Ємність становить від 4 до 40 Гбайт і більше.

Пристроєм зчитування і запису даних з магнітних стрічок є стример (англ. streamer - довга вузька стрічка). Його найчастіше використовують для створення резервних копій даних.

Пам’ять на оптичних дисках реалізована за допомогою лазерної техно­логії запису і зчитування даних. На оптичному диску від центра до зовнішнього краю по спіралі записуються дані у вигляді послідовності темних і світлих ділянок. Під час зчитування даних аналізується інтен­сивність відбитого від поверхні диска променя лазера.

Носіями даних є оптичні диски таких основних типів:

• CD (англ. Compact Disc - компакт-диск);
• DVD (англ. Digital Video Disc - цифровий відеодиск, в іншому варіанті - англ. Digital Versatile Disc - цифровий універсальний диск);
• BD (англ. Blu-ray Disc - синьопроменевий диск).

Ємність більшості CD дисків - 640-800 Мбайт. Але ця ємність не дає змоги розміщувати на них, наприклад, високоякісні відеофільми. Для збільшення ємності оптичних дисків збільшили щільність запису (рис. 2.12). Так з’явився інший тип оптичних дисків - DVD, який може використовувати для збереження даних кілька шарів з обох сторін і мати ємність до 20 Гбайт, а потім і BD диски, які дають змогу записати до 100 Гбайт (використовується 4 шари для збереження даних, по два з кожної сторони диска).

Залежно від можливості запису і перезапису даних оптичних дисків поділяються на кілька видів.

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

Основною властивістю пристроїв для роботи з оптичними дисками є швид­кість зчитування та запису даних. Для перших пристроїв вона становила 150 Кбайт за секунду. У сучасних пристроях ця швидкість більша в 42-64 ра­зи. Напис на пристрої або в його документації у вигляді, наприклад, 52х означає, що пристрій може забезпечувати обмін даними зі швидкістю, яка більша за швид­кість перших пристроїв у 52 рази, що становить близько 7800 Кбайт за секунду.

Для DVD пристроїв початкова швидкість (1х) зчитування та запису даних ста­новить 1,32 Мбайт за секунду.

Флеш-пам’ять (рис. 2.13) (англ. flash - спа­лах) свою назву отримала за дуже високу, порів­няно з іншими видами зовнішньої пам’яті, швидкість запису/зчитування даних (3-10 Мбайт за секунду). Цей вид пам’яті реалізований на напівпровідникових (електронних) елементах, які здатні зберігати дані протягом тривалого ча­су за відсутності живлення.

Пристрої флеш-пам’яті дають змогу зберіга­ти значні обсяги даних (до 32 Гбайт і більше).

Пам’ять на основі флеш-технології широко використовується у переносних пристроях - цифрових фото- і відеокамерах, цифрових плеєрах, диктофонах, кишенькових комп’юте­рах, мобільних телефонах тощо.

Останнім часом набувають все більшого роз­повсюдження, особливо в мобільних комп’ютерах, так звані флеш-диски (рис. 2.14) - пристрої, які використовують флеш-технологію запису і зчи­тування даних. Вони мають ємність 64 Гбайт і більше. Ці пристрої забезпечують більшу швид­кість зчитування та запису даних (45-60 Мбайт за секунду), ніж жорсткі диски (10-15 Мбайт за секунду), але поки що мають значно більшу вартість. Планується, що в подальшому ці диски замінять жорсткі.

5. Виконайте завдання

1. Знайдіть потрібну інформацію і складіть порівняльну таблицю значень властивостей останніх моделей процесорів Іпіеі та АМБ для персональ­них комп’ютерів.
2. За каталогами або ціновими пропозиціями комп’ютерних магазинів визначте значення властивостей процесорів, які доступні на ринку т           комп’ютерів вашого регіону.
3. Проаналізуйте таблицю 2.2. Чи справджується прогноз Мура про по­двоєння кількості напівпровідникових елементів у складі мікросхем за один рік?
4. Складіть порівняльну таблицю зовнішньої та внутрішньої пам’яті комп’ютера за ємністю та способами запису.
5. Упорядкуйте відомі вам носії даних за спаданням їх ємності.
6. Поставте позначки у відповідних клітинках таблиці

7. Підготуйте схему класифікації видів пам’яті за тривалістю зберігання даних.
8. Підготуйте повідомлення на тему: «Що стримує широке використання флеш-дисків у персональних комп’ютерах?».

6. Питання до уроку.

1. Назвіть пристрої, що входять до складу персонального комп’ютера. По­ясніть їх призначення.
2. Що таке архітектура комп’ютера?
3. Опишіть роботу комп’ютера, використовуючи схему на рисунку 2.2.
4. Назвіть принципи функціонування сучасних комп’ютерів.
5. Поясніть принципи організації роботи комп’ютера за фон Нейманом.
6. Назвіть складові процесора.
7. Назвіть основні властивості процесорів.
8. Яку розрядність і тактову частоту мають сучасні процесори?
9. Опишіть властивості сучасних процесорів.
10. Назвіть види пам’яті комп’ютера.
11. Які програми розміщують у постійній пам’яті? Яке їх призна­чення?
12. Назвіть види внутрішньої пам’яті та охарактеризуйте кожний з них.
13. Поясніть, чому оперативну пам’ять називають пам’яттю з довільним доступом.
14. Назвіть види зовнішньої пам’яті та охарактеризуйте кожний з них.
15. Опишіть будову жорсткого диска.
16. Які види пам’яті використовують електронний спосіб зберігання даних; магнітний спосіб зберігання даних?
17. Яка ємність сучасних Віи-гау дисків? Для запису даних якого типу во­ни, в основному, використовуються?
18. Які пристрої пам’яті зберігають дані тільки до вимкнення комп’ютера?
19. Яка пам’ять називається енергонезалежною? Поясніть відмінність між енергозалежною і енергонезалежною пам’яттю. Наведіть при­клади.

 Для допитливих.

Як дізнатися ємність оперативної пам’яті  ПК?

Ємність оперативної пам'яті комп'ютера можна дізнатись, виконавши такі дії:

1. Натиснути “Пуск”;

2. Вибрати “Мой компютер”;

3. Натиснути правою клавішею та з підменю вибрати “Свойства”;

4. У вікні “Свойстава системы” вибрати вкладку “Общие”;

                      ІКТ                                                                                                                                     11 клас

ТЕМА. Формати зображень, що використовуються в Інтернеті, їхні особливості. Розміщення й вирівнювання зображень на веб-сторінках. Створення й розміщення на сайтах gif-анімації.

Хід уроку

1. Організація початку уроку.

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

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

Розглянемо особливості популярних графічних форматів, а також засоби розміщення та вирівнювання зображень на веб-сторінках.

Формати зображень, які використовують в Інтернеті

Найбільш розповсюдженими в Інтернеті є файли форматів GIF, JPG (JPEG) та PNG. Це найкомпактніші формати збереження графіки.

Формат GIF (.gif)

Формат GIF (Graphics Interchange Format — формат обміну гра­фічними даними) почали використовувати з 1987 року для обміну малюнками через канали зв'язку глобальної мережі. Він зберігає зображення, що можуть містити не більш ніж 256 кольорів, і не залежить від апаратного забезпечення комп'ютера. Окрім цього, під час завантаження таких файлів на веб-сторінку може бути використаний режим interlaced (рядки малюнка відображаються через один). Ця технологія дає змогу побачити приблизний вміст картинки до її повного відтворення і в разі необхідності скасувати завантаження.

У GIF-файлах можна зробити один чи більше кольорів прозори­ми: вони будуть невидимими у вікні браузера та деяких інших програм. Також є можливість зберігати в одному файлі кілька кар­тинок, задавши час показу кожної, тобто застосовувати анімацію. На сьогодні фахівцями розроблено чимало готових анімаційних GIF-файлів, які можна використовувати на своїх веб-сторінках.

Формат PNG (.png)

Формат PNG (Portable Network Graphic — переносні мережні гра­фічні дані) є одним із перспективних форматів графіки для Інтер- нету, який створено з метою заміни GIF.

Формат PNG забезпечує високу якість графіки та прийнятні розмі­ри файлів. Зображення може зберігатися як у реальних кольорах, так і в 256-колірній GIF-палітрі.

Формат JPEG (.jpg)

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

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

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

Розміщення і вирівнювання зображень на веб-сторінках

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

Створення тла веб-сторінки

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

Для формування тла у вигляді малюнка у тегу <BODY> викори­стовують атрибут BACKGROUND, значенням якого є URL-адреса файлу зображення. Наприклад, тег <BODY BACKGROUND="1. jpg"> визначає, що для фонового заповнення веб-сторінки буде викори­стано файл 1.jpg.

Далі наведено приклад HTML-коду сторінки, в якої тло оформле­не у вигляді малюнка, що міститься у файлі mone.jpg.

<HTML>

<ТІТЬЕ>Моя фірма</ТІТХЕ> <BODY BACKGROUND="mone.jpg">

<H1><A HREF = "l.html">Наша продукція</АХ/Н 1 >

<Ш>^ HREF = "2.html">Наші замовники</АХ/Н 1 >

</BODY>

</HTML>

На рис. 3.1 показано, який вигляд має ця веб-сторінка у вікні браузера.

Як бачите, малюнок займає цілий екран. Розглянемо інший при­клад, задавши в атрибуті BACKGROUND зображення невеликого розміру gorobci.jpg, яке у вигляді мозаїки заповнить екран. Код такої сторінки наведено нижче, а вигляд її у вікні браузера — на рис. 3.2.

<HTML>

<TITLE>Моя фірма</TITLE>

<BODY BACKGROUND="gorobci.jpg">

</BODY>

</HTML>

У цьому прикладі на веб-сторінці немає тексту, однак на практи­ці так не буває. З огляду на це тло рідко роблять у вигляді фото­графій, оскільки для них непросто підібрати відповідний колір тексту.

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

Можливість відповідної обробки зображень для перетворення їх на фонові забезпечують багато графічних редакторів, зокрема по­пулярний Adobe PhotoShop. Відкривши у ньому потрібний файл (командою File • Open (Файл • Відкрити)), слід вибрати команду Image • Adjustments • Hue/Saturation (Зображення • Параметри • Тон/ Насиченість) і за допомогою шкали Lightness (Освітленість) ос­вітлити малюнок тла.

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

Вправа 3.1

У програмі Adobe PhotoShop створимо і відредагуємо малюнок, призначений для заповнення тла веб-сторінки.

1. Відкрийте вікно програми. Простежте, щоб палітри Tools (Інст­рументи) і Swatches (Зразки) відображалися на екрані. Якщо це не так, виберіть назви цих палітр у меню Window (Вікно).
2. Створіть новий файл за допомогою команди File • New (Файл • Новий). У діалоговому вікні, що відкриється, задайте такі па­раметри зображення: Width (Ширина) — 150 пікселів. Height (Висота) — 100 пікселів, IVIode (Режим) — RGB Color.
3. За допомогою інструмента Paint Bucket (Заливка) на палітрі ко­льорів Swatches (Зразки) виберіть бажаний колір і зафарбуйте зображення, клацнувши всередині нього.

Виконайте команду меню Filter > Texture > Texturizer (Фільтр • Текстура • Текстуризатор). У діалоговому вікні, що відкриєть­ся, виберіть зі списку Texture (Текстура) значення Canvas (По­лотно) і настройте параметри Scaling (Шкала), Relief (Рельєф) та Light Direction (Напрям освітлення). Зображення набуде та­кого вигляду, як на рис. 3.4.

4. Для корекції отриманого малюнка (надання йому блідого тону) можна скористатися командою Image • Adjustments > Hue/Satura­tion (Зображення • Параметри • Тон/Насиченість) і настроїти освітленість за допомогою шкали Lightness (Освітленість), як це описано раніше.
5. Збережіть цей малюнок у файлі з іменем 1.jpg, розмістивши його у папці з веб-сторінками. Закрийте програму Adobe Pho­toShop.
6. Створіть HTML-документ, в якому за допомогою атрибута BACKGROUND=”1. jpg" тегу <BODY> оформіть тло сторінки.

<HTML>

<ТІТLЕ>Моя фірма</ТІТLЕ>

<BODY BACKGRОUND="1.jpg">

<Н1><А HREF = "Lhtml">Наша продукція</А></Н1>

<H1><A HREF="2.html">Haші замовники</А></Н1>

</BODY>

</HTML>

Вставлення зображень на веб-сторінку

Для розміщення малюнків у HTML-документі використовують оди­нарний тег <IMG>. Він має обов'язковий атрибут SRC, значенням якого є URL-адреса файлу зображення, записана в абсолютній (повністю) або відносній формі (починаючи від поточного катало­гу; при цьому «батьківський» каталог позначають за допомогою двох крапок і слешу (. . /)). Під час відкривання документа брау­зер завантажує малюнок і відображає його в тому місці докумен­та, де розташований тег <IMG>.

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

Слід також пам'ятати, що іноді користувачі відключають відобра­ження графіки у вікні браузера, щоб прискорити завантаження документів. Тому, на випадок, коли малюнка на сторінці не буде, бажано повідомити, що на ньому зображено. Для цього викори­стовують альтернативний текст — більш-менш докладний опис зображення, який задають у тегу <IMG> як значення спеціально­го атрибута ALT. Якщо браузер не може показати малюнок, він замість нього виводить цей текст.

Розглянемо HTML-документ, в якому використаємо малюнок fla­mingo .jpg, де зображено фламінго. У тегу <IMG> задамо атрибути WIDTH,HEIGHT та ALT.

<HTML>

<TITLE>Малюнок</TITLE>

<ВООУ BACKGROUND=”flamingo.jpg”>

< IMG SRC=”2.j pg” WIDTH=300 HEIGHT = 200 АLТ=”Фламінго">

</BODY >

</HTML>

Ha рис. 3.6 показано, який вигляд має ця веб-сторінка у вікні браузера. Після наведення вказівника миші на малюнок альтер­нативний текст відображається у спливаючому вікні.

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

Розміщення зображень у тексті

Зображення можна розмістити у тексті, але при цьому слід ви­значити, в який спосіб текст обтікатиме його. Для взаємного роз­міщення тексту і зображень призначений атрибут ALIGN у тегу <IMG>, який може набувати, зокрема, таких значень:

• left — зображення розміщене в лівій частині сторінки, текст обтікає його з правого боку;
• right — зображення розміщене у правій частині сторінки, текст обтікає його з лівого боку;
• top — обтікання немає, зображення розміщене в тексті, відпо­відний рядок якого вирівняно за верхньою межею малюнка;
• bottom — обтікання немає, зображення розміщене в тексті, відповідний рядок якого вирівняно за нижньою межею ма­люнка;
• middle — обтікання немає, зображення розміщене в тексті, відповідний рядок якого вирівняно по середній лінії малюнка.

За умовчанням атрибут ALIGN має значення left.

Для того щоб картинка не була розташована впритул до тексту, можна задати відступи. Це роблять за допомогою атрибута HSPASE для бокових полів та атрибута VSРАSЕ для верхнього і нижнього полів. Значення аргументів задають у вигляді чисел, що визнача­ють розміри відступів у пікселах. У прикладі, наведеному нижче, задано такі значення атрибутів, що малюнок розміщується ліворуч від тексту, який обтікатиме його. Поля навколо малюнка матимуть розмір 10 пікселів.

<HTML>

<ТІТLЕ>МАЛЮНОК</ТІТLЕ>

<BОDУ БАСКОКОиШ="1.jрд">

<ІМG SRС="flamingo.jpg" ALIGN=left НSРАSЕ=10 VSРАSЕ=10>

Блакитні води океану та коралові рифи, ласкаве сонце і білосніжний прибережний пісок, фантастичний підводний світ і казкові птахи, буяння барв сходів і заходів, непрохідні ліси і п’янкий запах орхідей...

Сприятливий клімат Острова Свободи дає можливість туристам відвідувати його цілий рік. Тут немає зайвої вологості, а спека не така страшна завдяки постійним подувам бризів із океану. Середньорічна температура повітря й води становить + 26—28‘С.

</BОDУ>

</HTML>

Графічні г