Сканеры и сканирование


ЭЛЕМЕНТЫ ЯЗЫКОВ HTML И JAVASCRIPT


ГЛАВА 10 ЭЛЕМЕНТЫ ЯЗЫКОВ HTML И JAVASCRIPT
ГЛАВА 10. ЭЛЕМЕНТЫ ЯЗЫКОВ HTML И JAVASCRIPT Элементы языков HTML и JAVASCRIPT Основные понятия Форматирование текстов Стандартные логические стили Управление шр...
Элементы языков HTML и JAVASCRIPT
Элементы языков HTML и JAVASCRIPT При создании Web-сайта в числе прочих решаются две основные задачи, связанные с графикой: графическое оформление или, иначе говоря, создание сти...
Бегущая строка
Бегущая строка Internet Explorer поддерживает тэг <MARQUEE>, который позволяет создать так называемую бегущую строку, т. е. эффект прокручивания текста в заданном поле. Характерис...
Бегущая строка
Рисунок 655. Бегущая строка  ...
Специальные и зарезервированные символы
Специальные и зарезервированные символы При формировании документа HTML может потребоваться ввести символы, которые воспринимаются браузером как служебные. Например, нельзя использовать...
Эквиваленты некоторых часто употребляемых зарезервированных символов
Рисунок 656. Эквиваленты некоторых часто употребляемых зарезервированных символов Тэг <SAMP> применен только для того, чтобы использовать моноширинный шрифт. Многократное использо...
Графика на Webстраницах
Графика на Web-страницах В большинстве Web-страниц встречается графика. Она позволяет красочно и наглядно представить информацию. Во многих случаях лучше показать картинку, чем давать д...
Вставка графических изображений
Вставка графических изображений Вставка на страницу графического изображения из файла графического формата производится с помощью тэга <IMG> (от англ, image — изображение) с указ...
Текст обтекает картинку справа
Рисунок 657. Текст обтекает картинку справа Широкие возможности точного позиционирования изображений (как и других элементов) на странице предоставляют таблицы и стили. Эти элементы HTM...
Фоновая графика
Фоновая графика Чтобы украсить страницу, можно заполнить фон картинкой из графического файла. Фоновое изображение — это графический файл, содержащий картинку (желательно небольшого разм...
Ссылки
Ссылки Ссылки (или гиперссылки) позволяют щелчком кнопки мыши на выделенном тексте или изображении перейти к другому файлу или фрагменту страницы. Ссылки применяются в большинстве с...
Index16
  Текстовые ссылки Структура текстовой ссылки имеет следующий вид (обратите внимание на закрывающий тег ссылки </А>) : <А НREF="адрес_ссылки"> текст_...
Графические ссылки
Графические ссылки Структура графической ссылки имеет вид: <А НREF="адрес_ссылки"> <IMG SRS="имя_графического_файла"> Например, следующий тэг описывает ссыл...
URLадреса ссылок
URL-адреса ссылок В рассмотренных выше примерах в качестве адреса ссылки использовалось имя файла. В общем случае можно применять URL-адрес (Uniform Resource Locator, Унифицированный ук...
Ссылки в пределах одного документа
Ссылки в пределах одного документа Иногда оказывается полезным организовать ссылки на разделы одного и того же документа. Например, на своей странице вы размещаете статью объемом в неск...
Пример документа содержащего ссылки на свои разделы и отдельные фрагменты
Рисунок 658. Пример документа, содержащего ссылки на свои разделы и отдельные фрагменты  ...
Основные понятия
Основные понятия Описание Web-страницы содержится в HTML-программе (HTML-коде), который хранится в обычном текстовом файле с расширением htm или html. Иногда эти программы называют HTML...
Webстраница с учебными примерами по HTML и JavaScript (www admiral ru/~dunaev)
Рисунок 643. Web-страница с учебными примерами по HTML и JavaScript (www.admiral.ru/~dunaev) Здесь IMG — название тэга, SRC — атрибут, а «картинкa.jpg» — аргумент атрибута SRC. Итак,...
HTMLкод в окне текстового редактора Блокнот (Notepad)
Рисунок 644. HTML-код в окне текстового редактора Блокнот (Notepad) Сохраним нашу программу в файле с расширением htm или html. Например, назначим имя файла npoбa.htm. Чтобы получилось н...
HTMLдокумент в окне браузера Internet Explorer
Рисунок 645. HTML-документ в окне браузера Internet Explorer Если потребуется что-то изменить в HTML-коде, то, не выходя из окна браузера, в меню Вид выберите команду Просмотр HTML-...
На вкладке HTML окна FrontPage можно посмотреть и отредактировать HTMLкод
Рисунок 647. На вкладке HTML окна FrontPage можно посмотреть и отредактировать HTML-код Если вы хотите посмотреть, как будут выглядеть результаты вашего творчества в окне браузера, перей...
Таблицы
Таблицы Довольно часто на Web-страницах встречаются таблицы. Простейший пример табличной организации данных — прайс-лист. Однако таблицы можно использовать просто как способ форматирова...
Простая таблица встроенная в текст
Рисунок 659. Простая таблица, встроенная в текст Несколько ячеек могут быть объединены в одну как по горизонтали, так и по вертикали. Объединение по столбцам применяют тогда, когда надо, чт...
Пример объединения ячеек
Рисунок 660. Пример объединения ячеек Как шириной всей таблицы, так и шириной каждой отдельной ячейки можно управлять. Ширину всей таблицы можно задать как в пикселах, так и в процентах...
Пример таблицы с заданной шириной ячеек
Рисунок 661. Пример таблицы с заданной шириной ячеек Текст и графику внутри ячеек таблиц можно выравнивать. Горизонтальное и вертикальное выравнивание содержимого рядов задается с помощью а...
Примеры оформления таблиц
Рисунок 662. Примеры оформления таблиц В следующем примере используем таблицу без рамок как способ размещения различных элементов на странице. В ячейки помещены текстовые ссылки, картинки...
Пример размещения нескольких элементов с помощью таблицы без рамок
Рисунок 663. Пример размещения нескольких элементов с помощью таблицы без рамок Эти атрибуты вставляются в тэг <TABLE>. Чтобы они действительно работали, необходимо присутствие ещ...
Стили
Стили Существует еще один прием позиционирования элементов и достижения внешних эффектов, которые могут украсить страницу и привлечь к ней внимание читателей. Этот прием основан на опре...
Стили заголовков первого и второго уровней заданы атрибутами тэга <STYLE1>
Рисунок 664. Стили заголовков первого и второго уровней заданы атрибутами тэга <STYLE1> Можно определить стиль для тэга BODY. Тогда весь текст, находящийся между тэгами <BODY&g...
Позиционирование элементов
Позиционирование элементов Выше мы говорили о том, что позиционировать элементы страницы можно путем использования таблиц. Но это же можно делать и с помощью стилей. Среди параметров ст...
Использование свойства iindex
Рисунок 666. Использование свойства i-index позволяет изменить естественный порядок следования элементов в тексте HTML-документа При позиционировании элементов может оказаться, что размеры...
Механизм прокрутки текста реализованный с помощью свойства overflow
Рисунок 667. Механизм прокрутки текста, реализованный с помощью свойства overflow Конечно, неказистые страницы с предыдущих рисунков создавались лишь с целью продемонстрировать возможно...
Пример создания трехмерного текста с помощью CSS
Рисунок 668. Пример создания трехмерного текста с помощью CSS <HTML> <HEAD> <TITLE>3d эффект</ТITLE> <НЕАD> <STYLE1> P (font-family: "sans-s...
Статические фильтры
Статические фильтры Фильтры — это эффекты изменения внешнего вида графики и текста на странице. С помощью фильтров вы можете отражать тексты и графику, создавать эффект движения и други...
Пример применения фильтров flipv fliph u blur
Рисунок 669. Пример применения фильтров flipv, fliph u blur Покажем работу еще двух фильтров: Хгау и Wave. <HTML> <НЕАD> <TITLE>Фильтры</TITLE> </НЕАD>...
Пример применения фильтров Хгау и Wave
Рисунок 670. Пример применения фильтров Хгау и Wave  ...
Динамические фильтры
Динамические фильтры Эффекты постепенного появления (исчезновения) графического изображения и преобразования одной картинки в другую можно получить с помощью совместного применения дина...
Динамическое преобразование картинки с помощью фильтра «Вертикальные жалюзи»
Рисунок 671. Динамическое преобразование картинки с помощью фильтра «Вертикальные жалюзи» Заметим, что Image1— это имя (идентификатор) элемента-контейнера, заданного тэгом <DIV>;...
Динамическое преобразование картинки с помощью фильтра «Расширяющийся круг»
Рисунок 672. Динамическое преобразование картинки с помощью фильтра «Расширяющийся круг» При установке фильтра типа 12 возникает эффект постепенного повышения разрешения изображения путе...
Таблицы стилей в отдельных файлах
Таблицы стилей в отдельных файлах При использовании тэга <STYLE1> требуется вставлять таблицу стилей в каждый документ. Это может показаться довольно неэкономным как с точки зрени...
Вставка Flashмультфильма в Webстраницу
Вставка Flash-мультфильма в Web-страницу Flash-мультфильм содержится в SFW-файле, т. е. в файле с расширением swf, созданном в программе Macromedia Flash. Чтобы вставить его в Web-стран...
Поле ввода данных
Поле ввода данных При создании интерактивных страниц может потребоваться передать ряд символов от пользователя. Например, мы можем попросить пользователя ввести его адрес электронной по...
Поле ввода данных
Рисунок 673. Поле ввода данных Существует и другое средство для предоставления пользователю возможности вводить данные — метод prompt () языка JavaScript, который принимает в качестве п...
Стандартное окно ввода данных вызываемое методом prompt ()
Рисунок 674. Стандартное окно ввода данных, вызываемое методом prompt () Сценарии, связанные с полем ввода, будут рассмотрены в следующих разделах данной главы. Идея их проста. В тэге...
Переключатели
Переключатели Тэг <INPUT> позволяет вывести на страницу не только поле ввода, но и другие элементы. Например, если использовать атрибут TYPE= "RADIO" , то можно созда...
Набор переключателей оформленный
Рисунок 675. Набор переключателей, оформленный в виде списка. В наборе можно установить только один переключатель. Элементы списка (в рассматриваемом примере — переключатели) располагаю...
Переключатели расположены горизонтально с помощью таблицы с невидимыми рамками
Рисунок 676. Переключатели расположены горизонтально с помощью таблицы с невидимыми рамками.  ...
Флажки
Флажки лажки (checkbox) аналогичны переключателям за исключением внешнего вида и того, что в одном наборе можно установить/снять любое количество флажков. Задаются флажки так же, как пер...
Флажки или переключатели В отличие
Рисунок 677. Флажки или переключатели. В отличие от радиокнопок (селекторных переключателей) можно установить более одного флажка  ...
Форматирование текстов
Форматирование текстов Страница обычно содержит тексты — простой и наиболее распространенный способ представления информации, хотя далеко не единственный. Вы можете создать текст, не уд...
Кнопки
Кнопки На странице можно разместить обычную кнопку, нажатие (щелчок кнопкой мыши) на которой обрабатывается программой-сценарием. Например, вы можете создать кнопку с надписью Поиск....
С помощью тэга <BUTTON> можно создать кнопку поставить на нее картинку и текст
Рисунок 678. С помощью тэга <BUTTON> можно создать кнопку, поставить на нее картинку и текст Можно создать графическую кнопку, используя уже знакомый тэг <INPUT>, но с атрибу...
C помощью тэга <INPUT> можно создать графическую кнопку например в виде пиктограммы стрелки
Рисунок 679. C помощью тэга <INPUT> можно создать графическую кнопку, например, в виде пиктограммы стрелки Кнопку также можно создать с помощью тэга <INPUT TYPE="BUTTON&qu...
Сценарии (скрипты)
Сценарии (скрипты) тобы Web-страница была интерактивной (могла взаимодействовать с пользователем) и динамичной, необходимо использовать так называемые скрипты или, иначе говоря, сценарии...
Объектная модель
Объектная модель Теперь рассмотрим объектную модель подробнее. Сразу предупредим, что это рассмотрение не исчерпывающее. Какуже отмечалось, каждый элемент страницы (HTML-документа)...
Объектная модель Самым главным
Рисунок 680. Объектная модель Самым главным является объект window (окно), который находится вверху иерархии. Но в то же время основное в модели — объект document, т. к. большая часть с...
Иерархическая схема объектного представления HTMLдокумента
Рисунок 682. Иерархическая схема объектного представления HTML-документа Первый объект в этой структуре — document. Первый элемент HTML-документа — картинка с именем image 1. Она предст...
Объект window
Объект window Объект window имеет свойства, методы, события, а также дочерние объекты. Приведем их полные перечни и рассмотрим, с разной степенью подробности, только наиболее важные с...
Объект document
Объект document Объект document является центральным в иерархической объектной модели и представляет всю информацию о документе HTML с помощью коллекций и свойств. Он также предоставляе...
Коллекции объекта document
Коллекции объекта document аll — коллекция всех тэгов и элементов в основной части документа; anchors — коллекция всех «якорей» (закладок) в документе; applets — коллекция...
Методы объекта document
Методы объекта document clear — очищает выделенный участок; close — закрывает текущее окно браузера; createEiement — создает экземпляр элемента для выделенного тэга;...
События объекта document
События объекта document onafterupdate — возникает при окончании передачи данных; onbef oreupdate — возникает перед выгрузкой страницы; onclick — происходит, когда кнопка...
Объект history
Объект history Объект history содержит информацию об адресах, которые браузер посетил во время текущего сеанса. Мы можем передвигаться по этому списку с помощью сценария, загружая стран...
Объект navigator
Объект navigator Объект navigator содержит информацию о производителе браузера, его версии и возможностях....
Свойства объекта navigator
Свойства объекта navigator appCodeName — название кода браузера; appName — название браузера; appVerston — версия браузера; cookieEnabied — определяет возможность создани...
Коллекции объекта navigator
Коллекции объекта navigator mimeTypes — коллекция всехтипов документов и файлов, поддерживаемых браузером; piugins — название коллекции всех внедряемых объектов на странице;...
Методы объекта navigator
Методы объекта navigator taintEnabled — возвращает значение False, включен для совместимости с Netscape Navigator; javaEnabied — сообщает, возможен ли в данном браузере запуск...
Объект location
Объект location Объект location содержит информацию об URL-адресе текущей страницы, а также методы, позволяющие обновлять страницы....
Свойства объекта location
Свойства объекта location href — URL-адрес в виде строки; hash — строка, следующая в URL за символом #; host — часть URL ("хост:порт"); hostname — часть URL «хост»;...
Методы объекта location
Методы объекта location assign — загружает другую страницу; этот метод эквивалентен изменению свойства window.location.href; reload — обновляет текущую страницу; replace —...
Объект event
Объект event Объект event позволяет получить информацию о каком-либо событии, происходящем в браузере....
Свойства объекта event
Свойства объекта event aitKey — возвращает состояние клавиши <Alt>, когда происходит событие; button — кнопка мыши, вызывающая событие; canceiBubble — устанавливается...
Объект screen
Объект screen Объект screen содержит информацию о возможностях экрана пользователя и может применяться, например, при определении размеров создаваемых окон, а также разрешения, с которы...
Свойства объекта screen
Свойства объекта screen width — возвращает разрешение по ширине экрана пользователя (в пикселах); height — возвращает разрешение по высоте экрана пользователя (в пикселах);...
Стандартные логические стили
Стандартные логические стили Для выбора размера шрифта можно использовать тэги так называемых логических стилей. Их всего шесть и обычно они используются для определения заголовков разл...
Логические стили
Рисунок 648. Логические стили Заголовки различных уровней; заголовок уровня i (1=1,2,..., 7) задается тегом <Hi>  ...
Объект TextRange
Объект TextRange Объект TextRang (текстовая область) отображает разделы потока текста, формирующего документ HTML. Может быть использован для управления текстом внутри страницы....
Свойства объекта TextRange
Свойства объекта TextRange htmlText — возвращает содержимое TextRange как текст и код HTML; text — простой текст, находящийся внутри элемента TextRange или тэга <OPTION>...
Методы объекта TextRange
Методы объекта TextRange collapse — стягивает текстовую область в точку в начале или конце текущей области; compareEndPoints — сравнивает две текстовые области и возвращает зна...
Как писать скрипты
Как писать скрипты Применяя скрипты (сценарии), мы обрабатываем различные события (например, щелчок кнопкой мыши), анализируем введенные пользователем данные, изменяем внешний вид некот...
Примеры скриптов
Примеры скриптов Здесь мы приведем несколько простых скриптов, которое в том или ином виде часто применяются в Web-страницах. Все они создают некоторые визуальные эффекты. Другие при...
Параметры движения по эллиптической траектории
Рисунок 863. Параметры движения по эллиптической траектории Собственно перемещение элемента обеспечивается периодическим вызовом вспомогательной функции move (), которая вычисляет новые...
Управление шрифтом
Управление шрифтом Кроме использования стандартных размеров и начертаний (гарнитуры) шрифтов, можно определять шрифты для каждого текстового фрагмента с помощью специальных тэгов. Самый...
Физические стили
Рисунок 649. Физические стили Внутри тэга заголовка можно вставить тэг физического стиля, чтобы модифицировать весь заголовок или только некоторую его часть. Например, чтобы выделить кур...
Изменение стиля шрифта части заголовка
Рисунок 650. Изменение стиля шрифта части заголовка С помощью специального тэга <FONT> можно настроить шрифт для изображения текста: задать гарнитуру, размер и цвет. Прежде всего,...
Использование различных шрифтов
Рисунок 651. Использование различных шрифтов Заметим, что в тэге <FONT> можно использовать несколько или все его возможные атрибуты. Например:<FONT FACE="Arial" SIZE=5 COLOR=...
Цвет
Цвет По умолчанию браузеры заполняют фон сплошным цветом, определенным настройкой браузера: серым, белым или черным. Пользователи по-разному настраивают цвета, поэтому иногда имеет смыс...
Текст заданного формата
Текст заданного формата Браузер обычно преобразует текст HTML-файла при выводе его на экран, т. е. игнорирует лишние пробелы, символы табуляции и символы конца строки. Если вы хотите, ч...
Списки
Списки Довольно часто требуется разместить на странице списки (перечни элементов). Списки бывают упорядоченными (по алфавиту или по возрастанию/убыванию номера) и неупорядоченными. При...
Варианты списков
Рисунок 653. Варианты списков  ...
Разделительные полосы
Разделительные полосы При оформлении текста, чтобы отделить один раздел от другого, нередко используют разделительные полосы. Можно задать ширину, толщину и способ выравнивания разделит...
Разделительные полосы
Рисунок 654. Разделительные полосы  ...








- Начало -