DHTML
Dynamic HTML или DHTML — это способ создания интерактивного веб-сайта, использующий сочетание статичного языка разметки HTML, встраиваемого (и выполняемого на стороне клиента) скриптового языка JavaScript, CSS (каскадных таблиц стилей) и DOM (объектной модели документа).
Он может быть использован для создания приложения в веб-браузере: например для более простой навигации или для придания интерактивности форм. DHTML может быть использован для динамического перетаскивания элементов по экрану. Также он может служить как инструмент для создания основанных на браузере видеоигр.
DHTML приложения, которые вполне автономны в браузере, без серверной поддержки, такой как база данных, иногда вынуждены обращаться к Single Page Applications, или SPA. Смотрите сравнение браузерных движков, чтобы узнать больше о списке API-функций, доступных в каждом браузере для использования в DHTML-приложении.
Конкурирующая техника включает в себя Adobe Flash для анимации и апплеты (applets).
Структура веб-страницы
Обычно веб-страница, использующая DHTML, выглядит следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Заголовок страницы</title>
<script type="text/javascript">
window.onload= function () {
myObj = document.getElementById("navigation");
// .... какой-то код
}
</script>
</head>
<body>
<div id="navigation">
</div>
</body>
</html>Часто программа на JavaScript хранится во внешнем файле, а веб-страница просто связывается с ним. Это очень удобно, когда несколько страниц используют один и тот же программный код:
<script type="text/javascript" src="myjavascript.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
h2 {background-color: lightblue; width: 100%}
a {font-size: larger; background-color: goldenrod}
a:hover {background-color: gold}
#example1 {display: none; margin: 3%; padding: 4%; background-color: limegreen}
</style>
<script type="text/javascript">
<!--
function changeDisplayState (id) {
e=document.getElementById(id);
if (e.style.display == 'none' || e.style.display =="") {
e.style.display = 'block';
showhide.innerHTML = 'Hide example';
} else {
e.style.display = 'none';
showhide.innerHTML = 'Show example';
}
}
//-->
</script>
</head>
<body>
<h2>How to use a DOM function</h2>
<p><a href="switchon_javascript.html" id="showhide" onclick="changeDisplayState('example1'); return false">Show example</a></p>
<!-- В случае если в браузере отключен JavaScript, то при клике по ссылке будет открываться странице switchon_javascript.html,
где пользователя, например, можно попросить включить JavaScript. Варианты на ваше усмотрение.
Можно почитать "Почему <a href="javascript:..."> - плохо" http://javascript.ru/unsorted/why_href_js_is_bad -->
<div id="example1">
This is the example. (Additional information, which is only displayed on request)
..............</div>
<p>The general text continues ....</p>
<p></p>
</body>
</html>Презентации
S5 — это DHTML-презентация, которая может выполняться в современных браузерах. Единый XHTML-файл включает набор слайдов, которые могут просматриваться в режиме слайд-шоу (кадр за кадром, в полноэкранном представлении), а также распечатаны как пресс-релиз. С помощью DHTML легко реализуется динамическая навигация и простые анимационные эффекты. Разметка осуществляется с помощью CSS.
См. также
Ссылки
- QuirksMode, a comprehensive site with test examples and instructions on how to write DHTML code which runs on several browsers
- Cross-Browser, two cross-browser JavaScript libraries and demos
- DHTML Central, a web site with a DHTML library and several javascript components for menus, trees, and a library for simplifying cross-browser DHTML programming.
- HTML & DHTML Reference on MSDN
bg:DHTML cs:DHTML de:Dynamic HTML en:Dynamic HTML es:HTML dinámico eu:DHTML fa:دیاچتیامال fi:DHTML fr:HTML dynamique he:Dynamic HTML id:DHTML it:DHTML ja:ダイナミックHTML km:ឌីណាមិក HTML ko:DHTML nl:Dynamic HTML pl:Dynamiczny HTML pt:DHTML ro:Dhtml sk:Dynamické HTML sv:DHTML tr:DHTML uk:DHTML vi:HTML động zh:DHTML
Если вам нравится SbUP.com Сайт, вы можете поддержать его - BTC: bc1qppjcl3c2cyjazy6lepmrv3fh6ke9mxs7zpfky0 , TRC20 и ещё....
