Проводимые исследования показывают, что информация лучше усваивается пользователями Интернет ресурсов, если в вебстраницу гармонично вставлено изображение. Но существуют определенные трудности при вставке картинки, так как изображение присутствует на странице в виде кода, а не так как мы видим ее в браузере.
Скорее всего, вам не потребуется изучать сами коды, в которых возможно хранить изображение на сервере, достаточно знать, что такой код может быть расшифрован тем ресурсом, на котором вы собираетесь размещать информацию. Код картинки встраивается в общий ряд страницы в строчку. Если так и оставить наше изображение, то получится не совсем то, что мы желаем.
Что бы было правильное отображение графического элемента, сначала под картинку резервируется место, где определяются размеры будущего изображения. По принципу работы в браузер вначале загружается текст и только потом отображается графика. Но для правильного отображения размеры картинки должны совпадать с зарезервированным под нее местом. Научимся это делать.
В этом нам поможет атрибут img src. html код расположения картинки на сайте выглядит так:
<img src="электронный адрес картинки ">
Тэгimg не требует закрывающего тэга.
Для редактирования картинки Вы можете воспользоваться услугами сайта . Здесь можно уменьшить картинку до нужных размеров. Вы скачиваете любую нужную картинку с Интернета на свой компьютер. Потом заходите на сайт , нажимаете “Обзор”, далее находите скаченную картинку на Вашем компьютере, выбираете “Уменьшить до”, задаёте размер уменьшения картинки и нажимаете “Загрузить”. У Вас появляется уменьшенная картинка и её новый электронный адрес.
И так, чтобы показать, как расположить картинку на нашей странице, я скачал её с Интернета и уменьшил с помощью сервиса до нужных размеров. Теперь вставим её в код html:
<html>
<head>
<title>Животный мир нашего края.</title>
</head>
<body text="#FF0033" bgcolor="#66CC99">
<div align="center">
<H1>Животные, обитающие в нашей области.</H1>
<H2><font color="#0000CC">Животные леса.</font></H2>
<br>
<font color="#633000">
<p align="justify"><font face="Garamond, Arial, Verdana">
<img src="http://i077.radikal.ru/1006/ac/39ab08c0c9b8.jpg">
Животный мир нашего края достаточно разнообразен и
представлен беспозвоночными и позвоночными животными
различных классов, отрядов и видов.</font></p> <p align="justify"><font face="Garamond, Arial, Verdana">
На территории области учтено 54 вида млекопитающих.
На территорииобласти обитает 200-250 видов птиц; 163 вида
из них гнездятся на территории области, восемь видов
встречаются только в зимнее время, 60 - во время пролета
и сезонных миграций; 16 видов птиц области занесены в
Красные книги бывшего СССР и РСФСР.</font></p> <p align="justify"><font face="Garamond, Arial, Verdana">
На территории области обитает 10 видов земноводных,
шесть видов рептилий и около 3 500 видов насекомых
(13 видов насекомых занесено в Красную книгу бывшего
СССР и Красную книгу России). В водоемах области обитает
38 видов рыб, из которых наиболее распространенными
являются карп, сазан, лещ, карась, жерех и др. Самыми
крупными рыбами водоемов области являются сом и щука.
</font></p>
</font>
</div>
</body>
</html>
Для того чтобы расположить весь текст рядом с картинкой html, воспользуемся услугами атрибута align, который отвечает за выравнивание картинки html. Так как картинку мы расположили слева, то к align подставим left. Это значить, что текст у нас выравняется по левому краю относительно картинки. Если подставить к align атрибут right, то текст у нас выравняется по правому краю относительно картинки.
Для улучшения расположения и дизайна картинки подставим несколько атрибутов для тэга<img>.
vspace="15" - задает расстояние между текстом и рисунком по вертикали; hspace="25" - задает расстояние между текстом и рисунком по горизонтали; width="100" - ширина картинки; height="200" - высота картинки.
Также, по желанию, можно изменить ширину рамки вокруг картинки или совсем её убрать. Это делается с помощью атрибута border. Если Вам не нравиться цвет рамки html, то его также можно изменить благодаря атрибуту bordercolor.
Все изменения производятся в пикселях.
Теперь оформим всё это в виде кода html:
<html>
<head>
<title>Животный мир нашего края.</title>
</head>
<body text="#FF0033" bgcolor="#66CC99">
<div align="center">
<H1>Животные, обитающие в нашей области.</H1>
<H2><font color="#0000CC">Животные леса.</font></H2>
<br>
<font color="#633000">
<p align="justify"><font face="Garamond, Arial, Verdana">
<img src="http://s45.radikal.ru/i109/1006/75/88888a8e9933.jpg"
align="left" hspace="25" vspace="15" border="3"
bordercolor ="#0000CC">
Животный мир нашего края достаточно разнообразен и
представлен беспозвоночными и позвоночными животными
различных классов, отрядов и видов.</font></p> <p align="justify"><font face="Garamond, Arial, Verdana">
На территории области учтено 54 вида млекопитающих.
На территорииобласти обитает 200-250 видов птиц; 163 вида
из них гнездятся на территории области, восемь видов
встречаются только в зимнее время, 60 - во время пролета
и сезонных миграций; 16 видов птиц области занесены в
Красные книги бывшего СССР и РСФСР.</font></p> <p align="justify"><font face="Garamond, Arial, Verdana">
На территории области обитает 10 видов земноводных,
шесть видов рептилий и около 3 500 видов насекомых
(13 видов насекомых занесено в Красную книгу бывшего
СССР и Красную книгу России). В водоемах области обитает
38 видов рыб, из которых наиболее распространенными
являются карп, сазан, лещ, карась, жерех и др. Самыми
крупными рыбами водоемов области являются сом и щука.
</font></p>
</font>
</div>
</body>
</html>
<html>
<head>
<title>Животный мир нашего края.</title>
</head>
<body text="#FF0033" bgcolor="#66CC99"
background="http://s001.radikal.ru/i193/1011/1c/20c1465625c1.jpg">
<div align="center">
<H1>Животные, обитающие в нашей области.</H1>
<H2><font color="#0000CC">Животные леса.</font></H2>
<br>
<font color="#633000">
<p align="justify"><font face="Garamond, Arial, Verdana">
Животный мир нашего края достаточно разнообразен и
представлен беспозвоночными и позвоночными животными
различных классов, отрядов и видов.</font></p> <p align="justify"><font face="Garamond, Arial, Verdana">
На территории области учтено 54 вида млекопитающих.
На территорииобласти обитает 200-250 видов птиц; 163 вида
из них гнездятся на территории области, восемь видов
встречаются только в зимнее время, 60 - во время пролета
и сезонных миграций; 16 видов птиц области занесены в
Красные книги бывшего СССР и РСФСР.</font></p> <p align="justify"><font face="Garamond, Arial, Verdana">
На территории области обитает 10 видов земноводных,
шесть видов рептилий и около 3 500 видов насекомых
(13 видов насекомых занесено в Красную книгу бывшего
СССР и Красную книгу России). В водоемах области обитает
38 видов рыб, из которых наиболее распространенными
являются карп, сазан, лещ, карась, жерех и др. Самыми
крупными рыбами водоемов области являются сом и щука.
</font></p>
</font>
</div>
</body>
</html>
