 |
 |
Размещение текста рядом с картинкой
13.02.2016
Текст может располагаться сверху, внизу, снизу и рядом с картинкой.
<img src="image.jpg" align="top"> - размещение текста вверху
<img src="image.jpg" align="middle"> - размещение текста посередине
<img src="image.jpg" align="bottom"> - размещение текста снизу
<img src="image.jpg" align="left"> - размещение текста справа
<img src="image.jpg" align="right"> - размещение текста слева
По умолчанию ширина и высота картинки равна реальным размерам картинки, чтобы саму картинку не менять в размерах, можно это сделать с помощью тэгов (он её сожмет, но будет выглядеть немного криво):
<img src="image.jpg" width="100" height="200">
Где width="100" - цифра регулирует ширину картинки
height="200" - цифра регулирует высоту картинки
<img src="image.jpg" alt="моя первая картинка на сайте"> - если навести курсор мыши на рисунок, то через некоторое время выскочит описание картинки, в этом случае выскочит "моя первая картинка на сайте".
Для приведения примера понадобится маленькая картинка, примерно 100х100 пикселей.
<HTML>
<head>
<title>Мой первый сайт!</title>
</head>
<body>
<center><H3>Добро пожаловать мой первый сайт!</H3></center>
<font size="2"><img src="image.jpg" align="right" alt="моя первая картинка на сайте" width="100" height="200"> Учиться искусству создания сайта необходимо, ведь Интернет предлагает нам уникальную возможность заявить о себе, проявить свой творческий талант и быть услышанным. Вступив на эту дорогу, вам придетсяотдавать вашему будущему сайту все силы, всю энергию, весь талант. <br>
Учтите еще и вот что: процесс создания сайта включает в себя как технические, так и чисто творческие моменты </font>
</body>
</html>
В примере показано, как разместить текст по левому краю, а также описание картинки, высота и ширина.
Как сделать обтекание картинки текстом?
Задача
Добавить изображение на страницу так, чтобы оно обтекалось рядом лежащим текстом.
Решение
Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создаётся с помощью стилевого свойства float, добавляемого к селектору IMG. Значение left выравнивает изображение по левому краю, right — по правому. Обтекание при этом происходит по другим, свободным сторонам.
Пример 1. Обтекание картинок
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Обтекание</title><style>.leftimg { float:left; /* Выравнивание по левому краю */ margin:7px 7px 7px 0; /* Отступы вокруг картинки */ } .rightimg { float:right; /* Выравнивание по правому краю */ margin:7px 0 7px 7px; /* Отступы вокруг картинки */ }</style></head><body><h2>Доклад лейтенанта Бокатуева</h2><p><img src="images/1.jpg" alt="Лейтенант Бокатуев"width="132" height="174" class="leftimg">Вчера во время проведения разведоперации наша группа подверглась нападению неизвестного противника в камуфляжной форме Алиенов. В результате эффективной обороны и стремительной контратаки многочисленная группа боевиков была смята и отброшена. Среди личного состава потерь нет. Бойцы разведгруппы проявили недюжие навыки владения оружием. Особо отличился в бою взводный Кудряшев М.А., грамотно использовавший человеческие ресурсы своего взвода. В результате операции были захвачены элементы внеземной культуры, которые переданы аналитической группе.</p><h2>Пресс-релиз аналитической группы</h2><p><img src="images/2.jpg" alt="Учёные, находящиеся в состоянии аффекта" class="rightimg">В наших секретных лабораториях в рамках проекта «Пандора» разрабатывалось психотропное оружие. В результате неудачного эксперимента большинство ученых, работавших над прибором, подверглись воздействию психотропного излучения, и они, находясь в состоянии аффекта, растащили прототип по деталям. Возможно, наши ученые до сих пор находятся в состоянии аффекта.</p></body></html>
Результат данного примера показан на рис. 1.
Использование свойства float заставляет текст плотно прилегать к изображению. Поэтому в примере введёно универсальное свойство margin, которое добавляет отступы между картинкой и текстом. Это свойство одновременно задаёт отступ сверху, справа, снизу и слева от фотографий.
|
| Поставить к себе на сайт |
Создано на конструкторе сайтов Okis при поддержке Flexsmm - накрутка подписчиков телеграм
Russian TOPТОП ПРОЕКТОВ:
|
English TOP
|
