Посмотрите на любую веб-страницу, и вы увидите сочетание текстового содержимого и изображений. Оба эти элемента являются важными составляющими успеха веб-сайта. Текстовый контент — это то, что посетители сайта будут читать и что поисковые системы будут использовать в своих алгоритмах ранжирования. Изображения добавят визуальный интерес к сайту и помогут подчеркнуть текстовое содержание.
Добавить текст и изображения на веб-сайты очень просто. Текст добавляется с помощью стандартных тегов HTML, таких как абзацы, заголовки и списки, а изображения размещаются на странице с элемент. Однако после того, как вы добавили изображение на свою веб-страницу, вы можете захотеть, чтобы текст располагался рядом с изображением, а не выравнивался под ним (это способ, используемый по умолчанию для изображения, добавляемого в код HTML, в браузере). Технически, вы можете добиться этого двумя способами: с помощью CSS (рекомендуется) или путем добавления визуальных инструкций непосредственно в HTML (не рекомендуется, так как вы хотите сохранить разделение стиля и структуры для вашего сайта).
Использование CSS
Правильный способ изменить способ отображения текста и изображений страницы и их визуальные стили в браузере с помощью CSS. Просто помните, поскольку мы говорим о визуальном изменении на странице (обтекание текста вокруг изображения), это означает, что это область каскадных таблиц стилей.
Сначала добавьте свое изображение на свою веб-страницу. Не забудьте исключить любые визуальные характеристики (такие как значения ширины и высоты) из этого HTML. Это важно, особенно для адаптивного веб-сайта, размер которого зависит от браузера. Определенное программное обеспечение, такое как Adobe Dreamweaver, будет добавлять информацию о ширине и высоте к изображениям, вставляемым с помощью этого инструмента, поэтому обязательно удалите эту информацию из кода HTML! Не забудьте, однако, включить соответствующий альтернативный текст. Вот пример того, как может выглядеть ваш HTML-код:
В целях стилизации вы также можете добавить класс к изображению. Это значение класса — то, что мы будем использовать в нашем файле CSS. Обратите внимание, что значение, которое мы здесь используем, является произвольным, хотя для этого конкретного стиля мы склонны использовать значения «left» или «right», в зависимости от того, каким образом мы хотим выровнять наше изображение. Мы находим, что этот простой синтаксис работает хорошо и легко для других, которым, возможно, придется управлять сайтом в будущем, чтобы понять, но вы могли бы дать этому любое значение класса, какое захотите.
Само по себе это значение класса ничего не сделает. Изображение не будет автоматически выровнено по левому краю текста. Для этого нам теперь нужно обратиться к нашему файлу CSS.
В вашей таблице стилей вы можете добавить следующий стиль:
.оставил {плыть налево;
отступы: 0 20px 20px 0;
}
Здесь вы используете CSS-свойство «float», которое извлекает изображение из обычного потока документов (способ, которым изображение обычно отображается с текстом, выровненным под ним), и выравнивает его по левой стороне контейнера. , Текст, который идет после него в HTML-разметке, теперь переносится вокруг него. Мы также добавили некоторые значения отступов, чтобы этот текст располагался прямо напротив изображения. Вместо этого у него будет хороший интервал, который будет визуально привлекательным в дизайне страницы. В сокращенном CSS-коде для заполнения мы добавили 0 значений в верхнюю и левую части изображения и 20 пикселей в его левую и нижнюю части. Помните, что вам нужно добавить отступ справа от выровненного по левому краю изображения. Выровненное по правому краю изображение (которое мы рассмотрим чуть позже) будет иметь отступ, накладываемый на его левую сторону.
Если вы просматриваете свою веб-страницу в браузере, вы должны увидеть, что ваше изображение выровнено по левой стороне страницы, и текст красиво оборачивается вокруг нее. Еще один способ сказать, что изображение «плавает влево».
Если вы хотите изменить это изображение, чтобы оно было выровнено вправо (как в примере с фотографией, сопровождающем эту статью), это было бы просто. Во-первых, вы должны убедиться, что в дополнение к стилю, который мы только что добавили в наш CSS для значения класса «left», у нас также есть один для выравнивания по правому краю. Это будет выглядеть так:
.правильно {плавать: правильно;
отступы: 0 0 20px 20px;
}
Вы можете видеть, что это почти идентично первому CSS, который мы написали. Единственная разница — это значение, которое мы используем для свойства «float», и значения отступов, которые мы используем (добавляя некоторые к левой стороне нашего изображения вместо правой).
Наконец, вы должны изменить значение класса изображения с «левого» на «правый» в своем HTML:
Посмотрите на свою страницу в браузере сейчас, и ваше изображение должно быть выровнено по правому краю, а текст аккуратно обернут вокруг него. Мы склонны добавлять оба этих стиля, «левый» и «правый», ко всем нашим таблицам стилей, чтобы мы могли использовать эти визуальные стили по мере необходимости при создании веб-страниц. Эти два стиля становятся хорошими, многократно используемыми функциями, к которым мы можем обращаться всякий раз, когда нам нужно стилизовать изображения с обтеканием текста вокруг них.
Использование HTML вместо CSS (и почему вы не должны этого делать)
Даже если можно обернуть текст вокруг изображения с помощью HTML, веб-стандарты предписывают, что CSS (и шаги, представленные выше) — это путь, по которому мы можем поддерживать разделение структуры (HTML) и стиля (CSS). Это особенно важно, если учесть, что для некоторых устройств и макетов этот текст может не нуждаться в обтекании изображения. Для небольших экранов адаптивный макет веб-сайта может потребовать, чтобы текст действительно выравнивался под изображением и чтобы изображение растягивалось на всю ширину экрана. Это легко сделать с помощью медиазапросов, если ваши стили отделены от разметки HTML. В современном мире с несколькими устройствами, где изображения и текст будут отображаться по-разному для разных посетителей и на разных экранах, это разделение имеет важное значение для долгосрочного успеха и управления веб-страницей.
