Книга предназначена для разработчиков Web - страниц, знакомых с основами языка HTML и желающих с помощью доступных современных средств сделать свои страницы более красивыми и удобными для чтения. После беглого обзора основных тегов и атрибутов HTML авторпереходит к описанию средств, позволяющих улучшить дизайн страницы (таблицы, кадры и т.д.). Обсуждаются использование мультимедиа и встроенной анимации, а также возможности Java и ActiveX.

NeonHTML 3.4 - Описание разработчика: "NeonHTML - Бесплатный редактор HTML и CSS с визуальными инструментами. Отличается функциональностью инструментов. Позволяет редактировать быстро и комфортно: подсветка синтаксиса, визуальное создание тегов в диалогах. Большинство инструментов имеют предпросмотр, изменение параметров сразу влияет на отображение в просмотре. Есть встроенный браузер с имитацией разного разрешения и масштаба. Инструмент поисковой (SEO) оптимизации и проверки рейтинга сайта. Инструмент вариаций текста поможет при раскрутке. Очень хорошая работа с цветами – специально созданная палитра как в графических редакторах, список недавних цветов, список цветов страницы, быстрое редактирование цвета одним кликом, мгновенное создание параметров стиля с выбором цвета. Инструменты взаимодействуют один с другим, этим достигается быстрое привыкание к интерфейсу, удобство и высокая скорость работы. Не заменяет клавиатуру где не нужно. Не содержит хлама менюшек."

Этот учебник собран мной при создании своей домашней страницы из различных источников в сети и на бумаге. Взявшись за создание собственного WEBсайта, я к сожалению не имел под рукой столь простого изложения материала как тот, что сейчас читаете вы. Я даже не имел представления о том, какую литературу мне нужно искать. Тогда я принялся за черновик, в котором для себя записывал в понятной мне форме то, что находил важным на страницах сети. В качестве основы для данного пособия мною был использован углубленный материал Учебника HTML Елены Коротеевой. С тех пор мой черновик претерпел около сотни исправлений и дополнений. В моем произведении вы найдете необходимый минимум для написания WEB-страниц при помощи Internet Explorera (4.0 & >) и блокнота от Windows. Используя две эти программы (для графики вам также нобходим Photoshop), можно делать WEB-сайты любой суперсложности, хотя в этом случае без серьезной книги по HTML 4.0 вам все же не обойтись. Я расскажу только про самые простые и важные команды языка. Текст учебника постоянно изменяется и если вы обнаружите какие-нибудь очепятки, можете сообщять мне. (работу тегов я вроде как проверяю предварительно) Надеюсь, что мои скромные труды помогут Вам сделать первые шаги в освоении огромного сетевого пространства.

Полный справочник HTML-тегов.
Для удобства справочник выполнен в виде файла справки (.CHM)

Итак, что нам понадобится. В первую очередь - Delphi 5-7 (у меня стоит 7-я версия, и весь код тестировался именно в этой версии). Это вызвано тем, что компонент TWebBrowser впервые "прописался" на вкладке Internet именно в 5-й версии (в 4-й его надо было устанавливать как компонент ActiveX).

Сначала нам надо перевести WebBrowser в режим редактирования. Для этого у каждого документа (согласно объектной модели это document) существует свойство DesignMode. Если установить его в 'On', то наша компонента автоматически переключается в режим редактирования, а если установить его в 'Off', то компонент вернется в режим просмотра.

Проверим это! Создадим новую форму, разместим на ней компоненту TWebBrowser и несколько компонент TSpeedButton. Затем напишем такой код:

Код:

Код

unit main;

interface
...

var
Form1: TForm1;
Disp: IDispatch;
Editor: IHTMLDocument2;

implementation

{$R *.dfm}

procedure TForm1.WebBrowser1DocumentComplete(Sender: TObject;
const pDisp: IDispatch; var URL: OleVariant);
var
CurrentWB: IWebBrowser;
Editor: IHTMLDocument2;
begin
Disp := pDisp;
end;

procedure TForm1.SpeedButton1Click(Sender: TObject);
var
CurrentWB: IWebBrowser;
begin
CurrentWB := Disp as IWebBrowser;
editor := (CurrentWB.Document as IHTMLDocument2);
editor.DesignMode := 'On';
end;

procedure TForm1.FormCreate(Sender: TObject);
begin
WebBrowser1.Navigate('About');
end;

Теперь по порядку о том, что мы написали. В событии OnCreate формы мы загружаем в браузер простую страницу (напомню, что протокол About позволяет загружать в браузер HTML строку). Это необходимо для того, чтобы в последующем мы могли обращаться к документу. Сразу после этого будет вызван обработчик события OnDocumentComplete. Но пока еще ничего не произошло. Внимательный читатель мог обратить внимание, что для перевода браузера в режим редактирования надо нажать кнопку 1. Editor - это экземпляр нашего документа (document). Его свойство DesignMode устанавливается в 'On'. Теперь наш редактор практически готов. Он уже умеет править текст, копировать/вырезать/вставлять текст и картинки, делать текст жирным/подчеркнутым/наклонным. Для этого есть соответствующие комбинации клавиш.

Ctrl + C Копировать
Ctrl + X Вырезать
Ctrl + V Вставить


Ctrl + B Жирный текст
Ctrl + I Наклонный текст
Ctrl + U Подчеркнутый текст


Ctrl + Z Отменить
Ctrl + Y Повторить
Ctrl + K Гиперссылка


Ctrl + F Найти
Ctrl + A Выделить всё
Ctrl + Left-Click Выделить блок

"Это, конечно, хорошо, что есть горячие клавиши, но мне не хотелось бы все их запоминать" - можете сказать вы. Хорошо. Тогда давайте разберем, как из Delphi заставить WebBrowser выполнять все эти действия. Для этого есть метод Command интерфейса IHTMLTxtRange (он описан в модуле MSHTML_TLB). Рассмотрим простой пример.

Код:

Код

procedure TForm1.SpeedButton2Click(Sender: TObject);
var
Range: IHTMLTxtRange;
begin
Range := (editor.selection.createRange as IHTMLTxtRange);
Range.Command('bold', false, emptyparam)
end;

Сначала в этой процедуре создается объект Range. После этого вызывается метод Command:

Код:

Код

function Command(cmdID: WideString; ShowUI: WordBool;
Value: OleVariant): wordbool;

cmdID – это строка идентификатор команды (в нашем примере 'bold' заставляет редактор переключаться между жирным и обычным начертанием текста); полный список команд смотри в приложении.

ShowUI – Show User Interface - показывать интерфейс пользователя (если таковой имеется, как правило это различные диалоговые окна). Если параметр равен False, то команда выполняется без предупреждения.

value – содержит дополнительную информацию в зависимости от команды.

Несколько слов об объекте Range. Помимо уже знакомого нам Command этот объект обладает еще рядом свойств и методов, некоторые из которых сейчас рассмотрим.

Text - Содержит текст выделения (без тегов HTML)

HTMLText - Полный текст выделения

Код:

Код

moveStart(const unit_: widestring; count: integer)

procedure - Перемещает начальную позицию выделения на count символов вправо (если count<0, то влево), unit_-единицы измерения смещения (чаще всего используется 'character': 1 символ). При этом конечная позиция не смещается.

Код:

Код

moveStart(const unit_: widestring; count: integer)

То же самое, только для конечной позиции выделения.

Код:

Код

PasteHTML(const html: widestring);

Вставляет HTML-строку

Код:

Код

CommandShowHelp(cmdID: widestring);

Отображает помощь по команде, указанной в cmdID

Пожалуй, на сегодня всё. Об остальных объектах (картинки, таблицы, элементы управления) поговорим в другой раз. Будут вопросы - пишите: [email=samum2000@mail15.com?subject=Question about visualhtml part1]samum2000@mail15.com[/email].

Приложение. Доступные команды:

BackColor - Устанавливает или получает цвет фона текущего выделения. Value должно содержать имя цвета или его шеснадцитиричный RGB эквивалент (например, #FFCC00).
Bold - Переключает начертание текста текущего выделения между полужирным и нормальным.
Copy - Копирует выделение в буфер обмена
CreateBookmark - Получает имя якоря или создает его для текущего выделения. Value - строка, содержащая имя якоря.
CreateLink - Получает URL ссылки или создает новую ссылку. Параметр Value должен содержать URL.
Cut - Вырезает текущее выделение в буфер обмена.
Delete - Очищает текущее выделение (удаляет всё его содержимое).
Find - Находит текст, заданный в параметре Value в текущем выделении.
FontName - Устанавливает шрифт для текущего выделения. Value содержит описание этого шрифта (как в теге FONT).
FontSize - Устанавливает размер шрифта. Value - число от 1 до 7 включительно.
ForeColor - Устанавливает цвет текста. Value должно содержать имя цвета или его шеснадцитиричный RGB эквивалент (например, #FFCC00)
FormatBlock - Устанавливает или получает форматирование текущего блока. Value может содержать теги-описатели.
Indent - Увеличивает отступ выделенного текста на одну единицу приращения
InsertButton - Перезаписывает идентификатор кнопки вместо текущего выделения. Value - строка, содержащая идентификатор кнопки.
InsertFieldset - То же для поля ввода.
InsertHorizontalRule - То же для горизонтальной полосы.
InsertIFrame - То же для встроеных фреймов (IFRAME).
InsertImage - То же для изображений.
InsertInputButton - То же для кнопки.
InsertInputCheckbox - То же для чекбоксов (checkBox).
InsertInputFileUpload - То же для элемента выбора файла.
InsertInputHidden - То же для скрытого поля (hidden)
InsertInputImage - То же для изображения.
InsertInputPassword - То же для поля ввода пароля.
InsertInputRadio - То же для радио-кнопок (Radio)
InsertInputReset - То же для кнопки reset.
InsertInputSubmit - То же для кнопки Submit.
InsertInputText - То же для поля ввода текста.
InsertParagraph - Вставляет новый раздел (абзац).
InsertOrderedList - Переключает стиль текущего выделения между списком и простым текстом.
InsertUnorderedList - То же самое.
InsertSelectDropdown - Записывает элемент Drop-down вместо текущего выделения. Value должно содержать идентификатор элемента.
InsertTextArea - То же для элемента TextArea.
Italic - Переключает начертание текста текущего выделения между наклонным и обычным.
JustifyCenter - Устанавливает выравнивание по центру для всего блока, в котором расположено текущее выделение.
JustifyLeft - Устанавливает выравнивание по левому краю для всего блока, в котором расположено текущее выделение.
JustifyRight - Устанавливает выравнивание по правому краю для всего блока, в котором расположено текущее выделение.
Outdent - Уменьшает отступ для всего блока, в котором расположено выделение, на одну единицу.
OverWrite - Переключается между режимами вставки текста и замены текста при вводе. Value: true - замена, false - вставка.
Paste - Вставляет текст из буфера обмена вместо текущего выделения.
Refresh - Обновляет текущий документ.
RemoveFormat - Удаляет из текущего фрагмента все теги форматирования
SelectAll - Выделяет все содержимое документа.
UnBookmark - Удаляет все закладки из текущего выделения.
Underline - Переключает начертание текста текущего выделения между подчеркнутым и обычным.
Unlink - Удаляет все гиперссылки из текущего выделенного фрагмента.
Unselect - Снимает выделение.

Событие - это какое-либо действие, осуществляемое пользователем либо браузером. Например, когда мы щелкаем (кликаем) на ссылке - осуществляется событие, его перехватывает специальный обработчик и перенаправляет нас на нужную страницу; при наведении курсора (указателя мыши) на ссылку в строке состояния (обычно находится в нижней части окна браузера) отображается адрес, так как обработчик "наведения курсора на объект (в данном случае на ссылку)" помещает туда этот адрес и так далее...

а). onmouseout и onmouseover

Для начала наведем курсор на кнопку "Сброс" или "Отправить" и обратим внимание на строку состояния. Вы должны увидеть там надпись с объяснением значения кнопки. Теперь отведите курсор и строка состояния очистится.

Содержимое строки состояния хранится в переменной window.status. Переменная это некоторый объект (можно представить себе ящик), значение которого (содержимое которого) можно изменять. Изменение значения осуществляется операцией присваивания (=), а выглядит она следующим образом:

имя_переменной = "значение"; (какие использовать кавычки: одинарные или двойные значения не имеет)

Поэтому для того, чтобы изменить надпись в строке состояния, нам нужно присвоить переменной window.status нужное нам значение (подсказку к кнопке), а когда курсор будет убран - присвоить пустую строку("").

Вся задача сводится к тому, чтобы определить когда пользователь наводит курсор на кнопку, а когда убирает его. Для этого нужно "сказать" обработчикам этих событий выполнить нужное нам действие. Обработчик события "наведение курсора" - onmouseover, а "отведение курсора" - onmouseout.

Очень многие тэги имеют атрибуты, начинающиеся с on (onclick, onmouseout, onfocus и т. д.). Значение этих атрибутов и есть, задача которую необходимо выполнить соответствующему обработчику. То есть для обработчика onmouseout есть атрибут onmouseout, для onmouseover - onmouseover. И в итоге мы получаем следующее определение кнопок:

Код

<input type="submit value="Готово" onmouseover="window.status='Щелкните для отправки данных'" onmouseout="window.status=''" />
<input type="reset" value="Сброс" onmouseover="window.status='Щелкните для удаления введенного'" onmouseout="window.status=''" />

Как Вы видите, атрибут onmouseover имеет в качестве значения JavaScript-код: window.status='Щелкните для отправки данных', как только курсор достигает кнопки, обработчик события mouseover - onmouseover, смотрит, что хранится в атрибуте onmouseover и выполняет необходимое действие(присвоение значения переменной window.status). Аналогично действует и обработчик события onmouseout: как только курсор уводиться от кнопки (то есть выполняется событие mouseout), то обработчик события - onmouseout выполняет код, содержащийся в атрибуте onmouseout.

То же самое и со второй кнопкой.


б). <a href="Java Scriptfunction()">Function</a>

