Продолжаем изучать и познавать основы 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 и он имеет следующие значения:
Вот и все основные свойства html для вставки изображения, как я и говорил в начале урока, сложного здесь ни чего нет и я думаю у вас не возникло ни каких проблем, но если же будут вопросы пишите, постараюсь ответить.
Дата публикации:2014-04-16
Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!
Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.
