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

ВУЗ: Не указан

Категория: Курсовая работа

Дисциплина: Не указана

Добавлен: 28.03.2023

Просмотров: 122

Скачиваний: 2

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

Некоторые параметры определены браузером по умолчанию, некоторые- пользователем браузера, а также есть и такие, определить которые необходимо непосредственно при создании страницы (к примеру, тот же параметр href для тэга <a>).

Из всего следует, что зная наиболее употребляемые программные тэги, их параметры, практически любой пользователь легко редактирует и создает гипертекст. [3]

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

Структура любого гипертекстового файла чрезвычайно проста (рисунок 5).

HTML-файл должен начинаться тэгом под названием <html> и заканчиваться закрывающимся тегом </html>.

Рисунок 5 – Структура 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

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

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

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

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

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

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

<HTML>

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

<HEAD>

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

<TITLE>

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

</TITLE>

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


</HEAD>

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

<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>

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

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

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

</body>

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

</HTML>

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

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

<HTML>

<HEAD>

<TITLE>

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

Интернет магазин [7]

</TITLE>

</HEAD>

<body>

<img src="mc1.jpg">

<hr>

<center><h1>Информация о фирме</h1></center> [2]

<hr><pre>

<b>1.1 Вводная часть</b>

<font size=2 face=Arial>Лакокрасочные материалы имеют две основные функции: декора¬тивную и защитную. Они защищают дерево от гниения, металл - от кор¬розии, образуют твердые защитные пленки, предохраняющие изделия от разрушающего влияния атмосферы и других воздействий и удлиняющие срок их службы, при этом придают изделиям красивый внешний вид. [11]

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

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

</font><b>1.2 Общие понятия</b>

Лакокрасочные материалы классифицируют по химическому составу, виду и преимущественному назначению материала.

К лакокрасочным материалам относятся лаки, краски, эмали, грун¬товки, шпатлевки.

Для облегчения восприятия определений лакокрасочной продук¬ции вводятся следующие понятия: [5]

Дисперсные системы - это микронеоднородные системы, состоя¬щие из двух или большего числа фаз, одна из которых - дисперсная фаза -обладает достаточно высокой дисперсностью и распределена в другой фа¬зе (в окружающей дисперсионной среде) - газе, жидкости или твердом те¬ле - в виде мелких частиц. [9]

Дисперсность - степень раздробленности вещества на частицы. 1ем мельче частицы, тем больше дисперсность. На практике размер частиц дисперсных систем находится в пределах от 0,001 до 0,00001 см.

К дисперсиям относятся: [5]

<ol>

<li>Суспензии - системы, в которых частицы твердой фазы распределе¬ны в жидкой среде во взвешенном состоянии. Суспензиями являются го¬товые краски, шпатлевки.

<li>Эмульсии - системы, в которых мельчайшие капельки жидкой фазы распределены в жидкой среде. Примерами эмульсий могут служить кровь, молоко. [20]

<li>Истинные растворы — системы переменного состава из двух и бо¬лее компонентов. Раствор называется истинным потому, что вещества действительно и самопроизвольно растворяются в подходящем раствори¬теле с образованием гомогенной (однородной) системы. К истинным рас¬творам относятся, например, растворы в воде соды, спирта, кислоты.

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

<li>Краски ~ суспензии пигментов или их смеси с наполнителями в олифе, эмульсии, латексе, образующие после высыхания однородную не¬прозрачную твердую окрашенную пленку.

<li>Эмаль - суспензия пигмента или смеси их с наполнителями в лаке с введением сиккативов, растворителей и других добавок, образующие по¬сле высыхания непрозрачную твердую окрашенную пленку. [1]

<li>Грунтовка - суспензия пигмента или смеси пигментов и наполни¬телей в связующем веществе. Образующая после высыхания однородную непрозрачную пленку с хорошей адгезией к подложке (адгезия — прилипа¬ние, сцепление). Грунтовки образуют нижние слои покрытий, создавая на¬дежное сцепление верхних слоев покрытия с окрашиваемой поверхно-стью. Кроме того, они защищают металл от коррозии, выделяют структуру древесины, закрывают поры материала, выравнивают и создают однород¬ную поверхность перед окраской. [2]

<li>Шпатлевка (шпатлевочная масса, подмазка) - густая, вязкая масс состоящая из пигментов, наполнителей или их смеси в олифе, лаке ил' другом связующем веществе с введением добавок или без них, наносимая для заполнения неровностей и углублений, сглаживания неровностей ок¬рашиваемой поверхности.

<li>Разные материалы - к этим материалам относятся смывки - жид¬кости для снятия, удаления старых лакокрасочных покрытий, пасты по¬лировочные, шлифовочные, уплотнительные, составы полирующие, ней¬трализующие, моечные, а также замазки, уплотнители, ускорители, отвердители, мастики. [5]

</ol>

</pre>

<a href="Исходная.html"><img align="right" src="back.jpg"></a>

</body>

</HTML>