- •Санкт – Петербургский Государственный Университет Аэрокосмического приборостроения
- •Тема 10. Карта сайта. 41
- •Тема 11. Таблицы стилей. 45
- •Введение.
- •Тема 1. СтруктураHtml-документов.
- •1.1. Границы документа.
- •1.2. Заголовок документа.
- •1.3. Тело документа.
- •Тема 2. ФорматированиеHtml-документов.
- •2.4. Предварительно отформатированный текст.
- •Тема 3. Форматирование текстаHtml-документов.
- •3.1. Логическое форматирование.
- •3.2. Физическое форматирование.
- •Тема 4. Использование графики вHtml-документах.
- •4.1. Выбор формата графического файла.
- •4.2. Вставка изображения в документ.
- •Тема 5. Ссылки вHtml-документах.
- •5.1. Гипертекст и гипермедиа.
- •5.2. Создание ссылок на документы и файлы.
- •5.3. Ссылки внутри документа.
- •Тема 6. Списки в html-документах.
- •6.6. Дополнительные возможности форматирования списков.
- •Тема 7. Таблицы вHtml-документах.
- •7.1. Основы построения таблиц.
- •7.2. Создание сложной таблицы.
- •7.3. Альтернативные способы представления табличных данных.
- •Тема 8. Кадры (фреймы) вHtml-документах.
- •8.1.Основы создания кадров.
- •8.2. Модификация внешнего вида кадров.
- •8.3. Организация ссылок в кадрах.
- •Тема 9. Формы вHtml-документах.
- •9.1. Что такое формы.
- •9.1.1. Типы управляющих элементов
- •9.2. Работа с формами.
- •9.3. Разработка форм.
- •9.3.1. Элемент input.
- •9.3.2. ЭлементButton.
- •9.3.3. Элементы select, optgroup и option
- •9.3.4. Заранее выбранные варианты
- •9.3.5. ЭлементTextarea
- •9.3.6. Метки.
- •9.3.6.1. Элемент label.
- •9.3.7. Переход фокуса на элемент.
- •9.3.7.1.Переход с помощью клавиши Tab.
- •9.3.7.2. Клавиши доступа.
- •9.3.8.Отправка формы.
- •9.3.8.1. Метод отправки формы.
- •9.3.8.2. Успешные управляющие элементы.
- •9.3.9.Обработка данных формы.
- •Тема 10. Карта сайта.
- •Тема 11. Таблицы стилей.
- •11.1. Псевдоклассы и псевдоэлементы:
- •11.2. Краткое описание языка css.
- •11.3. Некоторые хитрости управления стилями.
- •Приложение 1.Цвета.
Тема 2. ФорматированиеHtml-документов.
2.1. Разделение текста на абзацы.
<p> – открывающий тэг.
</p> – закрывающий тэг.
Выравнивание абзаца.
<align>
Значение |
Функция |
LEFT |
Выравнивание текста по левой границе окна браузера |
RIGHT |
Выравнивание текста по правой границе окна браузера |
CENTER |
Выравнивание текста по центру окна браузера |
JUSTIFY |
Выравнивание текста по ширине окна браузера |
2.2. Перевод строки.
<br>
Бывают случаи, когда возникает надобность в операции противоположного назначения – запретить перевод строки. Текст, заключенный между тэгами <nobr>…</nobr>, будет гарантированно располагаться в одной строке без переноса на другую.
<wbr> - предлагает браузеру альтернативное место перевода строки (при необходимости).
2.3. Структурирование текста.
А) Заголовки
Используются для автоматического структурирования документа. 6 уровней заголовков.
<H№> Текст заголовка <H№> (Например, <H1> Заголовок раздела </H1>)
В) Горизонтальные линии.
<HR>
Атрибуты.
Атрибут |
Назначение |
ALIGN |
Выравнивание (LEFT, RIGHT, CENTER) |
WIDTH |
Длина линии в пикселах или процентах от ширины окна браузера (Например, 120 или 90%) |
SIZE |
Ширина линии в пикселах |
NOSHADE |
Отменяет рельефность линии |
COLOR |
Цвет линии. |
2.4. Предварительно отформатированный текст.
<pre>…</pre>. Текст внутри контейнера может содержать любые элементы физического и логического форматирования. Запрещено использование тэга <ADDRESS> и тэгов заголовка.
Тема 3. Форматирование текстаHtml-документов.
Существует два главных класса текстовой разметки: логическая и физическая. Логическая разметка показывает рольтекстового сегмента, например, большую значимость по сравнению с обычным текстом или то, что данный сегмент является цитатой. Физическая разметка связана с представлением текста в специальной манере, например, с использованием шрифтов или специального вида подчеркивания.
Предпочтение должно отдаваться логической разметке. Используйте физическую разметку только, если это действительно соответствует требованиям представления текста. Например, для сильного выделения используйте элементSTRONG, а неB, в предположении, что различные Web браузеры реализуют подчеркивания лучшим образом для того окружения, в котором они установлены.
Таблица стилей2также будет полезна для использования. Например, кому-то захочется все программные коды представлять на желтом фоне и большим шрифтом, в то время как кто-то другой предпочтет совсем другие методы для выделения их в обычном тексте. Такие операции будут выполняться много проще, если постоянно будет использоваться логическая разметка.
В дополнение к большей гибкости при представлении текста различными браузерами логическая разметка имеет следующее преимущество по сравнению с физической: все большее количество компьютерных программ извлекают информацию из HTML документов для различных целей. Для такой работы лучше иметь "индикаторы" логической разметки, выделяющие, например, некоторый текст, как более важный, или цитированные разделы.