Теперь щелкните на ссылке и откроется окошко с подсказкой. Но заметьте, что окно небольших размеров и у него нет панели инструментов - такого силами html не сделаешь! В данном примере мы имеем окно размером 300x200, без панелей инструментов, содержащее документ help.html.

Для того чтобы создать такое окошко существует следующий JavaScript-код:

Код

helpWindow = window.open("help.html", "", "toolbar=0,width=300,height=200");

где:

1. helpWindow - это имя переменной (как window.status, только в данном случае имя выбирается произвольно). Эта переменная нужна для последующей работы с окном (например, закрыть его нестандартным способом - с помощью JavaScript-сценария).

- Зачем? Не проще ли указывать просто имя открывающейся страницы, например help.html?
- А если у нас две копии одной и той же страницы? Или две страницы с одинаковым именем(например, в разных папках)? Вот для того, чтобы не перепутать страницы и свободно работать именно с тем окном с которым предполагаешь и сделанно, так чтобы "окно" присваивалось переменной, так как имя переменной можно выбрать любое.

2. window.open(что-то) - это функция. Функции выполняют определенную задачу, в данном случае window.open() открывает новое окно.

3. help.html - это страница, которую нужно открыть.

4. "" - В кавычках должно быть имя окна, но оно нам не пригодится, поэтому там нулевая строка. В следующих кавычках указываются "параметры открываемого окна": оно не должно содержать панели инструментов (toolbar=0) и должно быть шириной 300 пикселей, а высотой - 200 (width=300,height=200, соответственно).

Теперь все, что нужно это по событию "щелчка" выполнить этот код, однако есть два "но". Во-первых строка очень длинная, чтобы присвоить ее какому-либо атрибуту - будет некрасиво смотреться, да и вызывать неудобства при чтении кода страницы. Во-вторых, первоначальное предназначение ссылки - это переход на другую страницу, но нам переходить никуда не нужно, нам нужно выполнить вместо этого JavaScript-код.

Первое решается написанием функции. Как я уже говорил функция выполняет некоторую задача, причем для использования функции достаточно указать ее имя. Можно не только использовать предопределенные(функции, которые имеется в языке и без нас), но и писать их самому. Обычно функции определяются(пишутся) в разделе HEAD документа, в котором используются:

Код

<script type="text/javascript">
function help()
{
helpWindow = window.open("help.html", "", "toolbar=0,width=300,height=200");

}
</script>

"function" значит, что дальше будет написана наша функция; help() - это имя функции (оно будет указываться вместо тела функции (между { и })).

Вторая проблема решается тоже довольно просто. Адрес страницы указывается в атрибуте href, а нам надо выполнить JavaScript код вместо перехода по ссылке:

Код

<a href="Java Scripthelp()">Щелкните на ссылке для получения помощи</a>

"Java Script" означает, что дальше должен идти JavaScript-код, и что он должен выполняться вместо стандартного перехода по ссылке. В данном случае наш JavaScript-код - это созданная нами функция help().


в). onclick

Нам не остается ничего более, как закрыть окно со справкой. Для этого воспользуемся кнопкой "Закрыть". Но нас интересует то, как работает эта кнопка, а имеет она следующий вид:

Код

<input type="button" value="Закрыть" onclick="window.close()">

Дабы закрыть окно мы сделали щелчок(Click) на кнопке "Закрыть", а щелчок это нажатие и отпускание кнопки мыши, причем и то и другое должно быть произведено на одном и том же элементе (например, на кнопке). Кликая, на кнопке мы активируем обработчик события onClick, который выполняет для нас JavaScript-код, прописанный в атрибуте onclick нашей кнопки. Помните мы открывали окно? Мы писали window.open(), а здесь тоже самое только window.close(). window - это текущее окно, а close() - закрыть.

Это одно из наиболее частоупотребляемых событий.


г). onfocus и onblur

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

Как я уже говорил: элемент получает фокус когда на нем происходит нажатие кнопки мыши, или на него осуществляется переход посредством клавиши табуляции (Tab), а теряет, когда фокус получает другой элемент. Наше поле для ввода получит фокус тогда, когда пользователь решиться ввести информацию. При этом было бы удобно, чтобы текст с подсказкой ("Введите Ваше имя") автоматически выделялся и посетитель мог его удалить одним нажатием на del, а не удалять по одному символу, или выделять текст вручную. Удобство пользователя свято. Итак, для этого мы воспользуемся событием focus. Для выделения текста используется метод select(). То есть атрибутом к полю надо прописать: onfocus="this.select();", this обозначает, что выделение должно происходить именно в этом текстовом поле (а можно прописать путь и к другому, но это не целесообразно).

А теперь попробуйте ничего не изменяя (или все удалив) убрать фокус (например, щелкнув в любом месте окна, или нажав Tab). Это событие blur, я прописал в нем выполнение функции: onblur="check();". Сама же функция имеет следующий вид (в разделе head страницы с формой между <script> и </script>):

Код

function check()
{
var val=document.forms[0].name.value;
if(val == '' || val == 'Введите Ваше имя')
{
alert('Вы не ввели Ваше имя!');
}
}

document.forms[0].name.value - это то, что введено в текстовое поле. document - это текущий документ, forms[0] - первая форма на нашей страницы (отсчет с нуля), name = имя поля (задается атрибутом name (<input name="name">)), а value это и есть нужное нам значение (то, что введенно в текстовое поле, к которому м ы и написали путь). Введенное в поле мы присваиваем переменной val (var значит, что дальше идет имя переменной), чтобы в дальнейшем каждый раз не писать весь путь целиком.

Следующее это оператор if(если). Он выглядит следующим образом:

Код

if (условие)
{
Что делать если условие верно.
}

Мы сравниваем содержание переменной val с пустой строкой ('') и с начальной строкой ('Введите Ваше имя'). Обратите внимание, что сравнение не как в математике(с одним =), а сравниваются двума ==. || - или. Функция alert выводит окно с ошибкой (то, что в скобках - это текст ошибки). То есть:

Код

Если (поле == '' или поле == 'Введите Ваше имя')
то
вывести('Текст ошибки');
окончание

И на всякий случай приведу целиком строку с кодом поля input:

Код

<input name="name" type="text" value="Введите Ваше имя" onfocus="this.select();" onblur="check();" />

д). onreset и onsubmit

Допустим, что пользователь заполнил форму неправильно, и он хочет очистить все поля формы одновременно: для этого он воспользуется стандартной кнопкой reset. Но что если пользователь щелкнет на ней по случайности (рука дрогнет, или в суете спутает с кнопкой submit), а форма была огромная, и он долго мучился ее заполнять..., ему будет грустно, и еще он будет долго материться. Поэтому хорошо бы у него дополнительно спросить: действительно ли он хочет очистить форму.

Вообще событие reset обрабатывается до очистки формы. А чтобы отменить очистку вообще, нам просто напросто надо вернуть обработчику события значение false, то есть прописать в соответствующем атрибуте: "return false;", а чтобы продолжить очистку: "return true;". А теперь вспомним функцию, которая выдает вопрос пользователю на подтверждение чего-либо, эта функция: "confirm('Вопрос?');". При нажатии "Ok", эта функция заменяется на true, а при нажатии "Cancel" на false. То есть все что от нас требуется, это прописать в теге <form> атрибут: onreset="return confirm('Вы действительно хотите сбросить форму?');". Тогда при нажатии "Ok" там на самом деле будет "return true;", и форма будет очищена, а если "Cancel", то "return false;" и очистка формы будет отменена.

Подобным образом действует событие submit, которое возникает при попытке отправить форму. Поскольку в нашем случае форму отправлять никуда не надо, то у меня просто написано: onsubmit="return false;". И сколько бы Вы не щелкали ничего не изменится (разве что Вы JavaScript отключите).

Обычно же обработчик onsubmit используется для верификации формы (то есть проверки на заполнение всех необходимых полей, правильность их заполнения, скажем, проверка по определенному шаблону и т. п.), для этого создается функция, которая выполняет все действия. Функция должна содержать операторы "return true" и "return false", которые позволяют, заменить функцию на true или false, соответственно, в зависимости от результатов проверки (если успешно, то true, если нет false). Но верификация данных это обширная тема, которая не может быть рассмотрена здесь. Один из примеров базовой верификации я привел, когда объяснял событие blur - подобную функцию можно использовать и здесь. Тогда <form> будет содержать атрибут: onsubmit="return function();".

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

