Новая страница 1

Введение в язык html.

World Wide Web состоит из cледующих основных средств:
- HTML (Hypertext Markup Language) - язык разметки гипертекста,
- CGI (Common Gateway Interface) - общий шлюзовый интерфейс,
- HTTP (Hypertext Transfer Protocol) - протокол передачи гипертекстовых документов,

Основные языки программирования: Java, JavaScript.

Данная страница посвящена основному компоненту - HTML.
Документ HTML состоит из специальных команд тегов, определяющих форму его отображения при просмотре.
Для просмотра документов Internet используется специальная программа - браузер,
например, Netscape Navigator или Microsoft Internet Explorer.
Документ, который вы сейчас читаете, также создан с помощью языка HTML, и Вы пользуетесь одним из браузеров.

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

Структура Html документа.

Символы, заключенные в угловые скобки (< и >) являются HTML командами, по которым браузер распознает, как следует преобразовать части текста, заключенные между этими командами. Документ в целом должен быть отмечен как документ в формате HTML. Для этого он должен начинаться командой <HTML> и заканчиваться командой </HTML>.

Документ состоит из 2 частей:
- Заголовка (HEAD),
- Собственно документа (BODY).

Для выделения заголовка следует ввести:
<HEAD>Заголовок документа</HEAD>

Каждый WWW - документ имеет название, которое вводится в титульной строке браузера. Для ввода титульной строки в заголовок документа следует воспользоваться следующими командами:
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>

Для записи основного текста следует ввести:
<BODY>Основной текст</BODY>

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

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

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

Заголовки в документе создаются с помощью команд:
<Hx>Заголовок</Hx>
причем при x=1 заголовок самый крупный, а при x=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>

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

Списки предназначены для представления информации в упорядоченном виде.
В HTML - документах используется 3 вида списков:
- Неупорядочные списки,
- Упорядочные списки,
- Списки определения.

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

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

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

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

Отображаемый текст

Запись в формате HTML

· Строка 1 списка

· Строка 2 списка

· Строка 3 списка

<OL>
<LI> Строка 1 списка
<LI>Строка 2 списка
<LI> Строка 3 списка
</OL>

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

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

Отображаемый текст

Запись в формате HTML

Строка 1 списка

Строка 2 списка

Строка 3 списка

<DL>
<DD>Строка 1 списка
<DD>Строка 2 списка
<DD>Строка 3 списка
</DL>

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

В документе 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>HTML</CENTER>

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

Вывод текста в несколько столбцов.

Netscape 3.0 и выше поддерживает вывод текста в несколько столбцов, в газетном формате с помощью команд <MULTICOL></MULTICOL>.
Ниже приводится формат команд:<MULTICOL COLS="N" GUTTER="M">Задаваемый текст в столбцах</MULTICOL>.
Где N - это количество столбцов, а M - расстояние между столбцами.
Браузеры, не поддерживающие вывод текста в несколько столбцов, обеспечат вывод текста нормально, в один столбец.

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

Для выделения отдельных частей текста можно воспользоваться следующими стилями:
- жирный (Bold),
- курсив(Italic),
- с подчеркиванием(Underline).

Для выделения текста жирным шрифтом воспользуйтесь командами: <B>Bold</B>

Для выделения текста курсивом воспользуйтесь командами: <I>Italic</I>

Для выделения текста подчеркиванием воспользуйтесь командами: <U>Underline</U>

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

Отображаемый текст	Запись в формате HTML
Выделение текста жирным шрифтом	Выделение<B> текста </B>жирным шрифтом
Выделение текста курсивом	Выделение<I> текста </I>курсивом>
Выделение текста подчеркиванием	Выделение<U> текста </U>подчеркиванием

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

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

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

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

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

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

Отображаемый текст	Запись в формате HTML
BLACK	<FONT COLOR=BLACK>BLACK</FONT COLOR>
MAROON	<FONT COLOR=MAROON>MAROON</FONT COLOR>
GREEN	<FONT COLOR=GREEN>GREEN</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>
RED	<FONT COLOR=RED>RED</FONT COLOR>
LIME	<FONT COLOR=LIME>LIME</FONT COLOR>
YELLOW	<FONT COLOR=YELLOW>YELLOW</FONT COLOR>
BLUE	<FONT COLOR=#0000FF>BLUE</FONT COLOR>
FUCHSIA	<FONT COLOR=FUCHSIA>FUCHSIA</FONT COLOR>
AQUA	<FONT COLOR=AQUA>AQUA</FONT COLOR>
WHITE	<FONT COLOR=WHITE>White</FONT COLOR>

Вставка специальных символов.

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

Отображаемый текст	Запись в формате HTML
<	<
>	>
&	&
"	"
°	°
¢	¢
©	©

Язык HTML всегда уменьшает количество подряд расположенных пробелов до одного, независимо от того, сколько пробелов было в исходном тексте. Для задания необходимого количества подряд расположенных пробелов следует воспользоваться специальным символом пробела:
Например, в следующей записи исходного текста: A&nbsp&nbsp&nbspB
в отображаемом тексте между символами A и B будет 3 пробела.
Например, для создания текста <CENTER>; в исходном тексте зтой страницы записано: &ltCENTER&gt.

Комментарии.

Чтобы включить в исходный
HTML документ комментарии, игнорируемые браузером, следует отделить их символами 
Минимальные аттрибуты комментария: 
Общий случай комментария:


Не все браузеры обрабатывают вышеприведенные команды комментариев. Большенство браузеров обрабатывают следующую запись комментариев: <COMMENT>Комментарий</COMMENT>

Таблицы.

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

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

Пример, таблица задана в следующем виде:
<TABLE BORDER=1>
<TD> Текст в таблице </TD>
</TABLE>

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

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

Строка клеток создается повторением команд <TD></TD>. Пример:
<TABLE>
<TD>Содержимое 1</TD>
<TD>Содержимое 2</TD>
<TD>Содержимое 3</TD>
</TABLE>
Отображается следующим образом:

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

Команды <TH> и </TH> используются для обозначения заголовка столбца клеток. Например, таблица:
<TABLE BORDER=1>
<TH>Содержимое</TH>
<TH>Название</TH>
<TR>
<TD>HTML</TD>
<TD>Язык<BR>разметки<BR>гипертекста</TD>
</TABLE>
Отображается следующим образом:

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

Атрибуты ROWSPAN0 и COLSPAN команд <TD> и <TH> используются для формирования клеток данных, обьединяющих более одной строки или столбца.
Например, таблица: <TABLE BORDER=1>
<TH>Язык программирования</TH>
<TH COLSPAN=2>Особенности</TH>
<TR>
<TD>C++</TD>
<TD ROWSPAN=2>Использует</TD>
<TD>Классы</TD>
<TR>
<TD>Visual BASIC</TD>
<TD>Обьекты</TD>
</TABLE>
Отображается в виде:

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

Гипертекстовые ссылки.

Переход в другое место того же документа.
Для организации перехода внутри одного HTML - файла следует ввести необходимый текст в двух местах:
- Записать метку в том месте HTML - файла, куда необходимо перейти.
- Записать переход на эту метку в том месте, откуда будет выполнен переход.
Для организации метки запишите: <A NAME="МЕТКА"></A>, где МЕТКА - это любое имя, состоящее из букв английского алфавита и цифр.
Для перехода на эту метку запишите: <A HREF=МЕТКА>Перейти на метку.</A>
Пример: требуется организовать переход отсюда в начало данного HTML файла. Переход осуществляется нажатием левой кнопки мыши на текст "Вернуться в начало".
Для выполнения этого перехода задайте:
- В начале HTML - файла записать:
<A NAME="A0"</A>
- В необходимом для перехода месте HTML файла записать:
<A HREF=HTML0 >Вернуться в начало раздела.</A>

Переход в другой документ этой же Home Page (домашней страницы).
Для перехода из любого места HTML файла h1.htm в начало HTML файла h2.htm, в файле h1.htm следует записать:
<A HREF="H2.htm">Переход к файлу h2.htm </A>
Замечание. Можно перейти на заданную метку METKA другого документа h2.html с помощью следующей команды:
<A HREF="H2.htm#METKA"> Переход в начало файла h2.htm.</A>
Переход в любой документ Internet.
В любом месте HTML - файла можно ввести гипертекстовые ссылки на другой документ или файл. Гипертекстовые ссылки вводятся в HTML - файл с помощью унифицированного локатора ресурсов - URL. Этот локатор определяет правила написания различных видов ссылок. Ниже приводятся важнейшие префиксы для URL:

