Вы находитесь на странице: 1из 285

ББК

32.988.02-18

УДК

004.738.5

К63

К63

Н. Комолова, Е. Яковлева HTML: Самоучитель. 2-е изд. — СПб.: Питер, 2011. — 288 с.: ил.

ISBN 978-5-4237-0144-4

Самоучитель содержит последовательное изложение процесса создания веб- страниц с помощью языка HTML. Подробно рассмотрены процесс создания изо- бражений для размещения на веб-странице (в программе Adobe Photoshop) и об- щие вопросы веб-дизайна. Книга содержит более 100 упражнений, позволяющих на практике закрепить изучаемый материал. Новое издание существенно обнов- лено актуальной информацией и дополнено материалом о технологиях XML, XHTML, DHTML, а также описанием нового стандарта HTML5. Для студентов, преподавателей вузов и широкого круга читателей, желающих самостоятельно научиться созданию веб-страниц с помощью HTML.

ББК

32.988.02-18

УДК

004.738.5

Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав. Информация, содержащаяся в данной книге, получена из источников, рассматриваемых изда- тельством как надежные. Тем не менее, имея в виду возможные человеческие или техниче- ские ошибки, издательство не может гарантировать абсолютную точность и полноту приводи- мых сведений и не несет ответственности за возможные ошибки, связанные с использовани- ем книги.

ISBN 978-5-4237-0144-4

© ООО Издательство «Питер», 2011

Содержание

Благодарности

12

Введение

14

От издательства

Урок 1 Основные сведения

21

22

Основные понятия

23

Браузер

26

Структура документа

26

Гипертекстовые ссылки

27

Изменение программы

28

Теги и атрибуты

29

Основные правила создания веб-страниц

30

Атрибуты тега <Body>

30

Подведем итоги

34

Урок 2 Текст

35

Первая веб-страница

36

Уровни заголовков

36

Шрифт

38

Абзацы и разрывы строк

40

Выравнивание

42

Предварительное форматирование

43

Задание начертания

45

Неразрывные строки

48

6     Содержание

Вставка цитат

49

Комментарии

50

Акронимы

51

Определения

52

Шрифтовое выделение

52

Использование моноширинных шрифтов

53

Добавление текста с другой страницы

55

Расстановка пробелов

56

Подведем итоги

57

Урок 3 Графика

58

Размещение графики на веб-странице

59

Форматы графических файлов

60

Формат GIF

60

Формат JPEG

61

Формат PNG

61

Формат BMP

61

Формат PCX

62

Пикселы и разрешение

62

Примеры размещения графики на веб-странице

63

Выравнивание изображений

67

Карты изображений

68

Тег <MAP>

69

Тег <AREA>

69

Примеры карт изображений

71

Масштабирование изображений

74

Подведем итоги

77

Урок 4 Фон веб-страниц

78

Фоновые рисунки

79

Задание стандартных цветов

80

Подведем итоги

87

Урок 5 Линии, точки и другие объекты

88

Содержание    7

Клавиатурные символы

91

Специальные символы

94

Информация об авторе документа

96

Java-апплеты

97

Сценарии

97

Внешние объекты и комментарии

98

Листы стилей

98

Подведем итоги

99

Урок 6 Бегущая строка

100

Вставка бегущей строки на веб-страницу

101

Пример бегущей строки

102

Рисунок в качестве бегущей строки

103

Подведем итоги

104

Урок 7 Списки

105

Виды списков

106

Нумерованные списки

106

Маркированные списки

111

Вложенные списки

114

Списки определений

116

Подведем итоги

119

Урок 8 Таблицы

120

Основные теги таблиц

121

Создание таблиц

121

Создание строк и столбцов таблицы

122

Создание ячеек таблицы

122

Создание заголовка и подписи таблицы

123

Теги группирования элементов таблиц

123

Группирование столбцов таблицы

123

Группирование строк таблицы

123

Основные атрибуты элементов таблицы

124

Примеры таблиц

125

Подведем итоги

155

8     Содержание

Урок 9 Формы

156

Создание форм

157

Размещение на форме элементов управления

159

Списки выбора

162

Многострочные текстовые поля

165

Подведем итоги

166

Урок 10 Фреймы

167

Свойства фреймов

168

Наборы фреймов

168

Вставка фрейма в документ с набором фреймов

170

Вставка фрейма в документ без набора фреймов

171

Взаимодействие фреймов

172

Примеры использования фреймов

173

Примеры взаимодействия фреймов

182

Подведем итоги

190

Урок 11 Ссылки

191

Универсальный указатель ресурса

192

Вставка ссылок в документ

193

Внутренние ссылки

194

Внешние ссылки

195

Переходы внутри документа

196

Графические ссылки

199

Подведем итоги

200

Урок 12 Технологии XML, XHTML, DHTML

201

Технология XML

202

Технология XHTML

203

Технология DHTML

204

Подведем итоги

209

Урок 13 Баннерная реклама

210

Определение баннера

211

Эффективность баннеров

211

  

Содержание       99

Примеры баннеров

213

Подведем итоги

215

Урок 14 Публикация и поиск документов

216

Подготовка и публикация веб-сайта

217

Поиск информации в Интернете

218

Поиск информации по URL-адресам

218

Популярные адреса

220

Поисковые системы

221

Взаимодействие в сети

222

Подведем итоги

222

Урок 15 Еще раз с начала

223

Версия языка HTML

224

META-информация

225

Атрибут NAME

225

Атрибут HTTP-EQUIV

226

Связь веб-страницы с дополнительными файлами

227

Подведем итоги

227

Урок 16 Слои

228

Понятие слоя

229

Создание слоя с помощью тега <DIV>

229

Создание слоя с помощью тега <LAYER>

233

Создание динамического слоя

234

Подведем итоги

235

Урок 17 Каскадные листы стилей

236

Поддержка стилей

237

Уровни CSS

237

Синтаксис листа стиля

238

Группирование стилей и селекторы классов

239

Четыре варианта использования CSS

240

Встраиваемые стили

240

Подключаемые стили

240

10     Содержание

Связываемые стили

243

Импортируемые стили

244

Примеры использования стилей

246

Подведем итоги

254

Урок 18 Подготовка изображений для веб-страниц

255

Файловые операции

256

Инструменты выделения

257

Изменение разрешения и размеров изображения

258

Коррекция изображения

260

Подведем итоги

262

Урок 19 HTML 5

263

Пример веб-страницы HTML 5

264

Размещение объектов мультимедиа на веб-страницах

264

Файловые форматы аудио и видео

266

Формат SWF

266

Формат Ogg

267

Формат AVI

267

Формат MOV

267

Семейство форматов MPEG

267

Формат WAV

268

Формат AIFF

268

Формат MP3

268

Потоковое видео

268

Текстовые данные

269

Аббревиатура

269

Внешние данные

270

Направление текста

270

Кнопки

270

Канва

270

Список данных

271

Формы

271

Заголовок объекта

272

Содержание    11

Маркировка

272

Заголовки в таблице

272

Контроль времени

273

Обработка событий

273

Атрибуты тега <body> при обработке событий

273

События в форме

274

События, связанные с клавиатурой

274

События, связанные с мышью

274

Медиа-события

275

Подведем итоги

276

Алфавитный указатель

277

Благодарности

Появлением этой книги я обязана многим людям

Начать я хочу со слов благодарности президенту издательского дома «Питер» Ва- диму Усманову и главному редактору Екатерине Строгановой за то, что, несмотря на свою занятость, они всегда откликались на приглашение Северо-Западного ин- ститута печати Санкт-Петербургского государственного университета техноло- гии и дизайна и приезжали 1 сентября на праздник «День Первокурсника», одним из организаторов которого я являлась Они приветствовали напутственной речью студентов 1 курса, которые решили связать свою жизнь с отраслью печати и стать редакторами, технологами полиграфического производства или специалистами по полиграфическому оборудованию

Я очень благодарна за организацию и помощь в работе руководителю проек-

та, к т н Анатолию Адаменко, с которым меня связывает наша альма-матер — математико-механический факультет Санкт-Петербургского государственного университета

Я очень благодарна директору Северо-Западного института печати Санкт- Петербургского государственного университета технологии и дизайна, д т н , профессору Дроздову Валентину Ниловичу за то, что он поверил в мой талант преподавателя и доверил мне преподавание в институте

Я очень благодарна заведующему кафедрой прикладной математики и информа-

тики Санкт-Петербургского государственного архитектурно-строительного уни- верситета, д ф -м н , профессору Вагеру Борису Георгиевичу, который иниции- ровал чтение мною курса лекций «Введение в Интернет-технологии» Благодарна студентам факультета «Промышленное и гражданское строительство», потоку, состоящему из четырех групп, которые приветствовали меня вставанием, когда я входила в аудиторию

Я очень благодарна моему научному консультанту, академику Российской ака-

демии образования, заслуженному деятелю науки и техники РФ, д т н , профес- сору, зав кафедрой АСОИУ Санкт-Петербургского государственного электро- технического университета «ЛЭТИ» Советову Борису Яковлевичу за то, что он оказывал мне помощь при поступлении в докторантуру Санкт-Петербургского государственного электротехнического университета «ЛЭТИ»

Я очень благодарна моему редактору Алексею Жданову, который непосредствен-

но работал с рукописью, за его кропотливую и профессиональную работу

Благодарности    13

Очень признательна всем сотрудникам издательства, чьими усилиями появилась моя книга

Благодарна тому человеку, который мне как-то сказал: «Надо писать новую книгу Читатели ждут»

Благодарна своим родным и близким за поддержание творческого настроя

А больше всего я благодарна своим ученикам, которые стремятся к знаниям, тре- буют их и заставляют постоянно быть в форме: листать книги, читать книги, об- щаться с профессионалами, путешествовать по веб-страницам Интернета

Комолова Нина Владимировна

Введение

Если бы я знал тогда, сколько людей будут ука- зывать URL, то не стал бы использовать в син- таксисе два слэша

Тим Бернерс-Ли

Сегодня каждый знает, что такое Интернет и веб-страница; эти понятия стали ча- стью повседневной жизни О них говорят, о них думают, учреждения включают адреса своих узлов Интернета в рекламные проспекты Электронные адреса по- казывают по телевизору, называют в радиопередачах Поэтому и тема создания веб-страниц интересна многим

Статистический отдел поисковой системы Яндекс провел анализ русскоязычной части Интернета Согласно их исследованиям на сегодняшний день насчитыва- ется примерно 15 миллионов русскоязычных сайтов, что равно 6,5 процентов от общей численности сайтов в сети, поэтому авторы книги пытаются сделать все, что в их силах, чтобы русскоязычных сайтов в Интернете было как можно больше Создавайте русскоязычные сайты!

С появлением первых компьютеров возникла проблема передачи информации между ними И средства были найдены — это различные носители и кабель Были написаны программы, позволяющие передавать и получать данные, и практиче- ски сразу возникла вторая проблема — проблема совместимости: как заставить два и более компьютеров, соединенных кабелем, работать в локальной сети Офи- циальным днем рождения Интернета считается 2 января 1969 года, когда Управ- ление перспективных исследований (Advanced Research Project Agency, ARPA) Министерства обороны США начало работу над проектом связи оборонных ком- пьютеров

Введение    15

В 1970-е Интернет вырос в международную сеть Первыми службами Интерне-

та стали электронная почта (electronic mail, e-mail) и группы новостей (Usernet)

В 1980-е годы была разработана сеть Bitnet Эта сеть, созданная специалистами

Нью-йоркского университета (City University of New York), имела большое зна- чение, поскольку первоначально не предназначалась ни для военных, ни для ис-

следовательских целей и в то же время входила в состав Интернета

В 1984 году была предложена доменная система имен (Domain Name System,

DNS), отображающая символьные имена на IP-адреса Служба (сервис) Интернет DNS предназначена для установки соответствия между символьными и цифровы- ми именами доменов

