Создание веб-сайтов. Динамический HTML

Февраль 26, 2021

Главная
Информатика
Создание веб-сайтов. Динамический HTML

Содержание

2. Что такое DHTML? Динамический HTML (DHTML) – это технология создания интерактивных сайтов, использующая HTML, CSS, язык
3. «Живой» рисунок box_closed.gif box_opened.gif onMouseOver="this.src='box_opened.gif'" onMouseOut="this.src='box_closed.gif'"> this.src='box_opened.gif' свойство src этого объекта вложенные кавычки обработчик события (Javascript)
4. Скрытый блок ЛКМ Детали  это гайка, шайба, болт, винт, шуруп, гвоздь и др. .hidden {
5. Javascript-файл Файл test.js function show ( name ) { var elem = document.getElementById(name); if ( elem
6. Подключение Javascript-файла ... имя файла
7. Вызов функции onClick="show('details');return false;"> Показать детали ссылка на эту страницу дальнейшая обработка (переход по ссылке) не
8. HTML-файл Скрытый блок Показать детали Детали  это гайка, шайба, болт, винт, шуруп, гвоздь и др.
9. Формы value="Готово" onClick="check();"> форма – набор элементов диалога поле ввода кнопка текст на кнопке что делать
10. Формы value="Готово" onClick="check();"> function check() { if ( calc.answer.value == "4" ) alert("Правильно!"); else alert("Неправильно!"); }
11. Создание веб-сайтов § 32. XML и XHTML
12. В чём проблема? Интеграция (объединение) информационных систем А В Б обмен данными Двоичные файлы: небольшой объём
13. В чём проблема? Задачи: универсальный формат текстовая форма понятен человеку при просмотре только содержание (без оформления)
14. Что такое XML? Intel Celeron 2048 Мб 320 Гб Philips 190C1SB Logitech Classic 200 Genius Navigator
15. Что такое XML? XML = eXtensible Markup Language (расширяемый язык разметки) тэги-контейнеры в угловых скобках ...
16. документы Microsoft Office и OpenOffice.org: набор XML-файлов → zip-архив RSS (ленты новостей на сайтах и в
17. XML: «за» и «против» открытый текстовый формат не зависит от ОС и ПО строгие правила, стандарты
19. Скачать презентацию

Что такое DHTML?
Динамический HTML (DHTML) – это технология создания интерактивных сайтов, использующая

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

DOM

Привет,
Вася!

document

html

head

title

DOM

body

Привет,

Вася!

«Живой» рисунок
box_closed.gif
box_opened.gif
onMouseOver="this.src='box_opened.gif'"
onMouseOut="this.src='box_closed.gif'">
this.src='box_opened.gif'
свойство src этого объекта
вложенные кавычки
обработчик события (Javascript)

Скрытый блок
ЛКМ

Детали — это гайка, шайба, болт, винт, шуруп, гвоздь

и др.

.hidden {
display:none;
}

не показывать

block – во всю ширину
inline – в тексте

Javascript-файл
Файл test.js
function show ( name )
{
var elem = document.getElementById(name);

if ( elem )
elem.style.display = "block";
}

найти элемент по id

функция

имя функции

переменная

если нашли

изменить свойство display

block – во всю ширину
inline – в тексте
none – не показывать

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

...

имя файла

Вызов функции
onClick="show('details');return false;">
Показать детали

ссылка на эту страницу
дальнейшая обработка (переход

по ссылке) не нужна

по щелчку вызвать функцию

HTML-файл

Скрытый блок

false;">
Показать детали

Детали — это гайка, шайба, болт, винт,
шуруп, гвоздь и др.

Формы

value="Готово"
onClick="check();">

форма – набор

элементов диалога

поле ввода

кнопка

текст на кнопке

что делать при щелчке

Формы

value="Готово"
onClick="check();">

function check()
{
if (

calc.answer.value == "4" )
alert("Правильно!");
else alert("Неправильно!");
}

Обработка события «щелчок мышью»:

В файл
calc.js

введённый текст

Создание веб-сайтов
§ 32. XML и XHTML

В чём проблема?
Интеграция (объединение) информационных систем
А
В
Б
обмен данными
Двоичные файлы:
небольшой объём
множество форматов, приёмник должен

суметь прочитать файл

В чём проблема?
Задачи:
универсальный формат
текстовая форма
понятен человеку при просмотре
только содержание (без оформления)
сохранение структуры

(главы, разделы)
автоматическая обработка

HTML:

содержит тэги физической разметки
нельзя вводить новые тэги
нестрогий синтаксис (можно не закрывать

)

Что такое XML?

<компьютер>
<процессор частота="2 ГГц">Intel Celeron

<память фирма="Kingston">2048 Мб

Что такое XML? Intel Celeron 2048 Мб 320 Гб Philips 190C1SB Logitech

<винчестер фирма="Seagate">320 Гб

<периферия>
<монитор>Philips 190C1SB
<клавиатура>Logitech Classic 200

<мышь>Genius Navigator 600

Что такое XML?
XML = eXtensible Markup Language
(расширяемый язык разметки)
тэги-контейнеры в

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

Слайд 16

документы Microsoft Office и OpenOffice.org:
набор XML-файлов → zip-архив
RSS (ленты новостей на

сайтах и в блогах)
MathML (описание математических формул)
SVG (векторная графика на веб-страницах)
файлы настроек (конфигурации) программ
электронные книги .fb2
XAML – язык описания интерфейсов в Windows 8

Использование XML

Слайд 17

XML: «за» и «против»
открытый текстовый формат
не зависит от ОС и ПО
строгие правила,

стандарты ⇒ легко обрабатывать в программах
удобен для многоуровневых списков и иерархических БД

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

Создание веб-сайтов. Динамический HTML

Содержание

Слайд 2

Что такое DHTML?
Динамический HTML (DHTML) – это технология создания интерактивных сайтов, использующая

Слайд 3

«Живой» рисунок
box_closed.gif
box_opened.gif
onMouseOver="this.src='box_opened.gif'"
onMouseOut="this.src='box_closed.gif'">
this.src='box_opened.gif'
свойство src этого объекта
вложенные кавычки
обработчик события (Javascript)

Слайд 4

Скрытый блок
ЛКМ

Детали — это гайка, шайба, болт, винт, шуруп, гвоздь

Слайд 5

Javascript-файл
Файл test.js
function show ( name )
{
var elem = document.getElementById(name);

Слайд 6

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

...

имя файла

Слайд 7

Вызов функции
onClick="show('details');return false;">
Показать детали

ссылка на эту страницу
дальнейшая обработка (переход

Слайд 8

HTML-файл

Скрытый блок

false;">
Показать детали

Детали — это гайка, шайба, болт, винт,
шуруп, гвоздь и др.

Слайд 9

Формы

value="Готово"
onClick="check();">

форма – набор

Слайд 10

Формы

value="Готово"
onClick="check();">

function check()
{
if (

Слайд 11

Создание веб-сайтов
§ 32. XML и XHTML

Слайд 12

В чём проблема?
Интеграция (объединение) информационных систем
А
В
Б
обмен данными
Двоичные файлы:
небольшой объём
множество форматов, приёмник должен

Слайд 13

В чём проблема?
Задачи:
универсальный формат
текстовая форма
понятен человеку при просмотре
только содержание (без оформления)
сохранение структуры

Слайд 14

Что такое XML?

<компьютер>
<процессор частота="2 ГГц">Intel Celeron

<память фирма="Kingston">2048 Мб

Слайд 15

Что такое XML?
XML = eXtensible Markup Language
(расширяемый язык разметки)
тэги-контейнеры в

Слайд 16

документы Microsoft Office и OpenOffice.org:
набор XML-файлов → zip-архив
RSS (ленты новостей на

Слайд 17

XML: «за» и «против»
открытый текстовый формат
не зависит от ОС и ПО
строгие правила,

Создание веб-сайтов. Динамический HTML

Содержание

Что такое DHTML?Динамический HTML (DHTML) – это технология создания интерактивных сайтов, использующая

«Живой» рисунокbox_closed.gifbox_opened.gif onMouseOver="this.src='box_opened.gif'" onMouseOut="this.src='box_closed.gif'">this.src='box_opened.gif'свойство src этого объектавложенные кавычкиобработчик события (Javascript)

Скрытый блокЛКМДетали — это гайка, шайба, болт, винт, шуруп, гвоздь

Javascript-файлФайл test.js function show ( name ){ var elem = document.getElementById(name);

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

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

HTML-файл Скрытый блок false;"> Показать детали Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др.

Формы value="Готово" onClick="check();">форма – набор

Формы value="Готово" onClick="check();">function check(){if (

Создание веб-сайтов§ 32. XML и XHTML

В чём проблема?Интеграция (объединение) информационных системАВБобмен даннымиДвоичные файлы:небольшой объёммножество форматов, приёмник должен

В чём проблема?Задачи:универсальный форматтекстовая формапонятен человеку при просмотретолько содержание (без оформления)сохранение структуры

Что такое XML?<компьютер> <процессор частота="2 ГГц">Intel Celeron <память фирма="Kingston">2048 Мб

Что такое XML?XML = eXtensible Markup Language (расширяемый язык разметки)тэги-контейнеры в

документы Microsoft Office и OpenOffice.org: набор XML-файлов → zip-архивRSS (ленты новостей на

XML: «за» и «против»открытый текстовый форматне зависит от ОС и ПОстрогие правила,

Похожие презентации

Что такое DHTML?
Динамический HTML (DHTML) – это технология создания интерактивных сайтов, использующая

«Живой» рисунок
box_closed.gif
box_opened.gif
onMouseOver="this.src='box_opened.gif'"
onMouseOut="this.src='box_closed.gif'">
this.src='box_opened.gif'
свойство src этого объекта
вложенные кавычки
обработчик события (Javascript)

Скрытый блок
ЛКМ

Детали — это гайка, шайба, болт, винт, шуруп, гвоздь

Javascript-файл
Файл test.js
function show ( name )
{
var elem = document.getElementById(name);

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

...

имя файла

Вызов функции
onClick="show('details');return false;">
Показать детали

ссылка на эту страницу
дальнейшая обработка (переход

HTML-файл

Скрытый блок

false;">
Показать детали

Детали — это гайка, шайба, болт, винт,
шуруп, гвоздь и др.

Формы

value="Готово"
onClick="check();">

форма – набор

Формы

value="Готово"
onClick="check();">

function check()
{
if (

Создание веб-сайтов
§ 32. XML и XHTML

В чём проблема?
Интеграция (объединение) информационных систем
А
В
Б
обмен данными
Двоичные файлы:
небольшой объём
множество форматов, приёмник должен

В чём проблема?
Задачи:
универсальный формат
текстовая форма
понятен человеку при просмотре
только содержание (без оформления)
сохранение структуры

Что такое XML?

<компьютер>
<процессор частота="2 ГГц">Intel Celeron

<память фирма="Kingston">2048 Мб

Что такое XML?
XML = eXtensible Markup Language
(расширяемый язык разметки)
тэги-контейнеры в

документы Microsoft Office и OpenOffice.org:
набор XML-файлов → zip-архив
RSS (ленты новостей на

XML: «за» и «против»
открытый текстовый формат
не зависит от ОС и ПО
строгие правила,