<!-- SpyLOG v2 f:0111 -->
<script language="javascript">
u="u1135.50.spylog.com";d=document;nv=navigator;na=nv.appName;p=1;
bv=Math.round(parseFloat(nv.appVersion)*100);
n=(na.substring(0,2)=="Mi")?0:1;rn=Math.random();z="p="+p+"&rn="+rn;y="";
y+="<a href='../..//"+u+"/cnt?f=3&p="+p+"&rn="+rn+"' target=_blank>";
y+="<img src='../..//"+u+"/cnt?"+z+
"&r="+escape(d.referrer)+"&pg="+escape(window.location.href)+"' border=0 width=88 height=31 alt='SpyLOG'>";
y+="</a>"; d.write(y);if(!n) { d.write("<"+"!--"); }//--></script><noscript>
<a href="../../u1135.50.spylog.com/cnt@f=3&p=1" target=_blank>
<img src="../../u1135.50.spylog.com/cnt@p=1" alt='SpyLOG' border='0' width=88 height=31 >
</a></noscript><script language="javascript1.2"><!--
if(!n) { d.write("--"+">"); }//--></script>
<!-- SpyLOG --><!-- HotLOG -->
<SCRIPT LANGUAGE="JavaScript">hotlog_js=0; function HotLOG() {}</SCRIPT>
<SCRIPT SRC="../../counter.hotlog.ru/cgi-bin/hotlog/count.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1">hotlog_js=1</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">hotlog_js=2</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.3">hotlog_js=3</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">HotLOG(2735,hotlog_js)</SCRIPT>
<noscript><img src="../../hit.hotlog.ru/cgi-bin/hotlog/count@s=2735" border=0 width=1 height=1></noscript>
<!-- /HotLOG -->


Учебник по HTML

Управление цветом

Цвета и изображения фона задаются с помощью команды <BODY>.
Эта команда может задаваться только в начале HTML файла и не может быть изменена в дальнейшем. Ее параметры:
bgcolor = "# код цвета " - цвет фона документа,
text = "# код цвета " - цвет текста документа,
link = "# код цвета " - цвет текста, используемого в качестве ссылки,
vlink = "# код цвета " - цвет сслки на просмотренний ранее документ,
alink = "# код цвета " - цвет ссылки в момент нажатия на нее правой кнопки мыши.

Код цвета задается в кодировке RGB - шесть шестнадцатеричных чисел.

В качестве примера приведем команду <BODY> , заданную в данной домашней странице:

<BODY BGCOLOR="# FFFF88 "TEXT="# 0000FF " LINK="# FF0000 " VLINK="# CF2CD4 " ALINK="# C033FF ">

Важно отметить, что цвет фона не отображается на бумаге при выводе HTML - документа на печать.

Ниже приводятся коды простейших цветов:

Белый = FFFFFF,
Желтый = FFFF00,
Красный = FF0000,
Серый = 808080,
Синий = 0000FF,
Зеленый = 00FF00,
Черный = 000000,
Пурпурный = CC33FF,
Малиновый = FF00FF,
Бирюзовый = 008080,
Темно-синий = 000080,
Коричневый = 808000,
Голубой = 00FFFF,
Темно-зеленый = 0000FF,
Индиго = 800080,
Темно-красный = 800000,

Для изменения цвета текущего текста можно в любом месте домашней страницы воспользоваться командами:
<FONT COLOR= Код цвета > Текущий текст </FONT COLOR>

Если Вы хотите создать "Обои", то есть цветной фон с использованием Image - файла с именем, например, Ground.gif, то вместо параметра BGCOLOR записываем:
BACKGROUND="Ground.gif"
Если при этом вы хотите, чтобы фоновое изображение не двигалось, т.е. чтобы создался эффект "водяных знаков", то задайте дополнительный параметр:
BACKGROUND="Ground.gif" BGPROPERTIES=FIXED

Определено несколько именованных цветов. Их значения видны из таблицы:

Отображаемый текст | Запись в формате HTML
black | <FONT COLOR= black > black </FONT COLOR
red | <FONT COLOR= red > red </FONT COLOR
blue | <FONT COLOR= blue > blue </FONT COLOR
olive | <FONT COLOR= olive > olive </FONT COLOR
navy | <FONT COLOR= navy > navy </FONT COLOR
purple | <FONT COLOR= purple > purple </FONT COLOR
teal | <FONT COLOR= teal > teal </FONT COLOR
gray | <FONT COLOR= gray > gray </FONT COLOR
silver | <FONT COLOR= silver > silver </FONT COLOR
maroon | <FONT COLOR= maroon > maroon </FONT COLOR
lime | <FONT COLOR= lime > lime </FONT COLOR
yellow | <FONT COLOR= yellow > yellow </FONT COLOR
green | <FONT COLOR= green > green </FONT COLOR
fuchsia | <FONT COLOR= fuchsia > fuchsia </FONT COLOR
aqua | <FONT COLOR= aqua > aqua </FONT COLOR
white | <FONT COLOR= white > white </FONT COLOR
© 2002 Kadet


Загорающаяся ссылка

Забегая вперед скажу, что этот пример работает только в Internet Explorer, а Netscape Navigator просто игнорирует его.

Для того, чтобы при наведении мышкой на гиперссылку она загоралась определенным цветом, нужно вставить следующий код в </head> своей странички:

<style>
<!--a:hover{color:blue}
a{text-decoration:underline;}
//-->
</style>

Вместо "blue" можно ставить любой цвет. Также цвет можно задавать не словами, а цифрами, обозначающими палитру RGB. Ниже вы можете наблюдать пример с параметром = "color:blue". Просто наведите мышкой на ссылки и увидите результат.

http://kadet.host.sk

Можете смело использовать этот пример у себя на страничках. Только работать он будет в Internet Explorer, а Netscape Navigator будет просто игнорировать этот тег и ничего страшного не случится.


Формы

Форма - это средство, позволяющее организовать в домашней странице диалог с ее пользователем.
Разработчик домашней страницы создает анкету с помощью специальных элементов:
- кнопки,
- списки,
- текстовые строки,
- текстовые поля.

При зтом разработчик указывает свою программу обработки результатов анкеты.

При чтении домашней страницы пользователь заполняет анкету, и, нажав на кнопку "submit" данной анкеты, отправляет ее содержимое программе обработки.

Программы обработки называются CGI-скриптами и разрабатываются на различных языках программирования.
А что, если Вы хотите организовать анкету, но писать программы Вы не умеете? Тогда можно отправить поток сообщений на Ваш почтовый адрес.

Формы передают информацию программе обработки в виде пар:
Имя поля - Значение поля.

Форма начинается командой <FORM> и заканчивается командой </FORM>.
Данная команда имеет 2 основных параметра: ACTION и METHOD.

Параметр ACTION является обязательным. Он указывает адрес обработчика формы (например, адрес программы обработки или почтовый адрес или просто адрес URL для перехода).

Параметр METHOD не является обязательным. Он принимает одно из двух значений: GET или POST , связанных с методом протокола передачи информации из анкеты.
По умолчанию, METHOD= GET .
Пример команды FORM:
<FORM ACTION=" http://www.geocities.com/SiliconValley/99999 " METHOD= POST >

Для задания управляющей кнопки запуска передачи данных надо записать следующую команду:
<INPUT TYPE= submit NAME=" botton1VALUE=" Произвольный текст ">
где:
INPUT - команда создания управляющего элемента.
TYPE - параметр, определяющий управляющий элемент.
submit - значение этого параметра (в данном случае: управляющая кнопка).
NAME - параметр, задающий имя переменной.
botton1 - имя переменной.
VALUE - параметр, задающий текст, отображаемый на управляющем элементе.
Произвольный текст - значение текста на управляющем элементе.

Данная кнопка имеет следующий вид:

Как мы уже отмечали выше, значением параметра ACTION может быть просто адрес для перехода.
Поэтому простейшая форма просто возвращает нас к началу данного раздела:
<FORM ACTION=" web2e.html"> <INPUT TYPE=SUBMIT VALUE=" Вернуться к началу раздела "></FORM>

Перед Вами эта кнопка, проверьте ее действие:

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

Ниже приводятся основные типы управляющих злементов INPUT.

1) Текстовая строка: TYPE=text

Определяет окно для ввода одной строки текста.
Пример:
<INPUT TYPE=text NAME=" text1 " SIZE= 30 VALUE=" Введите текст ">
В полученное окно

Вы можете ввести любой текст или оставить записанный начальный текст Введите текст без изменений.
При нажатии кнопки submit в программу обработки будет передано:
text1=Введите текст
(или другой, измененный текст).
Параметр SIZE задает размер окна в символах.
При необходимости ограничить длину текста N , применяйте дополнительный параметр:
MAXLENGTH= N .

2) Окно для ввода пароля: TYPE=password

Аналогичен типу text , но при вводе каждый символ заменяется символом *.
Пример. Надо ввести пароль длиной не более 5 символов.
<INPUT TYPE=password NAME= pass size= 10 maxlength= 5 >
Введите какое-слово в полученное окно.

Пусть Вы ввели слово Yakov. Тогда при нажатии на кнопку submit в программу обработки будет введено:
pass=Yakov

3) Текстовое окно: TEXTAREA

Задается в следующем виде:
<TEXTAREA NAME= text3 COLS= 30 ROWS= 5 WRAP=VIRTUAL>
.....
Первоначально заданный текст
.....
</TEXTAREA>
Параметр COLS задает количество символов в строке,
параметр ROWS задает количество строк в окне,
необязательный параметр WRAP=VIRTUAL задает линейку прокрутки.
Введите текст в данное окно:

4) Радиокнопка: TYPE=radio

Может быть задано несколько радиокнопок с одинаковым именем (т.е. значением параметра NAME), но они будут взаимоисключающими: может быть нажата (CHECKED) только одна из них.
Пример:
<INPUT TYPE=radio NAME= color VALUE=" Красная" checked> Красная
<INPUT TYPE=radio NAME= color VALUE=" Синяя"> Синяя
<INPUT TYPE=radio NAME= color VALUE=" Зеленая"> Зеленая

Красная
Синяя
Зеленая
Мы получили 3 кнопки, из них отмечена Красная. При нажатии на другую кнопку предыдущая освобождается.
Допустим, мы нажали Синюю кнопку.
Тогда при нажатии на кнопку submit в программу обработки будет введено:
color=Синяя

5) Помеченный квадрат: TYPE=checkbox

В отличие от радиокнопок, может быть несколько квадратов с одинаковыми именами.
Например, в следующем примере первоначально задана кнопка " Водка":
<INPUT TYPE=checkbox NAME= box VALUE=" Водка" checked> Водка
<INPUT TYPE=checkbox NAME= box VALUE=" Коньяк"> Коньяк
<INPUT TYPE=checkbox NAME= box VALUE=" Ликер"> Ликер

Водка
Коньяк
Ликер
Если Вы нажмете еще на кнопку " Коньяк", то при нажатии на кнопку submit в программу обработки будет введено:
box=Водка
box=Коньяк

6) Скрытый текст: TYPE=hidden

При отображении не виден пользователю.
Служит для прямой передачи служебной информации от домашней страницы обработчику формы, прозрачно для пользователя.
<INPUT TYPE=hidden NAME= Version VALUE=" 2.3 ">
Здесь приведен пример передачи информации о версии программы.
При нажатии на кнопку submit в программу обработки будет введено:
Version=2.3

7) Меню: SELECT

Пусть Вам предоставилась возможность выбрать одну из путевок в соответствии со следующим списком:
<SELECT NAME=" script ">
<OPTION VALUE=" tour1 "> Путевка в Сочи
<OPTION VALUE=" tour2 "> Путевка в Париж
<OPTION VALUE=" tour3 "> Путевка на Колыму
<OPTION VALUE=" tour4 "> Путевка в Рай
<OPTION VALUE=" tour5 "> Путевка в Ад(горящая)

 В "браузере" это выглядит следующим образом:

Если Вы выбрали Путевку в Париж, то при нажатии на кнопку submit в программу обработки будет введено:
script=tour2
Команда SELECT может содержать аттрибут MULTIPLE, при котором можно выбрать несколько элементов меню одновременно.
Высоту окна можно задать аттрибутом SIZE= N.
Если в строке OPTION задан аттрибут checked, то данный элемент задается по умолчанию.

8) Кнопка ввода: TYPE=submit

Это и есть та самая кнопка, о которой мы так часто вспоминали.
<INPUT TYPE=submit VALUE=" Ввод данных ">
Эта команда отображается следующим образом:

9) Кнопка отмены: TYPE=reset

Кнопка выполняет инициализацию начальными значениями всех полей.
<INPUT TYPE=reset VALUE=" Очистить поля ">
Эта команда отображается следующим образом:


Фреймы

Вы можете разделить экран на несколько независимых оконных кадров, каждый из которых отображает отдельный HTML документ .

На экране фреймы представляют собой прямоугольники.
В HTML используются следующие команды работы с фреймами:

<FRAMESET>, </FRAMESET> - определяют состав и размеры фреймов на экране,
<FRAME>, </FRAME> - определяют HTML файл для каждого фрейма,
<NOFRAMES>, </NOFRAMES> - для сообщений "браузеру", не обрабатывающему фреймы.

Сначала рассмотрим простейший ПРИМЕР 1.
Пусть требуется разделить экран на 2 части:
- Левый фрейм, отображающий файл F1.HTML, занимает 30% экрана,
- Правый фрейм, отображающий файл F2.HTML, занимает 70% экрана.

------------------------------------------------
|                        |                     |
|                        |                     |
|    F1.HTML             |        F2.HTML      |
|                        |                     |
|                        |                     |
------------------------------------------------

Тогда в головном файле домашней страницы следует записать:

<HTML>
<HEAD>
<TITLE> Frames Example 2 </TITLE>
</HEAD>
<FRAMESET COLS= "30%, *" >
<FRAME SRC=" F1.HTML ">
<FRAME SRC=" F2.HTML ">
</FRAMESET>
<HTML>

Рассмотрим более сложный ПРИМЕР 2.

|-------------------------------------------------|
|                         |                       |
|                         |        F3.HTML        |
|    F1.HTML              |                       |
|                         |-----------------------|
|                         |                       |
|-------------------------|        F4.HTML        |
|                         |                       |
|                         |-----------------------|
|    F2.HTML              |                       |
|                         |        F5.HTML        |
|                         |                       |
|-------------------------------------------------|

Нумерация фреймов - слева направо и сверху вниз.
В головном файле домашней страницы запишите:

<HTML>
<HEAD>
<TITLE> Frames Example 1 </TITLE>
</HEAD>
<FRAMESET COLS= "30%, *">
<FRAMESET ROWS="50%, *">
<FRAME SRC=" F1.HTML">
<FRAME SRC=" F2.HTML ">
</FRAMESET>
<FRAMESET ROWS= "33%, 33%, *">
<FRAME SRC=" F3.HTML">
<FRAME SRC=" F4.HTML">
<FRAME SRC=" F5.HTML">
</FRAMESET>
</FRAMESET>
</HTML>

2. Формат команды FRAMESET.

Команда делит целое окно (или часть окна, определенное предыдущей командой FRAMESET ) на несколько вертикальных (параметр COLS ) или горизонтальных (параметр ROWS ) кадров.
Каждый из этих фреймов может определять HTML - файл, отображаемый в ней (с помощью команды FRAME ) или, соответственно, делиться дальше по тем же правилам со вложенной командой FRAMESET (см. Пример 2).
По концу определения фреймов, задаваемых командой FRAMESET , не забудьте записать команду /FRAMESET , иначе они могут быть построены неправильно.

2.1. Формат параметров COLS и ROWS.

Эти параметры позволяют определить размеры и количество построенных вертикально (параметр COLS ) или горизонтально (параметр ROWS ) фреймов.

Аттрибуты параметров задаются в одной из 3 форм:
- абсолютный размер в пикселях,
- заданный процент в общей длине или ширине,
- остаток после задания предыдущих кадров.

Рассмотрим распределение экранного пространства на примерах.
Если записать:
<FRAMESET ROWS=" 150, 300, 150">
то "браузер" при просмотре выделит первому фрейму 150 пикселей, второму - 300 пикселей, третьему - 150 пикселей.
Но высота экрана может быть не 500 пикселей.
Тогда браузер пропорционально увеличит или уменьшит размеры всех фреймов.
Поэтому лучше записать:
<FRAMESET ROWS=" 25%, 50%, 25% ">
Результат тот же, но запись соответствует фактическому распределению и легче избежать ошибок при дальнейшей корректировке размеров окон.
Если же сумма процентов не равна 100 , то "браузер" автоматически увеличит или уменьшит размеры фреймов в соответствии с размером экрана.

В начале данного размера приводились примеры с использованием символа "*". Этот символ означает выделение фрейму оставшейся площади.
Например, команда:
<FRAMESET ROWS=" 100, *">
создает 2 кадра: верхний составляет 100 пикселей в высоту, нижний - оставшееся пространство.

Команда:
<FRAMESET ROWS=" 100, *, 100 ">
создает 3 фрейма:
- верхний составляет 100 пикселей в высоту, - нижний - 100 пикселей в высоту, - средний - оставшееся пространство в центре.

Команда:
<FRAMESET ROWS=" *, 200, * ">
создает 3 кадра:
- средний - 100 пикселей в высоту,
- верхний и нижний - равного размера

. Команда:
<FRAMESET ROWS=" 100, 2*, *, 3* ">
создает 4 фрейма:
- верхний составляет 100 пикселей в высоту,
- оставшаяся площадь делится на 6 равных по высоте частей:
- второму сверху фрейму выделяется 2 части,
- третьему сверху фрейму выделяется 1 часть,
- четвертому сверху фрейму выделяется 3 части.

3. Формат команды FRAME.

Данная команда существует только внутри блока FRAMESET - /FRAMESET.
Ее назначение - определение функций конкретного фрейма.
Команда /FRAME практически не используется т.к. ее функции исполняют команды /FRAMESET и следующая FRAME.
Параметр SRC задает имя HTML - файла, отображаемого в данном фрейме.
Параметр NAME применяется для создания имени фрейма. Тогда другой фрейм может ссылаться на данный для отображения в ней своего гипертекста.

Изменим ПРИМЕР 1 так, чтобы правый фрейм получил имя "WIEW_WINDOW".

<HTML>
<HEAD>
<TITLE>Frames Example 1 </TITLE>
</HEAD>
<FRAMESET COLS="30%, *">
<FRAME SRC="F1.HTML">
<FRAME SRC="F2.HTML " NAME="WIEW_WINDOW">
</FRAMESET>
<HTML>

HTML - файл F1.HTML для левого фрейма построим следующим образом:
Таблица ссылок
<UL>
<LI>A HREF="TEXT1.HTML " TARGET="WIEW_WINDOW ">ТЕКСТ1</A>
<LI>A HREF="TEXT2.HTM " TARGET="WIEW_WINDOW ">ТЕКСТ2</A>
<LI>A HREF="TEXT3.HTML " TARGET="WIEW_WINDOW ">ТЕКСТ3</A>
</UL>

Теперь, если в левом фрейме выбрать любую ссылку по гипертексту, то соответствующий файл TEXTi.HTML отобразится в правом фрейме.
Этот очень распространенный прием можно видеть во многих домашних страницах. Его преимущество в том, что на экране можно одновременно видеть и вызывающий, и вызываемый HTML - файлы и для просмотра следующего файла гипертекста достаточно нажать на соответвующую кнопку вызывающего файла.

Файл F1.HTML можно построить и следующим образом:

<BASE TARGET=" WIEW_WINDOW">
.....
Таблица ссылок
<UL>
<LI>A HREF="TEXT1.HTML ">ТЕКСТ1</A>
<LI>A HREF="TEXT2.HTML ">ТЕКСТ2</A>
<LI>A HREF="TEXT3.HTML ">ТЕКСТ3</A>
</UL>

Параметр TARGET команды BASE задает фрейм, выделяемый по умолчанию для отображения гипертекста.

Параметр NORESIZE применяется для того, чтобы пользователь не смог изменить размеры данного фрейм на экране.

Линейки прокрутки задаются с помощью параметра SCROLLING.
Здесь действуют следующие правила:
- Если параметр SCROLLING не задан, то линейки прокрутки создаются автоматически тогда и только тогда, когда размер отображаемого текста превышает размер фрейм (это относится как к размеру по вертикали, так и по горизонтали.
- Если задано SCROLLING="YES", то линейки прокрутки создаются всегда.
- Если задано SCROLLING="NO", то линейки прокрутки не создаются.
- Если задано SCROLLING="AUTO", то система работает так же, как если параметр SCROLLING не задан.

Толщина граничной линии между фреймами может задаваться в пикселях с помощью параметров MARGINHEIGHT и MARGINWIDTH, если разработчика не устраивают значения, заданные по умолчанию.

3.1. Специальные значения параметра TARGET.

В современных "браузерах" зарезервировано 4 специальных значения параметра TARGET:
а) _blank - "браузер" всегда задает это значение для нового, неименованного окна.
б) _self - задается по умолчанию для всех кадров, в операторе FRAME которых нет параметра TARGET.
Все вызываемые по гиперссылке документы загружаются и отображаются в том же фрейме, что и вызывающий их документ.
Значение _self в явном виде не применяется до тех пор, пока мы не вводим команду BASE с параметром TARGET - тогда, возможно, понадобится отменить это общее назначение для какого-либо конкретного фрейма.
в) _parent - вызываемый по гиперссылке файл загружается во фрейм или окно, которое является родительским по отношению к вызывающему. Другими словами, вызываемый файл будет расположен в том же окне, что и его "дедушка".
г) _top - вызываемый по гиперссылке файл загружается в окно, содержащее ссылку, и перекрывает все фреймы данного окна.

4. Формат команды NOFRAME.

Данная команда предназначена для "браузеров", не обрабатывающих фреймы.
В "браузере", обрабатывающем фреймы, вся информация, содержащаяся между командами NOFRAME и /NOFRAME, игнорируется.
В "браузере", не обрабатывающем фреймы, эта информация обрабатывается.
Обычно разработчики домашних страниц, использующие фреймы, встаавляют в тело команды NOFRAME сообщение о том, что данный "браузер" не обрабатывает кадры и сообщает рекомендации, например, перейти на Netscape 2.0 и выше.

Пример 3.
<HTML>
<HEAD>
<TITLE>EXAMPLE</TITLE>
</HEAD>
<FRAMESET COLS="125,*">
<FRAME SRC="F-LEFT.HTML">
<FRAME SRC="F-RIGTH.HTML">
</FRAMESET>
<NOFRAME>
<BODY>
ВНИМАНИЕ!
Для данного документа требуется "браузер", обрабатывающий фреймы, например, Netscape 3.0 и выше.
Ваш "браузер" этим свойством не обладает.
</BODY>
</NOFRAME>
</HTML>


GIF и JPG ... в чем разница?

Изображения в Интернете хранятся в одном из двух форматов: GIF или JPG.

Для хранения изображений эти форматы используют совершенно разные алгоритмы, дающие порой колоссальный выигрыш в объеме. Но, с другой стороны, у каждого формата есть и свои ограничения. Умение выбирать нужный формат "на глаз" приходит не сразу, чаще всего сделать правильный выбор помогают лишь нескончаемые эксперименты.

GIF | JPG
256 цветов | True color (до 16.7 млн)
Поддерживает прозрачность участков изображения | Вся картинка непрозрачна
Обычно используется для кнопок, баннеров, элементов дизайна, логотипов, четких изображений с малым количеством оттенков, чертежей | Обычно используется для фотографий и иных "пестрых" картинок с большим количеством плавных переходов цветов

Выбор формата всегда направлен на то, чтобы добиться минимального объема получившегося файла. Старайтесь добиваться того, чтобы суммарный объем всех изображений, используемых в дизайне вашего сайта не превышал 30-50 килобайт. Чем меньше - тем лучше. Делать страницы с графикой большого объема просто неприлично - пользователи вам за это спасибо не скажут.

Эффект "Мозилла". Размер или количество?

Если на одной странице расположено слишком большое количество отдельных картинок, возникает так называемый эффект "Мозилла", выражающийся в увеличении общего времени ее загрузки. Дело в том, что для загрузки каждой картинки ваш браузер посылает серверу отдельный HTTP-запрос. На доставку запроса требуется некоторое время, по человеческим меркам очень небольшое. Но когда таких запросов сотни... сами понимате. 8)


Встраивание гипертекстовых ссылок

1. Переход в другое место того же документа.

Для организации перехода внутри одного HTML - файла следует ввести необходимый текст в двух местах:
- Записать метку в том месте HTML - файла, куда необходимо перейти.
- Записать переход на эту метку в том месте, откуда будет выполнен переход.

Для организации метки запишите:
<A NAME=" МЕТКА "></A>

где МЕТКА - любое имя, состоящее из букв английского алфавита и цифр.
Для перехода на эту метку запишите:
<A href=#МЕТКА >Перейти на метку. </A>

Пример. Пусть требуется организовать переход из конца в начало данного раздела.
Переход осуществляется нажатием левой кнопки мыши на текст "Вернуться в начало раздела."

Для выполнения этого перехода задайте:
- В начале HTML - файла записать:
<A NAME=" HTML0 "></A>

- В конце HTML - файла записать:
<A href= #HTML0 >Вернуться в начало раздела. </A>

2. Переход в другой документ той же домашней страницы.

Для перехода из любого места HTML - файла h1.html в начало HTML - файла h2.html следует записать:
<A href=" h2.html">Переход к разделу h2 </A>

Пример1. В головном разделе домашней страницы index.html требуется организовать переход в данный раздел web2b.html с помощью команды
<A href=" web2b.html"> Встраивание гипертекстовых ссылок </A>

Нажав левой клавишей мышки на текст Встраивание гипертекстовых ссылок
в головном разделе, Вы попадете в начало данного раздела.

Пример2. Для возврата из данного раздела обратно в головной поместить в конце этого раздела следующую команду возврата:
<A href=" index.html"> Вернуться в начало домашней страницы. </A>

Нажав левой клавишей мышки на текст Вернуться в начало домашней страницы , Вы возвращаетесь к началу головного раздела домашней страницы.

Замечание1. Можно перейти на заданную метку METKA другого документа h2.html с помощью следующей команды:
<A href=" h2.html#METKA"> Переход в начало раздела h2. </A>

Замечание2.Я думаю, что ссылка выглядит красивее, если воспользоваться командой <ФОРМА> (см. раздел 14).

3. Переход в другой документ.

В любом месте HTML - файла можно ввести гипертекстовые ссылки на другой документ или файл.
Гипертекстовые ссылки вводятся в HTML - файл с помощью унифицированного локатора ресурсов - URL.
Этот локатор определяет правила написания различных видов ссылок.
Ниже приводятся важнейшие префиксы для URL:

Префикс URL | Функция
FTP:// | Ссылка на сервер FTP
HTTP:// | Ссылка на обьект, который будет передаваться с использованием протокола HTTP
FILE://localhost | Ссылка на локальный диск
GOPHER:// | Ссылка на сервер Gopher
MAILTO:// | Ссылка на электронный почтовый адрес
NEWS:// | Ссылка на электронную конференцию
NNTP:// | Ссылка на сервер электронной конференции
TELNET:// | Ссылка на сервер электронной конференции

Для записи гипертекстовой ссылки в HTML - файл используйте следующую команду:
<A href=" URL"> Переход по гипертекстовой ссылке. </A>

При нажатии левой кнопки мыши на текст Переход по гипертекстовой ссылке. Вы перейдете на ресурс, заданный в URL.
Для возврата воспользуйтесь клавишей "Back" "браузера".

4. Вывод изображения на экран.

Изображения могут быть выведены на экран так же, как текст.
Файлы изображения могут быть заданы в нескольких различных форматах, наилучшие из которых - GIF (файлы *.gif) и JPEG (файлы *.jpg).
Ниже приводится формат команды:

 <IMG SRC=" ИМЯ
ФАЙЛА" ALT=" Текст"
ALIGN= DIRECTION WIDTH
= WIDTH HEIGHT
= HEIGHT >

где:

- ИМЯ ФАЙЛА - это имя данного файла в вашей домашней странице или полное имя пути и файла, если файл не принадлежит данной домашней странице.
- Текст - это текст, выводимый вместо изображения, если файл изображения по какой - либо причине недоступен.
- DIRECTION - место расположения изображения. Принимает следующие возможные значения:

ALIGN=TOP - последующий текст располагается в верхней части изображения.
ALIGN=BOTTOM - последующий текст располагается в нижней части изображения.
ALIGN=LEFT - изображение находится в левой части листа. Текст обтекает изображение справа.
ALIGN=MIDDLE - изображение находится в центре листа.
ALIGN=RIGHT - изображение находится в правой части листа. Текст обтекает изображение слева.
WIDTH = WIDTH - ширина требуемого изображения на экране,
HEIGHT = HEIGHT - высота требуемого изображения на экране.

Пример. В моей домашней странице есть фотография - файл photo12.jpg.
Для ее вывода в файле family.htm используется команда:

<IMG SRC=" photo12.jpg " ALIGN = LEFT WIDTH = 280 HEIGHT = 240 >

5. Гипертекстовая ссылка с помощью изображения.

Допустим, что Вы выводите на экран изображение IMAGE - файл, который называется, например, image.gif.
Если Вы хотите организовать домашнюю страницу так, чтобы при нажатии левой кнопки мыши на изображение, перейти на другую домашнюю страницу, например, на :
HTTP://WWW.HOME.COM
то следует записать следующую команду:

<A href=" HTTP://WWW.HOME.COM "><IMG SRC=" image.gif ">

6. Создание ссылки на почтовый адрес.

Мой почтовый адрес : kadet2@mail.ru

Для организации ссылки в моей домашней странице на мой почтовый адрес я записал в конце главного раздела домашней страницы:

<A href=mailto: kadet2@mail.ru > Перейти на мой почтовый адрес </A>

В следующей строчке я задал такую же ссылку с поиощью достаточно симпатичной аппликации MAIL12.GIF вместо текста:

<A href=mailto: kadet2@mail.ru ><IMG SRC=" MAIL.GIF ></A>


Комментарии к тексту

Чтобы включить в HTML исходный документ комментарии, игнорируемые "Браузером", следует отделить их символами <!-- и -->

Минимальные аттрибуты комментария:
<!-- комментарий -->

Общий случай комментария:
<!--
-- строка комментариев 1 --
...
-- строка комментариев n --
-->

Не все браузеры обрабатывают вышеприведенные команды комментариев.
Некоторые браузеры обрабатывают следующую запись комментариев:

<comment> комментарий </comment>


Введение

Структура

Заголовки

Списки

Параграфы

Символы

Цвет

Спецсимволы

Комментарии

Таблицы

Гиперссылки

Фреймы

Спецэффекты

Формы

Комманды META

Загорающаяся ссылка

Новые окна браузера

GIF или JPG

HTML - редакторы

Раскрутка сайта

Пишите письма

Что такое - HTML?

Что представляет из себя Web-страничка (html-страничка)?
Web-страничка – это обычный текстовый файл в соответствующей кодировке, с расширением *.htm, *.html, *.dhtml, *.shtml и т.д. В нем описывается вся страничка с помощью языка гипертекстовой разметки – HTML (HyperText Markup Language). Первую версию HTML разработал Тим Бернерс-Ли. Язык постоянно развивается и наиболее полную информацию, в том числе и о спецификациях (версиях) на текущий момент, вы можете найти на сервере основополагающей организации Всемирной Паутины - The World Wide Web Consortium http://www.w3.org Когда вы в своем браузере (Internet Explorer / Nestcape Navigator) загружаете web-страничку, то браузер выполняет команды, записанные на языке HTML, и, подчиняясь им, выводит на экран страничку. HTML – это язык тегов. Теги, окружающие некий текстовый (или графический) раздел, определяют, какие параметры имеет данный текст (или рисунок): большой или маленький размер, жирный текст или курсив, выравнивание слева или справа, какого он цвета и т.д. Таким образом, теги также задают расположение объектов на странице. Большинство web-мастеров (люди, создающие странички) используют для своей работы и визуальные редакторы(См. ниже), и написание текстов непосредственно на HTML (чаще всего в “Блокноте” Windows). Создание страниц с помощью редакторов удобнее, т.к. трудно создать сложную страничку, имея перед глазами только html-код. Но редактор создает не такой оптимальный html-код, как опытный web-мастер, да и встраивать многие элементы возможно, только непосредственно редактируя код странички.
Что такое браузер?
Браузер - это программа просмотра web-страничек во всемирной компьютерной сети Интернет. Я буду использовать термин браузер. Итак, от браузера зависит в каком виде вы сможете увидеть содержимое web-странички, т.к. различные браузеры могут поддерживать или нет различное форматирование. Существует большое количество различных браузеров, но безусловными лидерами являются Internet Explorer и Netscape Navigotor.
В чем различия между понятиями Web-сайт и Web-страничка?
Многие считают, что эти понятия идентичны, но это не совсем так. Web-страничка (иногда еще говорят, html-страничка) это текстовый файл написанный на языке HTML в определенной кодировке и с определенным расширением (см. выше). Когда говорят о web-страничке подразумевают один, два или три файла, которые могут быть связаны друг с другом или нет, иметь ссылки на другие ресурсы Интернета или нет. А web-сайт подразумевает много (больше трех) файлов в формате HTML, обязательно связанных между собой гиперссылками. Как правило, все эти файлы находятся в одном домене и составляют общее информационное пространство (т.е. посвящены одной или нескольким связанным между собой темам).


Команды META

Создав домашнюю страницу, Вы, несомненно, захотите чтобы Вас смогли "найти" все пользователи, интересующиеся данным вопросом.
Здесь можно идти двумя основными путями:
1. "Отметиться" в поисковых системах. Есть службы, позволяющие зарегистрироваться на нескольких серверах одновременно.
2. Вставить внутри блока <HEAD>...</HEAD> команды META.
Основное назначение команд META - инструкции для поисковых машин о тематике Вашей страницы.
Для этих целей используются следующие параметры:
- description - краткое описание страницы,
- keyword - список ключевых слов в странице.

Я приведу примеры - команды META, которые я включил в данную страницу.
<META NAME=" description " CONTENT=" Это справочник, для тех, кто хочет писать свои странички в Интернете ">
Здесь, я думаю, все понятно.

<META NAME=" keyword " CONTENT=" Internet, HTML, WWW, webpage, homepage, image, HyperText, Language, Russian, JavasScript, Интернет, гипертекст, страничка, справочник, учебник ">

Хочу обратить внимание на важность точной подборки ключей, чтобы, с одной стороны, Вас нашли все, кому Ваша страница предназначена, с другой стороны - чтобы поменьше чертыхались пользователи, попавшие на Вашу страницу случайно.

Из других применений команд META важно привести команды, дающие инструкции "браузеру" о кодировке Вашей страницы.
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1251">
для кодировки в Windows/1251,
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=koi8-r">
для кодировки в KOI-8.


Новые окна браузера

Используя данный пример можно открывать новые окна вашего браузера, причем безо всяких панелей и строчек для ввода адреса, без статуcной строки и полос прокруток, даже без менюшек навигации. Когда нет свободного места на сайте и хочется все уместить по-компактнее - данный пример - то, что нужно.

<blockquote> <i> <a href="#1" onClick="window.open('http://адрес_странички_или_картинки', 'newWin', 'Toolbar=0, Location=0, Directories=0, Status=0, Menubar=0, Scrollbar=0, Resizable=0, Copyhistory=1, Width=640, Height=480')"> <p> Текст вашей ссылки </a></i> </blockquote>

Теперь поясню некоторые параметры, которые можно изменять. Значение "ноль" - выключено, значение "единица" - включено:

Toolbar - Панель инструментов
Location - Поле адреса странички
Directories - Панель ссылок
Status - Статусная строка
Menubar - Навигационное меню
Scrollbar - Полоса прокрутки
Resizable - Способность изменять размеры окна

Пример: Теперь можете посмотреть этот пример в работе. Ниже ссылка на новое окно размеров 500х500 со всеми выключенными опциями.

Пример - Новое окно


Формирование параграфов

В документе HTML невозможно создать абзац, используя клавишу [Enter].
Использование этой клавиши улучшает внешний вид исходного текста, но не влияет на полученное изображение.
Для перехода на следующую строку воспользуйтесь командой
<br>
Для создания пустой строки воспользуйтесь командой
<p>
Для создания горизонтальной черты воспользуйтесь командой
<hr>
Если черта создается не на всю строку, а на какую - то ее часть, например, на 40%, то команда выглядит следующим образом:
<hr width= 40 %>
Для создания широкой черты следует задать ее ширину (по умолчанию - в пикселях)
<hr size= 10 >
Для выравнивания черты ВЛЕВО/ВПРАВО/ПО ЦЕНТРУ задайте соответственный параметр
ALIGN=LEFT/RIGHT/CENTER
Черная линия задается наличием параметра NOSHADE.

Ниже приводятся примеры форматирования строк:

Отображаемый текст | Запись в формате HTML
Последняя строка параграфа Первая строка нового параграфа | Последняя строка параграфа <p> Первая строка нового параграфа
Первая строка текста Вторая строка текста | Первая строка текста <br> Вторая строка текста
Конец секции Следующая секция | Конец секции <hr> Следующая секция
Только 40% ширины Следующая секция | Только 40% ширины <hr width= 40 %> Следующая секция
Толщина линии Следующая секция | Толщина линии <hr size= 10 > Следующая секция
Сдвинутая влево черная линия Следующая секция | Сдвинутая влево черная линия <hr size= 10 width= 40 % NOSHADE ALIGN=LEFT> Следующая секция

Вы можете расположить текст по центру с помощью следующих команд:
<CENTER> Произвольный текст </CENTER>
Например,
<CENTER><br>
Создание домашней страницы в<br>
ИНТЕРНЕТ<br>
</CENTER><br>
Иногда необходимо создать текстовый документ, расположение строк которого (табуляция, отступы, выравнивание) определяется разработчиком домашней страницы, а не программой - редактором.
Например,

  • различные таблицы,
  • стихи Маяковского,
  • и т.д.
Для создания такого текста воспользуйтесь командами:
<PRE>
Произвольный, заранее отредактированный текст
</PRE>
Полученный в "браузере" образ текста будет точно соответствовать тексту в исходном HTML файле.

Аналогичные функции выполняет пара команд:
<LISTING>
Произвольный, заранее отредактированный текст
</LISTING>


HTML - редакторы

В этой главе я попытаюсь дать сравнение HTML редакторам,
с которыми мне пришлось сталкиваться, и на каком из них я остановился.

Скачать Описание
Macromedia Dreamweaver 4.0
 Один из лучших HTML редакторов, работающих в режиме WYSIWYG (т.е. при редактировании можно будет видеть, как будет выглядеть HTML-страница)
1stPage 2000
 Полнофункциональный HTML-редактор, не уступающий популярному коммерческому аналогу HomeSite. Помимо стандартных возможностей такого рода программ, позволяет редактировать файлы на удаленном сервере, содержит справочник HTML, более 450 Javascripts, VBScripts и Perl скриптов, компрессор HTML кода. Многие операции выполняются с помощью мастеров и с окнами предварительного просмотра результата. (Вот как раз на этом редакторе я и остановился) Он мал в размере(что является большим достоинством для юзеров со старыми компами), но как говорится очень удал, очень рекомендую!!!
HomeSite 4.5
 Профессиональный HTML редактор. С его помощью легко создавать целые вебпроекты, в составе программы есть множество шаблонов, средства предварительного просмотра (рабочее поле можно разделить на 2 части), поддерживается ActiveX, JavaScript, Perl, ASP, CSS и DHTML.
CoffeeCup HTML Editor 8.6
 Популярный текстовый HTML-редактор, предоставляющий широкие возможности для дизайна. Включает в себя галерею из 25000 картинок, иконок, кнопок и т.д. 175 анимированных GIF-изображений, 125 java-скриптов, FTP-клиент, мастера подсказок.
SNK WebOffice 1.51
 Полнофункциональный пакет программ для разработчиков Web. Включает SNK Visual HTML Workshop Professional и ряд дополнительных утилит. Workshop поддерживает работу с HTML/XHTML, CSS, Java, JavaScript, VBScript, Perl, PHP, C, Pascal, SQL. Вы можете расширять функции программы, создавая свои собственные команды, для вставки тегов и любых произвольных текстовых конструкций. Русский интерфейс кстати.


Регистрация сайта в поисковиках и каталогах

Вы наконец-то создали свой сайт, но на него никто не заходит? Попробую помочь и этой проблемме. Для того, чтобы у вас появились посетители, нужно зарегистрировать сайт в поисковых машинах и всевозможных каталогах. Здесь я даю вам несколько ссылок на сайты автоматической регистрации. Вам нужно хорошенько подумать, в какой категории должен находиться ваш сайт иначе посещаемость будет нулевая или регистрация вообще не произойдёт! Некоторые поисковики просят за это маленькую плату, а именно, разместить у вас на сайте свой баннер (обычно это кнопка 88х31)
Очень быстрая регистрация, которая мне нравится больше остальных www.1ps.ru
Второй сайт менее удобен в использовании, и регистрация занимает больше времени, но он такой же эффективный, как и предыдущий. Вот его адрес: http://submitter.ru


Формирование символов

Для выделения отдельных частей текста можно воспользоваться следующими стилями:
- жирный (Bold);
- курсив(Italic);
- с подчеркиванием(Underline);
- с перечеркиванием(STRIKE);
Для выделения текста жирным шрифтом воспользуйтесь командами:
<b> text </b>
Для выделения текста курсивом воспользуйтесь командами:
<i> text </i>
Для выделения текста подчеркиванием воспользуйтесь командами:
<u> text </u>
Для выделения текста перечеркиванием воспользуйтесь командами:
<strike> text </strike>

Ниже приводятся примеры форматирования строк:

Отображаемый текст | Запись в формате HTML
Выделение текста жирным шрифтом | Выделение <b> текста </b> жирным шрифтом
Выделение текста курсивом | Выделение <i> текста </i> курсивом
Выделение текста подчеркиванием | Выделение <u> текста </u> подчеркиванием
Выделение текста перечеркиванием | Выделение <strike> текста </strike> перечеркиванием

Для изменения размера текстовых символов воспользуйтесь командами:
<FONT SIZE= +-i >
</FONT>
где i в пределах от от 1 до 7 относительно начального размера букв.
Например,

Отображаемый текст | Запись в формате HTML
Большой размер букв | <FONT SIZE= +2 > Большой размер букв </FONT>
Очень большой размер букв | <FONT SIZE= +3 > Очень большой размер букв </FONT>

Кроме того, можно увеличить или уменьшить высоту шрифта с помощью команд <BIG> и <SMALL>. Эти команды используются в паре с командами </BIG> и </SMALL>.

Например, строка
<BIG>Увеличенный размер</BIG>
выглядит как
Увеличенный размер
а строка
<SMALL>Уменьшенный размер</SMALL>
выглядит как
Уменьшенный размер

Недостаток этих команд в том, что размерами букв в этом случае управляете не Вы, а браузер. А им доверять...

Еще две пары команд:
<SUB> и </SUB> - подстрочный индекс, например, H 2 SO4.
<SUP> и </SUP> - надстрочный индекс, например, (a2 - b2) = (a - b)(a+b).

Все вышеприведенные команды определяют физическое форматирование символов.
Вы задаете конкретное изменение характеристик символов.
Кроме того, есть логическое форматирование символов - Вы даете описание, а браузер решает как изменять характеристики . В общем, кто доверяет браузеру - пользуйтесь этими командами.
Они выглядят следующим образом:

<CITE> Цитата </CITE>
<EM> Особо важный текст </EM>
<STRONG> Сильное выделение текста </STRONG>
<KBD>      Текст, введенный пользователем </KBD>
<CODE>     Листинг программы               </CODE>
<SAMP> Последовательность литералов   </SAMP>
<VAR> Имя переменной </VAR>
Браузер пользователя сам выбирает шрифт, если Вы его конкретно не задали в описании страницы. А если в странице задан шрифт, которого нет у пользователя? Вы можете задать список, состоящий из нескольких шрифтов, и браузер выберет самый левый, а если его в системе нет, то следующий и т. д. Если ни одного из шрифтов нет, браузер выбирает свой шрифт.

Фонт задается с помощью команды: FONT FACE

Рассмотрим пример:p> <FONT FACE="Arial Cyr, Arial, Times New Roman"> Выбираем шрифт

Если в системе пользователя установлен шрифт Arial Cyr, то строка "Выбираем шрифт" будет отображаться этим шрифтом. В противном случае браузер попытается выводить с помощью шрифта Arial, а если нет и его, то шрифтом Times New Roman. Если нет и его, то выводится шрифт, установленный в браузере по умолчанию.


Специальные эффекты

1. Создание мигающего текста

Замечание.
Работает в Netscape
Не работает в Explorer

Вы можете создать изображение текста мигающим с помощью следующих команд:
<blink>
</blink>

Например, :
<blink> Я МИГАЮ !!!!!!!!!!</blink>
Отображается следующим образом:

Я МИГАЮ !!!!!!!!!!!

Не злоупотребляйте мигающим изображением.
Его лучше всего применять для привлечения внимания к новой информации в домашней странице.

2. Создание бегущей строки.

Замечание.
Работает в Explorer
Не работает в Netscape

(Если "браузер" не обрабатывает бегущую строку, то Вы увидите на зкране текст без движения)

Бегущая строка создается с помощью команд:
<MARQUEE> и <MARQUEE>.

Ниже приводятся примеры команд:

Команда
<MARQUEE> Этот текст будет двигаться справа налево медленно. </MARQUEE>
Отображается следующим образом:
Этот текст будет двигаться справа налево медленно.

Команда
<MARQUEE BEHAVIOR=" ALTERNATE " SCROLLAMOUNT=" 50 " SCROLLDELAY=" 8 "> Этот текст будет двигаться справа налево и назад. </MARQUEE>
Отображается следующим образом:
Этот текст будет двигаться справа налево и назад.

Команда
<MARQUEE BEHAVIOR=" SLIDE "> Этот текст будет двигаться и останавливаться. </MARQUEE>
Отображается следующим образом:
Этот текст будет двигаться и останавливаться.

Команда
<MARQUEE " SCROLLDELAY=" 5 " SCROLLAMOUNT=" 50 "> Этот текст будет двигаться очень быстро. </MARQUEE>
Отображается следующим образом:
Этот текст будет двигаться очень быстро.

3. Карта образов.

Замечание.
Работает в Explorer 3.0
Работает в Netscape 3.0

Карта образов позволяет создать несколько ссылок к различным адресам, используя только одно изображение.

Пусть у Вас есть картинка imgmap.gif размером 100 x 100 пикселей. Предположим, что картинка состоит из 4 частей, где изображены Ваши друзья:
- В левом верхнем углу - Дима (у него есть домашняя страница dima.html )
- В правом верхнем углу - Алик (Его домашняя страница alik.html )
- В левом нижнем углу - Вова (Его домашняя страница vova.html )
- В правом нижнем углу - Игорь (Его домашняя страница igor.html )

Если Вы хотите, чтобы при нажатии левой кноки мыши на изображение каждого из Ваших друзей Вы попадали на его домашнюю страницу, запишите следующие команды:

<map name=" map ">
<area shape="rect" coords=" 0, 0, 49, 49 " href=" dima.html ">
<area shape="rect" coords=" 0, 50, 49, 99 " href=" alik.html ">
<area shape="rect" coords=" 50, 0, 99, 49" href=" vova.html ">
<area shape="rect" coords=" 50, 50, 99, 99" href=" igor.html ">
</map>
<img src=" imgmap.gif " usemap="# map " border= 0 >

4. Плавающие окна.

Замечание.
Работает в Explorer 3.0
Не работает в Netscape 3.0 - а жаль, очень жаль - замечательная штука

Ниже Вы видите пример плавающего окна, в котором отображен титульный лист данной страницы:

Если ваш "браузер" обрабатывает плавающие окна, то вы видите такое окно, иначе - только сопровождающий текст: Это плавающее окно

Это окно создано с помощью следующей команды:
<IFRAME NAME=" content_frame " width=" 400 " height=" 240 " SRC=" index.htm "> Это плавающее окно </IFRAME>


Создание списков

Списки предназначены для представления информации в упорядоченном виде.
В HTML - документах используется 3 вида списков:
  1. Неупорядочные списки,
  2. Упорядочные списки,
  3. Списки - определения.
Неупорядоченный список использует для выделения записей специальные символы. Неупорядоченный список определяется следующими командами начала и конца списка:
<UL>
</UL>
Каждый элемент списка начинается с команды:
<LI>
Ниже приводится пример неупорядочного списка:

Отображаемый текст Запись в формате HTML
Строки списка:
  • Строка 1 списка
  • Строка 2 списка
  • Строка 3 списка
Строки списка:
<UL>
<LI> Строка 1 списка
<LI> Строка 2 списка
<LI> Строка 3 списка
</UL>

В команде <LI> может быть параметр TYPE, который определяет внешний вид символа, используемого для выделения строки в списке и может иметь следующие значения:

<LI TYPE=DISK> - круглая жирная точка,
<LI TYPE=CIRCLE> - окружность,
<LI TYPE=SQUARE> - маленький черный квадрат.

В упорядоченном списке все записи пронумерованы.
Упорядоченный список определяется следующими командами начала и конца списка:
<OL>
</OL>
Каждый элемент списка начинается с команды:
<LI>
Ниже приводится пример упорядочного списка:

Отображаемый текст Запись в формате HTML
Строки списка:
  1. Строка 1 списка
  2. Строка 2 списка
  3. Строка 3 списка
Строки списка:
<OL>
<LI> Строка 1 списка
<LI> Строка 2 списка
<LI> Строка 3 списка
</OL>

В команде <LI> может быть параметр TYPE, который определяет тип нумерации и может иметь следующие значения:

<LI TYPE=A> - прописными буквами,
<LI TYPE=a> - строчными буквами,
<LI TYPE=I> - прописными римскими цифрами,
<LI TYPE=i> - строчными римскими цифрами,
<LI TYPE=1> - арабскими цифрами.

В списке - определении все записи сдвинуты влево при помощи табуляции.
Список - определение определяется следующими командами начала и конца списка:
<DL>
</DL>
Каждый элемент списка начинается с команды:
<DD>
Ниже приводится пример списка - определения:

Отображаемый текст Запись в формате HTML
Строки списка:
Строка 1 списка
Строка 2 списка
Строка 3 списка
Строки списка:
<DL>
<DD> Строка 1 списка
<DD> Строка 2 списка
<DD> Строка 3 списка
</DL>


Использование специальных символов

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

Отображаемый текст | Запись в формате HTML
< | &lt;
> | &gt;
& | &amp;
" | &quot;

Язык HTML всегда уменьшает количество подряд расположенных пробелов до одного, независимо от того, сколько пробелов было в исходном тексте.
Для задания необходимого количества подряд расположенных пробелов следует воспользоваться специальным символом пробела:
&nbsp;
Например, в следующей записи исходного текста: A &nbsp;&nbsp;&nbsp; B
в отображаемом тексте между символами A и B будет 3 пробела.
При необходимости изобразить на экране команду языка HTML возникает дополнительная проблема - редактор может пробразовать ее в соответствующую команду прямо в исходном тексте.
Например, для создания текста
<CENTER> в исходном тексте домашней страницы записано:
&lt;CENTER&gt;
Редактор (например, редактор Geocities) может превратить эту запись в следующую
<CENTER>
прямо в исходном тексте!
И вместо отображения соответствующей команды на экране Вы получаете расположенный по центру текст в следующих строках.
Чтобы этого избежать, можно, например, вставить внутрь команды две парные команды. Например, вышеприведенную команду следует записать следующим образом:
<<u></u>CENTER>
Символы кодировки LATIN-1 можно обозначить как &# NN , где NN - десятичный код символа, содержащий до 3 цифр.


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

Символы, заключенные в угловые скобки <> являются HTML командами, по которым "браузер" распознает, как следует преобразовать части текста, заключенные между этими командами.
Документ в целом должен быть отмечен как документ в формате HTML. Для этого он должен начинаться командой <HTML> и заканчиваться командой </HTML>.
(Здесь и далее зеленым цветом выделен необходимый формат команды, а красным - задаваемый Вами текст).
Документ состоит из 2 частей:
- Заголовка (Head),
- Собственно документа (Body).
Для выделения заголовка следует ввести:
<HEAD> Заголовок документа <HEAD>
Каждый WWW - документ имеет название, которое вводится в титульной строке "браузера".
Для ввода титульной строки в заголовок документа следует воспользоваться следующими командами:
<HEAD>
<TITLE> Title of Document </TITLE>
</HEAD>
Следует отметить, что титульная строка отображается в специальных полях браузера.

Для записи основного текста следует ввести:
<BODY> Основной текст </BODY>
Таким образом, общая схема документа в формате HTML выглядит следующим образом:
<HTML>
<HEAD>
<TITLE> Титульная строка документа </TITLE>
</HEAD>
<BODY> Основной текст документа </BODY>
</HTML>

При написании команд HTML не имеет значение, какими буквами - строчными или прописными Вы пишете команды.


Создание таблиц

Таблица создается с помощью команд <TABLE> и </TABLE>.
Команда <TABLE> может иметь следующие параметры:
- UNITS - может принимать значение RELATIVE или PIXELS. Определяет единицы измерения в других параметрах. По умолчанию, UNITS = PIXELS.
- BORDER - определяет линии, разграничивающие клетки в таблице. Ширина линии задается командой BORDER = N.
- CELLPADDING - Определяет минимальный промежуток вокруг содержимого таблицы.

- BGCOLOR - Определяет цвет фонового изображения в таблице. Во всех таблицах данного документа я использую BGCOLOR= WHITE

Есть еще несколько команд, задающих цвет обрамления:
-BORDERCOLOR,
-BORDERCOLORDARK,
-BORDERCOLORLIGHT,
но они используются только в Explorer

Простейшая таблица состоит из одной клетки с данными.
Команды <TD> и </TD> определяют соответственно начало и конец данных в клетке.
Строго говоря, команда </TD> не является обязательной, но я советую ею пользоваться для облегчения чтения исходного текста.

Пример.
Таблица задана в следующем виде:

<TABLE BORDER CELLPADDING= 1 BGCOLOR= BLACK >
<TD> Текст в таблице </TD>
</TABLE>

При отображении она выглядит следующим образом:

Текст в таблице

Строка клеток создается повторением команд <TD> и </TD>.

Пример.
<TABLE BORDER CELLPADDING= 1 BGCOLOR= BLACK >
<TD> Содержимое 1 </TD>
<TD> Содержимое 2 </TD>
<TD> Содержимое 3 </TD>
</TABLE>

отображается следующим образом:

Содержимое 1 Содержимое 2 Содержимое 3

Для формирования таблицы, состоящей из нескольких строк, воспользуйтесь командой <TR> , разделяющей строки.

Пример.
<TABLE BORDER CELLPADDING= 1 BGCOLOR= BLACK >
<TD> Содержимое 1 </TD>
<TD> Содержимое 2 </TD>
<TR>
<TD> Содержимое 3 </TD>
<TD> Содержимое 4 </TD>
<TR>
<TD> Содержимое 5 </TD>
<TD> Содержимое 6 </TD>
</TABLE>

отображается в виде:

Содержимое 1 | Содержимое 2
Содержимое 3 | Содержимое 4
Содержимое 5 | Содержимое 6

Команды <TH> и </TH> используются для обозначения заголовка столбца клеток.
Например, таблица:

<TABLE BORDER CELLPADDING= 1 BGCOLOR= BLACK >
<TH> Содержимое </TH>
<TH> Название </TH>
<TR>
<TD ALIGN = CENTER> HTML </TD>
<TD ALIGN = CENTER> Язык <br>
разметки <br>
гипертекста </TD>
</TABLE>

отображается следующим образом:

Содержимое | Название
HTML | Язык разметки гипертекста

Параметры ROWSPAN и COLSPAN команд <TD> и <TH> используются для формирования клеток данных, обьединяющих более одной строки или столбца.
Например, таблица:

<TABLE BORDER CELLPADDING= 1 BGCOLOR= BLACK >
<TH> Язык программирования </TH>
<TH ALIGN = LEFT COLSPAN = 2 > Особенности </TH>
<TR>
<TD> C++ </TD>
<TD ROWSPAN = 2 > Использует </TD>
<TD> Классы </TD>
<TR>
<TD> Visual BASIC </TD>
<TD> Обьекты </TD>
</TABLE>

Отображается в виде:

Язык программирования | Особенности
C++ | Использует | Классы
Visual BASIC |  | Обьекты


Создание заголовков

Заголовки в документе создаются с помощью команд:
<Hi> Заголовок </Hi>
причем при i = 1 заголовок самый крупный, а при i = 6 - самый мелкий.
Например,

Отображаемый текст Запись в формате HTML

Заголовок1

 <H1> Заголовок1 </H1>

Заголовок2

 <H2> Заголовок2 </H2>

Заголовок3

 <H3> Заголовок3 </H3>

Заголовок4

 <H4> Заголовок4 </H4>
Заголовок5
 <H5> Заголовок5 </H5>
Заголовок6
 <H6> Заголовок6 </H6>