HTML Примеры

Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих

HTML Основы

HTML документ HTML заголовки HTML параграфы HTML ссылки HTML изображения HTML кнопки HTML списки

Объяснение примеров

HTML Атрибуты

Атрибут title Атрибут href Атрибути width и height Атрибут alt Атрибут без кавычек Атрибут без кавычек не работает

Объяснение примеров

HTML Заголовки

HTML заголовки HTML горизонтальная разделительная линия HTML голова

Объяснение примеров

HTML Параграфы

HTML параграфы Больше HTML параграфов Использование разрывов строк в HTML Проблемы с отображением стихов (некоторые проблемы с форматированием HTML) Как контролировать разрывы строк и пробелы с помощью тега <pre>

Объяснение примеров

HTML Стили

HTML стили HTML цвет фона HTML цвет текста HTML семейство шрифта HTML размер текста HTML выравнивание текста

Объяснение примеров

HTML Форматирование текста

Жирное форматирование с помощью элемента <b> Семантически сильное форматирование (выделение) с помощью элемента <strong> Форматирование курсивом с помощью элемента <i> Семантически подчёркнутое форматирование с помощью элемента <em> Уменьшение шрифта с помощью элемента <small> Пометка с помощью элемента <mark> Пометка зачёркиванием с помощью элемента <del> Пометка подчёркиванием с помощью элемента <ins> Пометка зачёркиванием и подчёркиванием с помощью <del> и <ins> Форматирование нижнего индекса с помощью элемента <sub> Форматирование верхнего индекса с помощью элемента <sup>

Объяснение примеров

HTML Цитаты и цитирование

Форматирование коротких цитат с помощью элемента <q>. Форматирование цитируемых разделов с элементом <blockquote>. Форматирование информации про автора/владельца документа с помощью элемента <address> Форматирование сокращений и аббревиатур с помощью элемента <abbr> Форматирование названия работ с помощью элемента <cite> Форматирование направления текста с помощью элемента <bdo>

Объяснение примеров

HTML Комментарии

Скрытые комментарии Условные комментарии Комментарии для настройки

Объяснение примеров

HTML CSS

HTML из встроенным CSS HTML с внутренним CSS HTML из внешним CSS HTML из шрифтами CSS HTML из CSS с использованием атрибута id HTML из CSS с использованием атрибута class HTML и CSS границы HTML и CSS внутренний отступ (padding) HTML и CSS внешний отступ (margin) HTML и CSS полная демонстрация

Объяснение примеров

HTML Ссылки

Ссылка с использованием абсолютного URL Ссылка с использованием относительного URL Смена цвета ссылок Удаление подчеркивания из ссылок Смена цели ссылок Изображение как ссылка Создание ссылки на закладку Ссылка, которая выходит с фрейма Ссылка на электронную почту Ссылка на почту с темой

Объяснение примеров

HTML Изображение

Изображение Высота и ширина изображения с использованием атрибутов Высота и ширина изображения с помощью CSS Высота и ширина изображения с помощью атрибутов и CSS Изображение в другой папке Изображение с неработающей ссылкой Изображение на другом сервере Использование изображения как ссылки Движущее изображение Карта изображений из интеррактивными областями, которые можно нажимать Плавающее изображение

Объяснение примеров

HTML Таблицы

Основы HTML таблиц Таблица. Границы Таблица. Свёрнутые границы Таблица. Отступ в ячейках Таблица. Заголовки Таблица. Выравнивание заголовков Горизонтальные/вертикальные заголовки таблицы Таблица. Подпись Ячейки таблицы, которые охватывают больше одного столбца Ячейки таблицы, которые охватывают больше одной строки Таблица. Интервалы между ячейками Таблица с HTML-тегами внутри Таблицы с другим стилем с использованием id I Таблицы с другим стилем с использованием id IІ Таблицы с разным стилем с использованием класса I Таблицы с другим стилем с использованием класса II

Объяснение примеров

HTML Списки

Неупорядоченный список (по умолчанию) Неупорядоченный список - disc маркеры Неупорядоченный список - circle маркеры Неупорядоченный список - square маркеры Неупорядоченный список без маркеров Упорядоченный список (по умолчанию) Упорядоченный список с числами Упорядоченный список с буквами Упорядоченный список с маленькими буквами Упорядоченный список с римскими числами Упорядоченный список с маленькими римскими числами Список описания Вложенный список I Вложенный список IІ Горизонтальный список Горизонтальный список - меню

Объяснение примеров

HTML Блочные и строчные элементы

Стилизация элементов <div> Стилизация элементов <span>

Объяснение примеров

HTML Классы

Стилизируйте все элементы с указанным именем класса Доступ к элементам с заданным именем класса с JavaScript Несколько классов Тот же класс, другой тег

Объяснение примеров

HTML Id

Стиль элемента с определённым Id Разница между class и id Доступ к елементу с определённым Id с JavaScript

Объяснение примеров

HTML Макет

Макет с использованием float Макет с использованием flexbox Макет с использованием flexbox 2 Макет с использованием flexbox 3

Объяснение примеров

HTML IFrame

Встроенный фрейм (фрейм в HTML странице) Объяснение примеров

HTML Элементы внутри head

Валидный HTML документ при отсутствии <html> <body и <head> Валидный HTML документ при отсутствии элемента <head> Элемент <title> определяет название документа Элемент <style> содержит информацию про стиль Элемент <link> определяет отношение к внешнему ресурсу Элемент <meta> определяет специальную мета-информацию Элемент <script> определяет на стороне клиента JavaScripts Элемент <base> определяет основной URL-адрес сайта для всех URL-адресов

Объяснение примеров

HTML Скрипты

Вставка скрипта Использование тега <noscript>

Объяснение примеров

HTML Элементы компьютерного кода

Форматирование введения с клавиатуры с помощью элемента <kbd> Форматирование вывода компьютера с помощью элемента <samp> Форматирование программного кода с помощью элемента <code> Форматирование программного кода из сохранением пробелов и разрывов строк Сменное форматирование с помощью элемента <var>

Объяснение примеров

HTML Формы

Форма с вводом текста Форма ввода с радио-кнопкой Форма с текстовыми полями и кнопкой отправки Форма с текстовыми полями без атрибута name Группировка данных формы

Объяснение примеров

HTML Элементы формы

Простой раскрывающийся (выпадающий) список Выпадающий список из предварительно выбранным значением Текстовая область (многострочное поле ввода текста) Кнопка ввода Использование элемента <datalist> Использование элемента <output>

Объяснение примеров

HTML Типы ввода

Тип ввода text Тип ввода password Тип ввода radio Тип ввода checkbox Тип ввода button Тип ввода number - с ограничениями Тип ввода number - с шагами Тип ввода date - с выбором даты Тип ввода date - с ограничениями Тип ввода color - с выбором цвета Тип ввода range Тип ввода month Тип ввода week Тип ввода time Тип ввода datetime Тип ввода datetime-local Тип ввода email Тип ввода search Тип ввода tel Тип ввода url

Объяснение примеров

HTML Атрибуты ввода

Атрибут autocomplete Атрибут novalidate Атрибут autofocus Атрибут form Атрибут formaction Атрибут formenctype Атрибут formmethod Атрибут formnovalidate Атрибут formtarget Атрибути height и width Атрибут list Атрибути min и max Атрибут multiple Атрибут pattern Атрибут placeholder Атрибут required Атрибут step

Объяснение примеров

HTML5 Canvas

Рисовать на холсте с помощью JavaScript Рисовать строку с lineTo() Рисовать круг с arc() Рисовать текст с fillText() Рисовать текст с strokeText() Рисовать линейный градиент Рисовать круговой градиент Рисовать изображение с drawImage()

Объяснение примеров

HTML5 SVG

SVG круг SVG прямоугольник SVG закругленный прямоугольник SVG звезда SVG лого

Объяснение примеров

HTML5 Медиа

Воспроизведение видео с кроликом Воспроизведение видео медведя с элементами управления Воспроизведение видео медведя с автозапуском Воспроизведение звука коня с элементами управления

Объяснение примеров

HTML5 Геолокация

Получить координаты геолокации Обработать ошибки геолокации Получить геолокацию с картой Получить геолокацию с помощью скрипта карты Google Получить геолокацию и наблюдать за позицией

Объяснение примеров

HTML5 Локальное хранилище

Сохранять название постоянно Сохранять счетчик постоянно Сохранять счетчик для одного сеанса

Объяснение примеров

HTML5 Медиа

Воспроизвести видео файл в HTML Воспроизвести аудио файл в HTML Воспроизвести YouTube видео в HTML

Объяснение примеров

Больше HTML5 примеров

HTML5 drag and drop HTML5 веб-работники HTML5 события, отправленные сервером