Николай Кисленко Санкт-Петербург «БХВ-Петербург» 2008 УДК 681.3.06 ББК 32.973.26-018.2 К44 Кисленко Н. П. К44 HTML. Самое необходимое. — СПб.: БХВ-Петербург, 2008. — 352 с.: ил. + CD-ROM ISBN 978-5-9775-0169-9 Даны основы языка HTML. На практических примерах рассмотрены совре- менные технологии использования гипертекста, работа с текстовым содержимым Web-страниц, ссылками, списками, таблицами, графикой, формами, стилями, муль- тимедиа и другими элементами сайта. Уделено внимание интерактивным техноло- гиям HTML, приемам грамотной работы с содержимым и организации управле- ния интернет-проектом. Прилагаемый CD содержит более 100 примеров из книги, русскоязычную до- кументацию по HTML и стилевым таблицам, а также удобный в обращении элек- тронный справочник. Для широкого круга пользователей УДК 681.3.06 ББК 32.973.26-018.2 Группа подготовки издания: Главный редактор Екатерина Кондукова Зам. главного редактора Евгений Рыбаков Зав. редакцией Григорий Добин Редактор Леонид Кочин Компьютерная верстка Натальи Караваевой Корректор Виктория Пиотровская Дизайн серии Инны Тачиной Оформление обложки Елены Беляевой Зав. производством Николай Тверских Лицензия ИД № 02429 от 24.07.00. Подписано в печать 25.12.07. Формат 70 1001/16. Печать офсетная. Усл. печ. л. 28,38. Тираж 3000 экз. Заказ № "БХВ-Петербург", 194354, Санкт-Петербург, ул. Есенина, 5Б. Санитарно-эпидемиологическое заключение на продукцию № 77.99.02.953.Д.006421.11.04 от 11.11.2004 г. выдано Федеральной службой по надзору в сфере защиты прав потребителей и благополучия человека. Отпечатано с готовых диапозитивов в ГУП "Типография "Наука" 199034, Санкт-Петербург, 9 линия, 12 ISBN 978-5-9775-0169-9 © Кисленко Н. П., 2007 © Оформление, издательство "БХВ-Петербург", 2007 Îãëàâëåíèå Введение .................................................................................................................. 1 Зачем нужно изучать HTML? ................................................................................. 1 Для кого предназначена эта книга? ....................................................................... 3 Краткое содержание книги ..................................................................................... 4 ЧАСТЬ I. HTML В ИНТЕРНЕТ-ТЕХНОЛОГИЯХ ........................................ 7 Глава 1. HTML и Интернет ................................................................................. 9 1.1. Интернет-серверы и клиенты .......................................................................... 9 1.2. Прикладные протоколы, IP-адреса и доменные имена .............................. 11 1.3. WWW и Web-страницы ................................................................................. 15 1.4. Адреса URL ..................................................................................................... 16 1.5. Браузеры и совместимость Web-страниц ..................................................... 18 1.6. Надстройки и плагины ................................................................................... 25 Глава 2. HTML и программирование ............................................................. 27 2.1. Технологии и языки клиентского программирования ................................ 28 2.2. Технологии и языки серверного программирования .................................. 33 Глава 3. HTML и другие форматы .................................................................. 38 ЧАСТЬ II. СОЗДАНИЕ ЭЛЕКТРОННЫХ ДОКУМЕНТОВ СРЕДСТВАМИ HTML ................................................................... 49 Глава 4. Структура документа ......................................................................... 51 4.1. Тег и его структура ........................................................................................ 52 4.2. Общая структура документа ......................................................................... 53 4.3. Наш первый документ ................................................................................... 57 4.4. Метатеги и их назначение ............................................................................. 58 4.5. Теги для связи документов ............................................................................ 60 IV Îãëàâëåíèå Глава 5. Форматирование текста ..................................................................... 62 5.1. Абзацы, выравнивание, переносы ................................................................ 63 5.2. Физическое форматирование — шрифты и начертания ............................ 67 5.3. Логическое форматирование — расставляем акценты .............................. 72 5.4. Предварительно отформатированный текст ................................................ 75 5.5. Специальные символы ................................................................................... 75 5.6. Текстовые блоки и разделы ........................................................................... 77 5.7. Горизонтальные линии .................................................................................. 79 Глава 6. Гиперссылки — основа Web ............................................................. 80 6.1. Как устроена ссылка ...................................................................................... 80 6.2. Абсолютные и относительные ссылки......................................................... 82 6.3. Внешние и внутренние ссылки ..................................................................... 85 6.4. Ссылки на различные виды ресурсов ........................................................... 87 6.5. Организация навигации по сайту.................................................................. 89 6.6. Организация коллекций ссылок ................................................................... 93 Глава 7. Списки ................................................................................................... 97 7.1. Списки — инструмент структурирования информации............................. 97 7.2. Нумерованные, маркированные и многоуровневые списки ...................... 98 7.3. Списки определений и другие типы списков ............................................ 103 Глава 8. Таблицы — основной инструмент Web-дизайнера .................... 106 8.1. Общие принципы табличного представления информации .................... 106 8.2. Возможности таблиц. Все о теге <tablе> .................................................. 108 8.3. Вложение таблиц .......................................................................................... 125 8.4. Организация блоков на сайте с помощью таблиц ..................................... 128 8.5. Программное обеспечение для проектирования Web-страниц ............... 134 Глава 9. Цвета и управление ими .................................................................. 138 9.1. Представление цветов в HTML .................................................................. 138 9.2. Основной цветовой набор документа ........................................................ 141 9.3. Изменение цвета шрифта ............................................................................ 142 9.4. Изменение цвета в ячейках таблицы .......................................................... 144 9.5. Создание цветовой модели сайта ............................................................... 145 Глава 10. Графика ............................................................................................. 148 10.1. Общие принципы работы с графикой ...................................................... 148 10.2. Графические форматы Интернета ............................................................ 153 10.3. Вставляем картинки или все о теге <img> .............................................. 156 Îãëàâëåíèå V 10.4. Использование фоновых рисунков ........................................................... 163 10.5. Графические средства навигации ............................................................. 165 10.6. Организация коллекций картинок ............................................................ 168 10.7. Организация блоков с использованием графики .................................... 171 10.8. Программное обеспечение для работы с графикой ................................ 174 Глава 11. Картированные изображения ....................................................... 177 11.1. Преимущества и недостатки картирования ............................................. 177 11.2. Конфигурация клиентского изображения-карты .................................... 178 Глава 12. Фреймы ............................................................................................. 183 12.1. Применение фреймов: за и против ........................................................... 183 12.2. Описание коллекций фреймов .................................................................. 185 12.3. Связь между фреймами и навигация с их помощью .............................. 190 12.4. Плавающие фреймы ................................................................................... 192 12.5. Программное обеспечение для работы с фреймами ............................... 194 ЧАСТЬ III. РАЗРАБОТКА ИНТЕРАКТИВНЫХ ДОКУМЕНТОВ СРЕДСТВАМИ HTML................................................................ 195 Глава 13. Формы: создаем обратную связь .................................................. 197 13.1. Область применения форм ........................................................................ 197 13.2. Теги для организации форм ...................................................................... 198 13.3. Отправка данных по электронной почте и внешнему приложению ........ 207 13.4. Дизайн форм ............................................................................................... 212 Глава 14. Таблицы стилей — управляем сайтом легко ............................ 213 14.1. Общие свойства таблиц стилей................................................................. 213 14.2. Способы определения стилей ................................................................... 215 14.3. Виды селекторов. Определение классов .................................................. 217 14.4. Свойства шрифта, текста и цветов ........................................................... 225 14.5. Свойства заполнителей, границ и рамок .................................................. 231 14.6. Позиционирование элементов .................................................................. 235 14.7. DHTML и создание визуальных эффектов .............................................. 240 Глава 15. Мультимедиа и внешнее содержимое ......................................... 243 15.1. Тег <object> ................................................................................................ 243 15.2. Подключение звуковых файлов ................................................................ 247 15.3. Подключение видео ................................................................................... 251 15.4. Использование скриптов ........................................................................... 254 VI Îãëàâëåíèå 15.5. Внешние баннеры и информеры............................................................... 258 15.6. Использование Java-апплетов ................................................................... 260 15.7. Использование технологии Macromedia Flash ........................................ 263 15.8. Программное обеспечение для работы с мультимедиа .......................... 265 ЧАСТЬ IV. ОТ HTML К САЙТУ.................................................................... 267 Глава 16. Делаем сайт правильно .................................................................. 269 16.1. Прежде чем делать сайт ............................................................................. 269 16.2. Управление структурой сайта и оптимизация HTML-кода ................... 272 16.3. Выбор хостинга .......................................................................................... 278 16.4. Поисковые системы и ранжирование результатов поиска ..................... 281 16.5. Внешние ссылки и увеличение ссылочной популярности ..................... 285 Глава 17. Как делать не нужно? ..................................................................... 290 17.1. Ошибки структуры сайта........................................................................... 290 17.2. "Неправильное" содержимое .................................................................... 293 17.3. Ошибки при работе с графикой ................................................................ 294 17.4. Средства для проверки сайта .................................................................... 296 ПРИЛОЖЕНИЯ ................................................................................................ 299 Приложение 1. Краткий справочник по тегам HTML .............................. 301 Приложение 2. Основные специальные символы HTML ......................... 329 Приложение 3. Названия и коды цветов в HTML ...................................... 336 Приложение 4. Полезные ссылки Интернета .............................................. 339 Русскоязычные ресурсы ..................................................................................... 339 Англоязычные ресурсы ...................................................................................... 340 Приложение 5. Описание компакт-диска ..................................................... 341 Предметный указатель .................................................................................... 343 Введение Зачем нужно изучать HTML? Эта книга предназначена для изучения формата разметки гипертекста HTML (HyperText Markup Language) — основного "языка Интернета", на котором написано и пишется большинство имеющихся в Сети страниц. Возможно, вы уже ответили для себя на вопрос, вынесенный в заголовок, но книге полага- ется иметь введение, и я скажу в нем самое необходимое. "HTML устарел, и знать его не нужно, как не нужно знать кодировки симво- лов для чтения текста с экрана" — автору приходилось слышать и такое мне- ние. Однако мы собираемся не читать, а писать Web-странички, и без знания HTML — главной "кодировки" всемирной Сети — нам не обойтись. Я уверен, что, несмотря на обилие программ для разработки сайтов, совре- менному человеку знать основы HTML так же естественно, как уметь поль- зоваться мобильным телефоном. Давайте подумаем почему. (cid:2) HTML обеспечивает компактность и гибкость кода. Визуальный редактор, такой, как всем известный Microsoft Word, стремится сохранить внешний вид разработанной в нем Web-страницы неизменным, используя для этого все мощные средства стилевого форматирования (с ними мы познакомим- ся в главе 14). Между тем, HTML создавался с противоположной целью — сохраняя логику, связи и структуру документа, дать пользователю воз- можность самому настроить удобный для себя вид, масштаб и способ просмотра. Кроме того, объем Web-страницы, созданной в визуальном ре- дакторе, будет всегда в десятки раз больше, чем страницы с теми же воз- можностями, но написанной "вручную". (cid:2) Стремительно происходящая "мобилизация" Интернета — также аргумент в пользу изучения HTML. Все больше карманных компьютеров, коммуни- каторов, смартфонов и даже просто "мобильников" имеют встроенный 2 Введение браузер и поддерживают просмотр Web-страниц. Возможности этих уст- ройств пока слишком слабы для полноценного просмотра огромных фай- лов, созданных в визуальном редакторе, но они вполне достаточны для за- грузки компактного, сделанного "вручную" HTML-кода. (cid:2) HTML не устаревает, а постоянно развивается. Несмотря на то, что дейст- вующему стандарту HTML 4.01 уже около 10 лет, организация World Wide Web Consortium в 2007 году опубликовала проект новой, пятой версии стандарта, в которой HTML станет еще логичнее, удобнее и компактнее. (cid:2) HTML прост и эффективен. Несмотря на сегодняшнее обилие языков раз- метки, в котором мы попытаемся разобраться в главе 3, несмотря на то, что вычислительные мощности, пропускная способность сетей и возмож- ности интернет-технологий, растут не по дням, а по часам, новые стандар- ты никак не вытеснят классического языка HTML. Все дело в том, что HTML можно изучить и успешно использовать, ничего не зная про "объ- ектную модель документа", "идентификаторы классов" и прочие мало понятные неспециалисту вещи. Новые, значительно "усиленные" стандар- ты разметки обеспечивают гораздо бóльшую свободу обращения с Web- страницей — увы, ценой простоты ее устройства, независимости от про- граммно-аппаратных средств и гибкости настроек просмотра под нужды пользователя. А сила HTML — именно в указанных факторах. Обычного HTML оказывается достаточно для решения большинства задач, связан- ных с размещением информации в Интернете, и именно это слово "доста- точно" все объясняет. И хотя мы часто будем называть получаемый нами продукт "HTML-кодом", на самом деле никакого "кодирования" здесь нет. HTML — простой тексто- вый формат, и это одно из главных его достоинств. Для работы с HTML и получения великолепных результатов достаточно обычного Блокнота Windows и имеющегося под рукой браузера. С другой стороны, автор не станет утверждать, что альтернатив "ручной ра- боте" нет совсем. В этой книге мы дадим краткий обзор программ, полностью или частично берущих на себя труд по верстке HTML, оценим их возможности, достоинст- ва и недостатки. Но главное следует сказать уже сейчас — там, где можно сэкономить время на ручном прописывании команд в огромном тексте, про- граммы верстки HTML оказываются полезными и даже незаменимыми. Там же, где дело касается написания компактного, логически продуманного и "всюду работающего" кода Web-страницы, ничто пока не заменит качест- венной ручной работы. Да и готовые Web-страницы, встречающиеся вам, не- редко нуждаются в правке, выполнить которую без знания HTML нельзя. Введение 3 Следует избегать любого "фанатизма" и выбирать оптимальный способ — вот, пожалуй, наиболее здравая позиция. Таким образом, HTML — прекрасный и, главное, доступный инструмент для реализации ваших творческих идей. Прочитав эту книгу, вы научитесь созда- вать Web-страницы и грамотно управлять их содержимым без больших за- трат времени и изучения новых программ. Вы сможете добавить на свою страничку звук или видео, сделать на ней форму для "обратной связи" с поль- зователем, изготовить красивую графическую карту сайта и легко управлять его содержимым с помощью каскадных таблиц стилей CSS. Для кого предназначена эта книга? Сегодня все реже можно встретить человека, не видевшего персонального компьютера и ничего не слышавшего о Windows. Даже если ваш пользова- тельский опыт невелик — смело беритесь за изучение этой книги. Для рабо- ты с ней достаточно простейших навыков обращения с компьютером. Изло- жение материала ведется последовательно "от простого к сложному", так же шаг за шагом вам следует изучать книгу, если вы — новичок. Выполнение в браузере всех примеров с прилагаемого компакт-диска поможет вам быстро повысить свой уровень и почувствовать себя уверенней. Книга будет полезна и более "продвинутым" пользователям, уже имеющим опыт создания или поддержки собственных Web-страниц. Удобные таблицы тегов и многочисленные примеры практически важных элементов сайта, краткий справочник по возможностям HTML, приведенный в приложении 1, сводки цветов и специальных символов языка, коллекция страничек на при- лагаемом компакт-диске помогут вам систематизировать и углубить свои знания. Полезной для вас будет и часть IV, описывающая общие принципы создания сайта и управления им. Не правда ли скучно, когда в Сети существует множество однообразных сай- тов, сделанных на основе двух десятков популярных систем управления со- держимым? Сегодня зачастую дело обстоит именно так, и только освоение HTML как можно бóльшим числом специалистов может изменить ситуацию к лучшему. Кроме того, работа с развитыми системами управления сайтом обычно пред- полагает наличие HTML в текстах статей, помещаемых системой на Web-страницы. Поэтому глубокое знание принципов HTML даст вам допол- нительное преимущество и в развитии сайта, работающего на "движке" (так называют в обиходе системы управления сайтом, обычно написанные на языке программирования PHP с помощью баз данных MySQL).