🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

Удобно листать не только прокруткой, но и клавишами‑стрелками:

 
между важными местами
Shift
между
разворотами
Васи­лий Полов­нёв, Игорь Пет­ров

ХТМЛ.
Вёрстка сайтов

Изда­тель­ство Бюро Гор­бу­нова
2021
Василий Половнёв, Игорь Петров

ХТМЛ.
Вёрстка сайтов

Издательство Бюро Горбунова
2021
удк 004.42
ббк З973.42
П52
Васи­лий Полов­нёв, Игорь Пет­ров
П52
ХТМЛ. Вёрстка сай­тов для дизай­не­ров, редак­то­ров и руко­во­ди­те­лей.—
М.: Изд‑во Бюро Гор­бу­нова, 2021

Эта книга — поша­го­вая инструк­ция по вёрстке сай­тов на язы­ках ХТМЛ и ЦСС. Вы узна­ете не только как свер­стать сайт, но и как опуб­ли­ко­вать его в интер­нете, настро­ить кра­си­вый шаринг в соц­сети и под­клю­чить системы аналитики.

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

ISBN 978‑5‑6041630‑9‑2
© Бюро Гор­бу­нова

Оглавление

    Зна­ком­ство с ХТМЛ и ЦСС 

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

    Кон­троль качества

    Публикация

    Как рабо­тать с верстальщиком

удк 004.42
ббк З973.42
П52
П52
Василий Половнёв, Игорь Петров
ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей.—
М.: Изд‑во Бюро Горбунова, 2021

Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.

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

ISBN 978‑5‑6041630‑9‑2
© Бюро Горбунова

Оглавление

    Знакомство с ХТМЛ и ЦСС 

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

    Контроль качества

    Публикация

    Как работать с верстальщиком

Скрыто 54 разворота

Инструменты расстановки переносов в тексте:

Чтобы под­ска­зать бра­у­зеру, где лучше пере­не­сти слово, исполь­зуют неви­ди­мые мяг­кие пере­носы ­. Их рас­став­ляют в тек­сте вруч­ную или с помо­щью гото­вых биб­лио­тек и программ:

<p>
  Самое длинное
  суще&shy;стви&shy;тель&shy;ное
  без дефиса – водо&shy;грязе&shy;
  торфо&shy;парафино&shy;лечение.
</p>

<p>
  Кофе&shy;варка,
  или соко&shy;выжи&shy;мал&shy;ка
  прекрасны.
</p>

Если уже рас­став­лен­ные мяг­кие пере­носы нужно запре­тить, напри­мер, при пере­ходе от мобиль­ной вер­сии к лап­топ­ной или гори­зон­таль­ной, доста­точно напи­сать hyphens: none.

Слова с дефи­сом бра­у­зеры могут авто­ма­ти­че­ски пере­но­сить по дефису. Чаще всего такие пере­носы — зло, потому что мешают читать и вос­при­ни­мать слово цели­ком: 22‑й, Поток‑2, 555‑33‑92 или военно‑мор­ской. В таких слу­чаях стоит заме­нять обыч­ный дефис - на неразрывный ‑

Чтобы подсказать браузеру, где лучше перенести слово, используют невидимые мягкие переносы &shy;. Их расставляют в тексте вручную или с помощью готовых библиотек и программ:

<p>
  Самое длинное
  суще&shy;стви&shy;тель&shy;ное
  без дефиса – водо&shy;грязе&shy;
  торфо&shy;парафино&shy;лечение.
</p>

<p>
  Кофе&shy;варка,
  или соко&shy;выжи&shy;мал&shy;ка
  прекрасны.
</p>

Если уже расставленные мягкие переносы нужно запретить, например, при переходе от мобильной версии к лаптопной или горизонтальной, достаточно написать hyphens: none.

Слова с дефисом браузеры могут автоматически переносить по дефису. Чаще всего такие переносы — зло, потому что мешают читать и воспринимать слово целиком: 22‑й, Поток‑2, 555‑33‑92 или военно‑морской. В таких случаях стоит заменять обычный дефис - на неразрывный ‑

Инструменты расстановки переносов в тексте:

Богатая типографика

Когда на сайте не сле­дят за оформ­ле­нием тек­ста, это выгля­дит неряш­ливо и непро­фес­си­о­нально: упро­щён­ные кавычки, дефис вме­сто тире, пред­логи откле­и­лись и висят в воз­духе, а вме­сто спец­сим­во­лов урод­ли­вые ТМ и (c).

