Forem: Daniel Nogueira

How to Insert Video in HTML

Daniel Nogueira — Thu, 25 Sep 2025 17:08:00 +0000

In this article, we'll learn which tag we use to create a video element in HTML, as well as the attributes that define how the video will behave.

Now, revealing the secret, to add videos to an HTML document, you need to use the video tag. First, we create the video tag and then add the controls attribute to display a playback control.

<video width="640" height="360" controls>

</video>

Next, we add the <source> tag with the path to the video file.

An interesting detail: we can also add more than one file with a different extension as a security measure, HTML will consider the first supported file.

In this case, we'll add a file with the .mp4 extension. If the file isn't supported or has a problem, HTML will consider the next supported file.

Finally, if none of the files are supported in the browser, we can display a text message informing the user of the error.

<video width="640" height="360" controls>
<source src="./videos/landscape.mp4" type="video/mp4" />
<source src="./videos/landscape.webm" type="video/webm" />
Your browser does not support the video tag
</video>

The video files supported by the browser are:

MP4
OGG
WebM

We also use the type attribute in the <source> tag to inform the browser of the file type being used, it's a good way to maintain semantic HTML.

This will be the result:

Video Tag Attributes

In addition to the controls attribute, we can include other attributes in the <video> tag:

muted specifies that the video is muted
loop specifies that the video plays in a loop
autoplay specifies that the video plays automatically
poster displays an image while the video is loading or until the user presses play

<video width="640" height="360" controls poster="./img/play.jpg">
<source src="./videos/landscape.mp4" type="video/mp4" />
<source src="./videos/landscape.webm" type="video/webm" />
Your browser doesn't support the video tag
</video>

In the code above, we added the poster attribute that displays an image until the user plays the video. This is the result:

This article covered

<video> tag
<source> tag
<video> tag attributes

Author

Daniel Nogueira
LinkedIn

How to Insert Sound in HTML

Daniel Nogueira — Thu, 25 Sep 2025 14:35:40 +0000

In this article, we'll learn which tag we use to create a sound element in HTML, as well as the attributes that define how the audio will behave.

Getting straight to the point, to add sounds to an HTML document, you need to use the <audio> tag. First, we create the <audio> tag and then add the controls attribute to display a playback control.

<audio controls>

</audio>

Next, we add the <source> tag with the path to the audio file.

An interesting detail: we can also add more than one file with a different extension as a safety measure, HTML will consider the first supported file.

In this case, we'll add a file with the .wav extension. If the file isn't supported or has a problem, HTML will consider the next supported file.

Finally, if none of the files are supported in the browser, we can display a text message informing the user of the error.

<audio controls>
<source src="./audio/sound-effect.wav" type="audio/wav" />
<source src="./audio/sound-effect.mp3" type="audio/mp3" />
Your browser does not support the audio tag.
</audio>

The audio files supported by the browser are:

We also use the type attribute in the <source> tag to inform the browser of the file type being used, it's a good way to maintain semantic HTML.

This will be the result:

Audio Tag Attributes

In addition to the controls attribute, we can include other attributes in the <audio> tag, most of which do not need to be assigned a value.

muted specifies that the audio is muted
loop specifies that the audio plays in a loop
autoplay specifies that the audio plays automatically

<audio controls autoplay loop>
<source src="./audio/sound-effect.wav" type="audio/wav" />
<source src="./audio/sound-effect.mp3" type="audio/mp3" />
Your browser does not support the audio tag.
</audio>

In the case of the code above, as soon as the page loads, the audio will play automatically due to the autoplay attribute and will continue playing due to the loop attribute.

This article covered

<audio> Tag
<source> Tag
<audio> Tag Attributes

Author

Daniel Nogueira
LinkedIn

Como Inserir uma Imagem Semântica em HTML

Daniel Nogueira — Mon, 23 Dec 2024 14:48:48 +0000

É comum conhecer a tag <img> para adicionar imagens em HTML, mas existe uma maneira mais semântica para isso, que é usando a tag <figure>.

Essa tag funciona como uma tag <section>, que engloba outros elementos. E no caso da tag <figure>, ela é própria para englobar conteúdo de imagem.

Primeiro, crie a tag <figure>:

<figure>

</figure>

Agora, adicione a tag <img> para especificar o caminho do arquivo de imagem a ser usado:

<figure>
  <img src="cristo-redentor.jpg" title="Cristo Redentor" alt="Cristo Redentor">
</figure>

Por fim, a tag <figure> permite adicionar uma legenda na imagem. Para isso, usamos a tag <figcaption>:

<figure>
  <img src="cristo-redentor.jpg" title="Cristo Redentor" alt="Cristo Redentor">
  <figcaption>Fig.1 - Cristo Redentor no Rio de Janeiro</figcaption>
</figure>

Resultado:

Por que isso é importante?

O uso de tags semânticas é fundamental para promover a inclusão e acessibilidade na web, além de melhorar o posicionamento da aplicação nos motores de busca (SEO).

Esse artigo abordou

Tag <figure>
Tag <figcaption>
Imagens semânticas

Autor

Daniel Nogueira
https://www.linkedin.com/in/udanielnogueira/

Como Criar uma Estrutura Semântica em HTML

Daniel Nogueira — Sat, 21 Dec 2024 20:29:44 +0000

Nesse artigo, daremos um exemplo de uma estrutura de HTML semântico. Não é uma fórmula pronta e exata, mas é um bom caminho para aqueles que precisam de ajuda nessa tarefa.

E a primeira tag que vamos criar dentro da tag <body> é a tag <header>, a tag de cabeçalho. E nessa tag <header>, é usualmente comum adicionar uma tag <nav>, que é a tag para um menu de navegação.

E nesse menu de navegação, listamos os links com o auxílio das tags <ul>, <li> e <a>.

<header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#posts">Posts</a></li>
    </ul>
  </nav>
</header>

Após a tag <header>, vamos dar início ao conteúdo principal da página. Para isso, usaremos a tag <main>, que é a tag semântica para englobar as seções do conteúdo principal.

<header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#posts">Posts</a></li>
    </ul>
  </nav>
</header>

<main>

</main>

Dentro da tag <main>, a página pode conter diferentes seções. Semanticamente falando, cada seção deve desempenhar um papel único, por exemplo:

Seção de postagens
Seção de comentários
Seção de patrocinadores
Seção de galeria de imagens
...

Para essa estrutura, vamos pensar em uma seção de postagens de notícias. Logo, é viável englobar essa seção com uma tag chamada <section>.

<header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#posts">Posts</a></li>
    </ul>
  </nav>
</header>

<main>
  <section id="posts">

  </section>
</main>

Agora, precisamos criar os posts de notícias que farão parte dessa seção. Para isso, existe a tag <article>, cada <article> irá representar uma postagem.

Essa tag <article> é usada justamente para representar um componente que será utilizado mais de uma vez em uma página. Se teremos vários elementos de post, logo faz sentido cada postagem de notícia ser um <article>.

<header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#posts">Posts</a></li>
    </ul>
  </nav>
</header>

<main>
  <section id="posts">
    <article class="post">
      <h3>Post title 1</h3>
      <p>Post content 1</p>
    </article>

      <article class="post">
        <h3>Post title 2</h3>
        <p>Post content 2</p>
      </article>
  </section>
</main>

A tag <main> pode ter uma seção lateral em paralelo às outras seções mais importantes, nesse caso, usamos a tag <aside>.

Para o código que estamos desenvolvendo, a tag <aside> irá ser usada para representar uma seção de melhores postagens da página.

<header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#posts">Posts</a></li>
    </ul>
  </nav>
</header>

<main>
  <section id="posts">
    <article class="post">
      <h3>Post title 1</h3>
      <p>Post content 1</p>
    </article>

      <article class="post">
        <h3>Post title 2</h3>
        <p>Post content 2</p>
      </article>
  </section>

  <aside>
    <h2>Best posts</h2>
      <ul>
        <li href="#">Best post 1</li>
        <li href="#">Best post 2</li>
        <li href="#">Best post 3</li>
      </ul>
  </aside>
</main>

Por fim, adicionaremos o popular <footer>, que é o rodapé da página. Um detalhe importante para a semântica é usar a tag <address>, indicada para conter informações de contato.

<header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#posts">Posts</a></li>
    </ul>
  </nav>
</header>

<main>
  <section id="posts">
    <article class="post">
      <h3>Post title 1</h3>
      <p>Post content 1</p>
    </article>

      <article class="post">
        <h3>Post title 2</h3>
        <p>Post content 2</p>
      </article>
  </section>

  <aside>
    <h2>Best posts</h2>
      <ul>
        <li href="#">Best post 1</li>
        <li href="#">Best post 2</li>
        <li href="#">Best post 3</li>
      </ul>
  </aside>
</main>

<footer>
  <p>2024 &copy The Dev Journal</p>
  <address>
    <a href="mailto:daniel@example.com">daniel@example.com</a> 
  </address>
</footer>

A estrutura do HTML completo fica assim:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="UTF-8" />
    <title>Dev Post</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#posts">Posts</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <section id="posts">
        <article class="post">
          <h3>Post title 1</h3>
          <p>Post content 1</p>
        </article>

        <article class="post">
          <h3>Post title 2</h3>
          <p>Post content 2</p>
        </article>
      </section>

      <aside>
        <h2>Best posts</h2>
        <ul>
          <li href="#">Best post 1</li>
          <li href="#">Best post 2</li>
          <li href="#">Best post 3</li>
        </ul>
      </aside>
    </main>

    <footer>
      <p>2024 &copy Dev Post</p>
      <address>
        <a href="mailto:daniel@example.com">daniel@example.com</a>
      </address>
    </footer>
  </body>
</html>

Section com articles ou Articles com sections?

Nessa nossa estrutura HTML, cada <section> pode englobar um conjunto de tags <article>. Existem estilos de desenvolvimento que preferem pensar no oposto, cada <article> englobando um conjunto de tags <section>.

Independente da sua escolha, o importante é manter uma mesma convenção em todos os seus projetos. E caso estiver em uma empresa, seguir o padrão usado nela.

Esse artigo abordou

Uso da tag <nav>
Uso da tag <main>
Uso da tag <aside>
Uso da tag <footer>
Uso da tag <section>
Uso da tag <article>
Uso da tag <address>
Estrutura HTML Semântica

Autor

Daniel Nogueira
https://www.linkedin.com/in/udanielnogueira/

Como Criar um Campo de Texto Editável em HTML

Daniel Nogueira — Sat, 21 Dec 2024 13:50:24 +0000

Nesse artigo, vamos criar um campo de texto que pode ser editado pelo usuário no navegador. Além disso, iremos perceber um detalhe que pode ser resolvido usando uma outra tag em específico.

E para tornar um campo de texto editável, usamos uma solução muito simples que é adicionar o atributo contenteditable, esse atributo pode assumir dois valores: true ou false.

<p contenteditable="true">Conteúdo editável</p>

No exemplo abaixo, usaremos o atributo contenteditable em uma tag parágrafo. E logicamente, para atender ao que queremos, atribuímos ao atributo o valor true.

Perceba que, o elemento de parágrafo está ocupando toda a largura disponível. Existe uma maneira de contornar essa situação, que é usando a tag <span> ao invés da tag <p>.

<span contenteditable="true">Conteúdo editável</span>

Agora a largura do campo de texto editável não é mais uma largura fixa, mas está dependendo do tamanho do conteúdo em si.

Esse artigo abordou

Atributo contenteditable
Atributo contenteditable na tag <span>

Autor

Daniel Nogueira
https://www.linkedin.com/in/udanielnogueira/

[Boost]

Daniel Nogueira — Tue, 17 Dec 2024 19:56:05 +0000

Como Inserir Vídeo em HTML

Daniel Nogueira ・ Dec 17 '24

#webdev #html #beginners #braziliandevs

Como Inserir Vídeo em HTML

Daniel Nogueira — Tue, 17 Dec 2024 19:47:44 +0000

Nesse artigo, vamos aprender qual tag usamos para criar um elemento de vídeo em HTML, bem como conhecer os atributos que irão definir como o vídeo irá se comportar.

Já revelando o segredo, para adicionar vídeos em um documento HTML é necessário usar a tag video. Primeiro criamos a tag de video e depois adicionamos o atributo controls para exibir um controle de reprodução.

<video width="640" height="360" controls>

</video>

Em seguida, adicionamos a tag <source> com o caminho do arquivo de vídeo.

Um detalhe interessante, também podemos adicionar mais de um arquivo com uma extensão diferente como medida de segurança, o HTML irá considerar o primeiro arquivo suportado.

Nesse caso, iremos adicionar um arquivo de extensão .mp4, caso o arquivo não seja suportado ou apresente algum problema, o HTML irá considerar o próximo arquivo .webm.

Por fim, caso nenhum dos arquivos sejam suportados no navegador, podemos exibir uma mensagem de texto informado ao usuário o motivo do erro.

<video width="640" height="360" controls>
  <source src="./videos/landscape.mp4" type="video/mp4" />
  <source src="./videos/landscape.webm" type="video/webm" />
  O seu navegador não suporta a tag de vídeo
</video>

Os arquivos de vídeo suportados pelo navegador são:

MP4
OGG
WebM

Também usamos o atributo type na tag <source> para informar ao navegador o tipo de arquivo que está sendo usado, é uma boa forma de manter o HTML semântico.

Esse será o resultado:

Atributos da Tag de Vídeo

Além do atributo controls, podemos incluir outros atributos na tag <video>:

muted determina que o vídeo esteja mutado
loop determina que o vídeo seja reproduzido em loop
autoplay determina que o vídeo seja reproduzido automaticamente
poster exibe uma imagem enquanto o vídeo está carregando ou até que o usuário aperte o play

<video width="640" height="360" controls poster="./img/play.jpg">
  <source src="./videos/landscape.mp4" type="video/mp4" />
  <source src="./videos/landscape.webm" type="video/webm" />
  O seu navegador não suporta a tag de vídeo
</video>

No código acima, adicionamos o atributo poster que exibe uma imagem até que o usuário reproduza o vídeo. O resultado será esse:

Esse artigo abordou

Tag <video>
Tag <source>
Atributos da tag <video>

Autor

Daniel Nogueira
https://www.linkedin.com/in/udanielnogueira/

Como Inserir Som em HTML

Daniel Nogueira — Sun, 15 Dec 2024 22:54:07 +0000

Nesse artigo, vamos aprender qual tag usamos para criar um elemento de som em HTML, bem como conhecer os atributos que irão definir como o áudio irá se comportar.

Indo direto ao ponto, para adicionar sons em um documento HTML é necessário usar a tag <audio>. Primeiro criamos a tag de <audio> e depois adicionamos o atributo controls para exibir um controle de reprodução.

<audio controls>

</audio>

Em seguida, adicionamos a tag <source> com o caminho do arquivo de áudio.

Um detalhe interessante, também podemos adicionar mais de um arquivo com uma extensão diferente como medida de segurança, o HTML irá considerar o primeiro arquivo suportado.

Nesse caso, iremos adicionar um arquivo de extensão .wav, caso o arquivo não seja suportado ou apresente algum problema, o HTML irá considerar o próximo arquivo .mp3.

Por fim, caso nenhum dos arquivos sejam suportados no navegador, podemos exibir uma mensagem de texto informado ao usuário o motivo do erro.

<audio controls>
  <source src="./audio/sound-effect.wav" type="audio/wav" />
  <source src="./audio/sound-effect.mp3" type="audio/mp3" />
  O seu navegador não suporta a tag de áudio.
</audio>

Os arquivos de áudio suportados pelo navegador são:

Também usamos o atributo type na tag <source> para informar ao navegador o tipo de arquivo que está sendo usado, é uma boa forma de manter o HTML semântico.

Esse será o resultado:

Atributos da Tag de Áudio

Além do atributo controls, podemos incluir outros atributos na tag <audio>, a maioria deles são atributos que não precisam receber valor, inclusive.

muted determina que o áudio esteja mutado
loop determina que o áudio seja reproduzido em loop
autoplay determina que o áudio seja reproduzido automaticamente

<audio controls autoplay loop>
  <source src="./audio/sound-effect.wav" type="audio/wav" />
  <source src="./audio/sound-effect.mp3" type="audio/mp3" />
  O seu navegador não suporta a tag de áudio.
</audio>

No caso do código acima, assim que a página carregar, o áudio será reproduzido automaticamente por causa do atributo autoplay e continuará sendo reproduzido por causa do atributo loop.

Esse artigo abordou

Tag <audio>
Tag <source>
Atributos da tag <audio>

Autor

Daniel Nogueira
https://www.linkedin.com/in/udanielnogueira/

Anatomia de um Elemento HTML

Daniel Nogueira — Sat, 14 Dec 2024 14:58:06 +0000

Nesse artigo, vamos explorar a anatomia de um elemento HTML, conhecer os atributos e saber reconhecer quando um elemento é vazio ou não.

O elemento de parágrafo da imagem acima é divido em 3 partes:

Tag de abertura

A tag de abertura é definida a partir do elemento que desejamos criar no HTML, se desejamos criar um elemento de parágrafo, então devemos usar uma tag de abertura <p>.

A tag de abertura foi criada a partir do sinal <, seguido do nome da tag p e do sinal >.

Conteúdo

O conteúdo do elemento depende da tag que está sendo criada, no caso de um elemento parágrafo, o conteúdo será texto. Basicamente, o conteúdo é tudo aquilo entre a tag de abertura e a tag de fechamento.

Tag de fechamento

Usaremos o mesmo nome da tag em questão, a diferença é que devemos incluir uma barra após o sinal de menor, dessa forma: </p>.

Elementos com atributos

Elementos também podem ter atributos que possuem informações extras para uma tag, importante ressaltar que os atributos devem ser inseridos na tag de abertura e não no conteúdo do elemento.

O atributo class é um atributo que deve receber um valor. Para isso, é necessário usar o sinal = e atribuímos um valor para ele entre aspas. Mas também existem atributos que não recebem valor, como o atributo required.

Elementos Vazios

Até agora vimos elementos que precisam de conteúdo, mas no HTML também existem elementos que não possuem conteúdo, chamamos esses elementos de elementos vazios.

Esses elementos não possuem uma tag de fechamento e nem precisam envolver qualquer tipo de conteúdo para cumprir seu objetivo, um exemplo de elemento vazio é a tag de imagem.

Uma observação importante: os elementos vazios possuem uma barra antes do sinal de maior.

Esse artigo abordou

Anatomia de um elemento HTML
Elementos com atributos
Elementos vazios

Autor

Daniel Nogueira
https://www.linkedin.com/in/udanielnogueira/

Creating Delays in Python Programs

Daniel Nogueira — Wed, 04 Jan 2023 19:30:54 +0000

Short breaks can be fun and functional in some programs. Creating a waiting time before displaying a text, for example, can make the process of using that program more real.

For that, let's import the sleep() method from the time module:

from time import sleep

And now just call the sleep() method specifying the time in seconds:

# 3 second delay
sleep(3)

# 1 minute delay
sleep(60)

Example of how delays can make a program more real:

print('Jo')
sleep(1)
print('Ken')
sleep(1)
print('Po')
sleep(1)

Criando Pausas em Programas em Python

Daniel Nogueira — Wed, 04 Jan 2023 19:23:37 +0000

Pausas curtas podem ser divertidas e funcionais em alguns programas. Criar um tempo de espera antes de apresentar um texto, por exemplo, pode tornar o processo de uso daquele programa mais real.

Tecnicamente isso é um delay, e não uma pausa no sentido literal. Para tal coisa, vamos importar o método sleep() do módulo time:

from time import sleep

E agora basta chamar o método sleep() especificando o tempo em segundos:

# Pausa de 3 segundos
sleep(3)

# Pausa de 1 minuto
sleep(60)

Exemplo de como as pausas podem tornar um programa mais real:

print('Jo')
sleep(1)
print('Ken')
sleep(1)
print('Pô!')
sleep(1)

Date and Time in Python

Daniel Nogueira — Wed, 04 Jan 2023 18:19:56 +0000

We can get data and time information in Python using the datetime module. Let's import it:

import datetime

Date

In the datetime module we can use the date class, which has today() to load the current day's data:

date = datetime.date.today()
print(date)

Result example:

2023-01-04

We can also get each date information separately:

day = datetime.date.today().day
month = datetime.date.today().month
year = datetime.date.today().year

print(day)
print(month)
print(year)

Result example:

4
1
2023

Time

To get the time, we'll use the datetime class and its now() method:

now = datetime.datetime.now()
print(now)

Result example:

2023-01-04 14:28:19.041413

Note that the time schedule is organized into:

hour:minute:second.microsecond

Time formatting

We can change the way the time is being displayed through the strftime() method. By default, we have %d for day, %m for month, %y for year, %H for hour, %M for minute and %S for seconds. Let's use new variables to save these formatted values:

format1 = now.strftime('%d/%m/%y')
print(format1)

format2 = now.strftime('%d.%m.%Y %H:%M:%S')
print(format2)

Result example:

01/04/23
04.01.2023 14:28:19

Note that using %Y, we have the year displayed with 4 characters.