Верстка

“

В этом уроке мы сверстаем страницу сайта визитки. Цель урока — показать, что такое верстка, а не научить верстке с нуля. Поехали!

Глоссарий

Для успешного освоения материала рекомендуем вам изучить следующие понятия:

Дерево HTML-элементов и текста

Обозначается открывающим и закрывающим тегом. Открывающий и закрывающий теги содержат имя тега

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

DTD (document type definition, описание типа документа).
Предназначен для указания типа текущего документа. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях. Кроме того, имеется XHTML, похожий на HTML, но различающийся с ним по синтаксису

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

Сообщает браузеру, каким образом должен отображаться тот или иной элемент страницы

Видимая часть окна браузера

Характеристика, которая будет применяться к элементу (в нашем примере это цвет)

Повторяющий блок CSS-кода, содержащий хотя бы один селектор и свойства

Элемент каскадной таблицы стилей CSS, указывает на элемент веб-страницы, к которому должны будут применяться стили

Язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно / растровой графики в формате XML

Способ расположения блоков на странице, позволяющий легко выравнивать элементы по горизонтали и вертикали, менять направление и порядок отображения элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю

Видеолекция

Конспект

HTML и CSS

Верстка — это расположение текста, заголовков, изображений и всего остального на странице. В процессе верстки используются специальные языки — HTML и CSS.

HTML (HyperText Markup Language) — язык гипертекстовой разметки, с помощью которого собирается структура страницы.
CSS (Cascading Style Sheets) — каскадные таблицы стилей, придают стиль будущей странице.

Создание документа

1. Открываем папку, где установлен OpenServer.

2. В папке Domains создаем папку Website.

3. Открываем созданную папку Website в VisualStudio Code.

4. Создаем файл index. html в корне.

Структура документа

1. Первое, что нужно сделать, написать <!DOCTYPE html>. Это описание типа документа, чтобы браузер понимал как следует интерпретировать текущую страницу, т.к. существуют разные версии HTML. Актуальной является 5-я версия.

<!DOCTYPE html>

2. Следующий обязательный элемент — <html> — основной элемент страницы. В отличие от DOCTYPE элемент html является закрывающимся и всегда содержит 2 элемента — head и body.

<html>
<head></head>
<body></body>
</html>

Важно

Все теги внутри head не отображаются на странице, их цель помочь браузеру в работе с данными

3. Указываем заголовок страницы и тег <meta> для указания кодировки.

…
<head>
<meta charset="utf-8">
<title>Мой сайт</title>
</head>
…

Важно

Обратите внимание, тег <meta> является не закрывающимся.
В теге <body> хранится весь контент страницы — все то, что мы видим

Подключение стилей

Стили подключаются при помощи тега < link> в секции head.

<head>
    ...
    <link rel="stylesheet" href="assets/css/main.css">
</head>

Важно

Внутри тега могут быть какие-то параметры — они называются атрибутами

1. Для тега <link> необходимо указать атрибут href — он содержит путь к файлу со стилями.

2. Указываем путь и кликаем с зажатым Ctrl на путь, чтобы открыть файл. Если этого файла нет, то студия предложит нам его создать.

Копирование шрифтов и картинок

Мы заранее подготовили 2 папки с файлами, которые нам понадобятся — это папка Images с картинками, SVG фоном и стрелкой прокрутки. Вторая папка — это шрифты из Google fonts. Шрифты Lora и Montserrat. Скачать эти папки
Копируем эти папки в папку Assets.

Стили

1. В начале файла со стилями определим шрифты с помощью правила @font-face.

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Bold.ttf");
  font-weight: 700;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.ttf");
  font-weight: 400;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/Lora-Regular.ttf");
  font-weight: 400;
}

2. Указываем имя шрифта, ссылку на сам шрифт и толщину шрифта. Сейчас мы указали 3 свойства: font-family, src и font-weight, а то, что находится справа через двоеточие — это значения этих свойств.

3. Дальше начинаем писать правила для определенных селекторов.

Важно

Правила — набор свойств, которые указаны внутри фигурных скобок. А селекторы — то, что указано до фигурных скобок — то, к чему эти правила будут применяться

4. Начнем с универсального селектора, который применяет правила ко всему на странице.

* {
  box-sizing: border-box;
}

5. Затем для body обнуляем внешние отступы и указываем шрифт.

body {
  margin: 0;
  font-family: Montserrat;
}

Первый экран

1. В html-файле создаем секцию для первого экрана, в ней будут контейнер и несколько блоков.

<section class="first-screen section-bg">
  <div class="container">
    <div></div>
    <div></div>
  </div>
</section>

2. Первый будет содержать заголовок, а во втором будут 2 кнопки. Кнопкам сразу указываем классы.

<section class="first-screen section-bg">
  <div class="container">
    <div>
      <h1>Веб-разработчик <br> к вашим услугам</h1>
    </div>
    <div>
      <a class="btn btn-bg" href="#">Узнать больше</a>
      <a class="btn btn-outline" href="#">Нанять меня</a>
    </div>
  </div>
</section>

Сейчас наша страница выглядит следующим образом.

Но это, пока нет стилей. Давайте напишем их.

1. Для контейнера укажем ширину, максимальную ширину.

2. Сделаем отступы слева и справа автоматическими.

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

3. Для секции зададим внутренние отступы сверху и снизу.

section {
  padding: 90px 0;
}

4. Для первого экрана установим высоту равную 100 высоты вьюпорта.

5. Сделаем блок flex'ом с вертикальным выравниванием по центру и обрезку с помощью эллипса.

.first-screen {
  height: 100vh;
  clip-path: ellipse(100% 60% at 50% 35%);
  display: flex;
  align-items: center;
  position: relative;
}

6. Также эта секция будет иметь фон, поэтому укажем в качестве фона svg изображение, оно будет темное, поэтому цвет текста сделаем белым.

.section-bg {
  background: url(../img/bg.svg);
  color: #fff;
}

7. Теперь для заголовка укажем шрифт и его размер в 80 px и перейдем к кнопкам.

h1 {
  font-family: Lora;
  font-size: 80px;
}

8. У кнопок будет внутренний отступ, граница и белый цвет, шрифт будет полужирный.

.btn {
  padding: 13px 20px;
  color: #fff;
  border: 2px solid transparent;
  text-decoration: none;
  font-weight: 700;
}

9. Укажем еще 2 класса для кнопки с фоном и без фона, но с границей.

.btn-bg {
  background: #c74838;
}
.btn-outline {
  border-color: #c74838;
}

Посмотрим, что получилось

Как видим, результат отличный. Остается добавить стрелку для прокрутки вниз.

1. После контейнера добавляем ссылку с картинкой, указываем путь до картинки и альтернативный текст.

<a class="chevron" href="#">
   <img src="assets/img/chevron.svg" alt="scroll">
</a>

2. Напишем стили. Это будет блок с абсолютной позицией, расположенный по центру с отступом снизу в 150 px.

.chevron {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 150px;
  transform: translate(-50%, 0);
}

Теперь первый экран готов.

Секция «Обо мне»

Создаем еще одну секцию: с контейнером, заголовком 2-го уровня и двумя абзацами.

<section>
  <div class="container">
    <h2>Обо мне</h2>   
  </div>
  <p>

С другой стороны, повышение уровня гражданского сознания обеспечивает широкому кругу специалистов участие в формировании существующих финансовых и административных условий!

  </p>
  <p>

Соображения высшего порядка, а также постоянное информационно-техническое обеспечение нашей деятельности, в значительной степени обуславливает создание системы масштабного изменения ряда параметров.

  </p>
</section>

Посмотрим, как это выглядит без стилей

Давайте все-таки добавим стилей.

1. Заголовку укажем размер и отступы.

2. Для абзацев назначим размер, межстрочный интервал и шрифт.

h2 {
  font-family: Lora;
  font-size: 48px;
  margin: 0 0 60px;
}
p {
  font-size: 20px;
  line-height: 2;
  font-family: Montserrat;
}

Как видите, результат стал куда лучше

Секция «Портфолио»

1. Создаем еще одну секцию: с контейнером и заголовком 2-го уровня.

<section>
  <div class="container">
    <h2>Портфолио</h2>   
  </div>
</section>

2. После заголовка создаем блок с классом gallery, каждая картинка будет находиться в блоке с классом img-wrapper.

Важно

Картинка помещается на страницу с помощью тега <img>

<div class="gallery">
   <div class="img-wrapper">
      <img src="assets/img/placeholder.jpg" alt="image">
   </div>
</div>

3. Копируем блоки с картинкой, чтобы у нас было 9 штук.

<div class="gallery">
   <div class="img-wrapper">
      <img src="assets/img/placeholder.jpg" alt="image">
   </div>
   ...
   <div class="img-wrapper">
      <img src="assets/img/placeholder.jpg" alt="image">
   </div>
</div>

Сейчас это выглядит как просто 9 картинок друг под другом

4. Добавим стилей. Галерея будет flex с flex-wrap, и элементы в ней равномерно распределены.

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

5. Для img-wrapper задаем размеры, отступы, overflow, курсор и flex с выравниванием по центру.

.img-wrapper {
  width: 350px;
  height: 290px;
  margin-bottom: 50px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  justify-content: center;
}

6. Для самой картинки устанавливаем только свойство заполнения.

.img-wrapper img {
  object-fit: cover;
}

Теперь это уже больше похоже на галерею

Форма обратной связи

1. Создаем еще одну секцию, с контейнером. У этой секции будет фон как и у первой, поэтому используем уже имеющийся класс.

<section class="section-bg">
   <div class="container"></div>
</section>

2. Делаем блок с классом flex, а в нем два блока шириной 60 и 40 процентов. У первого блока сделаем еще отступ справа.

...
<div class="container">
   <div class="d-flex">
       <div class="w-60 pr-4"></div>
       <div class="w-40"></div>
   </div>
</div>
...

3. В первый блок помещаем заголовок и небольшой абзац текста.

...
<div class="w-60 pr-4">
   <h2>Давайте работать вместе</h2>
   <p>
      Практический опыт показывает, что новая модель организационной деятельности способствует повышению актуальности системы масштабного изменения ряда параметров!
   </p>
</div>
...

4. Во втором блоке делаем форму, которая будет состоять из текстового поля с именем, email-адреса, поля для сообщения и кнопки.

...
<div class="w-40">
    <form>
        <input type="text" placeholder="Как к вам обращаться">
        <input type="email" placeholder="Ваш email">
        <textarea rows="4" placeholder="Сообщение"></textarea>
        <input class="btn btn-bg" type="submit" value="Отправить">
    </form>
</div>

Посмотрим, как это выглядит без стилей. Не очень

Напишем стили.

1. Сделаем отдельный класс для flex и для ширины в 60 и 40 процентов.

.d-flex {
  display: flex;
}
.w-60 {
  width: 60%;
}
.w-40 {
  width: 40%;
}

2. Также нам понадобится класс с правым отступом в 4 rem.

.pr-4 {
  padding-right: 4rem;
}

3. Форма будет вертикальным флексом.

form {
  display: flex;
  flex-direction: column;
}

Посмотрим, что получилось

Как видите, поля ввода без дополнительных стилей всегда выглядят ужасно, поэтому сделаем с ними следующее.

1. Для input и textarea сделаем внутренний отступ, установим размер шрифта и отступ снизу, а границу уберем.

input,
textarea {
  padding: 15px;
  font-size: 15px;
  margin-bottom: 15px;
  border: none;
}

2. Для того же input и textarea напишем еще одно правило, когда они будут в фокусе, чтобы у них не было светящейся границы.

input:focus,
textarea:focus {
  outline: none;
}

Теперь форма выглядит уже куда лучше

Подвал сайта

Остается сделать только подвал сайта.

1. Используем тег <footer> с контейнером внутри и напишем там копирайт.

<footer>
    <div class="container">
        Copyright &copy; 2020. Все права защищены.
    </div>
</footer>

2. Добавим немного стилей — небольшой отступ и выравнивание текста по центру.

footer {
  padding: 50px 0;
  text-align: center;
}

Вот такой сайт у нас получился

“

Теперь вы знаете, что такое верстка и стили, на что они влияют, и как происходит процесс. Вы можете самостоятельно повторить этот урок и попробовать сделать что-то по своему усмотрению. Также советую выучить теги и свойства стилей, ведь чем больше вы их знаете, тем больше можете сверстать. Давайте проверим, как вы запомнили этот урок!

Дополнительные материалы

Онлайн курсы
HTML Academy

Статьи
Вёрстка - это не тупо

Справочники по HTML
Webref

htmlbook

Тренажеры
Тренажер для изучения FlexBox

Интерактивное задание

Тест

Учебно-методические курсы

Предыдущий материал
Дизайн

Каталог материалов

Следующий материал
Анимация

Верстка

Учебно-методические курсы

Предыдущий материалДизайн

Каталог материалов

Следующий материалАнимация

Предыдущий материал
Дизайн

Следующий материал
Анимация