Официальный сайт кафедры ИНФОРМАТИКА. Физтехколледж

  Новости
  Начинающие
  Курс Офис
  Курс Сети

Краткий справочник HTML

CSS - Введение

Спецификация HTML (english)

Картинки для WEB страниц

  Программирование
  Контактная информация

Содержание:

Структура HTML-документа
!DOCTYPE HTML HEAD BODY комментарии
Заголовок документа
HEAD TITLE META LINK STYLES
Цвета в HTML
Тело документа
BODY
Параграфы, выравнивание, заголовки
P BR DIV Свойствоalign CENTER H1, H2, H3, H4, H5, H6 HR
Списки
OL, LI UL, LI DL, DT, DD
Спецсимволы (escape-последовательности)
<, >, &, ", ™, ®, ©, пробел
Структурирование текста
EM, DL, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM BLOCKQUOTE ADDRESS SUB, SUP PRE
Шрифты
TT, B, I, U, S, STRIKE BIG, SMALL FONT BASEFONT
Гиперссылки
A LINK
Таблицы
TABLE CAPTION COL, COLGROUP TR TH, TD
Рисунки
IMG
Фреймы
FRAMESET FRAME NOFRAMES IFRAME
Стили CSS

Структура HTML-документа

Документ в формате HTML состоит из трех частей:

строки, содержащей информацию о версии HTML (определяемого тегом !DOCTYPE);
раздела заголовков (определяемого тегом HEAD);
тела, которое включает собственно содержимое документа. Тело может вводиться тегами BODY или FRAMESET.

Разделы заголовков и тела документа включаются в тег HTML. Формат документа также включает не отображаемые браузером комментарии: .

Пример html.html: Пустой документ HTML
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head>  </head> <body>  </body> </html>

Заголовок документа

HEAD - обозначает секцию заголовков. Секция заголовков может включать три тега: TITLE, META и STYLES.
TITLE - указывает названия окна браузера.
META - содержит информацию о документе (кодировка символов, автор, ключевые слова и т.д.)
Тег META используется в следующих формах.
- <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  кодировка символов по умолчанию. Русским кодировкам соответствует WINDOWS-1251 и KOI8-R.
- <meta http-equiv="Refresh" content="60">
  перезагрузка документа с сервера браузером каждые N секунд (в данном случае 60).
- <meta http-equiv="Refresh" content="10;URL=http://www.host.ru/abc.htm">
  через N секунд (в данном случае 10) после загрузки текущего документа в окно браузера будет загружен другой документ, расположенный по указанному URL.
- <meta name="Author" content="Kshevetsky Alexandr">
  автор документа.
- <meta name="Generator" content="EditPlus2">
  название программы, с помощью которой создавался документ.
- <meta name="Description" content="Краткий справочник HTML">
  описание документа для поисковых машин.
- <meta name="Keywords" content="тег стили свойства">
  ключевые слова для поисковых машин.
LINK - в основном используется для указания гиперссылки на файл со CSS-стилем.
STYLES - указывает используемые стили CSS (см. ниже).

Пример head.html: Пустой документ HTML c заголовками
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <meta http-equiv="Refresh" content="10;URL=http://www.yandex.ru"> <meta name="Author" content="Kshevetsky Alexandr"> <meta name="Generator" content="EditPlus2"> <meta name="Description" content="Краткий справочник HTML содержит описания тегов."> <meta name="Keywords" content="краткий справочник по HTML тег стили свойства стили CSS параграфы выравнивание шрифт спецсимвол список гиперссылка рисунок таблица скрипт kshevetsky кшевецкий"> <title> Краткий справочник по HTML </title> </head> <body></body> </html>

Цвета в HTML

Цвет в HTML задается либо как слово английского языка, либо в формате RGB: #RRGGBB, RR - интенсивность красного цвета (Red) в 16-ричной кодировке от 00 до FF, GG - зеленого (Green), BB - синего (Blue). Примеры некоторых комбинаций интенсивностей приведены ниже:

`#000000` - черный (black) - COLOR	`#FFFFFF` - белый (white) - COLOR
`#7F7F7F` - серый (gray) - COLOR	`#FF0000` - красный (red) - COLOR
`#00FF00` - яркозеленый (lightgreen) - COLOR	`#0000FF` - синий (blue) - COLOR
`#FF0000` - темнокрасный (darkred) - COLOR	`#00FF00` - зеленый (green) - COLOR
`#0000FF` - темносиний (darkblue) - COLOR	`#FFFF00` - желтый (yellow) - COLOR
`#00FFFF` - голубой (cyan) - COLOR	`#FF00FF` - фиолетовый (magenta) - COLOR
`#7F7F00` - темножелтый (darkyellow) - COLOR	`#007F7F` - темноголубой (darkcyan)- COLOR
`#7F007F` - темнофиолетовый (darkmagenta) - COLOR

