HTML. Как сделать превью картинок

В статье приведены кусочки кода. Полную версию можно взять тут — https://bitbucket.org/okiseleva/html-and-css-learn/src. Папки:

• add_image_in_html
• images
• html_for_images

Сегодня наша задача — научиться делать так, чтобы на основной странице сайта была маленькая картиночка, превью. Так страница грузится быстрее. А когда ты кликаешь на картинку — она открывается в полном размере в новом окне.

На основной странице картинка маленькая...

Но щелкнешь на маленькую и увидишь... большую!

HTML. Как добавить картинку и уменьшить размер

В статье приведены кусочки кода. Полную версию можно взять тут — https://bitbucket.org/okiseleva/html-and-css-learn/src. Папки — «add_image_in_html» и «images»

Добавить картинку

Чтобы добавить в HTML код картинку, нужно указать элемент img с атрибутом src (путь к изображению).

Путь может быть относительный:

<img src="../images/000000.png">

Или полный, по URL

<img src="http://bugred.ru/img/bug.png">

Элемент img — пустой, ему не нужен закрывающий тег.