Преподаватель который помогает студентам и школьникам в учёбе.

ГЛАВНЫЕ СВЕДЕНИЯ ПРО ЯЗЫК ПРОГРАММИРОВАНИЯ

Содержание:

ВВЕДЕНИЕ

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

Цель курсовой работы – изучение языка программирования HTML.

Исходя из поставленной цели, возникла необходимость выполнить некоторые задания, а именно:

Раскрыть основные сведения о языке;
Рассмотреть процесс создания сайта;
Рассмотреть оптимизацию графики.

Объект - веб-сайт.

Предмет – программирование сайта на языке HTML.

Структура курсовой работы. Курсовая работа состоит из вступления, трёх глав, которые поделены на одиннадцать под-глав, заключения и списка использованных источников. Общее число страниц - 30.

ГЛАВА 1. ГЛАВНЫЕ СВЕДЕНИЯ ПРО ЯЗЫК ПРОГРАММИРОВАНИЯ

Основные понятия языка HTML

HTML (Hypertext Markup Language — Язык гипертекстовой разметки) — это язык описания структуры страниц документов, которая позволяет обычный текст форматировать в абзацы, заголовки, списки и другие структуры, создавать ссылки на другие страницы. Это текстовая речь, в которой инструкции по форматированию, так называемые - теги, встроенные в разделы документа, которые содержат конкретную информацию. Теги сообщают браузерам, как форматировать и представлять информацию на экране.

Язык гипертекстовой разметки HTML был предложен Тимом Бернерсом-Ли в 1989 как один из компонентов технологии разработки распределённой гипертекстовой системы World, Wide, Web. Идея гипертекстовой информационной системы состоит в том, что пользователь имеет возможность просматривать документы (страницы текста) в наиболее удобном для себя порядке, а не последовательно, как это принято при чтении книг. Достигается это путём создания специального механизма связывания различных страниц текста при помощи гипертекстовых ссылок.

Язык НТМL позволяет определить структуру электронного документа с полиграфическим уровнем оформления. Результирующий документ может содержать различные элементы: иллюстрации, аудио и видео фрагменты. Язык НТМL включает развитые средства для определения нескольких уровней заголовков, шрифтовых выделений, различных групп объектов и много других возможностей [4, с. 736].

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

Таким образом, гипертекстовая база данных в концепции WWW – это набор текстовых файлов, размеченных на языке HTML, который определяет форму представления информации (разметка) и структуру связей этих файлов (гипертекстовые ссылки).

За основу модели разметки документов в HTML принята теговая модель. Теговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тегами. То есть документ НТМL является не чем иным, как обычным АЅСІІ - файл, с добавленными в него управляющими НТМL-кодами (тегами) [12, с. 272].

Теги НТМL - документов в основном являются простыми и понятными для использования, поскольку они созданы с помощью общеупотребительных слов английского языка, понятных сокращений и обозначений.

НТМL-тег состоит из имени, за которым может следовать необязательный список атрибутов тега. Текст тега помещается в угловые скобки (<И>). Самый простой вариант тега – имя, помещённое в угловые скобки, например <HEAD>. Для более сложных тегов характерно наличие различных атрибутов, которые могут иметь конкретные значения, определённые для видоизменения функции тега.

Атрибуты тега следуют за именем и отделяются друг от друга одним или несколькими пробелами. Порядок записи атрибутов в теге не имеет значения. Значение атрибута следует за знаком уравнения, который стоит после имени атрибута. Если значение атрибута – одно слово или число, его можно указать непосредственно после знака уравнения, не выделяя дополнительно. Остальные значения необходимо помещать в одинарные или двойные кавычки, особенно если они содержат несколько разделённых пробелами слов [12, с. 270].

Чаще всего НТМL-теги состоят из начального и конечного компонентов, между которыми размещаются текст и другие элементы документа. Имя конечного тега идентично имени начального тега, но перед именем ставится косая черта (/) (например, для тега заголовка <ТIТLЕ> закрывающей парой будет </ТIТLЕ>). Конечные теги не содержат атрибутов.

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

Некоторые НТМL-теги не имеют конечного компонента, поскольку являются автономными элементами. Например, тег картинки <IMG> предназначен для вставки изображения в документ, не имеет конечного компонента.

