Уважаемые читатели, в этом уроке я покажу вам, как легко и просто добавить на свою html страничку картинку. Однако, прежде чем показать вам, как ее добавить, вам нужно во-первых, создать в папке с сайтом еще одну папку и назвать ее “images”. Для этого заходим в папку где находится файл index.html, кликаем правой кнопкой мыши по свободной области и в сплывающим списке выбираем пункт создать >папку, далее даем ей название images, и переходим к следующему шагу.

После всего вышеперечисленного, наводим курсор мыши на картинку, которую я разместил чуть ниже, кликаем правой кнопкой и выбираем пункт “сохранить изображение как”, далее сохраняем его в папку “images” и переходим к следующему пункту.

И так.. Для того, чтобы компьютер понял, что вы хотите разместить на своей страничке ту или иную картинку, к своему html коду нужно дописать следующий тег <img src=”путь к изображению и его название”>. Теперь перейдем от теории к практике и добавим картинку. Пример ниже.
<html>
<head>
<title>Эта страница создана за 5 минут</title>
</head>
<body bgcolor="#00CCFF" text="#FFFF00">
<center>
Сегодня отличный день. <br>Я сделал свою первую страничку.
<br><font color="#0000FF">я буду богатым и свободным человеком !</font>
<br><br>
<img src="images/5055.jpg">
</center>
</body>
</html>
Коллеги, если вы все сделали правильно, то сейчас ваша первая страничка должна быть такой.
Друзья, я могу вас поздравить, теперь вы знаете, как добавлять картинки на сайт так, что я перейду к следующему пункту и покажу вам, как изменять ширину и высоту изображений. Если говорить коротко и просто, то для того, чтобы изменить ширину или высоту нужно дописать теги width (ширена изображение в пикселях) и height его высота в пикселях. Пример чуть ниже.
<html>
<head>
<title>Эта страница создана за 5 минут</title>
</head>
<body bgcolor="#00CCFF" text="#FFFF00">
<center>
Сегодня отличный день. <br>Я сделал свою первую страничку.
<br><font color="#0000FF">я буду богатым и свободным человеком !</font>
<br><br>
<img src="images/5055.jpg" width="400" height="400">
</center>
</body>
</html>
Теперь ваша первая страничка должна быть такой.
<html>
<head>
<title>Эта страница создана за 5 минут</title>
</head>
<body bgcolor="#00CCFF" text="#FFFF00">
<center>
Сегодня отличный день. <br>Я сделал свою первую страничку.
<br><font color="#0000FF">я буду богатым и свободным человеком !</font>
<br><br>
<img src="images/5055.jpg" width="400" height="400" alt="Создание и продвижение сайтов" title="Все про создание и продвижение сайтов в интернете">
</center>
</body>
</html>
Теперь наша страничка должна быть такой! Обратите внимание, если вы наведете курсор мыши на картинку, то увидите всплывающий текст.