HTML и CSS для начинающих — означает, хочу все быстро, понятно и чтоб уже завтра все заработало. Постараюсь упаковать знания о HTML, CSS, верстке и кодинге — достаточные для работы маркетолога — в одну статью. Ну, вперед!
HTML кости, CSS мясо
Открываем инспектор на любом сайте (Cmd+Alt+I) и видим код HTML. Не факт, что именно так сверстано в оригинале (и упаковано на хостинг). Но, если перед вами лендинг — сайт на голом HTML — то вероятность 99%, что перед вами исходник html.
Там же в инспекторе справа мы видим стили CSS. Покликайте на разные строки в левой части с HTML – вы заметите, как меняются соотвествующие CSS стили в правой части инспектора.
Например, выберем инструмент выделения кода (левая иконка на панель инспектора), наведем на заголовок, а потом изменим размер шрифта в правой колонке со стилями CSS:
Заголовок стал гигантским, но это локальное изменение, видимое только в вашем браузере. Если обновить страницу, все стили вернуться на свое место.
Html теги
Пример с заголовком H1 иллюстрирует, как выбирая нужный html тег, можно менять его стили. Тэги начинаются и заканчиваются со знаков <…>. Синтаксис html тегов (правило правописания) выглядит так:
Неплохо запомнить, что у html тегов есть имя, атрибуты и значения атрибутов. У разных по назначению тегов бывают разные атрибуты, но есть атрибуты универсальные для многих тегов. Htmlbook.ru в помощь, если хотите просветиться больше по теме.
Большинство тегов состоят из двух частей (открывающий и закрывающий тег), но встречаются без закрывающей части (пример выше с тегом img).
<h3>Заголовок Н3</h3>
Приведу список основных html тегов, с которыми придётся сталкиваться маркетологу:
<html> – тег, обозначающий страницу html, без него страница не загрузится браузером
| <head> – тег сведений о странице, визуально не отображается, содержит важную информацию для поисковиков и работы стилей/скриптов сайта
|| <title>..</title> – трек заголовка страницы (не путать с H1). В большинстве случаев используется поисковиками для создание поискового сниппета
|| <meta>..</meta> – в частном случае служит для указания описания страницы (description)
|| <style>..</style> – тег для непосредственного добавления CSS стилей внутри html документа
|| <link>..</link> – тег, который прилинковывает CSS стили сайта к странице или к iframe коду (типично для форм и виджетов)
|| <script>..</script> – тег для прилинковки скриптов, исполняемых на данной странице (можно использовать внутри body)
| </head> – закрывающий тег head (не путать с header!), внутри которого содержится служебная информация о странице
| <body> – открывающий тэг основного контента страницы, сразу после него часто размещают скрипты веб-аналитики
|| <h1>..</h1> – заголовок страницы H1. Второй по SEO-значимости текст после title.
|| <p> – открывающий тэг параграфа с текстом
||| <a>..</a> – тег ссылки, распложенной внутри текста (что не обязательно). Ссылка имеет обязательно атрибут href=»mysite.com» для указания URL адреса.
|| </p> – закрывающий тег параграфа
|| <img ../> – тег изображения, не имеет закрывающей пары. Так же как и тег ссылки a содержит атрибут для указания на объект: src=»image.jpg»
|| <form> – открывающий тэг формы. Важным элементом является атрибут id=»form-1″ — он часто используйтся для отслеживания отправки форм в аналитике
|| <input>..</input> – тег поля ввода, чек бокса, выпадающего списка
|| <button>..</button> – тег кнопки. Используйте, когда надо вызвать функцию (например, отправить форму). Для простых ссылок используйте тег <a>.
|| </form> – закрываешь тег формы
|| <footer>..</footer> – подвал (футер) сайта, не является обязательным, но активно используется в таких CMS как WordPress
| </body> – Закрывающий тэг бади. Прямо перед ним часто размещают дополнительные скрипты.
</html> — закрывающий тег страницы
Все атрибуты прописываются внутри открывающего тега, то есть вначале. Например, если мы хотим локально (то-есть в одном конкретном случае, не для всего сайта) сменить цвет или размер заголовка H1, можно использовать часто используемый атрибут style:
<h1 style=»font-size:50px; color:#555555″>Заголовок Н1</h1>
Обратите внимание, что атрибут-значение в html пишется без пробелов (пробелами отделяются разные атрибуты): атрибут=»значение«.
В конкретном примере с атрибутом style поле «значение» может содержать сколь угодно много свойств объекта (размер шрифта, цвет текста и т.д.). Это так называемые CSS стили.
CSS стили
Вместо того, чтобы писать для каждого тега html свои стили, которые неизбежно будут повторяться в html файле (например, тэг p — параграф — встречается десятки раз на любой странице), было принято решение создать отдельный файл для стилей. Отделить мясо от костей 🙂
Мы можем перенести стили H1 из HTML файла страницы в CSS файл со стилями. В общем виде синтаксис будет такой:
h1 {font-size:50px; color:#555555;}
// или как принято для удобочитаемости:
h1 {
font-size:50px;
color:#555555;
}
То есть мы отбросили атрибут HTML style=»..» и использовали значение атрибута style для задания стилей заголовка H1. Обратим внимание, что в CSS каждое правило заканчивается точкой-с-запятой, а в HTML последнее правило не обязано быть с «;».
Иерархия DOM и каскадные стили
CSS буквально cascade style sheet — каскадная таблицы стилей. Понятие каскадов – или вложенности – объектов верстки связано с DOM (объектно-ориентированная модель страницы).
Что это за муть? Все просто: когда пишется код, одни теги включаются в другие. А поскольку теги, в основном, из двух частей, нужно следить, чтобы эти вторые закрывающие теги не потерялись и всегда стояли ДО закрывающего тега родителя.
В списке основных тегов, что приведен выше, черточками |-|| обозначена вложенность каждого тэга внутри страницы. <html> находится в корне, внутри него содержится <body>, а внутри body — <h1>, <p>, <footer> и пр. Если есть иерархия – значит нужны названия:
- Родители (parent) – элементы, стоящие выше по уровню
- Дочерние элементы (child) – элементы, стоящие ниже по уровню
- Родственные элементы (sibling) — элементы, находящийся на одном уровне
Посмотрите нагляднее на картинке:
Но позвольте: каскадные стили– это же про CSS, а не про HTML! Не совсем.
Между элементами html верстки и их стилями CSS существует неразрывна связь. Заключается она в способе именования CSS правила для отдельного элемента.
CSS селекторы
Само слово селекторы подсказывает, что мы выбираем какой-то элемент (тег) в иерархии html страницы и задаем за него свойства.
Есть три основных вида CSS селекторов:
- .class – cелектор стиля для класса
- #id – селектор с CSS стиля для ID элемента
- body – коренное написание тэга (в данном случае body) – без точки или #. Такая опция доступна не всех html тегов.
То-есть на базовом уровне мы прописывали стили CSS в зависимости от наличия у тэга класса или ID или если это один из корневых тегов (body, h1-h6, p, a..).
Но не всегда удобно возвращаться в html документ и дописывать атрибут с классом/ID для нужных тегов. Поэтому используется принцип каскадности, когда мы сможем назначать стили элемента(ов) в зависимости от родственных связей с вышестоящими/близлежащими элементами.
Пример CSS с селекторами:
Псевдоклассы CSS
Самое интересное начинается с понятием псевдоклассов CSS, которые так часто используется при создании сайтов на WordPress.
Синтаксис псевдо классов – основной класс «:» значение всегда класса (без пробелов между классом, псевдоклассом и двоеточием).
Самый простой пример псевдокласса – это когда ссылка меняет цвет при наведении:
Псевдоклассов существует множество и лучше узнать о них подробнее. Например, :first-child применит стиль CSS к первому дочернему элементу в дереве данного документа, а :last-child — к последнему:
При этом, как видно, в HTML файле никаких классов для элементов списка не задано.
Просто положу это здесь — такие связки могут пригодится, если вы думаете делать отслеживание событий на сайте при помощи GTM:
Иерархия стилей
В срабатывании стилей CSS существует иерархия: преимущество имеет последний стиль, указанный для отдельного элемента HTML:
- нижестоящий файл CSS, если к странице прикреплено больше одного файла CSS через <link> или
- последняя строка внутри файла (ближе к низу страницы)
Также для дочерних элементов применяются CSS стили родителя, если они допустимы для этих дочерних элементов, например, удобно задать стиль шрифта для тега <body> — тогда он распространится на все дочерние элементы H1-H6, p, blockquote, etc.
Редактор и инспектор HTML/CSS
Как и где писать код? Если вы тренируетесь, я рекомендую jsfiddle.net — это бесплатный онлайн редактор, где можно написать кусок HTML, CSS, JS и сразу посмотреть результат. При этом не нужно писать технические части HTML — <html>, <head> — система берет все это на себя.
Также можно править код любого сайта локально (т.е. на конкретной странице, загруженной на вашем компьютере) через инспектор (на маке Cmd+Alt+I). Не забудьте сохранить версию изменений к себе на компьютер, иначе при перезагрузке страницы ваши изменения пропадут.
Десктоп редактор для правки кода — Notepad++. Это самый простой. По сути, тот же текстовый редактор, только с функцией выделения цветом в зависимости от языка файла (.html, .css, .js, .php).
Но мне лично нравится редактор Atom — тоже бесплатный, с приятными по цвету шаблонами кода. Также через плагин к Атому можно подключить FTP доступ к удаленному хостингу (вашему сайту), что дает возможность в реальном времени править и сохранять изменения на сайте. Но этот метод не рекомендую новичкам — иначе легко можно положить сайт так и не разобравшись. А Атом рекомендую 🙂
Пошаговое изучение HTML/CSS
По поводу пошагового изучения основ верстки я сделал обзор неплохих курсов HTML-CSS, среди которых есть и бесплатные. Дополнительно к ним порекомендую группу в ВК @php4all, в которой выкладывается куча видео-курсов по разным языкам программирования (поиск по хештегам в помощь).
А если хотите заглянуть за кулису большого маркетинга с крупными бюджетами, — скачивайте мою закрытую статью, как управлять рекламным бюджетом до 1,5 млн. рублей.
Создание сайтов с нуля
Вам не обязательно начинать с HTML/CSS, если вы хотите создавать сайт с нуля.
Если верстка — пока не для вас, можно заверстать клевую страницу без знаний кода на Вордпресс, используя плагины.
Мой излюбленный метод верстки с параллельным изучением основ HTML — создание лендингов на Webflow. О шагах по изучению я подробнее написал тут.