- •Часть 2 Язык гипертекстовой разметки html. Расширенные возможности
- •Определение типа документа
- •Стилевое оформление сайтов
- •Создание таблицы стилей
- •Атрибут style
- •Создание специальных классов
- •Связывание и внедрение таблиц стилей
- •Свойства и стили
- •Создание сайтов с помощью фреймов Понятие фрейма
- •Добавление фреймов
- •Имена и целевые объекты фреймов
- •Вложенные фреймы
- •Использование мультимедийных элементов и jaVa-приложений Понятие мультимедиа
- •Причины использования мультимедиа
- •Типы файлов
- •Связывание или внедрение
- •Мультимедийные элементы на страницах Добавление гипермедиассылок
- •Внедрение мультимедийных элементов
- •Внедрение QuickTime
- •Формат Windows Media
- •Работа с Java
- •Java-апплеты
- •Стили сайтов: разработка, доступность и глобализация Стили сайтов
- •Базовый сайт
- •Глобализация
- •Публикация веб-сайтов
- •Поставщики услуг Интернета
- •Бесплатные серверы
- •Доступ к дисковому пространству сервера
- •Библиографический список
- •Содержание
- •Часть 2 Язык гипертекстовой разметки html. Расширенные возможности
- •620002, Екатеринбург, ул.Мира, 19
- •620002, Екатеринбург, ул.Мира, 19
Базовый сайт
Под базовым сайтом будем понимать сайт, который впоследствии будем изменять.
Написание таблицы стилей для веб-узла требует предварительных размышлений, поскольку нужно хорошо представлять, какие элементы оформления могут потребоваться и как они должны выглядеть. Кроме того, следует осознать, сколько разных стилей могут описывать один и тот же элемент. Например, может возникнуть потребность переопределять элемент <p> раз пять или шесть.
Пример. Пусть страницы содержат такие элементы, как <hr/>, <h1>…<h6>, <p>. Тогда таблица стилей может выглядеть так:
hr {width: 50%}
h1, h2, h3, h4, h5, h6 {font-famile: Arial, Helvetica, Sans Serif}
p {font-family: Times, Times New Roman, Serif;
font-size: 12pt}
p.subhead {font-size: 16pt; font-weight: bold}
p.indent {margin-left: 50px, margin-right: 50px}
Обратите внимание, что для абзаца вначале определяется главный элемент <p>, затем последовательно описываются классы, каждый из которых использует базовое определение и добавляет свои свойства.
Таблица стилей сохраняется в отдельном файле с расширением .css и помещается в каталоге с html-файлами сайта. К веб-страницам файл, содержащий таблицу стилей, подключается с помощью элемента <link/>:
…
<head>
<title>…</titile>
<link rel="stylesheet" href="имя_файла_с_табл.css"/>
</head>
…
Таблицы стилей представляют широкое поле для экспериментов. Произведя несколько изменений в файле таблицы стилей, мы меняем вид сайта.
Пример. Пусть нам необходимо определить стиль, который можно распространить на все абзацы страницы. Для этого создадим универсальный класс indent.
.indent {margin-left: 10px; margin: 100px;
padding-left: 10px; padding-right: 10px;
background-color: ffccff}
hr {width: 50%}
h1, h2, h3, h4, h5, h6 {font-famile: Arial, Helvetica, Sans Serif}
p {font-family: Times, Times New Roman, Serif;
font-size: 12pt}
p.subhead {font-size: 16pt; font-weight: bold}
Теперь, чтобы элементы на веб-странице были оформлены с помощью этого стиля, необходимо их поместить в элемент <div>:
<div class="indent">…</div>.
Глобализация
Еще один шаг, который надо сделать в процессе планирования сайта, - это определить, какие национальные языки он будет поддерживать. Для этого в стандарте XHTML существует атрибут lang, элемент <q>, а также специальные команды, касающиеся таблиц и блоков текста.
Атрибут lang может использоваться в ряде элементов. Его значение – двухбуквенное обозначение языка, например:
<p lang ="ru"> Привет</p>
В следующей таблице приводятся некоторые обозначения языков.
Обозначение |
Язык |
Ar |
арабский |
Ch |
китайский |
Dl |
немецкий |
Es |
испанский |
En |
английский |
Fr |
французский |
It |
итальянский |
Ja |
японский |
Атрибут lang позволяет принять решение о том, как отображать элемент, как его произносить (если браузер речевой), а также помогает поисковым системам в классификации сайтов. По умолчанию язык, на котором написана страница является частью определения XML, которое пишется в начале кода страницы (см. «Определение типа документа»).
Атрибут lang может использоваться с элементом <q>, если цитата приводится на иностранном языке:
<p> <q lang="en"> The truth is out there </q> сказал Малдер.</p>