Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Омский государственный университет им. Ф.М. Достоевского

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

HTML3

.pdf

Скачиваний:

Добавлен:

12.02.2015

Размер:

113.91 Кб

Скачать

☆

Второе занятие по HTML

Таблицы и ссылки

Задание1.

1.На диске D создайте свою папку (если ее нет).

2.Откройте Блокнот, создайте файл table1.html и сохраните его в вашей папке. В окне этого файла запишите следующие команды (они выделены жирным шрифтом):

<HTML>

<HEAD> <TITLE>Таблица</TITLE>

</HEAD>

<BODY> <P>Таблица.

<I>Наша первая простая таблица</I>. <TABLE BORDER=”1” WIDTH =”100%”> <TR>

<TD WIDTH=”70%”>Соответствующий тегу шрифт</TD> </TR>

<TD WIDTH=”70%”><TT>Телеграфный шрифт </TT></TD> </TR>

<TR>

<TD WIDTH=”70%”><I>Курсивный шрифт </I></TD> </TR>

<TR>

<TD WIDTH=”70%”><B>Жирный шрифт </B></TD> </TR>

<TR>

<TD WIDTH=”70%”><BIG>Крупный шрифт </BIG></TD> </TR>

<TR>

<TD WIDTH=”30%”>&LT;SMALL&GT</TD>

<TD WIDTH=”70%”><SMALL>Мелкий шрифт </SMALL></TD> </TR>

<TR>

<TD WIDTH=”70%”><S>Перечеркнутый шрифт </S></TD> </TR>

<TR>

</TABLE>

</BODY>

</HTML>

3. Загрузите Microsoft Internet Explorer. В строке “Адрес” выбери те вашу папку и файл table1.html в этой папке.

Что нового в тексте этого файла? Появился тег <TABLE>. Это означает, что между этим тегом и закрывающим тегом </TABLE> расположена таблица. Она состоит из строк и столбцов. Каждая строка начинается тегом <TR> и заканчивается тегом </TR>. Каждый столбец записывается внутри строки с помощью открывающего тега <TD> и закрывающего тега </TD>. В тегах <TABLE>, <TR> и <TD> можно указать свойства. Мы задали параметр ширины таблицы в виде WIDTH=”100%”. Это означает, что таблица займет всю ширину окна браузера. В параметрах столбцов мы также указываем ширину столбца в процентах от ширины всей таблицы.

Комбинации символов &LT; &GT; используются для того, чтобы дать возможность браузеру отобразить на экране специальные символы. Если в тексте файла записать специальный символ в обычном его виде, то браузер воспримет его не как элемент текста, а как элемент программы, и не выведет на экран. Комбинации символов &LT; соответствует левая угловая скобка <, а комбинации &GT; соответствует правая угловая скобка >.

Задание 2.

Создайте в блокноте файл table2.html, сохраните его в вашей папке и напишите HTML-программу, выводящую на браузер следующую таблицу:

Название	Код RGB	Имя
черный	#000000	black
темно-бордовый	#800000	maroon
зеленый	#008000	green
оливковый	#808000	olive

Вложенные таблицы

Таблицы можно вкладывать друг в друга. Вставим в ячейку первой строки второго столбца таблицы файла table1.html другую таблицу. Для того, чтобы одна таблица четче выделялась на фоне другой, зададим разные значения параметров цвета фона для этих таблиц. Также мы установили параметр выравнивания второй таблицы по центру и задали ее относительную общую ширину равной 70%, поэтому вложенная таблица занимает не всю ширину удочерившей ее ячейки.

Задание 3.

1. Откройте Блокнот, создайте файл table3.html и сохраните его в вашей папке. В окне этого файла запишите следующие команды (они выделены жирным шрифтом):

<HTML>

<HEAD>

<TITLE>Таблица в таблице</TITLE> </HEAD>

<BODY>

<P>Изучаем таблицы. Таблица в таблице.

<TD width=”30%”>Первая таблица. Первая строка, первый столбец. </TD>

<TD width=”70%”> Первая таблица. Первая строка, второй столбец. В эту ячейку таблицы вложена вторая таблица.

<TD width=”50%”>Вторая таблица. Первая строка, первый столбец.</TD> <TD width=”50%”>Вторая таблица. Первая строка, второй столбец.</TD> </TR>

<TR>

<TD width=”50%”>Вторая таблица. Вторая строка, первый столбец.</TD> <TD width=”50%”>Вторая таблица. Вторая строка, второй столбец.</TD> </TR>

</TABLE></TD>

</TR>

<TR>

<TD width=”30%”>Первая таблица. Вторая строка, первый столбец. </TD> <TD width=”70%”> Первая таблица. Вторая строка, второй столбец.</TD> </TR>

</TABLE>

</BODY>

</HTML>

2. Загрузите Microsoft Internet Explorer, в строке “Адрес” выберете вашу папку и файл table3.html в этой папке. Посмотрите, как выглядит ваша страничка.

	Свойства тега <TABLE>

align	Выравнивание, относительное положение таблицы внутри элемента, в
	котором она находится
bgcolor	Цвет фона таблицы
width	Ширина таблицы
cols	Количество столбцов в таблице
border	Толщина рамки таблицы
frame	Видимость границ, окаймляющих таблицу
cellspacing	Расстояние между ячейками таблицы
cellpadding	Расстояние между границей таблицы и содержимым ячейки

Свойство frame может иметь следующие значения: frame = void/above/below/hsides/lhs/rhs/vsides/box/border

Им соответствуют такие способы отображения границ таблицы:

void	Границы не показаны
above	Только верхняя граница
below	Только нижняя граница
hsides	Верхняя и нижняя границы
lhs	Только левая граница
rhs	Только правая граница
vsides	Правая и левая границы
box	Все четыре границы
border	Все четыре границы

3. Изменяя все свойства тега <TABLE> (см. таблицу свойств), создайте различные варианты обрамления, раскраски и расположения основной таблицы.

Объединение ячеек в таблице

Для объединения ячеек в таблице используются параметры rowspan и colspan. Им присваивается целое число, равное количеству объединенных ячеек. Эти параметры задаются в ярлыке <TD>.

Задание 4.

1.Откройте Блокнот, создайте файл table4.html и сохраните его в вашей папке.

2.Напишите HTML-программу, выводящую на броузер следующую таблицу. Для этого в обычной таблице из 3

столбцов и 6 строк объедините ячейки 5-1, 5-2, 5-3 (colspan=3) и ячейки 3-1, 4-1 (rowspan=2).

Название формулы	Формула	Обозначения
Сумма внутренних углов	A+B+C = 180o	A, B, C – величины углов
Площадь треугольника	S = ah/2	a- основание, h – высота
	S=bcsin(A)/2	A – угол, заключенный между сторонами b и c
	Прямоугольный треугольник
Площадь треугольника	S=ab/2	а, b – катеты

Замечание. Для написания верхних индексов используется тег <SUP>. Например, с2 записывается так: c<SUP>2</SUP>. Для изменения цвета ячеек таблицы, центрирования и форматирования текста, используйте известные вам свойства BGCOLOR, ALIGN, теги <FONT> (свойство color), <U> и т.д., записывая их в ярлыках <TD> или <TR>.

Вот пример пятой строки таблицы:

</TR>

<TD colspan=3 align="center"><font color="red"> <B>Прямоугольный треугольник</B> </font></TD> </TR>

<TR>

Списки

Списки – это фрагменты текста, состоящие из элементов или записей. Каждый элемент списка выделяется порядковым значком: цифрой, буквой. Такой список называется нумерованным (упорядоченным). Ненумерованный список для выделения каждой записи, входящей в список, использует маркеры. В файле HTML список описывается внутри фрагмента, обрамленного тегами <OL> и </OL>, если список упорядоченный. Если список неупорядоченный, то используются теги <UL> и </UL>. Каждая запись предваряется тегом <LI>, закрывающий тег </LI> не нужен.

Пример. (неупорядоченный список – фрагмент )

<UL>

<LI>Первый элемент неупорядоченного списка <LI>Второй элемент неупорядоченного списка <LI>Третий элемент неупорядоченного списка

</UL>

Списки можно вкладывать друг в друга. Можно вложить список в таблицу или, наоборот, таблицу в список. Таблицы и списки являются блочными элементами.

Задание 5.

1.Откройте Блокнот, создайте файл list1.html и сохраните его в вашей папке.

2.Напишите HTML-программу, выводящую на браузер следующую таблицу

		Содержание:
	∙	Текстовые редакторы;
	1.	Word;
Информатика	∙	Языки программирования;
	∙	Языки программирования;
	1.	HTML;
	2.	Pascal;
	3.	Си++;