HTML dinâmico

format_list_bulleted Contenido keyboard_arrow_down

ImprimirCitar

Codificando sites interativos ou animados

Dynamic HTML, ou DHTML, é um termo usado por alguns fornecedores de navegadores para descrever a combinação de HTML, folhas de estilo e scripts do lado do cliente (JavaScript, VBScript, ou qualquer outro script suportado) que permite a criação de documentos interativos e animados. A aplicação de DHTML foi introduzida pela Microsoft com o lançamento do Internet Explorer 4 em 1997.

O DHTML permite que as linguagens de script alterem as variáveis na linguagem de definição de uma página da Web, o que, por sua vez, afeta a aparência e a função de páginas "estáticas" Conteúdo da página HTML após a página ter sido totalmente carregada e durante o processo de visualização. Assim, a característica dinâmica do DHTML é a maneira como ele funciona enquanto uma página é visualizada, não em sua capacidade de gerar uma página única a cada carregamento de página.

Por outro lado, uma página da Web dinâmica é um conceito mais amplo, abrangendo qualquer página da Web gerada de forma diferente para cada usuário, ocorrência de carregamento ou valores de variável específicos. Isso inclui páginas criadas por scripts do lado do cliente e aquelas criadas por scripts do lado do servidor (como PHP, Python, JSP ou ASP.NET) em que o servidor da Web gera conteúdo antes de enviá-lo ao cliente.

DHTML é o antecessor do Ajax e as páginas DHTML ainda são baseadas em solicitação/recarregamento. No modelo DHTML, pode não haver nenhuma interação entre o cliente e o servidor após o carregamento da página; todo o processamento acontece no lado do cliente. Por outro lado, o Ajax estende os recursos do DHTML para permitir que a página inicie solicitações de rede (ou 'subsolicitação') ao servidor mesmo após o carregamento da página para executar ações adicionais. Por exemplo, se houver várias guias em uma página, a abordagem DHTML pura carregaria o conteúdo de todas as guias e exibiria dinamicamente apenas a que está ativa, enquanto o AJAX poderia carregar cada guia apenas quando realmente necessário.

Usos

O DHTML permite que os autores adicionem efeitos às suas páginas que, de outra forma, seriam difíceis de obter, alterando o Document Object Model (DOM) e o estilo da página. A combinação de HTML, CSS e JavaScript oferece maneiras de:

Animar texto e imagens em seu documento.
Incorpore um ticker ou outro display dinâmico que atualize automaticamente seu conteúdo com as últimas notícias, citações de ações ou outros dados.
Use um formulário para capturar a entrada do usuário e, em seguida, processar, verificar e responder a esses dados sem ter que enviar dados de volta para o servidor.
Inclua botões de rollover ou menus drop-down.

Um uso menos comum é criar jogos de ação baseados em navegador. Embora vários jogos tenham sido criados usando DHTML durante o final dos anos 1990 e início dos anos 2000, as diferenças entre os navegadores tornaram isso difícil: muitas técnicas tiveram que ser implementadas em código para permitir que os jogos funcionassem em várias plataformas. Recentemente, os navegadores estão convergindo para os padrões da web, o que tornou mais viável o design de jogos DHTML. Esses jogos podem ser jogados em todos os principais navegadores e também podem ser portados para Plasma para KDE, Widgets para macOS e Gadgets para Windows Vista, que são baseados em código DHTML.

O termo "DHTML" caiu em desuso nos últimos anos, pois foi associado a práticas e convenções que tendiam a não funcionar bem entre vários navegadores da web.

Suporte DHTML com amplo acesso DOM foi introduzido com o Internet Explorer 4.0. Embora houvesse um sistema dinâmico básico com o Netscape Navigator 4.0, nem todos os elementos HTML eram representados no DOM. Quando as técnicas do estilo DHTML se espalharam, vários graus de suporte entre os navegadores da Web para as tecnologias envolvidas dificultaram o desenvolvimento e a depuração. O desenvolvimento tornou-se mais fácil quando o Internet Explorer 5.0+, o Mozilla Firefox 2.0+ e o Opera 7.0+ adotaram um DOM compartilhado herdado do ECMAScript.

Mais recentemente, as bibliotecas JavaScript, como jQuery, abstraíram muitas das dificuldades do dia-a-dia na manipulação de DOM entre navegadores.

Estrutura de uma página web

Normalmente, uma página da Web usando DHTML é configurada da seguinte maneira:

<! DOCTYPE html<html Lang= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ="en"><cabeça> <meta charset= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ="utf-8"> <título>Exemplo de DHTML</título></cabeça><corpo Bgcolor= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ="vermelho"> <script> função - Não.() ( Deixa-me. meu Objecção = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = documento.O que é isso?("navegação"); //... manipula o meu Objecção ? janela.sobrecarga = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = - Não.; </script> <!- Muitas vezes o código é armazenado em um arquivo externo; isso é feito vinculando o arquivo que contém o JavaScript. Isso é útil quando várias páginas usam o mesmo script: --- <script src= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ="my-javascript.js">script></corpo></html>

Exemplo: exibir um bloco de texto adicional

O código a seguir ilustra uma função frequentemente usada. Uma parte adicional de uma página da web só será exibida se o usuário a solicitar.

<! DOCTYPE html<html><cabeça> <meta charset= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ="utf-8"> <título>Usando uma função DOM</título> <estilo> um ( fundo-color: #eee; ? um:Hover ( fundo: #ff0; ? #Apertar Eu... ( fundo: #cfc; exibição de exibição: nenhum; margem de margem: 30px 0; Almofada: 1em Colômbia; ? </estilo></cabeça><corpo> <H1>Usando uma função DOM</H1> <h2> <um I= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ="showhide" Href= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ="#>Mostrar parágrafo</um>h2> <p I= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ="toggle-me">Este é o parágrafo que só é exibido a pedido.</p> <p>O fluxo geral do documento continua.</p> <script> função changeDisplayState(Iluminação, texto Elemento) ( se (Iluminação.estilo.exibição de exibição - Sim. "não" | Iluminação.estilo.exibição de exibição - Sim. ") ( Iluminação.estilo.exibição de exibição = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = "bloquear"; texto Elemento.internoHTML = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = "O parágrafo Hide"; ? mais ( Iluminação.estilo.exibição de exibição = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = "não"; texto Elemento.internoHTML = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = "Mostrar parágrafo"; ? ? Deixa-me. Iluminação = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = documento.O que é isso?("toggle-me"); Deixa-me. texto Elemento = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = documento.O que é isso?("showhide"); texto Elemento.Adicionar ao cesto("clique", função (e) ( e.prevenção de falhas(); changeDisplayState(Iluminação, texto Elemento); }); </script></corpo></html>

Modelo de objeto de documento

DHTML não é uma tecnologia em si; em vez disso, é o produto de três tecnologias relacionadas e complementares: HTML, Cascading Style Sheets (CSS) e JavaScript. Para permitir que scripts e componentes acessem recursos de HTML e CSS, o conteúdo do documento é representado como objetos em um modelo de programação conhecido como Document Object Model (DOM).

A API DOM é a base do DHTML, fornecendo uma interface estruturada que permite acesso e manipulação de praticamente qualquer coisa no documento. Os elementos HTML no documento estão disponíveis como uma árvore hierárquica de objetos individuais, tornando possível examinar e modificar um elemento e seus atributos lendo e definindo propriedades e chamando métodos. O texto entre os elementos também está disponível por meio de propriedades e métodos DOM.

O DOM também fornece acesso às ações do usuário, como pressionar uma tecla e clicar com o mouse. É possível interceptar e processar esses e outros eventos criando funções e rotinas do manipulador de eventos. O manipulador de eventos recebe o controle toda vez que um determinado evento ocorre e pode executar qualquer ação apropriada, inclusive usar o DOM para alterar o documento.

Estilos dinâmicos

Estilos dinâmicos são um recurso chave do DHTML. Ao usar CSS, pode-se alterar rapidamente a aparência e a formatação dos elementos em um documento sem adicionar ou remover elementos. Isso ajuda a manter os documentos pequenos e os scripts que manipulam o documento rapidamente.

O modelo de objeto fornece acesso programático aos estilos. Isso significa que você pode alterar estilos embutidos em elementos individuais e alterar regras de estilo usando programação JavaScript simples.

Estilos embutidos são atribuições de estilo CSS que foram aplicadas a um elemento usando o atributo style. Você pode examinar e definir esses estilos recuperando o objeto de estilo para um elemento individual. Por exemplo, para destacar o texto em um cabeçalho quando o usuário move o ponteiro do mouse sobre ele, você pode usar o objeto de estilo para aumentar a fonte e alterar sua cor, conforme mostrado no exemplo simples a seguir.

<! DOCTYPE html<html Lang= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ="en"><cabeça> <meta charset= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ="utf-8"> <título>Estilos dinâmicos</título> <estilo> ul ( exibição de exibição: nenhum; ? </estilo></cabeça><corpo> <H1 I= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ="primeiro cabeçalho">Bem-vindo ao Dynamic HTML</H1> <p> <um I= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ="link clicável" Href= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ="#>Estilos dinâmicos são uma característica chave de DHTML.</um>p> <ul I= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ="lista não ordenada"> <li>Alterar a cor, o tamanho e o tipo de texto</li> <li>Mostrar e ocultar texto</li> <li>E muito, muito mais</li> </ul> <p>Só começámos!</p> <script> função Mostrar() ( documento.O que é isso?("primeiro cabeçalho").estilo.cor da cor = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = "#990000"; documento.O que é isso?("lista não ordenada").estilo.exibição de exibição = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = "bloquear"; ? documento.O que é isso?("link clicável").Adicionar ao cesto("clique", função (e) ( e.prevenção de falhas(); Mostrar(); }); </script></corpo></html>

Contenido relacionado

Más resultados...