Как вставлять в HTML-коды картинки?

2 ноября 2014 г. Просмотров: 337 Инструкции
Сообщение на интернет-ресурсе – это отнюдь не всегда текст. Ряд блоггеров уже усвоил, что изображения, не нуждающиеся в комментариях автора, могут подействовать на читателей гораздо сильнее, а значит, все сообщение может целиком состоять из картинок. Заполнить ими пост позволяют специальные HTML-теги.

Вам понадобится

  • - доступ в интернет;
  • - изображения хорошего качества.

Инструкция

  • Предварительно загрузите все изображения на фотохостинг.
    Прямая трансляция файлов с компьютера невозможна. Пересмотрите файлы: откажитесь от размазанных кадров, сбитого фокуса или неправильной цветопередачи, слишком маленького или слишком большого размера. Изображения должны быть четкими, сфокусированными и при этом быстро загружаемыми.
  • Сохраните адреса картинок. Как правило, ссылки на страницы с ними оканчиваются на .jpg, .tiff или подобным образом.
  • Создайте новое сообщение в блоге или на сайте, проверьте, что включен HTML-редактор. При вставке тегов в визуальном режиме код не преобразуется в картинку. Далее вставьте . Вставьте в необходимое место ссылку на первую из картинок.
  • Отрегулируйте размер отображаемого в сообщении файла. За это отвечают теги width= и height=. Вставьте один из них или оба, по желанию. При вставке одного второй параметр подгоняется пропорционально, а при использовании двух вы можете изменить пропорции намеренно или случайно. Общая картина такова: , где цифры после тега – размер в пикселях.
  • При желании добавьте рамку вокруг изображения. Для этого в код вставляется тег: . Рамка будет зеленой, шириной в 10 пикселей. При желании скорректируйте параметры.
  • Используйте картинку в качестве ссылки. В таком случае она не только будет отображаться в вашем посте, но и приведет читателя на сторонний ресурс. Код выглядит так: . Замените соответствующие пункты в примере на адреса и собственный текст. В результате при наведении курсора на картинку всплывет текст, а при щелчке ссылка откроется в новом окне.
  • Оцените статью!