HTML за... 30 минут!

§7 Работа с изображениями

Зачем нужны картинки? Ну мало ли. Поместить свою фотографию, использовать как кнопку для ссылки на интересный ресурс, да просто для украшения, в конце концов.
Чтобы вставить картинку в документ, напишите

<img
srс='путь'
lowsrc='путь2'
alt='описание'
align='***'
name='имя'
height='***'
width='***'
border='***'>

Напоминаю, что пробел и переход строки в документе рассматриваются браузерами одинаково, и то что я растянул на несколько строк Вы можете записать в одной. Я так делаю просто для наглядности.
Border - ширина рамки вокруг картинки (в пикселях)
Путь - путь к картинке. Если картинка расположена в том же каталоге, что и файл, ее использующий, можно просто указать имя файла с картинкой.
Остальные параметры можно опускать, но имейте в виду, что браузер начинает выводить текст, не дожидаясь загрузки картинки, и если не указать ее размер, то когда она будет загружена, весь документ будет заново преобразовываться. Если картинок много, такие выкрутасы могут кого угодно вывести из себя.
Если ширина и высота места, отведенного для изображения, зафиксирована, картинка появится строго в определенной области. Причем если указанные вами параметры отличаются от реальных, картинка будет, как правило, соответствующим образом сжата или растянута.
Lowsrc - если Ваша картинка очень большая, или это анимация, укажите путь к картинке такой же вышины и ширины но занимающей намного меньший объем памяти. Она будет видна до тех пор пока не загрузится основная.
alt - пояснение, пока картинка не появилась, оно будет написано на ее месте, а после загрузки картинки, если навести на нее мышку, это пояснение выскочит возле указателя. Зачем? Многие пользуются текстовыми браузерами типа LYNX и картинок не видят. Если у Вас ссылки сделаны в виде рисованных кнопочек, то без пояснений те люди не поймут, куда ведет ссылка и, естественно, никуда не пойдут. Так же многие, у кого медленные модемы, частенько отключают вывод изображений.
Name картинке Вы назначаете сами. Это нужно для управления выводом изображений. Например, если Вы делаете фотоальбом или фотогалерею, то чтобы не размещать каждый рисунок в отдельном файле, транжиря место на сервере и свое время, можно использовать простенький скрипт, который позволит разместить весь фотоальбом в одном документе, да и работать это будет быстрее.
Align - выравнивание относительно той строки, где картинка появилась.
left - слева от текста,
right - справа,
top - текст будет слева и справа от верха картики, а потом только после нее,
middle - строка слева и справа по центру изображения,
bottom - строка слева и справа от низа - если никакое выравнивание не задано, используется bottom.

Как Вы, вероятно, догадались, все атрибуты тега <img> можно задавать в произвольном порядке.

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

вверх

<<< Вывод текста                            Как делать ссылки? >>>