Словарь разработчика

Adaptive design Anchor Animation Asset Assert Browser Back-end Background Baseline Blockquote Border Border-radius Box model Box-shadow Breadcrumbs Button Callback Cellpadding Cellspacing Checkbox Clear Client-side Closure Code Colspan Column Content Cross-browser Cross-platform CSS Working Group (CSSWG) Design Disabled Display DOM DOCTYPE Dropdown Easing em Enabled Engine Fallback Favicon Fieldset Figure Figcaption Float Font Footer Framework Front-end Full screen Graceful degradation Gradient Grid Header Height Implement Inline Input Kerning Keyframe Keyframe animation Layout Letter-spacing Line-box Line-height List List-style Margin Matrix Media queries Mixin Mock-up Modal Multiple Multiple columns Nested Node Opacity Opaque Outline Package manager Padding Pagination Pattern Performance Pixel Polyfill Popup Position Preprocessor Promises Progress bar Progressive enhancement Radio button Rem Reset Responsive design Row Rowspan Scaffolding Semantics Server-side Shadow DOM Shim Sidebar Source maps Style Tab Tag Textarea Text-align Text-shadow Thumbnail Title Toggle Tooltip Touch Transform Transition Typography Unit Utility Valid Validator Vendor prefix Vertical-align Viewport World Wide Web Consortium (W3C) Web standards Width Word-spacing Workaround

Разработка сайтов. Разработка интернет-магазинов. Разработка landing-page. Front-end разработка. Николай Ермак

Словарь front-end разработчикаобновляется

A

Adaptive design

Адаптивный дизайн

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

Целью адаптивного веб-дизайна является универсальность отображения содержимого веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств форматов и с экранами различных разрешений, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре устройств.

Anchor

Анкор, якорь

1. Ссылка (гиперссылка) — запись в документе, указывающая на другую часть этого документа или на другой документ.

Запись в HTML-коде:

<a href="/address.html" >Текст ссылки</a>

атрибут href содержит адрес на ссылаемый документ

 

2. Якорь — закладка с уникальным именем в определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу. , ссылка на элемент в пределах документа, может быть частью гиперссылки.

Запись в HTML-коде:

<a href="/address.html#anchor" >Текст ссылки</a>
<a name="anchor"></a> Ссылаемый текст

атрибут href содержит адрес на ссылаемый документ с указанием имени якоря #anchor
якорь <a name="anchor"></a> ставится перед текстом, на который необходимо сослаться

Animation

Анимация

Плавное изменение визуальных параметров объекта.

  • animation-delay - устанавливает время ожидания перед воспроизведением анимации.
  • transition - универсальное свойство, которое определяет эффект перехода между двумя состояниями элемента, они могут быть установлены с помощью псевдоэлемента :hover или :active, а также динамически через JavaScript.
  • transition-delay — устанавливает время ожидания перед запуском эффекта анимации перехода.
  • transition-duration — pадаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения.
  • transition-property — устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода.
  • transition-timing-function — устанавливает, насколько быстро должно изменяться значение стилевого свойство для которого применяется эффект перехода.

Asset

Ресурс

Вспомоагтельные ресурсы, такие как стили, скрипты и картинки для страницы. Например ресурсы сайта — site assets.

Запись в HTML-коде:

<head>
<link rel="stylesheet" href="/assets/css/style.css" type="text/css">
<script src="/assets/js/javascript.js" type="text/javascript"></script>
<link rel="icon" type="image/png" sizes="192x192" href="/images/favicon/favicon.png">
</head>

Assert

Проверка

Условие, которое проверяется. Употрбеляется в тестировании, например проверка поля не прошла — field assert has failed.

B

Browser

Браузер

Прикладное программное обеспечение для просмотра веб-страниц; содержания веб-документов, компьютерных файлов и их каталогов; управления веб-приложениями; а также для решения других задач. В глобальной сети браузеры используют для запроса, обработки, манипулирования и отображения содержания веб-сайтов. Многие современные браузеры также могут использоваться для обмена файлами с серверами ftp, а также для непосредственного просмотра содержания файлов многих графических форматов (gif, jpeg, png, svg), аудио-видео форматов (mp3, mpeg), текстовых форматов (pdf, djvu) и других файлов.

Распространенные браузеры:
Google Chrome, Safari, Opera, Mozilla Firefox, Internet Explorer

Back-end

Бэкенд

1. Область веб-технологий, работающих на сервере.

2. Внутренняя часть серверной системы, которая занимается обработкой данных.

Background

Фон

Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.

Запись в CSS-коде:

div {background: rgba(0, 0, 0, 0) url("/images/background.png") repeat scroll 0 0;}
rgba(0, 0, 0, 0) — background-color (цвет фона)
url("/images/background.png") — background-image (изображение фона)
repeat — background-repeat (повторение фона по вертикали и горизонтали)
scroll — background-attachment (прокрутка фона)
0 0 — background-position (позиция фона)

Baseline

Базовая линия

Воображаемая прямая линия, проходящая по нижнему краю прямых знаков без учёта свисаний и нижних выносных элементов. В строке символы текста стоят на базовой линии, а нижние выносные элементы текста «свисают» с неё.

Blockquote

Блочная цитата

Тег <blockquote> предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу.

Border

Граница, рамка

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.

Запись в CSS-коде:

div {border: 1px solid #000;}
1px — border-width (ширина границы)
solid — border-style (стиль границы)
#000 — border-color (цвет границы)

Border-radius

Скругление границы, рамки

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном. Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел. Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.

Число значений Запись в CSS-коде Результат
1 border-radius: 5px Радиус указывается для всех четырех уголков.
2 border-radius: 5px 10px Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка.
3 border-radius: 10px 5px 10px Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка.
4 border-radius: 5px 5px 5px 5px По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.

Box model

Блочная модель

Система размерностей блока, которая описывает, из чего состоит блок (бокс) и какие свойства влияют на его размеры. В ней у каждого бокса есть 4 области: margin (внешние отступы), border (рамка), padding (внутренние поля), и content (контент или содержимое).

Box-shadow

Тень блока

CSS-свойство, которое добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius, то тень также получится с закругленными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.

Запись в CSS-коде:

div {box-shadow: 0 0 10px rgba(0,0,0,0.5);}
0 0 10px — сдвиг по x (0), сдвиг по y (0), радиус размытия (10px)
rgba(0,0,0,0.5) — цвет тени

Breadcrumbs

Хлебные крошки

Элемент навигации, представляющий собой путь по файловой системе от корня до рабочего каталога, который в данный момент просматривает пользователь.

Название «хлебные крошки» является иронической отсылкой к немецкой сказке «Гензель и Гретель», в которой дети, когда их завели в лес во второй раз, не смогли найти обратную дорогу, так как на этот раз вместо маленьких камешков они оставляли за собой хлебные крошки, впоследствии склёванные лесными птицами.

Обычно представляет собой полосу в верхней части программы примерно такого вида:

Имя сайта → Раздел → Подразел → Текущая страница

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

Button

Кнопка

Тег <button> создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега <input> (с атрибутом type="button | reset | submit"). В отличие от этого тега, <button> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.

Теоретически, тег <button> должен располагаться внутри формы, устанавливаемой элементом <form>. Тем не менее, браузеры не выводят сообщение об ошибке и корректно работают с тегом <button>, если он встречается самостоятельно. Однако, если необходимо результат нажатия на кнопку отправить на сервер, помещать <button> в контейнер <form> обязательно.

Запись в HTML-коде:

<form>
<button>...</button>
</form>
C

Callback

Обратный вызов

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

Cell

Ячейка

Структурная единица таблицы.Элемент таблицы(теги <td> или <th>)

Cellpadding

Отступ в ячейках таблицы.

Определяет расстояние между границей ячейки и ее содержимым. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.

Запись в HTML-коде:

<table cellpadding="значение">...</table>

Cellspacing

Расстояние между ячейками таблицы.

Задает расстояние между внешними границами ячеек. Если установлен атрибут border, толщина границы принимается в расчет.

Запись в HTML-коде:

<table cellspacing="значение">...</table>

Checkbox

Чекбокс

Элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ? включено и ? выключено. Во включённом состоянии внутри чекбокса отображается отметка (галочка (?), или реже крестик(?)). По традиции флажок имеет квадратную форму. Рядом с флажком отображается его обозначение, обычно — подпись, реже — значок. Для увеличения площади активного элемента одинаково реагирует на нажатие мышью как сам флажок, так и подпись к нему.

Запись в HTML-коде:

<input type="checkbox">

Clear

Очистка (потока)

Свойсвто CSS-кода, которое устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.

  • clear: none — отменяет действие свойства clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек.
  • clear: both — отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.
  • clear: left — отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
  • clear: right — отменяет обтекание с правой стороны элемента.
  • clear: inherit — устанавливает значение родителя.

Client-side

Клиентсайд

Область веб-технологий, работающих в браузере, часто синоним фронтенда.

Closure

Замыкание

Функция, в теле которой присутствуют ссылки на переменные, объявленные вне тела этой функции в окружающем коде и не являющиеся её параметрами. Говоря другим языком, замыкание — функция, которая ссылается на свободные(внешние) переменные в своём контексте.

Code

Код

Правило (алгоритм) сопоставления каждому конкретному сообщению строго определённой комбинации символов (знаков) (или сигналов).

Существительное неисчислимое (как сахар).

Например, правильно сказать ошибка в коде — error in code, но нельзя сказать ошибка в кодах.

Употребляется в выражениях писать код, верстать, программировать, (например верстать сайтto code a site).

Colspan

Объединение столбцов

Свойство элемента таблицы (теги <td> или <th>), которое устанавливает число ячеек, которые должны быть объединены по горизонтали.

Запись в HTML-коде:

<td colspan="значение">...</td>

Column

Cтолбец, колонка

Вертикальная область в таблице, раскладке или тексте.

Content

Содержимое

Любое информационно значимое либо содержательное наполнение информационного ресурса или веб-сайта. Контентом называются тексты, мультимедиа, графика. Однако чаще всего контентом называют текстовое наполнение веб-сайта. В HTML-документе под контентом понимают часть служебной информации в одноименном поле. В этом поле размещают описание-резюме данного интернет-ресурса. Контент очень важен для поисковых машин.

Как одну из разновидностей контента выделяют мобильный контент. Под мобильным контентом подразумевают цифровой контент, который адресован владельцам мобильных устройств.

В качестве мобильного контента чаще всего можно встретить:

  • текстовые файлы;
  • цифровые картинки, (допустим, в формате .gif или .jpg и прочие);
  • звуковые файлы (.midi, mp3 и прочие);
  • видеофайлы (.avi, .mp4, .mpeg и прочие);
  • а также другие цифровые файлы, которые можно загружать в мобильные устройства при помощи беспроводной связи.

Cross-browser

Кроссбраузерный

Кроссбраузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично. Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности. Понятие «кросс-браузерность» очень часто путают с попиксельным соответствием, что на самом деле является разными понятиями. Т.к. веб-технологии все время развиваются, приемлемую кросс-браузерность можно обеспечить только для последних версий различных браузеров.

Часто возникает много проблем с версиями Internet Explorer ниже 10, поэтому многие разработчики веб-сайтов не беспокоятся о кросс-браузерности, а ставят страницу-заглушку, то есть пользователь Internet Explorer может видеть лишь одну страницу, на которой ему рекомендуется сменить браузер, без возможности увидеть контент сайта.

Cross-platform

Кроссплатформенный

Кроссплатформенность — способность программного обеспечения функционировать в нескольких различных операционных системах или на разных аппаратных платформах.

CSS Working Group (CSSWG)

Рабочая группа CSS

Рабочая группа CSS отвечает за развитие стандарта CSS.

Некоторые члены рабочей группы:

  • Adobe Systems Inc.
  • Antenna House, Inc
  • Apple, Inc.
  • HP
  • International Webmasters Association / HTML Writers Guild (IWA-HWG)
  • Microsoft Corporation
  • Mozilla Foundation
  • Opera Software
  • Rochester Institute of Technology
  • Sun Microsystems, Inc.
  • The Boeing Company
  • Universidad de Oviedo
  • W3C Invited Experts
  • W3C/ERCIM
D

Design

Дизайн

Деятельность по проектированию эстетических свойств промышленных или иных изделий («художественное конструирование»), а также результат этой деятельности (например, в таких словосочетаниях, как «дизайн автомобиля»).

Считается, что в более широком смысле дизайн призван не только к художественному конструированию, но должен участвовать в решении более широких социально-технических проблем функционирования производства, потребления, существования людей в предметной среде, путём рационального построения её визуальных и функциональных свойств.

Теоретической основой дизайна является техническая эстетика.

Веб-дизайн — отрасль веб-разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений. Веб-дизайнеры проектируют логическую структуру веб-страниц, продумывают наиболее удобные решения подачи информации и занимаются художественным оформлением веб-проекта. В результате пересечения двух отраслей человеческой деятельности грамотный веб-дизайнер должен быть знаком с последними веб-технологиями и обладать соответствующими художественными качествами.

Disabled

Неактивный

Свойство элемента формы (поля, кнопки или чекбокса), которое блокирует доступ к нему или его изменение. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такой элемент поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов. Заблокированное в поле значение не передается на сервер. Состояние элемента формы, в котором его изменение запрещено, напр. неактивная кнопка — disabled button.

Запись в HTML-коде:

<input type="..." disabled>

Display

Вид

Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.

Возможные значения:

Значение Описание
block Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
inline Элемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
inline-table Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.
list-item Элемент выводится как блочный и добавляется маркер списка.
none Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента.
run-in Устанавливает элемент как блочный или встроенный в зависимости от контекста.
table Определяет, что элемент является блочной таблицей подобно использованию тега <table>.
table-caption Задает заголовок таблицы подобно применению тега <caption>.
table-cell Указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>).
table-column Назначает элемент колонкой таблицы, словно был добавлен тег <col>.
table-column-group Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <colgroup>.
table-footer-group Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <tfoot>.
table-header-group Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <thead>.
table-row Элемент отображается как строка таблицы (тег <tr>).
table-row-group Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <tbody>.

DOM

Объектная модель документа

DOM — это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов.

Модель DOM не накладывает ограничений на структуру документа. Любой документ известной структуры с помощью DOM может быть представлен в виде дерева узлов, каждый узел которого представляет собой элемент, атрибут, текстовый, графический или любой другой объект. Узлы связаны между собой отношениями «родительский-дочерний».

Изначально различные браузеры имели собственные модели документов (DOM), несовместимые с остальными. Для обеспечения взаимной и обратной совместимости, специалисты международного консорциума W3C классифицировали эту модель по уровням, для каждого из которых была создана своя спецификация. Все эти спецификации объединены в общую группу, носящую название «W3C DOM».

DOCTYPE

Доктайп

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Dropdown

Выпадающее меню

Элемент интерфейса, раскрывающий дополнительную информациию при активации.

Запись в HTML-коде:

<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
E

Easing

Плавность

Функция плавности, которая описывает изменение скорости анимации с помощью ключевых слов или кривых Безье, напр. плавность перехода линейная — transition easing is linear.

em

Тег <em> предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.

Enabled

Активный

Псевдокласс :enabled используется для применения стиля к доступным (не заблокированным) элементам форм. По умолчанию, все элементы форм являются доступными, если в коде HTML к ним не добавляется атрибут disabled.

Запись в CSS-коде:

div:enabled { ... }

Engine

Двигатель, движок

Например, браузеры Google Chrome и Safari работает на движке Webkit.

F

Fallback

Резервный вариант для отображения того или иного элемента в случае проблем с отображением стилей, работой javascript или jquery

Favicon

Фавикон

Значок сайта в формате ICO или PNG (обычно 16×16 пикселей).

Fieldset

Группа полей

Элемент <fieldset> предназначен для группирования элементов формы. Такая группировка облегчает работу с формами, содержащими большое число данных. Например, один блок может быть предназначен для ввода текстовой информации, а другой — для флажков.

Браузеры для повышения наглядности отображают результат использования тега <fieldset> в виде рамки.

Запись в HTML-коде:

<form>
<fieldset>...</fieldset>
</form>

Figure

Фигура

Элемент <figure> используется для группирования любых элементов, например, изображений и подписей к ним.

Запись в HTML-коде:

<figure>...</figure>

Figcaption

Элемент <figcaption> содержит описание для тега <figure>. Тег <figcaption> должен быть первым или последним элементом в группе.

Запись в HTML-коде:

<figure>
<figcaption>Описание</figcaption>
</figure>

Float

Плавающий

Свойство CSS-кода, которое определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент. , свойство блока, заставляющее последующие блоки обтекать его, напр. раскладка на плавающих блоках — float layout.

Значения

  • left — выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.
  • right — выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
  • none — обтекание элемента не задается.
  • inherit — наследует значение родителя.

Font

Шрифт

Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.

Значения:

В качестве обязательных значений свойства font указывается размер шрифта и его семейство. Остальные значения являются опциональными и задаются при желании. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно.

  • inherit — наследует значение родителя.

Допускается в качестве значения использовать ключевые слова, определяющие шрифт различных элементов операционной системы пользователя.

  • caption — шрифт для текста элементов форм вроде кнопок.
  • icon — шрифт для текста под иконками.
  • menu — шрифт применяемый в меню.
  • message-box — шрифт для диалоговых окон.
  • small-caption — шрифт для подписей к небольшим элементам управления.
  • status-bar — шрифт для строки состояния окон.

Свойства шрифта:

font-weight — насыщенность

  • font-weight:normal — нормальная
  • font-weight:bold — полужирная, (не «жирный»)
  • font-weight:bolder — жирнее
  • font-weight:lighter — светлее

font-style — стиль шрифта

  • font-style:normal — прямой
  • font-style:italic — курсив
  • font-style:oblique — наклонный

font-size — размер шрифта, кегль

font-family — семейство шрифта, гарнитура

  • font-family:serif — с засечками
  • font-family:sans-serif — без засечек
  • font-family:monospace — моноширинный

Footer

Подвал

1. Блок в нижней части страницы. Содержит полезную, но не первостепенную информацию. Виден на всех страницах сайта. В футер можно вынести: копирайт, название студии, которая разрабатывала сайт, контакты.

2. Тег <footer> задаёт «подвал» сайта или раздела, в нём может располагаться имя автора, дата документа, контактная и правовая информация.

Запись в HTML-коде:

<footer>...</footer>

Framework

Фреймворк

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

Front-end

Фронтенд

1. Область технологий для разработки веб-интерфейсов, включает вспомогательные инструменты и технологии работающие в браузере (clientside).

2. Внешняя часть серверной системы, отвечающая за приём данных, отправку ответов и генерацию кода для браузера (serverside).

Full screen

Полноэкранный режим

Поведение программы или её части, в котором она занимает весь экран целиком.

G

Graceful degradation

«Изящная деградация», отказоустойчивость

Веб-дизайн, который основан на принципе graceful degradation, изначально предназначен для просмотра в современных браузерах, тогда как в старых браузерах он будет отображаться с тем же функционалом и набором возможностей, но при этом с меньшим количеством особенностей и «украшателств» (например, могут быть отключены некоторые скрипты, которые «подвешивают» старые браузеры).

Gradient

Градиент

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

Проще говоря, плавный переход от одного (например, цвета) к другому.

Значения в коде:
linear gradient — линейный градиент
radial gradient — радиальный градиент
conical gradient — конический градиент

Grid

Сетка

Способ упорядочить расположение элементов в дизайне с помощью вертикального или горизонтального ритма. Например, модульная сетка — module grid.

H

Header

Шапка

1. Характерная визуальная область в начале страницы.

2. Тег <header> задает «шапку» сайта или раздела, в которой обычно располагается заголовок.

Запись в HTML-коде:

<header>...</header>

Height

Высота

1. Атрибут height. Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег <img>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, height="100%" означает, что рисунок будет растянут на всю высоту веб-страницы. Добавление только одного атрибута width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным.

2. Свойство, которое устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег <img>). Высота не включает толщину границ вокруг элемента, значение отступов и полей.

Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не происходило, добавляют overflow: auto к стилю элемента.

Значения:
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. auto устанавливает высоту исходя из содержимого элемента

I

Implement

Внедрять, реализовывать

Например, Firefox внедрил поддержку всего — Firefox has implemented support of everything.

Inline

Строчный

  • inline block — строчный блок
  • inline box — элемент строки в строчном форматировани: часть наполнения контейнера строки, к которой непосредственно применяются CSS-правила, напр. анонимный элемент строки — anonymous inline box.
  • inline element — строчный элемент
  • inline styles — локальные стили

Input

Поле (ввода)

1. Элемент формы.

2. Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.

Запись в HTML-коде:

<input атрибуты>

Атрибуты:

  • accept — Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
  • accesskey — Переход к элементу с помощью комбинации клавиш.
  • align — Определяет выравнивание изображения.
  • alt — Альтернативный текст для кнопки с изображением.
  • autocomplete — Включает или отключает автозаполнение.
  • autofocus — Устанавливает фокус в поле формы.
  • border — Толщина рамки вокруг изображения.
  • checked — Предварительно активированный переключатель или флажок.
  • disabled — Блокирует доступ и изменение элемента.
  • form — Связывает поле с формой по её идентификатору.
  • formaction — Определяет адрес обработчика формы.
  • formenctype — Устанавливает способ кодирования данных формы при их отправке на сервер.
  • formmethod — Сообщает браузеру каким методом следует передавать данные формы на сервер.
  • formnovalidate — Отменяет встроенную проверку данных на корректность.
  • formtarget — Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
  • list — Указывает на список вариантов, которые можно выбирать при вводе текста.
  • max — Верхнее значение для ввода числа или даты.
  • maxlength — Максимальное количество символов разрешенных в тексте.
  • min — Нижнее значение для ввода числа или даты.
  • multiple — Позволяет загрузить несколько файлов одновременно.
  • name — Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
  • pattern — Устанавливает шаблон ввода.
  • placeholder — Выводит подсказывающий текст.
  • readonly — Устанавливает, что поле не может изменяться пользователем.
  • required — Обязательное для заполнения поле.
  • size — Ширина текстового поля.
  • src — Адрес графического файла для поля с изображением.
  • step — Шаг приращения для числовых полей.
  • tabindex — Определяет порядок перехода между элементами с помощью клавиши Tab.
  • type — Сообщает браузеру, к какому типу относится элемент формы.
  • value — Значение элемента.
K

Kerning

Кернинг

Избирательное изменение интервала между буквами в зависимости от их формы.

Технология автоматического кернинга, появившаяся в полиграфии после внедрения фотонабора (а затем и компьютерного набора), включает подбор межбуквенных интервалов для конкретных пар букв с целью улучшения внешнего вида и удобочитаемости текста. Такой избирательный подбор позволяет компенсировать неравномерности визуальной плотности текста, получаемой при использовании стандартных апрошей для каждой буквы. Легко видеть, что расстояние между парами AV и Wa (в верхней части рисунка) выглядит разным, хотя формально оно одинаково. Для того, чтобы между любыми двумя буквами расстояние было визуально одинаковым, и применяется кернинг.

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

Keyframe

Ключевой кадр

Одна из заданных точек анимации, изменения между которыми происходят автоматически.

Keyframe animation

Покадровая анимация

Способ задания анимации в CSS с помощью ключевых кадров.

Запись в CSS-коде:

@keyframes animation_name {
0% { opacity: 0; }
100% { opacity: 1; }
}
L

Layout

Расположение, раскладка

Расположение основных блоков на странице, например раскладка в 3 столбца — 3 columns layout.

Letter-spacing

Межбуквенное расстояние, трекинг

Свойство, которое определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данное свойство. Допустимо использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста.

Запись в CSS-коде:

p { letter-spacing: 5px; }

Значения:
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Наилучший результат дает использование относительных единиц основанных на размере шрифта (em и ex).

  • normal — задает интервал между символами как обычно.
  • inherit — наследует значение родителя.


Line-box

контейнер строки в строчном форматировании: виртуальный контейнер, содержащий в себе все элементы одной строки.

Line-height

Высота строки, интерлиньяж

Свойство CSS-кода, которое устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. Отрицательное значение межстрочного расстояния не допускается.

Запись в CSS-коде:

h1 { line-height: 60%; }
p { line-height: 1.5; }

Значения:
Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пикселы (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берется высота шрифта.

  • normal — расстояние между строк вычисляется автоматически.
  • inherit — наследует значение родителя.

List

Список

Последовательное перечисление группы элементов.

  • ordered list — упорядоченный список, отсортированный по какому-либо принципу (тег <ol>).
  • unordered list — неупорядоченный список, в котором порядок следования не имеет значения (тег <ul>).

List-style

Cтиль списка

Универсальное свойство CSS-кода, позволяющее одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера.

M

Margin

Внешний отступ

Свойство CSS-кода, которое устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.

Значения:
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.

Число значений Запись в CSS-коде Результат
1 margin: 5px Отступы будут установлены одновременно от каждого края элемента.
2 margin: 5px 10px Первое значение устанавливает отступ от верхнего и нижнего края, второе — от левого и правого.
3 margin: 10px 5px 10px Первое значение задает отступ от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
4 margin: 5px 5px 5px 5px Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.

Matrix

Матрица (трансформации)

Описание трансформации объекта с помощью матрицы.

Media queries

Медиа-запросы

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

Возможности медиа-запросов не ограничиваются выявлением мобильных устройств, с их помощью можно создавать адаптивный макет. Такой макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Медиа-запросы ограничивают ширину макета и при достижении этого значения (к примеру за счёт уменьшения окна или при просмотре на устройстве с указанным размером) уже применяется другой стиль.

Синтакис

Тип Описание
all Все типы. Это значение используется по умолчанию.
braille Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
embossed Принтеры, использующие для печати систему Брайля.
handheld Смартфоны и аналогичные им аппараты.
print Принтеры и другие печатающие устройства.
projection Проекторы.
screen Экран монитора.
speech Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
tty Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
tv Телевизоры.

Mixin

Примесь

Набор свойств, расширяющий поведение другой сущности, встречается в CSS-препроцессорах и подходах к JavaScript.

Mock-up

Макет

Внешний вид или дизайн сайта различной степени детализации, например дизайнер прислал макет страницы — designer sent a page mock-up.

Modal

Модальный

Блокирующий интерфейс для выполнения какого-либо действия, напр. модальный диалог — modal dialog.

Проще говоря, всплывающее окно на сайте.

Multiple

Множественный

Атрибут multiple позволяет указывать одновременно несколько файлов в поле для загрузки файлов, а также несколько адресов электронной почты. При использовании двух и более почтовых адресов они должны перечисляться через запятую.

Запись в HTML-коде:

<input type="file" multiple>
<input type="email" multiple>

Multiple columns

Мультиколонки

Механизм из CSS, позволяющий выстроить текст в несколько колонок.

N

Nested

Вложенный

Находящийся внутри чего-либо, например папка images имет вложенную папку catalog, которая в свою очередь имеет вложенную папку products. Это называется двойная вложенность — double nesting.

Node

Узел

Элемент структуры документа.

Запись в HTML-коде:

<div>
<span>Текст</span>
</div>
div — родительский узел (parent node),
span — дочерний узел (child node).

O

Opacity

Прозрачность

Свойство CSS-кода, которое определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.

Синтаксис

p { opacity: значение }

Значения:
В качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.

Opaque

Непрозрачный

Степень непрозрачности. Например, непрозрачен на 75% (opaque by 75%), значит прозрачность (opacity) 25%.

Outline

Обводка

Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента. В отличие от линии, задаваемой через border, свойство outline не влияет на положение блока и его ширину. Также нельзя задать параметры линии на отдельных сторонах элемента, outline применяется сразу ко всем четырём сторонам.

Значения:

  • outline-color — задает цвет линии в любом допустимом для CSS формате.
  • outline-style — стиль линии.
  • outline-width — толщина границы.
  • inherit — наследует значение родителя.
P

Package manager

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

Padding

Внутренний отступ

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

Значения:
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.

Число значений Запись в CSS-коде Результат
1 padding: 5px Поля будут установлены одновременно от каждого края элемента.
2 padding: 5px 10px Первое значение устанавливает поля от верхнего и нижнего края, второе — от левого и правого.
3 padding: 10px 5px 10px Первое значение задает поле от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
4 padding: 5px 5px 5px 5px Поочередно устанавливается поля от верхнего, правого, нижнего и левого края.

Pagination

Постраничная навигация

1. Cписок ссылок с номерами страниц, на которые разбит документ.

2. Рзделение на страницы, разделение документа на отдельные страницы для удобства чтения, загрузки или других целей.

Pattern

Паттерн

Формализованный подход к написанию кода. Например, паттерны JavaScript — JavaScript patterns.

Performance

Быстродействие

Характеристика скорости загрузки, отрисовки и т.п. Например, быстродействие CSS.

Pixel

Пиксель

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

Polyfill

Полифил

Скрипт, воссоздающий недостающую функциональность.

Popup

Всплывающее окно

Отдельное окно или элемент интерфейса, появляющийся поверх текущего.

Position

Позиционирование

Свойство CSS-кода, которое устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

Синтаксис:
position: absolute | fixed | relative | static | inherit

Значения:

  • absolute — указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
  • fixed — по своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
  • relative — положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
  • static — элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
  • inherit — наследует значение родителя

Preprocessor

Препроцессор

Инструмент, преобразующий код из одного синтаксиса в другой. Например, CSS-препроцессор SASS — SASS CSS preprocessor.

Promises

Промисы

Способ асинхронного выполнения скриптов, противопоставляется использованию обратных вызовов.

Progress bar

Индикатор выполнения

Эемент интерфейса, отражающий прогресс выполнения операции.

Progressive enhancement

Прогрессивное улучшение

Подход, при котором все браузеры получают базовую функциональность, а большее получают только способные на это, например скруглённые углы, градиенты и тени. Противоположный подход — graceful degradation.

R

Radio button

Радиокнопка

Элемент интерфейса, который позволяет пользователю выбрать одну опцию (пункт) из предопределенного набора (группы).

Запись в HTML-коде:

<input type="radiobutton">

Rem

Рем

Единица измерения в CSS, которая зависит от размера шрифта корневого элемента html.

Reset

Сброс

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

В веб-разработке обычно используется понятин сброс стилей по умолчанию в CSS, чтобы исключить различное отображение элементов интрефейса в разных браузерах.

Responsive design

В отличии от адаптивного дизайна, который означает «резиновый» макет, изменяющийся в зависимости от установленного экрана и размера устройств, отзывчивый (responsive) дизайн — это, в действительности, разновидность адаптивного дизайна, представляющая собой только «резиновый» макет, т.е. макет, который трансформируется в зависимости от ширины экрана.

Основное сходство между этими двумя способами заключается в том, что они позволяют приспосабливать сайты к мобильным устройствам и различным расширениям экрана, в конечном итоге обеспечивая пользователей мобильных устройств лучшими возможностями. В тоже время, эти методы отличаются по своей структуре.
Сайты, основывающиеся на отзывчивом (responsive) дизайне, предоставляют всем устройствам одни и те же наборы URL, где каждый URL обеспечивает все устройства общим HTML кодом, поэтому модификация сайта под различные экраны достигается путем использования лишь CSS кода. Сайты, сверстанные на адаптивном (adaptive) веб-дизайне, динамически сообщают всем устройствам общие URL, но каждый URL содержит различный HTML (и CSS) код, в зависимости от типа аппаратного обеспечения.

Row

Строка, ряд

Горизонтальная область в таблице (тег <tr>) или раскладке.

Rowspan

Объединение строк

Атрибут таблицы, который устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк., HTML-атрибут для объединения нескольких ячеек таблицы в одном столбце.

Запись в HTML-коде:

<td rowspan="число">...</td>
S

Scaffolding

Скафолдинг

Автоматическая генерация кода по описанию, метод метапрограммирования.

Script

Скрипт

1. Инструкции, описывающие поведение страниц.

2. Тег <script> предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке. Скрипты могут располагаться во внешнем файле и связываться с любым HTML-документом. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах.

<script> может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.

Запись в HTML-коде:

<script type="javascript">...</script>
<script type="javascript" src="URL"></script>

Semantics

Cемантика

Cмысловая нагрузка HTML-элементов

Семантическая вёрстка, или семантический HTML-код, — это подход к созданию веб-страниц на языке HTML, основанный на использовании HTML-тегов в соответствии с их семантикой (предназначением), а также предполагающий логичную и последовательную иерархию страницы. Он противопоставляется подходу, при котором написание HTML-кода определяется внешним видом веб-страницы. Для оформления веб-страниц, написанных в соответствии с семантикой, используются каскадные таблицы стилей (CSS). Стандарт HTML с самого начала включал в себя ряд семантических тегов, но большую популярность семантическая вёрстка получила после начала работ над HTML5.

Server-side

Cерверсайд

Область веб-технологий, работающих на сервере, часто синоним бэкенда.

Shadow DOM

Теневой DOM, теневая модель документа

Shadow DOM – это внутренний DOM элемента, который существует отдельно от внешнего документа. В нём могут быть свои ID, свои стили и так далее. Причём снаружи его, без применения специальных техник, не видно, поэтому не возникает конфликтов.

Shim

Шим

Код, помогающий унифицировать работу с браузерами, обычно реализует недостающую или нормализует существующую поддержку.

Sidebar

Боковая панель

Боковая часть сайта со второстепенным содержимым, например, часто используется для размещения навигации по разделам, котнтактной информации, рекламы и т.п.

Source maps

Карты кода

Специальная разметка, позволяющая привести в соответствие исходные файлы и скомпилированный код для отладки.

Style

Стиль

Тег <style> применяется для определения стилей элементов веб-страницы. Тег <style> необходимо использовать внутри контейнера <head>. Можно задавать более чем один тег <style>.

Запись в HTML-коде:

<head>
<style type="text/css">
...
</style>
</head>
T

Tab

Вкладка

1. Один из слоёв интерфейса сайта или программы, который активируется выбором его заголовка.

2. Клавиша табуляции, вставляет символ табуляции, переключает фокус на следующий элемент интерфейса, либо дополняет частично набранное слово.

3. Символ табуляции, имеет настраиваемую ширину и используется для отступов в коде.

Tag

Тег, ярлык, метка

Идентификатор для категоризации, описания, поиска данных. Ключевое слово или фраза для тематического группирования информации.

Textarea

Текстовая область

Поле <textarea> представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста. В отличие от тега <input> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.

Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля.

Запись в HTML-коде:

<textarea>...</textarea>

Text-align

Выравнивание, выключка

Свойство CSS-кода, которое определяет горизонтальное выравнивание текста в пределах элемента.

Значения:

  • center — выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
  • justify — выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.
  • left — выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
  • right — выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится.
  • auto — не изменяет положение элемента.
  • inherit — наследует значение родителя.
  • start — аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево.
  • end — аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.

Text-shadow

Тень текста

Свойство CSS-кода, которое добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия. Свойство text-shadow может работать совместно с псевдоэлементами :first-letter и :first-line.

Допускается указывать несколько параметров тени, разделяя их между собой запятой. В CSS3 учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу. В CSS2 порядок наоборот: первая тень размещается в самом низу, а последняя на самом верху.

Thumbnail

Миниатюра

Уменьшенная до небольших размеров копия изображения для компактного представления пользователю. Такие уменьшенные копии являются обычной практикой в любых программах и веб-приложениях для работы с графическими файлами (растровыми, векторными, фрактальными). При этом миниатюры могут широко использоваться для любой информации, которую пользователь привык воспринимать визуально (чертежи САПР, 3D-модели, скриншот текущего места в сохранении в игре и прочее). Миниатюры могут генерироваться каждый раз заново, но если это может оказаться ресурсоёмким, их специально кэшируют. Для этого они размещаются или все вместе в определённом хранилище (папка, единый файл, база данных), или уменьшенное изображение дополнительно встраивается в файл, если формат файла это поддерживает. Последний случай ещё и удобен для сторонних разработчиков, так как им, при обзоре файлов, для отображения миниатюр не обязательно знать формат полностью.

Title

Заголовок

1. Тег <title>. Определяет заголовок документа. Элемент <title> не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 1). Допускается использовать только один тег <title> на документ и размещать его в контейнере <head>.

Запись в HTML-коде:

<title>Заголовок страницы</title>

2. Атрибут title. Описывает содержимое элемента в виде всплывающей подсказки, которая появляется при наведении курсора на элемент. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменен с помощью HTML-кода или стилей.

Запись в HTML-коде:

<a href="#" title="Заголовок ссылки">Текст ссылки</a>

Toggle

Переключать

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

Tooltip

Подсказка

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

Типы подсказок:

  • всплывающая подсказка — появляется при подведении курсора к интересующему объекту или в случае недопустимого действия (например, ввода текста вместо числа), в случае редакторов с автодополнением всплывающие подсказки могут появляться при вводе названий функций и переменных, указывая их характеристики (тип, прототип, количество и тип аргументов и т. д.);
  • подсказка при запуске — появляющееся после запуска программы окно, демонстрирующее краткий текст по необычным или нестандартным возможностям программы, обычно при каждом запуске текст меняется, позволяя пользователю изучать возможности программы «походя», в ряде случаев появление окна с текстом, требующим особых действий для закрытия, может расцениваться пользователями как раздражающее;
  • контекстная — в некоторых типах интерфейсов командной строки — появляющаяся при вводе команды и вопросительного знака, при этом введённый текст не исчезает, а подсказка появляется над введёным текстом, позволяя понять, какие символы следует вводить далее.

Touch

Прикосновение

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

Transform

Трансформация

Свойство CSS-кода, которое трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.

Функции трансформации:

matrix — задаёт матрицу преобразований

rotate — поворот элемента на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.

scale — масштаб элемента по горизонтали и вертикали.

scaleX — масштабирует элемент по горизонтали.

scaleY — масштабирует элемент по вертикали.

skewX — наклоняет элемент на заданный угол по вертикали.

skewY — наклоняет элемент на заданный угол по горизонтали.

translate — сдвигает элемент на заданное значение по горизонтали и вертикали.

translateX — сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.

translateY — сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.

Transition

Переход

Универсальное свойство, которое позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function и transition-delay. Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдоэлемента :hover или :active, а также динамически через JavaScript.

Typography

Типографика

Оформление текста с помощью выбора гарнитуры, параметров строки и других.

U

Unit

Единица изменения

Например, единица измерения rem — rem unit.

Utility

Утилита

Вспомогательная компьютерная программа в составе общего программного обеспечения для выполнения специализированных типовых задач, связанных с работой оборудования и операционной системы (ОС).

Утилиты предоставляют доступ к возможностям (параметрам, настройкам, установкам), недоступным без их применения, либо делают процесс изменения некоторых параметров проще (автоматизируют его).

Утилиты могут входить в состав операционных систем, идти в комплекте со специализированным оборудованием или распространяться отдельно.

V

Valid

Валидный

Валидный HTML-код — это HTML-код, написание которого соответствует стандарту, указанному в DOCTYPE.

Validator

Валидатор

Компьютерная программа, которая проверяет соответствие какого-либо документа, потока данных, или фрагмента кода определённому формату, проверяет синтаксическую корректность документа или файла — то есть, производит валидацию.

Vendor prefix

Браузерный префикс

Приставка к CSS-свойству. Например, -webkit-, -moz-, -o-. Согласно спецификации CSS 2.1 CSS идентификаторы, которые начинаются с "-" или "_" зарезервированы для CSS расширений браузеров. Наличие этих знаков в начале свойства гарантирует то, что в будущем расширения браузеров никогда не пересекутся со стандартными CSS свойствами. Т.е. ни один браузер не начнет «случайно» понимать свойство, которое для него не предназначено.

Vertical-align

Вертикальное выравнивание

Свойство CSS-кода, которое выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.

Значения:

  • baseline — выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента.
  • bottom — выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех.
  • middle — выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента.
  • sub — элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется.
  • super — элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним.
  • text-bottom — нижняя граница элемента выравнивается по самому нижнему краю текущей строки.
  • text-top — верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки.
  • top — выравнивание верхнего края элемента по верху самого высокого элемента строки.
  • inherit — наследует значение родителя.

В качестве значения также можно использовать проценты, пикселы или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчет ведется от значения свойства line-height, при этом 0% аналогично значению baseline.

Для выравнивания по вертикали в ячейках таблицы применяются следующие значения.

  • baseline — выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента.
  • bottom — выравнивает по нижнему краю ячейки.
  • middle — выравнивает по середине ячейки.
  • top — выравнивает содержимое ячейки по ее верхнему краю.

Viewport

Вьюпорт

1. Видимая область документа в рамках экрана.

2. Элемент meta name="viewport", управляющий адаптацией страниц на мобильных устройствах.

W

World Wide Web Consortium (W3C)

Консорциум Всемирной паутины — организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины. Консорциум возглавляет сэр Тимоти Джон Бернерс-Ли, автор множества разработок в области информационных технологий.

W3C разрабатывает для Интернета единые принципы и стандарты (называемые «рекомендациями», англ. W3C Recommendations), которые затем внедряются производителями программ и оборудования. Таким образом достигается совместимость между программными продуктами и аппаратурой различных компаний, что делает Всемирную сеть более совершенной, универсальной и удобной.

Миссия W3C: «Полностью раскрыть потенциал Всемирной паутины, путём создания протоколов и принципов, гарантирующих долгосрочное развитие Сети».

Web standards

Веб-стандарты

Веб-стандарты, как следует из их названия, являются стандартами в области веб-технологий. Эти стандарты являются рекомендациями для разработчиков программного обеспечения и для веб-мастеров. Служат веб-стандарты для того, чтобы, с одной стороны, пользователи ПО без проблем и неудобств могли пользоваться сетью интернет, а с другой стороны, для того, чтобы разработчики программного обеспечения или веб-мастера были уверены в работоспособности своих продуктов.

Исторически сложилось так, что в начале 90-х годов XX века развязалась так называемая "война браузеров" между компанией Netscape и Microsoft. Суть войны заключалась в том, что разработчики веб-браузеров стремились привнести в продукты своих разработок собственные новые функции, но при этом совершенно не заботились о совместимости технологий и не согласовывали свои действия с разработчиками конкурирующей компании. По этой причине начало возрастать недовольство как среди людей, создающих сайты, так и среди людей, пользующихся сетью интернет — ведь сайты, которые были написаны специально для Netscape Navigator крайне плохо работали в Microsoft Intrnet Explorer и наоборот посредством Internet Explorer почти невозможно было просматривать сайт, написанный для Netscape Navigator.

В 1994 году в Массачусетском технологическом институте при поддержке CERN, DARPA и Европейской Комиссии появилась организация World Wide Web Consortcium или, сокращенно, W3C. Целью консорциума по сей день является упорядочивание всех веб-технологий для того, чтобы обеспечить их доступность как можно большему числу людей всего мира.

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

Width

Ширина

1. Атрибут width. Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится тег <img>. В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width="100%" означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного атрибута width или height сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным.

Запись в HTML-коде:

<img width="100%">

2. Свойство, которое устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег <img>). Высота не включает толщину границ вокруг элемента, значение отступов и полей.

Если содержимое блока превышает указанную ширину, то ширина элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не происходило, добавляют overflow: auto к стилю элемента.

Значения:
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. auto устанавливает ширину исходя из содержимого элемента

Word-spacing

Межсловный пробел

Свойство CSS-кода, которое устанавливает интервал между словами. Если для текста задано выравнивание через text-align со значением justify (выравнивание по ширине), то интервал между словами будет установлен принудительно, но не меньше значения, указанного через word-spacing.

Workaround

Обходное решение (приём)

Обходной приём, workaround, паллиатив, на техническом жаргоне — «костыль» — относительно быстрое и простое решение проблемы, применяемое для срочного устранения её последствий, но не влияющее на причины её возникновения. Обходной приём обычно является временным, или неполным решением, не отвечающим требованиям к дальнейшему развитию системы, требующим в дальнейшем замены на окончательное, более полное. Очень часто обходные приёмы требуют творческого подхода и нестандартного мышления. Обходные решения применяются в разных областях человеческой деятельности, когда радикальное решение по какой-то причине не может быть применено вообще или требует слишком много времени для реализации.

Основной проблемой обходных приёмов является то, что их применение снижает мотивацию к радикальному решению проблемы и временный по своей сути «костыль» остаётся в качестве постоянного решения, сам по себе становясь источником дополнительных проблем. В технике реализация обходного приёма может стать причиной отказа системы в будущем. К примеру, в компьютерном программировании обходные приёмы часто используются, чтобы обойти конкретную ошибку в библиотеке. Когда библиотека наконец-то будет исправлена, обходной приём, рассчитанный на ошибочное поведение библиотеки, может стать причиной сбоя в программе.

Пасхальное яйцо
Хочу знать больше!