Изображения на сайте очень важный элемент, без них сайт выглядит серо и некрасиво. Изображения используются для оформления сайта, для фотогалерей, да и просто картинки.
Вставляются изображения с помощью тега IMG (заметьте, что мы пишем не полностью image, а только img). Тег IMG одинарный <img />, то есть без парного тега.
Основным атрибутом тега IMG является атрибут src. Он работает как href у ссылки, в атрибут src мы должны вставить путь к картинки. Путь как и в ссылках можно писать относительный или абсолютный.
Это код нашего index.html:
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<h1>Мой первый HTML-документ</h1>
<p>
<a href="files/file.html">Ссылка на второй документ</a>
</p>
</body>
</html>Давайте теперь создадим папку images рядом с этим файлом. В папку images мы скопируем файл изображения. Допустим имя изображения будет image.jpg. Давайте вставим тег img в текст index.html.
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<h1>Мой первый HTML-документ</h1>
<p>
<img />
</p>
<p>
<a href="files/file.html">Ссылка на второй документ</a>
</p>
</body>
</html>Тег мы вставили теперь давайте писать путь к изображению, будем писать относительный путь, начнем его с ./
./
Теперь добавим имя папки в которой лежит изображение
./images/
И дальше пишем имя файла:
./images/image.jpg
И теперь вставляем путь к файлу в атрибут src.
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<h1>Мой первый HTML-документ</h1>
<p>
<img src="./images/image.jpg" />
</p>
<p>
<a href="files/file.html">Ссылка на второй документ</a>
</p>
</body>
</html>Сейчас изображение отображается в оригинальном размере, но мы можем задать его размер с помощью атрибутов высоты и ширины.
Атрибут ширины у тега img - width. Атрибут высоты - height. Мы можем задавать только ширину изображения, только высоту или же высоту и ширину одновременно. Например так:
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<h1>Мой первый HTML-документ</h1>
<p>
<img src="./images/image.jpg" width="200" />
</p>
<p>
<a href="files/file.html">Ссылка на второй документ</a>
</p>
</body>
</html>Или только высоту:
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<h1>Мой первый HTML-документ</h1>
<p>
<img src="./images/image.jpg" height="400" />
</p>
<p>
<a href="files/file.html">Ссылка на второй документ</a>
</p>
</body>
</html>Если вы задаете и высоту, и ширину одновременно, то следите чтобы ширина и высота была пропорциональна ширине и высоте оригинального изображения. Иначе вы исказите изображение на сайте.
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<h1>Мой первый HTML-документ</h1>
<p>
<img src="./images/image.jpg" height="400" width="100" />
</p>
<p>
<a href="files/file.html">Ссылка на второй документ</a>
</p>
</body>
</html>
Добавить комментарий