Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
лабы / Lab5 / ИТСлаб5.doc
Скачиваний:
22
Добавлен:
16.04.2013
Размер:
185.34 Кб
Скачать

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>&lt;== Новый подход, основанный на использовании атрибутов тегов.<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>

Лабораторное задание и порядок его выполнения

  1. Ознакомиться с основами технологии разработки html-документов и изучить средства HTML, приведенные в описании лабораторной работы.

  2. Скопировать на диск D или H директорию images со всем содержимым. В последствии при выполнении заданий располагать html-страницы рядом с этой директорией.

  3. Скопировать из текста пример html-страницы и изучить её работу. Изменить ширину окна web-браузера и понаблюдать за смещением картинок при этом. Объяснить наблюдаемые эффекты.

  4. С помощью редактора Notepad, написать собственные html-страницы с произвольным текстом, используя все описанные в работе возможности HTML. При создании страниц использовать картинки из директории images.

    1. Преобразовать заданный текст в html-страницу с использованием списков и сохранением стилей. Варианты заданий приведены ниже. Сохранить документ в файл page1.htm.

    2. Преобразовать заданную таблицу в html-страницу. Варианты заданий приведены ниже. Сохранить документ в файл page2.htm.

    3. Поместить картинку в картинку согласно варианту. Сохранить документ в файл page3.htm.

    4. Разработать html-страницу с навигатором и картой сайта в соответствии с вариантом. Сохранить документ в файл page4.htm.

  5. Продемонстрировать функционирование разработанных html-страниц преподавателю.

  6. Оформить отчет по результатам выполнения лабораторной работы.