Работа с изображениями при создании с сайта, один из ключевых моментов, как при создании дизайна, также при простой верстке или написании каких либо материалов для вашего сайта.
Вставка изображения в 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>
Вот что у нас в браузере будет:
Как видите здесь все достаточно просто, тег 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 и он имеет следующие значения:
- left – выравнивание изображения по левому краю
- right – выравнивание изображения по правому краю
- middle - выравнивание изображения по середине
- bottom - выравнивание изображения по нижнему краю
- top - выравнивание изображения по верхнему краю
Вот и все основные свойства html для вставки изображения, как я и говорил в начале урока, сложного здесь ни чего нет и я думаю у вас не возникло ни каких проблем, но если же будут вопросы пишите, постараюсь ответить.
Разрешается републикация материалов сайта с обязательным указанием ссылки на автора
материала (указание автора, его сайта), ссылки следующего содержания:
https://for-net.ru - Как сделать сайт самому
