- •Санкт – Петербургский Государственный Университет Аэрокосмического приборостроения
- •Тема 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.Цвета.
Web – дизайн. Методические указания.
Беспалов Г. В. © 2005 г. -
Санкт – Петербургский Государственный Университет Аэрокосмического приборостроения
Методические указания по курсу «Web - дизайн»
г. Санкт - Петербург
2004 г.
Содержание.
Введение. 4
Тема 1. Структура HTML-документов. 6
1.1. Границы документа. 6
1.2. Заголовок документа. 6
1.3. Тело документа. 7
Тема 2. Форматирование HTML-документов. 8
2.1. Разделение текста на абзацы. 8
2.2. Перевод строки. 8
2.3. Структурирование текста. 8
2.4. Предварительно отформатированный текст. 8
Тема 3. Форматирование текста HTML-документов. 9
3.1. Логическое форматирование. 9
3.2. Физическое форматирование. 10
3.3. Тэг <FONT>. 10
3.4. Тэг <BASEFONT>. 10
3.5. Тэг <MARQUEE>. 10
Тема 4. Использование графики в HTML-документах. 11
4.1. Выбор формата графического файла. 11
4.2. Вставка изображения в документ. 11
Тема 5. Ссылки в HTML-документах. 14
5.1. Гипертекст и гипермедиа. 14
5.2. Создание ссылок на документы и файлы. 15
5.3. Ссылки внутри документа. 15
Тема 6. Списки в HTML-документах. 17
6.1. Упорядоченный (нумерованный) список. 17
6.2. Неупорядоченный (маркированный) список. 17
6.3. Меню. 17
6.4. Список определений. 18
6.5. Комбинированные списки. 18
6.6. Дополнительные возможности форматирования списков. 18
Тема 7. Таблицы в HTML-документах. 19
7.1. Основы построения таблиц. 19
7.2. Создание сложной таблицы. 19
7.3. Альтернативные способы представления табличных данных. 20
Тема 8. Кадры (фреймы) в HTML-документах. 21
8.1.Основы создания кадров. 21
8.2. Модификация внешнего вида кадров. 22
8.3. Организация ссылок в кадрах. 23
Тема 9. Формы в HTML-документах. 24
9.1. Что такое формы. 24
9.1.1. Типы управляющих элементов 24
9.2. Работа с формами. 25
9.3. Разработка форм. 26
9.3.1. Элемент INPUT. 26
9.3.2. Элемент BUTTON. 30
9.3.3. Элементы SELECT, OPTGROUP и OPTION 31
9.3.4. Заранее выбранные варианты 31
9.3.5. Элемент TEXTAREA 33
9.3.6. Метки. 34
9.3.6.1. Элемент LABEL. 34
9.3.7. Переход фокуса на элемент. 36
9.3.7.1. Переход с помощью клавиши Tab. 36
9.3.7.2. Клавиши доступа. 37
9.3.8. Отправка формы. 38
9.3.8.1. Метод отправки формы. 38
9.3.8.2. Успешные управляющие элементы. 39
9.3.9. Обработка данных формы. 40
Тема 10. Карта сайта. 41
Тема 11. Таблицы стилей. 45
11.1. Псевдоклассы и псевдоэлементы: 46
11.2. Краткое описание языка CSS. 47
11.3. Некоторые хитрости управления стилями. 49
Приложение 1. Цвета. 51
Введение.
World Wide Web (Web) - это сеть информационных ресурсов. Для того, чтобы сделать эти ресурсы доступными наиболее широкой аудитории, в Web используются три механизма:
Единая схема наименования для поиска ресурсов в Web (например, URL).
Протоколы для доступа к именованным ресурсам через Web (например, HTTP).
Гипертекст для простого перемещения по ресурсам (например, HTML).
Каждый ресурс в Web - документ HTML, изображение, видеоклип, программа и т.д. - имеет адрес, который может быть закодирован с помощью универсального идентификатора ресурсов (Universal Resource Locator), или URL.
URL обычно состоят из трех частей:
Схема наименования механизма, используемого для доступа к ресурсу.
Имя машины, на которой располагается ресурс.
Имя собственно ресурса, зачданное в виде пути.
Рассмотрите URL этой спецификации HTML на сервере W3C:
http://www.w3с.org/TR/PR-html4/cover.html
Этот URL может читаться следующим образом: этот документ можно получить по протоколу http, он располагается на машине www.w3с.org, путь к этому документу - "/TR/PR-html4/cover.html". Кроме того, в документах в формате HTML Вы можете увидеть схемы "mailto" для электронной почты и "ftp" для протокола FTP.
Чтобы представить информацию для глобального использования, нужен универсальный язык, который понимали бы все компьютеры. Языком публикации, используемым в World Wide Web, является HTML (Hyper Text Markup Language - язык разметки гипертекстов).
HTML дает авторам средства для:
публикации электронных документов с заголовками, текстом, таблицами, списками, фотографиями и т.д.
загрузки электронной информации с помощью щелчка мыши на гипертекстовой ссылке.
разработки форм для выполнения транзакций с удаленными службами, для использования в поиске информации, резервировании, заказе продуктов и т.д.
включения электронных таблиц, видеоклипов, звуковых фрагментов и других приложений непосредственно в документ.
Краткая история HTML.
Язык HTML был разработан Тимом Бернерс-Ли во время его работы в CERN и распространен браузером Mosaic, разработанным в NCSA. В 1990-х годах он добился особенных успехов благодаря быстрому росту Web. В это время HTML был расширен и дополнен. В Web очень важно использование одних и тех же соглашений HTML авторами Web-страниц и производителями. Это явилось причиной совместной работы над спецификациями языка HTML.
HTML 2.0 (ноябрь 1995) был разработан под эгидой Internet Engineering Task Force (IETF) для упорядочения общепринятых положений в конце 1994 года. HTML+ (1993) и HTML 3.0 (1995) - это более богатые версии языка HTML. Несмотря на то, что в обычных дискуссиях согласие никогда не было достигнуто, эти черновики привели к принятию ряда новых свойств. Усилия Рабочей группы World Wide Web Consortium по HTML в упорядочении общепринятых положений в 1996 привели к версии HTML 3.2 (январь 1997).
В HTML 4.0 вводятся механизмы таблиц стилей, скриптов, кадров, внедрения объектов, улучшенная поддержка разных направлений письма и направления справа налево, таблицы с большим количеством возможностей и новые свойства форм, обеспечивая лучшие возможности доступа для людей с физическими недостатками.
Большинство людей признают, что документы HTML должны работать в различных браузерах и на разных платформах. Достижение совместимости снижает расходы авторов, поскольку они могут разрабатывать только одну версию документа. В противном случае возникает еще больший риск, что Web будет представлять собой смесь личных несовместимых форматов, что в конечном счете приведет к снижению коммерческого потенциала Web для всех участников.
В каждой версии HTML предпринималась попытка отразить все большее число соглашений между работниками и пользователями этой индустрии, чтобы усилия авторов не были потрачены впустую, а их документы не стали бы нечитаемыми в короткий срок.
Язык HTML разрабатывался с той точки зрения, что все типы устройств должны иметь возможность использовать информацию в Web: персональные компьютеры с графическими дисплеями с различным разрешением и числом цветов, сотовые телефоны, переносные устройства, устройства для вывода и ввода речи, компьютеры с высокой и низкой частотой и т.д.