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

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

• add_image_in_html
• images
• html_for_images

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

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

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

Для этого нужно:

1. В папку с картинками положить оригинальный размер и маленькую копию.
2. Создать отдельный HTML с большой картинкой.
3. На основной странице в <img>  вставляем маленькую картинку.
4. Делаем эту картинку гиперссылкой на большой вариант.

А теперь подробнее.

1. Создать два варианта картинки

Одна — большая, вторая — маленькая. Не стоит складировать все в одном месте, иначе потом не найдете. Мое разделение по папкам:

• images — картинки с сайта
• small — уменьшенный вариант

2. Создать отдельный HTML с большой картинкой.

В коде он лежит в отдельной папке html_for_images. Фактически мы создаем пустой html-файл, где указываем title, а в тело добавляем большую картинку

<img src="../images/000000.png" alt="big size">

См также:
Как добавить картинку — подробнее о том, что написано выше

3. В основной код вставить ссылку на мелкую картинку

В коде картинка лежит в отдельной папке images/small. 

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

4. Сделать мелкую картинку гиперссылкой на большую

Чтобы создать изображение-ссылку, нужно поместить элемент <img> внутрь элемента <a>, в котором даем ссылку на html с большой картинкой.

Чтобы ссылка открывалась в новой вкладке, добавляем атрибут target="_blank"

<a href="../html_for_images/000000.html" target="_blank">
     <img src="../images/small/000000.png">
</a>

PS — подробнее можно почитать на странице 225 в книге «Изучаем HTML, XHTML и CSS» Эрика и Элизабет Фримен.

PPS — добавила статью в полный список моих конспектов лекций по HTML & CSS