Img

Установка однотонного заднего фона с помощью html

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

Прежде всего, раскроем особенности изменения фона страниц в HTML. Чтобы установить цветовой оттенок, применяют свойство background-color в стилевом атрибуте style. Таким образом, задать фоновый цвет сайта можно прописав его характеристики в тег <body>. К примеру:

<p>Фон сайта #55D52B</p>

</body>

Помимо 16-теричного кода оттенка можно задать цвет фона в виде ключевого слова или RGB. Пример:

<p>Фон сайта rgb(23,113,44)</p>

</body>

Отметим, что в сравнении с двумя другими вариантами, при установке цвета фона в формате ключевого слова есть несколько ограничений. В html для того, чтобы задать цвет могут применяться только шестнадцать ключей. К примеру, white, red, blue, black, yellow и др. В связи с имеющимися ограничениями мы рекомендуем для установки HTML фона сайта применять16-теричного кода или RGB.

Вы сумеете не только установить цвет фона, но и сделать еще ряд настроек.

Форматы графических изображений.

Существует множество различных графических форматов, но браузеры поддерживают лишь несколько. Рассмотрим три из них.

1. Формат JPEG
(Joint Photographic Experts Group
). Довольно популярный формат, применяемый для хранения изображений. Поддерживает 24-битовый цвет и сохраняет все полутона в фотографиях неизменными. Но jpeg не поддерживает прозрачность и искажает мелкие детали и текст в изображениях. JPEG используется в основном для хранения фотографий. Файлы этого формата имеют расширения jpg, jpe, jpeg.

2. Формат GIF
(Graphics Interchange Format
). Главное достоинство этого формата возможность хранить сразу несколько изображений в одном файле. Это позволяет создавать целый анимированные ролики. Во-вторых он поддерживает прозрачность. Главный недостаток это поддержка всего лишь 256-цветов, что никуда не годится для хранения фотографий. GIF в основном используется для хранения логотипов, баннеров, изображения с прозрачными участками и содержащих текст. Файлы этого формата имеют расширение gif.

3. Формат PNG
(Portable Network Graphics
). Это формат был разработан как замена устаревшему GIF, а также, в некоторой степени, JPEG. Поддерживает прозрачность, но не позволяет создавать анимацию. Данный формат имеет расширение png.

При создании сайтов обычно используют изображения в формате JPEG или GIF, но иногда используют PNG. Главное разобраться в каких случаях какой формат лучше использовать. Если кратко, то:

JPEG лучше всего использовать для хранения фотографий или полутоновых картинок не содержащих текста;

GIF используется в основном для анимации;
PNG — формат для всего остального (иконки, кнопки и др.).

Обтекание текстом сложных фигур

Путем разработки новой спецификации CSS Shapes удалось оказать влияние на существующий дизайн и предоставить ему новые перспективы. Теперь контент может обтекать сложные фигуры и криволинейные области.

Спецификация поддерживается браузером Chrome Canary, и сейчас пытаются реализовать ее на остальных. Она позволяет создавать сложные конструкции без помощи редакторов графики.

Обтекание круглой картинки текстом html обеспечивается с помощью следующей записи:

shape-outside: circle(-300px,-300px,300px); /* (x, y, radius) */

Пример текста

Код создает круг, идеально обтекаемый текстом.

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

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

С помощью свойства float можно выровнять изображение по левому (img {float: left; margin: 0 0;}) или по правому (img {float: right; margin: 0 0 ;}) краю веб-страницы или блока-контейнера.

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

Отменить обтекание следующего блока текста или заголовка можно при помощи конструкции h2, p {clear: left;} или h2, p {clear: right;}.

Также можно расположить изображение по центру страницы img {display: block; margin: 0 auto;}, или сделать обтекание картинки текстом с двух сторон, обернув каждый блок текста в отдельный абзац.

<h1>List of towns in England</h1><h2>Amersham</h2><p><img class=”left” src=”https://html5book.ru/wp-content/uploads/2015/02/Amersham.jpg”>Amersham is …</p><h2>Buxton</h2><p><img class=”right” src=”https://html5book.ru/wp-content/uploads/2015/02/Buxton.jpg”>Buxton is …</p><h2>Chesterfield</h2><p class=”columns”>Chesterfield is …</p><img class=”img-center” src=”https://html5book.ru/wp-content/uploads/2015/02/Chesterfield.jpg”><p class=”columns”>It has …</p><h2>Dartmouth</h2><p><img class=”center” src=”https://html5book.ru/wp-content/uploads/2015/02/Dartmouth.jpg”>Dartmouth is …</p>body { margin: 0; background: #FFF8E8; padding: 0 20px; font-size: 90%; counter-reset: h2; /*создаем счетчик для любого заголовка h2*/}h1 { font-family: ‘Lora’, serif; color: #564C4A; font-weight: 300;}h2 { font-family: ‘Lora’, serif; color: #B00D22; font-weight: 300; clear: both; /* отменяем обтекание с обеих сторон */ padding: 1em 0 0.25em; border-bottom: 2px solid; counter-increment: h2; /* задаем увеличение нумерации заголовков h2 на единицу */}h2:before { content: ” ” counter(h2) ‘. ‘; /* добавляем в начале каждого заголовка текущее значение счетчика и точку с пробелом */}p { font-family: arial; color: #785F5B; line-height: 1.3;}/********** картинка слева **********/.left { float: left; margin: 0 1em 1em 0;}/********** картинка справа **********/.right { float: right; margin: 0 0 1em 1em;}/********** картинка между текста **********/.columns { float: left; max-width: 30%; margin: 0;}.img-center { float: left; margin: 0 1.5% 0 1.5%; max-width: 37%;}/********** картинка по центру********* */.center { display: block; margin: 0 auto 1.5%;}

Использование тега Img и его атрибутов Src, Width и Height

Итак, давайте посмотрим, как можно использовать графику на своем сайте. Во-первых, это возможность вставки изображения как элемента (объекта) в Html код страницы. Как раз именно такая вставка осуществляется с помощью Img, который является особенным — строчным элементом с замещаемым контентом
, к которым относятся всего лишь четыре , одни из которых мы уже упомянули, а три остальных — (современный вариант использования фреймов), (для вставки видео и другого медиа контента).

