Как разместить в шапке сайта картинку справа а текст слева?
Я только учусь html разметке, и мне дали задание 
Все получается хорошо именно до того момента, когда я добавляю лого в левую часть. Вот так до добавление картинки слева
А вот уже после добавления
Само лого можно разместить ближе к левому краю но вот информация с правой части никак не центрируется по вертикали. Прилагаю код и надеюсь на помощь(картинки не грузит потому что они у меня на компе)
![]()
Объединяйте необходимые элементы в группы. И советую почитать про flex-box , он Вам не раз спасёт положение.
HTML — Урок 8. Работа с изображениями — тег img
Изображения на web-страницах могут использоваться двумя способами: в качестве фона и в качестве самостоятельного изображения. Рекомендуется использование трех форматов графики: JPEG, GIF и PNG. Именно их поддерживают все браузеры, для остальных форматов могут потребоваться специальные средства.
Как правило, все изображения для сайта хранятся в отдельной папке, например, images. А пути к изображениям прописываются также, как в ссылках. Если забыли посмотрите здесь.
Во всех последующих примерах пути к изображениям будут прописаны, исходя из того, что картинки находятся в папке images, а страницы в папке site, находящейся на том же уровне.
Изображения в HTML-документе
Изображения на сайте значительно улучшают его внешний вид, оживляют сайт и отображают визуально представленную информацию. Редкий сайт удержит посетителя, если на нем представлен только текст. Изображения в 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″>
Чтобы узнать как установить ссылку на изображение читайте следующую статью.