Наво­дить кра­соту — «бога­тую» типо­гра­фику — можно вруч­ную с рас­клад­кой Бир­мана или сер­ви­сами вроде Типо­графа Сту­дии Лебе­дева. Узнать пра­вила оформ­ле­ния тек­ста помо­жет спра­воч­ник Мильчина.

Богатая типографика

Когда на сайте не следят за оформлением текста, это выглядит неряшливо и непрофессионально: упрощённые кавычки, дефис вместо тире, предлоги отклеились и висят в воздухе, а вместо спецсимволов уродливые ТМ и (c).

Наводить красоту — «богатую» типографику — можно вручную с раскладкой Бирмана или сервисами вроде Типографа Студии Лебедева. Узнать правила оформления текста поможет справочник Мильчина.

Лайфхак: Эммет

Emmet — это рас­ши­ре­ние для редак­то­ров кода, кото­рое эко­но­мит кучу вре­мени при вёрстке.

Эммет поз­во­ляет писать корот­кие сокра­ще­ния, а нажа­тием Tab пре­вра­щать их в блоки ХТМЛ или ЦСС‑кода. Эммет пред­уста­нов­лен в боль­шин­стве редак­то­ров и песоч­ниц для кода.

Если Эммет не пред­уста­нов­лен в редак­тор, его навер­няка можно уста­но­вить туда само­сто­я­тельно. Это не сложно, а потра­чен­ное на уста­новку время оку­пится с лих­вой. Поищите инструк­ции по уста­новке для вашего редак­тора в Гугле.

Лайфхак: Эммет

Emmet — это расширение для редакторов кода, которое экономит кучу времени при вёрстке.

Эммет позволяет писать короткие сокращения, а нажатием Tab превращать их в блоки ХТМЛ или ЦСС‑кода. Эммет предустановлен в большинстве редакторов и песочниц для кода.

Если Эммет не предустановлен в редактор, его наверняка можно установить туда самостоятельно. Это не сложно, а потраченное на установку время окупится с лихвой. Поищите инструкции по установке для вашего редактора в Гугле.

Иллюстрации

Иллю­стра­ции вер­стают тегом img, где атри­бут src — это путь до файла‑картинки.

Можно под­клю­чить кар­тинку с дру­гого сайта:

<span><img src="https://upload.wikimedia.org/wikipedia/commons/David_-_Napoleon_crossing_the_Alps_-_Malmaison1.jpg"></span>

А можно сослаться на файл, лежа­щий рядом с вашей ХТМЛ‑стран­цей, напри­мер, в сосед­ней папке images. В этом слу­чае не пишут пол­ный адрес сайта, только путь до кар­тинки отно­си­тельно ХТМЛ‑файла:

<span><img src="img/napoleon.jpg"></span>

Если доба­вить в начало пути слэш, можно ука­зать путь до кар­тинки от кор­не­вой папки сайта. Но это рабо­тает только когда сайт раз­ме­щён на сер­вере. О раз­ме­ще­нии на сер­вере мы пого­во­рим дальше в книге.

<span><img src="/img/1812/napoleon.jpg"></span>

По умолчанию ширина картинки на странице будет равна ширине файла картинки. Файлы в большом разрешении сломают вёрстку, поэтому лучше сразу сделать картинку «резиновой», задав ей display: block; и width в процентах от родителя.

Иллюстрации

Иллюстрации верстают тегом img, где атрибут src — это путь до файла‑картинки.

Можно подключить картинку с другого сайта:

<span><img src="https://upload.wikimedia.org/wikipedia/commons/David_-_Napoleon_crossing_the_Alps_-_Malmaison1.jpg"></span>

А можно сослаться на файл, лежащий рядом с вашей ХТМЛ‑странцей, например, в соседней папке images. В этом случае не пишут полный адрес сайта, только путь до картинки относительно ХТМЛ‑файла:

<span><img src="img/napoleon.jpg"></span>

Если добавить в начало пути слэш, можно указать путь до картинки от корневой папки сайта. Но это работает только когда сайт размещён на сервере. О размещении на сервере мы поговорим дальше в книге.

<span><img src="/img/1812/napoleon.jpg"></span>

По умолчанию ширина картинки на странице будет равна ширине файла картинки. Файлы в большом разрешении сломают вёрстку, поэтому лучше сразу сделать картинку «резиновой», задав ей 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%; /* Подпись лучше ограничить по ширине  */
}

Флексбоксы 

Скрыт 161 разворот
Закладки
Добавьте закладки
Ничего не нашлось