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 cor de fundo a uma 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 arquivos HTML.
- 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 exclusão de texto e efeito de inserção de texto
- Este exemplo demonstra como marcar texto excluído e texto inserido.
Exemplo de link HTML
- Criar hiperlinks
- Este exemplo demonstra como criar links em documentos HTML.
- Usar imagem como link
- Este exemplo demonstra como usar imagens como links.
- Abrir link em uma nova janela do navegador
- Este exemplo demonstra como abrir uma página em uma nova janela do navegador, de forma que o visitante não precise sair do seu site.
- Link para diferentes locais da 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 de 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 mista
- Este exemplo demonstra como criar uma estrutura de frame contendo três documentos, misturando-os 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. Arraste o mouse sobre as bordas entre os frames e você verá que as bordas não podem ser movidas.
- 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.
- Framework inline
- Este exemplo demonstra como criar um framework inline (框架 dentro de uma página HTML).
- Saltar para uma seção específica dentro de um framework
- Este exemplo demonstra dois frameworks. Um dos frameworks contém um link que aponta para uma seção específica dentro de outro arquivo. O arquivo "link.htm" especifica a seção usando <a name="C10">.
- Navegação de framework para seções especificadas
- Este exemplo demonstra dois frameworks. O framework da esquerda contém uma lista de links que apontam para o segundo framework, que exibe o documento linkado. Os links no framework de navegação apontam para seções especificadas 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 diferentes 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 se estendem por linhas ou colunas
- Este exemplo demonstra como definir células da tabela que se estendem por linhas ou colunas.
- Etiquetas dentro da tabela
- Este exemplo demonstra como exibir elementos dentro de diferentes elementos.
- Margem 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 de framework (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
- Text field (Text fields)
- This example demonstrates how to create a text field in an HTML page. Users can write text in the text field.
- Password field
- This example demonstrates how to create a password field in HTML.
- Checkboxes
- This example demonstrates how to create checkboxes in HTML. Users can select or deselect checkboxes.
- Radio buttons
- This example demonstrates how to create radio buttons in HTML.
- Simple dropdown list
- This example demonstrates how to create a simple dropdown list box in an HTML page. The dropdown list box is an optional list.
- Another dropdown list
- This example demonstrates how to create a simple dropdown list with a pre-selected value. (Translator's note: A pre-selected value refers to a preferred option that is specified in advance.)
- Text area (Textarea)
- This example demonstrates how to create a text area (a multi-line text input control). Users can write text in the text area. The number of characters that can be written in the text area is unlimited.
- Create buttons
- This example demonstrates how to create buttons. You can customize the text on the button.
- Fieldset around data
- This example demonstrates how to draw a titled box around data.
Form example
- Form with input fields and confirmation button
- This example demonstrates how to add a form to a page. This form contains two input fields and a confirmation button.
- Form with checkboxes
- This form contains two checkboxes and a confirmation button.
- Form with radio buttons
- This form contains two radio buttons and a confirmation button.
- Send email from form
- This example demonstrates how to send an email from a form.
HTML image example
- Insert image
- This example demonstrates how to display images on a web page.
- Insert images from different locations
- This example demonstrates how to display images from different folders or servers on a web page.
- Background image
- This example demonstrates how to add a background image to an HTML page.
- Align images
- This example demonstrates how to align images in text.
- Float image
- This example demonstrates how to float an image to the left or right of the paragraph.
- Adjust image size
- This example demonstrates how to adjust the size of an image to different dimensions.
- Display alternative text for images
- This example demonstrates how to display alternative text for images. When the browser cannot load the image, the alternative text attribute tells readers what information is lost. It is a good habit to add alternative text attributes to all images on the page.
- Make image links
- This example demonstrates how to use an image as a link.
- Create an image map
- This example shows how to create an image map with clickable areas. Each area is a hyperlink.
- Convert an image to an image map
- This example shows how to set a common image as an image map.
HTML background example
- Well-matched background and color
- An example of a well-matched background color and text color, making the text on the page easy to read.
- Background and color not well matched
- Exemplo onde uma 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 à seção <head> para formatar HTML.
- Link sem sublinhado
- Este exemplo demonstra como usar a propriedade de estilo para criar um link sem sublinhado.
- Conectar a um estilo externo
- Este exemplo demonstra como usar a tag <link> para conectar a um estilo externo.
Exemplo de cabeçalho (head) HTML
- Título do documento
- As informações de título no 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 metadados (meta) HTML
- Descrição do documento
- As informações no elemento Meta podem descrever o documento HTML.
- Palavras-chave do documento
- As informações no elemento Meta podem descrever palavras-chave do documento.
- Redirecionamento
- Este exemplo demonstra: redirecionar o usuário para outro endereço, quando o URL já foi alterado.
Exemplo de script (Script) HTML
- Inserir um trecho 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