Код

<form action="page.cgi" onreset="return confirm('Вы действительно хотите сбросить форму?');" onsubmit="return false;">

е). onmousedown и onmouseup

Еще одна пара событий не нашла достойного места на странице, но я ее реализовал в виде кнопки "Button". Причем это не обычная html-кнопка, она реализована в виде двух картинок. Исходная кнопка хранится в файле с именем npressed.jpg, а нажатая - pressed.jpg. Чтобы достичь эффекта нажатия кнопки нам необходимо, чтобы при при щелчке на ней(this) значение атрибута src (путь к картинке) тега <img> менялось на pressed.jpg, а при отпускании обратно на npressed.jpg. Нажатие кнопки обрабатывает onmousedown, а отпускание - onmouseup, то есть здесь все просто:

Код

<img src="npressed.jpg" onmousedown="this.src='pressed.jpg'" onmouseup="this.src='npressed.jpg'" />

ж). onload, onunload и onabort

Обработчик события onload активируется, когда начинает загружаться графическая часть страницы (все тексты, графика и т.п.). onload является атрибутом тега <body>. Если честно я не вижу сколько бы реального применения этому событию, зато я нашел, что можно сделать с onunload. onunload это тоже атрибут тега <body>. Событие unload происходит когда мы пытаемся покинуть данную страницу (переходим по ссылке на другую, закрываем окно браузера, обновляем страницу и т. д.). Откройте еще раз окошко справки. Допустим, что пользователь прочитал справку, и хочет отправить форму, или уйдет с нашего сайта, но при этом он забыл закрыть это маленькое окошко с подсказкой, мы на выходе закроем его сами. А для этого тег <body> (у начального документа) у нас будет выглядеть следующим образом:

Код

<body onunload="helpWindow.close()">

Вы должны бы помнить, что helpWindow это имя нашего окна (ведь именно этой переменной мы присваивали его открытие: helpWindow = window.open("help.html", "", "toolbar=0,width=300,height=200")), а метод close() закрывает это окно. Некоторые нехорошие люди используют это событие, чтобы когда посетители уходили с его страницы, появлялись какие-либо окна, так называемые pop-up.

onabort - атрибут тега <img>. Когда пользователь отменяет загрузку изображения происходит событие abort. Но отмена загрузки изображения может не входить в наши плане. И в качестве предупреждения у нас может быть написано нечто похожее на

Код

<img src="myimage.jpg" onabort="alert('Изображение до конца не загружено! Это может привести к ошибкам.');" />>

ЗАКЛЮЧЕНИЕ

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

onchange - обработчик события, который активируется, когда Вы изменяете содержимое текстового элемента или текстовой области (<TEXTAREA>) (например, когда Вы вводите или удаляете очередную букву какого-либо текстового поля).

onselect - обработчик события выбора текста. То есть это событие происходит, когда пользователь пытается выделить текст в текстовом элементе или текстовой области.

onerror - обработчик события error, которое возникает при ошибке загрузки документа или изображения (то есть onerror это атрибут тегов <body> и <img>). Оно возникает при синтаксической ошибке JavaScript-кода (но Вы ведь не будете специально делать в нем ошибки), либо ошибкой времени выполнения (например, если Ваш скрипт выполняет какие-либо вычисления и у Вас по ошибке получится так, что некое число будет делиться на ноль, а это недопустимо - это и есть одна из ошибок времени выполнения).

Так же не забывайте, что я привел лишь по одному примеру из десятков возможных на каждое событие. Здесь главное Ваша фантазия и навыки. Например, события mouseout, mouseover, mouseup, mousedown часто используются для создания выпадающих меню и других визуальных эффектов, но это весьма трудный материал, который требует более глубоких знаний, причем не одного JavaScript.

На сегодняшний день музыкальные магазины online, наподобие Musikload[1], становятся все более распространенными и пользуются бешенной популярностью. В этой статье мы расскажем как можно читать мета-информацию mp3-файла средствами PHP, что поможет вам в создании каталога музыки. Это очень просто, поддержка базы данных не нужна.

Откуда знает MP3-Player, например Winamp информацию об исполнителе или названии композиции, которую он проигрывает? Может быть, он сам каким-то чудным образом узнает название песни и альбома? Нет, здесь нет никакого волшебства! Подобная информация содержится в самих файлах. Музыкальные файлы других форматов таких как WMA или Ogg Vorbis также содержат подобную информацию, но здесь речь пойдет о файлах в формате mp3.


Спецификация mp3 определяет способ хранения музыкальных данных, однако не предусматривает никакой возможности для сохранения метаданных композиции, таких как название и исполнитель. Чтобы обойти это ограничение был разработан стандарт ID3. Согласно этой спецификации, метаданные должны быть помещены в так называемые ID3-теги, которые независимо от используемого стандарта ID3, помещаются в конец или начало файла. ID3-теги версии 1 (ID3v1-Tags) представляют собой простейшую конструкцию, которая дописывается в конец файла. Ее объем не должен превышать 128 байт. Структура тега такова: после строкового значения “TAG» следует информация о названии (30 символов), исполнителе (30 символов), альбоме (30 символов), годе записи (четырехзначное число), комментарий (30 символов), жанр (1 байт). Тег с подобной структурой обозначается как ID3v1.0-Tag. В дополнение к этому существует еще стандарт ID3v1.1-Tag, который встречается значительно чаще, поскольку позволяет сохранять информацию о порядковом номере композиции в альбоме. Вследствие этого был урезан до 28 символов размер комментария. Сразу после комментария следует нуль-байт, а последующий байт содержит информации о номере трэка. На иллюстрации один и два видна структура обоих стандартов.

PEAR придет на помощь!

Для считывания информации из ID3v1 тегов, в библиотеку PEAR уже был включен пакет MP3_Id[3], который поможет Вам без проблем извлекать информацию из тега, или наоборот записывать. Если в файл отсутствует ID3-тег, вы можете его создать. Листинг 1 показывает как можно считывать информацию из тегов. Создается объект класса MP3_ID, считывается файл, а затем метод getTag() извлекает данные, которые помещаются для дальнейшей обработки в отдельные поля объект. Листинг 2 показывает результат действия программы листинга 1. Общий обзор доступных полей вы найдете в документации по пакету на домашней странице PEAR.

Листинг 1:

PHP - Код

require_once 'MP3/Id.php';

// Создаем объект, читаем файл
$id3 = &new MP3_Id();
$result = $id3->read('../data/Little-Big-Man.mp3');
if (PEAR::isError($result)) {
die($result->getMessage() . "\n");
}

// Читаем поля и выводим информацию
echo 'Название: ' . $id3->getTag('name') . "\n";
echo 'Исполнитель: ' . $id3->getTag('artists') . "\n";
echo 'Альбом: ' . $id3->getTag('album') . "\n";
echo 'Год: ' . $id3->getTag('year') . "\n";
echo 'Комментарий: ' . $id3->getTag('comment') . "\n";
echo 'Жанр: ' . $id3->getTag('genre') . "\n";
echo 'Жанр (число): ' . $id3->getTag('genreno') . "\n";
echo 'Трэк: ' . $id3->getTag('track') . "\n";

Листинг 2:

Код

Название: Little Big Man
Исполнитель: Dirty Mac
Альбом: Demo-Tape
Год: 2001
Комментарий: Песня из альбома Demo-Tape
Жанр: Rock
Жанр (число): 17
Трэк: 5

Листинг 3 показывает как просто можно изменять содержимое ID3-тегов и создавать их. Сначала, как это было показано в Листинге 1, создаем объект класса MP3_ID, считываем файл, а с помощью метода setTag($fieldname, $value) помещаем в тег нужную информацию. Хотите удалить все теги? Тогда посмотрите на листинг 4, где показано как можно сделать это. Для удаления тегов используется метод remove(), а остальное вы уже знаете. Необходимо дополнить, что MP3_Id обладает другими полезными функциями, которые вам позволят перенести содержимое тега из одного файла в другой или сформировать массив, содержащий все музыкальные направления. Для получения дополнительной информации смотрите документацию.

Listing 3:

PHP - Код

require_once 'MP3/Id.php';

// создаем объект, читаем данные
$id3 = &new MP3_Id();
$result = $id3->read('../data/Little-Big-Man.mp3');
// Ошибка "Tag not found" игнорируется
if (PEAR::isError($result) && $result->getCode() !== PEAR_MP3_ID_TNF) {
die($result->getMessage() . "\n");
}

// Определяем информацию
$id3->setTag('name', 'Neuer Titel');
$id3->setTag('artists', 'Andere Band');
$id3->setTag('album', 'Schlagertraum #3');
$id3->setTag('year', 1984);
$id3->setTag('comment', 'Volksmusikal. Hochgenuss');
$id3->setTag('genre', 'Folk');
$id3->setTag('track', 5);

// Записываем информацию в тег
$result = $id3->write();
if (PEAR::isError($result)) {
die($result->getMessage() . "\n");
}

echo "Тег успешно записан.! \n";

Listing 4:

PHP - Код

require_once 'MP3/Id.php';

// Создаем объект, читаем файл
$id3 = &new MP3_Id();
$err = $id3->read('../data/Little-Big-Man.mp3');
if (PEAR::isError($err)) {
die($err->getMessage() . "\n");
}

// Удаляем тег
$result = $id3->remove();
if (PEAR::isError($result)) {
die($result->getMessage() . "\n");
}

echo "Тег успешно стерт! \n";

Используем PECL

В конце лета 2004 года появилось расширение PHP ext/id3[7]. Разрабатывается в рамках PECL[6]. В отличие от MP3_ID эта библиотека написана не на PHP, а на C, поэтому она должно работать несколько быстрее. Однако библиотека не входит в стандартный комплект PHP-исходников, к тому же на сегодняшний день отсутствует стабильная версия, хотя функции отвечающие за чтение и запись ID3-тегов считаются стабильными.

Если вы хотите использовать именно это расширение, для установки необходимо воспользоваться либо PEAR-installer, либо откомпилировать php, включив поддержку данного расширения. Если вы используете WINDOWS, существует возможность скачать уже откомпилированную DLL для версии php 5.0 или 5.01 с сайта PHP-Snapshot[9], поместить ее в каталог с расширениями php (например c:phpext), подключить через php.ini. Чтобы воспользоваться расширением, вы должны иметь PHP 4.3 или более позднюю версию, поскольку библиотека использует Streams-API.

Само собой разумеется, библиотека позволяет изменять содержимое ID3-тегов. Для этого вам не нужно ничего, кроме массива, представленного в листинге 6, и функции id3_set_tag(). В качестве первого параметра функция принимает имя изменяемого mp-3 файла, а в качестве второго - массив с необходимыми данными. Третий параметр необязателен и представляет собой константу, указывающую версию ID3-тега. В существующей версии библиотеки функция id3_set_tag() может работать только с тегами версии 1.0 или 1.1. Листинг 7 содержит необходимый php-код. В дополнение к этому, листинг 8 показывает как с помощью функции id3_remove_tag можно удалить существующий ID3-тег.

Ext/id3 содержит еще несколько полезных функций, которые позволяют определить версию ID3-тега (id3_get_version) или манипулируют со списком музыкальных направлений и их id, представленных в виде целого числа типа integer. Надо сказать, что данное число мало подходит для указания музыкального направления.

Listing 5:

PHP - Код

// имя файла на локальном диске
$tag1 = id3_get_tag('../data/Little-Big-Man.mp3', ID3_V1_1);
print_r($tag1);

// имя файла в виде URL
// Внимание! Или вы подключаетесь к DSL, или ждете  ;-)
$tag2 = id3_get_tag('http://dirty-mac.com/sounds/little_big_man.mp3', ID3_V1_1);
print_r($tag2);

// идентификатор ресурса вместо имени файла
$fd = fopen('../data/Little-Big-Man.mp3', 'r');
$tag3 = id3_get_tag($fd, ID3_V1_1);
print_r($tag3);

Listing 6:

Код

Array
(
[title] => Little Big Man
[artist] => Dirty Mac
[album] => Demo-Tape
[year] => 2001
[comment] => Song vom Demo-Tape
[track] => 5
[genre] => 17
)

Listing 7:

PHP - Код

$tag = array(
'title' => 'Новое название',
'artist' => 'Другая группа',
'album' => 'Schlagertraum #3',
'year' => 1984,
'genre' => id3_get_genre_id('Rock'),
'comment' => 'Отличная популярная мелодия',
'track' => 5
);

// Записываем тег
$result = id3_set_tag('../data/Little-Big-Man.mp3', $tag, ID3_V1_1 );
if ($result === false) {
echo "Тег не был успешно записан! \n";
}

echo "Тег успешно записан! \n";

Следующее поколение

Несмотря на то, что с помощь ID3v1-тегов уже можно сохранять важнейшую информацию о содержимом mp3-файла, уже проявляются ограничения версий 1.0 и 1.1:

из-за фиксированного размера тега ограничен объем сохраняемой информации

ограничено количество сохраняемых атрибутов

Как мы видим, расширить объем пространства, отведенный под ID3v1 теги нельзя, Существую трудности с сохранением информации о названии композиции, исполнителе, альбоме, комментарии, если размер данных превышает 30 символов. Допустим, вам нужно указать название The Hitchhiker's Guide to the Galaxy, используя стандарт ID3v1, вы можете сохранить лишь The Hitchhiker's Guide to. Та же ситуации наблюдается с указанием музыкального направления. Для этого выделяется только один байт, вследствие этого количество музыкальных направлений не может превышать 256. Наверное, сегодня этого достаточно, но кто знает, сколько в будущем появится еще музыкальных направлений.

Чтобы преодолеть указанные ограничения был введены ID3-теги версии 2[2], или короче ID3v2. ID3v2-теги записываются в начало файла, собственно перед самими аудио данными. Информация организована в отдельные единицы, которые обозначаются как фреймы. ID3v2 - это формат-контейнер, то есть, существует возможность при изменении тега вводить новые фреймы. Из этого следует, что ID3v2 может содержать значительно больше информации, чем ID3v1. Это может быть информация об авторских правах, битрейте, (BMP) или, наконец, полный текст песни или изображения. В дополнение к этому можно по желанию добавлять новые фреймы. Вот важнейшие достоинства данного формата:

Никаких ограничений на объем сохраняемой информации

Гибкость и расширяемость

Возможность сжатия содержимого тегов

Поддержка Unicode

Возможность хранить бинарные данные, например изображения и файлы.

Из-за расширенных возможностей ID3v2-теги, несколько труднее поддаются считыванию, чем ID3v1-теги. Хорошая новость состоит в том, что ext/id3 уже позволяет извлекать важнейшую информацию. Если вы исполните код, помещенный в листинг 9, вы получите тот же результат, что и в листинге 10. Проделав это, вы сможете убедиться, что объем выводимых данных значительно шире, чем тот, что показан в листингах 5 и 6.

Каждый фрейм ID3v2-тега обладает уникальным ID. Ext/id3 содержит две функции, которые позволяют узнать содержимое фрейма. Это id3_get_frame_short() и id3_get_frame_long_name(). В качестве параметра они принимают id фрейма и возвращают его описание.

В будущих версиях ext/id3 будет содержать другие полезные функции, которые позволят считывать или записывать фреймы, соответствующие спецификации ID3.

Листинг 8:

PHP - Код

// удаляет тег
$result = id3_remove_tag('../data/Little-Big-Man.mp3');

if ($result === false) {
echo "Тег не удален.! \n";
}

echo "Тег успешно удален! \n";

Listing 9:

PHP - Код

//Читаем тег ID3v2 
$tag = id3_get_tag('../data/Little-Big-Man.mp3', ID3_V2_3);
print_r($tag);

Дополнительная информация

Прежде чем вы организуете бизнес, связанный с продажей музыкальных композиций online, мы вам расскажем еще о нескольких полезных возможностях библиотеки MP3_Id. С помощью нее можно не только считывать информацию ID3- тегов, она позволяет получить некоторую интересную информацию о самом mp3-файле. Речь идет о битрейте, длительности звучания и других полезных свойствах. Подобные сведения можно получить при помощи метода study(), а дальше посредством метода getTag(), можно выбирать необходимые данные. Листинг 12 показывает как это работает. Результат работы программы показан в листинге 13. К сожалению, эти возможности недостаточно документированы, т.е. трудно разобраться какой атрибут можно считать при помощи getTag() или изменить посредство setTag(). В этом случае необходимо изучить код модуля MP3/Id.php.

Listing 10:

Код

Array
(
[copyright] => Dirty Mac
[originalArtist] => Dirty Mac
[composer] => Marcus Goetze
[artist] => Dirty Mac
[title] => Little Big Man
[album] => Demo-Tape
[track] => 5/12
[genre] => (17)Rock
[year] => 2001
)

Listing 11:

PHP - Код

// Id ID3v2-Frames
$frame = 'TOLY';
$short = id3_get_frame_short_name($frame);
$descr = id3_get_frame_long_name($frame);
echo "Frame: $frame \n";
echo "Kurzform: $short \n";
echo "Beschreibung: $descr \n";

Listing 12:

PHP - Код

require_once 'MP3/Id.php';

// создаем объект, считываем данные
$id3 = &new MP3_Id();
$result = $id3->read('../data/Little-Big-Man.mp3');
// Ошибкаr "Tag not found" игнорируется
if (PEAR::isError($result) && $result->getCode() !== PEAR_MP3_ID_TNF) {
die($result->getMessage() . "\n");
}

$result = $id3->study();
if (PEAR::isError($result)) {
die($result->getMessage() . "\n");
}

echo 'MPEG ' . $id3->getTag('mpeg_ver') . ' Layer ' . $id3->getTag('layer') . "\n";
echo $id3->getTag('mode') . "\n";
echo 'Размер файла: ' . $id3->getTag('filesize') . " Bytes \n";
echo 'Bitrate: ' . $id3->getTag('bitrate') . "kB/s \n";
echo 'Длительность: ' . $id3->getTag('length') . " min \n";
echo 'Samplerate: ' . $id3->getTag('frequency') . "Hz \n";

Listing 13:

Код

MPEG 1 Layer 3
Joint Stereo
Размерe: 4089856 Bytes
Bitrate: 128kB/s
Длительность: 04:15 min
Samplerate: 44100Hz

Выводы

В этой статье мы рассмотрели существующие возможности извлечения информации из mp-3 файлов средствами PHP. Обе библиотеки (MP3_Id и id3) легки в использовании и содержать необходимые функции. Одна библиотека написана на PHP, другая на C. Выбор того или иного варианта определяется вашими предпочтениями и возможностями хостинга.

Авторы

Карстен Луке изучает информатику в высшей школе Бранденбурга. Совместно со Стефаном Шмидтом разработывает расширение id3. Вы можете связаться с ним по e-mail ( luckec@php.net ) или посетить его сайт ( www.tool-gerade.de )
Стефан Шмидт - разработчик веб-приложений фирмы 1&1 Internet AG, активно учавствует в развити PEAR и PECL. Вы можете связаться с ним по e-mail ( schst@php.net )

Зачастую на Web – сайтах можно встретить страницы с размещенными на них HTML - формами. Веб-формы – удобный способ получения информации от посетителей вашего сайта. Пример тому – гостевая книга, – которая обеспечивает обратную связь с посетителями и разработчиками сайта. Формы так же удобны и для разработчиков сайта при разработке CMS, которая позволяет поддерживать главное свойство сайта - актуальность. Данная статья посвящена основам создания HTML-форм, их обработке и способам передачи данных из экранных форм в PHP-сценарии.

1) Создание простой формы

Теги <form> и </form> задают начало и конец формы. Начинающий форму тег <form> содержит два атрибута: action и method. Атрибут action содержит адрес URL сценария, который должен быть вызван для обработки сценария. Атрибут method указывает браузеру, какой вид HTTP запроса необходимо использовать для отправки формы; возможны значения POST и GET.

Замечание
Главное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.

Код

<form method="post" action="../admin/add_story.php">

</form>

2) Флажок (checkbox)

Флажки checkbox предлагаю пользователю ряд вариантов, и разрешает выбор нескольких из них.

Код

<input name="Имя переключателя" type="Тип" value="Значение">

Группа флажков состоит из элементов <input>, имеющих одинаковые атрибуты name и type(checkbox). Если вы хотите, чтобы элемент был отмечен по умолчанию необходимо пометить его как checked. Если элемент выбран, то сценарию поступит строка имя=значение, в противном случае в обработчик формы не придет ничего, т.е. не выбранные флажки вообще никак не проявляют себя в переданном наборе данных.

Пример:

Код

<input name="mycolor" type="checkbox" value="red" checked>Красный(выбран по умолчанию)
<input name="mycolor" type="checkbox" value="blue">Синий
<input name="mycolor" type="checkbox" value="black">Черный
<input name="mycolor" type="checkbox" value="white">Белый

3) Переключатель(radio)

Переключатели radio предлагают пользователю ряд вариантов, но разрешает выбрать только один из них.

Код

<input name="Имя переключателя" type="Тип" value="Значение">

Переключатель (radio) имеет атрибуты name, type и value. Атрибут name задает имя переключателя, type задает тип radio, а атрибут value задает значение. Если пользователь выберет переключатель, то сценарию будет передана строка имя=значение. При необходимости можно указать параметр checked, который указывает на то, что перключатель будет иметь фокус (т.е. будет отмечен по умолчанию) при загрузке страницы. Переключатели также можно объединять в группы, для этого они должны иметь одно и тоже имя.

Пример:

Код

<input name="mycolor" type="radio" value="white"> Белый
<input name="mycolor " type="radio" value="green" checked> Зеленый (выбран по умолчанию)
<input name="mycolor " type="radio" value="blue"> Синий
<input name="mycolor " type="radio" value="red"> Красный
<input name="mycolor " type="radio" value="black"> Черный

4) Кнопка сброса формы(Reset)

Код

<input type="Тип" name="Имя кнопки" value="Надпись на кнопке">

При нажатии на кнопку сброса(reset), все элементы формы будут установлены в то состояние, которое было задано в атрибутах по умолчанию, причем отправка формы не производиться.

Пример:

Код

<input type="reset" name="Reset" value="Очистить форму">

5) Выпадающий список (select)

Тэг <select> представляет собой выпадающий или раскрытый список, при этом одновременно могут быть выбраны одна или несколько строк.

Список начинается с парных тегов <select></select>. Теги <option></option> позволяют определить содержимое списка, а параметр value определяет значение строки. Если в теге <option> указан параметр selected, то строка будет изначально выбранной. Параметр size задает, сколько строк будет занимать список. Если size равен 1, то список будет выпадающим. Если указан атрибут multiple, то разрешено выбирать несколько элементов из списка(при size = 1 не имеет смысла).

Код

<select name="Имя списка" size = “Размер” multiple>
<option value=”Значение”>Отображаемый текст в списке</option>
</select>

При передаче данных выпадающего списка сценарию передается строка имя=значение, а при раскрытом списке передается строка имя=значение1&имя=значение2&имя=значениеN.


6) Текстовое поле (text)

Позволяет пользователям вводить различную информацию.

Код

<input type="Тип" name="Имя поля" size="Размер" maxlength="Макс. количество символов">

При создании обычного текстового поля размером size и максимальной допустимой длины maxlength символов, атрибут type принимает значение text. Если указан параметр value, то поле будет содержать отображать value-текст. При создании поля не забывайте указывать имя поля, т.к. этот атрибут является обязательным.

Пример:

Код

<input type="text" name="txtName" size="10" maxlength="5" value="Текст по умолчанию">

7) Поле для ввода пароля (password)

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

Пример:

Код

<input type="password" name="txtName" size="10" maxlength="5">

8) Многострочное поле ввода текста (textarea)

Многострочное поле ввода текста позволяет отправлять не одну строку, а сразу несколько. По умолчанию тег создает пустое поле шириной в 20 символов и состоящее из двух строк.

Код

<textarea name="Имя поля" cols="Ширина поля " rows="Число строк">Текст</textarea>

Многострочное поле ввода текста начинается с парных тегов <textarea></textarea>. Тэг name задает имя многострочного поля. Также можно указать ширину поля(cols) и число строк(rows). При необходимости можно указать атрибут readonly, который запрещает редактировать, удалять и изменять текст, т.е. текст будет предназначен только для чтения. Если необходимо чтобы текст был изначально отображен в многострочном поле ввода, то его необходимо поместить между тэгами <textarea></textarea>.

Пример:

Код

<textarea name="txtArea" cols="15" rows="10" readonly>
Текст, который изначально будет отображен в многострочном поле ввода и который нельзя изменять, т.к. указан атрибут readonly </textarea>

9) Скрытое текстовое поле

Позволяет передавать сценарию какую то служебную информацию, не отображая её на странице.

Код

<input name="Имя" type="Тип" value="Значение">

Скрытое поле начинается с тега <input>, атрибуты которого являются name, type и value. Атрибут name задает имя поля, type определяет тип поля, а атрибут value задает значение поля.

Пример:

Код

<input name="email" type="hidden" value="spam@nospam.ru">

10) Кнопка отправки формы (submit)

Служит для отправки формы сценарию.

Код

<input type="Тип" name="Имя кнопки" value="Текст кнопки">

При создании кнопки для отправки формы необходимо указать 2 атрибута: type=“submit” и value=”Текст кнопки”. Атрибут name необходим если кнопка не одна, а несколько и все они созданы для разных операций, например кнопки "Сохранить", "Удалить", "Редактировать" и т.д. После нажатия на кнопку сценарию передается строка имя=текст кнопки.

11) Кнопка для загрузки файлов (browse)

Служит для реализации загрузки файлов на сервер. Объект browse начитается с парных тегов <form></form>. Начинающий тэг <form> содержит необходимый атрибут encrypt. Атрибут encrypt принимает значение multipart/form-data, который извещает сервер о том, что вместе с обычной информацией посылается и файл. При создании текстового поля также необходимо указать тип файла – “file”.

Код

<form enctype="multipart/form-data" action="upload.php" method="post">
Загрузить файл: <input name="my_file" type="file">
<input type="submit" value="Отправить">
</form>

12) Рамка (fieldset)

Объект fieldset позволяет вам нарисовать рамку вокруг объектов. Имеет закрывающий тэг </fieldset>. Заголовок указывается в тэгах <legend></legend>. Основное назначение объекта – задавание различных стилей оформления.

Пример:

Код

<fieldset>
<legend>Программное обеспечение(заголовок рамки)</legend>
Текст, который будет помещен внутри рамки.</fieldset>

Обработка форм

Все данные, которые вы хотите получить из HTML-формы в PHP сценарий обрабатываются с помощью суперглобальных массивов $_POST или $_GET, в зависимости от указанного в атрибуте method метода передачи данных.

Задача: Вам необходимо получить данные из текстового поля и многострочного поля ввода и передать их сценарию.
Решение: Необходимо создать HTML форму и PHP – сценарий для обработки формы.

Обсуждение:

Создадим два файла: form.html и action.php. В файле form.html будет содержаться html-форма с текстовым полем mytext и текстовой областью msg:

Код

<form action="action.php" name="myform" method="post">
<input type="text" name="mytext" size="50">
<textarea name="msg" cols="20" rows=”10” ></textarea>
<input name="Submit" type=submit value="Отправить данные">
</form>

В этой html-форме нас интересует 3 атрибута: action который указывает путь к обработчику формы, имя текстового поля (mytext) и имя многострочного поля вода (msg). Также в форме присутствует кнопка, при нажатии на которую происходит передача данных.

После того как html-форма готова нам необходимо создать обработчик формы action.php:

PHP - Код

$text =  $_POST['mytext'];
  $msg =  $_POST['mytext'];
  echo $text; 
  echo "";
  echo $msg;

После того как мы введем любые значение в текстовые поля и нажмем на кнопку "Отправить данные" html-форма отправить значения сценарию action.php.
После этого в переменных $text и $msg будут содержаться значения текстового поля и многострочного поля ввода соответственно, значения которых взяты из суперглобальных переменных $_POST.

Если вы хотите, чтобы в многострочном текстовом поле соблюдалось html-форматирование, то используйте функцию nl2br():

PHP - Код

$text = nl2br($_POST['mytext']);

Задача: Пусть необходимо создать выпадающий список с годами с 2000 по 2050.
Решение: Необходимо создать HTML форму c элементом SELECT и PHP – сценарий для обработки формы.

Обсуждение:

Для начала создадим два файла: form.html и action.php. В файле form.html будет содержаться html-форма с выпадающим списком. Причем значения в списке можно указать двумя способами:

I. Ввод данных вручную:

Код

<select class="input" type=text name=years>
<option value='2000'>2000</option>
<option value='2001'>2001</option>
<option value='2002'>2002</option>
……………………………………………
<option value='2050'>2050</option>
</select>

II. Ввод данных через цикл:

Код

<select class="input" type=text name=years>

$year = 2000;
for ($i = 0; $i <= 50; $i++) // Цикл от 0 до 50
{
$new_years = $year + $i; // Формируем новое значение
echo '<option value='.$new_years.'>'.$new_years.'</option>'; //Формируем новую строчку
}

</select>

Как видно, второй пример с циклом, более компактный. Думаю, не стоит приводить скрипт обработчика данной формы, потому что он обрабатывается точно так же как текстовое поле, т.е. значения списка можно извлечь из суперглобального массива $_POST.

Задача: Загрузка файла на сервер
Решение: Необходимо создать HTML форму и PHP – сценарий для обработки файла.

Описание:

Создадим HTML-форму для отправки файла на сервер.

Код

<FORM ENCTYPE="multipart/form-data" ACTION="action.php" METHOD=POST>
<INPUT NAME="myfile" TYPE="file">
<INPUT TYPE="submit" value="Передать файл">
</FORM>

В данной html-форме присутствует элемент browse, который открывает диалоговое окно для выбора файла для загрузки на сервер. При нажатии на кнопку "Передать файл", файл передается сценарию-обработчику.

Затем необходимо написать сценарий обработчик action.php. Перед написание обработчика необходимо определиться в какой каталог мы будет копировать файл:

PHP - Код

if(isset($_FILES["myfile"])) // Если файл существует
{
  $catalog = "../image/"; // Наш каталог
  if (is_dir($catalog)) // Если такой каталог есть
  {
    $myfile = $_FILES["myfile"]["tmp_name"]; // Времменый файл
    $myfile_name = $_FILES["myfile"]["name"]; // Имя файла
    if(!copy($myfile, $catalog)) echo 'Ошибка при копировании файла '.$myfile_name 
// Если не удалось скопировать файл
  }
  else mkdir('../image/'); // Если такого каталога нет, то мы его создадим
}

Замечание
Если вы доверяете пользователям закачивать на ваш сервер любые файлы, нужно быть предельно осторожным. Злоумышленники могут внедрить «нехороший» код в картинку или файл и отправить на сервер. В таких случаях нужно жестоко контролировать загрузку файлов.

Данный пример демонстрирует создание каталога и копирование файла в этот каталог на сервер.

Также хотел бы продемонстрировать пример с элементом checkbox. Этот элемент немного отличается от других элементов тем, что если не один из элементов checkbox’a не выбран, то суперглобальная переменная $_POST вернет пустое значение:

Код

<FORM ACTION="file.php" METHOD=POST>
<input name="mycolor" type="checkbox" value="blue">Синий
<input name="mycolor" type="checkbox" value="black">Черный
<input name="mycolor" type="checkbox" value="white">Белый
<input name="Submit" type=submit value="Выбрать">
</FORM>

PHP - Код

if (!empty($_POST['mycolor'])) echo $_POST['mycolor']; // Если выбран хоть 1 элемент
  else echo "Выберите значение";

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

Конечно, многие могут сказать, что поисковики не учитывают мета теги keywords и description, и вовсе незачем голову морочить проблемой подбора ключевых слов, но учитывают или нет, это известно только администраторам поисковых машин. В частности, я недавно проводил эксперимент, в котором участвовало три пары сайтов, на каждой паре сайтов был один и тот же контент, но на одном из сайтов каждой пары были прописаны keywords и description. И что вы думаете, через месяц, все три сайта с keywords и description были выше в выдаче Яндекса, чем их двойники без этих мета тегов. (Примечание: сайты были оптимизированы под абсолютно не конкурентные запросы и не имели бэклинков).

Принцип работы php скрипта, основной задачей которого является “на лету” подбирать к тексту ключевые слова (keywords), заключается в разделении всего текста на слова и занесение их в массив. Из исходного текста сначала удаляются все знаки препинания, затем слова помещаются в массив и каждому слову присваивается число его повторений в тексте. После заполнения массива слова упорядочиваются по количеству повторений, и в качестве результатов берется верхушка массива – 15-25 самых часто употребляемых слов.

А вот и сам исходный код этого php-скрипта для подбора ключевых слов:

PHP - Код


