- •Введение
- •От автора
- •С труктура html документов
- •Анатомия web страницы
- •Указание приложения, в котором был создан документ
- •Оформление основной части страницы
- •Форматирование текста
- •Теги управления шрифтом
- •Специальные символы
- •Задание произвольного вида маркеров в списке
- •Работа с графикой, звуком и видео клипами
- •Гиперссылки
- •Изображения-карты
- •Создание стилей
- •Сценарии
- •Редакторы гипертекста
- •Форматы графических файлов
- •Лабораторная работа №1 Тема. Оформление страницы
- •Лабораторная работа №2 Тема. Стилевое оформление текста
- •Лабораторная работа №3 Тема. Таблицы
- •Лабораторная работа №4 Тема. Списки
- •Лабораторная работа №5 Тема. Работа с графикой, звуком и видеоклипами
- •Лабораторная работа №6 Тема. Ссылки
- •Приложение а. Цветовая модель rgb
- •Приложение b. Свойства таблиц стилей
Создание стилей
Для любого элемента страницы можно создать стиль. Стили позволяют изменять свойства элементов в соответствии с желаниями разработчика.
Давайте рассмотрим механизм, с помощью которого стили присваиваются элементам Webстраниц. Самый простой случай присвоения какому-либо элементу определенного стиля выглядит так: НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: значение; }
Где НАЗВАНИЕ_ЭЛЕМЕНТА – имя HTMLтега (H1, P, TD, A и т. д.), а параметры в фигурных скобках – список свойств элемента и присвоенных им значений. Примеры использования стилей смотрите в описании тегов <style>, <link>.
Примеры:
Стиль заголовка 2 уровня:
H2 {font-family: Verdana, Arial Cyr, Arial;
font-weight: bold;
font-size: 14pt;
color: black;
margin-left: 20%;
margin-top: 1cm;
text-align: left;}
Стиль параграфа
P {font-family: Times New Roman, serif;
color: #000000;
margin-left: 15%;
margin-right: 15%;
margin-top: 1pt;
margin-bottom: 1pt;
text-indent: 1cm;
text-align: justify; }
Для каждого элемента есть набор свойств, которые можно изменить. Свойства и пример их задания смотрите в приложении №2.
<DIV></div> Элемент предназначенный для применения стилей. Это контейнер для элементов находящихся внутри.
Пример:
<HEAD>
<STYLE type=”text/css”>
DIV.my {color : RGB(215,40,40); font-style: italic}
</style>
</head>
<BODY>
<DIV class=”my”>
<H1>заголовок</h1>
<P>Абзац</p>
</div>
</body>
<SPAN></span> Предназначен для включения в состав других элементов.
Пример:
<HEAD>
<STYLE type=”text/css”>
SPAM.my {color : RGB(215,40,40); font-style: italic}
</style>
</head>
<BODY>
<H1>заголовок</h1>
<P><SPAM class=”my”>Абзац</spam></p>
</body>
Сценарии
Сценарий – это программный код, который включается в текст страницы в виде исходного текста и выполняется броузером при просмотре страницы. Сценарий может быть написан на языке JavaScript, разработанном фирмой Netscape, или на Visual Basic Script (VBScript), разработанной фирмой Microsoft. Язык Java Script является признанным стандартом и этот язык используется на подавляющем большинстве страниц.
Язык Java Script позволяет динамически формировать страницы HTML и настраивать их на контекст броузера, часового пояса пользователя, размер экрана броузера и т.д. Синтаксис языка весьма напоминает синтаксис популярного языка системного программирования С++.
Как и всякий современный язык программирования, JavaScript имеет традиционную часть, включающую операторы присваивания, математические и строковые функции, операторы и объектно-ориентированную часть, к которой относятся объекты, события, свойства и методы.
Основной конструкцией языка является функция. Она создается по следующему шаблону:
Function ИмяФункции (параметр1, параметр2, …)
{
Текст программы
Return выражение
}
<SCRIPT></script>
Данный элемент позволяет отделить текст программы-сценария от остальной информации страницы.
Атрибут |
Описание |
Пример задания значения |
language |
Определяет язык скрипта. Значения: JavaScript, Tcl, VBScript. |
<SCRIPT language=”javascript”> </script> |
src |
Данный атрибут используется, если текст скрипта храниться в отдельном файле. Файлы содержащие программы на JavaScript?имеют расширение *.js. |
<SCRIPT language=”javascript” src=”primer.js”> </script> |
type |
Атрибут указывает на тип язык, хотя его применение не является обязательным. |
<SCRIPT language=”javascript” type=”text/javascript”> </script> |