HTML HTML5 та інше
1
HTML
HTML5
1.1. Основы HTML
- Структура HTML-документа
- Тег <html>
- Тег <head>
- Тег <title>
- Тег <meta>
- Тег <style>
- Тег <link>
- Тег <script>
- Тег <body>
1.2. HTML-теги
1.3. HTML-атрибуты
1.4. HTML-текст
- Теги заголовков
- Теги для форматирования текста
- Теги для ввода «компьютерного» текста
- Теги для оформления цитат и определений
- Абзацы, средства переноса текста
1.5. HTML-ссылки
- Структура ссылки
- Абсолютный и относительный путь
- Якорь
- Как сделать изображение-ссылку
- Как сделать ссылку на телефонный номер, скайп или адрес электронной почты
- Атрибуты ссылок
1.6. HTML-изображения
- Тег <img>
- Адрес изображения
- Размеры изображения
- Форматы графических файлов
- Тег <map>
- Тег <area>
- Пример создания карты-изображения
1.7. HTML-таблицы
- Как создать таблицу
- Как создать строки (ряды) таблицы
- Как сделать ячейку заголовка столбца таблицы
- Как сделать ячейку тела таблицы
- Как добавить подпись (заголовок) к таблице
- Группирование строк и столбцов таблицы <colgroup> и <col>
- Группировка разделов таблицы <thead>, <tbody> и <tfoot>
- Как объединить ячейки таблицы
- Атрибуты элементов таблицы
- Пример создания таблицы
1.8. HTML-списки
- Маркированный список <ul>
- Нумерованный список <ol>
- Список определений <dl>
- Вложенный список
- Многоуровневый нумерованный список
1.9. Спецсимволы HTML
1.10. HTML-генераторы
1.11. Семантические элементы HTML5
1.11.1. Элемент документа
1.11.2. Метаданные документа
1.11.3. Разделы документа
- Элемент <body>
- Элемент <article>
- Элемент <section>
- Элемент <nav>
- Элемент <aside>
- Элементы <h1>, <h2>, <h3>, <h4>, <h5> и <h6>
- Элемент <header>
- Элемент <footer>
1.11.4. Группировка содержимого
- Элемент <p>
- Элемент <address>
- Элемент <hr>
- Элемент <pre>
- Элемент <blockquote>
- Элемент <ol>
- Элемент <ul>
- Элемент <li>
- Элемент <dl>
- Элемент <dt>
- Элемент <dd>
- Элемент <figure>
- Элемент <figcaption>
- Элемент <main>
- Элемент <div>
1.11.5. Семантика уровня текста
- Элемент <a>
- Элемент <em>
- Элемент <strong>
- Элемент <small>
- Элемент <s>
- Элемент <cite>
- Элемент <q>
- Элемент <dfn>
- Элемент <abbr>
- Элемент <ruby>
- Элемент <rb>
- Элемент <rt>
- Элемент <rtc>
- Элемент <rp>
- Элемент <data>
- Элемент <time>
- Элемент <code>
- Элемент <var>
- Элемент <samp>
- Элемент <kbd>
- Элементы <sub> и <sup>
- Элемент <i>
- Элемент <b>
- Элемент <u>
- Элемент <mark>
- Элемент <bdi>
- Элемент <bdo>
- Элемент <span>
- Элемент <br>
- Элемент <wbr>
1.11.6. Правки документа
1.12. HTML5-аудио
- Элемент <audio>
- Аудио кодеки
- Альтернативные медиа-ресурсы <source>
- Добавление субтитров и заголовков <track>
- Стилизованный пример аудио плеера
1.13. HTML5-видео
- Элемент <video>
- Встраиваемый интерактивный контент <embed>
- Видеокодеки
- Видеоконтейнеры
- Альтернативные медиа-ресурсы <source>
- Добавление субтитров и заголовков <track>
- Пример: размещаем видео на сайте
- Видеоконвертеры
1.14. Необязательные теги HTML5-разметки
1.15. HTML5-формы
- Элемент <form>
- Группировка элементов формы <fieldset>
- Создание полей формы <input>
- Текстовые поля ввода <textarea>
- Раскрывающийся список <select>
- Надписи к полям формы <label>
- Кнопки <button>
- Флажки и переключатели в формах
1.16. Контентная модель HTML5
- Мета содержимое
- Потоковое содержимое
- Секционное содержимое
- Заголовочное содержимое
- Текстовое содержимое
- Встроенное содержимое
- Интерактивное содержимое
- Явное содержимое
- Элементы, поддерживающие скрипт
- Корневое секционное содержимое
- Прозрачная модель содержимого
2
CSS
CSS3
2.1. Основы CSS
2.2. CSS блочная модель
- Определение блочной модели
- Отступы элемента
- Схлопывание вертикальных отступов
- Выпадание вертикальных отступов
- Физические свойства отступов: свойства margin-top, margin-right, margin-bottom, margin-left
- Краткая запись отступов: свойство margin
- Поля элемента
- Физические свойства полей: свойства padding-top, padding-right, padding-bottom, padding-left
- Краткая запись полей: свойство padding
- Рамки элемента
2.3. Блочные и строчные элементы
- Модель визуального форматирования
- Определение термина «содержащий блок»
- Блочные элементы и блочные контейнеры
- Строчные элементы и строчные контейнеры
- Строчно-блочные элементы
- Ширина содержимого: свойство width
- Минимальная и максимальная ширина: свойства min-width и max-width
- Высота содержимого: свойство height
- Минимальная и максимальная высота: свойства min-height и max-height
- Расчет высоты строки: свойства line-height и vertical-align
- Изменение блочной модели: свойство box-sizing
2.4. CSS-позиционирование
- Содержащий блок
- Выбор схемы позиционирования: свойство position
- Смещение блока: свойства top, right, bottom, left
- Обтекание: свойство float
- Управление потоком рядом с плавающими элементами: свойство clear
- Определение контекста наложения: свойство z-index
- Контекст наложения
2.5. CSS-текст
- Преобразование текста: свойство text-transform
- Обработка пробелов и переносы строк: свойство white-space
- Настройка табуляции: свойство tab-size
- Правила разрыва для букв: свойство word-break
- Разрыв строки: свойство line-break
- Расстановка переносов: свойство hyphens
- Переполнение блока-обертки: свойство overflow-wrap/word-wrap
- Выравнивание текста: свойство text-align
- Выравнивание текста по умолчанию: свойство text-align-all
- Выравнивание последней строки: свойство text-align-last
- Промежутки между словами: свойство word-spacing
- Трекинг: свойство letter-spacing
- Отступ первой строки: свойство text-indent
2.6. CSS-шрифты
- Семейство шрифтов: свойство font-family
- Насыщенность шрифта: свойство font-weight
- Ширина шрифта: свойство font-stretch
- Начертание шрифта: свойство font-style
- Размер шрифта: свойство font-size
- Относительный размер шрифта: свойство font-size-adjust
- Сокращенная запись свойств шрифта: свойство font
- Управление синтезом шрифтов: свойство font-synthesis
2.7. CSS-ссылки
- Псевдоклассы состояний гипертекстовых ссылок
- Выборка отдельных ссылок
- Подчеркивание ссылок
- Изображения для ссылок
- Использование фонового изображения
- Ссылки-кнопки
- Примеры оформления ссылок
2.8. CSS-таблицы
- Границы таблицы border
- Как задать ширину и высоту таблицы
- Как задать фон таблицы
- Столбцы таблицы
- Как добавить таблице заголовок
- Как убрать промежуток между рамками ячеек
- Как увеличить промежуток между рамками ячеек
- Как скрыть пустые ячейки таблицы
- Компоновка макета таблицы table-layout
- Лучшие макеты таблиц
2.9. CSS-списки
- Тип маркера списка list-style-type
- Изображения для элементов списка list-style-image
- Местоположение маркера списка list-style-position
- Краткая форма задания стилей списка list-style
- Примеры красивого оформления списков
2.10. CSS-фон
- Базовый цвет: свойство background-color
- Источник изображения: свойство background-image
- Укладка изображений: свойство background-repeat
- Фиксация изображения: свойство background-attachment
- Позиционирование изображений: свойство background-position
- Область рисования: свойство background-clip
- Область расположения фона: свойство background-origin
- Размер изображений: свойство background-size
- Краткая запись свойств фона: свойство background
- Множественные фоны
2.11. CSS-рамка
- Стиль рамки border-style
- Цвет рамки border-color
- Ширина рамки border-width
- Задание рамки одним свойством border
- Задание рамки для одной границы элемента
2.12. CSS-content
- Свойство content
- Добавление специального символа
- Добавление текста
- Добавление изображения
- Добавление блочного содержимого
- Добавление значения атрибута
- Добавление кавычек
- Добавление счетчика элементов
- Свойство display: list-item
- Форматирование кавычек: свойство quotes
2.13. CSS-цвета
- Приоритетные цвета: свойство color
- Основные ключевые слова
- Числовые значения цвета
- Цвета модели RGB
- Цвета модели RGBA
- Ключевое слово transparent
- HSL-цвета
- HSLA-значения цвета
- Расширенные ключевые слова цвета
- Ключевое слово currentColor
2.14. CSS-генераторы
2.15. CSS3 UI
- Свойства внешнего контура
- Краткая запись внешнего контура: свойство outline
- Толщина внешнего контура: свойство outline-width
- Узор внешнего контура: свойство outline-style
- Цвет внешнего контура: свойство outline-color
- Смещение внешнего контура: свойство outline-offset
- Изменение размера блоков: свойство resize
- Стилизация курсора: свойство cursor
- Цвет каретки вставки: свойство caret-color
2.16. CSS3-градиент
- Линейный градиент: linear-gradient()
- Радиальный градиент: radial-gradient()
- Повтор градиента: repeating-linear-gradient() и repeating-radial-gradient()
- Кроссбраузерный градиент
- Комбинация градиента и фонового изображения
2.17. CSS3-рамка
- Закругление углов с помощью border-radius
- Рамки-изображения border-image
- Ширина рамки-изображения border-image-width
- Ресурс рамки-изображения border-image-source
- Элементы рамки-изображения border-image-slice
- Повтор рамки-изображения border-image-repeat
- Смещение рамки-изображения border-image-outset
- Смещение внешней рамки outline-offset
- Градиентная рамка
2.18. CSS3-оформление текста
- Оформление линии: подчеркивание, обводка и зачеркивание
- Вид линии оформления: свойство text-decoration-line
- Стиль линии оформления: свойство text-decoration-style
- Цвет линии оформления: свойство text-decoration-color
- Краткая запись свойств линии оформления: свойство text-decoration
- Расположение линии оформления: свойство text-underline-position
- Тень текста: свойство text-shadow
- Примеры тени текста
- Эффекты тени при наведении
- Анимация тени
2.19. CSS3-тень блока
2.20. CSS3-переходы
- Название свойства transition-property
- Продолжительность перехода transition-duration
- Функция перехода transition-timing-function
- Задержка перехода transition-delay
- Краткая запись перехода transition
- Плавный переход нескольких свойств
- Примеры переходов для различных свойств
2.21. CSS3-трансформации
- Функции 2D-трансформации transform
- Точка трансформации transform-origin
- Множественные трансформации
- Трансформации на практике: как сделать ленточки
2.22. CSS3-анимация
- Ключевые кадры
- Название анимации: свойство animation-name
- Продолжительность анимации: свойство animation-duration
- Временная функция: свойство animation-timing-function
- Задержка анимации: свойство animation-delay
- Повтор анимации: свойство animation-iteration-count
- Направление анимации: свойство animation-direction
- Краткая запись анимации: свойство animation
- Проигрывание анимации: свойство animation-play-state
- Состояние элемента до и после воспроизведения анимации: свойство animation-fill-mode
- Множественные анимации
2.23. CSS3 flexbox
- Свойство display: flex
- Выравнивание элементов по горизонтали justify-content
- Выравнивание элементов по вертикали align-items
- Направление главной оси flex-direction
- Многострочность элементов flex-wrap
- Краткая запись направления и многострочности flex-flow
- Многострочное выравнивание align-content
- Порядок отображения элементов order
- Базовая ширина элемента flex-basis
- Растяжение элементов flex-grow
- Сужение элементов flex-shrink
- Задание базовой ширины и трансформации элемента одним свойством flex
- Выравнивание отдельных элементов align-self
2.24. CSS3 columns
- Количество и ширина колонок
- Ширина колонок: свойство column-width
- Количество колонок: свойство column-count
- Установка колонок с помощью одного свойства columns
- Промежутки между колонками и разделительные линии
- Промежутки между колонками: свойство column-gap
- Цвет разделительной линии: свойство column-rule-color
- Стиль разделительной линии: свойство column-rule-style
- Ширина разделительной линии: свойство column-rule-width
- Краткая запись свойств разделительной линии: свойство column-rule
- Разрыв колонок
- Охват колонок: свойство column-span
- Заполнение колонок содержимым: свойство column-fill
- Переполнение
- Переполнение внутри многоколоночных контейнеров
- Разбивка на страницы и переполнение вне многоколоночных контейнеров
2.25. CSS3 3D-трансформации
- Установка 3D перспективы perspective
- Задание точки трансформации для 3D элемента perspective-origin
- Стиль 3D преобразований transform-style
- Видимость обратной стороны элемента backface-visibility
- Функции 3D трансформации
2.26. CSS3-медиазапросы
- Структура медиазапроса @media
- Логические операторы
- Тип носителя
- Характеристики носителя
- На какие разрешения экрана нужно ориентироваться
2.27. CSS3-фильтры
2.28. CSS Grid
- Концепция сетки и основные понятия
- Контейнер-сетка
- Определение сетки
- Строки и столбцы
- Именованные области
- Краткая запись явной сетки
- Неявная сетка
- Краткая запись сетки
- Элементы сетки
- Размещение и переупорядочивание элементов сетки
- Выравнивание элементов сетки и промежутки между элементами
2.29. CSS3-шрифты
- Кернинг: свойство font-kerning
- Лигатуры: свойство font-variant-ligatures
- Подстрочные и надстрочные формы: свойство font-variant-position
- Преобразование в заглавные буквы: свойство font-variant-caps
- Форматирование цифр: свойство font-variant-numeric
- Визуализация восточноазиатского текста: свойство font-variant-east-asian
- Общее сокращение для рендеринга шрифтов: свойство font-variant
- Низкоуровневое управление настройками шрифтов: свойство font-feature-settings
2.30. CSS3-переполнение
- Типы переполнения
- Прокрутка и обрезка переполнения: свойства overflow-x, overflow-y и overflow
- Автоматическое многоточие
- Многоточие при переполнении: свойство text-overflow
2.31. CSS3-способы письма
- Введение
- Направление вдоль линии строки и двунаправленность
- Задаем направление: свойство direction
- Встраивание и переопределение: свойство unicode-bidi
- Вертикальное письмо
- Направление потока блоков: свойство writing-mode
- Введение в вертикальное расположение текста
- Ориентация текста: свойство text-orientation
3
JavaScript
jQuery
3.1. Основы JavaScript
- Подключение сценариев к HTML-документу
- Типы данных и переменные в JavaScript
- Переменные в JavaScript
- Типы данных переменных
- Глобальные и локальные переменные
3.2. Выражения в JavaScript
- Арифметические операторы
- Операторы присваивания
- Операторы инкремента и декремента
- Операторы сравнения
- Логические операторы
- Побитовые операторы
- Строковые операторы
- Специальные операторы
- Комментарии в JavaScript
3.3. Циклы JavaScript
3.10. Введение в jQuery
3.11. Методы jQuery
3.11.1. Манипуляции HTML-элементами
3.11.2. Чтение и изменение CSS-свойств, классов и атрибутов
- Добавление и удаление класса
- Изменение атрибутов элементов
- Изменение свойств элемента
- Получение и изменение размеров и координат элемента
3.11.3. Обход DOM и выборка html-элементов
3.11.4. jQuery анимация
- Создание собственных эффектов с помощью метода .animate()
- Анимационные эффекты jQuery
- Управление очередью анимации
- Управление анимацией через свойства объекта jQuery
3.11.5. Методы объекта window
3.12. События jQuery
3.13. Селекторы jQuery
4
Веб-
типографика
4.1. Пять принципов выбора и использования шрифтов
- Одевайтесь по случаю
- Познакомьтесь со своими семействами: классификация шрифтов
- Не будьте скучными: принцип явного контраста
- Чем меньше, тем лучше
- Правило номер пять: нет никаких правил
4.2. Выбираем шрифт для сайта
- Сочетайте шрифты с засечками со шрифтами без засечек (sans serif и serif)
- Избегайте шрифтов одного класса
- Присвойте шрифтам разные роли
- Контрастная насыщенность шрифтов
- Создайте на странице различную тональность текста
- Не смешивайте настроения шрифтов
- Сочетайте яркое с нейтральным
- Избегайте несоизмеримых сочетаний
- Будьте проще – не используйте более двух шрифтов
- Используйте различные размеры шрифта
4.3. Правила веб-типографики
- Семейство шрифтов (свойство font-family)
- Сочетание шрифтов с засечками и без засечек
- Цвет шрифта (свойство color)
- Размер шрифта (свойство font-size)
- Выравнивание текста (свойство text-align)
- Межбуквенный и межсимвольный интервал (свойства word-spacing и letter-spacing)
- Межстрочный интервал (свойство line-height)
- Длина строки
- Начертание шрифта (свойство font-style)
- Структура текста и визуальная иерархия
- Безопасные шрифты
4
Веб-
типографика
4.1. Пять принципов выбора и использования шрифтов
- Одевайтесь по случаю
- Познакомьтесь со своими семействами: классификация шрифтов
- Не будьте скучными: принцип явного контраста
- Чем меньше, тем лучше
- Правило номер пять: нет никаких правил
4.2. Выбираем шрифт для сайта
- Сочетайте шрифты с засечками со шрифтами без засечек (sans serif и serif)
- Избегайте шрифтов одного класса
- Присвойте шрифтам разные роли
- Контрастная насыщенность шрифтов
- Создайте на странице различную тональность текста
- Не смешивайте настроения шрифтов
- Сочетайте яркое с нейтральным
- Избегайте несоизмеримых сочетаний
- Будьте проще – не используйте более двух шрифтов
- Используйте различные размеры шрифта
4.3. Правила веб-типографики
- Семейство шрифтов (свойство font-family)
- Сочетание шрифтов с засечками и без засечек
- Цвет шрифта (свойство color)
- Размер шрифта (свойство font-size)
- Выравнивание текста (свойство text-align)
- Межбуквенный и межсимвольный интервал (свойства word-spacing и letter-spacing)
- Межстрочный интервал (свойство line-height)
- Длина строки
- Начертание шрифта (свойство font-style)
- Структура текста и визуальная иерархия
- Безопасные шрифты
Comments
Post a Comment