Файл: Основы программирования на языке HTML (Этапы развития ЯП).pdf
Добавлен: 28.03.2023
Просмотров: 121
Скачиваний: 2
СОДЕРЖАНИЕ
1.ТЕОРЕТИЧЕСКИЕ ПОНЯТИЯ КЛАССИЧЕСКОЙ ТЕОРИИ ЯЗЫКОВ ПРОГРАММИРОВАНИЯ
1.1.Определение языка программирования
2.1. Понятие гипертекста, история его развития
2.2. Описание языков гипертекстовой разметки
3.ПРАКТИЧЕСКОЕ ИСПОЛЬЗОВАНИЕ ЯЗЫКА HTML
3.1. Описание основных тегов HTML
3.2.Практичекое применение языка гипертекстовой разметки HTML
Некоторые параметры определены браузером по умолчанию, некоторые- пользователем браузера, а также есть и такие, определить которые необходимо непосредственно при создании страницы (к примеру, тот же параметр 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> |