🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Лайфхак: Эммет
Emmet — это расширение для редакторов кода, которое экономит кучу времени при вёрстке.
Эммет позволяет писать короткие сокращения, а нажатием Tab превращать их в блоки ХТМЛ или ЦСС‑кода. Эммет предустановлен в большинстве редакторов и песочниц для кода.
Если Эммет не предустановлен в редактор, его наверняка можно установить туда самостоятельно. Это не сложно, а потраченное на установку время окупится с лихвой. Поищите инструкции по установке для вашего редактора в Гугле.
Лайфхак: Эммет
Emmet — это расширение для редакторов кода, которое экономит кучу времени при вёрстке.
Эммет позволяет писать короткие сокращения, а нажатием Tab превращать их в блоки ХТМЛ или ЦСС‑кода. Эммет предустановлен в большинстве редакторов и песочниц для кода.
Если Эммет не предустановлен в редактор, его наверняка можно установить туда самостоятельно. Это не сложно, а потраченное на установку время окупится с лихвой. Поищите инструкции по установке для вашего редактора в Гугле.
Иллюстрации
Иллюстрации верстают тегом img, где атрибут src — это путь до файла‑картинки.
Можно подключить картинку с другого сайта:
<img src="https://upload.wikimedia.org/wikipedia/commons/David_-_Napoleon_crossing_the_Alps_-_Malmaison1.jpg">
А можно сослаться на файл, лежащий рядом с вашей ХТМЛ‑странцей, например, в соседней папке images. В этом случае не пишут полный адрес сайта, только путь до картинки относительно ХТМЛ‑файла:
<img src="img/napoleon.jpg">
Если добавить в начало пути слэш, можно указать путь до картинки от корневой папки сайта. Но это работает только когда сайт размещён на сервере. О размещении на сервере мы поговорим дальше в книге.
<img src="/img/1812/napoleon.jpg">
По умолчанию ширина картинки на странице будет равна ширине файла картинки. Файлы в большом разрешении сломают вёрстку, поэтому лучше сразу сделать картинку «резиновой», задав ей display: block; и width в процентах от родителя.
Иллюстрации
Иллюстрации верстают тегом img, где атрибут src — это путь до файла‑картинки.
Можно подключить картинку с другого сайта:
<img src="https://upload.wikimedia.org/wikipedia/commons/David_-_Napoleon_crossing_the_Alps_-_Malmaison1.jpg">
А можно сослаться на файл, лежащий рядом с вашей ХТМЛ‑странцей, например, в соседней папке images. В этом случае не пишут полный адрес сайта, только путь до картинки относительно ХТМЛ‑файла:
<img src="img/napoleon.jpg">
Если добавить в начало пути слэш, можно указать путь до картинки от корневой папки сайта. Но это работает только когда сайт размещён на сервере. О размещении на сервере мы поговорим дальше в книге.
<img src="/img/1812/napoleon.jpg">
По умолчанию ширина картинки на странице будет равна ширине файла картинки. Файлы в большом разрешении сломают вёрстку, поэтому лучше сразу сделать картинку «резиновой», задав ей display: block; и width в процентах от родителя.
Михаил Врубель. Шестикрылый Серафим. 1904
Михаил Врубель. Шестикрылый Серафим. 1904
Иллюстрация с подписью
Иллюстрации с подписями удобно верстать с помощью обёртки figure и подписи figcaption:
<figure class="image">
<img src="images/vrubel.jpg">
<figcaption>
Михаил Врубель. Шестикрылый Серафим. 1904
</figcaption>
</figure>
.image {
width: 100%;
}
.image img {
display: block;
width: 100%;
margin-bottom: 9px;
}
Обёртка создаёт из иллюстрации и подписи единый модуль. Стили картинки и подписи настраиваются один раз, затем модуль можно встраивать в разные места сайта.
Поставить подпись сбоку можно флексбоксом — особыми свойствами для раскладывания элементов внутри контейнера. Мы разберём флексбокс дальше в книге, а пока можно запомнить свойства как заклинание:
.image {
display: flex; /* Ставим вложенные элементы в ряд */
gap: 9px; /* Задаём отступы между элементами в ряду отдельный отступ у img больше не нужен */
}
.image figcaption {
max-width: 30%; /* Подпись лучше ограничить по ширине */
}
Флексбоксы
Михаил Врубель. Шестикрылый Серафим. 1904
Михаил Врубель. Шестикрылый Серафим. 1904
Иллюстрация с подписью
Иллюстрации с подписями удобно верстать с помощью обёртки figure и подписи figcaption:
<figure class="image">
<img src="images/vrubel.jpg">
<figcaption>
Михаил Врубель. Шестикрылый Серафим. 1904
</figcaption>
</figure>
.image {
width: 100%;
}
.image img {
display: block;
width: 100%;
margin-bottom: 9px;
}
Обёртка создаёт из иллюстрации и подписи единый модуль. Стили картинки и подписи настраиваются один раз, затем модуль можно встраивать в разные места сайта.
Поставить подпись сбоку можно флексбоксом — особыми свойствами для раскладывания элементов внутри контейнера. Мы разберём флексбокс дальше в книге, а пока можно запомнить свойства как заклинание:
.image {
display: flex; /* Ставим вложенные элементы в ряд */
gap: 9px; /* Задаём отступы между элементами в ряду отдельный отступ у img больше не нужен */
}
.image figcaption {
max-width: 30%; /* Подпись лучше ограничить по ширине */
}
Флексбоксы
Атрибут alt
У тега img есть атрибут alt — это альтернативный текст, который описывает, что изображено на картинке.
Альт нужен на случай, когда картинка по ссылке недоступна, а ещё для помощи людям с проблемами зрения, которые используют программы для чтения с экрана.
<img
src="https://cats.com/persian/9001.jpg"
alt="Рыжая персидская кошка точит когти об когтеточку">На альт смотрят поисковые роботы, чтобы лучше понять содержимое страницы и чтобы отдельно продвигать картинку по ключевым словам из альта в поиске.
Альты отличаются в зависимости от сайта и его задач. Для любовно собираемых вручную статей в блог не грех добавить в альты деталей, а для выдачи интернет‑магазина с тысячами товаров разумнее генерировать альт под поисковое продвижение, включать в него бренд и характеристики товара.
В любом случае лучше избегать больших объёмов текста и откровенного переспама ключевых слов — это будет неудобно для людей, а поисковики понизят рейтинг сайта за переспам.
Атрибут alt
У тега img есть атрибут alt — это альтернативный текст, который описывает, что изображено на картинке.
Альт нужен на случай, когда картинка по ссылке недоступна, а ещё для помощи людям с проблемами зрения, которые используют программы для чтения с экрана.
<img
src="https://cats.com/persian/9001.jpg"
alt="Рыжая персидская кошка точит когти об когтеточку">На альт смотрят поисковые роботы, чтобы лучше понять содержимое страницы и чтобы отдельно продвигать картинку по ключевым словам из альта в поиске.
Альты отличаются в зависимости от сайта и его задач. Для любовно собираемых вручную статей в блог не грех добавить в альты деталей, а для выдачи интернет‑магазина с тысячами товаров разумнее генерировать альт под поисковое продвижение, включать в него бренд и характеристики товара.
В любом случае лучше избегать больших объёмов текста и откровенного переспама ключевых слов — это будет неудобно для людей, а поисковики понизят рейтинг сайта за переспам.
Таблицы
Таблица состоит из строк tr (table row) и ячеек td (table data cell) или th (table heading). Ячейки можно вкладывать только в строки и нельзя напрямую в тег таблицы.
<table>
<tr>
<td>…</td>
<td>…</td>
<td>…</td>
</tr>
<tr>
<td>…</td>
<td>…</td>
<td>…</td>
</tr>
</table>
Для наглядности подсветим границы ячеек:
td, th {
background: #ebebeb;
}
Чтобы отдельно выделить шапку, тело или подвал‑итог таблицы, используют обёртки: thead, tbody и tfoot. С этими обёртками проще ориентироваться в коде и стилизовать отдельные части таблицы.
<table>
<thead>
<tr>
<th>…</th>
<th>…</th>
<th>…</th>
</tr>
</thead>
<tbody>
<tr>…</tr>
<tr>…</tr>
</tbody>
<tfoot>
<tr>
<td>…</td>
<td>…</td>
<td>…</td>
</tr>
</tfoot>
</table>
Атрибут colspan скажет ячейке занимать несколько колонок:
<table>
<thead>
…
</thead>
<tbody>
…
</tbody>
<tfoot>
<tr>
<td colspan="2">…</td>
<td>…</td>
</tr>
</tfoot>
</table>
Атрибут rowspan скажет занимать несколько строк:
<table>
<thead>
…
</thead>
<tbody>
<tr>
<td rowspan="2">…</td>
<td>…</td>
<td>…</td>
</tr>
<!--
Если в предыдущей строке первая ячейка занимает две строки, то в следующей строке первую ячейку нужно убрать
-->
<tr>
<td>…</td>
<td>…</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">…</td>
<td>…</td>
</tr>
</tfoot>
</table>
При стилизации простых таблиц можно обходиться без лишних классов и стилизовать напрямую по тегам — внутри правильно свёрстанной таблицы всегда будет структура из tr и вложенных td/th.
table {
font-family: Helvetica, sans-serif;
border-collapse: collapse; /* Особое свойство убирает отступы между ячейками */
}
/* Подкрасим нечётные строки таблицы */
tr:nth-child(odd) {
background: #e5f5ff;
}
tfoot tr {
border-top: 1px solid #e5f5ff;
}
td,
th {
text-align: left;
padding: 8px 4px;
}
tfoot td,
td:last-child,
th:last-child {
text-align: right;
}
Раньше из‑за технических ограничений целые сайты верстали как большую таблицу из колонок и строк. Сейчас появились более удобные инструменты вёрстки и таблицы используют только по их прямому назначению — для представления табличных данных
Таблицы
Таблица состоит из строк tr (table row) и ячеек td (table data cell) или th (table heading). Ячейки можно вкладывать только в строки и нельзя напрямую в тег таблицы.
<table>
<tr>
<td>…</td>
<td>…</td>
<td>…</td>
</tr>
<tr>
<td>…</td>
<td>…</td>
<td>…</td>
</tr>
</table>
Раньше из‑за технических ограничений целые сайты верстали как большую таблицу из колонок и строк. Сейчас появились более удобные инструменты вёрстки и таблицы используют только по их прямому назначению — для представления табличных данных
Для наглядности подсветим границы ячеек:
td, th {
background: #ebebeb;
}
Чтобы отдельно выделить шапку, тело или подвал‑итог таблицы, используют обёртки: thead, tbody и tfoot. С этими обёртками проще ориентироваться в коде и стилизовать отдельные части таблицы.
<table>
<thead>
<tr>
<th>…</th>
<th>…</th>
<th>…</th>
</tr>
</thead>
<tbody>
<tr>…</tr>
<tr>…</tr>
</tbody>
<tfoot>
<tr>
<td>…</td>
<td>…</td>
<td>…</td>
</tr>
</tfoot>
</table>
Атрибут colspan скажет ячейке занимать несколько колонок:
<table>
<thead>
…
</thead>
<tbody>
…
</tbody>
<tfoot>
<tr>
<td colspan="2">…</td>
<td>…</td>
</tr>
</tfoot>
</table>
Атрибут rowspan скажет занимать несколько строк:
<table>
<thead>
…
</thead>
<tbody>
<tr>
<td rowspan="2">…</td>
<td>…</td>
<td>…</td>
</tr>
<!--
Если в предыдущей строке первая ячейка занимает две строки, то в следующей строке первую ячейку нужно убрать
-->
<tr>
<td>…</td>
<td>…</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">…</td>
<td>…</td>
</tr>
</tfoot>
</table>
При стилизации простых таблиц можно обходиться без лишних классов и стилизовать напрямую по тегам — внутри правильно свёрстанной таблицы всегда будет структура из tr и вложенных td/th.
table {
font-family: Helvetica, sans-serif;
border-collapse: collapse; /* Особое свойство убирает отступы между ячейками */
}
/* Подкрасим нечётные строки таблицы */
tr:nth-child(odd) {
background: #e5f5ff;
}
tfoot tr {
border-top: 1px solid #e5f5ff;
}
td,
th {
text-align: left;
padding: 8px 4px;
}
tfoot td,
td:last-child,
th:last-child {
text-align: right;
}