HTML верстка, HTML коды, Каскадные таблицы стилей, Форматированные списки, Гиперссылки и Сети, Мультимедийные елементы Каскадные таблицы стилей, Форматированные списки, Гиперссылки и Сети, Мультимедийные елементы

Формат обмена графикой (Graphics Interchange Format, GIF) был изначально
разработан для передачи изображений между пользователями онлайновой
службы CompuServe. У этого формата обнаружилось несколько черт,
сделавших его популярным при употреблении в HTML и XHTML
документах. Его кодировка является платформно независимой, так что,
используя подходящую программу декодер (встроенную в большинство
броузеров), вы можете, например, без особых хлопот загрузить и просматривать
на персональном компьютере с Windows изображение, созданное и
превращенное в GIF файл на Macintosh.
Вторая главная черта GIF – это применяемая при создании файла особая
технология сжатия, которая существенно сокращает его размер, что позволяет
передавать изображение по сети быстрее. Сжатие в GIF производится
«без потерь» – никакие данные исходного образца не удаляются и не
изменяются, так что в распакованном виде изображение точно совпадет с
оригиналом. Кроме того, GIF изображения легко анимировать.

Хотя все файлы с GIF изображениями неизменно обозначаются именами с
расширением .gif (или .GIF), существует две версии GIF – ориги
нальная GIF87 и расширенная GIF89a, которая поддерживает несколько новых возможностей, распространенных у сетевых авторов, включая прозрачный фон, чересстрочное хранение и анимацию. Популярные броузеры в настоящее время поддерживают обе версии GIF, использующие одинаковую схему кодировки,
которая представляет собой карту значений цвета пиксела. Сами коды берутся
из встроенной в файл восьмибитной таблицы (палитры), что дает не более 256
различных цветов в изображении. В большинстве случаев употребляется
меньше цветов: для этого применяются специальные средства, упрощающие
слишком богатую палитру графики. При упрощении GIF изображений
создается палитра меньшего размера и увеличивается избыточность данных в попиксельном представлении, что влечет за собой лучшее сжатие файла и,
следовательно, более быструю его загрузку.

Тем не менее ограниченный размер палитры делает GIF формат не
пригодным для фотореалистических картинок (см. раздел 5.2.1.3).
GIF идеально подходит для создания пиктограмм, цветных картинок
с ограниченным набором цветов и рисунков.

Поскольку в большинство графических броузеров встроена поддержка
данного формата, такое кодирование изображений является самым
распространенным в сети. Оно подходит как для внедренных в документ
изображений, так и для внешних, подключенных по гиперссылке. При
любых сомнениях используйте GIF.1 Это сработает почти всегда.

Ни HTML, ни XHTML не дают официальных предписаний для формата
изображений. Однако популярные броузеры особенно хорошо при
способлены для работы с определенными форматами, в частности GIF,
PNG и JPEG (объяснения в следующих разделах). Большинство других
мультимедийных форматов требуют, чтобы пользователь приобрел,
установил на своем компьютере и научился успешно применять
специальные вспомогательные программы. Поэтому неудивительно,
что GIF, PNG и JPEG de facto являются стандартами для изображений
в сети.

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

Одной из наиболее подкупающих черт HTML и XHTML является предоставляемая
ими возможность включать в текстовый документ изображения либо в виде
встроенных компонентов (внедренных изображений), либо отдельных документов, которые могут быть загружены с помощью соответствующей гиперссылки, либо
в виде фона документа. Изображения – статические и анимированные
пиктограммы, картинки, иллюстрации, рисунки – могут при умеренном их
употреблении сделать документ более привлекательным, зазывающим и
профессиональным, так же как и более информативным и легким для изучения.
Помимо этого существуют способы включения изображения в качестве карты гиперссылок. Однако чрезмерное количество изображений загромождает документ, делает его запутанным и труднодоступным, а заодно увеличивает время, которое необходимо пользователю для загрузки и просмотра ваших страниц.

Горизонтальные линейки помогают читателю зрительно ориентироваться
в документе. Чтобы эффективно использовать тег <hr> для отделения
друг от друга частей документа, прикиньте вначале, сколько в нем будет
уровней заголовков и какова приблизительно длина его разделов. Затем
решите, какие из заголовков следует отделять линейками.

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

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

Тег <hr> предлагает броузеру вставить горизонтальную линейку, пере
секающую окно броузера от края до края. В языке HTML у него нет
закрывающего тега. В XHTML документе требуется либо косая,
закрывающая тег перед знаком «>» после атрибутов (<hr …/>), либо
закрывающий тег сразу после открывающего (<hr></hr>).

Подобно тегу <br>, <hr> заставляет выравнивание абзаца вернуться
к принятому по умолчанию (по левому краю). Броузер размещает линейку непосредственно под текущей строкой, а поток текста возобновляется
сразу под линейкой.

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

Над линейкой и под ней нет добавочных интервалов. Если вы хотите
отделить ее от окружающего текста, то должны поместить линейку
в новый абзац, за которым последует другой абзац, содержащий текст.

This text is directly above the rule.
<hr>
And this text is immediately below.
<p>
Whereas this text will have space before the rule.
<p>
<hr>
<p>
And this text has space after the rule.

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

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

Тег <blink>
Текст, содержащийся между тегом <blink> и его закрывающим тегом
</blink>, мерцает. Firefox, например, просто раз за разом меняет местами
цвет шрифта и цвет фона для заключенного в теге текста. Ни HTML, ни
XHTML не включают в себя <blink>. Первоначально он поддерживался
в качестве расширения только в версиях Netscape Navigator до шестой.
В версии 6 от него отказались, но потом он был восстановлен в версии 7
и последующих. Opera and Firefox тоже поддерживают его, и только
Internet Explorer игнорирует. Игнорируйте и вы. Мерцающий текст
сначала привлекает внимание читателя, но затем быстро надоедает, не
обещая ничего, кроме бесконечного раздражения. Забудьте о нем.

Тег <s>
Тег <s> – это сокращенная форма тега <strike>, поддерживаемая всеми
современными броузерами, несмотря даже на то, что она объявлена
устаревшей в HTML 4 и XHTML. Не пользуйтесь тегом <s>. Рано или
поздно он уйдет.

Тег <strike>
Большинство броузеров выводят текст, заключенный между тегом
<strike> и его закрывающим тегом </strike>, с добавлением горизонтальной
линии, проходящей сквозь буквы (зачеркивают текст). Подразумевается,
что это редакционная пометка, предлагающая читателю игнорировать
вычеркнутый текст, как напоминание о временах, предшествовавших
изобретению коррекционной ленты. Редко где вы встретите этот тег сегодня:
он признан нежелательным в HTML 4 и XHTML, как раз на расстоянии
одного шага до полного исключения из стандарта.

Тег <u>
Этот тег говорит броузеру, чтобы тот подчеркнул текст, содержащийся
между <u> и </u>. Подчеркивание состоит в том, что под текстом, включая
пробелы между словами и знаки препинания, проводится сплошная черта.
Этот тег признан нежелательным в HTML 4 и XHTML, но популярные
броузеры поддерживают его. Такой же эффект может быть достигнут с
применением таблиц стилей.

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

<cite><em>Deviant Style</em></cite>

На практике, многоуважаемый доктор Франкенштейн, броузер обычно
проигнорирует вашего монстра. Как нетрудно убедиться, набрав и
протестировав приведенный пример, Моби Дик будет цитатой без всякого
подчеркивания.
Стандарты HTML и XHTML не требуют от броузера поддержки всех
возможных комбинаций логических стилей и не определяют, как он
должен обращаться с такими комбинациями. Может быть, когда-ни-
будь… Пока же лучше выбрать один тег.

Подобно тегу <em>, тег <strong> используется для более выраженного
логического подчеркивания текста. Броузеры обычно отображают теги
<strong> и <em> различным образом, выводя, как правило, текст
в <strong> полужирным шрифтом (в отличие от курсива), так что
пользователи могут их различать. К примеру, в следующем тексте
подчеркнутое с помощью <em> «never» выводится в броузере Opera
курсивом, тогда как выделенное тегом <strong> слово «forbidden»
отображается жирными буквами.

One should <em>never</em> make a disparaging remark
about the noble fruit. In particular, mentioning
kumquats in conjunction with vulgar phrases is
expressly <strong>forbidden</strong> by
the Association bylaws.

Если здравый смысл подсказывает, что тег <em> должен употребляться
скупо, то тег <strong> должен появляться в тексте еще реже. Текст
в <em> похож на возглас. Текст в <strong> – это вопль. Подобно тому как
ярко звучит хорошо подобранный эпитет в устах обычно молчаливого
человека, употребленный по особенному случаю, <strong> будет замечен
и оценен.

Тег <em> сообщает броузеру, что его содержимое должно быть отображено
с визуальным выделением. Почти для всех броузеров это означает, что
текст будет выведен курсивом. К примеру, популярные броузеры выделят
курсивом слова «всегда» и «никогда» в следующем исходном HTML/XHTML
тексте:

Те, кто выращивают кумкваты, должны <em>всегда</em> называть их не
иначе как «благородный фрукт», но <em>никогда</em> – просто «фрукт.»

Расстановка логических ударений в тексте – совсем непростое занятие.
Слишком мало – и важная фраза может потеряться. Слишком много –
и пропадет эффект, к которому вы стремитесь. Как любую приправу,
тег <em> лучше употреблять скупо.

Хотя он и отображается всегда курсивом, тег <em> намекает на многое,
и броузеры завтрашнего дня, возможно, научатся воспроизводить его
с разными спецэффектами. Тег <i> прямо требует выделить текст курсивом;
применяйте его, если вам нужен именно курсив. В качестве альтернативы
вы можете включить в документ каскадные определения стилей.

Кроме постановки логического ударения подумайте о возможности
использования <em> при введении нового термина или постоянного стиля,
ссылающегося на определенный круг объектов или понятий. К примеру,
один из стилей в книгах O’Reilly предназначен для обозначения
имен файлов и устройств. Тег <em> можно применять (в отличие от простого
курсива) для акцентирования внимания на терминах.