Где вы приобретаете священные знания, чтобы повсюду размещать гифки.

Я вернулся. И так вскоре после последнего поста. Пожалуйста.

Этот пост будет короче предыдущего, поскольку мы сосредоточимся только на одной теме: изображениях. В прошлой части мы узнали сразу много новых HTML-тегов. На этот раз будет только один: <img>.

(Эмиль и) Изображения

Краткое резюме

В прошлый раз, когда мы прощались, наш сайт выглядел так:

Хотя в нынешнем состоянии он очень красив, кажется, что чего-то не хватает. Если бы вы просто сказали «да, хорошее чувство дизайна», вы не ошиблись бы, но сегодня мы добавим изображения.

Вы можете увидеть их повсюду в Интернете. Например, прямо над этим абзацем есть изображение, показывающее, как выглядит наша веб-страница. При умеренном использовании они могут прекрасно проиллюстрировать абзац или идею. Они также могут стать отличным заголовком страницы.

Давай найдем изображение

Мы добавим его на нашу страницу.

Вы можете выбрать одно из своих изображений / фотографий на своем компьютере. Или вы можете найти его в Интернете. Всегда есть Google Images, но что касается меня, мне нравится заходить на Unsplash за качественной фотографией. Фотографии там выглядят великолепно, ими можно пользоваться бесплатно. Вот что у меня получилось:

Добавление изображения

Из теории (в основном)…

Хорошо, у вас есть образ на диске, готовы его добавить?

Прежде всего, вам нужно переместить его в ту же папку, что и ваш файл .html. Все хорошо? Идеально.

Теперь о самом коде. Как я сказал ранее, мы будем использовать тег <img>. Вы используете это так:

<img src="path/to/image.jpg">

Здесь несколько вещей:

  • <img> называется самозакрывающимся тегом. Это связано с тем, что в отличие от обычных тегов, таких как <h1> или <a>, у него нет соответствующего закрывающего тега (например, </h1> или </a>). В самом деле, самозакрывающиеся теги не используются для того, чтобы заключить и придать смысл контенту. Они имеют смысл сами по себе.
  • Угадай, кто вернулся (снова вернулся)? Ваш старый друг, атрибут. Вот это src. По сути, он сообщает браузеру, где искать изображение.

Допустим, ваше изображение называется great_photo.jpg. Вот как это будет выглядеть в вашем коде:

<img src="great_photo.jpg">

Обратите внимание, что если вы поместите great_photo.jpg в папку с именем images на вашем диске (папка images по-прежнему должна находиться в той же папке, что и ваш файл .html), вы можете сообщить своему браузеру о наличии изображения, создав свой тег следующим образом:

<img src="images/great_photo.jpg">

Почему ты бы так поступил? Что ж, сейчас у вас есть только два файла. Но через некоторое время их у вас могут быть сотни, и будет намного проще, если ваши файлы будут распределены по разным папкам.

…практиковать

Хорошо! Давайте добавим наше изображение к существующему коду в прошлый раз.

<html>
  <body>
    <h1>Awesome blog!</h1>
    <p>Hello, reader. This is my first post on this great blog. I hope you'll like it!</p>
    <p>And since you like paragraphs so much, here's another one!</p>
    <h2>List of badass comics characters</h2>
    <ul>
      <li>Batman</li>
      <li>Batman</li>
      <li>Batman</li>
      <li>Bruce Wayne</li>
      <li>Batman</li>
    </ul>
    <a href="http://www.medium.com">This is a link to the Medium homepage</a>
    <img src="images/great_photo.jpg">
  </body>
</html>

Вот результат для меня:

Конечно, изображение появляется на нашем экране, что само по себе потрясающе. Но это странно, потому что оно отображается справа от нашей ссылки. А слева это пустое пространство.

Как мы могли это исправить? Если бы только был способ поместить это изображение в новый абзац. Это полностью решило бы нашу проблему.

Любая идея? :)

Да! Тег <p>! Мы поместим наше изображение в новый абзац. Просто заключите свой тег <img> в открывающий и закрывающий <p> теги.

<html>
  <body>
    <h1>Awesome blog!</h1>
    <p>Hello, reader. This is my first post on this great blog. I hope you'll like it!</p>
    <p>And since you like paragraphs so much, here's another one!</p>
    <h2>List of badass comics characters</h2>
    <ul>
      <li>Batman</li>
      <li>Batman</li>
      <li>Batman</li>
      <li>Bruce Wayne</li>
      <li>Batman</li>
    </ul>
    <a href="http://www.medium.com">This is a link to the Medium homepage</a>
    <p>
      <img src="images/great_photo.jpg">
    </p>
  </body>
</html>

Новый результат:

Ух ты! На самом деле выглядит довольно прилично!

Идти дальше

Теперь вы знаете, как добавлять изображения на свою веб-страницу. Не стесняйтесь добавлять столько, сколько хотите!

В качестве бонуса: вы заметили, что в нашем примере изображение является файлом .jpg? Как вы думаете, что произойдет, если вы загрузите файл .gif, сохраните его в той же папке, что и ваше предыдущее изображение, и введите его имя в атрибуте src вместо great_photo.jpg? Я позволю тебе проверить это самому. :)

Следующий пост будет немного другим, своего рода интермедией. Поговорим о редакторах кода. Они помогут вам писать код проще, чем с помощью Блокнота!

Увидимся в следующий раз!

Следующая статья доступна здесь!

Примечание. Этот пост является частью серии.

Как обычно, не стесняйтесь поделиться этой статьей, если она вам понравилась!