Ведет себя он в точности как строчный элемент, но вот внутри него отображается посторонний внешний контент (фото в случае Img или видео и флеш в случае Object и Embed). Любой из этих четырех элементов подразумевает наличие внешнего файла, который будет подгружаться вот в эту самую область, заданную в нем атрибутами.

Для указания пути до графического файла, который должен подгружаться на страницу, служит специальный атрибут Src
.

Браузер пользователя при разборе Html кода страницы, как только встретит в нем тэг Img, сразу же создает область для строчного элемента, в которую загружается внешний файл (например, фотография). Путь до файла браузер берет из содержимого Src.

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

Если вы хотите, чтобы браузер сразу же выделял для этого элемента область нужного размера, а не потом ее изменял при получении данных о размере загружаемого изображения, то вы должны будет обязательно указать атрибуты Width и Height
.

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

На сервер заливается графический файл огромного размера и весом в несколько мегабайт (сразу после фотографирования без обработки) и прописывается до него путь в Src. А для того, чтобы изображение не занимало бы весь экран, в тэг Img дописывают Width и Height с приемлемыми размерами по ширине и высоте.

И что получается в результате? Посетитель такого сайта наблюдает удручающе медленную подгрузку изображения в сравнительно малую область, заданную в упомянутых атрибутах (несколько мегабайт веса вписываются в размер 300 на 400 пикселов).

Поэтому сразу же делайте картинки для выкладывания в Веб того самого размера, который вы будете показывать на сайте и прописывать в Width и Height тега Img. Уважайте своих пользователей и не тратьте понапрасну их трафик (особенно мобильный). можно, например, в FastStone Image Viewer или любом другом графическом ректоре, например, .

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

Теперь давайте посмотрим, каким образом можно указать путь до файла с изображением в Src тега Img. Собственно, можно использовать и , о которых я уже довольно подробно писал в приведенной статье. Все зависит от нюансов и удобства.

Т.е. Src может содержать, например, следующие записи:

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

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

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

Как вставить в html картинку

Для вставки картинки в html используется тег <img>. Синтаксис мы рассмотрели чуть выше. Давайте приведем практические примеры.

Пример 2.1. Использование тега <img>

Этот код преобразуется на странице в следующее:

В данном примере мы указали прямой адрес изображения из картинок на Яндекс Фото. Чаще всего указывается ссылки на картинки, которые лежат на том же URL. Например, src=»/img/kartinka.jpg», т.е. указывается относительный адрес.

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

Пример 2.2. Вывод нескольких картинок в html друг за другом

Преобразуется на странице в следующее:

Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой оно бы уже не уместилось.

Пример 2.3. Использование альтернативного текста (alt) в img

Рекомендуется прописывать альтернативный текст (атрибут alt) в теге <img>, чтобы застраховать себя от случая, что картинка не доступна. Ниже приведен пример с использованием альтернативного текста. В первом случае мы не задавали размеры картинки, а во втором задаем.

Преобразуется на странице в следующее:

Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой строке оно бы уже не уместилось.

Теперь рассмотрим подробно все атрибуты тега <img>.

Текст сверху картинки по центру.

Как поставить картинку по центру картинки!? Как вообще написать текст на картинке html?

Нам понадобится блок div с id «id=»tekst_sverhu_kartinki»»

Позиция будет «position: relative;»

Во внутрь поместим картинку и новый блок div с class-ом «class=»tekst_sverhu_kartinki»»

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

Html:

<div class=»tekst_sverhu_kartinki»>Текст сверху картинки</div>

</div>

Css:

<style>

div#tekst_sverhu_kartinki {

position: relative;

}.tekst_sverhu_kartinki {

position: absolute;

top: 50%;

left: 65px;

text-transform: uppercase;

color: white;

width: 350px;

background: #00000094;

padding: 10px;

text-align: center;

font: bold 24px/34px Helvetica, Sans-Serif;

}

</style>

Задача 1

Первый пример будет посвящен тому, что мы создадим вот такое нестандартное решение. Этот пример нестандартен тем, что мы создаем некую картинку, которая имеет форму отличную от квадрата и прямоугольника (это то, к чему мы привыкли). Безусловно, здесь не подходит метод, как если бы мы сохранили картинку при помощи png. Я думаю, что многие понимают, что если вы сделаете так, то этот текст не станет по краю, где обрезается эта картинка. Наша же цель, сделать такое обтекание текста, для нестандартной формы. Сделаем HTML-разметку. Для начала создадим общий div и назовем его container. В нем создадим пустой div с классом shaped и div с классом content,где будет наш текст.После этого переходим к CSS. Начнем со стилизации блока container задав ему свойства высоты и ширины:

height: 100vh;wight: 100vw;

Далее мы будем стилизовать shaped. Устанавливаем цвет background-а и картинку:

background: black url(https://pp.userapi.com/c849120/v849120857/cc331/XftS2mpmwHo.jpg) center top no-repeat;

center — устанавливаем изображение по центру;top — устанавливаем изображение сверху по оси Y;no-repeat — без повтора. Устанавливаем высоту:

height: 100vh;

Используем ширину, но берем значение не 100vw, а например 40vw:

width: 40vw;

Растягиваем изображение по всему контейнеру:

background-size: cover;

Теперь давайте используем свойство к которому мы все привыкли:

float: right;

Дальше мы будем работать с 3 свойствами, с которыми вы, возможно, работаете очень редко, это: shape-outside, shape-margin и clip-path.Мы должны создать SVG при помощи CSS. Для этого нам необходимо создать многоугольник, его мы можем создать при помощи свойства polygon, ему мы задаем координаты откуда и до куда должны вырисовываться отрезки для того что бы нарисовать этот многоугольник:

shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%);

Создаем отступы:

shape-margin: 20px;

И последнее заключающее, что мы должны сделать, это использовать свойство clip-path, внутри которого мы используем те же значения polygon, которые прописывали ранее:

clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%);

Ознакомиться подробнее с HTML и CSS можно тут:

Синтаксис тега

Обратите внимание, что данный тег является одиночным и не требует закрывающего тега . Атрибут src является обязательным

С помощью него указывается адрес выводимого изображения. Можно указать абсолютный или относительный URL. Если адрес не указать или же написать с ошибкой, то картинка выведена не будет

Атрибут src является обязательным. С помощью него указывается адрес выводимого изображения. Можно указать абсолютный или относительный URL. Если адрес не указать или же написать с ошибкой, то картинка выведена не будет.

Атрибут alt=»описание» — не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.

Остальные атрибуты являются необязательными, их мы рассмотрим чуть ниже. Сначала приведем простенький пример вывода картинки на html.

Выравнивание изображения по центру

Д»ÃÂ ÃÂ²ÃÂÃÂÃÂ°ÃÂ²ÃÂ½ÃÂ¸ÃÂ²ÃÂ°ÃÂ½ÃÂ¸ÃÂ ÃÂ¸ÃÂ·ÃÂ¾ÃÂ±ÃÂÃÂ°ÃÂ¶ÃÂµÃÂ½ÃÂ¸ÃÂ ÃÂ¿ÃÂ¾ ÃÂÃÂµÃÂ½ÃÂÃÂÃÂ ÃÂºÃÂ¾ÃÂ»ÃÂ¾ÃÂ½ÃÂºÃÂ¸ ÃÂÃÂµÃÂºÃÂÃÂÃÂ°, ÃÂ¿ÃÂÃÂ¾ÃÂÃÂµ ÃÂ²ÃÂÃÂµÃÂ³ÃÂ¾ ÃÂÃÂµÃÂ³ ÃÂ¿ÃÂ¾ÃÂ¼ÃÂµÃÂÃÂÃÂ¸ÃÂÃÂ ÃÂ² ÃÂºÃÂ¾ÃÂ½ÃÂÃÂµÃÂ¹ÃÂ½ÃÂµÃÂ

ÃÂÃÂ»ÃÂ ÃÂºÃÂ¾ÃÂÃÂ¾ÃÂÃÂ¾ÃÂ³ÃÂ¾ ÃÂÃÂÃÂ°ÃÂ²ÃÂ¸ÃÂÃÂÃÂ ÃÂ°ÃÂÃÂÃÂ¸ÃÂ±ÃÂÃÂ align=ÃÂ»centerÃÂ». ÃÂÃÂÃÂ»ÃÂ¸ ÃÂ¾ÃÂ¶ÃÂ¸ÃÂ´ÃÂ°ÃÂµÃÂÃÂÃÂ ÃÂÃÂ°ÃÂÃÂÃÂ¾ÃÂµ ÃÂ¸ÃÂÃÂ¿ÃÂ¾ÃÂ»ÃÂÃÂ·ÃÂ¾ÃÂ²ÃÂ°ÃÂ½ÃÂ¸ÃÂµ ÃÂºÃÂ°ÃÂÃÂÃÂ¸ÃÂ½ÃÂ¾ÃÂº, ÃÂÃÂ¾ ÃÂ¾ÃÂ¿ÃÂÃÂ¸ÃÂ¼ÃÂ°ÃÂ»ÃÂÃÂ½ÃÂµÃÂµ ÃÂ±ÃÂÃÂ´ÃÂµÃÂ ÃÂ¿ÃÂÃÂ¸ÃÂ¼ÃÂµÃÂ½ÃÂµÃÂ½ÃÂ¸ÃÂµ CSS ÃÂÃÂÃÂ¸ÃÂ»ÃÂ ÃÂ´ÃÂ»ÃÂ ÃÂÃÂµÃÂ³ÃÂ°

ÃÂÃÂ°ÃÂº ÃÂÃÂÃÂ¾ ÃÂÃÂµÃÂ°ÃÂ»ÃÂ¸ÃÂ·ÃÂ¾ÃÂ²ÃÂ°ÃÂ½ÃÂ¾, ÃÂÃÂ¼ÃÂ¾ÃÂÃÂÃÂ¸ÃÂÃÂµ ÃÂ² ÃÂ¿ÃÂÃÂ¸ÃÂ¼ÃÂµÃÂÃÂµ 1.

ÃÂÃÂÃÂ¸ÃÂ¼ÃÂµÃÂ 1. ÃÂÃÂÃÂÃÂ°ÃÂ²ÃÂ½ÃÂ¸ÃÂ²ÃÂ°ÃÂ½ÃÂ¸ÃÂµ ÃÂÃÂ¸ÃÂÃÂÃÂ½ÃÂºÃÂ° ÃÂ¿ÃÂ¾ ÃÂÃÂµÃÂ½ÃÂÃÂÃÂ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

html
>

head
>

meta
http-equiv
=
«Content-Type»
content
=
«text/html; charset=utf-8»
>

title
>
ÃÂ ÃÂ¸ÃÂÃÂÃÂ½ÃÂ¾ÃÂº ÃÂ¿ÃÂ¾ ÃÂÃÂµÃÂ½ÃÂÃÂÃÂ/
title
>

style
type
=
«text/css»
>
/
style
>

/
head
>

body
>

p
class
=
«cimg»
>

img
src
=
«images/sample.gif»
width
=
«200»
height
=
«100»
alt
=
«ÃÂÃÂ»ÃÂ»ÃÂÃÂÃÂÃÂÃÂ°ÃÂÃÂ¸ÃÂ»
>

/
p
>

/
body
>

/
html
>

ÃÂ ÃÂ¸ÃÂÃÂÃÂ½ÃÂ¾ÃÂº ÃÂ¿ÃÂ¾ ÃÂÃÂµÃÂ½ÃÂÃÂÃÂ

