Раз в неделю мы отправляем дайджест с самыми популярными статьями.

Основы работы с изображениями в HTML

Изображения в HTML — пример файла index.html с комментариями

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="images.css">
    <title>Изображения</title>
</head>
<body>
<!-- Изображения -->
<!-- Изображения создаются в HTML с помощью тега <img> -->
<img><!-- <img> - пустые теги, так что вы не обязаны закрывать их-->

<!-- Вы можете указать изображение, которое будет отображаться с помощью атрибута src -->
<img src="../Images/js.png">

<!-- Вы можете указать атрибут "alt", чтобы описать картинку -->
<img src="../Images/js.png" alt="Javascript">

<!-- Встроенные изображения: <img> теги -->
<!-- Как и тег <a>, вы можете вставлять <img> в блочные элементы-->
<ul class="logos">
    <li>
        <img src="../Images/js.png" alt="Javascript">
    </li>
    <li>
        <img src="../Images/js.png" alt="Javascript">
    </li>
    <li>
        <img src="../Images/js.png" alt="Javascript">
    </li>
</ul>

<!-- Центрирование изображений-->
<!-- <img> - тег встроенного уровня, по-этому он не может быть отцентрирован с помощью атрибута text-align -->
<!-- Используйте CSS что бы отцентрировать изображение-->
<div class="center">
    <img src="../Images/js.png" alt="Javascript">
</div>


<!-- Фоновые изображения -->
<!-- Картинки на фоне - не играют роли в понимании контента веб-страницы-->
<!-- Фоновые картинки добавляются с помощью CSS-->
<div class="background-image">
    <div class="background-image-two">
    </div>
</div>

<!--  Добавление текста на фоновые изображения -->
<!-- Этого можно добиться, добавив тег <div>, который содержит фоновое изображение -->
<!-- Затем вы можете вставить в него теги с текстом -->
<div class="background-image-three">
    <h1>Javascript</h1>
</div>


<!--  Обтекаемые изображения -->
<!-- Это такие изображения, которые обтекаются другими объектами веб-страницы по контуру, например текстом-->
<ul class="floating">
    <li>
    <img src="../Images/HTML.png" alt="Javascript">
    <h3>HTML5 это отличный инструмент</h3>
    <p>Гипертекстовый язык разметки</p>
    </li>
</ul>


<!-- Изображения пользовательского интерфейса -->
<!-- Картинки которые дополняют веб-страницу, но не несут никакой смысловой нагрузки -->


</body>
</html>

Изображения в CSS — пример файла images.css с комментариями

/*Изменения размера с помощью свойства hight*/
img {
    height: 50px;
    width: auto;
}

.background-image{
    height: 800px;
}
.background-image-two{
    height: 200px;
}

.logos{
    /*Удаление точек, отображаемых в списках*/
    list-style-type: none;
    padding: 0;
}

/* Изображения */

/* Вы можете выровнять изображения с помощью ul и li и добавить следующие свойства*/
.logos li{
    display: inline;
    padding-left: 11px;
}

/* Центрирование изображений */
/* <img> это тег-встроенного уровня, по-этому он не может быть отцентрирован с помощью атрибута text-align */
/* Вы можете задать изображению свойство display:block и отцентрировать его с помощью margin:auto*/
.center img{
    display:block;
    margin: 0 auto 0 auto;
}

/* Фоновые изображения */
/* Вы можете использовать свойство background для установки фонового изображения */

/* Цвет фона */
/* Даже когда вы установили фоновую картинку, вам следует установить фоновый цвет (в качестве резервного механизма)*/
.background-image{
    background-color: darkgrey;
}

/* Фоновое изображение */
/* Может указываться с помощью относительного или абсолютного URL-адреса */
.background-image{
    /* Пусть должен находиться внутри скобок - url() */
    background-image: url(../Images/HTML.png); /*Кавычки не нужны*/
}

/* Расположение фона*/
/* Используется для позиционирования картинки в контейнере*/
.background-image{
    /*Первым словом может быть: top,center или bottom*/
    /*Вторым словом может быть: left,center или right*/
/*Например:*/ background-position: center right; } /* Повторение фона*/ /* Используется для повторения одной и той же картинки */ /* Изображение будет повторятся по всей веб-странице*/ .background-image{ /*Вы можете использовать следующие значения*/ /*repeat: Повторяет в обоих направлениях*/ /*repeat-x: повторяет изображение горизонтально*/ /*repeat-y: повторяет изображение вертикально*/ /*no-repeat: повтор изображения отключен*/ background-repeat: repeat; } /* Свойство фона в одной строке*/ .background-image{ /* цвет картинка размещение повторение*/ background: darkgrey url(../Images/HTML.png) center right repeat; } /*Использование фонов в контейнерах*/ /*Вы можете настраивать высоту и разделять контейнеры на странице*/ .background-image-two{ background: darkgrey url(../Images/js.png) center right repeat; } /* Добавление текста на фоновые изображения */ /* Этого можно добиться добавив тег <div> который содержит фоновое изображение */ /* Затем, вы можете вставить в него теги с текстом */ .background-image-three{ /*ширина и высота должны быть эквивалентны размеру картинки*/ width: 630px; height: 246px; background: cyan url(../Images/js.png) top left no-repeat; } /*Затем вы можете задавать стили тексту на фоновой картинке*/ .background-image-three h1{ margin:0; background-color: whitesmoke; color: darkslategrey; padding: 5px 0 5px 15px; text-transform: uppercase; } /* Обтекаемые изображения*/ /* Вы можете добиться этого, разместив элементы внутри одного тега <li> и вставить желаемый элемент слева */ .floating img{ float:left; padding-right: 10px; } .floating { list-style-type: none; }