Файл: ГЛАВНЫЕ СВЕДЕНИЯ ПРО ЯЗЫК ПРОГРАММИРОВАНИЯ.pdf

Размер шрифта <FONT SIZE>. Вы можете изменять размер шрифта при помощи тэга: <FONT SIZE=+|- n>

Шрифт может иметь размер от 1 до 7. Вы можете прямо указать размер шрифта цифрой, или указать смещение относительно базового значения (по умолчанию - 3) в положительную или отрицательную сторону. Базовое значение можно изменить при помощи тэга: <BASEFONT SIZE=n>

Например: <p>и <font SIZE=+1>з</font><font SIZE=+2>м</font> <font SIZE=+3>е</font><font SIZE=+4>н</font> <font SIZE=+3>е</font><font SIZE=+2>н</font> <font SIZE=+1>и</font> е</p>

Изменение цвета шрифта <FONT SIZE>. Вы можете изменить цвет шрифта при помощи тэга: <FONT COLOR=«#XXXXXX»>

Цвет указывается в RGB-формате (Red-Green-Blue) посредством указания размерности каждой компоненты цвета в шестнадцатеричном формате. Например, белый цвет обозначается «000000», чёрный – «FFFFFF», синий – «0000FF» и т.п.

<FONT COLOR=«#FF0000»> Красный </FONT> <FONT COLOR=«#00FF00»> Зелёный </FONT> <FONT COLOR=«#0000FF»> Синий.

2.4 Оптимизация графики для web

Графические форматы делятся на векторные, растровые и комбинированные [2, с. 8]. Способы форматирования задают структуру данных и отличаются друг от друга. Растровое изображение образуется из отдельных точек-пикселей, векторное изображение создано из комбинации форм. При увеличении или деформации пиксели растрового изображения становятся заметны, тогда как векторный рисунок сохраняет форму.

Формат GIF может хранить анимированные изображения, в отличие от всех других графических форматов [1, с. 424].

Анимация достигается за счёт того, что в формате GIF сохраняется несколько изображений (кадров), а также информация об их последовательность и скорость воспроизведения. В результате достигается иллюзия непрерывного движения.

Анимация поддерживается только в формате GIF. Для проведения оптимизации взято анимационное изображение с начальными 128 цветами (рис. 1). Начальный размер файла - 74,6 Кбайт.

Рис. 1. Анимационное изображение для оптимизации

Результаты оптимизации анимационного файла находятся в таблице 2.3.

Таблица 2.3

Оптимизация анимационного файла

Как видно из этой таблицы, неудовлетворительное качество появляется при уменьшении палитры цветов до 16. При этом некоторые цвета изменились (рис. 2).

Рис. 2. Ухудшение качества изображения при 16 цветах

Таким образом, для данного изображения оптимальным будет выбор 32 цветов (удовлетворительное качество), что даёт уменьшение размера файла в 2 раза.

Формат SVG поддерживается самыми популярными браузерами последних версий (Internet Explorer, Opera, Firefox, Chrome).

Формат SVG (Scalable Vector Graphics) - спецификация языка разметки, основанный на XML, и формат файлов для двумерной векторной графики, как статической, так и анимированной и интерактивной. SVG может быть только декларативным или содержать описания сценариев.

Растровое изображение образуется из отдельных точек-пикселей, в то время как векторное изображение образовано из комбинации форм. Файлы SVG имеют текстовый формат, который можно читать и редактировать с помощью обычных текстовых редакторов. Это делает SVG файлы меньше по размеру, чем по сравнению с качеством изображения в форматах JPEG или GIF.

Рассмотрим простой пример использования формата SVG. В обычном текстовом редакторе (например, в Блокноте) наберу следующий текст (рис. 3).

Рис. 3. Описание изображений в формате SVG

Файл начинается с XML-заголовка, далее следует корневой элемент <svg>, в котором указывается пространство имён, ширина, высота документа. Внутри контейнера содержится непосредственное описание элементов тегами (в этом случае 3 круга <circle>). Каждому тегу можно присвоить параметры (cx - положение по оси X, cy - положение по оси Y, r - радиус, fill - цвет заливки). Также каждому элементу можно присвоить стиль, в данном случае это прозрачность (fill-opacity).

Сохраню этот файл на диске под именем SVG-1.svg.

Далее в Блокноте наберу следующий текст (рис. 4).

Рис. 4. Использование SVG в файле HTML

Сохраню этот файл на диске под именем SVG-1.html.

Открою данный файл в современном браузере, например Google Chrome. Получу такой результат (рис. 5).

Рис. 5. Отражение изображения в формате SVG

Для сравнения форматов в редакторе Macromedia Fireworks было создано аналогичное изображение (рис. 6).

Рис. 6. Аналогичное изображение в редакторе Macromedia Fireworks

Далее это изображение было сохранено в формате PNG и экспортировано в форматы GIF и JPEG. Изображение в этих форматах было оптимизировано с приемлемым качеством со следующими параметрами: GIF - 16 цветов, JPEG - качество.

