Этот сайт посвящен прежде всего начинающим сайто-писателям. Более опытные тоже могут попробовать найти что-то интересное. Что касается профессионалов, то им я ничего не обещаю. Причина простая, я сам не профессионал и занимаюсь сайто-строением на досуге. А пообщавщись с профессионалами на сайте javascript.ru, я пришел к выводу, что у них резко негативное отношение ко всем и ко всему, что выходит за рамки методов зарабатывания денег путем разработки сайтов на заказ. Для них любой любитель сайто-писатель -- враг по определению. Он должен платить, а не писать. И у них своя мода, и кто делает по другому -- сразу неправ. Воевать и что-то доказывать я не намерен. Кому не понравилось -- проходим мимо.
О чем тут будет написано? Кратно об основах тех техник, которые перечислены в меню, и постепенно все больше и больше описаний готовых приемов создания каких-либо объектов на сайте. Естественно, я не все знаю, а из того, что знаю -- не все люблю. Так, например, я не люблю библиотеки функций javascript типа jquery примерно так же как не люблю Windows и новые методы в социальных сетях. Я не против, пусть они живут, только у меня этого не будет. По крайней мере до тех пор, пока я не захочу. Какие объекты? Опять все просто -- никакой рекламы, никаких интернет магазинов, складов и так далее. Объекты чисто информационного характера, включая фотографии и фото-шоу. Сам я по профессии ученый физик и меня больше всего интересует математика, графика, возможность писать онлайн программы, не имея доступа к серверу. Мой опыт ограничен созданием бесплатных сайтов на сервере Народа.
Зачем? Ну, прежде всего для себя. С одной стороны, создавая этот сайт я учусь что-то делать, с другой записываю то, чему научился, чтобы не забыть, с третьей -- создаю шаблоны готового кода, чтобы потом использовать. Но ясно, что кое что будет полезно и моим друзьям, кому это интересно, да и всем желающим. Комментарии писать у меня нельзя, так что все комментарии пишите на адрес, сопряженный с данным сайтом, то есть vikohn@yandex.ru . Всю получаемую информацию я просмотрю и может быть кое что опубликую на сайте. Так как создать сайт очень просто, то каждый может писать на своем сайте и просто давать ссылку. Лично я так поступаю.
Что делать? Кликаем кнопки меню. Нужная информация появится в этом окне. Все кнопки кликабельные, включая те, которые открывают новые кнопки. Материалы сайта будут прибавляться постепенно, поэтому отнеситесь с пониманием. Не хватает времени, у меня полно и других дел. Так в меню HTML я уже написал основы языка, описал все полезные теги. Здесь же будут помещены шаблоны сайтов, но в шаблонах уже будут использоваться и CSS и javascript. В меню CSS я напишу об основах этой техники и также здесь будут примеры объектов, которые можно сделать на основе CSS. В меню javascript описать все особенности языка скорее всего не получится, я отмечу только главные моменты и также приведу примеры. В разделе Java описать полностью все возможности языка нереально, тут скорее всего будут ссылки, либо я переформатирую свою книгу. В разделе DHTML в основном будут анимации и фото-шоу.
О порядке цитирования глав. Главы никак не нумеруются, тем не менее я буду придерживаться такой системы. Главы, вызываемые по кнопкам основного меню, нумеруются слева направо одним числом, то есть 1, 2, и так далее. Главы, вызываемые по кнопкам, которые открываются динамически в колонке, будут нумероваться сверху вниз двумя числами через точку, то есть 1.1, 1.2, и так далее. Соответственно главы, вызываемые по кнопкам третьего уровня нумеруются тремя числами 1.1.1, 1.1.2, и так далее.
HTML -- это сокращение от слов HyperText Markup Language, что в переводе на русский язык означает язык разметки документов с гипертекстом. Если ничего не знать, то не очень понятно. На самом деле речь идет об одном из свойств языка, а именно, делать ссылки на другие документы таким образом, что при клике на ссылку вы сразу попадаете в этот документ. Это свойство позволяет одновременно просматривать много документов переходя от одного к другому и обратно. А если документы размещены на компьютерах всего мира, связанных в сеть, то именно это и дает фантастические возможности интернета. Пожалуй гипертекст и делает интернет интернетом. Но это еще не все. Документ размечается таким образом, чтобы текст красиво выглядел, в тексте были картинки, рамки, таблицы, кнопки, окна для ввода информации от пользователя и выдачи результатов запроса. Также в документе может быть закадровая информация, не видная на экране, но тоже необходимая. Ее тоже надо структурировать. Специфика языка HTML от других языков разметки в том, что текст форматируется браузером на лету и может изменяться динамически. Браузер -- это программа обработки кода HTML и превращения его в красивый документ. Лично я пользуюсь программой Хром от Гугл. Но при проверке нового сайта его желательно смотреть во всех браузерах.
Так как браузер интерпретирует (исполняет) код разметки, то логика развития языка привела к тому, что его стали усиливать с помощью других средств, то есть других языков. Именно CSS, Javascript и Java и являются такими помощниками для HTML. При их использовании форматировать документ можно десятками альтернативных способов, некоторые из которых настолько сложны и запутаны, что конечного текста в источнике можно и не найти, потому что он вообще формируется динамически. В этом разделе я кратко объясню как должна выглядеть структура документа, представляющего собой сайт в интернете. Весь документ разбивается на объекты, свойства которых задаются так называемыми тегами, то есть особыми скобками. Первый тег открывает описание объекта и может дополнительно содержать описание его свойств. Второй тег более простой, он закрывает описание объекта. Я не буду описывать буквально все теги HTML, их очень много и их описание можно получить в других источниках, которых много, да и не обязательно знать все. Я опишу только главные, без которых не может обойтись ни один сайт. Каждый тег имеет имя, которое пишется в открывающем теге, а в закрывающем теге это имя повторяют, но перед ним ставят знак деления. Свойства тега описывают параметры, которые принято называть атрибутами, но я не всегда буду придерживаться этой терминологии. Большей частью теги представляют собой команды создания объектов на сайте, а атрибуты задают параметры этих объектов. Такой стиль удобен для чтения, но иногда параметров много и их приходится повторять в каждом теге. Поэтому современный HTML вообще не принято писать без CSS, а параметры форматирования рекомендуют описывать в CSS. Итак, начнем. Самый внешний тег
<html>весь-сайт</html>.
Внутри него есть две части: <head>инфо-часть</head> и <body>часть-показа</body>.
Первая часть содержит информацию для браузера общего характера, которая не приводит к созданию объектов на экране, вторая часть содержит как раз объекты, которые реально показываются на сайте.
Структуру обоих частей я опишу в следующих разделах, а здесь расскажу о том, что есть разные методы использования языка HTML, как и разные версии этого языка. Довольно долгое время использовалась относительно продвинутая версия языка HTML-3.2, по ней было опубликовано много описаний в интернете и много старых сайтов было сформатировано именно с этой версией. Потом появился язык HTML-4 и потихоньку стала меняться сама техника форматирования. Если первоначально, каждый тег соответствовал конкретному объекту на сайте, который имел вполне определенные свойства, то потом все изменилось. Причина в том, что в мире используется очень много браузеров, каждый из которых сам решает как ему показать конкретный объект. Это привело к тому, что сайты в разных браузерах стали выглядеть по разному. Возникла так-называемая кросс-браузерная проблема. Впервые эта проблема стала острой, когда началась борьба между браузерами Netscape и Internet Explorer. А потом браузеров стало еще больше: появились Опера, Мозилла Файерфокс, Сафари и много других. Решение проблемы было найдено в повсеместном использовании каскадных таблиц стилей CSS, которые формально позволяют описать практически любой тег совершенно одинаковым образом. Вот пример: есть теги <h1>, <h2>, ..., <h6> для заголовков разных уровней. С помощью CSS можно их все задать как самые разные заголовки независимо от уровня. При этом потерялся исходный смысл многих тегов, который был в начальных версиях HTML. Сейчас принято считать, что HTML просто задает структуру объектов на сайте, но свойства объектов лучше определять в CSS, причем все до последнего. Только в этом случае все браузеры будут одинаково показывать сайт. В будущем ожидается принятие стандарта HTML-5, хотя многие его новые теги уже исполняются браузерами. Дополнительно появился новый стандарт XHTML, который отличается большей строгостью и четкостью. Предполагается, что в далеком будущем он заменит HTML, но пока он менее удобен и для него надо переделывать многие примеры из накопленных баз данных.
С учетом сказанного желательно сразу учиться новой технике, то есть учить HTML и CSS вместе и использовать оба инструмента одновременно. Однако более всего параметры CSS удобны при использовании языка Javascript, так как они хорошо структурированы, а Javascript может получить доступ к любому из них и динамически изменить его значение. В принципе все параметры CSS можно задавать с помощью Javascript. Интересно, что и сам HTML код можно задавать через Javascript тоже, описывая в HTML документе только самые главные объекты, но без конкретного содержания. При этом содержание может изменяться в зависимости от какого-либо события. Более подробно об этом будет написано в других разделах данного сайта. Здесь же отмечу, что часто в коде HTML бывает удобно писать комментарии, которые браузер просто пропускает и никак на них не реагирует. Часто удобно комментировать кусок кода, если не хочется показывать его на экране. Все комментарии тоже следует помещать в специальные скобки, то есть писать вот таким образом: <!-- комментарий -->. Нужно также помнить, что в коде HTML признаки конца строки не имеют никакого значения, а окончание строк размечается тегом. Кроме того, в текстах несколько пробелов подряд считаются как один пробел, за исключением непереносимого пробела, который записывается специальной последовательностью символов.
Рассмотрим что именно может быть записано внутри тега <head>. Теги, как и любые скобки, могут вкладываться внутрь друг друга целиком, но они не могут пересекаться. Все рассматриваемые здесь теги должны полностью находиться внутри тега <head> и не могут переходить в тег <body>. Первым и самым важным является тег
<title> заголовок </title>.
Он задает заголовок окна браузера, который будет виден в титульной строке окна. Кроме того -- это главный источник для поисковых программ при поиске сайта по словам. Поэтому не стоит пренебрегать заголовком. Он должен быть информативным и содержать ключевые слова сайта. Дополнительно в отдельной строке нужно задать кодировку русских букв. Эта строка является стандартной, в ней меняется только значение параметра charset, итак
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
В этой же части нужно разместить тег описания стилей
<style type="text/css"> стили-CSS </style>,
который задает параметры CSS форматирования разных тегов, различая их по именам, по значению параметра id или по значению параметра class. Эту информацию браузер должен получить до того, как он начнет показывать объекты страницы. Задавая здесь нужные вам значения параметров, вы можете существенно изменить стиль представления вашего документа. Но естественно, что все параметры имеют какие-то значения по умолчанию. Если вы их не задаете, значит они будут равны исходным значениям. Вместо явного указания стилей содержимое между скобками тега можно записать в отдельном файле с расширением css, а указание на файл делается следующим образом
<link media="all" rel="stylesheet" type="text/css" href="name.css" >
где вместо name можно поставить любое имя файла, точнее то, в котором находится ваш css код. Вместо имени файла на компьютере можно поставить URL адрес файла в интернете, и файл будет прочитан даже с другого сервера. Как в стилевой css файл, так и в тег style можно импортировать содержание другого стилевого css файла командой
@import url("name.css");,
где name опять имя файла. Оно может указывать на файл в той же папке, что и htm файл, или во внутренней папке. После аргумента url через пробел можно также указать тип носителя, то есть куда предполагается вывод. Возможные варианты: print или screen или tv или all. Последнее значение используется по умолчанию. Есть и другие значения, но это уже редко нужно. В теге style можно тоже указать тип носителя в явном виде. В этом случае синтаксис несколько меняется. Нужно писать
@media all { ... }, в фигурных скобках указывать все стили обычным образом. Параметр media в теге link имеет те же значения, что и указанные выше. При этом значение all можно не указывать.
Наконец, в этой же части можно определить все функции и переменные языка javascript внутри тега
<script type="text/javascript"> код на языке javascript </script>.
Что касается функций, то они могут быть все определены здесь. А вот некоторые переменные, связанные с объектами сайта, и запуск функций уже выполняется внутри тега body, где это делается тоже внутри данного тега. То есть тег script может находиться как в заголовке, так и в теле документа в любом месте. Все параметры форматирования и все операторы языка javascript надо учить отдельно, частично это будет описано в других разделах. Еще одно важное замечание. Оно состоит в том, что javascript код можно записать в отдельном файле для удобства чтения html кода. Тогда в теге просто указывается ссылка на этот файл и все. Выглядит это так
<script type="text/javascript" src="name.js"></script>,
где вместо name можно поставить любое имя файла, точнее то, в котором находится ваш javascript код. Хотя в данном случае между скобками ничего не ставится, но закрывающая скобка все равно необходима для соблюдения синтаксиса.
Рассмотрены теги: body, center, div, h2, p, br, b, i, u, textarea, img, map, area.
Во второй части, то есть внутри тега body, описывается конструкция самого сайта, то есть его объекты. Сам тег body имеет несколько параметров(атрибутов), которые можно сразу определить, не используя CSS. Дело в том, что этот тег встречается в документе только один раз, так что для него старая система форматирования вполне подходит. Он имеет два основных параметра text=#660000 и bgcolor=#f0ffff, которые задают базовые цвета текста и фона на документе. Цвета можно задавать двумя 16-тиричными числами в диапазоне от 0 (00) до 255 (ff), три числа подряд для яркости красного, зеленого и синего и символ # впереди для указания единиц измерения, этот символ как раз и указывает на 16-тиричную систему. Кроме этого, можно указать еще три параметра: vlink=#005080 -- задает цвет ссылки, которая смотрелась давно, link=#008050 -- задает цвет ссылки, которая еще не смотрелась, и alink=#005080 задает цвет ссылки, которая смотрелась последней. Это атрибуты старой системы, сейчас все то же самое можно задать через CSS.
В качестве фона сайта можно использовать картинку, иногда это оправдано, иногда не очень, зависит от картинки. Картинку разумно использовать если сайт форматируется заведомо на часть экрана, а все что за пределами сайта можно закрасить фоновой картинкой. Для этого используется параметр background="name.jpg". Здесь как имя, так и расширение можно ставить разное, а точнее именно такое, как у файла, который вы хотите использовать. На самом деле цвет конкретного текста лучше задавать параметрами того тега, в который этот текст помещен. Цвет текста в теге body используется только для тех текстов, которые пишутся без дополнительного форматирования. Таких текстов может не быть вообще. В этом проявляется избыточность системы программирования, но это стандартная ситуация.
Внутри тега body помещаются теги всех объектов сайта. Главными объектами сайта являются: тег установки контента по центру окна браузера <center> любые теги </center>, тег произвольной независимой области <div> другие теги </div>, тег заголовков, например, <h2> заголовок </h2>, при этом цифру 2 можно заменить на 1, 3, 4, 5, 6; тег параграфа <p> параграф текста </p>, тег окончания строки <br>. Последний тег фактически является символом, а не контейнером, и он не имеет закрывающей скобки. По правилам XHTML его надо писать так <br />, но браузер поймет оба написания. Язык XHTML более строгий, чем HTML, и он накладывает определенные ограничения на правила написания кода. Но я пока буду обсуждать только HTML, так как он проще. Внутри параграфа для выделения части текста используются теги старого языка <b>жирный текст<b>, <i>наклонный текст<i>, <u>подчеркнутый текст<u>. Первоначально 6 типов заголовков было введено в язык в те времена, когда форматирование было автоматическим. Теперь, используя CSS, можно определить любой тег заголовка по своему вкусу. Я сам обычно использую для заголовков <h2>, но это дело вкуса каждого.
Для написания кода программ в их исходном, то есть неформатированном виде, да еще в отдельном окне с автоматическими линейками прокрутки, полезно использовать тег
<textarea cols=10 rows=10 readonly> текст как в текстовом редакторе </textarea>.
Основное назначение этого тега -- задать редактор для ввода текста в форме, с последующим использованием введенного текста. Но если запретить редактирование, то он просто показывает исходный текст. Этот тег из старых и он имеет полезные параметры, задающие размер окна и режим редактирования. Все параметры форматирования текстов, размеров и свойств внутри тегов можно задать либо в теге <style>, либо в виде текстовой строки значения параметра style="position:relative; ...".
Немаловажным объектом на сайте является картинка. Она задается тегом <img src="ссылка" >. Этот тег указывает на то, что на сайт надо поставить картинку, которая размещена в файле, по URL адресу в интернете, который задает параметр src. Картинка находится за пределами данного файла и этот тег как бы ничего не форматирует, поэтому он не имеет закрывающей скобки. Если в нем больше ничего не указано, то по умолчанию картинка ставится на место следующего символа в тексте. Если же указан параметр align="left" или align="right", то картинка ставится слева или справа внутри текущего параграфа таким образом, что текст параграфа ее обтекает. Если еще дополнительно указать hspace="10", то между картинкой и текстом будет пустое пространство размером 10 пикселей. Разумеется цифру можно поменять на любую другую. Можно также указать vspace="10", но это реже необходимо. Можно еще указать align="center", и тогда картинка будет размещена в центре текста, но это плохой стиль и его лучше не использовать. Для картинки еще существуют параметры width=200 height=150, которые задают ширину и высоту картинки. Если их не указывать то картинка будет помещена в натуральную величину, а если она не найдена -- не будет ничего. Если же их указать, то картинка будет промасштабирована на эти размеры, а если она не найдена, то размеры все равно будут выделены.
Еще у тега картинки есть параметры alt="текст" border=0 usemap="#code". Первый из них задает текст. Этот текст будет показан вместо картинки, если она не найдена или включен режим отключения картинок. Если же картинка показана, то текст все равно может всплывать при наведении курсора на картинку. Второй параметр задает размер рамки вокруг картинки, третий параметр -- самый сложный и позволяет использовать картинку как гиперссылку, различные участки которой отсылают к различным файлам.
Работает это следующим образом: после знака # указывается code. По этому коду картинка взаимодействует с тегом <map name="code"> система тегов area </map>, который сам ничего не показывает, но задает правила гиперссылок при клике на различных частях картинки. Эти части браузер никак не выделяет и это дело автора -- выделить эти части так, чтобы они отличались. Каждый тег area имеет в общем случае такую структуру
<area coords="x1,y1,x2,y2" shape="rect" href="../knob.html" alt="Координаты червяка" target=_blank>
Здесь параметр coords задает координаты вершин области картинки, выделенной для ссылки, параметр shape задает форму области, значение rect используется по умолчанию и может быть опущено, кроме этого есть еще значения: circle, при котором задаются две координаты центра и радиус круга, poly, при котором задаются все вершины многоугольника. Все координаты отсчитываются от левого верхнего угла, это общее правило компьютерной графики. Параметр href указывает URL нового сайта, который заменит данный при гиперссылке или будет показан в отдельном окне, если указан параметр target. Значение параметра alt аналогичное. Картинки в виде карт для ссылок являются мощным инструментом, но редко используются из-за сложности техники. Типичным примером может быть Таблица Менделеева, когда при клике на каждом элементе запускается сайт с его описанием.
Рассмотрены теги: a, button, input, form.
В первой части мы затронули тему гиперссылок при описании картинки-карты. Реально же гиперссылки -- это очень важный инструмент описания документа. Прямым тегом, реализующим гиперссылку, является тег якоря
<a href="ссылка" title="комментарий" name="метка" target="окно" onclick="функция javascript">
текст или/и картинка</a>
Я указал только главные параметры, которые хочу описать в первую очередь. На самом деле параметров больше, но другие редко используются. Главным параметром является href, который указывает на URL адрес нового сайта, к которому будет совершен переход браузером при клике мышкой на ссылке, то есть на тексте или картинке, который указан внутри скобок тега. При этом возможны два варианта. Если параметр target не указан, или указан с именем данного окна, то новый сайт появится в этом же окне. Если же указано имя конкретного окна или написано target=_blank, то сайт появится в конкретном окне или в новом окне. Каждое окно браузера имеет имя, и как раз это имя используется как значение параметра. Я рекомендую всегда открывать новый сайт в новом окне, это очень удобно в том плане, что современные браузеры новое окно открывают как новую вкладку, при этом вернуться в старое окно можно мгновенно, простым переносом фокуса. Естественно, что каждое новое окно требует кусок оперативной памяти, но современные компьютеры легко с этим справляются. Когда откроется много окон, то лишние можно будет закрыть.
Но значением параметра href может быть не только ссылка на другой сайт, гиперскачок можно делать и в пределах данного сайта, если он большой и структурирован. Для этого надо писать так href="#метка", то есть условную метку после знака #. Тогда будет сделан переход к указанной метке. А саму метку задает снова тег якоря параметром name="метка", на этот раз без знака #. Параметр title задает комментарий, который появляется при наведении курсора мыши на ссылку. Есть еще стандарты, которые выполняются, если ничего не переопредено. Так, текст ссылки имеет свой цвет, отдельный от основного текста, и он дополнительно подчеркивается. Я уже писал об этом при описании параметров тега body, но цвет ссылок можно задавать через CSS, как и все другие свойства. Кроме того, общим правилом является менять курсор мыши при наведении на ссылку, курсор принимает вид кисти руки с вытянутым пальцем. Такая форма курсора прямо и сразу указывает на ссылку. В соответствии с общим правилом, что тег якоря реагирует на клик, ему также присвоили функции кнопки таким образом, что в качестве значения параметра href можно писать javascript функцию. Делается это так: href="javascript:funct(3)". То есть за словом javascript через знак двоеточия ставится имя функции с возможным значением аргумента. Другим способом задать вызов javascript функции при клике на ссылку является указание на событие onclick="функция javascript". Если задать и то и другое, то ссылка при клике будет реагировать на два события, задаваемые параметрами href и onclick. При этом важно знать очередность. Так вот, сначала обрабатывается событие, задаваемое параметром onclick, и только потом href. Этим можно пользоваться в ряде интересных случаев, например делая запрос к пользователю по onclick и затем по разному обрабатывать href в зависимости от ответа.
Я просто перечислю какие еще параметры имеет тег якоря. Так клик можно заменить комбинацией горячих клавиш, это реализуется параметром accesskey. Можно указать кодировку текста на сайте, на который ведет ссылка через параметр charset. Если в ссылке указана картинка, то можно указать параметры shape и coords для задания формы и координат активной области на картинке, аналогично картинке-карте. Перенос фокуса между ссылками выполняет клавиша tab. Параметр tabindex указывает порядок переноса фокуса при использовании tab. Есть и другие параметры, но и эти очень редко используются. Если кому интересно, то он может получить полную информацию прямым поиском в Яндексе. Главная проблема в том, чтобы правильно задать вопрос.
Итак, тег якоря легко может выполнять функции кнопки, при клике на которую выполняется та или другая функция javascript. Но для этой цели есть еще свой прямой тег кнопки
<button title="комментарий" onclick="javascript-функция">текст или/и картинка</button>.
Этот тег описывает объект в виде кнопки, при клике на которую запускается функция языка javascript. Вообще-то кнопки используются внутри тега формы для диалога с пользователем. Но данный тег можно использовать и без формы. Он отличается от якоря не столько своей функциональностью, сколько внешним видом. Это прямоугольник, который может менять свой внешний вид при наведении курсора мыши. С помощью CSS можно менять ширину и высоту кнопки, параметры текста и многое другое, например, расстояние между кнопками и внутри кнопок, то есть margin и padding. Тег удобен тем, что вместо названия кнопки можно поместить не только текст, но и комбинацию текстов и картинок. Я уже говорил ранее, что в HTML есть тег form, призваный обслуживать взаимодействие пользователя сайта с сервером. Внутри этого тега должны располагаться теги textarea, input, button и другие, которые позволяют пользователю задать вопросы, отправляют вопросы на сервер и затем получают с сервера ответы на вопросы. Обработка вопросов на сервере -- это отдельная тема и я не буду ее касаться. Причина простая: для этого надо иметь доступ к серверу и это достаточно сложно. Для любителя получить доступ к серверу не всегда возможно, в частности на серверах Народ и Юкоз такую возможность не дают. Тем не менее, указанные выше теги могут работать и без формы, если использовать язык javascript. При этом по клику кнопки есть возможность получить тексты из тегов textarea и input и затем показать новые тексты в тех же или других тегах. Про тег textarea я уже писал, tег input пишется следующим образом
<input id="код" type="text" size=130 value="любое" >
Этот тег задает строку ввода определенного размера с каким-то начальным значением, может быть и с нулевым. Параметр id является универсальным и может быть использован с любым тегом, он просто метит тег для использования CSS и Javascript. Параметр type="text" как раз и указывает на то, что тег описывает строку текста. Другим значением является type="button" для задания кнопки. Параметр size задает ширину строки текста, а параметр value задает начальное значение. Это значение может меняться какой-либо функцией Javascript динамически в процессе работы сайта. На самом деле данный тег уже устарел и редко используется. Задать даже одну строку текста в таком режиме позволяет тег textarea. А показать динамически любой код HTML в любом теге с помощью javascript позволяет команда innerHTML = text. Об этом будет разговор при описании Javascript.
Рассмотрим более подробно проблему форматирования текста. При использовании CSS эта проблема решается напрямую, то есть в любом теге текст можно форматировать любым доступным способом. Однако часто удобно читать код, в котором используются теги старого типа для форматирования текста. Я уже описал тег заголовка h2, тег параграфа p, признак конца строки br. Кроме них есть много других тегов для выделения каких-то текстовых структур внутри параграфа. Так, например, есть тег nobr, который имеет вид скобок и означает, что текст внутри него не должен переноситься по словам. Этого тега нет в стандарте HTML, но его исполняют браузеры. Есть тег abbr который предназначен для сокращений (аббревиатуры). Главная фишка в нем в том, что к нему есть параметр title, который содержит подсказку, которая всплывает при наведении курсора мыши на текст, помещенный внутри него. То же самое относится к тегу acronim, который практически ничем не отличается от предыдущего, но может по другому форматироваться через CSS. Есть тег address внутри которого могут быть любые теги HTML. Идея была в том, что внутри этого тега следует помещать информацию об авторе, и поисковые машины будут отслеживать информацию по этому тегу. В новой версии HTML введен тег article, внутрь которого предполагается помещать статью, тег aside для части контента, размещенного сбоку от основного (article). Тег <basefont color="#ff0000" fase="serif" size=3> без закрывающей скобки был в старой версии языка. Он задавал цвет, тип и размер текста, не помещенного ни в какие теги, кроме body. Форма задания параметров текста через атрибуры считается устаревшей. Кроме этого был тег <font color="#ff0000" fase="serif" size=3> в виде скобок, внутрь которых помещался кусок текста, заданного указанными атрибутами. Сейчас идеология поменялась и задавать параметры текста через атрибуты считается устаревшим, рекомендуется использовать CSS. А для выделения части текста ввели новый тег <span> совсем без параметров, как и div. Если div выделяет большой кусок сайта в отдельную область типа ящика, которую можно помещать где угодно и даже над другим текстом слоями, то span используется для выделения текста внутри параграфа, хоть одну букву.
Тегов форматирования текста очень много, как старых, так и новых, например я просто перечислю теги, которые фактически отличаются лищь своими названиями и не имеют никакого самостоятельного смысла, разве что для поиска. Это big -- увеличивает размер шрифта на единицу, blink -- устанавливает мигание текста, blockquote -- выделяет длинные цитаты, cite -- выделяет цитаты, code -- для записи программного кода. Но этот тег не реагирует на дополнительные пробелы и символы переноса строк. Намного удобнее использовать тег pre текст внутри которого может быть набран и отобразится как в обычном текстовом редакторе, но внутри тега можно ставить ссылки и другие теги. Далее del -- отмечает текст как перечеркнутый, <details open="open"> текст </details> -- содержит текст, который не показывается изначально, если параметр open не указан, для указания надо ввести параметр, dfn -- задает определение терминов в тексте, ins -- показывает текст как подчеркнутый, рассчитан для показа куска добавленного в документ, фишка в том, что у этого тега, как и у тега del есть два параметра: cite и datetime, которые указывают на документ, вызвавший причину изменений и на время редактирования. Далее kbd -- используется для названий клавиш, или текста для набора с клавиатуры, listing -- для записи кода программ, использует моноширинный текст уменьшенного размера, mark -- помечает текст как выделенный, marquee -- создает бегущую строку на странице, вместо текста могут быть картинки, имеет много параметров, кому интересно, то дополнительную информацию можно получить поиском Яндекса, plaintext -- текст внутри тега отображается как есть, в том числе и все другие теги, в отличие от тега pre, q -- отображает текст в кавычках (цитаты), s -- изображает текст как перечеркнутый, samp -- предназначен для вывода скриптов, small -- уменьшает размер шрифта на единицу, tt -- показывает текст моноширинным шрифтом, var -- используется для выделения переменных в коде программ, изображается наклонным шрифтом, wbr -- указывает место, где можно сделать перенос в очень длинных словах без пробелов, xmp -- аналогичен plaintext, оба тега не являются стандартом HTML, но исполняются браузерами.
Я отдельно отмечу два тега sub и sup -- для нижнего и верхнего индексов в математических формулах. К сожалению в HTML совсем нет аппарата набора математических формул, но по крайней мере верхние и нижние индексы написать можно. Итак, для форматирования текста внутри параграфа есть очень много тегов, но форму отображения любого из них можно изменить с помощью CSS, поэтому реально они могут быть полезными только для анализа текста с помощью каких-либо поисковиков. Для форматирования это не обязательно. В принципе, если необходимо выделить кусок текста, то можно использовать любой тег, задать все свойства текста с помощью CSS и получить то, что нужно. Поэтому лично я многие из указанных тегов просто не использую. Есть, однако еще она проблема -- это ввод символов, которые нельзя непосредственно набить на клавиатуре. Кроме того, символы форматирования, например, угловые скобки, тоже нельзя использовать внутри текстовой переменной. Для этого существуют специальные последовательности символов, кодирующие все недостающие символы. Они начинаются с символа & и заканчиваются символом ; . Вот пример означает непереносимый пробел, то есть символ пробела, по которому нельзя переносить текст на новую строку. Еще примеры: < и > означают знаки меньше и больше или по другому левую и правую угловые скобки. Есть очень много других последовательностей, запоминать которые уже нет никакого смысла, можно использовать ввод символа по его юникоду комбинацией &#N; где вместо N должно стоять число равное номеру юникода, например символ & запишется вот так & .
Теперь необходимо вспомнить, что кроме параграфов текста могут быть другие элементы, такие как списки и таблицы. HTML различает несколько типов списков. Наиболее распространены неупорядоченные или маркированные списки. Полный список задается тегом ul type="disc|circle|square", а каждый элемент списка внутри этого тега определяется тегом li. Оба тега имеют вид скобок. Параметр type задает вид маркера перед элементом списка. Используя CSS можно сделать как угодно. Есть также упорядоченные списки, которые задаются тегом ol type="A|a|I|i|1" reversed start="1", внутри которого снова используется тег li. И есть списки определений dl dt dd. Первый тег задает список, второй тег задает заголовок, третий тег задает текст под заголовком. Что касается таблиц, то они формируются тегами table tr td. Первый тег задает квадратную таблицу ячеек, одна строка внутри таблицы определяется вторым тегом, колонки внутри строки определяются третьим тегом. Внутри тега таблицы можно использовать также теги caption, col, colgroup, tbody, tfoot, th, thead. Каждый из тегов форматирования таблиц имеет очень много параметров, которые задают все свойства отображения внутри каждой ячейки индивидуально. Именно поэтому в старое время использовались таблицы даже из одной ячейки для форматирования элементов на сайте. Была так называемая табличная технология, а описание тегов таблиц и их многочисленных параметров имело очень важную роль именно для верстки, а не для таблиц как таковых, которые редко используются. В настоящее время ситуация другая, и вместо таблиц используются области div все параметры которых задаются с помощью CSS, причем возможно абсолютное позиционирование с наложением одной области на другую. Обычное правило такое, что новая область ложится поверх старой и видна только верхняя. Однако у областей есть даже такое свойство как прозрачность, позволяющая смешивать слои или даже видеть самый нижний. А также есть параметр z-index, который изменяет порядок слоев. По этой причине необходимость в таблицах практически отпала и я даже не буду их подробно описывать.
Однако стоит упомянуть еще о тегах, которые призваны вставлять в документ ссылки на объекты, исполняемые внешними программами. Такие объекты не могут работать без установки необходимых внешних программ, а после установки они определенным образом с ними взаимодействуют, что приовдит к корректной работе внешних программ внутри сайта. Такой внешней программой является, например, Adode flash player, который способен исполнять программы, записанные на языке activscript в файлы с расширением swf. Эти файлы выставляют на экран окно проигрывателя аудио и видео материалов и тем самым осуществляют он-лайн звуковую или видео трансляцию. Для вставки кода таких проигрывателей в HTML используется новый тег object, который имеет много параметров. Для этих же целей раньше использовался тег embed и некоторые браузеры до сих пор не могут без него обойтись. Для реализации кросс-браузерности такие объекты обычно описывают двойным описанием, то есть внутрь тега object ставится тег embed, и какой-либо из них обязательно сработает. Подробное описание этой техники я давать не буду. Обычно такие коды предоставляются в готовом виде и их просто надо скопировать на сайт без изменений, после чего все работает. Другой внешней программой является JRE (java runtime environment), которая является интерпретатором языка Java. Эта программа появилась раньше и ее объекты первоначально описывали в теге applet, хотя сейчас это считается устаревшим и предлагается их тоже описывать в теге object. Но пока это работает. Про это я более подробно напишу в разделах о Java.
CSS -- это сокращение от слов Cascading Style Sheets, что в переводе на русский язык означает каскадные таблицы стилей. Так называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Первоначально язык разметки интернета создавался без стилей. Считалось, что стиль каждого элемента (тега) задает браузер и ему достаточно лишь сообщить некоторые параметры. Так поступают текстовые редакторы, работающие через меню. Однако наряду с этим есть текстовые редакторы, которые работают со стилями. При этом изначально предполагается, что элементы вообще не имеют внешнего вида, а этот внешний вид можно описать отдельно в так называемом стилевом файле. Удобство такой техники состоит в том, что за один клик можно поменять внешний вид сколь угодно сложного документа, а каждое издание может иметь свой собственный стиль. Теперь это доступно и создателям сайта, поскольку с помощью CSS цвет, размеры текста и другие параметры хранятся в определенном месте и легко «прикручиваются» к любому тегу. Еще одним преимуществом стилей является то, что они предлагают намного больше возможностей для форматирования, чем обычный HTML.
CSS представляет собой мощную систему, расширяющую возможности дизайна и верстки веб-страниц. Если CSS не используется, то стиль документа получается таким, каким его задает браузер. А разные браузеры могут задавать разные стили, в результате сайт может выглядеть по разному у разных читателей. А многие элементы могут получиться вообще некрасиво. Для того, чтобы этого избежать и получить кросс-браузерный сайт, необходимо развивать свой собственный авторский стиль, в котором все свойства элементов прописаны через CSS. Необходимо отметить, что некоторые браузеры позволяют подключать к сайту также пользовательские стили, в отличие от авторских, причем первые могут иметь приоритет. Но это дело пользователя, а автор может сделать только все то, что от него зависит. Главное преимущество стилей в том, что можно указать форматирование сразу для многих тегов, при этом сформированный стилевой файл можно применять к многим сайтам, а HTML код оказывается простым и удобным для чтения. Но и это еще не все. Стили -- это очень удобный механизм для манипулировании ими с помощью javascript, что позволяет не только экономить на форматировании, но и делать сайт динамическим, когда элементы на сайте меняют свой внешний вид в зависимости от времени или от положения курсора мыши. При использовании javascript без CSS мало что можно сделать.
Таблица стилей имеет очень много параметров, описывающих все элементы показа любого объекта (тега). Но прежде, чем изучать элементы, надо усвоить грамматику (синтаксис) CSS. Есть несколько режимов указания параметров форматирования. Первый режим -- это использование параметра style="инструкции CSS" в первой скобке любого тега HTML. Такие параметры действуют только на тот тег, в котором они стоят и не действуют за пределами этого тега. Это не всегда удобно, и, более того, использование параметра style считается плохим тоном. Другой способ -- записывать параметры форматирования внутри тега <style type="text/css">описание стилей CSS</style>, как я уже писал в главе 1.1. Каждая строка таблицы набирается с новой строки файла, то есть признак конца строки имеет значение. Если нужно указать параметры CSS только для одного тега, то используется идентификационный код, который задается параметром id="код" в первой скобке любого тега HTML. Код должен быть уникальным для каждого тега и два разных тега не могут иметь один и тот же код. Соответсвенно в теге style с новой строки пишется #код{параметры CSS} и это является альтернативой задания параметров CSS только для одного тега.
Но параметры CSS можно задавать для всех тегов с определенным именем одновременно. Например, если необходимо задать параметры для тега textarea, то в теге style с новой строки просто пишем textarea{параметры CSS}. И указанные параметры будут действовать для всех тегов textarea в документе. Очевидно, меняя название textarea на название любого другого тега можно задать его форматирование. Но иногда возникает ситуация, когда часть тегов необходимо форматировать одним способом, а другую часть -- другим, но использование параметра id нежелательно. Для этого в первой скобке тегов используется параметр class="код". Этот параметр способен метить не один тег, а целый класс тегов, у которых один и тот же код. Для этого параметра такая ситуация возможна. Соответсвенно в теге style с новой строки надо написать textarea.код{параметры CSS} и тогда форматирование будет выполняться только для тех тегов textarea, у которых код параметра class="код" совпадает с кодом данного тега в теге style. Более того, параметр class можно использовать вообще без указания тега, то есть вот так .код{параметры CSS} (точка перед код) и тогда форматирование будет выполняться для всех тегов, у которых код параметра class="код" совпадает с кодом в теге style. Если одни и те же параметры надо задать для нескольких объектов: тегов, классов и так далее, то все их можно перечислить через запятую перед фигурными скобками.
В HTML документах иногда бывает так, что одни теги вложены внутрь других тегов, причем степень вложения может быть различной. В CSS также можно указывать степень вложения, но делается это простой записью имени внутреннего тега после внешнего. Например, если надо записать форматирование тега p, который находится внутри тега div, то с новой строки пишем div p {параметры CSS}. Таким образом необходимо описать все возможные степени вложения тегов, если это необходимо. Но бывают ситуации, когда внутри тега находятся подряд два тега, которые не пересекаются, но форматировать нужно второй тег только при условии, что он идет за первым тегом. В этом случае оба тега связывают знаком + и форматирование применяется только ко второму тегу. Вот, например, кусок текста <p>текст1<b>текст2</b>текст3<i>текст4</i>текст5</p> и форматировать в такой комбинации нужно текст4. В этом случае пишем b+i {параметры CSS}. Такая ситуация редко встречается и того же можно добиться используя параметр class, но была бы возможность, а применение найдется. Кроме того, если знак + заменить на знак > то можно описать ситуацию, когда второй тег является прямым потомком первого. Все такие случаи проще изучить опытным путем, я пока описываю только синтаксис. Бывает более сложная ситуация, когда некоторые теги, например, input меняют свой внешний вид в зависимости от атрибута type="значение". Чтобы указать конкретно на такие объекты в селекторах, то есть именах тегов в CSS, можно в квадратных скобках за именем указать атрибут, или просто название или со значением. Вот пример input[type="значение"]{параметры CSS}. Это также бывает полезно, чтобы различить внешний вид ссылки (якорь a) в том же или в новом окне, то есть в зависимости от значения параметра target. Если вместо знака = указать знаки ^= то достаточно указать только начало значения атрибута, а если $= то конец значения атрибута. Если место куска текста вообще не фиксируется, то используются знаки *=, а если много значений задаются перечислением то ~=. Если в именах атрибута есть дефис, то указывается текст перед ним и используются знаки |=. Все указанные методы можно комбинировать, записывая квадратные скобки подряд, и как и с классами можно вообще не писать название тега. Замечу также, что если в селекторах не нужно имя тега, то можно ставить универсальный селектор в виде символа *. Хотя синтаксис когда ничего не ставится, тоже работает.
Селекторы CSS позволяют определять не только определенные теги, атрибуты и их комбинации, но и состояние элементов. Такое определение выполняется через псевдоклассы, которые записываются после имени тега через знак двоеточия. Вот примеры псевдоклассов a:active применяется к активным ссылкам, a:link применяется к непосещенным ссылкам, как правило не имеет смысла, input:focus применяется к элементу, получившему фокус, то есть курсор мыши кликнут в нужной области, a:hover применяется к элементу над которым находится курсор мыши, a:visited применяется к посещенным ссылкам, p:first-child применяется к первому дочернему элементу в дереве элементов документа, p:lang(ru) определяет язык фрагмента документа, можно отличить русский от английского. Но для этого в элементе надо указать аттрибут lang="ru". С помощью CSS можно также задавать текст, который можно вставлять в начале или в конце указанных селекторов. Вот пример p.new:after{content:" Ха-ха-ха.";}. Текст будет добавлен во все параграфы с классом new в конец. Если заменить after на before, то текст будет добавлен в начало. Другой пример p.new:first-letter{параметры CSS} определяет стиль первого символа, а замена letter на line определяет стиль первой строки.
Таблицы стилей называются каскадными по той причине, что существует приоритетность применения стилей, заданных разными способами. Так наиболее приоритетным является задание стиля параметром style в заголовке тега. Если стиль элемента определяются несколько раз, то последнее определение имеет приоритет и отменяет предыдущие. Есть возможность как-то управлять приоритетом, но лучше просто все правильно писать с самого начала и проблем не будет. Вполне естественна ситуация, когда сначала задаются блоки стилей из файла. Но в данном сайте кое какие надо изменить, это можно сделать в теге style. Однако для конкретного тега дополнительное изменение можно сделать в параметре style. Таким образом иерархия выглядит разумной и естественной.
Вообще говоря, первоначально теги HTML были придуманы как основные элементы текста с заголовками, фасонным оформлением и с картинками. Каждый элемент имел свой уникальный смысл. Но возможность задать параметры форматирования для каждого тега произвольным образом все исказила. Сейчас теги HTML являются как бы контейнерами текста, но их смысл уже слабо связан с названием. Тем не менее, стоит придерживаться первоначальной идеи и форматировать теги в соответствии с их смыслом. Cамым универсальным тегом является тег <div>, который задает свойства области. Он вообще не имеет специфических параметров, кроме универсальных, таких как id, class, style, title, lang и некоторые другие. Однако он реагирует на свои специфические параметры CSS, связанные с характеристикой области. Первый из них position определяет правило расположения области относительно того контейнера (внешней области), в котором он находится. Этот параметр может иметь следующие значения (static|relative|absolute|fixed|inherit). Первое значение самое простое и означает, что область будет помещена в свою очередь, то есть сразу за предыдущим объектом и никаких параметров больше не надо. Второе значение означает почти то же самое, но дополнительно используются значения параметров left и top, задающие смещение левого-верхнего края области относительно ее позиции в очереди. Третье значение тоже использует координаты смещения, но относительно левого верхнего края того контейнера, в котором находится область. Если она находится в теге <body>, то смещение будет отсчитано от левого верхнего края окна сайта, а если в другом теге <div>, то от края области, задаваемой этим тегом. Остальные два значения я не использовал, они редко кому нужны. Область также может иметь ширину width и высоту height, а позицию вместо параметров left и top можно задавать параметрами right и bottom, но это уже на большого любителя. Я так не делаю. Еще для области необходимо задать форму показа параметром display, который может иметь значения (none|block|inline|list-item). Среди этих значений наиболее интересное block, оно задает жесткие рамки области. При этом важно знать как показывать текст, который вылезает за заданные рамки. Для этого существует параметр overflow, принимающий значения (visible|hidden|scroll|auto|inherit). Очевидно первое значение означает, что текст будет виден, второе - что не будет виден, третье сделает линейки прокрутки, последнее можно проверить эмпирически. Но для линеек прокрутки разумно также использовать параметры overflow-x и overflow-y, контролируюшие вылезание контента по определенному направлению.
Интересно, что если использовать position:absolute, то можно указать две или несколько областей, которые будут находиться в одном и том же месте. Тогда общий принцип такой, последняя область закрывает предыдущую. Но это в стандартном случае. А если использовать такой параметр, как прозрачность opacity, то можно поменять видность областей и сделать видной как раз нижнюю область. Более того, можно смешивать видность различных областей в разных пропорциях. Важно понимать, что если область задана как блок и имеет размеры, а позиция области относительная (relative), то для области все равно будет выделено место, даже если внутри ничего нет. Это можно использовать для вставки на сайт пустого места. А в теге span задание display:block запрещает переносы строк. Для этого используется также тег nobr, но сейчас он считается устаревшим и не рекомендуется. Можно также указать фасон границы области через параметр border. Фасон описывается очень большим числом параметров, но можно указать основные в сокращенной форме, например так border:ridge 2px gold;. Здесь указаны три параметра: стиль рамки (border-style), толщина рамки (border-width) и цвет (border-color). Все стороны рамки будут одинаковыми. Но можно задать параметры для каждой стороны рамки по отдельности и есть еще другие параметры. Более детально смотрим в справочниках. Замечу лишь, что если какой-либо размер не указан, то он определяется контентом.
Не менее важным и универсальным является тег параграфа текста <p> текст </p>. Текст внутри него выводится с новой строки, с небольшим отступом вначале и заливает определенную ширину колонки. Вот пример форматирования параграфов
p.a{text-align:justify; color:black; background-color:#666666; font:normal 14px/18px sans-serif;}
p.a{margin:1ex 1ex; padding: 0px 0px;}
Строки означают, что форматируется тег <p class="a">. Как мы видим, параметры форматирования отделяются от значения знаком двоеточия, а не равенства. Надо быть осторожным и не делать ошибок. Слева от двоеточия стоит имя параметра, справа -- значение, которое заканчивается знаком точки с запятой. Рассмотрим что конкретно задано в этой строке. Параметр text-align задает равнение текста. Этот параметр может принимать 4 значения (left|right|center|justify). Предполагается что ширина колонки текста известна. Тогда эти значения означают, что текст будет выравнен по левому краю, по правому краю, по центру и по обоим краям одновременно. Следующий параметр color очевиден. Он задает цвет текста. Цвет можно задавать предопределенными словами: black, white, red, green, blue, gray, silver, orange, yellow, olive, purple, fuchsia, lime, navy, aqua, teal. Что они означают можно проверить эмпирическим путем. Кроме того, как я уже отмечал, их можно задавать комбинацией красного, зеленого и синего в 16-тиричном коде в диапазоне 0-15 или 0-255, например #fff или #ffffff (это белый). А можно в десятичном коде в виде rgb(255,0,0) (это красный). Есть и другие способы, но этих достаточно. Кроме цвета текста можно еще задать цвет фона конкретно для параграфа параметром background-color, который имеет очень много разных значений, есть еще background-image. В нашей строке последний не определяется, то есть задается его значение по умолчанию.
Следующий важный параметр font, то есть шрифт текста. У шрифта очень много свойств, которые можно задавать по отдельности разными параметрами, но параметр font задает три главные свойства вместе. В нашем случае они заданы с помощью трех значений разделенных знаком пробела. Первое значение в списке определяет толщину (font-weight) шрифта, она имеет значения: (normal|bold|bolder|lighter|100|200|300| 400|500|600|700|800|900|inherit). Это означает норма, полужирный, жирный, тонкий, то же самое числами, последнее значение означает наследование, но я им еще не пользовался. Cмысл такой, что будет так же точно, как во внешнем контейнере. Второй параметр означает размер (font-size) текста и высоту строки, размер можно задавать в разных единицах, указание которых обязательно. Например px означает пиксели экрана, pt означает типографские точки 0.353.мм, есть и другие единицы. Вместе с этим параметром через знак деления задается высота строки, если она не задана, то используется предопределенное значение (по умолчанию). Наконец, третий параметр задает фасон шрифта (font-family). Можно указывать конкретное имя шрифта из тех, что есть на компьютере. Но интернет сайты работают на разных компьютерах и в разных операционных системах. Может оказаться, что данное имя шрифта есть на одном компьютере, но его нет на другом. Поэтому удобно задавать логические имена шрифтов, которых нет ни на одном компьютере, но которые имеют какие-то свойства. И браузер сам выбирает шрифт из имеющихся на компьютере, который ближе всего удовлетворяет этим свойствам. Логических шрифтов на данный момент определено пять, вот они: (serif|sans-serif|cursive| fantasy|monospace). Они по своим свойствам примерно соответсвуют известным шрифтам: Times, Helvetica, Zapf-Chancery, Western, Courier. Лично я использую всего два первых. Кроме указанных параметров можно задавать еще стиль (font-style), он может иметь значения normal|italic|oblique|inherit), то есть прямой, наклонный двух видов и снова наследование. Есть еще и другие параметры, их смотрим в справочниках.
В самом конце определены значения еще 4-х параметров: margin-top, margin-right, margin-bottom и margin-left, которые задают внешние поля для объекта, на которые он отстоит от соседних объектов или краев внешнего контейнера, в который он вписывается. Ширина и высота колонки может быть задана, например, шириной и высотой области в теге <div>. Можно указать значение каждого параметра по отдельности, но есть сокращенная форма, в которой используется только параметр margin и несколько значений. Если указано одно значение, то это top, а все остальные тоже ему равны. Если два, как в нашем случае, то это top и right. Соответственно, bottom = top, а left = right. Если надо задать внутренние поля, то вместо margin используем слово padding. Есть и много других параметров, но указанные являются основными при форматировании текста в параграфе. Полезно знать, что параметры форматирования текста являются общими для всех тегов и точно такие же параметры, но с другими значениями, можно использовать в других тегах. Вот, например, тег <tt> по своему исходному смыслу означает фасон пишущей машинки. Но если он используется в параграфе, для которого задан нестандартный размер, то его тоже надо определить, иначе по умолчанию его размер может оказаться очень большим или очень маленьким. Так как по своему смыслу у этого тега мало свойств, то достаточно указать только шрифт, например, так tt{font: normal 14px monospace;}. Даже если здесь не указан цвет, он все равно будет черным, проблема может возникнуть только с размером, вот его и надо указать. Можно указать характеристики шрифта и для других тегов типа <h2> или <i>. Очевидно, что чем сложнее объект, тем больше у него свойств и все их можно указать, а можно указать лишь часть используя для остальных значения по умолчанию.
Пожалуй уже этих примеров достаточно, чтобы понять общий принцип, как используются стили. Полную информацию о всех параметрах форматирования можно посмотреть в других источниках. Пока что мы познакомились со статическим описанием стилей, то есть раз и навсегда. Но можно вообще не описывать стили указанным образом, а все их определить, используя язык javascript, который позволяет задавать стили не только в самом начале, но и в ответ на запрос читателя или просто по времени, по таймеру.
В этом разделе я представляю некоторые примеры работы объектов на сайте, которые используют CSS форматирование в сочетании с другими техниками. Сами примеры записаны в отдельные файлы и показываются в отдельном окне. Здесь же дана аннотация каждого примера:
МЕНЮ -- пример объекта, который представляет собой многоуровневую систему кнопок, которые, в свою очередь, являются ссылками на сайт или на функцию языка javascript. Изначально виден только первый уровень кнопок в виде строки, остальные появляются при наведении курсора мыши на ту или иную кнопку. Используется псевдокласс CSS :hover, который отслеживает такое событие. Использованы теги: div, ul, li, а также различные параметры CSS. Пример данного объекта стоит на этом сайте.
ЭФФЕКТ ЛУПЫ -- пример эффекта увеличения размеров картинки при наведении на нее курсора мыши. Мышь как бы является лупой, которая увеличивает картинку. Изначально все картинки имеют маленький размер и составлены в таблицу. Стоит навести курсор мыши на любую из них, как она становится большой. Используется псевдокласс CSS :hover, который отслеживает такое событие. Использованы теги: div, img, а также различные параметры CSS. Посмотреть
Данная колонка посвящена языку программирования Javascript. Как и в любой хорошей сказке у нас получается "чем дальше, тем страшней". Чтобы не бояться полезно познакомиться с историей развития интернета. Как и все на свете, первые авторы интернета ставили перед собой очень скромные задачи: обеспечить быстрый обмен данными между людьми по проводам и используя компьютер. Поэтому первые сервисы представляли собой FTP, то есть передачу данных, а конкретно - файлов, и TELNET, то есть возможность работать на удаленном компьютере как на своем. Фактически вторая функция обеспечивала людей возможностью работать на своем рабочем компьютере, находясь далеко от работы и используя чужой компьютер в виде монитора и клавиатуры. Это и сейчас есть. Потом появилась электронная почта, которая отличалась от FTP только тем, что имела более развитый сервис, похожий на обычную почту. Это тоже сейчас есть. Но после почты захотелось сделать и газету, то есть показывать информацию в форматированном виде. Так появились серверы, был разработан HTML и браузеры. Стало возможно читать газеты прямо на экране. И не только газеты, но и книги, а также музыку и кино. Так появился интернет в современном виде. Появились сайты и обмен данными стал идти не конкретно: ты мне - я тебе, а по принципу стены. Вешаем листовку на стену и все, кому надо - читают.
Все были в восторге. Одновременно электроника проникала во все сферы жизни, появилось много приборов, которые управлялись с пультов, имели какие-то программы и могли работать автоматически по этим программам. Программы писались на разных языках программирования, которых было много, и часто трудно было разобраться в этом лесу. Спрос рождает предложение. Нашлись люди, которые задумались об универсальном языке программирования, который мог бы обеспечить работу своих программ на всех приборах сразу. Такой язык был придуман и назван Java. Так как этот язык предполагал использование не компилятора (программы перевода в конкретный код конкретного прибора), а интерпретатора (программы, исполняющей код непосредственно, то есть без перевода), то принцип был простой. Пишем код на универсальном языке на любом приборе. И этот код может работать на любом другом приборе без всяких изменений. Меняется не код, а интерпретатор. На самом деле все немного сложнее, и Java первоначально компилируется в байт-код, а в процессе работы частично компилируется в код компьютера, но это сути не меняет. В погоне за полным охватом всех приборов авторы Java обратили свой взор и на развивающийся интернет. И они приспособили язык таким образом, чтобы он мог работать в интернете. При этом предполагалось, что браузеры будут исполнять этот код точно так же, как HTML и CSS. Но начались проблемы. Создатели браузеров (а конкретно Интернет Эксплорер), не поддержали авторов Java, а стали тянуть одеяло на себя. Они создали аналог Java для своей системы, но тогда потерялась кросс-платформенность. Кончилось это тем, что стандартно в браузерах интерпретатор Java не ставится, и для использования Java его разработчики сами создали интерпретатор JRE (java runtime environment) для всех браузеров и всех операционных систем и эту JRE надо скачивать и устанавливать дополнительно. Но это не так сложно и все ОК. Все работает и замечательно работает.
Тем не менее, разработчики Java совместно с разработчиками браузера Netscape договорились о создании нового, несколько более упрощенного языка программирования, который бы интерпретировался только браузерами и не мог работать никак по другому. Этот язык имеет четкую направленность на создание сайтов, только на интернет и он прошел. Все браузеры автоматически являются интерпретаторами этого языка, который был назван Javascript. Этот язык в чем-то очень похож на Java, в чем-то совсем не похож. Но даже его название говорит, что это скрипт, то есть инструкции к исполнению, очень похожий на Java. Начать с того, что этот язык совсем не похож на старые языки, созданные для вычислений, например, фортран. Он объектно-ориентированный (в HTML ведь объекты). Более того, он не самостоятельный. Он является дополнением и расширением HTML, без HTML на нем ничего нельзя сделать. Точнее код писать можно, но нет средств ввода и вывода информации. Различают три части языка: ядро, ВОМ и DOM. Вторая и третья части описывают взаимодействие языка с окном и документом браузера. Главное назначение DOM части с точки зрения сайто-писания -- это манипулировать со свойствами объектов HTML посредством изменения параметров CSS.
С историей покончили. Надо сразу отметить, что Javascript - это язык программирования, более приближенный к обычному программированию. На нем можно вычислять все, что угодно. В нем есть переменные, принимающие значения, причем не только численные, но любые. В нем есть объекты, имеющие свойства. Главное, что в нем есть логика, то есть условия, есть циклы, то есть возможность много раз делать одно и то же, и есть массивы, то есть пронумерованные отряды элементов, которые как раз и работают в циклах. Чего в нем нет по сравнению с нормальными языками программирования, например, Java. В нем нет работы с файлами, и нет самостоятельных средств интерфейса (общения с пользователем). Для этого он использует объекты HTML, такие как формы, окна ввода, редакторы и так далее. Он может создать массив картинок и манипулировать ими в цикле или по условию. Может работать с текстовыми строками, ну и вычислять все, что ему необходимо. Он может сам открыть новое окно в браузере и наполнить его содержанием, которое он сам вычислит, то есть придумает. В 1998 году я даже написал программу, которая вычисляет значения функции по параметрам, получаемым из окон ввода, и рисует график этой функции используя матрицу картинок, которую программа сама формирует. Но это было не очень разумно, просто графики тогда не было. В самое последнее время планируется тег стандарта HTML5 <canvas>, внутри которого Javascript способен создавать примитивные графические элементы типа линий и так далее. Хотя стандарт еще не принят, но все основные браузеры уже способны выполнять этот элемент. Я не буду систематически излагать основы Javascript. Об этом написаны толстые книги и есть руководства в интернете. Интересно, что основы Javascript DOM излагают обязательно вместе с HTML и CSS, так как без них он беспомощен.
Я буду поступать так. Рассказывать лишь то, что лично мне интересно, предполагая, что основы Javascript читатель сам узнает. По ходу изложения я что-то буду объяснять, однако все непонятные слова можно очень просто узнать в поиске Яндекса. То есть вы читаете и если что-то не поняли, копируете слово в строку поиска Яндекса, получаете ответ и продолжаете дальше. Возможно есть любители систематического изучения предмета и всех его тонкостей, но это уже не любительский, а профессиональный подход. И если следовать логике таких людей, то вся жизнь уйдет на изучение, а сделать что-то конкретно просто не успеем. Я сам очень много всего сделал, но я не знаю всех тонкостей ни HTML, ни CSS, ни Javascript, как и других языков программирования, на которых работал. Даже свой собственный язык программирования ACL я не помню наизусть, надо смотреть справочник. Всегда нужно видеть цель, конкретную задачу, и идти к ее реализации не озираясь по сторонам. Кто со мной не согласен, может дальше не читать.
Итак, что нам надо знать. Весь javascript код пишется внутри соответствующего тега, смотри главу о HTML. Часть кода можно написать внутри тега head, эта часть будет исполнена в самом начале, до формирования сайта. А в процессе формирования сайта, то есть в теге body можно еще много раз открывать тег языка Javascript и дописывать код. В первой части можно определить большинство переменных, которые определются словом var и имеют имена из букв и цифр. Можно задать этим переменным начальные значения по принципу переменная = значение;, можно определить массивы конструкцией типа imga = new Array();. Далее можно заполнять элементы массива значениями по образцу imga[0] = new Image();. Сразу отмечу отличия от более строгого языка, например, Java. В Javascript не обязательно декларировать переменные и объекты. Например, информацию о том, что imga - это массив, интерпретатор получает в момент объявления массива. Но при этом размерность массива можно не указывать. Формально она бесконечная и определяется максимальным номером определенного элемента. Индекс элементов массива начинается от нуля. Эта традиция идет от языка С, а потом языки Java и Javascript ее наследовали. Также заранее не известен тип элементов массива. Он определяется заданием значения для каждого элемента. Так imga[0] - это картинка. А раз так, то этот объект по существу эквивалентен объекту HTML, задаваемому тегом <img src="адрес">. Но в Javascript свойства объекта задаются через точку, то есть надо писать imga[0].src = "адрес";. Так же, через точку, можно задать любое свойство любого объекта, которое в HTML задается через параметры.
Как и в Java элементами массива могут снова быть массивы, тогда они записываются в виде par[0][1], что надо читать как первый элемент массива par[0], который является нулевым элементом массива par. В вычислительных языках типа фортрана многомерные массивы имеют вид матриц, в объектно ориентированных языках разные элементы массива могут быть массивами разной размерности. Здесь нет многомерных матриц, то есть они есть, но как частный случай более общей формы. Числовые массивы можно определять поэлементно через знак равенства, а можно таблицей значений в квадратных скобках, например вот так par[0] = [1000, 0, 0, 10, -640, -480, 30, 0];. Здесь нулевой элемент массива par является массивом из восьми элементов, а форма записи является одновременно и объявлением массива и его определением. Весь синтаксис циклов, условных выражений, булевой алгебры логических переменных полностью повторяет Java. Вот пример наиболее часто используемого цикла for(n=0; n < 5; n++){par[n]=2*n-1; i++;}. Здесь в начале цикла переменной n присваивается значение ноль, затем проверяется условие, заданное вторым выражением в круглых скобках, и, если оно выполняется, то выполняются все операторы внутри фигурныъ скобок, после этого переменная n увеливается на единицу, то есть выполняется третье выражение в круглых скобках, и снова проверяется условие и так далее. Вот пример условного выражения if(n < 5){n++;}else{n--;}. Здесь если выполняется условие, то выполняются все операторы в первых фигурных скобках, а если нет, то выполняются все операторы во вторых фигурных скобках. Вторая часть может и отсутствовать. Условия могут находиться внутри условий, циклы внутри циклов и структура кода может быть сколь угодно запутанной. Есть и много других конструкций, но эти - основные. Ну и самое главное -- это функции. Функция определяет конкретную часть кода, которая выполняется при вызове функции. Эта часть кода тоже записывается в фигурных скобках. Функция может иметь имя и аргументы. Общая структура функции показана далее: function stopf(n){ if(n == 0){ona = false;} }. Здесь функция имеет имя stopf, аргумент n, тип которого выяснится при его использовании, и тело в фигурных скобках. А в теле в зависимости от условия выполняется задание значения логической переменной.
В javascript, есть еще операторы создания и определения объектов, таких как window, document и другие. Можно делать также переменные -- указатели на любой объект сайта или любое свойство объекта сайта, это очень удобно. Указатель можно определить также на любой параметр любого тега HTML, как и на сам тег. Тег определяется конструкцией b0 = document.getElementById("b0");. При такой записи тег с параметром id="b0" становится указателем объекта Javascript с именем b0. Можно задать указатель на параметр тега, например, b0s = bo.style; или сразу b0s = document.getElementById("b0").style;. А раз мы получили указатель на параметр style объекта, то мы можем определить все параметры CSS для этого объекта. Но синтаксис немного другой, теперь знак двоеточия заменяется на знак равенства, например, b0s.position="absolute"; b0s.left=200;. По правилам XHTML все значения надо обязательно писать в кавычках. Но в HTML это не всегда обязательно, код работает и без кавычек. Теперь мы видим, что мы могли бы вообще не задавать тег style, а все параметры стиля для каждого тега определить в javascript. Но правильно использовать оба канала. Javascript может не просто определить параметры CSS, но и переопределить их в процессе взаимодействия читателя с сайтом, а также просто по времени. Но на этом основы закончились. Конкретные приемы работы рассмотрены в других главах. В заключение хочу указать на сайт: javascript.ru, где можно получить исчерпывающую информацию о структуре Javascript.
В этом разделе я представлю простые примеры работы объектов на сайте, которые программируются с помощью языка javascript в сочетании с HTML и возможно CSS. Сами примеры записаны в отдельные файлы и показываются в отдельном окне. Здесь же дана аннотация каждого примера:
КАЛЬКУЛЯТОР -- пример объекта, который использует окна ввода и кнопку для того, чтобы получить от пользователя математическое выражение и сообщить пользователю результат вычисления этого выражения. В этом примере средства общения с пользователем, предназначенные первоначально для обработки данных на сервере, используются на локальном компьютере, обработка данных выполняется функцией языка javascript. Использованы теги: h2, form, input, table, th, tr, td, и универсальные функции javascript: eval().
САЙТ ПОД КЛЮЧ -- Пример сайта на котором javascript программа использует окно редактора текстов для запроса данных от пользователя и затем преобразует эти данные в текст готового сайта, который она выдвет в то же самое окно. Текст можно скопировать в редактор, записать в файл и запускать в браузере. Параллельно программа в отдельном окне показывает инструкцию для пользователя, по которой надо готовить входные данные. Использованы теги: button, textarea и универсальные функции javascript: window.open, document.open, document.write, document.close, document.getElementById.
КАЛЕНДАРЬ -- Пример объекта на сайте, в котором javascript программа динамически формирует таблицу чисел для календаря текущего месяца, отмечая текущую дату и выходные, и вставляет эту таблицу в пустую область, которая заранее зарезервирована на сайте. Этот пример интересен тем, что код можно использовать на любом сайте практически без изменений. Календарь появится в нужном месте и будет работать, даже если пользователь и не понимает, как это делается. Но в статье я это подробно объясняю. Использованы теги: table, tr, td и универсальные функции javascript класса Date, а также document.getElementById.
ГАРМОШКА или СКРЫТЫЙ КОНТЕНТ -- Пример объекта на сайте, в котором javascript программа динамически изменяет CSS форматирование области, делая ее то видимой, то невидимой. При этом область автоматически появляется под ссылкой при клике на которую это происходит. Соответственно, текст сжимается или расжимается как гармошка. Такие объекты особенно удобны при показе длинных структурированных списков ссылок или оглавлении большого документа. Их часто можно видеть на сайтах. Использованы теги: div, p, br и универсальные функции javascript: document.getElementById.
ГАЛЕРЕЯ -- Пример объекта на сайте, в котором javascript программа динамически присваивает параметры class и src тегам элементов, а также изменяет по событию hover src адрес большой картинки. Объект представляет собой галерею маленьктх картинок. При наведении курсора мыши на одной из них в отдельном месте показывается ее большая копия. Показано как можно писать универсальный код, в котором лостатчно зименять только тексты. Использованы теги: div, img, функция javascript: getElementById и параметры className и src. Посмотреть
Эта колонка дает общее представление о разработке динамичных сайтов, на которых информация изменяется во времени. Язык, на котором пишутся такие сайты получил название Dynamic HTML или DHTML. Есть различные способы представления движущейся информации. Во первых, это могут быть встроенные проигрыватели видео, которые играют музыку и показывают кино. Технологии, на которых созданы такие проигрыватели, могут быть разными. Наибольшее распространие получили flash анимации на основе проигрывателя Adobe Flash Player. Закачивание в интернет видео-роликов и проигрывание их на сайтах стало одной из массовых функций социальных сетей. Частично в этом даже усмотрели компромисс в вопросе об авторских правах. Так простое скачивание видео на компьютер воспринимается как незаконное распространение. А если видео показывается на сайте онлайн, то это воспринимается как реклама (ознакомление) и поскольку копии у зрителя не остается, то и нет распространения. На самом деле, конечно, это все уловки и идет безкомпромиссная борьба между авторами и сайтами за деньги. Авторы хотят иметь больше доходов, а доход можно получить только в кинотеатрах. А создатели крупных сайтов хотят иметь больше посетителей и ради этого идут на все. Их доход прямо пропорционален числу посетителей и количеству рекламы на сайте. Здесь тоже есть своя динамика.
Во-вторых, информацию на сайте можно сделать динамичной используя Java апплеты. Наконец, это можно сделать используя все три техники, описанные в предыдущих колонках, то есть HTML, CSS и Javascript вместе взятые. Именно этот путь наиболее интересен, потому что он не использует внешних программ, анимацию создает сам браузер. Вообще говоря, анимации на сайте существовали и раньше, и для этого использовался формат анимированных gif картинок. То есть один файл с расширением gif содержал много картинок и правило их ротации. Но использование Javascript дает намного больше возможностей. С его помощью можно двигать текст по сайту, можно делать анимации картинок с музыкой и разными фасонными переходами и многое другое. Конкретные примеры будут рассмотрены в отдельных разделах, а здесь я просто хочу дать общее представление об этой технике. Самое главное состоит в том, что в языке Javascript предусмотрена рекурсия функций с отсрочкой по времени. Этого нет даже в Java, хотя там такое можно сделать другими средствами.
А именно, любая функция может содержать в своем теле оператор повторного вызова этой функции через некоторое время. Вот пример возможной функции
Что здесь важно. При каждом вызове функции меняется значение глобальной переменной n, значит функция при каждом новом вызове будет делать, строго говоря, разные действия, в том числе может в зависимости от условия менять значение глобальной переменной pause. А в конце тела функции стоит оператор, который обязует браузер исполнить эту функцию еще раз и только один раз через время, задаваемое переменной pause в миллисекундах. Но так как оператор стоит внутри функции, то он будет работать многократно, и в общем случае с разным значением временного интервала pause.
Вообще говоря сам оператор setTimeout("move()", pause) ничего особенного собой не представляет. Он просто выполняет код javascript, записанный в текстовую переменную первого аргумента с отсрочкой по времени. У нас там записан вызов той функции, где он находится. Фокус именно в этом, что он стоит в теле той самой функции, какую он вызывает, и это работает, то есть не считается ошибкой. Во многих языках программирования как раз такой код является ошибкой, потому что функция не может вызывать саму себя. А в Javascript может. Указанный оператор весьма важен и именно на нем можно построить всю динамику изменения объектов на сайте. Поэтому я расскажу о нем подробнее. Если первым аргументом указывается строка кода, то браузер динамически создает функцию, в теле которой стоит эта строка. Можно самим создать такую функцию и после этого первым аргументом указать ее название без скобок. Но в нашем случае и так вызывается функция, поэтому более правильно писать так setTimeout(move, pause). Это короче и прямее. Такой путь рекомендуют использовать всегда, но использование строки кода просто более универсально, и если нет заранее написанной функции, то и прямее. Во всяком случае на моих сайтах оба кода работают одинаково хорошо. Иногда может возникнуть необходимость отменить действие отложенного запуска функции. Тогда надо ввести переменную-метку оператора вот так var tom = setTimeout(move, pause) и затем можно отменить действие оператора по метке оператором clearTimeout(tom). Попутно замечу, что существует еще пара операторов var inm = setInterval(move, pause); и clearInterval(inm);. Здесь первый оператор требует запускать функцию периодически через равные интервалы времени pause в миллисекундах. Отменить такую работу позволяет второй оператор. Его, в частности, можно запустить по событию от читателя, например, по клику на кнопке. Интересно, что в том рекурсивном случае, который я показал выше, формально отменить процесс вообще невозможно. Но можно изменить значение глобальной переменной pause и сделать его очень большим, либо поставить условие в тело функции, при невыполнении которого ничего не происходит, в том числе и оператор setTimeout("move()", pause) не запускается. Но это плохой стиль. Лучше делать так, что оператор запускается, но ничего не делает. Потому что в этом случае можно снова запустить процесс по кнопке. Выглядеть такой код может вот так:
Исходно логическую переменную ona можно задать в любом состоянии. И сделать две кнопки, которые будут запускать две последние функции. Первая будет включать анимацию, вторая выключать. Название ona я выбрал потому что это начало слов "on animation". Можно также ввести и другие логические переменные, которые будут крутить анимацию вперед или назад. Например, ввести переменную dir и вместо n++ записать: if( dir ){n++;}else{n--;}, а затем ввести еще две функции function forwf(){ dir = true; } и
function backf(){ dir = false;}. Указанный выше рекурсивный метод можно использовать весьма плодотворно. Можно поставить на сайт часы, которые будуть ходить и даже будить. Можно делать смену картинок в окне и задавать фасонные переходы этой смены, можно двигать текст и листать страницы. Но чтобы превратить возможность в действительность надо понимать как все работает, потому что методы анимации могут быть весьма нестандартными. Первое, что всегда можно делать, как я уже отмечал, это менять значения параметров форматирования CSS, такие как ширина и высота окна, координаты размещения окна, адрес файла картинки. Можно накладывать две или три области одну на другую и двигать одну область относительно другой. Можно менять размеры области и делать невидимым все, что находится за этими пределами. Ну и самое, наверно интересное - можно менять прозрачность областей.
Ситуация с прозрачностью не такая простая и я хочу на ней остановиться подробнее. Сейчас на сайте W3C рекомендуется к исполнению таблица стилей CSS 2.1, и в этой версии таблицы стилей параметра, изменяющего прозрачность объектов нет. Как говорят, он появится только в CSS 3, которая все еще в разработке. Но почти все браузеры уже давно выполняют эту рекомендацию CSS 3. То есть у любых объектов, в том числе у таких как div, img, есть параметр форматирования opacity, который может принимать значения от 0 (полностью прозрачная область) до 1 (полностью непрозрачная область). Таким образом, накладывая несколько областей друг на друга и делая все области прозрачными, кроме одной, можно менять содержимое области. Все это замечательно работает, кроме одной детали. Гиперссылки показываются во всех областях, но работают только в самой верхней, то есть той, которая была наложена последней. Однако для переходов между картинками с плавным изменением прозрачности гиперссылки не нужны. Можно также выделять какую-то светлую область на фоне всего остального, более темного. Вообще манипуляции с прозрачностью - очень сильный инструмент.
Но здесь есть сложность, которая состоит в том, что Майкрософт уже очень давно реализовала в своем браузере Internet Explorer не только прозрачность, но и градиент цвета и многое другое. Это было так давно, что тогда никаких стандартов не было вообще. К сожалению стандарты часто отстают и идут своим путем, не поддерживая инициативы Майкрософт. В результате в самом массовом браузере это не работает в таком виде. Но работает в другом виде. Вместо параметра opacity у него есть параметр filter а внутри него - свойство Alpha. Поэтому для Internet Explorer нужно просто по другому записать, чтобы получить тот же самый эффект. Но как определить -- какой браузер работает. К сожалению и тут нет стандартов, но методы есть. Их много, я раньше использовал вот такой. В Javascript для получения указателя на параметр style тега с нужным id="b0" можно записать так sty[0] = document.getElementById("b0").style;. Из этих указателей даже можно сделать массив. Но в Internet Explorer то же самое можно получить и другим способом, а именно sty[0] = document.all.b0.style;. Это намного изящнее, но опять не стало стандартом. Так вот, если в javascript сделать условие if( document.all ){...}, то все браузеры, кроме Internet Explorer выдадут значение false и только Internet Explorer выдаст значение true. Поэтому прозрачность можно задавать так. Это работает. Но последнее время в Javascript стало модным использовать логическую переменную с названием IE для отличия Экплорера от других браузеров. Если ее использовать, то можно записать так if( IE ){...} с тем же самым эффектом. Итак пишем
где op - переменная, имеющая значение в интервале от 0 до 1. И все одинаково работает как в Экплорере, так и в других браузерах. Но переменную IE надо определить. Для этого разные люди используют разные способы, основанные на различиях в работе Экплорера и других браузеров. Повидимому самый короткий способ вот такой var IE = !-[1,];
В этом разделе я представляю простые примеры работы анимированных объектов на сайте, которые программируются с помощью языка javascript в сочетании с HTML и возможно CSS и используют функцию выполнения программ с отсрочкой по времени. Сами примеры записаны в отдельные файлы и показываются в отдельном окне. Здесь же дана аннотация каждого примера и ссылка посмотреть на пример сайта, код которого описывается:
ПРОКРУТКА -- пример объекта, который показывает текст, движущийся через картинку в окне с рамкой и две кнопки для включения и выключения движения. Текст скользит поверх картинки вверх и вниз как маятник. То есть сайт все время изменяется и этим изменением можно управлять. Использованы теги: div, img, p, и универсальные функции javascript: setTimeOut() и getElementById(). Посмотреть
ПРОЗРАЧНОСТЬ -- пример объекта, который показывает плавный переход от одной картинки к другой, в результате которого меняется прозрачность верхней картинки от полностью прозрачной до непрозрачной. Процесс можно запускать по кнопке в прямом и обратном направлениях. То есть сайт все время изменяется и этим изменением можно управлять. Параметр прозрачности изменяется кодом javascript раздельно для браузера Интернет Экплорер и остальных. Использованы теги: div, img, и универсальные функции javascript: setTimeOut() и getElementById(). Посмотреть