Префикс URL	Функция
FTP:// HTTP:// FILE:// GOPHER://	FTP - сервер WWW - сервер Локальный диск Gopher - сервер

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

Вывод изображения на экран.
Изображения могут быть выведены на экран так же, как текст. Файлы изображения могут быть заданы в нескольких различных форматах, наилучшие из которых - GIF (файлы *.gif) и JPEG (файлы *.jpg). Ниже приводится формат команды:
<IMG SRC="ИМЯ ФАЙЛА" ALT="ТЕКСТ" ALIGN=DIRECTION WIDTH=WIDTH HEIGHT=HEIGHT>, где:
- ИМЯ ФАЙЛА - это имя файла-картинки или полное имя пути и название файла, если он не принадлежит каталогу, в котором расположен Ваш HTML файл. Здесь также может быть адрес в Internet данного файла.
- Текст - это текст, выводимый вместо изображения, если файл изображения по какой - либо причине недоступен.
- DIRECTION - место расположения изображения. Принимает следующие возможные значения:
ALIGN=TOP - последующий текст располагается в верхней части изображения.
ALIGN=BOTTOM - последующий текст располагается в нижней части изображения.
ALIGN=LEFT - изображение находится в левой части листа. Текст обтекает изображение справа.
ALIGN=MIDDLE - изображение находится в центре листа.
ALIGN=RIGHT - изображение находится в правой части листа. Текст обтекает изображение слева.
WIDTH=WIDTH - ширина требуемого изображения на экране.
HEIGHT=HEIGHT - высота требуемого изображения на экране.

Пример: если Вам нужно вставить картинку Picture.gif, то Вам следут ввести:
<IMG SRC="Picture.gif" HEIGHT=25 WIDTH=100 ALT="Каринка" ALIGN=CENTER>
Выглядеть это будет примерно так:

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

Создание ссылки на почтовый адрес.
Мой почтовый адрес в mail15.com: designplanet.mail15.com. Для организации ссылки в моей домашней странице на мой почтовый адрес я записал в конце последней HTML строчки моей домашней страницы:
<A HREF=mailto:design-planet.mail15.com>Admin</A>

Frame(кадры).

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

Сначала рассмотрим простейший ПРИМЕР 1:BR> Пусть требуется разделить экран на 2 части:
- Левый кадр, отображающий файл F1.HTM, занимает 30% экрана,
- Правый кадр, отображающий файл F2.HTM, занимает 70% экрана.
Тогда в головном файле домашней страницы следует записать:
<HTML>
<HEAD>
<TITLE>Frames Example 1</TITLE>
</HEAD>
<FRAMESET COLS= 30%,*>
<FRAME SRC="F1.htm">
<FRAME SRC="F2.htm">
</FRAMESET>
<HTML>

Рассмотрим более сложный ПРИМЕР 2: В головном файле домашней страницы запишите:
<HTML>
<HEAD>
<TITLE>Frames Example 2</TITLE>
</HEAD>
<FRAMESET COLS= 30%,*>
<FRAMESET ROWS=50%,*>
<FRAME SRC="F1.htm">
<FRAME SRC="F2.htm">
</FRAMESET>
<FRAMESET ROWS=33%,33%,*>
<FRAME SRC="F3.htm">
<FRAME SRC="F4.htm">
<FRAME SRC="F5.htm">
</FRAMESET>
</FRAMESET>
</HTML>

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

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

Изменим ПРИМЕР 1 так, чтобы правый кадр получил имя "VIEW_WINDOW". <HTML>
<HEAD>
<TITLE>Frames Example 1</TITLE>
</HEAD>
<FRAMESET COLS=30%,*>
<FRAME SRC="F1.htm">
<FRAME SRC="F2.htm" NAME="VIEW_WINDOW">
</FRAMESET>
<HTML>
HTML - файл F1.HTML для левого кадра построим следующим образом:
<UL>
<LI>A HREF="Text1.htm" TARGET="VIEW_WINDOW">ТЕКСТ1</A>
<LI>A HREF="Text2.htm" TARGET="VIEW_WINDOW">ТЕКСТ2</A>
<LI>A HREF="Text3.htm" TARGET="VIEW_WINDOW">ТЕКСТ3</A>
</UL>
Теперь, если в левом кадре выбрать любую ссылку по гипертексту, то соответствующий файл TEXTx.HTML отобразится в правом кадре. Этот очень распространенный прием можно видеть во многих домашних страницах. Его преимущество в том, что на экране можно одновременно видеть и вызывающий, и вызываемый HTML - файлы и для просмотра следующего файла гипертекста достаточно нажать на соответвующую кнопку вызывающего файла.
Файл F1.HTML можно построить и следующим образом:
<BASE TARGET=" VIEW_WINDOW">
...
<UL>
<LI>A HREF="Text1.htm">ТЕКСТ1</A>
<LI>A HREF="Text2.htm">ТЕКСТ2</A>
<LI>A HREF="Text3.htm">ТЕКСТ3</A>
</UL>

Атрибут TARGET команды BASE задает кадр, выделяемый по умолчанию для отображения гипертекста. Атрибут NORESIZE применяется для того, чтобы пользователь не смог изменить размеры данного кадра на экране. Линейки прокрутки задаются с помощью атрибута SCROLLING. Здесь действуют следующие правила:
- Если атрибут SCROLLING не задан, то линейки прокрутки создаются автоматически тогда и только тогда, когда размер отображаемого текста превышает размер кадра (это относится как к размеру по вертикали, так и по горизонтали.
- Если задано SCROLLING="YES", то линейки прокрутки создаются всегда.
- Если задано SCROLLING="NO", то линейки прокрутки не создаются.
- Если задано SCROLLING="AUTO", то система работает так же, как если атрибут SCROLLING не задан.
Толщина граничной линии между кадрами может задаваться в пикселях с помощью атрибутов MARGINHEIGHT и MARGINWIDTH, если разработчика не устраивают значения, заданные по умолчанию.
Специальные значения атрибута TARGET.
В современных браузерах зарезервировано 4 специальных значения атрибута TARGET:
- _blank - браузер всегда задает это значение для нового, неименованного окна.
- _self - задается по умолчанию для всех кадров, в операторе FRAME которых нет атрибута TARGET. Все вызываемые по гиперссылке документы загружаются и отображаются в том же кадре, что и вызывающий их документ. Значение _self в явном виде не применяется до тех пор, пока мы не вводим команду BASE с атрибутом TARGET - тогда, возможно, понадобится отменить это общее назначение для какого-либо конкретного кадра.
- _parent - вызываемый по гиперссылке файл загружается в кадр или окно, которое является родительским по отношению к вызывающему. Другими словами, вызываемый файл будет расположен в том же окне, что и его "дедушка".
- _top - вызываемый по гиперссылке файл загружается в окно, содержащее ссылку, и перекрывает все кадры данного окна.

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

Пример 4:
<HTML>
<HEAD>
<TITLE>EXAMPLE 4</TITLE>
</HEAD>
<FRAMESET COLS="125,*">
<FRAME SRC="F-left.htm">
<FRAME SRC="F-right.htm">
</FRAMESET>
<NOFRAME>
<BODY>
ВНИМАНИЕ! Для просмотраданного документа требуется браузер, обрабатывающий кадры, например, Netscape 2.0 и выше. Ваш браузер этим свойством не обладает. Для просмотра левого файла нажмите ЛЕВЫЙ ФАЙЛ. Для просмотра правого файла нажмите ПРАВЫЙ ФАЙЛ. </BODY>
</NOFRAME>
</HTML>

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

Создание мигающего текста.
Замечание: Работает в Netscape 3.0, не работает в Internet Explorer 3.0.
Вы можете сделать изображение текста мигающим с помощью следующих команд: <BLIK></BLIK>. Например:
<BLIK>Мигающий текст</BLIK>
Отображается следующим образом: Мигающий текст

Создание бегущей строки.
Замечание: Работает в Internet Explorer 3.0, не работает в Netscape 3.0.
Если браузер не обрабатывает бегущую строку, то Вы увидите на зкране текст без движения.
Бегущая строка создается с помощью команд: <MARQUEE></MARQUEE>. Ниже приводятся примеры команд:
Команда: <MARQUEE> Этот текст будет двигаться справа налево медленно.</MARQUEE>
Этот текст будет двигаться справа налево медленно.

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

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

Команда: <MARQUEE> SCROLLDELAY="0" SCROLLAMOUNT="50">Этот текст будет двигаться очень быстро.</MARQUEE> Этот текст будет двигаться очень быстро. Карта образов.
Замечание: Работает в Internet Explorer 3.0, работает в Netscape 3.0.
Карта образов позволяет создать несколько ссылок к различным адресам, используя только одно изображение. Пусть у Вас есть картинка picture.gif размером 100x100 пикселей. Предположим, что картинка состоит из 4 частей, где изображены Ваши друзья:
- В левом верхнем углу - Вася (у него есть домашняя страница vasya.htm)
- В правом верхнем углу - Илья (Его домашняя страница ilya.htm)
- В левом нижнем углу - Дима (Его домашняя страница dima.htm)
- В правом нижнем углу - Игорь (Его домашняя страница igor.htm)
Если Вы хотите, чтобы при нажатии левой кноки мыши на изображение каждого из Ваших друзей Вы попадали на его домашнюю страницу, запишите следующие команды:
<MAP NAME="MAP">
<AREA SHAPE="RECT" COORDS="0,0,49,49" HREF="Vasya.htm">
<AREA SHAPE="RECT" COORDS="0,50,49,99" HREF="Petya.htm">
<AREA SHAPE="RECT" COORDS="50,0,99,49" HREF="Dima.htm">
<AREA SHAPE="RECT" COORDS="50,50,99,99" HREF="Igor.htm">
</MAP>
<IMG SRC="Picture.gif" USEMAP="#MAP">

Плавающие окна.
Замечание: Работает в Explorer 3.0, не работает в Netscape 3.0.
Ниже Вы видите пример плавающего окна, в котором отображен первый HTML файл данной страницы:
Если ваш браузер воспринимает плавающие окна, то вы видите такое окно, иначе - только сопровождающий текст: Это плавающее окно. Это окно создано с помощью следующей команды:
<IFRAME NAME="content_frame" width="400" height="600" SRC="Default.htm">Это плавающее окно</IFRAME>

Формы.

Форма - это средство, позволяющее организовать на странице диалог с ее пользователем. Разработчик страницы создает своеобразную анкету с помощью специальных элементов:
- кнопки,
- списки,
- текстовые строки,
- текстовые поля.
При зтом разработчик указывает свою программу обработки результатов анкеты. При чтении домашней страницы пользователь заполняет анкету, и, нажав на кнопку "SUBMIT" данной анкеты, отправляет ее содержимое программе обработки, которая называется CGI-скриптом и разрабатываются на различных языках программирования. А что, если Вы хотите организовать анкету, но писать программы Вы не умеете? Тогда можно отправить поток сообщений на Ваш почтовый адрес.
Формы передают информацию программе обработки в виде пар: Имя поля - Значение поля.

Форма начинается командой <FORM> и заканчивается командой </FORM>. Данная команда имеет 2 основных атрибута: ACTION и METHOD. Атрибут ACTION является обязательным, он указывает адрес обработчика формы (например, адрес программы обработки или почтовый адрес или просто адрес URL для перехода). Атрибут METHOD не является обязательным, он принимает одно из двух значений: GET или POST, связанных с методом протокола передачи информации из анкеты. По умолчанию, METHOD=GET.
Внимание !!! Чтобы Вы могли получать послания на русском языке необходимо также вставить атрибут ENCTYPE=text/plain !!!

Пример команды FORM:
<FORM ACTION="mailto:heruch@mail.ru" METHOD=POST ENCTYPE=text/plain>
Для задания управляющей кнопки запуска передачи данных надо записать следующую команду:
<INPUT TYPE=SUBMIT NAME="botton1" VALUE="Произвольный текст">, где:
INPUT - команда создания управляющего элемента,
TYPE - атрибут, определяющий управляющий элемент,
SUBMIT - значение этого атрибута (в данном случае: управляющая кнопка),
NAME - атрибут, задающий имя переменной,
botton1 - имя переменной,
VALUE - атрибут, задающий текст, отображаемый на управляющем элементе,
Произвольный текст - значение текста на управляющем элементе.
Данная кнопка имеет следующий вид:

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

В данном случае нет необходимости применять атрибут NAME так как данные никуда не передаются.

Ниже приводятся основные типы управляющих злементов INPUT.
I. Текстовая строка: TYPE=TEXT.
Определяет окно для ввода одной строки текста. Пример:
<INPUT TYPE=TEXT NAME="text1" SIZE=30 VALUE="Введите текст">

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

II. Окно для ввода пароля: TYPE=PASSWORD.

Аналогичен типу TEXT, но при вводе каждый символ заменяется на *. Пример: Надо ввести пароль длиной не более 5 символов.
<INPUT TYPE=PASSWORD NAME="pass" SIZE=10 MAXLENGHT=5>

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

IV. Радиокнопка: 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=Синяя.

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

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

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

VII. Меню: SELECT.
Пусть Вам предоставилась возможность выбрать одну из путевок в соответствии со следующим списком:
<SELECT NAME="TOUR">
<OPTION VALUE="tour1">Путевка в Сочи <OPTION VALUE="tour2">Путевка в Париж <OPTION VALUE="tour3">Путевка на Колыму </SELECT>

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

IIIX. Кнопка ввода: TYPE=SUBMIT.
Это и есть та самая кнопка, о которой мы так часто вспоминали.
<INPUT TYPE=SUBMIT VALUE="Ввод данных">

IIX. Кнопка Сброса значений: TYPE=RESET
Кнопка выполняет инициализацию начальными значениями всех полей:
<INPUT TYPE=RESET VALUE="Очистить поля">

Мета теги.

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

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

Я приведу примеры - команды META:
<META NAME="destriction" CONTENT="Это руководство-инструкция на русском языке по созданию страницы на языке HTML">
Здесь, я думаю, все понятно.

<META NAME="keyword" CONTENT="Internet, HTML, WWW, webpage, HyperText, Language, Russian, Интернет, гипертекст, страница, русский">
Я не претендую, на то, что выбрал ключи наилучшим образом. Хочу лишь обратить внимание на важность точной подборки ключей, чтобы, с одной стороны, Вас нашли все, кому Ваша страница предназначена, с другой стороны - чтобы поменьше чертыхались пользователи, попавшие на Вашу страницу случайно.

Из других применений команд 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.

Правильно прописываем meta тэги.

В этой статье мы поговорим о том, как правильно прописать meta тэги и зачем это всё нужно.

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

Все meta тэги распологаются внутри тэга <head></head>

Ниже представле список основных meta тэгов:

<META name="keywords" content="Здесь нужно вписать ключевые слова и фразы, соответствующие вашему сайту">

<META name="robots" content="index или noindex, follow или nofollow>

В этом meta тэге Вы можете указать поисковому роботу индексировать ли Ваш сайт в поисковой системе или нет. А также следовать по ссылкам Вашего сайта для дальнейшей индексации.

Итак Вы хотите, чтобы Ваша страница была проиндексированна нужно указать index, если нет, то noindex. Если хотите, чтобы поисковик следовал по ссылкам на Вашей странице, для дальнейшей индесации, укажите follow, если нет, то укажите nofollow.

<META name="description" content="Описание Вашей странички">

Поисковые системы кроме заголовка показывают первые 100 - 200 символов текста Вашей страницы в качестве описания. Используя тег "description", Вы можете указывать любое другое описание Вашей страницы.

Всё о тэге Title.

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

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

Что такое тэг Title?

Тэг Title – это, прежде всего, элемент HTML-кода, который отвечает за те слова, которые появятся в заголовке Вашего веб-браузера, когда вы просматриваете страницу, например, “Домашняя страница компании ABC”. Эти слова были введены в тэг Title в HTML-коде сайта, и они не появляются нигде в содержании страницы, а только в ее заголовке. HTML-код для данного тэга выглядит следующим образом (здесь и далее в статье вместо треугольных скобок используются квадратные):

[HEAD]
[TITLE]Домашняя страница компании ABC[/TITLE]
[/HEAD]

Тэг Title обычно является первым элементом в данной части кода, за которым, как правило, следуют мета-тэги описания и ключевых слов. (Вы можете узнать больше о мета-тэгах в словаре workz.com). Некоторые программы автоматизированного создания сайтов генерируют тэг Title без участия пользователя, исходя из той информации, которую вы им предоставляете. Возможно, вы обращали внимание, иногда встречаются сайты, страницы которых носят названия “Home Page” (“Домашняя страница”), “Page 1” (“Страница 1”), “Page 2” и так далее. Такие названия часто используются начинающими вебмастерами, которые просто не знают как правильно использовать тэг Title, чтобы достичь лучших результатов в позиционировании.

Поисковые системы и тэг Title

Все поисковые системы используют тэги Title для того, чтобы собрать информацию о вашем сайте. Слово или слова, указанные в тэге Title, появятся в виде ссылок на странице результатов поиска, а пользователи переходят из поисковых систем на сайты именно по ссылкам. Без сомнения, по значению для определения позиции сайта в результатах поиска, тэги Title можно поставить на второе место, сразу после собственно содержания вашей страницы. Раз уж мы затронули вопрос расположения рассматриваемого нами тэга в HTML-коде веб-страницы, то следует заметить, что большинство экспертов по поисковым системам считают, что порядковое расположение тэга Title в секции [HEAD] не имеет существенного значения. Тем не менее, согласно сложившейся практике, он располагается именно первым.

Чего НЕ должно быть в тэге Title

Гораздо более важными, чем место расположения тэга, являются слова, которые будут в этом тэге расположены и, в том числе, порядок их следования. Большинство владельцев веб-сайтов ошибочно полагают, что в данный тэг следует помещать название их компании. Это сработает только в том случае, если вы – известная компания, которую люди будут искать именно по названию, например, Кока-Кола или McDonalds. В ином случае, вам следует исходить из того, что пользователи будут осуществлять поиск по названию конкретного продукта или услуги, а не по названию вашей организации. Например, если ваша компания называется “Johnson and Smith Inc.” (очень распространенные в США фамилии – прим. перев.), и вы занимаетесь консультациями по налогообложению в Техасе, то вынесение только “Johnson and Smith Inc.” в заголовок сайта, скорее всего, будет бесполезным. Если вы, тем не менее, настаиваете на его включении в заголовок страницы, то лучше поместить его в конце тэга Title, после более важных ключевых слов. (Многие эксперты считают, что некоторые поисковые системы придают большее значение словам, которые указаны первыми в тэге Title).

Тэг Title должен включать специфичные для вашей компании или отрасли ключевые слова и фразы

Будучи налоговым консультантом в Техасе, вы наверняка хотите, чтобы ваш сайт появлялся в результатах поиска по таким ключевым словам и фразам как “Налоговые консультанты в Техасе” и “Консультации по налогообложению в Техасе”. Вам требуется быть еще более специфичными, если вы предпочитаете работать только с клиентами из Далласа (один из крупнейших городов штата – прим. пер.). В этом случае используйте в тэге Title такие ключевые слова как “Налоговые консультанты Далласа”. Итак, если вы заинтересованы только в клиентах или посетителях из определенной географической области, ваши ключевые слова в заголовке сайта должны отражать эту региональную специфику. Когда люди будут искать себе налогового консультанта, они, возможно, начнут поиск по ключевой фразе “налоговый консультант”, однако, когда они увидят, что в результатах выведены сайты со всего мира, они сузят область поиска, добавив к ключевым словам название города или региона, где они проживают. Важно, чтобы именно в этом поиске ваш сайт оказался на первой странице результатов.

Как правильно использовать тэг Title

В нашем примере с налоговым консультантом из Далласа, вы можете создать тэг, который будет выглядеть следующим образом

[TITLE]Налоговые консультанты Далласа [/TITLE]

или же:

[TITLE]Консультации по налогообложению в Далласе [/TITLE].

Однако, в тэге Title более чем достаточно места, чтобы включить обе эти важные ключевые фразы. (Фактически поисковые системы выводят от 60 до 115 символов тэга Title в результатах поиска). Вот пример более правильного подхода:

[TITLE]ДАЛЛАС налоговые консультанты Даллас консультации по налогообложению [/TITLE]

Как вы можете видеть, я использовала слово “Даллас” дважды, в том числе один раз ПРОПИСНЫМИ буквами. Большинство поисковых систем не учитывают регистр при осуществлении поиска, однако, некоторые из них, например, AltaVista и Hotbot, придают ему значение. Это означает, что ваш сайт может оказаться на высокой позиции при поиске с использованием данных поисковых систем, если запрос был введен прописными буквами. (Исследования показывают, что, как правило, при введении запросов используются строчные буквы, но, тем не менее, достаточно часто встречаются и запросы, полностью набранные заглавными буквами). Что касается двукратного использования слова Dallas, то, на мой взгляд, такой подход является вполне допустимым и весьма эффективным. Но проверьте, чтобы два одинаковых слова не стояли рядом. Например, тэг, содержащий текст “Налоговые консультанты Далласа Даллас консультации по налогообложению”, скорее всего, будет "забракован" некоторыми поисковыми системами, в результате чего слово “Даллас” будет полностью проигнорировано. В тэге также лучше не использовать одно слово более двух раз и не допускать повторов более чем двух слов. Однако, если вы придерживаетесь этих ограничений, я всячески рекомендую использование повторов одного-двух слов в ваших тэгах Title. Более того, я считаю, что это просто необходимо.

Используйте только слова и фразы, которые есть в тексте страницы

Если вы не уверены в том, какие слова использовать в заголовке, посмотрите на текст, на основное содержание вашей страницы. Если ваши тексты и документы подготовлены качественно, то вы найдете все необходимые ключевые слова прямо на вашей странице – просто выберите самые подходящие для ее заголовка. В случае же если вы не можете найти ничего действительно соответствующего вашим целям, то самое время поработать над содержанием сайта. Самый оптимальный подход при создании сайта – это, в первую очередь, хорошо продумать набор ключевых слов, которые лучше всего отражают специфику вашего бизнеса, а затем уже сочинить на основе данных слов конкретные тексты, которые и составят содержание сайта. Когда вам необходимо подобрать ключевые слова для заголовка страницы (тэга Title), то вы просто просматриваете ваши тексты, сопоставляете их с исходным списком ключевых слов и выбираете те из них, которые есть на данной конкретной странице. Но помните: если слова не содержатся где-либо в содержании (тексте) страницы, то они не должны включаться в ее тэг Title. Используя наш пример фирмы, занимающейся консультациями по налогообложению, представьте себе, что проанализировал содержание страницы, вы обнаружили, что слова “Налоговые консультанты в Техасе” нигде в тексте не встречаются. Означает ли это, что вы не должны использовать их в тэге Title? И да, и нет. Если вы не хотите изменять содержание страницы, то ответ – нет, вы не должны помещать эти слова в заголовок. Однако, в этом случае можете забыть и о высоком рейтинге при поиске по данным ключевым словам! Правильнее постараться переработать текст на вашей странице так, чтобы в нем содержались столь важные и специфичные для вашего бизнеса ключевые слова. Это не означает, что вы можете просто напросто добавить эти слова в верхнюю или нижнюю часть каждой странички. Это не значит, что вы можете сделать их одного цвета с фоном, чтобы не изменять основной текст. Не надо и выводить их шрифтом самого маленького размера, чтобы никто их не заметил. Не стоит и попросту добавлять их в мета-тэги. Если эти ключевые слова действительно настолько важны, что вы хотите, чтобы поиск по ним приводил именно на ваш сайт, то вам надо постараться, чтобы они были красиво и изящно включены в общее содержание вашего сайта.

Как только вы интегрировали важнейшие ключевые фразы в основной текст вашего сайта, единственное, что вам остается сделать – это использовать те же самые фразы в тэге Title. А это совсем несложно.