class Counter
{
    var $origin_arr;
    var $modif_arr;
    var $min_word_length = 3;
 
function explode_str_on_words($text)
{
    $search = array ("'ё'",
                     "'<script[^>]*.*?</script>'si",  // Вырезается javascript
                     "'<[&#092;/&#092;!]*?[^<>]*'si",           // Вырезаются html-тэги
                     "'([&#092;r&#092;n])[&#092;s]+'",                 // Вырезается пустое пространство
                     "'&(quot|#34);'i",                 // Замещаются html-элементы
                     "'&(amp|#38);'i",
                     "'&(lt|#60);'i",
                     "'&(gt|#62);'i",
                     "'&(nbsp|#160);'i",
                     "'&(iexcl|#161);'i",
                     "'&(cent|#162);'i",
                     "'&(pound|#163);'i",
                     "'&(copy|#169);'i",
                     "'&#(&#092;d+);'e");
    $replace = array ("е",
                      " ",
                      " ",
                      "&#092;&#092;1 ",
                      "&#092;" ",
                      " ",
                      " ",
                      " ",
                      " ",
                      chr(161),
                      chr(162),
                      chr(163),
                      chr(169),
                      "chr(&#092;&#092;1)");
    $text = preg_replace ($search, $replace, $text);
    $del_symbols = array(",", ".", ";", ":", "&#092;"", "#", "&#092;$", "%", "^",
                         "!", "@", "`", "~", "*", "-", "=", "+", "&#092;&#092;",
                         "|", "/", ">", "<", "(", ")", "&", "?", "?", "&#092;t",
                         "&#092;r", "&#092;n", "{","}","[","]", "'", "“", "”", "•",
                         "как", "для", "что", "или", "это", "этих",
                         "всех", "вас", "они", "оно", "еще", "когда",
                         "где", "эта", "лишь", "уже", "вам", "нет",
                         "если", "надо", "все", "так", "его", "чем",
                         "при", "даже", "мне", "есть", "раз", "два",
                         "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"
                         );
    $text = str_replace($del_symbols, array(" "), $text);
    $text = ereg_replace("( +)", " ", $text);
    $this->origin_arr = explode(" ", trim($text));
    return $this->origin_arr;
}
 
function count_words()
{
    $tmp_arr = array();
    foreach ($this->origin_arr as $val)
    {
        if (strlen($val)>=$this->min_word_length)
        {
            $val = strtolower($val);
            if (array_key_exists($val, $tmp_arr))
            {
                $tmp_arr[$val]++;
            }
            else
            {
                $tmp_arr[$val] = 1;
            }
        }
    }
    arsort ($tmp_arr);
    $this->modif_arr = $tmp_arr;
}
 
function get_keywords($text)
{
    $this->explode_str_on_words($text);
    $this->count_words();
    $arr = array_slice($this->modif_arr, 0, 30);
    $str = "";
    foreach ($arr as $key=>$val)
    {
       $str .= $key . ", ";
    }
    return trim(substr($str, 0, strlen($str)-2));
}
}

Пользоваться данным php классом очень просто, создаете экземпляр класса функцией new а потом вызываете внутреннюю функцию get_keywords(), класса Counter. Вот наглядный пример использования этого класса:

PHP - Код

$word_counter = new Counter();
if (strlen($content)>50000)
{
    $keywords = $word_counter->get_keywords(substr($content, 0, 50000));
}
else
{
    $keywords = $word_counter->get_keywords($content);
}

В переменной $content должен содержатся основной текст страницы, для которой создаются ключевые слова. И еще, полученная строка содержит только ключевые слова, без мета тегов. Скачать данный php класс для подбора ключевых слов в zip архиве вы можете здесь.

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

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

Урок №1
Заменяем {text}, например на слово "студёную", строгий регистр, т.е. заменится только {text}, но не {TexT}:

PHP - Код

$string='Однажды в {text} зимнюю пору';
$string=str_replace('{text}','студёную',$string);
echo $string;

str_replace (search, replace, subject)

Эта функция возвращает строку или массив со всеми вхождениями search в subject, заменёнными данным значением replace.

Урок №2
Заменяем "летнюю", например на слово "зимнюю", нестрогий регистр, т.е. заменится "летнюю", "ЛЕТНЮЮ", "Летнюю", "леТНюю" и т.д.

PHP - Код

$string='Однажды в студёную летнюю пору';
$string=preg_replace('/летнюю/i','зимнюю',$string);
echo $string;

preg_replace (pattern, replacement, subject)

Эта функция выполняет поиск и замену регулярного выражения.
Ищет в subject совпадения с pattern и замещает их replacement, где pattern - это регулярное выражение, с которыми мы познакомся позже.

Урок №3
Считываем первые 5 символов из текста:

PHP - Код

$string='Капля никотина убивает лошадь, а хомяка разрывает на куски!';
$string=substr($string,0,5);
echo $string;

substr (string, start [, length])

Substr возвращает часть строки string, специфицированную параметрами start и length.

Если start положительный, возвращаемая строка начинается со start'овой позиции в string, отсчитываемой от нуля. Например, в строке 'abcdef' символ в позиции 0 это 'a', символ в позиции 2 это 'c', и так далее.

Урок №4
Считываем последние 5 символов из текста:

PHP - Код

$string='"Лучше колымить на Гондурасе, чем гондурасить на Колыме!';
$string=substr($string,-5);
echo $string;

Урок №5
Удаляем первые 5 символов из текста:

PHP - Код

$string='"Лес такой загадочный, а слез такой задумчивый';
$string=substr($string,5);
echo $string;

Урок №6
Удаляем последние 5 символов из текста:

PHP - Код

$string='Лучше стать дедушкой чем спать с бабушкой.';
$string=substr($string,0,-5);
echo $string;

Урок №7
Считываем символы с 3-го по 7-ой:

PHP - Код

$string='Меняю электропроигрыватель на электровыигрыватель.';
$string=substr($string,2,5);
echo $string;

Урок №8
Заменяем все буквы в тексте на маленькие:

PHP - Код

$string='Мне не нужен InterNet, я согласен на MiNet';
$string=strtolower($string);
echo $string;

strtolower (string)

Возвращает string со всеми алфавитными символами, конвертированными в нижний регистр.

Урок №9
Заменяем все буквы в тексте на большие:

PHP - Код

$string='Не учи отца и баста!';
$string=strtoupper($string);
echo $string;

string strtoupper (string)

Возвращает string со вмеси алфавитными символами, конвертированными в верхний регистр.

Урок №10
Меняем все буквы в тексте на маленькие и делаем самую первую букву заглавной:

PHP - Код

$string='отечественные поезда - самые поездатые поезда в мире.';
$string=ucfirst(strtolower($string));
echo $string;

ucfirst (string)

Возвращает строку с первым символом в верхнем регистре, если это алфавитный символ.

Урок №11
Замена нескольких пробелов на один:

PHP - Код

$string='Здесь       много        лишних        пробелов!';
$string=preg_replace('/ +/',' ',$string);
echo $string;

Урок №12
Удаление лишних пробелов по левому и правому краю текста:

PHP - Код

$string='       Текст с лишними пробелами по бокам.      ';
$string=trim($string);
echo $string;

trim (string)

Эта функция возвращает строку с вырезанными в начале и конце строки string пробелами.

Урок №13
Удаление лишних пробелов по левому краю текста:

PHP - Код

$string='     Текст с лишними пробелами по бокам.';
$string=ltrim($string);
echo $string;

ltrim (string)

Эта функция возвращает строку с вырезанными пробелами в начале string.

Урок №14
Удаление лишних пробелов по правому краю текста:

PHP - Код

$string='Текст с лишними пробелами по бокам.       ';
$string=rtrim($string);
echo $string;

rtrim (string)

Эта функция возвращает строку с вырезанными пробелами в конце string.

Урок №15
Удаление всех тэгов:

PHP - Код

$string='Спорить с тренером по борьбе может только тренер по стрельбе.';
$string=strip_tags($string);
echo $string;

strip_tags (str [, allowable_tags])

Эта функция пытается вернуть строку str с вырезанными тэгами HTML и PHP. Выдаёт ошибку с предупреждением в случае наличия неполных или ложных тэгов.
Вы можете использовать необязательный второй параметр для специфицирования тэгов, которые не должны вырезаться.

Урок №16
Удаление всех тэгов, кроме <b> и <i>:

PHP - Код

$string='<h1>Чистоплотность</h1> <b><i>это чисто масса на чисто объем';
$string=strip_tags($string,'<b><i>');
echo $string;

Урок №17
Проверяем, есть ли в тексте слово "разогнём", нестрогий регистр, т.е. ищется и "РаЗогНЁМ", и "РАЗОГНЁМ" и "разогнём" и т.д.:

PHP - Код

$string='Днем согнем, ночью разогнём.';

if (preg_match('/разогнём/i',$string))
   {
   // если слово найдено, то
   // выполняется эта часть кода
   }
else
    {
    // если слово не найдено, то
    // выполняется эта часть кода
    }

preg_match (pattern, subject)

Ищет в subject совпадения с регулярным выражением, заданным в pattern.

Урок №18
Проверяем, есть ли в тексте слово "надо", строгий регистр, т.е. ищется только слово "надо":

PHP - Код

$string='Друзей не надо иметь, с ними надо дружить.';

if (strstr($string,'надо'))
   {
   // если слово найдено, то
   // выполняется эта часть кода
   }
else
    {
    // если слово не найдено, то
    // выполняется эта часть кода
    }

strstr (haystack, needle)

Возвращает часть строки haystack от первого вхождения needle до конца haystack.
Если needle не найден, возвращает FALSE (ложь).

Урок №19
Считываем первые 6 слов из текста:

PHP - Код

$words='5'; // количество считываемых слов
$string='Если автобусу изменит жена, то он станет троллейбусом.';
$newString=''; // Объявляем новую переменную и присваиваем ей пустую строку
$array=explode(' ',$string);
for ($i=0; $i<$words; $i++)
    {
    $newString.=$array[$i].' ';
    }
$string=trim($newString); // Удаляем лишние пробелы
echo $string;

explode (separator, string)

Возвращает массив строк, каждая из которых является подстрокой строки string и сформирована путём разделения строки по границам образованными сепаратором строки separator.

Операция .= добавляет к строковой переменной новые символы.

Урок №20
Конвертируем текст с кодировком windows-1251 в кодировку koi8-r:

PHP - Код

$string='Компьютер без мыши, что коммерсант без крыши.';
$string=convert_cyr_string($string,'w','k');
echo $string;

convert_cyr_string (str, from, to)

Эта функция возвращает данную строку, конвертированную из одного набора символов кириллицы в другой.
Аргументы from и to это односимвольные аргументы, представляющие исходный и целевой наборы кириллицы. Поддерживаются типы:

k - koi8-r
w - windows-1251
i - iso8859-5
a - x-cp866
d - x-cp866
m - x-mac-cyrillic

Урок №21
Используем в качестве разделителя "||" (две вертикальных черты):

PHP - Код


$string="Вася||Пупкин||25";
$array=explode<font color="#006600">('||',$string);
echo 'Имя: '.$array[0].', фамилия: '.$array[1].', возраст: '.$array[2];

Урок №22
Заменяем <b> на &lt;b&gt; и </b> на &lt;/b&gt;:

PHP - Код

$string='<b>Если голова болит, значит, она есть. </b>';
$string=htmlspecialchars($string);
echo $string;

htmlspecialchars (string string)

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

& (амперсанд) становится &amp;
" (двойная кавычка) становится &quot;
' (одинарная кавычка) становится &#039;
< (меньше) становится &lt;
> (больше) становится &gt;

Урок №23
Определяем количество символов в тексте:

PHP - Код

$string='Кто раньше встал, того и тапки.';
$length=strlen($string);
echo $length;

strlen (string)

Возвращает длину строки string.

Поисковая оптимизация - это комплекс работ над сайтом и внешними факторами для достижения наилучших позиций в поисковых системах в соответствии с выбранными ключевыми словами. Этот способ оптимизации позволяет достигать высоких позиций в результатах выдачи поисковых машин по профильным запросам (ключевым словам) и тем самым привлекать огромную часть целевых посетителей.

В настоящий момент единственным путём завоевать Интернет-просторы, является оптимизация и продвижение сайта в поисковых системах. С каждым годом число пользователей Интернета, а, следовательно, поисковых систем растет. А это значит, что поисковая оптимизация приносит все больше и больше выгоды владельцам сайта. Согласно статистике, около 85% пользователей ищут информацию при помощи поисковых машин, которые обеспечивают от 70% до 85% от общей посещаемости ресурса.
Основные этапы оптимизации сайта и поискового продвижения:

* анализ ресурса;
* составление семантического ядра для поисковой оптимизации;
* оптимизация сайта: тексты, навигация, код;
* поисковое продвижение сайта: регистрация сайта в каталогах, на досках объявлений и форумах, работа со ссылочным ранжированием.

Поисковую оптимизацию можно разделить на внутреннюю и внешнюю.

Внутренняя оптимизация сайта направлена на работу с самим сайтом. К ней относится:

1. Составление семантического ядра сайта.
Семантическое ядро представляет собой совокупность запросов (ключевых слов), смыслу которых отвечает интернет-ресурс. Семантическое ядро создается с учетом специфики сайта из наиболее распространенных и соответствующих ключевых слов. По такому списку ключевых слов отслеживается продвижение сайта.

Правильно подобранные ключевые слова станут эффективным оружием в конкурентной борьбе. Есть несколько рекомендаций по использованию ключевых слов на страницах интернет-ресурсов.

Советы по использованию ключевых слов:
* Всегда используйте более одного слова при выборе ключевых фраз. Исследования показали, что большинство людей вводят в строку поиска фразу, состоящую из 2-х слов и более.
* Избегайте самых популярных ключевых слов, потому что Вашему сайту придется конкурировать с миллионом других подобных страниц, среди которых те, что принадлежат более мощным компаниям.
* Оптимальная частотность ключевых слов - 5%. Использование большего количества ключевых фраз может превратить ваш документ в спам.

2. Оптимизация страниц сайта.
В нее входят работы с html-кодом и текстами (контентом) страниц. При оптимизации html-кода проводится правка непосредственно html-кода, коррекция META-тегов, заголовков, описаний страниц сайта, выделение нужных частей страницы специальными тегами. Все тексты страниц анализируются и корректируются в соответствии с ключевыми словами.

Основные факторы ранжирования, на которые надо обратить внимание:
* Теги title - заголовки страниц сайта, наиболее важный фактор, на который следует обратить внимание. В заголовки страниц необходимо прописывать слова, по которым вы планируете провести оптимизацию сайта, но не следует забывать о том, что текст, содержащийся в заголовке страницы, будет выдаваться в результатах поиска. Следовательно, заголовок страницы должен быть информативными и привлекательно выглядеть, ведь с большей вероятностью пользователь выберет именно такое описание страницы. Распространенная ошибка - использование одного заголовка для всех страниц сайта. Для каждой страницы заголовок должен разрабатываться отдельно, в соответствии с содержанием страницы.
*

* Тег meta name="description" content="описание страницы" - практически никак не влияет на ранжирование сайта, однако это описание страницы будет выдаваться, если ваш сайт будет найден по ссылке, поэтому всё же стоит составить грамотное описание страницы и включить его в данный тег.

* Теги заголовков h1-h6 - играют очень большую роль при ранжировании сайта. Рекомендуется включать ключевые слова в данные теги. Также можно оформлять данные теги с помощью стилей CSS, но в пределах разумного, т.е. заголовок h1 должен быть основным заголовком страницы, h2 - подзаголовком и т.д. При попытке включить весь текст на странице в данный тег, ваш сайт может быть вообще исключен из результатов поиска, так что рекомендуем вам пользоваться данными тегами осторожно и не злоупотреблять ими.

* Теги акцентирования b, i и им подобные - рекомендуется выделять ключевые слова на странице данными тегами, это может дать преимущество при ранжировании сайта.

* Плотность ключевых слов на странице - отношение количества ключевых слов и словосочетаний к полному текстовому объему страницы. Рекомендуемой плотностью является, по разным данным, от 5% до 7%.

3. Оптимизация структуры сайта.
Изменение внутренних ссылок на страницы, создание карты сайта, для того чтобы поисковый робот смог проиндексировать все страницы. После таких работ поисковым роботам будет проще и удобнее работать со страницами, что ускорит их индексацию.

Рекомендации по структуре сайта:
* Используйте текстовые ссылки на все страницы сайта с необходимыми ключевыми словами, используйте прямые ссылки вида: , поисковые системы очень хорошо распознают такие ссылки, использование сложных скриптов, таких как Java, PHP и т.п. для формирования ссылок лучше не используйте.

* При наличии большого количества страниц на сайте, сделайте карту сайта, можно даже разбить ее на несколько страниц так, чтобы одна страница не содержала больше 50 исходящих ссылок (это затрудняет работу поискового робота).

* Следуйте "правилу трех кликов", т.е. все страницы сайта должны быть доступны пользователю на расстоянии 3-х кликов от главной страницы.

* Старайтесь не использовать на страницах сайта большое количество flash и графики, страница не должна очень много весить.

К внешней оптимизации относятся действия по повышению "дружественности" к поисковым системам и авторитетности (популярности) интернет-ресурса. Чтобы увеличить популярность сайта нужно учесть такие факторы как:

1. Ссылки с сайтов с большим тИЦ и PageRank.
Такие ссылки являются качественными и обладают большим весом, что влияет на позиции сайта в результатах поиска.

2. Тексты описания ссылок.
Текст ссылки, содержащий ключевые слова, воспринимается поисковой системой как дополнительная рекомендация, подтверждающая соответствие поисковому запросу, что влияет на ранжирование сайта.

3. Ссылки на тематических сайтах.
Кроме текста ссылок поисковые роботы учитывают общее информационное содержимое ссылающейся страницы сайта и при схожести тематик дают таким ссылкам больший вес.

4. Односторонние ссылки.
Поисковые системы стараются отслеживать взаимные ссылки, поэтому отдают предпочтение односторонним ссылкам, считая их более подлинными и ценными.

5. Избегание "плохих" ссылок.
С тех пор как увеличение ссылочности стала одним из важных факторов ранжирования, число сайтов "каталогов ссылок" возросло. Поисковые системы негативно относятся к многочисленным каталогам сайтов и стараются обесценить такие ссылки или не учитывать их совсем.

22 наиболее часто встречаемых ошибок при самостоятельной оптимизации сайта под поисковые системы:

1. Регистрируемая в поисковой системе страница должна содержать ссылки на другие страницы сайта. В противном случае она будет единственным, что проиндексирует поисковая машина.

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

3. При использовании механизма переадресации, регистрировать в поисковых системах необходимо реальный адрес Вашего сайта. Машина все равно будет выдавать ссылки именно на него, а не на redirect.

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

5. Если поисковая машина не понимает переадресацию, то ресурс останется не проиндексированным.

6. Не стоит плодить копии страницы под разными именами, релевантности сайту это не добавит, а на санкции от поисковой машины нарваться можно.

7. Неправильное написание букв национальных алфавитов - вместо русской "С" (эс) английская "С" (це). Данное правило стоит всегда соблюдать.

8. Грамматические ошибки и примкнувшие к ним опечатки. Используйте редакторы с проверкой правописания.

9. Не используйте слова через п р о б е л. Слова, написанные таким образом - поисковая машина воспримет как группу несвязанных символов.
Если требуется установить большое расстояние между буквами - используйте таблицы стилей CSS (напр.: letter-spacing: 7px; ).

10. Размещение на странице текста по цвету схожего с фоном и включение в этот текст кучи ключевых слов, является недопустимым. При обнаружении поисковыми системами можно попасть в бан.

11. Большое количество индексируемых страниц, не содержащих ключевой информации, снижает релевантность сайта и увеличивает время его индексации.

12. Не стоит создавать несколько страниц настроенных на одинаковый набор ключевых слов. Используйте синонимы или слова близкие по смыслу. Люди при поиске могут набирать фразы по-разному.

13. Использование для выделения тега FONT. Этот тег не увеличивает релевантность выделяемых слов. Используйте, когда это возможно, теги
-
или .

14. Использование в заголовке (тег TITLE) посторонней информации: название сайта на всех языках мира, его URL, самые популярные в Сети слова, не имеющие отношения к сайту (кстати, это может квалифицироваться как спам), пара десятков восклицательных знаков и т.п. Выводите в заголовок важную ключевую информацию. Например, для сайта www.ваш сайт.ru, заголовок может выглядеть следующим образом - Магазин техники – персональные компьютеры и комплектующие.

15. Использование в META-теге KEYWORDS слов не только не встречающихся в тексте, но и не имеющих к нему никакого отношения. Такие страницы могут считаться спамом.

16. Использование тегов DESCRIPTION и/или TITLE как еще одного тега KEYWORDS (бессмысленный набор ключевых слов)

17. Каждая страница должна иметь индивидуальный тег TITLE, а в идеале и KEYWORDS + DESCRIPTION.

18. Создание множества никому не нужных, невразумительных сателитов. (Хороший, интересный сателит с уникальным и интересным контентом - это совсем другое дело).

19. Частой ошибкой при конструировании сайта является идти "на поводу" оптимизации в ущерб контенту и дизайну.

20. Использование "чужого" контента. Более эффективным является написание собственного уникального контента.

21. Оптимизация страницы более чем под 10 поисковых запросов. На практике лучше каждую страницу оптимизировать под конкретные ключевые слова, причём количество слов не должно превышать 10!

22. Частой ошибкой является необдуманная покупка внешних ссылок с различных веб-сайтов. К данному вопросу стоит относиться очень серьёзно и покупать ссылки только у профессиональных компаний.

Поисковая оптимизация – одна из важнейших составляющих в продвижении сайта. И если вы вебмастер или блоггер, то вам в первую очередь нужно понимать основы SEO. Ниже приведены 10 простых правил по оптимизации, которые помогут вам подготовить ваш сайт к продвижению.

Правило 1: Не пытайтесь обмануть системы.

Если вы войдете в комнату, где будут одни ученые с докторскими степенями, думаете, вы сможете обмануть их? Нет. Так и Google имеет тысячи таких комнат с учеными, поэтому будьте уверены, что их обмануть вам не удастся. Избегайте любых советов, которые рассказывают, что вы сможете попасть в top5 за пару дней, при этом иметь великолепный сайт и уникальный контент.

Правило 2: Используйте ключевые слова.

Выберите несколько ключевых слов или фраз для вашего сайта. Используйте их, и слова связанные с ними в своих текстах, статьях. Повторять их постоянно – плохая идея (см. Правило 1).

Правило 3: Его величество «Контент».

Пользователей интересует содержание сайта, а не дизайнерские фишки. Если содержание сайта не уникально и не привлекает пользователей – не ждите их вообще.

Каждая страница вашего сайта должна строиться по схеме перевернутой пирамиды: начинаться с релевантного[1] заголовка H1, который обязательно содержит одно из ключевых слов; и первый абзац текста как краткое описание всей страницы.

Правило 4: Чистый код – правильный код.

Код вашего сайта должен быть читабелен для поисковых систем также как и для пользователей. Выделите основные блоки сайта: навигационное меню, заголовок, текст и т.д. Старайтесь использовать описательные названия классов и идентификаторов для тегов. Для списков используйте тег UL, для текста тег P, H1-H6 для заголовков, и STRONG для жирного текста (для ключевых слов и фраз). И конечно же, используйте верстку на DIV.

Правило 5: Самая важная страница – главная страница.

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

Правило 6: Ссылки имеют значение.

Поисковые системы обращают особое внимание на ссылки и анкоры[2] ссылок. Старайтесь избегать таких ссылок как «Смотри здесь» или «Далее…». Лучше делать их неиндексируемыми. Анкор ссылки должен быть содержательным, т.е. краткий заголовок страницы на которую она ведет. Например: “Примеры и уроки для вебмастеров” или “Как сделать многоуровневое горизонтальное меню”. Не забывайте и об околоссылочном тексте.

Чем более релевантна ссылка, тем быстрее поисковая система найдет страницу с этой ссылкой. Не злоупотребляйте внешними ссылками[3], которые уведут пользователя на другой сайт. Если ваша страница ориентирована на дизайнерский минимализм, то ссылка на «Минимализм в дизайне» будет иметь место, а вот ссылка с картинки с кошкой будет бесполезной.

Правило 7: Заголовок заголовку рознь.

Каждая страница вашего сайта должна иметь свой уникальный заголовок – Title и краткое описание - Description. Достаточно всего 60 символов, но их значение будет огромным. Помните, что заголовок страницы – это то, что пользователь увидит в ответ на его поисковый запрос, поэтому по заголовку он должен понять найдет он ответ на вашей странице или нет.

Также не забывайте приписывать атрибут title у ссылок:

Код

<a href="link" title="Название ссылки">Анкор ссылки</a>

И атрибут Alt у изображений. Он также должен максимально кратко описывать то, что изображено на картинке:

Код

<img src="..." alt="Описание изображения" />

Казалось бы мелочи, но для SEO это еще один важный способ оптимизации.

Правило 8: Лишним тегам – нет.

Давным-давно теги meta были секретом для SEO, но те дни прошли. Наиболее важным для поисковых систем и пользователей является тег description. Поисковые системы могут использовать его как подпись к ссылкам в результатах поиска. Поэтому убедитесь что вы дали грамотное описание каждой странице.

Правило 9: Карта сайта – лучший путеводитель.

Обязательно сделайте на вашем сайте карту сайта, которая будет содержать ссылки на все страницы сайта. Вы можете создать sitemap для Google с помощью генереаторов, например www.xml-sitemaps.com.

Правило 10: Дизайн – для людей.

Поисковые системы организованы так, чтобы пользователю было сразу понятно, что данный сайт - поисковик. Это значит, что и ваш сайт должен иметь дизайн, который будет говорить сам за себя, сразу давая понять какова тематика сайта. Поэтому чтобы сайт было легко найти, и он привлекал пользователей – сделайте его дизайн по максимуму приближенным к тематике сайта. Задача дизайнера – скорее решить проблему юзабилити, нежели нарисовать еще один шаблон для портфолио.

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

---

Например, можно таким образом проверить, как работают объявления двух цветовых схем на одной и той же рекламной позиции, или как работают рекламные блоки разных размеров, скажем, квадрат 250х250 или полубаннер 234х60.

Первое, что необходимо сделать для запуска теста – это выбрать два канала, по одному на каждую единицу рекламы, для отслеживания Ваших результатов. Затем следует вставить в код страницы специальный код, указанный ниже, который чередует показ объявлений.

Причем, необходимо учитывать, что тестируемые объявления должны отображаться на равных условиях, т.е. на каждый из двух типов объявлений должно приходиться 50% просмотров.

Вот код JavaScript, который предлагает использовать Google AdSense, для чтобы Вы могли запустить в соответствии с такими условиями A/B тестинг Ваших рекламных объявлений AdSense:

Код

var random_number = Math.random();
if (random_number < .5){
//здесь код Вашего первого рекламного объявления
} else {
//здесь код Вашего второго рекламного объявления
}

Замените «//здесь код Вашего первого/второго рекламного объявления» на свой коды объявлений, расположенные между первым набором тегов . Помните о том, что сам код объявления в соответствии с правилами системы изменять нельзя. Однако в данном случае Google AdSense разрешает модифицировать его для использования со специальным, указанным выше скриптом, нацеленным на проведение A/B тестирования.

Это стоящий эксперимент, который позволяет удобно отследить эффективность использования тех или иных типов объявлений AdSense при сравнении на равных условиях. Приятно видеть, что AdSense делает это возможным.

Рекламно-контекстовые системы оплаты за клик (Pay per click), такие, как AdSense, много внимания уделяют позиционированию и дизайну своих публикуемых объявлений. Но есть и другой важный аспект - релевантность рекламы, т.е. соответствие текста рекламного объявления содержанию страницы.

---

Ее принцип действительно прост - читатели приходят на Ваш сайт в поисках информации по какой-то конкретной теме и, если видят объявление, ей соответствующее, то есть большая вероятность, что они обратят на него внимание и отреагируют, кликнув по рекламе.

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

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

Ниже следуют 11 подсказок для получения релевантных объявлений, нацеленных на рекламу AdSense:

1. Секционный Таргетинг - Данная идея очень проста - Вы просто проставляете специальные теги вокруг тех частей контента, для которых требуется соответствие объявлений и теги вокруг того контента, который не нужно учитывать при ориентации объявлений. Получается, что вы самостоятельно можете делать таргетинг объявлений в соответствии с тематикой вашего сайта. Я думаю, что объявления о продаже цветов не будут уместны на сайте о программировании. А узнать больше информации об этом от Гугла, пройдя сюда.

2. Ключевые Слова в Контенте Страниц - Ваши посты с ключевыми словами должны быть подкреплены основным содержанием статьи. В противном случает он будут мало читаемы. Также имеет смысл проверить, какие слова в тексте встречаются чаще других, поскольку это те слова, которым с большей вероятностью будет соответствовать текст рекламного объявления. Чтобы помочь AdSense'у вывести нужные объявления, Вы должны найти способ использования нужных ключевых слов более одного-двух раз в каждом сообщении.

3. Ключевые Слова в Заголовках - Как показывает опыт, присутствие ключевых слов в заголовках (title) статей реально влияет на содержимое отображаемых рекламных объявлений. Это утверждение еще более справедливо, если заголовки статей, по сути, являются и заголовками страниц. Идеальный вариант - это когда название статьи есть в заголовке браузера и содержит ключевые слова.

4. Метатеги - Могу сказать, что времена, когда поисковики верили метатегам - в далеком прошлом. Когда инет начинал свое становление, трава была зеленой, а небо голубым :) Сейчас дела обстоят по-другому. Да и сама Google AdSense никогда не говорила о значимости метатегов при отображении рекламы, однако достаточно много пользователей верят, что AdSense обращает на них внимание. Поэтому рекомендую Вам самим убедиться в том, что это значимый показатель, включив в метатеги ключевые слова.

5. Фокусируйте Посты в Одну Тему - Чем больше Ваши посты сфокусированы на одной теме, тем больше AdSense "понимает" то, о чем Вы пишите, и с большей степенью вероятности выводит нужные Вам объявления. И, наоборот, посты, раскрывающие разносторонние темы, приведут к эффекту несоответствия объявления тексту Вашего сайта. Это объясняет причину, по которой иногда главные страницы блогов отображают релевантные объявления значительно реже, чем страницы, отведенные только одному посту. Поэтому для достижения необходимо результата на главной странице, возможно, придется поработать с плотностью ключевых слов на ней.

6. Фокусируйте Blog/URL в Одну Тему - Некоторые веб-мастера верят, что AdSense проверяет не только страницы, на которых размещены объявления, но и весь сайт. Вполне вероятно, что Вы можете не получить релевантную рекламу на страницах своего блога, если пишите на разные темы, расположенные по одному URL. Конечно, это не так существенно, но соблюдение данного условия позволит Вам двигаться в правильном направлении.

7. Проверяйте, Отображаются ли Рекламные Объявления - Это редко случается с объявлениями AdSense, но возможно такое, что веб-мастер прилагает усилия к тому, чтобы добиться отображения релевантных объявлений и в результате обнаруживает, что показывается совсем немного объявлений по его нишевой категории, поскольку она слишком узкоспециализированная. Совсем нетрудно это проверить, например, сделать в Гугле поиск по ключевым словам, по которым Вы хотели бы видеть объявления. И, если страница выданных результатов поиска показывает рекламу, то есть большой шанс, что объявления отобразятся и на Вашем сайте. Если же нет, то, скорее всего, Вам необходимо полнее раскрывать тему в своей нише.

8. Проверяйте, какую рекламу видят другие - Более, чем вероятно, что реклама, которую Вы видите на своем блоге, отличается от той, которую видят Ваши читатели. Это происходит из-за настроек геотаргетинга, т.е. отображения объявления в зависимости от местоположения (географии) читателя. Рекламодатели могут выбирать, каким странам или регионам разрешен показ их объявлений. В результате Ваш регион может иметь меньшую релевантность объявлений, чем другие регионы, поэтому имеет смысл попросить кого-нибудь, кто находится в другой части мира, сказать, какие он видит объявления на Вашем блоге.

9. Блокируйте нерелевантные объявления - AdSense позволяет веб-мастерам блокировать объявления через свои Фильтры Конкурирующих Объявлений. Если Вы наблюдаете объявления, которые не следует отображать на Вашем блоге, то можете заблокировать их, используя данный метод. Безусловно, Вы должны помнить, что объявления, которые видите на своем блоге Вы, специфичны для Вашего местоположения (зависят от IP-адреса), поэтому для Ваших читателей, возможно, показываются совершенно другие объявления. Исходя из этого, блокировка рекламы может быть отчасти бессмысленным занятием.

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

11. Если сомневаетесь, спросите у AdSense'а - Если у Вас возникают сомнения или затруднения при работе над достижением релевантности объявлений Google AdSense, обращайтесь за помощью в техническую поддержку системы, воспользовавшись формой обратной связи. Письма от русскоязычных пользователей не остаются в стороне, и, возможно, Вы получите полезные ответы. Однако не стоит задавать вопросы, решение которых уже изложено в Справочном Центре AdSense.