Главная » Все про HTML » Как вставить картинку в HTML. Урок – 7 (для начинающих).

Как вставить картинку в HTML. Урок – 7 (для начинающих).

2013-07-01 / Вр:18:52 / просмотров: 34869

Всем привет!!! По этой статье вы научитесь вставлять картинку в HTML документ. Это вовсе не сложно. Но вначале я бы хотел вам дать несколько рекомендаций по поводу картинок на веб-странице.

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

Приступим.

Как вставить картинку в html?
Так, как я говорил - здесь сложного ничего нет, добавьте этот html код.

kartinka - это название картинки
jpg - это расширение картинки. Расширение может быть gif, png, bmp.

Если картинка размещена в папке images, тогда путь к картинке будет таким:

images - название папки, где лежит картинка "kartinka.jpg".

Если картинка лежит на другом сайте, тогда код будет таким:

https://www.bloggood.ru - это адрес сайта.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Как вставить картинку в html</title>
</head>
<body>
<img src="kartinka.jpg">
</body>
</html>

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

Для этого просто заключите картинку между ссылочным элементом:

Атрибуты для картинок

ALIGN - этот атрибут предназначен для обтекания или выравнивания картинки по горизонтали.
left - выравнивание по левому краю, текст будет обтекать справа.
right - выравнивание по правому краю, текст обтекает слева.

Результат:

Как вставить картинку в HTML. Урок - 7 (для начинающих).

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

HSPACE - отступы от картинки по горизонтали (в пикселях).
VSPACE - отступы от картинки по вертикали (в пикселях).

Результат:

отступы от картинки

HEIGHT - высота изображения (пикселях).
WIDTH - ширина изображения (пикселях).

Результат:

высота и ширена изображения

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

Результат:

заголовок картинки

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

Результат:

BORDER - это атрибут отвечает за размер рамки вокруг картинки

А если поменять значение border на 5:

Результат:

BORDER - это атрибут отвечает за размер рамки вокруг картинки

Как сделать картинку фоном?

Любую картинку можно сделать фоном. Для этого в теге body пропишите атрибут background.

На картиночном фоне может отображаться текст.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Как вставить ссылку-якорь в html</title>
</head>
<body background="kartinka.jpg">

<p>текст</p>
<p>текст</p>

</body>
</html>

Результат:

Картинка как фон

На этой ноте можно было бы и закончить тему "Как вставить картинку в HTML", но знаю, что многих интересует вопрос, а как поставить картинку по центру.
Чтобы поставить картинку по центру, вам достаточно применить такой фокус:

Вот теперь точно все. Переходим к следующему уроку.