0Pricing
HTML for Kids · Aula

Atributos do HTML

Entenda como adicionar detalhes extras aos seus elementos usando atributos

Atributos do HTML é uma aula grátis de HTML for Kids no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML for Kids, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML for Kids inclui 4 aulas no total.

Multimídia: adicionando vídeos e áudio

Boas-vindas à próxima lição! Hoje, aprenderemos a adicionar vídeos e áudio às suas páginas da Web. Os recursos multimídia tornam suas páginas mais interativas e divertidas!

Atributos do HTML — ilustração 1

Por que adicionar recursos multimídia?

Os vídeos e o áudio podem tornar suas páginas da Web:

  • Mais envolventes
  • Informativas e divertidas
  • Interativas

Vamos aprender a adicioná-los usando HTML!

Adicionando um vídeo

Os vídeos são adicionados usando a tag <video>. Você pode especificar o arquivo de vídeo usando o atributo src.

Exemplo:

Neste exemplo:

  • src: Especifica o arquivo de vídeo.
  • controls: Adiciona controles de reprodução, pausa e volume.
  • width: Define a largura do vídeo.
<video src="example.mp4" controls width="400"></video>

Adicionando vários formatos de vídeo

Nem todos os navegadores são compatíveis com os mesmos formatos de vídeo. Você pode incluir várias fontes usando a tag <source>.

Exemplo:

<video controls width="400">
  <source src="example.mp4" type="video/mp4">
  <source src="example.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Adicionando áudio

O áudio é adicionado usando a tag <audio>. Você pode especificar o arquivo de áudio usando o atributo src.

Neste exemplo:  

  • src: Especifica o arquivo de áudio. 
  • controls: Adiciona controles de reprodução, pausa e volume. 
<audio src="example.mp3" controls></audio>

Adicionando vários formatos de áudio

Assim como nos vídeos, você pode incluir várias fontes de áudio para melhorar a compatibilidade com os navegadores.

Exemplo:

<audio controls>
  <source src="example.mp3" type="audio/mpeg">
  <source src="example.ogg" type="audio/ogg">
  Your browser does not support the audio tag.
</audio>

Reprodução automática e repetição

Você pode fazer com que vídeos e áudios sejam reproduzidos automaticamente ou em repetição adicionando os atributos autoplay e loop.

Exemplo:

Observação: a reprodução automática pode ser desativada em alguns navegadores por motivos relacionados à experiência do usuário.

<audio src="example.mp3" autoplay loop></audio>

Incorporando vídeos do YouTube

Você pode incorporar vídeos do YouTube à sua página usando a tag <iframe>.

Exemplo:

Substitua example pelo ID exclusivo do vídeo.

<iframe width="560" height="315" src="https://www.youtube.com/embed/example" frameborder="0" allowfullscreen></iframe>

Muito bem!

Parabéns! Você aprendeu a adicionar vídeos, áudio e até incorporações do YouTube às suas páginas da Web. Os recursos multimídia tornam seu conteúdo mais dinâmico e envolvente. Na próxima lição, exploraremos a estilização com CSS para deixar suas páginas da Web incríveis. Prepare-se para conhecer o mundo do design!

Atributos do HTML — ilustração 10

Perguntas Frequentes

A aula “Atributos do HTML” é grátis?

Sim — o texto completo de “Atributos do HTML” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML for Kids, atualize para CoddyKit PRO. O curso de HTML for Kids inclui 4 aulas no total.

O que vou aprender em “Atributos do HTML”?

Entenda como adicionar detalhes extras aos seus elementos usando atributos Você pratica HTML for Kids com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML for Kids?

Nenhuma experiência prévia é necessária. HTML for Kids no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Atributos do HTML”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML for Kids?

Sim. Cada aula de HTML for Kids inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Tabelas: organizando dados
  2. Formulários: coletando dados do usuário
  3. Atributos do HTML
  4. Multimídia: adicionando vídeos e áudio
← Voltar para HTML for Kids