Scribd Logo

Язык

Загрузить

Добро пожаловать в Scribd!

Динамический HTML

Загружено:

Артём Ноздрачев
11 просмотров18 страниц
Документация HTML

Авторское право

© © All Rights Reserved

Доступные форматы

PPTX, PDF, TXT или читайте онлайн в Scribd

Этот документ был вам полезен?

Это неприемлемый материал?

Пожаловаться на этот документ
Документация HTML

Авторское право:

© All Rights Reserved
Скачайте в формате PPTX, PDF, TXT или читайте онлайн в Scribd
Отметить как неприемлемый контент
11 просмотров18 страниц

Динамический HTML

Загружено:

Артём Ноздрачев
Документация HTML

Авторское право:

© All Rights Reserved
Скачайте в формате PPTX, PDF, TXT или читайте онлайн в Scribd
Отметить как неприемлемый контент
из 18

Создание веб-сайтов

§ 31. ДИНАМИЧЕСКИЙ HTML

1
Создание веб-сайтов, 11 класс 2

Что такое DHTML?


Динамический HTML (DHTML) – это технология
создания интерактивных сайтов, использующая HTML,
CSS, язык программирования (чаще всего JavaScript) и
объектную модель документа (англ. DOM = Document
Object Model).

<html> document
<head> html
<title>DOM</title>
</head> head body
<body>
<p>Привет, title p
<em>Вася!</em></p>
</body> DOM Привет, em
</html> Вася!
 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru
Создание веб-сайтов, 11 класс 3

«Живой» рисунок

box_closed.gif box_opened.gif
<img src="box_closed.gif"
onMouseOver="this.src='box_opened.gif'"
onMouseOut="this.src='box_closed.gif'">

свойство
свойство src
src обработчик
обработчик события
события вложенные
вложенные
этого объекта
этого объекта (Javascript)
(Javascript) кавычки
кавычки
this.src='box_opened.gif'

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 4

Скрытый блок

ЛКМ

<div id="details" class="hidden">


Детали &#151; это гайка, шайба, болт, винт,
шуруп, гвоздь и др.
</div>

.hidden {
display:none;
? Зачем нужен id?
}
не показывать block – во всю ширину
inline – в тексте

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 5

Javascript-файл
Файл test.js
функция имя функции

function show ( name ) найти элемент по id


{ переменная
var elem = document.getElementById(name);
if ( elem ) если нашли
elem.style.display = "block";
}
изменить свойство block – во всю ширину
display inline – в тексте
none – не показывать

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 6

Подключение Javascript-файла

<head>
<script src="test.js"></script>
...
</head> имя файла

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 7

Вызов функции
ссылка на эту
страницу по щелчку вызвать
функцию
<a href="#"
onClick="show('details');return false;">
Показать детали
</a>
дальнейшая
обработка (переход
по ссылке) не нужна

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 8

HTML-файл
<html>
<html>
<head>
<head>
<title>Скрытый
<title>Скрытый блок</title>
блок</title>
<script
<script src="test.js"></script>
src="test.js"></script>
<link
<link rel="stylesheet"
rel="stylesheet" href="test.css">
href="test.css">
</head>
</head>
<body>
<body>
<a
<a href=#
href=# onClick="show('details');
onClick="show('details'); return
return false;">
false;">
Показать
Показать детали</a>
детали</a>
<div id="details" class="hidden">
Детали &#151; это гайка, шайба, болт, винт,
шуруп, гвоздь и др.
</div>
</body>
</body>
</html>
</html>

? Как сделать два скрытых блока?


 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru
Создание веб-сайтов, 11 класс 9

Формы

форма – набор элементов диалога

<form name="calc">
поле ввода
<input name="answer">
кнопка
<input type="button"
value="Готово" текст на кнопке
onClick="check();">
</form> что делать при щелчке
 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru
Создание веб-сайтов, 11 класс 10

Формы
<form name="calc">
<input name="answer">
<input type="button"
value="Готово"
onClick="check();">
</form>
Обработка события «щелчок мышью»: В файл
calc.js
function check() введённый текст
{
if ( calc.answer.value == "4" )
alert("Правильно!");
else alert("Неправильно!");
}

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов

§ 32. XML И XHTML

11
Создание веб-сайтов, 11 класс 12

В чём проблема?
Интеграция (объединение) информационных систем

А В
обмен данными

Б ? В каком формате?
Двоичные файлы:
 небольшой объём
 множество форматов, приёмник должен
суметь прочитать файл

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 13

В чём проблема?
Задачи:
•универсальный формат
•текстовая форма
•понятен человеку при просмотре
•только содержание (без оформления)
•сохранение структуры (главы, разделы)
•автоматическая обработка
HTML:
 содержит тэги физической разметки
 нельзя вводить новые тэги
 нестрогий синтаксис (можно не закрывать <p>)

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 14

Что такое XML?


<?xml version="1.0"?>
<компьютер>
<процессор частота="2 ГГц">Intel Celeron
</процессор>
<память фирма="Kingston">2048 Мб</память>
<винчестер фирма="Seagate">320 Гб
</винчестер>
<периферия>
<монитор>Philips 190C1SB</монитор>
<клавиатура>Logitech Classic 200
</клавиатура>
<мышь>Genius Navigator 600</мышь>
</периферия>
</компьютер>

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 15

Что такое XML?


XML = eXtensible Markup Language
(расширяемый язык разметки)
• тэги-контейнеры в угловых скобках
<тэг>... </тэг>
• атрибуты тэгов (дополнительные данные)
<тэг атрибут="значение">... </тэг>
• можно вводить новые тэги
• нет никаких тэгов оформления, только данные
• в контейнер могут быть вложены другие контейнеры
иерархия – дерево!

! Это иерархическая база данных!

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 16

Использование XML
• документы Microsoft Office и OpenOffice.org:
набор XML-файлов  zip-архив
• RSS (ленты новостей на сайтах и в блогах)
• MathML (описание математических формул)
• SVG (векторная графика на веб-страницах)
• файлы настроек (конфигурации) программ
• электронные книги .fb2
• XAML – язык описания интерфейсов в Windows 8

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 17

XML: «за» и «против»


 открытый текстовый формат
 не зависит от ОС и ПО
 строгие правила, стандарты  легко обрабатывать в
программах
 удобен для многоуровневых списков и
иерархических БД
 сложно описать структуры, отличающиеся от
иерархии (графы)
 не различаются типы данных (число, текст,
дата, время, логическое значение)
 большой объем файлов

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru


Создание веб-сайтов, 11 класс 18

XHTML
Задача: автоматическая обработка веб-страниц
HTML:  нестрогий синтаксис (можно не закрывать
<p>)
 не различаются
XHTML = eXtensible Hypertextзаглавные и строчные буквы
Markup Language
•имена тегов и атрибутов – только строчные буквы
•все тэги должны быть закрыты (например, <br />)
•правильная вложенность тэгов
<p><strong>Вася</p></strong>
•значения атрибутов в кавычках
<img src="dog.jpg" alt="Пес Барбос" />
•замена служебных символов:
«<»  «&lt;» «&»  «&amp;»
HTML
XHTML
 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru

Вам также может понравиться