bbrother92
11/3/2014 - 12:14 AM

Путь HTML/CSS

Путь HTML/CSS

Путь HTML.md
content_copyfile_download
  • Rendered
  • Source

Путь 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

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

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

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

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

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

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

Задания

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

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

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

Задание 1

Задание 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

Задание 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