Как вставить изображение на веб-документ?

Тегом img. По сути, изображение уже вставлено, но к нему нет не одного атрибута, поэтому при сохранении такого пустого тега получиться… А ничего не получиться, разлив что, рамочка с текстом: «Изображение». Ну вот так:

Изображение

Как же сделать так, чтоб наше изображение всё-таки показывалось в окне браузера? Очень просто, для этого надо прописать атрибут «src», внутри которого будет написан URL-адрес к изображению.

То есть, код получиться такой:

Как задать ширину и высоту?

Так, изображение мы вставили. Предположим, оно шириной 200 пикселей, а выстой – 500. С такими же параметрами ширины и высоты оно и показывается. То есть, я хочу сказать, что ширину и высоту прописывать не обязательно. Тогда для чего же нужны эти атрибуты?

1. Во-первых, для более быстрой обработки кода браузером. Ну так оно будет грузить на полмиллисекунды быстрее. [показать]


2. Во-вторых, для того, чтобы задать ширину и высоту, отличающуюся от их настоящей. Например, у нас ширина изображения 200, высота 500, а нам надо такое же изображение, но шириной в 100 пикселей и высотой в 250. Лично я так никогда не делаю и вам не советую. Лучше создать отдельное изображение. Но сейчас не об этом.

Ладно, по одной из причин вам потребовалось прописать ширину и высоту. Для этого пишем атрибут «width» и «height» со значениями, которые были по умолчанию или с любыми другими.

А код у нас, естественно, получиться такой:

Как выровнять изображение, задать обтекание?

Выровнять изображение и задать обтекание – это одно и то же. [показать] Задать обтекание можно по левому краю или по правому. Остальными значениями голову, наверное, лучше не забивать. Я не забиваю. [показать]

Как выровнять по левому краю? Прописать атрибут «align» со значением «left». Всё!

Как выровнять по правому краю? Прописать атрибут «align» со значением «right». Всё!

А код получить такой:

Конечно, если вы хотите задать обтекание по левому краю.

Как написать описание и название?

Описание – выводится тогда, когда изображение по какой-то причине не грузится, например, неправильно указан путь к изображению. Название – высвечивается при наведении на изображение курсором. А ещё, эти атрибуты полезны для поисковых систем. В общем, я искренне рекомендую прописывать их к каждому изображению.

Тэкс. Чтобы добавить к изображению описание, нужно прописать атрибут alt, а внутри него текст. А чтобы добавить название, нужно сделать всё то же самое, только вместо атрибута alt прописать атрибут title.

Теперь у нас код такой:

Как сделать рамку вокруг изображения?

Рамочка вокруг всего изображения может вам пригодиться. Например, чтобы отделить изображение от другого контента.

Итак, оно задаётся атрибутом «border», значение которого – толщина рамки в пикселях.

А код становиться всё длиннее и длиннее: [показать]

Отступы

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

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

Отступы бывают двух видов: горизонтальные и вертикальные. Горизонтальные задаются атрибутом «hspace», значение которого – количество пикселей, которое вы хотите отступить. Вертикальные задаются атрибутом «vspace», значение которого… ну это вы догадались.

Конечный код получается такой:

Итог

Теперь вы знаете, как вставить изображение на сайт, и обработать его. А именно: задать ширину, высоту, описание, название, обтекание, нарисовать рамку, сделать отступы. И ещё раз конечный код: