Верстка сайта: инструкция для новичков

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

В этой статье расскажем, как сделать сайт удобным и красивым и какие инструменты для этого нужны.

Что такое верстка сайта

Верстка сайта — это когда дизайнерский проект превращается в код при помощи языков программирования HTML и CSS. Это как собирать пазл. Берете разные элементы: текст, изображения, кнопки — и правильно их размещаете. Получается красивый и удобный сайт.

Виды верстки

Табличная и блочная — самые распространенные виды верстки.

• • Табличная

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

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

  • Блочная

    Это более современный и удобный способ верстки. Вместо таблиц используют специальные блоки — чаще всего с тегом
    &ltdiv>

    

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

Что такое адаптивная верстка

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

Например, вы заходите на сайт магазина.

• На компьютере. Вы видите несколько больших изображений товаров, меню навигации с несколькими пунктами, а весь контент расположен горизонтально на экране.
• На планшете. Изображения чуть меньше, меню сжимается, а некоторые элементы расположены вертикально. Так всё поместится на экран.
• На смартфоне. Изображения становятся еще меньше, меню преобразуется в кнопку. Когда нажимаете, открывается выпадающий список. Текст подстраивается, чтобы его легко было читать на маленьком экране.

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

Инструменты верстальщика

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

• Графические редакторы

  Помогают верстальщику работать с внешним видом сайта. В процессе работы сразу видно, как всё будет выглядеть. Для этого используют программы Adobe Photoshop, Gimp, Krita и другие. В них можно открыть макет сайта, посмотреть на отдельные элементы, например кнопки, иконки, блоки, и понять, что и как нужно сверстать.

• Редактор кода

  Это основные инструменты, с которыми работает верстальщик. В таких редакторах пишут и проверяют HTML, CSS и другие языки. Есть много редакторов, например: Notepad++, Sublime Text, Visual Studio Code, JetBrains WebStorm, Adobe Dreamweaver.

  • Visual Studio Code — самый популярный и бесплатный. У него много полезных дополнений, плагинов и удобных функций.
  • JetBrains WebStorm — платный, но очень мощный. Подсказывает код, автоматически его форматирует и глубоко интегрируется с другими инструментами.

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

• Гибридные редакторы

  В гибридных инструментах можно верстать вручную с помощью блочного конструктора. Adobe Dreamweaver — один из самых известных и мощных редакторов, в котором можно одновременно работать с кодом и дизайном. Это экономит время и делает работу проще.

Освоить эти инструменты и не только можно в онлайн-университете Skypro на курсе «Веб-разработчик». За пятнадцать месяцев изучите основы верстки сайтов html и css, научитесь создавать удобные и красивые веб-страницы, писать код на JavaScript, использовать системы контроля и отслеживать изменения в коде.

Что такое валидность верстки

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

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

Например, базовая структура HTML-документа выглядит так:

<!doctype html>
<html>
<head>
    <title>Заголовок страницы</title>
</head>
<body>
</body>
</html>

Такая верстка понятна и браузерам, и поисковым системам.

Какая верстка считается правильной

Вот основные правила верстки сайта.

1. HTML, CSS и JavaScript лучше хранить в отдельных файлах — так всё будет чище и понятнее.
2. Код должен быть аккуратным и легко читаемым.
3. Сайт должен выглядеть так, как задумано в дизайне — «пиксель в пиксель».
4. Сайт должен одинаково работать в Chrome, Firefox, Safari и других.
5. Заголовок H1 — главный, его используют только один раз. Остальные — H2, H3 и так далее.
6. Обязательно указывайте title, description, alt для картинок — это важно для поиска.
7. Картинки должны быстро загружаться и не тормозить сайт.
8. Сайт должен быть удобным на всех устройствах.

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

Стандартная верстка

Стандартная верстка — это база, с которой начинается работа.

• Структура файлов

  Это порядок, в котором хранят файлы проекта. Всё должно быть четко разложено по папкам — так будет удобно работать. Например, создайте папку «мой_сайт», а внутри нее — еще несколько папок: images — для изображений, css — для стилей, js — для скриптов.

• Предварительный просмотр

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

• Общие изображения

  Соберите все изображения, которые планируете использовать на сайте, и сохраните в папку images. Например, логотипы, фоны или фотографии товаров.

• Основные стили

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

   <link rel="stylesheet" href="css/style.css"></li> 

• Каркас HTML

  Это основа сайта. Все видимые и невидимые элементы размещают внутри HTML-документа.Вот так выглядит простой каркас:

  <!DOCTYPE html>
  <html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Пример сайта</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </body>
  </html></li>
  

   

• Макет

  Макет — это план, как будут располагаться элементы на странице. Определите, где будет заголовок, содержание и боковое меню. Можно сделать макет в Figma или Photoshop, а верстальщик уже превратит его в код.

  [ Шапка (логотип + меню + поиск) ]
  [ Заголовок страницы ]
  [ Основной текст / блоки ]
  [ Подвал ]
  
  

  Важно, чтобы верстка точно повторяла макет — «пиксель в пиксель».

