- •Содержание
- •Раздел 1. Язык html 31
- •Раздел 2. Редактор Microsoft FrontPage 31
- •Цель работы
- •Общие положения Адресация компьютеров в сети
- •Диагностика tcp/ip
- •Способы создания web-документов
- •Разработка web-документов на языке html
- •Создание анимации в программе Macromedia Flash
- •Работа в редакторе Microsoft Frontpage
- •Задание
- •1 Диагностика ip-протокола
- •2 Создание информационных ресурсов с использованием языка html
- •3 Создание анимации с использованием программы Macromedia Flash
- •3.1 Создать анимацию движения с помощью автоматического заполнения кадров
- •3.2 Задать движение по заданной траектории с вращением объекта
- •3.3 Плавное изменение формы объекта (морфинг)
- •3.4 Создание узловых точек
- •3.5 Создание кнопки
- •3.6 Выполнить покадровую анимацию для создания баннера рекламного характера. Сохраните полученный файл в gif – формате.
- •4 Проектирование wеb-сайтов средствами мs FrоntPаgе
- •4.1 Создание и оформление web-узла
- •Контрольные вопросы
- •Приложение а
- •Приложение б Создание документов html Введение
- •Раздел 1. Язык html
- •Раздел 2. Редактор Microsoft FrontPage
- •Приложение
Разработка web-документов на языке html
Все теги HTML заключаются в угловые скобки, например <BR>.
Теги HTML могут быть парными или непарными. Парные теги воздействуют на определенные фрагменты текста. В начале такого текстового фрагмента ставится открывающий тег, а в конце — закрывающий. Закрывающий тег отличается от открывающего тега только присутствием символа /, который добавляется перед именем тега.
Открывающий тег может содержать дополнительные параметры форматирования, определяющие, например, в случае тега абзаца выравнивание текста: <Р ALIGN=center>. Значение параметра указывается после символа «=» и может заключаться в двойные (") или одинарные (') кавычки. Использование кавычек является обязательным в том случае, если значение параметра содержит пробелы.
Непарные теги, как правило, не относятся к каким-либо определенным фрагментам текста и воздействуют на весь документ или определяют независимые объекты, например графические изображения или горизонтальные линии. Они не имеют закрывающих тегов и, так же как парные, могут включать в себя параметры форматирования, например <HR WIDTH = 25 %>.
Ряд тегов HTML составляет базовую структуру любого Web-документа. Весь HTML-код документа заключается между парой тегов <HTML>...</HTML>. Открывающий тег <HTML> помещается в самом начале документа, а закрывающий тег </HTML> — в самом конце. Внутри этих тегов размещаются два основных раздела HTML-документа: раздел заголовков и тело документа.
Раздел заголовков содержит информацию, описывающую документ в целом. Он заключается в пределах парного тега <HEAD>...</HEAD>, расположенного непосредственно после открывающего тега <HTML>. Между открывающим <HEAD> и закрывающим </HEAD> тегами записывается парный тег <TITLE>...</TITLE>, который используется для указания названия документа. При просмотре документа в компьютере название документа отображается в строке заголовка окна броузера.
Тело документа содержит основной текст документа и заключается в пределах парного тега <BODY>...</BODY>. Параметр BACKGROUND этого тега задает URL (имя) графического файла, используемого в качестве фона для HTML-документа. Другие параметры определяют цвета различных элементов документа: фона (параметр BGCOLOR), текста (параметр TEXT), гиперссылки (параметр LINK), выделенной гиперссылки (параметр ALINK) и просмотренной гиперссылки (параметр VLINK). Цвет задается либо в виде одного из стандартных названий цветов, например black, white, green, red, blue, yellow, либо в виде шестнадцатеричных значений. В последнем случае коду цвета должен предшествовать символ «#», например #FF0000.
Для оформления текстовых элементов HTML-документа имеется ряд тегов, определяющих параметры абзацев и заголовков, а также обеспечивающих включение в текст разрывов строк, выбор гарнитуры, размера и начертания шрифта.
Для создания абзацев в тексте документа используется парный тег <Р>...</Р>. Параметр ALIGN этого тега позволяет определить режим выравнивания текста абзаца: значение center задает режим выравнивания по центру1, left — по левому краю, right — по правому краю, justify —по ширине страницы. Если параметр ALIGN опущен, текст абзаца выравнивается по левому краю.
Тег <Р> может использоваться как непарный (без закрывающего тега </Р>). В этом случае открывающий тег ставится в начале каждого абзаца. Следует отметить, что язык HTML не содержит средств для создания абзацного отступа («красной строки»). При отображении на экране компьютера абзацы документа разделяются пустой строкой.
Для вставки разрыва строки используется непарный тег <BR>. Текст, идущий после него, будет располагаться с новой строки (без пропуска пустой строки).
Для оформления заголовков отдельных частей документа используются специальные парные теги <Нп>...</Нп>, где п — число от I до 6, соответствующее уровню заголовка. Параметр ALIGN этих тегов используется для указания режима выравнивания заголовков (аналогично соответствующему параметру тега <Р>). При отображении документа на экране компьютера заголовки разного уровня показываются при помощи шрифтов разного размера.
Для задания параметров шрифта предусмотрен целый ряд парных тегов (приложение A).
Тег <FONT>...</FONT> определяет дополнительные параметры шрифта. Параметр SIZE этого тега определяет размер шрифта в условных единицах от 1 (самый мелкий) до 7 (самый крупный). При этом базовый размер шрифта может быть установлен с помощью парного тега <BASEFONT>...</BASEFONT> (по умолчанию базовый размер шрифта принимается равным 3). Параметр COLOR позволяет указать цвет шрифта, параметр FACE — его гарнитуру.
Для создания бегущей строки используется парный тег <MARQUEE>...</MARQUEE>. Направление движения строки определяет параметр BEHAVIOR, который может принимать следующие значения: right, left и alternate (последнее значение используется в том случае, если строка должна бежать то вправо, то влево). Если параметр BEHAVIOR опущен, строка будет бежать влево.
Для вставки горизонтальных линий применяется непарный тег <HR>. Он позволяет отделять различные части текста друг от друга. Параметр ALIGN этого тега используется для указания режима выравнивания. Линия может быть выровнена по левому краю (left), по| правому краю (right) или по центру (center) страницы. Параметр SIZE позволяет указать толщину линии в пикселах, параметр WIDTH — ширину линии. Ширина линии может быть задана как в пикселах, так и в процентах относительно ширины страницы. Параметр COLOR позволяет задать цвет линии.
Для создания гиперссылки используется парный тег <А>...</А>. Параметр HREF этого тега определяет URL объекта, к которому будет осуществляться переход по гиперссылке. При щелчке на гиперссылке связанный с ней объект по умолчанию отображается в том же самом окне броузера, что и исходный Web-документ. Параметр TARGET позволяет задать имя окна, в котором будет открыт этот объект.
Для размещения графических изображений в документе используется непарный тег <IMAGE>. Параметр SRC этого тега указывает URL (имя) графического файла, который должен отображаться в документе (этот параметр является обязательным). Параметр ALT позволяет задать альтернативный текст, который будет отображаться вместо изображения в случае, если браузер не поддерживает отображение графики или режим отображения графики отключен.
Параметр ALIGN тега <IMAGE> определяет режим выравнивания графического изображения: top — выравнивание по верхней границе текста, midlle — по центру текста, botton — по нижней границе текста, left — по левому краю страницы, right — по правому краю страницы. Параметры WIDTH и HEIGHT' задают размеры (ширину и высоту соответственно) графического изображения в пикселах. Параметр BORDER определяет ширину рамки вокруг изображения в пикселах, параметры HSPACE и VSPACE —расстояние от изображения до текста документа по горизонтали и вертикали соответственно. Для создания списков используется несколько взаимосвязанных тегов, которые определяют тип списка, его отдельные элементы и заголовок. |
Парный тег <UL>...</UL> определяет маркированный список. Он определяет границы списка и общие параметры форматирования всех его элементов. Параметр ALIGN этого тега задает режим выравнивания элементов списка (аналогично одноименному параметру тега <Р>). Параметр TYPE определяет тип маркеров списка: disk — круглые закрашенные маркеры, circle — круглые незакрашенные маркеры, square — квадратные маркеры.
Элементы списка заключаются в пределах парного тега <LI>...</LI>. Параметры этого тега аналогичны параметрам тега <UL>, однако их действие распространяется только на отдельный элемент списка, а не на список целиком. Допускается использование тегов <LI> без соответствующих закрывающих тегов.
Парный тег <LH>...</LH> определяет заголовок списка.
Пример маркированного списка:
<UL><LН>Заголовок списка</LН>
<LI>Первый элемент списка</LI>
<LI>Второй элемент списка</LI>
</UL>
Для создания нумерованного списка используется парный тег <OL>...</OL>. В целом формат этого тега аналогичен формату тега <UL>. Тем не менее тег <OL> допускает задание большего количества параметров форматирования, чем тег <UL>. Параметр START позволяет указать значение, с которого должна начинаться нумерация списка. Параметр TYPE определяет тип нумерации списка. Элементы списка могут иметь алфавитную нумерацию (А или а), нумероваться римскими (I или II) или арабскими цифрами.
Для организации списка определений используется парный тег <DL>...</DL>. Каждый из элементов такого списка состоит из двух компонентов — самого термина и его определения. Для задания термина предназначен парный тег <DT>...</DT>, для задания определения термина — парный тег <DD>...</DD>.
Термин списка определений выделяется в окне браузера полужирным шрифтом, а текст определения — отступом относительно текста термина. Допускается использование тегов <DT> и <DD> без соответствующих закрывающих тегов.
Пример списка определений:
<DL><LH>Заголовок списка определений</LН>
<DT>Tepмин</DT>
<DD>Определение термина</DD>
</DL>
Как и большинство HTML-элементов, списки могут располагаться внутри друг друга, образуя несколько уровней. Для организации вложенных списков сначала нужно создать внешний список, а затем включить внутренний список во внешний:
<ОL><LН>Заголовок внешнего списка </LH>
<LI>Первый элемент внешнего списка</LI>
<UL><LH>3aголовок внутреннего списка</LН>
<LI>Первый элемент внутреннего списка</LI>
<LI>Второй элемент внутреннего списка</LI>
<LI>Третий элемент внутреннего списка</LI>
</UL>
<LI>Второй элемент внешнего списка</LI>
</OL>
Для создания таблицы используется парный тег <TABLE>... </TABLE>. Параметр ALIGN этого тега определяет режим выравнивания таблицы по горизонтали (но не текста в ячейках таблицы). Таблица может быть выровнена по центру (center), по левому краю (left) или по правому краю (right) страницы.
Параметр WIDTH тега <TABLE> позволяет указать ширину таблицы в пикселах или в процентах от ширины окна браузера. Параметр BORDER определяет толщину линий, обрамляющих таблицу, в пикселах. Если линии не нужны, этот параметр должен иметь значение 0. Параметр CELLSPACING позволяет указать интервал между ячейками таблицы в пикселах. Значение параметра CELLPADDING определяет размеры полей ячеек в пикселах.
Каждая из строк таблицы определяется парным тегом <TR>...</TR>. Параметр ALIGN этого тега управляет режимом выравнивания текста в ячейках строки по горизонтали (режимы выравнивания текста в ячейках аналогичны режимам выравнивания текста абзаца). Параметр VALIGN позволяет установить режим выравнивания текста по вертикали. Текст может быть выровнен по верхнему (top), нижнему (bottom) краям или посередине ячейки (midlle). Закрывающий тег </TR> является необязательным.
Каждой из ячеек таблицы соответствует парный тег <TD>... </TD>. Между открывающим и закрывающим тегами размещаются данные, которые должны быть отображены в соответствующей ячейке таблицы. Параметры ALIGN и VALIGN этого тега имеют те же значения, что и соответствующие параметры тега <TR>, однако их действие распространяется только на отдельную ячейку таблицы. Параметр WIDTH определяет ширину ячейки, параметр BGCOLOR — цвет фона ячейки. Если последний параметр не указан, фоном для ячейки будет служить фон страницы. Для создания ячеек, занимающих несколько строк или столбцов таблицы, используются параметры ROWSPAN и COLSPAN. Закрывающий тег </TD> является необязательным.
Парный тег <CAPTION>...</CAPTION> позволяет задать заголовок таблицы. Для определения заголовков столбцов (шапки таблицы) используется парный тег <TN>...</TN>. Этот тег должен находиться в пределах парного тега <TR>. Содержимое ячеек шапки таблицы выделяется полужирным шрифтом. Пример таблицы:
<ТАВLЕ><САРТION>Заголовок_таблицы</САРТION>
<ТR><ТН>Заголовок стобца1</TH>
<ТН>Заголовок столбца2 </ТН>
<ТН>Заголовок столбцаЗ</TH></TR>
<TR><TD>Ячейкаl:l</TD>
<TD>Ячейкal:2</TD>
<TD>Ячейка1:3</TD></ТR>
<TR><TD>Ячeйкa2:1</TD>
<TD>Ячейкa2:2</TD>
<TD> Ячейка2:3</TD></TR>
</TABLE>
Для создания фреймов используется парный тег </FRAMESET>... </FRAMESET> (тег <BODY> в таком документе отсутствует). При использовании фреймов окно браузера разделяется на несколько областей, в каждой из которых отображается отдельный Web-документ (или даже Web-сайт). Открывающий тег <FRAMESET> обязательно должен содержать один из параметров: COLS или ROWS, определяющий способ разбиения окна HTML-документа (в первом случае окно разбивается по вертикали, во втором — по горизонтали). В качестве значений параметров COLS и ROWS указываются (через запятую) размеры отдельных фреймов. Они могут быть заданы в пикселях или в процентах от ширины окна (последняя область может быть определена с помощью символа*, что означает, что ей выделяется все оставшееся пространство). Например, <FRAMESET COLS = 25 %,*>.
Для описания фреймов предназначены непарные теги <FRAME>. Обязательный параметр SRC тега <FRAME> указывает, какой документ будет отображаться во фрейме. Для установки режима отображения полос прокрутки во фрейме используется параметр SCROLLING. Указание параметра NORESIZE запрещает изменение размеров фрейма в процессе просмотра.