С чего начинать

Оглавление

Начало.
Таблицы.
Текст.
Изображения.
Ссылки.
JavaScript.
Палитра цветов.
Выбор цвета.
Музыка, флеш, видео.
DOCTYPE.
Мета теги.
Кодировка.
XHTML - что это такое?
RSS
CSS
Robots.txt
Иконка
Формы для Народ.Ру
Гостевая Народ.Ру
Полезные ресурсы.

Книги по HTML, CSS, JavaScript, PHP и т.д. можно скачать здесь

Вступление

Если Вы решили, что Вам просто необходим сайт и при этом на компе установлен визуальный (WYSIWYG) редактор типа «Frontpage» или «Dreamweaver», тогда это пособие Вам не нужно, читайте справку программы, в которой делаете страницы.

Для создания веб страниц, работая напрямую с html кодом, необходим любой текстовый редактор, например, стандартный «Блокнот», но можно скачать в Интернете и другие редакторы, например, Notepad++ или Inedita.

HTML - это язык разметки гипертекстовых документов ((H)yper(T)ext(M)arkup(L)anguage) . Его назначение - определять структуру документа.

Язык html состоит из набора тэгов. Теги - это директивы браузеру, которые указывают ему структуру Вашего документа. За внешний вид отвечает технология — CSS. Для того, чтобы научиться делать страницы, по сути, нужно выучить набор тэгов и их аттрибутов и все! Какие тэги нужно знать?

Теги

Основные: html, head, title, body;
Структурные: div, span;
Текстовые: p, ul, ol, li, h1-h6, br, em, strong, b, i;
Таблицы: table, tr, td, th;
Ссылки: a;
Мультимедиа: img, object;
Фреймы: frameset, frame, iframe;
Формы: form, input, textarea, label, select, option;
Факультативные: hr;
Специальные: script, link, meta;

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

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


About Chm4You!

О программе Chm4You!
Разработчик: Сергей Тарасенко (aka Tarantul)
Версия: Chm4You! 1.2.1
Веб-сайт: http://supex.by.ru
Почта: tarantuls@ukr.net

Компилятор: hhc.exe 4.78.8702.0 (Microsoft)
Динамическая библиотека: hha.dll 4.78.8702.0 (Microsoft)
Декомпилятор: hh.exe 4.78.8702.0 (Microsoft)


Кодировка

Таблицы.
Текст.
Изображения.
Ссылки.
JavaScript.
Палитра цветов.
Выбор цвета.
Музыка, флеш, видео.
DOCTYPE.
Мета теги.
Кодировка.
XHTML - что это такое?
RSS
CSS
Robots.txt
Иконка
Формы для Народ.Ру
Гостевая Народ.Ру
Полезные ресурсы.

Книги по HTML, CSS, JavaScript, PHP и т.д. можно скачать здесь

Немного слов о кодировках

Источник: www.realcoding.net

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

История возникновения

Кодировка представляет собой таблицу символов, где каждой букве алфавита (а также цифрам и специальным знакам) присвоен свой уникальный номер - код символа.

Стандартизирована только половина таблицы, т.н. ASCII-код - первые 128 символов, которые включают в себя буквы латинского алфавита. И с ними никогда не бывает проблем. Вторая же половина таблицы (а всего в ней 256 символов - по количеству состояний, который может принять один байт) отдана под национальные символы, и в каждой стране эта часть различна. Но только в России умудрились придумать целых 5 различных кодировок. Термин "различные" обозначает то, что одному и тому же символу соответствует разный цифровой код. Т.е. если мы неправильно определим кодировку текста, то нашему вниманию предстанет абсолютно нечитаемый текст.

Кодировки появились исторически. Первая широко используемая российская кодировка называлась KOI-8. Ее придумали, когда адаптировали к русскому языку систему UNIX. Это было еще в семидесятых - до появления персоналок. И до сих пор в UNIX это считается основной кодировкой.

Потом появились первые персональные компьютеры, и началось победное шествие DOS. Вместо того чтобы воспользоваться уже придуманной кодировкой, Microsoft решила сделать свою, ни с чем не совместимую. Так появилась DOS-кодировка (или 866 кодовая страница). В ней, кстати, были введены спецсимволы для рисования рамок, что широко использовалось в программах написанных под DOS. Например, в том же Norton Commander-е.

Параллельно с IBM-совместимыми развивались и Macintosh-компьютеры. Несмотря на то, что их доля в России очень мала, тем не менее, потребность в русификации существовала и, разумеется, была придумана еще одна кодировка - MAC.

Время шло, и 1990 году Microsoft явила на свет первую успешную версию Windows 3.0-3.11. А вместе с ней и поддержку национальных языков. И снова был проделан такой же фокус, как и с DOS. По непонятным причинам они не поддержали ни одну, из уже существовавших ранее (как это сделала OS/2, принявшая за стандарт DOS-кодировку), а предложили новую Win-кодировку (или кодовая страница 1251). Де-факто, она стала самой распространенной в России.

И, наконец, пятый вариант кодировки связан уже не с конкретной фирмой, а с попытками стандартизации кодировок на уровне всей планеты. Занималась этим ISO - международная организация по стандартам. И, догадайтесь, что они сделали с русским языком? Вместо того, чтобы принять за "стандартную русскую" какую-нибудь из вышеописанных, они придумали еще одну (!) и назвали ее длинным неудобоваримым сочетанием ISO-8859-5. Разумеется, она тоже оказалась ни с чем не совместимой. И в настоящий момент эта кодировка практически нигде не применяется. Кажется, ее используют только в базе данных Oracle. По крайней мере, я ни разу не видел текст в этой кодировке. Тем не менее, ее поддержка присутствует во всех броузерах.

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

Web-дизайн и кодировки

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

Со стороны сервера мы должны установить систему, которая умеет предварительно посылать сообщение о том, в какой кодировке будет прислана страница. А броузер это сообщение должен принять и, соответственно, настроиться на нужное отображение. Если все сделано корректно, то проблем не возникает. Но действительность вносит свои коррективы и неправильная настройка web-сервера может привести к тому, что, послав сообщение о том, что сейчас будет страничка в кодировке win-1251, сервер присылает ее в KOI-8. Разумеется, броузер путается, ведь он не в состоянии самостоятельно определить кодировку страницы. Он всего лишь пользуется указаниями сервера и, соответственно, показывает страничку неправильно.

Имеется способ указать кодировку странички не на сервере, а непосредственно в HTML-коде. Для этого используется специальная версия META-тега с параметром charset, задающим нужный язык. Например, для странички написанной в кодировке Win1251, соответствующий код будет выглядеть так:

<meta http-equiv="content-type" content="text/html; charset=Windows-1251">

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

В связи со всеми этими проблемами в РУНЕТ-е не рекомендуется применять данный тег вообще. В таком случае просмотр будет осуществляться в той кодировке, на которую настроен броузер, если сервер не пришлет уведомление о кодировке документа. В случае несовпадения ее можно достаточно легко переключить. Кроме того, если по умолчанию выставлять кодировку Win-1251, то у 95% Ваших посетителей страничка сразу же будет показана правильно.

Проблемы с таблицами стилей

В последнее время в связи с широким распространением DHTML, CSS и 4-х версий броузеров возникла новая проблема, связанная с кодировками. И причиной ее появления служит использование каскадных таблиц стилей (CSS).

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

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

Каковы же эти ограничения?

Первое и основное заключается в том, чтобы использовать только стандартные шрифты, поставляемые с Windows и гарантированно находящиеся на машине клиента. А этих шрифтов, как известно всего три. Вот их список: "Arial", "Times New Roman", "Courier".

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

<style type="text/css">
<!--
.serif { font-family : "Times New Roman", "Geneva", "serif"; }
.sanserif { font-family : "Arial", "Helvetica", "sans-serif"; }
.mono { font-family : "Courier", "monospace"; }
-->
</style>

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

Из всего вышесказанного следует вывод - со шрифтами следует работать осторожно. И до сих пор много чисто текстовых надписей отливается в GIF. Ситуация не изменится до тех пор, пока шрифт нельзя будет загружать на клиентскую машину, подобно тому, как это происходит с картинкой. На самом деле, такая технология уже есть и реализована, например, в 4-ом Internet Explorer. Но она еще слишком сыра и, что самое главное, шрифт должен быть представлен в специальном формате. Будем надеяться, что в будущем это станет стандартом, а пока нужно с осторожностью пользоваться шрифтами, отливая редкие в графику и используя в CSS только стандартные.


CSS - Таблицы Каскадных Стилей

Таблицы.
Текст.
Изображения.
Ссылки.
JavaScript.
Палитра цветов.
Выбор цвета.
Музыка, флеш, видео.
DOCTYPE.
Мета теги.
Кодировка.
XHTML - что это такое?
RSS
CSS
Robots.txt
Иконка
Формы для Народ.Ру
Гостевая Народ.Ру
Полезные ресурсы.

Книги по HTML, CSS, JavaScript, PHP и т.д. можно скачать здесь

CSS - Таблицы Каскадных Стилей

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

Внутренние Таблицы Стилей

Использование Внутренних стилей мало чем отличается от использования обычных HTML тегов. Они задают стиль только одному элементу документа при помощи атрибута style в HTML теге.

Пример

<span style="color:red; font-size:12pt; font-family:Arial">
текст
</span>

Глобальные Таблицы Стилей

Глобальные стили задают вид элементов всего документа.
Для этого используется
<style type="text/css">
Он размещается в заголовке документа.

<html>
<head>
<title>Пример</title>
<style type="text/css">
h1{color:red; font-style:italic; font-size:32px}
</style>
</head>
<body>
<h1>Заголовок красным курсивом </h1>
</body>
</html>

Связанные Таблицы Стилей

Связанные таблицы стилей используются для придания нескольким документам одного стиля и xранятся в отдельном файле.

В HTML файлах делается ссылка на этот файл при помощи тега <link>
Выглядит это так:
<link rel="stylesheet" type="text/css" href="путь к файлу css">

Пример

<html>
<head>
<title>пример </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Контент
</body>
</html>


DOCTYPE

Таблицы.
Текст.
Изображения.
Ссылки.
JavaScript.
Палитра цветов.
Выбор цвета.
Музыка, флеш, видео.
DOCTYPE.
Мета теги.
Кодировка.
XHTML - что это такое?
RSS
CSS
Robots.txt
Иконка
Формы для Народ.Ру
Гостевая Народ.Ру
Полезные ресурсы.

Книги по HTML, CSS, JavaScript, PHP и т.д. можно скачать здесь

Правильный DOCTYPE

Все страницы должны начинаться с DOCTYPE, объявления типа документа.
Ниже перечислены полные варианты тега DOCTYPE для различных нужд:

Стандарт HTML 4.01 Strict (строгий), Transitional (переходный), Frameset (с фреймами)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Стандарт XHTML 1.0 Strict (строгий), Transitional (переходный), Frameset (с фреймами)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Стандарт XHTML 1.1 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Официальные версии доктайпов от w3.org


Формы

Таблицы.
Текст.
Изображения.
Ссылки.
JavaScript.
Палитра цветов.
Выбор цвета.
Музыка, флеш, видео.
DOCTYPE.
Мета теги.
Кодировка.
XHTML - что это такое?
RSS
CSS
Robots.txt
Иконка
Формы для Народ.Ру
Гостевая Народ.Ру
Полезные ресурсы.

Книги по HTML, CSS, JavaScript, PHP и т.д. можно скачать здесь

Тег <form>

Тег <form> устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Формы применяются для опроса посетителей, отправки электронной почты и т.д.

Формы размещаются между тегами <form> и </form>

Атрибуты

<form method="get" action="url">

action="url" - обработчик формы

method="get" или method="post" - определяет, каким образом данные из формы будут переданы обработчику.

Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.

Тег <label> устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы input.

<input type="text" name="a" size="30"> Поле для ввода данных

<input type="radio" name="help" value="Радиокнопка"> Радиокнопка

Радиокнопка - 1
Радиокнопка - 2
Радиокнопка - 3

<input type="checkbox" name="help" value="A"> Флажок

Флажок - 1
Флажок - 2
Флажок - 3

<input type="password" name="pass" size="20"> Пароль

<input type="file" name="attach" size="30"> Поле для отправки файла

<input type="hidden" name="help" value="url"> Cкрытый элемент

<input type="submit" value="Отправить"> Кнопка отправки данных

<input type="image" title="Начать поиск" src="images/search.gif"> Рисунок вместо кнопки

<input type="reset" value="Очистить"> Кнопка очистки формы

Поле <textarea> представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста.

<textarea rows="4" cols="40" name="text"> текст </textarea>

Параметр rows - высота текстового поля

Параметр cols - ширина текстового поля

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

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

<select name=browser>
<option selected>Ваш браузер</option>
<option value=t1>Internet Explorer</option> Раскрывающийся список
<option value=t2>Firefox </option>
<option value=t3>Opera</option>
<option value=t4>Другой</option>
</select>

Пример

Форма для отправки писем на хостинге НАРОД.РУ

Сообщение на e-Mail

HTML

<form enctype="multipart/form-data" action=
"http://narod.yandex.ru/send-poll.xhtml" method="post">

<fieldset>

<legend>Сообщение на e-Mail</legend>

<p>
<input type="text" name="a[от: ]" class="text">
<label class="formname">Имя</label>
</p>
<p>
<input type="text" name="a[город: ]" class="text">
<label class="formname">Город</label>
</p>
<p>
<input type="text" name="a[e-mail: ]" class="text">
<label class="formname">е-mail</label>
</p>
<label class="inf"><b>Какие из нижеперечисленных элементов, объявлены нежелательными(deprecated) в HTML 4.0</b></label>
<p>
<input type=checkbox name="a[A]" value="A">
<label class="formbox">A</label>
<br>
<input type=checkbox name="a[FONT]" value="FONT">
<label class="formbox">FONT</label>
<br>
<input type=checkbox name="a[TBODY]" value="TBODY">
<label class="formbox">TBODY</label>
<br>
<input type=checkbox name="a[U]" value="U">
<label class="formbox">U</label>
<br>
<input type=checkbox name="a[STRIKE]" value="STRIKE">
<label class="formbox">STRIKE</label>
<br>
<input type=checkbox name="a[AREA]" value="AREA">
<label class="formbox">AREA</label>
<br>
<input type=checkbox name="a[B]" value="B">
<label class="formbox">B</label>
<br>
<input type=checkbox name="a[CENTER]" value="CENTER">
<label class="formbox">CENTER</label>
</p>
<p>
<label class="inf"><b>Информация на странице</b></label>
</p>
<p>
<input type=radio name="a[help]" value="Помогла">
<label class="formbox">Помогла</label>
<br>
<input type=radio name="a[help]" value="Непомогла">
<label class="formbox">Непомогла</label>
</p>
<p>
<input type="file" name="attach" class="attachfile">
</p>
<label class="formmes">Сообщение</label>
<br />
<textarea rows="4" cols="40" name="a[текст: ]">
</textarea>
<p>
<input type="submit" value="Отправить" class="formbutton">
</p>
<input type="hidden" name="email" value="greenfam@narod.ru">
<input type="hidden" name="title" value=
"help-html-css"> <input type="hidden" name="login"
value="help-html-css"> <input type="hidden" name="backlink" value=
"http://help-html-css.narod.ru/thanks.html"> <input type="hidden" name=
"backtext" value="На страницу thanks"> <input type="hidden" name=
"separator" value=""> <input type="hidden" name="mess" value="">
<input type="hidden" name="yourans" value="Ваш ответ:">
<input type="hidden" name="vari" value="4"> <input type="hidden"
name="forceforward" value="Да">

