HTML5 предоставляет нам элемент <audio>, который позволяет встраивать звуковые файлы прямо на веб-страницы. Вот как вы можете начать:

<audio src="file.mp3"></audio>

Добавьте атрибут controls, чтобы предоставить пользователям стандартные кнопки управления воспроизведением:

<audio src="file.mp3" controls></audio>

Если хотите, чтобы аудио начинало воспроизводиться автоматически, добавьте атрибут autoplay:

<audio src="file.mp3" controls autoplay></audio>

С атрибутом preload вы можете указать браузеру, следует ли предварительно загрузить аудио. Это может быть auto, metadata или none.

Вы можете управлять аудио и с помощью JavaScript, создавая динамические аудио-взаимодействия.

При создании своих проектов эксперементируйте и делайте уникальные проекты, чтобы ваше резюме выделялось. Вы можете сделать небольшой аналог Apple Music или Яндекс музыку🎶

#ОбучающийПост #HTML

Разница между «атрибутом» (attribute) и «свойством« (property)

🔹Атрибуты (Attributes)

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

<input type="text" value="Hello, World!" disabled>

В данном примере type, value и disabled — это атрибуты тега input.

Особенности атрибутов:

1️⃣Строковые значения: Даже если атрибут представляет число или другой тип данных, его значение всегда будет строкой.
2️⃣Нечувствительность к регистру: Имена атрибутов можно записывать любыми буквами — большими или маленькими, это не повлияет на работу.
3️⃣Видны в innerHTML: Если вы посмотрите на свойство innerHTML элемента, то увидите все атрибуты, указанные в разметке.

🔹Свойства (Properties)

Свойства — это характеристики DOM-узлов, которые вы можете читать или изменять с помощью JavaScript. Они представляют текущее состояние элемента в браузере, которое может меняться во время выполнения скрипта.

const inputElement = document.querySelector('input');
inputElement.value = "New Text";

В данном примере мы меняем свойство value у объекта inputElement.

Особенности свойств:

1️⃣Различные типы данных: Свойства могут иметь различные типы данных, не только строки.
2️⃣Чувствительность к регистру: Имена свойств нужно указывать в точном регистре, в отличие от атрибутов.
3️⃣Интерактивность с JavaScript: Свойства представляют собой характеристики объектов JavaScript и могут изменяться в любое время при выполнении скрипта.

#JavaScript #ОбучающийПост #HTML

Разница между «атрибутом» (attribute) и «свойством« (property)

#JavaScript #code #HTML

Разницу между атрибутами async и defer при подключении внешних скриптов в HTML документе.

🔹async

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

🔹defer

Атрибут defer, с другой стороны, также позволяет браузеру продолжить парсинг HTML-документа во время загрузки скрипта. Однако, в отличие от async, он гарантирует, что скрипты будут выполнены в том порядке, в котором они появляются в документе, и только после полной загрузки HTML-документа, перед событием DOMContentLoaded.

🔍Визуально разницу можно представить так:

1️⃣Без async или defer: HTML → Скрипт загружается и выполняется → HTML продолжает загружаться.

2️⃣С async: HTML и скрипт загружаются параллельно → Скрипт выполняется, как только загрузится (HTML может ещё не быть полностью загружен).

3️⃣С defer: HTML и скрипт загружаются параллельно → Скрипт выполняется только после полной загрузки HTML (и в том порядке, в котором они указаны в документе).

🛠Использование:

Используйте async, когда скрипты независимы друг от друга и могут выполняться в любом порядке.

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

#JavaScript #ОбучающийПост #defer #async #HTML

Привет, сделал разбор вопросов к собеседованиям по HTML. Записал небольшое видео. Говорю в пол голоса из-за эхо в комнате, пока ее не заставили мебелью😄

#собеседование #вопросы #html

<!DOCTYPE html>

Этот элемент служит для указания типа документа (DTD, Document Type Definition) веб-страницы. Он должен идти первым в HTML-документе, перед тегом <html>. <!DOCTYPE html> не является HTML-тегом; это инструкция для веб-браузера о том, какой версией HTML или XHTML следует интерпретировать веб-страницу.

Если говорить о <!DOCTYPE html>, то он ассоциирован с HTML5. Его наличие гарантирует, что веб-страница будет отображаться в стандартном режиме, а не в квиркс-режиме (quirks mode), который может вызвать некорректное отображение страницы из-за совместимости с устаревшими версиями HTML.

Использование <!DOCTYPE html> улучшает совместимость веб-страницы с различными браузерами и обеспечивает корректное отображение элементов и стилей на странице.

#обучающийПост #html

Подключение CSS и JavaScript в HTML-разметке: практики и исключения

CSS-стили, как правило, помещают в тег <head> для того, чтобы браузер мог как можно быстрее загрузить и применить их, обеспечивая тем самым более быструю отрисовку страницы. Если стили будут загружаться после того, как пользователь начнет видеть содержимое страницы, это может привести к "мельканию" стилей, когда содержимое страницы изменится визуально после применения стилей.

JavaScript-скрипты часто размещают перед закрывающим тегом <body>, чтобы они не блокировали отрисовку основного содержимого страницы. Скрипты могут занимать значительное время для загрузки и выполнения, и если разместить их в <head>, пользователь может увидеть пустую или неполностью загруженную страницу.

Однако есть исключения. Например, некоторые скрипты, особенно те, которые отвечают за отслеживание активности пользователя или SEO, иногда помещают в <head>. Это позволяет скрипту собирать данные с самого начала загрузки страницы.

Также, современные браузеры и методы оптимизации позволяют использовать атрибут async или defer с тегом <script>, что позволяет загружать и выполнять JavaScript асинхронно, минимизируя тем самым влияние скрипта на время загрузки страницы.

#обучающийПост #css #html

Сброс и Нормализация CSS

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

Нормализация – это другой способ сделать стили более консистентными между разными браузерами, но без полного "сброса". Нормализация корректирует стили, делая их более предсказуемыми и одинаковыми в разных браузерах, но сохраняя некоторые базовые стили. Например, в нормализации могут быть исправления для отображения элементов форм, таблиц и других элементов в разных браузерах.

#обучающийПост #css #html

Кодировка HTML-страницы

Для корректного отображения текста на нескольких языках на веб-странице, вам следует убедиться, что используется правильная кодировка символов. Это можно сделать, добавив тег <meta charset="UTF-8"> внутрь тега <head> вашего HTML-документа. UTF-8 поддерживает большое количество символов и идеально подходит для многоязычных сайтов.

#html #обучающийПост #кодировка

Data-атрибуты

Используются для хранения пользовательских данных прямо в HTML-тегах. Эти данные можно затем использовать в JavaScript. Это особенно полезно, когда необходимо ассоциировать некоторые данные с конкретным элементом, но не хочется засорять DOM дополнительными тегами или неструктурированными атрибутами.

#html #attribute #data #обучающийПост

iFrame в HTML

Это элемент с помощью которого мы можем встраивать на веб страницу другую веб страницу😅

Например, я разрабатываю плагин для Figma. Figma мне предоставляет доступ к своему приложению с помощью iFrame. Ты можешь разрабатывать приложение в приложении. У этого приложения свой body, title, head. Единственное такие приложения ограниченны для безопасности, чтобы разработчик не мог залезть в 'родительское приложение'.

Так же на наш сайт мы можем встраивать карты Google, другие сайты, YouTube видео.

1️⃣ С помощью атрибута src можно указать URL, который будет загружен в <iframe>.
2️⃣ Атрибуты width и height позволяют задать размеры <iframe>, обычно указываемые в пикселях или процентах.
3️⃣ Атрибут allowfullscreen позволяет <iframe> переходить в полноэкранный режим

#обучающийПост #html #iframe