Урок выравнивания изображений на Web-странице с помощью HTML

24 Август, 2011 - 01:06

Начинающим Web-дизайнерам часто приходится сталкиваться с такой ситуацией: при оформлении веб-страницы в соответствующей программе все изображения расставлены согласно требованиям. Однако после просмотра сверстанной страницы в одном из браузеров изображения разбегаются по экрану. Чтобы зафиксировать изображения в определенных частях веб-страницы, можно воспользоваться определенным HTML-кодом.

Будем считать, что страница создается с нуля, поэтому

Рассмотрим вариант внесения HTML-кода в программу «Блокнот».

Итак, пусть файл некого изображения произвольного размера находится на рабочем столе. Имя файла «image1.gif». Открыв «Блокнот», внесем начальные тэги, соответствующие верстаемой Веб-странице.

На следующем этапе воспользуемся тэгом внесения изображения. Это <img src=…>. При этом необходимо правильно вписать несколько опций и атрибутов, которые «заставят» изображение встать на нужное место. Главным атрибутом, отвечающим за расположение картинки, является атрибут align. Ему можно присваивать опцию (значение) в зависимости от выбранного места расположения картинки.

Значение “right” показывает, что картинка будет выровнена по правому краю веб-страницы.

Далее следует поставить закрывающие тэги

</html></body>

и сохранить документ.

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

Кстати, при фиксации положения картинки может случиться так, что значение “right” не отправляет его в правую часть страницы, а оставляет выровненным по центру. Это может означать лишь одно: размеры картинки слишком велики, и нужно воспользоваться опциями по их изменению:

Как видно, к записи добавились значения ширины и высоты изображения.

|

Tags: уроки CSS