Тело документа

BODY - обозначает тело документа. Тело документа включает смысловое содержание документа HTML.
Синтаксис:
<body background=Image_URL bgcolor=color text=color link=color vlink=color alink=color> ... </body> Свойство background задает фоновое изображение.
Свойство bgcolor задает цвет фона.
Свойство text задает цвет текста.
Свойство link задает цвет гиперссылки.
Свойство vlink задает цвет посещенной гиперссылки.
Свойство alink задает цвет активной ссылки (во время нажатия на нее).

Пример body1.html: Тег BODY без свойств
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> Моя первая страничка. </body> </html>

Пример body2.html: Cтраничка с желтым фоном и красными буквами
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body bgcolor="yellow" text="#FF0000"> Моя первая страничка. </body> </html>

Пример body3.html: Cтраничка с фоновым изображением и измененными цветами гиперссылок
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body background="Images/smile.jpg" link="#00FFFF" alink="#00FF00" vlink="#FFFF00"> Моя первая страничка. </body> </html>

Параграфы, выравнивание, заголовки

Для форматирования текста в HTML используются специальные теги.

P - начало нового параграфа с указанием выравнивания текста; между строками оставляется пустое место.
Синтаксис:
<p align=align_type> ... </p>
BR - перевод строки в параграфе; строки идут слитно.
DIV - объединение блока текста с указанием выравнивания. Могут объединяться как строки внутри одного параграфа, так и несколько параграфов. Блок текста начинается с новой строки.
Синтаксис:
<div align=align_type> ... </div>
Свойство align - выравнивание текста. Используется в тегах P, DIV и других. Может принимать следующие свойства:
left - выравнивание по левому краю, right - по правому, center - по центру, justify - по всей ширине экрана (слева и справа).
CENTER - то же самое, что и <p align="center">.
H1, H2, H3, H4, H5, H6 - заголовки с первого по шестой уровень. Текст между тегами выделяется в параграф и выводится шрифтом соответствующего уровня. Первый уровень - самый большой, шестой - самый маленький. Текст заключенный между тегами заголовков индексируется поисковой машиной.
Синтаксис:
<h1 align=align_type> ... </h1>
HR - горизонтальная линия по всему экрану.

Пример text.html: Форматирование текста <html> <body> <div align="right"> Начинается блок текста с выравниванием по правому краю. <p> Начало нового параграфа, выравнивание по-прежнему по правому краю. <br> Перевод строки в параграфе, выравнивание по-прежнему по правому краю. <h1> Заголовок 1 уровня, выравнивание по-прежнему по правому краю. </h1> <p align="left"> Начало нового параграфа, текст выравнен по левому краю </p> <center> Текст между тегами выравнен по центру. </center> <hr> Горизонтальная линия.<br> Выравнивание по-прежнему по-прежнему задается тегом div правому краю. </div> </body> </html>

Списки

OL - начало нумерованного списка.
Синтаксис:
<ol type=type> ... </ol> <li> элемент1 <li> элемент2 </ol> Свойство type указывает способ нумерования списка, может принимать следующие значения:
A - A,B,C; a - a,b,c; I - I,II,III; i - i,ii,iii; 1 - 1,2,3.
UL - начало маркированного списка.
Синтаксис:
<ul type=type> ... </ol> <li> элемент1 <li> элемент2 </ul> Свойство type указывает способ нумерования списка, может принимать следующие значения:
disk - закрашенный круг; circle - окружность; square - квадрат.
LI - начало нового элемента в нумерованном или маркированном списке.
DL, DT, DD - список определений терминов.
Синтаксис:
<dl> <dt> термин1 <dd> определение термина1 <dt> термин2 <dd> определение термина2 </dl>

Пример lists.html: Списки
<html> <body> <h3>Нумерованный список (тип по умолчанию)</h3> <ol> <li> Апельсин <li> Банан </ol> <h3>Нумерованный список (1,2,3)</h3> <ol type="1"> <li> Апельсин <li> Банан </ol> <h3>Нумерованный список (A,B,C)</h3> <ol type="A"> <li> Апельсин <li> Банан </ol> <h3>Нумерованный список (a,b,c)</h3> <ol type="a"> <li> Апельсин <li> Банан </ol> <h3>Нумерованный список (I,II,III)</h3> <ol type="I"> <li> Апельсин <li> Банан </ol> <h3>Нумерованный список (i,ii,iii)</h3> <ol type="i"> <li> Апельсин <li> Банан </ol> <hr> <h3>Маркированный список 1</h3> <ul type="circle"> <li> Кофе <li> Молоко </ul> <h3>Маркированный список 2</h3> <ul type="disk"> <li> Кофе <li> Молоко </ul> <h3>Маркированный список 3</h3> <ul type="square"> <li> Кофе <li> Молоко </ul> <h3>Многоуровневый список</h3> <ol> <li> Маркированный список 1 <ul> <li> Кофе <li> Молоко </ul> <li> Нумерованный список 3 <ol type="square"> <li> Апельсин <li> Банан </ol> </ol> <h3>Список определений</h3> <dl> <dt> Апельсин <dd> Шарообразный фрукт семейства цитрусовых со вкусом лимона. <dt> Лимон <dd> Шарообразный фрукт семейства цитрусовых со вкусом апельсина. </dl> </body> </html>

Спецсимволы (escape-последовательности)

< - <
> - >
& - &
" - "
™ - ™
® - ®
© - ©
  - пробел

Структурирование текста

В языке HTML предусмотрены смысловые шаблоны для форматирования текста. Текст внутри тегов структурирования выделяется шрифтом.

EM - выделение термина, важного текста (EMphasize). Текст между тегами индексируется поисковой машиной.
<em> текст </em>
STRONG - указывает на особую значимость (STRONG). Текст между тегами индексируется поисковой машиной.
<strong> текст </strong>
DFN - определение термина (DeFiNition)
<dfn> текст </dfn>
CODE - код программы (CODE)
<code> текст </code>
SAMP - текст примеров (SAMPle)
<samp> текст </samp>
KBD - текст, который нужно ввести с клавиатуры (KeyBoarD)
<kbd> текст </kbd>
VAR - обозначение переменной или формулы (VARiant)
<var> текст </var>
CITE - цитата (CITE)
<cite> текст </cite>
ABBR - аббревиатура (ABBReviation)
<abbr> текст </abbr>
ACRONYM - идентифицирует акроним (ACRONYM)
<acronym> текст </acronym>
BLOCKQUOTE - цитата в отдельном параграфе (BLOCKQUOTE)
<blockquote> текст </blockquote>
ADDRESS - адрес (ADDRESS)
<address>
текст
</address>
SUB - нижний индекс (SUBscript)
<sub> _текст </sub>
SUP - верхний индекс (SUPerscript)
<sup> ^текст </sup>
PRE - вывод текста в браузере без форматирования (со всеми пробелами и т.д.)
<pre> текст </pre>

Шрифты

TT - моноширинный шрифт (TerminalType)
<tt> текст </tt>
B - жирный шрифт (Bold)
<b> текст </b>
I - наклонный шрифт (Italic)
<i> текст </i>
U - подчеркнутый шрифт (Underline)
<u> текст </u>
S, STRIKE - перечеркнутый шрифт (Strike)
<s> ~~текст~~ </s>
BIG - увеличенный шрифт
<big> текст </big>
SMALL - уменьшенный шрифт
<small> текст </small>

FONT - задание свойств шрифта
Синтаксис:


		  <font face=font_name size=font_size color=color>

Свойство face задает название шрифта, может равняться названию одного из шрифтов: Times, Courier, Arial, Tahoma; остальные шрифты браузером могут не поддерживаться.
Свойство size задает размер шрифта и принимает значения:
а) либо от 1 до 7, в этом случае размер шрифта задается абсолютно (основному шрифту соответствует size="3");
б) либо от -7 до +7, в этом случае размер шрифта задается относительно текущего размера шрифта.
Свойство color указывает цвет шрифта.

Пример: <html> <body> <font face="Times New Roman"> Шрифт Times New Roman </font> <font size="4"> Шрифт имеет 4 размер </font> <font size="-1"> Шрифт уменьшен относительно основного на 1 размер </font> <font color="darkred"> Шрифт имеет темнокрасный цвет </font> <font face="Times New Roman" size="4" color="blue"> А теперь все вместе </font> </body> </html>

