3. Задание на лабораторную работу
1. Создать с помощью стандартной программы Windows Блокнот html - документ в соответствии со следующими требованиями:
· в головной части документа должна быть введена надпись “Лабораторная работа № 5 студ. Иванова И.И.” (вставить свою фамилию);
· в цвете фона документа красная, зеленая и синяя составляющие должны примерно соответствовать N% от максимально возможного значения, где N - порядковый номер студента по журналу;
· цвет обычного текста документа должен примерно соответствовать (100-N)% от максимального значения красного, зеленого и синего цвета;
· текст документа должен быть введен и отформатирован в соответствии с рис. 5.1.-5.2.
Рис. 5.1. Вид первой части разрабатываемого документа при просмотре в браузере
Рис. 5.2. Вид второй части разрабатываемого документа при просмотре в браузере
4. Содержание отчета
Отчет должен содержать:
1. Название работы.
2. Ф.И.О. и группу студента, выполнившего работу.
3. Цель работы.
4. Задание.
5. Распечатки всех HTML файлов, созданных при выполнении работы.
6. Твердые копии экрана, демонстрирующие результаты работы.
7. Выводы по работе.
5. Контрольные вопросы
1. Что такое тэги HTML и зачем они используются?
2. Какие элементы содержат тэги?
3. Из чего состоит спецификация атрибутов?
4. Какие конструкции HTML являются case чувствительными и зачем они используются?
5. Какова структура HTML документа?
6. Какие атрибуты тега <body> используются для установки цветов фона и текста документа?
7. Сколько уровней заголовков разделов имеет HTML и какой синтаксис заголовков?
8. Какой тэг служит признаком нового абзаца?
9. Какого типа списки поддерживает HTML и какой их синтаксис?
10.Какие тэги определяют логические стили текста?
11.Какие тэги определяют физические стили текста?
12.Для чего служат специальные символы?
13.Как выражается и задается размер шрифта?
14.Как задается имя семейства шрифтов?
Лабораторная работа № 6 Включение таблиц, связей и графики в html-документы
1. Цель работы
Приобретение основных навыков включения в документы HTML таблиц, гиперсвязей и графических элементов.
2. Основные положения
Таблицы
Таблицы в HTML являются удобным средством форматирования как собственно таблиц, так и "нетабличной" информации. В последнем случае таблицы используют для того, чтобы добиться жестко заданного взаимного расположения частей WWW-страницы в окне программы просмотра.
Тэг <TABLE> (задание и описание таблиц) является основной командой форматирования документа HTML.
Задание таблицы определяется двумя командами (и соответственно их атрибутами):
· <TR> (table row) - описание строки таблицы;
· <TD> (table detail)- описание клетки таблицы.
Структура таблицы выглядит следующим образом:
<TABLE>
<TR>
<TD>Ряд 1, ячейка 1</TD>
<TD>Ряд 1, ячейка 2</TD>
</TR>
<TR>
<TD>Ряд 2, ячейка 1</TD>
<TD>Ряд 2, ячейка 2</TD>
</TR>
</TABLE> .
Пример простой таблицы:
<TABLE>
<TR>
<TD>Яблоки</TD><TD>Помидоры </TD>
</TR>
<TR>
<TD>Апельсины<TD></TD>Кабачки</TD>
</TR>
</TABLE>,
что на экране отобразится:
По умолчанию таблица прижимается (aligns) влево, ширина таблицы определяется наиболее длинным элементом в столбце, содержание каждой клетки размещается в середине клетки по высоте и прижимается к левому углу по ширине.
Ширина таблицы задается атрибутом WIDTH= тэга <TABLE>.. Значение ширины таблицы может задаваться в пикселях или в процентах от ширины экрана просмотрщика. Содержание каждой клетки может быть размещено с помощью атрибутов ALIGN= (горизонтальное положение) и VALIGN= (вертикальное положение) для тэгов <TR> и <TD>.
Атрибут VALIGN может принимать следующие значения:
· top - прижать вверх;
· bottom - прижать вниз;
· middle - разместить по центу.
Атрибут ALIGN может принимать следующие значения:
· left - прижать влево;
· right - прижать вправо;
· center - разместить по центу.
Расстояние в пикселях между границей клетки и ее содержимым и между клетками определяют атрибуты CELLPADDING= и CELLSPACING= соответственно.
Рассмотрим пример таблицы, занимающей весь экран просмотрщика и содержащей клетки прижатые влево и вверх:
<TABLE WIDTH="100%">
<TR VALIGN=TOP ALIGN=LEFT>
<TD>Яблоки<TD>Огурцы
<TR VALIGN=TOP ALIGN=LEFT>
<TD>Апельсины<TD>Помидоры
</TABLE>,
что будет отображено на экране следующим образом:
Яблоки Огурцы
Апельсины Помидоры
В этом примера ширина таблицы задана в процентах (100%) от ширины экрана.
Заголовок к таблице можно добавить помощью тэга <CAPTION> после тэга <TABLE>. По умолчанию заголовок центрируется относительно таблицы. При помощи атрибутов ALIGN= и VALIGN= заголовок можно разместить вверху (top) или внизу (bottom) и в левом (left) или правом (right) углу таблицы.
Заголовок к строке (rows) или столбцу (columns) можно добавить помощью тэга <TH> после тэга <TR> или <TD>.
Внутри клетки, задаваемой тэгом <TD> можно поместить текст или рисунок.
Рамку вокруг таблицы и каждой клетки можно нарисовать с помощью атрибута BORDER=n к тэгу <TABLE>. По умолчанию используется нулевая толщина рамки (текст отображается в табличном формате, но без рамки).
Отметим, что если клетка является пустой, вокруг нее рамка рисоваться не будет, поэтому в пустые клетки в таблицах следует помещать любой непечатный символ (например, неразрывный пробел  ).
Ширина рамки (бордюра) задается в пикселях.
В следующем примере построена таблица с рамкой, заголовком и headings:
<TABLE BORDER=1>
<CAPTION>Фрукты и Овощи</CAPTION>
<TR>
<TH>Фрукты<TH>Овощи
<TR>
<TD>Яблоки<TD>Помидоры
<TR>
<TD>Апельсины<TD>Кабачки
</TABLE>.
На экране это будет отображено следующим образом:
По умолчанию заголовки центрируется относительно клетки таблицы. Атрибуты ALIGN= и VALIGN= соответственным образом изменяют его горизонтальное и вертикальное расположение.
При формировании таблиц, можно задавать цвет фона клеток и цвет рамки.
Цвет фона во всей таблице, в строке или в клетке устанавливает атрибут BGCOLOR= к тэгам <TABLE>, <TR> и <TD> соответственно.
Цвет рамки соответствующих элементов таблицы устанавливает атрибут BORDERCOLOR= тэгов <TABLE>, <TR> и <TD>.
В следующем примере использовано задание одинакового цвета фона для заголовков (headings) столбцов, и разное для клеток таблицы:
<TABLE BORDERCOLOR=NAVY BORDER=1>
<CAPTION>Фрукты и Овощи</CAPTION>
<TR BGCOLOR=GRAY>
<TH>Фрукты<TH>Овощи
<TR>
<TD BGCOLOR=LIME>Яблоки<TD BGCOLOR=AQUA>Огурцы
<TR>
<TD BGCOLOR=LIME>Апельсины<TD BGCOLOR=AQUA>Помидоры
</TABLE>.
Используя тэги изменения текстовых такие как, например, <B> (bold - полужирный), <I> (italic - курсив) или <FONT> (команда задания типа фонта) можно изменить начертание букв в тексте, однако эти команды правильно действуют (особенно <FONT>) только в пределах одной клетки. При переходе в другую клетку, при выходе из таблицы или при входе в таблицу эти команды могут быть отменены, а могут и не отменены. Для правильного их использования команды изменения шрифтов следует указывать в каждой клетке таблицы.
Как известно, таблицы далеко не всегда имеют правильную клеточную структуру.
Для задания не стандартных таблиц используются дополнительные тэги и атрибуты. Тэги <THEAD>, <BODY> и <TFOOT> делят таблицу на три части: верхняя часть таблицы (header), тело таблицы (body) и нижняя часть таблицы (footer), в каждой из которых может быть свое деление на клетки.
Общие свойства столбцов таблицы определяют тэги <COLORGROUP> и <COL>, объединяя атрибуты отдельных клеток тега <TD>.
Способ отрисовки рамки таблицы определяют атрибуты FRAME и RULES тэга <TABLE>.
Объединять клетки таблицы в группы, вокруг которых рисуется рамка, позволяют атрибуты COLSPAN= и ROWSPAN= тэгов <TH> и<TD>
Например, рассмотрим таблицу, имеющую рамку вокруг таблицы, а внутри таблицы рамкой выделяются верхняя часть таблицы (заголовок) и столбцы в нижней части:
<TABLE WIDTH="50%" BORDER=1 FRAME=BOX RULES=GROUPS>
<COLGROUP ALIGN=CENTER>
<COLGROUP ALIGN=CENTER>
<THEAD>
<TR>
<TH COLSPAN=2>Фрукты и овощи
<TBODY>
<TR>
<TD>Яблоки<TD>Огурцы
<TR>
<TD>Апельсины<TD>Помидоры
</TABLE>.
На экране это отобразится следующим образом:
Принципиально в стандарте языка имеется возможность включать в качестве фона клетки таблицы рисунки, и устанавливать правила отрисовки рамки, но не все просмотрщики это понимают.