1896
.pdf
<DD>Кто придумал Интернет <DT>Основные понятия среды Интернета <DD>Составляющие Интернета
</DL>
</BODY></HTML>
На рис. 29 показано, как будет выглядеть файл в окне браузера.
Рис. 29. Вид Web-страницы в окне браузера
Списки в списках
Одно из замечательных свойств списков – это возможность вкладывать их друг в друга. Вложение списков в списки позволяет создавать несколько уровней организации информации.
Приведем пример:
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Internet</TITLE></HEAD><BODY>
<H1><P ALIGN="CENTER">Интернет и World Wide Web</H1><BR> <OL><LH><H2>Здесь вы можете узнать:</H2></LH><BR>
<LI>Что такое Интернет
<UL TYPE="CIRCLE"> <LI>Определение понятия
</UL>
<LI>Историю создания Интернета
<UL TYPE="CIRCLE"> <LI>Кто придумал Интернет
</UL>
<LI>Основные понятия среды Интернета
<DL>
<DT>Составляющие Интернета:
<DD>Электронная почта, телеконференции, поисковые системы ...
</DL>
</OL>
</BODY></HTML>
На рис. 30 показано, как будет выглядеть файл в окне браузера.
Рис. 30. Вид Web-страницы в окне браузера
Контрольные вопросы
1.Для чего необходимы списки на Web-странице?
2.Как оформить маркированный список в Web-документе?
3.Как оформить нумерованный список в Web-документе?
4.Как оформить список определений в Web-документе?
5.Каким образом определяется тип списка?
6.Каким образом задается нумерация списка?
Практические задания
1.Создайте HTML-документ, отображающий на экране браузера следующую информацию (рис. 31):
Рис. 31. Вид Web-страницы в окне браузера
2.Создайте HTML-документ, отображающий на экране браузера следующую информацию (рис. 32):
Рис. 32. Вид Web-страницы в окне браузера
3.Напишите программу для отображения списка:
ОГЛАВЛЕНИЕ
I. Общие сведения о программировании.
1.Введение.
2.Что такое информатика?
3.Что такое информация?
4.Что такое вычислительная машина? Общие положения. Подробнее о памяти. Ввод-вывод.
Оперативная память, внешняя память. Порядок некоторых величин.
5.Что может делать вычислительная машина?
6.Что такое программирование?
7.Несколько ключевых слов.
8.Краткая история информатики.
a.Прединформатика.
b.Протоинформатика.
c.Информатика.
d.Библиография.
e.Задача.
II. Введение в языки программирования.
1.4.ИСПОЛЬЗОВАНИЕ ТАБЛИЦ НА WEB-СТРАНИЦЕ
1.4.1.Основные теги создания таблиц
Усписков есть один недостаток – они одномерны. Таблицы же позволяют располагать данные не только по строкам, но и по столбцам. Благодаря наличию строк и столбцов таблицы удобны для сравнения и противопоставления информации. Каждые строку и столбец можно озаглавить, чтобы информация выглядела подобно электронной таблице. Хорошая таблица делает Web-страницу информативной, аккуратной и организованной, неудачная разбивает ее и запутывает. Задание таблицы может показаться сложным, поскольку для этого применяется целый ряд тегов. В табл. 12 приведены теги для создания таблиц.
|
Таблица 12. Теги создания таблиц |
|
Тег |
Комментарий |
|
<TABLE>…</TABLE> |
Эти теги охватывают таблицу |
|
<TABLE BORDER="1"> |
Создает видимую сетку, разделяющую строки и |
|
|
столбцы |
|
<CAPTION>…</CAPTION> |
Текст, отмеченный этими тегами, выводится в виде |
|
|
заголовка |
|
<TH>…</TH> |
Теги отображают текст заголовка строки или |
|
|
столбца немного более крупным полужирным |
|
|
шрифтом |
|
<TR>…</TR> |
Теги определяют каждую строку таблицы. Тег |
|
|
</TR> необязателен, но он делает HTML-код более |
|
|
полным и понятным |
|
<TD>…</TD> |
Эта пара тегов определяет текст каждой ячейки |
|
|
таблицы |
|
<TD ROWSPAN=" "> |
Указывает количество строк, которое объединено в |
|
|
одной ячейке (по умолчанию =1) |
|
<TD COLSPAN=" "> |
Указывает количество столбцов, которое |
|
<TH COLSPAN=" "> |
объединено в одной ячейке (по умолчанию =1) |
|
<TABLE WIDTH=" "> |
Устанавливает ширину таблицы в пикселях или |
|
|
процентах от ширины документа |
|
<TD WIDTH=" "> |
Устанавливает ширину ячейки в пикселях или |
|
|
процентах от ширины документа |
|
<TABLE HEIGHT=" "> |
Устанавливает высоту таблицы в пикселях или |
|
|
процентах от высоты документа |
|
<TD HEIGHT=" "> |
Устанавливает высоту ячейки в пикселях или |
|
|
процентах от высоты документа |
|
<TD NOWRAP=" "> |
Не позволяет программе просмотра делать перевод |
|
|
строки в ячейке таблицы |
|
Замечание: пиксель (элемент рисунка) – это единица измерения, характеризующая разрешение монитора. Чтобы представить себе размер пикселя, вспомните, что стандартный экран монитора VGA (c
разрешением 640х480) содержит 640 пикселей по ширине и 480 по высоте. Таким образом, изображение размером 320х240 пикселей займет примерно половину экрана монитора VGA.
1.4.2. Выравнивание текста в таблице
Для каждой ячейки таблицы можно задать способ выравнивания текста как по вертикали, так и по горизонтали. Способы выравнивания задаются специальными ключевыми словами ALIGN и VALIGN. Можно задать также способ выравнивания для всей таблицы (в теге <TABLE>), для заданной строки (в теге <TR>) или для одной ячейки (в теге <TD>). Каждое из ключевых слов ALIGN и VALIGN имеет три возможных значения, которые приведены в табл. 13.
|
Таблица 13. Ключевые слова выравнивания |
||
Значение |
Комментарий |
|
|
ALIGN="LEFT" |
Выравнивает текст в ячейке по левому краю (по |
|
|
|
умолчанию) |
|
|
ALIGN="CENTER" |
Выравнивает текст в ячейке по центру |
|
|
ALIGN="RIGHT" |
Выравнивает текст в ячейке по правому краю |
|
|
VALIGN="TOP" |
Выводит текст от самого верха ячейки (полезно, |
когда |
|
информация состоит из нескольких строк) |
|
|
|
|
|
|
|
VALIGN="MIDDLE" |
Выравнивает текст в ячейке вертикально по центру |
(по |
|
умолчанию) |
|
|
|
VALIGN="BOTTOM |
Выравнивает текст в ячейке по нижнему краю |
|
|
" |
|
|
|
Приведем примеры выравнивания текста:
1.Для всей таблицы: <TABLE ALIGN="LEFT">
2.Для заданной строки: <TR ALIGN="TOP">
3.Для одной ячейки: <TD ALIGN="CENTER">
Используя материал табл. 12 и 13, создадим ряд таблиц. Создадим таблицу вида:
|
Интернет-ресурсы |
|
|
|
|
Список адресов Internet |
|
Информация |
http://russia.uthscsa.edu/Music/ |
|
Музыка на сервере «Маленькая Россия» в |
|
|
Сан-Антонио |
http://www.deol.ru/queen/ |
|
Русские странички о группе Queen |
http://www.september.ru |
|
Сервер газеты «Первое сентября» |
http://www.glasnet.ru |
|
Сервер газеты «Информатика» |
http://www.rector.msu.su |
|
Сервер МГУ |
http://www.phys.msu.su |
|
Сервер физфака МГУ |
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Table</TITLE></HEAD><BODY>
<CENTER><TABLE BORDER="1">
<CAPTION ALIGN="CENTER">Интернет-ресурсы </CAPTION>
<TR>
<TH>Список адресов Internet</TH> <TH>Информация</TH>
</TR>
<TR>
<TD> http://russia.uthscsa.edu/Music/</TD>
<TD> Музыка на сервере «Маленькая Россия» в Сан-Антонио</TD> </TR>
<TR>
<TD>http://www.deol.ru/queen/</TD> <TD>Русские странички о группе Queen</TD>
</TR>
<TR>
<TD>http://www.september.ru</TD> <TD>Сервер газеты «Первое сентября»</TD> </TR>
<TR>
<TD>http://www.glasnet.ru</TD> <TD>Сервер газеты «Информатика»</TD>
</TR>
<TR>
<TD>http://www.rector.msu.su</TD> <TD>Сервер МГУ</TD>
</TR>
<TR>
<TD>http://www.phys.msu.su</TD> <TD>Сервер физфака МГУ</TD> </TR>
</TABLE>
</CENTER>
</BODY></HTML>
На рис. 33 показано, как будет выглядеть файл в окне браузера.
Рис. 33. Вид Web-страницы в окне браузера
Чтобы все ячейки таблицы были разделены тонкими линиями, в тег <TABLE> добавлено ключевое слово BORDER="1". Если необходимо, чтобы ячейки таблицы были разделены линией потолще, то задается число больше единицы, например BORDER="7". Если же задать BORDER="0", то слова ячейки будут автоматически выровнены, но сетки не будет. То есть наша созданная таблица будет выглядеть следующим образом (рис. 34).
Рис. 34. Вид Web-страницы в окне браузера
Объединение нескольких строк в одну ячейку
Изменим нашу таблицу, объединив по две строки во 2-м столбце:
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Table</TITLE></HEAD><BODY>
<CENTER><TABLE BORDER="1">
<CAPTION ALIGN="CENTER">Интернет-ресурсы</CAPTION> <TR>
<TH>Список адресов Internet</TH> <TH>Информация</TH>
</TR>
<TR>
<TD> http://russia.uthscsa.edu/Music/</TD> <TD ROWSPAN="2">Музыка</TD>
</TR>
<TR>
<TD>http://www.deol.ru/queen/</TD>
</TR>
<TR>
<TD>http://www.september.ru</TD> <TD ROWSPAN="2">Газеты</TD> </TR>
<TR>
<TD>http://www.glasnet.ru</TD>
</TR>
<TR>
<TD>http://www.rector.msu.su</TD> <TD ROWSPAN="2">МГУ</TD>
</TR>
<TR>
<TD>http://www.phys.msu.su</TD>
</TR></TABLE></CENTER>
</BODY></HTML>
На рис. 35 показано, как будет выглядеть файл в окне браузера.
Рис. 35. Вид Web-страницы в окне браузера
Объединение нескольких столбцов в одну ячейку
Изменим нашу таблицу, объединив столбцы в 1-й строке: