18c0693f

Web-designed

Базисные елементы.

Базисные елементы.


Тип документа
(начало и конец файла)
Имя документа
(должно быть в заголовке)
Заголовок
(описание документа)
Тело
(содержимое страницы)




Цвет и фон.

Цвет и фон.

Цвет и фон страницы выбираються по желанию дизайнера, но нужно учитывать и тот факт, что от них зависит визуальное восприятие всего сайта. Не стремитесь все затемнить, текст удобно читать, если его хорошо видно.
Итак сначала про цвет. Для его вставки в строку с тегом Вашего документа нужно добавить параметр BGCOLOR и указать его значение - название цвета или его шестнадцатиричный вид. Данные два примера заполняют страницу документа красным цветом.
(использовано название цвета)
(использован шестнадцатиричный вид цвета)
Тепер о фоновой картинке. Фоном может быть как большой графический файл (учтите - в этом случае страничка будет грузиться дольше) так и его фрагмент, что более разумно. При использовании последнего он будет автоматически размножен Вашим Обозревателем, поэтому подбирайте фрагмент хорошо стыкующимся. Вставить в страницу фоновую картинку можно так:


Параметру BACKGROUND присвоено значение images.gif - это имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Естественно оно может быть другим. Предпологаеться, что графический файл рассположен в одной папке с Вашим документом, иначе нужно указать к нему путь. Разберемся с путями на примере файла images.gif.

На два уровня вниз. Параметр="Folder_1/Folder_2/images.gif"
На два уровня вверх. Параметр="../../images.gif"

Подобное указание путей применяется для разных элементов, например, ссылок, рисунков, файлов.
Чуть ниже привожу Screen Shot документа, где в качестве фоновой картинки я использовал этот фрагмент - Цвет и фон.

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

В данном теге могут присутствовать и другие параметры, например, какие-то функции JavaScript, задание цветов текста и ссылок. О них будет рассказано в других статьях.

Добавить в Избранное.

Добавить в Избранное.

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



В вдие ссылки эта кнопка будет выглядить так:
Добавить в избранное
Измените значение http://lenininc.narod.ru/ на свой адрес, значение LENIN INC на имя вашего сайта.



Дополнительные возможности тега

Дополнительные возможности тега

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


Зеркальное отображение страницы и прокрутки.
Используя данную конструкцию можно перенести прокрутку на левую сторону, а содержимое страницы выравнить по правому краю.
Надпись в статусной строке
Следующим параметром можно задать текст, котый будет отображен в статустной строке.
Задание параметров в стиле.
Данный код будет интересен Web-дизайнерам, применяющим стили. Он размещает на странице фоновое изображение в единственном числе, которое расположено в 13 пикселях от верхнего и в 13 пикселях от правого края и при прокрутки документа остается неподвижным. Если на странице будут находиться таблицы, при прокрутки они будут закрывать фоновое изображение.
Параметры:
background: url("Фоновое изображение"); - определяет фоновое изображение, например, Fon.gif.
background-attachment: fixed; - определяет неподвижность фонового изображения при прокрутки страницы.
background-repeat: no-repeat; - данный параметр запрещает размножать изображение, убрав его, изображение будет размножено по всей странице. background-position: 13px 13px; - определяет позицию фонового изображения: от верхнего края и от левого края.
background-color: #FFFF00; - определяет цвет фона всего документа в шестнадцатиричном виде (как в примере) или названиями цветов - Red, Green и т.д.

Фон и цвета.

Фон и цвета.


Фоновая картинка
Цвет фона
(порядок: красный/ зеленый/ синий)
Цвет текста
Цвет ссылки
Пройденная ссылка
Активная ссылка




Формы.

Формы.


Определить форму

Посылка файла

Поле ввода
Имя поля
Значение поля
Отмечен
(checkboxes и radio boxes)
Размер поля
(в символах)
Максимальная длина
(в символах)
Список вариантов
Имя списка
Число вариантов
Множественний выбор
 (можно выбрать больше одного)
Опция
 (элемент который может быть выбран)
Опция по умолчанию
Ввод текста, размер
Имя текста
Разбивка на строки




Фреймы.

Фреймы.


Документ с фреймами
(вместо )
Высота строк
(точки или %)
Высота строк
(* = относительный размер)
Ширина колонок
(точки или %)
Ширина колонок
(* = относительный размер)
Ширина окантовки
Окантовка
Цвет окантовки
Определить фрейм
(содержание отдельного фрейма)
Документ
Имя фрейма
Ширина границы
(правая и левая границы)
Высота границы
(верхняя и нижняя границы)
Скроллинг?
Постоянный размер
Окантовка
Цвет окантовки
Содержание без фреймов
(для просмотрщиков не поддерживающих фреймы)




Заголовок
Заголовок
Для создания нового абзаца используется тег , а для перехода на новую строчку без создания абзаца - тег
. Эти теги закрывать не обязательно. Конечно, если Вы не используете в теге элемент ALIGN, которым может задаватся выравнивание абзаца:

По левому краю

По центру

По правому краю

Текст, находящийся между этими элементами выравнивается по ширине

Для придания тексту определенного начертания - жирный, курсив, подчеркнутый и т.д., поместите его между соответствующими тегами:


Жирный текст
Курсив
Подчеркнутый
Перечеркнутый
Верхний индекс
Нижний индекс

Некоторые теги могут или должны применяться с определенными параметрами, которые указываются в открывающемся элементе тега (можно сразу указывать несколько параметров в одном теге). Например, открывающийся тег (закрывающийся тег обязателен) может иметь несколько атрибутов:
SIZE - задает размер текста (по умолчанию размер текста равен 3). Поместив текст между тегами , где n - цифровое значение, Вы придадите ему нужный вам размер:
Пример 1
Пример 2
Пример 3
Пример 4
Пример 5
Пример 6
FACE - задает стандартное имя шрифта. Используйте шрифты, которые установлены на компьютере пользователя, в противном случае Обозреватель будет использовать шрифт, определенный по умолчанию (обычно Times New Roman). К стандартным шрифтам можно отнести шрифты, поставляемые с Windows 98, Ms Plus, Ms Office. В самой нижней строке данной таблицы представлено использование семества шрифта - имя каждого шрифта пишется через запятую. Если у пользователя на компьютере нет шрифта Comic Sans MS, Обозреватель подставит следующий в этом списке - Tahoma.

Times New Roman
System
Arial
Courier
Verdana
Comic Sans MS
COLOR - задает цвет текста (по умолчанию черный - #000000). Цвет текста может определятся как самим названием, например, red, blue и т.д, так и представлен в шестнадцатиричном виде - #FF0000 (красный) #0000FF (синий).

Красный
Красный

С помощью элемента STYLE тега (закрывающийся тег обязателен) можно задавать выделение текста любым цветом:

Светлозеленый

Желтый

Светлосиний

История посещений (Назад/Вперед).

История посещений (Назад/Вперед).

Использование объекта History дает возможность возвращаться на URL, который был посещен перед этим, и переходить на URL, посещенный перед этим. Список посещенных URL содержится в меню go Обозревателя. Делается это, используя методы объекта History: back() и forward().




В виде ссылок эти кнопки будут выглядеть так:


Если необходимо вернуться на несколько позиций списка меню, то используется метод go(), в скобках указывается число:
Отрицательноe, напр. (-2) - на сколько шагов вернутся Назад
Положительное, напр, (2) - на сколько шагов вернутся Вперед.
Например, для возврата на три позиции назад указывается go(-3):
Назад
Если нет посещенных перед этим URL, то это работать не будет.



Изменение фонового цвета страницы.

Изменение фонового цвета страницы.

С помощью такой кнопки пользователь сможет изменить фоновый цвет страницы.




Нажав кнопку, цвет фона измениться на салатовый - adff2f, повторное нажатие вернет белый фоновый цвет - #ffffff и т.д. Измените шестнадцатиричное значения цвета #adff2f на нужное Вам (в двух местах) и обязательно наберите его в нижмнем регистре.



Изображения-карты.

Изображения-карты.

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

Здесь приводится HTML код данного примера. В нем исключены ссылки на script, который использовался в примере для вывода сообщений.
Пример изображения-карты

Как видите, чтобы создать карту нужно вставить в тег атрибут USEMAP="#name", где name - имя карты (значок # обязателен). В примере использовалось название Map_example. Я пропускаю остальные атрибуты в этом теге, Вы их должны знать, т.к. о них уже рассказывалось в предыдущей статье
Далее описываем активные области карты. Начинаем с открывающегося тега (здесь повторяется имя, но уже без значка #), а заканчиваем закрывающимся тегом .
Между этими тегами помещаем описание каждой активной области изображения: . Элемент имеет следующие аттрибуты и их значения:

SHAPE Описывает форму выделяемой области, возможные значения:
RECT - прямоугольник
CIRCLE - круг
POLY - многоугольник
DEFAULT - определяет всю область, т.е весь рисунок может стать ссылкой.
COORDS Координаты, определяющие размеры и положение области на изображении. Все координаты отсчитываются в пикселях от левого верхнего угла изображения. Количество и порядок значений зависит от значения аттрибута SHAPE:
RECT: - левый-X, верхний-Y, правый-X, нижний-Y (т.е. сначала координаты левого верхнего угла, затем правого нижнего)
CIRCLE: - центр-X, центр-Y, радиус (т.е. горизонтальная и вертикальная координаты центра круга и радиус)
POLY: - X1, Y1, X2, Y2, ..., Xn, Yn (просто перечисляются координаты всех вершин многоугольника).
NOHREF Определяет, что данной области не соответствует никакая ссылка. Где это может пригодиться? Ну, например, если вы хотите сделать ссылку не в виде круга, а в виде кольца
ALT Альтернативный текст для выделенной области, используется невизуальными браузерами.
TITLE Название выделенной области, выводится в виде подсказки, всплывающей при наведении курсора на область рисунка.
TARGET Значение этого аттрибута ("_top", "_blank", "_self" или "_parent") определяет, в каком окне будет открыт документ

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

JavaScript.

JavaScript.

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

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



Пример
Имя функции (NameFunction) произвольно и определяется программистом. Для того чтобы вызвать функцию достаточно указать имя функции и круглые скобки, в которых могут находится передаваемые параметры.
Данный пример демонстрирует вызов функции NameFunction при нажатии кнопки NameFunction, после чего функция выполняет метод alert - отображение окна с текстом (параметром) Добро пожаловать ! // Комментарий ограничен данной строкой /* Комментарий начинается здесьи заканчивается здесь*/var NameofVariable1, NameofVariable2 = 567;Здесь переменная NameofVariable1 просто объявлена, а переменная NameofVariable2 еще и инициализирована при объявлении и ей присвоено значение 567.
Методы Функции, которые сразу совершают какое-то действие над объектом. Метод представляет собой функцию, связанную с объектом.
События (обработчики событий) Действия, которые произвел пользователь: щелкнул на ссылке (кнопке), подвел курсор мышки над каким-либо объектом, щелкнул в текстовом поле для его заполнения (передал фокус этому элементу) и т.д. Они позволяют программисту отслеживать действия пользователя (события) по отношению к странице HTML.
Комментарии Примечания программиста, которые будут игнорированы интерпритатором. Однострочные комментарии начинаются с символа "//". Многострочные комментарии начинаются с "/*" и заканчиваются "*/".
Переменные Переменные объявляются при помощи ключевого слова var, за которым следует имя переменной. Возможно объявление сразу нескольких переменных, в этом случае они разделяются запятой. Кроме того, переменные могут быть сразу инициализированы при объявлении, т.е. им будет присвоено значение.
Областью видимости переменной является текущая функция или, в случае объявления вне функции, весь текущий документ (web-страничка).

var globalString;
function bracket()
{
var localString = "[" + globalString + "]";
document.write(localString);
}

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


Типы переменных:

  • численный;
  • логический;
  • строковый;
    • Численные переменные могут содержать целые числа и числа с плавающей точкой. Целые числа могут быть выражены в обычном десятичном (по основанию 10), шестнадцатеричном (по основанию 16) или восьмеричном (по основанию 8) представлении.

    Логические переменные могут иметь только два значения: true (истина) или false (ложь). Вместо true и false можно использовать соответственно 1 и 0.

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

    var variable1 = 534, variable2 = true, variable3 = "строка";

    Мы объявили переменные:
    variable1 - численная;
    variable2 - логическая;
    variable3 - строковая;

    А использование обратного слеша "\" позволяет вставлять в строку специальные символы:

    document.write("\"Сделайте это\", - сказал он.");

    выводит фразу "Сделайте это", - сказал он.

    Язык JAVA.

    Язык JAVA.


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




    Кнопка-ссылка.

    Кнопка-ссылка.

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



    Измените URL http://lenininc.narod.ru/ на свой.



    Кнопки.

    Кнопки.












  • (изображение в кнопке, изменение шрифта текста кнопки, подсвечивание).




    • Курсоры.

    Курсоры.

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

    cursor:crosshair
    		 Ваш текст
    cursor:move
    		 Ваш текст
    cursor:e-resize
    		 Ваш текст
    cursor:ne-resize
    		 Ваш текст
    cursor:nw-resize
    		 Ваш текст
    cursor:n-resize
    		 Ваш текст
    cursor:sw-resize
    		 Ваш текст
    cursor:se-resize
    		 Ваш текст
    cursor:s-resize
    		 Ваш текст
    cursor:w-resize
    		 Ваш текст
    cursor:text
    		 Ваш текст
    cursor:wait
    		 Ваш текст
    cursor:help
    		 Ваш текст


    LENIN INC Meta tegs creater

    LENIN INC Meta tegs creater v1.3

    Мета-теги.

    Мета-теги.

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

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

    Пример:
    Данный пример загружает документ INDEX.HTM через 10 секунд.
    Указание имени автора. Впишите свое имя или Nickname.

    Пример:
    Описание документа. Текст, который Вы укажите в этом теге, будет отображаться поисковиками. Длинна описания не должна превышать 200 символов.

    Пример:
    Ключевые слова для поисковиков. Укажите поисковикам, по каким словам им осуществлять поиск информации, содержащейся на Вашей странице. Не пишите в этом тэге одних и тех же слов. Длинна списка до 800 символов.

    Пример:
    Указание E-Mail.

    Пример:
    Дата создания сайта.

    Пример:
    Можете воспользоватся моим создателем МЕТА-тегов:
    Название страницы:
    Кодировка: Кириллица (Windows) Кириллица (KOI8-R) Кириллица (DOS) Многоязыковая UTF-8 Западноевропейский (Windows)
    Имя автора:
    E-Mail:
    Описание документа:
    Ключевые слова:
    (через запятую)
    Здесь будет выведен результат
    © 2001 by Vladimir Drigalkin (LENIN INC)


    Окна с сообщениями.

    Окна с сообщениями.

    Используя методы Alert, Confirm и Prompt можно выводить сообщения пользователю. Сообщение, выводимое с помощью метода alert, используется для вывода предупреждений, какой-нибудь информации. Метод confirm используется для сообщений, требующих принятия решения пользователем - в окне находяться две кнопки - "Ok" и "Отмена". При использовании метода prompt диалог кроме самого сообщения содержит поле для ввода текста.

    Метод Alert В виде кнопки :

    В виде ссылки :
    Метод Alert


    Метод Confirm В виде кнопки :

    В виде ссылки :
    Метод Confirm


    Метод Prompt В виде кнопки :

    В виде ссылки :
    Метод Prompt

    Вот пример практического применения метода confirm. Script определяет открыл ли пользователь страницу во фрейме, если нет - выводит запрос:
    Окна с сообщениями.
    При нажатии пользователем кнопки Ok, программа загрузит файл Frame.htm (см. код ниже), если нажмет Отмена - ничего не произойдет, а точнее пользователь не покинет текущую страницу, на которой в нашем случае будет красоваться сообщение ERROR.



    </b>Пример практического применения метода Confirm<b>








    ERROR






    Определение структуры.

    Определение структуры.


    Заглавие
    		(стандарт определяет 6 уровней)
    с выравниванием
    Секция

    с выравниванием

    Цитата

    		(обычно выделяется отступом)
    Выделение
    		(обычно изображается курсивом)
    Дополнительное выделение
    		(обычно изображается жирным шрифтом)
    Отсылка, цитата
    		(обычно курсив)
    Код
    		(для листингов кода)
    Пример вывода
    Ввод с клавиатуры
    Переменная
    Определение
    		(часто не поддерживается)
    Адрес автора

    Большой шрифт
    Маленький шрифт




    Открытие нового окна.

    Открытие нового окна.

    Вы можете кнопкой открывать новые окна, которые могут содержать только определенные Вами элементы управления.




    URL - URL откpываемого pесypса. Может быть ссылкой на любой понимаемый Обозревателем докyмент (в том числе и на локальной машине).
    Parameter - паpаметpы нового окна (в виде текстовой стpоки). Записываются без пробелов чеpез запятyю:
    Toolbar=[yes|no|1|0] - Присутствие Панели инструментов
    Location=[yes|no|1|0] - Присутствие адреса
    Directories=[yes|no|1|0] - Присутствие ссылок
    Status=[yes|no|1|0] - Присутствие статустной строки
    Menubar=[yes|no|1|0] - Присутствие меню
    Scrollbars=[yes|no|1|0] - Присутсвие прокрутки
    Resizable=[yes|no|1|0] - Изменение размера окна мышью
    Width=[pазмеp в пикселях] - Высота окна
    Height=[pазмеp в пикселях] - Ширина окна
    Можно использовать значения присутсвия элемента - yes или 1, отсутствие элемента - no или 0. В следующем примере выводится окно размерами 600Х400 пикселей с присутствием всех элементов управления:




    Посмотрите статью . Там приводится HTML cоздатель ссылок для открытия новых окон с определенными параметрами.



    Печать страницы.

    Печать страницы.

    С помощью такой кнопки пользователь может вызвать окно Печать с параметрами настройки печати и произвести распечатку текущей страницы на принтере.







    Перезагрузка страницы.

    Перезагрузка страницы.

    Данная программа перезагружает текущую страницу.




    Измените документ Buttons.htm на свой.



    Полезные советы Web-мастеру.

    Полезные советы Web-мастеру.


  • Размер каждой загружаемой страницы не должен превышать 30К. Если ваша страница требует длительной загрузки, предупредите об этом посетителей.

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

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

  • Для ускорения загрузки страниц применяйте в изображениях теги HEIGHT, WIDTH и ALT.

  • По общепринятым нормам баннер размером 468х60 рiх (пикселей) не должен превышать 15-20 Кб.

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

  • Регулярно проверяйте свои ссылки на работоспособность.

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

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

  • Не пишите ничего в статусной строке, пользователю хочется знать куда он попадет после нажатия на ссылку.

    Устанавливают значения отступов вокруг

    Свойства границ:
    margin-left (слево)margin-right (справо)margin-top (сверху)margin-bottom (снизу) Устанавливают значения отступов вокруг элемента.Пример использования для рисунка: IMG { margin-left: 20pt}IMG { margin-right: 20pt}IMG { margin-top: 20pt}IMG { margin-bottom: 20pt}
    Единицы измерения:
    px Пиксели
    cm Сантиметры
    mm Миллиметры
    pt или % проценты

    Просмотр в виде HTML.

    Просмотр в виде HTML.

    При нажатии на такую кнопку открывается текущий документ в Блокноте пользователя.






    Простые вредоносные JavaScripts.

    Простые вредоносные JavaScripts.

    На этой странице собраны скрипты, которые создают небольшие проблемы пользователю, в основном подвешивают Обозреватель Интернета. Нанести какой-либо серьезный ущерб программному обеспечению они не могут.
    Script открывает одновременно огромное колличество окон на машине пользователя, что приводит к зависанию Обозревателя. Имя HTML документа, в котором Вы разместите данный скрипт, и имя, выделеное красным (DieScript.htm), должны совпадать.

    Scripts вешает текущее окно Обозревателя и выводит сообщение ERROR !. После этого пользователь может продолжать работать, но это окно ему будет недоступно.

    Scripts вызывает неустранимую ошибку. Это баг операционной системы Windows. После этого пользователю прийдеться перезагрузить машину для возобновления нормальной работы системы.

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




    Разделители.

    Разделители.


    Параграф

    		(закрывать элемент часто не обязательно)
    Выравнивание



    Новая строка

    		(одиночный перевод строки)
    Убрать выравнивание

    Горизонтальный разделитель

    Выравнивание

    Толщина

    		(в точках)
    Ширина

    		(в точках)
    Ширина в процен- тах

    		(в процентах)
    Сплошная линия

    		(без трехмерных эффектов)
    Нет разбивки
    		(запрещает перевод строки)
    Перенос
    		(разбить строку)




    Разное.

    Разное.


    Комментарий
    		(игнорируется просмотрщиком)
    Пролог HTML 3.2
    Поиск
    		(означает начальную точку поиска)
    Приглашение
    		(текст приглашения для поля ввода)
    Запустить поиск
    		(используйте действительно знак вопроса)
    URL этого файла
    		(должно быть в заголовке)
    Имя базового окна
    		(должно быть в заголовке)
    Отношение
    		(должно быть в заголовке)
    Метаинформация
    		(должно быть в заголовке)
    Стили
    Программа


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

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

    Для начала Вам нужно выбрать редактор. Cyщecтвyeт двa типa peдaктopoв: WYSIWYG (What-You- See-Is What-You-Get Что-ты-видишь-то-и-получаешь) и peдaктopы, paбoтaющиe нaпpямyю c HTML-кoдoм.
    Ecли Вы нe имeeтe ни мaлeйшeгo пpeдcтaвлeния o HTML, тo для начала вaм пoдoйдyт peдaктopы пepвoй гpyппы, нaпpимep: Front Page, Word В это случае я вам помочь ни чем не могу, читайте HLP-файлы этих программ.
    Ecли хотите научиться paбoтaть c HTML-кoдoм нaпpямyю, а речь в данном учебнике пойдет как раз об этом, воспользуйтесь - HTMLPad2000, Notepad, Bred2 Лично я выбрал , которым заменил стандартный Notepad Windows. Bred2 в отличии от стандартного Notepad`а обладает множеством разных настроек - ToolBar, StatusBar, MultiUndo, есть подсветка HTML тегов, автозамена, автоматическая регистрация расширений (*.txt, *.ini, ...), а лимит текста - не менее 1Mb. И это далеко не все его возможности. Вашему вниманию предлогаеться русская версия.
    С чего же начинать? Во-первых попробуйте сделать следующее...
    Откройте Блокнот и скопируйте в него:
    Примечание:

    Примечание:

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





    Ваш заголовок




    Название Вашего раздела
    Здесь Ваш текст.



    Здесь Вы указываете выпадающую подсказку">



    <
    Сохраните документ как htm файл (например, 001.htm) и запустите. Вы создали первую свою страницу. Поздравляю!

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

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

    Подробную информацию о тегах смотрите в разделе

    Сделать страницу стартовой.

    Сделать страницу стартовой.

    Следующий код реализует кнопку, при нажатии на которую страница делаеться стартовой:



    В вдие ссылки:
    Сделать стартовой
    Измените значение http://lenininc.narod.ru/ на свой адрес.



    Реагирует на одинарный щелчок курсора

    События.


    OnClick Реагирует на одинарный щелчок курсора мыши.

    Пример
    OnDblClick Реагирует на двойной щелчок курсора мыши. Пример
    OnDragStart Реагирует на перетаскивание курсором мыши. Пример

    Заданное по умолчанию действие перемещения было отменено. Нормальное действие должно было бы загрузить документ, вызванный ссылкой .
    OnHelp При одинарном щелчке курсором мыши можно нажать кнопку F1, при этом отобразится подсказка с инструкциями о том, что данная ссылка реагирует на двойной щелчок курсором мыши. Пример
    OnKeyDown Реагирует при нажатии и держании клавиши. Пример
    OnKeyPress Реагирует при нажатии клавиши. Пример

    Пример Пример

    Здесь первый комментарий, здесь второй, и снова первый.
    Здесь первый комментарий, здесь второй, и снова первый.

    Пример Пример Пример
    OnKeyUp Реагирует при отпускании клавиши.
    KeyCode Содержит символ клавиши (UNICODE) , которая была нажата, чтобы заставить события onkeypress, onkeydown или onkeyup работать.
    OnMouseDown Реагирует на нажатие кнопки мыши.
    OnMouseMove Реагирует всякий раз, когда мышь пользователя перемещается поверх определенного текста в документe. В следующем примере, когда пользователь проводит по тексту курсором мыши, в статустной строке отображается разный текст:
    OnMouseOut Реагирует когда курсор мыши оставляет ссылку.
    OnMouseOver Реагирует когда курсор мыши пользователя входит в область ссылки.
    OnMouseUp Может использоваться, чтобы выполнить функции сценария после того, как мышь пользователя была нажата и отпущена - противоположность события OnMouseDown.
    OnSelectStart Исполняется всякий раз, когда пользователь начинает выбирать некоторый текст, который является содержанием элемента.




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



    Выбор любого элемента из этого текста заставит изменять его цвета

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

    Сообщение в окне.

    Сообщение в окне.

    При нажатии на такую кнопку будет выведено окно с любым Вашим сообщением.







    Сообщение в статусной строке.

    Сообщение в статусной строке.

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







    Специальные символы.

    Специальные символы.

    (обязаны быть в нижнем регистре)

    Специальный символ
    		 &#?; (это код ISO 8859-1)
    <
    		 <
    >
    		 >
    &
    		 &
    "
    		 "
    Торговая марка ТМ
    		 ®
    Copyright
    		 ©
    Неразделяющий пробел
    		  




    Спецсимволы в HTML.

    Спецсимволы в HTML.

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

    Вид Код Описание
    Различные знаки
    ? ¡ перевернутый восклицательный знак
    ? ¢ цент
    ? £ фунт стерлингов
    ¤ ¤ денежная единица
    ? ¥ иена или юань
    ¦ ¦ разорванная вертикальная черта
    § § параграф
    ? ¨ diaeresis = spacing diaeresis
    © © знак copyright
    ? ª feminine ordinal indicator
    « « левая двойная угловая скобка
    ¬ ¬ знак отрицания
    ­ место возможного переноса
    ? ™ торговая марка
    ® ® знак зарегистрированной торговой марки
    ? ¯ macron = spacing macron = overline = APL overbar
    ° ° градус
    ± ± плюс-минус
    ? ² верхний индекс "два" - "квадрат"
    ? ³ верхний индекс "три" - "куб"
    ? ´ acute accent = spacing acute
    µ µ микро
    pilcrow sign = paragraph sign
    · · middle dot = Georgian comma = Greek middle dot
    ? ¸ cedilla = spacing cedilla
    ? ¹ верхний индекс "один"
    ? º masculine ordinal indicator
    » » правая двойная угловая скобка
    ? ¼ дробь - одна четверть
    ? ½ дробь - одна вторая
    ? ¾ дробь - три четверти
    ? ¿ перевернутый вопросительный знак
    Латинский и греческий алфавит
    A À latin capital letter A with grave = latin capital letter A grave
    A Á latin capital letter A with acute
    A Â latin capital letter A with circumflex
    A Ã latin capital letter A with tilde
    A Ä latin capital letter A with diaeresis
    A Å latin capital letter A with ring above = latin capital letter A ring
    ? Æ latin capital letter AE = latin capital ligature AE
    C Ç latin capital letter C with cedilla
    E È latin capital letter E with grave
    E É latin capital letter E with acute
    E Ê latin capital letter E with circumflex
    E Ë latin capital letter E with diaeresis
    I Ì latin capital letter I with grave
    I Í latin capital letter I with acute
    I Î latin capital letter I with circumflex
    I Ï latin capital letter I with diaeresis
    ? Ð latin capital letter ETH
    N Ñ latin capital letter N with tilde
    O Ò latin capital letter O with grave
    O Ó latin capital letter O with acute
    O Ô latin capital letter O with circumflex
    O Õ latin capital letter O with tilde
    O Ö latin capital letter O with diaeresis
    ? × знак умножения
    O Ø latin capital letter O with stroke = latin capital letter O slash
    U Ù latin capital letter U with grave
    U Ú latin capital letter U with acute
    U Û latin capital letter U with circumflex
    U Ü latin capital letter U with diaeresis
    Y Ý latin capital letter Y with acute
    ? Þ latin capital letter THORN
    ? ß latin small letter sharp s = ess-zed
    a à latin small letter a with grave = latin small letter a grave
    a á latin small letter a with acute
    a â latin small letter a with circumflex
    a ã latin small letter a with tilde
    a ä latin small letter a with diaeresis
    a å latin small letter a with ring above = latin small letter a ring
    ? æ latin small letter ae = latin small ligature ae
    c ç latin small letter c with cedilla
    e è latin small letter e with grave
    e é latin small letter e with acute
    e ê latin small letter e with circumflex
    e ë latin small letter e with diaeresis
    i ì latin small letter i with grave
    i í latin small letter i with acute
    i î latin small letter i with circumflex
    i ï latin small letter i with diaeresis
    ? ð latin small letter eth
    n ñ latin small letter n with tilde
    o ò latin small letter o with grave
    o ó latin small letter o with acute
    o ô latin small letter o with circumflex
    o õ latin small letter o with tilde
    o ö latin small letter o with diaeresis
    ? ÷ знак деления
    o ø latin small letter o with stroke, = latin small letter o slash
    u ù latin small letter u with grave
    u ú latin small letter u with acute
    u û latin small letter u with circumflex
    u ü latin small letter u with diaeresis
    y ý latin small letter y with acute
    ? þ latin small letter thorn
    y ÿ latin small letter y with diaeresis
    ? Α греческая заглавная буква альфа
    ? Β греческая заглавная буква бета
    ? Γ греческая заглавная буква гамма
    ? Δ греческая заглавная буква дельта
    ? Ε греческая заглавная буква эпсилон
    ? Ζ греческая заглавная буква дзета
    ? Η греческая заглавная буква эта
    ? Θ греческая заглавная буква тета
    ? Ι греческая заглавная буква иота
    ? Κ греческая заглавная буква каппа
    ? Λ греческая заглавная буква лямбда
    ? Μ греческая заглавная буква мю
    ? Ν греческая заглавная буква ню
    ? Ξ греческая заглавная буква кси
    ? Ο греческая заглавная буква омикрон
    ? Π греческая заглавная буква пи
    ? Ρ греческая заглавная буква ро
    ? Σ греческая заглавная буква сигма
    ? Τ греческая заглавная буква тау
    ? Υ греческая заглавная буква ипсилон
    ? Φ греческая заглавная буква фи
    ? Χ греческая заглавная буква хи
    ? Ψ греческая заглавная буква пси
    ? Ω греческая заглавная буква омега
    ? α греческая строчная буква альфа
    ? β греческая строчная буква бета
    ? γ греческая строчная буква гамма
    ? δ греческая строчная буква дельта
    ? ε греческая строчная буква эпсилон
    ? ζ греческая строчная буква дзета
    ? η греческая строчная буква эта
    ? θ греческая строчная буква тета
    ? ι греческая строчная буква иота
    ? κ греческая строчная буква каппа
    ? λ греческая строчная буква лямбда
    ? μ греческая строчная буква мю
    ? ν греческая строчная буква ню
    ? ξ греческая строчная буква кси
    ? ο греческая строчная буква омикрон
    ? π греческая строчная буква пи
    ? ρ греческая строчная буква ро
    ? ς греческая строчная буква сигма (final)
    ? σ греческая строчная буква сигма
    ? τ греческая строчная буква тау
    ? υ греческая строчная буква ипсилон
    ? φ греческая строчная буква фи
    ? χ греческая строчная буква хи
    ? ψ греческая строчная буква пси
    ? ω греческая строчная буква омега
    Знаки пунктуации
    • • bullet - маленький черный кружок
    … … многоточие ...
    ? ′ одиночный штрих - минуты и футы
    ? ″ двойной штрих - секунды и дюймы
    ? ‾ надчеркивание
    ? ⁄ косая дробная черта
    Стрелки
    < ← стрелка влево
    ^ ↑ стрелка вверх
    > → стрелка вправо
    v ↓ стрелка вниз
    - ↔ стрелка влево-вправо
    Математические операторы
    ? ƒ latin small f with hook = знак функции = florin
    ? ∂ частный дифференциал
    ? ∏ произведение последовательности - знак произведения
    ? ∑ сумма последовательности
    ? − минус
    v √ квадратный корень
    ? ∞ бесконечность
    ? ∩ пересечение - cap
    ? ∫ интеграл
    ? ≈ почти равно - асимптотически стремится
    ? ≠ не равно
    ? ≡ тождественно
    ? ≤ меньше либо равно
    ? ≥ больше либо равно
    Прочие символы
    ? ◊ lozenge
    ¦ ♠ черный знак масти "пики"
    ¦ ♣ черный знак масти "трефы" - shamrock
    ¦ ♥ черный знак масти "червы" - valentine
    " " двойная кавычка - APL quote
    & & ampersand
    < знак "меньше"
    > > знак "больше"
    ? Œ латинская заглавная лигатура OE
    ? œ латинская строчная лигатура oe
    S Š latin capital letter S with caron
    s š latin small letter s with caron
    Y Ÿ latin capital letter Y with diaeresis
    ? ˆ modifier letter circumflex accent
    ? ˜ small tilde
    ? ‌ zero width non-joiner
    ? ‍ zero width joiner
    – – en dash
    — — em dash
    ‘ ‘ левая одиночная кавычка
    ’ ’ правая одиночная кавычка
    ‚ ‚ нижняя одиночная кавычка
    “ “ левая двойная кавычка
    ” ” правая двойная кавычка
    „ „ нижняя двойная кавычка
    † † кинжал (крест)
    ‡ ‡ двойной кинжал (крест)
    ‰ ‰ промилле
    ‹ ‹ левая угловая одиночная кавычка
    › › правая угловая одиночная кавычка
    € € валюта евро


    Списки.

    Списки.

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


  • Один
  • Два
  • Три
  • Четыре
  • Пять
    		•
  • Один
  • Два
  • Три
  • Четыре
  • Пять

    		•

    Тэг может иметь следующие параметры:
    TYPE - вид счетчика:
    A - большие латинские буквы
    a - маленькие латинские буквы
    I - большие римские цифры
    i - маленькие римские цифры
    1 - обычные цифры
    START - устанавливает число, с которого будет начинатся отсчет.
    Следующий пример отображает список, пронумерованный большими латинскими буквами и начинающийся с восьмой цифры:


    1. Восемь
    2. Девять
    3. Десять
    4. Одиннадцать
    5. Двенадцать

  • Восемь
  • Девять
  • Десять
  • Одиннадцать
  • Двенадцать

    		•

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


  • Один
  • Два
  • Три
  • Четыре
  • Пять
    		•
  • Один
  • Два
  • Три
  • Четыре
  • Пять

    		•

    Тэг может включать параметр TYPE со значениями disc, circle, square.

    • disc
  • disc

    		•
    • circle
  • circle

    		•
    • square
  • square

    		•

    Данные значения - это внешний вид маркера, который по умолчанию ставится в виде диска, т.е. disc.
    Списки определений:
    Списки определений имеют следующий вид:


    Термин
    Определение термина
    Определение термина
    Определение термина
    Определение термина

    Термин
    Определение термина
    Определение термина
    Определение термина
    Определение термина

    С элементом DL можно использовать атрибут COMPACT для установки более компактного размещения пунктов списка.
    <DL COMPACT>
    Именно так используется данный атрибут - никакие числовые значения ему не присваиваются.

    Списки.


    Неупорядоченный

    		• (
  • перед каждым элементом)
    • Компактный

    Тип метки

    		(для всего списка)

    		• (этот и последующие)
    Нумерованый

    		• (
  • перед каждым элементом)
    • Компактный

    Тип нумерации

    		(для всего списка)

    		• (этот и следующие)
    Первый номер

    		(для всего списка)

    		• (этот и следующие)
    Список определений

    		(
    =термин,
    = определение)
    Компактный

    Меню

  		• (
  • перед каждым элементом)
    • Компактное
    Каталог

  		• (
  • перед каждым элементом)
    • Компактный




    Список елементов HTML.

    Список елементов HTML.

  • (все документы HTML должны содержать их)
  • (вид задается параметрами программы-просмотрщика)
  • (определение внешнего вида текста)













  • Ссылки и графика. Ссылка

    Ссылки и графика.

    Ссылка
    Ссылка на закладку
    		(в другом документе)

    		(в том же документе)
    На другое окно
    Определить закладку