В 1986 году Международная организация по стандартизации (International Organization for Standardizations, ISO) приняла первый стандарт ISO-8879, на- званный SGML (Standard Generalized Markup Language — стандартный обобщен-

ный язык разметки) SGML — обогащенный метаязык, позволяющий строить си-

стемы логической и структурной разметки текстов любых разновидностей

Структурная разметка — форматирование текста, в которой управляющие коды не несут никакой информации о внешнем виде документа, а лишь указывают гра- ницы и соподчинение его составных частей, то есть задают его логическую струк- туру SGML-документ требует определения типа документа (Document Type Definition, DTD) DTD посылается вместе с SGML-документом или включается в SGML-документ для того, чтобы можно было распознать теги, созданные поль- зователем Язык SGML не получил распространения, однако его идеология по- влияла на многие компьютерные разработки

В 1989 году выпускник Оксфордского университета, бакалавр в области физики,

сотрудник Европейского центра ядерных исследований (CERN) Тим Бернерс-Ли

(Tim Berners-Lee) разработал язык HTML (HyperText Markup Language — язык разметки гипертекста), ставший основным языком создания веб-документов

и прототипом Всемирной паутины (World Wide Web, WWW) Тим Бернс-Ли —

автор идеологии гиперссылок (рис 0 1) По сути, язык HTML — это набор SGML- предписаний, сформулированный в виде DTD В случае языка HTML определе-

ние типа документа хранится в браузере, и это определение намного проще, чем DTD языка SGML

Однако нельзя сказать, что именно Тим Бернерс-Ли один все и придумал К откры-

тию

подошло все человечество, накопив достаточные знания Так, еще в середине

XX

столетия Ванневар Буш (Vannevar Bush) объявил миру новое слово — «ги-

пертекст», а Тед Нельсон (Ted Nelson) предложил создать «документарную все- ленную», связав все тексты, произведенные человечеством на свет, перекрестными ссылками, но в начале шестидесятых годов двадцатого столетия у академической публики это воззвание не вызвало ничего, кроме снисходительной улыбки

Осенью 1990 года сотрудники CERN получили в пользование первый веб-сервер

и веб-браузер, созданные Тимом Бернерсом-Ли в среде NeXTStep

Для работы с текстами был разработан специальный протокол передачи гипертек-

ста (HyperText Transfer Protocol, HTTP) Эта технология дала огромный толчок

развитию Сети, и Интернет стал действительно интернациональной сетью

16     Введение

16      Введение Рис 0 1  Тим Бернерс-Ли — создатель языка HTML

Рис 0 1  Тим Бернерс-Ли — создатель языка HTML

Летом 1991 года проект WWW, покоривший научный мир Европы, пересек оке- ан и влился в американский проект Internet Появился ряд новых аббревиатур:

URL, HTTP, HTML Вспыхнувшее было соперничество между Европой и Аме- рикой за новую информационную технологию сошло «на нет» с переездом Тима Бернерса-Ли в США В 1994-м он сначала возглавил кафедру в Массачусетском технологическом институте, а затем — международный консорциум W3C (World Wide Web Consortium), играющий роль органа по стандартизации Всемирной Паутины

Интернет представляет собой объединение множества локальных компьютерных сетей Хотя говорят, что у Интернета нет хозяина и он не принадлежит никому, в нем, как показано на рис 0 2, наблюдается четкая иерархическая структура: ма- гистрали, провайдеры, пользователи На рисунке использованы следующие обо- значения

 P — точкаточка присутствияприсутствияприсутствияприсутствия (Point(Point(Point(Point(Point ofofofofof Presence,Presence,Presence,Presence,Presence, POP)POP)POP)POP)POP) ТочкамиТочкамиТочкамиТочкамиТочкамиТочками присутствияприсутствияприсутствияприсутствияприсутствияприсутствия на-на-на-на-на-на- зывают места подключения к магистрали сети поставщика услуг Интернета (Internet Service Provider, ISP), или провайдера, обслуживающего локальных пользователей

 N — точка доступа (Network Access Points, NAP) Точками доступа, или цен- трами обмена (Internet eXсhange, IX), называют места объединения сетей не- скольких провайдеров

Введение     17

 DNS — сервер доменной системы имен (Domain Name System, DNS) DNS- серверы служат для трансляции доменных имен в IP-адреса

 F — файловый (file) сервер

 W — веб-сервер (web-server)

 D — домен (domain)

(web-server)  D — домен (domain) Рис 0 2  Структура Интернета
(web-server)  D — домен (domain) Рис 0 2  Структура Интернета
(web-server)  D — домен (domain) Рис 0 2  Структура Интернета
(web-server)  D — домен (domain) Рис 0 2  Структура Интернета

Рис 0 2  Структура Интернета

Многие компании стали выпускать собственные браузеры и к ним собственные расширения языка HTML, например в 1993 году был разработан первый графиче- ский браузер Mosaic После этого появилось еще более ста различных браузеров Самыми популярными стали Netscape Navigator и Microsoft Internet Explorer

Консорциум W3C разработал стандарты, необходимые для дальнейшего разви- тия World Wide Web В 1996 году Консорциум W3C объявил о сотрудничестве с лидерами рынка в целях стандартизации программного обеспечения

Появившийся в 1991 году язык HTML постоянно дорабатывался и дополнялся Из всех этих видоизменений выделяют следующие версии:

18     Введение

 HTML 1.0 Первая версия языка, считая год его появления

 HTML 2.0 Эта версия (RFC 1866) была разработана в 1994 г Рабочая груп- па по HTML в составе IETF (Internet Engineering Task Force) ввела соответ- ствующие изменения, и набор базовых элементов HTML 2 0 приобрел статус стандарта

 HTML 3.0 Эта версия языка была реализована в начале 1996 г Появилось мно- го нововведений, включая теги для создания таблиц, для разметки математи- ческих формул, для вставки обтекаемых текстом рисунков, для вставки при- мечаний и т д Не нарушая основные концепции разметки гипертекста, авторы версии 3 0 ввели новое средство — каскадные листы стилей (Cascading Style Sheets, CSS)

 HTML 3.2 Эта версия языка была реализована в 1996 г В ней были предусмо- трены дополнительные элементы, предназначенные для создания апплетов, задания регистра символов и т д Версия HTML 3 2 стала компромиссным ре- шением — попыткой примирить Microsoft и Netscape и объединить их ориги- нальные решения

 HTML 4.0 Эта версия языка была реализована в 1997 г Вторая скорректиро- ванная реализация вышла в 1998 г В HTML 4 0 была введена поддержка муль- тимедиа, языков сценариев, а также средств воспроизведения документов для пользователей с физическими ограничениями

с физическими ограничениями
с физическими ограничениями

Когда консорциум W3C опубликовал спецификацию языка HTML 4.0, он ука-

зал, что почти все атрибуты, определяющие вид HTML-документа (цвет, вы-

равнивание,  шрифты,  графика  и т. д.),  являются  нежелательными,  взамен 

рекомендуется  использовать  листы  стилей  и  классы.  Однако  большинство  разработчиков веб-страниц по-прежнему пользуются тегами, которые давно  знают.

 HTML 4.01 Эта версия вышла в 1999 г В ней были исправлены ошибки, заме- ченные в предыдущей версии

 HTML 5 Разработка этой версии началась в рабочей группе W3C в 2007 г и 22 января 2008 г появились в новой спецификации Спецификация и сейчас находится в разработке и может находиться в этой стадии еще несколько лет

В поддержку языка HTML была создана целая серия языков программирования,

таких как Java, JavaScript, Perl, PHP и т д С помощью этих языков стало возмож- ным создание динамических веб-страниц, включающих формы, таблицы, фреймы и другие элементы

В феврале 1998 г был предложен язык XML (Extensible Markup Language — рас-

ширяемый язык разметки) Этот язык похож на HTML тем, что для описания различных разделов документа в нем используются теги Однако в отличие от HTML язык XML позволяет разработчикам определять собственные теги и ста- вить им в соответствие собственные способы воспроизведения информации XML- дескрипторы чувствительны к регистру символов Последняя версия Internet Explorer поддерживает XML Что касается Netscape Navigator, то Mozilla (рабочая группа в составе Netscape) лишь экспериментирует со средствами поддержки XML

Введение     19

