Пошаговая инструкция создания сайта на html коде / Картинки на сайте

Картинки на сайте

Для того чтобы на сайте появилась картинка, существует элемент <img>, который состоит из одного тега, и в котором указывается адрес картинки с помощью атрибута src:

<img src="название папки/название файла"/> <!-- Картинка -->

Обратите внимание на концовку записи этого тега- наклонная черта перед закрывающим угловым знаком обязательна.

Возьмем какую-нибудь картинку шириной 550 пикселей, положим ее в папку для картинок "images" и разместим ее на странице нашего сайта в статье после подзаголовка.

Для своего пробного сайта я возьму вот эту картинку с названием "flowers.jpg":

<img src="images/flowers.jpg"/> <!-- Картинка -->

Поставим эту запись каринки после тега подзаголовка статьи:

Обтекание картинки текстом

Для того чтобы было возможным обтекание картинки текстом, нужно взять картинку меньших размеров. Я уменьшу эту же картинку в два раза:

Чтобы текст обтекал картинку, нужно применить к элементу <img> атрибут стиля style и его свойства float, которое определяет с какой стороны будет находиться картинка, и margin, отвечающее за внешние отступы:

float: ...; <!-- Определяет сторону расположения -->

margin: верхний правый нижний левый; <!-- Внешние отступы от краев, задается в пикселях или % -->

Картинка слева, текст справа:

<img src="images/flowers.jpg" style="float: left; margin: 0 20px 0 0;"/>

(На этой картинке в тексте присутствует красная строка).

Картинка справа, текст слева:

<img src="images/flowers.jpg" style="float: right; margin: 0 0 0 20px;"/>

(Убрала красную строку в тексте).

При необходимости подкорректируйте отсупы для своего варианта.


На моем сайте есть картинку с белым фоном, которые сливаются с фоном страницы. Чтобы их четче было видно, я применяю атрибут border:

<img src="images/flowers.jpg" border="1"/>

Бордюру можно задать цвет с помощью свойства стиля border-color. У меня это:

border-color: #e5e5e5" <!-- Цвет бордюра -->

Картинка в шапке сайта

Картинка в шапке сайта сделана как "картинка слева, текст справа".

Для примера возьму вот такую картинку солнышка шириной всего 100 пикселей, с названием "sun.jpg":

Внешние отступы я возьму свои, а вы отредактируйте их под свою картинку:

<img src="images/sun.jpg" style="float: left; margin: 30px 20px 0 35px;"/>

Эту запись необходимо поставить в блоке шапки сайта самой первой, сразу после <div id="header">.

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


Нужно взять на заметку, что картинки большого объема занимают много места на диске и утяжеляют сайт замедляя его загрузку в интернете. Поэтому, лучше брать картинки с маленьким объемом или оптимизировать их, пересохраняя специальным образом для сайта, с меньшим объемом. Сейчас я не буду подробно об этом рассказывать, потому что сейчас главная цель, это сделать небольшой сайт. Скажу только, что в фотошопе их нужно сохранять как "Специально для Web...".


Файл index.html:

Блок шапки сайта:

Блок контента сайта:

Следующий шаг - Невидимая часть сайта