Картинка-распорка
Распорка — это невидимая картинка, которая используется в дизайне сайта для создания полей, отступов и точного (по пикселам) размещения элементов в окне браузера.
В качестве распорки удобно использовать GIF-картинку, содержащую всего одну точку, цвет которой объявлен прозрачным.
Такую картинку можно растягивать до любого размера, пользуясь атрибутами тега witdh и height тега IMG.
Пример
Вася записал такой код для вывода логотипа и заголовока:
<NOBR> <IMG src=./pic/logo.gif width=85 height=83 border=0 hspace=0 vspace=0 alt="Логотип" ><IMG src=./pic/title.gif width=367 height=61 border=0 hspace=0 vspace=0 alt="Цыплёнок босиком"> </NOBR> |
На экране коду соответствует изображение (рис. 7.39):
Рис 7.39. Логотип и заголовок сайта
Подумав, Вася решил отодвинуть заголовок от логотипа на 50 пикселов. Он размещает между двумя картинками третью — распорку:
<NOBR> <IMG src=./pic/logo.gif width=85 height=83 border=0 hspace=0 vspace=0 alt="Логотип" ><IMG src=./pic/empty.gif width=50 height=83 border=0 hspace=0 vspace=0 alt="" ><IMG src=./pic/title.gif width=367 height=61 border=0 hspace=0 vspace=0 alt="Цыплёнок босиком"> </NOBR> |
Экран изменился так (рис. 7.40):
Рис 7.40. Логотип и заголовок сайта с распоркой между ними
Чтобы посмотреть на распорку, временно запишем в её коде border=1 (рис. 7.41):
Рис 7.41. Распорка с включённой рамкой
Декоративная графика
Достаточно трудно придумать пример разумной декорации на гипертекстовой странице. Все графические построения должны быть функциональны.
Пример
Ниже показан фрагмент, состоящий из двух содержательных картинок, отделённых от комментария декоративным изображением телефонного провода (в двух экземплярах) (рис. 7.42):
Рис 7.42. Пример декоративной графики
Составная графика
Иногда выгодно исходную картинку «порезать» на части и выводить на экран «кусками». Так делают, чтобы уменьшить общий размер графических файлов.
Понятно, что написать содержательный альтернативный текст для каждого фрагмента не всегда возможно. В таких случаях рекомендуется записывать комментарий (аналог общего альтернативного текста) в виде подрисуночной надписи, а в тегах IMG, составляющих иллюстрацию, применять код alt="".
Пример
Ниже показана картинка в формате JPEG с альтернативным текстом «Мои дальние родственники» (рис. 7.43):
Рис 7.43. Мои дальние родственники
Размер этой картинки даже после оптимизации очень большой: 42 816 байт.
Замечаем, что рисованная часть с чёткими контурами лучше оптимизируется в формате GIF, а вторая часть с фотографией — в формате JPEG.
Можно разрезать картинку на две части и вывести на экран с подрисуночной надписью. Размер файла с первым фрагментом в формате GIF — 4 966 байт, со вторым в формате JPEG — 10 091 байт. Получается неплохая экономия в 27 759 байт.
Теги Hn используются не для выделения заголовков или не отражают иерархию документа
Штрафной балл: 0.1–0.5
Рекомендации
За каждую обнаруженную погрешность назначается штраф 0.1.
Общая сумма штрафов ограничена числом 0.5. То есть при обнаружении более пяти ошибок, они не увеличивают суммарный штраф.
Теги Hn (заголовки) играют особую роль в коде гипертекстовой страницы: они задают иерархическую структуру документа.
Тегом H1 нужно выделять заголовки первого уровня, тегом H2 — заголовки второго уровня и так далее (рис. 7.44)
Рис 7.44. Заголовки отражают древовидную структуру документа
Использовать заголовки нужно очень аккуратно в соответствии с их иерархическими уровнями в структуре документа. Не следует использовать теги Hn для выделения обычного текста. Они применяются только для заголовков.
Существуют специальные программы, которые автоматически составляют оглавление гипертекстового документа. Делают они это при помощи сбора информации из тегов Hn. Если заголовочные теги обрамляют обычные тексты или не отражают иерархическую структуру документа, оглавление будет построено неверно.