МИНИСТЕРСТВО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ МОСКОВСКИЙ ГОСУДАРСТВЕННЫЙ ИНСТИТУТ

Реклама
МИНИСТЕРСТВО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ
МОСКОВСКИЙ ГОСУДАРСТВЕННЫЙ ИНСТИТУТ
РАДИОТЕХНИКИ, ЭЛЕКТРОНИКИ И АВТОМАТИКИ
(ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ)
Факультет Кибернетики
Кафедра Интеллектуальных
технологий и систем
Лабораторная работа № 1
Тема: «Язык разметки гипертекста HTML. Изучение структуры Webстраницы, элементов форматирования текста, таблиц, стилей. Использование
списков и таблиц»
Дисциплина: «Интернет технологии»
Выполнил: Губин М.О.
Группа:ИИ-1-3
Проверил: Звездочкина М.К.
МОСКВА 2007
2
Задание
1. Сделайте резервную копию полученной дискеты и, особенно, содержащихся в ней
HTML-файлов, поскольку они в процессе выполнения лабораторной работы будут
изменяться.
2. Изучите Методические указания или соответствующие разделы пособий [1,2].
3. Изучите структуру Web-страницы. (Файл strukt.htm). При нажатии на эту ссылку
вы увидите шаблон простейшей Web-страницы. Проделайте следующие действия.
3.1. На вкладке Вид браузера Microsoft Internet Explorer укажите режим в виде
HTML. Вы увидите страничку Блокнота, содержащую HTML-код рассматриваемой Webстраницы.
3.2. Изучите HTML-код и сравните его с видом страницы, которую вы наблюдаете в
окне браузера
3.3. Используя Блокнот в качестве Редактора, внесите изменения в HTML-код
страницы, изменив ее заголовок (Элемент <TITLE>), назвав её Моя первая Web-страница.
Сохраните файл strukt.htm, нажмите кнопку Обновить браузера и убедитесь, что строка
заголовка окна браузера изменилась.
3.4. Укажите в элементе <META> свою фамилию и измените набор ключевых слов.
3.5. Измените цвет фона и содержание комментария.
3.6. Вместо заголовков 1,2,3,4,5,6 запишите соответственно ваши: 1. Фамилия, 2.
Имя, 3. Отчество, 4. № учебной группы, 5. Название факультета, 6. Название специальности.
3.7. После Ссылки1 сообщите сведения о вашей работе.
3.8. Сохраните файл strukt.htm, нажмите кнопку Обновить браузера и убедитесь,
что внесенные изменения нашли свое отражение в окне браузера.
3.9. Не пользуясь шаблоном (Файл strukt.htm), создайте самостоятельно подобную
Web-страницу (Файл strukt1.htm).
3.10. Измененный файл strukt.htm и файл strukt1.htm включите в отчет по
лабораторной работе.
4. Изучите и запомните элементы форматирования текста (Файл Text.htm). При
нажатии на эту ссылку вы увидите Web-страницу, включающую различные элементы
форматирования текста. Проделайте следующие действия.
4.1. Изучите HTML-код и сравните его с видом страницы, которую вы наблюдаете в
окне браузера. Используя Методические указания или соответствующие разделы пособий
[1,2], а также примеры, приведенные на странице, запомните основные элементы
форматирования текста.
4.2. Используя Блокнот в качестве Редактора, внесите изменения в HTML-код
страницы, изменив строку Форматирование текста на Мой первый опыт форматирования
текста. В новой строке измените цвета, размеры и расположение букв. Сохраните файл
Text.htm, нажмите кнопку Обновить браузера и убедитесь, что строка изменилась.
4.3. Замените тексты первого, второго, центрированного абзацев и, добавив
четвертый центрированный абзац , напечатав соответственно свои данные:
1. Мой рост __ 1 м __см
2. Мой вес__кг
3. Цвет волос_____
4. Цвет глаз_____
Подберите при этом размер, жирность и цвет шрифта соответственно этим данным.
4.4. В первой бегущей строке укажите свои ФИО, домашние адрес и № телефона, а
во второй место работы, должность и рабочий № телефона. Измените параметры шрифтов и
фонов по своему усмотрению.
4.5. В каждой строке, иллюстрирующей применение элементов форматирования
HTML, запишите свои оригинальные тексты.
4.6. Используя элементы форматирования текста, запишите копии первых двух
страничек вашей зачетной книжки и студенческого билета.
3
4.7. Измененный файл Text.htm и файлы ZachetnKnizhka.htm, StudBilet.htm
включите в отчет по лабораторной работе.
5. Изучите и запомните таблицы стилей (Файл style.htm). При нажатии на эту ссылку
вы увидите Web-страницу, включающую примеры использования таблиц стилей. Проделайте
следующие действия.
5.1. Изучите HTML-код и сравните его с видом страницы, которую вы наблюдаете в
окне браузера. Используя Методические указания или соответствующие разделы пособий
[1,2], а также примеры, приведенные на странице, запомните основные приемы
использования таблиц стилей, применяемых для форматирования текста.
5.2. В строке Заголовок 2 укажите свои ФИО, домашние адрес и № телефона, а в
строке Заголовок 3 - место работы, должность и рабочий № телефона. Измените параметры
шрифтов и фонов по своему усмотрению.
5.3. Внесите не менее пяти изменений, улучшающих дизайн страницы.
5.4. Измененный файл style.htm включите в отчет по лабораторной работе.
6. Изучите и запомните использование списков и таблиц (Файл ListTable.htm). При
нажатии на эту ссылку вы увидите Web-страницу, включающую примеры использования
списков и таблиц. Проделайте следующие действия.
6.1. Изучите HTML-код и сравните его с видом страницы, которую вы наблюдаете в
окне браузера. Используя Методические указания или соответствующие разделы пособий
[1,2], а также примеры, приведенные на странице, изучите и запомните основные приемы
использования списков и таблиц.
6.2. По примеру вложенных списков отобразите сведения о вас и ваших товарищах:
Иванов И. И.
Рост 170 см.
Вес 63 кг.
Цвет глаз карие
Петров П. И.
Рост 160 см.
Вес 55 кг.
Цвет глаз голубые
Сидорова Ф. Ф.
Рост 180 см.
Вес 55 кг.
Цвет глаз голубые
Подберите при этом размер, жирность и цвет шрифта соответственно этим данным.
6.3. Аналогично отобразите сведения о вас и ваших товарищах в таблицах 1, 2, 3,
скорректировав соответственно содержание заголовков и ячеек таблиц.
6.4. Внесите не менее пяти изменений, улучшающих дизайн таблиц (Цвета шрифтов,
фона, границы и т. д.).
6.5. Измененный файл ListTable.htm включите в отчет по лабораторной работе.
Содержание отчета
Задание к работе
Файлы:
strukt.html, strukt1.html
Text.html ,ZachetnKnizhka.html, StudBilet.html
style.html
ListTable.html
3. Указанные файлы должны быть представлены в виде распечаток и на дискете с
расширениями .html и .txt
4
Цель работы: Ознакомление с принципами, лежащими в основе языка разметки
гипертекста HTML. Формирование навыков форматирования текста и использования
списков и таблиц.
Файл Struct.html
Файл Struct.txt
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<H1><HTML><HEAD><TITLE>Моя первая страница</TITLE></h1>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<META content="MSHTML 6.00.2900.3157" name=GENERATOR></HEAD>
<BODY bgColor=blue>HTML>
<STYLE>
H1 {color:yellow; font-style:italic}
H2 {
COLOR: yellow; FONT-FAMILY: verdana, sans-serif, arbat
}
H3 {color:yellow}
H4 {color:yellow}
H5 {color:yellow}
H6 {color:yellow}
CODE {
FONT-FAMILY: Arial
}
</STYLE>
5
<META content="Губин М.О." name=Author>
<H1><META content="HTML,WWW , element, document" name=Keywords><!-- Комментарий
к странице -->---<<<МОИ ЛИЧНЫЕ
ДАННЫЕ>>>--- <A name=top; align=center></A></h1>
<HR>
Переход в <A
href="file:///C:/Documents%20and%20Settings/Владелец/Мои%20документы/Struct.html#botto
m">конец</A>
документа
<P>
<HR>
Переход к <A
href="file:///C:/Documents%20and%20Settings/Владелец/Мои%20документы/Struct.html#S001"
><B>ссылке
1</B></A>
<P>
<P>
<HR>
<H1>Губин</H1>
<H2>Михаил</H2>
<H3>Олегович</H3>
<H4>Группа: ИИ-1-03</H4>
<H5>Факультет: Кибернетика</H5>
<H6>Специальность: Автоматизированные системы управления</H6>
<P>Существует шесть уровней заголовков, которые обозначаются H1...H6. Заголовок
уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок.
Шаблон дает представление об относительных размерах букв в заголов-ках. Для
заголовков можно использовать атрибут, задающий выравнивание влево, по центру
или вправо.</P>
<HR>
Здесь расположена <B>ссылка 1</B><A name=S001></A>
<HR>
Валютный дилер в Росевробанке
<P>
<HR>
<A name=bottom></A>
<P>Переход в <A
href="file:///C:/Documents%20and%20Settings/Владелец/Мои%20документы/Struct.html#top">
начало</A>
документа. </P></BODY></HTML>
6
Файл Struct1.html
Файл Struct1.txt
<HTML>
<HEAD>
<TITLE>Здравствуйте! Это моя первая страница</title>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META http-equiv="Content-Style-Type" content="text/css">
<STYLE type="text/css">
H1 {border-width: 16; border: groove; text-align: center; color: yellow}
H2 {color: yellow; font-style: italic}
H3 {color: green; font-style: italic}
H4 {color: white; font-style: italic}
H5 {color: pink; font-style: italic}
H6 {color: blue; font-style: italic}
CODE {font-family: Arial, Verdana; background: Aqua}
P {text-indent: 10; color: Fuchsia; font-size: 14pt}
P CODE {font-weight: bold; color: green; font-size: 12pt}
</style>
</head>
<BODY bgcolor=Black>
<A href="A:\ЛабРаб1_2.htm">Возврат</a>
<P> </p>
<H1>Здравствуйте! Это моя первая страница</h1>
<HR>
<H2>Губин</h2>
7
<HR>
<H3>Михаил</h3>
<HR>
<H4>Олегович</h4>
<HR>
<H5>Дата рождения:05.09.1985</h5>
<HR>
<H6>Место рождения: г.Москва</h6>
<HR>
<BR>
<CODE background="red+blue">Здесь я попытался изобразить свою первую страницу</code>
<P>
<P><CODE> Привет землянам </code></p>
<HR>
</body>
</html>
Файл Text.html
8
Файл Text.txt
<HTML>
<HEAD>
<TITLE> Элементы форматирования текста </title></head>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<BODY>
<A href="A:\ЛабРаб1_2.htm">Возврат</a>
<A name="top"></a>
<CENTER>
<FONT size=6 color="red"> <B>Мой первый опыт </b></font><FONT size=5 color="Lime">
<I> форматирования</i></font>
<FONT size=4 color="Maroon"><SUB></sub></font>
</font><FONT size=6>т</font><FONT size=4 color="Aqua">е</font>
<FONT size=2 color="green">к</font><FONT size=5 color="maroon">с</font>
<FONT size=6 color="fuchsia">т</font><FONT size=7 color="orange">а</font>
</center>
<HR color="Lime">
<P> <FONT size=4 color="Black"><B>Мой рост</b></font><FONT size=5 color="Black"><B>
1м.79см.</b></font></p>
<P> <FONT size=+1 color="Black">Мой вес 79 кг.</font></p>
<P> <FONT size=4 color="Black"><B>Мой цвет волос черный </font></p>
<P> <FONT size=4 color="Black"><B>Мой цвет глаз</b></font> <FONT size=4
color="Green"><B>зелёный</b></font></p>
<P FONT color="Black" align=center> Как нужно правильно форматировать текст смотри и
учись человек.
<HR color="red" SIZE=10 WIDTH=70% ALIGN=left>
<P> <B> Зздесь показано правильное использование элемента В </b>
<P> <BIG> А тут показано как нужно использовать элемент BIG </big>
<P> <SMALL> Здесь соответственно показан элемент SMALL </small>
<P> <I> Использование настоящего элемента I </i>
<P> <STRIKE> Здесь мы продемонстрируем вам как работает элемент STRIKE </strike>
<P> Здесь показан Обычный текст и <SUB> элемент SUB </sub>
<P> аналогично только с <SUP> элемент SUP </sup>
<P> <U> Действие элемента U </u>
<P> <CENTER> Использование элемента CENTER </center>
<P> Элемент BR обеспечивает разрыв <BR> строки
<P><NOBR> Эта строка, хоть и длинная, не должна разрываться броузером, потому что
текст этой строки находится внутри элемента NOBR </nobr>
<HR>
<PRE> Использование элемента PRE.
Он запрещает форматирование
текста броузером и выводит его так,
как определил пользователь.</pre>
<HR>
<P><PRE> Внутри элемента PRE можно использовать ссылку: <A href="#top">Щелкни
(переход в начало документа)</a></pre>
<HR>
<PRE>Использование символов LF и CR в элементе PRE. &#10&#13 Продолжение
строки.</pre>
<HR>
<BDO dir="RTL">Направление текста можно изменить</BDO>
<HR>
9
<P><B> Бегущая строка (работает в Internet Explorer)</b>
<P><MARQUEE bgcolor= "Gold" height=50 behavior="alternate"><FONT size=4
color="Red">Губин Михаил Олегович, 3-я Радиальная, д.14, кв.21,д.т. 326-2983</font></marquee>
<P><MARQUEE bgcolor= "Black" direction="left"><Font size=3 color ="Yellow">Место
работы: РосЕвробанк, Должность: Валютный дилер, р.т.533-45-43</font></marquee>
<HR>
<H3>Задание абсолютных размеров шрифтов</h3>
<P><FONT size=7> 7 размер</font>
<P><FONT size=6> 6 размер</font>
<P><FONT size=5> 5 размер</font>
<P><FONT size=4> 4 размер</font>
<P><FONT size=3> 3 размер</font>
<P><FONT size=2> 2 размер</font>
<P><FONT size=1> 1 размер</font>
<HR>
<P><FONT color="red"> Вы что не видите красный цвет текста</font>
<HR>
<H3>Задание относительных размеров шрифтов</h3>
<P><FONT size=+4> аналогично +4</font>
<P><FONT size=+3> аналогично +3</font>
<P><FONT size=+2> аналогично +2</font>
<P><FONT size=+1> аналогично +1</font>
<P><FONT size=+0> аналогично +0</font>
<P><FONT size=-1> аналогично -1</font>
<P><FONT size=-2> аналогично -2</font>
<HR>
<P><FONT size=+1 face="Arial"> Шрифт типа Arial</font>
</BODY></HTML>
Файл ZachetnKnizhka.html
10
Файл ZachetnKnizhka.txt
<HTML>
<HEAD>
<TITLE>Зачетная книжка</title>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META http-equiv="Content-Style-Type" content="text/css">
<STYLE type="text/css">
H1
H2
H5
</style>
</head>
<BODY bgcolor=White>
<TABLE border=4 width=4 height="123" cellspacing=4 cellspadding=10 bgcolor="Студень.jpg"
align="center">
<TR><P>
<TD bgcolor="White" border=2 width=1 height=123><PRE>
<img src="М.jpg" width="68" height="97" align="left" align="left" vspace=74 hspace=5>
<B><BIG><I>
<B><BIG><I>
<B><I><BIG>
</pre><PRE>
Губин
</i></big></b></u>
Михаил </i></big></b>
Олегович </big> </i></b>
Место
для
печати </pre><PRE>
<U>
</u>
(личная подпись cтудента)
</TD><BR><BR>
</pre>
<TD bgcolor="white" border=3 width=2 valign="top">
<PRE> <U>
</u>
<U>
</u><BR>
<FONT size =3 color="Black"align="center"><B><BIG>
Зачетная книжка №</big>
</b><I><U><B>ИИ-1-03</u>1315</b></i></font>
Фамилия,имя,отчество <B><I><U> <FONT size=+2>
Губин М.О. </font>
</b></i></u>
11
Факультет <B><I><U> <FONT size=+2>
Кибернетика
</font> </big> </b></i></u>
Специальность <B><I><U> <FONT size=+2>
220200
</font> </b></i></u>
Поступил <B><I><U> <FONT size=+2> '03 </font> </u></i></b>переведен<B><I><U>
<BIG> </big></u></i></b> на <B><I><U><FONT size=+2> 1 </font></u></i></b> курс
<SMALL>дата</small>
Приказ №<B><I><U> <FONT size=+2>
2166
</font>
</b></i></u>от<U><B><I><FONT size=+2> 25.07.03 </font></i></b> </u>г.
Проректор по учебной работе<U>
</u>
Декан факультета<U>
"<U><I><B> 01 </b></i></u>"<U><I><B>
</b></i></u>г.
<SMALL>
-1-
</u>
10
</b></i></u>200<U><I><B> 3
</small></pre>
</TD>
</TR>
</table>
</body>
</html>
Файл StudBilet.html
12
Файл StudBilet.txt
<HTML>
<HEAD>
<TITLE>Студенческий билет</title>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META http-equiv="Content-Style-Type" content="text/css">
<STYLE type="text/css">
H1
H2
H5
</style>
</head>
<BODY bgcolor=White>
<TABLE border=4 width="1" cellspacing=4 cellspadding=10 bgcolor="Студень.jpg"
align="center">
<TR><P>
<TD bgcolor="White" border=2 width=1 cellspasing=3 cellspadding=10><FONT
color="black"><PRE> <U>
</u>
<U>
</u> </font></p>
<FONT size=3 color="black"><B> СТУДЕНЧЕСКИЙ БИЛЕТ №<SUP><U><I>иж-103</u>1315</i></sup></b></font>
<img src="М.jpg" width="68" height="97" align="left"
align="bottom"></pre><PRE>Фамилия<U><B><I><BIG> Губин
</big> </i></b></u>
Имя<U><B><I><BIG>
Михаил
</big> </i></b></u>
Отчество<U><B><I><BIG> Олегович
</big> </i></b></u>
Время поступления<U><B><I> 25.07.03 </i></b></u>
Факультет<U><B><I><BIG> Кибернетика </big></i></b></u>
Дата выдачи билета<U><B><I> 01.09.03 </i></b></u>
<B>
Директор (Ректор)</b><U><BIG>
</big> </u></pre></TD>
<TD bgcolor="white" border="4" width="4" valign="top"><IMG src="печать.jpg" vspace=45
hspace=0 align="left">
<PRE> <SMALL> В 20</small><I><U><B>03</i></u></b>/<I><U><B>04</i></u></b>
<SMALL>уч.г. является студентом</small> <I><U><B><BIG>1</big></i></u></b><SMALL>
курса</small>
<SMALL><FONT size=-3><B> Декан ф-та </b></font></small>
<SMALL> В 20</small><I><U><B>04</i></u></b>/<I><U><B>05</i></u></b>
<SMALL>уч.г. является студентом</small> <I><U><B><BIG>2</big></i></u></b><SMALL>
курса</small>
<SMALL><FONT size=-3><B> Декан ф-та </b></font></small>
<SMALL> В 20</small><I><U><B>05</i></u></b>/<I><U><B>06</i></u></b>
<SMALL>уч.г. является студентом</small> <I><U><B><BIG><FONT
color="blue">3</font></big></i></u></b><SMALL> курса</small>
<SMALL><FONT size=-3><B> Декан ф-та </b></font></small>
<SMALL> В 20</small><I><U><B>06</i></u></b>/<I><U><B>07</i></u></b>
<SMALL>уч.г. является студентом</small> <I><U><B><BIG>4</big></i></u></b><SMALL>
курса</small>
<SMALL><FONT size=-3><B> Декан ф-та </b></font></small>
13
<SMALL> В 20</small><I><U><B>07</i></u></b>/<I><U><B>08</i></u></b>
<SMALL>уч.г. является студентом</small> <I><U><B><BIG>5</big></i></u></b><SMALL>
курса</small>
<SMALL><FONT size=-3><B> Декан ф-та </b></font></small>
<SMALL> В 20</small><I><U><B> </i></u></b>/<I><U><B> </i></u></b> <SMALL>уч.г.
является студентом</small> <I><U><B> </i></u></b><SMALL> курса</small>
<SMALL><FONT size=-3><B> Декан ф-та </b></font></small>
<FONT color="blue"align="bottom"><I>Д-9787</i></font>
</pre>
</TD>
</TR>
</table>
</body>
</html>
Файл style.html
Файл style.txt
<HTML>
<HEAD>
<TITLE>Система тренингов</title>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META http-equiv="Content-Style-Type" content="text/css">
<STYLE type="text/css">
H2 {color: maroon; font-style: italic}
CODE {font-family: Arial, Verdana; background: Aqua}
14
P {text-indent: 10; color: Fuchsia; font-size: 14pt}
P CODE {font-weight: bold; color: green; font-size: 12pt}
</style>
</head>
<BODY bgcolor=Red>
<H1><TABLE border=4 cellspacing=3 cellspadding=10 bgcolor="Green" Frame=void
align="center">
<TR><TD bgcolor="Yellow"><FONT color="Green"><PRE><B>Приветсвтует вас ситема
тренингов</table></font></pre></b></h1>
<HR color="Blue">
<H2>Губин Михаил Олегович</h2>
<H3>Место работы Росевробанк</h3>
<HR>
Текст, не отформатированный никаким стилем (т.е. формат по умолчанию).<BR>
<P style="text-indent: 0;font-size: 10pt; font-style: italic; color: blue"> Для этого
абзаца использован собственный (inline) стиль.</p>
<P>Это стиль, назначенный в элементе STYLE, для абзацев P всей страницы. В частности,
выбран отступ первой строки.</p>
<CODE background="red"> Свойства элемента CODE можно переопределить, например,
задать фон</code>
<P>
<P><CODE> А этот стиль действует, если элемент CODE вложен в элемент P </code></p>
<HR>
</body>
</html>
Файл ListTable.html
15
Файл ListTable.txt
<HTML>
<HEAD>
<TITLE> Мои примеры списков </title>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<STYLE type="text/css">
OL.c01 {list-style-type: circle}
</style>
</head>
<BODY bgcolor="black">
<HR color="blue">
<P align="center"><FONT size=4 color="red" bgcolor="blue"><B> Мои первые
списки</b></font></p>
<HR color="blue">
<H3></h3>
<UL><FONT color = "blue"><B><U>Пример ненумернованного списка</u></b>
<LI>Губин
<LI>Михаил
<LI>Олегович</font>
</ul>
<HR color="red">
<H3><MARQUEE bgcolor="Blue" direction="left"> <FONT size=5 color="yellow"><B><U>
Пример вложенных списков</b></u></font></marquee></h3>
<OL>
<LI><FONT color="yellow">Губин М.О.
16
<OL>
<LI>Рост<FONT size=+3>179см.</font>
<LI>Вес <FONT size=2><B>79кг.</b></font>
<LI>Цвет глаз <FONT color="green">зеленый</font>
</ol>
<LI>Губин Ю.С.
<OL>
<LI>Рост<FONT size=+5>195см.</font>
<LI>Вес<FONT size=4><B>100кг.</b></font>
<LI>Цвет глаз <FONT color="blue">голубой</font>
</ol>
<LI>Шаганогачереззабор Л.З.
<OL>
<LI>Рост<FONT size=+6>279см.</font>
<LI>Вес <FONT size=5><B>179кг.</b></font>
<LI>Цвет глаз <FONT color="red">красный</font>
</font>
</ol>
<HR>
<H3><FONT color ="blue">Нумерованный список</h3>
<OL type="I">
<LI value = 3>Отсчет начинается с 3
<LI>Отсчет начинается с 4
<LI>Отсчет начинается с 5
<LI>Отсчет начинается с 6
</font>
</ol>
<HR color="red" SIZE=10 >
<CENTER><FONT size=6><MARQUEE bgcolor="yellow" direction="right"><FONT
color="blue"> Примеры таблиц</font></marquee></font></center>
<HR color="blue">
<H2><FONT color="red">Таблица 1</font></h2>
<TABLE border=4 cellspacing=3>
<CAPTION> <FONT color="Red">Таблица расхода семейного бюджета </font></caption>
<TR><TH bgcolor="yellow">На сегодня
<TH bgcolor="yellow">НА вчера
<TR><TD><FONT color="red">179</font>
<TD><FONT color ="red"> 123</font>
<TR><TD> <FONT color ="red"> 125</font>
<TD><FONT color ="red"> 323</font>
</table>
<HR color="blue">
<H2><FONT color="pink">Таблица 2</font></h2>
<TABLE border=4 cellspacing=3>
<CAPTION><FONT color="blue"> Пример матрицы финансового анализа </font></caption>
<TR><TH bgcolor="yellow">&#160
<TH bgcolor="yellow">A
<TH bgcolor="yellow">B
<TR><TH bgcolor="yellow">C
<TD><FONT color ="red">15% </font>
<TD><FONT color ="red"> 17%</font>
<TR><TH bgcolor="yellow">Расходы
17
<TD><FONT color ="red"> 12%</font>
<TD><FONT color ="red"> 11%</font>
</table>
<HR color="blue">
<H2><FONT color ="Gray"><B> Таблица 3 </b></font></h2>
<TABLE border="4" cellspacing=3 background="C:\Documents and Settings\Владелец\Мои
Документы\Голубые холмы.gif">
<CAPTION><FONT color ="Gray"><B>Таблица с объединенными ячейками и фоновым
рисунком </b></font></caption>
<TR><TH rowspan="2"> <TH colspan="2"><FONT color ="Gray">Доход</font>
<TR><TH>За месяц<TH>За год
<TR><TH>За погрузку вагонов<TD>123<TD>2345
<TR><TH>За разгрузку вагонов<TD>1245<TD>567643
</table>
<HR color="blue">
<H2><FONT color ="Gray"><B> Использование элементов THEAD, TBODY и TFOOT
</b></font></h2>
<TABLE border=2>
<THEAD>
<TR> <TD><FONT color="Green">Вход</font><TD><FONT color="Green">Выход</font>
<TFOOT>
<TR> <TD><FONT color="Green"> Работа начало </font><TD><FONT color="Green">
Работа конец </font>  
<TBODY>
<TR> <TD><FONT color="red">2</font> <TD><FONT color="red">14</font>
<TR> <TD><FONT color="red">3</font> <TD><FONT color="red">4</font>
<TBODY>
<TR> <TD><FONT color="red">4</font> <TD><FONT color="red">16</font>
<TR> <TD><FONT color="red">6</font> <TD><FONT color="red">17</font>
<TR> <TD><FONT color="red">5</font> <TD><FONT color="red">16</font>
</table>
<HR color="blue">
<H2><FONT color="Green">Объединение ячеек</font></h2>
<TABLE border=4 cellspacing=0 width=70%>
<TR><TD bgcolor="yellow"><B>Выбор действия</b>
<TD bgcolor="yellow"><B>Возможные варианты</b>
<TR><TD rowspan=3 bgcolor="lime">1234
<TD><FONT color="Yellow">1234</font>
<TR><TD><FONT color="Yellow">134</font>
<TR><TD><FONT color="Yellow">123</font>
<TR><TD colspan=2 bgcolor="aqua" align="center">SUM=12345$
</table>
<HR color="blue">
<H2><FONT color="Yellow">Объединение ячеек</font></h2>
<H3></h3>
<TABLE border=4 cellspacing=0 width=70%>
<TR><TD bgcolor="yellow"><B>Заголовок 1</b>
<TD bgcolor="yellow"><B>Заголовок 2</b>
<TD bgcolor="yellow"><B>Заголовок 3</b>
<TR><TD rowspan=4 colspan=2 bgcolor="lime">Ячейка 1
<TR><TD><FONT color="Yellow">1234</font>
18
<TR><TD><FONT color="Yellow">1234</font>
<TR><TD><FONT color="Yellow">1234</font>
<TR><TD colspan=3 bgcolor="aqua" align="center">Ячейка 5
</table>
<HR color="blue">
<H2><FONT color="Yellow">Вложенная таблица</font></h2>
<P>Для Netscape Communicator вложенная таблица должна иметь конечные теги TD!!!
<P>
<TABLE border=4 cellspacing=2 width=75%>
<TR><TD bgcolor="yellow">Таблица 1
<TD bgcolor="yellow">
<TABLE border=2 cellspacing=2>
<TR><TD bgcolor="red">Таблица 2
<TD bgcolor="red">Ячейка 2-2
<TR><TD bgcolor="red">Ячейка 3-2
<TD bgcolor="red">Ячейка 4-2
</table>
<TR><TD bgcolor="yellow">Ячейка 3-1
<TD bgcolor="yellow">Ячейка 4-1
</table>
<HR color="blue">
<H2><FONT color="Yellow">Табличка 4</font></h2>
<TABLE border=4 cellspacing=3 cellpadding=10>
<TR><TD bgcolor="yellow">Петровым 2 звонка
</table>
<HR color="blue">
<H2><FONT color="Yellow">Название фирмы и логотип рядом</font></h2>
<TABLE border=0 >
<TR><TD><H3><FONT color ="red">ЗАО</font> <I><FONT color="Yellow"> Обо всем и они
очем</font></i></h3>
<TD><IMG src="C:\Documents and Settings\Владелец\Мои Документы\Фирменный знак.gif">
</table>
<HR color="green">
</BODY>
</HTML>
Скачать