BASEFONT - указание основного шрифта документа. Вставляется между тегами </head> и <body>.
Синтаксис:


		  <basefont face=font_name size=font_size color=color>

Пример: <html> <body> <head> <title>Текст с розовым большим шрифтом</title> </head> <basefont face="Courier" size="+3" color="magenta"> <body> Основной шрифт документа. </body> </html>

Гиперссылки

Ссылки являются основой гипертекста, они дают возможность строить логические связи между документами и осуществлять быстрые переходы по тексту. Ссылки состоят из двух частей: вызывающего элемента (источник, source) и места назначения (destination). Местом назначения может быть гипертекстовый документ, любой элемент внутри гипертекстового документа, файл (графический, музыкальный, клип или любой другой).

A - элемент служит для создания гиперссылок. Называется якорь (anchor). В зависимости от того, с каким аттрибутом используется, элемент будет являться либо источником, либо местом назначения:
1. Если указан аттрибут href, то элемент является источником или как чаще называют самой ссылкой.
  Синтаксис:
  <a href=document_URL target=window_name type=document_type> Элементы, которые будут ссылками в браузере </a> Свойство href указывает URL ресурса, на который должен перейти браузер при клике на ссылку. Ресурсом может быть внешний документ или какой-нибудь пункт данного документа.
  Свойство target задает имя окна, в котором откроется ссылку. Свойство может принимать значения:
  - _blank - открыть ссылку в новом окне браузера;
  - _self - открыть ссылку в текущем окне или фрейме;
  - _parent - открыть ссылку в родительском фрейме;
  - _top - открыть ссылку в окне вершины фреймовой структуры;
  - имя_созданного_фрейма - открыть ссылку во фрейме с заданным именем.
  Свойство type указывает тип ресурса, используется для ссылки на не HTML-документы.
2. Если указан аттрибут name, то элемент является местом назначения.
  Синтаксис:
  <a name=#anchor_name> Элементы, к которым привязывается якорь. Могут отсутствовать. </a> Свойство name задает имя якоря, на который можно ссылаться по href.
LINK - элемент в основном используется для подключения файла со CSS-стилем. Располагается только в секции HEAD. Синтаксис:
<link href=document_URL rel=relation_type type=document_type> Свойство href указывает URL подключаемого ресурса.
Свойство rel указывает отношение подключаемого ресурса к документу. Для подключения стилей свойство должно равняться "Stylesheet".
Свойство type указывает тип подключаемого ресурса. Для подключения стилей свойство должно равняться "text/css".
Пример: <head> <link rel="Stylesheet" href="styles/default.css" type="text/css"> </head>

Пример a.html: Гиперссылки
<html> <body> <a name="Begin"></a> <a href="#End"> <img src="images/right.gif"> В конец </a> <p> <a href="http://www.yandex.ru"> Сcылка на YANDEX </a> <p> <a href="http://www.yandex.ru" target="_blank"> Открыть YANDEX в новом окне </a> <p> <a href="#Anchor1"> Переход к букве А (якорь в данном документе) </a> <br> <a href="a.html#Anchor2"> Переход к букве B (якорь в документе "a.htm") </a> <br> <p> <a href="#Anchor2" target="_blank"> Открыть букву B в новом окне </a> <p> <h3> <a name="Anchor1">Якорь A</a> </h3> <p>A<p>A<p>A<p>A<p>A<p>A<p>A<p>A<p>A<p>A<p>A<p>A<p>A<p>A<p>A<p>A<p>A<p> <h3> <a name="Anchor2">Якорь B</a> </h3> <p>B<p>B<p>B<p>B<p>B<p>B<p>B<p>B<p>B<p>B<p>B<p>B<p>B<p>B<p>B<p>B<p>B<p> <a name="End"></a> <a href="#Begin"> <img src="images/left.gif"> В начало </a> </body> </html>

Таблицы

Документ HTML характеризуется двумя параметрами: смысловым содержанием, или контентом, (текстом) и дизайном (внешним видом). Дизайн страницы служит в первую очередь для удобства работы пользователя. Наиболее естесственно группировать схожие элементы на странице в области, то есть разбивать страницу на части. В языке HTML для разметки документа (разбиении на части) используются таблицы и фреймы.

