Как разместить картинку справа в html
Перейти к содержимому

Как разместить картинку справа в html

  • автор:

Как разместить в шапке сайта картинку справа а текст слева?

Я только учусь html разметке, и мне дали задание введите сюда описание изображения

Все получается хорошо именно до того момента, когда я добавляю лого в левую часть. Вот так до добавление картинки слевавведите сюда описание изображения А вот уже после добавлениявведите сюда описание изображения Само лого можно разместить ближе к левому краю но вот информация с правой части никак не центрируется по вертикали. Прилагаю код и надеюсь на помощь(картинки не грузит потому что они у меня на компе)

Dev18's user avatar

Объединяйте необходимые элементы в группы. И советую почитать про flex-box , он Вам не раз спасёт положение.

HTML — Урок 8. Работа с изображениями — тег img

Изображения на web-страницах могут использоваться двумя способами: в качестве фона и в качестве самостоятельного изображения. Рекомендуется использование трех форматов графики: JPEG, GIF и PNG. Именно их поддерживают все браузеры, для остальных форматов могут потребоваться специальные средства.

Как правило, все изображения для сайта хранятся в отдельной папке, например, images. А пути к изображениям прописываются также, как в ссылках. Если забыли посмотрите здесь.

Во всех последующих примерах пути к изображениям будут прописаны, исходя из того, что картинки находятся в папке images, а страницы в папке site, находящейся на том же уровне.

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

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

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

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

<img src=»http://www.spinch.net.ua/images/pict.jpg»> — изображение в папке images

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

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

<img src=»http://www.spinch.net.ua/images/pict.jpg» width=»200″ height=»150″>

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

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

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

<img src=»http://www.spinch.net.ua/images/pict.jpg» align=»left»>

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

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

<img src=»http://www.spinch.net.ua/images/pict.jpg» vspace=»10″> — отступ по вертикали

<img src=»http://www.spinch.net.ua/images/pict.jpg» align=»left» hspace=»10″> — по горизонтали

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

<img src=»http://www.spinch.net.ua/images/pict.jpg» align=»left»> Начало <br clear=»all»> текст.

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

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

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

<img src=»http://www.spinch.net.ua/images/pict.jpg» alt=»картинка»>

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

<img src=»http://www.spinch.net.ua/images/pict.jpg» border=»0″>

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *