🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
<img>
<p>
Даблдекер на знаке.
<a>
Транспорт Лондона
</a>
</p>
<img>
<p>
Даблдекер на знаке.
<a href="https://tfl.gov.uk/info-for/suppliers-and-contractors/design-standards">
Транспорт Лондона
</a>
</p>
<img src="https://bureau.ru/projects/book-html/files/london-bus.png">
<p>
Даблдекер на знаке.
<a href="https://tfl.gov.uk/info-for/suppliers-and-contractors/design-standards">
Транспорт Лондона
</a>
</p>
<img src="..."
width="300px"
height="80px">
<p>
Даблдекер на знаке.
<a href="...">
Транспорт Лондона
</a>
</p>
<img src="..."
width="300px"
height="80px"
style="transform: rotate(-5deg) translateY(-3px)">
<p style="font-weight: 100">
Даблдекер на знаке.
<a href="...">
Транспорт Лондона
</a>
</p>
Сверстаем картинку и подпись к ней со ссылкой на источник изображения.
Атрибут href задаёт адрес ссылки.
Чтобы картинка появилась, нужно указать атрибут src.
Чтобы настроить размеры картинки, используют атрибуты width и height.
Самый продвинутый атрибут — style, в нём можно настроить что угодно. О нём расскажем позже.
Все атрибуты ХТМЛ. МДН
Даблдекер на знаке. Транспорт Лондона
Даблдекер на знаке. Транспорт Лондона
Даблдекер на знаке. Транспорт Лондона
Даблдекер на знаке. Транспорт Лондона
Даблдекер на знаке. Транспорт Лондона
<img>
<p>
Даблдекер на знаке.
<a>
Транспорт Лондона
</a>
</p>
<img>
<p>
Даблдекер на знаке.
<a href="https://tfl.gov.uk/info-for/suppliers-and-contractors/design-standards">
Транспорт Лондона
</a>
</p>
<img src="https://bureau.ru/projects/book-html/files/london-bus.png">
<p>
Даблдекер на знаке.
<a href="https://tfl.gov.uk/info-for/suppliers-and-contractors/design-standards">
Транспорт Лондона
</a>
</p>
<img src="..."
width="300px"
height="80px">
<p>
Даблдекер на знаке.
<a href="...">
Транспорт Лондона
</a>
</p>
<img src="..."
width="300px"
height="80px"
style="transform: rotate(-5deg) translateY(-3px)">
<p style="font-weight: 100">
Даблдекер на знаке.
<a href="...">
Транспорт Лондона
</a>
</p>
Сверстаем картинку и подпись к ней со ссылкой на источник изображения.
Атрибут href задаёт адрес ссылки.
Чтобы картинка появилась, нужно указать атрибут src.
Чтобы настроить размеры картинки, используют атрибуты width и height.
Самый продвинутый атрибут — style, в нём можно настроить что угодно. О нём расскажем позже.
Все атрибуты ХТМЛ. МДН
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>
Портфолио Остапа Бендера
</title>
<!--
Название страницы.
Его мы видим в заголовке вкладки
-->
</head>
<body>
<h1>Портфолио Остапа Бендера</h1>
<!-- Заголовок первого уровня -->
<section>
<!--
section объединяет элементы в «главу» текста
-->
<h2>Кто такой? Чем знаменит?</h2>
<!-- Заголовок второго уровня -->
<p class="outstanding">
Я великий комбинатор,
идейный борец за денежные знаки.
</p>
<!-- Абзац -->
<p>
Кроме того, я знаю
<a href="/projects/400">
четыреста
сравнительно честных
способа отъёма денег</a>.
</p>
</section>
<section>
<h2>Аферы</h2>
<p>
В городе Арбатове
выдал себя за сына
лейтенанта Шмидта и получил
от председателя горисполкома
небольшую материальную помощь.
</p>
<!-- И так далее -->
</section>
</body>
</html>
Служебные теги
ХТМЛ‑странице нужен обязательный обвес: doctype, html, head и body.
doctype — заклинание, без которого браузер может криво показать страницу. Это стандартный текст, который меняется раз в 20 лет.
head — «голова» страницы. Её содержимое не отображается напрямую на странице, но используется в специальных местах: в заголовке окна страницы, в закладках, в выдаче поисковиков и соцсетях.
body — «тело», само содержание страницы, которое мы увидим в браузере.
Чтобы посмотреть код любой страницы в браузере, щёлкните правой кнопкой мыши и выберите «Просмотр кода страницы» (View Page Source). Либо с клавиатуры —
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>
Портфолио Остапа Бендера
</title>
<!--
Название страницы.
Его мы видим в заголовке вкладки
-->
</head>
<body>
<h1>Портфолио Остапа Бендера</h1>
<!-- Заголовок первого уровня -->
<section>
<!--
section объединяет элементы в «главу» текста
-->
<h2>Кто такой? Чем знаменит?</h2>
<!-- Заголовок второго уровня -->
<p class="outstanding">
Я великий комбинатор,
идейный борец за денежные знаки.
</p>
<!-- Абзац -->
<p>
Кроме того, я знаю
<a href="/projects/400">
четыреста
сравнительно честных
способа отъёма денег</a>.
</p>
</section>
<section>
<h2>Аферы</h2>
<p>
В городе Арбатове
выдал себя за сына
лейтенанта Шмидта и получил
от председателя горисполкома
небольшую материальную помощь.
</p>
<!-- И так далее -->
</section>
</body>
</html>
Чтобы посмотреть код любой страницы в браузере, щёлкните правой кнопкой мыши и выберите «Просмотр кода страницы» (View Page Source). Либо с клавиатуры —
Служебные теги
ХТМЛ‑странице нужен обязательный обвес: doctype, html, head и body.
doctype — заклинание, без которого браузер может криво показать страницу. Это стандартный текст, который меняется раз в 20 лет.
head — «голова» страницы. Её содержимое не отображается напрямую на странице, но используется в специальных местах: в заголовке окна страницы, в закладках, в выдаче поисковиков и соцсетях.
body — «тело», само содержание страницы, которое мы увидим в браузере.
Знакомство с ЦСС
ХТМЛ — это текст, который описывает содержимое страницы, а ЦСС — это текст, который описывает внешний вид этого содержимого. ХТМЛ отвечает на вопрос что показать, а ЦСС — как показать.
ЦСС‑код можно писать прямо внутри ХТМЛ‑файла в особом теге style. Сам код наглядный, его легко читать и понимать. Сначала пишут, какой элемент стилизовать, затем в фигурных скобках — свойства элемента, как он должен выглядеть.
Например, так можно задать заголовку и абзацам цвет, шрифт, кегль и интерлиньяж. Названия свойств и их значения говорят сами за себя:
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Прекрасный Хайош-Байа, Венгрия</title>
<!--
Все стили из тега style применятся к странице
-->
<style>
h1 {
font-family: Helvetica;
font-size: 48px;
line-height: 52px;
color: rgb(6 85 128);
}
p {
font-size: 20px;
line-height: 24px;
font-family: Times;
}
/*
В ЦСС куча свойств, с большинством мы познакомимся в книге. Кстати, так выглядит ЦСС-комментарий — текст между слешей и звёздочек не видно на странице, только в коде
*/
</style>
</head>
<body>
<h1>Прекрасный Хайош-Байа, Венгрия</h1>
<p>Горизонт ожидания…</p>
<p>Шиллер утверждал…</p>
</body>
</html>
Попробуйте скопировать код и поэкспериментировать со свойствами. Например, изменить кегли, шрифты и цвета
Знакомство с ЦСС
ХТМЛ — это текст, который описывает содержимое страницы, а ЦСС — это текст, который описывает внешний вид этого содержимого. ХТМЛ отвечает на вопрос что показать, а ЦСС — как показать.
ЦСС‑код можно писать прямо внутри ХТМЛ‑файла в особом теге style. Сам код наглядный, его легко читать и понимать. Сначала пишут, какой элемент стилизовать, затем в фигурных скобках — свойства элемента, как он должен выглядеть.
Например, так можно задать заголовку и абзацам цвет, шрифт, кегль и интерлиньяж. Названия свойств и их значения говорят сами за себя:
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Прекрасный Хайош-Байа, Венгрия</title>
<!--
Все стили из тега style применятся к странице
-->
<style>
h1 {
font-family: Helvetica;
font-size: 48px;
line-height: 52px;
color: rgb(6 85 128);
}
p {
font-size: 20px;
line-height: 24px;
font-family: Times;
}
/*
В ЦСС куча свойств, с большинством мы познакомимся в книге. Кстати, так выглядит ЦСС-комментарий — текст между слешей и звёздочек не видно на странице, только в коде
*/
</style>
</head>
<body>
<h1>Прекрасный Хайош-Байа, Венгрия</h1>
<p>Горизонт ожидания…</p>
<p>Шиллер утверждал…</p>
</body>
</html>
Попробуйте скопировать код и поэкспериментировать со свойствами. Например, изменить кегли, шрифты и цвета
Выборочная стилизация, классы
Если стилизовать теги по названию, стили применятся ко всем таким тегам. Если один раз указать цвет для p, все абзацы на странице изменят цвет:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Ледник Акселя Хейберга</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<h1>Ледник Акселя Хейберга</h1>
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
</body>
</html>
Стилизовать по названию тега — глобальный приём. Он подойдёт для описания базовых стилей страницы и элементов, но не подойдёт для выборочной стилизации. Например, когда нужно выделить цветом один абзац из четырёх.
Чтобы точнее указывать на нужные элементы, используют классы — идентификаторы, к которым привязаны стили. В ХМТЛ класс пишут в одноимённом атрибуте, затем в ЦСС к классу привязывают стили. Эти стили применятся ко всем элементам страницы с подходящим классом. В ЦСС имя класса пишут через точку, а в ХТМЛ — без точки:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Ледник Акселя Хейберга</title>
<style>
.highlighted {
color: red;
}
</style>
</head>
<body>
<h1>Ледник Акселя Хейберга</h1>
<p>…</p>
<p class="highlighted">…</p>
<p>…</p>
<p class="highlighted">…</p>
</body>
</html>
Классы удобно использовать повторно. Один класс можно повесить на сколько угодно тегов, применив стили ко всем из них. Часто делают универсальные служебные классы, чтобы использовать их в разных местах сайта. Например, класс для выделения цветом, как в примере выше.
Выборочная стилизация, классы
Если стилизовать теги по названию, стили применятся ко всем таким тегам. Если один раз указать цвет для p, все абзацы на странице изменят цвет:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Ледник Акселя Хейберга</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<h1>Ледник Акселя Хейберга</h1>
<p>…</p>
<p>…</p>
<p>…</p>
<p>…</p>
</body>
</html>
Стилизовать по названию тега — глобальный приём. Он подойдёт для описания базовых стилей страницы и элементов, но не подойдёт для выборочной стилизации. Например, когда нужно выделить цветом один абзац из четырёх.
Чтобы точнее указывать на нужные элементы, используют классы — идентификаторы, к которым привязаны стили. В ХМТЛ класс пишут в одноимённом атрибуте, затем в ЦСС к классу привязывают стили. Эти стили применятся ко всем элементам страницы с подходящим классом. В ЦСС имя класса пишут через точку, а в ХТМЛ — без точки:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Ледник Акселя Хейберга</title>
<style>
.highlighted {
color: red;
}
</style>
</head>
<body>
<h1>Ледник Акселя Хейберга</h1>
<p>…</p>
<p class="highlighted">…</p>
<p>…</p>
<p class="highlighted">…</p>
</body>
</html>
Классы удобно использовать повторно. Один класс можно повесить на сколько угодно тегов, применив стили ко всем из них. Часто делают универсальные служебные классы, чтобы использовать их в разных местах сайта. Например, класс для выделения цветом, как в примере выше.
Лайфхак: как называть классы
Чтобы код было проще читать и понимать, имена классов делают наглядными.
В именах избегают случайных наборов букв, аббревиатур, сокращений и всего, что может как‑либо запутать.
Классы не принято называть по‑русски латиницей. Такие имена тяжело читать, а некоторые русские буквы можно написать латиницей по‑разному, что увеличивает вероятность ошибок.
/* Плохо */
.t { }
.txthl { }
.informaciya { }
.informacia { }
.informacija { }
/* Лучше */
.title { }
.highlight { }
.info { }
Если имя состоит из нескольких слов, лучше визуально их разделить. Два самых популярных стиля: разделять слова дефисами или заглавными буквами.
По именам с дефисами легче перемещаться с клавиатуры и выделять отдельные слова двойным кликом, а стиль с заглавными используется во многих языках программирования, он привычнее опытным разработчикам и гармоничнее смотрится рядом с кодом на других языках.
/* Каша, тяжело читать */
.pagetitle { }
.pageauthor { }
/* Структура, легко читать */
.page-title { }
.page-author { }
.pageTitle { }
.pageAuthor { }Стиль‑через‑дефис называют кебабом, потому что похоже на мясо на шампуре. А стильЧерезЗаглавные — кэмелом, потому что похоже на горбы верблюда.
Совет. Чтобы в текстовом редакторе перемещаться по отдельным словам в именах с дефисами, используйте Option или Alt со стрелками влево и вправо. Чтобы выделять слова, дополнительно зажимайте Shift
Лайфхак: как называть классы
Чтобы код было проще читать и понимать, имена классов делают наглядными.
В именах избегают случайных наборов букв, аббревиатур, сокращений и всего, что может как‑либо запутать.
Классы не принято называть по‑русски латиницей. Такие имена тяжело читать, а некоторые русские буквы можно написать латиницей по‑разному, что увеличивает вероятность ошибок.
/* Плохо */
.t { }
.txthl { }
.informaciya { }
.informacia { }
.informacija { }
/* Лучше */
.title { }
.highlight { }
.info { }
Если имя состоит из нескольких слов, лучше визуально их разделить. Два самых популярных стиля: разделять слова дефисами или заглавными буквами.
По именам с дефисами легче перемещаться с клавиатуры и выделять отдельные слова двойным кликом, а стиль с заглавными используется во многих языках программирования, он привычнее опытным разработчикам и гармоничнее смотрится рядом с кодом на других языках.
/* Каша, тяжело читать */
.pagetitle { }
.pageauthor { }
/* Структура, легко читать */
.page-title { }
.page-author { }
.pageTitle { }
.pageAuthor { }Стиль‑через‑дефис называют кебабом, потому что похоже на мясо на шампуре. А стильЧерезЗаглавные — кэмелом, потому что похоже на горбы верблюда.
Совет. Чтобы в текстовом редакторе перемещаться по отдельным словам в именах с дефисами, используйте Option или Alt со стрелками влево и вправо. Чтобы выделять слова, дополнительно зажимайте Shift