Преподаватель программы обучения "HTML-верстка", технический директор digital-агентства PLUS8 Дмитрий Демидовский составил для "Нетологии" словарь из 21 термина. С их помощью вы сможете лучше понимать разработчиков.
Верстка, front-end
Означают практически одно и то же: код, работающий в браузере. Для сравнения: в отличие от front-end, back- end исполняется на сервере.
HTML-разметка
Контент сайта (тексты, изображения, видео, аудио), сгруппированный по смыслу в иерархические блоки, обозначенные тегами.
HTML-тег
Главное и единственное средство разметки контента. Обозначается треугольными скобками.
Некоторые теги имеют начало и конец: тег... Некоторые могут быть сами по себе.
HTML-элемент
"Кирпичик" сайта, его структурная единица. То, что образовано тегом.
Атрибут
Дополнительный параметр тега, который определяет его вид или поведение.
Пример атрибута:
тег имя_атрибута="значение_атрибута"
Тег может иметь много атрибутов.
Стили, CSS
Cascading Style Sheets - каскадные таблицы стилей. Набор правил для оформления элементов.
CSS-свойство
Параметр элемента, отвечающий за какой-либо один аспект его отображения. Например, размер или цвет.
CSS-правило
Определяет применение свойств к элементу или группе элементов. Правило может включать много свойств.
Скрипты, JavaScript, JS
Скрипты - "народное название" JavaScript. JS - сокращение от JavaScript.
Код, отвечающий за взаимодействие с пользователем и за динамические элементы на сайте - слайдеры, меню, некоторые формы.
Иногда его путают с Java. Это неправильно - это два разных языка с разными задачами.
jQuery
Библиотека, написанная на JS. Очень популярна, практически выступает стандартом на множестве сайтов.
Метатеги, метаданные
Cпециальные теги, которые не отображаются непосредственно на веб-странице, но хранят дополнительную информацию о документе: его кодировка, ключевые слова, данные для поисковых роботов и социальных сетей.
Медиазапросы, mediaqueries
Cпособ применять различные CSS-правила в зависимости от используемого устройства.
Пример медиазапроса:
Фиксированная верстка (фикс)
Фиксированная верстка имеет постоянную ширину, обычно около 1000 пикселей. На больших экранах центрируется, на маленьких обрезается.
Пример фиксированной верстки - социальная сеть "ВКонтакте".
Резиновая верстка (резина)
Резиновая верстка подстраивается под экран в определенных заданных пределах. Например, от 1024 до 1920 пикселей.
Пример - "Яндекс.Почта".
Адаптивная верстка (адаптив)
Верстка, которая подстраивается под любой экран. Блоки могут перемещаться, скрываться и показываться, а также менять свое поведение.
Пример - Smashing Magazine.
Примеры фиксированной, резиновой и адаптивной верстки
Фреймворк
Набор компонентов, с помощью которых можно применять готовые решения для типовых задач (адаптивные элементы, способы навигации, элементы форм), а не писать их с нуля.
Кроссбраузерность
Способность сайта одинаково отображаться как в современных, так и в старых браузерах.
Валидность
Соответствие верстки официальным утвержденным стандартам.
Кэш браузера
Подход, позволяющий ускорить загрузку и отрисовку верстки. Реализуется не верстальщиком, а разработчиками браузеров.
Канвас, canvas
НTML5-технология, заменившая Flash в плане отображения графики в браузере. Использует аппаратное ускорение, программируется на JavaScript, позволяет делать сложную графику, в том числе трехмерную.
Препроцессоры и постпроцессоры
Дополнительные инструменты для обработки кода. Существуют и для HTML, и для CSS, и для JS. Призваны ускорить и упростить работу верстальщика за счет автоматизации и дополнительных возможностей, которых нет в языках изначально.
Препроцессоры: для HTML - HAML, для CSS - Sass, для JS - CoffeeScript.
Постпроцессоры: для CSS - Autoprefixer, для JS - YUI Compressor.