Учeбник HTML. Оглавление.

On-line учебник HTML с примерами,
справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

  • Введение в учебник HTML, немного истории.
    • Историческая справка
    • Стандартизация языка HTML, усилия W3C.
    • Пути дальнейшего развития
  • Основные понятия.
  • Объявление <!DOCTYPE>.
  • Определение границ документа с помощью элемента <HTML>.
  • Элемент <HEAD>.
    • Создание титула документа с помощью дескриптора <TITLE>
    • Разрешение относительных ссылок с помощью элемента <BASE>
    • Обеспечение поиска при помощи дескриптора <ISINDEX>
    • Взаимосвязь между документами с помощью дескриптора <LINK>
    • Предоставление дополнительной информации о документе с помощью <META>
    • Определение стиля страницы с помощью <STYLE>
  • Элемент <BODY>.
  • Управление цветом.
    • Шестнадцатеричные значения цвета RGB
    • Задание цвета при помощи строчных литералов
    • Использование безопасной палитры цветов
  • Структурное форматирование.
    • Комментарии <COMMENT>
    • Заголовки <Hn>
    • Разделительные линии <HR>
    • Элемент <P>
    • Элементы <BR> и <NOBR>
    • Элемент <WBR>
    • Элемент <PRE>
    • Элемент <DIV>
    • Элемент <CENTER>
    • Элемент <ADDRESS>
    • Элемент <BLOCKQUOTE>
    • Элемент <SPAN>
  • Организация в списки.
    • Элемент <OL>
    • Элемент <UL>
    • Элемент <MENU>
    • Элемент <DIR>
    • Элемент <DL>
  • Форматирование символов.
    • Элемент <EM>
    • Элемент <CODE>
    • Элемент <KBD>
    • Элемент <VAR>
    • Элемент <SAMP>
    • Элемент <DFN>
    • Элемент <CITE>
    • Элемент <STRONG>
    • Элемент <I>
    • Элемент <B>
    • Элемент <U>
    • Элемент <STRIKE>
    • Элемент <TT>
    • Элемент <SUP>
    • Элемент <SUB>
    • Элемент <BIG>
    • Элемент <SMALL>
    • Элемент <BLINK>
    • Элемент <FONT>
    • Элемент <BASEFONT>
    • Элемент <ABBR>
    • Элемент <ACRONYM>
    • Элемент <INS>
    • Элемент <DEL>
    • Элемент <Q>
  • Организация ссылок <A>.
  • Вставка в документ объектов.
    • Элемент <IMG>
    • Элемент <MAP>
    • Элемент <AREA>
    • Элемент <BANNER>
    • Элемент <BGSOUND>
    • Элемент <MARQUEE>
    • Элемент <APPLET>
    • Элемент <SCRIPT>
    • Элемент <OBJECT>
    • Элемент <EMBED>
  • Создание таблиц.
    • Элемент <TABLE>
    • Элемент <CAPTION>
    • Элемент <COL>
    • Элемент <COLGROUP>
    • Элемент <THEAD>
    • Элемент <TBODY>
    • Элемент <TFOOT>
    • Элемент <TH>
    • Элемент <TR>
    • Элемент <TD>
    • Примеры написания таблиц.
  • Создание форм HTML.
    • Элемент <FORM>
    • Элемент <INPUT>
    • Элемент <TEXTAREA>
    • Элемент <SELECT>
    • Элемент <ISINDEX>
    • Элемент <OPTION>
    • Элемент <OPTGROUP>
    • Элемент <BUTTON>
    • Элемент <LABEL>
    • Элемент <FIELDSET>
    • Элемент <LEGEND>
  • Создание документа с помощью кадров
    • Элемент <FRAMESET>
    • Элемент <FRAME>
    • Элемент <IFRAME>
    • Примеры простейших макетов страниц с фреймами.
  • Языковые стандарты.
    • Кодирование символов
    • Особенности работы с кодировками
    • Русские кодировки
    • Создание многоязыковых документов
    • Таблица символов


Учeбник HTML.Таблицы стилей CSS.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

  • Немного истории
  • Основные понятия.
    • Общие положения
    • Синтаксис стиля
    • Включенные таблицы стилей
    • Внедренные таблицы стилей
    • Внешние таблицы стилей
    • Аппаратно-зависимые таблицы стилей
  • Единицы измерения
    • Относительные размеры
    • Абсолютные размеры
    • Единицы определения цвета
  • Свойства шрифта
    • свойство font-family
    • свойство font-size
    • свойство font-style
    • свойство font-variant
    • свойство font-weight
    • свойство font-face
  • Свойства текста
    • свойство word-spacing
    • свойство letter-spacing
    • свойство white-space
    • свойство line-height
    • свойство text-decoration
    • свойство text-indent
    • свойство text-align
    • свойство text-transform
  • Свойства цвета и фона
    • свойство background-color
    • свойство background-image
    • свойство background-position
    • свойство background-attachment
    • свойство background-repeat
    • свойство color
  • Свойства обрамления
    • свойство margin-left
    • свойство margin-right
    • свойство margin-top
    • свойство margin-bottom
    • свойство padding-left
    • свойство padding-right
    • свойство padding-top
    • свойство padding-bottom
    • свойство border-style
    • свойство border-color
    • свойство border-width
    • свойство border-позиция
  • Свойства позиционирования
    • свойство top
    • свойство left
    • свойство width
    • свойство height
    • свойство position
    • свойство z-index
    • свойство clear
    • свойство overflow
    • свойство float
  • Визуальные свойства
    • свойство cursor
    • свойство filter
    • свойство visibility
    • свойство display
    • свойство list-style-position
    • свойство list-style-type
    • свойство list-style-image
  • Прочие свойства
    • свойство page-break-after
    • свойство page-break-before
    • свойство :first-line
    • свойство :first-letter
    • свойство :after
    • свойство :before
  • Группирование стилей, назначение классов и псевдоклассов
    • группирование стилей
    • назначение классов
    • назначение псевдоклассов
  • Адаптация интерфейса
  • Фильтры
    • фильтр alpha
    • фильтр blur
    • фильтр chroma
    • фильтр dropshadow
    • фильтр flipv
    • фильтр fliph
    • фильтр glow
    • фильтр gray
    • фильтр invert
    • фильтр mask
    • фильтр shadow
    • фильтр wave
    • фильтр xray
  • Слои
    • Абсолютное позиционирование
    • Горизонтальное позиционирование
    • Вертикальное позиционирование
    • Задание высоты слоя
    • Задание ширины слоя
    • Позиционирование в глубину
    • Управление видимостью
    • Понятие прозрачности слоя
    • Наложение слоев
    • Примеры работы со слоями
  • Примеры исходных кодов таблиц стилей


Cправочник по созданию Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

  • Форма и содержание, первый шаг.
    • Распределение обязанностей.
    • Внешний вид и контент.
    • C чего начать.
    • Полезные ссылки.
  • Проблема использования чистого HTML.
  • Учет особенностей браузеров.
    • Проблема браузеронезависимости
    • Сравнительный анализ
    • Выводы
  • Организация страниц в узлы, навигация.
  • Тестирование.
  • Обратная связь.
  • Обновление содержимого страниц.
  • Оптимизация графики используемой на сайте.
    • Форматы графики используемой в сети
    • Инструментарий
  • Выбор места для размещения Web-страниц.
    • Хостинг
    • На что надо обратить внимание
  • Выбор доменного имени и имени сайта.
    • Доменная система имен
    • Регистрация доменного имени
  • Создание документа с помощью SSI


Раскрутка Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

  • Что необходимо помнить.
  • Активная реклама.
  • Обмен посетителями.
    • Обмен ссылками
    • Службы баннерообмена
  • Регистрация в каталогах и рейтингах.
  • Оптимизация для поиска.
    • Поисковые роботы
    • Релевантность документов
    • Проблемы индексации
    • Особенности индексации
  • Службы автодобавления.
  • Проведение и анализ рекламной кампании.
    • Анализ динамики роста
    • Тактика рекламной кампании
  • Прочие советы.
  • Возможные ошибки.
  • META-генератор.
  • Регистратура.
    • Форма для регистрации
    • Особенности регистрации
    • Сводная таблица каталогов
  • Статистика.
    • Требования к статистике
    • Правильный выбор
    • Погрешности статистики


Учeбник HTML, бесплатные программы Web-мастеру.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Полезности

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

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

  • Текстовые редакторы.
  • Специальные редакторы.
  • Перекодировщики.
  • Работа с графикой и цветом.
  • Рекламные, регистраторы.
  • Генераторы (META, TABLE, MAP, CSS, ...).
  • Клиенты (FTP, ...)
  • Валидаторы, оптимизаторы и тестеры.
  • Разные.


Учeбник HTML, FAQ.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Наиболее часто задаваемые вопросы

  • Альтернативный текст к картинкам приводит к расползанию, если не указан размер, а если его указывать, то текст обрезается и теряется весь смысл.
  • Как организовать автоматическую пересылку посетителей на другую страницу?
  • Как защитить исходник страницы от просмотра посетителей и запретить копирование графики?
  • Как организовать отправку себе на e-mail результат заполнения полей формы?
  • Как сделать, чтобы при клике на ссылку в одном фрейме менялось содержимое второго фрейма?
  • Как сделать, чтобы при клике на ссылку менялось содержимое сразу двух, или более фреймов?
  • Как вставлять один и тот же кусок кода в разные места сайта?
  • Как отлючить появление рамки вокруг ссылки при нажатии на кнопку мыши?
  • Как отлючить размножение картинки фона "черепицей"?
  • Как запретить браузеру посетителя сохранять документы сайта и изображения в кэш?
  • Обычная ссылка на файлы .doc или .pdf открывает их прямо в окне браузера...
  • Как на одной странице разместить текст на нескольких языках?
  • Как запустить на компьютере посетителя .exe-файл?
  • Как вставить фоновую картинку в ячейку таблицы или в элемент формы?
  • Как сделать, чтобы при клике на ссылку в ячейке таблицы HTML-файл загружался в другую ячейку?
  • Как задать "красную строку" в абзаце?
  • Как задать буквицу?
  • Как сделать, чтобы текст прокручивался а фон оставался на месте?
  • Как указывать относительные ссылки?
  • Каким редактором лучше пользоваться?
  • Как создавать браузеро-независимые таблицы стилей?
  • Как украсить ссылки на странице?
  • Как сделать многострочный альтернативный текст к рисунку или ссылке?
  • Как загрузить страницу не во фрейм, а во все окно?
  • Как загрузить страницу в новом окне?
  • Как выложить на сайте mp3-файлы для скачивания?
  • Как задать фоновое звучание?
  • Как поменять фон у ячейки таблицы?
  • Как ячейки таблицы слепить вместе, без пробелов?
  • Как задать "резиновый" дизайн, одинаково приспособленный под любое разрешение экрана?
  • Как расположить текст на сайте коллонками?
  • Как задать фон для заголовков?
  • Как задать подгружаемый шрифт на странице?
  • Как быстро и эффективно научиться создавать сайты?
  • Как разместить текст поверх картинки?
  • Как организовать предварительную загрузку невидимых элементов страницы?
  • Как вставить временное содержание, пока идет загрузка страницы?
  • Как сделать невозможным загрузку одного фрейма, без фреймсета?
  • Как сделать невозможным загрузку страницы в чужой фреймсет?
  • Как защитить от СПАМеров почтовый адрес, расположеный на сайте?
  • Как сделать кнопку возврата к предыдущей странице?
Альтернативный текст к картинкам приводит к расползанию, если не указан размер, а если его указывать, то текст обрезается и теряется весь смысл.

Если Вы укажете альтернативный текст не как обычно, а при помощи атрибута title, тогда при отключении графики не будет надписи, приводящей к расползанию, а при наведении курсора на картинку, появится выпадающая подсказка. Не самый лучший, но все же выход.
<IMG src="URL" width=25 height=25 title="альтернативный текст">
Пример: наведите курсор

Как организовать автоматическую пересылку посетителей на другую страницу?

Вставьте где-нибудь между тэгами <HEAD> и </HEAD> такую конструкцию:
<META HTTP-EQUIV="Refresh" content="5;URL=http://www.arcus.lv/dimas/index.html">
В этом случае цифра 5 означает задержку по времени, если хотите осуществлять пересылку без задержек, то укажите ее равной 0, а вместо указанного URL укажите свой.

Как защитить исходник страницы от просмотра посетителей и запретить копирование графики?

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

Как организовать отправку себе на e-mail результата заполнения полей формы?

Первый способ заключается в том, чтобы отправить данные серверу, там их примет и обработает сценарий CGI, затем он перенаправит данные по указанному адресу и даже может отправить копии по другим, указаным адресам. Если Вы не располагаете собственным сервером, или у Вашего провайдера нет такого сценария, то обратитесь по адресу:
http://www.webclub.ru/free/sendform
Второй же способ описывается в примере

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

Пример того как это сделать описывается здесь

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

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

<A href="page1.html" target="frame1" onClick="window.frame2.location.href('page2.html')">Ссылка</A>

Как вставлять один и тот же кусок кода в разные места сайта?

При помощи сценария CGI, SSI-директив, или если к ним нет доступа, то при помощи Java Script, для этого необходимо создать текстовый файл file.js, следующего вида:

<!--
document.writeln('код')
//-->

Здесь код замените на то содержимое, которое хотите вставлять, (в одну строчку, либо применяется конкатенация строк), а там, где необходимо вставить содержимое, напишите:
<SCRIPT type="text/javascript" src ="URL"></SCRIPT>

Как отлючить появление рамки вокруг ссылки при нажатии на кнопку мыши?

Вставьте onFocus="this.blur()" в начальный тэг ссылки. Например:

<A href="URL" onFocus="this.blur()">ссылка</A>

Как отлючить размножение картинки фона "черепицей"?

При помощи таблиц стилей CSS, а именно при помощи {background-repeat: no-repeat;}, тогда таблица стилей должна иметь следующий вид:

<STYLE>
body {background-repeat: no-repeat;}
</STYLE>
подробнее об этом свойстве читайте здесь

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

Способ обработки документов задается в "головной" части документа, между тегами <HEAD> и </HEAD> при помощи META-тэгов, в данном случае их используют с атрибутами: Expires, Cache-Control и pragma. Подробнее об этом можно прочесть здесь
НО! Не от одних META-тэгов зависит поведение браузера. А именно, в меню браузера: Вид>Свойства_обозревателя>Общие>Временные файлы Интернета>Настройка> может быть выставлен один из вариантов проверки наличия обновленных объектов, относящихся к страницам:

  • при каждом посещении страницы
  • при каждом запуске браузера
  • никогда

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

Обычная ссылка на файлы .doc или .pdf открывает их прямо в окне браузера...

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

Как на одной странице разместить текст на нескольких языках?

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

Как запустить на компьютере посетителя .exe-файл?

При помощи обычной ссылки, например:

<a href="URL/file.exe">Пример</a>

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

Как вставить фоновую картинку в ячейку таблицы или в элемент формы?

Сама таблица так же, как и её ячейка вполне допускают использование атрибута background внутри тэга, например:

<TABLE background="URL">
<TD background="URL">

А в случае с формой придется использовать стили, например:

<textarea style="background-image:url(file.gif)"></textarea">

Как сделать, чтобы при клике на ссылку в ячейке таблицы HTML-файл загружался в другую ячейку?

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

<TABLE border=1>
<TR>
<TD>
<a href="file2.htm" target="myname">Ссылка</a>
<TD>
<IFRAME src="file1.htm" name="myname">
</TABLE">

Как задать "красную строку" в абзаце?

Иногда в начало строки вставляют прозрачное .gif-изображение, или ряд пробелов &nbsp;, но правильно будет - при помощи таблиц стилей CSS:

<STYLE>
P { text-indent: 0.5in;}
</STYLE>

Как задать буквицу?

Способов может быть несколько.
При помощи .gif-изображения буквы, например:

<P> <IMG src="t.gif" align="left" alt="T">екст абзаца....</P>

При помощи тэга FONT и его атрибута size, например:

<P> <FONT size=5>Т</FONT>екст абзаца....</P>

Используя стили, например:

<P> <span style="float:left; font-size:150%; font-weight:bold;">Т</span>екст абзаца....</P>

Используя специальный псевдоэлемент, который определяет стиль для первой буквы в строке.
Пример:
P:first-letter { font-size: 150%; font-style: italic; font-weight: bold; float: left }

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

В стилях указать body {background: fixed;}, либо в самом тэге на странице:

<BODY bgproperties=fixed>

Как указывать относительные ссылки?

  • <a href="file.html"> Ссылка на файл в том же каталоге.
  • <a href="../file.html"> Ссылка на файл, который находится на уровень выше
  • <a href="../../file.html"> Ссылка на файл, который находится на 2 уровня выше
  • <a href="dir/file.html"> Ссылка на файл в подкаталоге dir уровнем ниже
  • <a href="../dir/file.html"> Ссылка на файл в соседнем каталоге dir того же уровня

Каким редактором лучше пользоваться?

Ответ зависит от того, какова Ваша конечная цель. Если Вы новичок и при этом хотите ограничиться лишь созданием одной-двух страничек, не вникая в HTML, тогда выбирайте любой из WYSIWYG-редакторов, например MS Frontpage. Если Вы новичок, но горите желанием стать знатоком, тогда Ваши инструменты это MS Notepad и хороший справочник по HTML, потому, что только работая головой и "ручками" можно закрепить знания и приобрести достаточный опыт.

В данном случае имеется ввиду любой текстовый редактор, по возможностям сравнимый с MS Notepad. В итоге Вы скорее всего остановитесь на чем-нибудь типа Home Site, или Dream Wiewer, но лишь для того, чтобы избавить себя от рутинной работы и успевать в конкретные сроки, при этом иметь в активе хороший справочник по HTML, а в "закладках" ссылку на сайт типа этого. Хотя на деле происходит так, что после "стараний" различных редакторов мастеру, тем не менее, все-равно приходится оптимизировать код, т.е. удалять лишние тэги и исправлять прочие ошибки, теряя при этом время.

Как создавать браузеро-независимые таблицы стилей?

Прежде всего необходимо помнить, что не все из рекомендуемых к использованию свойств стилей поддерживаются, при этом те из них, поддержка которых внедрена в современные браузеры имеют различный синтаксис для Internet Explorer и Netscape Navigator.
Например:
Для Internet Explorer

<STYLE>
p {font-family:"Impact, sans-serif"; font-size:12; color:green}
</STYLE>

Здесь свойство font-family имеет общие кавычки, и пишется раздельно через дефис, так же, как и font-size

Теперь то же самое для Netscape Navigator

<STYLE>
p {fontfamily:"Impact", "sans-serif"; fontsize:12; color:green}
</STYLE>

Здесь fontfamily имеет отдельные кавычки, и пишется слитно без дефиса, так же, как и fontsize

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

<STYLE>
p {font-family:"Impact, sans-serif"; font-size:12; color:green}
p {fontfamily:"Impact", "sans-serif"; fontsize:12; color:green}
</STYLE>

В этом коде Internet Explorer проигнорирует вторую строку, а Netscape Navigator - первую. И если вспомнить и учесть, что ссылки на подключаемую внешнюю таблицу стилей пишутся тоже по-разному <LINK href=... и <LINK src=..., то получим работоспособный вариант.

Как украсить ссылки на странице?

<STYLE>
A:Link{ Color: #0044ff; font-weight:bold ; text-decoration: none; font-size: 100%;
 font-family: Arial;}
A:Visited{ Color: #0088ee; font-weight:bold ; text-decoration: none; font-size: 100%;
 font-family: Arial;}
A:Active{ Color: aqua; font-weight:bold ; text-decoration: none; font-size: 100%;
 font-family: Arial;}
A:Hover{ Color: #000088; font-weight:bold ; text-decoration: none; font-size: 100%;
 font-family: Arial;}
</STYLE>

Здесь A:Link - это стиль ссылки, A:Visited - это стиль посещенной ссылки, A:Active - это стиль активной ссылки, и A:Hover - стиль ссылки при наведении на нее курсора.

Как сделать многострочный альтернативный текст к рисунку или ссылке?

Подобно тому как в тексте Вы задаете перенос строки при тэгом <BR>, в альтернативном тексте используется символ &#010;

<A href="file.htm" title="Строка1&#010;Строка2">Ссылка</A>
<IMG src="file.gif" alt="Строка1&#010;Строка2">

Оба примера: Ссылка или Строка1 Строка2

Как загрузить страницу не во фрейм, а во все окно?

<A href="file.htm" target="_top">Ссылка</A>

Как загрузить страницу в новом окне?

<A href="file.html" target="_blank">Ссылка</A>

Как выложить на сайте mp3-файлы для скачивания?

Правильнее для этих целей использовать FTP-протокол, но если надо именно на сайте, тогда так:

<A href="http://www.домен.ru/file.mp3">Скачать</A>

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

Как задать фоновое звучание?

В идеальном случае Ваш сайт должен молчать, но если очень хочется иметь музыкальное фоновое оформление, тогда:

<BGSOUND SRC="http://URL/file.mid" loop="infinite">
или
<SCRIPT LANGUAGE="javascript">
<!--
var Brwsr = window.navigator.appName
if (Brwsr == "Microsoft Internet Explorer")
{ Cmd = "<BGSOUND SRC=http://URL/file.mid loop=infinite>" }
else { Cmd = "<EMBED SRC=http://URL/file.mid HIDDEN=true>" }
document.write( Cmd )
//-->
</SCRIPT>

Как поменять фон у ячейки таблицы?

Пусть смена цвета происходит при наведении курсора, тогда:

<TD onMouseOver="this.bgColor='#ffffff'">

Как ячейки таблицы слепить вместе, без пробелов?

Необходимо представить ее в таком виде:

<TABLE rules=none border="0" cellspacing="0" cellpadding="0">
...
</TABLE>

Как задать "резиновый" дизайн, одинаково приспособленный под любое разрешение экрана?

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

<STYLE>
h1 { font:130%;}
body {margin: 10%; padding: 5%;}
table {width: 75%;}
...
</STYLE>

Как расположить текст на сайте коллонками?

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

Как задать фон для заголовков?

При помощи стилей:

<STYLE>
h1 {background-color: #000099;}
</STYLE>

Либо задать стиль для класса, который можно будет применить уже к любому участку текста:

<STYLE>
.bckgr {background-color: #000099;}
</STYLE>
......
<SPAN class="bckgr">Любой текст или заголовок</SPAN>

Как задать подгружаемый шрифт на странице?

Для этого необходимо указать путь до файла .eot так, как это описано здесь. Для того, чтобы создать такой шрифт существуют специальные утилиты, причем как всегда это бывает - разные у NN и IE. Вторая из них распространяется бесплатно и скачать ее можно отсюда. Однако применение таких шрифтов не всегда может быть полезным, т.к. браузеру пользователя дополнительно придется подгружать файл размером около 50-100 kB.

Как быстро и эффективно научиться создавать сайты?

Почаще заглядывайте на [image] http://www.w3.org и в этот учебник, пишите код ручками в Notepad или ему подобных текстовых редакторах, чаще обменивайтесь опытом с коллегами на форумах, не стесняйтесь задавать самые банальные вопросы. В сети есть достаточное колличество тематических форумов, где без раздражения ответят на любой Ваш вопрос, остаточно лишь четко следовать, заведенным на форуме, правилам поведения.

Обычно на каждом из форумов сформировалась постоянная аудитория наиболее опытных завсегдатаев форума, которые охотно оказывают квалифицированную помощь новичкам. Вот, например, ссылки на очень неплохие форумы:
http://www.xpoint.ru/cgi-bin/forum.cgi?action=topic&id=3
http://html.manual.ru/forum/topics.php
Кроме того, больше практикуйтесь в написании кода, ибо только с практикой приходит осознание и опыт.

Как разместить текст поверх картинки?

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

<DIV style="position:absolute; left:25px; top:25px; width:100%; height:100%; z-index:1">
<IMG src="file.gif">
</DIV>
<DIV style="position:absolute; left:25px; top:25px; width:100%; height:100%; z-index:2">
text
</DIV>

Как организовать предварительную загрузку невидимых элементов страницы?

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

<DIV style="position:absolute; display:none">
<IMG src="URL/file.gif">
</DIV>

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

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

Как вставить временное содержание, пока идет загрузка страницы?

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

<DIV style="position:absolute; left:25px; top:25px; width:100%; height:100%; z-index:1">
Ждите, идёт загрузка таблицы .....
</DIV>
<DIV style="position:absolute; left:25px; top:25px; width:100%; height:100%; z-index:2">
<TABLE>
...
</TABLE>
</DIV>

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

Как сделать невозможным загрузку одного фрейма, без фреймсета?

Средствами HTML никак, но можно вставить такой скрипт:

<SCRIPT language="JavaScript">
<!--
if (self.parent.frames.length == 0)
self.parent.location="index.html";
//-->
</SCRIPT>

Здесь подразумевается, что фреймсет назван как index.html

Как сделать невозможным загрузку страницы в чужой фреймсет?

Средствами HTML никак, но можно вставить такой скрипт:

<SCRIPT language="JavaScript">
<!--
if (parent.frames.length !=0) {
window.top.location.href="file.htm"
}
//-->
</SCRIPT>

Здесь подразумевается, что file.htm это название того файла, куда переадресовывается посетитель.

Как защитить от СПАМеров почтовый адрес, расположеный на сайте?

На самом деле никак, поэтому лучше заводить себе новый почтовый ящик каждый раз, когда Ваш адрес станет жертвой СПАМеров. Хотя можно пытаться противостоять СПАМ-ботам - специальным программам, которые "бродят" по сети в поисках почтовых адресов и заносят их в базу данных. Есть один старый, редко используемый, но действенный метод, он заключается в том, чтобы вставлять в название вашего почтового адреса специальное ключевое слово NOSPAM, например:

<A href="mailto:NOSPAMname@domen.ru">name@domen.ru</A>

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

<SCRIPT language="JavaScript">
<!--
document.write('<A href="mailto:name' + '@' + 'domen.ru">' + 'Наша почта</A>')
//-->
</SCRIPT>
Как сделать кнопку возврата к предыдущей странице?

Средствами HTML никак, но можно вставить такой скрипт:

<A href="javascript:history.back()" onMouseOver="window.status='Back';return true">Назад</A>


Учeбник HTML, CSS, бесплатные программы Web-мастеру.

guide
<dimas>
help

On-line учебник HTML с примерами,
справочник по созданию Web-сайтов.

guide
<dimas>
help

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer
Взять banner | bookmark | Контакты | Отослать ссылку

Правила добавления ссылок.

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

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

В том случае, если Вы считаете, что Ваша программа представляет особый случай, или у Вас возникли другие вопросы, например необходимо откорректировать описание программы, пишите. При заполнении формы Вам необходимо указать e-mail, для того, чтобы пользователь мог задавать Вам вопросы по работе программы. Авторам программ для накрутки кликов, систем участия в сетевых пирамидах и прочих обманов - просьба не беспокоить.
Спасибо за сотрудничество.

Взять banner | bookmark | Контакты | Отослать ссылку
Раскрутка | Полезности | FAQ | Е- mailer
Главная | Учебник HTML | Учебник CSS | Web-mastering

guide
<dimas>
help

On-line учебник HTML с примерами ,
справочник по созданию Web-сайтов.

guide
<dimas>
help


E-mailer.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е-mailer

Пожалуйста, заполните поля ниже расположенной формы и постарайтесь не кликать дважды на кнопке "OK". Заполнять поля, отмеченные знаком * , обязательно.

* Кому:

От кого:

Обратный E-mail:

* Текст сообщения:


Учeбник HTML. Введение.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник HTML >>Введение в учебник HTML, немного истории.

  • Историческая справка
  • Стандартизация языка HTML, усилия W3C.
  • Пути дальнейшего развития

Историческая справка

Практически с появлением первых компьютеров возникла проблема передачи информации между ними. И способы были найдены — это различные носители и кабельный способ. Были написаны программы, позволяющие передавать и получать данные и, практически сразу, возникла вторая проблема — проблема совместимости, т. е. как заставить два и более компьютера, соединенных кабелем, работать в локальной сети. В 1999 году мировая общественность отметила 30-летие Intrnet. Официальным днем рождения сети Intrnet считается 2 января 1969 года, когда Управление перспективных исследований Министерства обороны США ARPA (Advanced Research Project Agency) начало работу над проектом связи оборонных компьютеров.

И только много позже — в 1989 году выпускник Оксфордского университета, бакалавр в области физики — сотрудник Европейского центра ядерных исследований (CERN) Тим Бернес-Ли разработал и всерьез приступил к созданию информационной службы World Wide Web. Он написал приложение клиент/сервер ( браузер ). В основу всей системы легло понятие гипертекста — т. е. множества отдельных текстов, имеющих ссылки друг на друга. Для работы с этими текстами был создан специальный протокол HTTP — Hyper Text Transfer Protocol были обозначены основные элементы языка разметки HTML. Эта технология дала огромный толчок в развитии сети и сеть стала действительно интернациональной сетью.

Стандартизация языка HTML, усилия W3C

Многие коммерческие компании подхватили эту инициативу и стали выпускать свои браузеры и к ним свои собственные расширения языка HTML. В 1994 году был образован Консорциум W3C, он был призван, навести порядок в области языка HTML, разработав стандарты, необходимые для дальнейшего развития World Wide Web. В 1996 году Консорциум W3C объявил о сотрудничестве с лидерами рынка для установления стандартов совместимости программного обеспечения. Была предложена версия HTML 3.2, которая стала компромиссным решением — попыткой примирить Microsoft и Netscape и объединить их оригинальные решения в одно целое.

Успех Консорциума W3C оказался спорным, т. к. компании продолжали придумывать новые расширения к языку HTML и внедрили их поддержку в свои браузеры. Гиганты рынка постоянно пеняют на Консорциум W3C из-за того, что он является своеобразным тормозом в развитии HTML, ввиду отсутствия давления на него со стороны пользователей и не спешит принять некоторые их расширения, в то время когда многие WEB-разработчики давно и успешно их применяют на своих страницах. С помощью версии HTML 4,0 Консорциум W3C предпринял очередную попытку установить стандарты.

На сегодняшний день перед WEB-мастерами стоит дилемма — использовать чистый HTML и достигнуть при этом максимальной читаемости и посещаемости, или пользоваться расширениями и нововведениями, в ущерб посещаемости создавать интересные эффекты. Для достижения универсальности WEB-разработчики стали разрабатывать свои страницы в двух вариантах и предлагать посетителям право выбора в зависимости от того, каким браузером тот пользуется. Но в связи с предпринятыми мерами отдела маркетинга фирмы Microsoft, а их браузер Microsoft Internet Explorer теперь бесплатно входит в комплектацию оперативной системы как составная часть Windows '98, становится ясно, что предпочтение их расширениям WEB-мастерами будет отдаваться все чаще и чаще. Хотя существует такая прослойка нейтральных пользователей, которые по тем или иным соображениям пользуются браузерами третьих фирм-производителей.

Агрессивная маркетинговая политика компании Microsoft не ограничилась только этим одним ходом. Руководство компании объявило, что все будущие версии операционной системы Windows будут использовать язык HTML в качестве фундамента интерфейса пользователя. Еще в четвертых поколениях их браузеров Microsoft обогнала Netscape по количеству поддерживаемых земных языков 98 против 10! В планы Microsoft входит также внедрение поддержки интерактивных переговоров и рабочих групп. Тем временем Консорциум W3C объявил о разработке нового языка XML, который возможно в будущем заменит HTML, если он окажется эффективнее и удобнее, а также будет решено, как быть с теми миллионами уже существующих в Интернете страниц, написанных с использованием HTML.

Язык HTML развился из стандартного обобщенного языка описания документов SGML и является его производной, созданной для разметки текстовых документов. Существуют разные суждения о том, считать HTML языком программирования или нет. С точки зрения программистов, он имеет достаточно простой синтаксис и довольно легок в изучении, но, с другой стороны, для простого пользователя иногда постижение языка HTML может представляться затруднительным.

World Wide Web стремительно развивается, программное обеспечение для сети устаревает и обновляется в виде всевозможных заплаток и дополнений, а с ними развивается и сам язык HTML. Язык HTML находит применение все чаще в областях, где раньше не применялся, он перестает быть только лишь исключительно языком описания Web-страниц. Microsoft уже в операционную систему Windows'98 внедрила интеграцию с World Wide Web, что сильно меняет взаимодействие пользователя с операционной системой. Пользователь, работающий в локальных, становящихся все более популярными intranet-сетях, теперь имеет возможность получать доступ к сетевой информации, используя браузер, а не диспетчер файлов, поскольку WEB-браузер может отображать не только документы, поддерживающие HTML, например, содержимое папок или таблицы Excel.

Более того, поддержка таких технологий Internet, как сценарии, потоковая загрузка аудио-видео, Java в Windows'98 встроена в саму операционную систему. Пользовательский интерфейс теперь по желанию может быть настроен так, что все ярлыки станут ссылками, переходы по ним могут осуществляться одним щелчком, рабочий стол и папки могут быть представлены в виде WEB-страниц с возможностью корректировать код и тем самым настраивать их внешний вид. Внешний вид папки может быть настроен при помощи редактора шаблонов или ручками отредактировать файлы Folder.htt и Webview.css при помощи Notepad.

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

Стиль работы меняется, меняются и средства доступа к содержимому. Язык HTML уже изначально создавался как платформо-независимый язык. Новые технологии применяются практически везде и довольно скоро пространство World Wide Web перестанет быть достоянием лишь пользователей настольных PC, уже сейчас некоторые пользователи активно пользуются голосовыми браузерами для незрячих или браузерами, использующими азбуку Бройля, зачастую содержимое выводится не на монитор компьютера, а в телевизор, когда применяются приставки с выходом в сеть или на телетайп, или на монохромные дисплеи различных организаторов-пейджеров и пр.

Пути дальнейшего развития

Уже в 1999 году в мире объем продаж персональных настольных компьютеров упал примерно на 40%, когда продажи всевозможных носимых и карманных портативных устройств стремительно пошли вверх. В этот сектор рынка естественно обратила свои взоры и Microsoft. Возникает сам собой вопрос: на что особенно необходимо обратить внимание при изучении языка сегодня, чтобы быть во всеоружии уже в недалеком будущем.

В 1997 году Консорциум W3C опубликовал спецификацию языка HTML 4,0, в которой указано, какие из элементов устарели и не рекомендуются к дальнейшему применению ( APPLET, BASEFONT, CENTER, DIR, FONT, ISINDEX, MENU, S, STRIKE и U ), а также новые элементы и атрибуты (ABBR, ACRONYM, BDO, BUTTON, COLGROUP, DEL, FIELDSET, FRAME, FRAMESET, IFRAME, INS, LABEL, LEGEND, NOFRAMES, NOSCRIPT, OBJECT, OPTGROUP, PARAM, SPAN, TBODY, TFOOT, THEAD и Q ), которые предлагается использовать в дальнейшем.

При этом Консорциум W3C обозначил тенденцию развития языка HTML все более в сторону логического форматирования содержимого. Была дана возможность идентификации практически любого элемента или группы элементов по имени, были описаны основные атрибуты для событий. Однозначно было указанно на платформо-независимость языка HTML, другими словами было подчеркнуто, что HTML не является языком визуальной верстки текстов, а является языком логической разметки.

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

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

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

Пример применения Dynamic HTML:


Учeбник HTML. Основные понятия.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник HTML >>Основные понятия

Итак, гипертекст — это текст, в котором имеютя ссылки для автоматического перехода на другие тексты — гиперссылки, а язык HTML (Hyper Text Marcup Language) — это независимый от платформ язык разметки текста. Документы, размеченные при помощи этого языка, визуализируются браузерами конечных пользователей в большинстве случаев одинаково благодаря тому, что “понимают” и правильно обрабатывают структурные элементы HTML. Исходный код представляет собой текст, между строк которого вставляются элементы разметки, посетителю страницы эти элементы не видны, а виден результат их воздействия на документ.

Элементы разметки состоят из заключённых в угловые скобки (< и >) дескрипторов — тэгов(tags) и их атрибутов. Совокупность открывающего (< >) и закрывающего (< / >) дескрипторов есть контейнер. Элементы HTML подразделяются на структурные, которые организуют текст и на форматирующие, которые задают его стиль. Для создания документа HTML необходимо создать текстовый файл с&NBSP;содержимым, вставить нужные тэги и после внесения изменений текстовый файл сохраняется с расширением .htm или .html.

Существует множество простых и сложных программ для написания страниц HTML. В своей основе все они делятся на две категории: программы автоматизирующие вставку тэгов, т. е. редактирующие исходный код и программы, работающие по методу WYSIWYG (What you see is what you get) — что видишь, то и получишь, когда WEB-мастер редактирует визуализированный конечный продукт, не видя исходного кода. Помимо специальных HTML редакторов, не требующих особого знания синтаксиса языка, написание документа, возможно практически всеми стандартными текстовыми редакторами и процессорами, написанными для любых платформ.

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

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

Еще раз остановимся на том, из каких основных этапов состоит процесс создания документа HTML ручками, не прибегая к специализированным приложениям:

  • Набор содержимого в любом из текстовых редакторов (например Notepad) и сохранение обычного текстового файла.
  • Логическое и физическое форматирование текста (разбивка на абзацы, блоки, заголовки и пр., внешнее их оформление) при помощи тэгов и сохранение текстового файла с расширением .htm или .html (делается это все в том же Notepad).
  • Организация переходов по гиперссылкам документа при помощи элемента < А > — основного связующего элемента языка HTML.
  • Внедрение в документ необходимых объектов: рисунков, таблиц, видео клипов, аудио файлов, апплетов Java, скриптов и т.д. и т.п. опять же при помощи тэгов языка HTML.

Для того, чтобы впоследствии изменить любой из созданных файлов, достаточно открыть его при помощи того же Notepad откорректировать и сохранить изменения. Браузер Internet Explorer позволяет делать прямо в нем самом, для этого необходимо в меню Вид выбрать просмотр В виде HTML, или кликнуть правой кнопкой мыши и выбрать тот же пункт меню. Для того, чтобы увидеть изменения в документе достаточно в меню Вид выбрать обновить, либо кликнуть в панели управления браузера на значке [image].


Учeбник HTML. Объявление <!DOCTYPE>.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник HTML >>Объявление <!DOCTYPE>

Элемент <!DOCTYPE> должен первым указываться в документе HTML (теоретически). Он сообщает серверу WEB способ обработки документа и то, какие дескрипторы могут находиться на странице, хотя чаще всего он игнорируется браузерами. Поэтому его применение строго не обязательно.
Синтаксис: <!DOCTYPE HTML "текст""URL" >
Здесь текст определяет версию HTML, а URL позволяет браузерам пользователей загрузить DTD например:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 // EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

Ниже описаны некоторые версии HTML

  • <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 // EN"
    "http://www.w3.org/TR/REC-html40/strict.dtd">     Строгое DTD. Документы, использующие такое объявление типа документа, включают в себя все элементы и атрибуты, не являющиеся нежелательными и не использующие кадры.
  • <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional // EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">     Документы, использующие такое объявление типа документа, включает все, что включено в строгое DTD, а также нежелательные элементы и атрибуты, относящиеся к визуальному оформлению.
  • <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset // EN"
    "http://www.w3.org/TR/REC-html40/frameset.dtd">     Документы, использующие такое объявление типа документа, включает все, что включено в предыдущее DTD, а также кадры.

Поскольку язык HTML развился из стандартного обобщенного языка описания документов SGML, являясь его производной, созданной для разметки текстовых документов, то этим и объясняется необходимость задания типа документа. На языке SGML может быть создано приложение для разметки текста, но для описания функциональных особенностей каждого элемента этого приложения разработчику необходимо создать комментарии или специальную документацию, так как сам язык SGML формально может лишь сообщить где может встречаться тот или иной элемент, но не его свойства. Документы, в которых могут встречаться те или иные элементы, были отнесены к различным типам документов (document type). И теперь если возникает необходимость описать элементы разметки документа — достаточно выбрать стандартное определение типа документа — DTD (Document Type Definition).

Ниже для примера приведена выдержка из DTD, описывающая правила задания абзацев текста в документе:
<! ELEMENT P - 0 ( %text ) * >
<! ATTLIST P
align (left|center|right) #IMPLIED>
Отсюда следует, что абзацы текста необходимо заключать в тэги <P> и </P>, причем закрывающий тэг принимает значение "0", следовательно, может быть опущен как необязательный, т. е. наличие в исходном коде начального тэга <P> подразумевает автоматическое завершение предыдущего абзаца. Содержимым абзаца может быть текст любого объема. Атрибутом абзаца является его выравнивание по правому, левому краям или по центру.


Учeбник HTML. Определение границ документа.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник HTML >>Определение границ документа с помощью элемента <HTML>

Тэг <HTML> определяет границы документа HTML, ему соответствует конечный тэг </HTML>. Между этими двумя тэгами располагается собственно весь документ. Как и <!DOCTYPE>, тэги <HTML> и </HTML> не являются строго обязательными. Но, все-таки, их использование является правилами хорошего тона, т. к. браузеры у пользователей могут быть всякие и неизвестно, насколько корректно они визуализируют такой код.

Синтаксис: <HTML> текст и прочие дескрипторы </HTML>
А уже непосредственно документ, обозначенный тэгами <HTML> и </HTML> дополнительно делится на голову —: <HEAD></HEAD> и тело — <BODY></BODY>

Общая схема исходного кода документа HTML

<! DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2 // EN ">
<HTML>
<HEAD>
служебные дескрипторы
</HEAD>
<BODY>
текст и прочие дескрипторы
</BODY>
</HTML>


Учeбник HTML. Элемент <HEAD>.

 counter

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник HTML>>Элемент <HEAD>

Область, обозначаемая тэгами <HEAD> и </HEAD> служит только для формирования общей структуры документа, задавая его глобальные свойства. Информация, находящаяся в этом разделе документа, является служебной и необходима программе-браузеру пользователя. Она допускает вложение между дескрипторами следующих элементов: <TITLE>,<BASE>,<ISINDEX>,<LINK>,<META>,<STYLE>.
  • Создание титула документа с помощью дескриптора <TITLE>
  • Разрешение относительных ссылок с помощью элемента <BASE>
  • Обеспечение поиска при помощи дескриптора <ISINDEX>
  • Взаимосвязь между документами с помощью дескриптора <LINK>
  • Предоставление дополнительной информации о документе с помощью <META>
  • Определение стиля страницы с помощью <STYLE>

Создание титула документа с помощью элемента <TITLE>

При помощи данного дескриптора создается краткое однострочное название страницы, которое выводится в заголовке окна браузера рядом с названием самого браузера. Если титул опускается разработчиком страницы, то браузер попытается сгенерировать его из названия файла. Рекомендуется делать длину титула минимальной и одновременно с этим информативной. Синтаксис: <TITLE> текст </TITLE>

Разрешение относительных ссылок с помощью элемента <BASE>

Данный элемент автоматически задаёт URL для относительных ссылок документа, которые по умолчанию указывают на тот же сервер, на котором расположена сама страница. Однако этот дескриптор позволяет разрешать также ссылки относительно других каталогов и серверов. Элемент <BASE> имеет один лишь атрибут HREF и не имеет конечного тега.
Синтаксис: <BASE HREF="протокол://имя сервера/путь">

Здесь протокол соответствует схеме извлечения данных Internet, например, HTTP, a имя сервера соответствует имени или IP-адресу сервера, например, www.microsoft.com, путь определяет расположение ресурса в иерархии каталогов предыдущего сервера. Путь является необязательным компонентом указателя URL. Если протокол и имя сервера будут опущены, то указатель по умолчанию будет относиться к текущему серверу. Это очень полезный элемент, он избавляет разработчика от необходимости вносить множественные коррективы в ссылках исходного кода документа, например, при размещении копии документа на другом сервере. Достаточно лишь вставить в заголовок копии элемент <BASE> с именем прежнего сервера, и целый узел будет отзеркален лишь копией одного файла, а ссылки будут адресоваться по прежнему адресу.

Обеспечение поиска при помощи элемента <ISINDEX>

Элемент <ISINDEX> используется во время проведения интерактивного поиска на Web-странице. Этот элемент вставляется в документ, сгенерированный сценарием CGI, и предоставляет пользователю сформулировать критерии поиска. При этом любой введённый в приглашении текст склеивается с URL самого документа и пересылается сценарию CGI для обработки в форме URL?слово1+слово2+...+словоN. Это стандартный синтаксис для возврата значений сценариям CGI, согласно которому знак вопроса соответствует началу строки данных, а каждый плюс соответствует пробелу. Дескриптор внедряется в документы исключительно ради сценариев CGI, для предоставления пользователю возможности поиска по заданным словам. Он поддерживает атрибуты : prompt , который позволяет изменять текст приглашения и action , он указывает сценарий или программу, которой будет передан критерий поиска.
Синтаксис: <ISINDEX prompt="строка" action="сценарий">
Где строка и задаёт текст приглашения длиной не более 35 символов.

Взаимосвязь между документами с помощью элемента <LINK>

Справедливости ради надо отметить, что этот элемент используется довольно редко, хотя и появился он в самой первой версии языка HTML. Этот дескриптор можно использовать для создания в документе панелей инструментов и меню, для определения последовательности печати файлов HTML и для связывания таких ресурсов, как таблицы стилей и сценарии. С дескриптором <LINK> используется ряд атрибутов:

  • href
    Указатель URL связанного документа.
  • rel
    Атрибут указывает, как связаны документы с заданным атрибутом href. Ему могут быть присвоены значения Present, History, Made, Annotation и Precede.
    Например: <LINK rel=Annotation href="annotations.htm" >
    означает, что все аннотации для текущего документа расположены в файле annotations.htm.
  • rev
    Атрибут во многом похож на rel ему могут быть присвоены те же значения.
    Например: <LINK rev=Annotation href="master.htm">
    означает, что текущий документ содержит аннотации к файлу master.htm.
  • title
    Атрибут относится к href и задает название документа, на который ссылается href.Естественно, что значение атрибута должно соответствовать значению дескриптора <TITLE>.
  • name
    Позволяет назначить ссылке на фрагмент текущего документа более описательное имя.
  • methods
    Позволяет указать метод извлечения документа, например, FTP, Gopher и т. д.
  • lang
    Позволяет указать информацию о языке документа, например: ru, en, fr.
  • target
    Позволяет указать информацию о целевом фрейме.
  • charset
    Позволяет указать кодировки символов документа.
В настоящее время элемент <LINK> используется только для ссылок на внешние таблицы стилей.
Например: <LINK rel=stylesheet href="style.css" type="text/css">
,где style.css файл, который содержит набор дескрипторов <style> и любые другие определения таблицы стилей.

Предоставление дополнительной информации о документе с помощью <META>

Элемент предоставляет дополнительные сведения о способе обработки документа, он позволяет поисковым машинам идентифицировать и классифицировать документ без его загрузки. Элемент поддерживает парные атрибуты, первый из которых name определяет тип данных, а второй content — содержание. Атрибут name используется приложением-клиентом (браузером)для получения дополнительной информации о документе. Его часто заменяют элементом http-equiv, который используется сервером для создания дополнительных полей при выполнении запроса. В этом случае тэг <META> с атрибутом будет включен в заголовок ответа браузера.

Другими словами, атрибут name используется с целью предоставления сведений о документе, которые могут пригодиться при его поиске, а элемент http-equiv поручает выполнение каких-либо действий серверу .
Например: <META HTTP-EQUIV="Window-target" CONTENT="_top">

Использование элемента http-equiv со значением "refresh" позволяет организовать принудительное обновление страницы с некоторым промежутком времени или загрузку нескольких страниц с определенным интервалом, что незаменимо при создании страниц, где публикуются непрерывно меняющиеся данные (скажем, курсы валют или акций). Значение элемента content в этом случае означает промежуток между обновлениями в секундах, так, если оно равно нулевому значению, то страница будет обновляться непрерывно.

  • <META HTTP-EQUIV="Refresh" content="5;URL=http://www.arcus.lv/dimas/index.html" >
    Перезагрузка документа.
  • <META HTTP-EQUIV="Expires" content="Дата" >
    Дата, обозначающая срок годности документа, при его значении, равном "0", документ будет подгружаться не из кэша, а с сервера.
  • <META HTTP-EQUIV="Reply-to" content="Имя@Адрес">
    Адрес электронной почты .
  • <META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1251>">
    Описание типа и характеристик документа.
  • <META HTTP-EQUIV="Content-language" content="en">
    Описание языка документа.
  • <META HTTP-EQUIV="Cache-Control" content="no-cache">
    Контроль за кэшированием документа.
      Может принимать значения:
    • no-store — не сохраняется.
    • no-cache — не сохраняется в кэш.
    • Public — доступен для любого кэширования.
    • Private — кэшируется в частных кэшах.
  • <META HTTP-EQUIV="Window-target" content="_top">
    Определяет способ появления новых окон браузера.
  • <META HTTP-EQUIV="pragma" content="no-cache">
    Контроль за кэшированием документа.
  • <META HTTP-EQUIV="Set-Cookie" content="NAME=имя;EXPIRES=дата; DOMAIN=имя домена;PATH=путь;SECURE">
    • имя - любая строка без запятых, пробелов и переходов на след.стр. (обязательный парaметр)
    • дата - дата истечения срока хранения в формате: Sun, 25-Feb-01 12:00:01 GMT , если не задан, то cookie не сохраняется (необязательный парaметр)
    • имя домена - домен для которого действительно значения cookie , если не задан, то тот сервер, где лежит сайт (необязательный парaметр)
    • путь - путь к документам домена, для которого действительно значения cookie, если не задан, тогда тот каталог, где лежит сайт (необязательный парaметр)
    • SECURE -указывается только тогда, когда применяется защищенный режим SSL, если не задан, тогда информация передается в обычном режиме (необязательный парaметр)
    Установка Cookie для браузера в том случае, когда надо сохранить информацию в компьютере посетителя и при необходимости к ней обратиться.
    Работает так:
    Браузер, встретив такую конструкцию, записывает файл .txt с данными ввиде имя/значение и хранит в кэше, в следующий раз он сверяет все свои cookie на предмет полного совпадения, и если находит, то отсылает серверу как HTTP заголовок. Конечно, в настройках cookie должны быть разрешены, каждый cookie не может превышать 4 kB (если его размер больше, то отсекается начало записи). Всего их может храниться до 300, причем с одного сервера — не больше 20 (если больше, то последние пишутся поверх первых).
  • <META name="Author" content="Имя автора">
    Имя автора документа.
  • <META name="Keywords" lang="ru" content="Слово1,слово2,слово3 ...">
    Набор ключевых слов для поиска.
  • <META name="Title" content="Название">
    Название станицы.
  • <META name="Robots" content="index,nofollow">
    Указание индексации поисковыми роботами данного документа
      Может принимать значения:
    • ALL — индексировать всё.
    • INDEX — индексировать эту страницу.
    • FOLLOW — индексировать ссылки на этой странице.
    • NONE — не индексировать, игнорировать полностью.
    • NOINDEX — не индексировать, игнорировать эту страницу.
    • NOFOLLOW — не индексировать ссылки на этой странице.
  • <META name="Description" content="Содержание">
    Краткое однострочное описание содержания документа.
  • <META name="Document-state" content="Dynamic">
    Определяет единовременную либо постоянную индексацию документа поисковыми системами.
      Может принимать значения:
    • Static — индексировать единожды.
    • Dynamic — индексировать многократно.
  • <META name="Generator" content="Название">
    Название приложения, в котором был создан документ.
  • <META name="Copyright" content="Условия">
    Условия копирования и распространения документа.

Для автоматизации написания META-тэгов воспользуйтесь формой-генератором.

Определение стиля страницы с помощью <STYLE>

Применение дескрипторов <STYLE> и </STYLE> само по себе является отдельным способом форматирования документа, когда текст форматируется целиком автоматически. Между дескрипторами <STYLE> и </STYLE> указывается описание стилей документа HTML, определяющих свойства элементов, классов, идентификаторов и общих стилей. Внутри дескриптора <STYLE> должны находиться атрибуты:

  • TYPE
    Атрибут описывает тип таблиц стилей.
    Например: <STYLE TYPE="text/javascript">
  • media
    Позволяет указать информацию о том, под какое из устройств вывода стилизован документ, например:
    • screen
      Указывает на экраны компьютеров, не разделенные на страницы.
    • tty
      Указывает на носители с фиксированной сеткой для символов, таких, как телетайпы, терминалы или переносные устройства с ограниченными возможностями отображения.
    • tv
      Указывает на устройства типа телевизора (низкое разрешение, цвета, ограниченные возможности прокрутки).
    • projection
      Указывает на всевозможные проекторы.
    • handheld
      Указывает на карманные устройства (небольшой экран, монохромный, растровая графика, ограниченный диапазон).
    • print
      Указывает на страничные, непрозрачные материалы и документы, просматриваемые на экране в режиме предварительного просмотра печати.
    • braille
      Указывает на тактильные устройства с алфавитом Бройля (для незрячих).
    • aural
      Указывает на синтезаторы речи.
    • all
      Указывает на все устройства, используется в случае, если разработчик предоставляет различные варианты с возможностью выбора.


Учeбник HTML. Элемент <BODY>.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник HTML >>Элемент <BODY>

Элемент <BODY> предназначается для выделения той части документа, которая будет визуализирована для пользователя. Он имеет как начальный, так и конечный теги. Начальный тег <BODY> может иметь несколько атрибутов.

Вложенные атрибуты элемента <BODY>

  • BACKGROUND
    Атрибут задает графическое изображение, которое как черепица заполнит фон документа. Файл с изображением должен быть сохранен в формате GIF или JPEG.
    Синтаксис: <BODY BACKGROUND="(URL)(путь) имя файла">
    В данном случае файл с изображением фона лучше размещать в том же каталоге, что и сам файл, тогда (URL) и (путь) указывать не нужно.
  • BGCOLOR
    Этот атрибут задает цвет фона документа при помощи шестнадцатеричных значений интенсивности цветов RGB , или при помощи строчного литерала, соответствующего названию цвета.
    Синтаксис: <BODY BGCOLOR="#ff0000"> или <BODY BGCOLOR="RED">
  • TEXT
    Этот атрибут задает используемый по умолчанию цвет текста, который не является гиперссылкой. По умолчанию такой текст будет черным.
    Синтаксис: <BODY TEXT=" цвет ">
  • LINK
    Этот атрибут задает цвет гиперссылки, в большинстве браузеров он задан по умолчанию темно-синим.
    Синтаксис: <BODY LINK="цвет" >
  • ALINK
    Этот атрибут задает цвет активной гиперссылки, он меняет цвет гиперссылки в момент щелчка по ней мышью, нежелательно задавать ему цвет фона по понятным причинам.
    Синтаксис: <BODY ALINK="цвет" >
  • VLINK
    Этот атрибут задает цвет посещенной гиперссылки, нежелательно задавать ему цвет фона и цвет атрибута LINK по понятным причинам.
    Синтаксис: <BODY VLINK="цвет" >
  • BGPROPERTIES
    Этот атрибут задает свойства фонового изображения. В данный момент браузерами поддерживается единственное его значение fixed, запрещающее скроллинг изображения.
    Синтаксис: <BODY BGPROPERTIES="fixed" >
  • TOPMARGIN
    Этот атрибут задает верхнюю границу страницы в пикселях.
    Синтаксис: <BODY TOPMARGIN=число >
  • BOTTOMMARGIN
    Этот атрибут задает нижнюю границу страницы в пикселах.
    Синтаксис: <BODY BOTTOMMARGIN=число >
  • LEFTMARGIN
    Этот атрибут задает границу страницы в пикселях слева.
    Синтаксис: <BODY LEFTMARGIN=число >
  • RIGHTMARGIN
    Этот атрибут задает границу страницы в пикселях справа.
    Синтаксис: <BODY RIGHTMARGIN=число >


Учeбник HTML. Цвета RGB.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник HTML >>Управление цветом

  • Шестнадцатеричные значения цвета RGB
  • Задание цвета при помощи строчных литералов
  • Использование безопасной палитры цветов

Шестнадцатеричные значения цвета RGB

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

Во втором же случае за основу принимается черный цвет экрана монитора, каждая ячейка которого светится одним из трех цветов: red — красный, green — зеленый и blue — синий. Тогда при полном отсутствии какого-либо свечения мы получаем чистый черный цвет экрана, а любой из требуемых цветов задается соотношением каждого из трех цветов. В этом случае мы получим RGB-способ передачи цвета. Основные цвета могут иметь значения от 0 до 255, или от 0% до 100%, либо могут быть представлены в виде шестнадцатеричного значения. На рисунке ниже можно увидеть результаты смешения основных цветов.

Шестнадцатеричная система счисления, в отличие от десятичной, в своём ряду цифр имеет не десять знаков, а шестнадцать — отсюда и название. Соответственно, неповторяющихся вариантов сочетаний из двух цифр может быть только 256, для продолжения ряда цифр после 9 используются буквы от A до F, следовательно, ряд будет выглядеть так —
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.
Для перевода чисел из одной системы счисления в другую и наоборот воспользуйтесь калькулятором, приведенным ниже. Максимальное значение здесь может быть равно FF — 255.

Десятичные:
Шестнадцатеричные:

В этом случае цвет задается тремя шестнадцатеричными числами, каждое из которых состоит из двух цифр. Первое число определяет интенсивность красного цвета, среднее — зеленого, последнее — синего цвета. Все числа могут принимать значения в диапазоне от 00 до FF (от 0 до 255 ). Например: зеленый цвет задается как #00FF00, красный — как #FF0000, синий — как #0000FF, белый — как #FFFFFF, полное отсутствие цвета или черный задается как #000000.

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

RED GREEN BLUE
...кликни здесь

Примеры некоторых шестнадцатеричных значений цветов RGB: градации красного, синего и зеленого цветов.
вид | код | вид | код | вид | код | вид | код | вид | код | вид | код
 | #010000 |  | #800000 |  | #000100 |  | #008000 |  | #000001 |  | #000080
 | #100000 |  | #900000 |  | #001000 |  | #009000 |  | #000010 |  | #000090
 | #200000 |  | #A00000 |  | #002000 |  | #00A000 |  | #000020 |  | #0000A0
 | #300000 |  | #B00000 |  | #003000 |  | #00B000 |  | #000030 |  | #0000B0
 | #400000 |  | #C00000 |  | #004000 |  | #00C000 |  | #000040 |  | #0000C0
 | #500000 |  | #D00000 |  | #005000 |  | #00D000 |  | #000050 |  | #0000D0
 | #600000 |  | #E00000 |  | #006000 |  | #00E000 |  | #000060 |  | #0000E0
 | #700000 |  | #FF0000 |  | #007000 |  | #00FF00 |  | #000070 |  | #0000FF

Задание цвета при помощи строчных литералов

Для удобства пользования некоторым цветам и их сочетаниям были присвоены имена, которые распознаются всеми браузерами и появилась возможность задавать многие из них по имени. В таблице ниже приведены некоторые из названий цветов:
вид | имя | вид | имя | вид | имя | вид | имя
 | White |  | Red |  | Orange |  | Yellow
 | Green |  | Blue |  | Purple |  | Black
 | Aliceblue |  | Antiquewhite |  | Aqua |  | Aquamarine
 | Azure |  | Beige |  | Bisque |  | Blanchedalmond
 | Blueviolet |  | Brown |  | Burlywood |  | Cadetblue
 | Chartreuse |  | Chocolate |  | Coral |  | Cornflowerblue
 | Cornsilk |  | Crimson |  | Cyan |  | Darkblue
 | Darkcyan |  | Darkgoldenrod |  | Darkgray |  | Darkgreen
 | Darkkhaki |  | Darkmagenta |  | Darkolivegreen |  | Darkorange
 | Darkorchid |  | Darkred |  | Darksalmon |  | Darkseagreen
 | Darkslateblue |  | Darkslategray |  | Darkturquoise |  | Darkviolet
 | Deeppink |  | Deepskyblue |  | Dimgray |  | Dodgerblue
 | Firebrick |  | Floralwhite |  | Forestgreen |  | Fuschia
 | Gainsboro |  | Ghostwhite |  | Gold |  | Goldenrod
 | Gray |  | Greenyellow |  | Honeydew |  | Hotpink
 | Indianred |  | Indigo |  | Ivory |  | Khaki
 | Lavender |  | Lavenderblush |  | Lemonchiffon |  | Lightblue
 | Lightcoral |  | Lightcyan |  | Lightcoldenrodyellow |  | Lightgreen
 | Lightgray |  | Lightpink |  | Lightsalmon |  | Lightseagreen
 | Lightskyblue |  | Lightslategray |  | Lightsteelblue |  | Lightyellow
 | Lime |  | Limegreen |  | Linen |  | Magenta
 | Maroon |  | Mediumaquamarine |  | Mediumblue |  | Mediumorchid
 | Mediumpurple |  | Mediumseagreen |  | Mediumslateblue |  | Mediumspringgreen
 | Mediumturquoise |  | Mediumvioletred |  | Midnightblue |  | Mintcream
 | Mistyrose |  | Navajowhite |  | Navy |  | Oldlace
 | Olive |  | Olivedrab |  | Orangered |  | Orchid
 | Palegoldenrod |  | Palegreen |  | Paleturquoise |  | Palevioletred
 | Papayawhip |  | Peachpuff |  | Peru |  | Pink
 | Plum |  | Powderblue |  | Rosybrown |  | Royalblue
 | Saddlebrown |  | Seagreen |  | Seashell |  | Sienna
 | Silver |  | Skyblue |  | Slateblue |  | Slategray
 | Snow |  | Springgreen |  | Steelblue |  | Tan
 | Teal |  | Thistle |  | Tomato |  | Turquoise
 | Violet |  | Wheat |  | Whitesmoke |  | Yellowgreen
Перечень строчных литералов с названиями цветов довольно обширен и более чем достаточен. Если необходимо задать в качестве фонового цвет настолько необычный, что ему даже нет названия, то можно воспользоваться шестнадцатеричным значением.

Использование безопасной палитры цветов

К сожалению, на разных платформах с разными системными настройками правильная передача цвета является проблемой. Все дело в том, что браузер всегда старается подстроить цветовую палитру документа под системные настройки и возможности монитора путем самостоятельного смешивания цветов и их замещения. Как результат — иногда пользователь видит не совсем то, что хотел ему показать web-мастер. Выход из этой ситуации был найден в применении палитры, каждый цвет которой гарантированно передается одинаково всеми браузерами на разных платформах. Это так называемая гарантированная палитра, еще ее называют безопасной палитрой. В эту палитру входят цвета, цветовые составляющие которых принимают следующие значения:00,33,66,99, CC,FF, во всех возможных 216 их сочетаниях.
вид | код | вид | код | вид | код | вид | код | вид | код | вид | код
 | FFFFFF |  | CCCCCC |  | 999999 |  | 666666 |  | 333333 |  | 000000
 | CCCC66 |  | CCCC33 |  | 999966 |  | 999933 |  | 999900 |  | 666600
 | CCFF66 |  | CCFF00 |  | CCFF33 |  | CCCC99 |  | 666633 |  | 333300
 | 99FF00 |  | 99FF33 |  | 99CC66 |  | 99CC00 |  | 99CC33 |  | 669900
 | CCFF99 |  | 99FF99 |  | 66CC00 |  | 66CC33 |  | 669933 |  | 336600
 | 66FF00 |  | 66FF33 |  | 33FF00 |  | 33CC00 |  | 339900 |  | 009900
 | 33FF33 |  | 00FF33 |  | 00FF00 |  | 00CC00 |  | 33CC33 |  | 00CC33
 | CCFFCC |  | 99CC99 |  | 66CC66 |  | 669966 |  | 336633 |  | 003300
 | 99FF99 |  | 66FF66 |  | 33FF66 |  | 00FF66 |  | 339933 |  | 006600
 | 66FF99 |  | 33FF99 |  | 00FF99 |  | 33CC66 |  | 00CC66 |  | 009933
 | 66CC99 |  | 33CC99 |  | 00CC99 |  | 339966 |  | 009966 |  | 006633
 | 99FFCC |  | 66FFCC |  | 33FFCC |  | 00FFCC |  | 33CCCC |  | 009999
 | CCFFFF |  | 99FFFF |  | 66FFFF |  | 33FFFF |  | 00FFFF |  | 00CCCC
 | 99CCCC |  | 66CCCC |  | 339999 |  | 669999 |  | 006666 |  | 336666
 | 66CCFF |  | 33CCFF |  | 00CCFF |  | 3399CC |  | 0099CC |  | 003333
 | 99CCFF |  | 3399FF |  | 0099FF |  | 6699CC |  | 336699 |  | 006699
 | 0066FF |  | 3366CC |  | 0066CC |  | 0033FF |  | 003399 |  | 003366
 | 6699FF |  | 3366FF |  | 0000FF |  | 0000CC |  | 0033CC |  | 000033
 | 3333FF |  | 3300FF |  | 3300CC |  | 3333CC |  | 000099 |  | 000066
 | 9999CC |  | 6666FF |  | 6666CC |  | 666699 |  | 333399 |  | 333366
 | CCCCFF |  | 9999FF |  | 6666FF |  | 6600FF |  | 330099 |  | 330066
 | 9966CC |  | 9966FF |  | 6600CC |  | 6633CC |  | 663399 |  | 330033
 | CC99FF |  | CC66FF |  | 9933FF |  | 9900FF |  | 660099 |  | 663366
 | CC66FF |  | CC33FF |  | CC00FF |  | 9900CC |  | 996699 |  | 660066
 | CC99CC |  | CC66CC |  | CC33CC |  | CC00CC |  | 990099 |  | 993399
 | FFCCFF |  | FF99FF |  | FF66FF |  | FF33FF |  | FF00FF |  | CC3399
 | FF66CC |  | FF00CC |  | FF33CC |  | CC6699 |  | CC0099 |  | 990066
 | FF99CC |  | FF3399 |  | FF0099 |  | CC0066 |  | 993366 |  | 660033
 | FF6699 |  | FF3399 |  | FF0066 |  | CC3366 |  | 996666 |  | 663333
 | CC9999 |  | CC6666 |  | CC3333 |  | CC0000 |  | 990033 |  | 330000
 | FFCCCC |  | FF9999 |  | FF6666 |  | FF3333 |  | FF0000 |  | CC0033
 | FF6633 |  | CC3300 |  | FF3300 |  | FF0000 |  | CC0000 |  | 990000
 | FFCC99 |  | FFCC66 |  | FF6600 |  | CC6633 |  | 993300 |  | 660000
 | FF9900 |  | FF9933 |  | CC9966 |  | CC6600 |  | 996633 |  | 663300
 | FFCC66 |  | FFCC00 |  | FFCC33 |  | CC9900 |  | CC9933 |  | 996600
 | FFFFCC |  | FFFF99 |  | FFFF66 |  | FFFF33 |  | FFFF00 |  | CCCC00


Учeбник HTML. Структурное форматирование.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник HTML >>Структурное форматирование.

  • Комментарии <COMMENT>
  • Заголовки <Hn>
  • Разделительные линии <HR>
  • Элемент <P>
  • Элементы <BR> и <NOBR>
  • Элемент <WBR>
  • Элемент <PRE>
  • Элемент <DIV>
  • Элемент <CENTER>
  • Элемент <ADDRESS>
  • Элемент <BLOCKQUOTE>
  • Элемент <SPAN>

Комментарии <COMMENT >

Элемент позволяет скрыть от пользователя комментарии к исходному коду, а также для сокрытия сценариев Java Script от браузеров, которые не поддерживают их.
Синтаксис: <COMMENT> Текст комментария </COMMENT>
Полностью аналогичен старому варианту задания комментариев
Синтаксис: <!- - Текст комментария //- ->

Шесть уровней заголовков <Hn>

Соответствующие каждому уровню гарнитура и размер шрифта зависят от браузера, стилю <H1> назначается самый большой и самый жирный шрифт, а стилю <H6> назначается самый маленький и самый невзрачный шрифт. Элемент может иметь атрибут align, который указывает отступ left, center или right.
Синтаксис: <Hn align=отступ> Текст заголовка </Hn>

Разделительные линии <HR>

Элемент <HR> используется для проведения горизонтальной черты в документе, он может иметь атрибуты : color, задающий цвет линии, size высота в пикселах width ширина в пикселях или процентах от ширины экрана, align режим выравнивания, и не имеет конечного тега.
Синтаксис: <HR align="center" size=n width=n color="цвет">

Элемент <P>

Этот элемент задает один из способов разбиения текста на абзацы. Он может иметь вложенный атрибут align, который указывает отступ left, center или right. Каждый следующий абзац игнорирует, заданное для предыдущего абзаца значение align.
Синтаксис: <P align=отступ> Текст абзаца </P>

Элемент <BR>

Этот элемент задает разрыв текста с переходом на новую строку. Он может иметь вложенный атрибут clear, который может принимать значения left, all или right тем самым указывать обтекание текста вокруг плавающих изображений, вставленных в текст нестандартным способом. Каждый следующий абзац игнорирует, заданное для предыдущего абзаца значение clear.
Синтаксис: <BR clear=обтекание> Текст
Может быть отменен тэгами <NOBR> и </NOBR>

Элемент <WBR>

Этот элемент задает разрыв текста в данном месте при необходимости с переходом на новую строку.
Синтаксис: <WBR >Текст

Элемент <PRE>

Весь текст, заключенный в тэги <PRE> и </PRE> будет визуализирован браузером точно так, как он визуализирован в исходном коде документа, кроме того, текст выводится моноширинным шрифтом, что значительно упрощает задачу форматирования текста в колонки. Элемент поддерживается не всеми браузерами, он может иметь атрибут width, который задает ширину отводимого пространства под текст в символах. Элемент сменил собой устаревшие элементы <XMP>, <LISTING> и <PLAINTEXT>
Синтаксис: <PRE width=число символов >...текст.. .</PRE>

Элемент <DIV>

Элемент <DIV> позволяет выделить в структуре документа несколько разделов. Он является блочным элементом, функционирующим во многом подобно элементу <P>. Если закрывающий тэг </P> опущен, то <DIV> эффективно заменяет его и начинает новый абзац. Он может иметь атрибут align, который указывает отступ left, center или right. Каждый следующий раздел игнорирует, заданное для предыдущего раздела, значение align.
Синтаксис: <DIV align=отступ> Текст раздела </DIV>

Элемент <CENTER>

Элемент <CENTER> текст </CENTER> полностью идентичен конструкции
Синтаксис: <DIV align=center> Текст раздела </DIV>

Элемент <ADDRESS>

Элемент <ADDRESS> используется для оформления контактной информации текущего документа, будь то адрес электронной почты или полный почтовый адрес с номером телефона.
Синтаксис: < ADDRESS>контактная информация </ADDRESS>

Элемент <BLOCKQUOTE>

Элемент <BLOCKQUOTE> позволяет выделить обьемный текст-цитату из общего текста.
Синтаксис: <BLOCKQUOTE> Текст </BLOCKQUOTE>

Элемент <SPAN>

Элемент <SPAN> позволяет выделить некоторое количество текста для последующего его форматирования, но в отличие от <DIV> не начинает новый абзац.
Синтаксис: <SPAN> Текст </SPAN>


Учeбник HTML. Организация в списки.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник HTML >>Организация в списки.

  • Элемент <OL>
  • Элемент <UL>
  • Элемент <DL>
  • Элемент <MENU>
  • Элемент <DIR>

Элемент <OL>

Элемент <OL> используется с целью задания нумерованных списков, имеет атрибуты type=1, или A, или a, или I, или i для задания вида нумерации и start для указания, с какого индекса начинается нумерация списка. Элемент <OL> включает в себя дополнительный элемент <LI>, который задает элементы списка.
Синтаксис: <OL type=1 start=1 > <LI> элемент списка <LI> элемент списка </OL>
Пример:

  1. элемент списка
  2. элемент списка

Элемент <UL>

Элемент <UL>, по сути, является аналогом <OL> без дополнительных элементов <LI>, он используется с целью задания ненумерованых списков, имеет атрибут type=circle,square, или disc для задания вида маркера. Элемент <UL> включает в себя дополнительный элемент <LI>, который задает элементы списка.
Синтаксис: <UL type=circle > <LI> элемент списка <LI> элемент списка </UL>
Пример:

  • первый элемент списка
  • второй элемент списка

Элемент <DL>

Элемент <DL>используется с целью задания словарей, глоссариев и прочих перечней. Элемент <DL> включает в себя дополнительные элементы <DT> и <DD>, которые обозначают соответственно термин и определение.
Синтаксис: <DL > <DT> термин 1 <DD>определение 1 <DT> термин 2 <DD>определение 2 </DL>
Пример:

термин 1
определение 1
термин 2
определение 2

Элемент <MENU>

Элемент <MENU> используется с целью создания списков по логическому определению, такие списки могут связываться с другими элементами документа логически.
Синтаксис: <MENU><LI> элемент списка <LI> элемент списка </MENU>
Пример:

  • элемент списка
  • элемент списка

    • Элемент <DIR>

    Элемент <DIR> используется с целью создания списков по логическому определению, такие списки могут связываться с другими элементами документа логически.
    Синтаксис: <DIR><LI> элемент списка <LI> элемент списка </DIR>
    Пример:

  • элемент списка
  • элемент списка
    •


Учeбник HTML. Форматирование символов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник HTML >>Форматирование символов.

  • Элемент <EM>
  • Элемент <CODE>
  • Элемент <KBD>
  • Элемент <VAR>
  • Элемент <SAMP>
  • Элемент <DFN>
  • Элемент <CITE>
  • Элемент <STRONG>
  • Элемент <I>
  • Элемент <B>
  • Элемент <U>
  • Элемент <STRIKE>
  • Элемент <TT>
  • Элемент <SUP>
  • Элемент <SUB>
  • Элемент <BIG>
  • Элемент <SMALL>
  • Элемент <BLINK>
  • Элемент <FONT>
  • Элемент <BASEFONT>
  • Элемент <ABBR>
  • Элемент <ACRONYM>
  • Элемент <INS>
  • Элемент <DEL>
  • Элемент <Q>

Элемент <EM>

Элемент <EM> используется с целью выделения особым шрифтом слова или текста.
Синтаксис: <EM> Текст </EM>
Пример: Текст выделенный тэгами <EM> и </EM>

Элемент <CODE>

Элемент <CODE> используется с целью дополнительного выделения фрагментов программного кода. По умолчанию он отображается телетайпным шрифтом. Данный элемент предпочтительнее, чем элемент <TT> (телетайпный шрифт). Поскольку расположение пробелов существенно для чтения программного кода, элемент <CODE> целесообразно употреблять в сочетании с элементом <PRE>.
Синтаксис: <CODE> листинг кода </CODE>
Пример: Текст выделенный тэгами <CODE> и </CODE>

Элемент <KBD>

Элемент <KBD> используется с целью выделения диалога пользователя с компьютером .
Синтаксис: <KBD> Ввод с клавиатуры </KBD>
Пример: Текст выделенный тэгами <KBD> и </KBD>

Элемент <VAR>

Элемент <VAR> используется с целью дополнительного выделения переменных в коде совместно с элементом <CODE> .
Синтаксис: <VAR> Переменная </VAR>
Пример: Текст выделенный тэгами <VAR> и </VAR>

Элемент <SAMP>

Элемент <SAMP> используется с целью выделения диалога пользователя с компьютером .
Синтаксис: <SAMP> Системное сообщение компьютера </SAMP>
Пример: Текст выделенный тэгами <SAMP> и </SAMP>

Элемент <DFN>

Элемент <DFN> используется с целью обозначения терминов и определений по типу словарей или глоссариев.
Синтаксис: <DFN> Текст </DFN>
Пример: Текст выделенный тэгами <DFN> и </DFN>

Элемент <CITE>

Элемент <CITE> используется с целью обозначения источника информации ,из которого взята цитата.
Синтаксис: <CITE> Текст </CITE>
Пример: Текст выделенный тэгами <CITE> и </CITE>

Элемент <STRONG>

Элемент <STRONG> используется с целью выделения особым шрифтом слова или текста.
Синтаксис: <STRONG> Текст </STRONG>
Пример: Текст выделенный тэгами <STRONG> и </STRONG>

Элемент <I>

Элемент <I> используется с целью выделения особым шрифтом слова или текста.
Синтаксис: <I> Текст </I>
Пример: Текст выделенный тэгами <I> и </I>

Элемент <B>

Элемент <B> используется с целью выделения особым шрифтом слова или текста.
Синтаксис: <B> Текст </B>
Пример: Текст выделенный тэгами <B> и </B>

Элемент <U>

Элемент <U> используется с целью выделения особым шрифтом слова или текста.
Синтаксис: <U> Текст </U>
Пример: Текст выделенный тэгами <U> и </U>

Элемент <STRIKE>

Элемент <STRIKE> используется с целью выделения особым шрифтом слова или текста.
Синтаксис: <STRIKE> Текст </STRIKE>
Пример: Текст выделенный тэгами <STRIKE> и </STRIKE>

Элемент <TT>

Элемент <TT> используется с целью выделения особым телетайпным шрифтом слова или текста.
Синтаксис: <TT> Текст </TT>
Пример: Текст выделенный тэгами <TT> и </TT>

Элемент <SUP>

Элемент <SUP> используется с целью выделения особым шрифтом слова или текста.
Синтаксис: <SUP> Текст </SUP>
Пример: Текст выделенный тэгами <SUP> и </SUP>

Элемент <SUB>

Элемент <SUB> используется с целью выделения особым шрифтом слова или текста.
Синтаксис: <SUB> Текст </SUB>
Пример: Текст выделенный тэгами <SUB> и </SUB>

Элемент <BIG>

Элемент <BIG> используется с целью выделения особым шрифтом слова или текста относительно основного текста.
Синтаксис: <BIG> Текст </BIG>
Пример: Текст выделенный тэгами <BIG> и </BIG>

Элемент <SMALL>

Элемент <SMALL> используется с целью выделения особым шрифтом слова или текста относительно основного текста.
Синтаксис: <SMALL> Текст </SMALL>
Пример: Текст выделенный тэгами <SMALL> и </SMALL>

Элемент <BLINK>

Элемент <BLINK> используется с целью выделения особым шрифтом слова или текста относительно основного текста.
Синтаксис: <BLINK> Текст </BLINK>
Пример: Текст выделенный тэгами <BLINK> и </BLINK>

Элемент <FONT>

Элемент <FONT> используется с целью выделения особым шрифтом слова или текста. С ним применяются два атрибута size и color. Некоторые браузеры поддерживают атрибут face, позволяющий задать любой из перечня шрифтов, если браузер не находит заданный шрифт - то используется шрифт, заданный по умолчанию.
Синтаксис: <FONT size=n color="цвет"> Текст </FONT>

или <FONT face=имя color="цвет"> Текст </FONT>

Элемент <BASEFONT>

Элемент <BASEFONT> используется как альтернатива атрибуту size элемента <FONT>, он позволяет задать базовый размер шрифта во всем документе и не имеет конечного тега. По умолчанию значение его задается равным 3 ,значение size может выражаться так же и относительным размером, например, размер -1 означает размер на один меньший, чем по умолчанию.
Синтаксис: <BASEFONT size=n>

Элемент <ABBR>

Элемент <ABBR> используется с целью логического выделения слова, обозначающего аббревиатуру, например ФСБ, FBI , HTML , WWW, MTV
Синтаксис: <ABBR>ФСБ</ABBR>

Элемент <ACRONYM>

Элемент <ACRONYM> используется с целью логического выделения слова, обозначающего акроним, например GmBH, Ltd., и т.д., и т.п.,
Синтаксис: <ACRONYM>Ltd.</ACRONYM>

Элемент <INS>

Элемент <INS> используется с целью выделения особым шрифтом слова или текста, когда требуется показать явно, что текст был вставлен после опубликования документа.
Синтаксис: <INS>текст</INS>
Пример: Текст выделенный тэгами <INS> и </INS>

Элемент <DEL>

Элемент <DEL> используется с целью выделения особым шрифтом слова или текста, когда требуется показать явно, что текст был удален после опубликования документа.
Синтаксис: <DEL>текст</DEL>
Пример: Текст выделенный тэгами <DEL> и </DEL>

Элемент <Q>

Элемент <Q> используется с целью логического выделения краткой цитаты, встроенной в текст. Поддерживает атрибут lang и в зависимости от особенностей языка соответственно помечает цитату.
Синтаксис: <Q lang="ru">текст</Q>


Учeбник HTML. Организация ссылок.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник HTML >>Элемент <A>

Элемент <A> используется с целью создания ссылок на другие элементы документа, или даже на другие документы, такие ссылки являют собой основную причину ошеломляющей популярности пространства World Wide Web , где пользователь может легко перескочить с одного фрагмента текста на другой или со страницы на страницу, не задавая явным образом URL последних. Элемент выполняет два действия: задает имя ссылки и задает ссылку на имя. Имя ссылки браузер автоматически выделяет другим цветом и подчеркивает.

  • name
    Для задания имени используется атрибут name, который задает привязку ссылки в тексте, на которую и будет производиться ссылка.
    Синтаксис: <A name=имя> необязательный текст </A >
  • href
    Для организации ссылки используется атрибут href, который задает адрес ссылки. Он может указывать или на имя ссылки в тексте, или на URL и имя файла.
    Синтаксис: <A href="URL"> текст, для щелчка </A >

    или же в тексте: <A href="#имя"> текст для щелчка </a>
  • methods
    Атрибут указывает метод извлечения документа, например, FTP, Gopher и т. д.
    Синтаксис: <A methods="название"> необязательный текст </A >
  • frame
    Атрибут используется для указания названия кадра, в котором должен быть визуализирован целевой документ.
    Синтаксис: <A frame="имя фрейма"> необязательный текст </A >
  • id
    Для организации ссылки используется атрибут href, который задает адрес ссылки. Атрибут id идентичен атрибуту name с той разницей, что он может вставляться в другие тэги, отличные от тэга <A>
    Например: <P id="имя абзаца"> далее в тексте.. .<A href="# имя абзаца"> Ссылка</A >
  • title
    Для визуализации подсказки ссылки используется атрибут title, который задает название ссылки
    Синтаксис: <A title=" имя ссылки"> Ссылка</A >
    Пример: ссылка наверх
  • accesskey
    Атрибут используется для указания горячей клавиши, при нажатии на которую осуществляется переход по ссылке
    Синтаксис: <A accesskey=" имя клавиши"> Ссылка</A >
    Пример: ссылка наверх - нажмите ALT+u

Примеры использования элемента <A>

Ниже приведены примеры ссылок на различные файлы по разным протоколам:

  • Ссылка на HTML файл по протоколу HTTP
    <a href="http://www.arcus.lv/dimas/page1.htm">Пример</a>
    Пример
  • Ссылка на ZIP файл по протоколу HTTP
    <a href="http://www.arcus.lv/dimas/test.zip">Пример</a>
    Пример
  • Ссылка на TXT файл по протоколу HTTP
    <a href="http://www.arcus.lv/dimas/test.txt">Пример</a>
    Пример
  • Ссылка на EXE файл по протоколу FTP
    <a href="ftp://ftp.sausage.com/pub/hotdog/hotdog6/hotdog6install.exe">Пример</a>
    Пример
  • Ссылка на e-mail,при помощи протокола mailto
    <a href="mailto:name@domen.ru">Пример</a>
    Пример
  • Ссылка на e-mail,при помощи протокола mailto с автоподставлением темы
    <a href="mailto:name@domen.ru?Subject=E-mail to Web-master">Пример</a>
    Пример
  • Ссылка на e-mail,при помощи протокола mailto с автоподставлением темы и текста послания
    <a href="mailto:name@domen.ru?Subject=Teмa &BODY=Тeкст послания">Пример</a>
    Пример
  • Ссылка на e-mail,при помощи протокола mailto с автоподставлением темы, текста послания, а также адресов для отправки копии письма и скрытой копии
    <a href="mailto:name@domen.ru?Subject=Teмa &BODY=Тeкст послания&cc=name@domen.ru&bcc=name@domen.ru">Пример</a>
    Пример
  • Ссылка на MPG файл по протоколу HTTP, в случае если броузер сам не умеет открывать данные файлы, то запускается независимая программа, умеющая это делать.
    <a href="http://www.arcus.lv/dimas/roma.mpg">Пример</a>
    Пример ( 204 kB ).
  • Ссылка на группу новостей,при помощи протокола news
    <a href="news:comp.infosystems.www.announce">Пример</a>
    Пример

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


Учeбник HTML. Вставка в документ объектов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник HTML >>Вставка в документ объектов.

Все мультимедиа-компоненты в сети можно разделить на два основных типа: содержимое, обрабатываемое непосредственно браузером и содержимое, обрабатываемое дополнительными средствами. Браузер определяет способ обработки по типу содержимого файла и либо сам обрабатывает данные, либо передаёт их на обработку дополнительным приложениям. Тип содержимого файла определяется либо по его расширению: .gif, .jpg, .mpg, .wrl и т.д., либо по специальному коду content type="тип содержимого" вставляемому в исходный код документа, где тип содержимого может принимать значения: text/html, image/gif, video/quicktime и т.д.

Так как язык HTML создавался как язык разметки текста и только для этих целей, то естественно что в нем изначально не была предусмотрена поддержка мультимедийных объектов. В последнее же время многие компании-разработчики стали предоставлять пользователям их браузеров доступ к мультимедиа-содержимому, встраивая в них различные plug-ins. Они позволяют представить мультимедиа-содержимое как внутреннее содержимое Web-страницы и могут располагаться как во всё окно, так и в заданных размерах. На практике получается следующее - если браузер подгружает файл с таким содержимым впервые, то пользователю предлагается скачать плагин, который запишется на жесткий диск и в следующий раз браузер передаст мультимедиа-содержимое на обработку уже сразу ему.

Пример (84 kB).

В Microsoft, например, для этих целей были созданы элементы управления ActiveX, позволяющие использовать разнообразное содержимое, включая даже электронные таблицы и средства управления от Windows, хотя на самом деле общие стандарты для всех браузеров и платформ, на которых они работают, ещё не разработаны.

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

  • Элемент <IMG>.
  • Элемент <MAP>.
  • Элемент <AREA>.
  • Элемент <BANNER>.
  • Элемент <BGSOUND>.
  • Элемент <MARQUEE>.
  • Элемент <APPLET>.
  • Элемент <SCRIPT>.
  • Элемент <OBJECT>.
  • Элемент <EMBED>.

Элемент <IMG>

Элемент <IMG> Используется для вставки в тело документа графического изображения. Под графическим изображением подразумевают: маленькие пиктограммы, рисунки, графические объекты и карты изображений, занимающие большую часть окна браузера. Кроме того, элемент <IMG> поддерживает различные атрибуты, определяющие расположение изображения относительно окружающего текста и содержания Web страницы в целом. Изображение может выравниваться по левой, правой, верхней или нижней границе строки или располагаться в центре окна.
Синтаксис: <IMG src= URL атрибуты >

  • src
    Этот атрибут указывает на файл графики, задавая его URL.
    Синтаксис: <IMG src=" URL ">
    Пример:
    Кот Рома
  • alt
    В некоторых случаях, когда браузер не в состоянии загрузить файл с изображением, либо когда пользователь намеренно, с целью сэкономить время и деньги, отключает загрузку картинок, на экране высвечивается альтернативный текст типа здесь нарисован логотип фирмы .
    Синтаксис: <IMG alt=" описание ">
    Пример:
    Альтернативный текст к рисунку
  • align
    Этот атрибут задает расположение рисунка в окне и его выравнивание. Он может принимать значения:
    • top-по верхнему краю
      Пример:
      Кот Рома строка, в которую вставлена картинка, будет выровнена по верхнему краю картинки и высота строки будет равна высоте самого рисунка
    • bottom-по нижнему краю
      Пример:
      Кот Рома строка, в которую вставлена картинка, будет выровнена по нижнему краю картинки
    • middle-по центру
      Пример:
      Кот Рома строка, в которую вставлена картинка, будет выровнена по центру
    • right-справа
      Пример:
      Кот Рома картинка выравнивается по правому краю, текст будет обтекать картинку слева, применяется когда рисунок имеет достаточно большие размеры
    • left-влево
      Пример:
      Кот Рома картинка выравнивается по левому краю, текст будет обтекать картинку справа, часто применяется для создания буквиц, когда первая буква представляется ввиде рисунка
      Синтаксис: <IMG align=" значение ">
  • width
    Этот атрибут задает ширину области в пикселях, отводимой в окне под изображение. В этом случае рисунок автоматически масштабируется браузером под заданный размер.
    Синтаксис: <IMG wigth= число >
  • height
    Этот атрибут задает высоту области в пикселях, отводимой в окне под изображение. В этом случае рисунок автоматически масштабируется браузером под заданный размер.
    Синтаксис: <IMG height= число >

    Обратите Ваше внимание на тот факт, что размер изображения в килобайтах не меняется - какие бы вы не задавали параметры width и height

    Пример width=50
     Кот Рома
    Пример height=30
     Кот Рома
    Пример width=50 height=100
    Кот Рома
    Пример width=100 height=50
    Кот Рома
  • hspace
    Этот атрибут задает пустое пространство в пикселях справа и слева от рисунка.
    Синтаксис: <IMG hspace= число >
    Пример:
    Кот Рома
  • border
    Этот атрибут задает в пикселях толщину рамки вокруг рисунка.
    Синтаксис: <IMG border= число >
    Пример:
    Кот Рома
  • vspace
    Этот атрибут задает пустое пространство в пикселях сверху и снизу от рисунка.
    Синтаксис: <IMG vspace= число >
    Пример:
    Кот Рома
  • ismap
    Этот атрибут разрешает использовать изображения, отдельные части которого связаны со ссылками и позволяют выполнять переходы. Такие рисунки называют MAP карта, они используются совместно с элементом <A>. В этом случае реакцию на щелчок по карте отрабатывает сервер.
    Синтаксис: <A href=" URL карты "><IMG src=" URL изображения " ismap>
  • usemap
    Этот атрибут разрешает использовать изображения, отдельные части которого связаны с картами, они используются совместно с элементом <MAP>. В этом случае реакцию на клик по карте отрабатывает браузер.
    Синтаксис: <IMG src=" URL изображения " usemap= "URL" карты(#имя карты) >
  • lowsrc
    Этот атрибут задает URL файла с низкокачественной копией основного изображения, которое может быть визуализировано до изображения, заданного атрибутом src.
    Синтаксис: <IMG lowsrc= URL >
  • dynsrc
    Этот атрибут задает URL файла с видео клипом или сценой VRML.
    Синтаксис: <IMG dynsrc= URL >
  • start
    Этот атрибут используется совместно с атрибутом dynsrc, он задает возможность управления процессом воспроизведения клипа, принимает значения fileopen-сразу после загрузки и mouseover-при наведении курсора.
    Синтаксис: <IMG dynsrc= URL start= mouseover >
  • loop
    Этот атрибут задает количество воспроизведений видео клипа. Он может принимать значения от 1 до infinite - бесконечно.
    Синтаксис: <IMG loop= значение >

Примеры (208 kB) внедрения видео файлов в страницу.

Элемент <MAP>

Элемент <MAP> применяется для представления графического изображения в виде карты с активными областями. Он поддерживает аттрибут name, который задает его имя, и включает внутри себя элемент <AREA>, который и задает собственно активные области карты, связанные ссылками с прочими ресурсами.
Синтаксис: <MAP name=" имя "> <AREA атрибуты > </MAP>

Элемент <AREA>

Элемент <AREA> задает активные области карты, щелчком по которым можно осуществить ссылку. Элемент не имеет конечного тэга. С изображениями карт удобно работать в стандартном приложении для Windows - редакторе Paint , для него изображение должно быть трансформировано в формат BMP. Используя сетку в режимах увеличения нажатием Ctrl+G и выбрав инструмент Выделение, когда указатель мыши принимает вид тонкого крестика, координаты курсора можно определить с точностью до одного пикселя. Такая точность может очень пригодиться при задании координат активных областей карты. Элемент <AREA> поддерживает различные атрибуты:

  • href
    Этот атрибут указывает URL ссылки.
    Синтаксис: <AREA href=" URL ">
  • alt
    Этот атрибут задает альтернативный текст для браузеров, которые не поддерживают данный элемент.
    Синтаксис: <AREA alt=" текст подсказки ">
  • title
    Этот атрибут задает альтернативный текст для браузеров, который всплывает при наведении курсора на данный элемент.
    Синтаксис: <AREA title=" текст подсказки ">
  • shape
    Этот атрибут задает форму активной области на карте и её координаты, он может принимать значения: "circle" coords=X,Y,R, где X,Y,R - координаты центра круга и его радиус, "poly" coords=X1,Y1,X2,Y2,X3,Y3..., гдеX1,Y1,X2,Y2,X3,Y3... - координаты вершин многоугольника, если многоугольник - прямоугольник, то достаточно указать его верхнюю левую и правую нижнюю вершины "rect" coords=X1,Y1,X3,Y3.
    Синтаксис: <AREA " circle " coords= X,Y,R >

Пример изображения - карты :

<IMG src=" map.gif " usemap="# supermap " border= 0 >
<MAP name=" supermap ">
<AREA shape= circle coords=" 34,32,23 " href=" page1.html " title=" ссылка 1 ">
<AREA shape= poly coords=" 12,110,37,62,72,114 " href=" page2.html " title=" ссылка 2 ">
<AREA shape= rect coords=" 83,44,133,94 " href=" page3.html " title=" ссылка 3 ">
</MAP>

Элемент <BANNER>

Элемент <BANNER> позволяет зафиксировать какую-либо информацию на экране вне зависимости от того, какая часть окна просматривается в данный момент. Данный элемент также редко поддерживается браузерами, добиться же подобного решения можно при помощи фреймов или слоев.
Синтаксис: <BANNER>Текст или рисунок </BANNER>
Пример: Текст, выделенный элементом <BANNER>.

Элемент <BGSOUND>

Элемент <BGSOUND> используется для задания фонового звучания сразу же после загрузки страницы. Он может не иметь конечного тэга и может иметь атрибуты:

  • src
    Этот атрибут указывает URL звукового файла в формате WAV, AU или MIDI.
    Синтаксис: < bgsound src= URL >
  • loop
    Этот атрибут задает количество воспроизведений звукового файла. Он может принимать значения 1 или infinite - бесконечно.
    Синтаксис: <BGSOUND loop= значение >

Пример задания фонового звучания.

Элемент <MARQUEE>

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

  • bgcolor
    Этот атрибут задает цвет фона бегущей строки.
    Синтаксис: <MARQUEE bgcolor="цвет">
  • height
    Этот атрибут высоту бегущей строки в пикселях или процентах от всего окна.
    Синтаксис: <MARQUEE height=число>
  • align
    Этот атрибут задает выравнивание бегущей строки по верхнему краю top, по середине middle или по нижнему краю bottom.
    Синтаксис: <MARQUEE align= ...>
  • direction
    Этот атрибут задает направление движения бегущей строки: left влево, right вправо, up вверх, down вниз.
    Синтаксис: <MARQUEE direction="...">
  • behavior
    Этот атрибут задает поведение бегущей строки, либо scroll прокрутка, либо slide прокрутка с остановкой, либо alternate движение от края к краю.
    Синтаксис: <MARQUEE behavior="...">
  • hspace
    Этот атрибут задает смещение в пикселах в право бегущей строки.
    Синтаксис: <MARQUEE hspace=число>
  • vspace
    Этот атрибут задает пустое пространство выше и ниже бегущей строки.
    Синтаксис: <MARQUEE vspace=число>
  • loop
    Этот атрибут задает количество проходов бегущей строки.
    Синтаксис: <MARQUEE loop=число>
  • scrollamount
    Этот атрибут задает скорость движения бегущей строки, если его значение равно 1, то она будет еле ползти, если его значение больше 10, то она будет двигаться очень быстро.
    Синтаксис: <MARQUEE scrollamount=число>
  • scrolldelay
    Этот атрибут задает временной интервал между шагами бегущей строки, с помощью него можно заставить строку двигаться рывками.
    Синтаксис: <MARQUEE scrolldelay=число>

Пример: Бегущая строка, заданная элементом
<MARQUEE height=10 behavior="scroll">СТРОКА</MARQUEE>
СТРОКА

Элемент <APPLET>

Элемент <APPLET> используется для передачи компьютеру клиента программы - апплета, которая загружается и выполняется браузером. Программы, переданные браузеру, существенно улучшают работу со страницей, придавая ей интерактивность не свойственную страницам написанным без использования апплетов. Процесс внедрения состоит из двух этапов. Во-первых, необходимо убедиться, что все классы и связанные файлы, такие как графические изображения и аудио фрагменты, размещены в доступном каталоге - чаще всего это подкаталог classes каталога с документами HTML. Во-вторых, в исходный код страницы должен быть внедрен тэг ссылки на классы <APPLET>, а так же все необходимые для его работы параметры. Он может иметь атрибуты:

  • CLASS
    Этот атрибут указывает имя апплета.
  • SRC
    Этот атрибут указывает URL каталога, в котором должен быть обнаружен откомпилированный апплет с символом / на конце. Ни в коем случае нельзя указывать само имя аплета т.к. оно названо атрибутом CLASS.
  • WIDTH
    Этот атрибут указывает ширину области вывода апплета в пикселях.
  • HEIGHT
    Этот атрибут указывает высоту области вывода апплета в пикселях.
  • ALIGN
    Этот атрибут указывает режим выравнивания апплета относительно текста, принимает значения TOP, MIDDLE и BOTTOM.

Синтаксис: <APPLET class="имя.class" src="URL/" width="число" height="число" align="значение">
<PARAM NAME=имя параметра VALUE=его значение REF="адрес расположения объекта"></APPLET>

Пример внедрения в страницу аплета Java

Элемент <SCRIPT>.

Для придания документу дополнительных возможностей, которые невозможно обеспечить с помощью стандартных элементов языка HTML, разработчики пользуются скриптовыми языками. Встраиваемые в документ объекты придают ему динамичность, интерактивность, позволяют управлять содержимым страницы уже после её загрузки. Элемент <SCRIPT> определяет язык сценариев, который используется в текущем документе обычно это либо Java Script , либо Visual Basic Script. Он может иметь атрибуты:

  • language
    Атрибут указывает язык, который использовался при написании сценария.
    Синтаксис: <SCRIPT LANGUAGE ="язык">
  • src
    Атрибут задает URL текстового файла с кодом сценария и расширением .js.
    Синтаксис: <SCRIPT type="text/javascript" src = URL>

Кроме того скрипты могут привязываться к определенным событиям:

  • onLoad
    Скрипт отрабатывается в момент загрузки страницы.
    Пример: Пример
  • onUnload
    Скрипт отрабатывается в момент ухода со страницы.
    Пример: Пример
  • onClick
    Скрипт отрабатывается в момент клика мыши в определенном месте.
    Пример: кликни здесь
  • onMouseOver
    Скрипт отрабатывается в момент наведения курсора мыши на определенный объект.
    Пример:
  • onMouseOut
    Скрипт отрабатывается в момент покидания курсором мыши определенного объекта.
    Пример:
  • onFocus
    Скрипт отрабатывается в момент, когда поле активизируется клавишей TAB.
    Пример кликните курсором в первом поле, а потом перейдите во второе клавишей TAB:

  • onBlur
    Скрипт отрабатывается в момент, когда поле теряет фокус.
    Пример кликните курсором в первом поле, а потом перейдите во второе клавишей TAB:

  • onSelect
    Скрипт отрабатывается в момент, когда в поле выбран текст.
    Пример:
  • onChange
    Скрипт отрабатывается в момент, когда поле теряет фокус, а данные в нем уже изменены.
    Пример измените содержимое первого поля, а затем перейдите ко второму полю клавишей TAB или курсором:
  • ondblclick
    Событие происходит при двойном щелчке на элементе. Этот атрибут может использоваться с большинством элементов.
    Пример:
  • onmousedown
    Событие происходит при нажатии кнопки на элементе. Этот атрибут может использоваться с большинством элементов.
    Пример:
  • onmouseup
    Событие происходит при отпускании кнопки на элементе. Этот атрибут может использоваться с большинством элементов.
    Пример:
  • onmousemove
    Событие происходит при перемещении курсора, когда он находится на элементе. Этот атрибут может использоваться с большинством элементов.
    Пример проведите курсором над текстом:
  • onkeypress
    Событие происходит при нажатии клавиши на элементе. Этот атрибут может использоваться с большинством элементов.
    Пример укажите курсором на текст и нажмите на любую клавишу:
  • onkeydown
    Событие происходит при нажатии клавиши на элементе. Этот атрибут может использоваться с большинством элементов.
    Пример укажите курсором на текст и нажмите на любую клавишу:
  • onkeyup
    Событие происходит при отпускании клавиши на элементе. Этот атрибут может использоваться с большинством элементов.
    Пример укажите курсором на текст и, нажав, отпустите любую клавишу:
    Пример:
  • onsubmit
    Событие происходит при отправке формы. Оно используется только в элементе FORM
  • onreset
    Событие происходит при сбросе формы. Оно используется только в элементе FORM

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

Элемент <OBJECT>

Элемент <OBJECT> вставляет в документ графическое изображение, видео клип, апплет JAVA, или элемент управления ActiveX. Можно сказать, что он пришел на смену элементу <APPLET> т.к. с помощью последнего можно вставить только лишь апплет Java. Единый для всех объектов и модулей элемент <OBJECT> функционально замещает элемент IMG и при необходимости может расширяться. Его атрибуты:

  • id
    Этот атрибут определяет идентификатор документа.
  • declare
    Этот атрибут позволяет подразумевать документ, не создавая его.
  • classid
    Этот атрибут определяет URL идентификатора класса или экземпляра объекта.
  • codebase
    Этот атрибут определяет URL местоположения кода.
  • data
    Этот атрибут определяет URL, который указывает на необходимые данные или объект.
  • type
    Этот атрибут обозначает тип содержимого Internet данных в соответствии с атрибутом DATA.
  • codetype
    Этот атрибут обозначает тип содержимого Internet данных в соответствии с атрибутом CLASSID.
  • standby
    Этот атрибут позволяет выводить окна с коротким сообщением в процессе загрузки объекта.
  • align
    Этот атрибут определяет режим выравнивания объекта относительно строки текущего текста или как отдельного элемента.
    Допустимые значения:
    • text-top
    • middle
    • textmiddle
    • baseline
    • textbottom
    • left
    • center
    • right
  • width
    Этот обязательный атрибут определяет ширину объекта в окне браузера.
  • height
    Этот обязательный атрибут определяет высоту объекта в окне браузера.
  • border
    Этот атрибут задает наличие или отсутствие обрамления объекта при помощи значений 1 и 0 соответственно.
  • hspace
    Этот атрибут позволяет задать дополнительное пространство вокруг объекта.
  • vspace
    Этот атрибут позволяет задать дополнительное пространство вокруг объекта.
  • usemap
    Этот атрибут определяет URL объекта, если тот является картой.
  • shapes
    Этот атрибут используется вместе с объектами, которые обладают точками привязки или активными зонами.
  • name
    Этот атрибут используется с формами HTML, которые могут содержать объект, и определяет, должен ли тот передавать данные серверу при запуске формы.
  • alt
    Этот атрибут определяет альтернативное содержимое, которое будет визуализировано в случае, если пользователь не может или не хочет отобразить объект.
  • title
    Этот атрибут определяет заголовок объекта.
Синтаксис: <OBJECT атрибуты>параметры и альтернативное содержание</OBJECT>

Примеры (208 kB) внедрения в страницу при помощи <OBJECT>:
Еще один пример, а именно использование <OBJECT> вместо <APPLET>

Элемент <EMBED>

Элемент <EMBED> является популярным расширением к языку HTML от Netscape пока он сам и его синтаксис не описаны в спецификации HTML 4.0, но т.к. Microsoft обеспечила некоторую поддержку этого элемента своими браузерами, то довольно часто применяется при внедрении в страницы мультимедиа содержимого и других файлов. Официально для этих целей Консорциум W3C в спецификации HTML 4,0 рекомендует применять дескриптор <OBJECT>, однако Web-мастера довольно часто используют тэги <EMBED> и </EMBED>, и в зависимости от возможностей браузера элемент обрабатывается либо браузером, либо в специально запущенном приложении.
Синтаксис: <EMBED атрибуты> </EMBED>
Элемент может поддерживать следующие атрибуты:

  • height задает вертикальный размер, вставляемого объекта
  • width задает горизонтальный размер, вставляемого объекта
  • autostart задает возможность запуска при загрузке, принимает значения true или false
  • loop задает количество повторений, принимает значения true или false
  • hidden позволяет скрыть панель управления, принимает значения true или false
  • src указывает на URL мультимедиа файла
  • pluginspage указывает на URL плагина для проигрывания мультимедиа файла
  • bgcolor задает фон объекта
  • type указывает на тип мультимедиа файла
  • quality указывает на качество мультимедиа файла
  • alt задает альтернативное содержание

Пример:

<EMBED src="file.swf" menu=true quality=high bgcolor=#000066
WIDTH=760
HEIGHT=410 TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>

вставка обьекта ShockwaveFlash Пример


Учeбник HTML. Создание таблиц.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник HTML >>Создание таблиц.

  • Элемент <TABLE>
  • Элемент <COL>
  • Элемент <COLGROUP>
  • Элемент <THEAD>
  • Элемент <TBODY>
  • Элемент <TFOOT>
  • Элемент <TR>
  • Элемент <CAPTION>
  • Элемент <TH>
  • Элемент <TD>
  • Примеры написания таблиц.

Элемент <TABLE>

Элемент <TABLE> используется с целью внедрения таблиц в Web страницу. Они удобны тем, что браузер сам прорисовывает рамку таблицы. Размер рамки может задаваться, как фиксировано, так и автоматически согласовываться с размерами окна просмотра браузера и с размерами, находящегося в ячейках текста и рисунков. Кроме того таблицы позволяют решать чисто дизайнерские задачи: выравнивать части таблицы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением, разбивать текст на колонки и т.д.

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

По правде говоря само по себе использование таблиц для визуального форматирования есть нарушение того принципа, которого рекомендует придерживаться W3C - таблицы должны использоваться только для внедрения таблиц, а позиционировать элементы необходимо при помощи слоев. При создании таблиц используется принцип вложения: между тэгами <TABLE> и </TABLE> задается заголовок вне рамки таблицы <CAPTION>, создается ряд элементов <TR>, определяющих начало строки, а внутри этих элементов размещаются элементы <TD>, описывающие ячейки и <TH>, описывающие заглавные ячейки.

Элемент <TABLE> может иметь атрибуты:

  • bgcolor
    Этот атрибут задает фоновый цвет ячейкам, которые не обладают собственным атрибутом bgcolor или background.
    <TABLE bgcolor=цвет>
  • background
    Этот атрибут задает фоновый рисунок ячейкам, которые не обладают собственным атрибутом bgcolor или background.
    <TABLE background=URL файла изображения>
  • bordercolor
    Этот атрибут задает цвет рамки, используется только с атрибутом border.
    <TABLЕ border=число bordercolor=цвет >
  • bordercolorlight
    Этот атрибут задает цвет рамки, используется только с атрибутом border.
    <TABLE border=число bordercolorlight=цвет>
  • bordercolordark
    Этот атрибут задает цвет рамки, используется только с атрибутом border.
    <TABLE border=число bordercolordark=цвет>
  • align
    Этот атрибут задает режим горизонтального выравнивания таблицы на странице, он может принимать значения left, center и right .
    <TABLE align= способ >
  • width
    Этот атрибут задает ширину таблицы в пикселях или процентах от всего окна.
    <TABLE width=число или %>
  • border
    Этот атрибут задает ширину внешнего обрамления таблицы в пикселях.
    <TABLE border=число >
  • cellspacing
    Этот атрибут задает ширину внутреннего обрамления в пикселях.
    <TABLE сellspacing=число >
  • сellpadding
    Этот атрибут задает отступ между содержимым ячейки и обрамлением таблицы в пикселях.
    <TABLE сellpadding=число >
  • summary
    Этот необязательный атрибут задает краткое описание таблицы для некоторых браузеров.
    <TABLE summary=описание >
  • rules
    Этот атрибут задает линии между ячейками.
    <TABLE rules=all >
    • none
      Нет линий, значение используется по умолчанию.
    • groups
      Линии отображаются только между группами строк THEAD, TFOOT, и TBODY или группами столбцов COLGROUP и COL.
    • rows
      Линии отображаются только между строками.
    • cols
      Линии отображаются только между столбцами.
    • all
      Линии отображаются между строками и столбцами.
  • frame
    Этот атрибут указывает, какие стороны кадра, окружающего таблицу, будут видимы.
    <TABLE frame=void> Возможные значения:
    • void
      Сторон нет. Это значение используется по умолчанию.
    • above
      Только верхняя часть.
    • below
      Только нижняя часть.
    • hsides
      Только верхняя и нижняя часть.
    • vsides
      Только левая и правая части.
    • lhs
      Только левая часть.
    • rhs
      Только права часть.
    • box
      Все четыре части.
    • border
      Все четыре части.
  • id
    Этот атрибут задает имя для ссылки.
    <TABLE id=имя>

Элемент <COL>

Элемент <COL> используется с целью задания колонок таблицы, может иметь атрибуты:

  • width
    Этот атрибут задает ширину ячеек в колонке.
    <COL width=число>
  • bgcolor
    Этот атрибут задает цвет фона ячеек.
    <СOL bgcolor= цвет >
  • align
    Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
    <СOL align= способ >
  • valign
    Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
    <СOL valign=значение>
  • id
    Этот атрибут задает имя для ссылки.
    <COL id=имя>

Элемент <COLGROUP>

Элемент <COLGROUP> используется с целью задания групп колонок таблицы, может иметь атрибуты:

  • bgcolor
    Этот атрибут задает цвет фона ячеек.
    <COLGROUP bgcolor= цвет >
  • align
    Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
    <COLGROUP align= способ >
  • valign
    Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
    <COLGROUP valign=значение>
  • span
    Этот атрибут задает количество колонок в группе.
    <COLGROUP span=число>
  • width
    Этот атрибут задает ширину ячеек в колонках.
    <COLGROUP width=число>
  • id
    Этот атрибут задает имя для ссылки.
    <COLGROUP id=имя>

Элемент <THEAD>

Элемент <THEAD> используется с целью логического задания групп строк для верхней "шапки".
<THEAD ><TR ><TD >...<TD >...</THEAD>

  • bgcolor
    Этот атрибут задает цвет фона ячеек.
    <THEAD bgcolor= цвет >
  • align
    Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
    <THEAD align= способ >
  • valign
    Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
    <THEAD valign=значение>
  • id
    Этот атрибут задает имя для ссылки.
    <THEAD id=имя>

Элемент <TBODY>

Элемент <TBODY> используется с целью логического задания групп строк "тела" таблицы.
<TBODY ><TR ><TD >...<TD >...</TBODY>

  • bgcolor
    Этот атрибут задает цвет фона ячеек.
    <TBODY bgcolor= цвет >
  • align
    Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
    <TBODY align= способ >
  • valign
    Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
    <TBODY valign=значение>
  • id
    Этот атрибут задает имя для ссылки.
    <TBODY id=имя>

Элемент <TFOOT>

Элемент <TFOOT> используется с целью логического задания групп строк для нижней "шапки".
<TFOOT ><TR ><TD >...<TD >...</THEAD>

  • bgcolor
    Этот атрибут задает цвет фона ячеек.
    <TFOOT bgcolor= цвет >
  • align
    Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
    <TFOOT align= способ >
  • valign
    Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
    <TFOOT valign=значение>
  • id
    Этот атрибут задает имя для ссылки.
    <TFOOT id=имя>

Начало строки: элемент <TR>

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

  • bgcolor
    Этот атрибут задает цвет фона ячеек.
    <TR bgcolor= цвет >
  • align
    Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
    <TR align= способ >
  • valign
    Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
    <TR valign=значение>
  • id
    Этот атрибут задает имя для ссылки.
    <TR id=имя>

Заголовок таблицы: элемент <CAPTION>

Элемент <CAPTION> задает заголовок вне рамки таблицы, имеет атрибут align, который может принимать значения top и bottom, left и right, а также id
- имя для ссылки.
<CAPTION> текст </CAPTION>

Ячейки заголовка: элемент <TH>

Элемент <TH> задает ячейку, которая содержит заголовок, поддерживает атрибут id
- имя для ссылки.
<TH атрибуты > текст заголовка

Ячейки с данными <TD>

Элемент <TD> определяет ячейку с данными

  • bgcolor
    Этот атрибут задает цвет фона ячейки.
    <TD bgcolor= цвет >
  • width
    Этот атрибут задает ширину ячейки в пикселях или %.
    <TD width= число или % >
  • height
    Этот атрибут задает высоту ячейки в пикселях.
    <TD height=значение>
  • rowspan
    Этот атрибут задает объединение соседних ячеек столбца в одну большего размера. При этом соседние ячейки не уничтожаются, а лишь скрываются, пока соседняя ячейка использует их пространство.
    <TD rowspan=количество строк >
  • colspan
    Этот атрибут задает объединение соседних ячеек строки в одну большего размера. При этом соседние ячейки не уничтожаются, а лишь скрываются, пока соседняя ячейка использует их пространство.
    <TD colspan=количество колонок >
  • align
    Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки, он может принимать значения left, center и right .
    <TD align= способ >
  • valign
    Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки, он может принимать значения: middle - по середине и top - вверху.
    <TD valign=значение>
  • nowrap
    Этот атрибут блокирует автоматический перенос по словам в пределах ячейки в зависимости от других параметров таблицы. Аналогичного результата можно достичь при помощи замены обычных пробелов на неразрывный мнемонический объект &nbsp;
  • id
    Этот атрибут задает имя для ссылки.
    <TD id=имя>

Исходные коды некоторых таблиц.

Таблица с общим заголовком и заголовками в колонках.

<TABLE border=4 cellspacing=3>
<CAPTION> Заголовок таблицы </CAPTION>
<TR><TH bgcolor="white">Заголовок 1
<TH bgcolor="white">Заголовок 2
<TR><TD>Ячейка 1 <TD>Ячейка 2
<TR><TD>Ячейка 3 <TD>Ячейка 4
</TABLE>

Заголовок таблицы
Заголовок 1 | Заголовок 2
Ячейка 1 | Ячейка 2
Ячейка 3 | Ячейка 4

Таблица с общим заголовком и заголовками в колонках, и в строках.

<TABLE border=4 cellspacing=3>
<CAPTION> Заголовок таблицы </caption>
<TR><TH bgcolor="white">
<TH bgcolor="white">Заголовок 1
<TH bgcolor="white">Заголовок 2
<TR<TH bgcolor="white">Заголовок 3
<TD>Ячейка 1
<TD>Ячейка 2
<TR><TH bgcolor="white">Заголовок 4
<TD>Ячейка 3
<TD>Ячейка 4
</table>

Заголовок таблицы
 | Заголовок 1 | Заголовок 2
Заголовок 3 | Ячейка 1 | Ячейка 2
Заголовок 4 | Ячейка 3 | Ячейка 4

Таблица с объединенными ячейками в колонках, и в строках.

<TABLE border=4 cellspacing=0 >
<CAPTION>Заголовок таблицы </caption>
<TR><TD bgcolor="white">Заголовок 1
<TD bgcolor="white">Заголовок 2
<TR><TD rowspan=3 bgcolor="white">Ячейка 1
<TD>Ячейка 2
<TR><TD>Ячейка 3
<TR><TD>Ячейка 4
<TR><TD colspan=2 bgcolor="white" align="center">Ячейка 5
</table>

Заголовок таблицы
Заголовок 1 | Заголовок 2
Ячейка 1 | Ячейка 2
 | Ячейка 3
 | Ячейка 4
Ячейка 5

Более сложное объединение ячеек в колонках, и в строках.

<TABLE border=4 cellspacing=0 >
<TR><TD bgcolor="white">Заголовок 1
<TD bgcolor="white">Заголовок 2
<TD bgcolor="white">Заголовок 3
<TR><TD rowspan=4 colspan=2 bgcolor="white">Ячейка 1
<TR><TD>Ячейка 2
<TR><TD>Ячейка 3
<TR><TD>Ячейка 4
<TR><TD colspan=3 bgcolor="white" align="center">Ячейка 5
</table>

Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
Ячейка 5

Таблица в ячейке таблицы.

<TABLE border=4 cellspacing=0>
<TR><TD bgcolor="white">Ячейка 1
<TD>
<TABLE border=2>
<TR><TD>Ячейка 2-1
<TD>Ячейка 2-2
<TR><TD>Ячейка 3-2
<TD>Ячейка 4-2
</table>
<TR><TD bgcolor="white">Ячейка 3-1
<TD bgcolor="white">Ячейка 4-1
</table>

Ячейка 1
Ячейка 2-1 | Ячейка 2-2
Ячейка 3-2 | Ячейка 4-2
Ячейка 3-1 Ячейка 4-1

Таблица, состоящая из одной ячейки.

<TABLE border=4 cellspacing=3 cellpadding=10>
<TR><TD bgcolor="white">Одна ячейка
</table>

Одна ячейка

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

<TABLE bgcolor="#0000ff" border="1"
align="center" rules="all" frame="box">
<caption align="top"> Заголовок таблицы </caption>
<COL width="100" bgcolor="#ffffff" align="center">
<COLGROUP span="3" width="50">
<CAPTION align="top">CAPTION</CAPTION>
<THEAD bgcolor="#ff0000">
<TR><TD><TD><TD><TD>
</THEAD>
<TFOOT bgcolor="aqua">
<TR><TD><TD><TD><TD>
</TFOOT>
<TBODY>
<TR><TD><TD><TD><TD>
<TR><TD><TD><TD><TD>
<TR><TD><TD><TD><TD>
<TR><TD><TD><TD><TD>
<TR><TD><TD><TD><TD>
</TBODY>
</TABLE>

Заголовок таблицы
. | . | . | .
. | . | . | .
. | . | . | .
. | . | . | .
. | . | . | .
. | . | . | .
. | . | . | .


Учeбник HTML. Создание форм HTML.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник HTML >>Создание форм HTML

Формы представляют собой наиболее важные интерактивные элементы HTML, позволяющие разработчикам страниц интерактивно взаимодействовать с посетителями. С их помощью пользователь может возвращать комментарии по поводу посещения определенного узла, пересылать запросы или регистрироваться. Разработчик задает вопросы, создавая форму, а пользователь отвечает на них заполняя её. Содержимое формы либо передаётся сценарию CGI, либо по электронной почте посылается получателю. Сам процесс создания формы состоит из двух этапов. Первый заключается в создании самой формы, а второй заключает в себе создание на сервере сценария CGI. Форма создается при помощи различных тэгов и атрибутов, заключенных в пару <FORM></FORM>:

  • Элемент <FORM>.
  • Элемент <INPUT>.
  • Элемент <TEXTAREA>.
  • Элемент <SELECT>.
  • Элемент <OPTION>.
  • Элемент <OPTGROUP>.
  • Элемент <ISINDEX>.
  • Элемент <BUTTON>.
  • Элемент <LABEL>.
  • Элемент <FIELDSET>.
  • Элемент <LEGEND>.

Элемент <FORM>.

Элемент <FORM> является необходимым условием для всех форм. Он может иметь следующие атрибуты:

  • method
    Этот атрибут определяет способ пересылки данных сценарию CGI. Здесь протокол GET выбран по умолчанию, но в большинстве случаев разработчики пользуются протоколом POST, который позволяет передавать большие объемы данных.
  • action
    Этот атрибут определяет путь к сценарию CGI или адрес электронной почты.
  • enctype
    Этот атрибут определяет способ кодирования содержимого формы. Другими словами он сообщает браузеру о способе кодирования информации перед отсылкой серверу. По умолчанию используется значение x-www-form-encoded.

Синтаксис формы для сценария: <FORM method="get" или "post" action="URL сценария" ></FORM>
Синтаксис формы для почты:<FORM method="get" или "post" action="mailto:адрес" ></FORM>

Подробнее:
Синтаксис:

<FORM action="mailto:имя@домен.ru?subject="Comment from Home Page" method="post" enctype="text/plain">
<br> Комментарии:<br>
<TEXTAREA type="text" NAME="комментарий" ROWS=5 COLS=50></TEXTAREA> <br>
Имя: <br>
<INPUT type="text" NAME="имя" SIZE="57"> <br>
E-mail: <br>
<INPUT type="text" name="e-mail" size="52" maxlength="360"> <br>
<INPUT type="reset" VALUE=Сброс >
<INPUT type=SUBMIT VALUE=Послать>
</FORM>

Пример:

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

Имя:

E-mail:

Элемент <INPUT>.

Элемент <INPUT> является базовым для всех элементов формы. Он используется для внедрения в форму кнопок, графических изображений, флажков, переключателей, паролей и текстовых полей. Несмотря на внешние отличия форм все они пересылают сценарию CGI данные в виде пар имя:значение. Элемент может иметь восемь атрибутов обозначаемые как type:

  • TEXT
    Однострочное текстовое поле, используется для ввода информации, которую нельзя ввести ни в одном из остальных элементов формы. Сюда вводятся имена, адреса, должности, телефоны, хобби, и данные практически любого типа. Элемент может иметь атрибуты:
    • maxlength. Задаёт максимально допустимую длину вписываемого значения в символах.
    • size. Задаёт максимально допустимую длину поля в символах.
    • value. Задаёт значение по умолчанию, которое можно менять.
    Синтаксис: <INPUT type="TEXT" name="Hobby" maxlength="35" size="20" value="Shopping">
    Пример:
  • PASSWORD
    Однострочное поле, в котором вместо вводимых символов отображаются звездочки. Элемент может иметь атрибуты:
    • maxlength. Задаёт максимально допустимую длину вписываемого значения в символах.
    • size. Задаёт максимально допустимую длину поля в символах.
    • value. Задаёт значение по умолчанию, которое можно менять.
    Синтаксис: <INPUT type="PASSWORD" name="PASSWORD_BOX" maxlength="35" size="20">
    Пример:
  • HIDDEN
    Еще один тип скрытого ввода информации. Позволяет пересылать сценариям информацию, которая не может быть изменена пользователем. Некоторые программы CGI используют скрытые поля для передачи информации из одной страницы в другую, например, имя или номер. Такой подход существенно облегчает работу пользователя, избавляя его от необходимости повторного ввода данных.
    Например, для пересылки файла с исходным кодом HTML используется следующая конструкция:
    <INPUT type="HIDDEN" name="file" value="anyfile.html">

  • CHECKBOX
    Флажки используются для предоставления возможности пользователю ответить односложно: да/нет истина/ложь больше/меньше и т.д. Выглядит обычно в виде крестика или птички. Элемент может иметь атрибуты:
    • checked. Задаёт начальный статус флажка по умолчанию.
    • value. Задаёт значение по умолчанию, которое можно менять.
    Синтаксис: <INPUT type="checkbox" name="send_mail" value="yes" checked>
    Пример:
  • RADIO
    Переключатели во многом напоминают флажки, отличаясь лишь более широкими функциональными возможностями выбора. В группе переключателей может быть выбран лишь один. Для каждого переключателя указывается отдельный элемент INPUT.
    Пример:
    Visa <INPUT type="radio" name="payment_type" value="visa">
    Mastercard <INPUT type="radio" name="payment_type" value="mastercard">
    American Express <INPUT type="radio" name="payment_type" value="AmEx" checked>

    Visa Mastercard American Express
  • SUBMIT
    Щелчок на этой кнопке приводит к пересылке содержимого формы сценарию, который был задан атрибутом action в элементе <FORM>. C помощью кнопок можно вычислять сумму, загружать страницы, пересылать данные, сбрасывать значения.
    Синтаксис:
    <FORM method="get" или "post" action="mailto:name@domen.ru" >
    <INPUT type="submit" value="послать"></FORM>

    Пример:
  • RESET
    Кнопка используется для восстановления значений, заданных по умолчанию. Если значение по умолчанию не предусмотрено, то оно просто обнулится. Ширина кнопки может меняться в зависимости от других элементов. Имеет так же атрибут value.

    Синтаксис: <INPUT type="reset" value="очистка">
    Пример:

  • IMAGE
    Во многом похож на кнопку SUBMIT, только в качестве кнопки используется изображение. Одним из преимуществ является возможность передачи координат щелчка пользователя, что позволяет организовать карту изображений. Элемент может иметь атрибуты:
    • src. Задаёт URL файла с изображением.
    • align. Задаёт выравнивание изображения относительно текста при помощи значений TOP, MIDDLE и BOTTOM.
    • name. Задаёт имя карты, которое так же пересылается сценарию вместе с координатами.
    Синтаксис: <INPUT type="image" src="knopka.gif">

    Пример:

  • BUTTON
    Создает другую кнопку, браузеры пользователей могут использовать значение атрибута value в качестве исходного имени файла.
    Синтаксис: <INPUT type="button"value="кнопка">
    Пример:

  • FILE
    Создает управляющий элемент выбор файла.
    Синтаксис: <INPUT type="file">
    Пример:

  • ACCESSKEY
    Задает кнопку, при нажатии которой происходит обработка поля.
    Синтаксис: <INPUT accesskey="a">
    Пример: нажмите Alt+a:

  • ID
    Задает имя для ссылки.
    Синтаксис: <INPUT id="имя">

  • SIZE
    Задает ширину элемента в пикселях.
    Синтаксис: <INPUT size="число">

  • DISABLED
    Отключает возможность изменять содержимое поля или положение кнопки.
    Синтаксис: <INPUT disabled">
    Пример:

Элемент <TEXTAREA>.

Элемент <TEXTAREA> При помощи этого элемента создается область для ввода и просмотра текста. Может использоваться и не в составе формы, а как самостоятельные детали страницы. Область ввода помогает сэкономить место благодаря полосам прокрутки. Может иметь атрибуты:

  • name. Задаёт ключевое слово, по которому сценарий может обращаться к его содержимому.
  • rows. Задаёт высоту области в строках.
  • cols. Задаёт ширину области в символах.

Синтаксис:

<FORM><H3>Введи текст
<TEXTAREA name="ключевое слово" rows=5 cols=30>Область для ввода текста
</TEXTAREA></H3>
<INPUT type="reset" value="очистка"></FORM>

Пример:

Элемент <SELECT>.

Элемент <SELECT> может принимать форму раскрывающегося списка или меню элементов. Имеет вложенный тэг <OPTION> и атрибуты:

  • name. Задаёт имя.
  • size. Задаёт максимальное количество элементов списка, одновременно отображаемых на экране.
  • multiple. Задаёт возможность одновременного выбора нескольких значений.

Элемент <OPTIONS>.

Элемент же <OPTIONS> задает возможные варианты выбора меню <SELECT>
Синтаксис: <OPTION value="n" selected>значение
имеет атрибуты:

  • selected. Задаёт изначально выбранное слово.
  • value. Задаёт значение выбранного слова для сценария.

Пример:

<H3>Выбери нужное</H3>
<SELECT multiple>
<OPTION value=a>Первый</OPTION>
<OPTION value=b>Второй</OPTION>
<OPTION value=c>Третий</OPTION>
<OPTION value=d>Четвертый</OPTION>
</SELECT>

Выбери нужное

Пример:

<SELECT size=1>
<OPTION selected value=1>Выберите:</OPTION>
<OPTION value=2> Первый</OPTION>
<OPTION value=3> Второй</OPTION>
<OPTION value=4>Третий</OPTION>
<OPTION value=5> Четвертый</OPTION>
</SELECT>

Элемент <OPTGROUP>.

Элемент <OPTGROUP> применяется для логической группировки элементов <OPTION> внутри тэга <SELECT> имеет атрибут label:

Синтаксис:

<SELECT size=1>
<OPTGROUP label="Первая группа">
<OPTION selected value=1>Выберите:</OPTION>
<OPTION value=2> Первый</OPTION>
<OPTION value=3> Второй</OPTION>
</OPTGROUP>
<OPTGROUP label="Вторая группа">
<OPTION value=4>Третий</OPTION>
<OPTION value=5> Четвертый</OPTION>
</OPTGROUP>
</SELECT>

Элемент <ISINDEX>.

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

Пример: <ISINDEX prompt=" строка для ввода критерия поиска "> Допустим, что на текущей странице задан базовый URL при помощи элемента
<BASE href="URL поискового средства в Internet"> тогда, если пользователь введет в поле ключевые слова для поиска слово1,слово2,слово3, то браузер сформирует и отошлет запрос для поисковой машины сервера в виде:
http://www.название.домен/?слово1+слово2+слово3 Если поисковая программа сервера поддерживает стандартный синтаксис запроса с использованием знаков ? и +,поиск будет осуществлен.

Элемент <BUTTON>.

Элемент <BUTTON> является альтернативой элементу <INPUT> с более богатыми возможностями - например, с заданием альтернативного текста.
Синтаксис: <BUTTON ><IMG src=...> </BUTTON>

  • name задает имя элементу.
  • value задает значение элементу.
  • type при использовании в качестве кнопки принимает значения: button, submit и reset.
  • disabled делает недоступным данный элемент
  • tabindex определяет положение в последовательности перехода клавишей Tab, отключенные поля форм не участвуют в очередности.
  • accesskey задает клавишу доступа.
  • id задает имя для ссылки.

Пример:
<BUTTON name="submit" type="submit">отправить</BUTTON >

Элемент <LABEL>.

Элемент <LABEL> применяется для альтернативного задания информации для управляющих полей формы. Поддерживает атрибут for, который связывает элемент <LABEL> с другим элементом формы, а значение атрибута for должно совпадать со значением атрибута id связанного управляющего элемента.

Пример:

<FORM action="URL" method="post">
<TABLE>
<TR>
<TD><LABEL for="fname">Имя</LABEL>
<TD><INPUT type="text" name="firstname" id="fname">
<TR>
<TD><LABEL for="lname">Фамилия</LABEL>
<TD><INPUT type="text" name="lastname" id="lname">
</TABLE>
</FORM>

Пример:

<FORM action="URL" method="post">
<LABEL for="firstname">Имя: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Фамилия: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">e-mail: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Мужской">Мужской<BR>
<INPUT type="radio" name="sex" value="Женский">Женский<BR>
<INPUT type="submit" value="Отправить"> <INPUT type="reset">
</FORM>

Мужской
Женский

Элемент <FIELDSET>.

Элемент <FIELDSET> позволяет логически группировать элементы формы.
Синтаксис: <FIELDSET> имя</FIELDSET>

Элемент <LEGEND>.

Элемент <LEGEND> позволяет давать наименования логическим группам элементов формы.
Синтаксис: <LEGEND> имя</LEGEND>

Пример:

<FORM>
<FIELDSET>
<LEGEND>Группа 1</LEGEND>
<INPUT type="text" id="name1"><BR>
<INPUT type="text" id="name2"><BR>
</FIELDSET>
<FIELDSET>
<LEGEND>Группа 2</LEGEND>
<INPUT type="text" id="name3"><BR>
<INPUT type="text" id="name4"><BR>
</FIELDSET>
</FORM>

Группа 1

Группа 2


Учeбник HTML. Фреймы.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник HTML >>Создание документа с помощью кадров

Использование <FRAME> позволяет помещать в окна одной страницы несколько отдельных страниц, произвольно менять их размеры и организовывать изменение содержимого одного окна после выполнения пользователем действий в другом окне. Это позволяет использовать их в качестве инструмента навигации. Тэги <FRAMESET> и </FRAMESET> в данном случае заменяют тэги <BODY> и </BODY> соответственно.

Внутри пары <FRAMESET> и </FRAMESET> могут быть использованы только тэги <FRAME>, <FRAMESET> и <NOFRAMES>. По сути, создается несколько отдельных страниц фреймов, которые выводятся на экран одновременно ввиде нескольких окошек одного документа. Другими словами, прежде чем организовывать отдельные документы ввиде фреймов одного документа, необходимо прежде создать сами документы. Для пользователей, чей броузер не поддерживает фреймы, необходимо создать альтернативный документ или сообщение о том, каким броузером нужно воспользоваться для прoсмотра данного документа и заключить его в тэги <NOFRAME> и </NOFRAME>

  • Пара <FRAMESET> и </FRAMESET>
  • Использование <FRAME>
  • Использование <IFRAME>
  • Примеры простейших макетов страниц с фреймами .

Пара <FRAMESET> и </FRAMESET>

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

  • border
    Атрибут задает толщину обрамления в пикселах для всех производных фреймов.
    <FRAMESET border="число" >
  • cols
    Атрибут задает количество и размер колонок в создаваемом наборе кадров в пикселах, процентах или *пропорционально другим кадрам. Значения ширины различных кадров перечисляются в кавычках и через запятую.
    <FRAMESET cols="число, число* или % ">
  • rows
    Атрибут задает количество и размер строк в создаваемом наборе кадров в пикселах, процентах или *пропорционально другим кадрам. Значения высоты различных кадров перечисляются в кавычках и через запятую.
    <FRAMESET rows="число, число* или % ">
  • frameborder
    Атрибут задает наличие или отсутствие обрамления у фреймов. Значение 1 соответствует наличию, а 0 - отсутствию обрамления.
    <FRAMESET frameborder="1 или 0" >

Использование <FRAME>

Элемент <FRAME> определяет содержимое заданных фреймов. Он может иметь атрибуты:

  • src
    Атрибут задает документ, который должен быть отображен в фрейме.
    <FRAME src="URL" >
  • frameborder
    Атрибут задает наличие или отсутствие обрамления у фреймов. Может принимать значения Значение 1 соответствует наличию, а 0 - отсутствию обрамления.
    <FRAME frameborder="1 или 0 ">
  • marginheight
    Атрибут задает толщину верхнего и нижнего обрамления в пикселах.
    <FRAME marginheight="число ">
  • marginwidth
    Атрибут задает толщину правого и левого обрамления в пикселах.
    <FRAME marginwidth="число ">
  • name
    Атрибут задает любое имя фрейма, по которому можно будет обращаться к нему с помощью атрибута target в ссылках <A href>. Но существует четыре зарезервированных имени:
    1. _blank
      Имя открывает в новом окне содержимое указанного URL.
    2. _parent
      Имя открывает содержимое указанного URL в родительском, относительно текущего, фрейме.
    3. _self
      Если так назвать фрейм, то содержимое указанного URL заменит первоначально находившуюся в этом фрейме ссылку.
    4. _top
      Имя отображает содержимое указанного URL в развёрнутом на всё окно фрейме.
  • noresize
    Атрибут лишает пользователя возможности изменить размеры текущего и смежного фреймов с помощью мыши.
    <FRAME noresize >
  • scrolling
    Атрибут задает наличие у кадра полос прокрутки, принимает значения YES, NO и AUTO.
    <FRAME scrolling="значение ">

Использование <IFRAME>.

Этот тэг позволяет вставить в тело BODY окно, в котором визуализируется другая страница, при этом тэг IFRAME, в отличие от тэга FRAME вставляется не между тэгами FRAMESET и /FRAMESET, а между тэгами BODY и /BODY

  • src
    Атрибут задает документ, который должен быть отображен в фрейме.
    <IFRAME src="URL" >
    .
  • frameborder
    Атрибут задает наличие или отсутствие обрамления у фреймов. Может принимать значения Значение 1 соответствует наличию, а 0 - отсутствию обрамления.
    <IFRAME frameborder="1 или 0 ">
  • marginheight
    Атрибут задает толщину верхнего и нижнего обрамления в пикселах.
    <IFRAME marginheight="число ">
  • marginwidth
    Атрибут задает толщину правого и левого обрамления в пикселах.
    <IFRAME marginwidth="число ">
  • name
    Атрибут задает любое имя фрейма, по которому можно будет обращаться к нему в ссылках и направлять в него содержимое.
  • align
    Атрибут позволяет позиционировать кадр по отношению к тексту, принимает значения left, right, middle, top и bottom.
    <IFRAME align="left" >
  • scrolling
    Атрибут задает наличие у кадра полос прокрутки, принимает значения YES, NO и AUTO.
    <FRAME scrolling="значение ">
  • width
    Атрибут определяет ширину кадра в пикселях.
    <IFRAME width="число ">
  • height
    Атрибут определяет высоту кадра в пикселях.
    <IFRAME height="число ">

Примеры простейших макетов страниц с фреймами.

Горизонтальное деление экрана производится при помощи атрибута rows, а вертикальное при помощи атрибута cols. Значения атрибутов могут быть выражены в пикселах, процентах или * для обозначения оставшейся части экрана.
Например:

  • cols=50%,50%
    Деление области просмотра на равные, правую и левую, части.
    Пример
  • cols=20%,80%
    Деление области просмотра на неравные, правую и левую, части.
    Пример
  • rows=100,20%,*
    Деление области просмотра на три части: первой отведено 100 пикселей, второй - 20% доступного пространства, а третьей - все остальное.
    Пример
  • cols=*,3*
    Деление области просмотра на неравные, правую и левую, части. Правая часть в три раза шире левой.
    Пример
  • cols=25%,75%
    Деление области просмотра аналогично предыдущему примеру.
    Пример

Пример исходного кода фреймов более сложной структуры.

<HTML>
<HEAD>
<TITLE>FRAMES</TITLE>
</HEAD>
<FRAMESET FRAMEBORDER=1 BORDER=2 ROWS=150,*>
<FRAME SCROLLING="YES" NORESIZE SRC="page1.htm" NAME="1">
<FRAMESET FRAMEBORDER=1 BORDER=2 COLS=150,*>
<FRAME SCROLLING="YES" NORESIZE SRC="page2.htm" NAME="2">
<FRAME SCROLLING="YES" NORESIZE SRC="page3.htm" NAME="3">
</FRAMESET>
</FRAMESET>
</HTML>

Пример исходного кода фреймов c навигацией, тут при клике на ссылке в фрейме 2 меняется содержимое фрейма 3, в него загружается файл page1.htm, при этом файл page2.htm должен иметь следующий вид:

<HTML>
<HEAD>
<TITLE>page2</TITLE>
</HEAD>
<BODY>
<A HREF="page1.htm" target="3">link</A>
</BODY>
</HTML>


Учeбник HTML.Языковые стандарты.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник HTML >>Языковые стандарты

  • Кодирование символов
  • Особенности работы с кодировками
  • Русские кодировки
  • Создание многоязыковых документов
  • Таблица символов

Кодирование символов

Все символьные обозначения букв, цифр, специальных знаков и иероглифов на самом деле представляют собой битовые комбинации - различные сочетания битов. Так, например, из 8 битов, в различных комбинациях, теоретически может получиться 256 последовательностей, в свою очередь каждой из этих последовательностей присвоен символ, другими словами из 8 битов может получиться 256 символов. Каждому такому символу присваивается свой код и из них составляется таблица - кодировка символов. Соответственно таких таблиц может быть как минимум по одной на каждый из земных языков. На самом деле их гораздо больше, чем это нужно, все они были созданы в разное время, для различных платформ, и кодируются они не только при помощи 8 битов, но и 16 и даже 32.

Самым популярным из стандартов кодирования символов, в настоящий момент является стандарт ISO 646, созданный международной организацией стандартизации ISO, а точнее его первые 128 символов, которые кодировались при помощи 8 битов, но при этом первый бит всегда равнялся нулю. Ему было присвоено имя ASCII и иногда его еще называют 7-битовым стандартом. Он используется большинством компьютерных машин для написания символов латинского алфавита, а также для синтаксиса всех языков программирования и разметки, а также для всех типов данных.

Для поддержки языков, использующих в своем алфавите символы отличные от латинских, был использован восьмой бит байта, а это дало возможность добавить еще 128 дополнительных символов. Была создана серия кодировок ISO 8859, в которых первая часть - это 128 символов ASCII. Самая первая из них, ISO 8859-1, еще ее называют ISO Latin-1 или 8-битовой ASCII, содержит в себе практически все европейские нестандартные символы, а кодировка ISO 8859-5 является русской.

В свою очередь, организация Unicode Consortium создала на основе 16-битового кодирования одноименную кодировку, в которую решено было вместить 65536 символов, каждый весом в два байта. Первые 256 символов Unicode в точности соответствуют ISO 8859-1, а саму кодировку компьютерное сообщество признало и использует все чаще, и если основной кодировкой в HTML раньше считалась ISO 8859-1, то с появлением HTML 4.0, основной кодировкой стала Unicode.

Не желая останавливаться на достигнутом, ISO разработала новый, 32-битовый стандарт кодирования ISO 10646. Он совместим с Unicode, а также имеет несколько своих производных фоматов, одна из которых - формат UTF-8 внедрен в Windows.

Особенности работы с кодировками

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

Еще одним способ сообщить браузеру о стандарте кодирования может сводиться к следующему - автор документа создает служебную информацию для браузера в тэге <МЕТА>, между тэгами <HEAD> и </HEAD>, запись эквивалентную заголовку HTTP, например:
<META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1251>windows-1251">
Встретив такую инструкцию, браузер автоматически переключается на нужную кодировку.

Русские кодировки

Кодировок, русифицирующих сеть, существует гораздо больше, чем хотелось бы, их как минимум пять: KOI-8 (созданная для UNIX), 866 (для MS DOS), Windows-1251, ISO 8859-5, MAC. Ввиду распространения такого количества русских кодировок, в русской части сети очень распространен способ, когда сервер имеет систему автоматического перекодирования документа на лету, в зависимости от того, какой ответ пришел о браузера.

В итоге, часто происходит например, следующее: документ написан в KOI-8 и имеет об этом запись в тэге <МЕТА>, сервер определяет кодировку браузера Windows-1251 и автоматически перекодирует документ в нее, браузер же получив инструкцию прописанную в тэге <МЕТА> переключается в свою очередь на KOI-8 и пользователь не может прочесть текст. Выход может быть в том, чтобы вовсе не указывать charset в тэге <МЕТА>, в документах, которые будут лежать на таком сервере, либо пользователь сохраняет документ на диске и удаляет эту инструкцию из <МЕТА> вручную.

Создание многоязыковых документов

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

Например, если в документ Windows-1251 вставить знак &#246;, или &ouml;, то получим символ ö, применяемый в немецком языке. Этим и объясняется сильное увеличение объема документа в три-четыре раза, когда для его создания используется WYSIWYG-редактор, так как он заменяет каждую букву русского текста такой ссылкой.

  • По-русски: Я хочу сделать покупку
  • Deutsch: Ich möchte einkaufen
  • Englich: I want to buy someting

Еще один вариант - набрать текст в текстовом процессоре, например в MS Word, а после сохранить его как файл HTML, при этом кодировку документу выбрать, скажем UTF-8.
Пример

Таблица символов

Ниже приведена таблица наиболее часто встречающихся символов и их кодов:

Знак | код | Знак | код | Знак | код | Знак | код | Знак | код | Знак | код
" | &#34; | Œ | &#140; | ö | &#246; | Š | &#352; | σ | &#963; | ְ | &#1456;
# | &#35; |  | &#141; | ÷ | &#247; | š | &#353; | τ | &#964; | ֱ | &#1457;
$ | &#36; | Ž | &#142; | ø | &#248; | Ţ | &#354; | υ | &#965; | ֲ | &#1458;
% | &#37; |  | &#143; | ù | &#249; | ţ | &#355; | φ | &#966; | ֳ | &#1459;
& | &#38; |  | &#144; | ú | &#250; | Ť | &#356; | χ | &#967; | ִ | &#1460;
' | &#39; | ‘ | &#145; | û | &#251; | ť | &#357; | ψ | &#968; | ֵ | &#1461;
( | &#40; | ’ | &#146; | ü | &#252; | Ŧ | &#358; | ω | &#969; | ֶ | &#1462;
) | &#41; | “ | &#147; | ý | &#253; | ŧ | &#359; | ϊ | &#970; | ַ | &#1463;
* | &#42; | ” | &#148; | þ | &#254; | Ũ | &#360; | ϋ | &#971; | ָ | &#1464;
+ | &#43; | • | &#149; | ÿ | &#255; | ũ | &#361; | ό | &#972; | ֹ | &#1465;
, | &#44; | – | &#150; | Ā | &#256; | Ū | &#362; | ύ | &#973; | ֻ | &#1467;
- | &#45; | — | &#151; | ā | &#257; | ū | &#363; | ώ | &#974; | ּ | &#1468;
. | &#46; | ˜ | &#152; | Ă | &#258; | Ŭ | &#364; | Ё | &#1025; | ֽ | &#1469;
/ | &#47; | ™ | &#153; | ă | &#259; | ŭ | &#365; | Ђ | &#1026; | ־ | &#1470;
0 | &#48; | š | &#154; | Ą | &#260; | Ů | &#366; | Ѓ | &#1027; | ֿ | &#1471;
1 | &#49; | › | &#155; | ą | &#261; | ů | &#367; | Є | &#1028; | ׀ | &#1472;
2 | &#50; | œ | &#156; | Ć | &#262; | Ű | &#368; | Ѕ | &#1029; | ׁ | &#1473;
3 | &#51; |  | &#157; | ć | &#263; | ű | &#369; | І | &#1030; | ׂ | &#1474;
4 | &#52; | ž | &#158; | Ĉ | &#264; | Ų | &#370; | Ї | &#1031; | ׃ | &#1475;
5 | &#53; | Ÿ | &#159; | ĉ | &#265; | ų | &#371; | Ј | &#1032; | א | &#1488;
6 | &#54; |  | &#160; | Ċ | &#266; | Ŵ | &#372; | Љ | &#1033; | ב | &#1489;
7 | &#55; | ¡ | &#161; | ċ | &#267; | ŵ | &#373; | Њ | &#1034; | ג | &#1490;
8 | &#56; | ¢ | &#162; | Č | &#268; | Ŷ | &#374; | Ћ | &#1035; | ד | &#1491;
9 | &#57; | £ | &#163; | č | &#269; | ŷ | &#375; | Ќ | &#1036; | ה | &#1492;
: | &#58; | ¤ | &#164; | Ď | &#270; | Ÿ | &#376; | Ў | &#1038; | ו | &#1493;
; | &#59; | ¥ | &#165; | ď | &#271; | Ź | &#377; | Џ | &#1039; | ז | &#1494;
< | &#60; | ¦ | &#166; | Đ | &#272; | ź | &#378; | А | &#1040; | ח | &#1495;
= | &#61; | § | &#167; | đ | &#273; | Ż | &#379; | Б | &#1041; | ט | &#1496;
> | &#62; | ¨ | &#168; | Ē | &#274; | ż | &#380; | В | &#1042; | י | &#1497;
? | &#63; | © | &#169; | ē | &#275; | Ž | &#381; | Г | &#1043; | ך | &#1498;
@ | &#64; | ª | &#170; | Ĕ | &#276; | ž | &#382; | Д | &#1044; | כ | &#1499;
A | &#65; | « | &#171; | ĕ | &#277; | ſ | &#383; | Е | &#1045; | ל | &#1500;
B | &#66; | ¬ | &#172; | Ė | &#278; | ƒ | &#402; | Ж | &#1046; | ם | &#1501;
C | &#67; |  | &#173; | ė | &#279; | Ǻ | &#506; | З | &#1047; | מ | &#1502;
D | &#68; | ® | &#174; | Ę | &#280; | ǻ | &#507; | И | &#1048; | ן | &#1503;
E | &#69; | ¯ | &#175; | ę | &#281; | Ǽ | &#508; | Й | &#1049; | נ | &#1504;
F | &#70; | ° | &#176; | Ě | &#282; | ǽ | &#509; | К | &#1050; | ס | &#1505;
G | &#71; | ± | &#177; | ě | &#283; | Ǿ | &#510; | Л | &#1051; | ע | &#1506;
H | &#72; | ² | &#178; | Ĝ | &#284; | ǿ | &#511; | М | &#1052; | ף | &#1507;
I | &#73; | ³ | &#179; | ĝ | &#285; | ˘ | &#728; | Н | &#1053; | פ | &#1508;
J | &#74; | ´ | &#180; | Ğ | &#286; | ˙ | &#729; | О | &#1054; | ץ | &#1509;
K | &#75; | µ | &#181; | ğ | &#287; | ˚ | &#730; | П | &#1055; | צ | &#1510;
L | &#76; | ¶ | &#182; | Ġ | &#288; | ˛ | &#731; | Р | &#1056; | ק | &#1511;
M | &#77; | · | &#183; | ġ | &#289; | ˜ | &#732; | С | &#1057; | ר | &#1512;
N | &#78; | ¸ | &#184; | Ģ | &#290; | ˝ | &#733; | Т | &#1058; | ש | &#1513;
O | &#79; | ¹ | &#185; | ģ | &#291; | ; | &#894; | У | &#1059; | ת | &#1514;
P | &#80; | º | &#186; | Ĥ | &#292; | ΄ | &#900; | Ф | &#1060; | װ | &#1520;
Q | &#81; | » | &#187; | ĥ | &#293; | ΅ | &#901; | Х | &#1061; | ױ | &#1521;
R | &#82; | ¼ | &#188; | Ħ | &#294; | Ά | &#902; | Ц | &#1062; | ײ | &#1522;
S | &#83; | ½ | &#189; | ħ | &#295; | · | &#903; | Ч | &#1063; | ׳ | &#1523;
T | &#84; | ¾ | &#190; | Ĩ | &#296; | Έ | &#904; | Ш | &#1064; | ״ | &#1524;
U | &#85; | ¿ | &#191; | ĩ | &#297; | Ή | &#905; | Щ | &#1065; | ، | &#1548;
V | &#86; | À | &#192; | Ī | &#298; | Ί | &#906; | Ъ | &#1066; | ؛ | &#1563;
W | &#87; | Á | &#193; | ī | &#299; | Ό | &#908; | Ы | &#1067; | ؟ | &#1567;
X | &#88; | Â | &#194; | Ĭ | &#300; | Ύ | &#910; | Ь | &#1068; | ء | &#1569;
Y | &#89; | Ã | &#195; | ĭ | &#301; | Ώ | &#911; | Э | &#1069; | آ | &#1570;
Z | &#90; | Ä | &#196; | Į | &#302; | ΐ | &#912; | Ю | &#1070; | أ | &#1571;
[ | &#91; | Å | &#197; | į | &#303; | Α | &#913; | Я | &#1071; | ؤ | &#1572;
\ | &#92; | Æ | &#198; | İ | &#304; | Β | &#914; | а | &#1072; | إ | &#1573;
] | &#93; | Ç | &#199; | ı | &#305; | Γ | &#915; | б | &#1073; | ئ | &#1574;
^ | &#94; | È | &#200; | Ĳ | &#306; | Δ | &#916; | в | &#1074; | ا | &#1575;
_ | &#95; | É | &#201; | ĳ | &#307; | Ε | &#917; | г | &#1075; | ب | &#1576;
` | &#96; | Ê | &#202; | Ĵ | &#308; | Ζ | &#918; | д | &#1076; | ة | &#1577;
a | &#97; | Ë | &#203; | ĵ | &#309; | Η | &#919; | е | &#1077; | ت | &#1578;
b | &#98; | Ì | &#204; | Ķ | &#310; | Θ | &#920; | ж | &#1078; | ث | &#1579;
c | &#99; | Í | &#205; | ķ | &#311; | Ι | &#921; | з | &#1079; | ج | &#1580;
d | &#100; | Î | &#206; | ĸ | &#312; | Κ | &#922; | и | &#1080; | ح | &#1581;
e | &#101; | Ï | &#207; | Ĺ | &#313; | Λ | &#923; | й | &#1081; | خ | &#1582;
f | &#102; | Ð | &#208; | ĺ | &#314; | Μ | &#924; | к | &#1082; | د | &#1583;
g | &#103; | Ñ | &#209; | Ļ | &#315; | Ν | &#925; | л | &#1083; | ذ | &#1584;
h | &#104; | Ò | &#210; | ļ | &#316; | Ξ | &#926; | м | &#1084; | ر | &#1585;
i | &#105; | Ó | &#211; | Ľ | &#317; | Ο | &#927; | н | &#1085; | ز | &#1586;
j | &#106; | Ô | &#212; | ľ | &#318; | Π | &#928; | о | &#1086; | س | &#1587;
k | &#107; | Õ | &#213; | Ŀ | &#319; | Ρ | &#929; | п | &#1087; | ش | &#1588;
l | &#108; | Ö | &#214; | ŀ | &#320; | Σ | &#931; | р | &#1088; | ص | &#1589;
m | &#109; | × | &#215; | Ł | &#321; | Τ | &#932; | с | &#1089; | ض | &#1590;
n | &#110; | Ø | &#216; | ł | &#322; | Υ | &#933; | т | &#1090; | ط | &#1591;
o | &#111; | Ù | &#217; | Ń | &#323; | Φ | &#934; | у | &#1091; | ظ | &#1592;
p | &#112; | Ú | &#218; | ń | &#324; | Χ | &#935; | ф | &#1092; | ع | &#1593;
q | &#113; | Û | &#219; | Ņ | &#325; | Ψ | &#936; | х | &#1093; | غ | &#1594;
r | &#114; | Ü | &#220; | ņ | &#326; | Ω | &#937; | ц | &#1094; | ـ | &#1600;
s | &#115; | Ý | &#221; | Ň | &#327; | Ϊ | &#938; | ч | &#1095; | ف | &#1601;
t | &#116; | Þ | &#222; | ň | &#328; | Ϋ | &#939; | ш | &#1096; | ق | &#1602;
u | &#117; | ß | &#223; | ŉ | &#329; | ά | &#940; | щ | &#1097; | ك | &#1603;
v | &#118; | à | &#224; | Ŋ | &#330; | έ | &#941; | ъ | &#1098; | ل | &#1604;
w | &#119; | á | &#225; | ŋ | &#331; | ή | &#942; | ы | &#1099; | م | &#1605;
x | &#120; | â | &#226; | Ō | &#332; | ί | &#943; | ь | &#1100; | ن | &#1606;
y | &#121; | ã | &#227; | ō | &#333; | ΰ | &#944; | э | &#1101; | ه | &#1607;
z | &#122; | ä | &#228; | Ŏ | &#334; | α | &#945; | ю | &#1102; | و | &#1608;
{ | &#123; | å | &#229; | ŏ | &#335; | β | &#946; | я | &#1103; | ى | &#1609;
| | &#124; | æ | &#230; | Ő | &#336; | γ | &#947; | ё | &#1105; | ي | &#1610;
} | &#125; | ç | &#231; | ő | &#337; | δ | &#948; | ђ | &#1106; | ً | &#1611;
~ | &#126; | è | &#232; | Œ | &#338; | ε | &#949; | ѓ | &#1107; | ٌ | &#1612;
 | &#127; | é | &#233; | œ | &#339; | ζ | &#950; | є | &#1108; | ٍ | &#1613;
€ | &#128; | ê | &#234; | Ŕ | &#340; | η | &#951; | ѕ | &#1109; | َ | &#1614;
 | &#129; | ë | &#235; | ŕ | &#341; | θ | &#952; | і | &#1110; | ُ | &#1615;
‚ | &#130; | ì | &#236; | Ŗ | &#342; | ι | &#953; | ї | &#1111; | ِ | &#1616;
ƒ | &#131; | í | &#237; | ŗ | &#343; | κ | &#954; | ј | &#1112; | ّ | &#1617;
„ | &#132; | î | &#238; | Ř | &#344; | λ | &#955; | љ | &#1113; | پ | &#1662;
… | &#133; | ï | &#239; | ř | &#345; | μ | &#956; | њ | &#1114; | چ | &#1670;
† | &#134; | ð | &#240; | Ś | &#346; | ν | &#957; | ћ | &#1115; | ژ | &#1688;
‡ | &#135; | ñ | &#241; | ś | &#347; | ξ | &#958; | ќ | &#1116; | گ | &#1711;
ˆ | &#136; | ò | &#242; | Ŝ | &#348; | ο | &#959; | ў | &#1118; | ڰ | &#1712;
‰ | &#137; | ó | &#243; | ŝ | &#349; | π | &#960; | џ | &#1119; | ڱ | &#1713;
Š | &#138; | ô | &#244; | Ş | &#350; | ρ | &#961; | Ґ | &#1168; | ڲ | &#1714;
‹ | &#139; | õ | &#245; | ş | &#351; | ς | &#962; | ґ | &#1169; | ڳ | &#1715;


Таблицы стилей CSS.Немного истории.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник CSS>>Немного истории

Если история языка HTML уходит корнями в далекий 1989 год, то технология CSS представляется нам более "молодой". Впервые о ней стало известно в мае 1995 года, когда сам недавно образованный (и в декабре 1994 года проведший свое первое совещание) консорциум W3C, объявил о выборе технологии CSS для форматирования документов HTML.

Уже в ноябре того же 1995 года, Консорциум W3C вновь обращается к этой теме на своем семинаре, по каскадным элементам оформления. К тому времени, две ведущие компании разработчики браузеров, Microsoft и Netscape еще только успели выпустить свои браузеры второго поколения. В марте 1996 года Консорциум W3C объявил о сотрудничестве с лидерами рынка для установления стандартов совместимости программного обеспечения.

Это повлекло за собой некоторые шаги в продвижении, тогда еще новой, технологии CSS. Активно борясь за пользователя, Microsoft подхватила идею внедрения поддержки CSS, и уже в третьей версии своего браузера реализовала первую попытку. В декабре 1996 года, Консорциум W3C уже рекомендует стандарт CSS Layer1. К чести Microsoft, надо отметить, что это был не единственный верный ее шаг, чего нельзя сказать про Netscape, не захотевшей, или не сумевшей разглядеть перспективу.

Впервые компания включила частичную поддержку таблиц стилей только в четвертом поколении браузера. К сожалению Netscape, буквально до момента выхода своего очередного браузера Netscape Navigator v.6.0, так и не внедрила должным образом поддержку технологии CSS, что конечно не придает браузеру популярности. Тем не менее, идея форматирования документов HTML посредством таблиц стилей пришлась по душе многим разработчикам страниц своим удобством, и они стали все чаще применять эту технологию.

В 1997 году Консорциум W3C опубликовал спецификацию языка HTML 4,0, в которой указано, что почти все атрибуты, определяющие представление документа HTML (цвета, выравнивание, шрифты, графика и т.д.) являются нежелательными, взамен рекомендуется использовать таблицы стилей и классы, что задачу представления таблиц в ближайшем будущем возьмут на себя таблицы стилей, а поддержка обширного набора дескрипторов устройств, позволяет авторам писать таблицы стилей в зависимости от устройств.

Своим появлением таблицы стилей CSS, предоставили разработчикам документов HTML возможность создавать такие страницы, о которых раньше они могли только мечтать. Однако область их применения не выяснена окончательно, и ввиду неполной поддержки некоторыми браузерами, у web-мастера периодически могут возникать трудности с их применением. Одним из направлений применения CSS, явилось удачное их совместное с Java Script комбинирование, что повлекло за собой возникновение новой технологии - Dynamic HTML.


Учeбник CSS. Основные понятия.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник CSS >>Основные понятия

  • Общие положения
  • Синтаксис стиля
  • Включенные таблицы стилей
  • Внедренные таблицы стилей
  • Внешние таблицы стилей
  • Аппаратно-зависимые таблицы стилей

Общие положения

До появления таблиц стилей, форматирование документов HTML представляло собой форматирование при помощи атрибутов, определяющих цвет, выравнивание, шрифты, размеры и т.д. Например, для того, чтобы представить любой отрывок текста жирным выделением, красного цвета, большого размера необходимо было прибегнуть к конструкции типа:
<B><FONT color="red" size="5">текст</FONT></B>

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

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

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

Синтаксис стиля

Синтаксис стиля не слишком сильно отличается от синтаксиса HTML, он записываются следующим образом:
Синтаксис: селектор {атрибут: значение}
Здесь под селектором подразумевается элемент, для которого задается стиль, далее в фигурных скобках, через ";" записываются пары атрибут:значение, где ":" является заменителем знака "=". Например, для окрашивания всех заголовков второго уровня в красный цвет достаточно просто указать в описании стиля следующее:
H2 {color: red}

Селекторы могут описывать следующие элементы:

  • тэги
    Пример: P {color: red} стиль применяется к тэгу <P>
  • тэги потомков
    Пример: H1 B {color: red} стиль применяется к тэгу <B>, находящемуся внутри заголовка первого уровня, т.е. являющимся его потомком
  • дочерние тэги
    Пример: OL>LI {color: red} стиль применяется к тэгу <LI>, который является дочерним элементом для тэга <OL>, т.е. на тэги <LI>, которые являются дочерними элементами для тэга <UL> стиль не распространяется
  • сестринские тэги
    Пример: H1+H2 {margin-top: -5mm} стиль применяется к сестринским тэгам <H1> и <H2>, которые являются дочерними по отношению к одному и тому же родительскому тэгу, например <BODY>, в данном случае уменьшает разрыв между ними
  • атрибуты тэгов
    Пример: DIV[class=red] {color: red } стиль применяется ко всем элементам, включенным в <DIV>, у которых атрибут class равен red
  • ID
    Пример: P#12 {color: red } стиль применяется к тэгу <P>, у которого идентификатор ID равен 12
  • классы
    Пример: .red {color: red} стиль применяется к любомым тэгам, у которых атрибут class равен red
  • псевдоклассы
    Пример: A:visited {color: red } стиль применяется к посещенному тэгу <A>.

В том случае, если свойств у тэга предположительно много, то их разделяют точкой с запятой:
H2 {color: red; font-size: 15pt}
Если какой либо тэг в документе вставлен внутри другого тэга, то он наследует все его свойства, и для того, чтобы задать ему особые свойства необходимо использовать следующий синтаксис:
H3 B {color: green}
Здесь назначается зеленый цвет для текста выделенного тэгами <B> и </B>, если он является заголовком третьего уровня.

Включенные таблицы стилей

Включенные таблицы стилей позволяют управлять форматированием при помощи стандартных тэгов HTML, включая определения конкретного стиля для содержимого конкретного тэга, подобно его атрибутам. Сам по себе метод включения таблиц стилей в некотором смысле противоречит основной идее каскадных таблиц стилей. Так как ключевым моментом этой технологии является управление стилями отдельных страниц или узла целиком. Явное включение стилей аналогично использованию элемента <FONT> и должно применяться только в тех случаях, когда необходимо определить стиль только небольшого фрагмента текста.
Пример: P {color:blue} стиль применяется к тэгу <P>, данный единичный абзац будет иметь синий текст.

Внедренные таблицы стилей

Внедренные таблицы стилей позволяют управлять отдельными страницами при помощи пары тэгов <STYLE> и </STYLE>. Эта пара со всем её содержимым помещается между тэгами <HTML> и <BODY>. При написании кода внедренной таблицы выбираются тэги, которые будут являться контейнерами текста. Действие таблицы стилей будет распространяться только на те фрагменты текста, которые будут заключены именно в эти тэги. Точно также, как и скрипты, таблицы стилей могут быть спрятаны от старых браузеров в комментарии <!- - и //- ->. Внедренные таблицы используют наиболее часто.
Пример:

<HTML>
<HEAD>
</HEAD>
<STYLE>
BODY {color: #000000;}
H3 {color: #0000ff;}
A {color: #ff0000;}
</STYLE>
<BODY>
содержимое
</BODY>
</HTML>

Внешние таблицы стилей

Этот метод требует создания отдельного файла таблицы с основными стилями. Такой файл должен иметь расширение файл.css. Затем необходимо связать нужные документы с данной таблицей. Нужно поместить в связываемом документе где-нибудь между тэгами <HEAD> и </HEAD> следующую строку:
<LINK rel=stylesheet href="файл.css" type="text/css">
либо

<STYLE>
@import URL("_strong_файл.css_/strong_/default.htm");
</STYLE>

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

Аппаратно-зависимые таблицы стилей

Одной из важнейших особенностей таблиц стилей является то, что они могут задавать способ представления документа для различных устройств вывода: монитора, синтезатора речи, устройства печати азбуки Брайля, печатных устройств и т.д. Ниже представлен перечень типов устройств, определяемых в CSS:

  • all
    Для всех устройств.
  • aural
    Для речевых синтезаторов.
  • braille
    Для устройств чтения азбуки Брайля.
  • embossed
    Для печати азбуки Брайля.
  • handheld
    Для переносных небольших портативных устройств.
  • print
    Для страничных непрозрачных материалов и для документов, просматриваемых на экране в режиме предварительного просмотра печати.
  • projection
    Для настенных презентаций, например, для проекторов.
  • screen
    Для цветных дисплеев.
  • tty
    Для устройств, использующих набор символов с фиксированной шириной, например, телетайпов, терминалов или портативных устройств с ограниченными возможностями отображения.
  • tv
    Для телевизионных приставок (низкое разрешение, цветное изображение, ограниченная прокрутка на экране, возможность передачи звука).

Существует несколько способов задания аппаратно-зависимых таблиц стилей:

  • При помощи правила @import
    <STYLE>
    @import URL("_strong_файл.css_/strong_/default.htm") print;
    </STYLE>
  • При помощи правила @media
    <STYLE>
    @media print{...};
    </STYLE>
  • Задать аппаратно-зависимый стиль непосредственно в элементе <LINK>
    <LINK rel="stylesheet" type="text/css" media="print, handheld" href="file.css">
  • Задать аппаратно-зависимый стиль непосредственно в элементе <STYLE>
    <STYLE media=print>
    селектор {атрибут: значение}
    </STYLE>


Учeбник CSS.Единицы измерения.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник CSS >>Единицы измерения

  • Относительные размеры
  • Абсолютные размеры
  • Единицы определения цвета

Относительные размеры

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

  • em - размер, относительно размера буквы "m"
  • ex - размер, относительно вертикального размера букв, соответствующего шрифта
  • px - размер, использующий пиксели, относительно устройства вывода
  • % - размер, использующий процентные значения, относительно основного размера
Пример:

H1 { margin-left: 1.5em }
H3 { margin-left: 2ex }
span { font-size: 16px }
P { font-size: 150%px }

Дочерние элементы не наследуют относительные значения, указанные для их родительских элементов.

Абсолютные размеры

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

  • in - размер, в дюймах, 1 дюйм равен 2.54 сантиметрам.
  • cm - размер, в сантиметрах
  • mm - размер, в миллиметрах
  • pt - размер, в точках, 1 точка равна 1/72 дюйма.
  • pc - размер, в пиках, 1 пика равна 12 точкам.
Пример:

H1 { margin: 1.5in }
H2 { line-height: 5cm }
H3 { word-spacing: 3mm }
H4 { font-size: 16pt }
H4 { font-size: 2pc }

Если указанное значение длины не поддерживается, то браузеры автоматически замещают его поддерживаемым значением. Кроме рассмотренных абсолютных единиц измерения, существуют еще несколько, предназначенных для голосовых и прочих браузеров. К ним относятся: deg, rad, grad, ms, s, Hz, kHz.

Единицы определения цвета

  • ключевое слово - цвет задается, используя пользовательские настройки
  • литерал - цвет задается, используя стандартные названия
  • шестнадцатеричное - цвет задается, используя значения RGB
  • процентное - цвет задается, используя значения
  • десятичное - цвет задается, используя значения
Пример:
H1 { color: background }
H2 { color: red }
H3 { color: #ff0033mm }
H4 { color: rgb(100%, 0%, 0%)}
H4 { color: rgb(255, 0, 125)}


Учeбник CSS. Свойства шрифта.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник CSS >>Свойства шрифта

  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • font-face
  • font-family
    Атрибут определяет тип шрифта по следующим элементам:
    • Название шрифта.
      Синтаксис: селектор {font-family: Times}
    • Дополнительные шрифты. На случай, если какой-нибудь из шрифтов не установлен.
      Синтаксис: селектор {font-family: times,garamond,arial,hevletica}
    • Название семейства шрифтов.
      Serif-с засечками, Sans Serif- без засечек, Cursive- курсивные, Fantasy- декоративные, Monospace- моноширинные.
      Синтаксис: селектор {font-family: Serif}
  • font-size
    Атрибут определяет размер шрифта при помощи одной из размерностей:
    • Пункты.
      Синтаксис: селектор {font-size: 12pt}
    • Дюймы.
      Синтаксис: селектор {font-size: 12in}
    • Сантиметры.
      Синтаксис: селектор {font-size: 12cm}
    • Пиксели.
      Синтаксис: селектор {font-size: 12px}
    • Проценты.
      Синтаксис: селектор {font-size: 50%}
    • Абсолют.
      Синтаксис: селектор {font-size: small}
      Может принимать значения:
      • xx-small
      • x-small
      • small
      • medium
      • large
      • x-large
      • xx-large
  • font-style
    Атрибут определяет стиль начертания шрифта.
    Синтаксис: селектор {font-style: italic}
    Может принимать значения:
    • italic
    • normal
    • oblique
  • font-variant
    Атрибут определяет размер начертания шрифта.
    Синтаксис: селектор {font-variant: normal}
    Может принимать значения:
    • small-caps
    • normal
  • font-weight
    Атрибут определяет насыщенность начертания шрифта.
    Синтаксис: селектор {font-weight: насыщенность}
    Может принимать значения:
    • normal.
      Синтаксис: селектор {font-weight:normal}
    • bold.
      Синтаксис: селектор {font-weight:bold}
    • число. Задается в пределах от 100 до 900.
      Синтаксис: селектор {font-weight:700}
    • Очень светлый.
      Синтаксис: селектор {font-weight:extra-light}
    • Средне-светлый.
      Синтаксис: селектор {font-weight:demi-light}
    • Светлый.
      Синтаксис: селектор {font-weight: light}
    • Средний.
      Синтаксис: селектор {font-weight: medium}
    • Очень жирный.
      Синтаксис: селектор {font-weight: extra-bold}
    • Средн-жирный.
      Синтаксис: селектор {font-weight: demi-bold}
    • Жирный.
      Синтаксис: селектор {font-weight: bold}
  • font-face
    Атрибут определяет загружаемый шрифт c расширением .eot, используется для того, чтобы обеспечить правильное оформление документа, поскольку, если в системе пользователя нет нужного шрифта, броузер использует шрифт по-умолчанию, а это не всегда приемлемо.
    @font-face { font-family: имя; src: URL(http://domen.ru/путь/file.eot)}


Учeбник CSS. Свойства текста.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник CSS >>Свойства текста

  • word-spacing
  • letter-spacing
  • white-space
  • line-height
  • text-decoration
  • text-indent
  • text-align
  • text-transform
  • word-spacing
    Атрибут определяет оформление интервала между слов.
    Синтаксис: селектор {word-spacing: тип}
    • normal.
      Синтаксис: селектор {word-spacing:normal }
    • em.
      К обычному пробелу прибавляется ширина одной буквы m или нескольких
      Синтаксис: селектор {word-spacing:3em }
  • letter-spacing
    Атрибут определяет оформление интервала между символами.
    Синтаксис: селектор {letter-spacing: значение} либо normal.
    Синтаксис: селектор {letter-spacing:normal }
  • white-space
    Атрибут определяет оформление пробелов в тексте.
    Синтаксис: селектор {white-space: значение}
    может принимать значения:
    • normal.
    • pre.
    • nowrap.
  • line-height
    Атрибут определяет межстрочный интервал при помощи одной из пяти размерностей:
    • Пункты.
      Синтаксис: селектор {line-heigh: 12pt}
    • Дюймы.
      Синтаксис: селектор {line-heigh: 12in}
    • Сантиметры.
      Синтаксис: селектор {line-heigh: 12cm}
    • Пиксели.
      Синтаксис: селектор {line-heigh: 12px}
    • Проценты.
      Синтаксис: селектор {line-heigh: 50%}
  • text-decoration
    Атрибут определяет оформление начертания шрифта.
    Синтаксис: селектор {text-decoration: тип}
    • Упрощённый.
      Синтаксис: селектор {text-decoration: none }
    • Подчеркнутый.
      Синтаксис: селектор {text-decoration: underline }
    • Надчеркнутый.
      Синтаксис: селектор {text-decoration: overline }
    • Наклонный.
      Синтаксис: селектор {text-decoration: italic }
    • Линия насквозь.
      Синтаксис: селектор {text-decoration: line-through }
  • text-indent
    Атрибут определяет отступ текста.
    Синтаксис: селектор {text-indent: число}
    • Пункты.
      Синтаксис: селектор {text-indent: 12pt}
    • Дюймы.
      Синтаксис: селектор {text-indent: 12in}
    • Сантиметры.
      Синтаксис: селектор {text-indent: 12cm}
    • Пиксели.
      Синтаксис: селектор {text-indent: 12px}
    Браузер Internet Explorer поддерживает отрицательные значения атрибутов полей и отступа. Эта функциональная особенность позволяет добиваться интересных и необычных эффектов, что положительно сказывается на читабельности страницы.
  • text-align
    Атрибут позволяет изменить режим выравнивания текста.
    Синтаксис: селектор {text-align: расположение}
    • По правому краю.
      Синтаксис: селектор {text-align: right }
    • По левому краю.
      Синтаксис: селектор {text-align: left }
    • По центру.
      Синтаксис: селектор {text-align: center }
  • text-transform
    Атрибут позволяет изменить регистр шрифта текста.
    Синтаксис: селектор {text-transform: none}
    так же может принимать значения:
    • capitalize.
    • uppercase.
    • lowercase.
    Выравнивание больших фрагментов по левому краю является единственно разумным решением с точки зрения читабельности. Выравнивание по правому краю логичнее всего назначать небольшим фрагментам текста, например, выноскам. Хотя с помощью атрибута BODY определяются значения полей для всей страницы, атрибут поля можно включать в любой элемент HTML, например, в заголовки или абзацы.


Учeбник CSS. Свойства цвета и фона.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник CSS >>Свойства цвета и фона

  • background-color
  • background-image
  • background-position
  • background-attachment
  • background-repeat
  • color
  • background-color
    Атрибут позволяет задать цвет фона абзаца, присвоив ему шестнадцатеричное значение, либо задать прозрачность transparent.
    Синтаксис: селектор {background-color: #ffffff}
  • background-image
    Атрибут позволяет задать фоновый рисунок страницы, указав его URL.
    Синтаксис: селектор {background-image: URL("_strong_URL_/strong_/default.htm");}
  • background-position
    Атрибут позволяет задать расположение фонового рисунка страницы, указав его отступы по осям x и y, кроме численных значений может задаваться как:
    • left
    • top
    • center
    • right
    • bottom

    Синтаксис: селектор {background-position: left 45pt;}
  • background-attachment
    Атрибут позволяет задать будет ли фоновый рисунок страницы фиксированным, указав scroll или fixed.
    Синтаксис: селектор {background-attachment: scroll;}
  • background-repeat
    Атрибут позволяет задать будет ли фоновый рисунок страницы заполнять фон черепицей и как, указав:
    • repeat - повторяется
    • no-repeat - не повторяется
    • repeat-x - повторяется по оси x
    • repeat-y - повторяется по оси y

    Синтаксис: селектор {background-attachment: scroll;}
  • color
    Атрибут позволяет задать цвет текста страницы, присвоив ему шестнадцатеричное значение.
    Синтаксис: селектор {color: #000000}


Учeбник CSS. Свойства обрамления.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник CSS >>Свойства обрамления

  • margin-left
  • margin-right
  • margin-top
  • margin-bottom
  • padding-left
  • padding-right
  • padding-top
  • padding-bottom
  • border-style
  • border-color
  • border-width
  • border-позиция
  • margin-left
    Атрибут определяет отступ от объекта слева.
    Синтаксис: селектор {margin-left: auto}
    • Пункты.
      Синтаксис: селектор {margin-left: 12pt}
    • Дюймы.
      Синтаксис: селектор {margin-left: 12in}
    • Сантиметры.
      Синтаксис: селектор {margin-left: 12cm}
    • Пиксели.
      Синтаксис: селектор {margin-left: 12px}
  • margin-right
    Атрибут определяет отступ от объекта справа.
    Синтаксис: селектор {margin-right: auto}
    • Пункты.
      Синтаксис: селектор {margin-right: 12pt}
    • Дюймы.
      Синтаксис: селектор {margin-right: 12in}
    • Сантиметры.
      Синтаксис: селектор {margin-right: 12cm}
    • Пиксели.
      Синтаксис: селектор {margin-right: 12px}
  • margin-top
    Атрибут определяет отступ от объекта сверху.
    Синтаксис: селектор {margin-top: auto}
    • Пункты.
      Синтаксис: селектор {margin-top: 12pt}
    • Дюймы.
      Синтаксис: селектор {margin-top: 12in}
    • Сантиметры.
      Синтаксис: селектор {margin-top: 12cm}
    • Пиксели.
      Синтаксис: селектор {margin-top: 12px}
  • margin-bottom
    Атрибут определяет отступ от объекта снизу.
    Синтаксис: селектор {margin-bottom: auto}
    • Пункты.
      Синтаксис: селектор {margin-bottom: 12pt}
    • Дюймы.
      Синтаксис: селектор {margin-bottom: 12in}
    • Сантиметры.
      Синтаксис: селектор {margin-bottom: 12cm}
    • Пиксели.
      Синтаксис: селектор {margin-bottom: 12px}
  • padding-left
    Атрибут определяет отступ от содержимого элемента до обрамления слева.
    Синтаксис: селектор {padding-left: 0}
    • Пункты.
      Синтаксис: селектор {padding-left: 12pt}
    • Дюймы.
      Синтаксис: селектор {padding-left: 12in}
    • Сантиметры.
      Синтаксис: селектор {padding-left: 12cm}
    • Пиксели.
      Синтаксис: селектор {padding-left: 12px}
  • padding-right
    Атрибут определяет отступ от содержимого элемента до обрамления справа.
    Синтаксис: селектор {padding-right: 0}
    • Пункты.
      Синтаксис: селектор {padding-right: 12pt}
    • Дюймы.
      Синтаксис: селектор {padding-right: 12in}
    • Сантиметры.
      Синтаксис: селектор {padding-right: 12cm}
    • Пиксели.
      Синтаксис: селектор {padding-right: 12px}
  • padding-top
    Атрибут определяет отступ от содержимого элемента до обрамления сверху.
    Синтаксис: селектор {padding-top: 0}
    • Пункты.
      Синтаксис: селектор {padding-top: 12pt}
    • Дюймы.
      Синтаксис: селектор {padding-top: 12in}
    • Сантиметры.
      Синтаксис: селектор {padding-top: 12cm}
    • Пиксели.
      Синтаксис: селектор {padding-top: 12px}
  • padding-bottom
    Атрибут определяет отступ от содержимого элемента до обрамления снизу.
    Синтаксис: селектор {padding-bottom: 0}
    • Пункты.
      Синтаксис: селектор {padding-bottom: 12pt}
    • Дюймы.
      Синтаксис: селектор {padding-bottom: 12in}
    • Сантиметры.
      Синтаксис: селектор {padding-bottom: 12cm}
    • Пиксели.
      Синтаксис: селектор {padding-bottom: 12px}
  • border-style
    Атрибут определяет оформление рамок вокруг объектов.
    Синтаксис: селектор {border-style:тип}
    • dotted. Синтаксис: селектор {border-style: dotted}
    • solid.
      Синтаксис: селектор {border-style: solid}
    • double.
      Синтаксис: селектор {border-style: double}
    • groove.
      Синтаксис: селектор {border-style: groove}
    • insert.
      Синтаксис: селектор {border-style: insert }
    • ridge.
      Синтаксис: селектор {border-style: ridge}
    • outset.
      Синтаксис: селектор {border-style: outset}
    • none.
      Синтаксис: селектор {border-style: none }
  • border-color
    Атрибут определяет оформление цвета рамок вокруг объектов.
    Синтаксис: селектор {border-color: цвет}
  • border-width
    Атрибут определяет оформление цвета рамок вокруг объектов.
    Синтаксис: селектор {border-width: цвет}
  • border-позиция
    Атрибут определяет оформление вида и цвета рамок вокруг объектов выборочно с любой из сторон
    Синтаксис: селектор {border-top: вид цвет}
    может принимать значения:
    • border-top
    • border-bottom
    • border-right
    • border-left
    Тогда, приведенные выше свойства примут вид:
    для border-color:
    • border-top-color
    • border-bottom-color
    • border-right-color
    • border-left-color
    для border-style:
    • border-top-style
    • border-bottom-style
    • border-right-style
    • border-left-style
    для border-width:
    • border-top-width
    • border-bottom-width
    • border-right-width
    • border-left-width


Учeбник CSS. Свойства позиционирования.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник CSS >>Свойства позиционирования

  • top
  • left
  • width
  • height
  • position
  • z-index
  • clear
  • overflow
  • float
  • top
    Атрибут позволяет задать y-координату элемента в окне браузера:
    Синтаксис: селектор {top: значение}
    задается:
    • n px
    • n %
    • auto
  • left
    Атрибут позволяет задать x-координату элемента в окне браузера:
    Синтаксис: селектор {left: значение}
    задается:
    • n px
    • n %
    • auto
  • width
    Атрибут позволяет задать ширину элемента в окне браузера:
    Синтаксис: селектор {width: значение}
    задается:
    • n px
    • n %
    • auto
  • height
    Атрибут позволяет задать высоту элемента в окне браузера:
    Синтаксис: селектор {height: значение}
    задается:
    • n px
    • n %
    • auto
  • position
    Атрибут позволяет задать позицию элемента в окне браузера:
    Синтаксис: селектор {position: absolute}
    • absolute - когда значения left и top задаются относительно левого верхнего угла контейнера или страницы.
    • relative - когда значения left и top задаются относительно текста, за которым следует элемент.
    • static - когда значения left и top задаются относительно страницы статично.
  • z-index
    Атрибут позволяет задать порядок перекрытия элементами друг друга при расположении их слоями, при этом элемент с более высоким индексом будет располагаться над элементом с низким индексом. В случае, если атрибут не задан специально, браузер присваивает более высокий индекс элементу, который в исходном коде описан позже:
    Синтаксис: селектор {z-index: 2}
    • auto
    • порядковый номер
  • clear
    Атрибут позволяет задать обтекание текстом объекта, например картинки, выровненной по левому или правому краю, присвоив ему одно из значений:
    Синтаксис: селектор {clear: none}
    • left
    • right
    • both
  • overflow
    Атрибут позволяет задать, как выглядит текст, переполнивший границы элемента, присвоив ему одно из значений:
    Синтаксис: селектор {overflow: none}
    • none
    • clip
    • scroll
  • float
    Атрибут аналогичен атрибуту align.
    Синтаксис: селектор {float: left}


Учeбник CSS. Визуальные свойства.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник CSS >>Визуальные свойства

  • cursor
  • filter
  • visibility
  • display
  • list-style-position
  • list-style-type
  • list-style-image

  • cursor
    Синтаксис: селектор {cursor: hand}
    Атрибут позволяет задать вид курсора, присвоив ему одно из значений:
    • crosshair
    • hand
    • pointer
    • move
    • e-resize
    • ne-resize
    • nw-resize
    • n-resize
    • sw-resize
    • se-resize
    • s-resize
    • w-resize
    • text
    • wait
    • help
    • auto
    • default

  • filter
    Синтаксис: селектор {filter: fliph(параметры)}
    Атрибут позволяет задать фильтр для текста или изображения, присвоив ему одно из значений:
    • alpha
    • blur
    • chroma
    • dropshadow
    • flipv
    • fliph
    • glow
    • gray
    • invert
    • light
    • mask
    • shadow
    • wave
    • xray

  • visibility
    Атрибут позволяет задать видимость фрагмента документа, присвоив ему одно из значений:
    Синтаксис: селектор {visibility: inherit}
    • inherit
    • none
    • visible

  • display
    Атрибут позволяет задать видимость фрагмента документа, визуально отличается от visibility тем, что сдвигает предыдущий и последующий элементы вместе:
    Синтаксис: селектор {display: none}
    • inline
    • list-item
    • none
    • block

  • list-style-position
    Атрибут позволяет задать то, как будет отображаться текст внутри списка, если текст элемента списка по объему больше одной строки.
    Синтаксис: селектор {list-style-position: outside}
    • outside
    • inside

  • list-style-type
    Атрибут определяет оформление маркеров в списках.
    Синтаксис: селектор {list-style-type: тип}
    • disc.
      Синтаксис: селектор {list-style-type: disc}
    • square.
      Синтаксис: селектор {list-style-type: square}
    • circle.
      Синтаксис: селектор {list-style-type: circle}
    • decimal.
      Синтаксис: селектор {list-style-type: decimal}
    • lower-roman.
      Синтаксис: селектор {list-style-type:lower-roman }
    • upper-roman.
      Синтаксис: селектор {list-style-type: upper-roman}
    • lower-alpha.
      Синтаксис: селектор {list-style-type: lower-alpha}
    • upper-alpha.
      Синтаксис: селектор {list-style-type: upper-alpha}
    • none.
      Синтаксис: селектор {list-style-type: none }

  • list-style-image
    Атрибут определяет замену маркеров в списках на изображение.
    Синтаксис: селектор {list-style-image: URL(file.gif ) }
    Пример:
    <UL STYLE="list-style-image:URL(file.gif)">
    <LI> текст
    <LI>текст
    <LI> текст
    </UL>
    Пример:
    • текст
    • текст
    • текст


Учeбник CSS. Прочие свойства.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник CSS >>Прочие свойства

  • page-break-after
  • page-break-before
  • :first-line
  • :first-letter
  • :after
  • :before
  • page-break-after
    Атрибут определяет разрыв страницы перед атрибутом.
    Синтаксис: селектор {page-break-after: значение}
    может принимать значения:
    • auto.
    • right.
    • left.
    • always.

  • page-break-before
    Атрибут определяет разрыв страницы после атрибута.
    Синтаксис: селектор {page-break-before: значение}
    может принимать значения:
    • auto.
    • right.
    • left.
    • always.

  • :first-line
    Псевдоэлемент определяет стиль для первой строки блока текста

  • :first-letter
    Псевдоэлемент определяет стиль для первой буквы в строке.
    Пример задания буквицы:
    P:first-letter { font-size: 300%; font-style: italic; font-weight: bold; float: left }

  • :after
    Псевдоэлемент для вставки генерируемого содержимого после содержимого элемента

  • :before
    для вставки генерируемого содержимого до содержимого элемента
    Например, следующее правило вставляет строку "Пояснение: " перед содержимым каждого элемента SPAN, значение атрибута class которого, равно note:
    SPAN.note:before { content: "Пояснение: " }


Учeбник CSS. Группирование стилей, назначение классов и псевдоклассов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник CSS >>Группирование стилей, назначение классов и псевдоклассов

  • Группирование стилей
  • Назначение классов
  • Назначение псевдоклассов

Группирование стилей

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

Пример группирования по тэгам:
До группирования:

H1 {font-family: arial;font-size: 14pt}
H2 {font-family: arial;font-size: 14pt}
H3 {font-family: arial;font-size: 14pt}

После группирования:

H1,H2,H3 {font-family: arial;font-size: 14pt}

Пример группирования по атрибутам одного семейства:
До группирования:

BODY {margin-top: 12pt;margin-right: 10pt;margin-left: 15pt}

После группирования

BODY {margin: 12pt 10pt 15pt}

Назначение классов

Для того, чтобы сделать работу более универсальной, можно создать несколько вариантов - классов свойств стилей и применять их к элементам поочередно. Сгруппировав стили по свойствам, необходимо дать им названия ввиде расширения к элементу.
Синтаксис:
H1.left {text-align: left}
H1.right {text-align: right}
Далее в документе указывается либо <H1 class=left>, либо <H1 class=right>

Аналогично можно создать универсальный класс и применять его потом к различным элементам:
Синтаксис:

.left {text-align: left}
.right {text-align: right}

Далее в документе указывается либо <тэг class=left>, либо <тэг class=right>

Назначение псевдоклассов

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

  • A:link - не просмотренные ссылки
  • A:visited - просмотренные ссылки
  • A:hover - выбранная, но не активизированная ссылка
  • A:active - активизированная ссылка


Учeбник CSS. Адаптация интерфейса.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник CSS >>Адаптация интерфейса

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

В этой таблице приведен список ключевых слов для определения пользовательских цветов и примеры их применения.

Цвета | значение | описание
 | activeborder | Цвет границы активного окна.
 | activecaption | Цвет заголовка активного окна.
 | appworkspace | Цвет мультидокументного фона.
 | background | Цвет фона рабочего стола.
 | buttonface | "Лицевая" сторона объемных элементов.
 | buttonhighlight | Насыщенная тень объемных элементов.
 | buttonshadow | Цвет тени объемных элементов.
 | buttontext | Цвет текста на кнопках.
 | captiontext | Цвет текста в заголовках.
 | graytext | Отключенный (недоступный) текст.
 | highlight | Выделение объекта элемента управления.
 | highlighttext | Выделение текста элемента управления.
 | inactiveborder | Цвет границы неактивного окна.
 | inactivecaption | Цвет заголовка неактивного окна.
 | inactivecaptiontext | Цвет текста в неактивном заголовке.
 | infobackground | Цвет фона всплывающей подсказки.
 | infotext | Цвет текста всплывающей подсказки.
 | menu | Цвет фона меню.
 | menutext | Цвет текста в меню.
 | scrollbar | Цвет полосы прокрутки.
 | threeddarkshadow | Темная тень объемных элементов.
 | threedface | "Лицевая" сторона объемных элементов.
 | threedhighlight | Цвет выделения объемных элементов.
 | threedlightshadow | Светлый цвет тени объемных элементов.
 | threedshadow | Насыщенная тень объемных элементов.
 | window | Цвет фона окна.
 | windowframe | Цвет рамки окна.
 | windowtext | Цвет текста в окне.

Синтаксис: селектор {color: background; }
Пример: текст имеет цвет фона Вашего рабочего стола

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

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

Системные шрифты | значение | описание
Шрифт | caption | Шрифт, используемый в заголовках кнопок и т.д.
Шрифт | icon | Шрифт, используемый в иконках.
Шрифт | menu | Шрифт, используемый в меню.
Шрифт | messagebox | Шрифт, используемый в диалогах и т.д.
Шрифт | smallcaption | Шрифт, используемый в малых элементах.
Шрифт | statusbar | Шрифт, используемый в статусной строке.

Синтаксис: селектор {font: icon; }


Учeбник CSS. Фильтры.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник CSS >>Фильтры

Фильтры предоставляют возможность для изменения внешнего вида текста и графики документа, а также групп элементов, заключенных в тэги <DIV> и </DIV>. Фильтр задается точно так, как задается любое свойство элемента при помощи стиля.
Синтаксис: {filter: имя(параметры)}

  • alpha
  • blur
  • chroma
  • dropshadow
  • flipv
  • fliph
  • glow
  • gray
  • invert
  • mask
  • shadow
  • wave
  • xray

Фильтр alpha

Фильтр alpha задает уровень прозрачности элемента.
Синтаксис: {filter:Alpha(Opacity="20",FinishOpacity="45",Style="3")}
Используется с рядом параметров:

  • opacity - уровень прозрачности от 0 до 100
    {filter:Alpha(Opacity="20",FinishOpacity="45",Style="3")}
    {filter:Alpha(Opacity="40",FinishOpacity="45",Style="3")}
    {filter:Alpha(Opacity="90",FinishOpacity="45",Style="3")}
  • finish opacity - конечный уровень прозрачности от 0 до 100, параметр ограничивает использование прозрачности до заданного значения.
  • style - форма прозрачной области: 0 - универсал, 1 - линия,2 - круг,3 - прямоугольник.
  • startx - начало прозрачной области применяется только с style=1, задается в процентах.
  • starty - начало прозрачной области применяется только с style=1, задается в процентах.
  • finishx - конец прозрачной области применяется только с style=1, задается в процентах.
  • finishy - конец прозрачной области применяется только с style=1, задается в процентах.

Фильтр blur

Фильтр blur задает элементу эффект размытости при движении.
Синтаксис: {filter:Blur(Add="1",Direction="270",Strength="15")}

Используется с параметрами:

  • add - либо 0-false,либо 1-true
  • direction - задает направление размытия в градусах от 0 до 360, при этом поворот на -45 градусов автоматически эквивалентен повороту на 315 градусов.
    • 0 - Top
    • 45 - Top right
    • 90 - Right
    • 135 - Bottom right
    • 180 - Bottom
    • 225 - Bottom left
    • 270 - Default left
    • 315 - Top left
  • strength - величина смещения.

Фильтр chroma

Фильтр chroma задает прозрачность для одного цвета.
Синтаксис: {filter:Chroma(Color ="#fdfd03")}

Использует параметр:

  • color - ввиде "#rrggbb"

Фильтр dropshadow

Фильтр dropshadow отбрасывает тень от объекта.
Синтаксис: {filter:DropShadow(Color="#6699CC",OffX="3",OffY="3",Positive="1")}

dropshadow

Использует параметры:

  • color - задает цвет тени ввиде "#rrggbb"
  • offx - задает смещение тени по оси X
  • offy - задает смещение тени по оси Y
  • positive - либо 0-верхний слой виден частично, либо 1- верхний слой виден весь.

Фильтр flipv

Фильтр flipv вертикально переворачивает объект:
Синтаксис: {filter:FlipV;}

Фильтр flipv

Фильтр fliph

Фильтр fliph горизонтально переворачивает объект:
Синтаксис: {filter:FlipH;}

Фильтр fliph

Фильтр glow

Фильтр glow задает ореол вокруг объекта:
Синтаксис: {filter:Glow(Strength=3, Color="#0000ff")}

glow

Использует параметры:

  • color - задает цвет сияния ввиде "#rrggbb"
  • strength - задает интенсивность сияния от 0 до 100

Фильтр gray

Фильтр gray преобразует объект в черно-белые цвета.
Синтаксис: {filter:Gray;}

Фильтр invert

Фильтр invert инвертирует оттенки, цвета и яркость объекта
Синтаксис: {filter:Invert;}

Фильтр mask

Фильтр mask задает выделение объекта цветом:
Синтаксис: {filter:Mask(Color="#0000ff")}

mask

Использует параметр:

  • color - ввиде "#rrggbb"

Фильтр shadow

Фильтр shadow отбрасывает тень от объекта.
Синтаксис: {filter:Shadow(Color="#000000", Direction="150")}

shadow

Используется с параметрами:

  • direction - задает направление тени в градусах от 0 до 360, при этом поворот на -45 градусов автоматически эквивалентен повороту на 315 градусов.
    • 0 - Top
    • 45 - Top right
    • 90 - Right
    • 135 - Bottom right
    • 180 - Bottom
    • 225 - Default bottom left
    • 270 - Left
    • 315 - Top left
  • color - ввиде "#rrggbb"

Фильтр wave

Фильтр wave задает волнообразное отображение объекта
Синтаксис: {filter:Wave(Freq=5, Add=0, LightStrength=1, Phase=2, Strength=2)}

wave

Использует параметры:

  • add - либо 0-false,либо 1-true
  • freq - задает количество волн
  • phase - задает фазу волны
  • lightstrength - задает изменение интенсивности освещенности на пиках волн
  • strength - задает интенсивность волны

Фильтр xray

Фильтр xray показывает контур объекта, как если бы это был рентгеновский снимок:
Синтаксис: {filter:Xray;}


Учeбник CSS. Слои.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник CSS >>Слои

Концепция слоя или уровня была разработана и впервые предложена компанией Netscape, их тэги <LAYER и <ILAYER> были во многом похожи на <FRAME> и <IFRAME>. Однако со временем им на замену пришло и практически полностью вытеснило оригинальное решение от Microsoft. Было предложено рассматривать отдельные блоки текста, в тэгах <SPAN> или <DIV> как слои, организовав управление ими при помощи их свойств.

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

  • Абсолютное позиционирование
  • Горизонтальное позиционирование
  • Вертикальное позиционирование
  • Задание высоты слоя
  • Задание ширины слоя
  • Позиционирование в глубину
  • Управление видимостью
  • Понятие прозрачности слоя
  • Наложение слоев
  • Примеры работы со слоями

Абсолютное позиционирование

Как и любое другое свойство, свойство Position задается при помощи таблиц стилей CSS.
Синтаксис: {position: absolute}
Оно может принимать следующие значения:

  • position:absolute означает, что позиционирование слоя будет происходить относительно левого верхнего угла страницы.
  • position:relative означает, что позиционирование слоя будет происходить относительно того места, где в исходном тексте он находится, то есть относительно предыдущего элемента.
  • position:static означает, что позиционирование слоя будет происходить относительно фона.

Горизонтальное позиционирование

Позиционирование по горизонтали задается свойством left,путем задания отступа по оси X левого верхнего угла слоя относительно точки отсчета, которая определяется свойством Position
Синтаксис: {left: значение}
задается:

  • n px
  • n %
  • auto

Вертикальное позиционирование

Позиционирование по вертикали задается свойством top, атрибут позволяет задать Y-координату левого верхнего угла слоя относительно точки отсчета, которая определяется свойством Position
Синтаксис: {top: значение}
задается:

  • n px
  • n %
  • auto

Задание высоты слоя

height, это свойство позволяет задать высоту слоя в окне браузера:
Синтаксис: {height: значение}
задается:

  • n px
  • n %
  • auto

Задание ширины слоя

width, это свойство позволяет задать ширину слоя в окне браузера:
Синтаксис: {width: значение}
задается:

  • n px
  • n %
  • auto

Позиционирование в глубину

z-index,это свойство позволяет задать порядок перекрытия слоями друг друга, при этом слой с более высоким индексом будет располагаться над слоем с низким индексом. В случае, если атрибут не задан специально, браузер присваивает более высокий индекс слою, который в исходном коде описан позже:
Синтаксис: {z-index: 2}

  • auto
  • порядковый номер

Управление видимостью

visibility,это свойство позволяет задать видимость слоя, присвоив ему одно из значений:
Синтаксис: {visibility: inherit}

  • inherit
  • none
  • visible

display,это свойство позволяет задать видимость слоя, визуально отличается от visibility тем, что сдвигает предыдущий и последующий слои вместе:
Синтаксис: {display: none}

  • inline
  • list-item
  • none
  • block

При кажущемся сходстве свойств слоя visibility и display работают они по разному.
Пример: | убрать | поставить | или | скрыть | показать | слой

overflow,это свойство позволяет задать, как выглядит текст, переполнивший границы слоя, присвоив ему одно из значений:
Синтаксис: {overflow: none}

  • none
  • clip
  • scroll

Понятие прозрачности слоя

Поскольку слой на самом деле представляет собой блок содержимого, заключенный в тэгах <SPAN> или <DIV>, то при помощи таблиц стилей CSS можно отформатировать его любым из доступных способов: наложить фильтр, задать фоновый цвет или рисунок, задать стили включенным тэгам. Тогда, если слой не будет иметь фоновый цвет или рисунок мы сможем увидеть сквозь него содержимое того слоя, над которым он позиционирован, подобного можно достичь, вставив рисунок .gif, у которого один из цветов прозрачный. Используя данное свойство легко можно добиться интересных эффектов, недоступных другими способами, что в целом улучшает внешний вид и эстетическое восприятие содержимого.

Наложение слоев

Одно из самых интересных способов применений свойств слоя, является одновременное оперирование позиционированием сразу для двух слоев и более. Задав в каждом слое свойствам Position значение absolute и варьируя значения свойств left, top, height, width и z-index мы получим интересный эффект наложения слоев друг на друга, частичного или полного перекрытия содержимого.

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

Наложение прозрачного слоя, эффект тени

<html>
<head>
<style type="text/css">
body {font-family: Verdana; font-size: 30pt; font-weight: bold;}
.d1 { position: absolute; color: silver; top: 10%; left: 10%; }
.d2 { position: absolute; color: navy; top: 9%; left: 9%; }
</style>
</head>
<body>
<div class="d1">Учебник HTML</div>
<div class="d2">Учебник HTML</div>
</body>
</html>

Пример

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

<html>
<head>
<style type="text/css">
body {font-family: Verdana; font-size: 100%; color: navy;}
.d1 { position: absolute; top: 5%; left: 5%; }
.d2 { position: absolute; top: 5%; left: 45%; }
.d3 { position: absolute; top: 5%; left: 85%; }
.d4 { position: absolute; top: 45%; left: 5%; }
.d5 { position: absolute; top: 45%; left: 45%; }
.d6 { position: absolute; top: 45%; left: 85%; }
.d7 { position: absolute; top: 85%; left: 5%; }
.d8 { position: absolute; top: 85%; left: 45%; }
.d9 { position: absolute; top: 85%; left: 85%; }
</style>
</head>
<body>
<div class="d1">Ячейка1</div>
<div class="d2">Ячейка2</div>
<div class="d3">Ячейка3</div>
<div class="d4">Ячейка4</div>
<div class="d5">Ячейка5</div>
<div class="d6">Ячейка6</div>
<div class="d7">Ячейка7</div>
<div class="d8">Ячейка8</div>
<div class="d9">Ячейка9</div>
</body>
</html>

Пример

Декоративное оформление страницы

<html>
<head>
<style type="text/css">
body {font-family: Verdana; font-size: 100%; font-weight: bold;}
.d1 { position: absolute;
font-size: 1000%;
color: #ffccff;
top: 10%;
left: 10%;
width: 70%;}
.d2 { position: absolute;
font-size:450%;
color: #ccffff;
top:150;
left: 20%;
width: 60%;}
.d3 { position: absolute;
font-size: 100%;
color: navy;
top: 10%;
left: 25%;
width: 35%;}
b { font-size: 100%; color: #0088bb}
i {color: #0088bb }
</style>
</head>
<body>
<div class="d1">HTML</div>
<div class="d2">Учебник</div>
<div class="d3">
<p>Данный <b>учебник HTML</b> и <b>CSS</b> поможет начинающему пользователю,
шаг за шагом,  от начала и до конца создать свою собственную страницу в интернете,
<b>WEB-узел</b> или их локальную версию на <b>CD</b>, а также может послужить
<b>on-line</b> < справочником  для более продвинутых <i>юзеров</i>.
Не стоит ждать от сайта абсолютно исчерпывающего объёма информации, однако
он будет <b>регулярно</b>
 обновляться и пополняться материалами.
</p>
</div>
</body>
</html>

Пример


Учeбник CSS. Примеры исходных кодов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Учебник CSS >>Примеры исходных кодов

Пример включенной таблицы стилей

<! DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2 // EN ">
<HTML>
<HEAD>
<TITLE> Пример включенной таблицы стилей </TITLE>
</HEAD>
<BODY>
<P style="font: 24pt garamond">
Включенная таблица стилей и атрибут style, включенный в тэг абзаца
</P>
<span style="font: 18pt arial">
Стиль этого раздела был определен комбинацией тэга span и атрибута style
</span>
</BODY>
</HTML>

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

<! DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2 // EN ">
<HTML>
<HEAD>
<TITLE> Пример внедренной таблицы стилей</TITLE>
</HEAD>
<STYLE>
BODY {background: #ffffff;color: #000000; margin-top: 120pt; margin-left: 150pt;margin-right: 100pt}
H3 {font: 14pt verdana; color: #0000ff}
P {font: 12pt times;background-color: #00ff00; text-indent: 0.5in}
A {color: #ff0000}
</STYLE>
<BODY>
<H3>Документ с внедренной таблицей стилей </H3>
<P> В этом документе фон белый, шрифт черный ;поля 150 пикселей, 120 и 100;</P>
<P>Все заголовки третьего уровня будут выведены синим шрифтом Verdana высотой 14 пикселей. </P>
<P>Абзацы простого текста оформлены красной строкой в 1/2 дюйма и выведены шрифтом Times высотой 12 пикселей.
<A href="anyfile.htm">Ссылка</A>красного цвета </P>
</BODY>
</HTML>

Пример внешней таблицы стилей
Файл с расширением style.css

BODY {background: #ffffff;color: #000000;margin-top: 120pt; margin-left: 150pt;margin-right: 100pt}
H3 {font: 14pt verdana; color: #0000ff}
P {font: 12pt times;background-color: #00ff00; text-indent: 0.5in}
A {color: #ff0000}

Исходный код страницы

<! DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2 // EN ">
<HTML>
<HEAD>
<TITLE> Пример внешней таблицы стилей</TITLE>
</HEAD>
<STYLE>
@import URL("style.css");
</STYLE>
<BODY>
<H3>Документ с внедренной таблицей стилей </H3>
<P> В этом документе фон белый, шрифт черный; поля 150 пикселей, 120 и 100;</P>
<P>Все заголовки третьего уровня будут выведены синим шрифтом Verdana высотой 14 пикселей. </P>
<P>Абзацы простого текста оформлены красной строкой в 1/2 дюйма и выведены шрифтом Times высотой 12 пикселей.
<A href="anyfile.htm">Ссылка</A>красного цвета </P>
</BODY>
</HTML>

Пример внешней таблицы стилей
Файл с расширением style.css

<STYLE>
BODY {background:#ffffff;color #000000; margin-top: .25in}
H3 {font: 14pt verdana; color: #0000ff}
P {font: 12pt times; text-indent: 0.5in; margin-left: .75in; margin-right: .75in}
A {color:#ff0000}
</STYLE>

Исходный код страницы

<! DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2 // EN ">
<HTML>
<HEAD>
<TITLE> Пример внешней таблицы стилей</TITLE>
<LINK rel=stylesheet href="Style.css" type="text/css">
</HEAD>
<BODY>
<H3>Заголовок 14 пикселей Verdana синий</H3>
<P>Абзац: шрифт 12 пикселей, отступ текста 1/2 дюйма, выравнивание справа и слева 0,75 дюйма</P>
<A href="anyfile.htm">Ссылка</A>красная
</BODY>
</HTML>


Cправочник по созданию Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Web-mastering>>Форма и содержание, первый шаг

  • Распределение обязанностей.
  • Внешний вид и контент.
  • С чего начать.
  • Полезные ссылки.

Распределение обязанностей.

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

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

Следующий специалист, это web-мастер проекта, как правило это опытный программист, знающий HTML, CSS, Java Script (обязательно), а также PHP, Perl, Java, базы данных, и т.д. (желательно). Его основная задача - кодинг, воплощение и техническая реализация идей всех остальных членов команды, для своей части работы он использует не менее широкий арсенал программ и утилит, для написания, редактирования, проверки правильности кода и его отладки.

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

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

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

Внешний вид и контент.

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

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

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

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

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

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

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

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

Полезные ссылки.

Посетите приведенные ниже страницы - там Вы сможете попытаться создать для своего сайта красивое, запоминающееся LOGO

http://www.cooltext.net
http://www.zyris.com/zygraphics
http://www.angelfire.com/me/physc0/enterlogo.html

А тут Вы найдете неплохие коллекции фоновых изображений для своего сайта

http://boom.ru
http://web.zero.ru/fon/background.shtml

По этим ссылкам Вы найдете много различных картинок

http://www.caravan.ru/~sokolov/
http://gifcollection.boom.ru

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


Cправочник по созданию Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Web-mastering>>Проблема использования чистого HTML.

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

Стремительное развитие WWW, в результате острой конкуренции между компаниями производителями программного обеспечения сети и достаточная инертность Консорциума W3C в деле стандартизации языка HTML, привели к ситуации, когда перед создателями Web-сайтов встает важнейший вопрос - использовать чистый HTML и достигнуть при этом максимальной читаемости и посещаемости, или пользоваться расширениями и нововведениями, в ущерб посещаемости создавать интересные эффекты.

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

Периодически компании производители подают заявку с описанием синтаксиса нового элемента на рассмотрение и принятие его в число стандартных элементов. В то же самое время Консорциум W3C занял выжидательную позицию и не слишком торопится с рассмотрением и принятием новых тэгов. На практике происходит следующее: расширения живут собственной жизнью, одни из них не приживаются и естественным образом покидают список претендентов на стандартизацию (<BGSOUND>, <IMG dynsrc="...">....), вторые наоборот становятся очень популярными (<FRAME>, <HR size="...">, <FONT size="...">, <IMG align="...">....) и в последствии становятся стандартными, третьи же, уже однажды внесенные в стандартный - чистый HTML, становятся нежелательными (<U>, <S>, <BASEFONT>, <STRIKE>, <ISINDEX>, <DIR>, <CENTER>....) т.к. на смену им приняты более эффективные.

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

Создатели страниц, тем не менее, стараются выходить из сложившегося положения путем написания нескольких вариантов сайтов с предоставлением права выбора посетителю, или путем предоставления альтернативного содержимого. Поэтому в правилах хорошего тона - при внедрении в код страницы нестандартного элемента или стандартного, но сравнительно молодого, не поддерживаемого старыми браузерами - стало написание альтернативного содержимого в специальных дескрипторах (<NOSCRIPT>, <NOFRAMES>....)

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

Если Вы, все же с опаской смотрите на расширения и не собираетесь применять их на собственном сайте, то у Вас могут возникнуть сложности с определением, является ли стандартным тот или иной, известный Вам элемент. В этом случае Вам не остается ничего другого, как только обратиться на сайт самого Консорциума W3C [image] http://www.w3.org, где имеется описание официальной спецификации, там описан самый, что ни есть чистый HTML.

Там же на их сервере, по адресам:
http://validator.w3.org/ для HTML и
http://jigsaw.w3.org/css-validator/ для CSS,
Вы сможете в режиме on-line проверить специальной программой Validator правильность кода любой из страниц Вашего сайта с точки зрения Консорциума W3C, для этого необходимо указать ее URL. Справедливости ради надо сказать, что Internet Explorer, например, довольно стойко переносит Ваши многочисленные ошибки, и будет стараться воспроизводить код правильно, чего, увы, не скажешь о браузерах от Netscape. Тем не менее, проверить Ваш код программой Validator не будет лишним, все равно, иногда это бывает полезно даже для того, чтобы, например, правильно определить <!DOCTYPE> для Вашего документа.


Cправочник по созданию Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Web-mastering>>Учет особенностей браузеров

  • Проблема браузеронезависимости
  • Сравнительный анализ
  • Выводы

Проблема браузеронезависимости.

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

Проблема появилась после того, как web-мастера стали подменять истинное предназначение языка и стали использовать его как средство визуальной верстки, подобно различным издательским системам, пользуясь тем, что такое применение языка не воспринимается браузерами как ошибка, а также тем, что большинство пользователей сети просматривают страницы на мониторах своих PC. Особенно рьяно "стараются" на этом поприще различные студии web-дизайна. В ход пускаются любые из доступных свойств HTML, появились не свойственные для HTML термины, как "расползание дизайна" и т.д., появилось даже такое явление как HTML-Art пример (250 kB).

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

К сожалению, проблема браузеронезависимости не дает покоя очень многим web-мастерам, в идеальном случае Ваша страница должна быть оптимизирована для всех существующих браузеров. Сделать это практически невозможно, разумнее всего оптимизировать сайт для просмотра в каком-то одном, а для остальных браузеров отдельные части можно будет представить в альтернативном варианте, не забывая при этом подталкивать инертного пользователя на некоторые встречные подвижки - например указав альтернативную информацию в тэгах <NOSCRIPT> и </NOSCRIPT>.... укажите пользователю на необходимость включения этой функции в свойствах обозревателя или дайте ссылку на место в сети откуда, зачастую бесплатно, можно скачать update.

Сравнительный анализ

На вопрос какой же браузер выбрать в качестве основного для написания и отладки несущего варианта сайта, ответить станет легче, если принять во внимание существующую статистику и некоторые факты. Представьте себе, что даже один и тот же браузер, использующийся для разных платформ, не всегда работает одинаково. Обратимся к статистике, (анализ Российской части сети не является особым исключением из общей тенденции):
Популярность ОС среди пользователей сети
операционная система | популярность ОС в %
Windows'98 | 68,5%
Windows'95 | 12%
Windows'NT | 10%
Windows'2000 | 8%
MacOS | 0,6%
Прочие | 0,5%
Unix | 0,4%

Вывод напрашивается однозначный - абсолютное большинство пользователей сети, в силу ряда причин работают на платформе Windows, их общая численность составляет 98,5 %, против остальных 1,5 %. Такое положение, если не удивляет, то, по крайней мере, значительно упрощает работу.

Как и с платформами, с браузерами дело обстоит не иначе, Internet Explorer от Windows, хотя довольно недавно обозначился как лидер на рынке браузеров, уже достиг такого же абсолютного превосходства.
Популярность браузеров
браузер | популярность | платформы
Internet Explorer v.5.xx | 77% | Win, Mac
Internet Explorer v.4.xx | 12.5% | Win, Mac, Unix
Netscape Navigator v.4.xx | 8% | Win, Mac, Unix
Internet Explorer v.3.xx | 1% | Win, Mac
Прочие | 0.9% |
Netscape Navigator v.3.xx | 0.4% | Win, Mac, Unix
Netscape Navigator v.2.xx | 0.2% | Win, Mac, Unix, OS/2

Так же, тенденция налицо и превосходство Internet Explorer можно называть подавляющим, тому есть масса причин, как, например то, что в связи с предпринятыми мерами отдела маркетинга фирмы Microsoft, их браузер теперь бесплатно входит в комплектацию оперативной системы как составная часть Windows '98.

Однако следующее, что нас сейчас интересует, это то, насколько в браузерах реализована поддержка новых технологий.
Поддержка браузерами под Win интернет-технологий
браузер | frames | i-frames | css | java | java script | dhtml
Internet Explorer v.5.5 | + | + | % | + | + | +
Internet Explorer v.5.0 | + | + | % | + | % | +
Internet Explorer v.4.0 | + | + | % | + | % | +
Internet Explorer v.3.0 | + | + | % | + | % | -
Netscape Navigator v.6.0 | + | + | % | + | + | +
Netscape Navigator v.4.5/4.7 | + | - | % | % | % | +
Netscape Navigator v.4.0 | + | - | % | + | % | +
Netscape Navigator v.3.0 | + | - | - | + | % | -

здесь обозначения символизируют:
+ поддерживает
- не поддерживает
% поддерживает частично
Печально, что неважно дела обстоят с поддержкой CSS, таким удобным и полезным инструментом форматирования страниц, вернее его версии CSS2, и как следствие неполной возможностью использования DHTML.

Выводы

Проанализировав данные, приведенные выше, трудно не согласиться с выводом, что для достижения максимальной браузеронезависимости, необходимо при создании основной части сайта ориентироваться на возможности Internet Explorer v.4.xx, т.к. все последующие его версии являются с ним совместимыми, а для оставшихся пользователей создавать альтернативное содержимое.

Хотя в свое время браузер от Netscape и был наиболее предпочитаемым среди пользователей, а вклад компании в развитие языка HTML трудно переоценить, реалии рынка браузеров таковы, что Internet Explorer является самым популярным на сегодняшний день (более чем 80% ! пользователей). И эта популярность пришла к нему не только потому, что он распространяется бесплатно, а еще и потому, что он действительно удобнее в работе. И самое главное - Internet Explorer давно уже избран как стандарт многими разработчиками программ и дополнительных утилит, что обеспечивает их полную совместимость и интеграцию.

Главными недостатками Internet Explorer являются недостатки свойственные всем продуктам от Microsoft - это проблемы при инсталляции, а также стремление расходовать максимальное количество оперативной памяти компьютера и как следствие потеря в скорости. На фоне этого надо отметить, что Netscape несколько быстрее в работе со скриптами, менее требователен к ресурсам компьютера и не исключено, что следующие его версии будут гораздо удобнее, а интерфейс будет более продуманным. Однако главным его недостатком по-прежнему остается то, что он является платным. При всех его многочисленных недочетах это только усугубляет невыгодность его положения на фоне остальных браузеров, после выхода очередной его версии v 6.01 появились слухи о том, что это последняя его версия.

Но скорее всего в будущем конкуренцию браузеру Internet Explorer будет составлять Opera, т.к. в последнее время наметился некоторый к нему интерес, особенно после того, как вышла пятая его версия - бесплатная, со встроенным download-менеджером и ICQ-клиентом. При этом его борьба за пользователя вряд ли будет легкой, и чтобы выиграть в этой борьбе, создателям следующих версий надо будет сильно удивить мир.


Cправочник по созданию Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Web-mastering>>Организация страниц в узлы, навигация

При создании достаточно больших документов надо помнить о том, что не все из посетителей имеют высокоскоростной доступ в Интернет. У большинства пользователей модемный коннект, где скорость передачи данных 2-3 kB в секунду не считается плохой. Сосчитайте суммарный "вес" Вашего документа и всех размещенных в нем изображении, а также подгружаемых звуков и оцените, как долго он будет грузиться. Большинство потенциальных посетителей прервут загрузку страницы из соображений экономии средств, если она будет грузиться дольше 30-40 секунд.

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

Судите сами, если для оптимальной скорости загрузки размер документа не должен превышать 100-120 килобайт, с учетом включенных графических файлов, то Вы можете разбить материал, например на десять частей размером по 100 килобайт, и это будет рациональнее, нежели заставлять посетителя ждать загрузки одного файла размером 1 мегабайт, что при скорости 2-3 kB в секунду составит около восьми минут.

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

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

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

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


Cправочник по созданию Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Web-mastering>>Тестирование

После того, как Вы закончили создавать сайт, и перед тем как разместить его в сети или записывать CD просмотрите еще раз страницу сами и попросите это сделать друзей и знакомых. Спросите их мнение и Вы наверняка услышите много полезного и объективного. Если у них возникают к Вам вопросы по содержанию и функциональным особенностям сайта, то его необходимо доработать таким образом, чтобы в дальнейшем вопросы не возникали и все было ясно без Ваших устных объяснений. Особенно это касается навигации, а после загрузки сайта на сервер проверьте его еще раз, часто бывает, что именно там возникают непредвиденные "сюрпризы", например с отображением кодировок, регистром букв в названиях файлов, правильным распознаванием URL.

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

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

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

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

Теоретически большинство людей работают с разрешением 800x600, их по некоторым оценкам-53%, хотя практически во всех интернет-кафе, фирмах, и пр. экзотикой считаются мониторы с диагональю 19" и более. Диагональ 17" - теперь уже стандарт, а пользователи на таких мониторах используют разрешение не ниже чем 1024x768, их примерно 38%, а чаще стремятся выжать максимум.

Засеките и проанализируйте время загрузки стартовой страницы, удалите лишние тэги и все комментарии в исходном коде, так как они дают Вашему сайту лишние байты и иногда приводят к некорректной работе некоторых браузеров. В первую очередь это касается тех сайтов, которые создавались при помощи различных редакторов, якобы упрощающих жизнь. Например, браузеры ранних версий не могут распознать многострочные комментарии, а в закрывающем символе комментария " - -> " двойной минус понимается как ошибочный оператор Java Script, также начинающийся с этого символа.

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


Cправочник по созданию Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Web-mastering>>Обратная связь.

В процессе ознакомления с материалами Вашего сайта у посетителей может возникнуть к Вам ряд вопросов по существу освещаемых тем, предложений и просто пожеланий. Это может быть кто угодно - Ваш оппонент предлагающий развернуть дискуссию, клиент Вашей фирмы, который так и не смог разобраться с механизмом оплаты товара или Web-мастер сайта с подобным контентом изъявил желание обменяться с Вами баннерами. Разместите на своем сайте ссылку на адрес электронной почты для обратной связи.
Синтаксис: <A href="mailto:webmaster@domen.ru?Subject=E-mail to Web-master"> E-mail to Web-master. </A >.
В этом случае при клике на ссылку у посетителя запустится программа почтовый клиент, например: Outlook Express в которой автоматически подставится указанный Вами адрес.

Пример: E-mail to Web-master.

Или при помощи картинки:

Синтаксис: <A href="mailto:webmaster@domen.ru?Subject=E-mail to Web-master"> <img src="mail.gif"> </A >

Пример :

А также при помощи формы :

Синтаксис:

<form action="mailto:имя@домен.ru?subject="Comment from Home Page" method="post" enctype="text/plain">
Ваше мнение о cайте:<br>
<SELECT name="мнение">
<OPTION>хорошее </OPTION>
<OPTION>неплохое</OPTION>
<OPTION>так себе </OPTION>
<OPTION>отстой</OPTION>
<OPTION>никакое </OPTION>
</SELECT>
<br> Ваш личный комментарий: <br>
<TEXTAREA type="text" NAME="комментарий" ROWS=5 COLS=50></TEXTAREA> <br>
Ваше имя: <br>
<INPUT type="text" NAME="имя" SIZE="57"> <br>
Электронная почта: <br>
<INPUT type="text" name="e-mail" size="52" maxlength="360"> <br>
<INPUT type="reset" VALUE=Сброс >
<INPUT type=SUBMIT VALUE=Послать>
</FORM>

Пример:
Ваше мнение о cайте:

Ваш личный комментарий:

Ваше имя:

Электронная почта:

Выделите для удобства под сообщения с Вашего сайта отдельный почтовый ящик, чтобы не путать их с остальной почтой и в целях предосторожности - в случае если к Вам на e-mail посыплется SPAM - Вы легко сможете сменить почтовый адрес. Это можно сделать здесь:

http://chat.ru | http://coolmail.to
http://e-mail.ru | http://www.alloymail.com
http://www.az.ru | http://yandex.ru
http://www.forfree.at | http://www.mail.ru
http://www.crosswinds.net | http://www.gnwmail.com
http://www.softhome.net | http://www.rocketmail.com
http://www.bigfoot.com | http://www.mailcity.com
http://www.hotmail.com | http://mail.yahoo.com
http://www.iname.com | http://www.geocities.com

А по этому адресу Вы сможете получить бесплатный почтовый ящик с возможностью получения почты и через Pop3, обычными почтовыми программами.
http://top.one.ru/mailhelp.html

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

Чтобы обзавестись гостевой книгой, сходите сюда:

http://www.guestbook.ru | http://www.guestworld.com
http://www.bravnet.com | http://www.tealnet.com
http://www.glacierweb.com | http://www.dreambook.com
http://www.guestbook.de | http://www.buydomains.com
http://www.freeguestbooks.com | http://www.seeq.com

Для реализации такой формы обратной связи прибегают к помощи CGI скриптов расположенных на сервере и обрабатывающих текст, вводимый посетителем в полях формы и затем отображающих текст сообщения непосредственно на этой странице. По такому же принципу можно организовать пересылку сообщений по указанному E-mail адресу, не прибегая к использованию почтового клиента Outlook Express. Для этого воспользуйтесь бесплатным удобным и легко настраиваемым формоотправителем, который находится здесь:
http://www.webclub.ru/free/sendform


Cправочник по созданию Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Web-mastering>>Обновление содержимого страниц.

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

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

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

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

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

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


Cправочник по созданию Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Web-mastering>>Оптимизация графики используемой на сайте

  • Форматы графики используемой в сети
  • Инструментарий

Форматы графики используемой в сети

Взвесив все ЗА и ПРОТИВ использования на страницах Вашего Web-узла графических изображений Вы, скорее всего, решитесь на её использование. Для работы с изображениями в WWW используют два основных формата: JPEG (Joint Photographic Experts Group - объединенная группа экспертов фотографии) и GIF, (Graphical Interchange Format - графический обменный формат) реже используют специально созданный формат PNG (Portable Network Graphics - переносимая сетевая графика )

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

Например:

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

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

Инструментарий.

Для работы с GIF-изображениями подойдет программа Gif Construction Set с которой можно познакомиться на сайте компании
http://www.mindworkshop.com
или Embelish, с которой можно познакомиться на сайте компании
http://www.dadaware.com
или Ulead GIF Animator с которой можно познакомиться на сайте компании
http://www.ulead.com
Последняя программа, например, позволяет создавать простую анимацию и жать GIF-файлы иногда практически вдвое. Сравните качество и размеры ниже расположенных баннеров:

 | - до оптимизации |  | - после оптимизации
1.666 kB |  | 595 B |

Для работы с JPG-изображениями подойдет программа Ulead Smart Saver Pro с которой можно познакомиться на сайте компании
http://www.ulead.com
а также безусловный лидер в области редактирования изображений, специально улучшенная для создания оптимизированных Web-изображений программа Adobe Photoshop, с которой можно познакомиться на сайте компании
http://www.adobe.com
Программа позволяет варьировать качество изображения, изменяя степень сжатия файлов. Как один из способов оптимизации крупных JPG-изображений можно предложить разрезать файл на мелкие части оптимизировать их по отдельности, а потом собрать в одно целое при помощи таблицы. Секрет метода прост - некоторые участки JPG-изображений с плавными переходами цвета не могут быть оптимизированы без заметного ухудшения качества - их предлагается сжимать не сильно.


Cправочник по созданию Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Web-mastering>>Выбор места для размещения Web-страниц

  • Хостинг
  • На что надо обратить внимание

Хостинг.

Вариантов для размещения Web-страниц на самом деле довольно много. Если Ваш сайт представляет собой коммерческий проект, то лучше всего Вам обзавестись собственным сервером и высокоскоростным выходом в сеть, либо арендовать место у компаний могущих обеспечить Вас всем необходимым. А если это проект скромнее, то тут всё немного проще. Можно найти в сети огромное количество ссылок на free web pages , даже некоторые провайдеры предоставляют своим клиентам бесплатное место под страницу.

http://narod.ru | http://www.az.ru
http://chat.ru | http://www.halyava.ru
http://www.newmail.ru | http://i-connect.ru
http://www.agava.ru | http://www.lgg.ru
http://www.fortunecity.com | http://www.netcity.ru
http://www.freeserwers.com | http://www.hotmail.ru
http://www.geocities.com | http://www.ussr.to
http://www.spree.com | http://www.viaduk.net
http://www.tripod.com | http://home.vibor.ru
http://www.xoom.com | http://windoms.sitek.net
http://www.bizland.com | http://www.intergrad.com
http://www.fsn.net | http://hosting.agava.ru
http://www.crosswinds.net | http://www.dp.ru
http://www.virtualave.net | http://www.artnet.ru/generator
http://www.az.ru | http://www.zk.ru
http://www.tam.ru | http://www.sunday.ru
http://www.shortway.to | http://home.c99.ru
http://webservis.ru

На этом сервере вы получите возможность устанавливать свои собственные скрипты и доступ к ним по ftp
http://www.44.ru/cgi-bin/start.pl

На что надо обратить внимание.

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

  • Отсутствие дискриминации по контенту. Некоторые сервера ставят условия, касающиеся содержимого Вашего сайта.
  • Надежность Web-сервера. Посетите их Web-узел в пиковые часы и убедитесь, что проблем с доступом не возникает.
  • Отсутствие скрытых завуалированных видов оплаты места ввиде всевозможных доплат за различные услуги и рекламы.
  • Техническая поддержка. Предоставят ли Вам возможность общения с администратором сервера, есть ли возможность доступа по протоколу FTP ( File Transfer Protocol ) , и т.д.
  • Объем выделяемого Вам пространства. Обычно это 5-10 мегабайт .
  • Дополнительные возможности. Не будет лишним, если сервер предложит Вам: бесплатную почту, счетчик посещений, гостевую книгу, чат, различные CGI-скрипты и т.д.
  • Какое программное обеспечение установлено на сервере. Например UNIX-сервера чувствительны к регистру букв в названиях файлов, т.е. если у Вас в исходном коде будет стоять ссылка на файл background.gif, а файл будет назван background.Gif или Background.gif, то он не будет визуализирован. Однако у таких серверов более высокая степень защищенности от взломов.
  • Есть ли на сервере автоматическая перекодировка содержимого страниц, в соответствии с пользовательскими настройками браузера. Если таковая имеется, у Вас могут возникнуть проблемы с отображением русских кодировок подробнее.


Cправочник по созданию Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Web-mastering>>Выбор доменного имени и имени сайта

  • Доменная система имен
  • Регистрация доменного имени

Доменная система имен.

В сети каждый компьютер имеет свой уникальный адрес, который может быть представлен как последовательностью четырех целых чисел от 0 до 255, разделенных между собой точкой, так и именем. В Интернете используется многоуровневая так называемая доменная система имен или URL - Universal Resource Locator . Каждый уровень называется доменом. Домены разделяются точками. Чем выше доменный уровень, тем правее он стоит в имени. Обычно домен верхнего уровня обозначает страну, где расположен сервер т.е. ru-Россия, uа-Украина, de-Германия, fr-Франция, а кроме того различные организации com-коммерческие, net-сетевые, org-прочие.
Синтаксис : http :// www . отдел . компания . ru
Например, если в вашей Super company есть отдел маркетинга, а сайт компании лежит на сервере провайдера Best server, то URL отдела маркетинга будет выглядеть так: http :// www . marketing . super_company . best_server . ru
где отдел маркетинга будет иметь домен четвертого уровня, Ваша компания - домен третьего уровня, Ваш провайдер - домен второго уровня, соответственно.

Регистрация доменного имени.

Большинство компаний имеют свой именной домен и даже не зная точно - можно угадать, что если она носит имя InterNic, то скорее всего это будет www.internic.com или www.internic.net, где www означает тип информации. Таким образом если Вы желаете чтобы Ваш сайт можно было быстро найти, то обратитесь в одну из организаций, занимающуюся проверкой и выдачей адресов в сети.

Например :
http://www.internic.net

Или :
http://www.ripn.net/nic
- для Российской зоны ru.

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

Альтернативой регистрации собственного доменного имени может явиться использование хостинга на серверах с хорошо запоминающимся доменом второго уровня. При удачном сочетании с именем Вашего сайта, это в итоге может принести гораздо больше пользы, чем от регистрации собственного домена. Например, очень удачным оказалось название сайта фэн-клуба группы DDT на сервере
http://www.fanat.ru
информативное, легко запоминающееся имя:
http://ddt.fanat.ru
все ясно из названия, вряд ли ему можно подыскать более удачную альтернативу.

Может получиться так, что Вы не захотите менять сервер для хостинга сайта, лишь только ради доменного имени. Это может быть нецелесообразно в силу различных причин - удобство в обслуживании, размер выделяемого под сайт места, наличие дополнительных сервисных возможностей и т.д. однако хорошее имя Вам просто необходимо, прибегните к редиректу. А точнее зарегистрируйте удобное имя на одном из серверов бесплатного хостинга с удобным для Вас именем и расположите там всего лишь одну страницу index.html следующего содержания:

<HTML>
<HEAD>
<META http-equiv="refresh" content="0; url=URL">
</HEAD>
<BODY>
</BODY>
</HTML>
Здесь вместо URL укажите настоящий URL Вашего сайта.


Cправочник по созданию Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Web-mastering>>Создание документа с помощью SSI

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

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

Аналогичного эффекта можно достичь, используя Java Script или CGI-скрипты, однако простота и удобство использования SSI способствуют широкому распространению этой технологии. Это работает следующим образом: при получении запроса на документ, содержащий SSI-директивы, сервер обрабатывает документ, выполняет все директивы, а получившийся документ отсылает клиенту. Для того, чтобы сервер знал о возможном нахождении в коде документа SSI-директив, необходимо его предварительно настроить - т.е. указать те расширения файлов, в которых они могут быть обработаны.

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

Для включения в код документа SSI-директив применяется следующая конструкция, с использованием комментариев:
Синтаксис: <!--#директива = "значение" -->
Нас интересует в данном случае директива include virtual, которая вставляется в то место, где необходимо вставить содержимое указанного файла и принимает значения в виде его URL.

Рассмотрим подробнее процесс на примере:
Для начала создадим файл file1.shtml следующего содержания:

<html>
<head>
<title> FILE1 </title>
</head>
<!--#include virtual="file2.htm" -->
<h1>Тестовая страница 1</h1>
<p>Текст, набранный и сохраненный в файле file1.shtml </p>
<!--#include virtual="file3.htm" -->
</body>
</html>

После чего создадим файлы file2.htm и file3.htm следующего содержания:
Файл file2.htm

<body>
<h2>Тестовая страница 2</h2>
<p>Текст, набранный и сохраненный в файле file2.htm </p>
Файл file3.htm
<h3>Тестовая страница 3</h3>
<p>Текст, набранный и сохраненный в файле file3.htm </p>

Затем все три файла разместим на сервере и получим:
если при этом посетитель просмотрит исходник страницы, то он не увидит файл file1.shtml в том виде, в каком тот лежит на сервере, а прочтет исходник, сгенерированный сервером, согласно директив, в него включенных. Интересной особенностью тут является то, что включаемые отрывки кода могут быть прерваны в любом месте, например, это может быть незаконченная таблица, или тэг вставляющий ссылку. В нашем случае начальный тэг <body> находится в файле file2.htm, а конечный </body> - в файле file1.shtml.


Раскрутка Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Раскрутка>>Что необходимо помнить

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

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

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

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

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

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

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


Раскрутка Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Раскрутка>>Активная реклама

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

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

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

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

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

http://www.holiday.ru/boards | http://www.rudata.ru
http://www.adwin.ru/bbs/ | http://www.do.ru
http://www.direct.spb.ru | http://www.oryol.ru
http://www.markets.ru | http://wall.tms.ru

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


Раскрутка Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Раскрутка>>Обмен посетителями

  • Обмен ссылками
  • Службы баннерообмена

Обмен ссылками

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

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

Баннеры чаще всего имеют один из стандартных размеров: 88x31, 100x100, 120x60, 125x125, 400x40, 468x60, формата GIF, JPG, в текстовом или Flash исполнении. Кроме того, что это красивая картинка, это еще и полезная информация о сайте, на который ведет ссылка, например баннер может иметь имиджевый характер т.е. в первую очередь для раскрутки товарного знака. Если Вы не располагаете программным обеспечением для создания баннеров, то на этих сайтах Вы сможете это сделать:

http://coder.com/creations/banner
http://www.updev.com/banners
http://www.crecon.com/banners.html
http://mediabuilder.com/abm.html

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

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

Службы баннерообмена

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

http://www.rle.ru | http://www.bannerbank.ru
http://banner.ricor.ru | http://www.bannerpoint.ru
http://www.ir.ru | http://www.reclama.net/banners
http://click.ipc.ru | http://www.tree.ru
http://win.copirs.com/banner/default.ru.html | http://www.promote.ru
http://www.reklama.ru | http://www.linkexchange.ru
http://www.flamingo2.ru | http://tx3.design.ru

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

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

Важно знать еще одну особенность этой, так называемой виртуальной валюты, которая заключается в том, что если Вы купите себе за деньги или за показы, например 100 показов своего баннера, то это еще совсем не означает, что Вы обеспечите свой сайт тем же количеством посещений. Чтобы оценить ее эффективность, вычисляется CTR, он определяется отношением числа заходов к Вам на сайт посредством баннера к общему числу показа Вашего баннера. Обычно это не более 2 - 3 процентов, таким образом, чтобы привлечь на сайт те же 100 посетителей, Вам необходимо приобрести примерно 5000 показов.

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

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

Если Вы решитесь на участие в баннерообмене, то по крайней мере постарайтесь извлечь из этого максимальную пользу, участвуя в тематических обменах, т.е. когда в обмене баннерами участвуют сайты с дружественным или сходным контентом. Например, по этому адресу Вы можете зарегистрировать свой сайт для участия в так называемом, тематическом web-кольце. Как правило Вы получаете дополнительную навигацию, в виде текстовых ссылок, для осуществления перехода по сайтам-участникам. Это гораздо более эффективный метод раскрутки сайта, т.к. речь идет не о простом привлечении посетителей, а о росте целевой аудитории.
http://www.webring.ru


Раскрутка Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

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

Наиболее эффективной будет Ваша реклама в самой сети посредством занесения URL Вашего сайта и всяких сведений о нем в различные сетевые WWW-каталоги, указатели, списки, рекламные службы, рейтинговые таблицы и т.д. На самом деле строго их классифицировать довольно трудно так, как все чаще и чаще они начинают предоставлять различные услуги и выполнять функции ранее им не свойственные. Объединяет их то, что все они представляют из себя по-разному организованные списки URL-адресов различных Web-сайтов и ссылок на них сгруппированных по какому-либо признаку.

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

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

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

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

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

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

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


Раскрутка Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Раскрутка>>Оптимизация для поиска

  • Поисковые роботы
  • Релевантность документов
  • Проблемы индексации
  • Особенности индексации

Поисковые роботы

Регистрируя свой сайт Вы иногда будете узнавать о том, что он в том или ином каталоге уже есть - не удивляйтесь. На таких серверах имеются программы - поисковые роботы, они производят поиск информации в тысячах Web-узлах, еще их часто называют Web-spiders - пауки. Для того чтобы иметь всю необходимую информацию о той или иной странице поисковому роботу совсем необязательно загружать ее - ему достаточно той ее части, которая заключена в тэги служебного пользования - <HEAD> и </HEAD> .

Пауки считывают информацию, прописанную в META-тэгах и часто проверяют соответствие этой информации действительности, т.е. чем чаще на сайте встречаются слова, указанные как keywords-ключевые, тем больше вероятность, что робот их не проигнорирует. Также поисковые сервера проверяют ссылки на Вашей странице и если какая-то из них почему-то не работает, то часть Вашего сайта может остаться не проиндексированной. Особое внимание пауки уделяют той информации, которая помещена в тэги: <TITLE> и </TITLE>, <Hn> и </Hn>, <B> и </B>, <... alt=...> и др.

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

Релевантность документов

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

Поисковые системы стараются максимально увеличить результативность поиска, обеспечить посетителя ссылками на наиболее подходящие ресурсы сети, поэтому не все из них довольствуются МЕТА-поиском. Наиболее удачные поисковые системы работают напрямую с текстом документов, определяя их релевантность, которая зависит от нескольких условий:

  • количество искомых слов в документе - чем чаще на сайте встречаются ключевые слова, тем больше вероятность того, что посетитель найдет именно ту информацию, которую искал.
  • место расположения искомых слов в документе - искомые ключевые слова которые помещены в тэги: <TITLE> и </TITLE>, <Hn> и </Hn>, а также выделены тэгами <B> и </B>, <... alt=...> и др. будут иметь более высокий приоритет, чем те же самые слова, расположенные в простом тексте.
  • плотность расположения искомых слов в документе - чем ближе ключевые слова в тексте будут располагаться друг от друга, тем выше их релевантность.

Проблемы индексации

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

  • фреймы - в настоящий момент большинство поисковиков не умеют правильно индексировать документы, имеющие фреймовую структуру. Поэтому владельцам таких сайтов необходимо правильно преподнести необходимую информацию в тэгах <NOFRAME> и </NOFRAME>, а также правильно подготовить <TITLE> и </TITLE> фреймсета, снабдить фреймы дублирующей альтернативной навигацией и пр.
  • спам - иногда неопытные web-мастера пытаются применить на своем сайте различные ухищрения, повышающие релевантность, например входные страницы, оптимизированные под различные ключевые слова, еще их называют - doorway, или вставляют в текст содержимое блока keywords и выбирают для него цвет шрифта совпадающий с цветом фона и пр. Все эти уловки, несомненно способны ввести в заблуждение поисковую систему, однако особо рьяные злоупотребления выявляются и расцениваются как спам и, как следствие, игнорируются.
  • настройки - при обращении к серверу робот проверяет наличие файла robots.txt в его корневой директории, в котором установлены правила индексирования тех или иных документов текущего узла, в META-тэгах документа также могут быть установлены правила индексирования, от того как правильно они отредактированы будет зависеть результат. А так же успешность индексации может зависеть от правильности выдачи сервером кодировок документа и дат последних модификаций файлов. Кроме того некоторые поисковики могут иметь ограничения на количество индексируемых документов с одного домена, либо иметь ограничения на зоны, например индексация проводится только в .com, .org или .net и не проводится в зоне .ru
  • скрипты - достаточно проблемными для индексирования являются также документы, динамически генерирующиеся при помощи скриптов, содержащие редирект на другие URL, и использующие динамические ссылки, когда вместо обычной конструкции <A href="URL"> текст </A > используется конструкция JavaScript, например, onClick='window.open("file.html")'

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

Ниже приведен список наиболее популярных поисковиков:

http://www.rambler.ru | http://www.lycos.ru
http://www.aport.ru | http://www.google.ru
http://www.yandex.ru | http://www.yahoo.com

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

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

Особенности индексации

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

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

Ниже приведен список страниц с описанием правил наиболее популярных поисковиков:

http://www.rambler.ru/doc/recommendations.shtml
http://www.aport.ru/webmast.htm#index
http://www.yandex.ru/info/webmaster.html
http://www.google.com/intl/ru/webmasters/
http://www.lycos.ru/service/addsite_new.html


Раскрутка Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Раскрутка>>Службы автодобавления

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

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

http://1ps.ru
http://www.russiansubmitter.ru
http://www.addurl.ru
http://www.too.com.ua/submit
http://www.webservis.ru/registr.phtml
http://submiter.ru
http://www.123launch.com/
http://hbb.nu/freesubmit/
http://www.addme.com/

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

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


Раскрутка Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Раскрутка>>Проведение и анализ рекламной кампании

  • Анализ динамики роста
  • Тактика рекламной кампании

Анализ динамики роста

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

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

Прирост числа посетителей.

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

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

Тактика рекламной кампании

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

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

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

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

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

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

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

http://www.freecounter.com
http://beseen.com/beseen/free/counters.html
http://www.worldwidemart.com/scripts/counter.shtml
http://www.icount.com
http://www.fastcounter.com

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


Раскрутка Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Раскрутка>>Прочие советы

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

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

Чтобы обзавестись гостевой книгой - сходите сюда:

http://www.guestbook.ru | http://www.guestworld.com
http://www.bravnet.com | http://www.tealnet.com
http://www.glacierweb.com | http://www.dreambook.com
http://www.guestbook.de | http://www.webpromote.net/guestbooks
http://www.freeguestbooks.com | http://www.guestpage.com

Чтобы обзавестись чатом - сходите сюда:

http://www.parachat.com | http://www.starvoice.com/chatroom/free/
http://www.xoom.com/chat/ | http://www.sneakerchat.com
http://www.chatplanet.com/license.html | http://www.beseen.com/chat/freechat.html

Доски объявлений можно получить здесь:

http://www.cgiforme.com | http://www.beseen.com
http://www.bravenet.com | http://www.insidetheweb.com/messageboard/
http://www.boardhost.com |

А здесь Вы сможете получить свой аукцион:
http://www.с99.ru

Получите свой форум:
http://forum.list.ru/
http://webboard.land.ru/reg.php
http://www.webservis.ru/registr.phtml
http://discuss.cliver.ru:8080/
http://www.free.uz/

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

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

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

Предлагайте посетителям занести URL-адрес Вашего сайта в папку избранное пример 1 [image] или пример 2 и переслать [image] или переслать 2 ссылку знакомым, а также во всех ссылках на другие сайты пропишите открытие в новом окне - иначе посетитель, уйдя от Вас, заблудится и уже вернуться ему будет сложнее.
Например:
<A HREF="URL" target="_blank">Ссылка</A>

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


Раскрутка Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Раскрутка>>Возможные ошибки

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

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

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

Другие могут долго описывать достоинства своей команды в разделе about, а на простое разъяснение для клиента, для кого именно предназначается их товар, слов, видимо, не хватает. Или все прекрасно и понятно, а нет четких инструкций относительно того, как покупатель должен действовать в случае, если он захотел купить товар, проще говоря - какие кнопки нажимать. Мы же не можем требовать от каждого посетителя досконального знания всех особенностей сети, не обязан он знать заранее без всякого пояснения, что изображение корзинки в углу экрана - это то место, где он может предварительно увидеть перечень уже заказанных им товаров.

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

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

На некоторых сайтах, можно встретить интересное решение проблем посетителей - обычный чат перенастроенный как комната вопросов к администратору узла в on-line режиме. Когда посетитель приходит на такой сайт, он видит специальную иконку-индикатор во включеном, или в отключеном состоянии, по которой можно кликнуть и задать вопрос. Воспользуйтесь этой ссылкой, чтобы разместить у себя на сайте подобный чат для обратной связи.
http://www.feedbackchat.com/download.htm
Сделайте все для того, чтобы посетителям было удобно и приятно посещать Ваш сайт и они совершат покупки.


Форма-генератор МЕТА-тэгов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Раскрутка>>META-генератор

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

Название Вашего сайта:
Напишите название, например: Справочник HTML для начинающих с примерами .

Автор страницы:
Укажите имя или сетевой ник автора страницы:

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

Управление индекасцией Вашего сайта поисковыми роботами:
Выберите один из предлагаемых вариантов:

* Описание Вашего сайта:
Краткое описание, максимум - 150 символов.

Управление индексацией страницы поисковыми роботами задает частоту повторного индексирования:
Выберите один из предлагаемых вариантов.

Генератор страницы:
Напишите название программы, при помощи которой Вы писали исходный код, например: MS Notepad

Владелец страницы:
Укажите имя физического или юридического лица, которому принадлежат права на эту страницу, например: Super Company Ltd.

Автоматическая перезагрузка или пересылка на другой сайт:
Укажите длительность задержки в секундах (длительные задержки не желательны) и URL документа.
http://

Дата устаревания информации:
Укажите дату, когда прекращается подгрузка документа из кэша и подается сетевой запрос. Например: Tue, 20 Aug 1996 14:25:27 GMT

Адрес электронной почты для отправки сообщений:
Укажите e-mail : имя@адрес.ru

Кодировка страницы:
Укажите кодировку в которой написан текст на Вашем сайте, например: windows-1251

Контроль за кэшированием:
Выберите способ кэширования Вашего документа.

Способ открытия окон:
Выберите один из предложенных вариантов.

Выделите этот фрагмент исходного кода и вставте между
(<head> .... </head>) Вашей страницы .


Рeгистрация Web-сайта в каталогах.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Раскрутка>>Регистратура

  • Форма для регистрации
  • Особенности регистрации
  • Сводная таблица каталогов

Форма для регистрации

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

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

Название Вашего сайта:
Напишите название, например : Справочник HTML для начинающих с примерами.

Автор страницы (редко):
Укажите имя или сетевой ник автора страницы :

URL Вашего сайта:
Укажите URL страницы :

Регион Вашего сайта (редко):
Укажите страну :

Ваш e-mail:
Укажите e-mail для контакта с автором страницы :

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

Здесь напишите список ключевых слов, для поиска сайта через запятую.

Краткое описание сайта:
Здесь опишите Ваш сайт - это описание посетитель увидит в каталоге рядом с именем и URL.

Особенности регистрации

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

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

Размещайте у себя на сайте только те баннеры, которые являются одновременно еще и счетчиком посещений и, соответственно, влияют на Ваш рейтинг и приводят посетителей. Иногда администратор бывает против того, чтобы Вы изменяли предоставленный код, особенно что касается параметра target="_top" и alt="...". Если же на это явно не указывается, то сделайте следующее:

  • Оптимизируйте изображения gif и храните их у себя, например, в папке banners это сократит время загрузки, а также исключит неприятные случаи, когда портится весь дизайн из-за того, что некоторые баннеры не загрузились. Это не касается баннеров-счетчиков, тут Вы бессильны, разве только можете послать письмо администратору с просьбой оптимизировать их кнопку.
    Пример: <IMG src=" Ваш URL/banners/super_katalog.gif">
  • Обязательно последите, чтобы код баннерной кнопки содержал параметры, указывающие ее размеры, иначе, если изображение будет недоступным, а содержимое alt="..." будет достаточно длинным, расползется весь Ваш дизайн.
  • В код ссылки вставьте target="_blank" это позволит Вам надеяться, что посетитель, кликнув на баннере не уйдет с сайта совсем, так как сайт, куда ведет ссылка, откроется в новом окне.
  • Удалите из кода абсолютно никчемное Вам alt="...".
  • Если код представляет из себя скрипт, то обязательно в нем будет присутствовать альтернативный код для тех, у кого скрипты отключены или не поддерживаются - выберите что-либо одно, а остальное удалите.

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

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

По этому адресу Вы можете ознакомиться с интересными статистическими показателями эффективности тех, или иных рейтингов и каталогов
http://top.one.ru/grtraf.html

Сводная таблица каталогов

 | каталог | рейтинг | статистика | поиск | подписка
Каталог Золотых Ссылок | + | - | - | + | +
Собрание ссылок | + | + | - | + | +
Каталог-портал ссылок от Хемуля. | + | - | - | + | +
Our Site Is Listed at WWW.RU | + | - | - | + | -
Информационная Деловая Сеть | + | + | - | + | +
 | + | + | + | + | +
 | + | - | - | + | +
hi | + | + | - | + | -
 | + | - | - | - | +
 | + | + | - | + | -
 | + | - | - | - | -
 | + | + | + | + | -
 | + | - | - | + | -
 | + | - | - | - | -
 | + | + | + | + | -
 | + | + | - | + | +
 | + | + | - | + | -
 | + | - | - | + | -
 | + | + | - | - | -
 | + | + | - | + | -
 | + | + | - | + | +
 | + | + | - | + | +
 | + | - | - | - | -
 | + | + | - | + | -
SUPERTOP | + | + | + | - | -
 | + | + | + | + | +
 | + | + | + | + | -
 | + | - | - | + | +
 | + | + | - | + | -
 | + | - | - | + | +
 | + | - | - | + | -
 | + | - | - | + | -
 | + | - | - | + | +
 | + | + | + | + | -
 | + | - | - | + | -
 | + | - | - | - | +
 | + | - | - | - | -
 | + | + | - | + | +
 | + | + | - | + | -
 | + | - | - | - | -
 | + | - | - | + | +
 | + | - | - | + | +
 | + | - | - | + | -
 | + | - | - | + | -
 | + | - | - | + | -
 | + | + | - | + | -
 | + | - | - | + | -
 | + | - | - | + | -
 | + | + | - | + | +
 | + | + | + | + | -
 | + | + | + | + | -
 | + | - | - | + | -


Раскрутка Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Раскрутка>>Статистика

  • Требования к статистике
  • Правильный выбор
  • Погрешности статистики

Требования к статистике

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

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

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

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

На сегодняшний момент в области статистики и сопутствующих сервисных услуг наметилось явное лидерство двух систем:
http://world1000.com/
http://www.spylog.ru/

SpyLOG хочется выделить отдельно, т.к. это особенный случай и до недавнего времени о нем еще никто не знал. До его появления в российской части сети, большинство отдавало предпочтение Rambler, качество статистики которого, хотя и удовлетворяло любителей, профессионалов устраивало не в полной мере. Буквально в течение одного года ситуация изменилась кардинально, появившись в конце 1999 года, SpyLOG уже в 2000 году стал лидером в области статистики де-факто. Объясняется это очень просто, SpyLOG поражает качеством услуг и их числом (более 600! видов статистики - от базовых отчетов до профессиональной аналитики).

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

Не менее полезным и интересным, чем индивидуальная статистика, является новый проект SpyLOG под названием "Глобальная статистика", который проводит аналитические исследования российской части сети. Эти масштабные исследования предоставляют хорошую возможность отслеживать интересные тенденции, точное знание о которых необходимо как в бизнесе, так и в сайтостроении. На данный момент счетчики системы установлены примерно на трети ресурсов Рунета, что само по себе говорит уже о многом.

Кроме платного пакета услуг для профессионалов, SpyLOG предоставляет бесплатный сервис на довольно высоком уровне, пользователем которого можно стать, заполнив форму:
http://stats.spylog.ru/add.phtml

К возможности получения качественной статистики приятно добавляется широкий выбор вариантов кнопок, практически под любой дизайн, а "изюминкой" здесь будет интересное новшество, которое называется SpyLOG Informer. Он представляет собой небольшой Java Applet в виде бегущей строки, со скоростью загрузки не более 2-3 секунд, показывающий данные в течение всего времени присутствия на сайте посетителя.
http://stats.spylog.ru/informer1.phtml

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

Погрешности статистики

Ни один из статистических сервисов (SpyLOG - не исключение), не сможет предоставить Вам абсолютно точную и достоверную информацию о Ваших посетителях. Обусловлено это тем, что работа по идентификации пользователей построена на определении его IP-адреса, использовании механизма cookies, а также некоторых особенностей данного PC: количество цветов, разрешение, версия браузера, ОС, языковые настройки и т.д. Как Вы сами понимаете, ни один из этих параметров не может считаться постоянным настолько, чтобы служить полноценной меткой пользователя.

Любая из настроек монитора и системы может быть изменена, определение IP-адреса при использовании прокси-сервера, или dial-up подключения становится невозможным, cookies периодически могут удаляться, или могут быть отключены вовсе, наконец, одним и тем же PC могут пользоваться многие пользователи. Погрешности в работе со статистикой неизбежность, поэтому их необходимо учитывать при составлении отчетов и аналитических выводов.

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

Где еще можно, при необходимости, получить статистику для Вашего сайта:
http://top.list.ru:8005/
http://www.count.ru/
http://top.one.ru/stats.html
http://www.rambler.ru/


Учeбник HTML, бесплатные программы Web-мастеру.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Полезности>>Текстовые редакторы

Bred 2 v.2.1.8 (70 kb) free
Home: http://www.astonshell.com/rus/
E-mail: gladiators@mail.com

Заменитель Notepad и HTML-pедактоp для Windows 9x/NT4. Oн будет полезен любому пользователю или программисту. Работа с OEM (MsDos,866) текстами, непосредственно или с перекодировкой. Поддержка KOI8 без перекодировки, специально для HTML-дизайна. Нет лимита текста (у блокнота - меньше 64К). Конвертирование текстов. Таблица ASCII. Автодетект кодировок. Панель инструментов. Печать и предварительный просмотр. Выравнивание текста. Перенос текста мышкой, прокрутка колесом мыши. Подсветка HTML. Кнопка "Выполнить". И многое другое.

Вега (7 kb) free
Home: http://skimsoft.webjump.com/vega.htm
E-mail: ks@atrus.ru

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

Текстовик 2.6 (335 kb) free
Home: http://slaviksg.narod.ru
E-mail: slaviksg@tula.net

Легковесный заменитель текстового редактора Notepad. Умеет открывать текстовые файлы любого размера, понимает кодировку DOS. По желанию: сворачивается в SysTray, закрывается по Esc, немного озвучен. Легко и без инсталляции встраивается в систему, подменяя Notepad.

SNK HTMLPad (531 kb) free
Home: http://www.snkey.net/products
E-mail: mail@snkey.net

Лучшая замена Notepad-у для тех, кто работает с HTML. Особенно под Windows NT!

SNK LightPad (531 kb) free
Home: http://www.snkey.net/products
E-mail: mail@snkey.net

Лучшая замена HTMLPad-у!

HTMLnot (128 kb) free
Home: http://www.htmlnot.hotbox.ru/
E-mail: htmlnot@hotbox.ru

Для тех кто считает notepad.exe лучшим HTML-редактором выпущена программа HTML notepad, которая является усовершенствованным вариантом Notepad. Работает с расширениями htm, html, запоминает настройки (в т.ч. текущий каталог), возможность одним нажатием кнопки посмотреть результат, добавлены горячие клавиши для таких часто используемых клавиш Save, Save as

ТрансЛит'ер (200 kb) free
Home: http://gospel.jeo.ru/
E-mail: gospel@jeo.ru

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


Учeбник HTML, бесплатные программы Web-мастеру.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Полезности>>Специальные редакторы

HTML Force 2000 v1.9. (640 kb) free
Home: http://hf2k.newmail.ru/download.html
E-mail: maxim@cnit.albertina.ru

HTML-редактор. Вот некоторые из его возможностей: раскраска тегов, поддержка макросов, поддержка различных кодовых таблиц: DOS, WIN, ISO, MAC, KOI. Панель с файлами ("Проводник"), интерфейс как у MS Office 2000 и многое другое - посмотрите, не пожалеете. Очень маленький и быстрый.

Macro HTML (1304 kb) free
Home: http://www.agros.ru/mhtmlr/index.php3?page=download.html
E-mail: alk@penza.net

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

HTML Generator (1,4 Mb) free
Home: http://matveevm.saxen.net/hgen
E-mail: matveevm@mail.ru

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

SimpleHTML (2347 kb) free
Home: http://www.futuretrendsoft.com/download.html
E-mail: support@futuretrendsoft.com

Простой, но мощный редактор HTML. Создан для тех, кто любит редактировать HTML в NotePad. Содержит всё необходимое, при этом быстр и прост.

MD PicList GENERATOR (14 kb) free
Home: http://www.chat.ru/~muntanion/
E-mail: partyzan@iname.ru

Программа предназначена для быстрого создания HTML страниц содержащих графику.

HTMLCoolEdit (447 kb) free
Home: http://www.madra.dp.ua/cooledit/index.html#l1
E-mail: cooledit@mail.ru

HTMLCoolEdit - это теговый HTML-редактор с исходниками (Delphi5), позволяющий работать над текстом в стиле 1st Page 2000, HomeSite, AceExpert и др. (просмотр результата в подключаемом MSIE4+), а также содержащий множество, довольно-таки приятных для Вас, возможностей.

HTMLPP (21 kb) free
Home: http://drcb.chat.ru/HTMLPP.html
E-mail: drcb@mail.ru

Программа обработки HTML файлов. В основном используется для создания статических страничек. Функционально подобна препроцессору в языке C/C++. Может комбинировать текст из разных файлов, работает с макросами, оптимизирует HTML-текст, убирает лишнее, перекодирует русские буквы. Возможна работа в пакетном режиме. Можно управлять из командной строки. Соответственно можно использовать как встроенный модуль в разные файловые менеджеры или текстовые редакторы.


Учeбник HTML, бесплатные программы Web-мастеру.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Полезности>>Перекодировщики

HTML Decoder 1.1 (12 kb) free
Home: http://advatt.chat.ru/h.htm
E-mail: advatt@chat.ru

Производит перекодировку WIN в KOI8-R, с заменой символов только национальной раскладки клавиатуры. Параметр "charset" не изменяется.

Recoder2 (370 kb) free
Home: http://victors.pp.ru/recoder
E-mail: me@victors.pp.ru

Программа перекодировки для Web-мастеров. Обрабатывает все файлы в каталоге и/или вложенные каталоги. Понимает основные типы кодировок кириллицы, перекодирует форматы строк. Может сохранять резервную копию или перекодировать в другой каталог с сохранением "дерева".

Recod (6 kb) free
Home: http://kamnev.virtualave.net/recod.htm
E-mail: nkamnev@yahoo.com

Recod - простая программа перекодирующая файлы гипертекста с русскими буквами в виде их цифровых кодов в обычные кириллические символы. Такие файлы образуются при экспорте, например, из Pagemaker в HTML. При этом величина их становится просто огромной (размер файла увеличивается примерно раз в 5). Использование программы Recod обычно для подобного типа программ использующих командную строку.

Translit To Cyrillic (1144 kb) free
Home: http://www.luftsoft.de
E-mail: info@luftsoft.de

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

LayoutFix 1.3 (160 kb) free
Home: http://www.softcomplete.com
E-mail: office@softcomplete.com

Набирая текст Вы забыли переключить раскладку клавиатуры? Что делать? Набирать заново? Нет! Помечаем текст и нажимаем Ctrl-BackSpace. Наслаждаемся результатом.

Convhtml (200 kb) free
Home: http://www.chat.ru/~sapopov/
E-mail: spopov@usinsk.ru

Конвертация HTML-страниц (файлы целого каталога): Windows - Koi8-r (Win-95/98)

MD Translator (170 kb) free
Home: http://www.chat.ru/~muntanion/
E-mail: partyzan@iname.ru

Программа предназначена для быстрой конвертации латинского шрифта в русский

EN-RU (13,4 kb) free
Home: http://borisbn.narod.ru/index.html?en-ru
E-mail: borisbn@hotmail.com

Программа EN-RU конвертирует clipboard из русского текста, набранного в английской кодировке, в нормальный русский текст и наоборот. Согласитесь, часто бывает, что Вы набираете текст, не глядя на экран. А также часто бывает, что Вы забываете включить нужную кодировку.

ТрансЛит'ер (200 kb) free
Home: http://gospel.jeo.ru/
E-mail: gospel@jeo.ru

Вам случалось получать по e-mail письма с текстом типа "Celuju krepko..."? Это означает, что ваш адресат не имеет возможности использовать русский шрифт. А в английском Вы не сильны... Что же делать? Скачайте программу ТрансЛит'ер! Она без проблем переведет русский текст в транслит (записанный латинскими буквами) и обратно. Кроме того, ей можно пользоваться как обычным текстовым редактором.


Учeбник HTML, бесплатные программы Web-мастеру.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Полезности>>Работа с графикой и цветом

Palette Color Machine (79 kb) free
Home: http://home.comset.net/wesik/palette/palette.htm
E-mail: wesik@comset.net

Программа подбора цветов для HTML: она помогает создавать BODY tag цветовой схемы. В отличие от известных программ, позволяет выбрать желаемый цвет из полной палитры цветов изображенной на экране. А также перебором файлов jpg и gif подобрать текстуру для заполнения фона.

Светик (168 kb) free
Home: http://www.farpost.com/vit/union/svetik.htm
E-mail: visign@mail.ru

Инструмент Web-дизайнера - утилита подбора цветового кода. Возможности: выбор цвета, получение кода в шестнадцатеричной (hex) и десятичной (dec) системах. Основное назначение - получение цветового кода для элементов оформления Web-страниц.

Pixie (63 kb) free
Home: http://www.e.com.kg/soft.html
E-mail: siber@email.kg

Простая программа, специально созданная для Web-дизайнеров и художников. Она следит за перемещением курсора мышки и показывает цвет точки, на которую он указывает. Цвет показывается сразу во всех наиболее часто используемых форматах: hex, HTML, RGB, CMYK и HSV. Pixie так же дополнительно имеет функцию увеличения любой части экрана и имеет встроенный микшер для компоновки собственных цветов. Достаточно удобно, нет никакой необходимости возиться со screen capture и Pthotoshop'ом для того что бы определить понравившийся вам цвет на изображении.

HexColor (4 kb) free
Home: http://gerasoft.virtualave.net/hexcolor.html
E-mail: hexcolor@gerasoft.com

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

LeVeL BBS HTML Gallery Maker (1300 kb) free
Home: http://level.newmail.ru/gm/
E-mail: LeVeL_BBS@chat.ru

Программа работает с: JPEG, GIF, BMP, TGA, TIFF, PIC, PNG и др. Формат выходных файлов-превьювов (thumbnails): JPEG. 100%-настраиваемый процесс создания "Table" HTML-страниц из HTML-фрагментов. Удобная система формирования имен графических файлов и файлов-превьювов.... и многое, многое другое.

Bmp to Jpg (239 kb) free
Home: http://www.htmlnot.hotbox.ru/
E-mail: htmlnot@hotbox.ru

Данная программа позволяет конвертировать bmp в jpg с различными коэффициентами сжатия, что позволяет найти оптимальное соотношение между качеством и размером файла.

ColorGet 1.0.1 (251 kb) free
Home: http://datasoftlab.narod.ru/
E-mail: datasoftlab@narod.ru

Утилита для взятия цвета точки с десктопа. Полезна для совместного использования с программами Dreamweaver, Xara, Xara3D.

Coloriser (157 kb) free
Home: http://aclab2.chat.ru/coloriser/coloriser.html
E-mail: aclab@zmail.ru

Программа Coloriser предназначена для компьютерного подбора цвета. Выбираете цвет фона и текста, смотрите, как они смотрятся друг перед другом. Одновременно показывается два варианта обозначения цвета - в виде HEX или RGB. Полный список цветовых констант, а именно наименований цветов с их цифровым обозначением. Сохраняется выбранный цвет в HEX-формате в буфер обмена. Затем удобно вставлять в редактируемую Web-страничку или программу...

Html Color maker (120 kb) free
Home: http://glani.8k.com/
E-mail: glani@mail.ru

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

Подбор HTML цветов (108 kb) free
Home: http://gospel.jeo.ru/
E-mail: gospel@jeo.ru

Подбираются: цвет фона, текста, ссылки и ссылки с наведенным на нее курсором. Результаты можно увидеть тут же в специальном контрольном окне. Коды выбранных цветов отображаются в формате #RRGGBB.

Color Set v.2.3 (330 kb) free
Home: http://webtools.arisesoft.com/colorset
E-mail: combocontrol@iname.com

Удобная утилита для подбора цветовой гаммы Web-сайта. Позволяет подбирать цвета таблиц, фона страницы и текста с использованием спектральной или "безопасной" для браузеров палитры. Полноэкранный просмотр цвета, HEX-RGB-HSB цветовое преобразование, сохранение цветовых схем и другие функции.


Учeбник HTML, бесплатные программы Web-мастеру.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Полезности>>Рекламные, регистраторы

WEBрегистратор (350 kb) free
Home: http://gospel.jeo.ru/
E-mail: gospel@jeo.ru

Мало создать сайт - надо сообщить о его «рождении» различным поисковым системам и каталогам ссылок. И Web-регистратор [manual] поможет Вам в этом. Программа позволяет создавать и сохранять описания сайтов, переходить в соответствующие регистрационные разделы различных каталогов, облегчает заполнение регистрационных форм и ведение статистики размещений.

WebHit 1.0 (153 kb) free
Home: http://www.univer.omsk.su/~cherv/#works
E-mail: cherv@univer.omsk.su

Программа подсчета рейтинга Web-страниц, пользующихся счетчиком посетителей The Counter for Windows NT/95 Version 2.2.

Помощник заполнения форм (819 kb) free
Home: http://homesoft.agava.ru/qis.htm
E-mail: pavel.vk@mtu-net.ru

Помните, сколько раз приходилось заполнять веб-формы, которые содержат одни и те же вопросы? Эта программа сильно облегчит Вам жизнь: Вы введете ответы на общие вопросы один раз, а затем, когда понадобится заполнить какую-нибудь анкету, просто щелкните по значку в tray'е и выберите нужный ответ, который будет помещен с clipboard. Программа просто необходима любому веб-серферу.

Good Utilites For Web-master (2700 kb) free
Home: http://progispirina.euro.ru/gufwm.htm
E-mail: spirinalexey@hotmail.ru

Программа Good Utilites For Web-master позволяет Вам: создать голосование, подобрать цвет фона и текста, зарегистрировать сайт в поисковых машинах, создать кнопки, которые меняют свой цвет при наведении и нажатии, создать фотоальбом, производить перекодировку, замену имен файлов, производить замену текста сразу в нескольких файлах.

Promoter ver.1.1 (809 kb) free
Home: http://hlamovnik.narod.ru/Programs.htm
E-mail: Gyrman@TechEMail.com

Эта программа написана для тех, кому приходится часто и много размещать различные объявления на досках.


Учeбник HTML, бесплатные программы Web-мастеру.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Полезности>>Генераторы (META, TABLE, MAP, CSS, ...)

GeoHTML 2.1 (1237 kb) free
Home: http://www.fegi.ru/geohtml/indexr.htm
E-mail: geohtml@mail.ru

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

Редактор МЕТА тегов (305 kb) free
Home: http://www.sipiko.souz.sebastopol.ua/metaedit.htm
E-mail: sipiko@souz.sebastopol.ua

Предназначен для просмотра, редактирования и внесения новых МЕТА-тегов в файлы формата htm, html. Сам выбирает из файла МЕТА-теги и вносит их в соответствующие им поля в окне программы. Остается только их редактировать, что благодаря продуманности программы очень просто. Позволяет генерировать ключевые слова страниц сайта, и если надо, программа корректно их вставит в файл. Вам же остается только сохранить его. Есть файл краткой справки по описанию пользования программой

ActiveMenu HTML Wizard v1.2 (400 kb) free
Home: http://dreams3d.agava.ru/progs.htm
E-mail: advertising@Dreams3D.agava.ru

Программа-генератор активных меню для Вашего Web-сайта. Применяется для создания активных (выделяющихся при наведении мыши) меню по заданным картинкам. Используется DHTML и JavaScript.

COOL MENU (115 kb) free
Home: http://dreams3d.agava.ru/progs.htm
E-mail: advertising@Dreams3D.agava.ru

Программа-редактор активных меню для Вашего Web-сайта. Всего два шага настроек и Вы получите самое лучшее меню навигации для своей web-странички: оно будет всегда на виду, но никогда не будет мешать. Оно будет активным и настраиваемым, именно таким, как Вы захотите. Как это возможно? Яркий пример - баннер RLE STROLL. Используется JavaScript. Никакой регистрации!

FlashFire ver.3 (809 kb) free
Home: http://hlamovnik.narod.ru/Programs.htm
E-mail: Gyrman@TechEMail.com

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

CSS Creator (230 kb) free
Home: http://css.newmail.ru/
E-mail: poltava@olvs.miee.ru

CSS-Creator - это программа предназначена для создания файлов стилей (Cascading Style Sheets - css) для Web-страниц. Это программа прежде всего предназначена для авторов страниц. Простой и понятный интерфейс позволяет работать с программой практически без знания CSS. Для каждого настраиваемого параметра в программе имеется всплывающая подсказка, которая объясняет, за что данный параметр отвечает. Для работы не требуется ни каких дополнительных программ. Инсталляции нет.

Makeindex (339 kb) free
Home: http://www.hallo.ru/makeindex/
E-mail: sergey@telecominfo.ru

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


Учeбник HTML, бесплатные программы Web-мастеру.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Полезности>>Клиенты FTP

R_FTP, version 0.98 (328 kb) free
Home: http://www.httpcity.com/roma/
E-mail: roma@mail.rb.ru

Небольшой FTP-клиент, простой и понятный интерфейс, по функциям аналогичен CuteFTP. Работает с группами файлов. Работает с группами каталогов и подкаталогов. Поддержка Drag&Drop и DblClick. Возможность докачки и продолжения закачки. Поддержка Proxy.

FTP Server (1.8 Mb) free
Home: http://www.chat.ru/~netsoft/programs/
E-mail: netsoft@vesta.botik.ru

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

FTP - Commander 4.01 (230 kb) free
Home: http://www.vista.ru/1inter.htm
E-mail: vista@aha.ru

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

FTP Loader 1.0. (272 kb) free
Home: http://www.kulichki.com/igorfil/prog.htm
E-mail: igorfil@kulichki.com

Дополнительная функция для IFAlbum 3.0+, AddBanner 2.0+ и IFMAlbum 2.0.. Позволяет осуществлять загрузку сайта на сервер по FTP протоколу (работают и другие FTP команды). Файл "FTPLoad.dll" поместите в каталог с программой, которая будет использовать эту функцию.

SNK VF FTP (531 kb) free
Home: http://www.snkey.net/products
E-mail: mail@snkey.net

SNK VF FTP (от "fast, friendly & free file frogger"). Простая в использовании программа, позволяющая работать с FTP. "Видит" UNIX-ссылки, может менять атрибуты файлов. Отлично подходит для работы вместе с Visual HTML Workshop и LightPad. Не показывает баннеры и не "засоряет" Windows рекламными DLL. Распространяется и регистрируется бесплатно. Имеются версии с русским и английским интерфейсом.


Учeбник HTML, бесплатные программы Web-мастеру.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Полезности>>Валидаторы, оптимизаторы и тестеры

JavaScript Debugger (2 kb) free
Home: http://act.virtualave.net/rus/programs.html
E-mail: webmaster@act.virtualave.net

Небольшое приложение для отладки JavaScript программ. Написано на JavaScript.

Retrieve (500 kb) free
Home: http://www.sinor.ru/~bcltd/RuWin/retrieve
E-mail: friendlyware@yahoo.com

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

Advanced HTML Optimizer v3.0 (464 kb) free
Home: http://www.pcbit.com/htmlopt/download.shtml
E-mail: info@pcbit.com

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


Учeбник HTML, бесплатные программы Web-мастеру.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web-mastering
Раскрутка | Полезности | FAQ | Е- mailer

Полезности>>Разные

EasyTrack 1.0 (373 kb) free
Home: http://belpartner.virtualave.net/
E-mail: a_by@mail.ru

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

Оптимизатор HTML файлов (163 kb) free
Home: http://gospel.jeo.ru/
E-mail: gospel@jeo.ru

Всем известно, что файлы, созданные HTML-редактором FrontPage98 (или файлы Word и Excel, сохраненные в формате html), содержат много "мусора": ненужные теги, пустые строки, пробелы в начале строк и так далее... Программа "Оптимизатор HTML файлов" предназначена для удаления всего этого. Кроме того, имеется возможность автоматически заменять одни теги на другие, например: <strong> на <b>, <em> на <i>. Для изменения параметров оптимизации имеется панель настройки.

Start Page 0.7.1 (462 kb) free
Home: http://yugres.al.ru/download/index.shtml
E-mail: rut@pisem.net

Программа генерирует HTML документ с наиболее часто используемыми ссылками, например для стартовой страницы браузера. Предусмотрены экспорт и импорт закладок MS Internet Explorer. Внешний вид программы легко изменяется благодаря использованию CSS. В комплект поставки входят несколько файлов, описывающих различные варианты оформления страницы. Кроме того, вы можете создавать свои собственные варианты. Для синхронизации закладок между различными компьютерами есть возможность импорта и экспорта закладок в текстовый файл. Добавлять ссылки в программу можно вручную, через буфер обмена или через контекстное меню IE.

Add Banner 2.0.1.(225 kb) free
Home: http://www.kulichki.com/igorfil/prog.htm
E-mail: igorfil@kulichki.com

Довольно удобная программа для добавления кода (например, баннера) сразу в несколько страниц web-сайта. Она позволяет также удалять заданный код из всех страниц, где он будет найден. Код может быть вставлен в начало документа, в конец или перед другим кодом и текстом. Для начала поместите в одну папку все HTML документы, в которые собираетесь вставлять (или удалять) код, затем запустите файл Add_banner.exe, впишите необходимый для добавления код в поле и укажите путь к папке с документами. Просто и удобно.

IFAlbum 3.1. (360 kb) free
Home: http://www.kulichki.com/igorfil/prog.htm
E-mail: igorfil@kulichki.com

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

IFMAlbum 2.0. (270 kb) free
Home: http://www.kulichki.com/igorfil/prog.htm
E-mail: igorfil@kulichki.com

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

News Publisher (680 kb) free
Home: http://www.wsp.ru/news_publisher/
E-mail: wsp@atanor.ru

Система News Publisher представляет собой программный модуль для формирования и поддержки ленты новостей на сайте. С его помощью вы можете создавать свои собственные ленты новостей. Вы можете сделать свой сайт динамичным и интересным. При этом нет необходимости знать языки программирования или быть web-дизайнером. Система News Publisher наглядна и проста в использовании. Вы просто пишите новости, а программа сама выгружает их на ваш сайт и ведет архив новостей. Эта программа особо выделяется из всей линейки продуктов Web Site Publisher и рекомендуется для эффективного и удобного управления новостями.

Price Publisher (884 kb) free
Home: http://www.wsp.ru/price_publisher/
E-mail: wsp@atanor.ru

Программа Price Publisher позволяет Вам экспортировать прайс-листы на сайт из стандартных файлов Excel и при этом не быть программистом и не создавать специальную базу данных.

Good Utilites For Web-master (2700 kb) free
Home: http://progispirina.euro.ru/gufwm.htm
E-mail: spirinalexey@hotmail.ru

Программа Good Utilites For Web-master позволяет Вам: создать голосование, подобрать цвет фона и текста, зарегистрировать сайт в поисковых машинах, создать кнопки, которые меняют свой цвет при наведении и нажатии, создать фотоальбом, производить перекодировку, замену имен файлов, производить замену текста сразу в нескольких файлах.

Includer (197 kb) free
Home: http://security.inc.ru/includer.htm
E-mail: vertal@mail.ru

Программа предназначена для веб-мастеров, она заменяет SSI тег вида <!--#include virtual="file.html" --> на содержание соответствующего файла, таким образом отпадает необходимость поддержки провайдером хостинга данной возможности. Применение этого тега очень удобно, так как это позволяет легко изменять информацию на всех страницах вашего проекта, например можно добавить новый счетчик или изменить меню, поменяв при этом только один файл. Если вы уже используете SSI у себя на страничке, то для просмотра своего проекта на компьютере, где нет WEB-сервера, Вы также можете использовать эту программу. Возможна обработка как одного файла, так и целой директории.


Пример "autobookmark".

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


Отправтe другу ссылку.

guide
<dimas>
help

On-line учебник HTML с примерами ,
справочник по созданию Web-сайтов.

guide
<dimas>
help

Главная | Учебник HTML | Web- mastering | Раскрутка
МЕТА -генератор | Регистратура | Е- mailer | Контакты
Взять banner | bookmark | Вернуться назад | Отослать ссылку

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

Кому:

От кого:

Взять banner | bookmark | Вернуться назад | Отослать ссылку
МЕТА -генератор | Регистратура | Е- mailer | Контакты
Главная | Учебник HTML | Web- mastering | Раскрутка

guide
<dimas>
help

On-line учебник HTML с примерами ,
справочник по созданию Web-сайтов.

guide
<dimas>
help


FILE1

Тестовая страница 1

Текст, набранный и сохраненный в файле file1.shtml


Учeбник HTML с примeрами, справочник по созданию Web-сайтов.

справочник по созданию Web -сайтов.

Главная | Учебник HTML | Учебник CSS | Web- mastering
Раскрутка | Полезности | FAQ | Е- mailer

Данный учебник HTML и CSS поможет начинающему пользователю шаг за шагом, от начала и до конца создать свою собственную страницу в интернете, WEB-узел или их локальную версию на CD, а также может послужить on-line справочником для более опытных пользователей. Не стоит ждать от сайта абсолютно исчерпывающего объёма информации.

По своей сути, этот учебник — сборник неформальных советов по созданию Web-сайтов, а также довольно подробный on-line справочник тэгов и их атрибутов. Материал написан, по возможности, простым языком, содержит практические рекомендации, множество примеров. Он может стать настольной книгой не только на период создания собственной страницы, но и поможет найти ответы на многие вопросы, возникающие в процессе освоения профессии Web-мастера. В их число входят: тэги и атрибуты HTML, селекторы и свойства CSS, работа с цветом, аспекты Web-мастеринга, секреты раскрутки, FAQ, особенности браузеров, SSI, Web-дизайн и другие.

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

Далее будут подробно рассмотрены все аспекты создания Web-сайтов, с анализом синтаксиса и примерами исходных кодов. Примеры написания кода будут выделены таким цветом, их Вы можете свободно использовать: просто скопировать и вставить в свой исходный код. Те фрагменты, которые должны быть заменены, будут выделены таким цветом . Пиктограммы [image] и [image] рядом со ссылками означают, что ссылка ведет на сайт англоязычный или русскоязычный соответственно.


ХОСТИНГ-ЦЕНТР РБК | регистрация доменов, качественный платный хостинг

ХОСТИНГ
Виртуальный
Windows
Почтовый
ХОСТИНГ
РЕГИСТРАЦИЯ ДОМЕНОВ
АРЕНДА И РАЗМЕЩЕНИЕ СЕРВЕРОВ
Аренда серверов
Размещение серверов
АРЕНДА И РАЗМЕЩЕНИЕ СЕРВЕРОВ
КОНСТРУКТОР САЙТОВ
ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ
УПРАВЛЕНИЕ УСЛУГАМИ

.su | .ru | .com | .net | .bz
.ws | .info | .biz | .org | .tv
Rambler's Top100
Новости
Услуги
Специальные предложения
Способы оплаты
Клиенты и партнеры
Управление услугами
Помощь/Вопросы/Ответы
О нас
Вакансии
Контактная информация
Офис в Москве:
Адрес:
Профсоюзная ул., 78
Клиентская служба:
Тел.:
Факс:
E-Mail:
(495) 544-55-66
(495) 514-09-57
hosting@hc.ru
Техническая поддержка:
Тел.:
E-Mail:
(495) 544-55-66
support@hc.ru
Представительство в ГУМе:
Адрес:
Тел.:
Ветошный пер., 5
(495) 698-33-75
Офис в Санкт-Петербурге:
Адрес:
Тел.:
Лиговский пр., 10
(812) 578-14-14
Объем: 100 МБ
Базы данных/Сайты: 0/10
Объем: 900 МБ
Базы данных/Сайты: 3/3
Библиотека скриптов: есть

Аренда серверов

Аренда виртуального почтового сервера, на котором можно завести необходимое количество почтовых ящиков, и забыть про поддержку и управление сервером.
Подробнее
Объем: 300 МБ
Базы данных/Сайты: 1/2
Библиотека скриптов: есть
Объем: 2 700 МБ
Базы данных/Сайты: 10/10
Библиотека скриптов: есть

Размещение оборудования

Клиентам, предъявляющим повышенные требования к надежности и качеству обслуживания, для крупных и нестандартных проектов, мы предлагаем VIP-хостинг.
Подробнее

Действует акция «ДОМЕН ЗА ДОМЕН»
Зарегистрируй один домен, второй получи совершенно бесплатно в самых популярных зонах: .ru, .com, .net, .org.
Подробнее
Сервис:

Имя пользователя

Пароль

регистрация забыли пароль? ответы на вопросы

Последние новости

01.02.07
Куда идем мы с «Пятачком»?
Уважаемые клиенты, Хостинг-Центр РБК рад сообщить, что подключение по тарифному плану «Пятачок» продлено до 15 февраля 2007 года включительно.
 Подробнее

31.01.07
И снова о подарках
Все клиенты, оплатившие продление по тарифу «Третий» на 3 месяца и более, получают на свой бонусный счет 10% от суммы оплаты.
 Подробнее


PAGE 1


PAGE 2


PAGE 2

link


PAGE 3


 <! DOCTYPE HTML PUBLIC “-//IETF//DTD HTML 3.2 // EN “>
<HTML>
<HEAD>
</HEAD>
<BODY>
<BGSOUND SRC="http://www.arcus.lv/dimas/m5.mid loop=infinite">
</BODY>
</HTML>


Пример включенной таблицы стилей

Включенная таблица стилей и атрибут style,включенный в тэг абзаца

Стиль этого раздела был определен комбинацией дескриптора span и атрибута style Ссылка


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

Документ с внедренной таблицей стилей

В этом документе фон белый ,шрифт черный ;поля 150 пикселей ,120 и 100;

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

Абзацы простого текста оформлены красной строкой в 1/2 дюйма и выведены шрифтом Times высотой 12 пикселей . Ссылка красного цвета


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

В документ внедрена таблица стилей, с использованием конструкции
@import URL("файл.css");

В этом документе фон белый ,шрифт черный ;поля 150 пикселей ,120 и 100;

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

Абзацы простого текста оформлены красной строкой в 1/2 дюйма и выведены шрифтом Times высотой 12 пикселей . Ссылка красного цвета


Пример внешней таблицы стилей

Заголовок 14 пикселей Arial синий

Абзац : шрифт 12 пикселей ,отступ текста 1/2 дюйма,выравнивание справа и слева 0,75 дюйма

Ссылка красная.


Вставка в документ обьектов.

Файл воспроизводится при наведении курсора
<IMG dynsrc="http://www.arcus.lv/dimas/roma.mpg" start=mouseover>
Файл воспроизводится при загрузке один раз
<IMG dynsrc="http://www.arcus.lv/dimas/roma.mpg" start=fileopen>
Файл воспроизводится многократно
<IMG dynsrc="http://www.arcus.lv/dimas/roma.mpg" loop=infinite>


Вставка в документ аплетов.

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

<h3>Сотрите верхний слой ...</h3>
<applet code=eraser.class
width=251 height=251>
<param name=eraser_size value=30>
</applet>

Сотрите верхний слой ...


Вставка в документ аплетов.

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

<h3>Сотрите верхний слой ...</h3>
<object code=eraser.class
width=251 height=251>
<param name=eraser_size value=30>
</object>

Сотрите верхний слой ...


Вставка в документ обьектов.

Вставка в страницу изображения , как альтернатива IMG
<OBJECT data="http://www.arcus.lv/dimas/roma.jpg"
type="image/jpeg" width=150 height=150></OBJECT>
Вставка в страницу кадра , и визуализация в нем другой страницы
<OBJECT data="http://www.arcus.lv/dimas/page1.html"
type="text/html" width=200 height=150></OBJECT>
Файл воспроизводится с панели управления
( расширение от Netscape )
<EMBED src="http://www.arcus.lv/dimas/roma.mpg"></EMBED>
Файл воспроизводится с панели управления
<OBJECT data="http://www.arcus.lv/dimas/roma.mpg"
type="video/quicktime" width=160 height=155></OBJECT>


Учeбник HTML по-русски с примeрами .

Закройте это окно


Учебник HTML
Учебник HTML


  • По-русски: Я хочу сделать покупку
  • Deutsch: Ich möchte einkaufen
  • Englich: I want to buy someting


Ячейка1
Ячейка2
Ячейка3
Ячейка4
Ячейка5
Ячейка6
Ячейка7
Ячейка8
Ячейка9


HTML
Учебник

Данный учебник HTML и CSS поможет начинающему пользователю, шаг за шагом, от начала и до конца создать свою собственную страницу в интернете, WEB-узел или их локальную версию на CD, а также может послужить on-line справочником для более продвинутых юзеров. Не стоит ждать от сайта абсолютно исчерпывающего объёма информации, однако он будет регулярно обновляться и пополняться материалами.