Пример №2 - в начале параграфа
< img> это встроенный элемент, он помещается внутри блочного и не начинает новую строчку. В примере выше текст обтекает изображение, так как код <img> прописан внутри <p>
Подписи к иллюстрациям
Чтобы пометить или подписать фото на странице используется тег <figure> (от английского figure - рисунок). Этот тег указывает на то, что внутри него помещается контент типа иллюстраций, фотографий, диаграмм и т.п.
Тег <figcaption> (заголовок рисунка) позволяет добавить подпись к изображению. Вот как это работает:
Обратите внимание, что по умолчанию у браузера существуют некоторые настройки стиля для тега <figure>, в частности слева и справа есть отступы по 40 px.
Итак, мы с вами научились
- добавлять изображение на страницу: с помощью тега <img>
- узнали обязательные атрибуты для этого тега: src для указания пути и alt для описания картинки
- поняли какой формат лучше для чего использовать: jpeg для фотографий, png для логотипов и скриншотов, gif для анимации
- как лучше задать картинке размеры: с помощью атрибута style с параметрами width и height
- разобрались как будет отображаться картинка в зависимости от места в коде: отдельно, если перед блочным элементом и с обтеканием, если внутри блочного элемента (например <p>)
А чтобы нам было с чем работать, нужно откуда-то взять эти изображения, при этом не нарушив ничьих авторских прав.
Значит, пришло время бонуса
Список бесплатных фотобанков
Прежде, чем начнём, обратите внимание, что каждый скриншот здесь - это ссылка на сайт. Как делать изображения в виде ссылок, читайте в статье "Ссылки".
pixabay.com
На pixabay вы найдете 680 тыс. бесплатных изображений на любую тематику, которые распространяются по лицензии Creative Commons CСО (CC Zero), т.е. их можно использовать, распространять, изменять в любых целях, даже коммерческих.
freeimages.com
В фотобанке freeimages 390 тыс. бесплатных фото и картинок. Здесь сложнее найти крутой имидж, но тоже попадаются неплохие экземпляры. Порядком отвлекает реклама платных фотобанков. Мы поставили этот ресурс на второе место из-за количества изображений, но по дружелюбности он будет пожалуй на последнем в нашем рейтинге.
morguefile.com
У фотостока morguefile более 250 тыс. бесплатных фотографий, в основном высокого качества. Можно скачивать даже без регистрации. Доступен только на английском.
unsplash.com
На unsplash множество стильных фотографий под лицензией CC Zero. Можно качать без регистрации. Этот фотобанк тоже поймет вас только по английски.
designerspics.com
Сайт designerspics создан Индийским веб-дизайнером, который понимает, как тяжело бывает найти качественное фото. Все фотографии сняты лично им, и с ними можно делать что угодно. Любит фотографировать еду, рабочий стол, компьютеры и всякие предметы. Поиск - только на английском.
Анимация — один из основных трендов в современном сайтостроении. Элементы анимации в интерфейсах выносят их юзабилити на новый уровень, делая их интуитивно понятными и доступными обычному пользователю. На лендингах или, например, корпоративных сайтах она помогает более наглядно рассказать посетителю о вашем продукте или показать его преимущества.
Мы сделали подборку из 5 библиотек для создания анимации на web-сайтах, рассказав об их преимуществах, недостатках и сферах применения.