ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 18.06.2025
Просмотров: 306
Скачиваний: 0
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 – узел имеет более широкие возможности при перемещении, но затрудняет восприятие последовательности перемещений по документам.
11
Для удобства в каждом документе должна быть ссылка на домашнюю страницу (первый документ, он может иметь оглавление, содержащее список других документов данного web – узла).
Тэги создания гиперссылок
Для организации гиперссылки необходимо выделить объект, который будет являться ссылкой, и объект, к которому обращается ссылка. Ссылки могут быть текстовыми (подчеркнутое слово или фраза) и графическими (объект).
Текстовые ссылки
Текстовые ссылки позволяют щелчком по выделенному слову перейти к другому объекту.
Если этот объект внутри текущего файла, он называется якорем или входом в объект. Т.о., должен быть тэг ссылки на якорь и тэг якоря.
Практическое задание 11
Вначале области BODY добавьте тэги: <UL>
<LI><A HREF=#1>Ссылка 1</A> <LI><A HREF=#2>Ссылка 2</A> <LI><A HREF=#3>Ссылка 3</A> </UL>
Вконце области BODY добавьте тэги: <P><B><A NAME=#1>1</A></B></BR> <P><B><A NAME=#2>2</A></B></BR> <P><B><A NAME=#3>3</A></B></BR>
Сохраните документ и просмотрите его в IE. Для этого нажмите кнопку
Обновить или функциональную клавишу F5
<B> -полужирное для выделения. <BR> - с новой строки.
Если же объекты, на которые ссылаются, находятся в других файлах, тогда указываются их маршруты.
<A HREF=”File1.html”>Ссылка на файл File1</A>
и далее аналогично.
Графические ссылки
Если вместо текста используется графический объект для вызова ссылки, то добавляется тэг <IMG> с параметром SRC – source – источник.
<LI><A HREF=”File1.html”><IMG SRC=”Graph_File.gif”></a>
файл, на |
файл картнинки |
который сылаются |
для ссылки |
Графика в web – документе |
Не все броузеры могут отражать графику. Для этого необходимо вставлять альтернативную надпись.
12
<IMG SRC=”Pict.jpg” ALT=”щелкнуть здесь”>
Размещение картинок делает страницу привлекательнее, но большие размеры картинок могут замедлить время загрузки страницы. Поэтому желательно использовать картинки в определенных графических форматах:
jpeg, gif – не утрачивая качество, они имеют меньший размер, чем, например, bmp.
Графические объекты могут служить и файлами для ссылок, и файлами для фона web – страницы, но если размер такого файла мал, то броузер размножит его на все поле страницы.
При желании на странице можно ссылаться на звуковые файлы (с расширениями .wav .au), на файлы видеоклипов (с расширениями .mov, .avi,
.mpg), но для их просмотра на компьютере пользователя должны быть соответствующие программы, звуковые колонки, карты и видеокарты.
Маршруты файлов. Абсолютный и относительный путь
Возможны ссылки на области внутри текущего файла, на другой файл в текущем каталоге и на файл в любом другом каталоге.
Абсолютный путь описывает местоположение файла, начиная с самого высокого уровня и включая весь маршрут к файлу.
Пример,
http://имя сервера/каталог1/каталог2/…/имя файла
Естественно, при перемещении данного файла ссылка утрачивает смысл.
Относительный путь описывает местоположение другого файла относительно текущего.
Пример,
../../каталог1/имя файла Например,
Абсолютный путь
<A HREF=”http://s1/p1/p2/file1.htm”>f1</A> - т.е. файл file1 находится в папке p2, p1 на сервере s1
относительный путь
<A HREF=../../p3/file2.htm>f2</A> - т.е. файл file2 находится в папке p3,
лежащей в папке на два уровня выше текущей.
Тэги создания форм
Формы позволяют наладить взаимодействие автора страницы с ее посетителем (аналогично работают опросники, поисковые службы при запросе ключевых слов и выдаче результата).
Для взаимодействия необходимо отправить электронную почту, причем, сделать это непосредственно с данной страницы. Но прежде, чем отправить сообщение, сначала необходимо заполнить анкету. Ответы могут быть в виде произвольного текста или в виде флажков, или выбора из списка.
Формы позволяют разнообразить типы ответов и получить конкретные ответы на поставленные вопросы. Это упрощает компьютерную обработку полученных данных.