- •Введение
- •Средства проектирования и просмотра web – документов
- •Основные понятия
- •Структура web – документа
- •Тэги форматирования
- •Тэги создания таблиц
- •Структура web – узла
- •Тэги создания гиперссылок
- •Текстовые ссылки
- •Графические ссылки
- •Графика в web – документе
- •Маршруты файлов. Абсолютный и относительный путь
- •Тэги создания форм
- •Тэги создания фреймов
- •Microsoft FrontPage
- •Программы для создания web - документов
- •Назначение языка программирования Java
- •Средства MS Office для создания web –страниц
- •Дизайн и тестирование web – узла
- •СПИСОК ПОЛЕЗНЫХ СТРАНИЦ В WWW
- •ЗАДАНИЯ
- •СЛОВАРЬ ТЕРМИНОВ
- •РЕКОМЕНДУЕМАЯ ЛИТЕРАТУРА
7
Практическое задание 5
Не закрывая IE, перейдите в Блокнот.
В открывающий тэг BODY добавьте атрибуты цвета и их значения: <BODY BGCOLOR=black TEXT=red>
Сохраните документ и просмотрите его в IE. Для этого нажмите кнопку Обновить или функциональную клавишу F5
Тэги форматирования
<H1>…</H1> – задают самый большой размер символов; <H6>…</H6> – задают самый маленький размер символов;
<H2>…</H2>, <H3>…</H3>, <H4>…</H4>, <H5>…</H5> – задают промежуточные размеры символов;
<P> – одинарный тэг абзаца, т.е. перевод на новую строку для вывода далее идущего текста (пустая строка);
<BR> – одинарный тег задания новой строки;
<B>…</B> – включают и выключают вывод текста на экран полужирным шрифтом;
<I>…</I> – курсив;
<TT>…</TT> – машинописный шрифт; <U>…</U> – подчеркивание;
<HR> – одинарный тэг, выводит на экран горизонтальную линию для логического разделения страницы, она будет разделять страницу по всей ширине; тэг может использоваться с атрибутами, если <HR WIDTH=50%> - у левой стороны страницы до середины, <HR WIDTH=75% ALIGN=”CENTER”> – три четверти и по центру;
<FONT SIZE=X> – одинарный тэг для изменения размера шрифта; <!…> – комментарий, отражается только в формате HTML.
Практическое задание 6
Найдите в приложении все вышеописанные элементы форматирования
Практическое задание 7
В область BODY добавьте тэги: <BODY>
<HR> <! длинная разделительная строка> <H1>Доброе утро!</H1>
<HR WIDTH=50%> <H3>Добрый день!</H3>
<HR WIDTH=20% ALIGN="left"> <H6>Добрый вечер!</H6>
<P><B> текст полужирным начертанием <P><I> текст полужирным курсивом
<P><U>текст полужирным подчеркнутым курсивом</U></I></B>
простой шрифт
8
<BR><TT>машинописный текст</TT> </BODY>
Сохраните документ и просмотрите его в IE. Для этого нажмите кнопку Обновить или функциональную клавишу F5
<UL>…</UL> – для создания маркированного списка, м.б. с параметром disc (сплошной круг), circle (прозрачный круг), square (темный квадрат);
<OL>…</OL> – для создания нумерованного списка, м.б. с параметром type, равным 1, A, a, I, i;
<LI> – пункт списка.
Практическое задание 8
В область BODY добавьте тэги:
МОДЕЛИ ДАННЫХ
<UL TYPE=square> <LI>файловая <LI>иерархическая <LI>сетевая <LI>реляционная
</UL>
<BR>
ТИПЫ ДАННЫХ
<OL TYPE=A> <LI>простые
<OL TYPE=1> <LI>целочисленные <LI>вещественные <LI>символьный <LI>логический
</OL> <LI>структурные
<OL TYPE=i> <LI>массивы <LI>строки <LI>файлы <LI>множества <LI>записи
</OL>
</OL>
Сохраните документ и просмотрите его в IE. Для этого нажмите кнопку Обновить или функциональную клавишу F5
9
Тэги создания таблиц
Для лучшего представления информации ее можно размещать в виде таблиц. Для этого используется тэг <TABLE>.
Определение таблицы начинается с ярлыка <TABLE> и заканчивается </TABLE>. Дополнительные параметры придают таблице вид:
−BORDER – граница – определяет ширину (в пикселях) рамки таблицы по периметру, если этот параметр отсутствует или 0, то внешняя окантовка отсутствует.
−CELLSPACING – определяет толщину разделительных перегородок между ячейками таблицы, 0 – разделения самые тонкие, 1 – толщина больше.
−CELLPADDING – определяет пространство между границей ячейки и ее данными.
−CAPTION – определяет название таблицы, значение атрибута ALIGHN top – задает заголовок вверху таблицы, bottom – под
таблицей.
Далее для определения таблицы необходимо описать каждый ее ряд. Если предполагается 5 рядов, значит 5 блоков описания. Каждый ряд описывается в пределах тэга <TR></TR>. Между тэгами <TH></TH> - заглавия столбцов, они будут более жирными, <TD></TD> - данные таблицы
– можно и данные таблицы брать в тэг TH.
Практическое задание 9
Найдите в приложении тэги, описывающие таблицу
Возможна работа с вложенными таблицами.
Практическое задание 10
В область BODY добавьте тэги:
<TABLE BORDER=5 CELLSPACING=0 CELLPADDING=10> <CAPTION ALIGHN=top><H4>Список участников</H4></CAPTION> <TR>
<TH>Фамилия И О</TH> <TH>Должность</TH> <TH>Кафедра</TH> </TR>
<TR><TH>Петров А.А.</TH> <TD>доцент</TD> <TD>физики</TD>
</TR>
<TR>
<TH>Сидоров П.П.</TH> <TD>ст.преподаватель</TD> <TD>химии</TD>
10
</TR>
<TR><TH>Афанасьева И.А.</TH> <TD>профессор</TD> <TD>математики</TD>
</TR>
</TABLE>
Сохраните документ и просмотрите его в IE. Для этого нажмите кнопку Обновить или функциональную клавишу F5
Структура web – узла
Web-узел может содержать в себе большое количество web-документов, соединенных между собой гиперссылками. В зависимости от установленных связей между документами, структура узла может быть линейной или нелинейной. Нелинейная представлена двумя видами связей: иерархической
и сетевой.
Линейная |
Иерархическая |
Сетевая |
структура |
структура |
структура |
Вузле линейной структуры возможен переход от предыдущего документа к последующему и в обратном порядке – от последующего к предыдущему.
Вузле иерархической структуры возможен переход от предыдущего документа к нескольким последующим и в обратном порядке – от нескольких последующих к одному предыдущему.
Вузле сетевой структуры возможен переход от любого документа к любому документу.
Линейный web – узел структурно ограничен, но позволяет легче ориентироваться при перемещении по узлу.
Сетевой web – узел имеет более широкие возможности при перемещении, но затрудняет восприятие последовательности перемещений по документам.