TABLE - элемент создает таблицу.
Синтаксис:
<table width=value align=align_type bgcolor=color frame=frame_type border=value cellspacing=value cellpadding=value> ... </table> Свойство width указывает ширину таблицу. Ширину можно задавать в пикселах, процентах от доступной области (%) и как оставшееся свободное место (*).
Свойство align указывает выравнивание таблице в окне браузера. Может принимать значения left, right, center.
Свойство bgcolor указывает цвет фона таблицы.
Свойство frame указывает какие стороны рамки таблицы и ячеек должны иметь рамку. Допустимые значения:
- void - без рамки (значение принято по умолчанию);
- above - только сверху;
- below - только снизу;
- hsides - сверху и снизу;
- vsizes - слева и справа;
- lhs - только слева;
- rhs - только справа;
- box, border - со всех сторон;
Свойство border указывает ширину рамки вокруг таблицы в пикселах. Если значение равно нулю, то риамка не рисуется.
Свойство cellspacing задает расстояние между соседними ячейками таблицы.
Свойство celpadding задает отступ между верхней границей ячейки и ее содержимым.
CAPTION - элемент служит для указания заголовка таблицы. Текст заголовка выводится либо сверху, либо снизу таблицы.
Синтаксис:
<caption align=align_type> Текст подписи таблицы </caption> Свойство align принимает значения:
- top - над таблицей;
- tottom - под таблицей.
COL, COLGROUP - элементы задают форматирование текста во всем столбце и указывают ширину столбца в пикселах. COL определяет свойства одной колонки, а COLGROUP - сразу для нескольких колонок. Эти теги, если используются, должны быть вставлены сразу после открывающего тега <table ...>
Синтаксис:
<col width=value bgcolor=color align=align_type valign=valign_type> <colgroup width=value bgcolor=color align=align_type valign=valign_type span=column_number> Свойство width определяет ширину столбца. Ширину можно задавать в пикселах, процентах от доступной области (%) и как оставшееся свободное место (*).
Свойство bgcolor задает цвет ячеек в столбце.
Свойство align задает выравнивание текста в ячейках столбца. Принимает значения left, right, center, justify.
Свойство valign задает выравнивание текста по вертикали в ячейках столбца. Принимает значения:
- top - по верхнему краю ячейки.
- middle - по центру ячейки.
- bottom - по нижнему краю ячейки.
- baseline - по базовой линии текста, как правило то же самое, что и middle.
Свойство span указывает количество столбцов в группе.
TR - элемент, являющийся контейнером для группы ячеек в строке.
Синтаксис:
<tr bgcolor=color align=align_type valign=valign_type> ... </tr> Свойство bgcolor задает цвет ячеек в строке.
Свойство align задает выравнивание текста в ячейках строки. Принимает значения left, right, center, justify.
Свойство valign задает выравнивание текста по вертикали в ячейках строки. Принимает значения top, middle, bottom, baseline.
TH, TD - элементы служат для обозначения ячеек, причем TH используется для ячеек-заголоков, а TD - для ячеек-данных. Если не указано иначе, текст, расположенный внутри TH выводится жирным шрифтом по центру ячейки, а в TD - обычным шрифтом с выравниванием по левому краю. Эти элементы всегда должны быть вложены в контейнер TR.
Синтаксис:
<th align=align_type valign=valign_type width=value height=value bgcolor=color colspan=cell_number rowspan=cell_number> ... </th> <td align=align_type valign=valign_type width=value height=value bgcolor=color colspan=cell_number rowspan=cell_number> ... </td> Свойство align задает выравнивание текста в ячейке. Принимает значения left, right, center, justify.
Свойство valign задает выравнивание текста по вертикали в ячейке. Принимает значения top, middle, bottom, baseline. Свойство width определяет ширину ячейки. Ширину можно задавать в пикселах, процентах от доступной области (%) и как оставшееся свободное место (*).
Свойство height определяет высоту ячейки в пикселах.
Свойство bgcolor задает цвет ячейки.
Свойство colspan служит для объединения нескольких ячеек по горизонтали. Значение свойства указывает на сколько столбцов, дополнительно к текущему, расрпространяется ячейка.
Свойство rowspan служит для объединения нескольких ячеек по вертикали. Значение свойства указывает на сколько строк, дополнительно к текущей, расрпространяется ячейка.


	Пример table1.html: 
	Построение таблиц

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title> Пример. Таблицы. </title> </head> <body> <table bgcolor=#99FFCC> <caption>Таблица 2х3 по умолчанию</caption> <tr> <td>1111111111</td> <td>2222222222</td> <td>3333333333</td> </tr> <tr> <td>4444444444</td> <td>5555555555</td> <td>6666666666</td> </tr> </table> <p> <table bgcolor=#99FFCC frame="hsides"> <caption>Таблица 2х3 с горизонтальными границами</caption> <tr> <td>1111111111</td> <td>2222222222</td> <td>3333333333</td> </tr> <tr> <td>4444444444</td> <td>5555555555</td> <td>6666666666</td> </tr> </table> <p> <table bgcolor=#99FFCC frame="box" cellspacing=10 cellpadding=30 border=10> <caption>Таблица 2х3 с оступами и всеми границами</caption> <tr> <td>1111111111</td> <td>2222222222</td> <td>3333333333</td> </tr> <tr> <td>4444444444</td> <td>5555555555</td> <td>6666666666</td> </tr> </table> <p> <table bgcolor=#99FFCC rules="cols"> <caption>Таблица 3х3 с заголовками и вертикальными границами</caption> <tr> <th>AAA</th> <th>BBB</th> <th>CCC</th> </tr> <tr> <td>1111111111</td> <td>2222222222</td> <td>3333333333</td> </tr> <tr> <td>4444444444</td> <td>5555555555</td> <td>6666666666</td> </tr> </table> <p> <table bgcolor=#99FFCC frame="box"> <caption>Таблица 3х3 объединением ячеек по вертикали</caption> <tr> <td rowspan=3>1111111111 </td> <td>2222222222</td> <td>3333333333</td> </tr> <tr> <td rowspan=2>5555555555</td> <td>6666666666</td> </tr> <tr> <td>9999999999</td> </tr> </table> <p> <table bgcolor=#99FFCC frame="box"> <caption>Таблица 3х3 с объединением ячеек по горизонтали</caption> <tr> <td>1111111111</td> <td>2222222222</td> <td>3333333333</td> </tr> <tr> <td colspan=2>4444444444</td> <td>6666666666</td> </tr> <tr> <td colspan=3>7777777777</td> </tr> </table> <p> <table bgcolor=#99FFCC frame="box"> <caption>Таблица 3х3 с объединением и так и сяк</caption> <tr> <td rowspan=3>1111111111</td> <td colspan=2>2222222222</td> </tr> <tr> <td>5555555555</td> <td>6666666666</td> </tr> <tr> <td>8888888888</td> <td>9999999999</td> </tr> </table> <p> </body> </html>