Результат сравнения размеров файлов этого изображения представлены в таблице 2.4.

Таблица 2.4

Сравнение размеров файлов

Таким образом, размер файла изображения в формате SVG меньше аналогичного файла в формате PNG в 88 раз. По сравнению с наименьшим графическим файлом (формат GIF) файл SVG меньше почти в 3,5 раза.

Современное развитие этого формата позволяет задавать не только простые геометрические объекты, но достаточно сложные изображения (рис. 7).

Рис. 7. Сложное изображение в формате SVG

Таким образом, по нашему мнению, будущее Web-графики будет связано с развитием формата SVG и его поддержкой во всех браузерах.

На основании проведённых экспериментов можно сделать следующие общие выводы и рекомендации по подготовке Web-графики.

1. Графика для Web-страниц должна быть сохранена в одном из трех форматов – PNG, GIF, JPEG. Это даёт гарантию того, что изображение будет отображаться в любом браузере.

2. Выбор формата с целью минимизации размера файла связан с определёнными параметрами изображения.

3. Формат GIF целесообразно использовать для изображений с небольшим количеством цветов (до 256). Например – текст, логотипы, иллюстрации с чёткими краями, изображения с прозрачными участками, баннеры. Кроме того, только в этом формате образуются анимационные изображения.

4. Формат JPEG целесообразно использовать преимущественно для фотографий с большим количеством цветов. Этот формат допускает сохранение изображений, содержащих миллионы цветов с тонкими цветовыми переходами. Изображения в этом формате, в отличие от формата GIF, не могут иметь прозрачных участков. Анимация также не поддерживается.

5. Формат PNG является развитием формата GIF. Его целесообразно использовать для сохранения полноцветных изображений с глубиной цвета до 48 бит на пиксель и черно-белых изображений с глубиной цвета до 16 бит на пиксель. Этот формат позволяет для каждой точки изображения задавать степень прозрачности от нулевой до 100%. Формат PNG не поддерживает анимацию.

Область применения – высококачественные фотографии, рисунки, содержащие прозрачные участки, рисунки с большим количеством цветов и чёткими краями изображений.

Обобщённые рекомендации по выбору графического формата приведены в табл. 2.5.

Таблица 2.5

Общие рекомендации по выбору графического формата для Web

Но, несмотря на приведённые общие характеристики графических форматов для Web, выбрать оптимальный формат для конкретного изображения чаще всего можно только экспериментальным путём. При этом преследуется основная цель: достичь хорошего качества изображения при минимальном размере файла.

ЗАКЛЮЧЕНИЕ

В наше время существует множество программ для создания web-сайтов, но не одна из них не может сделать этого самостоятельно, обязательно нужен пользователь, который, будет управлять этой программой. И какой программой не пользуйся, без знания языка программирования HTML у пользователя ничего не получится.

В процессе создания web-сайта я познакомился с методом программирования HTML, научился создавать web-страницы и использовать базовые теги. Работать с файлами разных форматов и расширений для корректного отображения в среде интернета.

Я хочу, чтобы мои знания пригодились мне в будущем на работе, мне конечно далеко до профессионала, но я буду и дальше изучать программирование на языке HTML и совершенствоваться как специалист.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1.Бондаренко М. А. Web-дизайн и презентация интеллектуальной деятельности: Научное пособие. Х.: ФОП Либуркина Л. М., 2010. 424 с.

2. Бондаренко М.А., Савченко О.О. Создание и использование Web-графики для объектно-ориентированных информационных систем // Зборник «Новый коллегиум». ХНУРЕ. 2014. 8 с.

3. Джейсон Мейнджер. Java: основы программирования :Пер. с англ. - К.: Издательская группа BHV,1997.-320с.

4. Симкин Стив, Бартлет Нейл, Лесли Алекс. Программирование на Java. Путеводитель: Пер. с англ. – К. НИПФ «ДиаСофт Лтд», 1996. 736 с.

5. Кристиансен Т., Торкингтон Н. Perl: Библиотека программиста: Пер. с англ.- СПб.: Издательство «Питер», 2000. – 736с.: ил.

6. Хейл, Бернард Ван. JDBC: Java и базы данных: Пер. с англ. М.,1999.-320с.

9. . Борисенко А.А. Web-дизайн. Просто как дважды два. – М.: Эксмо, 2008.- 320 с.

10. Бурлаков М. В. CorelDRAW 12. – СПб.; БХВ-Петербург, 2014. – 688 с.

11. Дунаев В. Самоучитель JavaScript, 2-е изд. – СПб.: Питер, 2015. – 395 с.

12. Зольников Д.С. PHP5. Как самостоятельно создать сайт любой сложности. – 2-е изд. стер. – М.: НТ Пресс, 2107. – 272с.

13. Инькова Н. А., Зайцева Е. А., Кузьмина Н. В., Толстых С. Г. Создание Web-сайтов: Учебно-методическое пособие. Ч. 5. Тамбов: Изд-во Тамб. гос. техн. ун-та, 2015. – 56 с.