Сетевая библиотекаСетевая библиотека
HTML: Популярный самоучитель Александр Анатольевич Чиртик В книге кратко и просто описывается язык HTML. Прочитав ее, вы научитесь создавать собственные веб-страницы, причем не только простые, но и содержащие таблицы, видео и звук. Более гибко оформить веб-страницы вам поможет рассмотренная в книге технология CSS. А при желании вы сможете сделать веб-страницы динамичными с помощью сценариев JavaScript: описание этого языка вместе с кратким описанием DOM (объектной модели документа) также приведено в этой книге. В последних главах рассматривается пример создания небольшого сайта с использованием всех рассмотренных в книге технологий, а также освещаются основные вопросы публикации сайта в сети Интернет. Приведенные в книге коды можно найти на сайте www.piter.com (http://www.piter.com/). Александр Анатольевич Чиртик HTML: Популярный самоучитель Введение Путешествуя по просторам Всемирной паутины, можно обратить внимание, как различаются между собой оформление и возможности веб-страниц. Однако не каждый пользователь знает, что почти все это разнообразие реализовано на основе одного средства разметки текста – HTML. Язык разметки гипертекста HTML – стандартное средство представления информации в среде World Wide Web (WWW) в виде веб-страниц. Поскольку HTML является стандартизированным языком разметки, документы, написанные с его использованием, можно легко просматривать и редактировать на компьютерах с различным программным и аппаратным обеспечением. Cуществует большое количество графических сред, предназначенных для быстрой и качественной разработки веб-сайтов. Тем не менее одной из замечательных особенностей HTML является то, что полноценные веб-страницы можно создавать, имея под рукой лишь простейший текстовый редактор. Создание веб-страниц с использованием HTML и CSS или JavaScript – уже не простое форматирование текста, а интересное занятие, очень похоже на программирование. Большая часть представленной вашему вниманию книги посвящается именно HTML. В девяти первых главах последовательно изложен материал, в котором рассмотрены практически все возможности «чистого» языка HTML. После изучения этого материала вы научитесь создавать не только простые страницы, но и достаточно сложные сайты, а также познакомитесь со средствами HTML, позволяющими без привлечения дополнительных средств и технологий (например, CSS, DHTML) создавать привлекательный и функциональный интерфейс своих веб-страниц. Последние главы книги посвящены двум более новым технологиям, дополняющим HTML и позволяющим разнообразить и «оживить» статичные по своей природе HTML-документы, – CSS (каскадные таблицы стилей) и DHTML (динамический HTML) с основами DOM (объектной модели документа). В книге также приведен небольшой пример создания сайта целиком и освещены основные вопросы публикации созданного сайта в Интернете. Большинство примеров, приведенных в книге, достаточно просты, чтобы можно было легко понять, какие именно их части относятся к рассматриваемой теме. При желании тексты примеров можно дополнить самостоятельно, тем более что экспериментирование – это наилучший способ узнать и запомнить как можно больше полезной информации. Тексты программ на сайте издательства Тексты программ (листинги), приведенные в книге, вы можете скачать с сайта издательства по адресу http://www.piter.com/download (http://www.piter.com/download). От издательства Ваши замечания, предложения, вопросы отправляйте по следуюшему адресу электронной почты: gurski@minsk.piter.com (mailto:gurski@minsk.piter.com) (издательство «Питер», компьютерная редакция). На сайте издательства http://www.piter.com (http://www.piter.com/) вы найдете подробную информацию о наших книгах. Глава 1 Введение в HTML Итак, почему же HTML так широко распространен и используется для публикации информации в сети Интернет? Своей популярностью HTML во многом обязан удобству навигации между документами и простоте создания самих HTML-документов. Так, нажимая кнопку мыши над участком текста или изображением, можно открывать документы, расположенные в различных частях света на компьютерах с различными операционными системами. Сеть из связанных между собой гипертекстовых документов является прозрачной для пользователя. Поэтому при работе с ней вас совершенно не заботят операции, которые осуществляются сотнями устройств глобальной компьютерной сети только для того, чтобы доставить на ваш компьютер содержимое HTML-документа. 1.1. Краткая история HTML Началось все для HTML (а вместе с ним и для WWW) в конце 1980-х годов, когда у ученых из Европейской лаборатории элементарных частиц (CERN) возникла необходимость обмениваться множеством различных документов при помощи быстро развивающейся сети Интернет. Тогда необходимо было придумать способ публикации документов в сети таким образом, чтобы к любому нужному документу можно было легко получить доступ. К тому же нужно было, чтобы документы отображались на всех компьютерах одинаковым образом. Решение поставленной задачи было найдено сотрудником CERN Бернерс-Ли. В 1989 году Тим Бернерс-Ли создал новый язык форматирования документов. В его основу был положен другой ранее созданный язык – SGML, который предусматривал установку связей между документами с помощью гиперссылок. Новый язык разметки был назван HTML (HyperText Markup Language). Этот же человек реализовал и первую программу для просмотра HTML-документов – браузер. Затея с гипертекстом очень быстро прижилась. Вскоре в Интернете выросла большая сеть гипертекстовых документов, которую постепенно стали называть World Wide Web. К тому же в 1993 году команда программистов, руководителем которой являлся основатель компании Netscape Марк Андриессен, разработала первый браузер, имеющий полноценный графический интерфейс и позволяющий работать с мышью, – Mosaic. Это не могло не добавить популярности быстро развивающейся Сети. Со временем Интернет стал востребован не только учеными: к нему пришли и рядовые пользователи, причем их число неуклонно возрастало. Для многих было очевидно, что HTML, не предполагающий никакой динамики в создаваемых с его помощью документах, достаточно скучен и невзрачен. Это дало толчок развитию технологий CSS, введению поддержки апплетов Java, а после и сценариев (первым языком был JavaScript). Нельзя не отметить, что с образованием и ростом Сети создателей HTML не на шутку взволновала «чистота» своего детища. Существовали небезосновательные опасения, что производители браузеров, которые скоро должны были прийти на рынок, будут «баловать» своих пользователей фирменными нововведениями, которые, естественно, будут поддерживаться только фирменными браузерами. В 1994 году была создана организация, взявшая на себя разработку единых стандартов развития WWW – World Wide Web Consortium (W3C). Эта организация и занялась подготовкой стандартов HTML (начиная с HTML 2.0). Правда, несмотря на наличие W3C, нововведения в HTML начинали поддерживаться производителями браузеров гораздо раньше, чем эта организация их стандартизировала (так, например, обстояло дело с фреймами, с внедрением сценариев в HTML-документы, с объектной моделью документов и т. д.). Организация W3C существует и сейчас. Она занимается теми же вопросами стандартизации, однако уже давно не HTML (последняя спецификация HTML 4.01 была принята 24 декабря 1999 года). Развитие языка HTML сегодня практически завершено, а основные усилия W3C сконцентрированы на работе над более новыми технологиями, например расширяемым языком разметки XML, языком преобразований XSLT и др. (если интересно, можно заглянуть на www.w3.org (http://www.w3.org/) – официальный сайт этой организации). Язык HTML в том виде, в котором он существует сейчас, обладает большим потенциалом представления информации. Причем он рассчитан не только на пользователей персональных компьютеров. Документы HTML можно просматривать на очень большом количестве различных по своим возможностям устройств: от черно-белого экрана мобильного телефона до телетайпа или терминала. Кроме того, в последние версии HTML включен ряд возможностей, облегчающих представление документов неграфическими средствами (например, речевыми синтезаторами), позволяющими пользоваться услугами WWW людям с физическими недостатками. 1.2. Базовые понятия HTML После маленького исторического экскурса можно наконец-то перейти к практической части. Перед подробным рассмотрением HTML нужно ознакомиться с основными понятиями, используемыми в книге, а также с базовыми элементами языка HTML. Для начала следует разобраться с тем, что такое HTML-документ. HTML-документ – это обычный текстовый документ, созданный в любом текстовом редакторе, например в Блокноте, и оформленный в соответствии с правилами языка HTML. Для файлов, содержащих HTML-документы, используется расширение HTML или HTM (например, MyWedPage.html или MyWedPage.htm). Расширение HTM использовалось ранее для корректного отображения имен файлов в формате MS-DOS. На самом деле неважно, какое из приведенных расширений использовать. Далее в книге HTML-документы могут называться просто документами, а также страницами и веб-страницами. Под сайтами в тексте книги подразумевается несколько документов, объединенных единой системой навигации. Элементы Элемент – это конструкция языка HTML, содержащая данные. HTML включает в себя различные типы элементов, которые позволяют задавать абзацы, гипертекстовые ссылки, списки, таблицы, изображения и т. д. Конструкция

Привет !

представляет собой элемент. Обычно элемент можно разделить на три части. Первая часть –

 – называется открывающим тегом (англ. tag). Далее идет содержание элемента, которое в данном случае состоит из слова Привет !. И наконец,

является закрывающим тегом. Как видно, название элемента (P) присутствует и в открывающем, и в закрывающем теге. Регистр символов в названии элемента не имеет значения. Однако в соответствии с соглашениями, принятыми большинством разработчиков, в примерах данной книги названия элементов записаны в верхнем регистре. Открывающий и закрывающий теги нужны для указания начала и конца элемента. Теги всегда начинаются символом < и заканчиваются символом >. В закрывающем теге перед его именем помещается символ /. Для некоторых типов элементов допускается отсутствие закрывающего тега (например, элемент P, указывающий начало абзаца). Существуют также элементы, не имеющие закрывающего тега, то есть его не просто можно опустить, а он вообще не существует в языке. Атрибуты Элементы могут содержать параметры, называемые атрибутами. Атрибуты могут иметь определенные значения (по умолчанию или устанавливаемые авторами). Пара атрибут/значение указывается в начальном теге элемента перед символом >, например: Каждому атрибуту может быть присвоено значение определенного типа. В приведенном примере указание атрибута bgcolor (имеющего тип %Color) в элементе BODY приведет к тому, что цвет фона страницы станет красным. Значения атрибутов заключаются в кавычки, хотя в определенных случаях кавычки необязательны. В начальном теге элемента может быть указано любое количество допустимых пар атрибут/значение, разделенных пробелами, например: В приведенном примере устанавливаются красный цвет фона страницы и синий цвет основного текста. При установке значений нескольких атрибутов порядок их записи не имеет значения. Важно отметить, что регистр, в котором записываются названия атрибутов, также не имеет значения. Однако для повышения читабельности HTML-кода названия атрибутов обычно записываются в нижнем регистре (как в приведенных выше и ниже примерах). Существует любопытная разновидность атрибутов – булевы атрибуты. Для них возможны только два значения: ИСТИНА и ЛОЖЬ. По умолчанию эти атрибуты имеют значение ЛОЖЬ. Чтобы присвоить им истинное значение, достаточно просто указать имя этого атрибута, не присваивая ему никакого значения. Ниже приведен пример, в котором устанавливаются истинные значения двух атрибутов HTML-элемента INPUT: Вложенные элементы Важным моментом HTML является возможность использования вложенных элементов. Элемент, находящийся внутри другого элемента, называется вложенным. Пример использования вложенных элементов для задания начертания шрифта: Курсив-Полужирный курсив-Курсив При обработке приведенного HTML-кода получится страница, показанная на рис. 1.1 (как и чем обрабатываются HTML-документы, будет рассказано далее). Рис. 1.1. Применение вложенных элементов На приведенном рисунке видно, как действие внешнего (или родительского) элемента I (задание курсива) дополняет действие внутреннего элемента B (задание полужирного начертания шрифта). При использовании вложенности следует помнить, что вложенные элементы должны закрываться до того, как будут закрыты внешние элементы. Так, следующий пример является неверным: Неправильное закрытие внутреннего элемента до закрытия внешнего Блочные и встроенные элементы Различают также блочные и встроенные элементы (иногда их называют элементами уровня блока и элементами уровня текста). Основным отличием блочных элементов является форматирование их браузером как обособленной части документа. Блочные элементы задаются парными тегами и могут содержать вложенные блочные или встроенные элементы и, естественно, текст. Встроенные элементы обычно находятся прямо в тексте и могут иметь содержимое или не иметь его. Примерами встроенных элементов могут служить приведенные ранее элементы B и I, а также элементы перевода строки, изображения и т. д. В отличие от блочных элементов, встроенные элементы могут содержать только текст или вложенные встроенные элементы. 1.3. Просмотр HTML-документа Сам по себе HTML-документ практически нечитабелен для обычного пользователя. Для чего же тогда применяется форматирование документа с использованием HTML? Для просмотра HTML-документов используются специальные программы – браузеры. При открытии HTML-документа браузер распознает теги и учитывает их при отображении текста. Если по каким-то причинам (например, при ошибке в записи тега) тег не распознается браузером, то он игнорируется. Существует большое количество программ, позволяющих просматривать HTML-документы. Это такие распространенные приложения, как Internet Explorer, Opera, Firefox, Netscape Navigator. Ниже приведен пример простого HTML-документа (назначение используемых элементов будет рассмотрено далее в книге) (пример 1.1). Пример 1.1. HTML-документ Простой HTML-документ

Заголовок

Текст страницы Этот HTML-документ отображается браузером Internet Explorer так, как показано на рис. 1.2. Рис. 1.2. Отображение HTML-документа 1.4. Универсальный идентификатор ресурса URI Чтобы полностью понимать, как происходит взаимодействие HTML-документов, переход между страницами и откуда вообще компьютер пользователя получает данные при работе с сетью, нужно рассмотреть, как и к чему осуществляется доступ при помощи Глобальной сети. Многие виды ресурсов, размещенных в Интернете, независимо от того, являются ли они HTML-документами, рисунками или файлами архива, чаще всего представляют собой файлы на жестком диске компьютера (сервера), подключенного к сети. С каждым ресурсом сопоставляется значение, по которому можно однозначно определить его расположение, – универсальный идентификатор ресурса или URI (Universal Resource Identifier). URI широко используются как при самостоятельном доступе пользователя к ресурсу (когда, например, пользователь сам вводит URI в адресной строке браузера), так и при переходе между веб-страницами. URI также используются в HTML-документе для указания браузеру, где искать ресурсы (например, рисунки), используемые в самом документе. Примечание В литературе также часто применяется обозначение URL. Следует отметить, что URI является более общим понятием, включающим в себя URL: любой URL является универсальным идентификатором ресурса и подчиняется тем же правилам, что и URI. Идентификатор ресурса URI состоит из трех частей: из наименования механизма доступа к ресурсу, доменного имени компьютера и пути файла ресурса. Для пояснения сказанного можно рассмотреть пример: http://www.somesite.com/info/examples/ex_1.html (http://www.somesite.com/info/examples/ex_1.html) Здесь можно увидеть, что для доступа к ресурсу, которым в данном случае является HTML-документ, используется протокол HTTP (Hyper Text Transfer Protocol). Ресурс хранится на компьютере, имеющем доменное имя somesite.com в файле ex_1.html, расположенном в папке /info/examples. При помощи URI можно также ссылаться на части HTML-документов, например: http://www.somesite.com/info/examples/ex_1.html#description (http://www.somesite.com/info/examples/ex_1.html#description) При использовании этого URI можно получить доступ к части HTML-документа, имеющей имя description (то, как создавать имена для фрагментов HTML-документов, будет рассмотрено в гл. 5). URI также позволяют ссылаться на ресурсы в пределах одного компьютера. При этом указывается относительный путь ресурса. Например, чтобы из HTML-документа, расположенного в папке /info/examples, сослаться на файл /info/files/file1.jpg, достаточно задать URI /files/file1.jpg. В HTML-документах при помощи подобных ссылок указываются пути рисунков и других объектов, используемых в документах, но непосредственно не хранимых в них. В общем случае URI считаются нечувствительными к регистру символов. Однако для полной уверенности в правильности интерпретации URI все же обращайте внимание на регистр символов в URI гиперссылок, рисунков и т. д. Это полезно для устранения таких ситуаций, когда, например, при работе сайта на компьютере под Windows все гиперссылки работают, а при помещении сайта на UNIX-сервер работать отказываются (в UNIX имена файлов чувствительны к регистру). Глава 2 Структура HTML-документа В идеальном случае HTML-документ состоит из трех частей, в которых описывается следующая информация: • данные о версии используемого HTML; • заголовок документа; • тело документа. Выражение «в идеальном случае» означает то, что один или несколько элементов могут пропускаться: если HTML-документ содержит хоть какой-то текст, пусть без информации о версии, без заголовка и без явного указания тела документа, то браузер все равно отобразит информацию, содержащуюся в этом документе, при этом применяя к тексту еще и форматирование. Правда, в этом случае заведомо неизвестно, насколько исказится содержимое документа. Итак, полноценный (полный, стандартный) HTML-документ должен содержать все три указанные элемента структуры или хотя бы два последних элемента. Далее приводится пример простейшего HTML-документа, содержащего все указанные структурные элементы (пример 2.1). Пример 2.1. Задание структуры HTML-документа HTML-документ

Заголовок

Первый абзац

Второй абзац 2.1. Информация о версии HTML Первая строка HTML-документа содержит информацию об используемой версии языка HTML: 2.0, 3.0, 3.2, 4.0 и 4.01 (используется в данной книге). Здесь же задается, какое определение типа документа (DTD) должен использовать браузер при интерпретации содержимого документа. Для указания версии при использовании HTML 4.01 можно использовать одно из следующих определений типа документа: •  – использовать строгое определение HTML версии 4.01, в которое не включаются нежелательные для версии 4.01 элементы и атрибуты, а также фреймы; •  – применять переходное определение HTML версии 4.01, в которое включаются нежелательные для версии 4.01 элементы и атрибуты; •  – использовать определение HTML версии 4.01, в которое включаются нежелательные для версии 4.01 элементы и атрибуты, а также фреймы. В информации о версии языка также можно указать URI, откуда браузер может загрузить последнюю версию файла с DTD-определением используемой версии HTML. Для трех указанных выше вариантов определений URI следующие (в том же порядке): • http://www.w3.org/TR/html4/strict.dtd (http://www.w3.org/TR/html4/strict.dtd); • http://www.w3.org/TR/html4/loose.dtd (http://www.w3.org/TR/html4/loose.dtd); • http://www.w3.org/TR/html4/frameset.dtd (http://www.w3.org/TR/html4/frameset.dtd). Пример использования одного из приведенных URI: Информация о версии HTML, безусловно, должна использоваться при профессиональной разработке HTML-документов. Далее будет рассказано еще об одном способе задания версии HTML, который является нежелательным с точки зрения использования чистого языка HTML 4.01, но все же имеет место. В большинстве примеров данной книги версия HTML вообще не указывается для того, чтобы не загромождать HTML-код строками, не относящимися к рассматриваемым примерам. Однако при создании документов, предназначенных для публикации в Интернете, следует обязательно позаботиться о включении определения версии HTML в документ, особенно если в нем используются сценарии (будут рассмотрены в гл. 12 и 13). 2.2. Элемент HTML Корневым элементом структуры HTML-документа является одноименный элемент HTML. Его использование позволяет явно указать браузеру, что им обрабатывается HTML-код. Элемент HTML содержит в себе все остальные структурные части HTML-документа, например HEAD и BODY, и задается при помощи парных тегов и . Все, что находится между этими тегами, – есть HTML-документ. Теги и являются необязательными. В открывающем теге можно задать используемую версию HTML при помощи атрибута version. Например, при использовании HTML 4.01 можно написать так: Это и есть второй вариант задания версии HTML. Правда, при использовании объявления типа документа задание версии в элементе HTML является излишним. На текущем этапе изучения HTML не стоит особо волноваться о том, правильно ли вы указываете версию HTML, ведь HTML-документы нормально отображаются большинством современных браузеров без всякого указания версии HTML, также как и без указания атрибутов, которые все-таки необходимо рассмотреть. В элементе HTML можно также задать основной язык документа (атрибут lang) и направления текста (атрибут dir). Атрибут dir может принимать одно из двух значений: RTL или LTR (задают направление текста справа налево или слева направо соответственно). Для указания языка в атрибуте lang используется сокращенное стандартное обозначение языка, например: "ru", "en", "de" и т. д. Ниже приведены примеры задания языка и направления текста: Задавать атрибуты lang и dir совершенно не обязательно. Они доступны для большинства HTML-элементов (не поддерживаются только для элементов APPLET, BASE, BASEFONT, BR, FRAME, FRAMESET, IFRAME, PARAM, SCRIPT). Теперь, наконец, можно рассмотреть, как задаются наиболее важные элементы HTML-документа – заголовок и тело документа. 2.3. Заголовок В заголовке (его еще называют «шапкой») HTML-документа содержатся сведения о документе: название (тема документа), ключевые слова (используются поисковыми системами), а также ряд других данных, которые не являются содержимым документа. Элемент HEAD Заголовок HTML-документа содержится в элементе HEAD. Для задания этого элемента используются парные теги и . Все, что находится между двумя указанными тегами, относится к заголовку HTML-документа. Теги и не являются обязательными, но все же лучше их указывать, чтобы можно было легко определить, что именно относится к заголовку HTML-документа (браузер определит это автоматически, независимо от наличия тегов и ). В простых примерах книги элемент HEAD опускается, если заголовок документа содержит только элемент TITLE (информация об этом элементе приведена далее). Рассматриваемые далее элементы TITLE и META являются информативными элементами заголовка HTML-документа. Они определяются внутри элемента HEAD (между его тегами). Элемент TITLE В самом простом случае в заголовке документа содержится только один элемент – TITLE. Он используется для задания названия HTML-документа. Этот элемент задается при помощи парных тегов и , причем только один раз. Текст, находящийся между приведенными тегами, воспринимается и отображается браузерами (и поисковыми системами) как название документа. К тексту названия нельзя (бессмысленно) применять форматирование. Название документа должно быть кратким, но информативным и должно адекватно отражать содержание документа, например: Программирование на Java. Введение Операторы языка C++ Использование тегов и является обязательным. Правда, браузер (например, Internet Explorer) обработает документ и без этих тегов. Но ведь при публикации документов в Интернете документы надо как-то обозначить, чтобы пользователь знал, имеет ли документ отношение к нужной ему теме. Элемент BASE Элемент BASE, появляющийся в заголовке HTML-документа, позволяет задать базовый URI, относительно которого разрешаются все относительные URI в документе. Элемент BASE задается одиночным тегом . Его атрибуту href присваивается URI, который будет считаться базовым для HTML-документа, например: При таком использовании элемента BASE, где бы ни был расположен открытый HTML-документ, рисунок, задаваемый элементом IMG, будет загружаться из файла D:\test\image.gif. Метаданные В заголовке документа помещаются также некоторые важные данные, используемые браузерами и поисковыми системами, но в большинстве случаев не отображаемые, – метаданные. Задание метаданных представлено как задание значений переменным (иногда говорят про задание значений свойствам), имеющим определенные имена, осуществляемое с помощью HTML-элемента META (элемент задается одиночным тегом ). При использовании элемента META обычно задают значения следующих атрибутов: • name – имя переменной (значения чувствительны к регистру символов, по крайней мере, официально); • content – значение переменной; • lang – код языка, для которого действительно значение переменной; может быть задано несколько значений одной переменной для разных языков; • http-equiv – применяется для указания браузеру дополнительных параметров по обработке HTML-документа, значением атрибута является название параметра (в отличие от name, значения не чувствительны к регистру символов). Перечисленные атрибуты обычно используются парами: name и content или http-equiv и content. Атрибут lang применяется, если дополнительно нужно указать значения атрибутов для различных языков. Сначала будет рассмотрено использование пары name и content. Эта пара атрибутов позволяет задавать значения переменным, которые часто, но не всегда используются поисковыми системами и другими сервисами Интернета: описание и авторство документа, ключевые слова и еще много информации. В табл. 2.1 приведены основные значения атрибута name, а также дана расшифровка возможных значений атрибута content в каждом случае. Таблица 2.1. Значения атрибута name и соответствующие значения атрибута content На практике полезным оказывается задание переменной, содержащей список ключевых слов. Ведь именно этот список воспринимается поисковыми системами при поиске по запросу пользователя. По этой причине перед публикацией ваших творений в Интернете позаботьтесь о том, чтобы список состоял из слов, наиболее часто используемых (или очевидных) при запросах на тему, соответствующую или близкую теме вашего документа. При создании списка ключевых слов крайне удобно использование атрибута lang для указания различных наборов ключевых слов на различных языках (и для различных языков поиска). Например, как в следующем случае: Обычный неформатированный текст должен отображаться черным цветом

Непосещенная гиперссылка (голубой цвет)

Посещенная гиперссылка (синий цвет)

Выделенная гиперссылка (темно-синий цвет) После обработки приведенного примера браузером получится документ, который показан на рис. 2.1. Рис. 2.1. Результат обработки HTML-текста примера В данном примере использовался неформатированный текст. Но HTML на то и HTML, чтобы всячески способствовать улучшению восприятия содержимого текста и наделять обычный текст возможностями навигации. В последующих главах будут подробно рассмотрены форматирование текста, вставка в него иллюстраций и прочие замечательные возможности HTML. Глава 3 Текст Как вы могли заметить, чтобы поместить простой текст на страницу, достаточно ввести его в теле документа. При этом браузер отобразит текст, используя шрифт и цвет, заданные по умолчанию для текста тела страницы. Чтобы чтение информации, содержащейся в HTML-документе, стало приятным занятием, применяется форматирование и разбиение документа на логически цельные части (структурирование) с визуальным отделением этих частей друг от друга. Далее будут рассмотрены основные возможности HTML, позволяющие сделать содержимое документа легко читаемым и воспринимаемым. Однако перед описанием форматирования и структурирования текста нужно рассмотреть особенности, которые необходимо учитывать при добавлении непечатных и зарезервированных для языка HTML символов в текст документа. 3.1. Особенности ввода текста При вводе текста в документ часто возникает вопрос: как заставить браузер отобразить зарезервированные символы языка HTML (например, > или &) или символы, которые невозможно ввести с клавиатуры. Для ввода в документ таких символов в HTML предусмотрен механизм ссылок на символы. Таким образом, когда необходимо ввести в документ, например, символ &, то в текст на его место подставляется специальная последовательность – ссылка на данный символ. Ссылки на символы могут быть представлены любым из указанных ниже способов: • &#D; – позволяет задать символ, код которого имеет значение D (в десятичной системе счисления); • &#xH; – позволяет задать символ, код которого имеет значение H (в шестнадцатеричной системе счисления); • &имя_символа; – позволяет использовать именованную ссылку на символ. Как можно увидеть, ссылка на символ в тексте HTML-документа начинается символом & и заканчивается точкой с запятой (;). Особо стоит рассмотреть использование именованных ссылок на символы. Дело в том, что использование первых двух вариантов предполагает, что автору известны численные коды символов, которые он собирается добавить в документ. Однако согласитесь, что постоянно искать в таблицах численные коды нужных символов по меньшей мере неудобно. По этой причине в HTML предусмотрены имена для наиболее часто используемых символов. Эти имена и записываются вместо кода в тексте ссылок на символы. Имена некоторых часто используемых символов приведены в табл. 3.1. Полный список именованных ссылок на символы приведен в приложении 1. Таблица 3.1. Имена символов В качестве примера использования ссылок на символы в HTML-документе можно рассмотреть следующий HTML-код (пример 3.1). Пример 3.1. Использование ссылок на символы Именованные ссылки на символы <TITLE> Именованные ссылки на символы </ TITLE>
<BODY color = " yellow " bgcolor = " yellow " >
Текст HTML-документа
</BODY> При обработке данного кода браузером Internet Explorer получится документ, который показан на рис. 3.1. Рис. 3.1. Использование ссылок на символы Конечно, возможности использования ссылок на символы приведенным примером не ограничены. Ссылки на символы очень часто применяются для записи математических формул. Кроме того, их можно использовать для записи текста на иностранном языке, но с использованием символов другого языка (например, для ввода символа в при использовании символов только английского языка). 3.2. Форматирование текста Для изменения вида текста, отображаемого браузером, применяется форматирование с использованием специальных HTML-тегов. Форматирование текста HTML-документа сходно с форматированием в любом текстовом редакторе (например, Microsoft Word). Оно позволяет выделить цветом, начертанием, изменением шрифта некоторый текст, подчеркнуть его значимость или просто украсить. Задание начертания текста Задание начертания текста является, возможно, самым простым средством форматирования содержимого документа, которое доступно в HTML. Для изменения начертания текста в HTML-код добавляются элементы, приведенные в табл. 3.2. Таблица 3.2. Элементы задания начертания текста Для наглядности можно рассмотреть пример HTML-документа, в котором используются различные элементы задания начертания текста (пример 3.2). Пример 3.2. Задание начертания текста Задание начертания текста Полужирный текст
Курсив
Подчеркнутый текст
Зачеркнутый текст
Текст увеличенного размера
Текст уменьшенного размера
Верхний индексТекстНижний индекс
Текст, записанный моноширинным шрифтом
В приведенном коде задействованы все элементы задания начертания текста из табл. 3.2, кроме BLINK. При обработке HTML-кода браузером получится документ, показанный на рис. 3.2. Рис. 3.2. Задание начертания текста Рассматриваемые HTML-элементы могут быть вложены друг в друга. При этом на начертание текста влияют все элементы, внутри которых находится текст. Например, чтобы одновременно зачеркнуть и подчеркнуть курсивный полужирный текст, можно использовать следующий код: Текст непонятного начертания Задание шрифта текста Если нужно отобразить некоторый текст с использованием определенного шрифта, отличного от того, который применяется браузером по умолчанию, то можно воспользоваться элементом FONT. Он вводится при помощи парных тегов и . Параметры шрифта для элемента FONT устанавливаются заданием значений следующих его атрибутов: • face – задает название шрифта, например Arial или System; • size – задает размер шрифта (значение от 1 до 7, по умолчанию используется значение 3); • color – задает цвет шрифта. Третий из указанных атрибутов уже был рассмотрен при изучении элемента BODY. Возможные значения для атрибута face можно посмотреть в списке шрифтов в любом текстовом редакторе. Однако следует помнить, что если на компьютере, где будет просматриваться ваш HTML-документ, не установлен нужный шрифт, то браузер будет использовать шрифт по умолчанию. Таким образом, если очень важно сохранить оригинальное оформление документа при просмотре его на других компьютерах, не следует злоупотреблять экзотическими и редкими шрифтами. Для атрибута size могут использоваться только семь значений. Именно столько различных размеров шрифта (или менее) поддерживаются браузерами. При этом значение, которое присваивается параметру size, – это не высота шрифта в каких-либо единицах, а просто порядковый номер, который воспринимается браузером и преобразуется в предусмотренный разработчиками размер шрифта. Размер шрифта для атрибута size можно также задавать в виде +число или –число. Здесь число задает, на сколько единиц больше или меньше будет размер шрифта относительно текущего размера шрифта. Например, если используется размер шрифта по умолчанию (3), то +3 означает размер 6, а –2 означает размер 1. Далее рассмотрен пример задания различных шрифтов и различных размеров этих шрифтов (обратите внимание на вложенные элементы FONT) (пример 3.3). Пример 3.3. Задание шрифта текста Задание шрифта текста Самый маленький текст шрифта Arial
Обычный текст шрифта Arial
Самый большой текст шрифта Arial
Самый маленький текст шрифта Times New Roman
Обычный текст шрифта Times New Roman
Самый большой текст шрифта Times New Roman
В примере используются стандартные шрифты Times New Roman и Arial. На рис. 3.3 показан результат обработки браузером HTML-кода из примера 3.3. Рис. 3.3. Задание шрифта текста Задание выравнивания текста Сразу подчеркну, что пока рассматривается работа с неструктурированным текстом. Для задания горизонтального выравнивания текста, отличного от выравнивания, используемого браузером по умолчанию, предусмотрен элемент CENTER. Этот элемент задается парными тегами

и
. Текст, записанный между этими тегами, отображается в середине окна браузера. Сохранение авторского форматирования При обработке кода документа браузер заменяет все символы перехода на новую строку пробелами, а при выводе текста на экран вставляет только по одному пробелу между словами. При этом выполняется автоматический перенос непомещающихся слов на новую строку. Кроме того, при отсутствии специальных элементов текст выводится одним большим абзацем. Что же делать, если нужно вставить в HTML-документ текст, в котором важно сохранить хотя бы разрывы строк в определенных автором местах, например текст какой-то программы? Рассмотрим пример 3.4. Пример 3.4. Страница с текстом программы (оригинал) Текст программы (оригинал) function fact(int num):int if (num>0) return fact(num–1)*num; else return 1; end if end function При обработке приведенного кода браузер покажет весь текст, расположенный в элементе BODY, в одну строку так, как показано на рис. 3.4. Рис. 3.4. Страница с текстом программы (оригинал) Как видно, браузер проигнорировал все символы перевода строки, которые были в первоначальном тексте HTML-документа, и выполнил автоматический перенос непомещающихся строк. Для принудительного перехода на следующую строку в нужных местах текста можно использовать элемент BR, который задается одиночным тегом
. Именно этот тег и использовался для повышения наглядности предыдущих примеров. Тег
можно вставлять в любом месте текста, в данном случае (пример 3.5) этот тег логично вставить в конце каждой строки программы. Пример 3.5. Использование разрывов строк Текст программы (с разрывами строк) function fact(int num):int
if (num>0)
return fact(num–1)*num;
else
return 1;
end if
end function
Результат обработки этого варианта HTML-кода приведен на рис. 3.5. Рис. 3.5. Использование разрывов строк Как видно, браузер разорвал строки в указанных в тексте HTML-документа местах. Как и ранее, браузером проигнорированы все отступы (пробелы слева, показывающие уровни вложенности инструкций программы). Кроме того, если уменьшить ширину окна, то непомещающийся текст будет снова автоматически перенесен на следующие строки. Для обычного текста использования
вполне хватает. Однако в данном примере рассматривается программа, а не обычный текст. Чтобы полностью сохранить исходное форматирование текста (с учетом всех отступов), можно применить элемент PRE. Этот элемент задается парными тегами
 и 
. Браузер учитывает все символы, которые встречаются в тексте HTML-документа, и выводит их на экран. Пример 3.6 иллюстрирует использование элемента PRE для сохранения оригинального форматирования текста. Пример 3.6. Страница с текстом программы (использование PRE) Текст программы (PRE)

function fact(int num):int

if (num>0)

return fact(num–1)*num;

else

return 1;

end if

end function

Результат обработки кода примера 3.6 приведен на рис. 3.6. Рис. 3.6. Текст с полным сохранением форматирования Если внимательно посмотреть на рисунок, то можно заметить, что текст отображается моноширинным шрифтом. Таков побочный эффект использования PRE. Запрет разрыва строки Иногда бывает нужно не разорвать строки в тексте документа, а, наоборот, не допустить разделения некоторых слов в строках. Для этого HTML позволяет использовать неразрывные пробелы и элементы NOBR. Неразрывный пробел можно ввести в текст HTML-документа с использованием соответствующей ссылки на символ:  . Например: Текст, отображаемый без переноса. Если текст, слова которого разделены неразрывными пробелами, не помещается в окне браузера, то появится горизонтальная полоса прокрутки. Когда необходимо выделить большой участок текста, для которого недопустим автоматический перенос слов, то целесообразнее использовать элемент NOBR. Ему соответствуют парные теги и . Весь текст, находящийся между этими тегами, будет отображаться браузером в одной строке, например: Этот текст отображается в одной строке независимо от ширины окна браузера Остерегайтесь создания слишком длинных неразрывных строк, поскольку необходимость горизонтальной прокрутки для прочтения таких строк только ухудшает чтение HTML-документа. Для вставки разрывов строк в тексте, заключенном между и , можно использовать рассмотренный ранее элемент BR. Переносы При написании текста HTML-документа автор имеет возможность явно указать места, в которых текст может или должен переноситься на следующую строку (обычно это используется только для указания места возможного разрыва слов, потому что даже с наличием символов переноса браузер автоматически переносит целые слова так, как было рассказано ранее). Указания мест переносов в тексте достигается вставкой специальных символов переноса. HTML предоставляет два типа переноса: простой и мягкий. Простой перенос в тексте HTML-документа обозначается символом –. Этот символ указывает, в каком именно месте должно разрываться слово, если оно не помещается в окне. Если же слово помещается в окне, то символ переноса все равно отображается (то есть простой перенос логично использовать только для указания дефисов в тексте, как это обычно и делается). При помощи мягкого переноса можно указать браузеру место, в котором слово можно разрывать при необходимости переноса его части на следующую строку. Мягкий перенос задается ссылкой на символ ­. При использовании мягкого переноса сам символ переноса (–) отображается браузером только в случае разрыва слова в указанном месте. Ниже приведен небольшой пример использования простого и мягкого переноса в тексте HTML-документа (пример 3.7). Пример 3.7. Использование переносов Использование переносов Это длинное-длинное слово отображается браузером с дефисом и переносится в месте дефиса.
Слова этого текста могут раз­рывать­ся в указан­ных местах.
А этот текст не разрывает­ся несмотря на нали­чие в нем символов пере­носа. Обратите внимание: внутри элементов NOBR (как в примере 3.7) и PRE переносы браузером игнорируются. Однако внутри элемента NOBR можно указать место возможного переноса текста. Делается это при помощи одиночного тега (элемента WBR соответственно). Например: Этот текст будет разорван браузером в указанном месте при необходимости (когда текст не поместится в окне). Обтекание текстом нетекстовых элементов Далее рассмотрена еще одна возможность элемента BR, которая используется при вставке в текст документа различных изображений, таблиц и прочих нетекстовых элементов (сами эти элементы будут рассмотрены позже). Таким объектам можно задать выравнивание по правому или левому краю окна браузера (объекты с таким выравниванием называются плавающими). Текст может обтекать плавающие объекты справа или слева. При необходимости принудительного разрыва строки с использованием элемента BR можно указать, где должна появиться следующая строка, задавая значения left, right, all или none атрибуту clear этого HTML-элемента. Расшифровка этих значений следующая: • none – используется по умолчанию, означает, что новая строка начнется нормально, то есть с минимальным промежутком по вертикали и выравниванием по нужному краю; • left – следующая строка начнется под плавающим объектом, выровненным по левому краю (если объект выровнен по правому краю, то действует аналогично none); • right – аналогично значению left, только наоборот; • all – следующая строка начнется под плавающим объектом независимо от края, по которому выровнен объект. 3.3. Структурирование текста Все, что рассматривалось ранее, – это простое физическое форматирование текста. Теперь пришло время заняться разбиением текста HTML-документа на логически цельные, но различные между собой части, – сформировать структуру документа. В этом разделе будут рассмотрены основные возможности структурирования документа с использованием соответствующих HTML-элементов, а также то, как роль текста в структуре документа влияет на его отображение. Разбиение на абзацы В предыдущих примерах весь текст HTML-документов даже при наличии в нем элементов BR воспринимался браузером как один абзац. Чтобы действительно отделить абзацы текста друг от друга, используется специальный элемент P. Элемент P задается при помощи парных тегов

и

. При этом следует отметить, что использование закрывающего тега

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

) или тег конца документа, если абзац последний. Для элемента P можно задать несколько атрибутов. Список наиболее используемых атрибутов: • align – задает горизонтальное выравнивание содержимого абзаца, может принимать значения: left (используется по умолчанию), right, center, justify; • title – задает текст подсказки. К тексту абзаца может применяться любое форматирование, однако оно не должно нарушать восприятие абзаца как единого целого. Обычно сами абзацы браузерами визуально отделяются друг от друга. Далее приведен небольшой пример, в котором используется разбиение текста на абзацы (пример 3.8). Пример 3.8. Использование абзацев Разбиение текста на абзацы

