Итак, продолжением цикла будет статья, посвященная языку разметки - HTML. Рекомендую ознакомиться с первой статьей Веб для начинающих. Там разложена по полочкам заготовка для верстки документа, которую я использую :)
<!DOCTYPE html>
<html>
<head>
<title>Заголовок</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
</head>
<body></body>
</html>
Давайте пристально посмотрим на эту картинку. Чтобы сверстать ее, нужно заранее понять, какие здесь есть блоки и элементы.
- Верхняя строка. На ней располагаются логотип, номер телефона и меню.
- Середина экрана. На ней заголовок, подзаголовок, еще строчка текста и большая кнопка.
- Большой фон под всеми остальными элементами.
В целом, не так уж много всего, как раз для демонстрации :)
Все html-элементы располагаются внутри тега <body>. Наиболее часто встречающиеся html-теги (напишу их без угловых скобок):
- блочные: div, main, header, footer, nav, section, article, aside. Кроме div, все эти теги требуют соблюдения семантики. Main - здесь основное содержимое документа, header - "шапка" всего сайта или раздела, footer - "подвал", то есть нижняя часть, nav - навигация, обычно здесь меню, section и article обозначают разделы контента. Article состоит из нескольких section, или наоборот :) И aside - боковая панель, "сайдбар". Ну а div - элемент универсальный, подойдет для любого блока, если вышеперечисленные не подходят. Но его нельзя использовать для элементов, имеющих определенный смысл, это не семантический тег.
- элементы, имеющие некоторое содержание: img, video, audio, iframe, canvas, link, style, script, figure, svg. В основном с ним все понятно по названиям, но про некоторые поясню: iframe - для встраивания документа с другой страницы, canvas - область для рисования с помощью функций JS, link - подключение какого-либо ресурса (иконка сайта, файл стилей, шрифт, RSS-лента), style - для встраивания стилей CSS и script - для подключения либо встраивания JS. Svg - для векторной графики.
- элементы для оформления текстового контента: p, ul, ol, span, table, em, strong, br, h1, h2,..., h6, span. Среди элементов такого типа много устаревших, я их здесь перечислять не буду :) В этом списке все, кроме span - семантические элементы. Span-ом можно выделить кусочек текста, чтобы написать его, к примеру, другим цветом или шрифтом. Но если этому кусочку текста нужно придать какой-то особый смысл, то нужно пользоваться тегами со смыслом - strong, em. Табличные данные должны оформляться тегом table, а заголовки h1-h6 должны использоваться только в контентной области страницы вместе с текстом, а не в любом месте, где нужен крупный жирный шрифт.
- элементы формы - form, input, textarea, button, select, label. На них я сейчас заострять внимание не буду, если сильно интересно, гугл и яндекс всегда под рукой :)
- и отдельно упомяну про ссылки - тег <a>. Он довольно функциональный, дает возможность сделать не просто текстовую ссылку, а ссылку-картинку, ссылку на звонок телефона, ссылку для отправки имейла, якорь на определенный абзац текста. На самом деле можно самостоятельно зарегистрировать любой протокол с помощью JS, и ваши ссылки могут принять забавный вид (подробнее здесь):
<a href="web+burger:cheeseburger">this</a>
Есть один важный нюанс: элементы делятся на блочные (block) и строчные, с вашего позволения буду называть их инлайновыми (inline), а также есть еще микс этих свойств - inline-block. Блочные элементы по умолчанию растягиваются на всю ширину, им можно задать блочные стили типа width и height, а инлайновые подобны тексту - ширина у них ровно такая, сколько контента в теге, такие элементы просто идут один за другим и обтекают блоки. Элементы inline-block сочетают в себе качества тех и других: им можно задать ширину, высоту, отступы, и они будут идти по тексту рядом с буквами. Важно: в инлайновые элементы нельзя вкладывать блочные! Ну то есть нельзя написать
<a href="#"><div>Я томат</div></a>
потому что <a> - инлайновый, а <div> - блочный. Остальные сочетания допустимы.
Чтобы задать элементам необходимое оформление, используются атрибуты тегов class и id, а можно и вовсе приписать CSS-стиль целому тегу. Id и class можно задать с помощью любых символов, кроме пробелов. Если подходить к этому вопросу формально, то можно все. Но есть и правила хорошего тона - для задания стилей использовать только класс, названный понятно. Суть id в том, что его значение должно быть уникально в рамках одной страницы. А вот класс можно использовать сколько угодно раз. Более того, есть очень удобная методология именования классов, разработанная в Яндексе - БЭМ, что значит "Блок - Элемент - Модификатор". Почитайте вот здесь: Бэм. Быстрый старт.
Итак, весь html у нас будет состоять из блоков, которые будут названы различными классами. Примерная структура для приведенного в начале статьи дизайна (на самом деле почти полная):
<header class="header">
<div class="header__logo logo"><img src="logo.svg" alt="" /></div>
<div class="header__phone"><a href="tel:+78121234567">+7 (812) 123-45-67</div>
<nav class="header__nav">
<ul class="menu">
<li class="menu__item"><a href="#">Подарки</a></li>
<li class="menu__item" ><a href="#">Как мы работаем</a></li>
<li class="menu__item" ><a href="#">Отзывы</a></li>
<li class="menu__item" ><a href="#">Контакты</a></li>
</ul>
</nav>
</header>
<div class="welcome">
<div class="welcome__container">
< h1 class="welcome__head">Доставка подарков</h1>
<div class="welcome__subhead">Приносим радость вашим близким прямо в руки!</div>
<div class="welcome__warning">Анонимность гарантируем! Если вы, конечно, хотите этого.</div>
<div class="welcome__button-container">
<button class="welcome__button button">Собрать подарок</button>
</div>
</div>
</div>
Как видите, здесь много тегов <div>, но у меня есть оправдание - здесь почти нет блоков, имеющих специфическое значение. Также в приведенном листинге у некоторых элементов отсутствуют классы, но поверьте, они будут в готовом варианте, а здесь я просто не хочу слишком напрягать вас.. хотя боюсь, что вы уже напуганы :) Следующая статья пояснит нюансы этой разметки и расскажет о селекторах! У вас будет время ознакомиться с материалами по ссылкам :)
P.S. В интернете есть тонны руководств для начинающих, однако многие из них устарели (2014 год - уже старая статья!), многие рассказывают лишь о базовых возможностях, а многие сразу уходят в глубины профессии с нуля. Я же познакомлю вас с современными тенденциями в достаточной мере для верстки небольшого сайта. Но предупреждаю - материала все равно будет немало, и вам придется самим прочитать многое на досуге!
