Как изменить расположение картинки на сайте html

Добавление изображений на страницу — типовая задача веб-разработчиков. Её можно выполнить разными способами: вставить картинку в разметку через теги <img>, <svg> или использовать в CSS с помощью background-image.

Вставка изображений в теге <img>

Для каких изображений подходит: для логотипов, фото, иллюстраций, графиков и других контентных изображений.

💡 Контентные изображения тесно связаны по смыслу с содержимым страницы и дополняют его. Например, к таким изображениям относятся фото сотрудников в разделе «О нас» или схема проезда к отелю.

Чтобы вставить изображение с помощью <img>, нужно добавить в тег четыре обязательных атрибута:

• src — указывает путь до картинки;
• alt — добавляет альтернативный текст, который отображается, если изображение не загрузилось;
• width — задаёт ширину изображения;
• height — задаёт высоту изображения.

<img src="images/keks.jpg" alt="Рыжий кот Кекс лежит у ноутбука." width="1024" height="683">

С помощью такого кода можно вставить фото кота Кекса шириной 1024px и высотой 683px.

Вставка через <svg>

Для каких изображений подходит: для векторных в формате SVG.

С помощью этого способа вы можете добавить иконки, чтобы затем менять их состояние.

Иконки добавляются с помощью тега <svg>, в котором прописываются размеры изображения. Например, иконку VK из примера выше можно вставить так:

<a href="https://vk.com/">
  <svg width="30" height="30">
    <path d="..."/>
  </svg>
  <span class="visually-hidden">Вконтакте</span>  
</a>

Небольшое отступление. Возможно, вы не знакомы с классом
visually-hidden — его добавляют элементам, которые нужно скрыть в интерфейсе. В нашем случае <span> с таким классом создаёт подпись «Вконтакте». Её смогут прочитать скринридеры, но не увидят пользователи. Добавлять такие подписи к иконкам — хорошая практика.

Вставка через CSS

Для каких изображений подходит: для декоративных.

💡 Декоративные изображения нужны для украшения страницы. Их отсутствие не поменяет смысл контента, поэтому они имеют только оформительское назначение.

Есть два способа вставить декоративное изображение: сделать фоном или добавить как псевдоэлемент.

Добавление фоновых изображений

Для добавления фоновых изображений используется CSS-свойство background-image. Вместе с ним нужно прописать размеры изображения — width и height.

Например, на странице есть контейнер с классом .image-container:

<div class="image-container"></div>

Чтобы задать ему фон, нужно написать следующий код:

.image-container {
  background-image: url("images/keks.jpg");
  width: 600px;
  height: 400px;
}

Это минимальный набор CSS-правил. Часто фронтендеры используют дополнительные правила, чтобы изменить позицию и размеры изображения или запретить повтор фоновой картинки.

CSS-свойство background-attachment указывает, что делать с изображением: зафиксировать его позицию в области просмотра или пролистывать вместе с содержимым контейнера.

Его значения:

• scroll — значение по умолчанию. Фон прокручивается вместе с содержимым.
• fix — фон фиксируется.
• local — фон фиксируется с учётом содержимого элемента.

CSS-свойство background-position управляет расположением фона по осям X и Y, то есть по вертикали и горизонтали. Ему можно задавать значения, используя ключевые слова, процентные значения или конкретные величины, например, 100px.

Ключевые слова для расположения по оси X:

• right — право;
• left — лево.

Ключевые слова для расположения по оси Y:

• top — сверху;
• bottom — снизу.

Можно сочетать разные значения:

background-position: 100px top; /* фон отступит 100px от левого края, останется сверху*/
background-position: 50% bottom; /* фон будет посередине и снизу*/
background-position: left 100px; /* фон будет слева и отступит 100px от верхнего края*/

Если нужно задать положение только по одной оси, используйте свойства background-position-x и background-position-y. Они принимают такие же значения, как и background-position.

Следующее CSS-свойство — background-repeat, оно задаёт повтор изображения. По умолчанию у свойства стоит значение repeat, то есть фоновое изображение повторяется по вертикали и горизонтали:

Чтобы изменить это поведение, надо поменять значение:

• no-repeat — не повторять изображение,
• repeat-x — повторять только по горизонтали
• repeat-y — повторять только по горизонтали.

CSS-свойство background-size определяет размеры изображения. Ему также можно задавать значения в виде ключевых слов, процентов или конкретных размеров.

background-size: /*размер по ширине*/ /*размер по высоте*/

Ключевые слова:

• auto — оставляет исходный размер изображения.
• contain — масштабирует изображение по ширине или высоте, чтобы оно заполнило контейнер. Картинка при этом не обрезается.
• cover — масштабирует изображение, сохраняя пропорции изображения. Картинка может обрезаться.

Чтобы было понятнее, посмотрим на примере. Оранжевыми рамками выделена область контейнера. Когда мы задали свойство background-size со значением contain, картинка заполнила всю высоту контейнера и осталась целой.

А когда мы задали cover, фото Кекса обрезалось и растянулось на всю ширину контейнера.

Есть и другие CSS-свойства. Почитайте о них в спецификации W3C.

При использовании фоновых изображений обязательно добавляйте цветной фон-подложку, особенно если у вас на сайте белый текст. Это важно, ведь у пользователей может быть плохое интернет-соединение, при котором картинки долго загружаются. Тогда посетители сайта увидят белый текст на белом экране.

Использование псевдоэлементов

Небольшие декоративные элементы добавляются с помощью псевдоэлементов ::before и ::after. Эти псевдоэлементы создают внутри элемента псевдотег, который можно стилизовать. Например, вы можете добавить ему фоновое изображение или текст.

💡 Этот псевдотег — виртуальный, вы не увидите его в разметке сайта.

Псевдоэлемент ::before добавляет псевдотег в начале, ::after — в конце. Вот пример использования псевдоэлемента на сайте HTML Academy. Перед вами блок с тремя тегами <p>. В каждом из них лежат <strong> для важных цифр и <span> для обычного текста. Когда мы добавляем абзацу ::before, внутри <p> появляется ещё один псевдотег — с картинкой.

Принцип добавления картинки похож на тот, что мы рассматривали при вставке фоновых изображений. Только здесь мы добавляем фон не контейнеру, а псевдотегу:

<p class="wrapper">
  <! -- псевдоэлемент с фоновой картинкой -->
  <srtong>1507</strong>
  <span>Заданий и испытаний</span>
</p>

