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

"Ваш сайт" Размещение изображений.

вставка изображения в html

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

Итак рассмотрим на примерах как вставить изображение в html на страницу сайта.

Основное требование это указывать путь на место где размещается рисунок

1).  изображение лежит в той же папке что и страница.

В работе учавствует Тег IMG, (рисунок) закрывающего тега нет.

И атрибут SRC (сокращение от source = положение). Данный атрибут указывает где находится изображение. Следовательно можно легко вставлять изображения, размещенные в других папках или на других сайтах. Что нужно - так это указывать правильный путь.

Примеры:

<img src="images/ pikine.jpg"> изображение находится в папке “images”
<img src="https://www.aragrig.ru/pikine.jpg"> изображение находится на сайте www.aragrig.ru

<img src="https:// www.aragrig.ru/images/ pikine.jpg ">  изображение находится на сайте www.agrig.ru  в папке images

Атрибуты:

ALIGN – применяется для выравнивания картинки по горизонтали.

LEFT - Очень полезное свойство при обтекании картинки текстом.  Обычно используют (выравнивание по левому краю, текст будет обтекать справа)

RIGHT (выравнивание по правому краю, текст обтекает слева) .Если на странице есть текст, то это обязательное свойство.

HSPACE и VSPACE - отступы в пикселях по горизонтали и по вертикали от картинки до других обьектов документа. Перевод с английского. HSPACE - Horizontal Space - горизонтальный отступ и VSPACE - Vertical Space - вертикальный отступ.

HEIGHT и WIDTH - высота и ширина изображения в пикселах. Важно – надо всегда задавать размеры картинки в атрибутах HEIGHT и WIDTH, таким образом резервируется  место в окне браузера еще до загрузки изображения. Иначе страница при загрузке картинок  будет каждый раз перерисовываться.

Примеры:


отступами и выравниванием по правому краю

<p align="justify"> <img src="pikine.jpg" width="65" height="59" hspace="15" vspace="15" align="right">

отступы и выравнивание по левому краю

align="justify"> <img src="pikine.jpg" width="65" height="59" hspace="15" vspace="15" align="left">
Атрибуты - ALT и TITLE .
ALT - определяет текст названия изображения, будет отображаться когда браузер не может найти файл с изображением или включен в текстовый режим.

Пример:

<img src="pikine.jpg" alt="пик Ине" width="65" height="59">

TITLE - Заголовок картинки если курсором навести на картинку высветится надпись с текстом из атрибута title .

Пример:

<img src="pikine.jpg" width="65" height="59" title="пик Ине">

Как изображение сделать ссылкой.

Для этого вместо текста ссылки, вставляете изображение

вставка изображения в html

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

Продолжим и разберем виды ссылок html

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 4

Оценок пока нет. Поставьте оценку первым.

Copy Protected by Chetan's WP-Copyprotect.