HTML и CSS урок пятый

HTML и CSS урок пятый

На этом уроке мы найчимся добавлять изображения на наш сайт

Учиться будем на примере установки логотипа.

Сам логотип это обычное изображение в формате jpg или png Надо учитывать несколько параметров для выбора и зготовления логотипа.

  1. Изображение не должно быть большим по объёму, большой файл замедлит загрузку страницы
  2. Наиболее часто используемые размеры 200x50px 200x200px
  3. Если нужен прозрачный фон то изображение должно быть png

Если у вас затруднения в работе с графическими редакторами, то можно воспользоваться он лайн редакторами. К примеру я часто пользуюсь услугами https://www.canva.com/ удобный мастер поможет создатьлюбой логотип или баннер, много готовых шаблонов. Бесплатных очень много, так что советую.

Если вы изготовили логотип, то можно начинать установку его на сайт.

В папке где у нас лежат файлы сайта index.html и style.css создадим еще одну папку и назовем её к примеру image скопируем в эту папку изображение логотипа.

Добавляем в index.html там где вы хотели бы видеть логотип, до меню или после, следующий код

<div class="logo">
<img src="image/logo.png">
</div>

Выделенное красным цветом, должны быть такие какие вы создали ИМЯ ПАПКИ/НАЗВАНИЕ ФАЙЛА.png

Выравниваем с помощью css добавляем в наш файд style.css следующий код

.logo
{
margin:0 auto;
width:200px;
margin-top:30px;
margin-bottom:30px;
}
 
.logo img
{
-moz-border-radius: 200px; /* Firefox */
-webkit-border-radius: 200px; /* Safari, Google Chrome */
-khtml-border-radius: 200px; /* KHTML */
-o-border-radius: 200px; /* Opera */
-ms-border-radius: 200px; /* IE8 */
-icab-border-radius: 200px; /* Icab */
border-radius: 200px; /* CSS3 */
}

На следующем уроке созданим блок для контента