🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Лайфхак: песочницы для кода
Если не хочется писать код в файлах, можно делать это на одном из множества сайтов‑песочниц. На таких сайтах есть редактор и окошко с результатом вёрстки, который обновляется в реальном времени при изменении кода.
Песочницы подойдут для тренировки, быстрой проверки гипотез или чтобы поделиться кодом с другими людьми. Запустить в песочнице полноценный сайт не получится.
Самые популярные и простые в освоении песочницы: Кодпен и Код Сэндбокс
Лайфхак: песочницы для кода
Если не хочется писать код в файлах, можно делать это на одном из множества сайтов‑песочниц. На таких сайтах есть редактор и окошко с результатом вёрстки, который обновляется в реальном времени при изменении кода.
Песочницы подойдут для тренировки, быстрой проверки гипотез или чтобы поделиться кодом с другими людьми. Запустить в песочнице полноценный сайт не получится.
Самые популярные и простые в освоении песочницы: Кодпен и Код Сэндбокс
Теги
Чтобы структурировать и оформить страницу, её размечают языком ХТМЛ.
ХТМЛ‑разметка состоит из контейнеров с содержимым — тегов. Текст помещают внутрь тега, между его открывающей и закрывающей частями:
<h1>Заголовок</h1>
<p>Текст абзаца.</p>
<p>Текст второго абзаца.</p>
Просто отбить один абзац от другого энтерами, как в Ворде, не получится — браузеры воспримут эти энтеры как пробелы.
Название тега отражает его смысл. Например, h1 — heading 1 — заголовок первого уровня.
Теги можно вкладывать друг в друга. Например, сделать жирный текст внутри абзаца или пункты внутри списка:
<p>По-настоящему <b>важные принципы</b>:</p>
<ul>
<li>Не планировать впритык</li>
<li>Сделать значит сдать</li>
<li>Флекс — всегда боль</li>
</ul>
Есть теги, которые не нужно закрывать и в которые нельзя ничего вложить. Например, тег переноса строки br:
<h1>
Лев Николаевич Толстой. <br>
Жизнь и взгляды
</h1>
Не закрываются теги картинок и разных интерактивных элементов: видео, полей ввода, кнопок. Все эти элементы мы разберём дальше в книге.
Ещё в ХТМЛ есть комментарии. Это специальный текст, который не будет видно на странице, только в коде. Разработчики используют комментарии в качестве подсказок себе и другим людям, работающим с кодом.
Комментарии пишут внутри конструкции <!-- … -->, это позволяет удобно прятать любые теги — достаточно дописать восклицательный знак и дефисы в начале и конце тега и он превратится в комментарий, пропадёт со страницы, при этом оставшись в коде. На языке разработчиков это называется «закомментить» — спрятать кусок вёрстки.
<p>Автор: Галина Игнатова</p>
<!-- Менять код только с разрешения главреда! -->
<p>Издание «Валенсия», код агента 348187</p>
<!-- Источники, закомментить, когда ссылок нет -->
<!-- ul>
<li></li>
<li></li>
</ul -->
Теги
Чтобы структурировать и оформить страницу, её размечают языком ХТМЛ.
ХТМЛ‑разметка состоит из контейнеров с содержимым — тегов. Текст помещают внутрь тега, между его открывающей и закрывающей частями:
<h1>Заголовок</h1>
<p>Текст абзаца.</p>
<p>Текст второго абзаца.</p>
Просто отбить один абзац от другого энтерами, как в Ворде, не получится — браузеры воспримут эти энтеры как пробелы.
Название тега отражает его смысл. Например, h1 — heading 1 — заголовок первого уровня.
Теги можно вкладывать друг в друга. Например, сделать жирный текст внутри абзаца или пункты внутри списка:
<p>По-настоящему <b>важные принципы</b>:</p>
<ul>
<li>Не планировать впритык</li>
<li>Сделать значит сдать</li>
<li>Флекс — всегда боль</li>
</ul>
Есть теги, которые не нужно закрывать и в которые нельзя ничего вложить. Например, тег переноса строки br:
<h1>
Лев Николаевич Толстой. <br>
Жизнь и взгляды
</h1>
Не закрываются теги картинок и разных интерактивных элементов: видео, полей ввода, кнопок. Все эти элементы мы разберём дальше в книге.
Ещё в ХТМЛ есть комментарии. Это специальный текст, который не будет видно на странице, только в коде. Разработчики используют комментарии в качестве подсказок себе и другим людям, работающим с кодом.
Комментарии пишут внутри конструкции <!-- … -->, это позволяет удобно прятать любые теги — достаточно дописать восклицательный знак и дефисы в начале и конце тега и он превратится в комментарий, пропадёт со страницы, при этом оставшись в коде. На языке разработчиков это называется «закомментить» — спрятать кусок вёрстки.
<p>Автор: Галина Игнатова</p>
<!-- Менять код только с разрешения главреда! -->
<p>Издание «Валенсия», код агента 348187</p>
<!-- Источники, закомментить, когда ссылок нет -->
<!-- ul>
<li></li>
<li></li>
</ul -->
Атрибуты тегов
У каждого тега могут быть атрибуты — особые параметры для управления его внешним видом и поведением. Атрибуты записывают после названия тега.
Раньше верстальщики часто использовали атрибуты для оформления элементов, но такой подход был неудобным и сильно засорял ХТМЛ‑код. Постепенно от использования многих атрибутов отказались.
Сегодня верстальщики используют на постоянной основе лишь несколько атрибутов, со всеми из них мы познакомимся дальше по ходу книги.
Больше всего атрибутов используют в вёрстке форм и полей ввода, там атрибутами настраивается большинство особенностей поведения элементов.
<body>
<h1 id="pageHeading" class="title">Вход на сайт</h1>
<form method="GET" action="authorize.php">
<p>
<input type="text" placeholder="Логин" autofocus>
</p>
<p>
<input type="password" placeholder="Пароль">
</p>
<p>
<button type="submit" disabled>Войти</button>
</p>
</form>
<p>
<a href="/restore-password/">Забыли пароль?</a>
</p>
</body>
Пример кода с большим количеством атрибутов. По названию многих атрибутов легко догадаться, за что они отвечают
Атрибуты тегов
У каждого тега могут быть атрибуты — особые параметры для управления его внешним видом и поведением. Атрибуты записывают после названия тега.
Раньше верстальщики часто использовали атрибуты для оформления элементов, но такой подход был неудобным и сильно засорял ХТМЛ‑код. Постепенно от использования многих атрибутов отказались.
Сегодня верстальщики используют на постоянной основе лишь несколько атрибутов, со всеми из них мы познакомимся дальше по ходу книги.
Больше всего атрибутов используют в вёрстке форм и полей ввода, там атрибутами настраивается большинство особенностей поведения элементов.
<body>
<h1 id="pageHeading" class="title">Вход на сайт</h1>
<form method="GET" action="authorize.php">
<p>
<input type="text" placeholder="Логин" autofocus>
</p>
<p>
<input type="password" placeholder="Пароль">
</p>
<p>
<button type="submit" disabled>Войти</button>
</p>
</form>
<p>
<a href="/restore-password/">Забыли пароль?</a>
</p>
</body>
Пример кода с большим количеством атрибутов. По названию многих атрибутов легко догадаться, за что они отвечают
<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 — «тело», само содержание страницы, которое мы увидим в браузере.