Загрузка...
Перейти к содержимому
 
En
Вход

Для добавления изображения на сайт необходимо:

  • Загрузить файл на сервер (подробнее в разделе «Работа с документами»).
  • Добавить изображение на страницу одним из двух способов:
    • Добавить файл с изображением на страницу (подробнее в разделе «Добавление файлов на страницу»)
    • Использовать компонент «Текст» или «Разметка HTML» и добавить изображение с помощью html-разметки, используя соответствующий тег.

Для отображения на странице изображений предназначен тег <img>.

Атрибуты тега и их значения:

Атрибут Значение
src Путь к файлу
align - выравнивание относительно текста или других элементов
left – по левому краю
middle – середина картинки по середине текущей строки
right – по правому краю
top – по верхней границе
bottom - по нижней границе

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

Примечание: Обязательный атрибут. Отображается вместо изображения в случаях неудачной загрузки изображения.

 текст
height - высота Значение
  • в процентах относительно страницы или элемента, внутри которого располагается
  • в пикселях
width - ширина

title – всплывающая подсказка при наведении

Примечание: Работает не во всех браузерах

 Текст подсказки
Обращаем внимание!
Перед добавлением изображения на страницу необходимо проверить работоспособность ссылки на изображение. Для этого можно открыть новую вкладку в браузере, вставить в адресную строку ссылку на изображение и нажать «Enter», после чего в браузере должно отобразиться соответствующее изображение. Если изображение не отобразилось, необходимо проверить и исправить ссылку на изображение.

Для размещения изображения по центру страницы нужно поместить тег <img> внутрь тега
<div align="center">

Примеры:

  • Простое изображение
    <img src="http://web.tpu.ru/webcenter/content/conn/WebCenterSpaces-ucm/path/WebCenterSpaces-Root/opr/TPU_logo.png" width="530" height="192" alt="Логотип ТПУ ">

  • Изображение, обтекаемое слева текстом
    <img src=" http://web.tpu.ru/webcenter/content/conn/WebCenterSpaces-ucm/path/WebCenterSpaces-Root/opr/TPU_logo.png" width="530" height="192" align="right" alt="Логотип ТПУ ">
    <p>Логотип ТПУ – квадрат, состоящий из черных и зеленых блоков, образующих заглавные буквы Т и П (Томский политехнический) или Т и U (Tomsk University).</p>
    Изображение, обтекаемое текстом слева
  • Изображение с подписью, выровненное по центру страницы
    <div align="center"> <img src=" http://web.tpu.ru/webcenter/content/conn/WebCenterSpaces-ucm/path/WebCenterSpaces-Root/opr/TPU_logo.png" width="530" height="192" alt="Логотип ТПУ "> <p>Логотип ТПУ</p> </div>
    Изображение с подписью, выровненное по центру
  • Изображение-ссылка
    <a href="http://tpu.ru/" target="_blank" title="Открыть в новом окне сайт ТПУ"><img src=" http://web.tpu.ru/webcenter/content/conn/WebCenterSpaces-ucm/path/WebCenterSpaces-Root/opr/TPU_logo.png" width="530" height="192" alt="Логотип ТПУ "> </a>
    Изображение-ссылка