Неформатированный текст

Текст с изменением начертания

Текст с измененным шрифтом

Текст этого абзаца автоматически выравнивается по ширине справа и слева при переносе слов При обработке приведенного HTML-кода получится документ, показанный на рис. 3.7. Рис. 3.7. Использование различного оформления абзацев При наведении указателя мыши на текст абзаца появляется подсказка, заданная атрибутом title. Заголовки Следующим важным этапом в структурировании HTML-документа является использование заголовков (в их обычном понимании) для обозначения начала больших фрагментов текста. В HTML поддерживаются шесть видов заголовков. Им соответствуют элементы H1, H2, H3, H4, H5 и H6. Номера определяют уровни заголовков от наиболее важного (1) до наименее важного (6). Элементы H1–H6 задаются при помощи соответствующих парных тегов. Например, для задания заголовка третьего уровня можно применить следующий код:

Текст заголовка третьего уровня

Для заголовков можно задать свойства: • align – выравнивание текста заголовка (по умолчанию используется выравнивание по левому краю); • title – текст подсказки. Заголовки различных уровней обычно отображаются браузерами различными шрифтами и различного размера. При этом размер шрифта более важных заголовков обычно больше, чем размер шрифта менее важных. На рис. 3.8 приведен пример того, как отображаются заголовки различного уровня (HTML-код не приводится ввиду его чрезвычайной простоты). Рис. 3.8. Вид заголовков в Internet Explorer В тексте, который заключен между тегами начала и конца заголовка, можно использовать рассмотренные ранее элементы форматирования (например, изменить шрифт). Однако это крайне не рекомендуется. Ведь стандартные заголовки придуманы именно для того, чтобы сделать похожими друг на друга HTML-документы различных авторов, чтобы пользователь при просмотре документа браузером не терялся в догадках относительно роли того или иного текста. Задание типов фраз Даже в разбитом на отдельные абзацы тексте смешаны различные по важности и смыслу участки текста. Чтобы их можно было отделить друг от друга, при написании HTML-документа можно пользоваться специальными элементами, задающими типы фраз в тексте (или, как еще говорят, элементами логического форматирования текста). Описания этих HTML-элементов приведены в табл. 3.3. Таблица 3.3. Элементы задания типов фраз Первые два элемента используются для подчеркивания важности какого-либо отрезка текста. Остальные элементы используются в основном в технических текстах. Все приведенные элементы задаются при помощи соответствующих парных тегов. Текст подсказки к каждому из этих элементов задается при помощи атрибута title. Наиболее часто этот атрибут используют с элементами ABBR и ACRONYM для отображения в подсказке полной расшифровки сокращения или аббревиатуры. Естественно, что логическое разделение текста при помощи элементов из табл. 3.3 отражается на его представлении браузером (правда, разные браузеры могут отображать одинаковый по значению текст различным образом). В примере 3.9 приведен текст HTML-документа, использующий все доступные типы фраз. Пример 3.9. Использование различных типов фраз Использование различных типов фраз Обычный текст
Выделение: Важный текст
Сильное выделение: Это очень важный текст
Цитата, ссылка: см. стандарт ISO 3273
Определение: WWW – это…
Пользователь должен ввести:Пример ввода пользователя
Переменная: strText
Аббревиатуры: HTTP, WWW, FTP
Сокращения: Внешпосылторг, UNIBEL
Фрагмент программы в тексте:CALL main
Пример программы:void main(){return;}
На рис. 3.9 приведен внешний вид страницы, сгенерированной при обработке текста примера 3.9. Рис. 3.9. Внешний вид фраз различного типа Как можно видеть из рисунка, большинство фраз различного типа отображаются браузером Internet Explorer совершенно одинаково. Не стоит полагать, что это отображение нельзя изменить. Можно использовать, например, рассмотренные ранее способы форматирования. Однако при этом польза от элементов, задающих типы фраз, становится весьма сомнительной. Для изменения внешнего текста HTML-элементов настоятельно рекомендуется использовать таблицы стилей, которые будут рассмотрены позже. Стоит также отметить, что сохранить оригинальное форматирование примера программы или прочего текста внутри элемента SAMP весьма проблематично, в отличие от того же элемента PRE. Именно поэтому в примере 3.9 текст программы выбран таким образом, чтобы он мог быть помещен в одну строку без потери его читабельности. Цитаты Кроме элемента CITE, для оформления цитат могут также использоваться элементы BLOCKQUOTE и Q. Для их задания используются соответствующие парные теги. Элемент BLOCKQUTE используется для задания длинных цитат и представляет собой элемент уровня блока. При этом текст цитаты обычно оформляется браузерами как текст с дополнительным отступом. Элемент Q является элементом уровня текста и используется для создания небольших цитат. Текст, помещенный между тегами и , оформляется различными браузерами по-разному (например, может быть помещен в кавычки). Атрибуту cite элементов BLOCKQUOTE и Q можно присвоить URI источника информации для цитаты. Указание изменений в документе В ряде случаев возникает необходимость изменять важное содержимое HTML-документа уже после того, как он опубликован (например, если речь идет о разрабатываемом законопроекте). В таких случаях практически незаменимыми являются HTML-элементы INS и DEL, применяемые для выделения участков текста, которые были добавлены или удалены в новой версии документа. Элемент INS задается при помощи парных тегов и , между которыми помещается добавленный текст. Элемент DEL задается парными тегами и . В эти теги заключается текст, удаленный из новой версии документа. Естественно, что содержимое элементов INS и DEL отображается браузерами совершенно поразному. Содержимое элемента DEL может быть, например, зачеркнутым или вообще не показываться браузером. Элементы INS и DEL могут содержать как небольшие участки текста, так и целые разделы документа. Однако недопустимым является вложенность этих элементов друг в друга. Никогда так не делайте Наиболее часто используемыми атрибутами элементов INS и DEL являются следующие: • cite – задает URI HTML-документа с пояснениями сделанных изменений; • datetime – время, когда в документ были внесены изменения. Здесь вы впервые встретились с заданием атрибуту значения даты и времени. Это значение в HTML задается в следующей форме: ГГГГ–ММ–ДДTчч:мм:cc Здесь ГГГГ обозначает год, ММ – месяц, ДД – день, чч – значение от 0 до 23 (час), мм и сс – значения от 0 до 59 (минуты и секунды). Кроме того, в конец значения даты и времени добавляется одна из следующих записей: • Z – обозначает, что используется UTC-время (общее скоординированное время, или время по Гринвичу); • +чч:мм или –чч:мм – обозначает, что местное время опережает или отстает от UTC на заданное количество часов и минут. Ниже приведен пример различных вариантов задания московского времени 14 часов 5 минут 31 декабря 1997 года (с использованием местного времени и времени UTC): 1997–12–31T14:05+03:00 1997–12–31T11:05Z Контактная информация В HTML предусмотрен специальный элемент ADDRESS, в который может заключаться различная контактная информация. Он задается при помощи парных тегов
и
. Текст внутри элемента ADDRESS может иметь произвольную структуру, однако чаще всего в него помещаются имена сотрудников организаций, ссылки на другие HTML-документы, телефон или адрес электронной почты контактного лица. 3.4. Комментарии в HTML-коде При написании достаточно сложных HTML-документов зачастую бывает полезно иметь возможность вставлять в исходный текст небольшие или развернутые комментарии. Добавление в сложный HTML-документ грамотных комментариев позволяет сэкономить уйму времени при необходимости, например, повторного редактирования документа месяц спустя. Текст комментария помещается между символами . При обработке HTML-документа текст комментария игнорируется браузером. Комментарии могут быть как однострочными, так и многострочными: Важным моментом является то, что между и . Между тегами помещаются элементы списка. Текст элементов списка начинается после тега
  • и может заканчиваться тегом
  • . С закрывающим тегом ситуация такая же, как и с закрывающим тегом

    : использование его необязательно. Если тег опустить, то текстом элемента списка считается весь текст, расположенный до следующего тега
  • или до закрывающего тега . Ниже приведен пример простого маркированного списка, состоящего из трех элементов.
    • Первый элемент
    • Второй элемент LI>Третий элемент
    К тексту элементов любых списков можно применять рассмотренные ранее средства HTML по форматированию текста. Рассматриваемые элементы UL и LI имеют ряд атрибутов. Специфичными атрибутами элемента UL являются следующие: • compact – заставляет браузер показывать список более компактно (действие этого атрибута зависит от конкретного браузера); • type – позволяет задать тип маркера списка, может принимать следующие значения: circle (круг без заливки), dict (круг с заливкой) и square (квадрат). Атрибут type можно указывать и для нужных элементов списка LI, если понадобится изменить тип маркера только некоторых элементов списка. На рис. 4.1 приведен пример того, как отражается задание различных значений атрибута type на отображении списка браузером. Рис. 4.1. Маркированные списки Ниже приведен текст HTML-документа, который был обработан браузером (пример 4.1). Пример 4.1. Маркированные списки Маркированные списки Список с закрашенными круглыми маркерами
    • Первый элемент
    • Второй элемент
    Список с круглыми незакрашенными маркерами
    • Первый элемент
    • Второй элемент
    Список с квадратными маркерами
    • Первый элемент
    • Второй элемент
    Список с разными маркерами элементов
    • Закрашенный круг
    • Окружность (type = circle)
    • Квадрат (type = square)
    4.2. Нумерованные списки Нумерованные списки применяются для упорядочения приводимых данных. При нумерации элементов таких списков могут быть использованы как арабские, так и римские цифры, буквы латинского алфавита. Нумерованный список в тексте HTML-документа обозначается элементом OL при помощи парных тегов
      и
    . Элементы нумерованного списка задаются в точности так же, как и элементы маркированного списка. Нумерованный список несколько отличается от маркированного не только внешним видом, но и набором атрибутов и их возможными значениями: • compact – заставляет браузер отображать список компактно; • type – задает тип нумерации элементов списка, доступные значения: 1 (используются арабские цифры, по умолчанию), I или i (большие или малые римские цифры), A или a (большие или малые буквы латинского алфавита); • start – номер первого элемента списка (при задании start нужно учитывать тип нумерации элементов списка, например номеру 5 соответствует латинская буква E). Атрибут start часто используется, когда нужно продолжить нумерацию предшествующего списка после отрывка текста, не являющегося элементом ни одного списка (например, после пояснения элемента предшествующего списка). В примере 4.2 показано использование различных типов нумерации списков. Пример 4.2. Нумерованные списки Нумерованные списки Нумерация арабскими цифрами
    1. Первый элемент
    2. Второй элемент
    Продолжение нумерации, но большими римскими цифрами
    1. Третий элемент
    2. Четвертый элемент
    Новый список, нумерация большими латинскими буквами
    1. Первый элемент
    2. Второй элемент
    Списки, использованные в примере 4.2, выглядят в окне браузера так, как показано на рис. 4.2. Рис. 4.2. Нумерованные списки Значение атрибута type можно отдельно указать для любого элемента списка. Кроме того, для элементов нумерованного списка можно задать значение атрибута value. Его действие аналогично атрибуту start элемента OL с тем лишь отличием, что он изменяет нумерацию, начиная с того элемента, для которого указано значение атрибута value. Например, задание атрибута value так, как сделано ниже в примере 4.3, приведет к результату, который показан на рис. 4.3. Рис. 4.3. Изменение нумерации внутри элементов списка Пример 4.3. Изменение нумерации списка Изменение нумерации
    1. Первый элемент
    2. Второй элемент
    3. Третий элемент
    4. Четвертый элемент
    5. Пятый элемент
    Может возникнуть вопрос: что произойдет, если задать нумерацию буквами такого длинного списка, на элементы которого не хватит и всех букв латинского алфавита? Ответ таков: для нумерации элементов списка с 27-го элемента используются две латинские буквы (например, AA, AB, AC и т. д.), с 703-го элемента используются 3 латинские буквы и т. д. 4.3. Списки определений Интересной разновидностью списков являются списки определений. Как можно догадаться из названия, первоначально эти списки были введены для более наглядного представления определений терминов. Список определений задается внутри HTML-элемента DL (для его задания используются парные теги
    и
    ). Каждый элемент списка определений состоит из двух частей: из термина (HTML-элемент DT) и определения термина (HTML-элемент DD). Пример текста HTML-документа, содержащего список определений, приведен ниже (пример 4.4). Пример 4.4. Список определений Список определений
    HTML
    Широко используемый язык гипертекстовой разметки
    WWW
    От англ. World Wide Web, глобальная сеть из соединенных между собой гипертекстовых документов
    Как можно видеть на рис. 4.4, браузер по-разному отображает сами термины и определения этих терминов, причем делает это так, что сразу понятно, где определение, а где термин. Рис. 4.4. Список определений Все особенности использования закрывающих тегов и аналогичны особенностям использования тега
  • , то есть, несмотря на то что эти теги определены, использовать их совершенно не обязательно. В следующем разделе при рассмотрении особенностей создания вложенных списков будет показано, как списки определений могут повысить наглядность текста, а также подчеркнуть особую роль некоторых абзацев в общем тексте. 4.4. Создание вложенных списков Важной особенностью списков в HTML является та простота, с которой можно создавать списки различной вложенности, используемые для очень подробной и разветвленной классификации. На рис. 4.5 приведен пример небольшого трехуровневого списка. Рис. 4.5. Вложенные списки Из примера видно, что при вложении можно использовать списки различных типов. В данном случае в качестве внешнего списка используется нумерованный список, а в качестве вложенных списков – маркированные. Ниже приведен текст HTML-документа, при обработке которого браузер Internet Explorer сгенерировал страницу, показанную на рис. 4.5 (пример 4.5). Пример 4.5. Вложенные списки Использование вложенных списков
    1. Первый элемент списка. Имеет две составляющих:
      • Первая составляющая
      • Вторая составляющая
    2. Второй элемент списка. Имеет три составляющих:
      • Первая составляющая. Также разделяется на две части:
        • Первая часть
        • Вторая часть
      • Вторая составляющая
    3. Третий элемент списка
    При рассмотрении того как браузер обрабатывает вложенные списки, можно увидеть одну интересную особенность: браузер (по крайней мере, Internet Explorer) сам заботится о том, чтобы списки различных уровней вложенности имели разные маркеры. Однако при использовании вложенных маркированных списков следует помнить, что если специально не настраивать вложенные списки при помощи атрибута type, то для списка первого уровня (не вложенного в другой список) используется маркер, соответствующий значению dict атрибута type. Для списка второго уровня используется значение circle, а для всех списков третьего, четвертого и т. д. уровней используется значение square. При вложении нумерованных списков автоматическая смена типа нумерации элементов вложенных списков не производится. Вообще, использовать вложенные нумерованные списки, а тем более вкладывать нумерованные списки в маркированные не рекомендуется. Сейчас вы узнаете, как можно повысить удобство восприятия текста при использовании вложения списков в списки определений. Это будет рассмотрено на примере отрывка одного из возможных советов по устранению неполадок в работе локальной сети. Показанное на рис. 4.6 оформление текста реализовано с использованием вложения в список определений нумерованного и маркированного списков. HTML-текст показанного на рисунке примера приведен ниже (для экономии места полный текст рекомендаций в текст примера не включен) (пример 4.6). Рис. 4.6. Вложение списков в список определений Пример 4.6. Вложение списков в список определений Вложение списка в список определений
    Неисправность
    Отсутствие соединения компьтеров сети (PING-тест не проходит)
    Возможные причины
    • Отсутствие физического соединения между компьютерами
      • Не подключены сетевые провода
      • Не работает активное сетевое оборудование
      • Обрыв сетевых проводов
      • Неисправные сетевые адаптеры
    • Неправильная настройка IP-адресов
    Диагностика
    1. Проверить, включены ли сетевые провода…
    2. Проверить состояние индикации…
    3. Проверить, включено ли активное сетевое оборудование…
    Таким образом, мы рассмотрели создание вложенных списков. Теперь перейдем к рассмотрению создания гиперссылок. Глава 5 Гиперссылки Все, что рассматривалось ранее, было созданием HTML-документов, которые не предусматривали никаких возможностей навигации. Теперь пришло время заняться изучением главного средства, которое сделало использование HTML практически незаменимым для представления связанных между собой документов. Речь идет о гиперссылках. Гиперссылки – ключевой, практически самый главный элемент гипертекста (текста, обладающего возможностями навигации). Простота, наглядность и в то же время мощь гиперссылки заключаются в том, что ею может быть практически все что угодно: слово в тексте, заголовок, рисунок, элемент таблицы и другие элементы HTML-документа. Для использования гиперссылки от пользователя требуется щелчок кнопкой мыши на тексте, изображении или прочем представлении гиперссылки, остальную работу по поиску и переходу к нужному ресурсу выполнят автоматические системы, начиная с браузера на компьютере пользователя и заканчивая службой DNS, поисковыми машинами Интернета. Вся работа, необходимая для поиска и загрузки нужных ресурсов, скрыта от пользователя. Он только видит результат и наслаждается легкостью навигации в огромном объеме информации. 5.1. Простой переход к ресурсам Для создания гиперссылки в тексте HTML-документа используется элемент A, который задается при помощи парных тегов и . Текст, изображение или другой элемент HTML-документа, заключенный между этими тегами, становится представлением гиперссылки в тексте. Обычно браузеры отображают гиперссылки таким образом, что их можно однозначно отделить от прочего содержимого документа, например выделяют цветом, подчеркиванием, меняют форму указателя мыши при наведении его на гиперссылку. Обычным действием браузера при переходе по гиперссылке является открытие указанного HTML-документа в том же или новом окне. Навигация между HTML-документами Для создания простейшей гиперссылки, обеспечивающей переход к нужному HTML-документу, достаточно задать в качестве значения атрибута href элемента A URI нужного ресурса (файла HTML-документа). Допустим, что сайт, по которому нужно реализовать навигацию, состоит из пяти страниц. Файлы страниц именуются 1.html, 2.html и т. д. У сайта также есть главная страница (index.html), на которой находится оглавление. Элементы оглавления позволяют перейти к соответствующим страницам, то есть являются гиперссылками. Тогда возможный вариант HTML-документа с оглавлением сайта будет иметь следующий вид (пример 5.1). Пример 5.1. Простая навигация между документами Главная страница сайта
    Оглавление
    Первая страница сайта
    Вторая страница сайта
    Третья страница сайта
    Четвертая страница сайта
    Пятая страница сайта
    Для оформления оглавления использовался рассмотренный ранее список определений. При желании это оформление можно легко изменить. Как можно видеть на рис. 5.1, текст, заключенный между тегами элемента A, стал визуальным представлением гиперссылки в документе. На то, что помещается между тегами и , накладывается ограничение, которое нужно помнить: содержимым гиперссылки не может быть другая гиперссылка. Рис. 5.1. Оглавление сайта Если доводить реализацию навигации в рассматриваемом сайте до конца, то логично вставить в каждый HTML-документ, который является отдельной страницей сайта, гиперссылки для перехода на страницу оглавления, а также для перехода на следующую и предыдущую страницы. Добавление таких ссылок в HTML-документ в файле 3.html может выглядеть, например, следующим образом: … Оглавление
    Предыдущая
    Следующая
    … До сих пор рассматривался переход при помощи гиперссылок в пределах одного сайта, причем все страницы сайта были расположены в одной папке. При этом для задания местоположения использовались относительные URI. Если страницы сайта расположены в разных папках (допустим, что названия папок совпадают с номерами страниц), то гиперссылки на странице оглавления будут иметь следующий вид: … Первая страница сайта
    Вторая страница сайта
    … Для перехода к ресурсам, находящимся за пределами сайта, используются полные URI, например: Домашняя страница Приведенная здесь гиперссылка позволяет перейти к HTML-документу homepage.html, расположенному на сайте mydomain.com. Загрузка файлов Гиперссылки можно использовать не только для перехода между различными HTML-документами. С их помощью можно выполнять загрузку с серверов различных файлов: архивов, иллюстраций, музыки, видео и т. д. Например, при организации содержания своего электронного фотоальбома можно использовать пример 5.2. Пример 5.2. Использование ссылок на файлы рисунков Фотографии из отпуска
    Мои фотографии на рыбалке
    Вот это рыбина!
    Чуть не искупался
    Если вы выберете какую-либо ссылку, то браузер загрузит соответствующее изображение. Кстати, подобия гиперссылок используются и при вставке изображений непосредственно в HTML-документ, но как это делается, будет рассмотрено в следующем разделе. Рассмотрим пример, который можно часто встретить при использовании различных хранилищ файлов. Допустим, есть сайт, с которого можно скачать архивы с концертными фотографиями какой-нибудь рок-группы. Тогда страницу оглавления имеющихся архивов можно реализовать в виде следующего HTML-документа (пример 5.3). Пример 5.3. Использование ссылок на файлы архивов Концертные записи группы РАСПАД ЭЙНШТЕЙНИЯ
    Концерт 22.11.2002 в городе N
    Скачать 18 самых впечатляющих фотографий можно здесь
    Концерт 24.12.2002 в том же городе N
    Если вы хотите увидеть самые запоминающиеся эпизоды концерта, жмите сюда
    При выборе любой из ссылок браузер (если рассматривать Internet Explorer) отобразит окно, в котором спросит у пользователя, что делать с файлом архива: открыть или сохранить на диске компьютера пользователя. Пользователь может выбирать, что ему угодно. Важно лишь то, что он получил доступ к файлам архивов на сервере. Ссылки на другие службы Ранее рассматривалось использование гиперссылок только для навигации между HTML-документами и загрузки файлов с сервера с использованием протокола HTTP. В гиперссылках предыдущих примеров протокол HTTP не указывался, так как он используется по умолчанию. Теперь будет рассмотрено создание гиперссылок на ресурсы, протокол работы с которыми отличен от HTTP: ссылки на службы новостей, ссылки на ресурсы FTP-серверов и ссылки на почтовые службы. Начнем со ссылок на ресурсы FTP-серверов. FTP – протокол передачи файлов (File Transfer Protocol), который является одним из самых старых протоколов Интернета. Этот протокол и теперь используется на некоторых серверах-хранилищах файлов (файловых серверах). Ниже приведен пример типичного адреса ресурса FTP-сервера: ftp://file_storage.com Как видно, URI FTP-ресурса отличается только наименованием протокола. Однако отличий FTP от HTTP при использовании несколько больше. Дело в том, в большинстве случаев FTP-серверы могут при установке подключения проводить авторизацию пользователя, то есть создавать именное подключение. В приведенном же ранее примере устанавливалось анонимное подключение. Чтобы подключиться к FTP-серверу под именем зарегистрированного на FTP-сервере пользователя, нужно указать в адресе имя пользователя следующим образом: ftp://user234@file_storage.com В большинстве случаев при установке именного FTP-подключения требуется ввод пароля. Если пароль нужно вводить, браузер отобразит окно ввода пароля. Пароль можно указать прямо в адресе следующим образом (mypass – это и есть пароль): ftp://user234:mypass@file_storage.com Для создания гиперссылки на адрес электронной почты достаточно для атрибута href HTML-элемента A использовать похожее значение: mailto:address@somemail.com При переходе по такой гиперссылке откроется почтовая программа по умолчанию. При этом поле адреса будет заполнено значением address@somemail.com. При создании гиперссылки на адрес электронной почты можно позаботиться об автоматическом формировании текста, темы или других сведений, например: mailto:address@somemail.com?subject=Тема письма &cc=copyaddress@somemail.com&bcc=bcopyaddress@somemail.com &body=Текст письма В данном случае значения полей, которые будут заполнены в окне почтовой программы, указываются после адреса электронной почты. Так, например, если почтовая программа по умолчанию – Microsoft Outlook, то при выборе в окне браузера гиперссылки с приведенным выше значением атрибута href окно Microsoft Outlook будет выглядеть так, как показано на рис. 5.2. Рис. 5.2. Автоматическое заполнение полей почтовой программы Из рисунка можно увидеть, какое поле как обозначается в строке почтового адреса гиперссылки (subject, cc, bcc и body). Остается только лишь подчеркнуть, что символ & служит для разделения информации, заносимой в различные поля. Значения всех полей задавать не обязательно, но порядок их задания важен и является таким, как было показано в приведенном выше примере. 5.2. Навигация в пределах документа Теперь будут рассмотрены возможности гиперссылок по быстрому перемещению не между различными страницами, а в пределах одного HTML-документа. Перед тем как создавать средства навигации по HTML-документу, нужно рассмотреть ключевое понятие, которое используется применительно к гиперссылкам, – якорь ссылки. Когда речь идет о гиперссылках, то обычно упоминаются два якоря: начальный и якорь назначения. Соответственно, и переход по гиперссылке осуществляется от начального якоря к якорю назначения. Как можно было увидеть из приведенных ранее примеров, при задании якоря назначения гиперссылки указывается URI какого-либо ресурса. В гл. 1 уже говорилось, что URI могут также указывать на части HTML-документов. Части документов, на которые могут быть установлены гиперссылки, выделяются специальным образом: с этими частями связываются якоря, которые и используются впоследствии в гиперссылках. Создание якоря в документе можно выполнять двумя способами. Первый способ – это использование HTML-элемента A с указанием в качестве значения его атрибута name идентификатора якоря. Идентификатор должен быть уникальным в пределах HTML-документа, например в следующей строке создается якорь с именем par1, который связан с заголовком – началом первого раздела документа:

    Раздел 1

    Чтобы иметь возможность перейти к созданному якорю из другого места того же документа, создается соответствующая гиперссылка: Раздел 1 Если нужно осуществлять переход к рассматриваемому якорю из другого документа, то можно использовать следующее задание гиперссылки в документе, откуда осуществляется переход (допустим, что файл с якорем называется chapter2.html): Раздел 1 При создании любой гиперссылки можно одновременно задавать ее атрибуты href и name. При этом создаются собственно гиперссылка и якорь, к которому может осуществляться обратный переход (то есть гиперссылка становится якорем для других гиперссылок): Раздел 1 Теперь можно рассмотреть и второй способ создания якорей для гиперссылок. Якорь гиперссылки, связанный с определенным элементом HTML-документа, можно создать, указав значение атрибута id соответствующего элемента. Атрибут id поддерживается практически для всех HTML-элементов (не поддерживается только для BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE). Например, создание приведенного чуть ранее якоря для заголовка первого раздела документа можно выполнить и так:

    Раздел 1

    Работа с якорем, созданным таким образом, ничем не отличается от работы с якорем, созданным при помощи HTML-элемента A. Важным моментом является то, что и атрибут id, и атрибут name используют одно и то же пространство имен. Это означает, что при помощи этих атрибутов не может быть определен якорь с одинаковым именем в различных местах документа. Для элементов, поддерживающих атрибут name, можно задавать значения id и name одновременно, но при этом эти значения должны быть равны между собой. Например, создание якоря следующим образом является полностью корректным:

    Раздел 1

    5.3. Прочие атрибуты гиперссылок Помимо упомянутых выше, у HTML-элемента A есть еще целый ряд необязательных атрибутов, основные из которых перечислены ниже: • accesskey – задает клавишу быстрого доступа, например "C", "N", при нажатии которой пользователь перейдет по гиперссылке (в Windows нажимается клавиша Alt + быстрая клавиша); • charset – кодировка ресурса, на который указывает гиперссылка; • hreflang – задает язык ресурса, на который указывает гиперссылка; • type – задает так называемый MIME-тип содержимого ресурса, на который указывает гиперссылка (описание MIME-типов см. в разд. 6.5); • tabindex – порядок табуляции, в котором активируется гиперссылка (значение от 0 до 32 767); • rel – роль документа, на который указывает гиперссылка; основные значения вместе с описаниями приведены в табл. 5.1; • rev – роль текущего документа по отношению к документу, на который указывает гиперссылка; значения см. в табл. 5.1. Таблица 5.1. Типы ссылок, задаваемые атрибутами rel и rev (значения этих атрибутов) Теперь пара слов об атрибуте tabindex. Использовать этот атрибут очень удобно, когда нужно обеспечить перемещение по документу при помощи табуляции. Табуляция обеспечивается нажатием клавиши Tab. Гиперссылки и некоторые другие части документа можно нумеровать, задавая порядок, в котором они будут активироваться при табуляции. Элементы документа, для которых не задано значение атрибута tabindex, перебираются в порядке их следования в документе. Глава 6 Линейки, изображения, внедренные объекты Ранее были рассмотрены возможности HTML, которые в сумме позволяют создавать практически полноценные гипертекстовые документы. Однако если пользоваться только ранее полученными знаниями языка HTML, то у создаваемых документов будет как минимум один существенный недостаток – наличие только текстового содержимого, никаких рисунков или других графических элементов. В данной главе вы познакомитесь с тем, как можно разнообразить содержимое HTML-документов при помощи различных нетекстовых элементов. 6.1. Линейки Линейка – горизонтальная линия в окне браузера. Для вставки линейки в HTML-документ используется элемент HR. Этот HTML-элемент задается при помощи одиночного тега
    и имеет следующие атрибуты: • align – задает выравнивание линейки в окне браузера, может принимать значения left, right или center; • noshade – булев атрибут, указывает браузеру, что линейку следует отображать плоской (без традиционной тени); • size – численное значение, определяющее толщину линии; • width – численное значение, определяющее ширину линейки; может задаваться как абсолютное (в пикселах) значение, так и относительное (в процентах от ширины окна браузера). По умолчанию используются выравнивание линейки по центру и ширина линейки, равная 100 % от ширины области окна браузера, отведенной HTML-документу. Далее приведен небольшой пример, в котором иллюстрируется использование различных значений атрибутов для линеек (пример 6.1). Пример 6.1. Использование горизонтальных линеек Линейки Линейка с настройками по умолчанию
    Линейки различной толщины

    Плоская линейка
    Линейки с различным выравниванием


    Созданные в примере 6.1 линейки выглядят так, как показано на рис. 6.1. Рис. 6.1. Использование горизонтальных линеек 6.2. Изображения Если линейки применяются в основном для визуального отделения обособленных частей текста, то изображения могут внести в HTML-документ элемент иллюстративности. Своеобразная вставка изображения в документ уже рассматривалась при описании HTML-элемента BODY. Тогда указывалось изображение-фон страницы. Теперь пришло время научиться добавлять изображения непосредственно в текст HTML-документа. Для вставки изображения в текст HTML-документа используется элемент IMG. Для задания этого HTML-элемента используется одиночный тег . Список наиболее используемых атрибутов: • scr – задает URI изображения; • alt – альтернативный текст, который отображается на месте изображения, если по каким-либо причинам само изображение не может быть показано; • border – задает толщину границы вокруг рисунка в пикселах; • align – определяет выравнивание изображения (описание возможных значений приведено в табл. 6.1); • height – задает высоту изображения в пикселах; • width – определяет ширину изображения в пикселах; • vspace – задает величину свободного пространства между изображением и текстом сверху и снизу; • hspace – определяет величину свободного пространства между изображением и текстом справа и слева; • name – позволяет идентифицировать изображение так, что на него могут ссылаться различные сценарии (поддерживается для совместимости с более ранними версиями HTML, для идентификации изображений лучше использовать атрибут id). Среди перечисленных атрибутов элемента IMG обязательным является только атрибут scr. Значение атрибута alt задается тогда, когда нужно, чтобы пользователь, браузер которого не показывает изображения на странице (например, если отображение рисунков отключено в настройках браузера), хоть что-то увидел на том месте, где должно быть изображение. Атрибуты height и width используются для того, чтобы браузер еще до загрузки изображения мог правильно расположить его в тексте. Кроме того, эти атрибуты можно применять для принудительного изменения (сжатия или увеличения) размера изображения. Приведенный ниже пример 6.2 иллюстрирует использование атрибутов alt, width, height, а также атрибута border. Пример 6.2. Вставка изображений в HTML-документ Вставка изображений  – небольшое изображение с рамкой.
    здесь должно быть изображение 150x200 – это изображение не может быть загружено браузером. При обработке приведенного примера браузером получится документ, показанный на рис. 6.2 (предполагается, что браузер не может найти изображение image.gif). Конец ознакомительного фрагмента. Текст предоставлен ООО «ЛитРес». Прочитайте эту книгу целиком, купив полную легальную версию (https://www.litres.ru/aleksandr-chirtik/html-populyarnyy-samouchitel/?lfrom=334617187) на ЛитРес. Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.
    КУПИТЬ И СКАЧАТЬ ЗА: 149.00 руб.