The browser does not display a image (photo)

HTML & CSS
1

Good afternoon, ladies and gentlemen!

I’m learning HTML and CSS on the book “Build Your Own Website: The Right Way Using HTML & CSS” by Ian Lloyd.
But, unfortunately, in the process of learning I have a problem.
The problem is that the browser does not display any picture.
(On my computer has three (3) of the browser:Google Chrome, FireFox and Internet Explorer. Neither browser does not display the picture!)
I would like to first insert any photo that is on my computer (for the trial) in the lay-out, but nothing happened! The browser displays only the frames for photos and alternative inscription in it.
I checked a thousand times all the lay-out . It seems all right. I’m sure this is closer to 100%, which is all right.Then I decided to download all the files that are attached to that on the specific site and try to insert a photo of divers. But, unfortunately, after the insertion of the photo in lay-out the browser ceased to display an alternative inscription (!), which I pointed out from the book.

Could you help me to understand this fact?

Thank you in advance for your help

My lay-out is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bubble Under - &#1076;&#1072;&#1081;&#1074;&#1080;&#1085;&#1075;-&#1082;&#1083;&#1091;&#1073; &#1085;&#1072; &#1102;&#1075;&#1086;-&#1079;&#1072;&#1087;&#1072;&#1076;&#1077; &#1042;&#1077;&#1083;&#1080;&#1082;&#1086;&#1073;&#1088;&#1080;&#1090;&#1072;&#1085;&#1080;&#1080;</title>
<meta charset="windows - 1251"/>
<link href="style1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
</div> <!-- &#1086;&#1082;&#1086;&#1085;&#1095;&#1072;&#1085;&#1080;&#1077; &#1088;&#1072;&#1079;&#1076;&#1077;&#1083;&#1072; sitebranding -->
<div id="tagline">
<p>Bubble Under - &#1076;&#1072;&#1081;&#1074;&#1080;&#1085;&#1075;-&#1082;&#1083;&#1091;&#1073; &#1085;&#1072; &#1102;&#1075;&#1086;-&#1079;&#1072;&#1087;&#1072;&#1076;&#1077; &#1042;&#1077;&#1083;&#1080;&#1082;&#1086;&#1073;&#1088;&#1080;&#1090;&#1072;&#1085;&#1080;&#1080; - &#1089;&#1076;&#1077;&#1083;&#1072;&#1081; &#1087;&#1083;&#1102;&#1093; &#1089; &#1085;&#1072;&#1084;&#1080;!</p>
</div> <!-- &#1086;&#1082;&#1086;&#1085;&#1095;&#1072;&#1085;&#1080;&#1077; &#1088;&#1072;&#1079;&#1076;&#1077;&#1083;&#1072;  tagline -->
</div> <!-- &#1086;&#1082;&#1086;&#1085;&#1095;&#1072;&#1085;&#1080;&#1077; &#1088;&#1072;&#1079;&#1076;&#1077;&#1083;&#1072; header -->
<div id="navigation">
<ul>
<li><a href="basic.html">&#1043;&#1083;&#1072;&#1074;&#1085;&#1072;&#1103; &#1089;&#1090;&#1088;&#1072;&#1085;&#1080;&#1094;&#1072;</a></li>
<li><a href="about.html">&#1054; &#1085;&#1072;&#1089;</a></li>
<li><a href="contact.html">&#1057;&#1074;&#1103;&#1078;&#1080;&#1090;&#1077;&#1089;&#1100; &#1089; &#1085;&#1072;&#1084;&#1080;</a></li>
</ul>
</div> <!-- &#1086;&#1082;&#1086;&#1085;&#1095;&#1072;&#1085;&#1080;&#1077; &#1088;&#1072;&#1079;&#1076;&#1077;&#1083;&#1072; navigation -->
<div id="bodycontent">
<h2>&#1052;&#1099; &#1088;&#1072;&#1076;&#1099;, &#1095;&#1090;&#1086; &#1074;&#1099; &#1087;&#1086;&#1075;&#1088;&#1091;&#1079;&#1080;&#1083;&#1080;&#1089;&#1100; &#1085;&#1072; &#1085;&#1072;&#1096; &#1082;&#1083;&#1072;&#1089;&#1089;&#1085;&#1099;&#1081; &#1089;&#1072;&#1081;&#1090;!</h2>
<p><img  src="divers-circle.jpg" width="200"  height="162" alt="&#1043;&#1088;&#1091;&#1087;&#1087;&#1072; &#1076;&#1072;&#1081;&#1074;&#1077;&#1088;&#1086;&#1074; &#1090;&#1088;&#1077;&#1085;&#1080;&#1088;&#1091;&#1077;&#1090;&#1089;&#1103;"/></p> - (browser does not display THIS item)
<p>&#1050;&#1088;&#1091;&#1090;&#1086;, &#1095;&#1090;&#1086; &#1074;&#1099; &#1079;&#1072;&#1075;&#1083;&#1103;&#1085;&#1091;&#1083;&#1080; &#1080; &#1087;&#1086;&#1076;&#1077;&#1083;&#1080;&#1090;&#1077;&#1089;&#1100; &#1089; &#1085;&#1072;&#1084;&#1080; &#1074;&#1086;&#1079;&#1076;&#1091;&#1093;&#1086;&#1084;! &#1041;&#1083;&#1072;&#1075;&#1086;&#1076;&#1072;&#1088;&#1103; &#1074;&#1072;&#1096;&#1077;&#1084;&#1091; &#1082;&#1083;&#1072;&#1089;&#1089;&#1085;&#1086;&#1084;&#1091; &#1091;&#1084;&#1077;&#1085;&#1080;&#1102; &#1086;&#1088;&#1080;&#1077;&#1085;&#1090;&#1080;&#1088;&#1086;&#1074;&#1072;&#1090;&#1100;&#1089;&#1103; &#1087;&#1086;&#1076; &#1074;&#1086;&#1076;&#1086;&#1081; &#1074;&#1099; &#1091;&#1089;&#1087;&#1077;&#1096;&#1085;&#1086; &#1085;&#1072;&#1096;&#1083;&#1080; &#1087;&#1091;&#1090;&#1100; &#1082; &#1089;&#1090;&#1072;&#1088;&#1090;&#1086;&#1074;&#1086;&#1081;
 &#1090;&#1086;&#1095;&#1082;&#1077; -  &#1074; &#1076;&#1072;&#1085;&#1085;&#1086;&#1084; &#1089;&#1083;&#1091;&#1095;&#1072;&#1077; &#1082; &#1085;&#1072;&#1096;&#1077;&#1081; &#1075;&#1083;&#1072;&#1074;&#1085;&#1086;&#1081; &#1089;&#1090;&#1088;&#1072;&#1085;&#1080;&#1094;&#1077;. </p>

</div> <!-- &#1086;&#1082;&#1086;&#1085;&#1095;&#1072;&#1085;&#1080;&#1077; &#1088;&#1072;&#1079;&#1076;&#1077;&#1083;&#1072; bodycontent -->
</body>
</html>
2

Hi Daria Alexeeva. Welcome to the forums. :slight_smile:

There are just a couple of simple reasons why that image might not display on screen.

  • the image might be in the wrong place. Given your code, the image should be in the same folder as the page that ii linking to it.

  • the image might have the wrong name. It must be exactly divers-circle.jpg. If it’s anything different—with capital letters, an underscore or whatever—it won’t work.

3

Use relative path for adding pictures…
for example:
<img src=“…/foldername/divers-circle.jpg” width=“200” height=“162” alt=“Группа дайверов тренируется”/>