Статья связана с репозиторием на GitHub.
Ну что ж, теперь, когда мы разобрались с блоками и таблицами, попробуем создать какой-нибудь документ с текстом и картинками.
Для статьи нашел скан такого вот креативного варианта объяснительной. Арт-директор все-таки!
Для начала создам новый проект: index.html, index.css и папку image, в которую положу вырезанные картинки из скрина картинки. Как видно, цвет на картинке не однородный, поэтому убрал фон в онлайн фотошопе.
Всё готово и можно верстать.
Для начала "шапка": это у нас будет div, "прижатый вправо". Сделаем его шириной 30% от общей ширины экрана и напишем сразу в него текст.
Обратите внимание на тэг <br>. В HTML это - перенос строки.
Далее, добавим слово "Объяснительная" и подпись.
Для "шапки" и подписи я назначил класс right: таким образом эти две части объяснительной получатся ровно друг под другом.
Для заголовка я назначил класс title и в CSS указал, что текст надо отцентровать и сделать отступ сверху в 3% от общей высоты экрана, чтобы отделить от шапки.
Теперь начнем добавлять картинки. Предлагаю здесь использовать известные нам уже таблицы. Добавим таблицу без рамки, у которой будет две строки (креатив арт-директора же в две строки картинок получился).
Как говорилось в статье про таблицы, браузеру всё-равно - одинаковое ли количество ячеек в строках. Завершаем строку? - Значит завершаем. Воспользуюсь этим и вторую строку сделаю с одной ячейкой.
Картинки в html добавляются таким вот образом:
<img src="...здесь пишем адрес картинки...">
Все картинки я положил в отдельную папку image. Добавлю их в HTML и посмотрю что получилось.
Но вот что я не предусмотрел - ширину листа. Сейчас растянуто получилось. Решается это вложенностью: весь код внутри body я оберну в отдельный div. При этом, внесу изменения в CSS. Ну и заодно, пропишу цвет листа. Его я определил вот по этому руководству (#d1c7b4).
Смотрим?
Изменения в HTML-коде:
Теперь немного о выделенной на скриншоте конструкции body > div. Она говорит о том, что правила должны примениться ко всем div, которые являются только непосредственными наследниками body.
Финал примерно такой:
Сейчас мы рассматривали включение текста в HTML-код, опираясь на предыдущие темы. В следующей статье более детально коснемся именно декорации текста.
Все статьи попадают в "Оглавление канала". Не пропускаем новости!