Для создания HTML-документа можно использовать редактор ASCII (в частности, Блокнот системы Windows). Такие редакторы позволяют вводить HTML-теги, не добавляя к созданному ничего дополнительно. Создание документа в таком редакторе позволяет параллельно просматривать результат в программе - браузере. Другой тип редакторов, это - визуальные HTML-редакторы, например, Microsoft FrontPage. Их интерфейс построен по тому же принципу, что и интерфейс текстового процессора, такого, как, например, Word. Для работы с визуальным редактором можно вообще не владеть языком HTML. Недостатком визуальных редакторов является то, что размер создаваемого ими HTML-документа в несколько раз больше, чем документа, созданного обычным Блокнотом Windows. В условиях низкой пропускной способности отечественных сетей этот недостаток, который касается скорости загрузки страницы (и, соответственно, стоимости времени, которое на это тратится), является весьма существенным недостатком (файл .htm, созданный в WORD, в 4 - 9 раз больше, чем файл аналогичного содержания, созданный программой Блокнот).

1.2 Структурные теги документов HTML

Создание HTML-документа происходит расстановкой тегов (tags) HTML внутри обычного неформатированного текста. Теги HTML — это последовательности символов, которые начинаются знаком «меньше» (<) и заканчиваются знаком «больше» (>). Теги могут иметь атрибуты, которые, в свою очередь, могут принимать определённые значения [13, с. 56].

Браузеры WWW обязательно придерживаются трёх правил при синтаксическом анализе HTML:

1. Пробелы и другие «невидимые» символы игнорируются.

2. Теги форматирования могут быть написаны прописными или строчными буквами.

3. Большинство тегов форматирования пишутся парами.

Технология создания HTML-документа

HTML-документ можно создавать при помощи простого текстового процессора, который позволяет сохранять текстовые (ASCII) файлы, например, Windows Notepad (Блокнот). При этом не применяются никакие коды для форматирования.

Порядок создания Web-документа:

1. В главном меню WINDOWS выбрать пункт Пуск-Программы-Стандартные-Блокнот.

2. Ввести структуру документа.

3. Сохранить созданный документ, обязательно предоставив ему расширение .htm

4. Проверить вид созданной разметки страницы. Для проверки полученной страницы скачать Internet Explorer, открыть меню File, выбрать пункт Open file, загрузить созданный файл.

5. Для внесения изменений вернуться к программе Блокнот, внести изменения, сохранить файл.

6. Активизировать Internet Explorer, нажать кнопку «Обновить» [14, с. 512].

Структурные теги HTML-документа определяют начало и окончания разных частей документа. Хотя многие браузеры правильно интерпретируют документ и без них, правила требуют, чтобы структурные теги были включены в документ. На начальном этапе изучения языка HTML эти теги обязательно должны включаться в каждый из создаваемых документов.

Обозначение HTML-документа

<HTML>... < /HTML> - включают в себя все остальные теги HTML и всё информационное содержание документа.

< HTML> располагается в первой строке документа;

< /HTML> - в последней строке.

Заголовок документа

<HEAD>... </HEAD> - содержит информацию о документе.

Название документа

<TITLE>... </TITLE> - название документа, которое отображается в строке заголовка Internet Explorer.

Тело документа

<BODY>...</BODY> - тело документа содержит весь текст с информацией и все теги HTML, которые используются для форматирования текста.

ПРИМЕР (базовая структура HTML-документа)

Файл в формате HTML:

<HTML>

<HEAD>

<TITLE>Моя первая страница HTML</TITLE>

</HEAD>

<BODY>

…

</BODY>

</HTML>

Отображение файла программой-браузером:

Microsoft Internet Explorer и другие браузеры допускают применение атрибутов LEFTMARGIN=«n» и ТОРМАRGIN=«n» в тег <ВОDY>. Атрибут LEFTMARGIN = задаёт левое поле для всей страницы. ТОРМАRGIN= определяет верхнее поле. Число n указывает на ширину поля в пикселях. Например, тег <ВОDY LEFTMARGIN =«40»> создаёт на всей странице левое поле шириной 40 пикселей. При n= 0 левое поле отсутствует [3, с. 320].

1.3 Форматирование текста

Разметка, которая создаётся с помощью языка HTML, позволяет организовывать текст в логические, легко понятные разделы или применять к нему специфический формат. Теги форматирования позволяют определить следующие элементы:

начало абзаца и конец строки;
стили заголовков
физические стили;
логические стили;
списки;
специальные символы.

Тег управления абзацем

... - обозначает начало и конец абзаца.

Атрибуты тега

ALIGN = LEFT | RIGHT | CENTER | JUSTIFY - выравнивает текст внутри абзаца

Пример записи тегу абзаца с атрибутом:

- абзац выравнивается по ширине

Тег управления переходом на новую строку

Тег - начинает новую строку текста в пределах текущего абзаца. Принудительный перевод строки используется для того, чтобы нарушить стандартный порядок отображения текста.

Теги содержательного выделения текста

<BLOCKQUOTE> ... </ BLOCKQUOTE> - позволяет размещать текст на равном расстоянии от границ экрана и создавать отступы слева и справа.

Тег добавляет поля слева и справа от текста и позволяет расположить текст компактно в центре страницы. При использовании <ВLОСKQUOTE> несколько раз текст все больше сжимается к центру.

<CITE> .... </ CITE> - размечает текст как цитату, как правило, курсивом.

Теги стилевого выделения текста

Физические стили - это реальные атрибуты шрифта, такие, как курсив или жирное выделение.

Тег	Значение
<I>...</I>	Курсив (ITALIC)
<B>...</B>	Жирный шрифт (ВОLD)
<ТТ>... </TТ>	Телетайп
<U>...</U>	Подчёркнутый
<S>...</S>	Перечёркнутый текст
< BIG >... </ BIG >	Увеличенный шрифт
< SMALL >...</ SMALL >	Уменьшенный шрифт
< SUB >...</ SUB >	Подстрочные символы
< SUP >... </ SUР >	Надстрочные символы

ГЛАВА 2. ОПИСАНИЕ СОЗДАНИЯ САЙТА

2.1 Гипертекстовые ссылки

Гипертекстовые ссылки являются ключевым компонентом, делающим WEB привлекательным для пользователей. Добавляя гипертекстовые ссылки (далее - ссылки), я делаю набор документов связанным и структурированием, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно.

Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки. Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например, запрашивать файл по FTP-протоколу для отображения его браузером. URL может указывать на специальное место по абсолютному пути доступа, или указывать на документ в текущем пути доступа, что часто используется при организации больших структурированных WEB-сайтов.

Я могу использовать ссылки как для перемещения по документу, так и для перемещения от одного документа к другому. Однако HTML не поддерживает возврат на предыдущую ссылку, если перемещение происходило внутри документа. Если вы используете ссылки внутри документа, а затем нажимаете на клавишу Back, то вы не перейдёте на предыдущую ссылку, а вернётесь на ту часть документа, которую вы просматривали до этого [9, с. 320].

HTML использует URL (Uniform Resource Locator) для представления гипертекстовых ссылок и ссылок на сетевые сервисы внутри HTML-документа. Первая часть URL (до двоеточия) описывает метод доступа или сетевой сервис. Другая часть URL (после двоеточия) интерпретируется в зависимости от метода доступа. Обычно, два прямых слеша после двоеточия обозначают имя машины:

method://machine-name/path/foo.html

Следующий пример представляет собой вызов HTML-документа index.html с сервера www.softexpress.com с использованием HTTP протокола: http://www.softexpress.com/index.html

Uniform Resource Locator имеет следующий формат: method://servername:port/pathname#anchor

Опишу каждый из компонентов URL:

METHOD. Имя операции, которая будет выполняться при интерпретации этого URL. Наиболее часто используемые методы:

file: чтение файла с локального диска. Имя файла интерпретируется для локальной машины пользователя. Данный метод используется для отображения какого-либо файла, находящегося на машине пользователя. Например: file:/home/alex/index.html - отображает файл index.html из каталога /home/alex на пользовательской машине [15, с. 128].

http: доступ к WEB-странице в сети с использованием HTTP-протокола. (Это наиболее часто используемый метод доступа к какому-либо HTML-документу в сети). Например: http://www.softexpress.com/ - доступ к Home-странице компании SoftExpress

ftp: запрос файла с анонимного FTP-сервера. Например: ftp://hostname/directory/filename

mailto: активизирует почтовую сессию с указанным пользователем и хостом. Например: mailto:info@softexpress.com - активизирует сессию посылки сообщения пользователю info на машине softexpress.com, если браузер поддерживает запуск электронной почты. Заметьте, что метод mailto: не требует указание слешей после двоеточия (как правило, после двоеточия сразу идёт электронный адрес абонента) telnet: обращение к службе telnet

news: вызов службы новостей, если браузер её поддерживает. Например: news:relcom.www.support

SERVERNAME. Необязательный параметр, описывающий полное сетевое имя машины. Например: www.softexpress.com - полное сетевое имя сервера фирмы СофтСервис.

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

PORT. Номер порта TCP на котором функционирует WEB-сервер. Если порт не указан, то "по умолчанию" используется порт 80. Данный параметр (port) не используется в подавляющем большинстве URL.

PATHNAME. Частичный или полный путь к документу, который должен вызваться в результате интерпретации URL. Различные WEB-сервера сконфигурированы по разному для интерпретации пути доступа к документу. Например, при использовании CGI скриптов (исполняемых программ), они обычно собираются в одном или нескольких выделенных каталогах, путь к которым записан в специальных параметрах WEB-сервера. Для данных каталогов WEB-сервером выделяется специальный логический путь, который и используется в URL. Если WEB-сервер видит данный путь, то запрашиваемый файл интерпретируется как исполняемый модуль. В противном случае, запрашиваемый файл интерпретируется просто как файл данных, даже если он является исполняемым модулем. Например: http://www.softexpress.com/cgi-win/handle.exe

В данном примере HTTP-сервер должен вызвать CGI-скрипт с именем handle.exe, который находится на машине с сетевым именем www.softexpress.com. Путь к данному скрипту - /cgi-win/ - в действительности является виртуальным путём (выделенным сервером для исполняемых модулей). Заметьте, что при описании пути используется UNIX-подобный синтаксис, где, в отличии от DOS и Windows используются прямые слеши вместо обратных. Если после сетевого имени машины сразу идёт имя документа, то он должен находиться в корневом каталоге на удалённой машине или (что чаще) в каталоге, выделенном WEB-сервером в качестве корневого. Если же URL заканчивается сетевым именем машины, то в качестве документа запрашивается документ из корневого каталога удалённой машины с именем, установленным в настройках WEB-сервера (как правило, это index.html).

#ANCHOR. Данный элемент является ссылкой на строку (точку) внутри HTML-документа. Большинство браузеров, встречая после имени документа данный элемент, размещают документ на экране таким образом, что указанная строка документа помещается в верхнюю строку рабочего окна браузера. Точки, на которые ссылается #anchor, указываются в документе при помощи тэга NAME, как это будет описано далее [3, с. 320].

Структура ссылок в HTML-документе. Пока что мы рассмотрели только внешний вид URL. Для того, чтобы браузер отобразил ссылку на URL, необходимо отметить URL специальными тэгами в HTML-документе. Синтаксис HTML, позволяющий это сделать - следующий:

<A HREF="URL"> текст-который-будет-подсвечен-как-ссылка </A>

Тэг <A HREF="URL">открывает описание ссылки, а тэг </A> - закрывает его. Любой текст, находящийся между данными двумя тэгами подсвечивается специальным образом Web-браузером. Обычно этот текст отображается подчёркнутым и выделен синим (или другим заданным пользователем) цветом. Текст, обозначающий URL, не отображается браузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчёркнутом тексте). Вот пример сегмента HTML-документа:

Для получения примера смотри <a href="http:/www.ruswebmasters.com/index.htm>страницу </a>

Данная строка будет выглядеть на экране следующим образом:

Ссылки на точки внутри документа. Вы можете делать ссылки на различные участки или разделы одного и того же документа, используя специальных скрытый маркер для этих разделов. Это позволяет быстро переходить от раздела к разделу внутри документа, не используя прокрутку экрана. Как только вы щёлкнете на ссылке, браузер переместит вас на указанный раздел документа, а строка, в которой стоит маркер данного раздела (обычно, первая строка раздела или заголовок раздела) будет размещена на первой строке окна браузера (если данная строка не присутствует уже на экране браузера).

Для создания такой ссылки необходимо выполнить следующие шаги:

1. Создайте маркер раздела. Синтаксис данного маркера следующий:

<A NAME=«named_anchor»> Текст-который-отобразится-в-первой-строке </A>

2. Создайте ссылку на данный маркер:

<A HREF=«#named_anchor»> Текст </A>

Например:

Список разделов <ul> <li><a href=«#ex1»>Раздел 1</a></li> <li><a href=«#ex2»>Раздел 2</a></li> </ul> <a name=«ex1»></a>Раздел 1 <ul> Текст раздела 1 </ul> <a name=«ex2»></a>Раздел 2 <ul> Текст раздела 2

Символы «#ex1» сообщает вашему браузеру, что необходимо найти в данном HTML-документе маркер с именем «ex1».

Когда пользователь щёлкнет мышью на строке «Раздел 1», браузер перейдёт сразу к разделу 1.

2.2 Графика внутри документа

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

Нумерованный список образуют с помощью тега–контейнера <OL>...</OL>. Каждый элемент списка начинается с тега <LI>. Список может иметь заголовок, который охватывается парным тегом <LH>...</LH>. Схематично нумерованный список имеет такой вид:

<LH> заголовок списка </ LH>

<OL>

<LI> Первый пункт списка

<LI> Второй пункт списка

<LI> Третий пункт списка

..............................................

</OL>

Тэг <OL> может иметь параметр TYPE, который задаёт стиль нумерации. Возможны следующие значения параметра TYPE :

I – нумерация большими Римскими цифрами (I, II, III...);

i – нумерация малыми Римскими цифрами (i, ii, iii...) ;

a – нумерация малыми латинскими буквами (а, b, c...);

А – нумерация большими латинскими буквами (A, B, C...);

1 – нумерация малыми арабскими цифрами (1, 2, 3...).

В маркированный списках для выделения его элементов используют специальные символы, называемые маркерами списка. Для создания маркированного списка используют тег–контейнер <UL>...</UL>, внутри которого размещают все элементы списка. Каждый элемент списка начинается с тега <LI>. Схематично маркированный список имеет такой вид:

<UL>

<LI> Первый пункт списка

<LI> Второй пункт списка

<LI> Третий пункт списка

.................................

</UL>

Тег <UL> может быть параметр TYPE, который определяет внешний вид маркера. Типичными значениями маркера являются следующие:

TYPE=disc – маркеры отображаются закрашенными кружками;
TYPE= circle – маркеры отображаются не закрашенными кружками;
TYPE=square – маркеры отображаются закрашенными квадратиками.

Например:

<LI> Первый пункт списка

<LI> Второй пункт списка

<LI> Третий пункт списка

..................................

</UL>

Для создания встроенных изображений в HTML–документе необходимо использовать тег IMG, который имеет один обязательный параметр SRC, который указывает на URL–файла с изображением. Самый простой пример встраивания изображения:

<IMG SRC= «picture.gif» >.

Для доступа к удалённым файлам, которые есть на серверах в сети Internet, адрес записывают со значением названия протокола доступа http и адреса файла. Например:

<IMG SRC= «http://www.lac.lviv.ua/pic.gif»>.

Тег <IMG> может иметь ряд других параметров. Важнейшими являются следующие.

HEIGHT и WIDTH – определяют соответственно ширину и высоту изображения; (значения параметров можно задавать как в пикселях, так и в процентах от размеров окна просмотра).Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется.

HSPACE и VSPACE - определяют отступление картинки (в пикселях) по горизонтали и вертикали от других объектов документа (используются при обтекании изображения текстом).

ALIGN - указывает способ выравнивания изображения в документе.

NAME - определяет имя изображения, уникальное для данного документа.

ALT - определяет текст с описанием изображения, отображаемого браузером на месте изображения, если браузер не может найти файл с изображением или, если отключено графический режим.

BORDER - определяет ширину рамки вокруг изображения (в пикселях). По умолчанию рамка вокруг изображения не отображается. Исключением является случай, если изображение является гипертекстовой ссылке. В таких случаях значение BORDER обычно указывают нулю.

Для описания фонового изображения используется параметр BACKGROUND тэга BODY, значением которого является имя файла, в котором содержится фоновое изображение. Например:

<BODY BACKGROUND = «picture.gif»>.

К моменту загрузки изображения и отображения фонового изображения цвет фона определяется значением параметра BGCOLOR.

Чтобы задать цвета ссылок, необходимо включить в тег <BODY> соответствующий параметр (LINK, ALINK, VLINK). Цвет задаётся шестизначным числом в шестнадцатеричном формате по схеме RGB (Red, Green, Blue). Например: <BODY BGCOLOR = «# 000000» TEXT = «# FFFFFF» LINK = «# 9690CC»>. Данная строка определяет белый цвет фона документа, чёрный текст и серебристые ссылки [5, с. 736].

2.3 Добавление стилей в документ

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

bold (жирный)

italic (наклонный)

mono spaced (type writer - с использованием фиксированных шрифтов)

Я могу комбинировать различные виды стилей, например жирный и наклонный.

Таблица 2.1

Основные стили текста

Стиль	Элемент или тэг	Результат
Bold	<B> Этот текст жирный </B>	Этот текст жирный
Italic	<I> Этот текст наклонный </I>	Этот текст наклонный
Mono spaced	<TT> Этот текст с непроп. шрифтом </TT>	Этот текст с непроп. шрифтом

Комбинирование стилей позволяет вам отображать в одной строке несколько элементов различными стилями, например:

Жизнь - это песня!

Жизнь - это песня!

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

Дополнительные стили:

big (большой)
small (маленький)
sub (подстрочник)
sup (надстрочник)

Таблица 2.2

Дополнительные стили текста

Стиль	Элемент или тэг	Результат
Big	Этот текст <BIG> большой </BIG>	Этот текст большой
Small	Этот текст <SMALL> маленький </SMALL>	Этот текст маленький
Sub	Этот текст <SUB> подстрочник </SUB>	Этот текст подстрочник
Sup	Этот текст <SUP> надстрочник </SUP>	Этот текст надстрочник

Размер шрифта . Вы можете изменять размер шрифта при помощи тэга:

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

Например: и зм ен ен и е

Изменение цвета шрифта . Вы можете изменить цвет шрифта при помощи тэга:

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

Красный Зелёный Синий.

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

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

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

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

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

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

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

Таблица 2.3

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

Количество цветов	Объём GIF-файла	Уменьшение объёма (раз)	Оценка качества изображения по сравнению с начальной
128	74,6	1,00	Начальная
64	49	1,52	Почти начальная
32	37,3	2,00	Удовлетворительная
16	27,8	2,68	Неудовлетворительная
8	18,8	3,97	Плохая
4	12,3	6,07	Неприемлема
2	6,2	12,03	Неприемлема

Как видно из этой таблицы, неудовлетворительное качество появляется при уменьшении палитры цветов до 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

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

Формат	Размер файла (Кбайт)	Уменьшение по сравнению с форматом PNG (раз)
PNG	36,7	1
JPEG	3,3	11,1
GIF	1,42	25,8
SVG	0,415	88,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

Параметры изображения		Рекомендуемый формат	Пример
Размер	Небольшой	GIF	Текст, логотипы, баннеры, векторные рисунки, фоновые изображения, которые повторяются
Размер	Большой	JPEG	Фотографии, фоновые изображения
Количество цветов	До 256	GIF	Текст, логотипы, баннеры, векторные рисунки
	Большое	JPEG	Фотографии
	Очень большое	PNG	Высококачественные фотографии
Прозрачные участки	Есть	GIF, PNG	Текст, логотипы, баннеры, векторные рисунки, фотографии
Прозрачные участки	Нет	GIF, JPEG	Фотографии
Участки с чёткими краями	Есть	GIF, PNG	Текст, логотипы, баннеры, векторные рисунки
Участки с чёткими краями	Нет	JPEG	Фотографии
Анимация	Есть	GIF,	Баннеры
Анимация	Нет	GIF, JPEG	Текст, логотипы, баннеры, векторные рисунки, фотографии

Но, несмотря на приведённые общие характеристики графических форматов для 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 с.

14. Орлов Л. В. Web-сайт без секретов. / Л. В. Орлов. – 2-е изд. – М.: Бук-пресс, 2016. – 512 с.

15. Якушев, Л. В. Начинаем работать в Интернет. Краткое руководство. – М.: Издательский дом "Вильяме", 2006. —128 с.