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

Актуальность. В век цифровых технологий и массовой компьютеризации, интернет стал неотъемлемой частью нашей жизни, а 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-сайтов.