Пример table2.html: Использование таблиц для разбивки документа
 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title> Пример. Таблицы. </title> </head> <body> <table width="100%" height="400"> <col width="20%"> <col width="*"> <col width="20%"> <tr> <td> <table width="100%" height="100%"> <tr> <td> <table bgcolor=#FFFFCC width="100%" height=100> <tr> <td>здесь невидимая картинка</td> </tr> </table> </td> </tr> <tr valign="top"> <td> <table bgcolor=#CCCCFF width="100%" height=100> <tr> <td> <ul> <li> Раздел 1 <li> Раздел 2 <li> Раздел 3 <li> Раздел 4 <li> Раздел 5 <li> Раздел 6 <li> Раздел 7 <li> Раздел 8 <li> Раздел 9 <li> Раздел 10 <li> Раздел 11 <li> Раздел 12 <li> Раздел 13 <li> Раздел 14 <li> Раздел 15 <li> Раздел 16 <li> Раздел 17 </ul> </td> </tr> </table> </td> </tr> </table> </td> <td> <table bgcolor=#FFCCCC width="100%" height="100%"> <tr valign="top"> <td> Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля<p> Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля<p> Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля Оп-ля-ля<p> </td> </tr> </table> </td> <td> <table width="100%" height="100%"> <tr> <td> <table bgcolor=#CCCCFF width="100%" height=100> <tr> <td> <ul> <li> Раздел 1 <li> Раздел 2 <li> Раздел 3 <li> Раздел 4 <li> Раздел 5 <li> Раздел 6 <li> Раздел 7 <li> Раздел 8 <li> Раздел 9 <li> Раздел 10 <li> Раздел 11 <li> Раздел 12 <li> Раздел 13 <li> Раздел 14 <li> Раздел 15 <li> Раздел 16 <li> Раздел 17 </ul> </td> </tr> </table> </td> </tr> <tr valign="top"> <td> <table bgcolor=#FFFFCC width="100%" height=100> <tr> <td>здесь невидимая картинка</td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>

