🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Знакомство с ХТМЛ
ХТМЛ‑файл в текстовом редакторе
Что такое веб‑страница
Любая веб‑страница — это просто текстовый файл с особой разметкой.
Чтобы создать страницу, достаточно создать у себя на компьютере файл с любым именем и расширением .html, затем открыть его в текстовом редакторе и написать внутри любой текст.
ХТМЛ‑файл в браузере
Если затем перетащить этот файл в браузер, мы увидим страницу с текстом, сейчас она выглядит просто и неприглядно.
Чтобы страницу было удобно читать и изучать, её содержимое особым образом структурируют и оформляют. Сейчас разберёмся, как это делают.
Редактировать ХТМЛ‑файлы можно в стандартной программе «Блокнот», но удобнее использовать более продвинутые текстовые редакторы. Например, несложный в освоении бесплатный редактор «Саблайм»
Знакомство с ХТМЛ
ХТМЛ‑файл в текстовом редакторе
Что такое веб‑страница
Любая веб‑страница — это просто текстовый файл с особой разметкой.
Чтобы создать страницу, достаточно создать у себя на компьютере файл с любым именем и расширением .html, затем открыть его в текстовом редакторе и написать внутри любой текст.
ХТМЛ‑файл в браузере
Если затем перетащить этот файл в браузер, мы увидим страницу с текстом, сейчас она выглядит просто и неприглядно.
Чтобы страницу было удобно читать и изучать, её содержимое особым образом структурируют и оформляют. Сейчас разберёмся, как это делают.
Редактировать ХТМЛ‑файлы можно в стандартной программе «Блокнот», но удобнее использовать более продвинутые текстовые редакторы. Например, несложный в освоении бесплатный редактор «Саблайм»
Лайфхак: песочницы для кода
Если не хочется писать код в файлах, можно делать это на одном из множества сайтов‑песочниц. На таких сайтах есть редактор и окошко с результатом вёрстки, который обновляется в реальном времени при изменении кода.
Песочницы подойдут для тренировки, быстрой проверки гипотез или чтобы поделиться кодом с другими людьми. Запустить в песочнице полноценный сайт не получится.
Самые популярные и простые в освоении песочницы: Кодпен и Код Сэндбокс
Лайфхак: песочницы для кода
Если не хочется писать код в файлах, можно делать это на одном из множества сайтов‑песочниц. На таких сайтах есть редактор и окошко с результатом вёрстки, который обновляется в реальном времени при изменении кода.
Песочницы подойдут для тренировки, быстрой проверки гипотез или чтобы поделиться кодом с другими людьми. Запустить в песочнице полноценный сайт не получится.
Самые популярные и простые в освоении песочницы: Кодпен и Код Сэндбокс
Теги
Чтобы структурировать и оформить страницу, её размечают языком ХТМЛ.
ХТМЛ‑разметка состоит из контейнеров с содержимым — тегов. Текст помещают внутрь тега, между его открывающей и закрывающей частями:
<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, в нём можно настроить что угодно. О нём расскажем позже.
Все атрибуты ХТМЛ. МДН