ГЛАВА 6
Статические элементы языка HTML
Приступая к изучению любого языка программирования, нужно помнить, что лучший способ быстрого освоения новых знаний — это непосредственное их использование с самого начала. Процессы приобретения знаний и навыков должны быть неразрывно связаны друг с другом. Поэтому мы предлагаем вам параллельно с прочтением материала создавать ваши собственные Web-страницы в соответствии со своими потребностями.
Язык HTML снискал популярность в мире, благодаря своей простоте и исключительной полезности. Поэтому, помня об этих сильных сторонах языка, мы будем излагать материал, сообразуясь исключительно с этими особенностями, опуская многие тонкие моменты, которые, скорее всего, вам не потребуются, и в любом случае они всегда доступны в спецификации языка по адресу http://www.w3.org/TR.
Итак, как вы уже, наверное, знаете, HTML является стандартом представления документов, подобно тому, как в свое время формат RTF для текстовых файлов использовался для обмена информацией между различными текстовыми редакторами.
Однако RTF не позволял вручную редактировать документ. Для этого служили редакторы, которые, исходя из своих возможностей, преобразовывали форматирование, введенное пользователем для своего документа, в некое представление данных в файле. Отличительной особенностью HTML является доступность исходного кода страницы для просмотра и редактирования.
Например, набирая в текстовом редакторе Блокнот (Notepad) следующие строки (листинг 6.1) и сохраняя их в файле с расширением htm, мы получаем возможность отобразить строчку "Как легко оказалось забраться в браузер!" на любом компьютере, где есть программа просмотра Web-страниц.
Листинг 6.1. Web-страничка "изнутри"
<HTML>
<TITLE> Моя страничка </TITLE>
<BODY>
<Р> Как легко оказалось забраться в браузер! </Р>
</BODY>
</HTML>
Обратите внимание, что все браузеры, независимо от своей марки, будут отображать это строчку единообразно (рис. 6.1).
Рис. 6.1. Отображение приведенного кода страницы в браузере
Итак, для представления текста в браузере необходимо создать файл, в который будет записан этот текст, как, например обычный текстовый документ, хранящийся в ТХТ-файле, и определенный набор слов, функциональная роль которых стандартизирована. Например, в листинге 6.1 тег <р> означает, что строчка "Как легко оказалось забраться в браузер!", будет отображаться с нового абзаца, со всеми вытекающими отсюда последствиями, которые будут определять размер отступов, положение на странице и т. д.
Приведенный выше элемент р является зарезервированным словом HTML и вместе с символами < и > образуют тег — ключевое понятие разметки страниц. Теги бывают двух типов — открывающие и закрывающие. Закрывающие отличаются от первых, символом косой черты перед названием элемента. Например, тег </р> указывает браузеру, что данный параграф закончен и для следующего текста, если он будет, нужно применять соответственно другое форматирование.
Существуют элементы, которые не требуют закрывающих тегов, однако все элементы, которые требуют их, должны быть закрыты.
Применяя теги, можно указывать свойства отображения текста путем установки атрибутов. К атрибутам относятся цвет шрифта, его размер, выравнивание и т. д. Например, заменив тег
<BODY>
приведенного выше листинга на тег
<BODY text=gray>
мы получим в браузере следующую страничку (рис. 6.2):
Рис. 6.2. Страничка, полученная в результате изменения атрибута font элемента Body
Как видим, цвет текста стал серым. Действие атрибута ограничено участками страницы, где не указан иной цвет для шрифта. Например, в листинге 6.2 цвет шрифта после его указания в теге <BODY> как серый, в тексте документа определяется еще раз, уже как черный.
Листинг 6.2. Демонстрация области действия атрибутов
<HTML>
<TITLE> Моя страничка </TITLE>
<BODY text=gray>
<Р> Как легко оказалось забраться в браузер! — Серый шрифт </Р>
<P><FONT соlоr=blасК>Черный шрифт</Font></Р>
<Р>Опять серый</Р>
</BODY>
</HTML>
Листингу 6.2 соответствует отображение страницы, приведенное на рис. 6.3.
Как видим, применение тега <FONT> с указанием атрибута color, принимающего значение black (черный), изменяет цвет шрифта. После закрывающего тега </FONT> цвет восстанавливает значение gray (серый).
Рис. 6.3. Отображение страницы в соответствии с листингом 6.2
В языке HTML определены такие элементы, как рисунок, таблица, маркированный список и т. д., которые позволяют добиваться достаточно сложной разметки страниц.
Нужно отметить, что HTML-код не чувствителен к регистру, однако элементы принято писать заглавными, а атрибуты — прописными символами, что повышает удобство прочтения кода документов.
Итак, приступим к изучению элементов языка.
Тело каждой страницы должно содержать служебную информацию, которая, с одной стороны, позволяет браузеру получать дополнительные сведения, как, например, версия языка HTML, использованного при создании страницы, а с другой — переносить вместе с документом сопроводительные сведения об авторстве, содержимом документа и т. д.
С этого элемента должна начинаться страница. По окончании кода страницы должен следовать закрывающий тег </HTML>, который указывает браузеру, что загрузка страницы завершена.
Данный тег указывает браузеру, что начинается основная часть страницы (тело документа). В ранних версиях языка HTML, атрибутами данного элемента указывался цвет заднего плана страницы, цвет и размер шрифта, который будет использоваться в документе и т. д. Однако в последних реализациях этого языка все атрибуты данного тега объявлены нежелательными, а значит, в ближайшее время могут устареть. В дальнейшем, мы будем избегать рассмотрения нежелательных атрибутов.
Стоит отметить, что вместо многих нежелательных атрибутов введены механизмы использования каскадных таблиц стилей, благодаря чему функциональность языка только выигрывает.
Содержит в своих атрибутах сопроводительную к HTML-документу информацию. Применяется совместно со стандартным и определяемым программистами содержимым атрибутов. Никак не влияет на разметку страниц, и, как правило, используется поисковыми системами и программами, работающими с Web-страницами. Конечный тег данного элемента запрещен.
Одним из наиболее существенных атрибутов является http-equiv, с помощью которого браузеру передается информация о типе содержимого документа и кодировке, как показано в листинге 6.3.
Листинг 6.3. Пример использования тега <МЕТА>
<МЕТА http-equiv="Content-Type" content="text/html; charset=windows-1251">
Элемент МЕТА можно использовать, например, для передачи информации об авторе, программисте и т. д.
Кроме того, здесь помещается информация о документе для индексирования страниц. Пример указания сопроводительной к документу информации приведен в листинге 6.4.
Листинг 6.4. Указание информации о документе
<МЕТА name="Keywords" content="HTML, Web, Web-страница, книга, программирование, уроки">
<МЕТА name="Description" content="Здесь представлено руководство по языку HTML">
<МЕТА name="Author" content="Sergey Podolsky and Other">
<META name="Copyright" content="BHV, All Right Reserved">
Указывая сопроводительную информацию, вы, во-первых, обеспечите верное индексирование страницы поисковыми системами, а во-вторых, подскажите браузеру, в какой кодировке нужно отображать вашу страничку. Не поленитесь, и обязательно представьте в разделах Description и Keywords самую развернутую информацию.
Для качественного, красивого и функционально выгодного форматирования текста, в языке HTML присутствуют элементы, позволяющие реализовать достаточно развитые схемы разметки, как, например, таблицы, нумерованные и маркированные списки, заголовки. Кроме того, существует возможность для определения собственных стилей, применение которых по всему сайту создает эффект дизайнерской целостности и собственного стиля, а также экономит время дизайнера при создании сайта, т. к. определив один раз некий стиль, он может использовать его повсеместно.
Начнем с простейших элементов.
Как следует из названия, этот элемент указывает браузеру на начало нового абзаца. В соответствии со встроенными в него возможностями, появление данного тега приводит к отступам от предыдущего абзаца. Конечный тег необязателен. Наиболее существенным атрибутом является align, указывающий на выравнивание текста и принимающий значения left (левое), right (правое), center (центральное) и justify (по ширине).
Элемент перехода к новой строке (BR)
Данный элемент завершает текущую строку и переходит к новой. В отличие от элемента "Абзац", BR не делает отступов от предыдущей строки и начинает следующую непосредственно под предыдущей. Конечный тег отсутствует.
Элементы, определяющие заголовки (Н1, Н2,..., Н6)
Вы уже, наверное, догадались, что в языке HTML присутствуют шесть типов заголовков. Это позволяет создавать иерархическое представление информации. Заголовок HI считается наиболее важным, чем заголовок не. Для всех шести типов элементов конечные теги обязательны. Пример использования заголовков приведен в листинге 6.5.
Листинг 6.5. Применение заголовков, абзацев, разрывов строк
<HTML>
<ТIТLЕ>Пример использования некоторых элементов<ТIТLЕ>
<BODY>
<Н1> Пример использования некоторых элементов </Н1>
Это просто строка. Обратите внимание, что эта, как и любая другая строка, автоматически переносится браузером, в зависимости от размеров его окна (разрешения экрана).
<Р> Это уже новый абзац. <ВR>Начнем новую строчку.
</BODY>
</HTML>
Необходимо отметить, что при написании Web-страниц не нужно заботиться о длине строк. Если одна строка не помещается внутри браузера целиком, то текст переносится на следующую строку, и т. д. Кроме того, с точки зрения отображения результата, не имеет значения, как дизайнер располагает строки HTML-кода. Это можно сделать даже в одну строку. Однако, с точки зрения удобства прочтения кода, следует каждый тег располагать с новой строки. Отображение листинга приведено на рис. 6.4. Обратите внимание на наличие вертикального отступа перед первой строчкой нового абзаца и отсутствие такового при использовании разрыва строк.
Рис. 6.4. Пример форматирования с использованием тегов <Н1>, <Р>, <BR>
Конечный тег обязателен. Текст, заключенный внутри пары тегов, отображается в браузере курсивом.
Элемент полужирного шрифта (В)
Аналогично элементу "Курсив", конечный тег необходим. Как следует из названия, этот элемент позволяет получить выделение полужирным шрифтом.
Элементы большого (BIG) и малого (SMALL) шрифтов
В обоих случаях конечные теги обязательны. Эти элементы указывают браузеру необходимость отображения текста, заключенного между открывающим и закрывающим тегами, в увеличенном (уменьшенном) виде. Возможно последовательное применение тегов для еще большего увеличения или уменьшения шрифта.
В листинге 6.6 участка кода страницы буквы слова "Привет" последовательно увеличиваются.
Листинг 6.6. Пример последовательного применения тегов <BIG> и <SMALL>
<BODY>
<Р>
<SMALL>
<SMALL>
<SMALL>П</SMALL>p</SMALL>и</SMALL>в<BIG>e<BIG>т
</BIG>
</BIG>
</P>
</BODY>
Поскольку в этом примере мы использовали форматирование на различные буквы одного слова, то расположение тегов "каждый с новой строки" невозможно, т. к. это привело бы к возникновению пробелов между символами, что недопустимо. Это, пожалуй, единственный случай, когда нельзя пользоваться данным правилом.
Для упорядочивания отображаемой информации в языке HTML предусмотрена возможность отображения строк и абзацев в виде упорядоченных и неупорядоченных списков. Списки могут быть вложенными, вне зависимости от их типа.
Элемент неупорядоченного списка (UL)
Определяет начало маркированного списка. Конечный тег обязателен.
Используется совместно с элементом списка LI. Появление этого элемента указывает браузеру, что начинается следующий элемент списка. Конечный тег </LI> необязателен, но может использоваться для более "прозрачного" и понятного представления исходного кода страницы. Наиболее интересен атрибут type. Он определяет маркер, которым будут отображаться элементы списка. Имеется три типа маркера: disk (•), circle (О), square (П).
Пример Web-страницы, содержащей маркированный список, а также ее отображение в браузере представлено в листиге 6.7 и на рис. 6.5 соответственно.
Листинг 6.7. Пример использования маркированного списка
<BODY>
<Р>Достоинства использования списков:
<UL>
<LI>Информативность.
<LI>Простота.
<LI>Единообразие представления информации.
<UL>
</BODY>
Рис. 6.5. Отображение страницы, фрагмент кода которой представлен в листинге 6.7
Элемент упорядоченного списка (OL)
В отличие от предыдущего элемента, тег <OL> открывает список, в котором элементы нумеруются. Этот элемент должен иметь закрывающий тег. Атрибут type устанавливает тип нумерации.
Для атрибута type определены значения, приведенные в табл. 6.1.
Таблица 6.1. Соответствие атрибутов type типам нумерации
|
Атрибут Туре |
Стиль нумерации |
|
|
1 |
Арабские цифры |
1,2,3, ... |
|
а |
Буквы нижнего регистра |
а, b, с, ... |
|
А |
Буквы верхнего регистра |
А, В, С, ... |
|
i |
Римские цифры в нижнем регистре |
i, ii, iii, ... |
|
I |
Римские цифры в верхнем регистре |
|, ||, |||, ... |
Если атрибут type не указывать, то список по умолчанию будет нумероваться арабскими цифрами. Пример использования стиля нумерации приведен в листинге 6.8.
Листинг 6.8. Пример упорядоченного списка
<BODY>
<Р>
Терпимость:
</Р> <OL type="I">
<LI>Позволяет остановить насилие.
<LI>Позволяет приобретать друзей.
<LI>Путь к миру.
<LI>Проявляется прежде всего дома.
</OL>
<Р> 16 ноября, согласно календарю UNESCO — международный день терпимости.
</Р>
</BODY>
Рис. 6.6. Отображение страницы, фрагмент кода которой приведен в листинге 6.8
Здесь представлены тезисы UNESCO о терпимости. Увидеть результат отображения Web-страницы в браузере можно на рис. 6.6.
Ссылки представляют собой связи между документами, посредством которых пользователь может легко загрузить в браузер новую страницу. Кроме того, они позволяют посылать электронную почту без явного ввода адреса и осуществлять навигацию по FTP-ресурсам. Справедливости ради, следует отметить, что представление FTP-сервера в виде Web-страницы генерируется непосредственно в браузере, однако в обычном HTML-файле можно смело делать ссылки на него.
Указывают браузеру на адрес документа, который должен быть загружен в браузер, после активизации ссылки нажатием кнопкой мыши или клавиши ввода с клавиатуры.
Для указания ссылок в языке HTML используется элемент A (anchor — якорь). Важнейшим атрибутом данного элемента является href, указывающий адрес ресурса, на который производится ссылка. Закрывающий тег обязателен. Простейший пример использования ссылки приведен в листинге 6.9.
Листинг 6.9. Пример использования элемента A
<BODY>
<Р>
Здесь находится <А href="http://www.bhv.ги">сайт Издательства BHV </А>
</Р>
</BOBY>
Приведенный в листинге 6.9 HTML-код отобразится, как показано на рис. 6.7.
Понятие об абсолютных и относительных URI-адресах
В приведенном в листинге 6.9 примере, в качестве адреса использовалась запись в виде http://www.MMH_cepBepa.ru. Данная запись определяет абсолютное положение необходимого источника, потому и называется абсолютным адресом.
Если ссылка указывает на документ в пределах одного сайта, то можно воспользоваться другим способом, привести относительную ссылку.
Рис. 6.7. Стандартное отображение ссылок
Например, если документ находится в одном каталоге со страницей, с которой производится ссылка, то можно в качестве адреса использовать просто имя нужного документа. В случае, когда файл находится в подчиненном, по отношению к исходной странице каталоге, то дополнительно указывается имя этого подкаталога. Пример использования различных видов ссылок показан в листинге 6.10.
Листинг 6.10. Пример использования абсолютных и относительных ссылок
<А href="http://www.m«w_cepBepa.com/contents/archive/
news/01012001.htm"> Здесь находятся новости первого дня нынешнего года" </А><А href="archive/news/01012001.htm" Та же самая ссылка, но адрес указан относительно текущего положения страницы </А><А href=" .../downloads/downloads.htm" здесь загрузится страница,абсолютный адрес которой будетhttp://www.HMH_cepBepa.com/downloads/downloads.htm
Приведенный выше код будет верным только в том случае, когда страница, в которой он находится, будет размещена в папке contents, относительно корневой папки сервера — каталога, на диске компьютера, на котором размещен сайт.
Благодаря использованию относительных ссылок, Web-мастеру или программисту, создающему сайт, не нужно каждый раз указывать полный URL документа. Кроме того, можно писать код страниц, особенно не заботясь об их конечном положении, т. е. безотносительно к названию в виде URL. При публикации (перемещении) информации нужно лишь сохранить структуру каталогов. Для явного определения абсолютного адреса необходимо использовать элемент BASE, который указывает абсолютный адрес текущего документа. Как правило, указывать его не требуется, однако в случае нарушений навигации, вызванных какими-то ни было причинами, указание абсолютного адреса позволит избежать потенциальных проблем. Данный элемент используется следующим образом (листинг 6.11).
Листинг 6.11. Пример использования тега <BASE>
<HTML>
...
<BASE href="http:\\myserver.com\dir\page.htm">
...
<HTML>
Как видно из примера, в параметре href нужно указывать полный адрес к странице, учитывая подкаталоги сервера, начиная с уровня, следующего за каталогом, в котором находится начальная страница (при условии, что информация на сайте размещена иерархически).
Иногда бывает очень полезным определять ссылки на некоторые разделы страниц. Например, когда документ очень велик или состоит из нескольких информационных блоков, то, разместив ссылку на определенный раздел, вы существенно облегчите пользователю чтение страницы. Кроме того, данная функция незаменима при создании содержания, предметного указателя и т. д.
Такая возможность обеспечивается именованием определенных частей Web-документа уникальными идентификаторами, с последующим указанием на них в ссылках. Пример использования ссылок на области Web-страницы, а также пометки этих областей приведены в листинге 6.12.
Листинг 6.12. Пример использования навигации по странице
<P><A href=#chapterl> Глава 1</A><BR>
<А href=fchapter2>Глава 2</A><BR>
<А href=#сhapterЗ>Глава 3</A><BR>
</Р>
<Н1 id="chapterl">Глава 1 <H1>
<Н1 id="chapter2">Глава 2 <Н1>
<Н1 id="chapter3">Глава 3 <Н1>
В данном примере, используя элемент "Заголовок", мы указали его идентификатор. Аналогичным образом, мы можем присваивать идентификаторы многим другим элементам языка HTML.
Кроме использования внутри документа, данный вид ссылок может быть применен во внешних ссылках. Например, если мы хотим сослаться на третью главу приведенного выше примера, то ссылка будет выглядеть следующим образом (листинг 6.13).
Листинг 6.13. Пример использования внешней ссылки на часть страницы
<А href="maypage.htm#chapter3"> Глава 3 <А>
Когда пользователь активизирует такую ссылку, то в его браузере загрузится указанная страница, причем положение просмотра будет совпадать с положением, отмеченным идентификатором.
Ссылки на адреса электронной почты
Если вы хотите облегчить пользователю отправку сообщения по электронной почте на указанный адрес, то поместите на странице ссылку в виде
<а href="mailto:address@hostmane.com"> Контакт со мной <А>
При ее активизации у пользователя запустится почтовый клиент, используемый по умолчанию, и на экране появится шаблон нового письма с уже указанным адресом получателя (в данном случае это будет address@hostmane.com).
Аналогичным образом создаются ссылки на FTP-ресурсы, только вместо протокола HTTP указывается FTP.
Нужно отметить, что параметры отображения ссылок (цвет, шрифт, подчеркивание и т. д.) удобнее всего указывать с помощью таблиц стилей, которые мы изучим позже.
Ссылки на файлы, отличные от Web-документов
Очень часто необходимо предоставлять пользователю возможность загружать с сайта различные архивы, приложения, офисные документы и т. д. Для реализации этого, указываются ссылки аналогично HTML-страницам, однако возможности для их отображения устанавливаются программным обеспечением пользователя. В любом случае, при активизации такой ссылки браузер выводит сообщение о названии загружаемого файла. Если в операционной системе данному типу файлов сопоставлено некоторое приложение, то пользователь может непосредственно открыть файл (разумеется, предварительно он будет загружен в кэш браузера). В противном случае, он может лишь сохранить его на диске компьютера.
Приложения, которые могут работать в качестве OLE-серверов, загружаются в окно браузера, и им передается на обработку открытый файл (как, например, Microsoft Word 97).
В настоящее время трудно представить более-менее содержательный документ или отчет без табличного отображения данных. Тем более, когда речь заходит о базах данных.
Кроме структурированного представления данных, таблицы в HTML играют еще одну важную роль абсолютного позиционирования текста и графики. Позже, на примере, мы обсудим этот аспект, а пока сосредоточимся на основных тегах и атрибутах, форматирующих таблицы.
Указывает начало таблицы. Конечный тег обязателен. Определены следующие атрибуты: wigth, cellpadding, cellspacing, border. Первый атрибут указывает область, занимаемую таблицей в окне браузера. Его значение может быть задано как процентами от доступной области, например wigth=50% означает, что каким бы ни было окно браузера, таблица будет занимать лишь половину этой области, так и количеством пикселов экрана, например wigth=900px значит, что ширина таблицы должна составлять 900 пикселов. Если окно браузера занимает меньшую ширину, то автоматически появится полоса прокрутки.
Обратите внимание, что минимальное значение ширины определяется самой длинной комбинацией слов. Это значит, что если значение wigth установлено, например, в 5 пикселов, а длина некоторого слова в одной из ячеек больше, то размеры таблицы будут автоматически увеличены. Код, приведенный в листинге 6.14 демонстрирует установку некоторых параметров отображения таблицы.
Листинг 6.14. Пример установки параметров таблицы
<TABLE wigth=5 px>
<TR> <TD> Экстраполяция
</TABLE>
Какое бы малое значение ширины таблицы в данном примере мы не установили, она будет определяться исходя из длины слова "Экстраполяция".
Следующий атрибут cellpadding указывает отступ содержимого ячеек таблицы от их границ.
Cellspacing устанавливает размер отступа между ячейками и полями вокруг таблицы. В приведенном в листинге 6.15 примере этот атрибут равен 10 пикселам. Как в предыдущем случае, это значение может быть задано как в пикселах, так и в процентах.
Листинг 6.15. Пример использования атрибутов cellpadding и cellspacing
<TABLE border="l" width="100%" cellspacing="10" cellpadding="3">
<TR>
<TD width="50%">Пepвaя ячейка</ТD>
<TD width="50%">Bторая ячейка. Обратите внимание на образовавшиеся отступы.</TD>
</TR>
</TABLE>
В соответствии с приведенным кодом в браузере мы получим страницу, приведенную на рис. 6.8.
Рис. 6.8. Атрибуты cellspacing и cellpadding устанавливают различные виды отступов
Атрибут border определяет ширину поля в пикселах вокруг таблицы.
Указывает заголовок для таблицы. Конечный тег обязателен.
Начинает новую строку таблицы. Конечный тег необязателен. Доступны атрибуты align и vaiign. Первый устанавливает выравнивание содержимого ячейки по горизонтали (left — выравнивание влево, right — вправо, center — по центру, justify — по ширине), второй — по вертикали (top — сдвиг содержимого вверх, middle — посередине, buttom — вниз, baseline — по единой базовой линии).
Пример, приведенный в листинге 6.16, демонстрирует влияние атрибутов на размещение текста в таблице.
Листинг 6.16. Пример таблицы
<TABLE wigth=50 px>
<CAPTION> Таблица1 </CAPTION>
<TR align=left valigh=top><TD> Строка 1.
<TR align=left valigh=middle><TD> Строка 2.
<TR align=left valigh=bottom><TD> Строка 3.
</TABLE>
Приведенный код будет отображен в браузере таким образом, как показано на рис. 6.9.
Рис. 6.9. Отображение таблицы, определенной в листинге 6.16, на экране
Начинает новую ячейку в данной строке. Конечный тег необязателен.
То же самое, что и предыдущий элемент, но текст в ячейке выделен как заголовок. Использование двух описанных элементов приведено в листинге 6.17.
Листинг 6.17. Пример использования элементов TD и TH
<TABLE>
<TR> <ТН> Первая ячейка первой строки <TD> Вторая...
<TR> <TD> Первая ячейка второй строки
</TABLE>
Код, приведенный в листинге 6.17, отобразится на экране следующим образом (рис. 6.10).
Рис. 6.10. Использование элементов TD и ТН
Если необходимо объединить ячейки По горизонтали или по вертикали, то в элементе то используется атрибут coispan или rowspan соответственно (листинг 6.18).
Листинг 6.18. Пример использования атрибутов colspan и rowspan
<TABLE border="l" width="100%">
<TR>
<TD width="66%" со1зрап="2">Эта ячейка занимает место двух</ТD>
<TD width="34%"> </TD>
</TR>
<TR>
<TD width="33%"> </TD>
<TD width="33%"> </TD>
<TD width="34%" rowspan="2">3Ta ячейка занимает место двух
тоже</ТD>
</TR>
<TR>
<TD width="33%">Snbsp;</TD>
<TD width="33%"> </TD>
</TR>
</TABLE>
Код, приведенный в листинге 6.18, на экране отобразится следующим образом (рис. 6.11).
Рис. 6.11. Пример объединения ячеек
Очень часто бывает необходимым в одном окне браузера отображать несколько страниц. Как правило, это совмещение различных панелей навигации по сайту и непосредственного содержимого страницы. Например, в приведенном на рис. 6.12 окне браузера отображаются сразу три Web-документа: слева и сверху присутствуют рубрикаторы, а в остальном пространстве — основная страничка.
Рис. 6.12. Пример фрейм содержащей страницы
Такое совмещение позволяет создавать одну или две странички для быстрого перехода по сайту, что повышает его функциональность и освобождает программиста от дублирования кода. Кроме того, при переходе по ссылкам данного ресурса не требуется перезагрузки рубрикаторов, что повышает скорость отображения информации.
Данное окно браузера разбивается на три фрейма (участка), в каждый из которых загружается соответствующий документ.
Рассмотрим код исходной страницы (листинг 6.19).
Листинг 6.19. Фрейм-содержащая страница
<HTML>
<HEAD>
<ТIТLЕ>Страница, которая определяет расположение фреймов</ТIТLЕ>
</HEAD>
<FRAMESET rows="64,*">
<FRAME name="banner" scrolling="no" noresize src="frl.htm">
<FRAMESET cols="150,*">
<FRAME name="contents" src="fr2.htm">
<FRAME name="main" src="fr3.htm">
</FRAMESET>
</FRAMESET>
</HTML>
Как видим, от обычной страницы этот пример отличается тем, что вместо непосредственно содержимого сайта указываются относительные размеры областей окна браузера со ссылками на страницы, загружаемые в обозначенные области. Рассмотрим используемые теги более подробно.
Определяет начало разбиения окна на фреймы. Имеет два атрибута: rows и cols. Использование первого атрибута указывает, что окно браузера должно быть разбито на две или несколько областей горизонтальной границей, применение второго — вертикальной. Размеры получаемых полей устанавливаются одним из следующих способов:
1. Указываются абсолютные значения ширины (высоты) фреймов. Например, команда <FRAMESET cols="100, 300, 400"> задает поле под левую страницу шириной в 100 пикселов, среднюю — 300, левую — 400. Выделение областей под фреймы при использовании атрибута rows происходит аналогично, но уже горизонтальными разделителями. Если ширина окна браузера окажется отличной от 800 пикселов, то занимаемое страницами место при использовании указанной команды будет разделено пропорционально указанным размерам.
2. Вместо абсолютных значений задаются относительные. Размер окна браузера принимается за 100%, а занимаемые страницами участки делятся пропорционально указанным процентным соотношениям. Например, команда <FRAMESET cols="12%,38%,50%"> определяет разбиение страницы на участки, аналогичные предыдущему примеру.
3. Комбинируются абсолютные и относительные значения размеров областей. Например, <FRAMESET cols="100, 3*, 4*">. При этом, левый фрейм всегда имеет фиксированную ширину в 100 пикселов, а остальное пространство распределяется в соотношении 3/7 для среднего и 4/7 для правого фрейма. Нетрудно догадаться, что при ширине окна браузера в 800 пикселов, его разбиение будет соответствовать двум предыдущим примерам.
Нужно отметить, что элементы FRAMESET могут быть вложенными, что позволяет создавать сложную разметку страницы. Кроме того, если атрибуты rows и cols применяются одновременно, то фрейм-содержащая страница разбивается в виде таблицы с числом ячеек, равным произведению этих двух атрибутов.
Разумеется, что после разбиения основной страницы на фреймы необходимо определить сами документы, загружаемые в них. Это делается с использованием элемента FRAME.
Служит для указания страницы, загружаемой во фрейм, а также параметров ее отображения. Имеет следующие основные атрибуты: name, src, noresize, scrolling, marginwidth, marginheight. Рассмотрим ИХ подробнее.
Замечание
Следует отметить, что существует возможность задания альтернативного содержимого фреймсодержащей страницы для браузеров, не поддерживающих фреймы. В последнее время таких браузеров становится все меньше и меньше, однако если вашими клиентами могут быть пользователи, например Windows 3.11 (на Западе таких клиентов по-прежнему много) или другой операционной системы со старым браузером, то необходимо позаботиться и о них, предусмотрев альтернативное содержимое страницы.
Задает область для альтернативного (безфреймового) содержания страницы. Конечный тег обязателен. Внутри этих тегов допустима разметка, такая же, как и для любой страницы. Пример кода фрейм-содержащей Web-страницы, предполагающего альтернативное представление в старых браузерах, приведен в листинге 6.20.
Листинг 6.20. Пример использования элементов FRAME, FRAMESET, NOFRAMES
<FRAMESET cols="135,*">
<FRAME name="left" scrolling="no" src="http://Iocalhost/html/fr3.htm">
<FRAMESET rows="20%,*">
<FRAME name="rtop" src=" http://localhost/html/frl.htm"> <FRAME name="rbottom" src=" http://localhost/html/fr2.htm">
</FRAMESET>
<NOFRAMES>
<BODY>
<Р>Эта страница создана с использованием фреймов.
Пожалуйста, обновите браузер.</р>
</BODY>
</NOFRAMES>
</FRAMESET>
При работе с фреймами очень часто бывает необходимым, чтобы страница, на которую делается ссылка, загружалась в другое окно фрейма или новый экземпляр браузера. Для этого используется атрибут ссылок target. Он -может принимать четыре предопределенных значения: _biank, _seif, _top, _parent, а также указывать на имя одного из фреймов окна. Например, если в примере, приведенном в листинге 6.20, из окна с именем "left" делать ссылку на некий документ, который должен загрузиться в окно с именем "пор", то ссылка должна выглядеть следующим образом:
<А href="somedocument.htm"target="rtop">Moи документ<А>
Если необходимо, чтобы после активизации пользователем ссылки для загружаемой страницы открылся новый экземпляр браузера, то значением атрибута target следует установить _biank. Так часто поступают на поисковых системах или при показах баннеров. Создателям этих ресурсов не выгодно, чтобы пользователь, переходя по ссылке, покидал сайт, и поэтому предусматривается возможность открытия нового окна браузера для каждой ссылки.
Значение _seif рассматриваемого атрибута обеспечивает загрузку новой страницы в то же самое окно фрейма, где находится страница со ссылкой.
При работе с фреймами бывает необходимо, чтобы загружаемая страница замещала фреймсодержащую. Это позволяют делать ссылки с атрибутом target, равным _top или _parent. Отличие этих значений заключается лишь в том, что при наличии нескольких уровней фреймов, последнее значение атрибута загрузит страницу вместо родительской для данного фрейма, а значение _top обеспечит загрузку во все окно данного экземпляра браузера.
Размещение мультимедиа-источников на странице
До сих пор мы вели речь только о текстовой информации, однако возможности языка HTML не ограничиваются простым текстом. В настоящее время наиболее распространено использование следующих мультимедийных ресурсов: GIF- и JPEG-изображения, Flash-ролики, Real Audio и MPEG-звукозаписи.
Размещение статических изображений
Большинство браузеров поддерживают внедрение на страницу GIF- и JPEG-картинок. Причем, если формат JPEG обеспечивает работу лишь с единственным изображением, то GIF позволяет создавать небольшие ролики из последовательно сменяющихся кадров. Для размещения таких графических данных на странице служит элемент IMG (от английского IMAGE — изображение).
Элемент IMG
Определяет внедряемое изображение и параметры его отображения в окне браузера.
Конечный тег запрещен. К основным атрибутам относятся: src, alt, height, width. Как вы уже, наверное, догадались, атрибут src указывает адрес для загрузки изображения.
Данный элемент может выступать в роли гиперссылки, если его поместить между открывающим и закрывающим тегами ссылки.
Поскольку многие пользуются сетью Интернет, отключая графику в браузере для ускорения загрузки страниц, а также еще остались программы для навигации по ресурсам сети, отображающие только текст, то необходимо задавать альтернативное представление разрабатываемых страниц для таких клиентов. Естественно, для этого не нужно создавать новые страницы, достаточно указать в атрибуте ait, описание рисунка, чтобы клиент мог понять его назначение и содержание. Использование атрибута alt при внедрении изображения в Web-страницу продемонстрировано в листинге 6.21.
Листинг 6.21. Пример определения альтернативного представления изображения
<HTML>
<ТIТLЕ>Это наш логотип</ТIТLЕ>
<BODY>
<P><IMG src="../../../images'/logo.gif" width="163" height="152"
alt="JIоготип организации">Это наш логотип.</Р>
</BODY>
</HTML>
В соответствии с кодом листинга 6.21, браузер может отображать указанный текст, как показано на рис. 6.13.
Рис. 6.13. Отображение рисунка в браузере (слева), и его альтернативного представления (справа)
Параметры height и width задают соответственно высоту и ширину области, занимаемой рисунком (в пикселах). Их использование позволяет программе просмотра Web-страниц формировать вид документа еще до окончания полной загрузки всех изображений, резервируя для них соответствующие поля. Кроме того, работая в режиме с отключенной графикой, клиент не обнаружит визуальных нарушений в представлении страницы (за исключением, разумеется, отсутствия картинок).
Другие атрибуты тега <IMG> будут рассмотрены позже.
Следует отметить, что этот тег может встречаться практически в любом месте HTML-документа: в таблицах, посреди текстовых строк, в качестве элементов отображения ссылок и т. д. Ниже будет приведен пример, иллюстрирующий это.
Несколько замечаний к подготовке и размещению графики
Прежде всего, начиная готовить сайт, следует убедиться, что вам доступна программа, работающая с растровыми изображениями. Это могут быть, например, Adobe Photoshop или Corel PhotoPaint. При подготовке иллюстраций не следует пользоваться стандартными наборами картинок, широко доступными в Интернете и на различных компакт-дисках. Эти картинки очень часто повторяются на сайтах, и у пользователя может сложиться впечатление, что вы не очень разборчивы в предоставляемой информации. Кроме того, скорее всего, размещение таких картинок вызовет нарушение стиля и цветовой гаммы вашего ресурса. Намного лучше все это подготовить самостоятельно, либо вообще отказаться от излишней графики. Стоит отметить, что существуют целые порталы, практически не использующие графику, но в тоже время являющиеся очень стильными и привлекательными. При сохранении изображений, в которых встречаются переливы цветов, лучше пользоваться форматом JPEG, а контрастных, с четко очерченными границами цветов — GIF. Многие Web-мастера предупреждают, что в совокупности (т. е. исходный HTML-файл плюс вся графика) страница должна занимать не более 50 Кбайт. В противном случае, рядовой пользователь ее покинет, так и не дождавшись загрузки.
Перед размещением на странице каждый файл картинки должен пройти оптимизацию, благодаря чему его размер будет существенно уменьшен.
Если графическое изображение очень велико, то для ускорения загрузки используют разбиение рисунка на составные части, с последующим совмещением с помощью таблицы. Рассмотрим пример. Пусть у нас имеется картинка размером 300x300 пикселов. "Разрежем" ее на куски, а затем разместим их в таблице. Исходный код такого преобразования приведен в листинге 6.22.
Листинг 6.22. Пример простейшей таблицы, содержащей фрагменты одного рисунка
<HTML>
<TABLE border="0" cellspacing="0" cellpadding="0">
<TR>
<TD><img src="partl .gif "></TD>
<TD><img src="part2.gif"></TD>
<TR>
<TD><img src="part3.gif"></TD>
<TD><img src="part4 .gif"x/TD>
</TABLE>
</HTML>
И вот как эта картинка будет "собрана" в браузере (рис. 6.14).
Рис. 6.14. Формирование единого изображения из фрагментов
Для создания анимированных GIF-роликов следует применять соответствующие инструментальные средства, как, например, Ulead GIF Animator. Особенно важно использование анимации при изготовлении баннеров, когда необходимо привлечь внимание потенциальных посетителей к ресурсу.
Специальные символы, используемые в языке HTML
Поскольку HTML-документ представляет собой обычный текстовый файл, в котором находятся как элементы разметки Web-страницы, так и собственно полезная информация, необходимо отделять одно от другого. Это значит, что для того, чтобы отобразить в окне браузера, например, саму HTML-разметку, нужно ее соответствующим образом представить, чтобы браузер мог отличить, где находятся HTML-теги, которые нужно интерпретировать и соответствующим образом графически представлять, а где — полезная информация. При попытке, например, загрузить страницу, описанную в листинге 6.23, возникнет ошибка.
Листинг 6.23. Пример неправильной разметки
<HTML>
<Р> Код первой Web-страницы одного из авторов...<BR>
<Н4> <HTML>
<Р> Hello World!
</HTML>
<Р> Она, конечно, очень проста.
</Н4>
</HTML>
Как только браузер прочтет следующие за тегом <Н4> символы, он будет вынужден обрабатывать ошибку, поскольку, не закончив форматирование документа, он встретит служебный тег, указывающий начало нового документа.
Корректный код, соответствующий предыдущему примеру, должен выглядеть следующим образом (листинг 6.24).
Листинг 6.24. Исправленный документ
<HTML>
<Р> Код первой Web-страницы одного из авторов...<BR>
<Н4> <HTML>
Slt;P> Hello World!
</HTML>
<P> Она, конечно, очень проста.
</Н4>
</HTML>
В этом листинге символ < заменен на комбинацию ⁢, а символ > — на sgt,-. Таким образом, браузер получает информацию о том, что комбинацию, например, вида ⁢HTML> следует отображать как <нтмь>, но не ин-тепретировать это как тег. Во избежание путаницы в теле документа вообще запрещено использовать ряд следующих символов:
Кроме указанных здесь символов иногда нужно в тело HTML-документа вставлять символы (из кодировки ASCII), которых может просто не оказаться на клавиатуре и, которые могут быть неверно интерпретированы браузером, например знак ±. Для этого нужно просто применять конструкцию ±, где последние три цифры соответствуют десятичному номеру данного символа в кодировке ASCII.
В настоящее время таблицы стилей играют очень важную роль в разметке Web-страниц. Если ранее даже не все браузеры поддерживали эту технологию, то последние стандарты языка HTML все большее число атрибутов рекомендуют устанавливать через таблицы стилей. Более того, с выходом каждой новой спецификации, многие атрибуты тегов объявляются устаревшими или нежелательными с расчетом на установку требуемых свойств с помощью таблиц стилей. Поэтому этой теме следует уделить максимум внимания, несмотря на то, что некоторые свойства отображения шрифтов, например, можно установить, обходясь без использования таблиц стилей.
Что же такое таблицы стилей и для чего они нужны?
Представьте ситуацию, когда на вашем сайте должно быть размещено свыше сотни Web-страниц. Разумеется, исходя из требования стилистической целостности, они должны быть выполнены на основании одних и тех же дизайнерских решений. Это значит, что если, скажем, применяется выравнивание основного текста по высоте на одной странице, то точно так же должно быть и на остальных. Если заголовки должны выполняться красным курсивом, то на всех документах. А представьте ситуацию, когда нужно использовать, например, пять или шесть различных стилей? Работа по написанию страниц плавно перейдет в кропотливый и однообразный труд по установке нужных атрибутов.
Строго говоря, мы не вводили описание элементов или атрибутов, посредством которых можно сделать вышеуказанные вещи. Те, кто знаком с языком HTML версии 3.2, наверняка обратили на это внимание. Сделано это потому, что, во-первых, для упрощения процесса создания Web-страниц стоит с самого начала активно использовать таблицы стилей, а во-вторых, все основные атрибуты элемента FONT, который определяет параметры шрифта, в спецификации HTML 4.0 объявлены нежелательными, из чего следует вывод, что консорциум W3C собирается его признать устаревшим элементом.
При использовании таблиц стилей (Cascading Style Sheets — CSS) Web-мастер может единожды определить представление элементов форматирования как для всего сайта, так и для отдельного документа. Ему доступна установка цвета, размера, начертания шрифтов, фона, абсолютное позиционирование текстовых и графических информационных блоков и т. д. Кроме того, непосредственно в документе можно переопределить свойства отдельных элементов.
Итак, в языке HTML существует три основные возможности для определения стиля:
1. В виде отдельного стилевого файла. Все Web-страницы, ссылающиеся на данный стилевой файл, будут наследовать указанные в нем параметры представления документа.
2. Внутри отдельного документа. В этом случае в тело HTML-документа вводят отдельный специальный блок, в котором заключена вся стилевая информация.
3. При указании некоторого элемента форматирования внутри тега (рядом с атрибутами) указываются параметры стиля.
Поскольку реализация всех этих возможностей определения стилей практически одинакова, то мы будем рассматривать определение стилей на примере отдельной страницы, с выносом дополнительного стилевого блока (второй вариант).
Элементы, к которым будет применено указанное стилевое оформление, могут задаваться несколькими возможными вариантами.
1) Перечислением элементов языка HTML, к которым необходимо применить указанное оформление. Пример, приведенный в листинге 6.25, установит цвет заголовков и полужирного шрифта красным:
Листинг 6.25. Изменение цвета заголовков и полужирного шрифта
<STYLE type="text/css">
HI, H2, НЗ, Н4, Н5, Н6, В (color: red;)
</STYLE>
В этом примере, как видим, внутри тегов <STYLE> заключено перечисление элементов, к которым будут применены параметры форматирования, указанные в фигурных скобках. Это общее правило записи определения стилей: сначала записываются названия признаков, определяющих объекты, к которым и будет применяться форматирование (в данном случае — это названия элементов), а затем в скобках записываются попарно свойство и устанавливаеме значение, между которыми вставляется двоеточие. Последовательное определение нескольких свойств разделяется точкой с запятой.
Если мы хотим, чтобы элементы форматирования были применены к данным, заключенным в теги, в определенной последовательности, то запятые, разделяющие их названия, в указании стиля нужно опустить. В этом случае, как только в тексте HTML-документа встретится указанная комбинация, к данным, содержащимся внутри них, будет автоматически применено указанное форматирование.
2) В рамках документа можно образовывать классы, как наборы некоторых элементов. До сих пор мы не отмечали существования этого атрибута, и поэтому заметим, что он определен практически для всех элементов языка HTML. Таким образом, группируя элементы по классам, очень удобно указывать их форматирование.
Например, пусть в документе есть две таблицы с двумя типами ячеек. В первом типе содержится старая цена на товар, а во втором — новая. Разумеется, для привлечения внимания к сниженным ценам для них нужно использовать иное, более броское форматирование, нежели к прежним. Покажем, как это реализуется (листинг 6.26).
Листинг 6.26. Пример использования классов элементов : для определения форматирования
<HTML>
<HEAD>
<МЕТА http-equiv="Content-Type" content="text/html; charset=windows-1251">
<ТIТLЕ>Наши новые цены!</TITLE>
<STYLE type="text/css">
.name (color:black; font-style:italic; font-weight:bold; font-size:12pt;}
.new {color:red; font-weight:bold; font-size:25pt;}
.old {color:black; font-style:italic; font-size:12pt;}
</STYLE>
</HEAD>
<BODY>
<TABLE border="0" width="100%">
<TR>
<TD width="25%" class="name"x/TD>
<TD width="25%" с1аss="name">Клей</ТD>
<TD width="25%" с1аss="name">Кирпич</ТD>
<TD width="25%" с1аss="name">Обои</ТD> </TR> <TR>
<TD width="25%" с1аss="name">Новая цена</ТD>
<TD width="25%" class="new">18 p.</TD>
<TD width="25%" class="new">50 p.</TD>
<TD width="25%" class="new">30 p.</TD> </TR> <TR>
<TD width="25%" с!аss="пате">Старая цена</ТD>
<TD width="25%" class="old">22 p.</TD>
<TD width="25%" class="old">64 p.</TD>
<TD width="25%" class="old">35 p.</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Приведенный листинг имеет представление в браузере, как на рис. 6.15.
Рис. 6.15. Вид таблицы, отформатированной с использованием классов
Также можно указывать стиль для определенных элементов класса. В данном примере все экземпляры класса принадлежат к одному виду то. Если объявить другой элемент, например "Абзац" (р) принадлежащим к классу new, то текст, следующий после указания тега, будет выглядеть подчеркнутым и иметь размер в 20 точек. В случае, когда форматирование нужно отнести только к данному конкретному элементу, используется другая запись в стилевых характеристиках. Модифицируем пример (листинг 6.27) таким образом, чтобы текст, заключенный в теги-экземпляры класса new, имел фон серого цвета только в ячейках таблицы.
Листинг 6.27. Пример дополнительного указания элементов класса при определении стилей
<STYLE type="text/css">
.name {color:black; font-style:italic; font-weight:bold; font-size:12pt;}
.new {color:red; font-weight:bold; font-size:25pt;}
.old {color:black; font-style:italic; font-size:12pt;}
TD.new {background-color: gray}
</STYLE>
Если Web-страница содержит несколько различных элементов, отнесенных к классу new, то только ячейки таблиц, принадлежащих данному классу, будут иметь зеленый фоновый цвет.
3) При описании стилей можно непосредственно задавать элементы, к которым будет применено данное оформление. Достигается это путем использования уникальных идентификаторов. Каждый элемент форматирования может иметь атрибут id, который отличается от класса тем, что его значение должно быть уникально для данного HTML-документа, т. е. не должно в нем повторяться. Использование уникальных идентификаторов удобно тем, что для определенного элемента из класса можно задать дополнительные свойства, как, например, показано в примере, приведенном в листинге 6.2Ь.
Листинг 6.28. Пример использования идентификаторов для работы со стилями
<STYLE type="text/css">
.name {color:black; font-style:italic; font-weight:bold; font-size:12pt;}
.new {color:red; font-weight:bold; font-size:25pt;}
.old {color:black; font-style:italic; font-size:12pt;}
#newprice {text-decoration: underline)
</STYLE>
...
<TD width="33%" class="name" id="newprice">Hoвая цена</ТD>
...
Если мы изменим соответствующие строчки кода примера, приведенного в листинге 6.26, то текст "Новая цена" в таблице станет подчеркнутым. Вместо указания идентификатора и предварительного описания стиля данного элемента, параметры форматирования можно задавать непосредственно в атрибуте тега:
<TD width="33%" class="name" style="text-decoration: underlined Новая цена</ТD>
Эффект получится тот же самый.
Существует возможность для задания стилевых свойств различным состояниям элементов. Ссылка (А) имеет четыре возможных "состояния": обычная, уже просмотренная, активная (загружаемая в данный момент времени) и находящаяся под указателем мыши. В соответствии с этим, для ссылок имеется возможность использования четырех возможных отображений (листинг 6.29), определяемых путем использования зарезервированных слов link, visited, active, hover соответственно.
Листинг 6.29. Пример указания различных стилей для ссылок данного документа
<STYLE>
A: link {color: black}
A: visited {color: gray}
A: active {color: red}
A: hover {color: Yellow; font-size: 25pt;}
</STYLE>
Создавая страницу, использующую эти четыре вида отображения ссылок, можно добиться интересных эффектов.
Познакомившись со способами задания стилевых характеристик, перейдем непосредственно к рассмотрению их видов.
Стилевые параметры элементов Web-страниц
Все элементы стиля, влияющие на отображение Web-страниц в окне браузера, можно разделить на четыре основные группы: свойства шрифтов, свойства текста, свойства цвета и фона, свойства стилевых блоков. Последний элемент обеспечивает выделение некоторого участка Web-страницы в виде своеобразной надписи, позволяя ее абсолютно позиционировать, определять рамки вокруг нее, и т. д.
Свойства отображения символов в Web-странице, определяемые посредством использования каскадных таблиц стилей, собраны в табл. 6.2.
Таблица 6.2. Свойства, определяющие отображения шрифтов
|
Название свойства |
Возможные значения |
Описание значений |
|
font-family |
arial times monospace |
Устанавливает шрифт для элементов, находящихся в области действия форматирования |
|
font-size |
1.3 cm 12 px 80% |
Размер символов в сантиметрах Размер символов в пикселах Размер символов в процентах от текущего |
|
xx-small |
Установка шрифта в самый малый |
|
|
x-small |
Установка шрифта в чуть крупнее |
|
|
small |
Установка шрифта в малый |
|
|
medium |
Установка шрифта в средний |
|
|
large |
Установка шрифта в большой |
|
|
x-large |
Установка шрифта в чуть больший |
|
|
xx-large |
Установка шрифта в самый большой |
|
|
smaller |
Установка шрифта на один пункт меньше |
|
|
larger |
Установка шрифта на один пункт больше |
|
|
font-style |
italic |
Курсивное начертание |
|
normal |
Обычное начертание |
|
|
oblique |
Наклонное начертание |
|
|
font -weight |
bold |
Жирный шрифт |
|
normal |
Обычный шрифт |
|
|
любое значение от 100 до 900 |
Степень жирности соответствует указанной цифре |
|
|
font-variant |
small-caps |
Замена прописных символов заглавными |
|
normal |
Оставление символов без изменения |
|
|
font |
Любые значения font-family, |
Позволяет устанавливать одно значение из вышеуказанных свойств |
|
font-size, |
||
|
font-style, |
||
|
font-weight, |
||
|
font-variant |
Рассмотрим пример использования этих свойств (листинг 6.30).
Листинг 6.30. Изменение свойств отображения шрифтов
<BODY>
<Р style="FONT-WEIGHT: 900; FONT-SIZE: xx-large; FONT-STYLE: italic;
FONT-FAMILY: monospace; FONT-VARIANT: normal">Текст1</Р>
<P style="FONT: зта11-сарз">Текст2</Р>
</BODY>
Замечание
Обратите внимание, что в данном примере мы воспользовались третьим (Inline) способом задания стиля.
Свойства отображения текстовых блоков в Web-странице, определяемые посредством использования каскадных таблиц стилей, собраны в табл. 6.3.
Таблица 6.3. Описание свойств текста
|
Название свойства |
Возможные значения |
Описание значений |
|
letter-spacing |
10 px 1 cm |
Задает расстояние между символами в пикселах или сантиметрах |
|
text-decoration |
underline |
Подчеркивание текста |
|
line-through |
Перечеркивание текста |
|
|
none |
Отсутствие этих свойств |
|
|
vertical-align |
baseline, sub, top, text-top,. |
Вертикальное выравнивание относительно других элементов |
|
bottom, text-bottom 160% |
Используются ключевые слова или проценты |
|
|
text-transform |
capitalize |
Преобразование символов к заглавным |
|
uppercase |
Преобразование символов к верхнему регистру |
|
|
lovercase |
Преобразование символов к нижнему регистру |
|
|
text-align |
left |
Выравнивание по левому краю |
|
right |
Выравнивание по правому краю |
|
|
center |
Выравнивание по центру |
|
|
justify |
Выравнивание по ширине |
|
|
text- indent |
10 px, 10 cm, 20% |
Расстояние перед первой строкой текста |
|
line-height |
10 px, 10 cm, 20% |
Междустрочный интервал |
Для определения цветов и параметров фона можно обратиться к параметрам, которые представлены в табл. 6.4.
Таблица 6.4. Свойства цвета и фона
|
Название свойства |
Возможные значения |
Описание значений |
|
color |
black |
Установка значений цвета в: черный |
|
silver |
серебряный |
|
|
gray |
серый |
|
|
white |
белый |
|
|
maroon |
коричневый |
|
|
red |
красный |
|
|
purple |
пурпурный |
|
|
fuchsia |
фуксия |
|
|
green |
зеленый |
|
|
lime |
лимонный |
|
|
olive |
оливковый |
|
|
yellow |
желтый |
|
|
navy |
синий |
|
|
blue- |
голубой |
|
|
teal |
коричнево-серый |
|
|
aqua |
бирюзовый |
|
|
#OFOFOF |
шестнадцатеричное представление цвета в виде набора трех интенсив-ностей красного, зеленого и голубого. Каждый компонент изменяется от 00 до FF (в десятичном представлении от 0 до 255) |
|
|
background-color |
red #OFOFOF |
Установка цвета фрагмента документа в одно из допустимых значений |
|
transparent |
Прозрачный |
|
|
background- image |
bg.gif |
Адрес к файлу, содержащему фоновое изображение |
|
background- repeat |
repeat |
Устанавливает повтор фонового изображения для данного участка страницы |
|
repeat-x |
Устанавливает повтор по высоте |
|
|
repeat-y |
Устанавливает повтор по ширине |
|
|
no- repeat |
Запрещает повтор |
|
|
background- attachment |
Scroll |
Прокрутка фонового изображения вместе со страницей |
|
fixed |
Запрет на прокрутку |
|
|
background-position |
20 px, 40 px |
Отступ от верхнего левого угла фонового изображения по горизонтали и вертикали соответственно в пикселах |
|
top, middle, bottom |
Вертикальное расположение фона |
|
|
left, center, right |
Горизонтальное расположение фона |
|
|
10%, 30% |
Смещение отображаемой области фонового изображения, относительно его размеров |
|
|
background |
Любое из перечисленных выше свойств |
Позволяет устанавливать одно значение из вышеуказанных свойств |
Применим указание цветовых характеристик для всей страницы, вписав соответствующие свойства стиля в тег <BODY> (листинг 6.31).
Листинг 6.31. Изменение цветовых свойств документа
<HTML>
<BODY style="BACKGROUND-POSITION: 20px 50px; BACKGROUND-IMAGE:
url(d:\fon.jpg); BACKGROUND-REPEAT: repeat-x; BACKGROUND-COLOR: #f0ff00">
<P style="COLOR: black">3To пример использования фонового изображениям</Р>
</BODY>
</HTML>
Обратите внимание, как приведенный код будет отображен в браузере (рис. 6.16).
Рис. 6.16. Пример изменения фонового цвета, изображения, режима повтора,, отступов
Мы видим, что фоновая картинка появляется не в самом верху, а с отступом в 50 пикселов. Горизонтальный отступ тоже есть, но он заполняется участком изображения, поскольку установлено дублирование фона по горизонтали. Также следует заметить, что та часть страницы, на которой нет фона, заполнена цветом заднего плана.
Стилевые характеристики, задаваемые в масштабах целого блока, описаны в табл. 6.5.
Таблица 6.5. Свойства стилевых блоков
|
Название свойства |
Возможные значения |
Описание значений |
|
margin-top |
12 рх |
Задает отступ верхней границы блока |
|
margin-bottom |
1 cm |
Задает отступ нижней границы блока |
|
margin-right |
17% |
Задает отступ правой границы блока |
|
margin-left |
auto |
Задает отступ левой границы блока |
|
Margin |
100 px, 140 px, 12 px, 13 px |
Последовательно задаются отступы: сверху, справа, слева, снизу, т. е. установлены сразу все значения отступов |
|
10 px, 15 px, 20 px |
Если задано одно значение, то все отступы одинаковы, если два, то первое расстояние соответствует верхнему и нижнему, а второе — правому и левому отступам |
|
|
padding-top |
12 px |
Отступ содержимого блока от его верхней границы |
|
padding-bottom |
1 cm |
Отступ содержимого блока от его нижней границы |
|
padding-right |
17% |
Отступ содержимого блока от его правой границы |
|
padding- left |
auto |
Отступ содержимого блока от его левой границы |
|
Padding |
100 px, 140 px, 12 px, 13 px |
Задает все поля внутри блока сразу |
|
10 px, 15 px, 20 px |
Два или одно значение имеет тот же смысл, что в аналогичных случаях элемента margin |
|
|
border-top-width |
4 px |
Ширина верхней границы блока |
|
border-bottom-width |
thin (тонкая линия) |
Ширина нижней границы блока |
|
border-right-width |
medium (средняя линия) |
Ширина правой границы блока |
|
border-left-width |
thick (толстая линия) |
Ширина левой границы блока |
|
border-width |
1 px, 2 px, 3 px, 4 px |
Задается толщина линий по принципу, аналогично отступам |
|
border-color |
Значения, аналогичные свойству color Black, Silver и т.д. |
Определяет цвет границ блока |
|
border-style |
Формат линии границ: |
|
|
solid |
Одинарная линия |
|
|
double |
Двойная линия |
|
groove, ridge, inset, outset |
Различные типы декоративных цветовых решений |
|
|
none |
Линия отсутствует |
|
|
border-top |
4 px, gray ridge |
Задает сразу все значения стиля для верхней границы. Для остальных границ можно задавать все значения аналогично |
|
Border |
gray, 10 px outset |
Устанавливает сразу все характеристики границ |
|
Width |
8 cm |
Устанавливает ширину блока |
|
Height |
300 px |
Устанавливает высоту блока |
|
Float |
left right none |
Определяет сторону, которая будет обтекаться другими элементами документа |
|
Clear |
left right none both |
Определяет сторону, с которой запрещено обтекание другими элементами |
Замечание
Цвет (border-color) и стиль (border-style) линий можно задавать аналогично ширине границы блока — раздельно для каждой из них.
Покажем применение данных свойств (листинг 6.32).
Листинг 6.32. Работа со стилевыми блоками
<BODY>
<Р style="FONT-WEIGHT: 400; FONT-SIZE: xx-large; TEXT-ALIGN: center;
FONT-VARIANT: small-caps">
Страницы стилей — это мощный инструмент
</Р>
<Р style="MARGIN-TOP: -50px; FONT-WEIGHT: 400; FONT-SIZE: 60pt; COLOR:
gray; TEXT-ALIGN: center; FONT-VARIANT: small-caps">Yes!!!</P>
</BODY>
В браузере данный пример будет выглядеть следующим образом (рис. 6.17).
Рис. 6.17. Абсолютное позиционирование с помощью стилей
Этот пример демонстрирует не только задание обычных характеристик текста, но и его позиционирование (наложение элементов), чего невозможно добиться без использования каскадных таблиц стилей.
Несколько замечаний по поводу практической реализации стилей и наследования
Прежде всего необходимо отметить, что таблицы стилей не являются элементами языка HTML. Ранее они вообще не использовались для форматирования Web-страниц. Хотя, разумеется, возможности языка HTML в чистом виде намного более скудны, чем с использованием таблиц стилей. С выходом спецификации HTML 4.0 можно уловить явную тенденцию к снижению роли элементов и атрибутов языка в плане разметки текста и изображений. С другой стороны, те конструкции, которые объявлены устаревшими, рекомендуется реализовывать с использованием таблиц стилей. Вообще, если оглянуться на структуру изложенного материала, то можно заметить, что стилевые характеристики очень органично вписываются в концепцию языка HTML. Так что же такое каскадные таблицы стилей (Cascading Style Sheets — CSS)? Это язык, который создан для улучшения дизайнерских возможностей языка HTML, и, как видим, плавно заменяет многие его конструкции. Поскольку CSS — это отличный от HTML язык, его поддержка определяется типом используемого браузера (стоит отметить, что самые популярные из них, его поддерживают).
Элементы DIVw SPAN— контейнеры стиля
Для того чтобы описать с определенными стилевыми характеристиками произвольное число элементов, а также сгруппировать их по этим признакам, используется элемент DIV. Он позволяет создавать что-то вроде нового слоя, применяя к нему абсолютное позиционирование. Следует отметить, что он, как никакой другой элемент, позволяет реализовывать дизайнерские изыски.
В случае, когда нужно отобразить один элемент на базе новых стилевых характеристик, используется элемент SPAN.
Пример использования контейнера стилей приведен в листинге 6.33.
Листинг 6.33. Возможное использование контейнера стиля DIV
<DIV style="cTnneBbie параметры ">
...любое HTML-содержимое...
</DIV>
Обратите внимание, что когда мы изменяли некоторые стилевые параметры элементов, то остальные, оставаясь без изменения, имели либо значения по умолчанию (например, цвет шрифта — черный), либо установленные прежде. Поэтому эти стилевые таблицы называют каскадными — установка свойств может происходить поэтапно, переопределяя атрибуты нужных элементов, не изменяя глобальных свойств стиля (разумеется, что это тоже допустимо). Пример наследования стилевых харектеристик приведен в листинге 6.34.
Листинг 6.34. Пример наследования стиля
<STYLE type="text/css">
.name (color:black; font-style:italic; font-weight:bold; font-size:12pt;}
.new {color:red; font-weight:bold; font-size:25pt;}
.old {color:black; font-style:italic; font-size:12pt;}
H1.new {color: blue; background-color: gray;}
</STYLE>
Здесь, для элементов класса new определен цвет шрифта красный, полужирное начертание, и размер в 25 точек. При этом для заголовков дополнительно определен цвет фона и переопределен цвет шрифта. Это и есть классический пример наследования свойств класса (в рассматриваемом примере на^ следуются размер и начертание шрифта, а также установки браузера для текста по умолчанию).
Практическая реализация стилей
В рассмотренных выше примерах, как правило, использовались стилевые блоки внутри страниц. Для определения стилевого блока применяется элемент STYLE в формате, приведенном ниже.
Кроме этого способа для реализации стиля может использоваться атрибут style HTML-элементов, как показано, например, в листинге 6.35.
Листинг 6.35. Пример использования атрибута style
<IMG style="border-width: 0 рх" src="foto.gif">
В результате такого применения атрибута style, картинка из файла foto.gif не будет иметь рамки.
И последний вариант реализации стиля заключается в вынесении стилевых установок в отдельный файл. Это должен быть простой текстовый файл с разширением css, в котором и собирается информация о стиле. Такой вариант удобен, когда несколько страниц имеют общие параметры. Рассмотрим стилевой файл global.css (листинг 6.36).
Листинг 6.36. Пример стилевого файла
body { background: white; color: black;}
A: link {color: black;}
A: visited {color: gray;}
A: active {color: red;}
A: hover {color: Yellow;}
HI {color: red;}
IMG { border-width: 0 px}
Как видим, синтаксис в файле точно такой же, как и внутри тегов <STYLE>. Если приведенный выше листинг записать в файл global.css, который затем поместить в каталог с Web-страницами, то для использования указанных стилевых свойств страницей, в нее нужно поместить следующую ссылку на стилевой файл:
<LINK rel="stylesheet" type="text/css" href="global.css">
Любая страничка сервера, содержащая эту ссылку, наследует свойства шрифта, ссылок, отсутствие рамок вокруг изображений и т. д.
Разумеется, при необходимости, свойства можно переопределить уже внутри странички, используя элемент или атрибут STYLE.
И последнее, многие свойства CSS работают лишь при их указании в качестве значения атрибута style.