Изображения в HTML
Мы с Вами подошли к теме изображений в HTML. И сегодня вы узнаете, как же мы можем выводить изображения в окно нашего браузера. Я думаю, что когда Вы будете создавать свой сайт, Вы не сможете обойтись без различных картинок, ведь они придают сайту красоту, изящность и без них сайт будет выглядеть очень монотонно, и чтобы разбавить его Вы будет использовать изображения.
Допустим, мы определились с изображением, будь то фотография или картинка. Теперь в вашей директории, где находится файл index.html мы создаем директорию images, где будут храниться наши изображения. В директорию с изображениями сохраняем наш файл с картинкой, при этом мы даем ему название на латинице, например: orange.jpg.
Открываем index.html файл, в котором прописываем такой код:
<html>
<head>
<title>Изображения в HTML</title>
</head>
<body>
<p>Вы только посмотрите, какой сочный апельсин</p>
<img src="images/orange.jpg" alt="Апельсин" />
</body>
</html>
Как видите результат у нас следующий:
Начинаем разбираться, изображение выводится при помощи тега img, в котором присутствует два обязательных атрибута, первый из них это атрибут src, который указывает путь, где находится наше изображение. В этом случае, мы указали относительный путь. Относительный путь - это путь, который указывается относительно файла, в котором мы прописываем путь, в нашем случае, относительно файла index.html, т.е. в нашей директории, где находится файл index.html, находится и директория images, и уже в этой директории находится наше изображение. Если бы мы писали относительно файла styles.css, который находится в директории css, то наш путь бы выглядел следующим: ../images/orange.jpg, где две точки означают, что мы возвращаемся назад из директории css, после этого заходим в директорию images и выбираем нужный нам файл. Надеюсь, вы поняли о том, как формируется путь, а если не очень разобрались, попробуйте прочитать еще раз и потренироваться, размещая файл изображения в различных директориях.
Вторым обязательным атрибутом является атрибут alt, в котором указывается текст, который будет выводиться, если по каким-либо причинам изображение не будет загружено в браузере, например, мы неверно укажем путь, где находится изображение, или у пользователя будут отключены изображения. Тогда на месте изображения появится этот текст, и пользователь будет понимать, что на данном месте должно было находиться изображение. На этом мы завершаем данную статью, теперь Вы можете добавлять различные изображения на свой сайт, всего доброго.
