Разрабатываем лэндинг на html, css и JavaScript - часть 2

В прошлом уроке мы узнали что такое HTML-теги и научились прописывать CSS свойства для текстовых блоков. В итоге у нас получился синий текстовый блок, с надписью в центре. Но это ведь не то, что мы хотим увидеть, правда? Сегодня с помощью обычной фоновой картинки и еще нескольких CSS свойств мы превратим нашу страничку в первый экран лэндинга.

Лэндинг (Landing page) - одностраничный сайт созданный с целью продать товар или услугу. Должен призывать к действию, побуждать пользователя заказать товар или связаться с владельцами сайта. Обычно лэндинг делится на блоки, называемые экранами - в каждом из них есть какой-то текст или элементы. Экраны следуют друг за другом, вниз, и сейчас мы создадим главный экран нашего гипотетического лэндинга. На какую тему будет наш одностраничник? Например, про продажу видеокурса о заработке на криптовалюте.

Откроем index.html из прошлого урока и изменим его следующим образом:

<html>
<head>
    <title>Заголовок веб страницы</title>
    <meta charset="utf-8">
    <meta name="description" content="Текстовое описание о чем веб страница">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href='css/css.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="mytext">
    <h1>СТРАТЕГИИ ТРЕЙДИНГА НА BITTREX и RUDEX</h1>
    <h3>Хотите научиться зарабатывать на криптовалюте?</h3>
    <a href="#myform" class="mybutton">КУПИТЬ ВИДЕОКУРС</a>
</div>
</body>
</html>

Что мы изменили? Убрали старую надпись, и написали вместо нее <h1>СТРАТЕГИИ ТРЕЙДИНГА НА BITTREX и RUDEX</h1>. Здесь используются парные теги <h1></h1> которые нужны для создания заголовка веб-страницы. Кроме того мы добавили подзаголовок <h3>Хотите научиться зарабатывать на криптовалюте?</h3>. В тегах типа <h1></h1> можно использовать числа от 1 до 6. Чем меньше число тем больше размер заголовка и тем важнее он для поисковых систем.

Под двумя заголовками мы расположили ссылку <a href="#myform" class="mybutton">КУПИТЬ ВИДЕОКУРС</a>. Эту ссылку с помощью CSS свойств мы превратим в кнопку. В параметре href мы указали в качестве адреса ссылки #myform, это означает что при нажатии на нашу ссылки-кнопки мы перейдем на экран лэндинга с id="myform". Мы сделаем этот экран с формой заказа в следующих уроках. Наша ссылка имеет класс mybutton, который мы опишем в CSS файле, чтобы невзрачная ссылка стала кнопкой.

Далее я приведу код нашего CSS файла, в который я уже внёс необходимые изменения. После каждого свойства я оставил комментарии, в формате совместимом с CSS.

* {
    box-sizing: border-box; /* Сброс настроек оступов */
    font-family: Arial, sans-serif;   /* Тип шрифта */
}
body, html {
    margin: 0px; /* Сброс настроек оступов */
    padding: 0px; /* Сброс настроек оступов */
}
.mytext {
    width: 100%; /* Ширина */
    height: 500px;  /* Высота */
    background: url(../img/fon.jpg);  /* Фоновая картинка */
    background-size: cover;  /* Растянуть фоновую картинку */
    background-position: center;  /* Центрировать фон */
    color: white;  /* Белый цвет шрифта */
    text-align: center;  /* Центрировать текст внутри блока */
    padding-top: 120px;  /* Отступ сверху */
}
.mybutton {
    display: block;  /* Кнопка должна быть display: block */
    width: 300px;  /* Ширина */
    height: 50px;  /* Высота */
    line-height: 50px;  /* Одинаковое с высотой значение центрирует текст кнопки по вертикали */
    color: white;  /* Белый цвет шрифта */
    margin: 0 auto;  /* Центрируем кнопку относительно окружения */
    margin-top: 40px;  /* Отступ сверху */
    text-decoration: none;  /* Выключаем подчеркивание текста */
    border: 2px solid white;  /* Делаем белую рамочку 2px у кнопки */
    border-radius: 5px;  /* Закругляем рамочку */
}

Обратите внимание на то, как мы поставили для нашего текстового блока с классом mytext фоновую картинку. Нужно создать в папке с нашей веб-страницей подкаталог img и положить туда картинку с именем, которое потом нужно указать в CSS. Я решил назвать картинку background.jpg, поэтому в CSS у текстового блока я прописал background: url(../img/fon.jpg);. Саму картинку я взял отсюда. Кроме того, я указал еще два свойства для фонового изображения, чтобы растянуть фоновую картинку на весь размер нашего блока, и центрировать фон. Так как фон у нас затемнён, я поставил цвет шрифта белым, чтобы буквы было видно.

Чтобы всё смотрелось более-менее аккуратно, нужно экспериментальным путём рассчитать правильный размер отступов. Приведу небольшую таблицу CSS свойств отвечающих за отступы.

Ну и наконец, превратим нашу ссылку в кнопку, поставив ей display: block;, явно указав ширину и высоту, и добавив рамочку border: 2px solid white;. Чтобы текст в кнопке был по центру вертикали добавим свойство line-height: 50px; в котором указано то же значение что и в высоте. Закруглим краешки кнопки, с помощью border-radius: 5px;.

В итоге у нас получится гораздо более симпатичный первый экран нашего будущего лэндинга.

Итоги: мы научились создавать заголовки и подзаголовки, изучили как из ссылки сделать кнопку, и поставили нашему текстовому блоку красивое фоновое изображение (бэкграунд).

Исходный код нашей сегодняшней веб-странички можно скачать здесь.

В следующем уроке мы изучим что такое строчные и блочные элементы HTML, поговорим об адаптивности, и сделаем второй экран лэндинга с тремя преимуществами нашего товара.

Данный материал подготовлен @pythono.

190