- •Введение
- •От автора
- •С труктура html документов
- •Анатомия web страницы
- •Указание приложения, в котором был создан документ
- •Оформление основной части страницы
- •Форматирование текста
- •Теги управления шрифтом
- •Специальные символы
- •Задание произвольного вида маркеров в списке
- •Работа с графикой, звуком и видео клипами
- •Гиперссылки
- •Изображения-карты
- •Создание стилей
- •Сценарии
- •Редакторы гипертекста
- •Форматы графических файлов
- •Лабораторная работа №1 Тема. Оформление страницы
- •Лабораторная работа №2 Тема. Стилевое оформление текста
- •Лабораторная работа №3 Тема. Таблицы
- •Лабораторная работа №4 Тема. Списки
- •Лабораторная работа №5 Тема. Работа с графикой, звуком и видеоклипами
- •Лабораторная работа №6 Тема. Ссылки
- •Приложение а. Цветовая модель rgb
- •Приложение b. Свойства таблиц стилей
Теги управления шрифтом
<B></b>
Текст заключенный в этот тег выделяется полужирным шрифтом.
<I><i>
Текст заключенный в этот тег выделяется курсивом.
<U></u>
Подчеркнутое начертание текста заключенный в этот тег.
<S></s>
Зачеркнутое
начертание текста.
<BIG></big>
Увеличение размера шрифта текста заключенный в этот тег.
<SMALL></Small>
Уменьшение размера шрифта текста заключенный в этот тег.
<SUB></sub>
Эффект нижнего индекса.
<SUP></sup>
Эффект верхнего индекса.
<BDO></bdo>
Позволяет изменить направление текста. Он используется совместно с атрибутом dir, которому может быть присвоено одно из значений: LTR (слева направо) или RTL (справа налево). Например: <BDO dir=”RTL”> Направление текста справа налево </bdo>
<CENTER></center>
Центрирует содержимое тега.
<BASEFONT>
Базовый размер шрифта для всей страницы. Внутри элемента необходимо указать атрибут size и указать его значение.
<FONT></font>
Определяет тип, размер и цвет шрифта. Все эти характеристики определяются при помощи соответствующих атрибутов.
Атрибут |
Описание |
Пример задания значения |
COLOR |
Цвет текста |
COLOR=#0000FF или COLOR=”BLUE” |
SIZE |
Размер шрифта от 1 до 7. Размер шрифта также может задаваться относительно базового. Size=+число или Size=-число. Базовый шрифт равен 3. Если указанная величина выходит за допустимый предел [1 до 7], то используется шрифт размера 1, либо размером 7. |
SIZE=7 или SIZE=+4 или SIZE=-2 |
FASE |
Задает один или несколько шрифтов для отображения содержимого тега. Если в системе не установлен ни один из перечисленных шрифтов, точно с таким же названием, то броузер использует свой стандартный шрифт из числа назначенных по умолчанию. |
FASE=”Arial; Courier; Tahoma” |
<BLOCKQUOTE></blockquote>
Заключенный между тегами текст выводится на экран с увеличенным левым полем.
Специальные символы
Комбинации символов, начинающиеся со знака «&» (амперсанд) и заканчивающийся точкой с запятой, служит в языке HTML для задания символов, которые отсутствуют на клавиатуре или не могут включаться в текст документа согласно спецификации языка HTML (например, символы «<», «>»). Двойная кавычка, угловые скобки и амперсанд (“, <, >, &) являются служебными в HTML. Если их требуются использовать на Web-странице, то они должны быть указаны только при помощи кодов.
Спецсимволы
Код |
Название |
Символ |
© |
Знак копирайта |
|
« |
Левая типографская кавычка |
« |
» |
Правая типографская кавычка |
» |
® |
Знак «зарегистрировано» |
|
  |
Неразрывный пробел |
|
× |
Знак умножения |
|
÷ |
Знак деления |
|
& |
Амперсанд |
& |
< |
Знак «меньше» |
< |
> |
Знак «больше» |
> |
Таблицы
В устройстве таблицы легче всего разобраться на простом примере.
<HTML>
<HEAD>
<TITLE>Пример 10</TITLE>
</HEAD>
<H1>Простейшая таблица </H1>
<TABLE BORDER=1> <!--Это начало таблицы-->
<CAPTION> <!--Это заголовок таблицы-->
У таблицы может быть заголовок
</CAPTION>
<TR> <!--Это начало первой строки-->
<TD> <!--Это начало первой ячейки-->
Первая строка, первая колонка
</TD> <!--Это конец первой ячейки-->
<TD> <!--Это начало второй ячейки-->
Первая строка, вторая колонка
</TD> <!--Это конец второй ячейки-->
</TR> <!--Это конец первой строки-->
<TR> <!--Это начало второй строки-->
<TD> <!--Это начало первой ячейки-->
Вторая строка, первая колонка
</TD> <!--Это конец первой ячейки-->
<TD> <!--Это начало второй ячейки-->
Вторая строка, вторая колонка
</TD> <!--Это конец второй ячейки-->
</TR> <!--Это конец второй строки-->
</TABLE> <!--Это конец таблицы-->
</BODY>
</HTML>
<TABLE></table>
Таблица начинается с метки <TABLE> и заканчивается меткой </TABLE>. Метка <TABLE> может включать несколько атрибутов:
Атрибут |
Описание |
Пример задания значения |
ALIGN |
Устанавливает расположение таблицы по отношению к полям документа: выравнивание влево, выравнивание по центру, выравнивание вправо |
ALIGN=LEFT ALIGN=CENTER ALIGN=RIGHT |
WIDTH |
Ширина таблицы. Ее можно задать в пикселях или в процентах от ширины страницы |
WIDTH=400 WIDTH=80% |
BORDER |
Устанавливает ширину внешней рамки таблицы и ячеек в пикселях. Если атрибут не установлен, таблица показывается без рамки |
BORDER=4 |
CELLSPACING |
Устанавливает расстояние между рамками ячеек таблицы в пикселях |
CELLSPACING=2 |
CELLPADDING |
Устанавливает расстояние между рамкой ячейки и текстом в пикселях |
CELLPADDING=10 |
<CAPTION></caption>
Таблица может иметь заголовок (<CAPTION> ... </CAPTION>), хотя заголовок не является обязательным. Метка <CAPTION> может включать атрибут ALIGN. Допустимые значения: <CAPTION ALIGN=TOP> (заголовок помещается над таблицей) и <CAPTION ALIGN=BOTTOM> (заголовок помещается под таблицей).
<TR>
Каждая строка таблицы начинается с метки <TR> и заканчивается меткой </TR>. Метка <TR> может включать следующие атрибуты:
Атрибут |
Описание |
Пример задания значения |
ALIGN |
Устанавливает выравнивание текста в ячейках строки: выравнивание влево, выравнивание по центру, выравнивание вправо |
ALIGN=LEFT ALIGN=CENTER ALIGN=RIGHT |
VALIGN |
Устанавливает вертикальное выравнивание текста в ячейках строки: TOP (выравнивание по верхнему краю), MIDDLE (выравнивание по центру), BOTTOM (выравнивание по нижнему краю). |
VALIGN=TOP VALIGN=MIDDLE VALIGN=BOTTOM |
<TD>
Каждая ячейка таблицы начинается с метки <TD> и заканчивается меткой </TD>. Метка <TD> может включать следующие атрибуты:
Атрибут |
Описание |
Пример задания значения |
NOWRAP
|
Присутствие этого атрибута означает, что содержимое ячейки должно быть показано в одну строку. |
|
COLSPAN |
Устанавливает "размах" ячейки по горизонтали. Например, COLSPAN=3 означает, что ячейка простирается на три колонки.
|
COLSPAN=3 |
ROWSPAN
|
Устанавливает "размах" ячейки по вертикали. Например, ROWSPAN=2 означает, что ячейка занимает две строки. |
ROWSPAN=2 |
ALIGN |
Устанавливает выравнивание текста в ячейках строки: выравнивание влево, выравнивание по центру, выравнивание вправо |
ALIGN=LEFT ALIGN=CENTER ALIGN=RIGHT |
VALIGN
|
Устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: (выравнивание по верхнему краю), (выравнивание по центру), (выравнивание по нижнему краю). |
VALIGN=TOP VALIGN=MIDDLE VALIGN=BOTTOM |
WIDTH |
Устанавливает ширину ячейки в пикселях |
WIDTH=200 |
HEIGHT |
Устанавливает высоту ячейки в пикселях |
HEIGHT=40 |
Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект (non-breaking space — не разрывающий пробел). Ячейка по-прежнему будет пустой, а рамка вокруг нее будет.
Отметим, что любая ячейка таблицы может содержать в себе другую таблицу.
<html>
<body>
<table border="1">
<tr>
<td colspan="2">Строка 1 Объединение по
столбцам</td>
<td>Строка 1 Столбец 2</td>
</tr>
<tr>
<td>Строка 2 Столбец 1</td>
<td>Строка 2 Столбец 2</td>
<td rowspan="2">
<p align="center">Объединение по строчное Столбец 2</td>
</tr>
<tr>
<td>Строка 3 Столбец 1</td>
<td>Строка 3 Столбец 2</td>
</tr>
</table>
</body>
</html>
Пример построение таблицы с объединением ячеек
Строка 1 Объединение по столбцам |
Строка 1 Столбец 2 |
|
Строка 2 Столбец 1 |
Строка 2 Столбец 2 |
Объединение по строчное Столбец 2 |
Строка 3 Столбец 1 |
Строка 3 Столбец 2 |
|
<TH>
Элемент ячейки, которая является заголовком столбца или строки таблицы. Броузер выводит текст содержащийся в данной ячейке-заголовке полужирным шрифтом. Этот элемент должен располагаться внутри элемента <TR>. Атрибуты таки же, что и для тега <TD>
<TTHEAD>, <TFOOT> и <TBODY>
Для группировки строк таблицы. Данные теги можно использовать как с закрывающими тегами так и без них (</thead>, </tfoot>, </tbody>).
При использовании данных тегов нужно выполнять следующие правила:
в таблице можно использовать по одному элементу <THEAD>, <TFOOT> и множество раз элемент <TBODY>;
соблюдайте последовательность использования элементов <THEAD>, <TFOOT>, <TBODY>. Информация размещенная в блоке <TFOOT> разместится в нижней части таблицы;
все блоки (<THEAD>, <TFOOT>, <TBODY>) должны содержать одинаковое количество столбцов.
Пример:
<TABLE>
<THEAD>
<TR> <TD>Ячейка заголовка №1<TD>Ячейка заголовка №2
<TFOOT>
<TR> <TD>Нижняя ячейка №1<TD> Нижняя ячейка №2
<TBODY>
<TR> <TD>Строка 1 ячейка 1.1<TD> ячейка 1.2
<TR> <TD>Строка 2 ячейка 2.1<TD> ячейка 2.2
<TR> <TD>Строка 3 ячейка 3.1<TD> ячейка 3.2
</table>
Результат построения таблицы
Ячейка заголовка №1 |
Ячейка заголовка №2 |
Строка 1 ячейка 1.1 |
ячейка 1.2 |
Строка 2 ячейка 2.1 |
ячейка 2.2 |
Строка 3 ячейка 3.1 |
ячейка 3.2 |
Нижняя ячейка №1 |
Нижняя ячейка №2 |
<COLGROUP> и <COL>
Данные элементы позволяют создавать группы столбцов с одинаковыми свойствами.
Элемент <COL> всегда располагается внутри тега <COLGROUP>. В таблице может одновременно присутствовать несколько элементов <COLGROUP> и не одного элемента <COL>. Если в реальной таблице количество столбцов меньше чем элементов оформления (<COLGROUP>, <COL>), то лишние элементы оформления игнорируются. Для задания свойств колонок могут использоваться атрибуты используемые для тега <TD>.
Пример:
<BODY>
<TABLE border=5>
<COLGROUP bgcolor="aqua">
<COL span=2 width="40" valign="center">
<COLGROUP bgcolor="blue">
<COL width="60">
<TR><TD> <TD>1<TD>2
<TR><TD> <TD>1<TD>2
</table>
</body>
Результат группировки столбцов в таблице
|
1 |
2 |
|
1 |
2 |
Списки
<UL><LI></ul>
Маркированный список. Пример:
Текст HTML кода |
Вид |
<UL> <LI> Пункт первый <LI> Пункт второй <LI> Пункт третий </ul> |
|
Элемент UL обозначает начало маркированного списка. Элемент LI отделяет один пункт от другого.
<OL><LI></ol>
Структура нумерованного списка похожа на структуру не нумерованного списка.
Текст HTML кода |
Вид |
<OL> <LI> Пункт первый <LI> Пункт второй <LI> Пункт третий </ol> |
|
Атрибуты для тега <OL>
Атрибут |
Описание |
Пример задания значения |
Вид |
|
Type |
Задает способ нумерации |
<OL Type=”A”> <LI> Пункт первый <LI> Пункт второй <LI> Пункт третий </OL> |
A Пункт первый B Пункт второй C Пункт третий |
|
значение |
вид |
|||
Type=”1” Type=”i” Type=”I” Type=”a” Type=”A” |
1, 2, 3, 4, … i, ii, iii, iv, … I, II, III, IV, … a, b, c, d,… A, B, C, D, … |
|||
Start |
Начальное значение для нумерации. |
<OL Type=”A” Start=4> <LI> Пункт первый <LI> Пункт второй <LI> Пункт третий </OL> |
D Пункт первый E Пункт второй F Пункт третий |
|
Для тега LI можно использовать атрибут value=номер, который задает номер для текущего пункта списка. Соответственно следующий за ним пункт списка будет иметь очередной номер и т.д.
Пример
<OL start=4> <LI> Пункт один <LI> Пункт два </OL> |
<OL> <LI value > Пункт один <LI> Пункт два </OL> |
Результат будет одинаков в обоих случаях |
|