Самостоятельное создание сайта
ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ


Оставить отзыв или предложение

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

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

Как всегда давайте наглядно посмотрим как это можно сделать:

Тэг для вставки изображения

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
</head>
<body>
</html>
<img src="proba.png" />
</body>
</html>

Вот что у нас в браузере будет:

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

Как видите здесь все достаточно просто, тег img самозакрывающийся и единственное, что вам необходимо прописать это путь к файлу изображения. В нашем случае файл располагается в той же директории(папке), что и сам html файл, если же он будет находится например в папке images то путь уже будет images/proba.png. Бывают такие ситуации когда ваш html файл находится в папке, а не в корне сайта и чтобы добраться до фала изображения нужно прописывать путь несколько иначе, запись будет следующего вида ../images/proba.png суть здесь в том, что записью ../ мы вышли из папки где расположен html файл и уже попав в корневую папку приписали путь к изображению, наглядно эта ситуация выглядит так:

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

Хоть и названия файлов на рисунке отличаются, но суть он отражает полностью.

Альтернативный текст в изображениях

<img src="proba.png" alt=”На рисунке вы увидите изображение шляпы” />

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

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

Размеры изображения

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>(Это title) Пример страницы на HTML5</title>
</head>
<body>
</html>
<img src="proba.png" width="50" height="50" />
<img src="proba.png" />
<img src="proba.png" width="150" height="150" />
</body>
</html>

В браузере:

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

Атрибутом width мы задаем ширину изображения в пикселях, height позволяет задать высоту изображения так же в пикселях. Если мы не прописываем данные атрибуты то изображение загружается в его действительном размере. В примере я вставил одно изображение три раза подряд с разными размерами, для того чтобы было нагляднее видно данное свойство.

Рамка и отступы

<img src="proba.png" hspace="10" vspace="10" border=”2” />

Здесь мы рассмотрим сразу три новых атрибута у тега img. Атрибут border делает рамку вокруг изображения по цвету текста на странице, размер задается в пикселях. Атрибут hspace задает горизонтальный отступ от изображения, а vspace вертикальный отступ от изображения. Данные атрибуты применяются, когда изображение находится где-либо в тексте и чтоб оно не сливалось с текстом, задаются данные атрибуты.

Выравнивание изображения

<img src="proba.png" align=”left” />

Выравнивание изображения на странице можно организовать благодаря атрибуту align и он имеет следующие значения:

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

Дата публикации:2014-04-16


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

Нашли ошибку в тексте

Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Allsoft
Хостинг Beget