Язык XHTMLXHTML (Extensible(Extensible(Extensible HyperTHyperTHyperTextextext MarkupMarkupMarkup LanguageLanguageLanguage ——— расширяемыйрасширяемыйрасширяемый языкязыкязык раз-разраз-- метки гипертекста) — это сочетание HTMLHTML иии XMLXMLXMLXML КонсорциумКонсорциумКонсорциумКонсорциумКонсорциум W3C,W3C,W3C,W3C,WW3C,3C,3CC,,, объеди-объеди-объеди-объеди-объедиобъеди-объеди-объеди-объеди-- няющий представителей более 500 организаций из разных стран, рекомендует использовать XHTML вместо HTML, однако на сегодняшний день большинство разработчиков остаются верными HTML

Язык Dynamic HTML (динамический язык HTML) — это попытка объединить объектную модель документа (Document Object Model, DOM), язык JavaScript и каскадные листы стилей (CSS) Dynamic HTML позволяет создавать интерак- тивные веб-страницы с расширенной поддержкой мультимедиа Многие средства Dynamic HTML описаны в спецификации HTML 4 01

Язык Java произошел от языка программирования Oak, ориентированного на ра- боту в Интернете Синтаксис языка Java близок к синтаксису языка C++ Про- граммы на языке Java можно разделить на две большие группы К первой группе относятся Java-приложения, предназначенные для автономной работы под управ- лением специальной интерпретирующей машины Java Реализации этой машины созданы для всех основных компьютерных платформ Вторая группа — это так называемые апплеты

Апплет — это небольшая программа, написанная на языке Java и включенная в со- став HTML-файла Среду для выполнения Java-апплетов обеспечивает другая программа, например, веб-браузер В отличие от приложений апплеты не могут непосредственно выполняться в операционной системе Код апплета интерпрети- руется браузером или сервером В зависимости от того, какая из программ высту- пает в роли интерпретатора, апплеты могут выполняться на стороне клиента либо на стороне сервера Java — это компилируемый язык

JavaScript — это язык сценариев, с помощью которого можно расширять воз- можности HTML-страниц Этот язык разрабатывался корпорацией Netscape Communications для использования в веб-браузере Netscape Navigator (JavaScript для клиента) и веб-серверных продуктах (JavaScript для сервера), созданных этой корпорацией Многие элементы этого языка, предназначенные для поддержки до- полнительных функциональных возможностей статических веб-страниц, разра- ботала фирма Sun Microsystem

В отличие от Java-апплетов, загружаемых отдельно от HTML-документа, в кото- ром они используются, программы, написанные на языке JavaScript, встраивают- ся непосредственно в HTML-документы с помощью парного тега <SCRIPT>

Некоторые начинающие пользователи считают, что JavaScript является версией языка Java Это курьезное заблуждение, между JavaScript и Java нет ничего обще- го Java — это язык программирования, а JavaScript — интерпретируемый язык, предназначенный для написания сценариев

VBScript — язык, который был разработан Microsoft как подмножество язы- ка Visual Basic VBScript создавался для работы с Internet Explorer и Microsoft Internet Information Server

ColdFusion — это набор инструментальных средств разработки веб-приложений Достоинством этого пакета является наличие удобных средств для работы с база- ми данных

20     Введение

PHP — это язык сценариев, обрабатываемый сервером Подобно ColdFusion, PHP-код непосредственно включается в состав HTML-документа Первоначаль- ным названием PHP являлось Personal Home Page Tools (Персональная домашняя страница) Позднее эта технология, допускающая размещение на сервере выпол- няющихся скриптов веб-страниц, работающая, главным образом, на платформах Unix, Linux и Solaris, стала расшифровываться по-другому: PHP (PHP Hypertext Preprocessor)

В PHP реализованы лучшие решения многих языков, таких как C и Perl; кроме того, PHP предоставляет разработчику мощные средства для работы с базами данных Слово Perl является аббревиатурой выражения Practical Extraction and Report Language Подобно Perl, PHP — свободно распространяемая открытая система, и сообщество разработчиков имеет возможность ее модернизировать

Новой технологией для создания лучшего, удобного и более интерактивного веб- приложения, а не новым языком программирования является AJAX AJAX — это акроним Asynchronous JavaScript And XML AJAX использует JavaScript, чтобы посылать и получать данные между веб-браузером и веб-сервером

Приложения AJAX являются браузерами и платформно-независимы (кросс- платформенная и кросс-браузерная технология) Вместе со AJAX, интернет- приложения можно сделать богаче (меньше, быстрее и легче для использова- ния)

К известным средствам разработки можно отнести также CGI (Common Gateway Interface), ASP, JSP (Java Server Pager), SSI (Server Side Includes), VRML (Virtual Reality Markup Language) и другие

Apache — это открытый веб-сервер, наиболее часто используемый для платформ Unix, Linux и Solaris

ASP (Active Server Pages) — технология, используемая для написания мощных клиент-серверных интернет-приложений, позволяющая создание динамических страниц HTML

Какие программы лучше использовать для создания веб-страниц? Это, несо- мненно, Adobe GoLive, Microsoft FrontPage, Macromedia Dreamweaver Для ре- дактирования изображения могут применяться программы Adobe Photoshop, Macromedia Fireworks, Corel Photo-Paint, Adobe Illustrator, Macromedia Freehand, CorelDRAW, Adobe LiveMotion, Macromedia Flash Для работы с аудио- и видео- данными — программы Adobe Premier, Apple Final Cut Pro, Apple Quick Time, RealProducer, Windows Media

Существует множество простых и сложных программ для написания HTML- страниц В своей основе все они делятся на две категории: программы, автома- тизирующие вставку тегов, и обыкновенные стандартные текстовые редакторы и процессоры, созданные для любых платформ Хотя во многих перечисленных программах веб-страницы создаются автоматически, следует обязательно учить язык HTML, чтобы понимать, как строится веб-страница Поэтому в данной книге мы будем создавать веб-страницы с помощью простейшего текстового ре- дактора

От издательства    21

  От издательства     21 Не  следует  использовать  для 
  От издательства     21 Не  следует  использовать  для 

Не  следует  использовать  для  создания  веб-страниц  программу  Microsoft  Word или Microsoft PowerPoint.

В книге подробно рассмотрены процессы обработки изображения для разме- щения на веб-страницах и общие вопросы веб-дизайна Всё внимательно читая, а главное, самостоятельно вводя все приводимые в книге коды веб-страниц, мож- но очень скоро научиться разрабатывать сайты на хорошем уровне

От издательства

Ваши замечания, предложения и вопросы отправляйте по адресу электронной по- чты comp@piter.com (издательство «Питер», компьютерная редакция)

Мы будем рады узнать ваше мнение!

Подробную информацию о наших книгах вы найдете на веб-сайте издательства http://www.piter.com

Урок 1 Основные сведения Урок
Урок 1 Основные сведения Урок

Урок 1 Основные сведения

Урок

В этом уроке рассматриваются основные понятия HTML и элементы 

веб-страниц. Даны определения HTML, WWW, Интернета, веб-сайта. 

Рассказано, с чего следует начинать при создании HTML-документа. 

Даны определения тегов, гипертекста, гипертекстовых ссылок, при-

ведены основные теги, определяющие структуру HTML-документа

Основные понятия    23

Основные понятия

Язык HTML (HyperText Markup Language — язык разметки гипертекста) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WWW (World Wide Web — Всемирная паутина) HTML-документы (или веб-документы) могут просматриваться различными типами веб-браузеров Если документ создан с использованием HTML, веб-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки

Основное преимущество HTML заключается в том, что документ может быть про- смотрен на веб-браузерах различных типов и на различных платформах HTML — один из наиболее простых языков создания веб-страниц

WWW — это сообщество веб-серверов (сетевых компьютеров), входящих в Ин- тернет, на которых хранятся текстовые, графические, видео-, аудио- и другие ин- формационные файлы

WWW — широкомасштабная гипермедиа-среда, ориентированная на предостав- ление универсального доступа к огромному количеству документов, расположен- ных на серверах

WWW — распределенная структура данных сетевого мультимедийного гипертекста

По всему миру разбросаны тысячи информационных серверов Любой новый компьютер, подключенный к Интернету, может сам стать сервером, получать не- обходимую информацию от других серверов, отправлять письма и получать от- веты с помощью любой из многочисленных почтовых служб

Поисковые серверы хранят миллионы ссылок на разнообразные документы и про- изводят поиск нужной информации по запросу пользователя Глобальный поиск электронных публикаций проводится с использованием технологий WWW По- мимо известных англоязычных и русскоязычных поисковых систем, расположен- ных на крупных серверах, собственные серверы имеют информационные агент- ства, издательства, банки и другие организации

Интернет — это совокупность сетей, применяющих единый протокол обмена (точ- нее, обширное семейство из сотен протоколов) для передачи информации

Веб-сайт (web site) — совокупность веб-документов, организованных в виде ти- тульной страницы и нескольких связанных с ней страниц Каждая такая совокуп- ность, доступная в Интернете, может иметь любые размер и содержание, инфор- мационную и эмоциональную направленность

Веб-мастер — лицо, ответственное за поддержание и обновление документов на веб-серверах

Как создаются HTML-документы?

HTML-документы могут быть созданы при помощи любых текстовых редакторов или специализированных HTML-редакторов и конвертеров

HTML-документ — это обычный файл в формате ASCII В его основе лежат спе- циальные дескрипторы (теги), которые и определяют правила форматирования данных

24     Урок 1. Основные сведения

Код программы на языке HTML — обычный текстовый файл, поэтому проще все- го написать его в Блокноте — стандартном Windows-приложении, которое вызы- вается командой Пуск Программы Стандартные Блокнот Пример программы, на- писанной на языке HTML в Блокноте, показан на рис 1 1

HTML в Блокноте, показан на рис 1 1 Рис 1 1

Рис 1 1  Пример программы, написанной на языке HTML в Блокноте

Когда программа написана, ее файл следует сохранить не с расширением .txt, а с расширением .htm (рис 1 2) Имя HTML-файла следует писать строчными ла- тинскими буквами без пробелов Можно использовать цифры, знаки подчеркива- ния и тире

знаки подчеркива- ния и тире Рис 1 2

Рис 1 2  Диалоговое окно сохранения файла в программе Блокнот

Основные понятия    25

Как только файл будет записан с расширением .htm, его значок сразу примет вид «ин- тернетовского», что показано на рис 1 3 Второй рисунок соответствует файлу с рас- ширением .htm в программе Internet Explorer, третий — в программе Mozilla Firefox

третий — в программе Mozilla Firefox Рис 1 3

Рис 1 3  Примеры значков TXT- и HTML-файлов

Еслииспользуетсяоперационнаясистема,отличнаяотWindows,томожновыбратьана-

логичный простой текстовый редактор Например, Pico (Linux) или TextEdit (Mac)

HTML — это язык тегов Под тегами понимаются специальные управляющие коды, записываемые в тексте в угловых скобках Теги, окружающие текстовые или графические команды, определяют параметры форматирования текста, место- положение рисунков относительно текста, расположение объектов на странице

Все HTML-теги начинаются с символа левой угловой скобки (<) и заканчивают- ся символом правой угловой скобки (>) Как правило, существуют открывающий

и закрывающий теги Для примера приведем открывающий и закрывающий теги, определяющие заголовок документа:

<TITLE> Заголовок документа </TITLE>

Итак, тег — последовательность символов, заключенных между символами < и >

Почти все теги образуют пары, то есть для открывающего тега существует закры- вающий тег Есть и непарные теги, например <BR>, <AREA>, но их мало

Закрывающий тег выглядит так же, как открывающий, и отличается от него сим- волом прямого слэша перед текстом внутри угловых скобок В данном приме- ре тег <TITLE> говорит веб-браузеру об использовании формата заголовка, а тег </TITLE> — о завершении текста заголовка

Некоторые теги, такие как <P> (тег, определяющий абзац), не требуют завершаю- щего тега, но его наличие придает исходному тексту документа стройность, делает его понятнее

Язык HTML нечувствителен к регистру символов, описывающих тег, и приведен- ный ранее пример мог бы выглядеть следующим образом:

<title> Заголовок документа </title>

Дополнительные пробелы, символы табуляции и конца строки, добавленные в исходный текст HTML-документа, чтобы сделать его понятнее, игнорируют- ся веб-браузером при интерпретации документа HTML-документ может вклю- чать вышеописанные элементы, только если они помещены внутрь тегов <PRE>

и </PRE> (более подробно о теге <PRE> рассказывается в уроке 2) Вся програм-

ма состоит из набора тегов Теги могут иметь параметры, или атрибуты, которые играют роль дополнения тегов Иногда теги называют дескрипторами Дескрип- тор (в переводе с лат описатель) — лексическая единица (слово, словосочетание) информационно-поискового языка, выражающая основное смысловое содержа-

26     Урок 1. Основные сведения

ние какого-либо текста Дескриптор используется при информационном поиске документов в информационно-поисковых системах

системах В  каком  регистре  писать 
системах В  каком  регистре  писать 

В  каком  регистре  писать  код  программы?  Большинству  браузеров  безраз- лично, в каком регистре введены буквы тегов. Записи <HTML>, <html> или  <HtMl> обычно дают одинаковый результат. 

Браузер

Для просмотра HTML-документов в WWW необходимо специальное программ- ное обеспечение Такие программы называются браузерами (от англ browse — ли- стать, просматривать, читать) С их помощью можно загружать и просматривать веб-страницы, осуществлять навигацию в WWW и т д

Браузер — программа просмотра HTML-файлов, программа-интерпретатор языка HTML Браузер показывает на экране текст и графику, интерпретируя команды (теги), указанные в исходном тексте в угловых скобках

Веб-браузер — это прикладная программа, которая отображает содержимое фай- лов, полученных с локального или удаленного компьютера, в соответствии с ин- струкциями, включенными в этот файл Браузер представляет собой клиентскую программу и использует для передачи запросов веб-серверам протокол HTTP (HyperText Transfer Protocol — протокол передачи гипертекста)

Существует довольно большое количество браузеров, из которых самыми попу- лярными являются браузеры Microsoft Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera, Chrome, Safari и NCSA Mosaic Браузер, прочитав HTML- файл, с помощью тегов интерпретирует содержащиеся в документе данные и со- ответствующим образом отображает их на экране компьютера Браузеры Netscape Navigator и Internet Explorer имеют встроенные программы чтения новостей

Структура документа

Когда веб-браузер получает документ, он по тегам определяет, как документ дол- жен быть интерпретирован

 Тег <HTML> Самый первый тег, который встречается в документе, должен быть тегом <HTML> Данный тег сообщает веб-браузеру, что документ написан на языке HTML Минимальный HTML-документ мог бы выглядеть так:

<html>

тело документа

</html>

Таким образом, теги <HTML> и </HTML> образуют для HTMLHTML-документа-документа-документа тактактак нана-на-- зываемый контейнер

 Тег <HEAD> Структурно документ распадается на две части: заголовочную и основную, или тело документа Заголовочная часть размещается между тега- ми <HEAD> и </HEAD>, основная — между тегами <BODY> и </BODY>

Гипертекстовые ссылки    27

 Тег <TITLE> Внутри контейнера <HEAD> и </HEAD> размещается единствен- ный обязательный контейнер из тегов <TITLE> и </TITLE>, содержащий текст заголовка

Тег заголовочной части документа должен быть указан сразу после тега <HTML>

и более нигде в теле документа Данный тег представляет собой обобщенное

описание документа Следует избегать размещения какого-либо текста внутри

тега <HEAD> Открывающий тег <HEAD> указывается непосредственно перед те- гом <TITLE> и другими тегами, описывающими документ, а закрывающий тег </HEAD> — сразу после окончания описания документа

Большинство веб-браузеров отображают содержимое тега <TITLE> в заголовке окна, содержащего документ, и в файле закладок, если он поддерживается веб- браузером Заголовок, ограниченный тегами <TITLE> и </TITLE>, размещается внутри тегов <HEAD> Заголовок документа при отображении самого документа в окне браузера не виден

Теги тела документа идентифицируют отображаемые в окне компоненты HTML-документа Тело документа может содержать ссылки на другие доку- менты, текст и другую форматированную информацию

 Тег <BODY> Тело документа должно находиться между тегами <BODY>

и </BODY> Это та часть документа, которая отображает его текстовую и гра- фическую информацию

Следует заметить, что открывающие и закрывающие теги <HTML>, <HEAD>

и <BODY> необязательны, но их настоятельно рекомендуется использовать, по-

скольку это позволяет веб-браузеру уверенно отделить друг от друга заголо-

вочную и непосредственно смысловую части документа

Тег <BODY> парный Между открывающим тегом <BODY> и закрывающим тегом </BODY> размещаются все другие теги программы, составляющие основное со- держание документа Тег <BODY> предназначается для выделения той части до- кумента, которая должна быть показана пользователю на экране

показана пользователю на экране
показана пользователю на экране

Технически стартовые и завершающие тэги типа <HTML>, <HEAD> и <BODY>  необязательны. Но настоятельно рекомендуется их использовать, поскольку  использование  данных  тегов  позволяет  веб-браузеру  уверенно  разделить  заголовочную часть документа и непосредственно смысловую часть.

Гипертекстовые ссылки

Гипертекстовые ссылки являются ключевым компонентом, делающим веб- страницы привлекательными для пользователей Благодаря гипертекстовым ссылкам (или просто гиперссылкам) веб-страница структурируется и связы- вается с другими документами, что обеспечивает быстрое и удобное получение информации Технология гиперссылок позволяет объединить множество доку- ментов в один

28     Урок 1. Основные сведения

Гипертекст — информационная структура, обеспечивающая навигацию посред- ством гипертекстовых ссылок Гипертекстовыми ссылками называются фрагмен- ты текста или изображения, при активизации которых отображаются связанные с ними документы

Гипертекстовая ссылка — основной элемент всех гипертекстовых систем, кото- рые указывают на другой документ или на другую часть того же документа Такая ссылка задается тегами <A>и </A> Она имеет несколько атрибутов, наличие одно- го из двух (HREF или NAME) обязательно Первый указывает на ссылку за пределы данного документа, например:

<a href="http://www.имя_сайта.зона/…/имя_файла/htm"> название ссылки </a>

Второй позволяет перейти к определенным образом отмеченному (с помощью так называемого якоря, или закладки) месту того же самого документа, например:

<a name="#имя_якоря"> название ссылки </a>

Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например запрашивать файл по про- токолу FTP (File Transfer Protocol — протокол передачи файлов) для отображения его браузером В ссылку включается URL (Uniform Resource Locator — унифици- рованный указатель ресурса) — адрес особого формата, идентифицирующий дру- гие локальные или удаленные документы, что часто требуется при организации больших структурированных веб-сайтов

Ссылки можно использовать для перемещения как по одному документу, так и от одного документа к другому Однако HTML не поддерживает возврат на предыду- щую ссылку, если перемещение происходит внутри документа

Изменение программы

Если в коде веб-документа (файле с расширением .htm), который можно просмо- треть в браузере Internet Explorer, требуется выполнить изменения, то следует от- крыть этот файл в программе Блокнот, выбрав в браузере Internet Explorer коман- ду Вид Просмотр HTML-кода (рис 1 4)

Вид  Просмотр HTML-кода (рис 1 4) Рис 1 4

Рис 1 4  Просмотр HTML-кода документа

Теги и атрибуты    29

HTML-файл будет открыт в окне программы Блокнот (см рис 1 1) Выполнив изменения кода программы, следует воспользоваться командой Файл Сохранить (рис 1 5)

Файл  Сохранить (рис 1 5) Рис 1 5  Сохранение программы

Рис 1 5  Сохранение программы

Чтобы увидеть изменения программы в браузере Internet Explorer, необходимо щелкнуть на кнопке Обновить (она четвертая слева на рис 1 6) или выполнить команду Вид Обновить (см рис 1 4)

Вид  Обновить (см рис 1 4) Рис 1 6

Рис 1 6  Панель инструментов программы Internet Explorer

При следующих изменениях все перечисленные операции следует повторить В некоторых браузерах обновления в программе можно отбразить другими спо- собами

Теги и атрибуты

Тег — код языка HTML, с помощью которого выполняется разметка исходного текста Тег записывается в угловых скобках Как уже отмечалось, все теги начи- наются с символа < и заканчиваются символом > После открывающей угловой скобки следует имя тега (команды) Каждый тег может иметь атрибуты После перечисления всех атрибутов начальный, или открывающий, тег закрывается После открывающего тега располагается содержимое тега Код HTML-документа заканчивается конечным, или закрывающим, тегом (рис 1 7) Закрывающие теги начинаются с символа косой черты (/)

с символа косой черты ( / ) Рис 1 7  Структура HTML-элемента

Рис 1 7  Структура HTML-элемента

30     Урок 1. Основные сведения

При написании тегов не учитывается регистр букв, то есть код может быть напи- сан как строчными, так и прописными буквами, но в основном используют про- писные, чтобы отличать теги от информационного наполнения документа

Если тег написан с ошибкой, то программа его игнорирует, не сообщая об ошибке Теги не отображаются сами, а влияют на способ отображения документа

Атрибуты — дополнительные управляющие слова, отделенные от тега и друг от друга пробелами Можно сказать, что атрибуты — это имена свойств тегов, кото- рые могут принимать определенные значения Атрибуты имеются только у от- крывающих тегов, у закрывающих тегов их нет Атрибуты влияют на результат интерпретации тега браузером

Некоторые атрибуты имеют конкретное значение, которое задается после знака равенства Раньше значения атрибута требовалось заключать в кавычки, но теперь во многих случаях эти кавычки можно опускать без каких-либо последствий

Основные правила создания веб-страниц

При создании веб-страницы необходимо придерживаться определенных правил, которые перечислены ниже

 Следите за тем, чтобы веб-страницы не получились слишком широкими, и пользователям не приходилось пользоваться прокруткой Обычно если веб- страница не помещается на экране, большинство браузеров добавляют внизу экрана горизонтальную полосу прокрутки Типичной шириной экрана счита- ется ширина в 640 пикселов

 Каждая веб-страница должна иметь заголовок

 Не перегружайте страницу графикой

 Попытка визуально выделить все означает не выделить ничего

 Не забывайте житейскую мудрость: «Все гениальное — просто»

 Помните про пословицу: «Выплескивая воду из корыта, не выплесните с водой ребенка» Иногда веб-страница сделана так красиво и оригинально, что непо- нятно, чему она посвящена

 Используйте свободное пространство для привлечения внимания Многие созда- тели сайтов концентрируют текст в середине экрана, оставляя широкие поля сле- ва и справа от текста пустыми Подобное пустое пространство заставляет поль- зователей компьютера сосредоточиться на тексте, который находится в середине

Атрибуты тега <Body>

В противоположность тегу <HEAD> тег <BODY> содержит всю ту информацию, из которой собственно и состоит рассматриваемый документ Порядок следования тегов здесь именно такой, в каком они предстают перед читателем

Атрибуты тега <Body>    31

Начальный тег <BODY> может иметь несколько атрибутов, например:

<body bgcolor=#ffffff leftmargin=0 topmargin=4 marginwidth=0 marginheight=4 link=#000099 vlink=#000099 alink=#cc0000>

 Атрибут BACKGROUND задает графическое изображение, которое как кафельная плитка заполнит фон документа Файл с изображением должен быть сохранен в формате GIF или JPEG Пример:

<body background=»(url)(путь) имя файла»>

Файл с изображением фона лучше размещать в том же каталоге, что и файл самого документа, тогда URL-адрес и путь указывать не нужно Пример ис- пользования этого атрибута в HTML-документе имеется в уроке 4

 Атрибут BGCOLOR задает цвет фона документа при помощи шестнадцатеричных значений интенсивности цветовой модели RGB (Red, Green, Blue — красный, зеленый, синий) или строчного литерала, соответствующего названию цвета, например:

<body bgcolor=»#ff0000»>

<body bgcolor=»red»>

Примеры использования этого атрибута в HTML-документе имеются в уроке 2

 Атрибут TEXT задает используемый по умолчанию цвет текста, не являющегося гиперссылкой По умолчанию такой текст черный Пример:

<body text=”цвет”>

Пример использования этого атрибута в HTML-документе имеется в уроке 4

 Атрибут LINK задает цвет гиперссылки; в большинстве браузеров он по умолча- нию темно-синий Пример:

<body link=”цвет”>

Пример использования этого атрибута в HTML-документе имеется в уроке 15

 Атрибут ALINK задает цвет активной гиперссылки, который меняется в момент щелчка на ней мышью и который желательно делать отличным от цвета фона (задаваемого атрибутом LINK) Пример:

<body alink=”цвет»>

Пример использования этого атрибута в HTML-документе имеется в уроке 15

 Атрибут VLINK задает цвет посещенной гиперссылки, который желательно де- лать отличным от цвета фона (задаваемого атрибутом LINK) и от цвета актив- ной гиперссылки (задаваемого атрибутом ALINK) Пример:

<body vlink=”цвет”>

Пример использования этого атрибута в HTML-документе имеется в уроке 15

 Атрибут BGPROPERTIES задает свойства фонового изображения В данный мо- мент браузерами поддерживается единственное его значение fixed, запрещаю- щее прокрутку изображения Пример:

<body bgproperties=”fixed”>

32     Урок 1. Основные сведения

 Атрибут TOPMARGIN задает верхнюю границу страницы в пикселах Пример:

<body topmargin=число>

 Атрибут BOTTOMMARGIN задает нижнюю границу страницы в пикселах Пример:

<body bottommargin=число>

 Атрибут LEFTMARGIN задает левую границу страницы в пикселах Пример:

<body leftmargin=число>

 Атрибут RIGHTMARGIN задает правую границу страницы в пикселах Пример:

<body rightmargin=число>

Примеры использования в HTML-документеHTML-документе-документе атрибутов,атрибутов,атрибутов, регулирующихрегулирующихрегулирующих поло-полополо-- жение границ страницы, имеются в уроке 4

На рис 1 8 показана веб-страница (листинг 1 1), для которой верхняя, левая, пра- вая и нижняя границы не заданы, то есть равны 0 Видно, что текст как бы при- липает к левому краю страницы, отступов сверху и снизу не наблюдается Правый край текста имеет отступ от правой границы только из-за того, что в нем после каждой строки указан тег перехода на новую строку (тег <BR>)

Листинг 1 1  Пример создания веб-страницы, для которой не заданы границы

<html><head><title>МОЯ ПЕРВАЯ ПРОГРАММА</title></head>

<body bgcolor =ffff05

topmargin=0

bottommargin=0

leftmargin=0

rightmargin=0>

<h2> А. С. Пушкин </h2>

<h2> Зимняя дорога</h2>Сквозь волнистые туманы <br>Пробирается луна,<br>На печальные поляны<br>Льет печально свет она<br><br>По дороге зимней, скучной<br>Тройка борзая бежит,<br>Колокольчик однозвучный<br>Утомительно гремит.<br><br>Что-то слышится родное <br>В долгих песнях ямщика:<br>То разгулье удалое<br>То сердечная

тоска

<br>Только версты полосаты<br>Попадаются одне

Нина, <br>Завтра к милой возвратясь,<br>Я забудусь у камина, <br>Загляжусь не наглядясь.<br><br>Звучно стрелка часовая<br>Медный круг свой совершит,<br>И, докучных удаляя,<br>Полночь нас не разлучит<br><br>Грустно, Нина: путь мой скучен, <br>Дремля смолкнул мой ямщик,<br>Колокольчик однозвучный,<br>Отуманен лунный лик.<br><i>1826</

i></body></html>

На рис 1 9 показана веб-страница, для которой верхняя, левая, правая и нижняя границы заданы и равны 150 пикселов (листинг 1 2) Видно, что текст имеет от- ступы от левого и правого краев, а также сверху (и снизу, в чем можно убедиться, выполнив прокрутку) Так как текст полностью в окно не помещается, автомати- чески справа появляется вертикальная полоса прокрутки

<br><br>Ни

огня, ни черной хаты, <br>Глушь и снег

Навстречу мне,

грустно

<br><br>Скучно,

Завтра,

Атрибуты тега <Body>    33

Атрибуты тега <Body>     33 Рис 1 8

Рис 1 8  Веб-страница, для которой не заданы границы

Рис 1 9

Рис 1 9  Веб-страница с отступами от границ

Листинг 1 2  Пример создания веб-страницы, для которой заданы границы

<html><head><title>МОЯ ПЕРВАЯ ПРОГРАММА</title></head>

<body bottommargin=150 bgcolor=#FFD000 leftmargin=150 topmargin=150 rightmargin=150>

<H2>А. С. Пушкин </h2>

<h2>Зимнее утро </h2>Мороз и солнце; день чудесный; <br>Еще ты дремлешь, друг прелестный,<br>Пора, красавица, проснись:<br>Открой сомкнуты негой взоры<br>Навстречу северной Авроры,<br>Звездою Севера явись!<br><br>Вечор, ты помнишь, вьюга злилась,<br>На мутном небе мгла носилась;<br>Луна, как бледное пятно,

34     Урок 1. Основные сведения

<br>Сквозь тучи мрачные желтела,<br>А ты печальная сидела-<br>А нынче погляди в окно:<br><br>Под голубыми небесами<br>Великолепными коврами, <br>Блестя на солнце, снег лежит;<br>Прозрачный лес один чернеет,<br>И ель сквозь иней зеленеет, <br>И речка подо льдом блестит.<br><br>Вся комната янтарным блеском <br>Озарена. Веселым треском<br>Трещит затопленная печь<br>Приятно думать у лежанки.<br>Но знаешь: не велеть ли в санки<br>Кобылку бурую запречь?<br><br>Скользя по утреннему снегу, <br>Друг милый, предадимся бегу<br>Нетерпеливого коня<br>И навестим поля пустые, <br>Леса, недавно столь густые,<br>И берег, милый для меня<br><i>1829</i> </body></html>

Подведем итоги

В этом уроке рассматриваются базовые понятия, относящиеся к созданию веб- страниц Показаны структура HTML-документаHTML-документа-документа иии некоторыенекоторыенекоторые основныеосновныеосновные тегитегитеги Пе-ПеПе-- речислены правила создания веб-страниц В заключение урока представлено не- сколько примеров веб-страниц

Урок 2 Текст Урок В  этом  уроке  рассматриваются  основные 
Урок 2 Текст Урок В  этом  уроке  рассматриваются  основные 

Урок 2 Текст

Урок

В  этом  уроке  рассматриваются  основные  теги,  предназначенные  для  работы  с  текстом.  Эти  теги  позволяют  форматировать  текст,  красиво  располагать  его  на  странице,  а  также  выводить  в  виде  всплывающих подсказок.

36     Урок 2. Текст

Первая веб-страница

Можно открыть Блокнот и в теле документа записать текст, не задумываясь о его размерах и цвете На рис 2 1 показана такая программа при просмотре в браузере (листинг 2 1)

просмотре в браузере (листинг 2 1) Рис 2 1  Веб-страница с текстом

Рис 2 1  Веб-страница с текстом

Листинг 2 1  Пример создания веб-страницы с текстом

<HTML>

<HEAD>

<TITLE> Моя первая Веб-страничка</TITLE>

</HEAD>

<BODY>

33 удивительнейшие буквы русского алфавита передают человечеству события, факты, настроение, переживания, радость и вдохновение, то есть все, что можно видеть, слышать, пробовать, трогать, чем можно наслаждаться. Как же буквы могут передать огромное количество информации? Буквы образуют слово, слова собираются в предложения, предложения могут составить целую книгу. Книги состоят из текста и рисунков.

</BODY>

</HTML>

Как видно на рисунке, то что находится между тегами <TITLE> и </TITLE>, не появ- ляется на экране Однако при загрузке документа в браузер этот текст загружается в первую очередь и отображается в заголовке окна браузера Если текст заголовка достаточно информативен, пользователь в процессе поиска нужных документов уже на этапе загрузки может определить, действительно ли ему нужен этот документ, а если не нужен, то сразу отказаться от его загрузки и перейти к загрузке следующего

Текст названия требуется и при создании закладки на данный документ, с этой точки зрения его информативность также очень важна

Уровни заголовков

Заголовки различного уровня позволяют структурно разделить формально не ограниченный по длине текст на отдельные разделы и абзацы Первый уровень заголовков (самый высокий) обозначается цифрой 1, следующий — 2, и т д Теги

Уровни заголовков    37

с меньшими номерами определяют заголовки более высокого уровня Большин- ство браузеров поддерживает интерпретацию шести уровней заголовков, опреде- ляя каждому из них собственный стиль Заголовок самого верхнего уровня имеет признак 1 Синтаксис заголовка первого уровня (H от англ head — заголовок):

<H1> Заголовок первого уровня </H1>

Заголовок любого уровня может быть представлен в общем случае так:

<Hx> Заголовок x-го уровня </Hx>

Здесь x — цифра от 1 до 6, определяющая уровень заголовка

Атрибут ALIGN управляет горизонтальным выравниванием, принимая значения LEFT (влево), CENTER (по центру), RIGHT (вправо) или JUSTIFY (по ширине от левой границы до правой)

На рис 2 2 показано окно программы, содержащей заголовки, при просмотре в браузере (листинг 2 2)

просмотре в браузере (листинг 2 2) Рис 2 2

Рис 2 2  Веб-страница с заголовками разных уровней

Листинг 2 2  Пример создания веб-страницы с заголовками

<HTML> <HEAD> <TITLE> Заголовки </TITLE> </HEAD> <BODY> <H1> Заголовок 1 - Транспортный протокол</H1> <H2> Заголовок 2 - Протокол маршрутизации</H2> <H3> Заголовок 3 - Протокол передачи файлов</H3> <H4> Заголовок 4 - Протокол передачи почты</H4> <H5> Заголовок 5 - Сетевой протокол</H5> <H6> Заголовок 6 - Протокол поддержки сетевого адреса</H6> </BODY> </HTML>

38     Урок 2. Текст

Данный тег появился в HTML версии 2 0 Заголовки более высокого уровня ото- бражаются шрифтом большего размера

Шрифт

Тег <FONT> позволяет с помощью атрибутов управлять размером и цветом шрифта

Атрибут SIZE управляет размером шрифта Шрифт может иметь размер от 1 до 7 Можно указать размер шрифта непосредственно цифрой или задать смещение относительно базового значения (по умолчанию — 3) в положительную или от- рицательную сторону Соответствие размера шрифта величине в пунктах иллю- стрирует табл 2 1

Таблица2 1  Типичные размеры шрифтов и их величины в пунктах

Размер шрифта

Типичная величина в пунктах

1

8

2

10

3

12

4

14

5

18

6

24

7

36

Размер шрифта можно изменить при помощи следующей команды:

<FONT SIZE=+|- n>

Для изменения базового значения служит такая команда:

<BASEFONT SIZE=n>

Пример использования шрифтов разного размера показан на рис 2 3 (листинг 2 3)

показан на рис 2 3 (листинг 2 3) Рис 2 3

Рис 2 3  Веб-страница с буквами разного размера

Листинг 2 3  Пример создания веб-страницы, содержащей буквы разного размера

<HTML> <HEAD> <TITLE> Размер шрифта </TITLE>

Шрифт    39

</HEAD> <BODY> <P>П <FONT SIZE=+1>Е</FONT> <FONT SIZE=+2>Т</FONT> <FONT SIZE=+3>Е</FONT> <FONT SIZE=+4>Р</FONT> <FONT SIZE=+3>Б</FONT> <FONT SIZE=+2>У</FONT> <FONT SIZE=+1>Р</FONT> Г</P> </BODY> </HTML>

Данный тег появился в HTML версии 3 2, однако в настоящее время он не реко- мендован к применению Вместо него желательно использовать средства каскад- ных листов стилей (см урок 17)

Чтобы изменить цвет шрифта используется атрибут COLOR тега <FONT>:

<FONT COLOR=»#xxxxxx»>

Цвет указывается в цветовой модели RGB соответствующими значениями цве- товых составляющих в шестнадцатеричном формате Например, белый цвет обо- значается FFFFFF, черный — 000000, синий — 0000FF и т п

Пример веб-страницы, содержащей текст разного цвета, показан на рис 2 4 (листинг 2 4)

показан на рис 2 4 (листинг 2 4) Рис 2 4

Рис 2 4  Веб-страница с разноцветным текстом

Листинг 2 4  Пример создания веб-страницы с разноцветным текстом

<HTML>

<HEAD>

<TITLE> Цвет шрифта </TITLE>

</HEAD>

<BODY>

<FONT COLOR=»#FF0000»>

Красный </FONT>

<FONT COLOR=»#00FF00»>

40     Урок 2. Текст

Зеленый </FONT> <FONT COLOR=»#0000FF»> Синий </FONT> </BODY> </HTML>

Тег <BASEFONT> определяет базовый (основной для всей страницы) размер шриф- та, имеет открывающий дескриптор SIZE — атрибут тега, который определяет ба- зовый размер этого шрифта SIZE меняется в пределах от 1 до 7 По умолчанию используется величина 3 Пример применения этого тега можно посмотреть на рис 2 5, а код программы — в листинге 2 5

5, а код программы — в листинге 2 5 Рис 2 5

Рис 2 5  Веб-страница, содержащая тег <BASEFONT>

Листинг 2 5  Пример создания веб-страницы, содержащей тег <BASEFONT>

<HTML><HEAD><TITLE>Теги форматирования символов</TITLE></HEAD> <BODY BGCOLOR=#EEEAAA><BASEFONT size=8>Логотип - элемент фирменного стиля,<BR> <BASEFONT size=6>оригинальное начертание наименования рекламодателя,<BR> <BASEFONT size=5>одна из форм торгового знака </BODY></HTML>

Тег <BASEFONT> появился в версии HTML 3 2 Вместо данного тега рекомендует- ся использовать средства каскадных листов стилей (см урок 17), а шрифт может быть изменен с помощью тега <FONT>

Абзацы и разрывы строк

В HTML-документе невозможно разбить текст на абзацы, используя клавишу Enter Нажатие этой клавиши улучшает внешний вид исходного текста, но не вли- яет на получаемое изображение Для перехода на следующую строку следует вос- пользоваться тегом <BR>, а для создания пустой строки — тегом <P>

Тег <P> позволяет разделить текст на абзацы Если этого не сделать, документ бу- дет выглядеть как один большой абзац

ALIGN — атрибут выравнивания тега <P>

Этот атрибут может иметь значения

LEFT, CENTER, RIGHT, JUSTIFY, что позволяет выровнять абзац соответственно по

Абзацы и разрывы строк    41

левому краю, по центру, по правому краю или по ширине Например, следующая запись выравнивает абзац по левому краю:

<P ALIGN=LEFT>

Данный тег появился в HTML версии 2 0, он не может содержать другие откры- вающие и закрывающие теги, то есть между тегами <P> и </P> может быть только текст и разрыв строки, но не другие теги

Тег <BR> извещает браузер о разрыве строки Дополнительный параметр CLEAR по- зволяет расширить возможности тега <BR>, обеспечивая не просто перевод стро- ки, а размещая следующую строку, начиная с левой (LEFT), правой (RIGHT), обеих (ALL) границ окна браузера, или обычным способом (NONE) Например, если рядом с текстом слева должен располагаться рисунок, то можно использовать тег <BR> для смещения текста под рисунок

Данный тег появился в HTML версии 2 0 В настоящее время атрибут CLEAR не рекомендован к применению, вместо него желательно использовать средства ка- скадных листов стилей (см урок 17)

Тег <DIV> (от англ division — раздел) позволяет выделить в структуре докумен- та несколько разделов Он является блочным элементом, функционирующим во многом подобно элементу <P> Если закрывающий тег </P> опущен, то <DIV> эффективно заменяет его, начиная новый абзац Он может иметь атрибут ALIGN, который имеет значения LEFT, CENTER или RIGHT и указывает отступ Каждый сле- дующий раздел игнорирует значение ALIGN, заданное для предыдущего раздела Синтаксис:

<DIV ALIGN=отступ> Текст раздела </DIV>

Пример использования этого тега можно посмотреть на рис 2 6, а код програм- мы — в листинге 2 6

а код програм- мы — в листинге 2 6 Рис 2 6

Рис 2 6  Веб-страница, содержащая тег <DIV>

Листинг 2 6  Пример создания веб-страницы, содержащей тег <DIV>

<HTML><HEAD><TITLE> Теги форматирования символов</TITLE></HEAD>

<BODY BGCOLOR=#EEAAAE><DIV ALIGN=CENTER> Аттитюд - социально-психологическая установка, внутренняя потребность человека к каким-либо действиям (например, к покупке рекламируемого товара)</DIV>

42     Урок 2. Текст

<DIV> Афиша - старейшее средство наружной рекламы, выполненное на плотной бумаге или картоне </DIV> <DIV ALIGN=RIGHT> Булл-Марк - реклама издательства, вкладываемая в книгу, журнал, каталог, в виде красочной закладки</DIV> <DIV> Марка - имя, термин, знак, символ, рисунок или их сочетание, идентифицирующее товары или услуги одного или нескольких производителей (продавцов) и отличающие их от товаров и услуг конкурентов</DIV> </BODY></HTML>

Так как данный тег появился в версии HTML 3 2 и используется в сочетании с каскадными листами стилей, он представляет собой мощное средство задания структуры документа

Выравнивание

Как уже упоминалось, атрибут ALIGN позволяет выровнять текст по левому или правому краю, по центру или по ширине страницы

По умолчанию текст, графика и элементы таблицы выравниваются по левому краю и не выравниваются по правому краю, то есть начало строк находится на одном уровне, а конец — на разных Выравнивание по левому краю задается атрибутом ALIGN=LEFT, выравнивание по правому краю — атрибутом ALIGN=RIGHT Центрирование элементов документа можно производить разными способами, например с помощью тега

<ALIGN=CENTER>

Вы можете также центрировать все элементы документа в окне браузера Для этого можно использовать тег <CENTER> Все элементы между тегами <CENTER> и </CENTER> будут находиться в центре окна

Центрирование можно производить и в абзаце:

<P ALIGN=CENTER>

Пример веб-страницы, содержащей текст, выровненный различными способами, показан на рис 2 7 (листинг 2 7)

показан на рис 2 7 (листинг 2 7) Рис 2 7

Рис 2 7  Веб-страница с текстом, выровненным различными способами

Предварительное форматирование    43

Листинг 2 7  Пример выравнивания текста различными способами

<HTML> <HEAD> <TITLE> Центрирование и выравнивание </TITLE> </HEAD> <BODY> <P ALIGN=CENTER> Атрибут ALIGN позволяет выровнять текст по левому или правому краю, <BR> по центру или по ширине </P> <P ALIGN=RIGHT>По умолчанию текст, графика и элементы таблицы выравниваются по левому краю <BR> и не выравнивается по правому краю, то есть начало строк находится на одном уровне, а конец - на разных.<BR> Выравнивание по левому краю задается атрибутом ALIGN=LEFT. Выравнивание по правому краю задается<BR> атрибутом ALIGN=RIGHT </P> <P ALIGN=LEFT>Центрирование элементов документа можно производить разными способами,<BR> например с помощью тега ALIGN=CENTER</P> </BODY> </HTML>

Предварительное форматирование

Тег <PRE> позволяет представлять на экране текст со специфическим форматиро- ванием Предварительно отформатированный текст заканчивается завершающим тегом </PRE> Внутри предварительно отформатированного текста разрешается ис- пользовать:

 символы перевода строки;

 символы табуляции (сдвиг на 8 символов вправо);

 непропорциональный шрифт, устанавливаемый браузером

Форматирование абзаца, заданное другими тегами, такими как <Hx> и <ADDRESS>, будет игнорироваться браузером при помещении их между тегами <PRE> и </PRE>

между тегами <PRE> и </PRE> Рис 2 8

Рис 2 8  Веб-страница с текстом, имеющим специфическое форматирование

44     Урок 2. Текст

Пример веб-страницы, содержащей текст со специфическим форматированием, показан на рис 2 8 (листинг 2 8)

Листинг 2 8  Пример специфического форматирования текста

<HTML> <HEAD> <TITLE> Специфическое форматирование </TITLE> </HEAD> <BODY> <PRE> Тег предварительного форматирования PRE позволяет представлять текст со специфическим <BR> форматированием на экране. Предварительно отформатированный текст заканчивается<BR> завершающим тегом /PRE. Внутри предварительно отформатированного текста разрешается<BR> использовать:

· символы перевода строки

· символы табуляции (сдвиг на 8 символов вправо)

· непропорциональный шрифт, устанавливаемый браузером </PRE> </BODY> </HTML>

Данный тег появился в HTML версии 2 0 В заранее отформатированный текст нежелательно включать символы табуляции, поскольку при этом может нару- шиться выравнивание

Пример, который можно посмотреть на рис 2 9, а код программы в листинге 2 9, содержит текст разной высоты и тег <PRE>

разной высоты и тег <PRE> Рис 2 9

Рис 2 9  Веб-страница с текстом разной высоты

Листинг 2 9  Пример создания веб-страницы, содержащей текст разной высоты

<HTML><HEAD><TITLE>Размер шрифта</TITLE></HEAD> <BODY BGCOLOR=VIOLET> <PRE> Размер шрифта изменяется в пунктах </PRE> <FONT SIZE=2> 1пункт равен 1/72 дюйма </FONT> <FONT SIZE=7> 1пункт равен 0,353 мм </FONT> <PRE><FONT SIZE=+,- n> текст</FONT> n - число пунктов,на которое необходимо увеличить или уменьшить размер шрифта

Задание начертания    45

Теги PRE - теги отформатированного текста </HIML></PRE></BODY></HTML>

Задание начертания

Для выделения текстовой информации в документах можно использовать различ- ное начертание Большинством браузеров поддерживаются полужирное и курсив- ное начертание, моноширинный шрифт, большой и маленький шрифты, а также подстрочный и надстрочный индексы Эти и подобные им варианты начертания задаются следующими тегами:

<B>Этот текст жирный </B> <I>Этот текст наклонный </I> <U>Этот текст подчеркнутый </U> <TT>Этот текст с моноширинным шрифтом </TT> Этот текст <BIG> большой </BIG> Этот текст <SMALL> маленький </SMALL> Этот текст <STRONG> увеличенный </STRONG> Этот текст <STRIKE> перечеркнутый Этот текст <SUB> подстрочный </SUB> Этот текст <SUP> надстрочный </SUP>

Результат применения этих тегов показан на рис 2 10 (листинг 2 10)

показан на рис 2 10 (листинг 2 10) Рис 2 10

Рис 2 10  Веб-страница с текстом разного начертания

Теги <B>, <I>, <TT>, <STRONG> появились в HTML версии 2 0, теги <U>, <BIG>, <SMALL>, <STRIKE>, <SUB>, <SUP> — в HTML версии 3 2 Хотя пользоваться этими тегами не запрещено, консорциум W3C (World Wide Web Consortium) рекомендует приме- нять вместо них средства каскадных листов стилей (см урок 17)

Листинг 2 10  Пример создания веб-страницы, содержащей текст разного начертания

<HTML> <HEAD> <TITLE> Стили шрифта </TITLE>

46     Урок 2. Текст

</HEAD> <BODY> <B> Этот текст жирный </B><BR> <I> Этот текст наклонный </I><BR> <U> Этот текст подчеркнутый </U><BR> <TT> Этот текст с непропорциональным шрифтом </TT><BR> Этот текст <BIG> большой </BIG><BR> Этот текст <SMALL> маленький </SMALL><BR> Этот текст <STRONG> увеличенный </STRONG><BR> Этот текст <STRIKE> перечеркнутый </STRIKE><BR> Этот текст <SUB> подстрочный </SUB><BR> Этот текст <SUP> надстрочный </SUP><BR> </BODY> </HTML>

Тег <VAR> используется с целью дополнительного выделения переменных в коде Синтаксис:

<VAR> переменная </VAR>

Пример использования этого тега можно посмотреть на рис 2 11, а код програм- мы — в листинге 2 11

а код програм- мы — в листинге 2 11 Рис 2 11

Рис 2 11  Веб-страница, содержащая тег <VAR>

Листинг 2 11  Пример создания веб-страницы, содержащей тег <VAR>

<HTML><HEAD><TITLE>Теги форматирования</TITLE></HEAD> <BODY BGCOLOR=#EC1DFC><FONT SIZE=6> Доджер - <VAR>рекламный проспект </VAR></FONT></BODY></HTML>

Тег <VAR> появился в версии HTML 2 0 Он определяет переменную или параметр программы и обычно отображается курсивом

Тег <SPAN> позволяет выделить фрагмент текста для его последующего форматиро- вания, однако в отличие от тега <DIV> не начинает новый абзац Тег <SPAN> создает структуру текстового уровня, определяемую пользователем Пример использова- ния этого тега можно посмотреть на рис 2 12, а код программы — в листинге 2 12

Данный тег появился в HTML 4 0 Так как он используется в сочетании с каскад- ными листами стилей (см урок 17), в данном примере его преимущества не слиш- ком заметны

Задание начертания    47

Листинг 2 12  Пример создания веб-страницы, содержащей тег <SPAN>

<HTML><HEAD><TITLE>Теги форматирования символов</TITLE></HEAD> <BODY BGCOLOR=#EAAAAc> Медиапланирование -<SPAN><I> составление оптимального плана размещения рекламы в СМИ на основе маркетинговых и медиаисследований. </SPAN></I> Паблисити - <SPAN><I>неоплаченная информация, стимулирующая спрос на товар или деловую кампанию посредством распространения о них коммерческих и (или) социальных сведений в средствах коммуникации</SPAN></I> <SPAN><I>Характерные признаки: достоверность (в сравнении с рекламными сообщениями); широкий охват аудитории (новинка, сенсация, напоминание); броскость (эффективная и многожанровая форма).</SPAN></I></BODY></HTML>

Рис 2 12

Рис 2 12  Веб-страница, содержащая тег <SPAN>

Тег <S> выводит текст зачеркнутым Все, находящееся между тегами <S> и </S>, бу- дет написано перечеркнутым шрифтом Это встроенный парный тег Обязательных атрибутов не имеет Пример использования тега можно посмотреть на рис 2 13, а код программы — в листинге 2 13

а код программы — в листинге 2 13 Рис 2 13

Рис 2 13  Веб-страница, содержащая тег <S>

Листинг 2 13  Пример создания веб-страницы, содержащей тег <S>

<HTML><HEAD><TITLE>Перечеркнутый текст</TITLE></HEAD> <BODY BGCOLOR=#CCCCFF> <S> Хот-шоп-творческое рекламное ателье, выполняющее отдельные функции дизайна по созданию элементов фирменного стиля, разработке оригинал-макетов печатной рекламы. </S></BODY></HTML>

48     Урок 2. Текст

Тег <S> появился в версии HTML 4 0 Вместо данного тега консорциум W3C реко- мендует использовать средства каскадных листов стилей (см урок 17)

Неразрывные строки

Тег <NOBR> (от англ no break — без разрыва) дает команду браузеру отображать весь текст в одной строке, не разрывая ее Этим тегом размечается текст, который необходимо уместить на одной строке, причем этот текст ни при каких обстоя- тельствах не должен быть разбит на несколько строк Таким образом, тег <NOBR> противоположен по функциям тегу <BR>

Если строку текста разместить между тегами <NOBR> и </NOBR>, то браузер не начнет новую строку, даже если она выйдет за границы экрана; вместо этого брау- зер позволит горизонтально прокручивать окно Пример такой строки показан на рис 2 14 (листинг 2 14)

показан на рис 2 14 (листинг 2 14) Рис 2 14

Рис 2 14  Веб-страница с неразрывной строкой

Листинг 2 14  Пример создания веб-страницы, содержащей текст в одной строке без  разрыва

<HTML> <HEAD> <TITLE> Строки без разрыва </TITLE> </HEAD> <BODY> <NOBR> Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения где бы то ни было </NOBR> </BODY> </HTML>

Если все же необходимо разбить строку на две, то в нужное место вставляется тег <WBR>, хотя в последнее время он не рекомендуется к использованию

Тег <WBR> задает «мягкий разрыв строки» внутри тега <NOBR> С помощью тега <WBR> в данном месте текста при необходимости браузер выполняет переход на новую строку Пример использования этого тега можно посмотреть на рис 2 15, а код программы — в листинге 2 15

Вставка цитат    49

Листинг 2 15  Пример создания веб-страницы, содержащей теги <WBR> и <NOBR>

<HTML><HEAD><TITLE>Теги форматирования символов</TITLE></HEAD> <BODY BGCOLOR=#EB1DDA><FONT size=5><NOBR> Ключевые понятия - <WBR> Классифицированная реклама<WBR> Профессиональный риск<WBR> Персонализация рекламы<WBR> Фактор интеграции<WBR> Бесприбыльные связи<WBR></NOBR> </FONT></BODY></HTML>

</FONT></BODY></ HTML> Рис 2 15

Рис 2 15  Веб-страница, содержащая теги <WBR> и <NOBR>

Вставка цитат

Тег <BLOCKQUOTE> определяет текст как цитату большого размера и отображает его с отступами от левого и правого краев Этот тег позволяет расположить текст компактно в центре страницы При использовании этого тега несколько раз, текст все больше сжимается к центру Тег <BLOCKQUOTE> имеет атрибут CITE=»URI», где URI задает цитируемый документ или сообщение URI (Uniform Resource Identifier) — это унифицированный идентификатор ресурса, в состав которого входит URL

Текст, обозначенный тегом <BLOCKQUOTE>, выводится с отступом от левого края документа на 8 пробелов Пример использования тега показан на рис 2 16 (ли- стинг 2 16)

показан на рис 2 16 (ли- стинг 2 16) Рис 2 16

Рис 2 16  Фрагмент веб-страницы с длинной цитатой

50     Урок 2. Текст

Листинг 2 16  Пример создания веб-страницы, содержащей цитату

<HTML> <HEAD> <TITLE> Цитата </TITLE> </HEAD> <BODY> <BLOCKQUOTE> Тег BLOCKQUOTE добавляет поля слева и справа от текста. <BR> Этот тег позволяет расположить текст компактно и в центре страницы. <BR> При использовании этого тега несколько раз текст все больше сжимается к центру.<BR> Данный тег предназначен для обозначения в документе цитаты из другого источника.<BR> <BLOCKQUOTE>Текст, помеченный тегом, отступает от левого края документа на 8 пробелов <BLOCKQUOTE> </BODY> </HTML>

Данный тег появился в HTML версии 2 0 Он обеспечивает вставку более длин- ных цитат по сравнению с тегом <Q>

Тег <Q> оформляет текст в виде краткой цитаты Тег имеет атрибут CITE=»URI», где URI задает цитируемый документ или сообщение Тег <Q> предназначен для ото- бражения более коротких цитат по сравнению с тегом <BLOCKQUOTE> Обычно в со- став цитаты не входят символы разрыва строки, и цитата считается элементом текстового уровня Символы кавычек отображает браузер

Пример использования тега <Q> показан на рис 2 17 (листинг 2 17)

показан на рис 2 17 (листинг 2 17) Рис 2 17

Рис 2 17  Фрагмент веб-страницы с короткой цитатой

Листинг 2 17  Пример создания веб-страницы, содержащей тег <Q>

<HTML><HEAD><TITLE>Цитата</TITLE></HEAD> <BODY BGCOLOR=BBAAFF> <Q>”Постер” - наружная реклама, плакат </Q></BODY></HTML>

Комментарии

Как любой язык, HTML позволяет вставлять в тело документа комментарии, ко- торые сохраняются при передаче документа по сети, но не отображаются браузе- ром Синтаксис комментария:

Акронимы    51

<!-- Это комментарий -->

Комментарии могут встречаться в документе где угодно и в любом количестве Данный тег появился в HTML версии 2 0

Акронимы

Два тега <ABBR> и <ACRONYM> (см урок 19) позволяют выделять акронимы, или аббревиатуры (сокращения полных названий), в пределах текста Содержимое те- гов <ABBR> и <ACRONYM> выводится в виде всплывающих подсказок, которые дают пользователю возможность увидеть расшифровку акронимов

Пример использования тега <ACRONYM> показан на рис 2 18 (листинг 2 18)

показан на рис 2 18 (листинг 2 18) Рис 2 18

Рис 2 18  Фрагмент веб-страницы, содержащей акроним

Листинг 2 18  Пример создания веб-страницы, содержащей акроним

<HTML> <HEAD> <TITLE> Акроним </TITLE> </HEAD> <BODY> <!-- Акроним, или аббревиатура, — это сокращение известных названий --> <ACRONYM TITLE=”Северо-западный институт печати”> СЗИП </ACRONYM> <ACRONYM TITLE=”Санкт-Петербургский государственный университет технологии и дизайна”> СПГУТД </ACRONYM> </BODY> </HTML>

</ACRONYM> </BODY> </HTML> Не  следует  забывать,  что 
</ACRONYM> </BODY> </HTML> Не  следует  забывать,  что 

Не  следует  забывать,  что  знак  равенства  (=)  в  программе  не  должен  быть  окружен пробелами.

52     Урок 2. Текст

Определения

Если название поместить между тегами <CITE>, то это название отобразится кур- сивом Термины можно задать еще и тегом <DFN> Пример использования этих те- гов показан на рис 2 19 (листинг 2 19)

Листинг 2 19  Пример создания веб-страницы, содержащей определения

<HTML> <HEAD> <TITLE> Определение </TITLE> </HEAD> <BODY> <CITE> “Переулок Джамбула, дом 13”</CITE> Это адрес Северо-Западного института печати <BR> Санкт-Петербургского государственного университета технологии и дизайна<BR> <DFN> PR - деньги из воздуха </DFN> В России PR пока недооценивается.<BR> Его репутация не слишком высока, а само слово PR превратилось в “пиар” и вызывает негативные<BR> ассоциации. Ежегодный оборот на рынке заказных публикаций оценивается в 20$ млн.<BR> Теперь эти деньги с незаконного рынка заказухи перетекают в легальный рекламный рынок <BR> - стало больше статей под шапкой “на правах рекламы”. </BODY> </HTML>

рекламы”. </BODY> </HTML> Рис 2 19

Рис 2 19  Фрагмент веб-страницы с определениями

Тег <CITE> появился в HTML версии 2 0 Он определяет цитату или ссылку на ис- точник, содержимое данного тега обычно воспроизводится курсивом

Шрифтовое выделение

Тег <EM> используется с целью выделения особым шрифтом (обычно курсивом) слова или текста Синтаксис:

<EM> Текст </EM>

Пример использования этого тега можно посмотреть на рис 2 20, а код програм- мы — в листинге 2 20

Использование моноширинных шрифтов    53

Листинг 2 20  Пример создания веб-страницы со специфическим форматированием

<HTML><HEAD><TITLE>Теги форматирования</TITLE></HEAD> <BODY BGCOLOR=00FFFC> Имидж -<EM> образ, (знаковый символ фоторекламного успеха и рекламного бизнеса, устойчивый престиж искусства фоторекламы, полномасштабная профессиональная компетентность команды фоторекламистов и их лидера, философия индивидуальной позиции фоторекламного творчества), </EM> исключительный и качественный признак в ряду иных подобий, впечатление, которое свойственно данному товару/услуге, рекламному агентству, мастеру-фоторекламисту, фоторекламной акции, рекламной корпорации Интернет-услуг. </BODY></HTML>

Интернет-услуг. </BODY></HTML> Рис 2 20

Рис 2 20  Веб-страница, содержащая тег <EM>

Тег <EM> появился в версии HTML 2 0, чаще всего содержимое данного тега выво- дится курсивом

Использование моноширинных шрифтов

Надписи, выполненные моноширинными шрифтами, создаются с помощью тегов <CODE>, <KBD> и <SAMP> Результаты применения этих тегов обычно идентичны

Тег <CODE> используется с целью дополнительного выделения фрагментов про- граммного кода моноширинным шрифтом Данный элемент предпочтительнее, чем элемент <TT> (см раздел «Задание начертания») Синтаксис:

<CODE> Код </CODE>

Пример использования этого тега можно посмотреть на рис 2 21, а код програм- мы — в листинге 2 21

Листинг 2 21  Пример создания веб-страницы, содержащей тег <CODE>

<HTML><HEAD><TITLE>Теги форматирования</TITLE></HEAD> <BODY BGCOLOR=#00FFEC> Промоушн - <CODE> продвижение продаж - комплекс различных мер стимулирования покупки товаров.</CODE> Промоушн включает в себя такие методы, как купонирование, продажи со скидкой, лотереи, викторины, представление бесплатных образцов. </BODY></HTML>

54     Урок 2. Текст

54      Урок 2. Текст Рис 2 21

Рис 2 21  Веб-страница, содержащая тег <CODE>

Тег <CODE> появился в версии HTML 2 0; чаще всего содержимое данного тега вы- водится моноширинным шрифтом

Тег <KBD> используется с целью выделения диалога пользователя с компьютером Синтаксис:

<KBD> Ввод с клавиатуры </KBD>

Пример применения этого тега можно посмотреть на рис 2 22, а код программы — в листинге 2 22

а код программы — в листинге 2 22 Рис 2 22

Рис 2 22  Веб-страница, содержащая тег <KBD>

Листинг 2 22  Пример создания веб-страницы, содержащей тег <KBD>

<HTML><HEAD><TITLE>Теги форматирования</TITLE></HEAD> <BODY BGCOLOR=#EC1DFC> Имидж - <KBD> модификация образа личности, фирмы, товара путем сгущения красок, приукрашивания или очернения.</KBD> Теория создания имиджей именуется имиджелогией, или иконикой. </BODY></HTML>

Тег <KBD> появился в версии HTML 2 0 Чаще всего содержимое данного тега вы- водится моноширинным шрифтом

Тег <SAMP> используется с целью выделения диалога пользователя с компьюте- ром Синтаксис:

Добавление текста с другой страницы    55

<SAMP> Системное сообщение компьютера </SAMP>

Пример использования этого тега можно посмотреть на рис 2 23, а код програм- мы — в листинге 2 23

Листинг 2 23  Пример создания веб-страницы, содержащей тег <SAMP>

<HTML><HEAD><TITLE>Теги форматирования символов</TITLE></HEAD> <BODY BGCOLOR=#EC1DDA><FONT size=5>Корпоративная реклама – <SAMP>реклама, создающая потребность не в конкретной марке товара, а в полном товарном ассортименте.</SAMP></FONT></BODY></HTML>

Рис 2 23

Рис 2 23  Веб-страница, содержащая тег <SAMP>

Тег <SAMP> появился в версии HTML 2 0 Обычно содержимое данного тега ото- бражается моноширинным шрифтом

Добавление текста с другой страницы

Тег <INS> позволяет вывести на странице текст с другой страницы, указав ее адрес Определяет и отображает текст, который был включен в документ по сравнению с его предыдущей версией Визуально вставленный текст выделяется подчеркива- нием, например:

<INS CITE=»www.uprint.spb.ru/listing.htm» DATETIME=»2004-08-15»> (доступный фрагмент текста) </INS>

Для вывода даты предусмотрен атрибут DATETIME

Пример можно посмотреть на рис 2 24, а код программы — в листинге 2 24

Листинг 2 24  Пример создания веб-страницы, содержащей тег <INS>

<HTML><HEAD><TITLE>Пример вставки</TITLE></HEAD> <BODY BGCOLOR=CAAAAA><INS CITE=»Листинг 2.21.htm» DATETIME=»2004-8-15»> ДОСТУПНЫЙ ФРАГМЕНТ </INS></BODY></HTML>

Данный тег появился в версии HTML 4 0 Он может быть элементом блочного либо текстового уровня Изменение вложенного блокового содержания должно выполняться на нижнем уровне

56     Урок 2. Текст

56      Урок 2. Текст Рис 2 24

Рис 2 24  Веб-страница, содержащая тег <INS>

Расстановка пробелов

Если набрать текст в Блокноте и расставить в нем множество пробелов, то браузер проигнорирует эти пробелы и сократит их до минимума, а если воспользоваться тегом <LISTING>, который выводит блок текста моноширинным шрифтом, то текст отразится таким, как он есть, со всеми пробелами и т д

Пример текста с множеством пробелов, окруженного тегами <LISTING> и </LISTING>, можно посмотреть на рис 2 25, а код программы — в листинге 2 25

а код программы — в листинге 2 25 Рис 2 25

Рис 2 25  Веб-страница, содержащая текст и теги <LISTING>

Листинг 2 25  Пример создания веб-страницы, содержащей текст и теги <LISTING>

<HTML><HEAD><TITLE>Цитата</TITLE></HEAD> <BODY BGCOLOR=BBCCFF> Реклама - одна из форм маркетинговых коммуникаций, Оплаченная рекламодателем, имеющая неличный характер, распространяемая через СМИ с целью оказать воздействие на целевую аудиторию. <LISTING> Существуют следующие виды рекламы:

товарная,

корпоративная,

социальная,

политическая.

</LISTING></BODY></HTML>

Подведем итоги    57

Подведем итоги

В этом уроке рассматриваются основные теги, предназначенные для работы с тек- стом Тег <Hx> предназначен для создания заголовков Теги <FONT>, <P>, <PRE>, <B>, <I>, <TT>, <STRONG>, <U>, <BIG>, <SMALL>, <STRIKE>, <SUB>, <SUP>, <BLOCKQUOTE>, <DFN>, <CITE>, <EM>, <CODE>, <KBD>, <VAR>, <SAMP>, <WBR>, <BASEFONT>, <DIV>, <SPAN>, <INS>, <Q>, <LISTING>, <S> позволяют форматировать текст, изменять его цвет, кра- сиво располагать на странице Для разрыва строк служат теги <BR> и <NOBR> Тег <ACRONYM> используется для создания всплывающих подсказок

Урок Урок 3 Графика
Урок Урок 3 Графика
Урок Урок 3 Графика

Урок Урок 3 Графика

Одна из наиболее привлекательных черт WWW — возможность вклю-WWW  — возможность вклю-— возможность вклю-

чения ссылок на графические файлы в HTML-документ. Графика — 

лучшее украшение веб-узла. Под графикой подразумевают значки, 

рисунки, фотографии и карты изображений, занимающие часть окна 

браузера.

При  размещении  графики  на  веб-странице  необходимо  следить  за  тем,  чтобы  размер  графических  файлов  был  как  можно  меньше.  Хотя в принципе размеры графических файлов в байтах могут быть 

неограниченными,  следует  помнить,  что  передача  большого  файла 

может занять очень много времени, особенно при низкой пропуск-

ной  способности  линий.  Если  тот,  кто  смотрит  вашу  веб-страницу,  платит деньги за время нахождения в Интернете, вряд ли он захочет  смотреть ваши следующие страницы, учитывая, что первая страница  загружается  очень  долго.  В  этом  уроке  будут  рассмотрены  приемы  работы с графикой.

Размещение графики на веб-странице    59

Размещение графики на веб-странице

Для вставки графики в веб-страницу используется тег <IMG> Графика позволяет значительно улучшить внешний вид и функциональность документов Тег <IMG> (от англ image — изображение) появился в HTML версии 2 0 Он имеет атрибуты SRC, ALT, LONGDESC, HEIGHT, WIDTH, USEMAP, ISMAP, ALIGN, BORDER, HSPACE, VSPACE Пример:

<img src="url" alt="текст" height="длина" width="длина" align=top|middle|bottom|left|right ismap>.

 Атрибут SRC Атрибут SRC (от англ source — источник) определяет местора- сположение изображения, включаемого в состав документа URL — обязатель- ный параметр, который указывает браузеру, где находится рисунок Рисунок должен храниться в графическом формате, например в формате GIF или JPG

Если графический файл находится в том же каталоге, что и содержащий его HTML-документ, достаточно указать только имя этого файла, например:

<img src=file1.gif>

Если графический файл находится на том же сервере, что и содержащий его HTML-документ, но в другом каталоге, следует указать имя каталога и имя этого файла, например:

<img src=picture/file1.gif>.

Если графический файл находится не на том сервере, на котором находится со- держащий его HTML-документ, необходимо указать полный адрес этого фай- ла, например:

<img src="http://www.uprint.ru/picture/file1.gif">.

 Атрибут ALT Необязательный атрибут ALT задает альтернативный текст, кото- рый выводится браузером, пока идет загрузка изображения (или браузером, не поддерживающим отображение графики) Обычно это короткое описание изо- бражения, которое пользователь мог бы или сможет увидеть на экране Если этот атрибут не задан, на месте изображения большинство браузеров выводят значок, щелкнув на котором, пользователь сможет увидеть изображение Атри- бут ALT рекомендуется указывать, если ваши пользователи применяют браузер, не поддерживающий графический режим, например Lunix

 Атрибут LONGDESC удаленный ресурс

 Атрибут HEIGTH Необязательный атрибут HEIGTH определяет высоту рисун- ка в пикселах Если данный параметр не указан, используется оригинальная высота рисунка Этот параметр позволяет сжимать или растягивать изображе- ния по вертикали, что дает возможность точнее контролировать внешний вид документа Однако некоторые браузеры не поддерживают данный параметр Иногда экранное разрешение на разных компьютерах может быть разным, по- этому при задании абсолютной величины графического объекта следует быть внимательным

 Атрибут WIDTH Необязательный атрибут, используется для указания шири- ны рисунка в пикселах

Необязательный атрибут  LONGDESC задает ссылку на

60     Урок 3. Графика

 Атрибут ALIGN Необязательный атрибут, используется для точного пози- ционирования объектов на экране Доступные значения:

‰ top — верхний край объекта выравнивается по верхнему краю строки;

‰ middle — центр объекта выравнивается по базовой линии строки;

‰ bottom — нижний край объекта выравнивается по базовой линии строки;

‰ left — объект выравнивается по левому краю, при этом возможно обтекание объекта текстом;

‰ right — объект выравнивается по правому краю, при этом возможно обтека- ние объекта текстом

Если данный параметр не указан, большинство браузеров располагает изобра- жение в левой части экрана, а текст — справа от него

 Атрибут BORDER Атрибут BORDER задает толщину обрамления для изобра- жения

 Атрибут VSPACE Атрибут VSPACE позволяет задать размер в пикселах пустого пространства над и под изображением, чтобы текст не «наезжал» на изображение

 Атрибут HSPACE Атрибут HSPACE позволяет задать размер в пикселах пустого пространства слева и справа от изображения, чтобы текст не «наезжал» на изо- бражение

Форматы графических файлов

Большинство форматов файлов в компьютерной графике позволяет хранить ин- формацию об изображении как о наборе точек Точно так же (в виде набора точек) изображения выводятся на экран

Обычно в Интернете используются два растровых формата — JPEG и GIF Кроме того, в Интернете довольно много изображений, имеющих форматы BMP и PCX Специалисты считают, что довольно большие перспективы есть у формата PNG — самого современного формата переносимой сетевой графики

Формат GIF

Формат GIF (Graphic Interchange Format — формат обмена графическими дан- ными) служит для записи и хранения растровых графических изображений Этот формат был разработан корпорацией Compuserve с использованием технологии Unisys Формат GIF применяется для хранения 256-цветных изображений (или изображений с меньшим количеством цветов), сжатых по методу Лемпела—Зива (LZW) Тот же метод сжатия характерен для архиваторов файлов

Формат GIF дольше других представлен в Интернете и поддерживается разными графическими редакторами В нем используются индексированные цвета Вер- сия GIF89a этого формата обеспечивает возможность чересстрочной разверт- ки, что позволяет постепенно повышать качество принятого через канал связи изображения Это самый распространенный формат изображений в Интернете

Форматы графических файлов    61

Изображения в формате GIF хранятся в файлах с расширением .gif К достоин- ствам GIF-изображений относится то, что вид изображения не зависит от браузе- ра и платформы Лучше всего отображаются чертежи, рисунки, изображения с не- большим количеством однородных цветов, прозрачные изображения и анимаци- онные последовательности В GIF-изображениях используется алгоритм сжатия без потери информации

Формат JPEG

Применяющийся в формате JPEG (Joint Photographic Expert Group — объеди- ненная группа экспертов в области фотографии) алгоритм обработки изображе- ний разработан группой экспертов как средство сжатия изображений с палитрой 24 бита на пиксел, что обеспечивает отображение 16,7 миллиона цветов

JPEG — один из самых мощных алгоритмов Практически он является стандар- том де-факто для полноцветных изображений Формат JPEG был создан для того, чтобы избавиться от недостатков формата GIF

Алгоритм оперирует областями 8×8 пикселов, в которых яркость и цвет плавно меняются Сжатие в формате JPEG осуществляется за счет того, что в реальных изображениях, в частности в фотографиях, цвет обычно меняется достаточно плавно Обеспечивается высокий коэффициент сжатия, значение которого дости- гает 100 и зависит от допустимого уровня потерь изобразительной информации

Формат широко используется в HTML-документах и для передачи графики по сети Сохраняет параметры графики в цветовой модели RGB Изображения в фор- мате JPEG хранятся в файлах с расширением .jpg

В формате JPEG используется алгоритмы сжатия с потерей информации При сжатии из изображения исключаются данные, которые считаются несуществен- ными При этом есть риск получить нечеткое, размытое изображение с искажени- ем деталей

Формат PNG

Последнее время получили распространение файлы в формате PNG (Portable Network Graphics — переносимая сетевая графика) Само название формата гово- рит о его назначении — использовании при передаче изображений в сетях Фор- мат поддерживает полноцветные RGB-изображения и индексированные изобра- жения Допускает наличие дополнительного канала для хранения маски обрезки Имеет эффективный алгоритм сжатия без потери информации

Формат BMP

Первым графическим форматом для IBM-совместимых компьютеров, нашед- шим широкое применение, был формат BMP (Bit Map — битовая карта) Можно сказать, что с него все началось В формате BMP первоначально использовалось простейшее кодирование — по пикселам (самое неэкономное) Пикселы обходи- лись последовательно по строкам, начиная с нижнего левого угла графического изображения Файл