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

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

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

Объект – язык программирования HTML.

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

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

Задачи:

Раскрыть основные сведения о языке HTML;
Рассмотреть процесс создания сайта, выделить основные компоненты;
Создать веб-сайт на основе используемой информации в данной курсовой работе.

Структура: работа состоит из введения, трех глав, заключения и списка использованной литературы.

1.Основные сведения о языке программирования

1.1.О языке HTML

Hyper Text Markup Language (HTML) - стандартный язык, предназначенный для создания гипертекстовых документов в сети интернет. Данный язык поддерживается всеми современными веб-браузерами. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любом ПО для просмотра веб –страниц.

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

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

HTML-теги могут быть условно разделены на две категории:

1. Основные теги, определяющие, как будет отображаться Веб-браузером тело документа в целом.

2. Вспомогательные теги, описывающие общие свойства документа, такие как заголовок или автор документа.

1.2.Создание Веб-сайта

Для создания и редактирования HTML документа может быть использован любой текстовый редактор. Существуют профессиональные решения, упрощающие (например: выделение тегов, автозаполнение и т.д.) написание веб-сайта. Так же, большинство современных редакторов имеют возможность преобразования текста в формат HTML.

На рынке так же существуют автоматические решения, так называемые конструкторы сайтов, на которых создание сайта сводится к выбору из готовых модулей.

1.3.Основные принципы HTML

HTML-документ невозможен без тегов. Все теги HTML документа состоят из:

“<” Левой угловой скобки
Название тега
“>” правой угловой скобки

В основном, для всех тегов используют закрывающий тег, аналогичный стартовому, но имеющий перед названием тега прямым слешем “/”.

Разберем для примера тег “<h1>”, используемый для обозначения заголовка первого уровня. Регистр букв при написании тега не имеет значения. В коде HTML файла данный тег будет выглядеть так:

<h1> Заголовок первого уровня</h1> или <H1> Заголовок первого уровня</H1>

Для некоторых тегов, например: <p>, <li>,<dt> и др. не требуют закрывающего тега, но поставить его будет хорошим тоном. Это придает коду структурируемость и читаемость.

Все символы разметки (пробелы, символы табуляции, возврат каретки и т.д.) добавленные снаружи тега, не будут интерпретироваться веб-браузером.

1.4.Структура документа

В начале каждого HTML-документа, на первом месте должен находится элемент <!DOCTYPE>, для самой современной (5) версии зыка HTML данный элемент будет выглядеть следующим образом: <!DOCTYPE html>. Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы веб-браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.^[1]

После элемента <!DOCTYPE> ставится тег <HTML>, который является контейнером и заключает в себя все содержимое веб-страницы. Самый простой документ должен выглядеть так:

<!DOCTYPE html>

<HTML>

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

</HTML>

Внутри тега <HTML> ставится тег заголовочной части <HEAD>. Данный тег используется для хранения элементов, которые помогут веб-браузеру в работе с данными. В данном теге не допускается размещение текста, только другие теги, например тег заголовка </TITLE>. Пример использования:

<!DOCTYPE html>

<HTML>

<HEAD>

<TITLE> Заголовок </TITLE>

</HEAD>

</HTML>

Заголовочный тег <TITLE> используется для отображения информации в заголовке сайта или в файле закладок. Данный тег требует закрытия тегом </TITLE> и располагается всегда внутри тега <HEAD>.

1.5. Теги тела документа

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

Для структурного разделения текста в теле документа используется тег заголовка <H>. Данный тег стандартно имеет 6 уровней. Заголовки более высокого уровня могут не поддерживаться веб-браузером и, обычно, не используются. Уровни начинаются с первого, самого большого <H1> и заканчиваются <H6>, закрывающий тег соответственно выглядит </Hx>, где x – уровень заголовка.

Веб-браузер, при открытии HTML документа игнорирует символ абзаца, данный символ моет быть использован при создании документа, для удобства его редактирования. Веб-браузер же ориентируется на тег абзаца <P>. Данный тег не требует закрытия. Без использования данного тега – текст будет сплошным.

К тегу <P> могут применены универсальные дополнительные параметры. Либо собственный параметр ALIGN, позволяющий выравнить абзац по выбранному краю или центру окна. Пример:

Для центрирования любых элементов документа моно использовать тег <CENTER>, закрывающий тег - </CENTER>. Элементы, находящиеся внутри данного тега, будут расположены в центре окна.

Для более явного форматирования текста используется тег <PRE>, закрывающий тег </PRE>. Текст, помещенный внутри данного тега, будет поддерживать следующие способы форматирования:

Перевод строки
Табуляция
Произвольный шрифт, устанавливаемый браузером

При помещении тега заголовка внутри тега <PRE>, он будет игнорироваться веб-браузером.

Для разрыва строки используют тег <BR>. Следующий после этого тега текст будет выведен на новой строке. Данный тег не требует закрытия.

С помощью дополнительных параметров, например < BR CLEAR = left|right|all> дает выбрать с какой стороны ( left – левый край веб-страницы, right – правый край, all – с двух краев).

Для предотвращения автоматического переноса веб-браузером строки и используют тег <NOBR>. При использовании данного тега, даже если строка не будет влезать в экран, браузер позволит горизонтально прокручивать окно. Для разбития строки в определенном месте используют тег <WBR>.

При использовании цитаты, стоит воспользоваться тегом <BLOCKQUOTE>. Текст, выделенный данным тегом, будет иметь отступ размером в 8 пробелов с левого края.

Пример использования ранее разобранных HTML-тегов:

<!DOCTYPE html>

<HTML>

<HEAD>

<TITLE> Пример</TITLE>

</HEAD>

<BODY>

<H1> Заголовок первого уровня </H1>

<CENTER><H2> Заголовок второго уровня по центру</H2></CENTER>

<P ALIGN = center>Первый абзац по центру.

<P>Второй абзац.

<PRE>Неформатированный

текст</PRE>

<BLOCKQUOTE>Знание фактов только потому и драгоценно, что в фактах скрываются идеи; факты без идей — сор для головы и памяти.

<BR>В. Белинский</BLOCKQUOTE>

<NOBR>ТекстТекстТекстТекстТекстТекстТекстТекстТекст<WBR>ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст</NOBR>

</BODY>

</HTML>

Рисунок 1. Пример использования ранее разобранных HTML-тегов

2. Описание создания сайта

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

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

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

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

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 на пользовательской машине
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