HTML от А до Я / Расширения возможностей HTML |
||
Предисловие |
||
Здесь пойдет речь не столько об HTML в чистом виде, сколько о других языках, поддерживаемых современными броузерами, в том числе и о DHTML (Dynamic HTML - расширение языка HTML). Все это применяется совместно с HTML, но значительно расширяет его возможности и улучшает вид документа, оживляет его.
Каскадные таблицы стилей |
||
CSS - Cascade Style Sheet. Встроенный модуль броузера. Если загрузить страницу, содержащую CSS старым бруозером, не поддерживающим стили, то страница может выглядеть несколько иначе, но все будет работать, кроме функций CSS. Как уже говорилось в броузере есть ряд параметров, используемых по умолчанию. Почти любому тегу соответствует определенный ряд параметров, часть из которых может быть изменена параметрами соответствующих тегов. В современных броузерах теги представлены в виде объектов (понятие из объектно-ориентированных языков программирования), а у каждого объекта есть свойства. Все эти объекты (теги) вместе с свойствами и хранятся в CSS броузера.
CSS призван несколько улучшать внешний вид HTML-документов, добавлением в них динамики. Он относится к понятию DHTML. Сейчас можно смело применять его, так как большинством используемых броузеров он поддерживается.
В HTML документ CSS внедряется тегом <style>. Процедуры CSS можно вставлять прямо внутрь этого тега, но если описание процедур слишком велико и оно применяется в нескольких документах, то можно их записать в отдельный файл и вставить его в тег <link href="file.css" type="text/css" rel="stylesheet"> , который работает только в <HEAD>. CSS вставляют обычно в самое начало HTML-документа, сразу после описания <body> или в <head>, так как стили действуют на весь документ. Так же любой закрывающийся тег может иметь параметр style, в описании которого можно перечислить все нужные свойства. Такой способ вызова CSS действует на все, что находится внутри тега с параметром style.
Рассмотрим простой пример:
Можно сделать так, чтобы при поднесении к ссылке указателя мыши она меняла свой вид. Для этого в начало документа (внутри тега <body>) вставляем следующее:
<style type="text/css"><!--A:LINK { text-decoration: underline }
A:VISITED {text-decoration: underline }
A:HOVER {text-decoration: none; color: "#FF8040"}
--></style>
Первая строка указывает на подключение встроенной таблицы стилей. В следующих строках A - указывает на то, что процедура относится к тегам <a> документа. Двоеточие : подразумевает в CSS знак присваивания (вместо равно =). Если что-то присваивается процедуре, то это означает событие. LINK - указывает на событие обычной ссылки, VISITED - на просмотренную, HOVER - на ссылку над которой стоит указатель мыши. Далее в скобках {} идут указания: text-decoration - внешний вид, underline - с подчеркиванием, none - без подчеркивания, color - цвет. Все, что не указано берется из параметров тега <body>.
Теперь попробуйте навести указатель мыши на эту ссылку.
Можно создать файл, например: mystyle.css, в нем написать:
A:LINK { text-decoration: underline }A:VISITED {text-decoration: underline }
A:HOVER {text-decoration: none; color: "#FF8040"}
вставить его в то же место, где и HTML-документы. И в документах, где нужно вызвать эту процедуру указать:
<link href="mystyle.css" type="text/css" rel="stylesheet">Более подробные статьи о CSS ищите в нашем Каталоге.
Локальные сценарии |
||
Локальные сценарии - расширение HTML специальными языками программирования. Наиболее распространенные сценарии javascript (входит в DHTML), они работают в среде броузеров как в трасляторах. Эти программы выполняются на компьютере пользователя и подобны языку Си. Только они сильно урезаны в плане работы с файлами, чтобы было невозможно навредить пользователю через интернет. Отсюда их недостаток - они работают с данными только текущего документа и не могут получать их из вне. Зато способны полностью управлять текущим документом, благодаря чему являются мощнейшим средством DHTML!
VBscript почти такой же как java, только у него есть больше возможностей, так как он может работать на сервере (требуется разрешение администратора). Тогда программы VisualBasic заключаются в конструкцию <%Модуль бейсика%> прямо внутри HTML-документа, но сам документ должен иметь тип .asp (active server page) и быть исполняемым (chmod 755).
Для исполнения на компьютере
пользователя сценарии (скрипты)
заключаются в тег <script
language="язык программирования
(например: javascript)"><!--модуль
сценария--></script>. Сценарии
могут быть в отдельных файлах
(например: myprogram.js) и вызываться
тегом <script
language="javascript" src="myprogram.js"></script>.
Сценарии могут делать очень многое,
добавлять динамику в HTML-документы,
работать с некоторыми данными,
определять пользователей и их
установки и т.д. JavaScript является для всех броузеров основным, поэтому для него создается объектная модель документа при загрузке. А JavaScript может работать с этими объектами. Например строка: <script>
Скрипты могут использовать cookies для хранения своих файлов. Cookies - это специальная папка на Вашем компьютере (обычно она в C:\Windows) разрешающая доступ через интернет (другие папки на вашем компьтере не предоставляют такого доступа). В этой папке некоторые java и другие скрипты хранят свои файлы с данными, например: ваше имя, указанное по запросу скрипта, впоследствии он будет "вспоминать" Вас. Cookies имеет ограничение на размер данных, не более 1Кб, при переполнении данные стираются.
Теперь рассмотрим простой пример javascript:
Можно изменять тег <body> HTML-документа в зависимости от времени суток. Тогда в HTML-документ внутрь тега <head> вставляем следующую программу:
<script language="JavaScript"><!--theTime = new Date();
theHour = theTime.getHours();
if (theHour>6&&theHour<21) {
document.write('<body background ="http://www.chat.ru/isety/landisety.jpg" text="black" bgcolor="#FFFFFF" bgproperties="fixed">');
} else {
document.write('<body background ="http://www.chat.ru/~isety/landisetyn.jpg" text="#80FFFF" bgcolor="#000000" bgproperties="fixed">');
}
// --></script>
первая строка указывает, что программа написана на javascript, впрочем для JavaScript ее можно не указывать. Следующая строка создает объект theTime, который содержит значение полной даты (берется с компьютера пользователя), следующая строка назначает переменной theHour часть объекта theTime, относящейся к текущему часу. Далее идет условие, что если час больше 6 и меньше 21, то вписать в документ указанный тег <body>, иначе другой тег <body>.
Для использования встроенных сценариев необязательно знать соответствующие языки программирования. Можно взять их с сайтов в виде исходных текстов и вставить к себе на страницу. Некоторые java-скрипты есть в нашей библиотеке.
Серверные сценарии |
||
Внешние (серверные) сценарии (программы) исполняются на сервере и работают со статическими данными. Они не могут управлять документом, но могут генерировать его. Для исполнения сценариев на сервере требуется их поддержка (например на сервере должен быть установлен Perl-интерпретатор для обработки CGI(pl)-программ), разрешение администратора на запуск в доступном вам директории и все файлы программ должны быть с атрибутами chmod 755. Файлы, в которых сценарий должен что-то изменять должны иметь атрибут chmod 666, либо они должны лежать в папке с chmod 777.
Для использования внешних сценариев необязательно знать соответствующие языки программирования, можно использовать бесплатные формы (формой называют внешние сценарии, потому-что доступ к ним осуществляется через HTML-форму (анкету)), исполняемые на своих серверах.
Для передачи данных внешнему скрипту из броузера служит тег <form>, в котором можно создать анкетную форму для передачи данных. Внешние сценарии используются как гостевые книги, чаты, форумы и т.п.
В интернете есть множество сайтов, предлагающих бесплатные скрипты, а так же места где их можно разместить. Но еще удобнее воспользоваться уже установленными скриптами, тогда вы просто устанавливаете на свою страницу соответствующую форму.
Сайты с бесплатными установленными скриптами можно найти здесь. Сами скрипты можно взять в нашей библиотеке. Научится программировать на CGI можно здесь.
Модули JAVAapplets |
||
За редким исключением такие программы являются откомпилированными и не могут работать со статистическими данными. То есть привносят на вашу страницу только красоту, но зато какую!
JAVA-апплеты работают в среде собственных трансляторов (поставляются с большинством современных броузеров, если нет, то подключаются как plug-in) и их модули имеют расширение .class, .cla. Поэтому такие программы считаются мультиплатформенными, то есть способны работать в любой архитектуре компьютера и с любой операционной системой. Лишь бы был установлен транслятор. Так же есть неоткомпилированные модули .jav, которые тоже могут работать в трансляторе и сжатые модули (архивы) .jar .
Обычно под JAVA-апплет отводится область в документе, где вы и видите результаты работы программы, но некоторые апплеты открывают собственное окно. В HTML-документ апплет внедряется тегом <applet>. Если апплет использует несколько class-файлов, то можно упаковать его в ZIP-архив и указать его в параметре archive (параметр code тоже нужен, так как там указывается class загрузчика). Многие апплеты допускают ввод дополнительных параметров и получают их из тегов <param>. Если параметры апплетом предусмотрены, то большинство апплетов требуют, чтобы они были указаны хотя-бы без значения. Старые броузеры Netscape из-за плохой работы с кирилицей могут зависать, если в значении param встречается строчная "я" (можно указывать "/я" (игнорировать "я"). Обычно сам апплет (файлы .class) устанавливается в ту же директорию, что и HTML-документ, в который он внедрен.
Например вот этот апплет:
- можно удерживать линзу указателем мыши
Внедряется в HTML-документ кодом:
<applet code="AnLens.class" width=260 height=293><param name=image value="img1.jpg">
<param name=lenswidth value="45">
<param name=distdval value="10">
<param name=distoxy value="0">
<param name=zoomfactor value="5">
<param name=interactive value="YES">
<param name=distort value="YES">
<param name=spdx value="2">
<param name=spdy value="1">
<param name=memdelay value="1000">
<param name=priority value="3">
</applet>
Использует два файла: AnLens.class и Lware.class . Он загружает рисунок img1.jpg и обрабатывает его в соответствии со своей программой и с указанными параметрами (рисунок img1.jpg тоже параметр апплета, на его месте может быть любой другой).
В Internet Explorer 6 изначально уже отсутствует поддержка Java, поскольку основной акцент сделан на более современную технологию откомпилированных приложений - Flash. Но виртуальную машину JAVA можно скачать отдельно в виде плагина.
Создание апплетов гораздо сложнее чем скриптов, поэтому большинство пользователей используют готовые, благо их предостаточно. Сайты с Java-апплетами можно найти в нашем лоцмане.
Web-боты |
||
Роботы интернет - понятие довольно обширное. Всех роботов объединяет только одно - автоматизация. В широком смысле этого слова роботом можно назвать любой сценарий, ведь он автоматически выполняет какую-то работу. В общем-то именно CGI-сценарии чаще всего называются роботами, но о таких "роботах" мы уже говорили.
Здесь поговорим о WebBot - понятии, введенном HTML-редактором Microsof FrontPage. Например мы изменяем HTML-документы в редакторе FrontPage Express и хотим, чтобы в документе всегда была видна дата и время последнего изменения страницы. Для этого в нужном месте вставляем компонент WebBot, отвечающий за это. На самом деле в тело HTML будет вставлен специальный тег, непонятный броузеру, но понятный редактору:
<!--webbot bot="Timestamp" startspan s-type="EDITED" s-format="%d.%m.%y %H:%M:%S" -->12.02.01 18:20:06<!--webbot bot="Timestamp" i-checksum="25397" endspan -->
Каждый раз при открытии документа в редакторе дата и время в теге будут выставлятся текущие, исходя из системных часов. Как видно из этого примера такого бота можно назвать как угодно, только не Web.
Есть Web-боты управляющие кодеками броузера (кодеки - специальные подпрограммы, расширяющие броузеры и программы вообще). Например можно на одном рисунке сделать несколько ссылок, привязав их к определенным областям рисунка. Для этого вставляем теги:
<!--webbot bot="ImageMap" startspanrectangle="(x-координата начальной точки,y-координата) (x1-координата конечной точки, y1-координата) URL первой ссылки"
rectangle=" (x2,y2) (x3, y3) URL2"
...
alt="Подсказка ко всему рисунку" border="рамка" width="ширина" height="высота" -->
<MAP NAME="FrontPageMap0">
<AREA SHAPE="RECT" COORDS="x, y, x1, y1" HREF="URL первой ссылки">
<AREA SHAPE="RECT" COORDS="x2, y2, x3, y3" HREF="URL2">
...
</MAP>
<img src="URL рисунка" alt="Подсказка ко всему рисунку" border="рамка" width="ширина" height="высота" usemap="#FrontPageMap0">
<!--webbot bot="ImageMap" i-checksum="20452" endspan -->
Например:
<!--webbot bot="ImageMap" startspanrectangle=" (1,1) (50, 50) http://www.isety.net/newss.htm"
rectangle=" (1,50) (50, 100) http://www.isety.net/kothegar.htm"
rectangle=" (50,1) (100, 50) http://chat.isety.net"
rectangle=" (50,50) (100, 100) http://www.isety.net/cercovy.htm"
src="pict.gif" alt="Один рисунок разбит роботом на 4 области" border="0"
width="100" height="100" --><MAP NAME="FrontPageMap0"><AREA SHAPE="RECT" COORDS="1, 1, 50, 50" HREF="http://www.isety.orc.ru/newss.htm">
<AREA SHAPE="RECT" COORDS="1, 50, 50, 100" HREF="http://www.isety.orc.ru/kothegar.htm">
<AREA SHAPE="RECT" COORDS="50, 1, 100, 50" HREF="http://isety.wallst.ru">
<AREA SHAPE="RECT" COORDS="50, 50, 100, 100" HREF="http://www.isety.net/cercovy.htm"></MAP>
<img src="pict.gif" alt="Один рисунок разбит роботом на 4 области" border="0" width="100" height="100" usemap="#FrontPageMap0">
<!--webbot bot="ImageMap" i-checksum="20452" endspan -->
дает следующий результат (справа обычная ссылка рисунок (следите за статусной строкой броузера)):
В FrontPage существуют другие типы роботов, понятные броузеру Microsoft Internet Explorer. Например для проверки вводимых в поле данных. Создавая форму можно ограничить длину и тип вводимых данных (например в текстовое поле можно будет вводить только до десяти цифр или до 8 букв и т.п.).
Я только ознакомил вас с этим понятием WebBot. Если хотите воспользоваться такой возможностью, то используйте для редактирования ваших документов FrontPage, к тому-же он достаточно удобен.
Существуют и другие расширения, улучшающие HTML (например EXE-файлы сервера), но я думаю перечисленные наиболее распространены и доступны. К тому же этого вполне достаточно чтобы дать сайту профессиональный и удобный вид.