Преподаватель программы обучения «HTML-верстка», технический директор digital-агентства PLUS8 Дмитрий Демидовский составил для «Нетологии» словарь из 21 термина, с помощью которых вы сможете лучше понимать разработчиков.
1. НА ОДНОМ ЯЗЫКЕ: 21 ТЕРМИН ИЗ HTML-
ВЕРСТКИ, ЧТОБЫ ЛУЧШЕ ПОНИМАТЬ
РАЗРАБОТЧИКОВ
ПОДГОТОВЛЕНО:
2. Преподаватель программы обучения «HTML-верстка»,
технический директор digital-агентства PLUS8 Дмитрий
Демидовский составил для «Нетологии» словарь из 21
термина, с помощью которых вы сможете лучше
понимать разработчиков.
На одном языке: 21 термин из html-версткиНетология
ОТ СОСТАВИТЕЛЕЙ
3. Означают практически одно и то же: код, работающий
в браузере.
Для сравнения, в отличие от фронтэнда, бэкэнд
(backend) исполняется на сервере.
ВЕРСТКА, FRONTEND
4. Контент сайта (тексты, изображения, видео, аудио),
сгруппированный по смыслу в иерархические блоки,
обозначенные тегами.
HTML-РАЗМЕТКА
5. Главное и единственное средство разметки контента.
Обозначается треугольными скобками.
Некоторые теги имеют начало и конец: <тег>…</тег>.
Некоторые могут быть сами по себе.
HTML-ТЕГ
7. Дополнительный параметр тега, который определяет его вид или
поведение. Пример атрибута:
<тег имя_атрибута="значение_атрибута">.
Один тег может иметь много атрибутов.
АТРИБУТ
8. СТИЛИ, CSS
Cascading Style Sheets (CSS) — каскадные таблицы
стилей. Набор правил для оформления элементов.
11. СКРИПТЫ, JAVASCRIPT, JS
Скрипты — «народное название» Javascript. JS — сокращение от
Javascript.
Код, отвечающий за взаимодействие с пользователем и за
динамические элементы на сайте — слайдеры, меню, некоторые
формы.
Иногда его путают с Java. Это неправильно — это два разных
языка с разными задачами.
13. Специальные теги, которые не отображаются
непосредственно на веб-странице, но хранят
дополнительную информацию о документе:
кодировка, ключевые слова, данные для поисковых
роботов и социальных сетей.
МЕТАТЕГИ, МЕТАДАННЫЕ
14. Cпособ применять различные CSS-правила в зависимости от
используемого устройства.
Пример медиазапроса:
@media screen and (max-width: 480px) { этот код будет работать
только на мобильных устройствах с экраном меньше 480 пикс. }
МЕДИАЗАПРОСЫ, MEDIAQUERIES
15. Фиксированная верстка имеет постоянную ширину,
обычно около 1000px. На больших экранах центрируется,
на маленьких обрезается.
Пример фиксированной верстки — социальная сеть
«ВКонтакте».
ФИКСИРОВАННАЯ ВЕРСТКА (ФИКС)
16. Резиновая верстка подстраивается под экран в
определенных заданных пределах. Например, от 1024px
до 1920px.
Пример — «Яндекс.Почта».
РЕЗИНОВАЯ ВЕРСТКА (РЕЗИНА)
17. АДАПТИВНАЯ ВЕРСТКА (АДАПТИВ)
Верстка, которая подстраивается под любой
экран. Блоки могут перемещаться, скрываться и
показываться, а также менять свое поведение.
Пример — Smashing Magazine.
18. ФРЕЙМВОРК
Набор компонентов, с помощью которых можно
применять готовые решения для типовых задач
(адаптивные элементы, способы навигации, элементы
форм), а не писать их с нуля.
21. Подход, позволяющий ускорить загрузку и отрисовку
верстки. Реализуется не верстальщиком, а
разработчиками браузеров.
КЭШ БРАУЗЕРА
22. НTML5-технология, заменившая Flash в плане
отображения графики в браузере. Использует
аппаратное ускорение, программируется на Javascript,
позволяет делать сложную графику, в том числе
трехмерную.
КАНВАС, CANVAS
23. Дополнительные инструменты для обработки кода. Существуют
и для HTML, и для CSS, и для JS. Призваны ускорить и упростить
работу верстальщика за счет автоматизации и дополнительных
возможностей, которых нет в языках изначально.
Препроцессоры: для HTML — HAML, для CSS — SASS, для JS —
CoffeeScript.
Постпроцессоры: для CSS — Autoprefixer, для JS — yui compressor
ПРЕПРОЦЕССОРЫ И
ПОСТПРОЦЕССОРЫ
24. Переходим от теории к практике!
Хотите получить профессию HTML-
верстальщика и сделать свой первый макет
за 1,5 месяца практических занятий?
Жмите на кнопку.
ЗАПИСАТЬСЯ
25. Занятия от ведущих
специалистов Рунета
Обучение с
любого устройства
Открытые занятия
c экспертами Рунета.
3 раза в неделю.
Онлайн университет
для обучения наиболее
перспективным
профессиям Рунета. 1,5–
2,5 месяца.
Интерактивные курсы
по маркетингу и интернет-
бизнесу, 100+ курсов. Доступ
24/7!
FREE
26. ПРИСОЕДИНЯЙТЕСЬ К «НЕТОЛОГИИ»
В СОЦИАЛЬНЫХ СЕТЯХ
• Полезные статьи и видео по
маркетингу и менеджменту
• Материалы из курсов и
учебных программ
«Нетологии»
• Скидки и конкурсы на
бесплатное обучение