.wrapper::before {
  content: "";
  width: 600px;
  height: 400px;
  display: block;
  background-image: url("images/keks.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

Разберём, что мы делаем.

Указываем содержимое. Мы используем свойство content с пустым значением, чтобы псевдоэлемент отобразился на странице. Обычно значением этого свойства является текст, но так как нам нужна только фоновая картинка, ставим значение "".

Делаем псевдоэлемент блочным. Прописываем размеры: ширину и высоту.

Добавляем фон. Указываем путь до картинки, убираем повтор и размещаем изображение по центру.

Заключение

Мы рассмотрели четыре основных способа вставки изображения. Первый выглядит самым простым, но он не всегда уместен. Поэтому выбирайте метод вставки, ориентируясь не на простоту работы, а на задачу и тип изображения. Например, логотип лучше добавлять с помощью <img>, а красивую фоновую картинку можно вставить с помощью
background-image.

Следуйте этому правилу, и пользователи полюбят ваш сайт.

Другие статьи о графике

• Как отличить контентное изображение от декоративного
• Растровая и векторная графика
• Как вставлять SVG
• Где скачать бесплатные фотографии для сайта

Этот урок посвящен теме как вставить картинку в HTML и какие стили CSS наиболее часто применяются для изображений. Здесь мы рассмотрим все основные вопросы касаемо вставки и отображения картинки в веб-документе. А также рассмотрим причины почему у некоторых пользователей не отображается картинка в HTML.

Содержание:

1. Как вставить картинку в HTML
2. Как изменить размер картинки в HTML
3. Как указать путь к файлу изображения
4. Как сделать картинку ссылкой
5. Как поставить на фон картинку
6. Как установить размер картинки в CSS
7. Как сделать картинку адаптивной
8. Как разместить текст на картинке
9. Как выровнять картинку по центру веб-страницы
10. Как сделать обтекание картинки текстом
11. Как выстроить картинки в ряд
12. Как изменить размер картинки при наведении на неё курсора мыши
13. Почему не отображается картинка в HTML

В HTML изображения в графическом формате (GIF, JPEG, PNG, APNG, SVG, BMP, ICO) добавляются на веб-страницу с помощью тега <img> через атрибут src, в котором указывается адрес картинки. То есть атрибут src является обязательным для элемента <img>. Без него этот тег не используют.

Ещё одним обязательным атрибутом элемента <img> является alt. Этот атрибут используют на тот случай, если по какой-либо причине, браузер не сможет отобразить картинку. При его использовании, в месте отображения картинки на экран будет выведен указанный вами текст.

В таблице ниже представлены атрибуты тега <img>, которые используются наиболее часто. Но на самом деле их намного больше, ведь для элемента <img> доступны все универсальные атрибуты и события.

Таблица. Основные атрибуты элемента <img>

HTML картинка. Примеры

Как добавить картинку в HTML?

Как уже говорилось, чтобы добавить картинку в HTML нужно использовать тег <img> и его обязательные атрибуты src и alt. Также, поскольку тег <img> – это строчный элемент, то его рекомендуется располагать внутри какого-нибудь блочного элемента. Например, <p> или <div>.

<p><img src="/D-Nik-Webmaster.jpg" alt="Здесь должна быть картинка"></p>

Как изменить размер картинки в HTML?

Чтобы изменить размер изображения используют атрибуты height (задаёт высоту картинки) и width (задаёт ширину картинки). Эти атрибуты можно указывать как вместе, так и по отдельности.

Если нужно пропорционально сжать картинку, то указывается только один атрибут (height, или width). Если же нужно чётко обозначить и высоту, и ширину картинки, то используют оба атрибута одновременно (height и width).

<p><img src="/D-Nik-Webmaster.jpg" height="300" width="300"></p>

Как указать путь к файлу изображения в HTML?

Адрес ссылки на файл изображения может быть абсолютным и относительным.

Абсолютный путь показывает точное местонахождение файла, а относительный показывает путь к файлу относительно какой-либо «отправной точки».

Примеры:

https://site/img/D-Nik-Webmaster.jpg – это абсолютный адрес файла D-Nik-Webmaster.jpg так как путь к нему указан полностью.

/img/D-Nik-Webmaster.jpg – это относительный путь от корневого каталога. Знак «/» в самом начале указывает на то, что это корень каталога и выше по директории подниматься нельзя. Если файл index.html (HTML-документ) находится в каталоге site, то этот каталог будет корневым («отправной точкой»).

../img/D-Nik-Webmaster.jpg – это относительный путь от документа. Две точки в самом начале означают, что вам нужно подняться на один каталог вверх. Таким образом, если смотреть на наш пример, то нужно подняться на 1 директорию вверх, найти там папку img, а в ней найти файл D-Nik-Webmaster.jpg.

../../D-Nik-Webmaster.jpg – указывает путь к файлу, но только с поднятием на 2 директории вверх.

Как сделать картинку ссылкой в HTML

Для того, чтобы сделать картинку ссылкой в HTML нужно содержимое элемента <img> обрамить в тег <a>.

<p><a href="https://d-nik.pro"><img src="/D-Nik-Webmaster.jpg" alt="Картинка тут"></a></p>

Картинка CSS. Примеры

Использование CSS (каскадных таблиц стилей) даёт возможность более гибко, более удобно и эффективно, настраивать отображение картинок на веб-странице. Поэтому даже для того, чтобы задать ширину и высоту изображений многие веб-мастера часто используют именно каскадные таблицы стилей.

Давайте рассмотрим несколько самых распространённых примеров оформления изображений на веб-странице с помощью CSS.

Как поставить на фон картинку в HTML?

Чтобы установить изображение в качестве фона нужно задать селектору body свойство background, или background-image.

Например:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        body{
            background: url('img/bg.jpg'); /* путь к файлу изображения, которое будет использоваться в качестве фона */
        }
    </style>

    <title>Как поставить на фон картинку в HTML</title>
</head>
<body>
    <p>Здесь будет написан какой-нибудь текст</p>
</body>
</html>

Как установить размер картинки в CSS

Чтобы задать размер картинки в CSS нужно использовать свойства width (ширина) и height (высота). Например:

1. Давайте создадим новый класс imgsize.
2. Для элементов этого класса пропишем свойство width равным 350px.
3. Присвоим картинке созданный ранее класс imgsize.

Таким образом, ширина картинки будет равна 350px, а высота уменьшится пропорционально. Если нужно установить фиксированную ширину и высоту картинки, то можно добавить свойство height (Например, height:350px).

Пример кода:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        .imgsize{
            width: 350px; /* ширина картинки будет 350px*/
            height:350px  /* высота картинки будет 350px*/
        }
    </style>

    <title>Как вставить картинку в HTML</title>
</head>
<body>
    <p><img class="imgsize" src="/img/bg.jpg" alt="Картинка">Здесь будет написан какой-нибудь текст</p>
</body>
</html>

Как сделать картинку адаптивной

Адаптивность картинки – это возможность изображения одинаково отображаться на разных типах устройств с различными характеристиками. Например, на компьютерах с разным разрешением экрана монитора, ноутбуках с разным разрешением дисплея, планшетах, телефонах и т.д.

Самый простой способ сделать одинаковое отображение картинки на всех устройствах – это использовать следующие правила:

img {
  width: 100%;
  height: auto;
}

Как разместить текст на картинке

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	/* Картинку и текст помещаем в контейнер */
	.container {
		position: relative;
		text-align: center;
		color: white;
	}
	/* Стили для текста */
		.text-block {
		position: absolute;
		bottom: 8px;
		left: 16px;
	}
	</style>

    <title>Как вставить картинку в HTML</title>
</head>
<body>
	<div class="container">
		<img src="/img/bg.jpg" alt="Картинка" style="width:100%;">
		<div class="text-block">Это наш текст</div>
	</div>
</body>
</html>

Как выровнять картинку по центру веб-страницы

Способ №1

Самый простой способ выровнять картинку по центру – это присвоить ей класс, сделать картинку блоком и задать ей автоматическое выравнивание с правой и левой части.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	/* Способ 1 */
	.center-img {
		display: block;
		margin: 0 auto;
	}
	</style>

    <title>Как вставить картинку в HTML</title>
</head>
<body>
		<img class="center-img" src="/img/logo.jpg" alt="Картинка">
</body>
</html>

Способ №2

Помещаем картинку в блок <div> или параграф <p>, присваиваем класс этому блоку (или параграфу), и устанавливаем правило выравнивание текста по центру.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	/* Способ 1 */
	.pull-center {
		text-align:center;
	}
	</style>

    <title>Как вставить картинку в HTML</title>
</head>
<body>
	<div class="pull-center">
		<img src="/img/logo.jpg" alt="Картинка">
	</div>
</body>
</html>

Как сделать обтекание картинки текстом

Выровнять изображение по левому, или по правому краю веб-страницы (или какого-нибудь блока, контейнера) можно с помощью свойства float.

Таким образом, чтобы сделать обтекание картинки текстом слева или справа нужно прописать следующие правила:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	.leftimg {
                 float:left; /* Выравнивание по левому краю */
                 margin: 0 10px 10px 0; /* Отступы вокруг картинки */
              }
              .rightimg  {
                float: right; /* Выравнивание по правому краю  */ 
                margin: 0 0 10px 10px; /* Отступы вокруг картинки */
              }
	</style>

    <title>Как вставить картинку в HTML</title>
</head>
<body>
	<h2>Пример выравнивания картинки по левому краю и обтекания её текстом справа</h2>
	<p><img src="/img/logo.jpg" alt="Картинка 1" width="120px" height="120px" class="leftimg">
    Если ты сейчас читаешь мою книгу, или просматриваешь этот материал на сайте www.d-nik.pro, значит, тебя интересует создание сайтов для начинающих с нуля. И так как HTML является самой важной составляющей каждой веб-страницы в интернете, изучение мы начнем именно с этого языка.</p>
	<p>Здесь хочу отметить, что HTML не является языком программирования. Это язык гипертекстовой разметки. Поэтому, в ходе прочтения данной книги, термин «язык HTML» будет встречаться тебе очень часто, но нужно понимать, что на HTML не программируют.</p>
	<p>Главная задача HTML – отобразить в окне браузера определенные данные. С помощью этого языка веб-разработчики выводят на странице сайта такие элементы как: ссылки, кнопки, поля для ввода текста, таблицы, картинки, видео, статьи и прочее.</p>
    <h2>Пример выравнивания картинки по правому краю и обтекания её текстом слева</h2>
	<p><img src="/img/logo.jpg" alt="Картинка 2" width="120px" height="120px" class="rightimg">
    Но с помощью HTML нельзя произвести никаких вычислительных операций (Например, сложить два числа, или произвести их умножение и т.д.).</p>
	<p>Отсюда и вывод. Задача языка программирования – обработка данных. А задача HTML – отображение данных. Вот поэтому HTML и не является языком программирования.</p>
	<p>Хотя, как и любой другой язык программирования, HTML имеет свой синтаксис, семантику и лексику. И знание HTML позволяет создавать сайты с нуля. Даже на чистом HTML (без использования CSS и JavaScript) можно создать вполне приличный одностраничный сайт. Хотя конечно же сделать это используя все вместе (HTML, CSS и JavaScript) будет намного проще.</p>
	<p>Но я считаю, что для того, чтобы научиться создавать свои собственные сайты с нуля, нужно знать основы-основ – а это как раз и есть язык HTML.</p>
</body>
</html>

Как выстроить картинки в ряд

Чтобы выстроить картинки по горизонтали в один ряд, нужно поместить их в блок <div> или параграф <p>, присвоить класс этому блоку (или параграфу), и установить следующие правила:

.img-line {
		border: 2px solid #55c5e9; /* Рамка вокруг фотографии */
		padding: 15px; /* Расстояние от картинки до рамки */
		background: #666; /* Цвет фона */
		margin-right: 10px; /* Отступ справа */
		margin-bottom: 10px; /* Отступ снизу */
    }

 Весь код будет выглядеть так:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	.img-line {
		border: 2px solid #55c5e9; /* Рамка вокруг фотографии */
		padding: 15px; /* Расстояние от картинки до рамки */
		background: #666; /* Цвет фона */
		margin-right: 10px; /* Отступ справа */
		margin-bottom: 10px; /* Отступ снизу */
    }
	</style>

    <title>Как вставить картинку в HTML</title>
</head>
<body>
	<p class="img-line">
	<img src="/img/logo.jpg" alt="Картинка 1" width="120px" height="120px">
	<img src="/img/logo.jpg" alt="Картинка 2" width="120px" height="120px">
	<img src="/img/logo.jpg" alt="Картинка 3" width="120px" height="120px">
	</p>
</body>
</html>

Как изменить размер картинки при наведении на неё курсора мыши

Изображение можно масштабировать (изменять его размер), вращать, сдвигать, или наклонять с помощью свойства transform. А для регулирования скорости анимации используется свойство transition.

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	.img-scale {
		transition: 1s; /* Время эффекта */		
    }
	.img-scale:hover {
		transform: scale(1.2); /* Увеличиваем масштаб */		
    }
	</style>

    <title>Как вставить картинку в HTML</title>
</head>
<body>
	<img src="/img/logo.jpg" alt="Картинка" class="img-scale">
</body>
</html>

Если нужно увеличить изображение, не увеличивая при этом размеры картинки, то картинку надо поместить в блок <div>. Для этого блока задать свойство display со значением inline-block, чтобы <div> стал размером с изображение; а также задать свойство overflow со значением hidden, чтобы всё пряталось за пределами блока <div>.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style>
	.img-scale {
    display: inline-block; /* Строчно-блочный элемент */
    overflow: hidden; /* Скрываем всё за контуром */
   }
   .img-scale img {
    transition: 1s; /* Время эффекта */
    display: block; /* Убираем небольшой отступ снизу */
   }
   .img-scale img:hover {
    transform: scale(1.2); /* Увеличиваем масштаб */
   }
	</style>

    <title>Как вставить картинку в HTML</title>
</head>
<body>
	<div class="img-scale">
	<img src="/img/logo.jpg" alt="Картинка">
	</div>
</body>
</html>

Почему не отображается картинка в HTML?

Причин почему картинка не отображается на веб-странице может быть несколько:

1. Неверный адрес файла. Чаще всего, картинка на сайте не показывается из-за того, что в HTML коде указан не верный путь к файлу изображения. Особенно внимательным нужно быть при составлении относительного пути к файлу. О том, как указать этот путь правильно мы уже говорили ранее. Поэтому повторяться не будем.
2. Несовпадение регистра, или неправильное имя файла. С неправильным именем файла думаю всё понятно. Если картинка не отображается, то первым делом проверьте правильно ли вы написали имя файла этого изображения. Также, указывая путь к файлу, обязательно нужно соблюдать регистр букв (маленькие буквы писать маленькими, большие — большими). Ведь если в качестве операционной системы веб-сервера выступает Unix-подобная система, то она различает регистр символов. Поэтому файлы logo.jpg и Logo.jpg (или loGo.jpg) эта система будет распознавать как два абсолютно разных файла. Вот почему я рекомендую постоянно писать имена файлов соблюдая регистр букв.
3. Разница добавления картинок в HTML-документ на локальном компьютере и веб-сервере. У многих пользователей на веб-сервере, путь /img/logo.jpg отлично работает. А вот на локальном компьютере путь к картинке нужно писать без слеша в самом начале – img/logo.jpg. Cимвол слэш (/) перед именем файла или папки говорит о том, что отсчет должен вестись от корня сайта. Соответственно, путь /img/logo.jpg следует понимать так: в корне сайта находится папка с именем img, а в ней располагается файл logo.jpg. А вот на локальном компьютере браузер будет интерпретировать такой путь как c:/img/logo.jpg, что является ошибкой. Ведь такой папки у нас нет.

PHP урок № 171

На мой взгляд самый простой способ разместить картинку в нужном месте странице —
это использовать CSS.

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего
вида документа, написанного языком разметки. Преимущественно используется как
средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми
видами документов в формате XML, включая SVG и XUL.

Более подробно ознакомится с CSS можно здесь.

На это тему написано огромное количество книг, изучая HTML нельзя обойти CSS это не
правильно. Так что начинается всё с HTML. :)Я начну рассказ то же с применения HTML. Как
известно в HTML есть теги, которые формируют вид страницы в браузере.


<p></p>

<h1></h1> 

<div></div> 

<table></table>

<thead></thead>

<tbody></tbody>

<tfoot></tfoot>

<tr></tr>

<th></th>

<td></td>


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

Стиль браузера — стандартный стиль, используемый браузером по умолчанию для
представления элементов.

У всех тегов описанных в листинге №1 есть атрибут align он отвечает за
расположение текста или картинки в пространстве страницы ПО ГОРИЗОНТАЛИ. Раз
есть атрибут тега, значит должен быть и аргумент этого атрибута.

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

<center><img src=»/images/Avatar1/Ava0002.gif» width=»81″ height=»100″> </center>

Выравнивание по ширине, что означает одновременное выравнивание по левому и
правому краю. Чтобы произвести это действие браузер в этом случае добавляет
пробелы между словами.

Выравнивание текста по левому краю. В этом случае строки текста выравнивается по
левому краю, а правый край располагается «лесенкой». Такой способ выравнивания
является наиболее популярным на сайтах, поскольку позволяет пользователю легко
отыскивать взглядом новую строку и комфортно читать большой текст.

<img src=»/images/Avatar1/Ava0002.gif» width=»81″ height=»100″ align=»left»>

Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли
антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а
левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него
начинается чтение новых строк, такой текст читать труднее, чем, если бы он был
выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно
для коротких заголовков объемом не более трех строк. Мы не рассматриваем
специфичные сайты, где текст приходится читать справа налево, там возможно
подобный способ выравнивания и пригодится. Но где вы у нас в стране видели такие
сайты.

<img src=»/images/Avatar1/Ava0002.gif» width=»81″ height=»100″ align=»right»>

Это картинка в таблице с отступами справа и слева. Здесь используются атрибуты
hspace — это отступы по горизонтали и vspace — отступ по вертикали,
причем сразу с двух сторон 70->картинка<-70.

<table width=»17%» height=»206″ border=»1″ cellpadding=»3″ cellspacing=»3″>
<br> <tr>
<br> <td><img src=»/images/Ava0002.gif» hspace=»70″ vspace=»50″ align=»bottom»></td>
<br> </tr>
<br></table>

Теперь используем CSS. Поместим картинку для начала в контейнер или в блок — в этом
нам поможет тег див. Он собственно и является своего рода контейнером или ещё
называют блоком. Про блочную вёрстку слышали, вот это с его помощью делается.

Синий край это границы контейнера (div), пространство внутри, которое заштриховано,
есть то пространство, на которое надо отступить внутри контейнера от его границ
(стрелками указана величина в пикселах). Таким образом и происходит размещение
контента внутри блока.

Листинг № Array — Размещение картинки с помощью CSS. Файл стиля.

@charset «windows-1251»;
/* CSS Document */
.gif {
padding-top: 200px;
padding-left: 150px;
width: 350px;
padding-bottom: 47px;
}

Рассмотрим подробнее. Первые две строки для нас сейчас не важны их пропускаем.
Далее идёт точка — это обозначение класса в CSS. Примерно читается так: класс gif
имеет следующие атрибуты:

Так же есть атрибут padding-right: — это отступ справа. Ну теперь наверно стало картина
прояснятся как можно подвинуть картинку, т.е. меняя аргументы атрибутов, те самые
циферки что измеряются в пикселах, хотя кстати то же не обязательно в них. Помимо
того, что мы рассмотрели атрибуты которые применяются с тегом див, которые
отвечают за расположение объекта внутри контейнера. Существуют ещё атрибуты
которые в свою очередь двигают контейнер снаружи относительно страницы это
margin.

Листинг № Array — Это весь HTML-код используемый для установки картинки в нужном месте страницы.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<title>Untitled Document</title>
<link href=»/hio.css» rel=»stylesheet» type=»text/css»>
</head>
<body>
<div class=»gif»><img src=»/images/Avatar1/Ava0002.gif» border=0></div>
</body>
</html>

Листинг № Array — Таблица CSS стилей для последнего примера. (Файл hio.css)

@charset «windows-1251»;
/* CSS Document */
.gif {
padding-top: 200px;
padding-left: 150px;
width: 350px;
padding-bottom: 47px;
margin-top: 50px;
margin-right: 250px;
margin-bottom: 101px;
margin-left: 312px;
}

SETTER © LPHP.RU
Администрация сайта
Array