Обзор популярных расширений Joomla

Статьи о создании и развитии сайта

Обучающие материалы по верстке HTML\CSS


search

Изображения в HTML-документе

izo-imgИзображения на сайте значительно улучшают его внешний вид, оживляют сайт и отображают визуально представленную информацию. Редкий сайт удержит посетителя, если на нем представлен только текст. Изображения в HTML-документе могут легко позиционироваться и подвергаться дополнительной настройке с помощью тегов и атрибутов.

Вставка изображений в html-документ

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

<img src="/images/pict.jpg"> - изображение в папке images

<img src="http://pictures.com/kartinka.jpg"> - картинка на другом сайте

После загрузки картинки, её размер можно изменить, с помощью атрибутов ширины (width) и высоты (height):

<img src="/images/pict.jpg" width="200" height="150">

Кроме вставки в контенте, изображение может являться фоном сайта. Для этого его нужно указать в теге body с помощью атрибута background:

<body background="images/fon.jpg">

Позиционирование изображения в тексте

После вставки изображения, его нужно позиционировать в тексте, для этого применяется атрибут align.

<img src="/images/pict.jpg" align="left">

После этого изображение выравняется слева от текста, так как указано значение left, чтобы выровнять справа - указать значение right. Также текст может располагаться вверху (top), внизу (bottom) или посередине (middle) относительно картинки.

После выравнивания изображения и текста обычно требуется установить отступ между ними. Это можно сделать с помощью атрибутов hspace и vspace:

<img src="/images/pict.jpg" vspace="10"> - отступ по вертикали

<img src="/images/pict.jpg" align="left" hspace="10"> - по горизонтали

Для прерывания обтекания изображения можно воспользоваться тегом br с атрибутом all:

<img src="/images/pict.jpg" align="left">Начало<br clear="all">текст...

После тега br, текст остановит обтекание и окажется под рисунком.

Дополнительные операции с изображениями

К картинке принято устанавливать описание, которое покажется при наведении:

<img src="/images/pict.jpg" alt="картинка">

По умолчанию изображению задается рамка со значением 1, чтобы её убрать следует установить значение 0

<img src="/images/pict.jpg" border="0">

Чтобы узнать как установить ссылку на изображение читайте следующую статью.

{social}

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

Защитный код
Обновить

Joomla SEF URLs by Artio

Комментарии

  • Модуль VTEM Panorama

    Дмитрий
    Доброго времни суток! Несовсем догоняю как привязать к joomshoping те для каждого товара должен ...
     
  • Плагин Edocs

    sveta
    после перехода с http на https плагин перестал работать. Меняла все пути, которые возможно, но не ...
     
  • Компонент JoomShopping. Полезности

    Димы
    Ух, шикарно, спасибо. Изменил карточку товара. Цену и кнопку "В корзину" разместил слева от ...
     
  • Работа с категориями в K2

    Николай
    Подскажите пожалуйста, пользуюсь Serpstat. Комплексный аудит сайта по метатегам (путь:Аудит сайта ...
     
  • Компонент JoomShopping. Товары и категории

    Валерий
    Здравствуйте. Мне очень нужна Ваша помощь. Как возможно сделать, чтобы форма заказа товара в joomshopping ...