HTML5

HTML имеет много тегов, которые многие люди используют каждый день, такие как <div>, <p> и <a>. Но также есть некоторые скрытые возможности, которые часто остаются незамеченными. Эти теги могут помочь сделать веб-сайты более привлекательными, доступными и содержательными без особых усилий. В этой статье мы обсудим группу уникальных элементов HTML, которые могут улучшить ваши веб-страницы. Они предлагают специфические функции для форматирования текста, улучшения читаемости и добавления интерактивных функций. Содержание Тег <q>: Краткие встроенные цитаты Тег <s>: Зачеркнутый текст Тег <mark>: Выделенный…

Вы когда-либо хотели создать свои собственные интерактивные инструменты с помощью только HTML, CSS и JavaScript? В этой статье мы создадим приятный и простой проект: инструмент выбора цвета. Этот удобный небольшой инструмент позволит пользователям выбрать любой цвет и сразу увидеть его значения HEX и RGB. Так что взяв свой любимый редактор кода, попробуем начать! Шаг 1: Установка проекта Создайте новую папку: Начните создавать новую папку на вашем компьтере для этого проекта. Вы можете назвать ее color-picker-tool. Создайте файлы: Внутри папки создайте…

Строительство проектов очень важно для изучения программирования. Когда вы создаете проект, вы расширяете свой портфолио и учитесь применять свои навыки в новых ситуациях. Мы только выпустили 2-часовый курс на YouTube-канале freeCodeCamp.org на испанском языке, который пошагово проведет вас через создание 3-х проектов с HTML, CSS и JavaScript. Вы будете практиковать свои навыки, создавая респонсивную навигационную панель с выпадающими меню, слайдер и страницу входа сカスタム модальным окном. Если у вас есть друзья, говорящие на испанском, вы можете разделить испанскую версию этой…

HTML5 Canvas и SVG — обе это стандартизированные технологии HTML5, которые позволяют создавать потрясающие графические элементы и визуальные эффекты. Вопрос, который я ставлю в этой статье, звучит так: должно ли это иметь значение, какой из них вы используете в своем проекте? Другими словами, существуют ли случаи, когда предпочтительнее использовать HTML5 Canvas вместо SVG? Сначала давайте коротко рассмотрим HTML5 Canvas и SVG. Что такое HTML5 Canvas? Вот как спецификация WHATWG представляет элемент canvas: Элемент canvas предоставляет скриптам зависимый от разрешения растровый…

В этом уроке мы углубимся в малоиспользуемый элемент HTML5 <datalist>. Он может реализовать легковесный, доступный, кросс-браузерный автокомплит для формы, не требующий JavaScript. Что не так с <select>? HTML5 <select> контролирует идеально, когда вы хотите, чтобы пользователь выбирал из небольшого диапазона вариантов. Они менее практичны, когда: когда есть много вариантов, таких как страны или должности когда пользователю нужно ввести свой вариант, который не находится в списке Очевидным решением является контроль автозаполнения. Это позволяет пользователю ввести несколько символов, что ограничивает доступные варианты…

В этой статье мы рассмотрим некоторые простые способы стилизации HTML-элемента <details>, который очень полезен для отображения и скрытия фрагментов контента на веб-странице. Удобно иметь простой элемент раскрытия в HTML, который не требует JavaScript, но стандартный вид <details> может не понравиться некоторым. К счастью, изменить стиль этого элемента довольно легко. Ниже представлен пример использования элемента <details>. Мы добавили к нему простой бордюр, а также немного отступов. Table of Contents Введение элемента details Цвета фона, границы и отступы Добавление границы Добавление цвета…

В этой статье мы рассмотрим поля форм HTML и возможности валидации, предлагаемые HTML5. Также мы рассмотрим, как эти возможности можно улучшить с помощью CSS и JavaScript. Что такое Контролируемая Валидация? У каждого поля формы есть своё назначение. И это назначение часто регулируется ограничениями — или правилами, определяющими, что и что не должно вводиться в каждое поле формы. Например, поле email потребует валидный адрес электронной почты; поле password может требовать определенные типы символов и иметь минимальное количество требуемых символов; а текстовое…

На протяжении некоторого времени я создаю эти 3D сцены с помощью CSS для развлечения — обычно на моем прямом эфире. 3D CSS Реактивный самолет-трюк! 🛩️ Он делает петли и перекаты! 😎 Отвечает на движение мыши 🐭 👉 https://t.co/A1zNmfEzzi через @CodePen pic.twitter.com/87D7LIXLr2 — Jhey 🐻🛠 (Exploring Opportunities ✨) (@jh3yy) March 27, 2021 Каждый демо-пример — это возможность попробовать что-то новое или найти способы выполнять задачи с помощью CSS. Одно из моих обычных занятий — принимать предложения о том, что мы должны…