Рис. 3.11. Одинаковые файлы с изображениями, добавленными на веб-страницу, находятся в разных местах

В первом случае используется абсолютная ссылка, а во втором – относительная. Чтобы понять разницу между ними, перенесем файл с веб-страницей с Рабочего стола в папку Мои документы и снова откроем страницу в браузере. Второй рисунок не отображается (рис. 3.12).

Рис. 3.12. Второй рисунок не отображается, так как HTML-страница была перемещена в другую папку

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

Что делать, если рисунок не отображается?

• Проверить, есть ли это изображение по указанной в HTML-коде ссылке.

• Посмотреть, правильно ли указан путь к картинке.

• Проверить, правильно ли указано имя файла. К примеру, вместо названия файла name.jpg вы могли написать name.jpeg.

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

Внимание!

Главное, что вы должны понять из этого примера, – в действительности никаких изображений на веб-странице нет – есть только ссылки на эти изображения и указание на то, в каком месте вебстраницы и как они должны отображаться.

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

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

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

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

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

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

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

МФУ для дома

alt="МФУ для дома фото" width="200" height="200">

height="200" >

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

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

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

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

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

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

МФУ для дома

alt="МФУ для дома фото" width="200" height="200">

height="200">

При просмотре в браузере мы видим, что под рисунками появилась таблица с прозрачными границами, состоящая из четырех ячеек. В каждой ячейке есть надпись – Ячейка 1, Ячейка 2, Ячейка 3, Ячейка 4 (рис. 3.15).

Рис. 3.15. На странице появилась таблица с невидимыми границами, состоящая из четырех ячеек