Показываю, как добавить картинку на html сайт

Уважаемые читатели, в этом уроке я покажу вам, как легко и просто добавить на свою 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>

Теперь ваша первая страничка должна быть такой.

А теперь очень важный момент. Запомните, в дальнейшем, когда вы сделаете свой первый сайт, и начнете продвигать его в поисковых системах, картинки нужно подбирать правильно. Ведь для поисковых алгоритмов изображение это один из очень важных винтиков, который поможет вам привлечь целевую аудиторию из поисковых систем. Именно по этому, во-первых, старайтесь подбирать изображения, которые соответствуют основной теме странички, а во-вторых, не забывайте делать краткое описание к каждому изображению, которое вы используете в своих публикациях. Кстати, для того, чтобы сделать описание к картинке, нужно использовать теги alt и title. Пример ниже.

<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>

Теперь наша страничка должна быть такой! Обратите внимание, если вы наведете курсор мыши на картинку, то увидите всплывающий текст.

Видео Урок

Следующий урок: Работа с текстом