ТЕХНОЛОГИИ JAVASCRIPT , HTML 5

JavaScript

Математический объект Math

Условный оператор

Оператор цикла

Оператор выбора

HTML 5

Размещение объектов мультимедиа на веб-страницах

Файловые форматы аудио и видео

JavaScript — один из популярных скриптовых языков, используемых в Интернете. Он был разработан фирмой Netsсаре в сотрудничестве с Sun Micrisystems и является диалектом языка Java. Программы, созданные на этом языке, работают на многих браузерах, таких как Internet Explorer, Fierfox, Chrome, Ореrа и Safary.

JavaScript был разработан для работы с НТМL (и ХНТМL) и создания более динамичных и интерактивных страниц. Коды JavaScript (сценарий), представляющие собой последовательность операторов, обычно непосредственно встраивают в НТМL-страницы. JavaScript является языком-интерпретатором (то есть скрипты выполняются без предварительной компиляции).

Основными элементами языка JavaScript являются:

□ ключевые слова, синтаксис и грамматика;

□ правила для выражений, переменных и литералов;

□ основополагающие объекты.

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

При написании сценариев используется объектная модель рис. 1.

В этой иерархии объекты-«потомки» являются свойствами объектов. Например, форма под названием form1 является объектом и в то же время свойством Document — Document. form1

Каждая веб-страница состоит из следующих объектов:

□ window — верхний уровень объекта; имеет свойства, которые определяю полное окно;

□ navigator — информация о самом браузере; имеет свойства имени полг зователя, используемой версии браузера, типа процессора, возможност использования cookie и т. д.;

□ document — документ, находящийся в окне браузера; имеет свойства, оснс ванные на содержании и структуре документа (заголовок, цвет фона, связ и формы);

□ location — информация о текущем URL;

□ history — информация о свойствах, посещавшихся до настоящего момент сайтах и порядке их посещения.

Объект window представляет собой объект верхнего уровня иерархии обт ектной модели со стороны клиента. Он содержит дочерние объекты documen history и location.

Рисунок 1 объектная модель

Вставка скрипта в тело документа

Для создания кода на JavaScript нет необходимости в среде разработки.

Для вставки скриптов в документ используется элемент <script>. Элемент <script> обозначает начало и конец блока, содержащего команды скрипта. Он имеет атрибут type, указывающий название языка, на котором написан скрипт (по умолчанию им считается JavaScript). Пример программы с внедренным в элемент <body> скриптом на языке JavaScript

<html><head><titiе>Первая Веб-страница с JavaScript</titie></head>

<body>

<h3>Моя первая веб-страница с JavaScript</h3>

// Это короткий комментарий </script>

Скрипт внедрен в элемент body </body>

</html>

В этом примере была использована одна из наиболее важных команд языка JavaScript — document.write(). Команда document.write() применяется для создания надписи в текущем документе. Кроме того, в этом примере был использован объект Date, позволяющий работать как со временем, так и с датой.

Комментарии в JavaScript позволяют сделать код более понятным. Простая строка комментария начинается с //. Многострочный комментарий начинается с /* и заканчивается */.

Вставка скрипта в заголовок документа

В данном разделе приведен пример внедрения скрипта в заголовок документа. Обычно скрипт, содержащий функции, расположен в элементе <head> веб документа, а сами функции вызываются внутри элемента <body>. Функции — логически независимые части программы — являются основным элементом

языка JavaScript. Пример использования функции с параметрами

<html><head><title>Первая функция</title>

function product(a,b)

{

return a*b;

}

/* В этом примере показано действие многострочного комментария и работа функции, вычисляющей произведение чисел */

</script></head>

<body>

<h4>Функция произведения чисел</h4>

14 х 6 =

document.write (product(14,6));

</script></body></html>

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

Пример использования внешнего файла JavaScript

<html><head><ti tiе>Первая функция</1111е>

События

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

Пример программы с обработчиком события

<html> <head><titlе>Обработка событий</ titlе>

{

document.getElementById("demo").innerHTML=Date();

}

</script></head>

<body>

<h5>0бработка событий </h5>

Отображение даты</ button >

</body></html>

В этом скрипте описана функция function displayDate(), содержащая метод getElementByld, который возвращает указатель на объект, имеющий идентификатор demo.

При нажатии кнопки, генерируемой элементом <button>, на экран выводится дата. Нажатие кнопки или щелчок кнопкой мыши представляет собой событие click, произведенное пользователем. Имя параметра обработки события

начинается с приставки on которым следует название самого события, т.е. параметр обработки события click будет выглядеть как onclick.

Математический объект Math

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

Пример программы с объектом Math

<html>

<head>

<title> Объект Math</title>

<script> .

function f1(){a1ert("Math.E="+Math.E)};

function f2(){alert("Math.LN10="+Math.LN10)}

function f3(){alert("Math.LN2="+Math.LN2)}

function f4(){alert("Math.LOG10E="+Math.LOG10E)}

function f5(){a1ert("Math.L0G2E="+Math.L0G2E)}

function f6(){alert( "Math. Pi="+Math :PI)}

function f7(){alert("Math.SQRT1_2="+Math.SQRT1_2)}

function f8(){alert("Math.SQRT2="+Math.SQRT2)}

</script>

</head>

<div style="position:absolute;top:30;left:20;" id="zz

onclick="f1(); f2(); f30; f4(); f5(); f6(); f7(); f8(); >Щелкните по этой надписи - получите окно сообщение со значением стандартной функции</div></body></html>

В этом скрипте кроме функций, содержащих объект Math, появляется окно ( общения alert.

При каждом щелчке на надписи Щелкните по этой надписи - получите окно сообщение со значением стандартной функции будет появляться новое окно.

Условный оператор

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

□ if <высказывания>;

□ if.. .else <высказывания>;

□ if...else if...else <высказывания>;

□ switch <высказывания>.

Логическая команда if проверяет, чем заканчивается сравнение. Если результат выполнения команды if равен true, то будет выполняться одна последовательность операций, если результат равен false, то будет выполняться другая последовательность операций.

<html><head> <titlе>Условный onepaтop</title> </head>

<body>

var r = Math.random();

if (r>0.5)

{

document.write("Датчик случайных чисел");

}

else

{

document.write("Пример программы с объектом Math");

</script>

</body>

</html>

В данном примере использован объект Math.random, являющийся датчиком случайных чисел. Если он вырабатывает случайное число, большее 0,5, то в экране появляется надпись Датчик случайных чисел, если случайное число меньше или равно 0,5, то на экран выводится надпись Пример программы с объектом Math.

Оператор цикла

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

В JavaScript есть два разных типов цикла:

□ for используется при известном количестве повторений;

□ while используется тогда, когда количество повторов зависит от некоторых условий.

Пример использования оператора цикла

<html><head><titlе>0ператор цикла </title></head>

<body>

for (i = 1; i <= 6; i++)

document.write("<h" + i + "> Это заголовок " + i);

document.write("</h” + i + " ");

}

</script>

</body>

</html>

В данном примере тексты заголовков и их стиль генерируются в цикле. На рисунке показано только два заголовка, остальные можно увидеть, если воспользоваться полосой прокрутки. Оператор ++ увеличивает переменную i на единицу, пока выполняется условие i < = 6.

Оператор выбора

Оператор switch удобно использовать для выбора данных.

Пример использования оператора выбора

<html> <head> <titlе> 0ператор case </tit1e>

// Считаем, что Понедельник = 1,

// Вторник = 2, Среда = 3 и т. д.

var d=new Date();

var theDay=d.getDay();

switch (theDay)

{

case 5:

document.write ("Веселая пятница");

break;

case 6:

document.write ("Выходной день - суббота");

break;

case 0:

document.write ("Выходной день - воскресенье");

break;

default:

document.write("Дни недели");

}

</script></head>

В данном примере использована функция new Date(), позволяющая работатьс датами. Обратите внимание, что дни недели пронумерованы от 0 до 6, и начинается неделя с воскресенья, то есть порядковый номер воскресенья — 0.

HTML 5

Язык HTML 5 является совместным продуктом корпорации World Wide Web Consortium (W3C) и рабочей группы Web Hypertext Application Technology Working Group (WHATWG). Рабочая группа WHATWG разрабатывала формы и приложения, корпорация W3C сосредоточила усилия на XHTML 2.0.

Многие идеи HTML 5 были изначально предложены WHATWG в стандарте Web Applications 1.0. HTML 5 включает другой стандарт WHATWG, Web Forms 2.0.

На старых браузерах не все новинки языка HTML 5 будут видны, а в последних версиях Internet Explorer, Chrome, Opera, Safari, Firefox нововведения будут отражены в полном объеме.

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

HTML 5 вводит несколько новых элементов и атрибутов. Некоторые из них технически являются эквивалентами <div> и <span>, но имеют свое семантическое значение, например <nav> и <footer>. Эти элементы должны облегчить работу поисковым системам. Другие элементы предоставляют новую функциональность, такие как <audio> и <video>. Новый элемент <section> выводит экран данные, формируя их в разделы.

Некоторые устаревшие элементы HTML 4, такие как <font> и <center>, были удалены из HTML 5.

Пример создания веб-страницы на языке HTML 5

<!DOCTYPE HTML>

<html>

<head>

<title> Пример веб-страницы на языке HTML 5</title>

</head>

<body>

</article>

</section>

</body>

</htm1>

Спецификация <! DOCTYPE > является первым объявлением документа в версии HTML 5, предшествуя элементу <html>. Данный элемент объявляет браузеру спецификациях используемого HTML, выступая в роли объявления, инструкции браузеру.

Документ, созданный в версии HTML 4.01, требует ссылки на DTD, так как версия языка HTML 4.01 была основана на SGML. HTML 5 основан не на SGML и не требует ссылки на DTD, но использует спецификацию doctype, для указания браузеру. Спецификация <! DOCTYPE > пишется прописными букв; и не имеет конечного тега.

Размещение объектов мультимедиа на веб-страницах

Мультимедийные файлы размещаются на веб-страницах с помощью элементов <audio>, <video>, <embed> и <object>.

Элемент <audio> имеет атрибуты autoplay, controls, loop, preload, src.

□ Атрибут autoplay. Определяет порядок воспроизведения данных мультимедиа. Если он присутствует, то файл мультимедиа автоматически запускается по окончании загрузки документа.

□ Атрибут controls. Позволяет пользователю управлять воспроизведением, например, с помощью кнопки проигрывания.

□ Атрибут loop. Указывает на то, что по окончании файл мультимедиа должен снова начать воспроизводиться. Данные мультимедиа могут сначала воспроизводиться от начала до конца как в прямом, так и в обратном направлении.

□ Атрибут pivload. Контролирует загрузку файла. Принимает значения auto (автоматический), metadata (метаданные) и попе (никакой).

□ Атрибут src (от англ, source — источник). Определяет месторасположение изображения, включаемого в состав документа. Имеет параметр url, который указывает браузеру, где находится файл.

Мультимедийные файлы имеют расширение ogg vorbis, mp3, wav. Однако будьте внимательны — не все браузеры поддерживают аудио

Таблица Поддержка аудиоформатов разными браузерами

Формат	Microsoft Internet Explorer 8	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis	Нет	Да	Да	Да	Нет
MP3	Нет	Нет	Нет	Да	Да
Wav	Нет	Да	Да	Нет	Да

Документ, содержащий встроенный аудиофайл

<!DOCTYPE HTML>

<html><head> <title> Встроенный аудиофайл </title></head>

ВАШ БРАУЗЕР HE ПОДДЕРЖИВАЕТ АУДИО ЭЛEMEHT</audio></body></html>

Элемент <video> (видео) имеет атрибуты autoplay, controls, loop, preload, src. height, width.

□ Атрибут height Задает высоту окна для отображения видеоданных в пикселах или процентах.

□ Атрибут width. Задает ширину окна для отображения видеоданных в пикселах или процентах.

Документ, содержащий встроенные видео- и аудиофайлы

<!DOCTYPE HTML>

<html><head><tit-le> Встроенный аудиофайл</11 tl e></head>

ВАШ БРАУЗЕР HE ПОДДЕРЖИВАЕТ ВИДЕОЭЛЕМЕНТЫ </video> </body> </html>

Элемент <embed> используется для размещения мультимедиа, например, посредством кода:

Элемент <embed> имеет атрибуты height, width, src, type.

Еще один пример документа, содержащий встроенные мультимедийные файлы

ВАШ БРАУЗЕР ПОДДЕРЖИВАЕТ ВИДЕОФАЙЛЫ </video>

<audiо controls="controls">

ВАШ БРАУЗЕР ПОДДЕРЖИВАЕТ АУДИОФАЙЛЫ </audio></body></html>

Новый элемент <source> определяет источник медиаданных.

Файловые форматы аудио и видео

В анимационной графике используются форматы, предложенные разработчиками анимационных программных пакетов, например в программе Autodesk Animator Pro используются форматы FLI, FLC и ZEL. К анимационным программам для Web можно отнести: Microsoft GIF Animator, Animagic GIF, GIF Construction Set и др.

Расширениями звуковых файлов являются aiff, aif, au, avr, hcom, iff, nsp, sf, smp, snd, sou, voc, wav. Такое многообразие расширений появилось из-за большого количества программ для работы со звуком. Файлы с нотной записью будут иметь расширения amf, cmf, dmf, far, mid, mod, mtm, nst, okt, org, rol, sbi, sng, stm, s3m, ult, wow, xm.

Формат SWF

Векторный формат SWF (Shockwave Flash) был разработан компанией Macromedia, затем права фирмы Macromedia были куплены фирмой Adobe, и файлы формата SWF стали создаваться в программе Adobe Flash. Данный формат в первую очередь предназначен для хранения анимации. Для правильного отображения файлов формата SWF на компьютере пользователя должен быть установлен соответствующий подключаемый модуль.

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

Файлы, созданные с помощью технологии Flash, имеют расширение swf. Они могут содержать изображения в векторном формате, звук, мультфильмы, элементы управления, интерактивные эффекты. Для их просмотра используется проигрыватель Flash Player — элемент управления ActiveX, который встроен в последние версии браузеров или его следует инсталлировать на компьютер.

Формат OGG

Формат Ogg Vorbis — открытый формат аудиосжатия, появившийся летом 2002 года. Он предназначен для аудиокомпрессий и относится к тому же типу форматов, что и MP3, ААС, VQF и WMA, то есть к форматам компрессии с потерями. Достоинством формата Ogg Vorbis является его полная открытость и свободность. Формат Ogg Vorbis не ограничивается двумя аудиоканалами

(стерео — левый и правый), он поддерживает до 255 отдельных каналов с частотой дискретизации до 192 кГц и разрядностью до 32 бит (чего не позволяет ни один формат сжатия с потерями). Используется для кодирования 6- канального звука DVD-Audio. Данные формата Ogg Vorbis хранятся в файлах с расширением .ogg.

Формат AVI

Формат AVI (Audio Video Interleaved -- чередующиеся аудио- и видеоданные) предназначен для записи звука pi движущихся изображений и соответствует | спецификации RIFF (Resource Interchange File Format - файловый форма: обмена ресурсами). Данные формата AVI, которые можно редактировать, экспортировать и сжимать, хранятся в файлах с расширением .avi. Для их воспроизведения необходима специальная программа, которая входит в комплект поставки некоторых браузеров. Если в составе вашего браузера нет такой про граммы, ее можно загрузить из Интернета.

Формат MOV

Формат MOV, или QuickTime, разработанный фирмой Apple, предназначен для создания, хранения и воспроизведения данных мультимедиа. QuickTime позволяет объединить звук, текст, анимацию и видео в одном файле.

Семейство форматов MPEG

При работе с цифровым видеосигналом возникает необходимость обработки, передачи и хранения очень больших объемов информации. В связи с этим стала актуальной проблема сжатия видеоданных, для решения которой были разработаны эффективные методы и алгоритмы. Группа MPEG (Moving Pictures Experts Group) предложила технологию компактного представления цифровых видео- и аудиосигналов.

Эта группа занимается разработкой стандартов сжатия цифрового видео и звука. Такие форматы, как правило, требуют использования кодеков (кодеров/ I декодеров). Существует несколько версий кодека MPEG, например: MPEG-1 MPEG-2, MPEG-3, MPEG-4, MPEG-7, MPEG-j.

Формат WAV

Формат WAV (от англ, wave - волна) был создан корпорацией Microsoft и принят в качестве стандарта для звукового сопровождения операционной системы и компьютерных игр. Wav-данные хранятся в файлах с расширением wav.

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

Формат AIFF

Формат AIFF (Audio Interchange File Format — формат обмена аудиоданными) — популярный формат, применяемый на платформе Macintosh, а также используемый для записи аудиоинформации на компакт-диски. Данные в формате AIFF хранятся в файлах с расширением AIF. В файле формата AIFF хранятся аудиоданные, информация о том, записан звук как стерео или как моно, число битов, образец, а также сведения, применяемые при обработке аудиофайлов.

Формат MP3

Формат MP3 (mpeg-1 Audio Layer-З) позволяет создавать файлы небольшого размера, при воспроизведении которых обеспечивается исходное качество звука.

Потоковое видео

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

Технология Real Audio/Video — это технология передачи аудио- и видеоинформации, разработанная фирмой Progressive Networks. Для воспроизведения данных необходим дополнительный модуль RealPlayer. Файлы, которые могут обрабатываться модулем RealPlayer, имеют расширения rа, ram, .rm, rmn и rmd.

Технология Windows Media Server предлагает набор цифровых компонентов для работы с мультимедиа. Windows Media Player поддерживает форматы WAV, AVI, MIDI, VOD, AIFF и MPEG-2 LAYER-3 (MP3).

Технология QuickTime поддерживает потоковую передачу видео, аудио, текста и MIDI-информации в реальном масштабе времени.

Текстовые данные

Рассмотрим пример использования элемента <article>

Этот но вый элемент выводит на экран внешние текстовые данные.

Пример создания веб-страницы, содержащей внешние текстовые данные

<! DOCTYPE НТМL>

<html><head><titlе> ВНЕШНИЕ ДАННЫЕ </title></head>

<а href="http://blog.netscape.com/2007/12/28/ end-of-support-for-netscape-web-browsers">

Вы знаете что такое Netscape?</a><br />

Эта корпорация участвовала в развитии Интернета</article></body>

Аббревиатура

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

Пример, содержащий аббревиатуру

<! DOCTYPE НТМL>

<html><head><titlе> Аббревиатура </title></head>

<body> Учебное заведение < аbbr title =”ДАГЕСТАНСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ">ДГУ</ аbbr > был основан 27 апреля (9 мая по н. ст.) 1932 г. </ body ></ html >

Внешние данные

Новый элемент <aside>управляет внешними данными

Пример, содержащий внешние данные

<! DOCTYPE НТМL>

<html><head><titlе> Управление внешними данными </title></head>

<body> <р>0перации отрицания, конъюнкции, дизъюнкции</р>

<aside>

<H4>АЛГЕБРА Л0ГИКИ</H4>

Операции эквивалентности или двойной импликации </aside></body></html>

Направление текста

Новый элемент <bdo> управляет направлением отображаемого текста Имеет обязательный атрибут dir, который принимает значения ltr (слева направо) и rtl (справа налево).

Пример, содержащий текст разного направления

<!DOCTYPE HTML>

<html><head><title> Текст разного направления </title></head>

ЭТОТ ТЕКСТ НАПИСАН СПРАВА-НА-ЛЕВО.

</bdo></body></html>

Кнопки

Новый элемент < button > сам создает кнопку и управляет нажатием на неё

Пример создания кнопки

<!DOCTYPE HTML>

<html><head><title> Кнопка </title></head>

<body><button type="button">НАЖМИ MEHЯ!</button></body></html>

Новый элемент <command> управляет различными внешними кнопками по средством кода:

Канва

Новый элемент <canvas> используется для рисования графических объектов списка данных. Элемент <canvas> позволяет отображать различную графическую информацию. Имеет атрибуты height (высота), width (ширина), которые определяют размер канвы.

Можно сказать, что canvas — это плоская фиксированная растровая графика. Являясь объектом, он имеет примитивы:

canvas.beginPath();

canvas.closePath();

canvas.fill ();

canvas. Stroke() ;

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

canvas.rect(25.25,550,550):

canvas.fillStyle="#FAFAA2";<!—Цвет заливки-->

canvas.strokeStyle="#000#;

canvas.1inewidth=50;

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

canvas.arc(300,300,275,0.Math.PI*2.true);

canvas.fillstyle="#FAFAA2":

canvas.strokeStyle="#000#

canvas.linewidth=50;

Для размещения изображения можно воспользоваться кодом:

var pepelsbey=new Image();<!—Новое изображение -->

epelsbey.src=pepelsbey.png; <!—Источник изображения -->

pepelsbey.onload=function()

canvas.drawlmage(pepelsbey.44,44);

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

<!DOCTYPE HTML>

<html><head><title> Красный квадрат </t1tle></head>

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext( '2d' ); ctx.fillStyle='#FF0000':

ctx.fillRect(0.0.80.100);</script></body></html>

Список данных

Новый элемент < datalist > управляет выводом на экран списка данных.

Пример создания списка данных

<!DOCTYPE HTML>

<html><head><title>Список данных </t1tle></head>

</datalist><body></html >

Формы

Элемент <fieldset> управляет выводом на экран формы с набором полей

Пример создания формы с набором полей

<!DOCTYPE HTML>

<html><head><title> Форма с набором полей</title></head>

<1egend>ПEPCOHAЛЬНЫE ДАННЫЕ: </legend>

ФАМИЛИЯ: <input type="text" /><br />

Email: <input type="text" /><br />

ДАТА РОЖДЕНИЯ: <input type="text" /></fieldset></form>

</body></html>

Новый элемент < keygen > определяет ключ генерации.

Новый элемент < output> используется в форме, определяя вывод:

</form>

Новый элемент <nav> выводит на экран навигационную панель:

<nav>

<а href="default.asp">ДОМОЙ</a>

<а href="tag_meter.аsр”>ПРЕДЫДУЩИЙ</а>

<а href="tag_noscript.аsр">СЛЕДУЮЩИЙ</а>

</nav>

Заголовок объекта

Элемент <figcaption> управляет выводом на экран заголовка к фигуре, заданной элементом <figure>.

Пример создания заголовка объекта

<!DOCTYPE HTML>

<html><head><title>3aголовок объекта </title></head><body>

<p> Организация World Wildlife Foundation была основана в 1961 году...</р>

</figure></body></html >

Маркировка

Элемент <mark> форматирует текст, выполняя его маркировку.

Пример создания маркировки

<!DOCTYPE HTML>

<html><head><title>Маркировка</title></head>

<body><р>ОБЬЕКТНО-ОРИЕНТИРОВАННЫМИ ЯЗЫКАМИ ПРОГРАММИРОВАНИЯ ЯВЛЯЮТСЯ <mark>DELPHI, PHP, СИ++</ mark > И ДРУГИЕ ЯЗЫКИ.</р>

</body></html>

Контроль времени

В версии языка НТМL 5 появился элемент <time>, который позволяет контролировать дату и время. Единственный атрибут <datetime> определяет дату и время

Пример, содержащий контроль времени

<!DOCTYPE HTML>

<html><head><title>Дата и время </title></head>

Занятия начинаются в университете в < time >9:00</ time > каждое утро</р> <р>ВЕЛИКИЙ РУССКИЙ ПОЭТ А.С. ПУШКИН родился в < time datetime="1799-06-06">в M0CKBE</time></p></body></html>

Обработка событий

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

Атрибуты элемента <body> при обработке событий

Основные атрибуты элемента <body>, используемые при программировании обработки событий

Таблица Основные атрибуты элемента <body>, используемые при
программировании обработки событий

Атрибут	Описание
onafterprint	Управление действиями после печати документа
onbeforeprint	Управление действиями перед печатью документа
onbeforeonload	Управление действиями до загрузки документа
onblur	Управление действиями при потери окном фокуса
onerror	Управление действиями при возникновении ошибки
onfocus	Управление действиями при получении окном фокуса
onhaschange	Управление действиями при изменении документа
onload	Управление действиями при загрузке документа
onmessage	Управление действиями при получении сообщения
onoffline	Управление действиями при переходе документа в режим off-line
ononline	Управление действиями при переходе документа в режим on-line
onpagehide	Управление действиями, когда окно скрыто
onpageshow	Управление действиями, когда окно становится видимым
onpopstate	Управление действиями, когда история окна изменяется
onredo	Управление действиями, когда документ выполняет повтор
onresize	Управление действиями при изменении размера окна
onstorage	Управление действиями при загрузке документа
onundo	Управление действиями, когда документ выполняет отмену действий
onunload	Управление действиями, когда пользователь выходит из документа