Цель создания css
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.
Способы подключения css к документу
Правила CSS пишутся на формальном языке CSS и располагаются в таблицах стилей, то есть таблицы стилей содержат в себе правила CSS. Эти таблицы стилей могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и в отдельных файлах, имеющих формат CSS. (По сути, формат CSS — это обычныйтекстовый файл. В файле .css не содержится ничего, кроме перечня правил CSS и комментариев к ним.) То есть, эти таблицы стилей могут быть подключены, внедрены в описываемый ими веб-документ четырьмя различными способами:
когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством тега <link>, располагающегося в этом документе между тегами <head> и </head>. (Тег <link> будет иметь атрибут href, имеющий значением адрес этой таблицы стилей). Все правила этой таблицы действуют на протяжении всего документа;
<head>
.....
<link rel="stylesheet" type="text/css" href="style.css">
</head>
когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством директивы @import, располагающейся в этом документе между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>) сразу после тега <style>, которая также указывает (в своих скобках, после слова url) на адрес этой таблицы стилей. Все правила этой таблицы действуют на протяжении всего документа;
<head>
.....
<style type="text/css" media="all">
@import url(style.css);
</style>
</head>
когда таблица стилей находится, описана в самом документе, она может располагаться в нём между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>). Все правила этой таблицы действуют на протяжении всего документа;
<head>
.....
<style type="text/css">
body {
color: red;
}
</style>
</head>
когда таблица стилей находится, описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега.
<p style="font-size: 21px; color: green;">Рассказ о том, как вредно красить батареи</p>
В первых двух случаях говорят, что к документу применены внешние таблицы стилей, а во вторых двух случаях — внутренние таблицы стилей.
Для добавления CSS к XML-документу, последний должен содержать специальную ссылку на таблицу стилей. Например:
<?xml-stylesheet type="text/css" href="style.css"?>
Тема «Формы и сенсорные изображения»:
Форма в языке HTML. Поле для ввода строки текста. Поле для ввода пароля. Выбор одного или нескольких значений из определенных на странице. Выбор одного значения из нескольких. Элемент ввода текста. Выпадающее меню. Организация меню. Скрытые элементы. Выбор файлов для отправки на сервер. Кнопки. Навигационные карты
<МЕТА http-eguiv="Content-Type" content="text/html;
charset=windows-1251">
<ТIТLЕ>Пример формы</ТIТLЕ>
<BODY>
<Р> Это форма, в которой предусмотрено поле для ввода текста, а также кнопки для отправки данных и сброса введенных значений
<Р>
<FORM method="post" action="http://www.server.com/scripts/modulel.exe">
<TEXTAREA style="WIDTH: 257px; HEIGHT: 90px" name="Info" rows=ll cols=42>
В это поле вводится текст </TEXTAREA> <Р> <INPUT type="submit" value="Submit" name="Sub">
<INPUT type="reset" value="Reset" name="Res"> </FORM> </BODY> </HTML>
Листинг 7.1 имеет отображение в браузере, приведенное на рис. 7.1.
<=""
img="">
Рис. 7.1. Пример формы
Область кода страницы, содержащая интерактивные элементы, начинается с тега <FORM>, в атрибутах которого находится информация о методе отправки данных и адресе серверного модуля, используемого для обработки данных. Метод отправки данных влияет лишь на работу серверного модуля, а значит, пока этого атрибута мы касаться не будем, полагая его равным post. В значении атрибута action должен указываться URL-адрес программы-обработчика пользовательских данных.
Следом за открывающим тегом могут быть размещены уже изученные и интерактивные элементы языка HTML.
В приведенном выше примере используется элемент TEXTAREA, позволяющий вводить несколько строк текста, и две кнопки, с зарезервированными значениями типов: submit и reset. Первый тип означает, что после нажатия на эту кнопку, данные, содержащиеся в элементах формы, будут отправлены на сервер, по указанному выше пути, а второй — что все состояние элементов формы будет сброшено до начального. То есть, если пользователь введет в форму некий текст, а затем нажмет кнопку reset, то в поле TEXTAREA введенный пользователем текст будет уничтожен и опять появится надпись "В это поле вводится текст".
После описания всех интерактивных элементов в HTML-документе форму нужно закрыть тегом </FORM>.
Таким образом, на Web-странице могут создаваться блоки, представляющие собой удобные структуры для ввода данных, на базе которых строится клиент-серверное взаимодействие в среде WWW (справедливости ради следует заметить, что это не единственный, хотя и самый распространенный способ отправки данных клиента).
Для ввода и отправки данных предусмотрено несколько элементов языка HTML, и для удобства и ясности материала мы будем описывать их, исходя из их функционального назначения.
Поле для ввода строки текста
Такое поле внутри формы задается сочетанием элемента и атрибута, приведенным в листинге 7.2.
Листинг 7.2. Пример описания поля для ввода строки
<FORM action="myscript.exe" method="Post">
<INPUT type="text" name="sometext" size="20" maxlength="25">Sometext
<INPUT type="submit" value="Submit" name="Sub">
</FORM>
В приведенном листинге кроме описания поля присутствует также элемент отправки данных (в данном случае — кнопка). Его присутствие обязательно.
Атрибут type определяет тип элемента для ввода. В случае строки, его значение должно устанавливаться в text.
Атрибут name определяет уникальное имя элемента, что в последующем позволит серверному модулю установить принадлежность полученных данных именно к этому полю ввода данных.
Атрибут size задает ширину поля (количество символов, отображаемых на экране).
Maxlength ограничивает максимальное число символов, которое может ввести пользователь. Как и предыдущий параметр, не является обязательным.
Поле для ввода пароля
Это поле внутри формы задается приведенным в листинге 7.3 сочетанием элемента INPUT с атрибутом type, равным password. Роль данного элемента заключается лишь в замене на экране вводимых символов звездочками. При этом при передаче по сети информация никак не защищается.
Листинг 7.3. Пример определения в HTML-документе поля для ввода пароля
<FORM action="myscript.exe" method="Post">
<INPUT type="password" name="somepass" size="20" maxlength="25">
<INPUT type="submit" value="Submit" name="Sub">
</FORM>
Роль атрибутов элемента password аналогична элементу text.
Выбор одного или нескольких значений из определенных на странице
Для пометки нужных сведений флажками используется элемент checkbox, (листинг 7.4).
Листинг 7.4. Пример использования элемента checkbox
<FORM action="myscript.exe" method="Post">
<Р>Я люблю...<Р>
<INPUT type="checkbox" name="fruct" value="apple">Яблoки
<INPUT type="checkbox" name="fruct" value="0range" checked>Aпeльcины
<INPUT type="checkbox" name="fruct" value="Lime" checked disabled>flMMOHH
<INPUT type="submit" value="Submit" name="Sub">
</FORM>
Обратите внимание, что группа этих флажков помечена одним именем fruct, в то время, как каждый из них имеет свое уникальное значение. Атрибут checked означает, что по умолчанию данный флажок уже выбран, а disabled — изменение состояния недоступно. На сервер отправляются значения, указанные в поле value, а не значения, следующие после указания тега и отображаемые на экране.
Тема «Применение JavaScript в Интернет - программировании»:
Необходимость применения JavaScript. Вставка в код страницы. Синтаксис. Типы переменных. Массивы. Ввод/вывод в JavaScript. Управление потоком вычислений в JavaScript. Управление окнами просмотра. Пользовательские функции. Формы и JavaScript. AJAX – приложения.
Необходимость применения JavaScript
Первый и самый главный недостаток языка HTML — это полное отсутствие каких-либо независимых от пользователя средств управления и контроля за отображением и просмотром Web-страниц. Содержимое и/или параметры отображения той или иной страницы задаются жестко в момент написания и не могут быть изменены в процессе отображения страницы и просмотра ее пользователем. Переходы между страницами также находятся под полным контролем пользователя. Даже размер открываемого для просмотра окна браузера будет таким, каким захочет видеть его пользователь (И ваш чудесный дизайн, рассчитанный, правда, на ширину окна 480 пикселов, перестанет быть таковым при просмотре в окне шириной 600 пикселов). Таким образом, сайт, созданный при помощи стандартных средств HTML, получается достаточно пассивным по отношению к пользователю и не отвечает в полной мере интерактивной концепции, в рамках которой он, вообще говоря, и создавался. Второй недостаток во многом переплетается с первым и состоит в отсутствии средств программирования. Ввиду этого недостатка HTML не имеет той гибкости, которую ожидают создатели современных Web-сайтов. Представим, что создатель сайта хочет, чтобы перед отображением документа была известна ширина текущего окна браузера. В зависимости от этой величины выбирается тот или иной дизайн страницы. Это легко сделать при помощи банального, известного еще со времен Бейсика и Паскаля, оператора ветвления (if - Then - Else). Так ведь HTML не имеет даже такого простого средства. Таким образом, в рамках чистого HTML мы не только не можем предоставить пользователю свою реальность, но и не можем даже подстроиться под реалии пользователя.
Естественно, с таким положением дел мириться нельзя. Было предложено несколько вариантов выхода из этой ситуации.
Первый подход — автоматическая генерация HTML-кода на стороне сервера и дальнейшая отправка его клиенту. Этот подход реализовывается благодаря технологиям CGI, ASP, SSI и др. Он позволяет в полной мере держать под контролем взаимодействие сайта с пользователем и решить тем самым многие из вышеописанных проблем. Однако, являясь очень мощными средствами Web-программирования, CGI, ASP, SSI имеют также несколько принципиальных недостатков.
Первый — недоступность широкому кругу Web-разработчиков. Как упоминалось выше, не каждая служба хостинга предоставляет своим клиентам возможность использовать собственные серверные скрипты. Второй недостаток — большая нагрузка на сервер, ведь реализация вышеуказанных технологий происходит путем исполнения соответствующих приложений на стороне сервера. Есть и другие недостатки, которые касаются каждой технологии в отдельности.
Второй подход — перенос исполнения серверных приложений на клиентскую сторону. В рамках этого подхода происходит загрузка исполняемого кода для машины пользователя по сети. Здесь мы сразу сталкиваемся с проблемой безопасности, поскольку исполняемый модуль является, по сути дела, "котом в мешке", и может содержать команды, выполняющие деструктивные действия, предотвратить исполнение которых довольно сложная проблема. Также приложения могут иметь очень большой (сотни килобайт) размер, что сказывается на времени их передачи по сети и возможности нарушения целостности данных ввиду сбоев связи или помех. Третье препятствие — многообразие аппаратно-программных платформ пользователей. Не факт, что у пользователя, загружающего ЕХЕ-файл стоит Windows-подобная операционная система. Вопросы совместимости, безопасности, объема данных и другие могут быть решены путем перехода от готовых компилированных приложений к интерпретируемым. Специальная программа-интерпретатор, находящаяся на стороне пользователя и управляемая браузером, принимает от сервера некий промежуточный код, анализирует его, в том числе и на наличие деструктивных операций, и либо исполняет его, либо компилирует его в настоящий исполняемый модуль. Данный подход был реализован в специальном Web-ориентированном языке Java, рожденном в недрах компании Sun Microsystems в 1995 году, а также в других подобных средствах, например, Macromedia Flash.
Дальнейшим шагом в этом направлении стал третий подход — отказ от промежуточного кода и передача пользователю непосредственно встроенных в HTML-страницу кусков программного кода — скриптов. Данные скрипты (их еще называют сценарии) интерпретируются и исполняются специальным модулем браузера. Скрипты не имеют той мощи, которая присуща серверным или клиентским приложениям, но, тем не менее, позволяют решать большинство задач по управлению отображением и загрузкой страниц сайта. Кроме того, для написания скриптов не нужно обладать какими-то специальными средствами для их разработки и отладки. Достаточно иметь, как и для написания HTML-кода, Блокнот (Notepad), а для проверки и исполнения обычный браузер.
В настоящее время наиболее широко используются два языка описания сценариев: JavaScript и VBScript. VBScript является детищем компании Microsoft и имеет в своей основе язык Visual Basic той же компании. VBScript похож на своего прародителя и синтаксически, и концептуально. Степень распространенности VBScript достаточно низка ввиду не слишком большой популярности Visual Basic, а также ограниченности среды его применения ареалом распространения продуктов компании Microsoft.
JavaScript является потомком вышеупоминавшегося языка Java компании Sun. Впервые он был реализован в браузерах Netscape 2.O. Однако быстро завоевал бешеную популярность и получил повсеместное распространение, особенно после "введения в эксплуатацию" Internet Explorer 3.0 с поддержкой JavaScript. Как и Java, JavaScript имеет синтаксис, подобный синтаксису языка C++, что во многом способствовало его популярности. Другим достоинством JavaScript, взятым от прародителя, является использование объектно-ориентированной концепции программирования. Правда, в отличие от Java, объектная модель спрятана достаточно глубоко, и Web-мастер, довольно долго использующий JavaScript, может и не догадываться о том, что он работает не просто с переменными, а с объектами. Тем не менее программа, написанная на языке описания сценариев, в процессе своего функционирования использует как свои объекты, так и объекты браузера, осуществляя при этом вызовы методов и обработку событий.
Тема «Применение Flash, Silverlight, WPF, Java в Интернет-программировании»:
Создание Rich Internet application (RIA, «богатое Интернет-приложение») на основе технологий Flash, Silverlight, WPF, Java.