В прошлой статье вы узнали как оформлять текст. Но согласитесь , что текст без картинок очень скучен. В этой статье вы узнаете о теге <img>, он предназначен для вывода на страницу изображений в формате JPEG, PNG и GIF.
Тег <img> немного не стандартен и не требует закрывающих тегов. То есть для вывода изображения , вам нужно написать примерно следующее :
<img src=»диск Д / изображение 1″>
И вы увидите изображение.
Поговорим об атрибутах тега , наверное я буду перечислять их табличным способом , как в прошлой статье про текст. Так ведь удобнее , не правда ли ?
Heigth=»100px» Высота изображения. Указывается в пикселях и в процентах , в данный момент я указал 100 пикселей.
Width=»95%» Ширина изображения. Указана в процентах.
hspase = «2» Горизонтальный отступ от изображения до окружающего контента.
src=»путь к изображению» Путь к изображению.
Думаю что на данном этапе вам будет достаточно этих атрибутов.
Давайте добавим несколько картинок в Html файл. Для этого создадим какую-то папку, я к примеру назову ее Image to html .
Создадим в этой папке еще одну папку с названием Img , зальем в нее несколько картинок с интернета.
Затем в папке «Image to html» с помощью блокнота создадим страницу с названием «index.html»
В нее нужно записать следующий код :
<html>
<head><title> тест тега </title></head>
<body>
<img src=»img/1.jpeg»>
<br>
<img src=»/img/2.jpeg»>
</body>
</html>
За счет того что у меня картинки изначально разного размера , они смотрятся не красиво.
Давайте это исправим. У меня вторая картинка меньше, а значит первую картинку нужно тоже уменьшить. Поэтому я смотрю ширину второй картинки.
Сделать это можно в проводнике предварительно кликнув мышкой по картинке.
Затем я захожу в редактор и исправляю наш код :
<html>
<head><title> тест тега </title></head>
<body>
<img width =»750px» src=»img/1.jpeg»>
<br>
<img src=»/img/2.jpeg»>
</body>
</html>
Таким образом я запрещаю расширяться нашей картинке более чем на 750 пикселей. И вот результат :
На этот раз все вышло четко , картинки сравнялись. Попрактикуйтесь , поэксперементируйте, ведь все приходит с опытом. До следующих статей.