Урок современной HTML-верстки

Через пару часов вы научитесь создавать современные сайты.

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

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

Структура

Урок 1. Оформляем одноколоночный текст.

• пишем текст
• расставляем абзацы и заголовки
• задаем цвета, шрифты и отступы (color, background-color; font-size, font-famly, line-height; margin)
• учимся использовать таблицы стилей

Урок 2. Инструменты и приёмы

Инструменты: картинки (IMG) ссылки (A) списки (UL и OL) таблицы (TABLE, TR, TD; TH, TBODY, THEAD, TFOOT; COL, CAPTION) бордюры (border) два вида отступов (margin и padding) абсолютное позиционирование (position: absolute) относительное позиционирование (position: relative)

Приёмы: размещение картинки слева или справа от текста центрирование текста (и блоков) буквица несколько колонок (разные способы)

Используем приемы для оформление сайта-примера. (Для примера нарисовать какой-нибудь дизайн!)

Идея: in-line — сокращенная версия каждого приема. Отдельно в каталоге полная версия.

Урок 3. Публикуем нашу работу.

• как работает Интернет
• задаем заголовок окна, ключевые слова, DOCTYPE и пр.
• выбираем хостинг
• покупаем домен
• закачиваем страницу на хостинг

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

Мелочи. В заголовке окна бразуера написано название файла вместо какого-нибудь осмысленного текста. Положено страницам давать список ключевых слов и краткое описание (для поисковых машин).

Хостинг. Сейчас файл находится только у вас на диске, а должен лежать где-нибудь в Интернете, чтобы его мог посмотреть любой желающий, набрав в браузере какой-нибудь адрес вроде «www.vasya-pupkin.ru».

Итак, начнем

Странички, которые вы видите в браузере, — это просто текстовые файлы. Попробуйте прямо сейчас создать в «Блокноте» файл с расширением «.html», написать в него любой текст, сохранить и открыть в браузере. Мой вариант текста:

Я — текстовый файл по имени «web-site-ver-1.html».
Меня только что написал и сохранил Андрей Таранцов.

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

В браузере у меня получилось вот что (web-site-ver-1.html):

Здорово, но это даже отдаленно не напоминает сайт. Чего не хватает? Попробуйте составить список, и сравните его с моим в следующем разделе.

Что должно быть у сайта

Абзацы и заголовки. Я вставил в текст шикарную пустую строку, и первым делом мне бросилось в глаза её отсутствие. Браузер проигнорировал все переводы строки и соединил весь текст в длинный абзац.

Оформление. Мы не задали ни шрифт, ни цвет, ни размер, ни расположение текста, поэтому каждый браузер покажет вашу страницу так, как ему вздумается. Вы же наверняка предпочтете оформить сайт как-нибудь по-своему.

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

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

Мелочи. В заголовке окна бразуера написано название файла вместо какого-нибудь осмысленного текста. Положено страницам давать список ключевых слов и краткое описание (для поисковых машин).

Хостинг. Сейчас файл находится только у вас на диске, а должен лежать где-нибудь в Интернете, чтобы его мог посмотреть любой желающий, набрав в браузере какой-нибудь адрес вроде «www.vasya-pupkin.ru».

Все эти недостатки мы исправим в данном уроке. А из первого недостатка можно сформулировать

Правило . Браузер игнорирует переводы строк и пустые строки, а два (три, четыре) пробела для него всё равно, что один.

Здравствуйте, теги

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

Научимся создавать абзацы при помощи тега <p>. Это выглядит так: «<p>Текст абзаца.</p>», где <p> — открывающий тег, </p> — закрывающий тег, а всё, что между ними, становится отдельным абзацем.

Добавим абзацы к нашему примеру:

<p>Я — текстовый файл по имени «web-site-ver-2.html».
Меня только что написал и сохранил Андрей Таранцов.</p>

<p>Теперь я существую в цифровом мире
и мучаюсь экзистенциальным вопросом:
файл я дрожащий или на браузер право имею?</p>

Результат стал немного лучше (см. web-site-ver-2.html).

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

Многие теги, как и тег <p>, требуют соответствующего закрывающего тега и действуют на часть текста между ними. Например, заключив текст в теги <b>, можно сделать его полужирным, а в теги <i> — курсивным.

Для оформления заголовков есть теги <h1>, <h2>, <h3>, <h4>, <h5> и <h6> (итого шесть уровней заголовков). Они используются аналогично тегу <p>:

<h1>Причинно-следственные связи во Вселенной</h1>

<h2>Посылка</h2>

<p>Я — текстовый файл по имени «web-site-ver-4.html».
Меня только что написал и сохранил <b>Андрей Таранцов.</b></p>

<h2>Результат</h2>

<p>Теперь я существую в цифровом мире
и мучаюсь экзистенциальным вопросом:
<i>файл я дрожащий или на браузер право имею?</i></p>

Наблюдаем (web-site-ver-3.html):

Правило 2. В угловых кавычках пишут теги. Бывают парные теги. Они действуют на текст между открывающим тегом <имя> и закрывающим тегом </имя>.

Правило 3. Абзацы заключаются в теги <p>. Заголовки заключаются в теги <h1>, <h2> и так далее до <h6> (в зависимости от уровня вложенности).

Об обязательных тегах, заголовке окна и кодировке

Что будет, если забыть </p>? Не произойдет ничего страшного, потому что браузеры пытаются выжить при любых ошибках на странице. Браузер знает, что некоторые теги не могут быть вложены друг в друга, поэтому мысленно вставит недостающий </p> перед следующим <p>, <h1> или тому подобным тегом.

Аналогично, многие другие теги, которые являются обязательными, можно без последствий забывать. Например, мы всё это время забывали несколько тегов, которые считаются обязательными для всех веб-страниц. А именно, веб-странице положено быть внутри тега <html>, в который должен быть вложен тег <body>:

<html>
<body>

<h1>Причинно-следственные связи во Вселенной</h1>
…

<p>Теперь я существую в цифровом мире
и мучаюсь экзистенциальным вопросом:
<i>файл я дрожащий или на браузер право имею?</i></p>

</body>
</html>

Добавление этих тегов ровным счетом ничего не дает за исключением того, что наша страница теперь не содержит ошибок.

В тег <html> может быть вложен и еще один тег — <head>. Его содержимое не отображается браузером, зато там можно написать разные крутые вещи. Давайте дадим окну браузера осмысленный заголовок с помощью тега <title>:

<html>
<head>
  <title>Причинно-следственные связи во Вселенной — наш новый сайт</title>
</head>
<body>

<h1>Причинно-следственные связи во Вселенной</h1>
…

</body>
</html>

Любуемся на web-site-ver-4.html:

Раз уж мы добрались до <head>, давайте укажем там кодировку страницы. Как известно, русские (и другие неанглийские) тексты можно записать в файл разными способами, называемыми кодировками. Если кодировку не указать, то браузер попытается угадать её сам, иногда может ошибаться и выводить текст «кракозябликами». (Даже если лично ваш браузер всё угадал правильно, то владельцу другого браузера или посетителю с мобильного телефона может повезти меньше.)

Лучше всегда и везде использовать кодировку, называемую UTF-8. В ней можно писать текст на любом языке мира, и её можно считать кодировкой современного международного Интернета. Однако, если вы работаете в Windows, ваш любимый редактор может предпочитать для русских файлов кодировку CP-1251.

В общем, если вы не хотите, чтобы ваш сайт выглядел так:

…то пишите вот так:

<html>
<head>
  <title>Причинно-следственные связи во Вселенной — наш новый сайт</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
…
</body>
</html>

Здесь мы встретились с непарным тегом <meta>; можно сказать, что он и открывающий, и закрывающий одновременно, что обозначается значком /> на конце. Кроме того, у него есть атрибуты http-equiv и content, задающие дополнительную информацию. Мы еще часто будем встречаться и с непарными тегами, и с атрибутами.

Не будем вдаваться в смысл происходящего в <meta>. Нужно знать, что вместо «utf-8» вам может быть нужно написать «cp-1251», но лучше бы вам всё-таки использовать UTF-8.

Здравствуй, таблица стилей

Раньше веб-страницы оформляли совсем не так, как сейчас. Раньше использовали теги вроде <font>, <center>, <b>, <i>, чтобы задать оформление текста, а располагали материал нужным образом при помощи таблиц (тег <table> — мы к этому еще вернемся): делали большую невидимую таблицу, в ячейки которой помещалось всё содержимое веб-страницы.

Потом люди придумали каскадные таблицы стилей (Cascading StyleSheets, CSS). И вот что клёво:

1. CSS позволяет любому тегу придать любое оформление, какое только захочется.

2. CSS позволяет задавать сложные правила, например, «содержимое всех тегов b, находящихся внутри тегов h1, сделать красным».

3. Умелое применение CSS позволяет располагать всё нужным образом удобнее, чем с помощью таблиц.

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

Обычно таблица стилей хранится в отдельном файле, но её можно поместить и внутри тега <style> на самой веб-странице.

Давайте начнем применение таблиц стилей с задания некоторых цветов:

<html>
<head>
  <title>Причинно-следственные связи во Вселенной — наш новый сайт</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style>
    body { color: #222; background: #eee; }
    h1, h2 { color: #111; }
  </style>
</head>
<body>
…
</body>
</html>

Чтобы расшифровать эту запись, нужно знать, что таблица стилей состоит из набора независимых правил. Каждое правило указывает, что мы оформляем и (в фигурных скобках) как мы это оформляем. «Что оформляем» называется селектором, а «как оформляем» называется стилями. В простейшем случае селектор — просто название тега; в примере выше мы оформили теги <body>, <h1> и <h2>.

Цвета указываются либо по имени (blue, white), либо в шестнадцатеричном формате #rrggbb. Черный — #000000, белый — #ffffff, красный — #ff0000, зелёный — #00ff00, синий — #0000ff. Максимальное значение каждого цвета — ff (то есть 255). Если букв всего три, то они дублируются автоматически, например, серый — '#777' или '#777777'.

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

Дальше, ваш любимый шрифт можно указать стилем «font-family». Проблема в том, что этот шрифт должен уже быть установлен у посетителя, иначе никакого эффекта не будет. Поэтому через запятую обычно указывают несколько шрифтов, надеясь, что какой-нибудь из них найдется:

<style>
    body { color: #222; background: #eee; font-family: Cambria, Georgia, serif; }
    h1, h2 { color: #111; }
</style>

Заканчивается список на крайний случай словом «serif» (любой шрифт с засечками на выбор браузера) или «sans-serif» (любой шрифт без засечек на выбор браузера). Вот совет по выбору набора шрифтов:

Дальше заметим, что по-умолчанию заголовки <h1>, <h2> полужирные, а мы хотим их видеть обычными, поэтому отменим полужирность стилем font-weight: normal:

<style>
    body { color: #222; background: #eee; font-family: Cambria, Georgia, serif; }
    h1, h2 { color: #111; font-weight: normal; }
</style>

Наконец, возьмемся за размеры шрифта. Можно было бы задать каждому тегу свой размер вроде «12pt», и дело с концом. Но современным веб-страницам положено нормально масштабироваться, чтобы пользователь мог делать шрифт помельче или покрупнее. Поэтому пойдем сложным путем и выберем 12-пиксельный основной шрифт так:

<style>
    body { font-size: 75%; color: #222; background: #eee; font-family: Cambria, Georgia, serif; }
    h1, h2 { color: #111; font-weight: normal; }
</style>

Мы задаем базовый шрифт для всего документа в процентах от 16 пикселей (так постановил стандарт). Таким образом, базовый шрифт получился 0,75 • 16px = 12px.

Все остальные шрифты и вертикальные размеры мы меряем по базовому:

<style>
    body { font-size: 75%; color: #222; background: #eee; font-family: Cambria, Georgia, serif; }
    h1, h2 { color: #111; font-weight: normal; }
    h1 { font-size: 3em; }
    h2 { font-size: 2em; }
</style>

Единица измерения «em» означает «высота шрифта». За 1em принимается шрифт, который был у тега-родителя — в данном случае у <body> (а у него, как мы помним, размер шрифта 12px). Мы делаем шрифт <h1> в три раза крупнее (то есть 3 • 12px = 36px), а шрифт <h2> в два раза крупнее (2 • 12px = 24px).

Стиль «line-height» определяет интервал между строками — знакомый всем одинарный, полуторный и т. п. Часто интервал, больший единицы, выглядит шикарно. В частности, давайте выберем полуторный интервал, так что высота строк текста будет 1.5 • 12px = 18px:

<style>
    body { font-size: 75%; line-height: 1.5; color: #222; background: #eee; font-family: Cambria, Georgia, serif; }
    h1, h2 { color: #111; font-weight: normal; }
    h1 { font-size: 3em; }
    h2 { font-size: 2em; }
</style>

Дальше мы делаем то, что делать в общем-то не обязательно и остаётся на выбор дизайнера: мы высоту всех тегов делаем кратной базовой высоте строки (то есть 18px). Благодаря этому строки текста, набранного в несколько колонок, останутся выровненными, даже если там будут присутстовать заголовки, списки и другие нужные вещи. Расставим размеры строк и отступы для наших заголовков:

<style>
    body { font-size: 75%; line-height: 1.5; color: #222; background: #eee; font-family: Cambria, Georgia, serif; }
    h1, h2 { color: #111; font-weight: normal; }
    h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
    h2 { font-size: 2em; margin-bottom: 0.75em; }
</style>

Проследим за размером заголовков, зная, что стиль «margin-bottom» задает отступ после тега:

Всё! Эти вычисления могут выглядеть сложновато, но зато вы теперь знаете, как нужно задавать размеры шрифта на настоящих сайтах. Наша страничка стала еще красивее (web-site-ver-5.html):

Дивы, спаны, классы

Что, если есть немного отличающиеся друг от друга виды заголовков одного уровня? Что, если вы хотите задать оформление для части страницы, которую не обозначишь особым тегом?

Что ж, если что-то не обозначишь тегом, его можно обозначить классом. Например, если длинные заголовки мы бы хотели писать более мелким шрифтом (бредовая идея, но мало ли), можно было бы поступить так:

<html>
<head>
  …
  <style>
  …
  h2 { font-size: 2em; margin-bottom: 0.75em; }
  h2.long { font-size: 1.667em; line-height: 1.8; margin-bottom: 0.9em; }
  </style>
</head>
<body>

<h1>Причинно-следственные связи во Вселенной</h1>

<h2 class="long">Посылка, с которой начинается вся эта история</h2>
…
<h2>Результат</h2>
…
</body>
</html>

Атрибут class, указанный у первого тега <h2>, позволяет сослаться на него из таблицы стилей. В ней классы всегда обознающаются точкой, а селектор «h2.long» означает «тег h2, имеющий класс long». (Мы опять-таки подобрали размеры для h2.long так, чтобы высота всего заголовка была 54px, причем из них 18px приходилось на отступ снизу.)

Заметим, что к первому тегу <h2> применимы сразу несколько правил таблицы стилей, причем правила для h2 и для h2.long конфликтуют. Но преимущество имеет правило для h2.long, потому что оно более специфичное (его селектор имеет больше ограничений). Если бы конфликтовали правила с одинаковым количеством ограничений, выиграло бы то, которое написано последним.

Селектор не обязан содержать имя тега — правило .long применялось бы к любому тегу с классом «long».

Для случаев, когда особые теги излишни, есть два тега, не несущих никакой смысловой нагрузки: <div> и <span>. Тег <div> аналогичен <p> (в том, что отмечает вертикальный кусок текста), а тег <span> аналогичен <b> (в том, что может быть внутри абзаца). Они нужны только для того, чтобы назначать классы кускам текста.

На самом деле смысловые теги вроде <p> и <h1> излишни. Всю страницу можно было бы сделать на дивах и спанах вот таким образом:

<html>
<head>
  <title>Причинно-следственные связи во Вселенной — наш новый сайт</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style>
  body { font-size: 75%; line-height: 1.5; color: #222; font-family: Cambria, Georgia, serif; background: #eee; }
  .header1, .header2 { color: #111; }
  .header1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
  .header2 { font-size: 2em; margin-bottom: 0.75em; }
  .header2.long { font-size: 1.667em; line-height: 1.8; margin-bottom: 0.9em; }
  .bold   { font-weight: bold; }
  .italic { font-style: italic; }
  .para   { margin-bottom: 1.5em; }
  </style>
</head>
<body>

<div class="header1">Причинно-следственные связи во Вселенной</div>

<div class="header2 long">Посылка, с которой начинается вся эта история</div>

<div class="para">Я — текстовый файл по имени «web-site-ver-6.html».
Меня только что написал и сохранил <span class="bold">Андрей Таранцов.</span></div>

<div class="header2">Результат</div>

<div class="para">Теперь я существую в цифровом мире
и мучаюсь экзистенциальным вопросом:
<span class="italic">файл я дрожащий или на браузер право имею?</span></div>

</body>
</html>

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

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

На пути к дизайну

Как расположить два куска текста бок о бок? На этом базовом знании основывается вёрстка сайтов любой сложности. Нам помогут два магических заклинания CSS: float: left и float: right.

Float делает очень простую вещь: заставляет тег прилипнуть в левому (float: left) или правому (float: right) краю, а остальной текст его обтекать. Давайте посмотрим на пример float-test.html:

Эта красота получается совсем просто:

<html>
<head>
  <title>Причинно-следственные связи во Вселенной</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style>
  …
  .left { float: left; font-size: 3em; line-height: 1; width: 1em;
          background: #000; color: #fff; text-align: center; margin-right: 0.1em; }
  </style>
</head>
<body>

<div class="left">Т</div><p>еперь я существую в цифровом мире
и мучаюсь экзистенциальным вопросом:
<i>файл я дрожащий или на браузер право имею?</i></p>

</body>
</html>

Как видно, первую букву «Т» мы выделили в отдельный <div> с классом left. Мы заставили его «выпасть из текста и прижаться к левому краю» (float: left), задали шрифт высотой в две строки (высота нормальной строки у нас 1.5em из-за полуторного интервала, значит две строки — это 3em), задали высоту строки равной высоте шрифта (чтобы лишнее пустое место не выпирало вверх и вниз), задали ширину, равную высоте строки (1em, ибо размер шрифта уже изменился и ширина измеряется в em'ах нового размера), центрировали текст внутри <div>'а (text-align: center), написали его белым по чёрному и задали небольшой отступ справа, чтобы текст не залазил на квадрат (margin-right: 0.1em).

О-па, мы сделали буквицу.

Здесь хорошо видно, как работает float: он «отталкивает» текст от края, но когда плавающий объект заканчивается, текст снова занимает всю ширину. При этом по вертикали плавающий <div> и идущий вслед за ним <p> начинаются на одном уровне.

Здесь также можно заметить основной недостаток float'а: приходится указывать ширину. Правда, эту ширину можно указать в процентах от родителя, так что, не зная ширины, можно выкрутиться, сделав две колонки по 50%.

Настало время разместить текст в две колонки несколькими способами.

Две колонки, способ первый: float + margin

Этот способ часто применяется для размещения слева (или справа) навигации или какой-нибудь другой колонки фиксированной ширины. Мы к основной колонке добавляет отступ (margin), на место которого «приплывает» float:

<html>
<head>
  …
  <style>
  h1, h2 { margin: 0px; padding: 0px; }
  body { … }
  h1, h2 { … }
  h1 { … }
  h2 { … }
  .left-column { float: left; width: 200px; }
  .main-column { margin-left: 220px; }
  </style>
</head>
<body>

<h1>Причинно-следственные связи во Вселенной</h1>

<div class="left-column">
<h2>Посылка</h2>
<p>Я — текстовый файл по имени…</p>
</div>

<div class="main-column">
<h2>Результат</h2>
<p>Теперь я существую в цифровом мире…</p>
</div>

</body>
</html>

Левая колонка cделана плавающей и шириной 200px. У правой колонки сделан слева зазор 220px, чтобы хватило места для левой колонки и еще немного осталось пустого. Результат вполне стоит усилий (web-site-ver-7.html):

Обратим еще внимание на первую жирную строчку. Она сбрасывает все отступы, которые по-умолчанию мог назначить заголовкам браузер. (Padding — это тоже отступ, только он, например, зарисовывается фоновым цветом, в отличие от margin'а.)

Зачем вообще нужен отступ у правой колонки? Потому что левая колонка может оказаться короче, а мы не хотим, чтобы при этом правая колонка залезла на место левой.

Конечно же, таким способом можно устроить и три колонки, левая и правая из которых будут фиксированной ширины (а у средней придется поставить margin-left и margin-right).

Две колонки, способ второй: float + float

Предлагается назначить float: left обеим колонкам. Прелесть этого способа в том, что он позволяет легко создать не только две или три колонки, а любое их количество. Он основан на том, что подряд идущие плавающие блоки с одинаковым float разместятся сбоку друг от друга, если им хватит места.

Конечно, нужно, чтобы места колонкам хватило, а иначе они окажутся друг под другом. Поэтому или сделайте ширину страницы фиксированной, или укажите ширину колонок в процентах.

Сайт будет выглядеть почти идентично предыдущей картинке, а вот код несколько другой:

<html>
<head>
  …
  <style>
  h1, h2 { margin: 0px; padding: 0px; }
  body { … }
  h1, h2 { … }
  h1 { … }
  h2 { … }
  .container   { width: 500px; }
  .left-column { float: left; width: 200px; margin-right: 20px; }
  .main-column { float: left; width: 250px; }
  </style>
</head>
<body>

<div class="container">
<h1>Причинно-следственные связи во Вселенной</h1>

<div class="left-column">
<h2>Посылка</h2>
<p>Я — текстовый файл по имени…</p>
</div>

<div class="main-column">
<h2>Результат</h2>
<p>Теперь я существую в цифровом мире…</p>
</div>
</div>

</body>
</html>

Ширина задана у обеих колонок, кроме того, отступ между ними сделан отдельно margin'ом. Вся страница заключена в <div class="container">, чтобы сделать её фиксированной ширины. (Теперь, если окошко браузера окажется слишком узким, появится горизонтальная прокрутка, но колонки останутся сбоку друг от друга, как им положено.)

Единственное отличие страницы от предыдущей — то, что у неё ограничена ширина (web-site-ver-8.html):

Раз уж мы сделали страницу фиксированной ширины, давайте выровняем её всю по центру. Это до неприличия просто:

<style>
…
.container   { width: 500px; margin-left: auto; margin-right: auto; }
…
</style>

(Результат см. на web-site-ver-8c.html.)

Правило: текст внутри блока выравнивается стилем text-align: center, но блоки внутри других блоков (например, div.container внутри страницы) выравниваются с помощью назначения левого и правого отступа auto.

Сеточная вёрстка

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

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

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

С горизонталями мы уже имели дело, настраивая размеры шрифта, высоту строк и размер отступов так, чтобы высота всех элементов страницы была кратна 18px. Это и есть горизонтальная сетка с шагом 18px. В принципе, никто не заставляет вас делать шаг сетки равным высоте строки. Мы могли бы взять сетку с шагом 6px, тогда границы строк всё равно на неё бы ложились, а все элементы страницы нужно было бы делать высотой, краткой 6px.

Вертикали обычно проводят иначе: разбивают ширину страницы на одинаковые колонки с отступами между ними. Например, пусть у вас страница будет шириной 950px (вполне разумная на сегодняшний день величина). Поделим её на 24 колонки по 30px каждая с 10px промежутками между ними. Все элементы страницы должны занимать некоторое количество колонок в ширину. (Скажем, картинка шириной 6 колонок будет иметь размер 6 • 30px + 5 • 10px = 230px.)

Всю страницу обрамляют в <div class="container">, который фиксирует её ширину (и выравнивает по центру). Дальше реализуем колонки наиборее сподручным способом (где-то удобнее все колонки сделать через float: left, где-то удобнее просто отправить направо картинку при помощи float: right).

Чтобы выровнять нижний край колонок (и, например, писать ниже на всю ширину или начать другие колонки), их заключают в общий <div> и применяют к нему магический класс clear:

.clear { display:block; }
.clear:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
* html .clear { height:1%; }

Этот CSS-код содержит отдельный хак для Internet Explorer (знаменитый height: 1%, устраняющий многие баги IE) и отдельных хак для других браузеров (добавление невидимой точки к <div>'у, чтобы тот охватил всех своих float'ов). Не пытайтесь их понять.

Я не буду здесь воспроизводить пример сеточной вёрстки, потому что он уже есть: пример из Blueprint CSS. В исходнике той страницы можно увидеть, как подключаются внешние таблицы стилей. Они используют Blueprint — готовую таблицу стилей, определяющую множество готовых классов для быстрой вёрстки.

Если вы всё еще не поняли, как выглядит сетка, загляните сюда: тест разных тегов с нарисованной сеткой .

Еще несколько вещей

Стили CSS можно написать прямо в самом теге, например:

<div style="text-align: center">Курочка-ряба</div>

— не следует этим злоупотреблять, однако для разовых стилей вполне сойдёт.

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

Что дальше?

Найдите хороший редактор, который будет предлагать вам варианты тегов и стилей по мере ввода. Я рекомендую Aptana.

Вы еще не знаете тегов для таблиц и списков, а также много стилей CSS (например, для отрисовки границ).