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

– заголовок(меньшаячасть);

– основнаячастьдокумента.

2.2.2. Язык ХML

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

XMLбылразработанкакязыксдостаточнопростымформальнымсинтаксисом,которыйудобныйдляобработкиисозданиядокументовпрограммами,атакжеодновременноудобныйдлясозданияичтениядокументовчеловеком,сподчёркиваниемиспользованияеговИнтернете.[4]

Языкназываютрасширяемым,посколькуоннефиксируетразметку,чтоиспользуетсявдокументах:разработчикможетсоздатьразметкувсоответствиисегопотребностямикопределеннойобласти,будучиограниченнымтолькосинтаксическимиправиламиязыка.[11]

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

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

2.2.3. Язык DHTML

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

ВотличиеотобычногоHTML,который,посвоейсути,статичен(имеетсяввидуHTML4),DHTMLпозволяетдинамическиизменятьстраницусучётомдействийпользователя.КлассическиепримерыиспользованияDHTML-эторазличныевыпадающиеменюнасайтах,разворачивающиесяпокликупользователяпанелиидревовидныесписки,ит.п.ТехническиDynamicHTMLреализуетсяспомощью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]

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

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

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

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

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

<HTML>

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

<HEAD>

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

<TITLE>

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

</TITLE>

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

</HEAD>

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

<body>

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

<imgsrc="mc1.jpg">

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

<hr>

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

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

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

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

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

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

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

</body>

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

</HTML>

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

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

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

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

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

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

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

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

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