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

Не стоит путать также 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]

	<HTML>
	<HEAD>
	<TITLE>

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

	Интернет магазин [7]
	</TITLE>
	</HEAD>
	<body>
	<img src="mc1.jpg">
	<hr>
	<center><h1>Информация о фирме</h1></center>
	<hr><pre>
	<b>1.1 Вводная часть</b>
	<font size=2 face=Arial>Лакокрасочные материалы имеют две основные функции: декоративную и защитную. Они защищают дерево от гниения, металл - от коррозии, образуют твердые защитные пленки, предохраняющие изделия от разрушающего влияния атмосферы и других воздействий и удлиняющие срок их службы, при этом придают изделиям красивый внешний вид.
	По сравнению с металлическими покрытиями, нанесенными лужением, никелированием, хромированием и т.д., лакокрасочные покрытия наиболее долговечны, для их нанесения не требуется дополнительное, сложное оборудование, и они легче возобновляются. Поэтому такие покрытия широко применяются в быту, во всех отраслях промышленности, на транспорте и строительстве.
	Свойства лакокрасочных покрытий зависят не только от качества применяемых лакокрасочных материалов, но и от таких факторов, как способ подготовки поверхности к окраске, правильный выбор и соблюдение технологического режима окраски и сушки.
	</font><b>1.2 Общие понятия</b>
	Лакокрасочные материалы классифицируют по химическому составу, виду и преимущественному назначению материала.
	К лакокрасочным материалам относятся лаки, краски, эмали, грунтовки, шпатлевки.
	Для облегчения восприятия определений лакокрасочной продукции вводятся следующие понятия:
	Дисперсные системы - это микронеоднородные системы, состоящие из двух или большего числа фаз, одна из которых - дисперсная фаза -обладает достаточно высокой дисперсностью и распределена в другой фазе (в окружающей дисперсионной среде) - газе, жидкости или твердом теле - в виде мелких частиц. [9]
	Дисперсность - степень раздробленности вещества на частицы. 1ем мельче частицы, тем больше дисперсность. На практике размер частиц дисперсных систем находится в пределах от 0,001 до 0,00001 см.
	К дисперсиям относятся:
	<ol>
	<li>Суспензии - системы, в которых частицы твердой фазы распределены в жидкой среде во взвешенном состоянии. Суспензиями являются готовые краски, шпатлевки.
	<li>Эмульсии - системы, в которых мельчайшие капельки жидкой фазы распределены в жидкой среде. Примерами эмульсий могут служить кровь, молоко. [20]
	<li>Истинные растворы — системы переменного состава из двух и более компонентов. Раствор называется истинным потому, что вещества действительно и самопроизвольно растворяются в подходящем растворителе с образованием гомогенной (однородной) системы. К истинным растворам относятся, например, растворы в воде соды, спирта, кислоты.
	<li>Лак - раствор пленкообразующих веществ в органических растворителях или воде с введением добавок (сиккативов, пластификаторов, отвердителей), образующий после высыхания твердую, прозрачную, однородную пленку, прочно сцепленную с поверхностью. Лаки придают поверхности декоративный вид и создают защитные покрытия.
	<li>Краски ~ суспензии пигментов или их смеси с наполнителями в олифе, эмульсии, латексе, образующие после высыхания однородную непрозрачную твердую окрашенную пленку.
	<li>Эмаль - суспензия пигмента или смеси их с наполнителями в лаке с введением сиккативов, растворителей и других добавок, образующие после высыхания непрозрачную твердую окрашенную пленку.
	<li>Грунтовка - суспензия пигмента или смеси пигментов и наполнителей в связующем веществе. Образующая после высыхания однородную непрозрачную пленку с хорошей адгезией к подложке (адгезия — прилипание, сцепление). Грунтовки образуют нижние слои покрытий, создавая надежное сцепление верхних слоев покрытия с окрашиваемой поверхно-стью. Кроме того, они защищают металл от коррозии, выделяют структуру древесины, закрывают поры материала, выравнивают и создают однородную поверхность перед окраской. [2]
	<li>Шпатлевка (шпатлевочная масса, подмазка) - густая, вязкая масс состоящая из пигментов, наполнителей или их смеси в олифе, лаке ил' другом связующем веществе с введением добавок или без них, наносимая для заполнения неровностей и углублений, сглаживания неровностей окрашиваемой поверхности.
	<li>Разные материалы - к этим материалам относятся смывки - жидкости для снятия, удаления старых лакокрасочных покрытий, пасты полировочные, шлифовочные, уплотнительные, составы полирующие, нейтрализующие, моечные, а также замазки, уплотнители, ускорители, отвердители, мастики.
	</ol>
	</pre>
	<a href="Исходная.html"><img align="right" src="back.jpg"></a>
	</body>
	</HTML>

---

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

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

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

	<HTML>
	<HEAD>
	<TITLE>
	Интернет магазин
	</TITLE>
	</HEAD>
	<body>
	<img src="mc1.jpg" align="left"><br><br><br><br><br><br> <br><br><br><br><br>
	<a href="Исходная.html"><img align="right" src="back.jpg"></a><br><br><br>
	<hr>
	<img src="topoffers.jpg" border="1"><br><br>
	<a href ="Краски.html"><img src="toplkm.jpg" border="2"></a><br><br>
	<a href ="Двери.html"><img src="topdoors.jpg" border="2"></a><br><br>
	<a href ="Герметики.html"><img src="topgerm.jpg" border="2"></a><br>
	</body>
	</HTML>

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

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

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

	<HTML>
	<HEAD>
	<TITLE>
	Интернет магазин
	</TITLE>
	</HEAD>
	<body>
	<img src="mc1.jpg" align="left"><br><br><br><br><center><h2>ИНТЕРНЕТ-МАГАЗИН</h2></center><br><br><br><br><br>
	<hr><center>
	<table><form>
	<tr>
	<td><h3>ФИО</h3>
	<input type=text></td><td>
	<h3>Заказ</h3>
	<textarea cols=25 rows=5></textarea >
	</tr>
	<tr>
	<td aligh="top"><h3><b>Расчет</b></h3>
	<label><input type=checkbox>По позициям</label><br>
	<label><input type=checkbox>По группам</label><br>
	<label><input type=checkbox>Итоговый</label></td>
	<td aligh="top"><h3><b>Оплата</b></h3>
	<label><input type=radio>Наличная</label><br>
	<label><input type=radio>Безналичная</label><br>
	</tr>
	</table>
	<input type="submit" value="Заказать">&nbsp&nbsp&nbsp&nbsp&nbsp<input type="reset" value="Отменить"></form>
	</center>
	<br>
	<a href="Исходная.html"><img align="right" src="back.jpg"></a><br><br><br>
	</body>
	</HTML>

---

В результате получим:

Рисунок 10 – Страница Гостевая

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

ЗАКЛЮЧЕНИЕ

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

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

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

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

В работе были выполнены задачи:

– рассмотрена литература по теории ЯП высокого уровня;

– выполнено описание терминов, что связаны с понятием гипертекстового языка программирования;

– дана характеристика языка разметки HTML;

– проведено рассмотрение основных тегов для гипертекстовой разметки;

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

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

• Белунцов В. Новейший самоучитель по разработке Web-страниц. - Москва, издательство "ДЕСС-КОМ", 2014. - 448 с.
• Божко А. Dreamweaver 4. Базовый курс. - Москва: издательство "ДЕСС КОМ", 2013. - 448 с.
• Браун М., Ханикатт Д. HTML в подлиннике. Спб.: Издательство “БХВПетербург” – 2014. - 1048с.
• Гончаров А. Самоучитель HTML. – СПб.: Питер, 2015. – 240с.
• Джейсон Кренфорд Тиге. DHTML и для Internet. М.: Издательство “НТ Пресс”- 2015. - 520c.
• Дубаков М.А. Веб-мастеринг средствами CSS. - СПб.: БХВ-Петербург, 2015. – 544 с.
• Дубаков М.А. Создание Web-страниц: искусство верстки. – Мн.: Новое знание, 2014. – 287 с.
• Дунаев Вадим. HTML, скрипты и стили. Спб.: Издательство “БХВПетербург” – 2018. - 1024с
• Кастро Э. Создание Web-страниц с помощью HTML. М.: Издательство “НТ Пресс”- 2015. - 144с.
• Коржинский С.Н. Настольная книга Web-мастера: эффективное применение HTML, CSS и Javascript. - М.:Издательский торговый дом "Кнорус", 2014. - 320с.
• Мальчук Е.В. HTML и CSS. Самоучитель. М.: Издательский дом “Вильямс” –2018. - 416 с.
• Молли Э. Хольцшлаг. Использование HTML и XHTML. Специальное издание. М.: Издательский дом “Вильямс” – 2014. - 736с
• Пауэлл Т.А. Полное руководство по HTML. -Мн.: ООО "Попурри", 2013. - 912 с.
• Полонская Е.Л. Язык HTML. Самоучитель. М.: Издательский дом “Вильямс” – 2013. - 320 с.
• Титтел Эд, Бурмейстер Мэри. HTML 4 для "чайников". 5-е издание. М.: Издательский дом “Диалектика -Вильямс” – 2017. - 368с.
• Федорчук А. Как создаются Web-сайты. Краткий курс. - СПб.: Издательство "Питер", 2014. - 224с.
• Фролов А.В., Фролов Г.В. Создание Web-приложений: Практическое руководство. - М.: Издательско-торговый дом "Русская редакция", 2014. - 1040 с.
• Холмогоров В. Основы Web-мастерства. Учебный курс. - СПб.: Питер, 2015. - 352 с.
• Шапошников И.В. Web-сайт своими руками. - СПб.: БХВ-СанктПетербург, 2015. -224 с.
• Шафран Э. Создание Web-страниц: самоучитель. - СПб.: Питер, 2016. - 320 с.

---