- •Основы web-дизайна
- •Составители а.В. Распопов, о.Е. Ефимова, д.В. Меркулов
- •Введение
- •1.2.1. Стандарты языка html
- •1.2.2. Браузеры
- •Редакторы html-документов
- •Контрольные задания
- •Синтаксис html-тегов
- •Структура html-документа
- •Адресация ресурсов
- •Контрольные задания
- •3.2.1. Комментарии
- •3.2.2. Символьные примитивы (&-последовательности)
- •4.2.1. Разбиение текста
- •4.2.2. Форматирование символов
- •4.2.2.1. Логическое форматирование
- •4.2.2.2. Физическое форматирование
- •4.2.3. Параметры шрифта
- •4.2.4. Заголовки разных уровней внутри текста
- •5.2.1. Формы представления цвета
- •5.2.2. Цвет текста и фон документа
- •5.2.3. Графические форматы
- •5.2.4. Графические изображения
- •Контрольные задания
- •10.2.1. Описание структуры набора фреймов
- •10.2.2. Общий вид html-документа, задающего набор фреймов
- •10.2.4. Целевые фреймы
- •11.2.1. Простейшая форма
- •11.2.2. Типы элементов форм
- •Контрольные задания
- •Несколько советов
- •Библиографический список
- •Оглавление
- •Основы web-дизайна
Контрольные задания
1. Создать на диске отдельную директорию (папку) для будущих Web-страниц. Например, по следующему пути:
../D:/students/№Группы/Фамилия_студента/HTML
2. Открыть Блокнот (notepad): Меню Пуск/Программы/Стандартные. Набрать в нем пример (см. пример из п. 2.2.2) и сохранить его с расширением *.htm в Вашей директории.
3. Открыть полученный html-документ браузером и убедиться в правильности результата его работы.
4. Внести в блокноте следующие изменения в данном примере: заключить выводимый браузером текст в тег-контейнер с атрибутом (см. пример в п. 2.2.1). Сохранить измененный документ и открыть (обновить) его браузером. Убедиться в действии произведенных изменений.
5.Загрузить измененный html-документ в Microsoft Word. Дописать в конце, выводимого браузером, текста «и Word» и сохранить в том же файле. Просмотреть в блокноте изменения, внесенные программой Microsoft Word. Сделать выводы.
Лабораторная работа № 3
Основные теги HTML
3.1. Цель работы
Научиться использовать наиболее часто использующиеся теги в HTML-документах.
3.2. Теоретические сведения
3.2.1. Комментарии
Браузеры игнорируют любой текст, помещенный между <!-- и -->. Это удобно для размещения комментариев: <!-- Это комментарий -->.
3.2.2. Символьные примитивы (&-последовательности)
Символы <, >, " и & являются специальными символами HTML. При необходимости использования их в тексте, отображаемом браузером, следует применять символьные примитивы (табл. 1):
Таблица 1
Символьные примитивы
Символ |
Символьный примитив |
< |
< (по первым буквам английских слов less than – меньше, чем) |
> |
> (по первым буквам английских слов greater than – больше, чем) |
& |
& (амперсанд) |
" |
" |
Например, для того, чтобы в окне браузера вывести формулу 2 < 3 , в тексте html-документа придется записать: 2 < 3 .
Помните, что точка с запятой – обязательный элемент &-последовательности. Кроме того, все буквы, составляющие последовательность, должны быть в нижнем регистре (строчными).
Вообще говоря, символьные примитивы определены для всех символов из второй половины ASCII-таблицы (куда, естественно, входят и русские буквы). Дело в том, что некоторые серверы не поддерживают восьмибитную передачу данных, и поэтому могут передавать символы с ASCII-кодами выше 127 только в виде &-последовательностей.
Стоит также упомянуть, по крайней мере, о символьных примитивах © (знак авторского права ), ® (зарегистрированный товарный знак ) и (от английского nonbreaking space - неразрывный пробел).
3.3.3. Информация о документе в секции заголовка <HEAD>
В секции заголовка указывается информация о документе, которая используется тем или иным образом при его отображении. Он не является синтаксически необходимым, но на практике обязательно должен присутствовать. Текст, заключенный между тегами <TITLE> ... </TITLE>, отображается в заголовке окна браузера. Фактически это первая информация о содержании документа, которую видит пользователь еще до загрузки документа. Заголовок должен быть достаточно кратким (рекомендуется не длиннее 64 символов) и в то же время емким, отражающим суть документа и способным заинтересовывать потенциальную аудиторию.
В секции заголовка обычно помещается и ряд тегов <META> с различными атрибутами, предоставляющими дополнительную информацию (метаинформацию) о документе. По сути, META-инструкция – это способ определить некоторую переменную путем указания ее имени (атрибут NAME) и значения (атрибут CONTENT). Рассмотрим наиболее типичные META-инструкции:
<META NAME="description" CONTENT="Это пособие – учебник для тех, кто хочет публиковать документацию любого рода в глобальной компьютерной сети Интернет">. Определяет переменную description, содержащую краткое описание документа. Многие поисковые механизмы постоянно сканируют Интернет в поисках html-файлов, отыскивают в них эту переменную, сохраняют ее в своих базах данных и демонстрируют в ответ на запросы пользователей.
<META NAME="keywords" CONTENT="Интернет, HTML, WWW, пособие, публикация, гипертекст">. Определяет переменную keywords, содержащую набор ключевых слов, описывающих содержание документа. На практике поиск по ключевым словам очень удобно использовать при строительстве поискового механизма, работающего в пределах одного сервера.
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset= windows-1251">. Указывается тип кодовой таблицы (windows-1251, Koi8-R и другие), использованной при подготовке текстовой части документа. Включая подобные теги в документ, Вы избавляете свою аудиторию от необходимости настраивать браузер на конкретную кодировку кириллицы.
<META HTTP-EQUIV="Refresh" CONTENT="[время]; URL=[документ]">. Дает браузеру примерно следующее указание: "Если через [время] секунд после завершения загрузки этого документа пользователь не перейдет к другому документу, начать загрузку ресурса [документ]". META-инструкцию Refresh можно использовать, например, если Вы перенесли некоторый документ с одного сервера на другой. Вместо копии документа на старом сервере можно оставить короткое сообщение о переносе, включающее META-инструкцию Refresh и адрес документа на новом сервере. Если в качестве параметра [документ] подставить имя файла, содержащего звук, через [время] секунд после загрузки html-файла начнется загрузка и проигрывание этого звука (при условии, конечно, что браузер пользователя поддерживает формат этого звукового файла). Очень удобно для всякого рода приветственных речей.
<META NAME="Author" CONTENT="Ivan Petrov">. Указывается автор WWW-страницы.
<META NAME="GENERATOR" CONTENT="Mozilla/3.01Gold (Win95; I) [Netscape]"> Указывается программа - редактор html-страницы.
Контрольные задания
Сформулировать определение «парные теги». Привести примеры.
Сформулировать определение «автономные теги». Привести примеры.
Выполнить все примеры, приведенные в данном разделе.
Лабораторная работа № 4
Форматирование текста
4.1. Цель работы
Научиться форматировать текст в HTML-документе.
4.2. Теоретические сведения