Файл: Основы программирования на языке HTML (Язык HTML ).pdf

Расширения XML – это конкретная грамматика, которая создана на базе XML, представленная словарём тегов, а также их атрибутов, набором правил, что определяют какие атрибуты и объекты могут входить в состав иных элементов.

Сочетание простого формального синтаксиса, а также удобства для расширяемости, человека, базирование на кодировках Юникод для представления содержания веб-документов привело к широкому применению как собственно XML, так и совокупности производных специализированных языков в самых разнообразных средствах для создания программ. [12]

2.2.3. Язык DHTML

DHTML, он же Dynamic HTML - технология создания интерактивных HTML-страниц, реагирующих на действия пользователя.

В отличие от обычного HTML, который, по своей сути, статичен (имеется в виду HTML 4), DHTML позволяет динамически изменять страницу с учётом действий пользователя. Классические примеры использования DHTML - это различные выпадающие меню на сайтах, разворачивающиеся по клику пользователя панели и древовидные списки, и т. п. Технически Dynamic HTML реализуется с помощью JavaScript, CSS и DOM. [8 ]

Не следует путать динамические HTML-страницы с динамическими сайтами. Первые являются динамическими только в контексте браузера, которым их открывает пользователь. Вторые являются динамическими и в контексте сервера, так как динамические сайты - это полноценные web-приложения, которые выполняются на сервере и могут работать с базами данных, осуществлять обработку пользовательских данных и делать прочие подобные вещи. Использование DHTML не исключает использования серверного скриптинга, позволяющего создавать динамические web-сайты, так как движок приложения, расположенный на сервере, никак не зависит от того, реализован интерфейс этого приложения с использованием динамического HTML или статического. [3]

Не стоит путать также DHTML и AJAX, так как эти технологии имеют различную суть и природу, хотя и есть у них определённое внешнее сходство. AJAX позволяет не перезагружать открытую пользователем страницу целиком при внесении в неё каких-либо небольших изменений сервером, а ограничиться загрузкой только небольшого фрагмента, что достигается обменом XML-данными с сервером в "фоновом" режиме. AJAX-страницы для придания им большей интерактивности реализуются с использованием DHTML, однако DHTML-страницы совершенно не обязательно используют AJAX. [4]. Использование DHTML связано с определёнными сложностями для разработчиков, которые создают web-страницы, так как необходимо отлаживать JavaScript и взаимодействие с DOM для каждого браузера в отдельности. Впрочем, сегодня существует немалое количество JavaScript-библиотек, которые существенно упрощают жизнь создателям DHTML-страниц. [6]

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

3. ПРАКТИЧЕСКОЕ ИСПОЛЬЗОВАНИЕ ЯЗЫКА HTML

3.1. Описание основных тегов HTML

Любой документ начинается с заголовка, который может быть разного размера. Существует шесть уровней заголовков в HTML: <h1>, <h2>, <h3>, <h4>, <h5> и <h6>. При отображении любого заголовка, браузер добавляет одну строку до и одну строку после этого заголовка. [8 ]

HTML предлагает способ структурирования текста в разные абзацы с помощью тега <p>. Каждый абзац текста должен находиться между открывающим <p> и закрывающим тегом </p>

– <P> и </P> - теги, служащие для выделения абзацев. Новый абзац всегда отделяется от предыдущего пустой строкой.

– <BR> - тег, служащий для переноса текста на другую строку. Может также служить для отделения графики от текста на интервал. [13]

– <HR> - тег, служащий для логического разделения текста горизонтальной линией.

– <PRE> и </PRE> - Между этими тегами располагается предварительно отформатированный текст.

Параметры выравнивания используются в <P> и <H>

– ALIGN=LEFT - выравнивание по левому полю;

– ALIGN=RIGHT - выравнивание по правому полю;

– ALIGN=CENTER - выравнивание по центру.

Теги выравнивания имеют вид: [17]

– <LEFT> и </LEFT> - выравнивание по левому полю;

– <RIGHT> и </RIGHT> - выравнивание по правому полю;

– <CENTER> и </CENTER> - выравнивание по центру.

Заголовки, служащие для выделения логических частей текста имеют вид:

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

– <H2> и </H2> - Заголовок второго уровня.

– <H3> и </H3> - Заголовок третьего уровня.

– <H4> и </H4> - Заголовок четвертого уровня.

– <H5> и </H5> - Заголовок пятого уровня.

– <H6> и </H6> - Заголовок шестого уровня.

