Создание сайта на чистом HTML

Это способ создания графики без использования компилятора. Это обычный текстовый файл, должен быть в DOS – формате.
Шрифты: Windows, ANSI. Их понимает и обрабатывает любой броузер (Internet Explorer, Netscape).
Любой броузер – интерпритатор, исполняюший последовательно файл и исполняет его.

HTML быстро развивается и не все броузеры одинаково обрабатывают эти файлы. Сейчас все ориентируются на Internet Explorer 7.0 в Microsoft Wista.

Язык содержит перечень тегов, один тег – команда интерпритатору, но она пишется исходя из общих правил записи тегов.
ЗДЕСЬ ТОЖЕ НЕТ СТАНДАРТОВ!
Все веб-сайты состоят из нескольких HTML-файлов и нескольких графических файлов

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

Недостатки:
1. Файл будет сильно большим;
2. Интерпритатор его обработает гораздо медление.

По традиции файл входа в сайт называется index.
<html> - начало тэга
</html> - конец тэга
<head> - заголовок
<body> - тело.

Структура HTML-файла:

</HEAD>
<BODY>

</BODY>

</HTML>

В HEAD расположена различная вспомогательная информация общая для всего BODY. Ее писать не обязательно, но обычно пишут следующее:
<title>…</title> - содержимое заголовка.
Помимо этого в HEAD указывают версию html, для которой писалось BODY, и указывается как закрашивать фон.
Содержимое BODY – это просто очередность строк, в которую вставляют различные управляющие тэги, прежде всего это информация которую нужно вывести на страницу. Тэги управляют изображением этой информации.
Особенности восприятия текста BODY в браузере:

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

Теги :

Тэги управляют способами изображения информации, они все графические.
Примеры тэгов:
……<BR>…… - это указание оборвать связь на новую строку;
……<P>…</P>…… - абзац (между абзацами вставляются строки);
……<DIV>…</DIV>…… - абзац (между абзацами строки не вставляются);

Управление жирностью.
<B> Текст </B> - повышенная жирность
<I> </I> - наклонный текст
<U> </U> - подчеркнутый текст
<S> </S> - перечеркнутый текст
<SUP> </SUP> - верхний индекс
<SUB> </SUB> - нижний индекс
<BLINK> </BLINK> - текст внутри мигает (создавался для Netscape, Explorer его не выполняет).
<tt> </tt> - ширина букв одинаковая
<big> </big> - увеличения на 1
<small> </small> - уменьшения на 1

Управление заголовком

Существует 6 типов заголовков:

<H1>….</H1> //Текст в 4 раза больше
<H2>….</H2>
….
<H6>….<H6> //в 2-3 раза меньше, чем обычно

Изменение стиля

<EM> Текст </EM>
<CODE > Текст программы </CODE>
<ADDRESS> </ADDRESS> - Internet адрес

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

&nbsp….. – вставить пробел;
&lt….. – < ;
&gt….. – > ;
&amp….. – & ;
&#8212… – - ;
&guot….. – ” ;
&#171… – << ;
&#187… – >> ;
&#937>… – W ;
&#946>… – b ;
&#145>… – a ;
&#8721>… – S ;

НЕТ ОБЩЕГО СТАНДАРТА!!!

Управления расположения текста относительно границ страници:

<P align = “left” > Текст </P>
“center”
“right”
“justify”

<pre> </pre> - так же как и в web выводит текст на экран;

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

*.gif, *.jpg, *.png – можно использовать любое из этих расширений.

Простейший способ вставить рисунок – рассположить его в том же катологе где находиться HTML-страничка.

Управление расположением:

Widht = “N” – в пикселях
“K”- в процентах
Height =“N”
“K”

Смещение на заданую величину

Hspace = “N”
“K”
Vspace = “N”
“K”

Вывод анимации:

<img dynsrc = “ *.avi ”

Для указания количества воспроизведений нужно вставить loop = “N” после названия файла, где N-число.

Пример.
Требуется вывести картинку по центру экрана и подписать его.

Гиперссылки

Это выполнение оператора go to;

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

<A href = адрес куда переход>текст ссылки </A>

Варианты записи адресса:

текст – тот текст в html на который перейдет курсор, при нажатиии на изображение;
___.gif – картинка, связаная с текстом;
___.html – движение по web-сайту;
Myweb.com.ua – на интернет адресс.

Текст ссылки может быть обычным текстом, а может быть и обычным рисунком. Имеется возможность нарисовать различные ссылки к различным частям рисунка.

Анимация на web-страницах.

Основной элемент анимации – это использования gif-анимации. Можна выводить и avi-файлы.
Недостаток – пользователь должен сохранить эти файлы, а это дорого.

Анимация средствами html

В html нет граффических операторов, функций графики.

Параметры управления движением

1. Direction = right, left, up, down.

Если нужно что бы движение было под каким-то углом, то достаточно двух параметров.

2. Loop = INFINITE; (бесконечно)
Loop = 0;
Loop = N; (анимационный повтор N раз)

3.Behavior = scroll; изображение двигается слева направо и наоборот
Behavior = slide; движение до конца строки
Behavior = alternative; движение из одного конца строки в другой.

Размер обложки анимации

Width = Dx
Height = Dy
Align = middle; (top) перемещение по центру, по верхней части экрана
bgcolor = цвет; цвет фона, области движения
scrollmount = K; скорость движения
scrolldelay = M; величина задержки между движениями.

Движущаяся информация

1.текст + рисунок
2.текст

Пример:

бегущая строка
изображение линий

Рисование линий

___<HR>___
По умолчанию появится линия на весь экран, толщина линии 1 пиксель.
Возможно управление, есть 2 параметра:
Width = N – ширина линии
Size = H – толщина линии
Color = - цвет

Вывод звука

Для начала нужно иметь звуковой файл.
Фоновый звук – открывается страничка и сразу играет звук.

.wav
Параметры:
Loop = N – количество проигрований музыки
Balance = “___” - ±10000 дополнительная регулировка, определяет смещение по ролику относительно начала, конца файла.
Volume = “___” – громкость
“0” – максимальная громкость.
“10000” – звук выключен.
Есть возможность выводить мультимедиа проигрователь.