Файл: Проведение анализа основных понятий языка гипертекстовой разметки HTML, его использования для реализации обработки данных.pdf
Добавлен: 15.05.2023
Просмотров: 224
Скачиваний: 3
СОДЕРЖАНИЕ
1.ТЕОРЕТИЧЕСКИЕ ПОНЯТИЯ КЛАССИЧЕСКОЙ ТЕОРИИ ЯЗЫКОВ ПРОГРАММИРОВАНИЯ
1.1. Определение языка программирования
1.2. Этапы развития языков программирования
2.1. Понятие гипертекста, история его развития
2.2. Описание языков гипертекстовой разметки
3.ПРАКТИЧЕСКОЕ ИСПОЛЬЗОВАНИЕ ЯЗЫКА HTML
3.1. Описание основных тегов HTML
3.2. Практическое применение языка гипертекстовой разметки HTML
HTML - стандартный сервис Интернет, принятый консорциумом www (W3C). На теперешний день последней является 5-я версия стандарта, переработанная и дополненная по сравнению с версией 4.
На самом деле, если открыть файл с расширением htm (html) в любом текстовом редакторе, можно увидеть, что это обычный текст, правда "оформлен" какими-то словами в специальных угловых скобках. [8]
Такие слова и представляют собой инструменты разметки текста, которые может понимать понимает программа, что работает с html-файлами.
Похожий принцип построения документов не новый, и встречается, к примеру, в текстовом редакторе TeX.
То есть html – обычный текст (информация) с управляющими элементами-тэгами (удобное представление данной информации). [9]
Для того, чтобы разработать гипертекст, надо всего только знать, как, куда и как именно "вносить" эти управляющие компоненты.
Тэги – это средство, что позволяет браузеру предоставить имеющуюся информацию в виде, который удобен для восприятия, поиска, чтения информации.
Это – язык программирования, что определяет, как именно будет выглядеть следующая строка на экране, что нужно выделять, а что нет необходимости подчеркивать.
Тэгом считается специальное выражение, помещенное в специальные скобки вида <>.
Весьма условно такие тэги можно разделять на граничные или унарные.
Унарные тэги представляются очевидными операциями, предписывающие браузеру совершать определенное действие непосредственно по постижению тэга при обработке html - документа. [14]
К примеру, наиболее часто употребляемый в интернете тэг <BR> - переход на иную строку, весь следующий гипертекст за ним браузер будет представлять с новой строки.
Унарные тэги могут не относится к определенным участкам текстовой информации, а к всей последующей части html-документа.
Стоит отметить, что с граничными тегами немного сложнее, но надо также учитывать, что их больше, нежели унарных. [2]
Граничными тэгами определяется, как именно будет выглядеть на экране часть текста, что определена этими элементами, в начальном тэге можно также указывать различные параметры и определенные данному тэгу, для конечного тэга – эти параметры не должны присутствовать (браузером они игнорируются).
Пример граничного тэга имеет вид: [7]
<a href="http://mail.ru/">Почтовый сервер</a>
Тут a – управляющее слово (тег), показывающие, что текст до тега </а>, является гипертекстовой ссылкой (указанием браузеру просмотреть html - документ при совершении действия (например, щелчка мыши) над текстом); href="..." – параметр, определяющий, какой именно документ будет просмотрен (может быть обычный файл на ПК).
Некоторые параметры определены браузером по умолчанию, некоторые- пользователем браузера, а также есть и такие, определить которые необходимо непосредственно при создании страницы (к примеру, тот же параметр href для тэга <a>).
Из всего следует, что зная наиболее употребляемые программные тэги, их параметры, практически любой пользователь легко редактирует и создает гипертекст. [3]
При этом надо учитывать, что тэги включают в себя другие тэги, но так же нужно иметь представление о структурной схеме html - документов.
Структура любого гипертекстового файла чрезвычайно проста (рисунок 6).
HTML-файл должен начинаться тэгом под названием <html> и заканчиваться закрывающимся тегом </html>.
|
<html> |
|
<head> |
|
<title> |
|
Моя страница |
|
</title> |
|
</head> |
|
<body> |
|
Добрый день! |
|
<br> |
|
Страница |
|
</body> |
|
</head> |
Рисунок 6 – Структура HTML-файла
Информация вне тэгов игнорируется или выдается в возможном обработанном браузере виде. Код, огражденный тегами <html> или </html> делится на 2 части: [8]
– заголовок (меньшая часть);
– основная часть документа.
2.2.2. Язык ХML
XML – расширяемый язык разметки. Он рекомендован Консорциумом Всемирной паутины. Спецификация XML описывает так называемые XML-документы и поведение XML-процессоров (специальных программ, читающих созданные XML-документы и обеспечивающие доступ к их непосредственному содержимому). [3]
XML был разработан как язык с достаточно простым формальным синтаксисом, который удобный для обработки и создания документов программами, а также одновременно удобный для создания и чтения документов человеком, с подчёркиванием использования его в Интернете. [4]
Язык называют расширяемым, поскольку он не фиксирует разметку, что используется в документах: разработчик может создать разметку в соответствии с его потребностями к определенной области, будучи ограниченным только синтаксическими правилами языка. [11]
Расширения 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
Перейдем к практике и с использованием блокнота соберём web-станицу с использования языка разметки HTML.Открываем блокнот и копируем следующий текст.
<html>
<head>
<title> Практическое применение языка гипертекстовой разметки HTML </title>
</head>
<body bgcolor="lightgrey">
<IMG SRC="http://my.megacampus.ru/skin/general/img/1_logo_mc_all.png">
<center><h1>Заголовок h1 </h1></center>
<center><h2>Заголовок h2 </h2></center>
<center><h3>Заголовок h3 </h3></center>
<center><h4>Заголовок h4 </h4></center>
<center><h5>Заголовок h5 </h5></center>
<center><h6>Заголовок h6 </h6></center>