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

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

До сих пор мы не использовали атрибуты тегов, с помощью которых можно менять свойства объекта, соответствующего тегу. Для начала рассмотрим такие атрибуты тега <img>, как alt, width и height.

• alt – позволяет добавлять к картинке так называемый альтернативный текст. Если в браузере отключить показ картинок (это часто приходилось делать во время коммутируемого доступа к Интернету, чтобы ускорить загрузку веб-страниц), то вместо картинок можно увидеть текст, который дает пользователю понять, что изображено на рисунке. На данный момент альтернативный текст более важен не для удобства пользователей, а для обеспечения возможности поиска по картинкам, как это делают современные поисковые сервисы.

• width и height – если вы немного знаете английский язык, то уже догадались, что речь идет о ширине и высоте изображения. Пример выше показывает, что браузер и без этих атрибутов корректно отображает картинки. Но, как и в случае с тегом alt, нам необходимо подыграть поисковым сервисам, которые при выполнении поиска по картинкам предоставляют пользователям возможность указать размер изображения. К примеру, Google позволяет искать изображения не только по таким критериям, как большие, средние, маленькие, но и по точному размеру в пикселах. Более того, есть возможность указать тип изображения: цветное или черно-белое (рис. 3.13).

Рис. 3.13. При поиске изображений Google позволяет указывать различные параметры рисунка

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

Сейчас мы применим указанные выше атрибуты на нашей тестовой странице. Нужно изменить HTML-код согласно листингу 3.1.

Теперь можно посмотреть, какие изменения произошли на веб-странице. После использования атрибута alt появился альтернативный текст, а добавление атрибутов width и height привело к появлению рамки, показывающей размер изображения (рис. 3.14).

Рис. 3.14. Результат использования атрибутов alt, width и height

Теперь пришла пора немного рассказать об использовании таблиц. Но перед тем как продолжить, вернем нашу страницу на Рабочий стол, чтобы отображались обе картинки.

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

На данный момент использование таблиц для верстки считается вчерашним днем, но, как бы то ни было, они применяются и наверняка будут применяться еще долго. Дело в том, что использование таблиц – быстрореализуемый вариант, когда тот или иной элемент веб-страницы не получается правильно разместить другими способами.

В качестве эксперимента добавим на нашу веб-страницу под рисунками небольшую таблицу, состоящую из двух строк и двух столбцов (четыре ячейки), добавив немного кода (листинг 3.2).