Вопросы для первого ревью:
- Структура HTML
- Семантическая разметка и SEO. Доступность.
- Инструменты разметки и оформления текста, управление отображением
- Различия форматов изображений, особенности SVG
- Оформление текста
- Псевдоклассы и псевдоэлементы
- Продвинутые селекторы, стилизация радио/чекбоксов
- Расчет специфичности селекторов
- Работа с таблицами и формами, различные типы инпутов
- Наследование CSS
1) Структура HTML
Преимущественно HTML-страницы состоят из 5-ти основных компонентов:
- Заголовок - Обычно это большая полоса вверху страницы, с крупным заголовком и / или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице.
- Навигационное меню - Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остается неизменной на всех страницах сайта — наличие непоследовательной навигации на Вашем сайте запутает и разочарует пользователей.
- Основное содержимое - Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определенно будет меняться от страницы к странице!
- Боковая панель - Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьей, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему.
- Нижний колонтитул (футер) - Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для SEO целей, предоставляя ссылки для быстрого доступа к популярному контенту.
Для реализации такой семантической разметки HTML предоставляет выделенные теги, которые можно использовать для создания таких разделов, например:
Для подготовки использовалось:
1) Статья с developer.mozilla.org
2) Семантическая разметка и SEO. Доступность.
- <article> окружает блок связанного содержимого, который имеет смысл сам по себе без остальной части страницы (например, один пост в блоге).
- <section> подобен <article>, но больше подходит для группирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок). Считается хорошей практикой начинать каждый раздел с заголовка. Также обратите внимание, что в зависимости от контекста вы можете разбить <article> на несколько <section> или, наоборот, <section> на несколько <article>.
- <aside> содержит контент, который не имеет прямого отношения к основному содержимому, но может содержать дополнительную информацию, косвенно связанную с ним (словарь, биография автора, связанные ссылки и т. д.).
- <header> представляет собой группу вводного содержимого. Если он дочерний элемент <body>, то он определяет глобальный заголовок веб-страницы, но если он дочерний элемент <article> или <section>, то определяет конкретный заголовок для этого раздела (постарайтесь не путать его с titles и headings).
- <nav> содержит основные функции навигации для страницы. Так же часто в нем можно увидеть логотип и / или название сайта или компании. Вторичные ссылки и т. д. не входят в навигацию.
- <footer> представляет собой группу конечного контента для страницы.
Семантическая разметка влияет на результаты в поисковой выдачи по ряду причин, поэтому входит в комплекс мер по внутренней поисковой оптимизации сайта.
- Поведенческие факторы;
- Качество продвигаемого сайта.
Появление новых устройств разных форматов и диагоналей с подключением к интернету обуславливает использование сайтов на подобных устройствах. Если сайт будет открываться на всех устройствах и опыт использования подобного сайта будет на высоком уровне, то у сайта будут высокие поведенческие показатели, напрямую влияющие на ранжирование документов в органической выдаче поисковой системы.
Хорошо для SEO — поисковики уделяют больше внимания ключевым словам внутри заголовков, ссылок и т.д., чем ключевым словам, помещённым в не семантический <div> и т.д., поэтому клиентам будет проще найти ваш сайт.
Как пример - ссылка на сайт — webkit.org.
Доступность — это практика, позволяющая использовать ваши сайты как можно большему числу людей. Мы традиционно думаем об этом как о доступности для людей с ограниченными возможностями, но на самом деле, в это число входят и другие группы пользователей, которые используют мобильные устройства либо имеют медленное сетевое соединение.
К доступности относится управление сайтом с клавиатуры, корректное считывание его скринридером и т.д.
Для подготовки использовалось:
1) Статья 1 с developer.mozilla.org
2) Статья 2 с developer.mozilla.org
3) Статья с ru.megaindex.com
3) Инструменты разметки и оформления текста, управление отображением
Самый первый и простой способ разметки текста - параграф <p>.
Так же HTML позволяет создавать списки. <ul> - ненумерованные списки, <ol> - нумерованные списки. Элемент списка обрамляется в тег <li>. Допустима любая вложенность списков друг в друга. Атрибутами start и reversed у тега <ol> можно указать нумерацию первого пункта (то есть изменить значение по умолчанию) и изменить порядок нумерации с конца в начало соответственно.
Существуют списки для разметки определений. Здесь помогут теги <dl><dt><dd>. Первый тег размечает сам список, во второй вкладывается сам термин, в третий тег его описание - расшифровка.
Для вывода преформатированного текста (т.е. с сохранением всех пробелов переносов строк и т.д.) используется тег <pre>. В него обрамляется та часть текста, которую нужно вывести с сохранением форматирования.
Для разметки фрагмента кода существует тег <code>. Его суть в том, что текст обрамленный в этот тег, как правило, выводится моноширным текстом. Так же в стилях его можно оформить более красиво. Так же тег <code> можно вкладывать в тег <pre>. Наоборот делать нельзя.
Так же существуют теги для разметки цитат. <q> - встроенная цитата, он предназначен для выделения цитат внутри предложения. У него есть атрибут cite="", в котором можно указать адрес цитаты, если он известен. Существует еще и тег <cite>. Обычно, он используется рядом с <q> и может обрамлять указание автора цитаты или названия фильма, из которого она взята. Но может также использоваться и отдельно от тега <q>.
Для оформления больших отдельно стоящих цитат используется тег <blockquote>. В этот тег можно заключать параграфы и так указывать авторство с помощью <cite>.
Тег <br> - одиночный тег, производит разрыв строки и переносит продолжение на новую строчку. Не рекомендуется для создания параграфов. Для параграфов есть <p>.
Теги <sup> и <sub> используются для надстрочного и подстрочного текста соответственно.
Тег <time> используется для обозначения времени. Время для человека обозначается внутри тега. Время для машины обозначается в атрибуте datetime=" 2016-11-18T09:54" - вот в таком формате.
Теги <em> и <i> - выделяют текст курсивом. <em> - тег, который интонационно выделяет обрамляемый текст. С тегами <strong> и <b> - аналогично.
<del> и <ins> - вычеркивают либо подчеркивают обрамленный в них текст. Есть атрибут datetime="", в котором можно отобразить время, когда были внесены правки в документы.
<div> и <span> - не семантические (не смысловые) контейнеры. Блочный и строчный соответственно. Эти теги используются для визуальной группировки и построения логики размещения блоков на странице.
Управление отображением. Скрытие элементов.
При скрытии элемента существует три разных состояния:
- Элемент полностью скрыт и удален из потока документа.
- Элемент скрыт только визуально и по-прежнему доступен для вспомогательных технологий (АТ), таких как программы чтения с экрана.
- Элемент видим, но скрыт только для программ чтения с экрана.
1) Атрибут тегов hidden скрывает прикрепленный к нему элемент. Эффект похож на применение display: none. Атрибут полностью скрывает элемент со страницы. Разница с display: none в том, что если CSS по какой-то причине не загрузится - элемент точно не будет отображен.
2) display: none - полностью скрывает элемент для читалок в том числе, и убирает его из потока. Дочерние элементы убираются вместе с ним.
3) opacity: 0 - убирает элемент и всех его потомков лишь визуально. Он по прежнему занимает зарезервированное место в стеке и доступен для читалок и выделения с клавиатуры.
4) visibility: hidden - мы можем показать или скрыть элементы, аналогичные используемым opacity: 0, не влияя на визуальный поток документа. Если к дочернему элементу применить visibility: visible - то дочерний элемент будет отображен. Доступность - Элемент скрыт, и его потомки будут удалены из дерева доступности, и программа чтения с экрана не сообщит об этом.
5) Скрытие с помощью position. При этом способе мы выносим элемент за пределы экрана и делаем его размеры нулевыми. При фокусе его можно вывести. Элемент доступен для программ чтения с экрана и фокусируется на клавиатуре. Это скрыто только визуально из области просмотра.
6) clip-path - создает область отсечения, которая определяет, какие части должны быть показаны и скрыты. Элемент скрыт только визуально. Это все еще доступно для программ чтения с экрана и клавиатуры.
7) Еще к вариантам сокрытия относятся прозрачный цвет для текста и установка нулевой высоты для шрифта.
8) aria-hidden - атрибут скрывает элемент только от скринридеров.
Для подготовки использовалось:
2) Статья с dev-gang
4) Различия форматов изображений, особенности SVG
Существует два типа графики - растровая и векторная. Главные характеристики изображения, которые для нас важны - количество цветов, вес и качество изображения. К растровой графике: GIF, JPEG, PNG и WebP.
GIF используется для создания простых анимаций и имеет палитру из 256 цветов. Этот формат не подходит для хранения полноцветных изображений и фотографий. Каждый пиксель поддерживает два состояния - прозрачный и непрозрачный (полупрозрачности нет)
Формат JPEG разработан для сжатия и хранения полноцветных фотографий. Поддерживает более 16 миллионов цветов. При сжатии изображения ухудшается качество. Подходит для отображения изображений с плавным переходом яркости и контраста а так же с большим количеством разноцветных деталей.
PNG - формат сжатия без потерь. Поддерживает полупрозрачность. Подходит для изображений с резкими переходами цветов, для логотипов, чертежей и т.д. Формат имеет две вариации: PNG8 и PNG24 - 256 и 16 млн цветов соответственно.
WebP — новый формат, созданный и развиваемый с 2010 года компанией Google. Аналог предыдущих двух. Занимает меньше места и более качественно выглядит.
SVG - в переводе - масштабируемая векторная графика. Не теряет качества при уменьшении либо увеличении размера. Можно взаимодействовать при помощи CSS, а так же анимировать их или их части. Формат SVG отлично подходит для малоцветных схем, логотипов и иконок.
Для подготовки использовалось:
1) Статья с блога HTML-academy
5) Оформление текста
Свойство font-size управляет размером шрифта. Размер бывает абсолютным и относительным. Наиболее часто используемые - px и em соответственно. 1 em - такой же размер шрифта как в потоке, 2 em - в два раза больший и так далее.
Свойство line-height управляет высотой строки/межстрочным интервалом. Рекомендуется устанавливать от 100 до 120 процентов (процентов от font-size), что эквивалентно значению normal.
font-family - через это свойство указывается тип шрифта. Сперва желаемый шрифт, потом менее желаемый, потом стандартный, если необходимых шрифтов не нашлось.
font-weigth - задает насыщенность/толщину шрифта. Чаще всего используются normal(400) и bold(700).
text-align - выравнивает текст и иные инлайн блоки, внутри блока по горизонтали. Значения left, right, center и justify. Задается контейнеру
vaertical-align - выравнивает инлайновые блоки по вертикали. Значение top, bottom, middle, baseline. Задается элементу.
color - задает цвет текста, значением может быть шестнадцатеричное число, сокращенное шестнадцатиричное число, rgb(0,0,0), rgba(0,0,0,0) - со значением прозрачности. 1 - полностью не прозрачный.
Так же нужно выдерживать контраст цвета текста и фона - чем он контрастнее, тем легче читается текст. Так же под фоновую картинку необходимо добавлять фоновый цвет, чтобы пока она грузиться, или не загрузится вообще - контент был читаем.
Свойство white-space - с помощью этого свойства можно управлять пробелами и переносами строк. nowrap - схлопывает лишние пробелы и отображает весь текст одной строкой. pre - аналогичен <pre>. pre-wrap - сохраняет преформатирование, но добавляет переносы на новую строку если текст не помещается в контейнер. normal - режим по умолчанию: лишние пробелы и переносы строк схлопываются, текст переносится, пробелы в конце строк удаляются/
text-decoration - задает дополнительное оформление текста:
- underline — подчёркивание;
- line-through — зачёркивание;
- overline — надчёркивание;
- none — убирает вышеперечисленные эффекты.
Свойство составное. Так же можно добавить тип линии (сплошную, пунктирную и т.д) и задать цвет линии.
font-style - стиль написания текста. Normal и italic (курсивное начертание)
text-tranform - управляет регистром символов. lowercase - все строчные. uppercase - все заглавные, capitalize - каждое слово с заглавной буквы, none - отменяет внесенные изменения.
Для подготовки использовалось:
6) Псевдоклассы и псевдоэлементы
Псевдокласс - это дополнение к обычному селектору, которое делает его точнее. Псевдокласс задается через ":" (символ двоеточия) после названия селектора.
- :first-child и :last-child - выберет первый и последний дочерний элемент класса внутри своего родителя.
- :nth-child() - выберет указанный по счету дочерний элемент
- :nth-last-child() - то же самое, но нумерация с конца.
- :only-child - только для единственного дочернего элемента
- :only-of-type - только для единственного дочернего элемента, но по типу
- :first-of-type - выбирает первый дочерний элемент по типу
- :last-of-type - последний дочерний элемент по типу
- :nth-of-type() - выбирает элемент по нумерации по типу
- :nth-last-of-type() - выбирает элемент по нумерации по типу, но с конца.
- :hover - позволяет выбирать элементы тогда, когда на них наведен курсор мыши. Это добавляет в интерфейс динамику и интерактивность.
- :not() - выбирает элемент, который не содержит тот селектор, который указан в скобках.
- :empty - выбирает те теги, у которых нет дочерних элементов.
Псевдоклассы для ссылок.
- a:link { ... } - выбирает еще не посещенные ссылки
a:visited { ... } - выбирает посещенные ссылки
a:hover { ... } - тут все понятно
a:active { ... } - выбирает активные ссылки (кнопка мыши зажата) - :focus - элемент находится в фокусе (tab'ом или в окне формы)
Псевдоэлементы ::before и ::after позволяет с помощью CSS добавить псевдотег внутрь другого элемента и оформить его. Cодержимое псевдотега задаётся с помощью свойства content (можно даже с пустой строкой content: ""; ). Ведет себя как <span>с текстом и ему можно задавать дополнительные стили.
Псевдоэлемент ::first-line задает стиль первой строки форматированного текста. Аналогично псевдоэлемент ::first-letter определяет стиль первого символа в тексте элемента, к которому добавляется.
7) Продвинутые селекторы, стилизация радио/чекбоксов
Продвинутые селекторы (комбинированные селекторы)
- Перечисление через запятую: к примеру -
- Селекторы-потомки: записываются через пробел, читаются справа налево, применяется в независимости от уровня вложенности, к примеру -
- Дочерние селекторы: выбирает только дочерние селекторы, которые находятся внутри, на первом уровнем вложенности, к примеру -
- Комбинатор следующего соседнего элемента: стиль будет применен только в том случае, если один элемент идет сразу же за другим, применен будет к правому крайнему элементу, к примеру -
- Комбинирование комбинирований, к примеру -
Стилизация радио/чекбоксов
Для того, чтобы сделать кастомный чекбокс необходимо
1) Соответственно - сделать сам чекбокс <input type="checkbox" name="checkbox">
2) добавить/привязать к нему <label> c подписью, чтобы при нажатии на подпись, активировался чекбокс
3) Спрятать сам input. Сделать это можно через appearance: none. чтобы оставить доступ у скринридеров и возможность попасть табуляцией на чекбокс
4) Далее добавляем <span> или <div> c фоновой картинкой, которая нужна и с помощью ипользования псевдо-классов добиваемся нужного. Суть в том, что спрятанный input дает возможность применять псевдоклассы :focus :сhecked :disabled
8) Расчет специфичности селекторов
Чтобы расчитать какой селектор специфичней, и соответственно, какой из них переопределит значения свойств - используется такое понятие как вес селектора.
Селектор по тегу - <li><ul><body> и т.д - имеет вес 1
Селектор по классу - .class-name - имеет вес 10
Селектор по атрибуту input[atr=value] - имеет вес 10
Селектор по ID - имеет вес 100
Style, прописанный непосредственно в теге - 1000
!important - перекрывает все
Если в селекторов несколько то вес складывается в итоговый и сравнивается с другими.
9) Работа с таблицами и формами, различные типы инпутов
Коротко про таблицы. Основные теги для работы с таблицами <table><th><tr><td>. Границы задаются с помощью свойств border. Ширину таблицы можно задать в процентах и пикселях. Атрибуты colspan и rowspan позволяют объединять ячейки таблицы. Элемент <caption> создает подпись таблицы. Добавляется непосредственно после тега <table>, вне строки или ячейки.
Основу любой формы составляет элемент <form>...</form>. Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля. Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически
<form> содержит обязательный атрибут action="" - ссылка указывающая на обработчик формы. Также можно сделать так, чтобы заполненная посетителем форма приходила вам на почту. Для этого нужно внести следующую запись:
<form action="mailto:адрес вашей электронной почты" enctype="text/plain"></form>
атрибут method="" со значениями get или post говорит каким методом будет передана информация на сервер.
Элемент <fieldset>...</fieldset> предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.
Элемент <input> создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.
Элемент <textarea>...</textarea> используется вместо элемента <input type="text">, когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height. Все размеры считаются исходя из размера одного символа моноширинного шрифта.
Списки дают возможность расположить большое количество пунктов компактно. Раскрывающиеся списки создаются при помощи элемента <select>...</select>. Они позволяют выбрать одно или несколько значений из предложенного множества. По умолчанию в поле списка отображается его первый элемент.
Для добавления в список пунктов используются элементы <option>...</option>, которые располагаются внутри <select>.
Все хорош....