Рисунки

Для вставки в HTML-документ изображений используется следующий тег.

IMG - элемент для вставки рисунка.
Синтаксис:
<img src=image_URL alt=text align=align_type width=value height=value border=value hspace=value vspace=value> Свойство src указывает на URL рисунка, который будет показан.
Свойство alt содержит краткое описание рисунка. Этот текст "всплывает", если задержать мышку на рисунке в окне браузера.
Свойство align указвает на расположение рисунка относительно обтекающего его текста. Принимает следующие значения:
- top - строка текста идет по верхней границе изображения;
- bottom - строка текста идет по нижней границе изображения;
- middle - строка текста идет по середине изображения;
- left - изображение находится слева, текст обтекает его по правой границе;
- right - изображение находится справа, текст обтекает его по левой границе;;
Свойство width указывет ширину рисунка. Значение может быть выражено либо в пикселах, либо в процентах то размера изображения (%). Если свойство не указано, рисунок отображается в натуральную величину.
Свойство height указывет высоту рисунка. Значение может быть выражено либо в пикселах, либо в процентах то размера изображения (%). Если свойство не указано, рисунок отображается в натуральную величину.
Свойство border указывает ширину рамки вокруг рисунка в пикселах.
Свойство hspace указывает величину отступа слева и справа от рисунка до окружаещго его текста в пикселах.
Свойство vspace указывает величину отступа сверху и снизу от рисунка до окружаещго его текста в пикселах.


	Пример img.html: 
	Несколько рисунков, вставленных в таблицу.

Фреймы

Для разбиения внешнего вида документа на части в HTML используются таблицы и фреймы. Первые позволяют разбить документ, вторые экран. В каждую часть экрана, которая называется фрейм, подгружается свой HTML-документ. В случае если документ полностью не умещается на экране в отведенной ему области, для данной области создается полоса прокрутки. Старайтеь делать так, чтобы на экране была только одна полоса прокрутки. Несколько прокруток создают неудобства в нафигации и искривляют дизайн документа.
Фреймосодержащий документ не может нести в себе часть BODY, она заменяется элементом FRAMESET. При этом в окне браузера выводятся документы указанные в элементах FRAME из набора FRAMESET.

FRAMESET - элемент служит контейнером для фреймов. Он определяет набор фреймов и их расположение в окне браузера.
Синтаксис:
<frameset cols=column_number rows=row_number frameborder=boolean_type framespacing=value> <frame ...> <frame ...> </frameset> Свойство cols задает количество фреймов по горизонтали.
Свойство rows задает количество фреймов по вертикали.
Свойство frameborder указывает рисовать объемную рамку или плоскую. Принимает значения:
- yes - да, рисовать объемную;
- no - нет, рисовать плоскую.
Свойство framespacing создает невидимую рамку указанной толщины.
FRAME - элемент определяет содержимое каждого фрейма. Элмент всегда должен быть внутри FRAMESET.
Синтаксис:
<frame name=frame_name src=document_URL noresize scrolling=scroll_type frameborder=boolean_type marginwidth=value marginheight=value> Свойство name задает имя фрейма. Используется в свойстве target тега гиперссылки A для указания в каком фрейме нужно открыть ссылку.
Свойство src задает URL документа, который будет показан в фрейме при загрузке.
Свойство noresize указывает браузеру, может ли пользователь менять размер фрейма. Если аттрибут не указан, пользователь может мышкой менять размеры фрейма.
Свойство scrolling указывает браузеру создавать или нет полосу прокутки. Принимаемые значения:
- auto (принято по умолчанию) - полосы прокрутки будут созданы только тогда, когда документ целиком не помещается во фрейме;
- yes - полоса прокрутки будет отображаться всегда;
- no - полоса прокрутки отсутствует.
Свойство frameborder указывает выводить рамку данного фрейма или нет. Принимает значения:
- yes - да, выводить;
- no - нет.
Свойство marginwidth указывает ширину отступа по горизонтали между границей фрейма и его содержанием.
Свойство marginheight указывает высоту отступа по вертикали между границей фрейма и его содержанием.
NOFRAMES - элемент позволяет создать альтернативное содержание документа в случае, если браузер не поддерживает фреймы.
Синтаксис:
<frameset> ... </frameset> <noframes> ... </noframes>
IFRAME - элемент позволяет встроить один документ в другой.
Синтаксис:
<iframe src=document_URL align=align_type name=frame_name width=value height=value scrolling=scroll_type frameborder=boolean_type marginwidth=value marginheight=value> Действия, если фреймы не поддерживаются. </iframe> Свойство src задает URL документа, который будет показан в фрейме при загрузке.
Свойство align указывает выравнивание овна фрейма по горизонтали.
Свойство name задает имя фрейма. Используется в свойстве target тега гиперссылки A для указания в каком фрейме нужно открыть ссылку.
Свойство width задает ширину фрейма.
Свойство height задает высоту фрейма.
Свойство scrolling указывает браузеру создавать или нет полосу прокутки. Принимаемые значения: auto (принято по умолчанию), yes или no Свойство frameborder указывает выводить рамку данного фрейма или нет. Принимает значения: yes или no.
Свойство marginwidth указывает ширину отступа по горизонтали между границей фрейма и его содержанием.
Свойство marginheight указывает высоту отступа по вертикали между границей фрейма и его содержанием.


	Пример frameset.html: 
	Основной документ - контейнер фреймов. Содержит два вертикальных фрейма.

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title> Пример. Фреймы. </title> </head> <frameset cols="80,*" frameborder="no" framespacing=0> <frame name="menu" src="frame0.html" noresize scrolling="No" marginwidth=0 marginheight=10> <frame name="content" src="frame1.html" noresize marginwidth=0 marginheight=10> </frameset> <noframes> Ваш Браузер не поддерживает фреймы. </noframes> </html>

