
- •Форматирование текста
- •Цвет шрифта
- •Цвет фона документа
- •Работа с абзацами
- •Заголовки
- •Начертание шрифта
- •К одному фрагменту текста можно применять сразу несколько тегов.
- •Графические элементы размещение графических объектов
- •Гиперссылки
- •Текстовые ссылки
- •Ссылки внутри одного документа
- •Нумерованный список
- •Спецсимволы
- •Html - таблицы
Нумерованный список
Нумерованный список состоит из набора последовательно пронумерованных абзацев. Для определения нумерованного списка применяется парный тег <ol></ol>:
Синтаксис:
<ol type = ”параметр” start = “значение”>
<li>Вхождение 1</li>
<li>Вхождение 2</li>
<li>Вхождение 3</li>
</ol>
Атрибут type позволяет определить вид маркера, которым будут обозначаться составляющие список значения. Параметр type может принимать одно из следующих значений:
“1” - обычные арабские числа;
“I” - римские цифры в заглавном регистре;
“i” - римские цифры в строчном регистре;
“A” – символьная маркировка в заглавном регистре;
“a” – символьная маркировка в строчном регистре.
Атрибут start позволяет задать позицию, с которой следует начать нумерацию.
П
<html> <head> <title>Нумерованный
список</title> </head> <body
text="#000000" bgcolor="#ffffff"> <ol
type="1" start="1"> <li>Вхождение
1</li> <li>Вхождение
2</li> <li>Вхождение
3</li> </ol> </body> </html>
ример:
МАРКИРОВАННЫЙ СПИСОК
Маркированный список можно представить при помощи команды <ul></ul>.
Синтаксис:
<ul type = ”параметр”>
<li>Вхождение 1</li>
<li>Вхождение 2</li>
<li>Вхождение 3</li>
</ul>
Атрибут type позволяет определить вид и форму обозначающее каждое вхождение меток. Параметр type может принимать одно из следующих значений:
Disc – метка в виде заполненной черным цветом окружности;
Circle – метка в виде полной окружности;
Square - метка в виде заполненного черным цветом квадрата.
Ч
тобы
отступ
(табуляция)
был больше надо вкладывать тег <ul> в
самого себя.
П
<html> <head> <title>Маркированный
список
</title> </head> <body
text="#000000" bgcolor="#ffffff"> <ul><li>Вхождение
1</li></ul> <ul><ul><li>Вхождение
2</li></ul></ul> <ul><ul><ul><li>Вхождение
3 </li></ul></ul></ul> </body> </html>
ЛИНИИ
Линия задается тегом <Hr> и не требует закрывающего тега.
У линии есть много разных параметров:
<Hr align="right"> (center или left)- выравнивание;
<Hr width="30%"> - ширина линии в процентах/пикселях;
<Hr size="6"> - толщина линии;
<Hr NoShade> - отмена объемности;
<Hr color="cc0000"> - цвет линии, только в IE.
Параметры могут употребляться одновременно.
П
<html> <head> <title>Линии
</title> </head> <body> <hr
align="center" width="80%"
size="4"
color="000000"> </body> </html>
ример:
Спецсимволы
< - < > - > " - " - пробел & - &
Спецсимволы не надо включать ни в какие теги, они считаются просто текстом.
Пример:
<html> <head> <title>Спецсимволы
</title> </head> <body> <Спецситмволы>
не
" включаются"
в теги! </body> </html>
Html - таблицы
Информация в таблице содержится как в горизонтально расположенных строках, так и в вертикальных – столбцах. Пересечения строк и столбцов образубт ячейки.Но Html – таблицы не способны производить математические расчеты.
Для включения таблицы в Html-документ используется тег <TABLE>. Параметры самой таблицы задаются с помощью трех тегов:
<TH>-для заголовков таблицы;
<TR>-для задания строк;
<
TD>-для
задания данных (то есть информации,
которая будет содержаться в ячейках
таблицы).
П
<table> <tr> <td
bgcolor="#CCCCСС"
>a</td> <td
bgcolor="#999999"
>b</td> <td
bgcolor="#CCCCСС"
>c</td> </tr> <tr> <td
bgcolor="#999999"
>a1</td> <td
bgcolor="#CCCCСС"
>b2</td> <td
bgcolor="#999999"
>c3</td> </tr> </table>
Фон задается параметром bgcolor="цвет_фона". Фон можно задать для таблицы в целом, для строки, для столбца (в пределе одной строки). В нашем случае задали фон для каждого столбца. Высота и ширина ячейкам таблицы задается параметрами height и width. Их можно задать для всей таблицы, для одной строки, для ячейки (столбца). Высота и ширина могут задаваться как в пикселях, так и процентах. Зададим ширину и высоту в пикселях для столбцов (ячеек).
Высота задана только для двух ячеек, а ширина для всех потому, что все ячейки строки станут по высоте равны наибольшей.
То же самое со строками, если задать для какой-то строки наибольшую длину, то все остальные строки выровняются по этой наибольшей строке. Можно задать высоту и ширину для всей таблицы, тогда все ячейки и строки поделят данное им пространство поровну, если не задавать им это пространство персонально (в процентах от общей ширины (высоты) таблицы или пикселях).
Выровнять текст можно при помощи тега <center></center>. В каждой ячейке (столбце) могут находиться и картинки, и текст, и даже таблицы (в этом случае они называются - вложенные таблицы). Для форматирования текста применяются рассмотренные выше теги.
Пример:
<table>
<tr>
<td
height="40"
width="55"
bgcolor="#CCCCCC"> <center>
a </center>
</td>
<td
width="55"
bgcolor="#999999"> <center>
b </center></td>
<td
width="55"
bgcolor="#CCCCCC"> <center>
c </center></td>
</tr>
<tr>
<td
height="40"
width="55"
bgcolor="#999999"> <center>
a1 </center></td>
<td
width="55"
bgcolor="#CCCCCC"> <center>
b2 </center></td>
<td
width="55"
bgcolor="#999999"> <center>
c3 </center></td>
</tr>
</table>
Вертикальное выравнивание задается следующим атрибутом - valign="middle" (top, bottom) - содержимое конкретной ячейки будет находиться в середине ячейки (наверху или внизу).
П
<table> <tr> <td
height="40" width="55" bgcolor="#CCCCCC"
valign="top">
<center>a</center> </td> <td
width="55" bgcolor="#999999">
<center>b</center> </td> <td
width="55" bgcolor="#CCCCCC" valign="bottom">
<center>c</center> </td></tr> <tr> <td
height="40" width="55" bgcolor="#999999"
valign="bottom">
<center>a1</center> </td> <td
width="55" bgcolor="#CCCCCC">
<center>b2</center> </td> <td
width="55" bgcolor="#999999"
valign="top">
<center>c3</center> </td> </tr> </table>
Для создания таблиц сложной структуры применяются параметры colspan и rowspan. Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество строк (эти параметры могут принимать значение от 2 и больше, т.е. ячейка может растягиваться на два и более столбца (строки)).
Пример:
<table>
<tr>
<td
height="40" bgcolor="#CCCCCC" colspan="2">
<center>a</center> </td>
<td width="55"
bgcolor="#999999"> <center>b</center>
</td>
</tr>
<tr>
<td height="40"
width="55" bgcolor="#999999">
<center>a1</center> </td>
<td width="55"
bgcolor="#CCCCCC"> <center>b2</center>
</td>
<td width="55" bgcolor="#999999">
<center>c3</center> </td>
</tr>
</table>
В
этом примере использовался параметр
colspan=2, прописав его для ячейки «а» Ячейки
«с» нет, т.к. ячейка «а» равна по длине
двум ячейкам (что указано параметром
colspan). Для избавления от пространства
между ячейками таблицы используется
атрибут cellspacing.
П
<table
cellspacing=0> <tr> <td
height="40" bgcolor="#CCCCCC" colspan="2">
<center>a</center> </td> <td
width="55" bgcolor="#999999" rowspan="2">
<center>b</center> </td> </tr> <tr> <td
height="40" width="55" bgcolor="#999999">
<center>a1</center> </td> <td
width="55" bgcolor="#CCCCCC">
<center>b2</center> </td>
</tr> </table>
Можно увеличить пространство между ячейками, присвоив параметру другое значение cellspacing=5. Существует атрибут cellpadding, который добавляет свободное пространство между содержимым ячейки и ее границами.
Использовние параметра bgcolor задает цвет фона для таблицы (строки, ячейки), а параметр background задает фоновую картинку для таблицы (строки, ячейки). Применение этого параметра необходимо так, как Internet Explorer отображает параметр bgcolor для вложенных таблиц, а Netscape Navigator этот параметр для вложенных таблиц не отображает, поэтому используется background.
Чтобы ячейка не пустовала, в нее вводится   (символ неразрывного пробела), потому что конструкцию <td></td> броузеры игнорируют. Поэтому для корректного отображения таблицы везде необходимо вставлять в пустые ячейки  .
Параметр align можно задать для содержимого ячейки, но удобного align="justify" тут нет.
Рамка вводится параметром border. Например, зададим рамку равную 3 пикселям:
<table border="3">
Для задания рамке цвета используется параметр:
<table border="3" bordercolor="#000000">
Ниже в таблице приведена краткая сводка допустимых атрибутов:
Атрибут |
Элемент |
Назначение |
ALIGN= |
Таблица, заголовок, строка, ячейка. |
Выравнивание таблицы по горизонтали; выравнивание данных по горизонтали; размещение заголовка над или под таблицей. |
VALIGN= |
Строка, ячейка. |
Выравнивание по вертикали. |
WIDTH= |
Таблица, ячейка. |
Ширина. |
HEIGHT= |
Ячейка. |
Высота. |
COLSPAN= |
Ячейка. |
Протяженность в несколько столбцов. |
POWSPAN= |
Ячейка. |
Протяженность в несколько строк. |
BGCOLOR= |
Таблица, ячейка. |
Цвет фона. |
CELLSPACING= |
Таблица. |
Зазор между ячейками. |
CELLPADDING= |
Таблица. |
Зазор между содержимым ячейки и ее границей. |
BORDER= |
Таблица. |
Отображение границ ячеек и внешней рамки таблицы. |
BORDERCOLOR= |
Таблица |
Цвет рамки. |
Пример таблицы с использованием допустимых атрибутов:
<html> <head> <title>Таблицы
</title> </head> <body
text="blue" bgcolor="lightblue"> <center><b>Отметка
посещаемости</b> <table
cellspacing=0 border="3" bordercolor="darkblue"> <tr> <td
width="50" height="60" rowspan="2"
align="center">№ п/п</td> <td
width="250" rowspan="2" valign="middle"
align="center">Фамилия
И.О.</td> <td
width="360" height="30" colspan="6"
valign="middle" align="center">Присутствие</td> </tr> <tr
bgcolor="#CCCCCC" > <td
width="60" height="30">  </td> <td
width="60">  </td> <td
width="60">  </td> <td
width="60">  </td> <td
width="60">  </td> <td
width="60">  </td> </tr> <tr> <td
width="50" height="30" valign="middle"
align = "center"> 1. </td> <td
width="250">  </td> <td
width="60">  </td> <td
width="60">  </td> <td
width="60">  </td> <td
width="60">  </td>
<td
width="60">  </td> <td
width="60">  </td> </tr> </table> </center> </body> </html>