- •1. Общие сведения
- •Структура html-документа и элементы разметки заголовка документа
- •Назначение заголовка
- •Отображение содержания элемента title
- •Основные контейнеры заголовка
- •Элемент разметки head
- •Элемент разметки title
- •Элемент разметки base
- •Элемент разметки isindex
- •Применение элемента isindex
- •Применение атрибута prompt
- •Элемент разметки meta
- •Элемент разметки link
- •Элемент разметки style
- •Элемент разметки script
- •Контейнеры тела документа Теги тела документа
- •Тело документа – контейнер body
- •Теги управления разметкой Заголовки
- •Атрибут аlign
- •Теги управления отображением символов
- •Теги, управляющие формой отображения
- •Верхние и нижние индексы
- •Атрибут sizе
- •Атрибут соlоr
- •Создание списков в html
- •Атрибуты маркеров в ненумерованном списке
- •Комментарии в языке html
- •Гипертекстовые ссылки
- •Графика Использование графики в html
- •Атрибуты и их аргументы
- •Атрибут src
- •Атрибут alt
- •Атрибут аlign
- •Атрибут usemap
- •Средства описания таблиц в html
- •Создание таблиц в html
- •Атрибут nowrap
- •Атрибут соlspan
- •Атрибут rowspan
- •Атрибут widтн
- •Применение пустых ячеек
- •Атрибут сеllраdding
- •Атрибуты аlign и valign
- •Атрибут border
- •Атрибут cellspacing
- •Атрибут bgcolor
- •Атрибут background
- •Использование таблиц в дизайне страницы
- •Создание разноцветных таблиц
- •Html-формы
- •Задание формы — элемент form
- •Атрибут cols
- •Как работают фреймы
- •Создание простой страницы с фреймами
- •Задание фреймовой структуры
- •Подготовка содержимого фрейма
- •Подготовка фрейма main
- •Списки Definition: элементы dl, dt и dd
- •Визуальное представление списков
- •Элементы dir и menu
- •Гиперссылки Гиперссылки и якоря. Введение
- •"Посещение" связанного ресурса
- •Другие соотношения гиперссылок
- •Спецификация якорей и гиперссылок
- •Заголовки гиперссылок
- •Интернационализация и гиперссылки
- •Синтаксис имён якорей
- •Вложение ссылок не допускается
- •Якоря с атрибутом id
- •Недоступные и неидентифицируемые ресурсы
- •Взаимосвязи документов: элемент link
- •Гиперссылки вперёд и назад
- •Гиперссылки и внешние таблицы стилей
- •Гиперссылки и машины поиска
- •Информация пути: элемент base
- •Добавление стиля в html
- •Установка языка по умолчанию для таблиц стилей
- •Инлайн-стиль (внедрённый)
- •Информация о стиле в заголовках: элемент style
- •Типы носителя
- •Внешние таблицы стилей
- •Основные и альтернативные таблицы стилей
- •Спецификация внешней таблицы стилей
- •Каскадные таблицы стилей
- •Media-зависимые каскады
- •Наследование и каскадирование
- •Скрытие данных стиля от пользовательских агентов (па)
- •Ссылки на таблицы стилей в заголовках http
- •Выравнивание, стили шрифта и горизонтальные линии Форматирование Цвет фона
- •Выравнивание
- •Плавающие объекты
- •"Всплывание" объекта
- •Обтекание текста вокруг объекта
- •Элементы стиля шрифта: tt, I, b, big, small, strike, s и u
- •Элементы модификатора шрифта: font и basefont
- •Сценарии (скрипты) Введение
- •Дизайн документов для па, поддерживающих скрипты
- •Элемент script
- •Установка языка скриптов
- •Язык сценариев по умолчанию
- •Локальное объявление языка скриптов
- •Ссылки на элементы html из скрипта
- •Динамическое изменение документов
- •Дизайн документов для па, не поддерживающих сценарии
- •Элемент noscript
- •Скрытие данных скрипта от па
- •Дополнительные возможности html Компоновка документа в html
- •Компоновка html - использование таблиц
- •Использование стилей в html
- •Как использовать стили
- •Внешняя таблица стилей
- •Внутренняя таблица стилей
- •Встроенные стили
- •Раздел заголовка html
- •Элемент head
- •Универсальные указатели ресурсов в html Ссылки в html
- •Универсальные указатели ресурсов
- •Схемы обращения к ресурсу url
- •Сценарии в html
- •Добавление сценария на страницу html
- •Как работать со старыми браузерами
- •Стандартные атрибуты html 4.0
- •Атрибуты событий клавиатуры
- •Атрибуты событий мыши
- •Вы изучили html, что дальше? Краткое заключение
- •Теперь вы знаете html, что дальше?
- •Каскадные таблицы стилей (css)
Использование стилей в html
В HTML 4.0 все форматирование можно переместить из документа HTML в отдельную таблицу стилей.
<html>
<head>
<style type="text/css">
h1 {color: red}
h3 {color: blue}
</style>
</head>
<body>
<h1>Это заголовок 1</h1>
<h3>Это заголовок 3</h3>
</body>
</html>
Пример выполнения данного HTML-кода
Этот пример показывает, как форматировать документ HTML с помощью информации о стилях, добавленной в раздел заголовка <head>.
<html>
<body>
<a href="lastpage.htm"
style="text-decoration:none">
ЭТО НЕПОДЧЕРКНУТАЯ ССЫЛКА!
</a>
</body>
</html>
Пример выполнения данного HTML-кода
Этот пример показывает, как с помощью атрибута style сделать ссылку, которая не подчеркивается.
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" >
</head>
<body>
<h1>Я отформатирован с помощью присоединенной таблицы стилей</h1>
<p>Я тоже!</p>
</body>
</html>
Пример выполнения данного HTML-кода
Этот пример показывает, как использовать тег <link> для соединения с внешней таблицей стилей.
Как использовать стили
Когда браузер считывает таблицу стилей, он форматирует документ согласно этой таблице. Существует три способа использования таблицы стилей.
Внешняя таблица стилей
Внешняя таблица стилей является идеальной, когда стиль применяется к нескольким страницам. С помощью внешней таблицы стилей можно изменить внешний вид всего Web-сайта, изменяя один файл. Каждая страница должна соединяться с таблицей стилей с помощью тега <link>. Тег <link> находится в разделе заголовка <head>.
<html>
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
</html>
Пример выполнения данного HTML-кода
Внутренняя таблица стилей
Внутренняя таблица стилей должна использоваться, когда один документ использует единый стиль. Внутренние стили определяют в разделе заголовка с помощью тега <style>.
<html>
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
</html>
Пример выполнения данного HTML-кода
Встроенные стили
Встроенный стиль должен использоваться, когда особый стиль должен быть применен к единственному появлению элемента.
Чтобы использовать встроенные стили, используется атрибут style в соответствующем теге. Атрибут style может содержать любое свойство CSS. Следующий пример показывает, как изменить цвет и левое поле параграфа:
<html>
<body>
<p style="color: red; margin-left: 20px">
Это параграф
</p>
</body>
</html>
Пример выполнения данного HTML-кода
Чтобы больше узнать о стилях, почитайте учебник о CSS.
|
Теги стилей | |
|
Тег |
Описание |
|
<style> |
Задает определение стиля |
|
<link> |
Задает ссылку на ресурс |
|
<div> |
Определяет раздел в документе |
|
<span> |
Определяет раздел в документе |
|
<font> |
Не рекомендуется. Используйте вместо этого стили. |
|
<basefont> |
Не рекомендуется. Используйте вместо этого стили. |
|
<center> |
Не рекомендуется. Используйте вместо этого стили. |
Раздел заголовка html
Заглавие документа
<html>
<head>
<title>Название документа не выводится</title>
</head>
<body>
<p>Выводится этот текст</p>
</body>
</html>
Пример выполнения данного HTML-кода
Информация о названии документа в элементе заголовка не выводится в окне браузера.
Одно место назначения для всех ссылок
<html>
<head>
<base target="_blank">
</head>
<body>
<p>
<a href="http://www.intuit.ru"
target="_blank">Эта ссылка </a>
будет загружаться в новом окне, так как атрибут target задан как "_blank".
</p>
<p>
<a href="http://www.osp.ru">
Эта ссылка</a>
также будет загружаться в новом окне, даже без атрибута target.
</p>
</body>
</html>
Пример выполнения данного HTML-кода
Этот пример показывает, как использовать тег base, чтобы все ссылки на странице открывались в новом окне.