Завдання розмірів зображення html-документа

Завдання розмірів графічного зображення явно (за допомогою атрибутів WIDTH, HEIGHT) дозволяє завантажувати браузеру картинку з більшою швидкістю, т.к. він не витрачає час на додаткові обчислення.

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

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

Якщо значення нових розмірів задавати в пікселях, треба використовувати обидва атрибути WIDTH, HEIGHT. Щоб уникнути спотворень, необхідно дотримуватись пропорції. Якщо значення вводяться у відсотках щодо розмірів вікна браузера, досить задати будь-яке значення (ширину чи висоту), - інше браузер перерахує автоматично.

Аналогічно можна зменшувати зображення. Однак тут існує важливий недолік. Час, необхідний для завантаження картинки залишається той самий. Тобто. картинка вантажиться свого "справжнього" розміру, просто вона "втискається" в рамки, які ви явно вказуєте атрибутами WIDTH, HEIGHT. Таким чином, щоб зменшити розмір зображення, треба скористатися засобами однієї з програм редагуванняграфіки, наприклад, Adobe Photoshop або Corel PhotoPaint. Після завершення редагування рекомендую зберегти внесені зміни до нового файлу. Таким чином, ви завжди зможете скористатися вихідним зображенням.

Завдання 2.10

html-документа

Збережіть документ з назвою приклад2_10.htm, відкрийте у браузері.

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

Щоб зменшити роздільну здатність зображення, можна скористатися засобами однієї з програм редагування графіки, наприклад Adobe Photoshop або Corel PhotoPaint.

Атрибут LOWSRC дозволяє відтворити у вікні браузера зображення низької роздільної здатності протягом часу пересилання на комп'ютер користувача оригінального високоякісного зображення.

Перш ніж скористатися цим атрибутом, ви повинні створити картинку з низькою роздільною здатністю. У html-коді треба використовувати атрибути WIDTH, HEIGHT для завдання висоти та ширини зображення високої роздільної здатності, т.к. інакше у вікні браузера обидва зображення будуть відтворені у форматі, що відповідає спрощеній версії.

Реалізуйте цю процедуру на прикладі будь-якого зображення з поточної папки.

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

1. Як створити локальне гіперпосилання?

2. Як вставити зображення в документ?

3. Як створити рядок, що біжить?

4. Як змінити роздільну здатність вставленого зображення?

Лабораторна робота №3 Робота зтаблицями.

Мета роботи: отримати навички створення таблиць у html-документі.