Списки и изображения в HTML

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

В HTML используется три типа списков:

• • маркированный (или неупорядоченный) список,

• • нумерованный (или упорядоченный) список,

• • список определений.

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

Нумерованный (или упорядоченный) список используется для вывода списка объектов, которые необходимо разместить в определенном порядке. Нумерованный список выглядит аналогично маркированному, но его элементы нумеруются:

• 1. Нарезать картошку

• 2. Посолить.

• 3. Поставить аквариум на огонь.

Список определений используется для вывода пар термин-определение, объединяя определенные объекты и их определения в списке. Например, следующий список определений используется для связи расширений файла и программ, с помощью которых данные файлы создаются:

Л.В. Кузнецова Лекции по современным веб-технологиям

*.doc

файлы, созданные Microsoft Word

*.xk

файлы, созданные Microsoft Excel

*.ppt

файлы, созданные Microsoft PowerPoint

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

Ингредиенты:

• • рыбка,

• • картошка,

• • соль по вкусу.

Способ приготовления:

• 1. Нарезать картошку

• 2. Посолить.

• 3. Поставить аквариум на огонь.

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

Маркированный список определяется с помощью элемента UL. Каждый элемент списка должен начинаться с элемента LI и быть вложенным в элемент UL. Если к элементу UL применяется свойства CSS, то элементы LI наследуют эти свойства. Приведенный выше маркированный список выглядит на языке HTML следующим образом:

<Ь1>маркированный (или неупорядоченный) список,

<Ь1>нумерованный (или упорядоченный) список,

<Ы>список определений.

Маркированные списки могут выводиться с использованием одного из трех видов маркеров: закрашенного кружка (по умолчанию), не закрашенного кружка и закрашенного квадрата. Вид маркера можно изменить с помощью атрибута type, установив его значение disk, circle и square соответственно. Однако этот атрибут не рекомендуется Спецификацией HTML 4.01. Изменить маркер на один из нескольких используемых по умолчанию стилей, использовать свое собственное изображение или даже вывести список без маркеров можно с помощью соответствующих свойств CSS list-style или 1 і s t—s tyl e - type.

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

Нумерованный список устанавливается с помощью элемента OL. Каждый элемент списка должен начинаться с элемента LI, как и в случае маркированного списка. Если к элементу OL применяется свойства CSS, то элементы LI наследуют эти свойства. Приведенный выше нумерованный список выглядит на языке HTML следующим образом:

<Е1>Нарезать картошку.

<ЕІ>Посолить.

<Е1>Поставить аквариум на огонь.

Нумерованные списки могут выводиться с помощью одной из нескольких цифровых или алфавитных систем. По умолчанию, в большинстве браузеров используются десятичные числа, но имеется большее количество возможностей, например, заглавные и строчные латинские буквы, заглавные и строчные римские цифры и многое другое. Выбор маркера и в данном случае осуществляется с помощью параметра type элемента OL. Однако, как было отмечено выше, данный параметр является не рекомендуемым, а для осуществления аналогичной функциональности рекомендуется использовать свойства CSS list-style или list-style-type.

Начинать список допускается с любого номера. Для этой цели применяется атрибут start элемента OL или атрибут value элемента LL В качестве значения атрибутов start и value задается любое целое положительное число. При этом неважно, какой тип нумерации установлен, даже если в качестве списка используются латинские буквы. Если одновременно для списка применяются атрибуты start и value, то последний имеет преимущество, и нумерация отображается с числа (или символа), указанного аргументом value. Следуем отметить, что эти атрибуты являются фактически исключенными в Спецификации HTML 4.01. Это может показаться странным, так как эти атрибуты имеют смысл и не имеют эквивалента в CSS. Поэтому, использовать данные атрибуты или нет, решает только разработчик.

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

Для создания списка определений используются три элемента: DL, DT и DD. Каждый такой список начинается с контейнера DL, куца входит элемент DT, создающий термин, и элемент DD, задающий определение этого термина. Закрывающий тег не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги. Приведенный выше список определений может быть реализован следующим образом:

* doc

