Exemplos HTML
- Página Anterior HTML5 SSE
- Próxima Página Teste HTML
Exemplo de tags básicas HTML
- Um arquivo HTML simples
- Este exemplo é um arquivo HTML muito simples, que usa o menor número possível de tags HTML. Ele demonstra como o conteúdo dentro do elemento body é exibido pelo navegador.
- Parágrafo simples
- Este exemplo demonstra: como o texto dentro de elementos de parágrafo é exibido pelo navegador.
- Mais parágrafos
- Este exemplo demonstra alguns comportamentos padrão de elementos de parágrafo.
- Problema de poesia
- Este exemplo demonstra alguns problemas de formatação HTML.
- Quebra de linha
- Este exemplo demonstra o uso da quebra de linha em documentos HTML.
- Título
- Este exemplo demonstra as tags para exibir títulos em documentos HTML.
- Título alinhado no centro
- Este exemplo demonstra um título alinhado no centro.
- Linha horizontal
- Este exemplo demonstra como inserir uma linha horizontal.
- Comentários ocultos
- Este exemplo demonstra como inserir comentários ocultos no código-fonte HTML.
- Cor de fundo
- Este exemplo demonstra como adicionar uma cor de fundo à página HTML.
Exemplo de formatação de texto HTML
- Formatação de texto
- Este exemplo demonstra como formatar texto em um arquivo HTML.
- Texto pré-formatado
- Este exemplo demonstra como usar a tag pre para controlar linhas em branco e espaços em branco.
- Tags de "saída de computador"
- Este exemplo demonstra os efeitos de diferentes tags de "saída de computador".
- Endereço
- Este exemplo demonstra como escrever endereços em arquivos HTML.
- Abreviações e siglas
- Este exemplo demonstra como implementar abreviações ou siglas.
- Direção do texto
- Este exemplo demonstra como alterar a direção do texto.
- Citação em bloco
- Este exemplo demonstra como implementar citações de diferentes tamanhos.
- Efeito de deletar texto e efeito de inserir texto
- Este exemplo demonstra como marcar texto deletado e texto inserido.
Exemplo de link HTML
- Criar hiperlinks
- Este exemplo demonstra como criar links em documentos HTML.
- Usar imagens como links
- Este exemplo demonstra como usar imagens como links.
- Abrir links em uma nova janela do navegador
- Abrir uma página em uma nova janela do navegador, de modo que o visitante não precise sair do seu site.
- Link para diferentes localizações na mesma página
- Este exemplo demonstra como usar links para saltar para outra parte do documento.
- Sair do frame
- Este exemplo demonstra como sair do frame, se sua página estiver fixa dentro do frame.
- Criar link de e-mail
- Este exemplo demonstra como linkar para um e-mail. (Este exemplo só funcionará após a instalação do programa do cliente de e-mail.)
- Criar link de e-mail 2
- Este exemplo demonstra links de e-mail mais complexos.
Exemplo de frame HTML
- Frame vertical
- Este exemplo demonstra como usar três documentos diferentes para criar um frame vertical.
- Frame horizontal
- Este exemplo demonstra como usar três documentos diferentes para criar um frame horizontal.
- Como usar a tag <noframes>
- Este exemplo demonstra como usar a tag <noframes>.
- Estrutura de frame misturado
- Este exemplo demonstra como criar uma estrutura de frame contendo três documentos, ao mesmo tempo em que os mistura em linhas e colunas.
- Estrutura de frame com a propriedade noresize="noresize"
- Este exemplo demonstra a propriedade noresize. Neste exemplo, o frame não pode ser ajustado em tamanho. Ao arrastar o mouse sobre a borda entre os frames, você perceberá que a borda não pode ser movida.
- Estrutura de navegação
- Este exemplo demonstra como criar uma estrutura de navegação. A estrutura de navegação contém uma lista de links que alvo o segundo frame. O arquivo chamado "contents.htm" contém três links.
- Frame embutido
- Este exemplo demonstra como criar um frame embutido (frame inline) dentro de uma página HTML.
- Saltar para uma seção específica dentro de um frame
- Este exemplo demonstra dois frames. Um dos frames contém um link que aponta para uma seção especificada em outro arquivo. O arquivo "link.htm" especifica a seção usando <a name="C10">.
- Navegação entre frames para seções especificadas
- Este exemplo demonstra dois frames. O frame de navegação à esquerda contém uma lista de links, esses links fazem o segundo frame como alvo. O segundo frame exibe o documento linkado. Os links no frame de navegação apontam para a seção especificada no arquivo de destino.
Exemplo de tabela HTML
- Tabela
- Este exemplo demonstra como criar uma tabela dentro de um documento HTML.
- Bordas da tabela
- Este exemplo demonstra vários tipos de bordas de tabela.
- Tabela sem borda
- Este exemplo demonstra uma tabela sem borda.
- Cabeçalho da tabela (Heading)
- Este exemplo demonstra como exibir o cabeçalho da tabela.
- Células vazias
- Este exemplo demonstra como lidar com células da tabela sem conteúdo usando " ".
- Tabela com título
- Este exemplo demonstra uma tabela com título (caption).
- Células da tabela que span linhas ou colunas
- Este exemplo demonstra como definir células da tabela que span linhas ou colunas.
- Etiquetas dentro da tabela
- Este exemplo demonstra como exibir elementos dentro de diferentes elementos.
- Preenchimento de célula (Cell padding)
- Este exemplo demonstra como usar o preenchimento de célula para criar espaço entre o conteúdo da célula e a borda.
- Espaçamento de célula (Cell spacing)
- Este exemplo demonstra como usar o espaçamento de célula para aumentar o espaço entre as células.
- Adicionar cor de fundo ou imagem de fundo à tabela
- Este exemplo demonstra como adicionar um fundo à tabela.
- Adicionar cor de fundo ou imagem de fundo às células da tabela
- Este exemplo demonstra como adicionar uma cor de fundo ou imagem de fundo a uma ou mais células da tabela.
- Alinhar conteúdo nas células da tabela
- Este exemplo demonstra como usar a propriedade "align" para alinhar o conteúdo das células, criando uma tabela bonita.
- Propriedade frame (框架)
- Este exemplo demonstra como usar a propriedade "frame" para controlar a borda ao redor da tabela.
Exemplo de lista HTML
- Lista não ordenada
- Este exemplo demonstra listas não ordenadas.
- Lista ordenada
- Este exemplo demonstra listas ordenadas.
- Listas não ordenadas de diferentes tipos
- Este exemplo demonstra uma lista não ordenada.
- Listas ordenadas de diferentes tipos
- Este exemplo demonstra listas ordenadas de diferentes tipos.
- Lista aninhada
- Este exemplo demonstra como aninhar listas.
- Lista aninhada 2
- Este exemplo demonstra listas aninhadas mais complexas.
- Lista definida
- Este exemplo demonstra uma lista definida.
Exemplo de formulário HTML e entrada
- Campo de texto (Text fields)
- Este exemplo demonstra como criar um campo de texto no HTML da página. O usuário pode escrever texto no campo de texto.
- Campo de senha
- Este exemplo demonstra como criar um campo de senha no HTML.
- Caixa de seleção
- Este exemplo demonstra como criar caixas de seleção no HTML. O usuário pode marcar ou desmarcar as caixas de seleção.
- Botão de opção
- Este exemplo demonstra como criar botões de opção no HTML.
- Lista suspensa simples
- Este exemplo demonstra como criar uma caixa de lista suspensa simples na página HTML. A caixa de lista suspensa é uma lista opcional.
- Outra lista suspensa
- Outro exemplo de lista suspensa com valor pré-selecionado. (Nota do tradutor: valor pré-selecionado se refere à preferência pré-definida.)
- Campo de texto (Textarea)
- Este exemplo demonstra como criar um campo de texto (controle de entrada de texto multilinha). O usuário pode escrever texto no campo de texto. No campo de texto, o número de caracteres que podem ser escritos não é limitado.
- Criar botão
- Este exemplo demonstra como criar botões. Você pode personalizar o texto no botão.
- Fieldset ao redor dos dados
- Este exemplo demonstra como desenhar uma caixa com título ao redor dos dados.
Exemplo de formulário
- Formulário com caixas de entrada e botão de confirmação
- Este exemplo demonstra como adicionar um formulário à página. Este formulário contém dois campos de entrada e um botão de confirmação.
- Formulário com caixas de seleção
- Este formulário contém duas opções de seleção e um botão de confirmação.
- Formulário com botões de opção
- Este formulário contém duas opções de rádio e um botão de confirmação.
- Enviar e-mail a partir de formulário
- Este exemplo demonstra como enviar e-mail a partir de um formulário.
Exemplo de imagem HTML
- Inserir imagem
- Este exemplo demonstra como exibir uma imagem na página da web.
- Inserir imagem de diferentes locais
- Este exemplo demonstra como exibir imagens de diferentes pastas ou servidores na página da web.
- Imagem de fundo
- Este exemplo demonstra como adicionar uma imagem de fundo ao HTML da página.
- Alinhar imagem
- Este exemplo demonstra como alinhar a imagem no texto.
- Imagem flutuante
- Este exemplo demonstra como fazer a imagem flutuar para a esquerda ou direita do parágrafo.
- Ajustar o tamanho da imagem
- Este exemplo demonstra como ajustar o tamanho da imagem para diferentes tamanhos.
- Exibir texto alternativo para imagem
- Este exemplo demonstra como exibir texto alternativo para uma imagem. Quando a imagem não pode ser carregada no navegador, o atributo de texto alternativo informa aos leitores o que foi perdido. É uma boa prática adicionar o atributo de texto alternativo a todas as imagens na página.
- Fazer link de imagem
- Este exemplo demonstra como usar uma imagem como um link.
- Criar mapa de imagem
- Este exemplo mostra como criar um mapa de imagem com áreas clicáveis. Cada área é um link.
- Converter imagem em mapa de imagem
- Este exemplo mostra como configurar uma imagem comum como um mapa de imagem.
Exemplo de fundo HTML
- Combinação de fundo e cores bem sucedida
- Um exemplo de boa combinação de cor de fundo e cor de texto, tornando o texto na página fácil de ler.
- A combinação de fundo e cores mal sucedida
- Exemplo onde a combinação de cor de fundo e cor do texto não combina bem, tornando o texto da página difícil de ler.
- Imagem de fundo de alta acessibilidade
- Exemplo onde a imagem de fundo e a cor do texto tornam o texto da página fácil de ler.
- Imagem de fundo de alta acessibilidade 2
- Outro exemplo onde a imagem de fundo e a cor do texto tornam o texto da página fácil de ler.
- Imagem de fundo de baixa acessibilidade
- Exemplo onde a imagem de fundo e a cor do texto tornam o texto da página difícil de ler.
Exemplo de Estilo (style) HTML
- Estilo no HTML
- Este exemplo demonstra como usar informações de estilo adicionadas ao cabeçalho <head> para formatar o HTML.
- Link sem sublinhado
- Este exemplo demonstra como usar a propriedade de estilo para criar um link sem sublinhado.
- Ligar a um estilo externo
- Este exemplo demonstra como usar a tag <link> para ligar a um estilo externo.
Exemplo de Cabeçalho HTML (head)
- Título do Documento
- As informações de título dentro do elemento de cabeçalho não serão exibidas na janela do navegador.
- Um target, todos os links
- Este exemplo mostra como usar a tag base para abrir todos os rótulos da página em uma nova janela.
Exemplo de Meta-informações (meta) HTML
- Descrição do Documento
- As informações do elemento Meta podem descrever o documento HTML.
- Palavras-chave do Documento
- As informações do elemento Meta podem descrever palavras-chave do documento.
- Redirecionamento
- Este exemplo demonstra: Redirecionar o usuário para outro endereço, mesmo que a URL tenha mudado.
Exemplo de Script (Script) HTML
- Inserir um bloco de script
- Este exemplo demonstra como inserir scripts em documentos HTML.
- Executado em navegadores que não suportam scripts
- Este exemplo demonstra como lidar com navegadores que não suportam scripts.
- Página Anterior HTML5 SSE
- Próxima Página Teste HTML