</fieldset>

</form>

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

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

CSS

fieldset {
padding: 0 1em 1em 1em;
border: double 3px #329C6B;
width: 350px;
}
legend {
padding: 1em;
font:18px Verdana;color: #64A46D;
font-weight:900;
}
.formbutton {
cursor:pointer;
font:14px Verdana;color: #64A46D;
font-weight:900;
background-color:#F1F8F2;
border:solid 1px #329C6B;
}
.text{
width: 130px;
border:solid 1px #329C6B;
background-color:#fff;
margin: 0 0 1px 0;
}
.attachfile{
width: 130px;
border:solid 1px #329C6B;
background-color:#fff;
}
.formname{
font:15px Verdana;color: #88B98F;
margin: 0 0 0 30px;
font-weight:900;
vertical-align:top;
}
.formmes{
font:18px Verdana;color: #88B98F;
font-weight:900;
}
.formfile{
width: 170px;
font:14px Verdana;color: #88B98F;
font-weight:900;
vertical-align:top;
}
textarea {
width: 90%;
border:solid 1px #329C6B;
font:12px Verdana;color: #88B98F;
background-color:#fff;
scrollbar-3dlight-color:#fff;
scrollbar-arrow-color:#fff;
scrollbar-highlight-color: #fff;
scrollbar-face-color:#fff;
scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:#fff;
scrollbar-track-color: #fff;
}

Это лишь один из множества возможных вариантов оформления формы для отправки сообщений на e-mail. Изучив CSS Вы сможете оформить свою форму для контактов с посетителями, так как Вам захочется. Удачи!

Форма поиска Яндекса

<form name="web" method="get" action="http://www.yandex.ru/yandsearch">
<input type="text" name="text" size="18" value="" maxlength="160">
<input type="submit" value="Поиск">
<input type="hidden" name="serverurl" value="URL сайта">
<input type="hidden" name="server_name" value="Имя сайта">
<input type="hidden" name="referrer1" value="URL сайта">
<input type="hidden" name="referrer2" value="Имя сайта">
</form>

Форма поиска Народ.Ру

<form action="http://narod.yandex.ru/cgi-bin/yandsearch">
<input type="hidden" name="user" value="ваш-логин-на-народ.ру">
<input name="text" class="inputtext" size="18">
<input name="where" value="2" type="hidden">
<input type="submit" value="Найти">
</form>


Гостевая книга

Таблицы.
Текст.
Изображения.
Ссылки.
JavaScript.
Палитра цветов.
Выбор цвета.
Музыка, флеш, видео.
DOCTYPE.
Мета теги.
Кодировка.
XHTML - что это такое?
RSS
CSS
Robots.txt
Иконка
Формы для Народ.Ру
Гостевая Народ.Ру
Полезные ресурсы.

Книги по HTML, CSS, JavaScript, PHP и т.д. можно скачать здесь

Гостевая книга на Народ.Ру

Для изготовления гостевой со своим дизайном необходимо создать два текстовых (.txt) файла.

1) short.txt
2) sm.txt

В файл short.txt скопируйте HTML код своей страницы.

Вставьте перед </head> этот скрипт

<SCRIPT language="javascript" type="text/javascript">
<!--
function ALZ(s) {
return (s<10?"0":"")+s.toString();
}
function C2UT(s) {
d=new Date(s);
return ALZ(d.getDate())+"."+ALZ(d.getMonth()+1)+"."+d.getFullYear()+" "
+ALZ(d.getHours())+":"+ALZ(d.getMinutes());
}
//-->
</SCRIPT>

Вставьте в html код форму расположенную ниже.
Красным цветом веделен кусок кода в форме, который Вам надо поменять на ID своей гостевой. Каждая гостевая на сайтах расположенных на хостинге narod.ru имеет свой уникальный идентификатор ID, узнать ID своей гостевой можно пройдя по ссылке "гостевая" из своей мастерской.
В ссылке http://www.narod.ru/guestbook/?owner=54294604 цифры в конце это и есть ID Вашей гостевой книги.

<FORM ACTION=leave_message.xhtml method=post>
<INPUT TYPE=HIDDEN NAME=owner VALUE={OWNERID}>
<INPUT TYPE=HIDDEN NAME=newlocation
VALUE=http://www.narod.ru/guestbook/?owner=Ваш_id&mainhtml=short.txt&messageshtml=sm.txt>
<p>
<INPUT TYPE=TEXT SIZE=30 NAME=your_name>&nbsp;&nbsp;
<label for="author">Ваше имя</label>
</p>
<p>
<INPUT TYPE=TEXT SIZE=30 NAME=your_email>&nbsp;&nbsp;
<label for="email">Ваш e-mail</label>
</p>
<p>
<INPUT TYPE=TEXT SIZE=30 NAME=your_url>&nbsp;&nbsp;
<label for="url">Ваш URL</label>
</p>
<label for="comment">Ваше сообщение:</label><br>
<TEXTAREA ROWS=6 COLS=50 NAME=your_message></TEXTAREA>
<p>
<INPUT TYPE=SUBMIT VALUE="Добавить сообщение">
</p>
</FORM>
{MESSAGES}
<HR>
{PAGEBAR}

У вас должно получиться примерно так

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>гостевая</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <SCRIPT language="javascript" type="text/javascript">
<!--
function ALZ(s) {
return (s<10?"0":"")+s.toString();
}
function C2UT(s) {
d=new Date(s);
return ALZ(d.getDate())+"."+ALZ(d.getMonth()+1)+"."+d.getFullYear()+" "
+ALZ(d.getHours())+":"+ALZ(d.getMinutes());
}
//-->
</SCRIPT>
</head>
<body>
 <FORM ACTION=leave_message.xhtml method=post>
<INPUT TYPE=HIDDEN NAME=owner VALUE={OWNERID}>
<INPUT TYPE=HIDDEN NAME=newlocation
VALUE=http://www.narod.ru/guestbook/?owner=Ваш_id&mainhtml=short.txt&messageshtml=sm.txt>
<p>
<INPUT TYPE=TEXT SIZE=30 NAME=your_name>&nbsp;&nbsp;
<label for="author">Ваше имя</label>
</p>
<p>
<INPUT TYPE=TEXT SIZE=30 NAME=your_email>&nbsp;&nbsp;
<label for="email">Ваш e-mail</label>
</p>
<p>
<INPUT TYPE=TEXT SIZE=30 NAME=your_url>&nbsp;&nbsp;
<label for="url">Ваш URL</label>
</p>
<label for="comment">Ваше сообщение:</label><br>
<TEXTAREA ROWS=6 COLS=50 NAME=your_message></TEXTAREA>
<p>
<INPUT TYPE=SUBMIT VALUE="Добавить сообщение">
</p>
</FORM>
{MESSAGES}
<HR>
{PAGEBAR}
 </body>
</html>

Файл sm.txt описывает стиль выводимых сообщений.

<hr>
<SCRIPT language="javascript" type="text/javascript">
<!--
document.write(C2UT({JSDATE}));
//-->
</SCRIPT><NOSCRIPT>{DATE}</NOSCRIPT>&nbsp;&nbsp;
<a href="mailto:{AUTHOREMAIL}">{AUTHORNAME}</a>&nbsp;&nbsp;
<a href={URL}>{URL}</a>
<p><i>{MESSAGE}</i></p>
<p><b>{OWNERREPLY}</b></p>
<br>

Скрипт покажет время добавления сообщения.
<a href="mailto:{AUTHOREMAIL}">{AUTHORNAME}</a> - почта оставившего сообщение
<a href={URL}>{URL}</a> - URL оставившего сообщение
<i>{MESSAGE}</i> - сообщение посетителя
<b>{OWNERREPLY}</b> - здесь будет Ваш ответ

Файлы short.txt и sm.txt загрузите в корневую папку сайта.
Адреса ссылок в файлах short.txt и sm.txt должны быть абсолютными.
Адрес гостевой будет таким:
http://www.narod.ru/guestbook/?owner=Ваш_id&mainhtml=short.txt&messageshtml=sm.txt


Иконка

Таблицы.
Текст.
Изображения.
Ссылки.
JavaScript.
Палитра цветов.
Выбор цвета.
Музыка, флеш, видео.
DOCTYPE.
Мета теги.
Кодировка.
XHTML - что это такое?
RSS
CSS
Robots.txt
Иконка
Формы для Народ.Ру
Гостевая Народ.Ру
Полезные ресурсы.

Книги по HTML, CSS, JavaScript, PHP и т.д. можно скачать здесь

Иконка в строке с URL'ом

Источник: www.realcoding.net

Хотите чтобы ваша собственная иконка нагло светилась в строке с URL'ом. Или в меню "Избранное". Сделать это на самом деле элементарно.

Процедура создания и использования такого изображения довольно проста. Необходимое изображение хранится в файле favicon.ico, который должен находиться в корне вашего сайта. Рекомендуемые параметры изображения: 16х16 пикселей - размеры; 16 цветов. Однако, можно создавать иконку с размерами 32х32 и 48х48 пикселей. В последнем случае IE сам изменит размеры изображения.

После того, как вы создали файл favicon.ico, поместите его в корневой каталог вашего сервера, и на этом работа завершена.

Если вы, по каким-либо причинам не можете разместить данный файл в корне своего сайта, то используйте директиву

<LINK REL="SHORTCUT ICON" href="/your/path/favicon.ico">.

Кроме того, если вы считаете, что пользователь может занести в "Избранное" не только корневой URL вашего сайта, то скопируйте файл favicon.ico во все директории сайта

Установить к себе на сервер такую иконку достаточно просто - необходимо подготовить рисунок размером 16x16 (32x32) и записать его в формате .ICO в корневую директорию своего сайта с именем favicon.ico.

К тому же, у провайдера должен быть прописан mime type для типа файлов ICO. Проверить несложно: надо в браузере попытаться загрузить файлик - например, yandex.ru/favicon.ico - если грузится текст - значит, mime-type для .ico не прописан.

В принципе, можно не напрягать провайдера и самому прописать mime-type в файле .htaccess, если вам он вам доступен для изменения. Формат примерно следующий:

    AddType image/ICO ICO (регистр важен).

Файлик сделали, mime type даже прописали... а все равно ничего не видим?

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

Может быть, в MSIE 5.5 все работает нормально. но в 5.0 так и есть, а в 4-м вообще, эта фишка не пашет. В NN, разумеется, тем более.


Ссылки

Таблицы.
Текст.
Изображения.
Ссылки.
JavaScript.
Палитра цветов.
Выбор цвета.
Музыка, флеш, видео.
DOCTYPE.
Мета теги.
Кодировка.
XHTML - что это такое?
RSS
CSS
Robots.txt
Иконка
Формы для Народ.Ру
Гостевая Народ.Ру
Полезные ресурсы.

Книги по HTML, CSS, JavaScript, PHP и т.д. можно скачать здесь

Тег <A>

Тег <A> служит для создания гипертекста (ссылок). Гипертекст позволяет осуществлять переход от одного документа к другому. Закрывающий тег обязателен. Тег должен содержать либо атрибут name, либо href

Атрибуты

name - Задает имя элемента. Имя используется, например, для создания ссылок между фреймами

href - Задает URL ресурса, на который должен перейти пользователь, щелкнув по ссылке. Атрибут может указывать как на внешний документ, так и на элемент внутри данного документа.

name - Имя ссылки или фрейма

_blank - Загружает ссылку в новое окно

_parent - Загружает ссылку в родительском окне

_search - Загружает ссылку в панель поиска браузера. Доступно в Internet Explorer 5 и выше

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

_top - Загружает ссылку в topmost окно

title - Всплывающая подсказка

Обычная гиперссылка

<a href="URL" title="всплывающая подсказка">Текст ссылки</a>

Вместо URL надо вставить нужный Вам адрес, например http://narod.yandex.ru/

<a href="http://narod.yandex.ru/" title="народ.ру">Хостинг Narod.Ru</a>

<a href="http://narod.yandex.ru/" target="_blank">ссылка открывает новое окно</a>

Результат

Хостинг Narod.Ru

Картинка в роли ссылки

<a href="http://адрес-на-который-ведет-ссылка/">
<img src="http://адрес-фото.ru/foto.gif" width="88" height="31" alt="альтернативный текст">
</a>
Результат

Это мой баннер

Ссылка на e-mail

<a href="mailto:kongreen@ya.ru" title="kongreen@ya.ru">Мой почтовый ящик</a>

Результат

Мой почтовый ящик

Почтовая гиперссылка имеет несколько параметров (не обязательных):

?subject - Тема пиcьма

&Body - Текст вашего сообщения

&cc - Копии письма через запятую

&bcc - Скрытые копии письма через запятую

title="Выпадающая подсказка" - Ставится отдельно от параметров почтовой ссылки.

Непронумерованные списки

<ul> открывающий тег списка

</ul> закрывающий тег списка

Каждая строка списка начинается с тэга <li> и заканчивается </li>

пример

<ul>
<li><a href="URL" title="всплывающая подсказка">Ссылка 1</a></li>
<li><a href="URL" title="всплывающая подсказка">Ссылка 2</a></li>
<li><a href="URL" title="всплывающая подсказка">Ссылка 3</a></li>
</ul>

Для изменения внешнего вида маркера в тег <ul>
можно включать параметр type со значениями disc, circle, square

<ul type="disc">
  • Ссылка 1
  • Ссылка 2
  • Ссылка 3
<ul type="circle">
  • Ссылка 1
  • Ссылка 2
  • Ссылка 3
<ul type="square">
  • Ссылка 1
  • Ссылка 2
  • Ссылка 3


Мета теги

Таблицы.
Текст.
Изображения.
Ссылки.
JavaScript.
Палитра цветов.
Выбор цвета.
Музыка, флеш, видео.
DOCTYPE.
Мета теги.
Кодировка.
XHTML - что это такое?
RSS
CSS
Robots.txt
Иконка
Формы для Народ.Ру
Гостевая Народ.Ру
Полезные ресурсы.

Книги по HTML, CSS, JavaScript, PHP и т.д. можно скачать здесь

Мета теги

Автор: METASSET Group (mail@metasset.com)

Мета теги используются для описания свойств HTML документа и должны находится в рамках тега HEAD. Если в документе используется тег TITLE, то мета теги рекомендуется вставлять в документ после него.
Мета теги имеют очень широкую функциональную направленность, но многое еще не стандартизировано или находится на стадии разработки.
Мета теги могут идентифицировать авторство HTML документа, его адрес и как часто он обновляется. Поисковые системы используют мета теги для индексации и формирования заголовков HTML документов.
Мета теги могут влиять на режим отображения HTML документов, хотя сами на экран не выводятся.
Далее будут описаны мета теги, принятые большинством поставщиков услуг и программ для сети интернет.

Мета теги делятся на две группы: NAME и HTTP-EQUIV.
Мета теги типа NAME содержат текстовую информацию о документе, его авторе и некоторые рекомендации для поисковых машин. Например: Robots, Description, Keywords, Author, Copyright.
Мета теги типа HTTP-EQUIV влияют на формирование заголовка документа и определяют режим его обработки.

Список мета тегов группы NAME:

  • Мета тег Author

  • Мета тег Copyright

  • Мета тег Description

  • Мета тег Document-state

  • Мета тег Generator

  • Мета тег Keywords

  • Мета тeг Resource-type

  • Мета тeг Revisit

  • Мeтa тeг Robots

  • Мeтa тeг Subject

  • Мeтa тeг URL

Список мета тегов группы HTTP-EQUIV:

  • Мeтa тeг Content-Language

  • Мeтa тeг Content-Script-Type

  • Мeтa тeг Content-Style-Type

  • Мeтa тeг Content-Type

  • Мeтa тeг Expires

  • Мeтa тeг PICS-Label

  • Мeтa тeг Pragma

  • Мeтa тeг Refresh

  • Мeтa тeг Set-Cookie

  • Мeтa тeг Window-target

Author, Copyright

Эти теги не отражаются броузерами, но обрабатываются некоторыми поисковыми машинами. Как правило, нет необходимости использовать эти теги одновременно. В большинстве случаев достаточно одного информационного тега, позволяющего идентифицировать автора или принадлежность документа.
Тег Author должен содержать имя автора, если сайт принадлежит организации, имеет смысл использовать тег Copyright. Информация обязательно должна заключаться в кавычки, например <META Name= Author content="Смирнов Сергей">.
Дополнительно информационные теги могут содержать атрибут "Lang", указывающий язык, на котором написано значение свойства.
Пример: <META Name= Author Lang="ru" content="Смирнов Сергей">.

Description

Мета тег Description - служит для краткого описания странички.
Он используется поисковыми машинами для индексации и в качестве краткой аннотации при ссылке в ответе на запрос. И именно по содержанию этого тега пользователь поисковой системы будет оценивать, соответствует ваш сайт его ожиданиям или нет.
Если тег Description отсутствует, то в качестве описания поисковые машины используют первую строку текста или отрывок из текста с найденным ключевым словом.
Желательно чтобы длина описания не превосходила 80 символов.
Пример: <META Name="Description" content= ". . .">

Document-state

Мета тег Document-state - предназначен для управления индексацией поисковых роботов. Может иметь два значения:

  • Static - Нет необходимости индексировать эту страницу в будущем.

  • Dynamic - Индексировать эту страницу регулярно (по умолчанию).

Режим "Static" предназначен для страниц, которые не меняются в принципе. Если содержание вашей страницы периодически меняется, то использовать этот тег необязательно.
Пример: <META Name="Document-state" content ="Dynamic">

Generator

Мета тег Generator - это всего лишь один из "славного" семейства тегов широко используемых генераторами HTML кода в своих целях. Как правило, для владельца сайта эти теги не несут полезной нагрузки.

Keywords

Мета тег Keywords используется поисковыми машинами для оценки релевантности.
Слова, содержащиеся в теге Keywords, рассматриваются поисковыми машинами как рекомендация, но иногда именно этой капли не хватает, чтоб перевесить чашу.
При формировании списка ключевых слов для мета тега Keywords необходимо использовать слова, содержащиеся в тексте документа. Слова, не содержащиеся в тексте, можно использовать в очень небольших количествах, два - три слова. Вставлять их надо в конец списка.
Ключевые слова не должны повторятся в теге Keywords, в крайнем случае, не более двух раз.
В мета теге Keywords имеет смысл использовать не более 10 слов, большее количество релевантности не увеличит.
В Большинстве случаев поисковые машины находят ключевые слова, стоящие во множественном числе (cats), даже если поиск задан в единственном числе (cat). Поэтому рекомендуется в тег Keywords заносить английские существительные во множественном числе.
Роботы некоторых поисковых машин не переходят к новой строке при анализе мета тега Keywords, поэтому не рекомендуется разбивать его на несколько строк.

Пример: <META Name="Keywords" content="пример, meta, тега">

Если документ написан на нескольких языках, можно использовать добавочный атрибут lang для выбора кодировки (смотри описание мета тега Content-Language).

Пример:
<META Name="Keywords" lang="ru" content="пример, meta, тега">
<META Name="Keywords" lang="en-us" content="meta tegs, example">

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

Resource-type

Мета тег Resource-type - описывает состояние данного документа. Если его значение отлично от “Document”, то поисковые системы не будут его индексировать.
Предназначен для использования в крупных проектах, с множеством документов разного типа.
Некоторые возможные значения:

  • Build

  • Classification

  • Creation

  • Document - Принимается по умолчанию.

  • Formatter

  • Host

  • Operator

  • Random text

  • Rating

  • Site-languages

  • Subject

  • Template

  • Version

Пример: <META Name="Resource-type" content ="Document">

Revisit

Мета тег Revisit - указывает поисковому роботу, через сколько дней ему нужно вернуться и переиндексировать данный документ.
Пример (приходить раз в неделю): <META Name="Revisit" content="7">

Robots

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

  • Index - эта страница должна быть индексирована.

  • Noindex - эта страница не должна индексироваться.

  • Follow - прослеживать гиперссылки на странице.

  • Nofollow - не прослеживать гиперссылки на странице.

  • All - = index, follow (принято по умолчанию).

  • None - = noindex, nofollow.

Тег <META name=Robots content="all"> ничего не меняет в работе робота поисковой машины, так как значение "all" принято по умолчанию.
Но если эта страница создается динамически или очень часто обновляется, то нет смысла ее индексировать, так как информация о странице в поисковой машине и ее истинное содержание будут разными. В этом случае можно рекомендовать поисковой машине не индексировать эту страницу, а только отслеживать на ней гиперссылки, что бы проиндексировать остальную часть сайта <META name=Robots content="noindex,follow">.
При использовании тега, запрещающего отслеживание гиперссылок <META name=Robots content="index,nofollow"> часть сайта может остаться не проиндексированной, так как внутри сайта роботы перемещаются по гиперсылкам. И те страницы, переход на которые заблокирован, не будут индексированы.
Мета тег Robots имеет приоритет над директивами управления, заданными в файле robots.txt.

Subject

Мета тег Subject используется поисковыми машинами для определения тематики документа. Но до тех пор, пока поисковые системы не согласуют классификационные таблицы, использование этого тега не всегда оправдано.

URL

Мета тег URL - служит для исключения из индексации генерируемых страниц и зеркал. Встретив этот тег, робот поисковой машины должен прекратить индексацию текущего документа и перейти по указанной ссылке.
Пример: <META Name="URL" content= "http://www.Main-Site.com">

Content-Language

Мета тег Content-Language - это указание языка документа. Используется поисковыми машинами при индексировании. Хотя большинство из них умеют различать язык по тексту.
Некоторые возможные значения (стандарт [ISO639], [ISO3166]):

de
el
en
en-GB
en-US
en-cockney
es
fr
it
i-navajo
ja
he
nl
ru
pt
x-klingon
zh

- Немецкий.
- Греческий.
- Английский.
- Английский - Великобритания.
- Английский, Американская версия.
- Английский, диалект кокни.
- Испанский.
- Французский.
- Итальянский.
- Навахо (Северная Америка).
- Японский.
- Иврит.
- Голландский.
- Русский.
- Португальский.
- Код "x" обозначает экспериментальный код языка.
- Китайский.

Пример: <META HTTP-EQUIV="Content-language" content ="ru">
В спецификации HTML 4.0 есть альтернативная возможность явного указания языка - <html lang="en">

Content-Script-Type

Meta тег Content-Script-Type - Определение языка программирования сценариев.
Некоторые из возможных значений:

text/javascript
text/perlscript
text/tcl
text/vbscript

- JavaScript (значение по умолчанию).
- PerlScript.
- TCL.
- VBScript.

Пример: <META HTTP-EQUIV="Content-Script-Type" content="text/javascript">
Если тег Content-Script-Type не используется, то тип языка программирования сценариев, отличный от принятого по умолчанию, должен быть указан непосредственно в каждом теге <SCRIPT>, пример <SCRIPT type="text/javascript">.
В одном документе допускается использование нескольких языков программирования сценариев. Указание языка в теге <SCRIPT> имеет более высокий приоритет, в рамках текущего тега <SCRIPT>.

Content-Style-Type

Мета тег Content-Style-Type - указавает язык таблицы стилей, значение "text/css" принимается по умолчанию, если оно вас устраивает и вы не используете в этом документе теги <Style> и <Span>, то использовать этот тег необязательно.
Пример: <META HTTP-EQUIV="Content-Style-Type" content="text/css">

Броузеры определяют язык таблиц стилей по следующему алгоритму:

  • Если в объявлении МЕТА задается язык таблиц стилей, то определяет последнее объявление в потоке символов.

  • Если язык таблиц стилей задается в объявлении STILE, язык таблиц стилей определяет последний заголовок в потоке символов.

  • Если язык таблиц стилей не задан, по умолчанию используется язык "text/css".

Content-Type

Мета тег Content-Type - Отвечает за указание типа документа и кодировки символов.
Использовать мета тег Content-Type надо только с учетом некоторых нюансов.
Во - первых, кодировка символов текста должна соответствовать кодировке, указанной в теге.
Во - вторых, сервер не должен менять кодировку текста при обработке запроса броузера.
В - третьих, если сервер меняет кодировку текста, он должен скорректировать или удалить мета тег Content-Type.
Несоблюдение этих требований может привести к следующему: web-сервер автоматически определит кодировку запроса клиента и отдаст страничку web-броузеру перекодированной. Броузер, в свою очередь, будет читать документ в соответствии с мета тегом Content-Type. И если кодировки не совпадут, то прочитать документ можно будет только после ряда замысловатых манипуляций. Особенно это характерно для старых броузеров IE 3.x - 4.x и Netscape 4.x.
Внимание! Мета тег Content-Type очень часто вставляется генераторами HTML кода.

Некоторые из возможных типов кодировки (стандарт [ISO10646]):

ISO-8859-1
Windows-1251
KOI8-r
cp866
Windows-1252
Windows-1250
shift_jis

- Latin-1, для большинства западноевропейских языков.
- Кириллица (Windows).
- Кириллица (КОИ8-Р).
- Кириллица (DOS).
- Западная Европа (Windows).
- Центральная Европа (Windows).
- Япония (Windows).

Пример: <META HTTP-EQUIV=”Content-Type” content="text/html; charset=windows-1251">

Expires

Мета теги Expires - управляет кэшированием. Если указанная в теге дата прошла, то броузер должен сделать повторный сетевой запрос, а не использовать копию из кэша. Если изначально указать прошедшую дату, то документ не будет кэшироваться.
Некоторые поисковые роботы могут отказаться индексировать документ с устаревшей датой.
Дата должна указываться в стандарте [RFC850].
Пример: <META HTTP-EQUIV="Expires" content="Wed, 26 Feb 1999 08:21:57 GMT">

PICS-Label

Мета тег PICS-Label - (Platform-Independent Content rating Scheme Label) ) определяет уровень доступности сайта (sex, violence), но может использоваться и в других целях.

Pragma

Pragma - Контроль кэширования. При значении “no-cache” кэширование данного не рекомендовано. Предназначен для документов, получаемых в результате работы скрипта.

Пример: <META HTTP-EQUIV="Pragma" content ="no-cache">

Refresh

Мета тег Refresh - определение задержки времени в секундах, после которой броузер автоматически обновляет документ. Дополнительная возможность - автоматическая загрузка другого документа.
Пример: <META HTTP-EQUIV="Refresh" content ="4; URL=http://www.name.com/">

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

Set-Cookie

Set-Cookie - Настройка cookie броузера.
Пример: <META HTTP-EQUIV="Set-Cookie" content="NAME=value; EXPIRES=date; DOMAIN=domain_name; PATH=path; SECURE">
Атрибуты EXPIRES, DOMAIN, PATH и SECURE при необходимости можно опустить.
Пример: <META HTTP-EQUIV="Set-Cookie" content="NAME=value;">

NAME | Имя cookie, не может содержать символы перевода строки, пробелов, точки с запятой (;) и табуляции.
EXPIRES | Время хранения cookie. После указанной даты (в формате "Wdy, DD-Mon-YYYY HH:MM:SS GMT") истекает время хранения cookie. Если этот атрибут не указан, то cookie хранится в течение одного сеанса, до закрытия броузера.
DOMAIN | Домен, для которого задается значение cookie. Для доменов COM, EDU, NET, ORG, GOV, MIL, INT значение можно задавать сокращенно "MY.COM", оно будет распространяться и на домен "WWW.MY.COM". Для всех остальных (в том числе и RU) значение надо задавать полностью "WWW.MY.RU". Если этот атрибут опущен, то по умолчанию используется доменное имя сервера, с которого было выставлено значение cookie.
PATH | Устанавливает подмножество документов, на которые распространяется действие cookie. При значение "/doc" действие cookie будет распространено на все файлы и каталоги в этой директории начинающееся на "doc" (/doc/, /document/, /doc2/, docs.html, doc-test.htm). Если этот атрибут опущен, то значение cookie распространяется только на документы директории, в которой расположен текущий документ.
SECURE | Указывает, что информация о cookie должна пересылается через HTTPS (HTTP с использованием SSL). В противном случае информация о cookie будет пересылается по протоколу HTTP.

Перед запросом к серверу, броузер проверяет cookie. И если атрибуты NAME, DOMAIN и PATH совпадают, броузер посылает cookie серверу.
Если cookie принимает новое значение, старое значение удаляется.
Броузер имеет ряд ограничений по работе с cookie:

  • Единовременно может храниться не более 300 значений cookie.

  • Cookie не может превышать 4 Кбайт.

  • От одного сервера (домена) не может быть более 20 cookie.

Эти ограничения могут быть несколько иными, в зависимости от настройки и типа броузера.
Если происходит превышение лимита (общего или по домену) удаляется первая по времени запись. Удаление происходит, не зависимо от значения атрибута EXPIRES.
При превышении 4 Кбайт, cookie усекается.

Пример: <META HTTP-EQUIV="Set-Cookie" content="NAME=cookexample; EXPIRES=Monday, 22-FEB-02 21:11:51 GMT; DOMAIN=WWW.MY.RU; PATH=/; SECURE">

Window-target

Мета тег Window-target - определяет окно текущей страницы. Приведенный пример может быть использован для прекращения появления новых окон броузера при применении фреймовых структур. Действует для многих (но не для всех) броузеров.
Пример: <META HTTP-EQUIV="Window-target" content ="_top">


Мультимедиа

Таблицы.
Текст.
Изображения.
Ссылки.
JavaScript.
Палитра цветов.
Выбор цвета.
Музыка, флеш, видео.
DOCTYPE.
Мета теги.
Кодировка.
XHTML - что это такое?
RSS
CSS
Robots.txt
Иконка
Формы для Народ.Ру
Гостевая Народ.Ру
Полезные ресурсы.

Книги по HTML, CSS, JavaScript, PHP и т.д. можно скачать здесь

Музыка

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

<bgsound src="music.mid" loop="1">

Параметры

balance - Управляет балансом звука между правой и левой колонками.
loop - Устанавливает, сколько раз проигрывать музыкальный файл.
src - Путь к музыкальному файлу.
volume - Задает громкость звучания музыки.

Размещать тег <bgsound ...> надо в заголовке документа, между тегами head.

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

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

<object type='application/x-mplayer2' data='music.mp3' width='300' height='70'>
<param name='FileName' value='music.mp3'>
<param name='autoplay' value='true или false'>
</object>

Вместо - music.mp3 вставляете адрес своего файла

Параметры true и false работают только в Internet Explorer

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

Флеш

<object type='application/x-shockwave-flash'
data='флешка.swf' width='500' height='350'>
<param name='movie' value='флешка.swf'>
</object>

Вместо - флешка.swf вставляете адрес своего файла

изменить размер можно меняя значения

width='500' ширина
height='350' высота

Видео

<object type='application/x-mplayer2' data='видео.wmv'
width='320' height='300'>
<param name='FileName' value='видео.wmv'>
<param name='autoplay' value='true'>
</object>

Вместо - видео.wmv вставляете адрес своего файла

изменить размер можно меняя значения

width='320' ширина
height='300' высота


Выбор цвета

Таблицы.
Текст.
Изображения.
Ссылки.
JavaScript.
Палитра цветов.
Выбор цвета.
Музыка, флеш, видео.
DOCTYPE.
Мета теги.
Кодировка.
XHTML - что это такое?
RSS
CSS
Robots.txt
Иконка
Формы для Народ.Ру
Гостевая Народ.Ру
Полезные ресурсы.

Книги по HTML, CSS, JavaScript, PHP и т.д. можно скачать здесь

Правильный выбор цвета

Автор: Евгений Жданов
Источник: www.realcoding.net

Цвет - воспринимаемая сетчаткой глаза область светового спектра, видимая часть света с длинами волн в диапазоне от 400 до 700 нанометров. Что? Думаете я только что прочитал Энциклопедию? Определение конечно же верно, но не передаёт всей важности цвета. Ведь всё, что нас окружает, не имеет в действительности никакой окраски. Просто у всех предметов разная способность отражать и поглощать свет, в результате чего мы видим отражённый телами или средами часть света, но уже с другим спектром волн (Дальтоникам дальше не читать). Цвет воспринимает глаз человека, но затрагивает его эмоции. Что может быть красивее заката у побережья тёплого моря в компании красивой девушки? Вот тут сердце стучит нормально, жизнь прекрасна и всё такое... А теперь представьте, что Вы не воспринимаете цвета, всё вокруг чёрно-белое... ну, или 256 оттенков серого :-) Это всё равно, что иметь чёрно-белый монитор.

Важность цвета в нашей жизни поистине огромна. Так же огромна она и в Интернете, где всё на этом и держится. Умение правильно использовать цвет является атрибутом профессионализма WEB-дизайнеров. Это умение позволяет оформителю правильно задать атмосферу сайта, погрузить посетителя в свой мир. Хороший дизайнер всегда сначала продумывает цветовую схему, потом только начинает создавать графику. Искусство оформления приходит с опытом и всегда зависит от количества экспериментов разработчика. Чем больше цветовых комбинаций Вы переберёте, тем быстрее найдёте лучший вариант для своего сайта. Конечно, при этом следует знать некоторые тонкости этого дела:

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

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

Контрастность: цвета фона и основного текста должны быть контрастными. Чем контрастнее, тем удобнее будет читать текст. Попробуйте читать голубой текст на белом фоне :-) Чёрный на белом, белый на чёрном, жёлтый на синем гораздо удобочитаемы. Всегда указывайте в теге <BODY> нужный Вам цвет фона, иначе рискуете столкнуть читателя с настройками его же собственного браузера. Некоторые специально прописывают браузеру использовать серый или пурпурный фон. Хотят смотреть сайты на фоне своего любимого цвета :-) К примеру, может получиться так, что цвет Вашего текста и их фона совпадут или будут схожи, тогда читатель может вообще текста не увидеть :-( Поэтому, не забывайте указывать на странице цвет её фона. На тёмном фоне лучше всего использовать белый или жёлтый цвета, голубой читается сложнее, можно и зелёный использовать. При выборе цвета фона и текста представляйте себе свою аудиторию. Для молодёжи с домашним Интернетом более привычен ночной выход в Интернет. Для них лучше создавать тёмный фон, светлый текст. Если Ваша аудитория состоит из людей пользующихся Интернетом на своей работе (в офисах, учреждениях), следует делать светлый сайт с тёмным текстом. По статистике светлый фон лучше тёмного.

Цветовые ассоциации: Мозг человека в жизненном процессе создаёт ассоциации. При этом внешние раздражители, вызывают порой очень сильные реакции. Представьте себе, к примеру, что Вы облизываете языком дольку лимона. Одного взгляда на колонки у монитора достаточно для того, чтобы вспомнить о музыке. Всё в нашей жизни с чем-то ассоциируется. С цветами дело обстоит таким образом:

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

Желтый:
Радость, счастье, оптимизм, идеализм, воображение, надежда, солнечный свет, лето, золото, философия, мошенничество, малодушие, предательство, ревность, жадность, обман, болезнь, риск.

Синий:
Мир, спокойствие, спокойствие, устойчивость, гармония, объединение, доверие, истина, доверие, консерватизм, безопасность, чистота, порядок, лояльность, небо, вода, холод, технология, депрессия, подавитель аппетита.

Оранжевый:
Энергия, баланс, тепло, энтузиазм, оживленный, экспансивный, пышный, требующий внимания.

Зеленый:
Природа, среда, здоровая, удачи, восстановление, молодость, бодрость, весна, щедрость, плодородие, ревность, неопытность, зависть, неудача.

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

Серый:
Безопасность, надежность, интеллект, степенный, скромность, достоинство, завершенность, твердый, консерватор, практический, старость, печаль, сверление

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

Белый:
Почтение, чистота, простота, чистота, мир, смиренность, точность, невиновность, молодость, рождение, зима, снег, хорошо, стерильность, брак (Западные культуры), смерть (Восточные культуры), холодный, клинический, стерильный.

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

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

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

А что может быть лучше этого?


Изображения

Таблицы.
Текст.
Изображения.
Ссылки.
JavaScript.
Палитра цветов.
Выбор цвета.
Музыка, флеш, видео.
DOCTYPE.
Мета теги.
Кодировка.
XHTML - что это такое?
RSS
CSS
Robots.txt
Иконка
Формы для Народ.Ру
Гостевая Народ.Ру
Полезные ресурсы.

Книги по HTML, CSS, JavaScript, PHP и т.д. можно скачать здесь

Изображения

Установка графики на страницы

<img src="URL/папка/фото.jpg" width="ширина" height="высота" alt="моя фотка">

URL - адрес сайта (http://www.ваш сайт.ру)
папка - название папки с фотографией (латинскими буквами без_пробелов)
фото - название фотографии (латинскими буквами без_пробелов)
jpg - расширение фотографии (допускается - jpg, gif, png)
width - укажите ширину фотографии
height - укажите высоту фотографии
alt - при отключенной графике посетитель увидит альтернативный текст

Адрес картинки может быть абсолютным, то есть указывается полный адрес картинки (например, http://www.ваш сайт/папка/фото.jpg) и относительным, когда указывается папка и файл (например, папка/фото.jpg).

пример

<img src="images/photo.jpg" width="250" height="200" alt="моя фотка">

моя фотка

При отключенной графике посетитель увидит текст включенный Вами в параметр alt

Здесь Вы могли бы увидеть мою фотку, но у Вас отключена графика. А я блин, такая растакая красивая )))


Полезные ресурсы

Таблицы.
Текст.
Изображения.
Ссылки.
JavaScript.
Палитра цветов.
Выбор цвета.
Музыка, флеш, видео.
DOCTYPE.
Мета теги.
Кодировка.
XHTML - что это такое?
RSS
CSS
Robots.txt
Иконка
Формы для Народ.Ру
Гостевая Народ.Ру
Полезные ресурсы.

Книги по HTML, CSS, JavaScript, PHP и т.д. можно скачать здесь

Полезные ресурсы RU

  • Сад css-Дзен: Красота в CSS-дизайне
  • Учебники по HTML, CSS, дизайну, графике и создании сайтов
  • Спецификация HTML 4.01
  • Спецификация CSS 2
  • Расширяемый язык разметки (XML)
  • Robots.Txt
  • FTP filezilla
  • Самоучитель по Photoshop
  • Иконки
  • Независимый Сервис для Проведения Опросов и Голосований
  • Каталог DMOZ
  • Графика для веб дизайна

Полезные ресурсы EN

  • The W3C Markup Validation Service
  • The W3C CSS Validation Service
  • Cascading Style Sheets Optimization
  • CSS Code Beautifier
  • Alistapart.com
  • Stopdesign
  • Building Standards Compliant Web Sites
  • CSS Library
  • Эльдорадо для веб дизайнеров
  • CSS Property Index
  • Школа CSS
  • Полезный ресурс
  • Сотня онлайн генераторов

Браузеры

  • Firefox
  • Валидатор для Firefox
  • Green Browser
  • Avant Browser
  • Maxthon
  • Opera
  • Русификаторы для Opera
  • Crazy Browser
  • Русификатор для Crazy Browser (скачать zip файл)


С чего начинать

Таблицы.
Текст.
Изображения.
Ссылки.
JavaScript.
Палитра цветов.
Выбор цвета.
Музыка, флеш, видео.
DOCTYPE.
Мета теги.
Кодировка.
XHTML - что это такое?
RSS
CSS
Robots.txt
Иконка
Формы для Народ.Ру
Гостевая Народ.Ру
Полезные ресурсы.

Книги по HTML, CSS, JavaScript, PHP и т.д. можно скачать здесь

Все о файле Robots.txt

Robots.txt Tutorial
автор: www.searchengineworld.com
перевод: Александр Качанов

Поисковые сервера всегда перед индексацией вашего ресурса ищут в корневом каталоге вашего домена файл с именем "robots.txt" (http://www.mydomain.com/robots.txt). Этот файл сообщает роботам (паукам-индексаторам), какие файлы они могут индексировать, а какие нет.

Формат файла robots.txt - особый. Он состоит из записей. Каждая запись состоит из двух полей: строки с названием клиентского приложения (user-agent), и одной или нескольких строк, начинающихся с директивы Disallow:

<Поле> ":" <значение>

Robots.txt должен создаваться в текстовом формате Unix. Большинство хороших текстовых редакторов уже умеют превращать символы перевода строки Windows в Unix. Либо ваш FTP-клиент должен уметь это делать. Для редактирования не пытайтесь пользоваться HTML-редактором, особенно таким, который не имеет текстового режима отображения кода.

Поле User-agent

Строка User-agent содержит название робота. Например:

User-agent: googlebot

Если вы обращаетесь ко всем роботам, вы можете использовать символ подстановки "*":

User-agent: *

Названия роботов вы можете найти в логах вашего веб-сервера. Для этого выберите только запросы к файлу robots.txt. большинство поисковых серверов присваивают короткие имена своим паукам-индексаторам.

Поле Disallow:

Вторая часть записи состоит из строк Disallow. Эти строки - директивы для данного робота. Они сообщают роботу какие файлы и/или каталоги роботу неразрешено индексировать. Например следующая директива запрещает паукам индексировать файл email.htm:

Disallow: email.htm

Директива может содержать и название каталога:

Disallow: /cgi-bin/

Эта директива запрещает паукам-индексаторам лезть в каталог "cgi-bin".

В директивах Disallow могут также использоваться и символы подстановки. Стандарт диктует, что директива /bob запретит паукам индексировать и /bob.html и /bob/index.html.

Если директива Disallow будет пустой, это значит, что робот может индексировать ВСЕ файлы. Как минимум одна директива Disallow должна присутствовать для каждого поля User-agent, чтобы robots.txt считался верным. Полностью пустой robots.txt означает то же самое, как если бы его не было вообще.

Пробелы и комментарии

Любая строка в robots.txt, начинающаяся с #, считается комментарием. Стандарт разрешает использовать комментарии в конце строк с директивами, но это считается плохим стилем:

Disallow: bob #comment

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

Пробел в начале строки разрешается, но не рекомендуется.

  Disallow: bob #comment

Примеры

Следующая директива разрешает всем роботам индексировать все ресурсы сайта, так как используется символ подстановки "*".

User-agent: *
Disallow:

Эта директива запрещает всем роботам это делать:

User-agent: *
Disallow: /

Данная директива запрещает всем роботам заходить в каталоги "cgi-bin" и "images":

User-agent: *
Disallow: /cgi-bin/
Disallow: /images/

Данная директива запрещает роботу Roverdog индексировать все файлы сервера:

User-agent: Roverdog
Disallow: /

Данная директива запрещает роботу googlebot индексировать файл cheese.htm:

User-agent: googlebot
Disallow: cheese.htm

Если вас интересуют более сложные примеры, попутайтесь вытянуть файл robots.txt с какого-нибудь крупного сайта, например CNN или Looksmart.

Дополнения к стандартам

Несмотря на то, что были предложения по расширению стандарта и введению директивы Allow или учета версии робота, эти предложения формально так и не были утверждены.

Поход в поисках robots.txt

При проверке нашего валидатора robots.txt (см. конец статьи), нам понадобилось найти много-много "корма" для него. Мы создали спайдер, который скачивал с каждого найденного сайта лишь один файл robots.txt. Мы прошлись по всем ссылкам и доменам, занесенным в Open Directory Project. Так мы прошлись по 2.4 миллионам URL и накопали файлов robots.txt примерно на 75 килобайт.

Во время этого похода мы обнаружили огромное количество проблем с файлами robots.txt. Мы увидели, что 5% robots.txt плохой стиль, а 2% файлов были настолько плохо написаны, что ни один робот не смог бы их понять. Вот список некоторых проблем, обнаруженных нами:

Перевернутый синтаксис

Одна из самых распространенных ошибок - перевернутый синтаксис:

User-agent: *
Disallow: scooter

А должно быть так:

User-agent: scooter
Disallow: *

Несколько директив Disallow в одной строке:

Многие указывали несколько директив на одной строке:

Disallow: /css/ /cgi-bin/ /images/

Различные пауки поймут эту директиву по разному. Некоторые проигнорируют пробелы и поймут директиву как запрет на индексацию каталога /css//cgi-bin//images/. Либо они возьмут только один каталог (/images/ или /css/) и проигнорируют все остальное.

Правильный синтаксис таков:

Disallow: /css/
Disallow: /cgi-bin/
Disallow: /images/

Перевод строки в формате DOS:

Еще одна распространенная ошибка - редактирование файла robots.txt в формате DOS. Несмотря на то, что из-за распространенности данной ошибки многие пауки-идексаторы научились понимать ее, мы считаем это ошибкой. Всегда редактируйте свой robots.txt в режиме UNIX и закачивайте файл на сайт в режиме ASCII. Многие FTP-клиенты умеют при закачке в текстовом режиме переводить символы строки из DOS-формата в UNIX-формат. Но некоторые этого не делают.

Комментарии в конце строки:

Согласно стандарту, это верно:

Disallow: /cgi-bin/ #this bans robots from our cgi-bin

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

Пробелы в начале строки:

  Disallow: /cgi-bin/

Стандарт ничего не говорит по поводу пробелов, но это считается плохим стилем. И опять-таки, стоит ли рисковать?

Редирект на другую страницу при ошибке 404:

Весьма распространено, когда веб-сервер при ошибке 404 (Файл не найден) выдает клиенту особую страницу. При этом веб-сервер не выдает клиенту код ошибки и даже не делает редиректа. В этом случае робот не понимает, что файл robots.txt отсутствует, вместо этого он получит html-страницу с каким-то сообщением. Конечно никаких проблем здесь возникнуть не должно, но стоит ли рисковать? Бог знает, как разберет робот этот html-файл, приняв его за robots.txt. чтобы этого не происходило, поместите хотя бы пустой robots.txt в корневой каталог вашего веб-сервера.

Конфликты директив:

Чтобы вы сделали на месте робота slurp, увидев данные директивы?

User-agent: *
Disallow: /
#
User-agent: slurp
Disallow:

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

Верхний регистр всех букв - плохой стиль:

USER-AGENT: EXCITE
DISALLOW:

Несмотря на то, что стандарт безразлично относится к регистру букв в robots.txt, в именах каталогов и файлов регистр все-таки важен. Лучше всего следовать примерам и в верхнем регистре писать первые буквы только в словах User и Disallow.

Список всех файлов

Еще одна ошибка - перечисление всех файлов в каталоге:

Disallow: /AL/Alabama.html
Disallow: /AL/AR.html
Disallow: /Az/AZ.html
Disallow: /Az/bali.html
Disallow: /Az/bed-breakfast.html

Вышеприведенный пример можно заменить на:

Disallow: /AL
Disallow: /Az

Помните, что начальная наклонная черта обозначает, что речь идет о каталоге. Конечно, ничто не запрещает вам перечислить парочку файлов, но мы речь ведем о стиле. Данный пример взят из файла robots.txt, размер которого превышал 400 килобайт, в нем было упомянуто 4000 файлов! Интересно, сколько роботов-пауков, посмотрев на этот файл, решили больше не приходить на этот сайт.

Есть только директива Disallow!

Нет такой директивы Allow, есть только Disallow. Этот пример неверный:

User-agent: Spot
Disallow: /john/
allow: /jane/

Правильно будет так:

User-agent: Spot
Disallow: /john/
Disallow:

Нет открывающей наклонной черты:

Что должен сделать робот-паук с данной директивой:

User-agent: Spot
Disallow: john

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

Еще мы видели, как люди записывали в файл robots.txt ключевые слова для своего сайта (подумать только - для чего?).

Бывали такие файлы robots.txt, которые были сделаны в виде html-документов. Помните, во FrontPage делать robots.txt не стоит.

Неправильно настроенный сервер

Почему вдруг на запрос robots.txt веб-сервер выдает бинарный файл? Это происходит в том случае, если ваш веб-сервер настроен неправильно, либо вы неправильно закачали на сервер сам файл.

Всегда после того, как вы закачали файл robots.txt на сервер, проверяйте его. Достаточно в броузере набрать простой запрос:

http://www.mydomain.com/robots.txt

Вот и все что нужно для проверки.

Особенности Google:

Google - первый поисковый сервер, который поддерживает в директивах регулярные выражения. Что позволяет запрещать индексацию файлов по их расширениям.

User-agent: googlebot
Disallow: *.cgi

В поле user-agent вам следует использовать имя "googlebot". Не рискуйте давать подобную директиву другим роботам-паукам.

МЕТА-тег robots

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

Кроме того, этим тегом могут воспользоваться те, кто не может доступиться к корневому каталогу сервера и изменить файл robots.txt.

Некоторые поисковые сервера, такие как Inktomi например, полностью понимают мета-тег robots. Inktomi пройдет по всем страницам сайта если значение данного тега будет "index,follow".

Формат мета-тега Robots

Мета тег robots помещается в тег html-документа. Формат достаточно прост (регистр букв значения не играет):

<HTML>
<HEAD>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<META NAME="DESCRIPTION" CONTENT="Эта страница ….">
<TITLE>...</TITLE>
</HEAD>
<BODY>

Значения мета-тега robots

Данному мета-тегу можно присвоить варианта четыре значений. Атрибут content может содержать следующие значения:

index, noindex, follow, nofollow

Если значений несколько, они разделяются запятыми.

В настоящее время лишь следующие значения важны:

Директива INDEX говорит роботу, что данную страницу можно индексировать.

Директива FOLLOW сообщает роботу, что ему разрешается пройтись по ссылкам, присутствующим на данной странице. Некоторые авторы утверждают, что при отсутствии данных значений, поисковые сервера по умолчанию действуют так, как если бы им даны были директивы INDEX и FOLLOW. К сожалению это не так по отношению к поисковому серверу Inktomi. Для Inktomi значения по умолчанию равны "index, nofollow".

Итак, глобальные директивы выглядят так:

Индексировать всё = INDEX, FOLLOW

Не индексировать ничего = NOINDEX,NOFLLOW

Примеры мета-тега robots:

<META NAME=ROBOTS" CONTENT="NOINDEX, FOLLOW">
<META NAME=ROBOTS" CONTENT="INDEX, NOFOLLOW">
<META NAME=ROBOTS" CONTENT="NOINDEX, NOFOLLOW">


RSS

Таблицы.
Текст.
Изображения.
Ссылки.
JavaScript.
Палитра цветов.
Выбор цвета.
Музыка, флеш, видео.
DOCTYPE.
Мета теги.
Кодировка.
XHTML - что это такое?
RSS
CSS
Robots.txt
Иконка
Формы для Народ.Ру
Гостевая Народ.Ру
Полезные ресурсы.

Книги по HTML, CSS, JavaScript, PHP и т.д. можно скачать здесь

RSS

Источник: www.kanban.ru

Для начала, определимся с тем, что такое RSS.

Кратко, RSS – это формат синдикации web-контента. Это обычный формат представления данных, основанный на языке XML. Первоначально этот формат был разработан специально для экспорта заголовков новостей. Однако область его применения может выходить далеко за рамки этой задачи. Вы с легкостью можете экспортировать любую информацию, любые материалы. Формат примечателен тем, что дает единство представления данных. Любая информация, оформленная в RSS должна соответствовать определенной структуре, о чем будет написано ниже. Благодаря такой формализации, конечный пользователь получает информацию в стандартизированном виде, что упрощает чтение и работу с ней. Именно удобством работы и объясняется растущий интерес к этому формату и его всё большая популяризация. На данный момент синдицируют информацию уже сотни тысяч сайтов по всему миру, и если Вы, как пользователь, хотите быть в курсе новостей того или иного сайта, Вам нет нужды постоянно его посещать. Раньше Вы могли подписаться на новости сайта, либо на информационную рассылку, однако, RSS имеет ряд неоспоримых преимуществ перед технологией электронной почты, одни из важнейших – это отсутствие спама и гарантированность доставки информации.
Более подробное введение в формат RSS и основы по его использованию, удачно изложены здесь: http://www.webmascon.com/topics/technologies/9a.asp.

Ниже приводится краткая спецификация формата RSS 2.0. Настоящая спецификация основана на документе, расположенном по адресу: http://blogs.law.harvard.edu/tech/rss, где Вы можете почерпнуть более обширную информацию на английском языке.

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

RSS – это диалект языка XML. Соответственно, все RSS-файлы должны соответствовать спецификации XML 1.0. Это значит, что правильный rss-файл должен начинаться строкой (приведен пример для универсальной кодировки UTF-8, старайтесь использовать только её):

<?xml version="1.0" encoding="UTF-8" ?>

Корневым элементом документа является элемент <rss> с одним параметром version. Для файла в формате RSS 2.0 он должен выглядеть так:

<rss version="2.0">

Внутри элемента <rss> содержится вся информация.
Упрощенно, структура RSS-файла выглядит так:

<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
<title></title>
<link></link>
<description></description>
<image>
<url></url>
<link></link>
<title></title>
</image>
<lastBuildDate></lastBuildDate>

<item>
<title></title>
<link></link>
<description></description>
</item>
. . .
</channel>
</rss>

Далее рассмотрим все допустимые элементы в подробностях.

Channel
Элемент Описание Пример
title Заголовок канала. Основной элемент, по которому люди смогут идентифицировать Ваш канал. Используйте заголовки умеренной длинны, и максимально информативные. Вначале заголовка можно упомянуть ваш сайт, если он популярен. Отличной техникой является неизменный заголовок, ни в коем случая не указывайте в заголовке дат и тому подобного, для этого есть другие элементы. Избегайте СПАМА в заголовках, поисковиков по RSS всё-равно пока нет, а пользователю разобрать что-то будет нелегко. Kanban.Ru - каталог RSS-каналов.
link Ссылка на Ваш сайт. Ссылка должна вести на главную страницу вашего сайта. Или, как максимум, на соответствующий каналу раздел. http://www.kanban.ru/
description Описание канала. Описание не должно повторять заголовок, а должно его расшифровывать и дополнять. Последние поступления в каталог русских RSS-каналов.
language Язык, на котором написан канал. Несмотря на то, что этот элемент необязателен, УКАЗЫВАЙТЕ ЕГО ВСЕГДА. Это поможет миновать целый список проблем. Есть 2 списка значений для этого элемента этот и этот. Оба допустимы. ru, ru-ru
copyright Копирайт Copyright 2004, ОАО "Рога и копыта"
managingEditor Электронная почта редактора канала (лица, отвечающего за информацию, представленную в канале). vasja@pupkin.com (Vasja Pupkin)
webMaster Электронная почта веб-мастера (лица, отвечающего за техническую реализацию канала). vasja@pupkin.com (Vasja Pupkin)
pubDate Дата публикации информации в канале. Каждый раз, когда информация публикуется, необходимо обновлять этот элемент. Это позволит многим агрегаторам ранжировать Ваш канал по актуальности представленной информации. Формат нужно использовать только этот. Единственное исключение, в том, что год можно указать 2-мя последними числами. Но никогда так не делайте. Fri, 17 Jun 2004 00:00:01 GMT
lastBuildDate Время последнего изменения канала.Отличие от предыдущего в том, что эта дата отражает последнее изменения контента, в то время, как pubDate – дата публикации, а не последнего редактирования.Например, Ваш канал может быть опубликован год назад с информацией о курсах валют, которые обновляются каждый день. Fri, 17 Jun 2004 00:00:01 GMT
category Определяет категорию, к которой принадлежит канал. Можно указать несколько. Подробнее... <category>Newspapers</category>
generator Заполняется программой, сгенерировавшей канал. HelloWorld! 1.0
docs Ссылка на страницу с документацией по формату, который используется в этом RSS файле. Если инопланетяне получат RSS файл, они всегда смогут его прочитать, ознакомившись со спецификацией по указанному здесь адресу. http://blogs.law.harvard.edu/tech/rss
cloud Указывает веб-сервис, поддерживающий интерфейс rssCloud, отвечающий за уведомления об изменениях в канале. Более подробная информация здесь. <cloud domain="rpc.sys.com" port="80" path="/RPC2" registerProcedure="pingMe" protocol="soap"/>
ttl Этот элемент поддерживается для совместимости, ранее он был предназначен для указания времени в минутах, в течение которого этот канал допустимо кэшировать. 60
image Путь к изображению в формате GIF, JPEG или PNG, отображаемому в заголовке канала.
Дочерние узлы:
<url> - URL изображения.
<title> - описание изображения, используется в атрибуте ALT HTML-тега IMG, если агрегатор конвертирует канал в HTML.
<link> - cсылка на Ваш сайт. Ссылка должна вести на главную страницу вашего сайта. Или, как максимум, на соответствующий каналу раздел.
Элементы title и link лучше всего делать копией этих же элементов, указанных в channel.
<description> - описание картинки. Используется в элементе TITLE HTML-тега IMG.
<width> - ширина картинки в пикселях. Максимально допустимое значение - 400, по умолчанию - 88.
<height> - высота картинки в пикселях. Максимально допустимое значение - 144, по умолчанию - 31.
rating Рейтинг PICS канала.
textInput Определяет строку ввода для пользователя. Дочерние узлы:
<title> - надпись на кнопке.
<description> - разъяснение того, что требуется ввести в поле.
<name> - атрибут name для HTML-тега INPUT.
<link> - адрес скрипта, которому будут переданы данные.
Назначение этого элемента туманно. Вы можете использовать его, например, для ввода пользователем поискового запроса, либо для организации обратной связи, однако, большинство агрегаторов этот элемент игнорируют.
skipHours Может содержать до 24-х элементов <hour>. Они указывают агрегатору, в какие часы можно не обновлять канал, а брать его из кэша. Значения элементов должны быть в диапазоне 0..23. <hour>0</hour>
<hour>1</hour>
<hour>2</hour>
skipDays Может содержать до 7 элементов <day>. Они указывают, в какие дни недели агрегатор может не обновлять канал. Диапазон значений: Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday. <day>Saturday</day>
<day>Sunday</day>
Item Канал может содержать несколько элементов <item>. <item> может содержать статью, целиком, в таком случае дочерний элемент link не заполняется. Item может содержать только заголовок статьи, а ссылка будет вести на полный текст. Любая комбинация допустима. Все дочерние элементы item необязательны, однако хотя бы 1 элемент (либо title, либо description) должен присутствовать.

Item
Элемент Описание Пример
title Заголовок статьи. С добрым утром, страна!
link Ссылка на полный текст статьи. http://www.ваш_сайт.ru/
articles/2004/06/17/01.htm
description Полный текст статьи, либо аннотация.
author Адрес электронной почты автора статьи.
category То же самое, что и category в channel.
comments Ссылка на страницу с комментариями к статье. http://www.ваш_сайт.ru/
articles/2004/06/17/comments01.htm
enclosure Вложение. К статье можно присоединить любой файл, ссылка на него будет отображена агрегатором. <enclosure url="http://www.ваш_сайт.ru/
articles/2004/06/17/01.mp3" length="12216320" type="audio/mpeg" />
guid Уникальная строка, однозначно идентифицирующая статью в рамках данного канала. Особых требований нет, однако, стало традицией использовать полный интернет адрес, по которому доступен оргинал статьи. Установка атрибута isPermaLink в true, будет означать, что именно такой идентификатор и используется. <guid isPermaLink="true">http://www.ваш_сайт.ru/
articles/2004/06/17/01.htm>
pubDate Дата публикации статьи. Некоторые агрегаторы не будут отображать статью, если указанная дата еще не настала. Но далеко не все. Sun, 19 May 2002 15:21:36 GMT
source Для каждого <item> cодержит адрес канала и копию его атрибута title. <source url="http://www.kanban.ru/top30.xml">KANBAN.Ru. 30 новостей</source>

* Настоящий документ не претендует на точность и полноту указанных сведений.
* За более полной и достоверной информацией обращайтесь по адресу:

http://blogs.law.harvard.edu/tech/rss


С чего начинать

Таблицы.
Текст.
Изображения.
Ссылки.
JavaScript.
Палитра цветов.
Выбор цвета.
Музыка, флеш, видео.
DOCTYPE.
Мета теги.
Кодировка.
XHTML - что это такое?
RSS
CSS
Robots.txt
Иконка
Формы для Народ.Ру
Гостевая Народ.Ру
Полезные ресурсы.

Книги по HTML, CSS, JavaScript, PHP и т.д. можно скачать здесь

Тег <script>

Тег <script> предназначен для описания скриптов, позволяющих выполнять разные действия непосредственно на машине пользователя. Распологаются данные скрипты внутри HTML документов.

<script type="text/javascript">
<!--
Текст программы
//-->
</script>

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

<script type="text/javascript" src="file.js"></script>

Несколько простых скриптов

Скрипт дата

<script type="text/javascript">
<!--
var months=new Array(13);
months[1]="января";
months[2]="февраля";
months[3]="марта";
months[4]="апреля";
months[5]="мая";
months[6]="июня";
months[7]="июля";
months[8]="августа";
months[9]="сентября";
months[10]="октября";
months[11]="ноября";
months[12]="декабря";
var time=new Date();
var lmonth=months[time.getMonth() + 1];
var date=time.getDate();
var year=time.getYear();
var day=time.getDay() + 1;
if (year < 2000)
year = year + 1900;
if(day==1) DayofWeek = "Воскресенье.";
if(day==2) DayofWeek = "Понедельник.";
if(day==3) DayofWeek = "Вторник.";
if(day==4) DayofWeek = "Среда.";
if(day==5) DayofWeek = "Четверг.";
if(day==6) DayofWeek = "Пятница.";
if(day==7) DayofWeek = "Суббота.";
document.write( "<right>"+ date + " ");
document.write(lmonth + " " + year + " "+ "года" + ","+" " + DayofWeek + "<\/right>");
//-->
</script>

Результат

Скрипт приветствия (по времени суток)

<script type="text/javascript">
<!--
var h=(new Date()).getHours();
if (h > 23 || h < 7) document.write("Доброй ночи!");
if (h > 6 && h < 12) document.write("С добрым утром!");
if (h > 11 && h < 19) document.write("Добрый день!");
if (h > 18 && h < 24) document. write("Добрый вечер!");
-->
</script>

Результат

Защита e-mail от ботов

<script type="text/javascript">
//<![CDATA[
var at=' ';
at += '<a hr';
at += 'ef="mailto:greenfam';
at += '@y';
at += 'a.ru">greenfam@y';
at += 'a.ru<\/a>';
document.write(at);
//]]>
</script>

Результат

Отключение правой кнопки мыши

<script type="text/javascript">
<!--
var message="";
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2) {
(message);
return false;}}}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS;
}else{
document.onmouseup=clickNS;
document.oncontextmenu=clickIE;
}
document.oncontextmenu=new Function("return false")
-->
</script>


Таблицы

Таблицы.
Текст.
Изображения.
Ссылки.
JavaScript.
Палитра цветов.
Выбор цвета.
Музыка, флеш, видео.
DOCTYPE.
Мета теги.
Кодировка.
XHTML - что это такое?
RSS
CSS
Robots.txt
Иконка
Формы для Народ.Ру
Гостевая Народ.Ру
Полезные ресурсы.

Книги по HTML, CSS, JavaScript, PHP и т.д. можно скачать здесь

Таблицы

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

Теги таблиц

<table> открывающий тег таблицы
</table> закрывающий тег таблицы

<tr>тег - начало строки
эти теги создают новый ряд (строку) ячеек
</tr> тег - конец строки

<th> открывающий тег ячейки
содержимое ячейки - table header (заголовок таблицы)
текст внутри этих тегов будет выделен полужирным шрифтом и отцентрирован
</th> закрывающий тег ячейки

<td> открывающий тег ячейки
содержимое ячейки
</td> закрывающий тег ячейки

Атрибуты

width - ширина таблицы указывается в "%" или в пикселях "800"

border - толщина рамки

cellspacing - расстояние между ячейками

cellpadding - расстояние между рамкой ячейки и текстом

align - выравнивание по горизонтали ( слева="left" центр="center" справа="right" )

valign - выравнивание по вертикали ( верх="top" середина="middle" низ="bottom" )

colspan - количество ячеек по горизонтали

rowspan - количество ячеек по вертикали

Таблицы

Таблица с одной ячейкой

<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>Ячейка </td>
</tr>
</table>

Результат

Ячейка

Таблица может включать заголовок, который располагается между тегами <caption>Таблица</caption>

Таблица с тремя ячейками (колонки)

<table border="1" cellpadding="0" cellspacing="0" width="100%">
<caption>Заголовок</caption>
<tr>
<td>Это ячейка № 1</td>
</tr>
<tr>
<td>Это ячейка № 2</td>
</tr>
<tr>
<td>Это ячейка № 3</td>
</tr>
</table>

Результат

Заголовок
Это ячейка № 1
Это ячейка № 2
Это ячейка № 3

Если до и после тегов <td> </td> не ставить теги <tr> </tr> ячейки будут располагаться горизонтально

Таблица с тремя ячейками (столбцы)

<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>Это ячейка № 1</td>
<td>Это ячейка № 2</td>
<td>Это ячейка № 3</td>
</table>

Результат

Это ячейка № 1 Это ячейка № 2 Это ячейка № 3

Таблица (три строки) + (три столбца)

<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="33%">1</td>
<td width="33%">01</td>
<td width="34%">001</td>
</tr>
<tr>
<td width="33%">2</td>
<td width="33%">02</td>
<td width="34%">002</td>
</tr>
<tr>
<td width="33%">3</td>
<td width="33%">03</td>
<td width="34%">003</td>
</tr>
</table>

Результат

1 | 01 | 001
2 | 02 | 002
3 | 03 | 003

Чтобы текст не касался границ ячеек, изменяйте значение параметра cellpadding

Отступ

<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tr>
<td width="33%">1</td>
<td width="33%">01</td>
<td width="34%">001</td>
</tr>
<tr>
<td width="33%">2</td>
<td width="33%">02</td>
<td width="34%">002</td>
</tr>
<tr>
<td width="33%">3</td>
<td width="33%">03</td>
<td width="34%">003</td>
</tr>
</table>

Результат

1 | 01 | 001
2 | 02 | 002
3 | 03 | 003

При измении значения параметра cellspacing меняется внешний вид таблицы

cellspacing

<table border="1" cellpadding="5" cellspacing="10" width="100%">
<tr>
<td width="33%">1</td>
<td width="33%">01</td>
<td width="34%">001</td>
</tr>
<tr>
<td width="33%">2</td>
<td width="33%">02</td>
<td width="34%">002</td>
</tr>
<tr>
<td width="33%">3</td>
<td width="33%">03</td>
<td width="34%">003</td>
</tr>
</table>

Результат

1 | 01 | 001
2 | 02 | 002
3 | 03 | 003

Также можно вставлять в таблицу еще одну, две и т.д. таблицы, вообщем столько, сколько нужно.

Вложенные таблицы

<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%">логотип</td>
</tr>
<tr>
<td width="100%">

 <table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="20%" valign="top">
<ul>
<li><a href="index.html" title="Ссылка">Ссылка</a></li>
<li><a href="index.html" title="Ссылка">Ссылка</a></li>
<li><a href="index.html" title="Ссылка">Ссылка</a></li>
</ul>
</td>
<td width="50%" valign="top">контент-верх</td>
<td width="30%" valign="top">суб-контент-верх</td>
</tr>
<tr>
<td width="20%">текст</td>
<td width="50%">контент-низ</td>
<td width="30%">суб-контент-низ</td>
</tr>
</table>

 </td>
</tr>
<tr>
<td width="100%">подвал</td>
</tr>
</table>

Результат

логотип
  • Ссылка
  • Ссылка
  • Ссылка
 контент-верх суб-контент-верх
текст контент-низ суб-контент-низ
подвал

CSS (Таблицы Каскадных Стилей)

Делая таблицы для своих страниц, лучше избегать вставок background'ов и т.д.. Используйте для этого CSS. Добавив таблице, ячейке class (class="...") или id (id="..."), можно будет управлять их внешним видом, используя CSS.

В Интернете полно бесплатных учебников по CSS, которые можно скачать, очень хороший справочник по CSS, написал Влад Мержевич, скачать его можно нажав на ссылку.


Текст

Таблицы.
Текст.
Изображения.
Ссылки.
JavaScript.
Палитра цветов.
Выбор цвета.
Музыка, флеш, видео.
DOCTYPE.
Мета теги.
Кодировка.
XHTML - что это такое?
RSS
CSS
Robots.txt
Иконка
Формы для Народ.Ру
Гостевая Народ.Ру
Полезные ресурсы.

Книги по HTML, CSS, JavaScript, PHP и т.д. можно скачать здесь

Текст

Для создания заголовка определенного размера текст окружают тегами
<h1> <h2> <h3> <h4> <h5> <h6> закрывающий тег обязателен.

<h1>Заголовок</h1>

<h2>Заголовок</h2>

<h3>Заголовок</h3>

<h4>Заголовок</h4>

<h5>Заголовок</h5>
<h6>Заголовок</h6>

Для создания нового абзаца используется тег <p>абзац</p> закрывающий тег обязателен.

Элемент align используется для выравнивания текста

<p align="left"> По левому краю</p>
<p align="center"> По центру</p>
<p align="right"> По правому краю</p>
<p align="justify">По ширине</p>

Для перевода текста на новую строчку без создания абзаца используется - тег <br>

Любить тебя я не устану,<br>
Забыть тебя я не смогу,<br>
Писать тебе не перестану,<br>
Пока ответ не получу!<br>

Для физического выделения используются теги <b> и <i>

<B> Жирный текст </B>
<I> Курсив </I>

Для логического выделения используются теги <strong> и <em>

<strong> Жирный текст </strong>
<em> Курсив </em>

Для выделения цитаты в тексте используется тег <blockquote>

<blockquote> цитата </blockquote>

Для установки горизонтальной линии используется тег <hr>

тег устанавливающий горизонтальную линию

используется для разделения элементов на странице

Пронумерованные списки

<ol> открывающий тег

</ol> закрывающий тег

Каждая строка списка начинается с тэга <li> и заканчивается </li>

<ol>
<li>Во первых мороженное</li>
<li>Во вторых пороженное</li>
<li>В третьих...</li>
</ol>

Тэг <ol> может иметь следующие параметры:

<ol type="A">

type - вид счетчика:
A - большие латинские буквы
a - маленькие латинские буквы
I - большие римские цифры
i - маленькие римские цифры
1 - обычные цифры

start - устанавливает число, с которого будет начинаться отсчет.

<ol type="A" start="1">

  1. Во первых мороженное
  2. Во вторых пороженное
  3. В третьих...

Бегущая строка

Предупреждение: <marquee> не одобряется стандартами W3C

<marquee scrollamount="1" width="100%" height="25">
Бегущая строка слева на право
</marquee>

Бегущая строка слева на право


Палитра веб цветов

Таблицы.
Текст.
Изображения.
Ссылки.
JavaScript.
Палитра цветов.
Выбор цвета.
Музыка, флеш, видео.
DOCTYPE.
Мета теги.
Кодировка.
XHTML - что это такое?
RSS
CSS
Robots.txt
Иконка
Формы для Народ.Ру
Гостевая Народ.Ру
Полезные ресурсы.

Книги по HTML, CSS, JavaScript, PHP и т.д. можно скачать здесь

Палитра веб цветов

Значение цвета можно задавать тремя способами.

I. По его названию
II. По шестнадцатеричному значению
III. С помощью RGB

Цвет | Код цвета | RGB
White | #FFFFFF | 255 255 255
Snow | #FFFAFA | 255 250 250
Whitesmoke | #F5F5F5 | 245 245 245
Ghostwhite | #F8F8FF | 248 248 255
Floralwhite | #FFFAF0 | 255 250 240
Oldlace | #FDF5E6 | 253 245 230
Seashell | #FFE5EE | 255 229 238
Mistyrose | #FFE4E1 | 255 228 225
Lavenderblush | #FFF0F5 | 255 240 245
Linen | #FAF0F6 | 250 240 246
Lavender | #E6E6FA | 230 230 250
Aliceblue | #F0F8FF | 240 248 255
Mintcream | #F5FFFA | 245 255 250
Lightcyan | #E0FFFF | 224 255 255
Azure | #F0FFFF | 240 255 255
Honeydew | #F0FFF0 | 240 255 240
Ivory | #FFFFF0 | 255 255 240
Beige | #F5F5DC | 245 245 220
Cornsilk | #FFF8DC | 255 248 220
Antiquewhite | #FAEBD7 | 250 235 215
Papayawhip | #FFEED5 | 255 239 213
Blanchedalmond | #FFEBCD | 255 235 205
Bisque | #FFE4C4 | 255 228 196
Peachpuff | #FFDAB9 | 255 218 185
Moccasin | #FFE4B5 | 225 228 181
Navajowhite | #FFDEAD | 255 222 173
Wheat | #F5DEB3 | 245 222 179
Tan | #D2B48C | 210 180 140
Lightyellow | #FFFFE0 | 255 255 224
Lightgoldenrodyellow | #FAFAD2 | 250 250 210
Lemonchiffon | #FFFACD | 255 250 205
Yellow | #FFFF00 | 255 255 0
Gold | #FFD700 | 255 215 0
Goldenrod | #DAA520 | 218 165 32
Darkgoldenrod | #B8860B | 184 134 11
Sandybrown | #F4A460 | 244 164 96
Orange | #FFA500 | 255 165 0
Darkorange | #FF8C00 | 255 140 0
Orangered | #FF4500 | 255 69 0
Tomato | #FF6347 | 255 99 71
Coral | #FF7F50 | 255 127 80
Lightsalmon | #FFA07A | 255 160 122
Salmon | #FA8072 | 250 128 114
Darksalmon | #E9967A | 233 150 122
Chocolate | #D2691E | 210 105 30
Peru | #CD853F | 205 133 63
Sienna | #A0522D | 160 82 45
Brown | #A52A2A | 165 42 42
Maroon | #800000 | 128 0 0
Darkred | #8B0000 | 139 0 0
Firebrick | #B22222 | 178 34 34
Indianred | #CD5C5C | 205 92 92
Lightcoral | #F08080 | 240 128 128
Burlywood | #DE8887 | 222 136 135
Crimson | #DC143C | 220 20 60
Red | #FF0000 | 255 0 0
Pink | #FFC0CB | 255 192 203
Lightpink | #FFB6C1 | 255 182 193
Hotpink | #FF69B4 | 255 105 180
Deeppink | #FF1493 | 255 20147 79
Palevioletred | #DB7093 | 219 112 147
Rosybrown | #BC8F8F | 188 143 143
Thistle | #D8BFD8 | 216 191 216
Plum | #DDA0DD | 221 160 221
Violet | #EE82EE | 238 130 238
Fuchsia | #FF00FF | 255 0 255
Mediumvioletred | #C71585 | 199 21 133
Orchid | #DA70D6 | 218 112 214
Mediumorchid | #BA55D3 | 186 85 211
Darkorchid | #9932CC | 153 50 204
Darkviolet | #9400D3 | 148 0 211
Darkmagenta | #8B008B | 139 0 139
Purple | #800080 | 128 00 128
Indigo | #4B0082 | 75 0 130
Blueviolet | #8A2BE2 | 138 43 226
Slateblue | #6A5ACD | 106 90 205
Mediumpurple | #9370DB | 147 112 219
Mediumslateblue | #7B68EE | 123 104 238
Cornflowerblue | #6495ED | 100 149 237
Royalblue | #4169E1 | 65 105 225
Darkslateblue | #483D8B | 72 61 139
Midnightblue | #191970 | 25 25 112
Navy | #000080 | 0 0 128
Darkblue | #00008B | 0 0 139
Mediumblue | #0000CD | 0 0 205
Blue | #0000FF | 0 0 255
Dodgerblue | #1E90FF | 30 144 255
Deepskyblue | #00BFFF | 0 191 255
Lightskyblue | #87CEFA | 135 206 250
Skyblue | #87CEEB | 135 206 235
Steelblue | #4682B4 | 70 130 180
Lightsteelblue | #B0C4DE | 176 196 222
Lightblue | #ADD8E6 | 173 216 230
Powderblue | #B0E0E6 | 176 224 230
Paleturquoise | #AFEEEE | 175 238 238
Darkturquoise | #00CED1 | 0 206 209
Mediumturquoise | #48D1CC | 72 209 204
Turquoise | #40E0D0 | 64 224 208
Aqua | #00FFFF | 0 255 255
Aquamarine | #7FFFD4 | 127 255 212
Mediumaquamarine | #66CDAA | 102 205 170
Palegreen | #98FB98 | 152 251 152
Lightgreen | #90EE90 | 144 238 144
Greenyellow | #ADFF2F | 173 255 47
Mediumspringgreen | #00FA9A | 0 250 154
Springgreen | #00FF7F | 0 255 127
Lime | #00FF00 | 0 255 0
Limegreen | #32CD32 | 50 205 50
Mediumseagreen | #3CB371 | 60 179 113
Yellowgreen | #9ACD32 | 154 205 50
Darkseagreen | #8FBC8F | 143 188 143
Lightseagreen | #20B2AA | 32 178 170
Cadetblue | #5F9EA0 | 95 158 160
Darkcyan | #008B8B | 0 139 139
Teal | #008080 | 0 128 128
Darkslategray | #2F4F4F | 47 79 79
Palegoldenrod | #EEE8AA | 238 232 170
Khaki | #F0E68C | 240 230 140
Darkkhaki | #BDB76D | 189 183 109
Olive | #808000 | 128 128 0
Darkolivegreen | #556B2F | 85 107 47
Olivedrab | #6B8E233 | 107 142 35
Forestgreen | #228B22 | 34 139 34
Green | #008000 | 0 128 0
Darkgreen | #006400 | 0 100 0
Gainsboro | #DCDCDC | 220 220 220
Lightslategray | #778899 | 119 136 153
Slategray | #708090 | 112 128 144
Seagreen | #2E2B57 | 43 46 87
Silver | #C0C0C0 | 192 192 192
Darkgray | #A9A9A9 | 169 169 169
Gray | #808080 | 128 128 128
Dimgray | #696969 | 105 105 105
Black | #000000 | 0 0 0
snow1 | #fffafa | 255 250 250
snow2 | #eee9e9 | 238 233 233
snow3 | #cdc9c9 | 205 201 201
snow4 | #8b8989 | 139 137 137
seashell1 | #fff5ee | 255 245 238
seashell2 | #eee5de | 238 229 222
seashell3 | #cdc5bf | 205 197 191
seashell4 | #8b8682 | 139 134 130
AntiqueWhite1 | #ffefdb | 255 239 219
AntiqueWhite2 | #eedfcc | 238 223 204
AntiqueWhite3 | #cdc0b0 | 205 192 176
AntiqueWhite4 | #8b8378 | 139 131 120
bisque1 | #ffe4c4 | 255 228 196
bisque2 | #eed5b7 | 238 213 183
bisque3 | #cdb79e | 205 183 158
bisque4 | #8b7d6b | 139 125 107
PeachPuff1 | #ffdab9 | 255 218 185
PeachPuff2 | #eecbad | 238 203 173
PeachPuff3 | #cdaf95 | 205 175 149
PeachPuff4 | #8b7765 | 139 119 101
NavajoWhite1 | #ffdead | 255 222 173
NavajoWhite2 | #eecfa0 | 238 207 161
NavajoWhite3 | #cdb38b | 205 179 139
NavajoWhite4 | #8b795e | 139 121 94
LemonChiffon1 | #fffacd | 255 250 205
LemonChiffon2 | #eee9bf | 238 233 191
LemonChiffon3 | #cdc9a5 | 205 201 165
LemonChiffon4 | #8b8970 | 139 137 112
cornsilk1 | #fff8dc | 255 248 220
cornsilk2 | #eee8cd | 238 232 205
cornsilk3 | #cdc8b1 | 205 200 177
cornsilk4 | #8b8878 | 139 136 120
ivory1 | #fffff0 | 255 255 240
ivory2 | #eeeee0 | 238 238 224
ivory3 | #cdcdc1 | 205 205 193
ivory4 | #8b8b83 | 139 139 131
honeydew1 | #f0fff0 | 240 255 240
honeydew2 | #e0eee0 | 224 238 224
honeydew3 | #c1cdc1 | 193 205 193
honeydew4 | #838b83 | 131 139 131
LavenderBlush1 | #fff0f5 | 255 240 245
LavenderBlush2 | #eee0e5 | 238 224 229
LavenderBlush3 | #cdc1c5 | 205 193 197
LavenderBlush4 | #8b8386 | 139 131 134
MistyRose1 | #ffe4e1 | 255 228 225
MistyRose2 | #eed5d2 | 238 213 210
MistyRose3 | #cdb7b5 | 205 183 181
MistyRose4 | #8b7d7b | 139 125 123
azure1 | #f0ffff | 240 255 255
azure2 | #e0eeee | 224 238 238
azure3 | #c1cdcd | 193 205 205
azure4 | #838b8b | 131 139 139
SlateBlue1 | #836fff | 131 111 255
SlateBlue2 | #7a67ee | 122 103 238
SlateBlue3 | #6959cd | 105 89 205
SlateBlue4 | #473c8b | 71 60 139
RoyalBlue1 | #4876ff | 72 118 255
RoyalBlue2 | #436eee | 67 110 238
RoyalBlue3 | #3a5fcd | 58 95 205
RoyalBlue4 | #27408b | 39 64 139
blue1 | #0000ff | 0 0 255
blue2 | #0000ee | 0 0 238
blue3 | #0000cd | 0 0 205
blue4 | #00008b | 0 0 139
DodgerBlue1 | #1e90ff | 30 144 255
DodgerBlue2 | #1c86ee | 28 134 238
DodgerBlue3 | #1874cd | 24 116 205
DodgerBlue4 | #104e8b | 16 78 139
SteelBlue1 | #63b8ff | 99 184 255
SteelBlue2 | #5cacee | 92 172 238
SteelBlue3 | #4f94cd | 79 148 205
SteelBlue4 | #36648b | 54 100 139
DeepSkyBlue1 | #00bfff | 0 191 255
DeepSkyBlue2 | #00b2ee | 0 178 238
DeepSkyBlue3 | #009acd | 0 154 205
DeepSkyBlue4 | #00688b | 0 104 139
SkyBlue1 | #87ceff | 135 206 255
SkyBlue2 | #7ec0ee | 126 192 238
SkyBlue3 | #6ca6cd | 108 166 205
SkyBlue4 | #4a708b | 74 112 139
LightSkyBlue1 | #b0e2ff | 176 226 255
LightSkyBlue2 | #a4d3ee | 164 211 238
LightSkyBlue3 | #8db6cd | 141 182 205
LightSkyBlue4 | #607b8b | 96 123 139
SlateGray1 | #c6e2ff | 198 226 255
SlateGray2 | #b9d3ee | 185 211 238
SlateGray3 | #9fb6cd | 159 182 205
SlateGray4 | #6c7b8b | 108 123 139
LightSteelBlue1 | #cae1ff | 202 225 255
LightSteelBlue2 | #bcd2ee | 188 210 238
LightSteelBlue3 | #a2b5cd | 162 181 205
LightSteelBlue4 | #6e7b8b | 110 123 139
LightBlue1 | #bfefff | 191 239 255
LightBlue2 | #b2dfee | 178 223 238
LightBlue3 | #9ac0cd | 154 192 205
LightBlue4 | #68838b | 104 131 139
LightCyan1 | #e0ffff | 224 255 255
LightCyan2 | #d1eeee | 209 238 238
LightCyan3 | #b4cdcd | 180 205 205
LightCyan4 | #7a8b8b | 122 139 139
PaleTurquoise1 | #bbffff | 187 255 255
PaleTurquoise2 | #aeeeee | 174 238 238
PaleTurquoise3 | #96cdcd | 150 205 205
PaleTurquoise4 | #668b8b | 102 139 139
CadetBlue1 | #98f5ff | 152 245 255
CadetBlue2 | #8ee5ee | 142 229 238
CadetBlue3 | #7ac5cd | 122 197 205
CadetBlue4 | #53868b | 83 134 139
turquoise1 | #00f5ff | 0 245 255
turquoise2 | #00e5ee | 0 229 238
turquoise3 | #00c5cd | 0 197 205
turquoise4 | #00868b | 0 134 139
cyan1 | #00ffff | 0 255 255
cyan2 | #00eeee | 0 238 238
cyan3 | #00cdcd | 0 205 205
cyan4 | #008b8b | 0 139 139
DarkSlateGray1 | #97ffff | 151 255 255
DarkSlateGray2 | #8deeee | 141 238 238
DarkSlateGray3 | #79cdcd | 121 205 205
DarkSlateGray4 | #528b8b | 82 139 139
aquamarine1 | #7fffd4 | 127 255 212
aquamarine2 | #76eec6 | 118 238 198
aquamarine3 | #66cdaa | 102 205 170
aquamarine4 | #458b74 | 69 139 116
DarkSeaGreen1 | #c1ffc1 | 193 255 193
DarkSeaGreen2 | #b4eeb4 | 180 238 180
DarkSeaGreen3 | #9bcd9b | 155 205 155
DarkSeaGreen4 | #698b69 | 105 139 105
SeaGreen1 | #54ff9f | 84 255 159
SeaGreen2 | #4eee94 | 78 238 148
SeaGreen3 | #43cd80 | 67 205 128
SeaGreen4 | #2e8b57 | 46 139 87
PaleGreen1 | #9aff9a | 154 255 154
PaleGreen2 | #90ee90 | 144 238 144
PaleGreen3 | #7ccd7c | 124 205 124
PaleGreen4 | #548b54 | 84 139 84
SpringGreen1 | #00ff7f | 0 255 127
SpringGreen2 | #00ee76 | 0 238 118
SpringGreen3 | #00cd66 | 0 205 102
SpringGreen4 | #008b45 | 0 139 69
green1 | #00ff00 | 0 255 0
green2 | #00ee00 | 0 238 0
green3 | #00cd00 | 0 205 0
green4 | #008b00 | 0 139 0
chartreuse1 | #7fff00 | 127 255 0
chartreuse2 | #76ee00 | 118 238 0
chartreuse3 | #66cd00 | 102 205 0
chartreuse4 | #458b00 | 69 139 0
OliveDrab1 | #c0ff3e | 192 255 62
OliveDrab2 | #b3ee3a | 179 238 58
OliveDrab3 | #9acd32 | 154 205 50
OliveDrab4 | #698b22 | 105 139 34
DarkOliveGreen1 | #caff70 | 202 255 112
DarkOliveGreen2 | #bcee68 | 188 238 104
DarkOliveGreen3 | #a2cd5a | 162 205 90
DarkOliveGreen4 | #6e8b3d | 110 139 61
khaki1 | #fff68f | 255 246 143
khaki2 | #eee685 | 238 230 133
khaki3 | #cdc673 | 205 198 115
khaki4 | #8b864e | 139 134 78
LightGoldenrod1 | #ffec8b | 255 236 139
LightGoldenrod2 | #eedc82 | 238 220 130
LightGoldenrod3 | #cdbe70 | 205 190 112
LightGoldenrod4 | #8b814c | 139 129 76
LightYellow1 | #ffffe0 | 255 255 224
LightYellow2 | #eeeed1 | 238 238 209
LightYellow3 | #cdcdb4 | 205 205 180
LightYellow4 | #8b8b7a | 139 139 122
yellow1 | #ffff00 | 255 255 0
yellow2 | #eeee00 | 238 238 0
yellow3 | #cdcd00 | 205 205 0
yellow4 | #8b8b00 | 139 139 0
gold1 | #ffd700 | 255 215 0
gold2 | #eec900 | 238 201 0
gold3 | #cdad00 | 205 173 0
gold4 | #8b7500 | 139 117 0
goldenrod1 | #ffc125 | 255 193 37
goldenrod2 | #eeb422 | 238 180 34
goldenrod3 | #cd9b1d | 205 155 29
goldenrod4 | #8b6914 | 139 105 20
DarkGoldenrod1 | #ffb90f | 255 185 15
DarkGoldenrod2 | #eead0e | 238 173 14
DarkGoldenrod3 | #cd950c | 205 149 12
DarkGoldenrod4 | #8b6508 | 139 101 8
RosyBrown1 | #ffc1c1 | 255 193 193
RosyBrown2 | #eeb4b4 | 238 180 180
RosyBrown3 | #cd9b9b | 205 155 155
RosyBrown4 | #8b6969 | 139 105 105
IndianRed1 | #ff6a6a | 255 106 106
IndianRed2 | #ee6363 | 238 99 99
IndianRed3 | #cd5555 | 205 85 85
IndianRed4 | #8b3a3a | 139 58 58
sienna1 | #ff8247 | 255 130 71
sienna2 | #ee7942 | 238 121 66
sienna3 | #cd6839 | 205 104 57
sienna4 | #8b4726 | 139 71 38
burlywood1 | #ffd39b | 255 211 155
burlywood2 | #eec591 | 238 197 145
burlywood3 | #cdaa7d | 205 170 125
burlywood4 | #8b7355 | 139 115 85
wheat1 | #ffe7ba | 255 231 186
wheat2 | #eed8ae | 238 216 174
wheat3 | #cdba96 | 205 186 150
wheat4 | #8b7e66 | 139 126 102
tan1 | #ffa54f | 255 165 79
tan2 | #ee9a49 | 238 154 73
tan3 | #cd853f | 205 133 63
tan4 | #8b5a2b | 139 90 43
chocolate1 | #ff7f24 | 255 127 36
chocolate2 | #ee7621 | 238 118 33
chocolate3 | #cd661d | 205 102 29
chocolate4 | #8b4513 | 139 69 19
firebrick1 | #ff3030 | 255 48 48
firebrick2 | #ee2c2c | 238 44 44
firebrick3 | #cd2626 | 205 38 38
firebrick4 | #8b1a1a | 139 26 26
brown1 | #ff4040 | 255 64 64
brown2 | #ee3b3b | 238 59 59
brown3 | #cd3333 | 205 51 51
brown4 | #8b2323 | 139 35 35
salmon1 | #ff8c69 | 255 140 105
salmon2 | #ee8262 | 238 130 98
salmon3 | #cd7054 | 205 112 84
salmon4 | #8b4c39 | 139 76 57
LightSalmon1 | #ffa07a | 255 160 12
LightSalmon2 | #ee9572 | 238 149 114
LightSalmon3 | #cd8162 | 205 129 98
LightSalmon4 | #8b5742 | 139 87 66
orange1 | #ffa500 | 255 165 0
orange2 | #ee9a00 | 238 154 0
orange3 | #cd8500 | 205 133 0
orange4 | #8b5a00 | 139 90 0
DarkOrange1 | #ff7f00 | 255 127 0
DarkOrange2 | #ee7600 | 238 118 0
DarkOrange3 | #cd6600 | 205 102 0
DarkOrange4 | #8b4500 | 139 69 0
coral1 | #ff7256 | 255 114 86
coral2 | #ee6a50 | 238 106 80
coral3 | #cd5b45 | 205 91 69
coral4 | #8b3e2f | 139 62 47
tomato1 | #ff6347 | 255 99 71
tomato2 | #ee5c42 | 238 92 66
tomato3 | #cd4f39 | 205 79 57
tomato4 | #8b3626 | 139 54 38
OrangeRed1 | #ff4500 | 255 69 0
OrangeRed2 | #ee4000 | 238 64 0
OrangeRed3 | #cd3700 | 205 55 0
OrangeRed4 | #8b2500 | 139 37 0
red1 | #ff0000 | 255 0 0
red2 | #ee0000 | 238 0 0
red3 | #cd0000 | 205 0 0
red4 | #8b0000 | 139 0 0
DeepPink1 | #ff1493 | 255 20 147
DeepPink2 | #ee1289 | 238 18 137
DeepPink3 | #cd1076 | 205 16 118
DeepPink4 | #8b0a50 | 139 10 80
HotPink1 | #ff6eb4 | 255 110 180
HotPink2 | #ee6aa7 | 238 106 167
HotPink3 | #cd6090 | 205 96 144
HotPink4 | #8b3a62 | 139 58 98
pink1 | #ffb5c5 | 255 181 197
pink2 | #eea9b8 | 238 169 184
pink3 | #cd919e | 205 145 158
pink4 | #8b636c | 139 99 108
LightPink1 | #ffaeb9 | 255 174 185
LightPink2 | #eea2ad | 238 162 173
LightPink3 | #cd8c95 | 205 140 149
LightPink4 | #8b5f65 | 139 95 101
PaleVioletRed1 | #ff82ab | 255 130 171
PaleVioletRed2 | #ee799f | 238 121 159
PaleVioletRed3 | #cd6889 | 205 104 137
PaleVioletRed4 | #8b475d | 139 71 93
maroon1 | #ff34b3 | 255 52 179
maroon2 | #ee30a7 | 238 48 167
maroon3 | #cd2990 | 205 41 144
maroon4 | #8b1c62 | 139 28 98
VioletRed1 | #ff3e96 | 255 62 150
VioletRed2 | #ee3a8c | 238 58 140
VioletRed3 | #cd3278 | 205 50 120
VioletRed4 | #8b2252 | 139 34 82
magenta1 | #ff00ff | 255 0 255
magenta2 | #ee00ee | 238 0 238
magenta3 | #cd00cd | 205 0 205
magenta4 | #8b008b | 139 0 139
orchid1 | #ff83fa | 255 131 250
orchid2 | #ee7ae9 | 238 122 233
orchid3 | #cd69c9 | 205 105 201
orchid4 | #8b4789 | 139 71 137
plum1 | #ffbbff | 255 187 255
plum2 | #eeaeee | 238 174 238
plum3 | #cd96cd | 205 150 205
plum4 | #8b668b | 139 102 139
MediumOrchid1 | #e066ff | 224 102 255
MediumOrchid2 | #d15fee | 209 95 238
MediumOrchid3 | #b452cd | 180 82 205
MediumOrchid4 | #7a378b | 122 55 139
DarkOrchid1 | #bf3eff | 191 62 255
DarkOrchid2 | #b23aee | 178 58 238
DarkOrchid3 | #9a32cd | 154 50 205
DarkOrchid4 | #68228b | 104 34 139
purple1 | #9b30ff | 155 48 255
purple2 | #912cee | 145 44 238
purple3 | #7d26cd | 125 38 205
purple4 | #551a8b | 85 26 139
MediumPurple1 | #ab82ff | 171 130 255
MediumPurple2 | #9f79ee | 159 121 238
MediumPurple3 | #8968cd | 137 104 205
MediumPurple4 | #5d478b | 93 71 139
thistle1 | #ffe1ff | 255 225 255
thistle2 | #eed2ee | 238 210 238
thistle3 | #cdb5cd | 205 181 205
thistle4 | #8b7b8b | 139 123 139


С чего начинать

Таблицы.
Текст.
Изображения.
Ссылки.
JavaScript.
Палитра цветов.
Выбор цвета.
Музыка, флеш, видео.
DOCTYPE.
Мета теги.
Кодировка.
XHTML - что это такое?
RSS
CSS
Robots.txt
Иконка
Формы для Народ.Ру
Гостевая Народ.Ру
Полезные ресурсы.

Книги по HTML, CSS, JavaScript, PHP и т.д. можно скачать здесь

XHTML - что это такое?

Источник: www.webmastak.com

Автор: THE UnForGiven

Приветствую! Сегодня речь пойдет о языке XHTML — потомке старого доброго HTML.

XHTML расшифровывается как EXtensible HyperText Markup Language — расширенный язык гипертекстовой разметки. Язык призван заменить существующий и повсеместно используемый сегодня HTML. По синтаксису новый язык практически идентичен HTML. Он является структурированной и более «чистой» версией HTML. Кроме того, XHTML предоставляется в виде XML-приложения.

С января 2000 года XHTML версии 1.0 официально рекомендован консорциумом W3C в качестве нового веб-стандарта. W3C объявил XHTML последней версией HTML, и предрекает постепенную замену прежней версии на новую.

Что касается поддержки нового стандарта — все современные браузеры поддерживают XHTML.

Новый язык является синтезом привычного HTML и XML, и состоит из элементов HTML 4.01 в комбинации с синтаксисом XML.

Предыстория и мотив возникновения нового стандарта очевидны. В какой-то момент Паутина пришла к тому, что очень многие веб-страницы имеют «неверный» HTML, некачественную разметку. Несмотря на то, что внешне страница отображается нормально, ее код сформирован не в соответствии со стандартом HTML — как в следующем примере:

В этом примере нет закрывающего тэга </head> перед открывающим <body>; отсутствует закрывающий тэг заголовка </h1>.

Вот еще довольно часто встречающаяся ошибка:

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

XML — это язык разметки, где все должно быть сформировано правильно, только в этом случае данные будут отображены. Иначе возникнет ошибка. Если XML предназначен для описания данных, а HTML — для их отображения, то XHTML успешно соединил в себе преимущества обоих языков.

В современном мире IT представлены различные технологии браузеров. Некоторые из них работают на ПК, некоторые — на мобильных телефонах, смартфонах и карманных компьютерах. Причем у последних не столь много ресурсов на интерпретацию и понимание «плохого» HTML. Именно здесь возникла необходимость в новом языке, которым и стал XHTML. Стоит сказать, что XHTML-страницы смогут отображать любые устройства с поддержкой XML. Новый язык — это билет в будущее. Пока цифровой мир усовершенствуется до поддержки XML браузерами, у разработчиков есть время и возможность создавать корректные документы, которые будут доступны всем новым браузерам — продолжая, что немаловажно, поддерживаться текущими.

Хорошо и то, что веб-разработчикам не придется переучиваться. Необходимо лишь уяснить некоторые особенности языка и помнить принципы формирования документов:

• Элементы документа должны иметь четкую вложенность и подчиненность. Если сначала мы открыли тэг заголовка, затем тэг курсива, то после текста мы должны сначала закрыть тэг курсива, за ним — тэг заголовка.

• Документы должны быть правильно сформированы. Корневым элементом для остальных элементов документа является тэг <html>.

• Имена тэгов должны быть в нижнем регистре.

• Все тэги должны иметь соответствующие закрывающие тэги. Обратите внимание, что открывающие тэги, не имеющие закрывающего тэга (<img>, <br>, <hr> и т.п.) должны закрывать сами себя (<img />, <br />, <hr />). Причем перед слешем (/) должен стоять пробел для совместимости с существующими браузерами.

Написание правильного кода подразумевает использование четкого синтаксиса:

• Имена атрибутов должны быть в нижнем регистре (<font color=”red”>).

• Значения атрибутов должны заключаться в кавычки (<font color=”red”>).

• Несколько непривычно требование запрещения минимизации атрибутов. Если раньше мы могли написать <input type=”checkbox” checked>, то теперь эта запись должна выглядеть так: <input type=”checkbox” checked=”checked”>.

• Атрибут name окончательно заменится атрибутом id. Если сейчас эти атрибуты приравниваются, то в будущем останется только id.

• В первой строчке документа должен идти фундаментальный элемент DOCTYPE, сообщающий браузеру тип документа: <!DOCTYPE тип>. Стоит заметить, что элемент DOCTYPE не является частью XHTML-документа, потому не должен иметь закрывающий тэг (закрываться самостоятельно).

• XHTML-документ может быть трех типов (определение Document Type Definitions). В целом документ состоит из трех основных частей: DOCTYPE, Head и Body:

• Тип документа может быть STRICT, TRANSITIONAL или FRAMESET. Наиболее распространенным является второй тип.

• Тип Strict используется в случае предоставления чистой разметки, лишенной визуального оформления. Может использоваться совместно с CSS (каскадными таблицами стилей).

• Тип Transitional используется при необходимости визуального представления, плюс для поддержки браузеров, не использующих CSS (наиболее распространенный тип).

• Тип Frameset используется для фреймов.

В целом мы получаем следующее представление заголовка документа:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ТИП_ДОКУМЕНТА//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- ТИП_ДОКУМЕНТА.dtd">. EN — язык страницы, — заменяйте на соответствующий.

При создании документов рекомендую пользоваться валидатором консорциума (http://validator.w3.org/check/referer) — вы наверняка будете знать, соответствует ли документ стандарту XHTML 1.0.

Всего!