Робота з зображеннями

 

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

Такий спосіб вставки малюнків у Web-сторінку має свої переваги:

• при не одноразовому використанні малюнка, потрібен лише один файл-малюнок. Це зменшує розмір інформації, яку потрібно завантажити з мережі

• ви можете відключити режим завантаження малюнків, що значно прискорить роботу з Web-сторінкою

• ви можете використовувати малюнки, що зберігаються в найстисліших форматах (jpg та gif)

• ви можете зберігати та переглядати малюнки автономно, тобто без Web-сторінки

Також є свої недоліки в такому способі представлення графічної інформації:

• якщо ви неправильно задасте ім’я файла, то замість малюнків ви отримаєте порожні прямокутники

• при збереженні сторінки з Інтернету, малюнки не завжди зберігаються правильно, а інколи і зовсім не зберігаються

• ви не можете змінювати розмір малюнків під час перегляду сторінки, так, як наприклад, у текстовому редакторі Word

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

Для розміщення малюнків на сторінці використовують тег <img>. Цей тег не потребує тегу закриття, а вся допоміжна інформація описується за допомогою атрибутів.

Атрибути тегу <img>.

· src = “URL” – місце знаходження зображення, його URL–адреса

· width = “x” – ширина зображення в пікселях

· height = “x” – висота зображення в пікселях

Якщо ви не вкажете атрибути width та height, то браузер використає реальні розміри зображення.

· border = “x” – ширина рамки навколо малюнка

· align = “left|right|center|top|bottom” – вирівнювання малюнка відповідно по лівому, правому краю, по центру, по верхньому та нижньому краю документа

· alt = “опис” – інформація, яка виводиться на екран, якщо не виводиться малюнок. Якщо цей атрибут проігнорувати, на екран буде виведено ім’я файла малюнка

· hspaсe = “x” – вільний простір по горизонталі від малюнка до тексту

· vspaсe = “x” – вільний простір по вертикалі

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

Правила задавання імен малюнків

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

Існує два способи:

• абсолютне задавання, при якому вказується повна абсолютна адреса малюнка, включаючи URL комп’ютера в Інтернеті та шлях до малюнка (див. заняття “Зв’язування HTML документів”)

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

Файли формату GIF (мають розширення .gif) мають малий обсяг завдяки тому, що в них використовується палітра з 256 кольорів і застосовується алгоритм стиснення без втрат Лемпеля – Зіва – Велча. Цей алгоритм особливо ефективний при обробці простих ілюстрацій із великими ділянками одного кольору. Формати GIF широкого застосовуються для створення “прозорих” малюнків, а також зображень, що завантажуються черезрядковим методом. Ще однією перевагою GIF-формату є можливість використання анімації.

Файли формату JPEG (мають розширення .jpeg або .jpg) застосовуються для зображень із великою кількістю кольорів, з нечіткими границями, плавними переходами між кольорами. У цьому форматі використовується алгоритм стиснення з втратами. На відміну від формату GIF, малюнки формату JPEG не підтримують прозорості й анімації. Але даний формат є незамінним для зберігання та передачі мережею фотографій, оскільки файли цього формату займають значно менший об’єм.

Альтернативою формату GIF, для розміщення зображень на Web-сторінках, є формат PNG (Portable Network Graphics – портативна мережева графіка). Файли формату PNG (мають розширення .png), як правило, більш компактні, ніж формату GIF, при не менш якісному відображенні кольорів.

Сучасні браузери можуть відображати графічні файли майже всіх відомих на даний момент форматів. Проте, слід завжди пам’ятати, що зображення, вставлені у Web-сторінку, передаються через мережу. Файли великих розмірів значно сповільнять завантаження сторінки. Тому не розміщуйте на ваших сторінках файли графічних форматів, окрім перерахованих вище. Пам’ятайте, що більшість інших графічних форматів займають більший об’єм при тій самій якості зображення. Для розміщення фотографій на сторінці, використовуйте файли формату JPEG, об’єм яких не перевищує 60Кб. Сучасні графічні редактори дозволяють перетворювати формати файлів. Для допоміжних зображень (наприклад, фон, кнопки) використовуйте файли формату GIF або PNG. Для анімації використовуйте файли формату GIF

 

1.3. Робота зі шрифтами

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

Атрибути тегу <font>.

· size = “x” – відносний розмір шрифту в кеглях

· color = “x” – колір шрифту. Значенням х може бути, як назва конкретного кольору так і його шістнадцятковий код face = “x” – назва шрифту

Приклад

<font size=”3” color=“blue”

face = “Times New Roman”>

Цей текст буде виведено шрифтом Times New Roman, синього кольору. Розмір шрифту на 3 кеглі більший від того, який використовується за замовчуванням.

 

Тема 4. Алгоритмічна мова

При вивченні теми студенти повинні:

– отримати уявлення про навчальну алгоритмічну мову;

– вивчити поняття алгоритма;

– вміти дати класифікацію блок схем алгоритма;

– опанувати поняття мови програмування;

– отримати уявлення про інтерпритатори та компілятори;

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

Ключові слова: навчальна алгоритмічна мова; мова програмування; інтерфейс; алгоритм; програма; формула; змінні величини; константи; структура алгоритму; інтерпритатори; компілятори, блок схеми.

ЛЕКЦІЯ 9

1.1. Історія виникнення мов програмування

1.2. Класифікація мов програмування