vk
Тула
+7(4872)702-730 +7(499)677-61-84
Заказать звонок
info@oweb-solutions.ru

Основы верстки

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

HTML вертска

Разработка сайта с нуля – достаточно долгая и кропотливая работа, которая выполняется в несколько этапов. Первым делом создается прототип, в ходе которого идет прорисовка общей структуры веб-ресурса. Далее специалисты приступают к разработке макета страниц, которые требуют качественной верстки в будущем. Говоря простым языком, верстка сайта – это процесс преобразования макета в готовый продукт, который включает в себя язык разметки HTML и CSS.

Из чего состоит верстка? Какие работы должен реализовать верстальщик? Сколько этапов для этого нужно? Об этом команда oWeb-Solutions расскажет Вам в статье.

Что представляет из себя верстка сайта?

Верстка страниц веб-ресурса – это создание HTML-кода, с помощью которого можно размещать элементы страницы (будь то иллюстрация, текстовая информация, линии и пр.) в конкретных местах документа и отображать их в окне браузера (опираясь на созданный ранее макет). Однако у HTML и CSS есть определенные ограничения, которые следует учитывать. Также обращайте внимание на особенности конкретного браузера, используйте те методы верстки, которые гарантированно дадут нужный результат.

Важно! HTML не относится к языку программирования. Скорее, это язык разметки. Его используют с целью передачи информации браузеру о том, как должны отображаться посещаемые web-страницы. Язык может быть легким или сложным. Все зависит от предпочтений веб-дизайнера. В состав HTML входят несколько элементов, которые необходимы, чтобы вкладывать или оборачивать определенные виды контента. Это поможет контенту отображаться или действовать нужным образом. Ограждающие теги могут преобразовать слово или картинку в ссылку, например, на другой раздел. Также они позволяют сделать слова курсивом, выбрать размер шрифта и т.д.

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

Существует всего 2 типа разработчиков сайтов:

  • Backend – его деятельность заключается в разработке и создании внутренней составляющей веб-ресурса, программировании основного функционала;
  • Frontend – главной задачей специалиста является работа с внешней составляющей веб-ресурса, специалист настраивает отображение каждого элемента, дополняет их анимацией и т.д.

Версткой занимается непосредственно Frontend. В нее входит язык разметки HTML, базис каждого веб-сайта.

HTML непосредственно показывает страницы сайта и контент, который на них опубликован, в определенном порядке. Процесс работы с языком разметки основан на описании тегов. Чаще всего используют следующие:

  • <html> </html> – считаются главными тегами, они обычно состоят из других тегов;
  • <head> </head> – теги состоят из SEO-элементов, кода JavaScript и т.д.;
  • <body> </body> – эти теги содержат в себе все элементы страницы;
  • <h1> </h1> – теги обозначают главные заголовки на странице;
  • <h2> </h2> – теги обозначают второстепенные заголовки (второго уровня) на странице, после них обычно следуют заголовки третьего, четвертого и других уровней (h3,h4 и т.д.);
  • <p> </p> – в тегах прописывают текстовое описание, например, название статьи;
  • <strong> </strong> – делает текст жирным;
  • <i> </i> – под этим тегом текст выделяется курсивом;
  • <ul> </ul> – с помощью тегов на странице показывают маркированные списки;
  • <ol> </ol> – теги обозначают списки нумерованного типа;
  • <li> </li> – с их помощью прописывают пункты внутри существующего списка;
  • <a> </a> – с помощью тегов к тексту через атрибут href добавляется ссылка на другой веб-источник, контактные данные (например, email или телефон) и т.д.;
  • <img> – тег позволяет добавить изображение на веб-ресурс с ПК или из Интернета;
  • <table> </table> — с помощью тега можно создать таблицу.

Какие виды верстки существуют?

Всего выделяют два типа верстки – блочную и табличную. Рассмотрим каждую более подробно.

Табличная верстка

Самая ранняя разновидность верстки, с которой и началась «эпоха» веб-сайтов. Как раз через таблицы и разрабатывались простейшие web-страницы в далеких нулевых. Табличная верстка подразумевает деление страницы на конкретные ячейки. Процесс работы напоминает пользование старым добрым Excel-ем.

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

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

В настоящий момент табличная верстка используется крайне редко. Например, к ней прибегают в случае верстки электронных писем, так как альтернативы отсутствуют. Основывается данный вид верстки на теге <table> , с помощью которого и задаются главные параметры таблицы (размеры) – длина, ширина и т.д. Внутри <table> находятся теги <tr> и <td>. Первый нужен для создания строки, последний – для создания столбца.

Табличная вертска

Блочная верстка

Чаще всего используемый вариант верстки веб-ресурсов. В основе лежит тег <div> , с его помощью создают контейнеры, состоящие из всего контента страницы или конкретного блока. К примеру, можно поделить ресурс на несколько блоков: главный экран, о нас (о компании), контактные данные (связь с нами) и т.д. Каждый блок будет иметь свой собственный тег <div>.

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

Блочная верстка

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

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

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

Пример стандартной схемы блочной верстки:

Блочная верстка

Валидная верстка

Под валидной версткой понимается верстка, которая отвечает стандарту W3C. С ее помощью добиваются правильного отображения веб-ресурса на любом пользовательском устройстве. Особенность верстки – строгое соблюдение всех правил при построении кода, его оптимизации и минимизации. Таким способом возможно продвинуть сайт на более высокий уровень, что повысит репутацию ресурса в поисковых системах Яндекса и Гугла.

При данном типе верстки элементы HTML всегда находятся четко на своих местах. Первым делом необходимо прописать тег <!Doctype html>, далее -<html>, <head>, <body>.

Как понять, что верстка сделана корректно?

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

  1. Совет: разбивайте код HTML, CSS и JavaScript на отдельные файлы.
  2. Код должен быть написан чисто и легко в плане читаемости.
  3. Чаще всего верстка готового макета ресурса должна быть точной, пиксель к пикселю. Однако бывают исключения, в ходе которых допускаются определенные корректировки (но перед этим нужно получить одобрение от клиента).
  4. Оптимизировать код лучше через методологию БЭМ от Яндекса.
  5. Помните, что работа веб-сайта должна быть одинаково качественной с любого браузера.
  6. Также важно использовать заголовки на странице (не только первого уровня, но и последующие). Помните, что заголовок H1 может использоваться на странице лишь единожды. В противном случае получите массу проблем с поисковиками.
  7. Поисковые системы обращают внимание на полноту заполнения таких тегов, как , <title>, <alt> и <description>.
  8. Не стоит использовать для страницы картинки, которые много весят. Они могут замедлить время загрузки ресурса.
  9. Также следует адаптировать сайт для смартфонов и планшетов.

Понятно, что в статье описаны далеко не все тезисы качественной верстки. Но соблюдение перечисленных основ позволит Вам сделать быстрый и устойчивый веб-сайт.

Инструменты, необходимые для верстки

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

Специалист в большинстве своем использует ряд инструментов, среди которых:

  • Notepad++ – классический редактор кода;
  • SublimeText – наиболее востребованный редактор;
  • Webstorm – программа отличается высокой мощностью.

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

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

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

  1. Для получения более полной информации следует воспользоваться сервисами Jigsaw.W3 и Validator.W3.
  2. Хотите узнать, соответствует ли верстка макету сайта? Для этого существует программа WellDoneCode.
  3. Измерить в пикселях блоки, прошедшие верстку, и другие элементы ресурса позволяет сервис Page Ruler.
  4. Через Window Resizer можно узнать, насколько качественно страница адаптирована под каждое устройство.