Картинки и графика.
htmlprovodnik
    Сейчас трудно представить себе сайт, на страницах которого не содержались бы картинки и графика. Изображения делают сайт более привлекательным и непохожим на другие ресурсы, но главное тут — чувство меры. Переизбыток графики вызовет утяжеление html-страницы и, соответственно, увеличит время ее загрузки. Кроме того, наличие большого числа изображений будет отвлекать посетителей от главного содержимого сайта (если, конечно, графика не является главным содержимым сайта). Так что, соблюдай меру, используй картинки только там, где это нужно и будет тебе счастье.
    Ранее я уже рассказывал о том, как графика может использоваться в качестве фона html-документа, сейчас же поговорим о том, как графика используется в «верхнем слое» html-страницы.
    Для вставки картинок в HTML используется тег < IMG> с обязательным атрибутом SRC. Этот атрибут указывает браузеру путь к файлу изображения. Т.е. для вставки картинки с названием logo.jpg в определенное место html-страницы (при условии, что и страница, и картинка расположены в одной папке (каталоге)) нужно в этом месте вставить следующий html-код:

< img src="logo.jpg">

    Если графика и страница расположены в разных каталогах, то нужно указать путь к изображению относительно страницы. Например, если html-страница лежит в каталоге site, в этом же каталоге расположен подкаталог images, в котором и находится наша картинка logo.jpg, то для ее вставки нужно написать так:

< img src="images/logo.jpg">

    Помимо обязательного атрибута src у тега IMG есть еще несколько необязательных атрибутов. Рассмотрим их подробнее:
width — ширина изображения в пикселах или процентах;
height — высота изображения в пикселах или процентах.
    Если используются эти атрибуты, то браузер сначала выделит место под графику, подготовит макет документа, отобразит текст и только затем загрузит изображение. При этом он поместит картинку в прямоугольник выделенного размера, даже если реальные ширина и высота больше (сожмет) или меньше (растянет). В случае, когда эти атрибуты не используются, браузер будет грузить картинку сразу, а вывод идущих за ней текста и остальных элементов задержится. Ширину и высоту изображений можно указывать как в пикселах (при этом размер картинки будет постоянным вне зависимости от разрешения экрана), так и в процентах (размер картинки будет зависить от разрешения экрана пользователя). Например:

< img src="logo.jpg" width="50" height="20">

или

< img src="logo.jpg" width="10%" height="5%">

    В случае, если пользователь в настройках браузера отключил показ изображений, то можно вместо картинки вывести альтернативный текст, который бы объяснил, что за графика здесь должна быть. Достигается это путем применения атрибута alt:

< img src="logo.jpg" alt="Логотип сайта www.seoded.ru">

    В этом случае браузер зарезервирует место на странице под картинку, но вместо самой картинки покажет текст, который ты напишешь в значении атрибута alt (повторю, если пользователь отключил показ графики. Если нет, то картинка скроет собой альтернативный текст).
    С помощью уже знакомого тебе атрибута align можно управлять выравниванием изображений относительно других элементов html-страницы. У атрибута align есть несколько значений, но нас больше всего на данный момент интересуют два:
left — графика располагается у левого края страницы, а текст и другие элементы обтекают изображение справа;
right — графика располагается у правого края страницы, а текст и другие элементы обтекают изображение слева.
Например, HTML-код

< img src="logo.jpg" align="left">Это мой аватар на форумах.

браузер покажет так
Это мой аватар на форумах.

,а этот HTML-код

< img src="logo.jpg" align="right">Это мой аватар на форумах.

будет выглядеть вот так
Это мой аватар на форумах.

    Для прекращения обтекания текстом изображения можно использовать тег < BR> . У тега BR есть атрибут clear, который может принимать три значения:
left — прекращение обтекание текстом изображений, выровненных по левому краю;
right — прекращение обтекание текстом изображений, выровненных по правому краю;
all — прекращение обтекание текстом изображений, выровненных и по левому, и по правому краю.
    По умолчанию графика встраивается в страницу почти вплотную к тексту и другим элементам. Если такое отображение не устраивает, то можно задать пустые поля вокруг картинки. Делается это с помощью следующих атрибутов тега IMG:
vspace — создает верхнее и нижнее поля;
hspace — создает боковые поля (слева и справа).
    Значения этих атрибутов указывается в пикселах. Например, если мы немного дополним предыдущий пример

< img src="logo.jpg" align="left" vspace="5" hspace="20">Это мой аватар на форумах.

,то получим следующее
Это мой аватар на форумах.

    Вокруг изображений можно создать черную рамку с помощью атрибута border. Значение этого атрибута указывается в пикселах и определяет толщину рамки. Например, HTML-код

< img src="logo.jpg" border="5">

в браузере выглядит так

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

?

Log in