ÃÂÃÂ¾ÃÂ±ÃÂ°ÃÂ²ÃÂ»ÃÂÃÂµÃÂ¼ CSS-ÃÂºÃÂ»ÃÂ°ÃÂÃÂ cimg, ÃÂ² ÃÂºÃÂ¾ÃÂÃÂ¾ÃÂÃÂ¾ÃÂ¼ ÃÂ¿ÃÂÃÂ¾ÃÂ¿ÃÂ¸ÃÂÃÂÃÂ²ÃÂ°ÃÂµÃÂÃÂÃÂ ÃÂ²ÃÂÃÂÃÂ°ÃÂ²ÃÂ½ÃÂ¸ÃÂ²ÃÂ°ÃÂ½ÃÂ¸ÃÂµ ÃÂ¿ÃÂ¾ ÃÂÃÂµÃÂ½ÃÂÃÂÃÂ ÃÂÃÂÃÂÃÂ¾ÃÂºÃÂ¸. ÃÂ¢ÃÂ¾, ÃÂºÃÂ°ÃÂº ÃÂÃÂÃÂ¾ ÃÂ±ÃÂÃÂ´ÃÂµÃÂ ÃÂÃÂÃÂµÃÂ¼ÃÂ°ÃÂÃÂ¸ÃÂÃÂ½ÃÂ¾ ÃÂ²ÃÂÃÂ³ÃÂ»ÃÂÃÂ´ÃÂµÃÂÃÂ Ã¢ÂÂ ÃÂ¿ÃÂ¾ÃÂºÃÂ°ÃÂ·ÃÂ°ÃÂ½ÃÂ¾ ÃÂ½ÃÂ° ÃÂÃÂ¸ÃÂÃÂÃÂ½ÃÂºÃÂµ 1.

ÃÂ ÃÂ¸ÃÂ. 1. ÃÂ ÃÂ¸ÃÂÃÂÃÂ½ÃÂ¾ÃÂº ÃÂ² ÃÂÃÂµÃÂ½ÃÂÃÂÃÂµ ÃÂºÃÂ¾ÃÂ»ÃÂ¾ÃÂ½ÃÂºÃÂ¸ ÃÂÃÂµÃÂºÃÂÃÂÃÂ°

Атрибут ALT

Атрибут предоставляет альтернативный текст для изображения, если пользователь по какой-либо причине не может его просмотреть (из-за медленного соединения, ошибки в атрибуте src или если пользователь использует средство чтения с экрана).

Значение атрибута должно описывать изображение:

Пример

Если обозреватель не может найти изображение, будет отображено значение атрибута :

Пример

Примечание: Атрибут является обязательным. Веб-страница не будет корректно проверяться без нее.

Обтекание картинки текстом в Html — атрибут Align тега Img

Теперь давайте поговорим про выравнивание вставленных изображений в Html коде. У всех четырех строчных элементов с замещаемым контентом (Img, Iframe, Object и Embed) есть возможность выравнивания с помощью атрибута Align
. Но он вообще-то применяется только для блочных элементов, а упомянутые теги — строчные.

Поэтому некоторые значения Align для Img (например, задание обтекания картинки текстом) будут означать совсем иное, нежели при использовании этого же атрибута в блочных элементах ( и т.п.).

Вообще, выравнивание картинок с помощью Align при использовании в Img можно разделить на две группы.

Итак, что же происходит, когда мы вставляем графический файл в текст документа? Фактически он встает как одна большая буква:

По умолчанию используется выравнивание по нижнему краю, т.е. добавление в элемент Img атрибута align=»bottom» ничего не изменит. Но зато можно попробовать задать выравнивание картинки по верхнему краю, добавив в элемент align=»top»:

Png» align=»top»>

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

Возможно еще одно значение этого атрибута align=»middle»
:

Png» align=»middle»>

В этом случае текст в строке с картинкой будет выравниваться по середине этого самого рисунка.

Но кроме выравнивания по вертикали в Html предусмотрено и обтекание
картинок текстом, для чего используются значения — Left и Right
. Эта группа значений атрибута Align сильно отличается от предыдущей.

При использовании значений Left и Right внутри элемента Img мы добиваемся, так называемого, обтекания картинки текстом, которое задается в Html коде. В этом случае рисунок становится и текст начинает ее обтекать.

Например, при align=»left» мы получим такой результат:

Png» align=»left»>

Значение Left в Img означает, что фото плавает в левую сторону, а текст ее обтекает справа. В случае align=»right» картинка будет плавать в правую сторону, а текст ее будет обтекать слева:

Png» align=»right»>

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

Для этого можно использовать атрибуты элемента Img — Hspace и Vspace
. С помощью них отжимается обтекающий текст от изображения. Hspace задает отступы слева и справа от изображения до обтекающего его текста, а Vspace — сверху и снизу. Отступы задаются в , например:

Png» align=»left» hspace=»30″ vspace=»30″>

Поддержка браузерами

Браузер:	Internet Explorer	Google Chrome	Mozilla Firefox	Opera
Версия:	6.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Да	Да	Да	Да	Да

Элемент
(от англ. «image» ‒ «изображение») предназначен для вставки в HTML страницу изображений в графическом формате GIF, JPEG, SVG или PNG. Адрес файла с изображением задаётся через атрибут src .

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

Если
используется внутри ссылки или задает карту-изображение, то вокруг самого изображения некоторые браузеры отображают рамку, которую можно стилизовать или убрать при помощи CSS.

Технически изображение не вставляется в HTML-страницу, а подключается к HTML-странице, при этом важным моментом является его размер (вес) в килобайтах, а точнее соотношение вес-качество. Естественно, чем меньше вес изображений — тем быстрее загрузится страница.

Также, для ускорения загрузки веб-страниц рекомендуется устанавливать атрибуты width и height , элемента
. Тогда браузер не будет ожидать полной загрузки изображения, он просто выделит под него место и будет загружать страницу дальше, а его подгрузит потом. К тому же, если одно изображение используется на странице несколько раз (значение атрибута src
одинаковое), то браузер загружает его с сервера только один раз, а потом берет из кэш-памяти.

Примечание:
Браузеры не всегда показывают изображение, указанное в этом элементе. Например, если браузер неграфический (включая используемые людьми с нарушениями зрения), или если браузер не может показать изображение, потому что файл испорчен. В таких случаях браузер может заменить изображение альтернативным текстом, определённым в атрибуте alt элемента.

HTML5: ИЛЛЮСТРАЦИИ И ПОДПИСИ

<figure>
<img src=”images/otters.jpg” alt=”Фотография двух выдр, держащихся за лапки”/>
<br />
<figcaption>Во время сна выдры держат друг друга за лапки, чтобы их не разнесло течением.</figcaption>
</figure>

Зачастую изображения сопровождаются подписями.

В спецификации HTMLS появился новый элемент <figure>, объединяющий изображение и подпись к нему, таким образом текст и рисунок оказываются связанными друг с другом.

В один элемент <figure> можно включить несколько изображений, в случае если для них используется одна подпись.

Элемент <figcaption> был включен в язык HTMLS, чтобы позволить веб-дизайнерам добавлять подписи к публикуемым изображениям.

До введения этих двух элементов связать изображение <img> с текстом было невозможно.

Устаревшие версии браузеров не распознают элементы языка HTMLS и просто отображают их содержимое на странице.

В приведенном примере логотип — это изображение в формате GIF (оно содержит однотонные участки), а фотографии сохранены в формате JPEG. Основная фотография помещена в элемент <figure> языка HTML5 и у нее есть подпись.

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

Как вставить картинку в HTML: ВЫСОТА И ШИРИНА ИЗОБРАЖЕНИИ

<img scr=”images/quokka.jpg” alt=”Семейка квокки” width=”600” height=”450”/>

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

height

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

width

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

Как правило, время загрузки изображений значительно дольше, чем НТМL-кода, составляющего всю остальную разметку страницы. Поэтому рекомендуется указывать размеры изображений, чтобы браузер мог продолжить обработку текста сайта, не дожидаясь окончания их загрузки и оставив необходимое количество пустого места.

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

Фон в CSS (background-color, background-image)

Если у Вас появились вопросы по материалам на нашем сайте, то пожалуйста, пришлите нам их на почтовый адрес [email protected]. Мы обязательно ответим.

Также Вы можете отправить нам свой отзыв на наши слуги, замечание или предложение. Мы ценим наших клиентов и внимательно прислушиваемся ко всем замечаниям!

HTML

Основы
Теги

Основы
Свойства

Основы
База данных
Объектно-ориентированное программирование
Laravel
Yii

Основы

WordPress

Управление
Разработка

Управление
Разработка

Управление
Разработка

Управление
Разработка

Управление
Разработка

Управление
Разработка

Управление

Основы
Работа с DOM
AJAX
jQuery
Vue
NodeJS
React

Основы React
Стейты в React
Компоненты React

Apache
Игровые серверы
Linux
MySQL
Docker
Nginx
Устранение ошибок

Почта
SEO

Личный кабинет
Виртуальный хостинг
Домены

Генератор паролей
Генератор .htpasswd

Коврик для мыши новым клиентам

Оплатите хостинг на год и получите удобный коврик

Помощь в переносе с другого хостинга

Хотите переехать? Мы поможем перенести всё

Запишитесь на интенсивные курсы по созданию сайтов.

Вставка изображения (картинки) на страницу в HTML

Как уже говорилось ранее, для вставки изображений на страницу используют тег <img>. Краткая его форма выглядит следующим образом:

в HTML, и так:

в XHTML. Из примера видно, что для последнего добавляется слеш (косая черта) в конце.

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

Этот тег (<img>), в отличие, например, от ссылки, не закрывается и пишется в той форме, что я привел выше. Рекомендуемым атрибутом является «alt»:

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

А теперь есть смысл рассказать обо всех атрибутах, которые поддерживает тег <img>.

Атрибуты

src:

Указывает браузеру расположение (URL-адрес) нужного изображения.
Пример »

alt:

Предоставляет текстовое описание картинки, выводимое на экран только в случае, если картинка по каким-либо причинам не может быть отображена.

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

Пример »
Если картинка используется в качестве украшения веб-страницы и не несет в себе никакой смысловой нагрузки, то вместо описания картинки в качестве значения можно оставить пустую строку (alt=»»).

height:

Указывает высоту изображения в пикселях.

ismap:

Атрибут ismap является атрибутом булева типа. Его присутствие указывает браузеру, что картинка является частью карты-изображения расположенной на сервере (карта-изображение — изображение с интерактивными областями). Допустимые значения логического атрибута ismap:

<img ismap>
<img ismap="ismap">
<img ismap="">

При нажатиии на интерактивную область карты-изображения, координаты клика отправляются на сервер в строке запроса URL-адреса.

Примечание: атрибут ismap используется только если элемент <img> является дочерним элементом тега <a>, содержащего атрибут href.

usemap:

Определяет изображение в качестве карты-изображения. Значение (обязательно должно начинаться с символа «#»), указанное в данном атрибуте, ассоциируется со значением атрибута name или id тега <map> и создает связь между элементами <img> и <map>.
Пример »

Примечание: атрибут usemap нельзя использовать, если элемент <img> является потомком элемента <a> или <button>.

width:

Указывает ширину изображения в пикселях.

Примечание: всегда указывайте атрибуты width и height для изображения. В этом случае пространство требуемое для изображения будет заранее резервироваться браузером при загрузке страницы. Поскольку браузер сам не может заранее вычислить размер изображения, без этих атрибутов разметка страницы во время загрузки может отображаться некорректно, до тех пор пока изображение не будет загружено. Это будет особенно ощутимо для тех пользователей, у которых медленный интернет.

Тег <img> так же поддерживает Глобальные атрибуты и События

Создание врезок

ВÃÂµÃÂ·ÃÂºÃÂ¾ÃÂ¹
ÃÂ½ÃÂ°ÃÂ·ÃÂÃÂ²ÃÂ°ÃÂµÃÂÃÂÃÂ ÃÂ±ÃÂ»ÃÂ¾ÃÂº ÃÂ ÃÂÃÂ¸ÃÂÃÂÃÂ½ÃÂºÃÂ°ÃÂ¼ÃÂ¸ ÃÂ¸ ÃÂÃÂµÃÂºÃÂÃÂÃÂ¾ÃÂ¼, ÃÂºÃÂ¾ÃÂÃÂ¾ÃÂÃÂÃÂ¹
ÃÂ²ÃÂÃÂÃÂÃÂ°ÃÂ¸ÃÂ²ÃÂ°ÃÂµÃÂÃÂÃÂ ÃÂ² ÃÂ¾ÃÂÃÂ½ÃÂ¾ÃÂ²ÃÂ½ÃÂ¾ÃÂ¹ ÃÂÃÂµÃÂºÃÂÃÂ. ÃÂÃÂÃÂµÃÂ·ÃÂºÃÂ° ÃÂ¾ÃÂ±ÃÂÃÂÃÂ½ÃÂ¾ ÃÂÃÂ°ÃÂÃÂ¿ÃÂ¾ÃÂ»ÃÂ°ÃÂ³ÃÂ°ÃÂµÃÂÃÂÃÂ ÃÂ¿ÃÂ¾ ÃÂ»ÃÂµÃÂ²ÃÂ¾ÃÂ¼ÃÂ ÃÂ¸ÃÂ»ÃÂ¸ ÃÂ¿ÃÂÃÂ°ÃÂ²ÃÂ¾ÃÂ¼ÃÂ
ÃÂºÃÂÃÂ°ÃÂ ÃÂÃÂµÃÂºÃÂÃÂÃÂ¾ÃÂ²ÃÂ¾ÃÂ³ÃÂ¾ ÃÂ±ÃÂ»ÃÂ¾ÃÂºÃÂ°, ÃÂ° ÃÂ¾ÃÂÃÂ½ÃÂ¾ÃÂ²ÃÂ½ÃÂ¾ÃÂ¹ ÃÂÃÂµÃÂºÃÂÃÂ ÃÂ¾ÃÂ±ÃÂÃÂµÃÂºÃÂ°ÃÂµÃÂ ÃÂµÃÂ ÃÂ ÃÂ´ÃÂÃÂÃÂ³ÃÂ¸ÃÂ ÃÂÃÂÃÂ¾ÃÂÃÂ¾ÃÂ½ (ÃÂÃÂ¸ÃÂ. 3.34).

ÃÂ ÃÂ¸ÃÂ. 3.34. ÃÂÃÂ¸ÃÂ´ ÃÂ²ÃÂÃÂµÃÂ·ÃÂºÃÂ¸

ÃÂ§ÃÂÃÂ¾ÃÂ±ÃÂ ÃÂ²ÃÂÃÂµÃÂ·ÃÂºÃÂ° ÃÂ²ÃÂÃÂ´ÃÂµÃÂ»ÃÂÃÂ»ÃÂ°ÃÂÃÂ ÃÂ² ÃÂÃÂµÃÂºÃÂÃÂÃÂµ, ÃÂ ÃÂ½ÃÂµÃÂ ÃÂ¾ÃÂ±ÃÂÃÂÃÂ½ÃÂ¾ ÃÂÃÂÃÂÃÂ°ÃÂ½ÃÂ°ÃÂ²ÃÂ»ÃÂ¸ÃÂ²ÃÂ°ÃÂÃÂ ÃÂÃÂ¾ÃÂ½ÃÂ¾ÃÂ²ÃÂÃÂ¹ ÃÂÃÂ²ÃÂµÃÂ ÃÂ¸
ÃÂ´ÃÂ¾ÃÂ±ÃÂ°ÃÂ²ÃÂ»ÃÂÃÂÃÂ ÃÂÃÂ°ÃÂ¼ÃÂºÃÂ. ÃÂÃÂ¾ ÃÂÃÂ²ÃÂ¾ÃÂµÃÂ¼ÃÂ ÃÂ²ÃÂ¸ÃÂ´ÃÂ ÃÂ²ÃÂÃÂµÃÂ·ÃÂºÃÂ¸ ÃÂ½ÃÂ°ÃÂ¿ÃÂ¾ÃÂ¼ÃÂ¸ÃÂ½ÃÂ°ÃÂÃÂ ÃÂ¿ÃÂÃÂ¸ÃÂ²ÃÂµÃÂ´ÃÂÃÂ½ÃÂ½ÃÂÃÂ¹ ÃÂ²ÃÂÃÂÃÂµ ÃÂÃÂ¿ÃÂ¾ÃÂÃÂ¾ÃÂ± ÃÂ¾ÃÂ±ÃÂÃÂµÃÂºÃÂ°ÃÂ½ÃÂ¸ÃÂ
ÃÂÃÂµÃÂºÃÂÃÂÃÂ¾ÃÂ¼ ÃÂºÃÂ°ÃÂÃÂÃÂ¸ÃÂ½ÃÂºÃÂ¸, ÃÂ¿ÃÂ¾ÃÂÃÂÃÂ¾ÃÂ¼ÃÂ ÃÂºÃÂ¾ÃÂ´ ÃÂ´ÃÂ»ÃÂ ÃÂÃÂ¾ÃÂ·ÃÂ´ÃÂ°ÃÂ½ÃÂ¸ÃÂ ÃÂ²ÃÂÃÂµÃÂ·ÃÂ¾ÃÂº ÃÂ¿ÃÂÃÂ°ÃÂºÃÂÃÂ¸ÃÂÃÂµÃÂÃÂºÃÂ¸ ÃÂ¸ÃÂ´ÃÂµÃÂ½ÃÂÃÂ¸ÃÂÃÂµÃÂ½ ÃÂ¿ÃÂÃÂµÃÂ´ÃÂÃÂ´ÃÂÃÂÃÂµÃÂ¼ÃÂ
(ÃÂ¿ÃÂÃÂ¸ÃÂ¼ÃÂµÃÂ 3.23).

ÃÂÃÂÃÂ¸ÃÂ¼ÃÂµÃÂ 3.23. ÃÂÃÂ¾ÃÂ±ÃÂ°ÃÂ²ÃÂ»ÃÂµÃÂ½ÃÂ¸ÃÂµ ÃÂ²ÃÂÃÂµÃÂ·ÃÂºÃÂ¸

XHTML 1.0
CSS 2.1
IE
Cr
Op
Sa
Fx

ÃÂÃÂÃÂµÃÂ·ÃÂºÃÂ°

Ã¢ÂÂ ÃÂ¸ÃÂ½ÃÂÃÂÃÂÃÂÃÂ¼ÃÂµÃÂ½ÃÂ Magic Erase.

ÃÂÃÂ¾ ÃÂÃÂ²ÃÂ¾ÃÂµÃÂ¼ÃÂ ÃÂ´ÃÂµÃÂ¹ÃÂÃÂÃÂ²ÃÂ¸ÃÂ ÃÂ¿ÃÂ¾ÃÂÃÂ¾ÃÂ¶ ÃÂ½ÃÂ° ÃÂ¸ÃÂ½ÃÂÃÂÃÂÃÂÃÂ¼ÃÂµÃÂ½ÃÂ Magic Wand, ÃÂ½ÃÂ¾ ÃÂ² ÃÂ¾ÃÂÃÂ»ÃÂ¸ÃÂÃÂ¸ÃÂµ ÃÂ¾ÃÂ
ÃÂ½ÃÂµÃÂ³ÃÂ¾, ÃÂ½ÃÂµ ÃÂ²ÃÂÃÂ´ÃÂµÃÂ»ÃÂÃÂµÃÂ ÃÂ¾ÃÂ±ÃÂ»ÃÂ°ÃÂÃÂÃÂ, ÃÂ° ÃÂÃÂÃÂ¸ÃÂÃÂ°ÃÂµÃÂ ÃÂµÃÂµ.

ÃÂÃÂ½ÃÂÃÂÃÂÃÂÃÂ¼ÃÂµÃÂ½ÃÂ Magic Erase (ÃÂÃÂ¾ÃÂ»ÃÂÃÂµÃÂ±ÃÂ½ÃÂÃÂ¹ ÃÂ»ÃÂ°ÃÂÃÂÃÂ¸ÃÂº) ÃÂÃÂÃÂ¸ÃÂÃÂ°ÃÂµÃÂ ÃÂ¿ÃÂ¸ÃÂºÃÂÃÂµÃÂ»ÃÂ ÃÂ±ÃÂ»ÃÂ¸ÃÂ·ÃÂºÃÂ¸ÃÂµ ÃÂ¿ÃÂ¾
ÃÂÃÂ²ÃÂµÃÂÃÂ. ÃÂÃÂÃÂ»ÃÂ¸ ÃÂ¼ÃÂ ÃÂÃÂ°ÃÂ±ÃÂ¾ÃÂÃÂ°ÃÂµÃÂ¼ ÃÂÃÂ¾ ÃÂÃÂ»ÃÂ¾ÃÂµÃÂ¼ Background ÃÂ¸ÃÂ»ÃÂ¸ ÃÂÃÂ¾ ÃÂÃÂ»ÃÂ¾ÃÂµÃÂ¼, ÃÂ¿ÃÂÃÂ¾ÃÂ·ÃÂÃÂ°ÃÂÃÂ½ÃÂ¾ÃÂÃÂÃÂ
ÃÂ½ÃÂ° ÃÂºÃÂ¾ÃÂÃÂ¾ÃÂÃÂ¾ÃÂ¼ ÃÂ·ÃÂ°ÃÂ±ÃÂ»ÃÂ¾ÃÂºÃÂ¸ÃÂÃÂ¾ÃÂ²ÃÂ°ÃÂ½ÃÂ°, ÃÂ¿ÃÂ¸ÃÂºÃÂÃÂµÃÂ»ÃÂ ÃÂ·ÃÂ°ÃÂ¼ÃÂµÃÂ½ÃÂÃÂÃÂÃÂ ÃÂ½ÃÂ° ÃÂÃÂ¾ÃÂ½ÃÂ¾ÃÂ²ÃÂÃÂ¹ ÃÂÃÂ²ÃÂµÃÂ. ÃÂÃÂ¾ ÃÂ²ÃÂÃÂµÃÂ
ÃÂ¾ÃÂÃÂÃÂ°ÃÂ»ÃÂÃÂ½ÃÂÃÂ ÃÂÃÂ»ÃÂÃÂÃÂ°ÃÂÃÂ ÃÂ¼ÃÂ ÃÂ¿ÃÂ¾ÃÂ»ÃÂÃÂÃÂ¸ÃÂ¼ ÃÂ¿ÃÂÃÂ¾ÃÂ·ÃÂÃÂ°ÃÂÃÂ½ÃÂÃÂ ÃÂ¾ÃÂ±ÃÂ»ÃÂ°ÃÂÃÂÃÂ.

ÃÂÃÂÃÂ¸ÃÂ½ÃÂÃÂ¸ÃÂ¿ ÃÂÃÂ°ÃÂ±ÃÂ¾ÃÂÃÂ ÃÂ ÃÂ¸ÃÂ½ÃÂÃÂÃÂÃÂÃÂ¼ÃÂµÃÂ½ÃÂÃÂ¾ÃÂ¼ Magic Erase ÃÂ½ÃÂ°ÃÂ¿ÃÂ¾ÃÂ¼ÃÂ¸ÃÂ½ÃÂ°ÃÂµÃÂ ÃÂÃÂ°ÃÂ±ÃÂ¾ÃÂÃÂ ÃÂ
ÃÂ¸ÃÂ½ÃÂÃÂÃÂÃÂÃÂ¼ÃÂµÃÂ½ÃÂÃÂ¾ÃÂ¼ Magic Wand. ÃÂ ÃÂ¸ÃÂ¼ÃÂµÃÂ½ÃÂ½ÃÂ¾, ÃÂ²ÃÂ½ÃÂ°ÃÂÃÂ°ÃÂ»ÃÂµ ÃÂÃÂÃÂÃÂ°ÃÂ½ÃÂ°ÃÂ²ÃÂ»ÃÂ¸ÃÂ²ÃÂ°ÃÂµÃÂ¼ ÃÂ¿ÃÂ¾ÃÂ´ÃÂÃÂ¾ÃÂ´ÃÂÃÂÃÂµÃÂµ
ÃÂ·ÃÂ½ÃÂ°ÃÂÃÂµÃÂ½ÃÂ¸ÃÂµ Tolerance, ÃÂ²ÃÂºÃÂ»ÃÂÃÂÃÂ°ÃÂµÃÂ¼ ÃÂÃÂ»ÃÂ°ÃÂ¶ÃÂ¾ÃÂº Anti-aliased ÃÂ´ÃÂ»ÃÂ ÃÂÃÂ¾ÃÂ·ÃÂ´ÃÂ°ÃÂ½ÃÂ¸ÃÂ ÃÂ¿ÃÂ»ÃÂ°ÃÂ²ÃÂ½ÃÂÃÂ
ÃÂ³ÃÂÃÂ°ÃÂ½ÃÂ¸ÃÂ, ÃÂÃÂ±ÃÂ¸ÃÂÃÂ°ÃÂµÃÂ¼ ÃÂÃÂ»ÃÂ°ÃÂ¶ÃÂ¾ÃÂº ÃÂ ÃÂ¿ÃÂ°ÃÂÃÂ°ÃÂ¼ÃÂµÃÂÃÂÃÂ° Contiguous ÃÂ´ÃÂ»ÃÂ ÃÂ¾ÃÂ´ÃÂ½ÃÂ¾ÃÂ²ÃÂÃÂµÃÂ¼ÃÂµÃÂ½ÃÂ½ÃÂ¾ÃÂ³ÃÂ¾ ÃÂÃÂ´ÃÂ°ÃÂ»ÃÂµÃÂ½ÃÂ¸ÃÂ
ÃÂ²ÃÂÃÂµÃÂ³ÃÂ¾ ÃÂÃÂ¾ÃÂ½ÃÂ°, ÃÂ¿ÃÂ¾ÃÂÃÂ»ÃÂµ ÃÂÃÂµÃÂ³ÃÂ¾ ÃÂÃÂµÃÂ»ÃÂºÃÂ°ÃÂµÃÂ¼ ÃÂ¿ÃÂ¾ ÃÂÃÂ¾ÃÂÃÂ¾ÃÂ³ÃÂÃÂ°ÃÂÃÂ¸ÃÂ¸ ÃÂ² ÃÂÃÂ°ÃÂ¹ÃÂ¾ÃÂ½ÃÂµ ÃÂ½ÃÂµÃÂ±ÃÂ°. ÃÂÃÂÃÂ»ÃÂ¸ ÃÂÃÂ»ÃÂ¾ÃÂ¹
Background ÃÂ±ÃÂÃÂ» ÃÂ¿ÃÂÃÂµÃÂ´ÃÂ²ÃÂ°ÃÂÃÂ¸ÃÂÃÂµÃÂ»ÃÂÃÂ½ÃÂ¾ ÃÂ¿ÃÂµÃÂÃÂµÃÂ¸ÃÂ¼ÃÂµÃÂ½ÃÂ¾ÃÂ²ÃÂ°ÃÂ½, ÃÂ¼ÃÂ ÃÂ¿ÃÂ¾ÃÂ»ÃÂÃÂÃÂ¸ÃÂ¼ ÃÂ¿ÃÂÃÂ¾ÃÂ·ÃÂÃÂ°ÃÂÃÂ½ÃÂÃÂµ
ÃÂÃÂÃÂ°ÃÂÃÂÃÂºÃÂ¸ ÃÂ² ÃÂ½ÃÂÃÂ¶ÃÂ½ÃÂÃÂ ÃÂ¼ÃÂµÃÂÃÂÃÂ°ÃÂ.

ÃÂÃÂÃÂ¸ ÃÂÃÂ¾ÃÂ·ÃÂ´ÃÂ°ÃÂ½ÃÂ¸ÃÂ¸ ÃÂ²ÃÂÃÂµÃÂ·ÃÂ¾ÃÂº ÃÂÃÂ»ÃÂµÃÂ´ÃÂÃÂµÃÂ ÃÂ¾ÃÂ±ÃÂÃÂ·ÃÂ°ÃÂÃÂµÃÂ»ÃÂÃÂ½ÃÂ¾ ÃÂÃÂºÃÂ°ÃÂ·ÃÂÃÂ²ÃÂ°ÃÂÃÂ ÃÂµÃÂ ÃÂÃÂ¸ÃÂÃÂ¸ÃÂ½ÃÂ ÃÂ ÃÂ¿ÃÂ¾ÃÂ¼ÃÂ¾ÃÂÃÂÃÂ ÃÂÃÂ²ÃÂ¾ÃÂ¹ÃÂÃÂÃÂ²ÃÂ°
width
. ÃÂÃÂ½ÃÂ°ÃÂÃÂµ ÃÂÃÂ°ÃÂ·ÃÂ¼ÃÂµÃÂ ÃÂÃÂ»ÃÂ¾ÃÂ ÃÂ¾ÃÂºÃÂ°ÃÂ¶ÃÂµÃÂÃÂÃÂ ÃÂ³ÃÂ¾ÃÂÃÂ°ÃÂ·ÃÂ´ÃÂ¾ ÃÂÃÂ¸ÃÂÃÂµ,
ÃÂÃÂµÃÂ¼ ÃÂÃÂÃÂ¾ ÃÂÃÂÃÂµÃÂ±ÃÂÃÂµÃÂÃÂÃÂ.

Задаем размер. Атрибуты WIDTH и HEIGHT

Замечу сразу, ширина и высота очень важные параметры, поэтому не нужно их игнорировать. Суди сам, при незаданных размерах изображения, да при отключенных изображениях в браузере, когда изображения не загружаются, маленькие пустые квадратики могут распологаться совсем не в том месте где ты их планировал разместить. Красоты странице это не придаст. Поэтому не ленись и всегда прописывай размеры в HTML коде.

Задаются размеры изображения тегами width — ширина и height — высота, значения задаются как в пикселях, так и в процентах от ширины экрана (с процентами очень осторожно). Смотрим код:

<img src="image/logo.jpg" border="0" title="Логотип сайта SMARTINCOM.RU" alt="Изображение логотипа сайта SMARTINCOM.RU" width="200" height="90">

Задаем размер. Атрибуты WIDTH и HEIGHT

Задаются размеры изображения тегами width
— ширина и height
— высота, значения задаются как в пикселях, так и в процентах от ширины экрана (с процентами очень осторожно). Смотрим код: