Вставка изображений на сайт

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

Предлагаем

1. Сайт от 35 000 рублей

2. Взятие сайта на обслуживание. от 3500 р/месяц

3. Проведение рекламных кампаний Google AdWords. от 3500 р/месяц.

Еще предложения

Веб-разработка, Транспорт, Агентства недвижимости, Переводы, Интернет-магазины, Контекстная реклама

Прием заявок

9.00 - 16.00 Мск

Контакты

Тел.: +7 (905) 529-53-55

Skype:  mainframe.13

Email:  info@poly-edr.ru

Вставка изображений на сайт

Вставка изображений

Разве можно себе представить настоящий яркий сайт, на котором совсем нет картинок? Совершенно невозможно!
Для вставки изображений на страницу существует специальный тег, который указывает браузеру, в каком месте документа необходимо вставить изображение и из какого файла. Это, тег <img>, он не является парным, поэтому вся информация о вставляемом изображении прописывается в его атрибутах.


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


Абсолютный адрес – это полный путь к файлу. Например, если файл logo.jpg находиться на сайте site.ru, да ещё в папке images, то абсолютный путь к нему будет следующим site.ru/images/logo.jpg. Абсолютные пути используются крайне редко, гораздо удобнее указывать пусть к файлу относительно текущей страницы, особенно, если сайт изначально создается на домашнем компьютере, а уже потом размещается на сервере.
В этом случае указывается местоположение графического файла относительно местоположения веб-странички. Например, если html-страница и картинка logo.jpg размещены в одной папке, то для вставки этой картинки на страницу нужно задать следующее значение атрибуту src:
<img src="logo.jpg"/>


Но представь, что на твоём сайте размещены сотни картинок, хранить их в одной папке с html-страницами не очень удобно. Поэтому в корневом каталоге сайта обычно создают папку специально для графических файлов (images или img) и помещают в неё все изображения, а путь к графическим файлам в этом случае прописывается так:
<img src="images/logo.jpg"/>


Все остальные атрибуты тега <img> не являются обязательными и используются по мере необходимости.
Атрибуты width и height — ширина и высота изображения в пикселях. В этих атрибутах чаще всего указываются реальные размеры изображения, их наличие не обязательно, но считается признаком хорошего тона веб-мастера. С чем это связано? Дело в том, что текст передаётся по каналам связи гораздо быстрее, чем графика, поэтому и отображается на странице раньше картинок. Но если браузер начал отображать страницу, а сам ещё не знает, какого размера картинка размещена на ней, то он оставляет под изображение совсем мало места. В результате, во время загрузки страницы в браузере можно наблюдать ситуацию, когда текст несколько раз «переезжает» по мере того, как подгружается графика. А вот если браузер заранее знает, какого размера картинка (это указано в атрибутах), то он «забронирует» под картинку необходимое пространство, и никакие элементы твоего сайта никуда не уедут.


Если указанные размеры изображения больше реальных, то браузер растянет картинку до указанных размеров, если меньше — сожмёт. Но для изменения размера изображения лучше всё-таки пользоваться графическим редактором.


Атрибут alt позволяет задать описание картинки для тех, у которых выключен режим показа графических элементов. В таком случае браузер резервирует отдельное место под изображение, но к сожалению вместо картинки покажет простой текст.
Атрибут border определяет толщину рамки изображения.
Атрибут align отвечает заобтекание рисунка текстом,. Данный атрибут может принимать два основных значения: left и right.
Чтобы прекратить обтекание, можно просто использовать <br/>, точнее его атрибут clear. Возможные значения этого атрибута: left right, all (прекращения обтекания всех картинок на странице ).

 

Вставка изображений на сайт


И последние два атрибута тега <img> это hspace и vspace — горизонтальные и вертикальные поля изображения , их значение указывается в виде количества пикселей. По умолчанию, изображение появляется на странице почти вплотную к тексту и другими элементами, с помощью полей можгл установить соответствующие отступы.


Итак, всего один тег <img> благодаря разнообразным атрибутам позволяет не просто вставлять изображения на страницу, но и настраивать их.
Кстати, изображение можно не только вставить в определённое место страницы, его можно указать в качестве фона страницы. Это позволяет сделать атрибут background тега <body>: <body background="images/fon.jpg">