|
Учебник по HTML
Основы HTML
Формы
Стили
Одним из способов оформления документа является использование заголовков текста. Всего их насчитывается шесть (<H1> - <H6>). При переходе от тега <H1> к тегу < H6> постепенно уменьшается высота и толщина шрифта текста. Чаще всего используют заголовки второго и третьего уровней.
<HTML>
<HEAD>
<TITLE>моя первая страничка</TITLE>
</HEAD>
<BODY>
<H1>заголовок первого уровня<H1>
<H2>заголовок второго уровня<H2>
<H3>заголовок третьего уровня<H3>
<H4>заголовок четвертого уровня<H4>
<H5>заголовок пятого уровня<H5>
<H6>заголовок шестого уровня<H6>
</BODY>
</HTML>
Язык HTML различает и физические стили, которые можно свести в следующую таблицу:
|
Стиль |
Тег |
Пример |
|
BOLD |
<B> |
полужирный |
|
ITALIC |
<I> |
курсив |
|
UNDERLINE |
<U> |
подчеркнутый |
|
TYPEWRTER |
<TT> |
пишущая машинка |
|
STRIKETHROUGH |
<S> |
вычеркнутый
|
|
DECREASE FONT SIZE |
<SMALL> |
маленький |
|
INCREASE FONT SIZE |
<BIG> |
большой |
|
BLINK |
<BLINK> |
(работает только в Netscape Navigator)
|
Таблицы
Таблица в HTML представляет собой прямоугольную сетку, состоящую из столбцов и строк, которые являются составными ячейки.
Ячейки могут содержать текст, графику, ссылки. Сама таблица состоит из трех основных частей: названия, заголовков и ячеек. Независимо от того, пуста ячейка или нет, она должна быть заполнена. Для создания пустых ячеек используют пробелы.
Несколько ячеек также могут быть объеденены в одну. Для этого используют следующие атрибуты:
- COLSPAN= - объединение по вертикали
- ROWSPAN= - объединение по горизонтали
Для управления шириной и высотой таблицы или ячейки используют атрибуты:
- WIDTH= - высота таблицы (ячейки)
- HEIGHT= - ширина таблицы (ячейки)
Длина и ширина указываются либо в пикселах либо в процентах. Если отображение производится в процентах, то цифра берется в кавычки.
Язык HTML позволяет выравнивать содержимое таблицы по вертикали атрибутом VALIGN= , по горизонтали атрибутом ALIGN= . Для этого при выравнивании по вертикали задаются следующие атрибуты:
- TOP - выравнивание по верху ячейки
- BOTTOM - выравнивание по низу ячейки
- MIDDLE - выравнивание по центру ячейки
По горизонтали:
- LEFT - выравнивание по левому краю ячейки
- RIGHT - выравнивание по правому краю ячейки
- CENTER - выравнивание по центру ячейки
Средствами HTML можно запретить автоматический переход текста на новую строку. Для этого используют атрибут <NOWRAP> внутри тега <TD>.
Внешний вид таблицы можно "приукрасить" с помощью атрибутов:
- BORDER= - задается толщина таблицы
- CELLSPACING= - задается толщина линий сетки между ячейками таблицы
- CELLPADDING= - задается величина пустых полей между содержимым ячейки и ее границами
Существует много атрибутов, предназначенных для оформления рамки таблицы. В теге <TABLE> указывается атрибут FRAME= , к которому присваиваются следующие значения:
- BOX - отображение всех четырех сторон рамки
- ABOVE - отображение верхней части рамки
- BELLOW - отображение нижней части рамки
- HSIDES - отображение горизонтальной части рамки
- VSIDES - отображение вертикальной части рамки
- LHS - отображение левой части рамки
- RHS - отображение правой части рамки
- VOID - не отображать внешнюю рамку
Разделительная линия описывается атрибутом RULES= в теге <TABLE>. Ниже приводятся следующие аргументы:
- ALL - отображение всех линий
- ROWS - отображение горизонтальных линий между рядами
- COLS - отображение вертикальных линий между столбцами
- NONE - не отображать разделительные линии
Если необходимо выделить таблицу другим цветом, то применяется атрибут BGCOLOR="# " внутри тега <TABLE>. Цвет подбирается по шкале RGB.
Приведем примеры двух таблиц.
1. <HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1" WIDTH=300 HEIGHT=100>
<TR>
<TD><CENTER>ЯЧЕЙКА №1</CENTER>
</TD>
<TD><CENTER>ЯЧЕЙКА №2</CENTER>
</TD>
</TR>
<TR>
<TD><CENTER>ЯЧЕЙКА №3</CENTER>
</TD>
<TD><CENTER>ЯЧЕЙКА №4</CENTER>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
|
Пример |
| ЯЧЕЙКА №1 |
ЯЧЕЙКА №2 |
| ЯЧЕЙКА №3 |
ЯЧЕЙКА №4 | |
2. <HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE BORDER ="1" BORDERCOLOR="#39644D" CELLSPACING="5" CELLPADDING="10">
<TR>
<TD ROWSPAN=2 BGCOLOR="#FFE3D7"><CENTER>Атрибут ROWSPAN объединяет 2 строки</CENTER>
</TD>
<TD COLSPAN=2 BGCOLOR="#E5E5E5"><CENTER>Атрибут COLSPAN объединяет 2 столбца</CENTER>
</TD>
<TD BGCOLOR="#9999CC">
</TD>
</TR>
<TR>
<TD BGCOLOR="#99CC99"><CENTER>ЯЧЕЙКА №1</CENTER>
</TD>
<TD BGCOLOR="#FFFF00"><CENTER>ЯЧЕЙКА №2</CENTER>
</TD>
<TD BGCOLOR="#FF3366"><CENTER>ЯЧЕЙКА №3</CENTER>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
|
Пример |
| Атрибут ROWSPAN объединяет 2 строки |
Атрибут COLSPAN объединяет 2 столбца |
|
| ЯЧЕЙКА №1 |
ЯЧЕЙКА №2 |
ЯЧЕЙКА №3 | |
|
Раздача *ICQ* номерков 
Главная страница 
Информация о сайте 
Каталог файлов
Я люблю тебя милая 
Каталог статей 
> Форум < 
Фотоальбом 
Анекдот +100 флеш игр 
Гостевая книга 
Обратная связь 
Каталог сайтов 
..::Гороскоп::.. 
