HTML dinâmico (DHTML) é uma coleção de tecnologias que trabalham juntas para criar páginas da web interativas e dinâmicas. Ele amplia os recursos do HTML, permitindo que alterações sejam feitas no conteúdo, no estilo e no layout de uma página da Web após ela ter sido carregada em um navegador da Web.

DHTML combina diversas tecnologias, incluindo:

1. HTML (linguagem de marcação de hipertexto):
- Forma a estrutura básica e o conteúdo de uma página web.
- Exemplo:` ... `

2. CSS (folhas de estilo em cascata):
- Controla como os elementos HTML são apresentados em uma página da web, como fonte, tamanho e cor.
- Exemplo:`body {família de fontes:Arial; cor:azul;}`

3. JavaScript:
- Uma linguagem de programação que permite que as páginas da web respondam às entradas do usuário e exibam conteúdo dinâmico.
- Exemplo:`function sayHello() {alert("Olá, mundo!");}`

4. DOM (Modelo de Objeto de Documento):
- Uma interface de programação que representa a estrutura de um documento HTML e permite que scripts acessem e modifiquem seus elementos.
- Exemplo:`document.getElementById("título").innerHTML ="Novo Título";`

Com DHTML, os desenvolvedores web podem criar elementos interativos como:
1. Validação de dados:
- Verificando dinamicamente a entrada do usuário nos formulários em busca de erros.
2. Animações e transições:
- Criação de movimentos suaves de elementos na página.
3. Funcionalidade de arrastar e soltar:
- Permitir que os usuários movam elementos na página.
4. Menus dinâmicos e navegação:
- Criação de menus suspensos e controles de navegação que respondem às interações do usuário.
5. Ajax (JavaScript assíncrono e XML):
- Permitir interações com um servidor sem atualizar a página inteira, tornando as páginas web mais responsivas e interativas.

Exemplo 1:botão com alteração dinâmica de texto
```



function alterarTexto() {
document.getElementById("text").innerHTML ="Botão clicado!";
}

Exemplo DHTML:Clique no botão para alterar o texto dinamicamente.

Clique em mim

Texto Original



```
Neste exemplo, pressionar o botão atualiza o texto do elemento de parágrafo de “Texto Original” para “Botão Clicado!” em tempo real, demonstrando alterações dinâmicas de texto usando JavaScript.

Exemplo 2:Funcionalidade de arrastar e soltar
```



#arrastável {
largura:50px;
altura:50px;
cor de fundo:vermelho;
}


function permitirArrastar(evento) {
event.preventDefault();
}

função arrastar(evento) {
var alvo =evento.target;
var posição do mouse ={
x:evento.clientX,
y:evento.clientY
}
var deslocamento ={
x:alvo.offsetLeft,
y:alvo.offsetTop
}
varboundingClientRect =target.getBoundingClientRect();

target.style.position ="absoluto";
target.style.top =mousePosition.y - offset.y - (boundingClientRect.height / 2) + "px";
target.style.left =mousePosition.x - offset.x - (boundingClientRect.width / 2) + "px";
}

Exemplo de DHTML:arraste a caixa vermelha para movê-la.

ondragstart="allowDrag(event)" ondrag="drag(event)">

```
Neste exemplo, a caixa vermelha pode ser arrastada e movida pela página da web, ilustrando o uso de JavaScript para implementar a funcionalidade dinâmica de arrastar e soltar.

O DHTML permite que os desenvolvedores criem páginas da web mais envolventes e responsivas que respondem às interações do usuário em tempo real, melhorando a experiência geral do usuário.