<ПП>файлы, созданные Microsoft Word

*.xh

<ПП>файлы, созданные Microsoft Excel

*.ppt

<ВВ>файлы, созданные Microsoft PowerPoint

Стандарт не исключает возможности давать несколько определений одного термина или одно определение нескольким терминам, как показано в следующих примерах:

кофе

напиток, приготовленный из кофейных зерен один из оттенков цвета коричневого цвета

Кока-Кола

Фанта

Колокольчик

Сладкий, насыщенный углекислым газом напиток

Обычно не принято связывать несколько терминов с одним определением, но полезно знать, что это возможно, если возникнет такая необходимость.

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

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

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

Большинство браузеров поддерживает только три графических формата: GIF, JPEG и PNG. Наиболее широкое распространение получили GIF и JPEG. Долгое время они являлись практически стандартами вебизображений. Формат PNG появился достаточно недавно, и его популярность значительно уступает форматам GIF и JPEG. Распространение формата PNG сдерживается старыми версиями браузеров, а также недостаточной и неполной подцержкой возможностей PNG в новых версиях.

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

Формат GIF (Graphics Interchange Format, формат обмена графическими данными) - это растровый формат, использующий для хранения информации о цвете только 8 битов. Таким образом, цветовой диапазон ограничен 256 цветами, а для уменьшения размера графических файлов возможно сократить количество используемых цветов до 2. Формат GIF поддерживает один уровень прозрачности, однако поддерживает анимацию, что делает его популярным для создания баннеров и простой анимации.

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

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

Формат JPEG (Joint Photographic Experts Group - объединенная группа экспертов в области фотографии) поддерживает 24-битные цвета (т.е. около 16 миллионов цветов) и сохраняет яркость и оттенки цветов изображений. Формат предполагает сжатие с потерями: JPEG-сжатие основано на разложении изображений на составляющие, близкие к тем, которые используются в человеческом зрении при отбрасывании информации, не сказывающейся на зрительном восприятии образа. За счет этого достигается высокое сжатие изображений при незначительном у^дшении качества. Степень сжатия и качество изображений находятся в обратной зависимости: чем сильнее сжато изображение, тем ниже его качество (и, соответственно, размер графического файла). В отличие от форматов GIF и PNG формат JPEG не поддерживает прозрачность: при сохранении изображения в данном формате, прозрачные пикселы заполняются определенным цветом. Формат JPEG поддерживает технологию, известную под названием прогрессивный JPEG, при которой версия рисунка с низким разрешением появляется в окне просмотра до полной загрузки самого

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

Формат PNG (Portable Network Graphics - переносимая сетевая графика), призванный заменить формат GIF, является относительно новым. Формат PNG существует в двух вариантах: PNG-8 и PNG-24.

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

PNG-24 аналогичен PNG-8, но использует 24-битную палитру цвета и, подобно формату JPEG, сохраняет яркость и оттенки цветов в фотографиях. А подобно GIF и формату PNG-8, сохраняет детали изображения как, например, в логотипах или иллюстрациях. Формат PNG-24 обладает рядом дополнительных преимуществ, таких как применение улучшенного сжатия, наличие альфа-прозрачности и гамма-коррекции и др.

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

Включение изображений в HTML

Для вставки изображения в HTML-документ используется элемент IMG, имеющий два обязательных атрибута src и alt.

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

Атрибут src задает адрес графического файла, который будет отображаться на веб-странице. В качестве значения принимается абсолютный или относительный адрес файла. К абсолютному адресу относится полный путь к ресурсу, включая протокол передачи данных, наименование сервера, а также имена всех каталогов, ведущих к файлу, например httpl/www.somewhere.com/images/image.jpg. Относительные адреса описывают местоположение файла относительно текущего каталога (например, "../../images/image.jpg") или корня каталогов сервера (например, "/images/image.jpg''). Если требуемый графический файл находится в том же каталоге, что и HTML-документ, его использующий, то в качестве значения аргумента src допустимо указать просто имя требуемого графического файла.

Фрагмент кода, использующий описанные аргументы, представлен ниже: