Я верстальщик. Веб-верстальщик

Арсений Олегович Матыцин, 2018

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

HTML

Теги

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

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

Главная Яндекса без стилей.

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

Важно!: кроме head я удалил шапку и содержимое, которое выводило мою личную информацию.

Вот то же самое, только без участия тегов. Все содержимое я скопировал и вставил в тег p.

Главная Яндекса без верстки вообще.

Внимательный читатель обратит внимание, что 2 страницы браузера не сильно похожи одна на другую. Таким образом можно утверждать, что верстка — это перевод текста [читай контента] в другое качественное состояние. Точно так же, как это делают в типографии в классическом исполнении верстки.

В данном примере используются теги заголовков (H1), параграфа (p) и нумерованного списка (ol).

Обратите внимание:

Все теги форматирующие текст по-умолчанию имеют свое оформление. Например у списка есть отступ слева + нумерация, заголовки отличительно больше, чем основной текст, ссылки подсвечиваются и подчеркиваются и т.д. Первое желание начинающего дизайнера — поменять все стили на какие-нибудь «крутые». Ссылки сделать в цвет радуги, заголовкам дать новые отступы или учудить еще какую-нибудь ересь. Окститесь, ребята, в большинстве случаев не стоит так делать. Для того и создавались стандарты, чтобы пользователь мог понять, что ссылка это ссылка, заголовок это заголовок, который относится именно к вот этому абзацу. В этом деле существует много исключений, но работая с текстом всегда нужно взвесить все за и против, прежде, чем необдуманно броситься делать все «красивенько».

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

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

HTML дескрипторы

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

Еще одним важным примером будет XML разметка. Она вам пригодится при разработке сайта на продвинутом уровне, например при создании священного файла sitemap.xml. Священный он потому что при его отсутствии на сайте поисковики будут ставить вам палки в колеса.

Идя дальше можно говорить про разработку для мобильных платформ. Там вам тоже пригодится знание и понимание тегов.

Как применять теги

Существует 2 вида тегов. Те, которые надо закрывать и те, которые закрыты сами. Отличить их просто, те, что надо закрывать одинаковые, идут парно и последний, т.е. второй имеет одну отличительную черту. Косую. Закрываемые теги выглядят так:

<h1>Между тегами содержимое</h1>

Открывающий тег / Закрывающий тег с косой чертой

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

<br>

Вот и все

Открывающий тег, он же закрывающий

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

С приходом стандарта HTML5 изменилась форма записи в одиночных тегах. Раньше требовалось указывать косую черту перед закрывающей скобкой тега вот так — <br/>, а сейчас нет. Это долгое время мешало мне, так как я привык писать по старым стандартам, и валидатор W3C писал мне предупреждения.

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

<p>Текст, внутри которого находится <a href="#">ссылка</a></p>

Пример вложенных тегов

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

Основные теги

Тегов существует великое множество и нет никакого смысла их все запоминать. Для постоянной работы вам потребуется несколько основных: div, span, p, a, img.

Также обращаю ваше внимание, что данный список не является конечным, так как для повышения семантики и для удобства верстки их дополняют, а многие выходят из обихода. Подробный список можно найти на сайте w3schools.com/tags/.

Парные теги

Самые первые парные теги, которые вам нужно запомнить — те, которые формируют каркас будущей страницы:

html — Данный тег определяет страницу целиком. В него оборачивается все содержимое страницы.

head — Данный тег предназначен для «невидимой» части страницы. В него помещается заголовок страницы (который отображается на вкладке браузера), определение правил и почти всегда ссылки на зависимости.

body — Само тело [body] содержит видимую часть страницы, грубо говоря отформатированный текст.

Тут же следует сразу показать, как их использовать:

<!DOCTYPE html>

<html>

  <head>

    <title>Пример</title>

  </head>

  <body>

    Содержимое

  </body>

</html>

Пример использования парных тегов

Первым делом мы указываем доктайп, затем открываем html тег, в котором размещаем head внутри которого можно разместить title. Закрываем и тут же открываем body, в котором уже пишем весь код. В конце теги закрываются в порядке вложенности.

Маленький хак от Emmet

Возвращаясь к теме редакторов IDE можно упростить себе жизнь с плагином Emmet. Он позволяет вызвать шаблон-заготовку страницы html посредством следующих действий:

Пишем знак восклицания — !

Нажимаем таб

Получаем кусок кода, готовый к эксплуатации

Я такое часто применяю в редакторе Brackets.

Далее давайте разберем остальные теги.

<div> — Самый популярный тег, который используется для формирования страницы. Является блочным по-умолчанию. Т.е. растягивается по всей ширине занимаемого пространства и сразу понимает присвоенным значения. Например, если тегу a указать размеры, то он их не сможет понять до тех пор, пока вы в стилях не укажите ему другой display, например inline-block. Div это умеет делать сразу.

<h1>–<h6> — Тег заголовка [англ. heading — отсюда сокращение h], варьируется от уровня заголовка. H1 — самый важный и, соответственно, самый большой. А h6 уже меньше размера основного текста.

Заголовки жизненно необходимы для разделения текста на части, чтобы упростить чтение материала. Они также используются поисковыми роботами для определения содержимого страницы. Впрочем, и человек в первую очередь пробегается глазами по заголовкам и только потом читает сам текст (если читает).

Заголовок является блочным элементом.

На странице может быть не больше одного тега h1!

<p> — Данный тег используется для оформления текста в формате абзаца [англ. paragraph]. Чтобы абзац выглядел, как должен, а именно: быть единым целым, единицей текста, и иметь перенос текста в конце. Текст без обертки в параграф превращается в однородное полотно, которое трудно читать. Параграф не может быть обернут в тег ссылки.

Конец ознакомительного фрагмента.