На одном языке: 21 термин из HTML-верстки, чтобы лучше понимать разработчиков

Разобраться

td {
vertical-align: top;
border: none !important;
}
.article-content .article—text h2 {
margin: 35px 0 5px;
}

Преподаватель программы обучения «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-правила в зависимости от используемого устройства.

Пример медиазапроса:

@media screen and (max-width: 480px) { этот код будет работать только на мобильных устройствах с экраном меньше 480 пикс. }

Фиксированная верстка (фикс)

Фиксированная верстка имеет постоянную ширину, обычно около 1000 пикселей. На больших экранах центрируется, на маленьких обрезается.

Пример фиксированной верстки — социальная сеть «ВКонтакте».

Резиновая верстка (резина)

Резиновая верстка подстраивается под экран в определенных заданных пределах. Например, от 1024 до 1920 пикселей.

Пример — «Яндекс.Почта».

Адаптивная верстка (адаптив)

Верстка, которая подстраивается под любой экран. Блоки могут перемещаться, скрываться и показываться, а также менять свое поведение.

Пример — Smashing Magazine.

Примеры фиксированной, резиновой и адаптивной верстки

Фреймворк

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

Кроссбраузерность

Способность сайта одинаково отображаться как в современных, так и в старых браузерах.

Валидность

Соответствие верстки официальным утвержденным стандартам.

Кэш браузера

Подход, позволяющий ускорить загрузку и отрисовку верстки. Реализуется не верстальщиком, а разработчиками браузеров.

Канвас, canvas

НTML5-технология, заменившая Flash в плане отображения графики в браузере. Использует аппаратное ускорение, программируется на JavaScript, позволяет делать сложную графику, в том числе трехмерную.

Препроцессоры и постпроцессоры

Дополнительные инструменты для обработки кода. Существуют и для HTML, и для CSS, и для JS. Призваны ускорить и упростить работу верстальщика за счет автоматизации и дополнительных возможностей, которых нет в языках изначально.

Препроцессоры: для HTML — HAML, для CSS — Sass, для JS — CoffeeScript.

Постпроцессоры: для CSS — Autoprefixer, для JS — YUI Compressor.

Оцените статью

Средняя оценка 5 / 5. Всего проголосовало 2