Иллюстрированный самоучитель по созданию сайтов


Графические иллюстрации


И, наконец, проиллюстрируем наш текст, вставив перед описанием фотографию клавиновы. Предположим, что фотография у нас уже готова и лежит в палке \lmages под именем clavi.gif. Вставить ее в текст можно с помо щью тега

<IMG>

, например, вот так:

<IMG SRC="Images/clavi.gif">

В принципе, этого уже достаточно — на месте этой записи броузер отобразит нашу картинку. Однако лучше указать в теге

<IMG>

еще несколько атрибутов.

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

<IMG SRC="Images/clavi.gif" WIDTH="300" HEIGHT="200">

Вообще говоря, с помощью этих атрибутов можно задать какие угодно размеры картинки, “растянув” или сжав ее как душе угодно. Однако обычно этого не делают, и вот почему. Представлять картинку меньшей, чем она есть, нецелесообразно, поскольку зачем тогда грузить большой файл? Ведь файлы для картинок большого размера имеют большой размер и грузятся из Интернета, соответственно, намного дольше. Лучше уж сделать малень кий файл для картинки маленького размера и быстро загрузить его. А если представить картинку большей, чем она есть, то, как правило, она будет выглядеть малопривлекательно за счет появления “ступенчатости” как в формах, так и в цвете.

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


- Начало -  - Назад -  - Вперед -