- •1.1. Основные понятия приложений
- •1.2. Html-элементы div и span и каскадные таблицы стилей (css) – основа построения Web-страниц
- •1.3. Разработка компонента «Аккордеон»
- •1.4. «Аккордеон» начинает играть в браузере
- •1.5. «Аккордеон» заиграл на сервере
- •1.6. Размещение компонента «Аккордеон»
- •1.2. Основные понятия Пролога
- •1.3. Факты и правила
- •1.4. Пролог-программа. Цель
- •1.5. Начало работы на swi-Пролог
- •1.5.1 Написание, запуск и отладка пролог-программы
- •1.5.2 Предикаты ввода и вывода
- •1.5.3 Первая программа на Прологе
- •1.6. Механизм логического вывода: унификация
- •1.6.1 Как Пролог отвечает на вопросы
- •1.7. Списки в Прологе
- •Логическое программирование. Основы языка Пролог
- •Поиск решений Пролог-системой
1
Глава
Принципы
программирования
в Web
Эта глава из моей книги по SWI-Prolog http, см. репозиторий по книгам: Book2013_SWI-PrologHttp.
В ЭТОЙ ГЛАВЕ…
Гипертекст HTML
Каскадные таблицы стилей CSS
JavaScript
Динамическая модель документа DOM
DHTML – динамический HTML
Объект XMLHttpRequest
Ajax
jQuery
В
этой главе мы познакомимся с основными понятиями и принципами программирования в Интернете.
Основы
1.1. Основные понятия приложений
для Интернет
Это:
HTTP (Hypertext Transfer Protocol). Протокол передачи гипертекстовых файлов. Это протокол уровня приложений для распределенных информационных систем. Используется при передаче HTML-файлов по сети Web-страниц.
HTML (Hyper-Text Markup Language). Стандартный язык разметки, используемый для создания Web-страниц.
URL (Universal Resource Locator). Унифицированный указатель адреса размещения информационного ресурса (документа) в сети Интернет.
Ajax (Асинхронный JavaScript и XML). Новейшая технология разработки приложений для Интернет. До появления Ajax web-приложение выполнялось преимущественно на стороне web-сервера. Браузер играл преимущественно только роль монитора, отображавшего посланную ему сервером web-страницу. Ajax-приложение выполняется как на стороне сервера, так и на стороне клиента, отличаясь высочайшей производительностью: как будто вы работаете просто за своим компьютером, а не через сеть Интернет.
XML (Extensible Markup Language). Расширяемый язык разметки. Это новая технология для описания и структурирования данных. Это специальный стандарт, с помощью меток которого вы можете описывать данные на любом языке, например на обычном русском.
Ajax-технология – это не столько новая технология, сколько новый подход к разработке web-приложений, максимально использующий средства web-браузера. Средства web-браузера принято называть инфраструктурой Ajax. Инфраструктуру Ajax составляют:
документы HTML
объектная модель документа DOM
каскадные таблицы стилей CSS
язык программирования JavaScript
объект XMLHttpRequest web-браузера.
1.2. Html-элементы div и span и каскадные таблицы стилей (css) – основа построения Web-страниц
Описание …
Пример
См. мой локальный репозиторий Ajax: файлы divandspan.html и style1.css.
Листинг 1.2a. HTML-элементы DIV и SPAN (файл divandspan.html) |
<%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Test CSS</title> <link rel="stylesheet" type="text/css" href="style1.css"> </head> <body> <h1>Заголовок крупно</h1> <p> Абзацы P выделяются браузером. </p> <p> Это <b>полужирный шрифт</b>, а это <i>курсив</i>. </p> <div class="header1"> Элемент DIV может быть заголовком </div> <div class="paragraf1"> Подобно абзацу P, элемент DIV отображает блок текста. </div> <div> Другой способ выделения текста <span class="bold1">полужирным шрифтом</span> или <span class="italic1">курсивом</span> </div> <div> А вот для этого текста стиль можно задать <span id="mySpan">по идентификатору id=mySpan</span> </div> <div class="paragraf1"> Динамический HTML (DHTML) это: <b>HTML + CSS + DOM + JavaScript</b>. Можно считать, что Ajax это: <b>DHTML + XMLHttpRequest</b>. </div> </body> </html>
|
Листинг 1.2b. Каскадные таблицы стилей CSS (файл style1.css) |
h1 { text-align: center; color: indigo; font: italic bold 28pt/150% sans-serif }
.header1 { color: indigo; font: italic bold 28pt/150% sans-serif }
.paragraf1 { color: white; background-color: green; border: solid 2px blue; font: 14pt/150% sans-serif }
.bold1 { font: bold 14pt/150% sans-serif }
.italic1 { font: italic 14pt/150% sans-serif }
#mySpan { border: solid 2px; border-color: orange red }
|
Рис.1.2. РаботаютHTML-элементыDIVиSPANи каскадные таблицы стилейCSS
Применим рассмотренные компоненты к написанию Ajax-приложения «Аккордеон».