• Логотип

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

  .

  <header>
    <img src="images/logo.png" alt="Логотип компании">
  </header>
  

  Хорошо, если у логотипа есть alt — текстовое описание для тех, у кого не загружается картинка.

• Поиск

  Если сайт большой, лучше добавить строку поиска. Например, простую HTML-форму:

  <form action="/search">
    <input type="text" name="q" placeholder="Поиск...">
    <button type="submit">Найти</button>
  </form>
  

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

• Меню

  Меню помогает быстро перейти в нужный раздел сайта. Чаще всего это список ссылок в виде горизонтальной панели.

  <nav>
    <ul>
      <li><a href="index.html">Главная</a></li>
      <li><a href="about.html">О нас</a></li>
      <li><a href="contact.html">Контакты</a></li>
    </ul>
  </nav>
  

  А еще меню можно сделать выпадающим, вертикальным или адаптивным. Например, в виде бургер-кнопки на телефонах.

• Заголовок страницы

  Это главный текст, который показывает, о чём страница. Обычно это &lth1&gt, и он должен быть один на странице.

  &lth1&gtДобро пожаловать на наш сайт&lt/h1>

  Подзаголовки &lth2&gt, &lth3&gt и так далее тоже можно использовать — они создают структуру текста.

Как проверить верстку

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

Validator.W3 — загружаете свой HTML-код, и система показывает, есть ли ошибки и где именно.

WellDoneCode — этот сервис сравнивает готовую страницу с макетом. Сразу видно, где что не совпадает по размерам или не так расположено.

Page Ruler — это расширение для браузера, которое работает как линейка. Наведите ее на любой элемент и точно узнаете его ширину и высоту в пикселях.

Window Resizer — тоже расширение для Chrome. Легко проверить, как сайт выглядит на разных экранах: телефоне, планшете или ноутбуке. Просто нажимаете на нужный размер — и видите результат.

Советы для верстальщиков

Эти советы упростят верстку и сделают работу более продуктивной.

Анализ макета

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

Среда разработки

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

В программе есть:

• проводник файлов — показывает все папки и файлы проекта;
• подсветка кода — разные части кода подсвечиваются цветом, и сразу видно, где ошибка;
• форматирование — можно быстро выровнять и оформить код;
• Git — отслеживает изменения в коде.

WebStorm от JetBrains — один из лучших и самых удобных вариантов. Это мощная программа для верстальщиков и разработчиков.

Препроцессор Sass

Sass — это инструмент, который помогает делать CSS удобнее и быстрее.

С его помощью можно:

разделить стили на отдельные файлы;
использовать вложенность, как в HTML — один стиль внутри другого;
задавать переменные.

Sass помогает навести порядок в коде и сэкономить время при верстке.

Методология «Яндекса»: БЭМ

БЭМ — это способ писать понятный и аккуратный код. Его придумали в «Яндексе». Название расшифровывается как:

Б — блок, например, меню;
Э — элемент, например, пункт меню;
М — модификатор, например, пункт активный.

БЭМ помогает увидеть, как связаны части страницы, легко поддерживать и дополнять код. Сначала такая система может показаться немного сложной, но потом всё становится проще, времени на верстку уходит меньше. Код получается чистым, и другим разработчикам легко с ним работать.

Сборщики проекта

Сборщики — это программы, которые помогают автоматизировать скучные и ручные задачи при верстке. Gulp — один из самых популярных инструментов.

Программа:

• собирает все файлы в один — так сайт загружается быстрее;
• добавляет префиксы для браузеров — стили будут работать во всех браузерах;
• создает спрайты из SVG — объединяет картинки в одну;
• когда сохраняет проект, автоматически обновляет страницу — не нужно вручную перезагружать браузер.

Всё это экономит время и делает работу проще, особенно если проект большой.

Программа курса «Веб-разработчик» построена на практике. Уже во время учебы начнете работать над реальными проектами. После курса у вас будет готовое портфолио и диплом о профессиональной переподготовке. Консультанты по трудоустройству помогут составить резюме, пройти собеседование и получить новую, высокооплачиваемую профессию.

Главное о верстке сайта

• Верстка сайта — это когда из макета или дизайна формируется настоящая веб-страница.
• В современном веб-дизайне предпочитают блочную верстку, так как она более удобная и гибкая.
• Графические редакторы, редакторы кода и гибридные редакторы помогают сделать красивый и удобный сайт.
• Разделяйте код, пишите чисто, делайте точно по макету, проверяйте в разных браузерах, заполняйте мета-теги, используйте изображения, которые мало весят, и адаптируйте сайт под разные устройства.
• В стандартной верстке должна быть структура файлов, общие изображения, основные стили, каркас HTML, макет, логотип, поиск, меню и заголовок страницы.
• Validator.W3, WellDoneCode, Page Ruler, Window Resizer — эти инструменты помогут проверить, что всё расположено правильно и работает на разных устройствах.
• Проанализируйте макет, используйте среды разработки, препроцессор Sass, БЭМ и сборщиков проектов — делать сайт будет проще и избежите ошибок.