Путь HTML/CSS

Путь HTML.md

Путь HTML/CSS

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

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

Время, требуемое на изучение материала и решение всех заданий зависит от тебя, ориентировочно это занимает от 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/

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

Существует 2 версии — HTML4 (старый) и HTML5 (новый). HTML5 по сути расширяет HTML4 так что можешь начать с него.

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

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

Любой, кроме блокнота. Sublime Text 3, 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/

Задания

Сверстай изображенные на картинках примеры. Если где-то ширина не указана, она должна зависеть от ширины окна браузера или содержащегося в блоке текста (а не быть жестко заданной). Если где-то не указана ширина отступа/полей, ставь 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
• подсказка: 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

Задание 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 - оно имеет побочные эффекты
• подсказка: для верстки меню слева надо использовать теги <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.
• обрати внимание, размер картинки должен определяться так: если картинка большая — она ужимается до ширины окна (с учетом полей конечно), маленькая — выводится как есть.
• шрифт — 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

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

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

Сверстай макет: http://www.mediafire.com/download/d1j980z595w6owi/pack180-webpaint-home-psd.zip (копия: http://rghost.ru/6L5kMK7q9 http://rghost.ru/58855578 удалено )

• старайся не использовать id в селекторах, так как он не должен повторяться и это сильно ограничивает его использование
• тебе скорее всего понадобится Photoshop. Бесплатный аналог - GIMP может открывать psd-файлы, но не факт что правильно.
• кнопки и ссылки должны реагировать на нажатие и наведение мыши
• в блоке All/Graphic/Illustration/Motion кнопки должны переключаться при нажатии
• тег <img> используется только для картинок в портфолио
• маленькие картинки надо объединить в CSS-спрайты (например, иконки соцсетей или серые иконки с фотоаппаратом и монитором). Большие картинки в портфолио — не надо.
• используй псевдоэлементы, чтобы уменьшить объем HTML, например для значка телефона внизу
• здесь используются внешние шрифты, и довольно тяжелые. Если ты можешь уменьшить их объем, это будет плюсом
• не забывай размечать заголовки с помощью тегов <h1> - <h6>
• макет должен быть читабелен и работоспособен в Internet Explorer (но вещи вроде теней или скругленных уголков, которые тот не поддерживает, можно выкинуть)
• вот мой урок про особенности Internet Explorer: https://gist.github.com/codedokode/855e3970124687b26a1c

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

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

У Bootstrap 3 есть неприятная особенность: он ставит для всех элементов box-sizing: border-box; что может быть неудобно. Если это мешает, можно использовать 2 версию.

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

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

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

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

codedokode@gmail.com

Привет, как исправить ошибку в статье? http://unicode-table.com/ru/ такого урла нет, есть https://symbl.cc/ru/