HTML Supremo

1. Desenvolvimento Web

Explore o funcionamento interno da web. Aprenda como os dados viajam através das redes, descubra o papel dos protocolos e desvende os mistérios dos endereços IP e nomes de domínio. Obtenha um entendimento de alto nível de como os navegadores e servidores da web se comunicam para fornecer conteúdo na web.

Mundo Web

O Que é a Internet?

Entendendo como a Internet Funciona

Como um Site Funciona

Desenvolvimento Frontend vs Backend

Caminho para o Sucesso

2. Tags e Atributos

Descubra o poder das tags para estruturar conteúdo, desde títulos e parágrafos até listas e tabelas. Aprenda como aprimorar os elementos com atributos.

Revelando o Potencial de Tags e Atributos HTML

Incorporação de Áudio e Vídeo

Incorporação de áudio

Para incluir arquivos de áudio em uma página web, podemos utilizar o elemento <audio>. Vamos considerar um exemplo:

index.html

index.css

index.js

Neste exemplo, temos:

O elemento <audio> contém um elemento <source>, que especifica o URL e o tipo de arquivo do áudio. Os formatos comumente suportados são MP3 e OGG;
O atributo controls mostra controles padrão de reprodução, como tocar, pausar e volume;
Se o navegador do usuário não suportar o elemento de áudio, uma mensagem será exibida.

Atributos adicionais comumente usados com o elemento de áudio HTML incluem:

autoplay - começa a reproduzir o arquivo de áudio assim que a página é carregada;
loop - faz com que o arquivo de áudio seja repetido continuamente;
muted - silencia o áudio por padrão;
volume - especifica o nível de volume padrão para o arquivo de áudio, variando de 0.0 (silencioso) a 1.0 (volume máximo).

Aqui está um exemplo demonstrando o uso de todos esses atributos:

index.html

index.css

index.js

Incorporação de vídeo

Podemos usar o elemento <video> para incorporar arquivos de vídeo em uma página web. Considere o seguinte exemplo:

index.html

index.css

index.js

Neste exemplo:

O elemento <video> contém um elemento <source>, o qual especifica o URL e o tipo de arquivo do vídeo. Os formatos comuns suportados são WebM, MP4 e OGG;
O atributo controls exibe controles padrão de reprodução;
Se o navegador do usuário não suportar o elemento de vídeo, uma mensagem será exibida.

Os atributos comumente utilizados para o elemento de vídeo HTML incluem:

autoplay - inicia a reprodução do arquivo de vídeo assim que a página é carregada;
loop - faz com que o arquivo de vídeo seja repetido continuamente;
muted - silencia o áudio por padrão;
volume - especifica o nível de volume padrão para o arquivo de áudio, variando de 0.0 (silencioso) a 1.0 (volume máximo);
poster - especifica o URL de uma imagem a ser exibida como miniatura do vídeo antes que o vídeo seja reproduzido;
width e height - especificam a largura e altura do reprodutor de vídeo em pixels.

Aqui está um exemplo que demonstra o uso de todos esses atributos:

index.html

index.css

index.js

Nota
Além disso, existem muitas bibliotecas e APIs de JavaScript disponíveis que oferecem funcionalidades adicionais para reproduzir e manipular conteúdo de vídeo na web.

Tudo estava claro?

Seção 4. Capítulo 6

Conteúdo do Curso

HTML Supremo

1. Desenvolvimento Web

Mundo Web O Que é a Internet?Entendendo como a Internet Funciona Como um Site Funciona Desenvolvimento Frontend vs Backend Caminho para o Sucesso

2. Tags e Atributos

Revelando o Potencial de Tags e Atributos HTML Tags Atributos Tags Emparelhadas e Únicas Marcação de Texto Desafio 1: Marcação de Texto Desafio 2: Marcação de Texto Desafio 3: Marcação de Texto Marcação de Texto com Propósito Especial Desafio: Marcação de Texto com Propósito Especial Validação

3. Estrutura do Documento

Segredos das Páginas Web Estruturadas Estrutura Cabeçalho do Documento Fluxo do Documento Desafio: Estrutura do Documento Ferramentas de Desenvolvedor

4. Mídias e Tabelas

A Magia das Mídias Interativas e Tabelas Dinâmicas Imagens Desafio: Imagens Imagens de Propósito Especial Formatos Gráficos Incorporação de Áudio e Vídeo Desafio: Áudio e Vídeo Tabelas Desafio: Tabelas

5. Formulários

O Poder dos Formulários: Interagir e Engajar Base de Criação de Formulários Label para Elemento de Input Atributos de Input Tipos de Input Desafio: Input e Label Elemento Textarea Elemento Select Elemento Datalist Elementos de Formulário de Grupo

HTML Supremo

Incorporação de Áudio e Vídeo

Incorporação de áudio

Para incluir arquivos de áudio em uma página web, podemos utilizar o elemento <audio>. Vamos considerar um exemplo:

index.html

index.css

index.js

Neste exemplo, temos:

O elemento <audio> contém um elemento <source>, que especifica o URL e o tipo de arquivo do áudio. Os formatos comumente suportados são MP3 e OGG;
O atributo controls mostra controles padrão de reprodução, como tocar, pausar e volume;
Se o navegador do usuário não suportar o elemento de áudio, uma mensagem será exibida.

Atributos adicionais comumente usados com o elemento de áudio HTML incluem:

autoplay - começa a reproduzir o arquivo de áudio assim que a página é carregada;
loop - faz com que o arquivo de áudio seja repetido continuamente;
muted - silencia o áudio por padrão;
volume - especifica o nível de volume padrão para o arquivo de áudio, variando de 0.0 (silencioso) a 1.0 (volume máximo).

Aqui está um exemplo demonstrando o uso de todos esses atributos:

index.html

index.css

index.js

Incorporação de vídeo

Podemos usar o elemento <video> para incorporar arquivos de vídeo em uma página web. Considere o seguinte exemplo:

index.html

index.css

index.js

Neste exemplo:

O elemento <video> contém um elemento <source>, o qual especifica o URL e o tipo de arquivo do vídeo. Os formatos comuns suportados são WebM, MP4 e OGG;
O atributo controls exibe controles padrão de reprodução;
Se o navegador do usuário não suportar o elemento de vídeo, uma mensagem será exibida.

Os atributos comumente utilizados para o elemento de vídeo HTML incluem:

autoplay - inicia a reprodução do arquivo de vídeo assim que a página é carregada;
loop - faz com que o arquivo de vídeo seja repetido continuamente;
muted - silencia o áudio por padrão;
volume - especifica o nível de volume padrão para o arquivo de áudio, variando de 0.0 (silencioso) a 1.0 (volume máximo);
poster - especifica o URL de uma imagem a ser exibida como miniatura do vídeo antes que o vídeo seja reproduzido;
width e height - especificam a largura e altura do reprodutor de vídeo em pixels.

Aqui está um exemplo que demonstra o uso de todos esses atributos:

index.html

index.css

index.js

Nota
Além disso, existem muitas bibliotecas e APIs de JavaScript disponíveis que oferecem funcionalidades adicionais para reproduzir e manipular conteúdo de vídeo na web.

Tudo estava claro?

Seção 4. Capítulo 6