Пример frame0.html: Документ, показываемый в левом фрейме основного документа.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title> Пример. Фреймы. </title> </head> <body bgcolor=#FFFFCC > <table> <tr> <td> <table align="left"> <col width="20"> <col width="*"> <tr> <td rowspan="4"> <div style="background: #FFCCFF; color: #6600CC; font-family: Arial; font-weight: bold"> С<br>т<br>е<br>р<br>е<br>о<br>к<br>а<br>р<br>т<br>и<br>н<br>к<br>и </div> </td> <td> <p><font size="-1"><a href="frame1.html" target="content">Живые шпикачки</a></font> </td> </tr> <tr> <td> <p><font size="-1"><a href="frame2.html" target="content">Любоффь</a></font> </td> </tr> <tr> <td> <p><font size="-1"><a href="frame3.html" target="content">Черная роза</a></font> </td> </tr> <tr> <td> <p><font size="-1"><a href="frame4.html" target="content">Вулкан на Веге</a></font> </td> </tr> </table> </td> </tr> <tr> <td height=350> <iframe name=banner src="iframe.html" width="74" height="74" frameborder="no" scrolling="no"> </iframe> </td> </tr> </table> </body> </html>

Пример iframe.html: Документ, показываемый в i-фрейме левого фрейма основного документа.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body bgcolor=#FFCCFF> <font face="Arial" color=#339900><strong> У-ла-ла </strong></font> </body> </html>

Пример frame1.html: Один из документов, показываемых в правом фрейме основного документа.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body bgcolor=#FFFFCC> <h3 align="center"><font face="Arial" color=#CC99FF>Живые шпикачки</font></h3> <img src="images/stereo1.jpg"> </body> </html>

Пример frame2.html: Один из документов, показываемых в правом фрейме основного документа.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body bgcolor=#FFFFCC> <h3 align="center"><font face="Arial" color=#CC99FF>Любоффь</font></h3> <img src="images/stereo2.jpg"> </body> </html>

Пример frame3.html: Один из документов, показываемых в правом фрейме основного документа.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body bgcolor=#FFFFCC> <h3 align="center"><font face="Arial" color=#CC99FF>Черная роза</font></h3> <img src="images/stereo3.jpg"> </body> </html>

Пример frame4.html: Один из документов, показываемых в правом фрейме основного документа.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body bgcolor=#FFFFCC> <h3 align="center"><font face="Arial" color=#CC99FF>Вулкан на Веге</font></h3> <img src="images/stereo4.jpg"> </body> </html>

Стили

CSS, Cascading Style Sheets (Таблицы Каскадных Стилей) - это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб страницы. CSS добавляет к каждому тегу HTML дополнительные свойства, управляющие внешним видом тегов. Стили определяются либо в отдельном файле, либо внутри самого документа HTML в секции <HEAD>. CSS позволяет полностью разделить веб-документ на две части: содержание и внешний вид, дизайн, стиль. Смотрите: CSS - Введение.