Рубрики
Уроки HTML

Уроки HTML. Картинки

До того как начнете читать этот урок, возьмите два любых jpeg-файла и скопируйте их в папку, в которой хранятся html-файлы наших уроков. Затем переименуйте jpeg-файлы, чтобы они назывались photo01.jpg и photo02.jpg. Эти картинки мы будем использовать для практики. Еще проверьте, что в браузере не отключено отображение картинок.

Для размещения картинки на веб-странице нужно набрать:
1. <IMG src=’imagefile.ext’
где IMG — тег для отображения картинок на странице, SRC — атрибут тега, определяющий какая именно картинка будет отображаться, imagefile.ext — путь, имя и расширение файла картинки. Обратите внимание на регистр букв. В ОС Windows может это значения не имеет, но на веб-сервере на платформе Unix/Linux может быть критичным и стать причиной неотображения картинок.
[2]. BORDER=n
где n – толщина рамки в пикселях вокруг рамки.
3. >.

Протестируйте использование тега <IMG> с атрибутом BORDER со значением 4:
<IMG src=’photo01.jpg’ BORDER=’4′ >
и без него:
<IMG src=’photo01.jpg’ >

Примечания:
1. Для размещения картинки отдельно от текста можно пользоваться тегами P или BR.
2. Картинки, используемые в гиперссылках, по-умолчанию имеет синюю рамку. Если эту рамку нужно убрать, используйте BORDER=0.
3. Чтобы пользователю не приходилось долго ждать загрузки веб-страницы, не следует в ней использовать картинки с большими размерами. Вопрос об оптимальном размере файлов спорный. Например, более 1 мегабайта для одной картинки — это много.
4. Понятия «размер файла изображения» и «размер изображения» следует различать. Размер файла изображения — это одно число, выражающее сколько места занимает файл в памяти (единицы: байт, килобайт, …). Размер изображения — это два числа, выражающие ширину и высоту изображения (единицы: пиксель, сантиметр, дюйм, …).

Альтернативный текст

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

Для добавления альтернативного текста к картинке нужно набрать:
1. <IMG SRC=’images/cm/imagefile.ext’
где IMG — тег для отображения картинки на странице, SRC — атрибут этого тега, определяющий какая именно картинка должна отображаться, imagefile.ext — путь, имя и расширение файла картинки.
2. ALT=»
3. Текст.
4. «>.

Для определения размера картинки на веб-странице:
1. Определите высоту (height) и ширину (width) картинки. Для этого может понадобиться какая-нибудь графическая программа. Обычно, это в пункте Свойства -> Размер изображения.
2. В коде html-файла, там, где должно быть изображение, наберите:
<IMG src=’imagefile.ext’
где IMG — тег для отображения картинки на странице, SRC — атрибут этого тега, определяющий какая именно картинка должна отображаться, imagefile.ext — путь, имя и расширение файла картинки.
3. WIDTH=’x‘ HEIGHT=’y
где x – ширина картинки в пикселях и y — высота картинки в пикселях. Эти два числа были выяснены в пункте 1. Числа x и y можно изменять, тем самым изменяя размер отображаемой картинки.
[4]. Другие атрибуты тега IMG.
5. >.

Пример использования тега IMG с WIDTH и HEIGHT:
<IMG src=’photo01.jpg’ WIDTH=’180′ HEIGHT=’1800′>

<IMG src=’photo01.jpg’ WIDTH=’350′ HEIGHT=’350′>

<IMG src=’photo01.jpg’ WIDTH=’600′ HEIGHT=’50’>

Для расположения текста слева или справа от картинки нужно набрать:
1. <IMG src=’imagefile.ext’

2. ALIGN=’left’, для расположения картинки слева и текста справа от неё

или ALIGN=’right’, для расположения картинки справа и текста слева от неё

[3]. Другие атрибуты тега IMG.
4. >.

Для прекращения выравнивания текста по картинке примените:
<BR CLEAR=’all’>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *