HTML и CSS

В настоящее время одним из самых распространённых способов создания всевозможных пользовательских интерфейсов стала связка технологий HTML/CSS/Javascript, изначально разработанных для описания интерактивных гипертекстовых документов в сети Интернет.

HTML отвечает за логическую структуру документа, CSS – за внешний вид, Javascript – за нетривиальную интерактивность. В этой главе речь пойдёт только о визуальном оформлении, поэтому Javascript пока останется за кадром.

Скелет HTML-документа

HTML-документ состоит из текста и разметки. Разметка оформляется при помощи тегов:

<название_тега аттрибуты>содержимое</название_тега>

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

<!-- это обычный многострочный комментарий -->

Приведём общую структуру HTML-документа:

<!DOCTYPE html>

<html>
  <head>
    <!-- здесь находится общая информация о документе -->
  </head>
  
  <body>
    <!-- здесь находится сам документ -->
  </body>
</html>

Теги <html>, <head> и <body> не являются обязательными. Если их не ставить, они расставляются автоматически. Например, <body> ставится перед первым тегом, являющимся недопустимым внутри <head>.

Заголовок HTML-документа

Внутри тега <head> настоятельно рекомендуется указывать хотя бы две вещи: название документа (отображается браузером как название окна или вкладки) и кодировку. Делается это так:


<title>Вася не любит суп</title>
<meta charset="utf8">   <!-- У тега meta нет парного закрывающего -->

Типографские теги

Типичный текст состоит в основном из заголовков и абзацев. Каждый абзац рекомендуется заключать в тег <p>. Стоит отметить, что HTML воспринимает любые последовательности пробелов как одиночный пробел, поэтому выделить абзац только лишь при помощи переносов строки не удастся.

Для заголовков есть теги <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Различаются они размером текста.

Внутри текста некоторые его куски можно выделять курсивом (теги <i> и <em>) или жирным шрифтом (теги <b> и <strong>). Какой именно тег из каждой пары использовать – обычно дело вкуса. Де факто <i> ничем не отличается от <em>, а <b> – от <strong>.

Если требуется перенос на следующую строчку, можно воспользоваться тегом <br>. Если требуется символ, отсутствующий на клавиатуре, можно либо его вставить в текст при помощи средств, предоставляемых ОС или текстовым редактором (при условии, что кодировка документа поддерживает такие символы), либо воспользоваться специальной последовательностью символов. Например, знак «тире» можно поставить буквосочетанием —, а амперсанд – буквосочетанием &.

Структурные теги

Основными строительными блоками для HTML-документов являются теги <div> и <span>. С ними не связано никакого оформления: оно полностью настраивается при помощи CSS. Тег <span> используется внутри текстовых тегов типа <p>, тег <div> – в остальных местах (аккуратно: <div> внутри <p> недопустим; браузер имеет право изменить подобную разметку).

Обычно каждому тегу <div> или <span> назначается идентификатор или класс. Например, так:

<div id="beginning" class="title">История про Васю</div>

<div class="header">Вася спрятал суп из холодильника</div>

<div class="text">Вася идёт гулять. У него это <span class="emph large">не очень</span> получается.</div>

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

Стили

Визуальное оформление задаётся при помощи языка CSS. Использовать его можно в одном из трёх мест: внешние файлы, подключаемые в разделе <head> при помощи тега <link>; внутри тега <style>, который разрешается использовать внутри тега <head>; ограниченным образом – как значение аттрибута style произвольного тега.

Мы будем использовать тег <style>. Пример CSS-документа:

/* оформление элемента с идентификатором beginning */
#beginning {
  font-size: 4rem;
  background: rgb(200,200,200);
  text-align: center;
}

/* оформление элементов с классом header */
.header {
  margin-top: 10px;
  font-size: 2rem;
  margin-bottom: 5px;
}

.large {
  font-size: 1.5em;
}

.text {
  margin-top: 5px;
  margin-bottom: 5px;
}

.emph {
  font-style: italic;
  font-weight: bold;
}

Краткий экскурс в HTML и CSS можно получить на сайте W3Schools. Далее будут перичислены наиболее полезные CSS-свойства:

Расположение элемента: position, display.
Отступы: margin (внешний), padding (внутренний).
Фон: background.
Граница: border, border-radius.
Тени: box-shadow, text-shadow.
Шрифт: font-family, font-size, font-style, font-weight.

Также рекомендуется прочитать про Flexbox (display: flex;), облегчающий задачу расположения элементов внутри других.

Пример странички

Пример несложной странички можно посмотреть по ссылке.