Теперь, когда Вы научились вставлять текст на веб-страницу и красиво его оформлять, стоит перейти к изображениям. Я думаю, Вы заметили, что редко можно встретить сайт без картинок.
Иллюстрации нужны практически к любому материалу для наглядности, а кроме того картинки делают Ваш сайт более привлекательным.
Чтобы вставить изображение в документ, можно использовать следующую конструкцию, при помощи которой на этой странице появилась картинка с парнем и ноутбуком:
<IMG SRC="pic/pic1.jpg" BORDER="0" ALIGN="RIGHT" WIDTH="113" HEIGHT="168" HSPACE="Отступ_1" VSPACE="Отступ_2" ALT="Подсказка" NAME="Имя" LOWSRC="Рисунок_2">
Теперь поясню, что означает каждый из параметров:
- значение параметра SRC содержит ссылку на картинку, без этого параметра изображение не появится. Отсюда мы также видим, что вставлен рисунок pic1.JPG, лежащий в папке pic. Есть три типа файлов изображений, которые можно вставить на ваши страницы:
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
- значение параметра BORDER задает толщину рамки вокруг рисунка. У данного рисунка рамки нет. Если Вы не указываете этот параметр, то используется значение по умолчанию - 0.
- ALIGN - это параметр выравнивания. Он может принимать значения left (по левому краю),
right (по правому краю),
top (выравнивает верхнюю кромку изображения с верхней линией текущей текстовой строки),
middle (выравнивает базовую линию текущей текстовой строки с центром изображения),
absmiddle (выравнивает центр текущей текстовой строки с центром изображения),
bottom (выравнивают нижнюю кромку изображения с базовой линией текущей текстовой строки),
absbottom (выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки).
- Параметр WIDTH задает ширину изображения.
- Параметр HEIGHT задает высоту изображения.Эти 2 параметра необходимо использовать для того, чтобы
браузер выделял место под Ваше изображение, и, если оно не загрузится, то пользователь будет хотя бы иметь представление об его размере. Однако, настоящий размер файла изображения в килобайтах останется прежним, и этот файл будет занимать столько же времени для загрузки, сколько и раньше, а вот изображение будет выглядеть на экране уменьшенным. Следовательно, никогда не уменьшайте размер изображения атрибутами width и height. Вместо этого уменьшайте размер изображения в программе редактирования.
- Параметры HSPACE и VSPACE задают горизонтальный и вертикальный отступ текста от краёв изображения.
- Параметр ALT используется для "подписи" изображения. Эта подпись появится, если на изображение будет наведен курсор. А если картинка не загрузится
вообще, то вместо нее появится эта надпись.
Например, справа я загрузила эту же картинку, на которой изображен мужчина с ноутбуком, только с ошибочным путем. То есть, браузер не сможет найти это изображение.
- Параметр NAME нам потребуется только тогда, когда с данным изображением будет работать JavaScript. Сейчас для новичка это не актуально.
- Параметр LOWSRC может подгружать другое изображение в случае, если Обозреватель не найдет основное изображение. Более того, зачастую
этот параметр используется для более слабых компьютеров, чтобы подгружать то же самое изображение, только низкого качества.
Итак, мы рассмотрели конструкцию, которая позволяет вставлять изображение в HTML-документ. Сразу скажу, что не все параметры обязательны. Иногда можно вставлять картинку
и при помощи такой конструкции: <IMG SRC="pic/pic1.jpg">. Но это может повлечь за собой определенные последствия.
Дальше мы рассмотрим, что еще можно делать с изображением на странице.
|
