Как сверстать

Для создания кнопок используется тег <button>. Внутри него размещается текст или изображение, которые будут отображаться на кнопке. Например:

<button type="button">Я кнопка</button>

Чтобы задать кнопке имя, тип или состояние, нужно добавить атрибуты: name, disabled и type.

Атрибут name задаёт имя кнопки. Может использоваться для идентификации элемента в скриптах.

<button type="button" name="popup-button">Я кнопка</button>

Атрибут disabled блокирует доступ к кнопке.

<button type="button" disabled>Я заблокированная кнопка</button>

Атрибут type определяет тип кнопки. Ему задают одно из трёх значений:

button — значение по умолчанию. Означает, что элемент — обычная кнопка. Она может добавлять товары в корзину или избранное, переключать слайдеры или закрывать всплывающие окна.

submit задаётся кнопкам для отправки формы. Когда пользователь нажимает на кнопку с таким типом, браузер отправляет данные формы на сервер.

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

Полный список атрибутов

Иногда на сайте встречаются элементы вроде кнопок «Перейти в каталог», «Читать далее» или кнопок соцсетей. На самом деле это ссылки. Их создают с помощью <a href="">Какой-то текст</a> и затем стилизуют так, чтобы они стали похожими на кнопки.

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

Ссылки в большой статье могут потеряться, а вот красочная картинка привлекает больше внимания.

Чтобы вставить изображение на сайт, используют тег <img>. У тега есть четыре обязательных атрибута:

• src — для указания пути до файла с картинкой и его отображения на экране;
• width и height — размеры изображения. Эти атрибуты позволяют резервировать место для изображения, чтобы убрать «прыжки» страницы пока изображение грузится;
• alt — альтернативное описание.

<img src="images/cat.jpg" width="600" height="200" alt="Котик">

Для создания ссылок используется тег <a>. Чтобы сделать картинку ссылкой, нужно разместить её внутри тега <a>:

<a href="https://htmlacademy.ru">
  <img src="images/cat.jpg" width="600" height="200" width="600">
</a>

Адрес ссылки задаётся в формате URL с помощью атрибута href.

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

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

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

<form action="#" method="post" target="_blank">
  <h2>Шаблон формы</h2>
  <fieldset>
    <legend>Персональные данные</legend>
    <ul>
      <li>
        <label for="name">Имя:*</label>
        <input type="text" name="name" placeholder="Иван Иванов" id="name" required>
      </li>
      <li>
        <label for="age">Возраст:</label>
        <input type="number" name="age" placeholder="27" id="age" min="0" max="125">
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Контакты</legend>
    <ul>
      <li>
        <label for="email">E-mail:*</label>
        <input type="email" name="mail" placeholder="ivanov@gmail.com" id="email" required>
      </li>
      <li>
        <label for="number">Телефон:*</label>
        <input type="tel" name="phone" placeholder="+7 000 000-00-00" id="number" maxlength="21" required>
      </li>
    </ul>
  </fieldset>
  <div>
    <label for="message">Увлечения</label>
    <textarea name="comment" placeholder="Расскажите обо всём, что для вас важно" id="message"></textarea>
  </div>
  <fieldset>
    <legend>Учёба</legend>
    <ul>
      <li>
        <input type="checkbox" name="intensive-courses" id="courses" checked>
        <label for="courses">Прохожу курсы</label>
      </li>
      <li>
        <input type="checkbox" name="books" id="books">
        <label for="books">Читаю книги</label>
      </li>
      <li>
        <input type="checkbox" name="video" id="video">
        <label for="video">Смотрю видео</label>
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Предпочтения</legend>
    <ul>
      <li>
        <input type="radio" name="preference" id="front" value="frontend" checked>
        <label for="front">Фронтенд-разработка</label>
      </li>
      <li>
        <input type="radio" name="preference" id="back" value="backend">
        <label for="back">Бэкенд-разработка</label>
      </li>
    </ul>
  </fieldset>
  <div>
    <button type="submit">Отправить</button>
    <p>* — Обязательные поля</p>
  </div>
</form>

Так вышло, что дизайнеров не учат разработке в университете или на курсах — её нет в программе обучения. Могут преподавать информатику, но и здесь студенты изучают лишь основы программирования, слабо связанные с тем, что делают программисты на реальной работе.

Тем не менее, знать разработку надо — эти знания увеличат шансы на повышение и хорошую зарплату в IT.

Вы открыли макет в Фигме и редактор кода. Сейчас расскажем, что нужно делать дальше, чтобы не впасть в прокрастинацию и всё сверстать.

Если вам нужно быстро сделать сайт на учёбе или для личных дел, используйте этот шаблон. Вы можете наполнить его чем угодно — добавить тексты, картинки или подключить любые стили. Например, такие, через awsm.css.

Сайт легко запустится у вас на компьютере по инструкции или откроется сразу в браузере.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Заголовок страницы</title>
    <link rel="stylesheet" href="./styles/style.css">

    <meta property="og:title" content="Заголовок страницы в OG">
    <meta property="og:description" content="Описание страницы в OG">
    <meta property="og:image" content="https://example.com/image.jpg">
    <meta property="og:url" content="https://example.com/">
  </head>
  <body>
    <header>
      <h1>Личный сайт</h1>
      <p>Который сделан на основе готового шаблона</p>
      <nav>
        <ul>
          <li><a href="index.html">Эта страница</a></li>
          <li><a href="catalog.html">Другая страница</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <section>
          <h2>Первая секция</h2>
          <p>Она обо мне</p>
          <img src="images/image.png" alt="Человек и пароход">
          <p>Но может быть и о семантике, я пока не решил.</p>
        </section>
        <section>
          <h2>Вторая секция</h2>
          <p>Она тоже обо мне</p>
        </section>
        <section>
          <h2>И третья</h2>
          <p>Вы уже должны были начать догадываться.</p>
        </section>
      </article>
    </main>
    <footer>
      <p>Сюда бы я вписал информацию об авторе и ссылки на другие сайты</p>
    </footer>
    <!-- сюда можно подключить jquery <script src="scripts/app.js" defer></script> -->
  </body>
</html>

Ссылка — текст, кликая на который вы переходите на другую страницу. Иногда после клика открывается картинка, скачивается файл или вы переходите к другой части страницы.

В HTML ссылки создаются с помощью тега <a>. Например:

<a href="https://htmlacademy.ru">HTML Academy</a>

href — это атрибут, в котором мы прописываем адрес для перехода.

Тег <a> можно использовать вообще без адреса, то есть без атрибута href. Такой тег обозначает «ссылку-заглушку», которая в других условиях может стать обычной ссылкой. Ссылки-заглушки показывают, что мы находимся на текущей странице, и отсюда не нужно никуда уходить:

<ul>
  <li><a>1 страница</a></li>
  <li><a href="2">2 страница</a></li>
  <li><a href="3">3 страница</a></li>
</ul>

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

Умение выделять систему из дизайна и переносить её в код — полезный навык. Он экономит ваше время на разработку и поддержку крупных продуктов. С его помощью можно улучшить качество кода и уменьшить количество ошибок на этапе тестирования.

Давайте разберёмся, какие ещё преимущества дают дизайн-системы, и как эти системы создавать.

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

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

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

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