Это способ создания графики без использования компилятора. Это обычный текстовый файл, должен быть в DOS – формате.
Шрифты: Windows, ANSI. Их понимает и обрабатывает любой броузер (Internet Explorer, Netscape).
Любой броузер – интерпритатор, исполняюший последовательно файл и исполняет его.
HTML быстро развивается и не все броузеры одинаково обрабатывают эти файлы. Сейчас все ориентируются на Internet Explorer 7.0 в Microsoft Wista.
Язык содержит перечень тегов, один тег – команда интерпритатору, но она пишется исходя из общих правил записи тегов.
ЗДЕСЬ ТОЖЕ НЕТ СТАНДАРТОВ!
Все веб-сайты состоят из нескольких HTML-файлов и нескольких графических файлов
Рекомендуется писать в обычном текстовом редакторе и сохранять как HTML-файл.
Недостатки:
1. Файл будет сильно большим;
2. Интерпритатор его обработает гораздо медление.
По традиции файл входа в сайт называется index.
<html> - начало тэга
</html> - конец тэга
<head> - заголовок
<body> - тело.
Структура HTML-файла:
<HTML>
<HEAD>
</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 адрес
Не все текстовые символы можно изображать браузером, которые создаются в текстовом редакторе:
 ….. – вставить пробел;
<….. – < ;
>….. – > ;
&….. – & ;
—… – - ;
&guot….. – ” ;
«… – << ;
»… – >> ;
Ω>… – W ;
β>… – b ;
‘>… – a ;
∑>… – S ;
НЕТ ОБЩЕГО СТАНДАРТА!!!
Управления расположения текста относительно границ страници:
<P align = “left” > Текст </P>
“center”
“right”
“justify”
<pre> </pre> - так же как и в web выводит текст на экран;
чтобы вставить в текст рисунок, нужно написать следующий тэг в том участке текста, куда необходимо вставить рисунок или анимацию:
<IMG src = “ * ”>
*.gif, *.jpg, *.png – можно использовать любое из этих расширений.
Простейший способ вставить рисунок – рассположить его в том же катологе где находиться HTML-страничка.
Управление расположением:
Widht = “N” – в пикселях
“K”- в процентах
Height =“N”
“K”
Смещение на заданую величину
Hspace = “N”
“K”
Vspace = “N”
“K”
Вывод анимации:
<img dynsrc = “ *.avi ”
Для указания количества воспроизведений нужно вставить loop = “N” после названия файла, где N-число.
Пример.
Требуется вывести картинку по центру экрана и подписать его.
<HTML>
<HEAD>
<TITLE> Мой ..... <.TITLE>
</HEAD>
<BODY>
<P align = center>
<IMG scr = “my.gif”>
<BR>1…<BR>2
<BR>3 ... <BR>
</P>
</BODY>
</HTML>
Гиперссылки
Это выполнение оператора go to;
Особенность web-странице – віполняется в диалоге , во время перемещения стрелочки, она заменяется на изображение и нажатием на левую кнопку мышки переходит на другую web-страницу. Это самый главный инструмент при работе с web. В классической программе – нужно все время следить за положением курсора и обрабатывать сообщения Windows.
Web-страници никаких обработок не делают.
<A href = адрес куда переход>текст ссылки </A>
Варианты записи адресса:
текст – тот текст в html на который перейдет курсор, при нажатиии на изображение;
___.gif – картинка, связаная с текстом;
___.html – движение по web-сайту;
Myweb.com.ua – на интернет адресс.
Текст ссылки может быть обычным текстом, а может быть и обычным рисунком. Имеется возможность нарисовать различные ссылки к различным частям рисунка.
Анимация на web-страницах.
Основной элемент анимации – это использования gif-анимации. Можна выводить и avi-файлы.
Недостаток – пользователь должен сохранить эти файлы, а это дорого.
Анимация средствами html
В html нет граффических операторов, функций графики.
<MARQUEE параметры>
____
____
<IMARQUEE>
Параметры управления движением
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 = - цвет
Вывод звука
Для начала нужно иметь звуковой файл.
Фоновый звук – открывается страничка и сразу играет звук.
<BGSOUND src = .mid loop = N>
.wav
Параметры:
Loop = N – количество проигрований музыки
Balance = “___” - ±10000 дополнительная регулировка, определяет смещение по ролику относительно начала, конца файла.
Volume = “___” – громкость
“0” – максимальная громкость.
“10000” – звук выключен.
Есть возможность выводить мультимедиа проигрователь.