2.4. Пример html-страницы
Следующий пример демонстрирует описанные в работе возможности HTML. См. также файл test_l5.html.
<HTML>
<HEAD>
<TITLE>Списки и таблицы в HTML</TITLE>
</HEAD>
<BODY>
<H1 align=center>Списки и таблицы в HTML</H1>
<H2 align=center>(примеры)</H2>
<H3>Пример многоуровневого списка</H3>
<OL type=I start=4>
<LI><FONT color=red>Элемент 1 нумерованного списка</FONT>
<UL>
<LI><STRONG>Элемент 1 маркированного списка</STRONG></LI>
<LI><CITE>Элемент 2 маркированного списка</CITE></LI>
</UL>
</LI>
<LI>Элемент 2 нумерованного списка</LI>
<LI>Элемент 3 нумерованного списка</LI>
</OL>
<H3>Пример списка определений</H3>
<DL>
<DT>Термин 1</DT>
<DD>Определение термина 1
<DL>
<DT>Термин 1.1</DT><DD>Определение термина 1.1</DD>
<DT>Термин 1.2</DT><DD>Определение термина 1.2</DD>
</DL>
</DD>
<DT>Термин 2</DT>
<DD>Определение термина 2</DD>
</DL>
<H3>Пример таблицы</H3>
<TABLE border=2 bordercolor=red cellpadding=5 cellspacing=3 width=500>
<TR align=center bgcolor=yellow valign=center>
<TD width=25% rowspan=2>(1-2,1)</TD>
<TD width=50%>(1,2)</TD>
<TD width=25%>(1,3)</TD>
</TR>
<TR>
<TD colspan=2>(2,2-3)</TD>
</TR>
<TR height=150>
<TD colspan=2 valign=top>(3,1-2)</TD>
<TD colspan=1 align=right bgcolor=aqua>(3,3)</TD>
</TR>
</TABLE>
<H3>Примеры картинок в картинках</H3>
<TABLE align=right border=1 bordercolor=white cellpadding=0 cellspacing=0 width=730>
<TR align=right>
<TD width=110 height=110 background=images/border_ie.gif align=center valign=center bordercolor=black>
<IMG src=images/umbrella.gif>
</TD>
<TD bgcolor=white>
<P align=left><== Новый подход, основанный на использовании атрибутов тегов.<BR></P>
Старый подход с использованием прозрачной картинки. ==>
</TD>
<TD width=110 background=images/border_ie.gif align=left bordercolor=black>
<IMG src=images/1x1.gif width=38 height=110 align=middle>
<IMG src=images/umbrella.gif align=middle>
</TD>
</TR>
</TABLE></BODY>
</HTML>
Лабораторное задание и порядок его выполнения
Ознакомиться с основами технологии разработки html-документов и изучить средства HTML, приведенные в описании лабораторной работы.
Скопировать на диск D или H директорию images со всем содержимым. В последствии при выполнении заданий располагать html-страницы рядом с этой директорией.
Скопировать из текста пример html-страницы и изучить её работу. Изменить ширину окна web-браузера и понаблюдать за смещением картинок при этом. Объяснить наблюдаемые эффекты.
С помощью редактора Notepad, написать собственные html-страницы с произвольным текстом, используя все описанные в работе возможности HTML. При создании страниц использовать картинки из директории images.
Преобразовать заданный текст в html-страницу с использованием списков и сохранением стилей. Варианты заданий приведены ниже. Сохранить документ в файл page1.htm.
Преобразовать заданную таблицу в html-страницу. Варианты заданий приведены ниже. Сохранить документ в файл page2.htm.
Поместить картинку в картинку согласно варианту. Сохранить документ в файл page3.htm.
Разработать html-страницу с навигатором и картой сайта в соответствии с вариантом. Сохранить документ в файл page4.htm.
Продемонстрировать функционирование разработанных html-страниц преподавателю.
Оформить отчет по результатам выполнения лабораторной работы.