Теги для выделения текста и шрифта имеют вид: [18]

– <B> и </B> - теги для выделения текста (слов, букв) жирным шрифтом.

– <I> и </I> - теги для выделения текста (слов, букв) курсивным шрифтом, типа Italic.

– <U> и </U> - текст, расположенный между двумя этими тегами, будет подчеркнут.

– <BLINK> и </BLINK> - текст, расположенный между двумя этими тегами, будет мигать.

– <FONT SIZE=n>и</FONT> - теги для изменения размера шрифта (где n - размер шрифта в пикселях px).

– <FONT COLOR="#FFFFFF"> и </FONT> - теги для изменения цвета шрифта.

Теги для формирования списков: [9]

– <OL> и </OL> - теги, показывающие начало и конец нумерованного списка;

– <UL> и </UL> - теги, показывающие начало и конец маркированного списка;

– <LI> - Элемент списка.

– <DL> и </DL> - теги, показывающие начало и конец глоссария.

– <DT> - Термин глоссария, располагается без отступа от левого поля страницы.

– <DD> - Описание термина, располагается с отступом от левого поля страницы.

Теги-команды для вставки в текст объектов не текстовой информации: [1]

– <IMG SRC="file.gif"> или <IMG SRC="file.jpg"> - команда для вставки графического изображения;

– <IMG SRC="file.wav"> - команда для вставки звукового фрагмента;

– <IMG SRC="file.avi"> - команда для вставки видео фрагмента.

Параметры графического изображения имеют вид: [8]

– WIDHT - ширина картинки в пикселях;

– HEIGHT- высота картинки в пикселях;

– ALIGN - выравнивание (ALIGN=LEFT - выравнивание по левому полю, ALIGN=RIGHT - по правому полю, ALIGN=TOP - по верхней границе, ALIGN=BOTTOM - по нижней границе, ALIGN=MIDDLE или CENTER - по центру);

– HSPACE - горизонтальный отступ от графического изображения;

– VSPACE - вертикальный отступ;

– ALT - альтернативный текст, служит для обозначения изображения.

Команды, служащие для гиперсвязи с другими HTML-документами и ресурсами Интернет: [9]

– <A HREF="fail.htm">и</A>или<A HREF="http://www.ru">и</A> - гиперсвязи;

– <ADDRESS><A HREF="mailto:nick@mail.ru">nick@mail.ru </ADDRESS>- гиперсвязь с адресом электронной почты.

Таблица - сетка для показа данных в строках и столбцах, а также средство для форматирования текста:

– <TABLE> и </TABLE> - теги для вставки таблицы в HTML документ.

Параметры тега <TABLE>:[7]

– BGCOLOR - цвет фона;

– BORDER - ширина бордюра;

– WIDHT - ширина таблицы.

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

Приведем пример использования языка разметки HTML для создания логической структуры сайта «Электронный магазин» (рисунок 6):

Рисунок 6 – Структура сайта

Стоит отметить, что при создании сайта будут созданы несколько веб-страниц, которые в результате будут объединены в одну логическую структуру. [13]

Рассмотрим создание веб-страницы «Исходная».

Для этого нужно ввести код:

<!начало создания веб-страниц>

<HTML>

<!заголовок страниц>

<HEAD>

<!название страницы>

<TITLE>

Интернет магазин

</TITLE>

<!закрытие тега заголовка>

</HEAD>

<!создание тела страницы>

<body>

<!вставка логотипа>

<img src="mc1.jpg">

<!вставка горизонтальной линии>

<hr>

<!вставка гиперссылки на страницу Фирма>

<a href ="Фирма.html"><img src="auto.jpg" border="2"></a><br><br>

<!вставка гиперссылки на страницу Предложения>

<a href ="Предложения.html"><img src="offers.jpg" border="2"></a><br><br>

<!Вставка гиперссылки на страницу Гостевая>

<a href ="Гостевая.html"><img src="gbook.jpg" border="2"></a><br>

<!закрытие тела страницы>

</body>

<!окончание веб-страницы>

</HTML>

В результате выполненных действий получим (рисунок 7).

Рассмотрим код страницы, которая откроется после нажатия на гиперссылку О нашей фирме:[6]

Рисунок 7 – Созданная страница Исходная

Получим (рисунок 8):

Рисунок 8 – Страница с информацией о фирме

Страница с предложениями имеет такой код:

Результат отображения кода в браузере (рисунок 9):

Рисунок 9 – Страница с предложениями

Страница Гостевая книга создана с использованием следующего программного кода: