html.md

Путь HTML/CSS

Это список ссылок и заданий, которые помогут тебе изучить языки HTML/CSS на достаточном уровне. HTML и CSS используется для верстки (создания) веб-страничек — тех самых, которые ты видишь в браузере когда открываешь какой-то сайт. Задания несложные и надо решить их все.

Станешь ли ты полноценным верстальщиком, пройдя этот путь? Скорее нет, чем да. С одной стороны, ты научишься верстать веб-страницы, с другой стороны от верстальщиков в большинстве случаев требуют дополнительно знать язык программирования Javascript (и различные фреймворки на нем). Так что воспринимай это как первую (короткую) половину пути.

Время, требуемое на изучение материала и решение всех заданий зависит от тебя, ориентировочно это занимает от 2 до 8 недель. В конце тебя ждет главное задание — сверстать страницу из макета.

Что такое HTML

HTML — язык разметки текста. Он позволяет добавить в текст специальные коды-теги (которые выглядят примерно так: <p>), которые разбивают его на части и позволяют вставлять дополнительные элементы вроде изображений. Вот пример HTML-кода:

<h1>Это заголовок</h1>

<p>
    Это абзац текста, в котором содержится 
    <a href="http://google.com/">ссылка на Гугл</a>. 
    После текста идет картинка:
</p>

<img src="http://lorempixel.com/200/150/cats/" alt="Красивая картинка">

А вот как этот код отображает браузер (посмотреть на jsfiddle). Согласись, пока ничего сложного? Ссылка в теге img — это ссылка на картинку.

Что такое CSS

CSS — это язык правил, задающих, как отображаются элементы на странице. Каким шрифтом и цветом написан текст, какие у него поля и отступы от краев страниц и соседних абзацев, каким цветом или изображением закрашен фон. Также CSS задает размеры и расположение блоков на странице. Ты можешь располагать элементы вертикально, горизонтально друг за другом, вынести влево или вправо или поместить в указанном месте страницы.

Вот пример CSS-правил, которые я применяю к фрагменту HTML кода выше:

/* Элементы <a> (ссылки) имеют желтый фон */
a { background-color: yellow; }

/* Элемент <h1> (заголовок) написан шрифтом Arial (а если его нет в системе, 
    то стандартным шрифтом без засечек, sans-serif) лиловым цветом */
h1 { font-family: Arial, sans-serif; color: purple; }

/* Картинка заключена в черную штрихованную рамку шириной 1 пиксель  */
img { border: 1px dashed black; }

И вот как это выглядит в браузере (посмотреть на jsfiddle):

Где можно почитать про HTML и CSS

• Самоучитель HTML4: http://htmlbook.ru/samhtml
• Самоучитель CSS: http://htmlbook.ru/samcss
• Интерактивные уроки: http://htmlacademy.ru/
• Про HTML5: http://htmlbook.ru/html5
• Тонкости позиционирования в CSS: http://softwaremaniacs.org/blog/category/primer/ (читать снизу вверх)
• Подробности про раскладку элементов внутри строки (продвинутый уровень): http://css-live.ru/css/vvedenie-v-inlajnovyj-kontekst-formatirovaniya-ikf-osnovnye-ponyatiya-1-ya-publikaciya-cikla-tajny-css2-1.html
• Картинки, которые можно нарисовать с помощью лишь одного дива: http://habrahabr.ru/company/paysto/blog/251933/
• Важно верстать страницы доступными и поддерживаемыми на максимальном числе устройств: https://habrahabr.ru/company/oleg-bunin/blog/310210/

После того, как немного изучишь основы, можешь начинать решать задания ниже и параллельно изучать дальше.

Актуальная на 2022 год версия HTML это HTML5. HTML5 по сути расширяет HTML4 и код, написанный на HTML4, почти всегда отобразится корректно в современных браузерах.

Не ставь закрывающий слеш в конце тега: <br /> — такое используется в XHTML и XML, но не используется в HTML. В HTML надо писать <br>.

Какой редактор посоветуешь?

Любой, кроме блокнота. Sublime Text, Notepad++, PhpStorm, TextMate, vim, emacs — любой подойдет. Файлы надо сохранять в кодировке utf-8 без BOM.

Есть 2 специальных плагина, которые помогут тебе печатать код гораздо быстрее. Это Emmet для HTML: http://emmet.io/ и Hayaku для CSS: http://hayakubundle.com/ (англ.).

Как просмотреть и куда выкладывать примеры кода?

Самый простой способ просмотреть страницу — сохранить код в файл с расширением .html и перетащить в окошко браузера. Если же ты хочешь выложить пример в интернет, чтобы все его увидели, используй удобные сервисы (некоторые позволяют прямо в браузере редактировать код и видеть изменения):

• http://jsbin.com/
• http://jsfiddle.net/
• http://codepen.io/
• На гитхабе можно использовать github pages: http://pages.github.com/ (англ.) если тебе надо выложить не одиночный файл, а страницу со стилями, скриптами, картинками

У меня проблемы с кодировкой

• используй тег <meta charset> в своем коде
• сохраняй код в кодировке utf-8 без BOM

Как отлаживать код

В браузеры встроен специальный инструмент для отладки страниц - инспектор. Он открывается нажатием Ctrl + Shift + I (в ИЕ надо жать F12, в Сафари надо сначала включить инструменты разработчика). Краткий обзор: http://habrahabr.ru/post/143767/

По каким правилам определяется ширина блоков, если ее не указать явно?

Зависит от используемого способа позиционирования. Я написал урок, посвященный этому: ./shrink-to-fit.md

Задания

Сверстай изображенные на картинках примеры. Если где-то ширина не указана, она должна зависеть от ширины окна браузера или содержащегося в блоке текста (а не быть жестко заданной). Если где-то не указана ширина отступа/полей, ставь 10px. Цвет блоков должен быть как на картинке (чтобы определить цвет, используй функцию «пипетка» в графическом редакторе, или отдельную программу-пипетку). Размер шрифта выбери сам. Серую рамку верстать не надо.

Никогда не используй CSS-селектор «звездочка» и CSS reset.

Перед тем, как сдать задание, проверь, все ли корректно отображается при изменении ширины окошка браузера.

Задание 1

• в этом задании нельзя использовать свойства position, float или display (почему? потому, что без них проще).
• подсказка: чтобы решить это задание, необходимо сначала изучить такие свойства CSS: width, height, margin, padding, border, text-align, background-color, color, font, line-height, font-weight, font-style и боксовую модель: http://htmlbook.ru/samlayout/blochnaya-verstka/blochnaya-model или https://developer.mozilla.org/ru/docs/Web/CSS/box_model
• подсказка: http://softwaremaniacs.org/blog/2005/08/27/css-layout-flow/
• подсказка: полезно будет почитать про единицы измерения в CSS: http://htmlbook.ru/content/edinitsy-izmereniya

Задание 2

• подсказка: в этом задании нельзя использовать свойства poistion, float, display или width.
• подсказка: тебе надо изучить CSS-свойства min-width, max-width, min-height, max-height
• подсказка: свойство width по умолчанию задает внутреннюю ширину элемента без учета паддинга или бордера

Задание 3

• из тегов можно использовать только <em>
• подсказка: вот таблица с кодами юникодных символов: http://unicode-table.com/ru/ , сердечко ищется поиском по слову «heart», стрелочка по слову «arrow».
• подсказка: символы <, >, & в HTML надо записывать с использованием html entity (HTML-мнемоник).
• подсказка: шрифт — Times New Roman
• подсказка: для решения этой задачи надо почитать про HTML мнемоники (html entities): http://htmlbook.ru/samhtml/tekst/spetssimvoly

Задание 4

• ширина и высота желтых блоков определяется заключенным в них текстом (то есть не задана жестко). Мы должны иметь возможность поменять числа или добавить еще несколько строчек, не меняя css. У желтых блоков есть поля размером 10px. У синего блока поля размером 10px.
• для переноса строк можно использовать <br>
• здесь нельзя использовать свойство position и float (потому что блоки с float всегда выравниваются по верхнему краю, а позиционированные блоки не выстраиваются друг за другом)
• подсказка: изучи свойства display и vertical-align и почитай статьи http://htmlbook.ru/samlayout/blochnaya-verstka/strochnye-elementy и http://htmlbook.ru/samlayout/blochnaya-verstka/strochno-blochnye-elementy
• подсказка: свойство vertical-align работает только в 2 случаях: внутри ячейки таблицы и для выравнивания элементов с display: inline или display: inline-block в строке. В остальных случаях оно не действует.
• если тебе никак не удается добиться, чтобы расстояние между блоками по горизонтали было ровно 10px, прочти статью: http://css-live.ru/articles/zagadochnye-otstupy-mezhdu-inlajn-blokami.html

Задание 5

• подсказка: не забудь добавить padding, чтобы цветная плашка была чуть больше чем текст.
• подсказка: тебе может помочь статья (учти, она сложная) http://css-live.ru/css/vvedenie-v-inlajnovyj-kontekst-formatirovaniya-ikf-osnovnye-ponyatiya-2-ya-publikaciya-cikla-tajny-css2-1.html

Задание 6

• ни в коем случае не используй тут свойство overflow - оно имеет побочные эффекты
• пиши CSS правила, чтобы они применялись только к конкретным элементам, и не конфликтовали с другими правилами, которые, возможно, появятся позже. Ну например если написать li { ... } то мы применим правило не только к списку в меню, но и ко всем остальным спискам, например в тексте, или в другом меню, которое добавят в будущем. Лучше писать .menu li { ... } или даже .menu > li { ... } (на случай если в меню появятся вложенные списки и мы не хотим их задеть).
• подсказка: для верстки меню слева надо использовать теги <ul>, <li>, <a> и по желанию <nav>. Для статьи справа можно использовать <atricle>
• подсказка: если удалить весь текст справа или все пункты меню, верстка не должна ломаться. Если добавить несколько пунктов меню или абзацев текста, тоже.
• подсказка: шрифт — Trebuchet MS, не забудь что он пишется в кавычках в CSS
• подсказка: тебе надо изучить свойства float и clear и почитать статью http://softwaremaniacs.org/blog/2005/12/01/css-layout-float/

Задание 7

• подсказка: разные элементы форм по-разному воспринимают свойства width и height. Для input и textarea они задают внутренние размеры, без паддинга и бордера, для select и кнопок — внешние.
• не вздумай обнулять паддинг на поле ввода и кнопке — это некрасиво
• подсказка: браузер по умолчанию добавляет к input 2px паддинга и бордер.
• подсказка: тебе может помочь свойство box-sizing или задание разной высоты для 2 элементов
• подсказка: не забудь использовать тег <form>

Задание 8

• текст: http://ideone.com/k9txx8
• верстка должна позволять без изменения CSS дописать или убрать любое число абзацев, списков, заголовков, картинок и примечаний
• можно использовать тег <p> для абзаца и <aside> для примечания
• не задавай поля с помощью margin на <p>. Поля задаются с помощью padding на родительском элементе
• маргины могут быть отрицательными (не только для флоатов), вот урок по теме: https://gist.github.com/codedokode/3f6063edf0a2227eb313

Задание 9

• верстка должна позволять добавить или убрать любое число серых блоков
• верстка не должна ломаться, если в сером блоке убрать текст или желтый блок
• верстка не должна ломаться, если увеличить или уменьшить высоту желтого блока
• в серый блок кроме текста может быть добавлено любое число списков, заголовков, картинок и таблиц, верстка не должна сломаться
• помни, что маргины могут быть отрицательными
• в этом задании нельзя использовать свойство overflow и position
• подсказка: обрати внимание на этот код: http://nicolasgallagher.com/micro-clearfix-hack/ (англ.), перевод http://webknowledge.ru/novaya-mikro-versiya-haka-clearfix/

Задание 10

• HTML-код добрый дядя уже написал и выложил тут: http://jsbin.com/bidezoqoja/1/ (копия: http://ideone.com/P6pPkP http://paste.ubuntu.com/8794987/ ), его менять нельзя, тебе надо лишь добавить свой CSS.
• обрати внимание, размер картинки должен определяться так: если картинка большая — она ужимается до ширины окна (с учетом полей конечно), маленькая — выводится как есть.
• верстка должна выглядеть хорошо, даже если картинка не загрузилась из-за ошибки, а также в процессе загрузки (когда HTML код уже загрузился, а картинка еще нет). Чтобы это проверить, временно поменяй ссылку в теге <img> на несуществующую (вроде http://example.com/invalid.png ) и проверь, что верстка выглядит корректно и ничего не прыгает и не съезжает.
• шрифт — Times New Roman
• никогда не увеличивай растровые (jpeg, png, gif) картинки, так как они мылятся. Можно только уменьшать их.
• появляется какой-то странный 3-4 пиксельный отступ под картинкой? Читай http://xiper.net/collect/html-and-css-tricks/content/img-in-the-block

Задание 11

• в HTML-коде необходимо использовать радиокнопки (<input type="radio">)
• должна быть возможность поменять type="radio" на type="checkbox" и все должно работать (с той разницей что можно нажать больше одной кнопки)
• код не должен использовать атрибуты for и id (можно вложить input внутрь label)
• я смог решить задание, используя 3 тега на кнопку (label, input, i)
• должна быть возможность, не меняя CSS, добавить или убрать любое число кнопок
• это задание рассчитано на современные браузеры. Но если ты сделаешь, чтобы код работал и в старых (за счет яваскрипта), это будет плюсом. Или если в старых браузерах будет выводиться просто набор чекбоксов, это тоже лучше, чем ничего.
• кнопки должны реагировать на наведение (становятся серыми, а курсор меняет форму) и на нажатие. Вид нажатой кнопки и кнопки с наведением мыши должен различаться. Например, вжатие можно обозначать тенью.
• твои CSS стили должны применяться только к элементам внутри переключателя. Недопустимо писать стили вроде label {... } меняющие вид всех label на странице.
• если кнопки будут «загораться» плавно, это будет плюсом
• чтобы определить состояние «кнопка вжата», можно использовать селектор label:active (на самом деле input:active)
• подсказка: чтобы нажатие на кнопку выключало другие, у них должен быть прописан атрибут name
• подсказка: http://habrahabr.ru/post/154719/
• подсказка: http://habrahabr.ru/post/105267/
• дополнительный пункт: если ты посмотришь на обычные, не стилизованные радиокнопки и чекбоксы, то увидишь что по ним можно перемещать фокус с клавиатуры кнопками Tab, Shift + Tab, стрелками и переключать пробелом. Попробуй сделать поддержку клавиатурной навигации и в стилизованных кнопках. Надо подсвечивать элемент, на котором находится фокус, например, синим свечением вокруг. Подсказка: для этого надо отказаться от display: none на input, так как перемещать фокус по скрытым элементам нельзя.

Задание 12

Сделай табы (вкладки) на CSS3, как здесь: http://cssdeck.com/labs/full/css-responsive-tabs//noframe#dontkillanim

• если тебя тоже раздражает использованная анимация, можно заменить ее на любую другую, например плавное изменение прозрачности текста
• обрати внимание, что если сделать окно узким, вкладки перестраиваются. То есть их верстка адаптивная. Это можно сделать с помощью css-правила @media. На узких экранах надо либо вывести заголовки вкладок вертикально, либо выводить вкладки в раскрытом виде с заголовками.
• подсказка: http://habrahabr.ru/post/138020/
• твои стили должны применяться только к элементам вкладок. Не пиши стили вроде input {...}, меняющие вид всех элементов на странице. Стили не должны влиять на элементы внутри содержимого вкладки, там тоже могут быть инпуты, чекбоксы, лейблы.
• скорее всего наш виджет с вкладками будет использоваться на странице, где есть много других элементов. Важно, чтобы наши названия классов или id не совпали случайно с существующими на странице. Для этого стоит добавить к ним общий префикс, например .tabs-header, .tabs-label или .tabluator-header, .tabulator-label. Следование этому принципу может сберечь немало времени на поиск и исправление конфликтов.
• протестируй что если сделать текст в заголовках вкладок длиннее или короче, верстка не ломается. Разрешается ограничивать длину заголовка разумным значением, разрешается переносить заголовки если они не умещаются в одну строку.
• протестируй что все корректно работает если текст на вкладках имеет разную высоту, содержит разные теги, в том числе формы с радиокнопками
• протестируй что выше и ниже блока вкладок можно поместить произвольные блоки текста и они не накладываются друг на друга. Блоки текста - обычные элементы вроде h1, p, div.
• старайся не использовать id в верстке так как с ними не получится вывести на странице несколько блоков вкладок. Разрешается использовать классы или data-атрибуты для связи вкладок и заголовков.
• сверстай блок так, чтобы блок с вкладками можно было вложить в страницу блока вкладок
• сделай, чтобы вкладки можно было переключать с клавиатуры без использования мыши (для этого не требуется яваскрипт, достаточно сделать возможность перемещать фокус клавишей Tab или стрелками по чекбоксам)
• это задание рассчитано на современные браузеры. Но если ты сделаешь, чтобы код работал и в старых (за счет яваскрипта), это будет плюсом. Или если в старых браузерах будет выводиться просто содержимое вкладок друг над другом, это лучше чем ничего.
• интересный способ сверстать вкладки без использования идентификаторов или номеров для связи заголовка и вкладки: http://chikuyonok.ru/2009/04/dl-tabs/ минус: не сработает если заголовки надо выводить в 2 строки или в адаптивной версии.

Главное задание на верстку макета

Сверстай макет: https://drive.google.com/file/d/0Bzrx7iBXaXrubkU4MmpvbnUwMk0/view?usp=sharing&resourcekey=0-FCPXJNB0MGSG09sEIlhphg (копия: http://www.mediafire.com/download/d1j980z595w6owi/pack180-webpaint-home-psd.zip ) https://mega.nz/#!0xtxlYTZ!2KZODLd4gND4lPzQMaC93_PcY5cQUJsKNxqmGtAcC20 http://rghost.ru/6L5kMK7q9 http://rghost.ru/58855578 всё удалено ). Если ни одна ссылка не работает, попробуй погуглить «webpaint PSD template».

Адаптивность

Рекомендую также сделать адаптивную версию (версию для маленьких экранов, например, планшетов или смартфонов). В адаптивной версии необходимо при ширине экрана меньше определенной менять структуру страницы: выстроить блоки вертикально, адаптировать меню, уменьшить шрифт в шапке (он слишком большой для маленького экрана), уменьшить некоторые отступы. Помни, что на смартфонах используют палец для нажатия, и слишком маленькие или тесно расположенные ссылки неудобно нажимать. Например, ссылки на соцсети в подвале стоит сделать крупнее или расставить чуть подальше друг от друга.

Технически адаптивность делается с помощью CSS-правила @media. Можно также погуглить статьи под названием "примеры адаптивных сайтов", и посмотреть на эти примеры.

Вот сайт с размерами экранов разных устройств: http://viewportsizes.com/

Тестировать сайт можно, например, на таких значениях ширины: 320, 640, 960 пикс. Отлаживать адаптивную версию можно как на реальном устройстве,так и используя режим адаптивности в инструментах разработчика (Developer Tools), который есть и в Chrome, и в Firefox.

Важно проверить, что сайт корректно отображается в разных браузерах. Для этого можно воспользоваться сервисами, которые генерируют скриншоты. Вот они:

• преимущественно для отладки в ИЕ: https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/
• раньше был хороший browserstack, но потом он ввел регистрацию и ограничения
• есть http://browsershots.org/ , но там нет ИЕ и мобильных браузеров

Вообще, адаптивность относится не только к адаптации под маленькие экраны, но и под другие носители: проекторы, принтеры. Если есть желание, можно адаптировать страницу для печати, убрав большие темные области (чтобы не тратить зря чернила). Также, иногда при адаптации для печати добавляют вывод URL после ссылок (так как на печати нажать на ссылку нельзя), но это не всегда смотрится хорошо.

Шрифты

В этой задаче используется кастомный шрифт (Lato). Вообще, кастомные шрифты это не так и хорошо, так как браузер не показывает текст с ними до загрузки шрифта, что замедляет отображение сайта. Но в данной задаче такая задумка дизайнера.

Для подключения файла шрифта есть специальное CSS-правило @font-face. Я советую внимательно его изучить. Обрати внимание, что существуют разные форматы шрифтов, и разные браузеры поддерживают разные форматы:

• https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face (в конце есть таблица)
• https://css-tricks.com/snippets/css/using-font-face/ (англ)
• https://caniuse.com/#feat=woff
• https://caniuse.com/#feat=woff2
• https://caniuse.com/#feat=ttf
• https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=ru (статья на русском)

Сконвертировать шрифты в другой формат можно конвертором: https://www.fontsquirrel.com/tools/webfont-generator . Надо, конечно, понимать, что при этом могут теряться какие-то особенности шрифта. Этот конвертор также позволяет уменьшить вес шрифта за счет удаления части символов (например, какой-нибудь редкий алфавит, который не используется на сайте, или хитрые математические символы).

Обрати внимание, что пока шрифт не загрузится, браузер не показывает текст. Повлиять на это поведение можно новым свойством font-display: https://css-tricks.com/font-display-masses/

Здесь используется несколько начертаний одного шрифта Lato (тонкий, полужирный, курсивный итд). На каждое начертание делается отдельный блок @font-face, где указывается одинаковое название (font-family), но разные font-weight/font-style. Если этого не сделать, и дать им разные названия, то теги вроде strong или em не смогут корректно отобразить текст в нужном начертании.

Ты заметишь, что процесс довольно хлопотный: надо конвертировать шрифты, настроить правила font-face итд. Вообще, этого можно избежать, если подключать готовые шрифты с Google Fonts, который все сделает сам, но я бы советовал один раз сделать все вручную, чтобы разобраться. Ну и при желании ты можешь как-то shell-скриптами автоматизировать это.

Дополнительные советы

• старайся не использовать id в селекторах, так как он не должен повторяться и это сильно ограничивает его использование
• Photoshop не обязателен. Бесплатный аналог - GIMP - откроет данный PSD-файл, и даже "видит" отдельные слои в нем, но, увы, не позволяет получить дополнительную информацию. Например, он отображает текстовые слои как картинку и не позволяет извлечь параметры шрифта или скопировать текст. Также, он не позволит извлечь векторные картинки. Для верстки, впрочем, его возможностей вполне хватит.
• кнопки и ссылки должны реагировать на нажатие и наведение мыши
• номер телефона желательно сделать кликабельным с помощью ссылки со схемой tel: https://css-tricks.com/the-current-state-of-telephone-links/ . Адрес можно сделать ссылкой на какую-либо карту, например, openstreetmap.org
• в блоке All/Graphic/Illustration/Motion кнопки должны переключаться при нажатии. Желательно присвоить категории работам с помощью data-атрибутов или CSS-классов.
• тег <img> используется только для картинок в портфолио. Остальное лучше отображать с помощью фоновых картинок.
• маленькие картинки надо объединить в CSS-спрайты (например, иконки соцсетей или серые иконки с фотоаппаратом и монитором). Большие картинки в портфолио — не надо.
• используй псевдоэлементы, чтобы уменьшить объем HTML, например для значка телефона внизу
• здесь используются внешние шрифты, и довольно тяжелые. Если ты можешь уменьшить их объем, это будет плюсом
• не забывай размечать заголовки с помощью тегов <h1> - <h6>
• макет должен быть читабелен и работоспособен в Edge (но вещи вроде теней или скругленных уголков, которые тот не поддерживает, можно выкинуть)
• если вдруг тебе захочется усложнить себе жизнь станет интересно, как обеспечить работу сайта в старом браузере Internet Explorer, то вот мой урок про особенности Internet Explorer: https://github.com/codedokode/pasta/blob/master/html/markup-for-ie.md

Что еще стоит глянуть?

Посмотри CSS-фреймворк Bootstrap 4: http://getbootstrap.com/ Он содержит огромное количество готовых компонент (иконки, меню, выпадающие элементы, группы кнопок, хитрые поля ввода) и часто используется для оформления интерфейсов.

Обрати внимание, что Бутстрап ставит для всех элементов box-sizing: border-box;, то есть в нем width и height задают внешнюю ширину элемента, включая паддинг и бордер.

Плохой код, который писать не стоит

Или стоит, но предварительно взвесив все за и против.

• не ставь слеш в конце одиночного тега: <br /> — правильно будет <br>. Слеш использовался только в XML и XHTML.
• не используй <a href="#" или <a href="javascript:void(0)" никогда. Для этого есть кнопки или <span>.
• не используй CSS Reset (он сбрасывает все стили текста, списков, таблиц и прочее)
• не используй селектор *
• не используй код * { box-sizing: border-box } (он изменяет размер всех картинок, у которых есть border или padding)

Как связаться с автором?

codedokode@gmail.com