Севастопольский национальный технический университет
Создание статических HTML документов
Методические указания
К выполнению лабораторных работ
По дисциплине «WEB-технологии»
Для студентов специальности 7.091401
«Системы управления и автоматики»
Дневной и заочной форм обучения
Севастополь
УДК 681.5
Создание статических HTML документов: Методические указания к выполнению лабораторных работ по дисциплине «WEB-технологии» для студентов специальности 7.091401 «Системы управления и автоматики» дневной и заочной форм обучения // Сост. В.В. Альчаков – Севастополь: Изд-во СевНТУ, 2005. – 12 с.
Целью лабораторной работы является изучение основных синтаксических конструкций языка гипертекстовой разметки HTML и создание с его помощью HTML-документов.
Методические указания рассмотрены на заседании кафедры Технической кибернетики, протокол № от «» 2005 г.
Допущено учебно‑методическим центром СевНТУ в качестве методических указаний.
Рецензент
Крамарь В.А. к.т.н., доцент кафедры ТК
Содержание
| 1. Цель работы | |
| 2. Краткие теоретические сведения | |
| 3. Порядок выполнения работы | |
| 4. Задание на лабораторную работу | |
| 5. Содержание отчета | |
| 6. Контрольные вопросы | |
| Библиографический список |
Цель работы
Изучить основные синтаксические конструкции языка гипертекстовой разметки HTML и его возможности при создании HTML-документов.
Краткие теоретические сведения
HTML – Hyper Text Markup Language – язык разметки гипертекста, является фундаментальной, базовой технологией Интернета. HTML можно считать полнофункциональным языком программирования, обладающим практически всеми чертами, характерными для других аналогичных языков. Практически все содержимое web-узлов, которое отображается на экране подключенных к Интернету компьютеров, является набором документов, содержащих программный код HTML. HTML позволяет формировать на странице сайта текстовые блоки, включать в них изображения, организовывать таблицы, управлять отображением цвета документа и текста, добавлять в дизайн сайта звуковое сопровождение, организовывать гиперссылки с контекстным переходом в другие разделы сервера или обращаться к иным ресурсам Сети и компоновать все эти элементы между собой. Файлы, содержащие гипертекстовый код, имеют расширение.htm или.html.
В отличие от других языков программирования, HTML – язык не транслируемый, но интерпретируемый. Это означает, что для исполнения готового кода его не нужно компилировать, встроенный в специальное программное обеспечение, предназначенное для просмотра web-страниц, интерпретатор компилирует код непосредственно в процессе открытия документа.
Структура HTML-документа. Как и любой другой язык программирования, HTML подразумевает некую стандартизированную структуру построения программы – в данном случае, html-документа. Такая структура описывает очередность следования ряда обязательных блоков, которые содержат непосредственно программный код. Директивы HTML называются «теги» (от англ., tag – отметка). Теги HTML заключаются в угловые скобки, синтаксис их записи в общем виде выглядит как <тег>. Все объекты, не заключенные в угловые скобки, интерпретатор воспринимает как текстовые элементы, отображая их на экране компьютера «как есть». Упрощенная структура HTML-документа выглядит следующим образом
Рисунок 1 – Упрощенная структура HTML документа
Все теги HTML, за исключением некоторых отдельно оговоренных случаев, – парные. Такая пара состоит из «открывающего» и «закрывающего» тега, которые отличаются лишь наличием в последнем символа «/». Все, что расположено между открывающими закрывающим тегом, обрабатывается интерпретатором согласно алгоритму, присвоенному данному конкретному тегу. В общем виде программная строка HTML с открывающим и закрывающим тегами выглядит так: <тег>Обрабатываемое значение</тег>. Некоторые теги могут иметь атрибуты, которые позволяют добиться того или иного эффекта при отображении на экране содержимого html-документа.
Минимальный код, который необходим для создания html-документа, имеет вид:
<HTML>
<HEAD>
<ТITLE>Моя первая web-страничка</TITLE>
</HEAD>
<BODY>
Основной код документа
</BOOY>
</HTML>
Приведенный выше код полностью соответствует схеме, представленной на рисунке 1.
Базовые теги HTML приведены в таблице 1.
Таблица 1 – Базовые теги HTML
| Тег | Атрибуты | Назначение |
| <P></P> | ALIGN = RIGHT – выравнивание текста по правому краю экрана или столбца таблицы; LEFT – выравнивание текста по левому краю экрана или столбца таблицы; CENTER – выравнивание текста по центру экрана или столбца таблицы; JUSTIFY – выравнивание текста по ширине экрана или столбца таблицы. | Тег текстового абзаца Пример: <Р ALIGN=JUSTIFY> Текст абзаца </Р> |
| <BR> | CLEAR LEFT – смещение новой строки к левой границе; RIGHT – смещение новой строки к правой границе; ALL – смещение новой строки к обеим границам одновременно; | Тег перевода строки Пример: <BR CLEAR=LEFT> |
| <NORB></NORB> | Строка без переносов | |
| <B></B> <STRONG></STRONG> | Выделение текста жирным шрифтом | |
| <I></I> <EM></EM> | Выделение текста курсивным шрифтом | |
| <U></U> | Выделение текста подчеркнутым шрифтом | |
| <STRIKE><STRIKE> | Выделение текста зачеркнутым шрифтом | |
| <SUB></SUB> | Отображение подстрочного текста | |
| <SUP></SUP> | Отображение надстрочного текста | |
| <TT></TT> | Отображение текста фиксированным шрифтом (телетайпный шрифт) | |
| <BIG></BIG> | Вывод текста крупным шрифтом (увеличение размера на 1 пункт) | |
| <SMALL></SMALL> | Вывод текста мелким шрифтом (уменьшение размера на 1 пункт) | |
| <FONT></FONT> | FACE – название шрифта SIZE – размер шрифта COLOR – цвет шрифта | Тег задания шрифта Пример: <FONT FACE="Arial" SIZE="+2" COLOR="#0000FF"> Текст </FONT> |
| <BODY></BODY> | BACKGROUND – адрес фонового рисунка документа BGCOLOR – цвет фона документа LINK – цвет непосещенной гиперссылки ALINK – цвет активной гиперссылки VLINK – цвет посещенной гиперссылки TEXT – цвет текста документа | Тег тела документа Пример: <BODY BACKGROUND="back.gif" BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#008000" VLINK="#800080" ALINK="#FF0000"> Тело документа HTML </BODY> |
| <H1></H1> <H2></H2> <H3></H3> <H4></H4> <H5></H5> <H6></H6> | ALIGN= RIGHT – выравнивание заголовка по правому краю окна браузера; LEFT – выравнивание заголовка по левому краю окна браузера; CENTER – выравнивание заголовка по центру окна браузера. | Теги заголовков различных уровней Пример: <Н1 ALIGN="CENTER"> ДOБPO ПОЖАЛОВАТЬ НА МОЮ СТРАНИЧКУ! </Н1> |
| <UL> <LI></LI> </UL> | TYPE= DISC – метки отображаются в виде заполненных черным цветом окружностей; CIRCLE – метки отображаются в виде полых окружностей; SQUARE – метки отображаются в виде заполненных черным цветом квадратов. | Тег маркированного списка Пример: <UL TYPE=DISC> <LI>1-й элемент</LI> <LI>2-й элемент</LI> <LI>3-й элемент</LI> </UL> |
| <OL> <LI></LI> </OL> | TYPE= 1 – арабские числа; I – римские цифры в верхнем регистре; i – римские цифры в нижнем регистре; A – символьная маркировка в верхнем регистре; a – символьная маркировка в нижнем регистре; START – атрибут начала маркировки | Тег нумерованного списка Пример: <OL TYPE=1 START=5> <LI>1-й элемент</LI> <LI>2-й элемент</LI> <LI>3-й элемент</LI> </OL> |
| <HR> | ALIGN= RIGHT – выравнивание линии по правому краю окна браузера; LEFT – выравнивание линии по левому краю окна браузера; CENTER – выравнивание линии по центру окна браузера. WIDTH – длина линии в пикселах или процентах. SIZE – толщина линии в пикселах. COLOR – цвет линии. | Тег отображения горизонтальной черты заданного размера и цвета Пример: <HR ALIGN="CENTER" WIDTH="80%" SIZE="1" COLOR="#0000FF"> |
| <A></A> | HREF– URL источника, с которым устанавливается связь. TARGET – правило открытия документа в окне браузера. TITLE – альтернативный текст ссылки. | Тег гиперссылки Пример: <А HREF="https://www.mail.ru" TARGET="blank" TITLE="Почта Mail.RU"> Бесплатная почта №1 </А> | |||||
| <IMG> | ALIGN= LEFT – выравнивает изображение по левому краю документа, прилегающий текст обтекает изображение справа; RIGHT – выравнивает изображение по правому краю документа, прилегающий текст обтекает изображение слева; TOP – выравнивает верхнюю кромку изображения с верхней линией текущей текстовой строки; MIDDLE – выравнивает базовую линию текущей текстовой строки с центром изображения; ABSMIDDLE – выравнивает центр текущей текстовой строки с центром изображения; BOTTOM, BASELINE – выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки. ALT – альтернативный текст для изображения. BORDER – определяет ширину рамки вокруг изображения в пикселах. HEIGHT– высота изображения в пикселах. WIDTH – ширина изображения в пикселах. SRC– URL изображения | Тег вставки графического изображения Пример: <IMG src="/img/pic.gif" WIDTH="45" HEIGHT="53" ALT="Картинка" ALIGN="LEFT"> | |||||
| <TABLE></TABLE> | ALIGN – способ горизонтального выравнивания таблицы {LEFT, CENTER, RIGHT}. VALIGN – способ вертикального выравнивания таблицы {TOP, BOTTOM, MIDDLE}. BORDER – ширина рамки таблицы в пикселах. CELLPADDING – определяет расстояние в пикселах между рамкой каждой ячейки таблицы и ее содержимым. CELLSPACING – определяет расстояние в пикселах между границами соседних ячеек. WIDTH – определяет ширину таблицы в пикселах или процентах. HEIGHT – определяет высоту таблицы в пикселах или процентах. BGCOLOR – определяет цвет фона ячеек таблицы. BACKGROUND – URL рисунка, используемого в качестве фонового для ячеек таблицы. | Тег создания таблицы
Пример:
<TABLE>
<TR>
<TH ROWSPAN=2>HDD</TH>
<TD>WD 80Gb</TD><TD ALIGN="right">85$</TD>
</TR>
<TR>
<TD>Quantum 160Gb</TD><TD ALIGN="right">110$</TD>
</TR>
</TABLE>
| |||||
| <TR></TR> | ALIGN – горизонтальное выравнивание содержимого ячеек строки {LEFT, CENTER, RIGHT}. VALIGN– вертикальное выравнивание содержимого ячеек строки {TOP, BOTTOM, MIDDLE}. BGCOLOR – цвет фона ячеек данной строки. | Тег новой строки таблицы | |||||
| <TD></TD> <TH></TH> | ALIGN – горизонтальное выравнивание содержимого ячейки {LEFT, CENTER, RIGHT}. VALIGN– вертикальное выравнивание содержимого ячейки {TOP, BOTTOM, MIDDLE}. WIDTH – ширина ячейки в пикселах или процентах. HEIGHT – высота ячейки в пикселах или процентах. COLSPAN – количество столбцов для объединения. ROWSPAN – количество строк для объединения. BGCOLOR – цвет фона ячейки. BACKGROUND – URL рисунка, используемого в качестве фонового для ячейки. | Тег создает ячейку в текущей строке (TH определяет ячейку-заголовок) |