Файл: Основы программирования на языке HTML (ПРАКТИЧЕСКОЕ ИСПОЛЬЗОВАНИЕ ЯЗЫКА HTML).pdf
Добавлен: 25.04.2023
Просмотров: 101
Скачиваний: 1
Некоторые параметры определены браузером по умолчанию, некоторые- пользователем браузера, а также есть и такие, определить которые необходимо непосредственно при создании страницы (к примеру, тот же параметр 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> |