Dominando as Informações de Contato em HTML

Introdução

No desenvolvimento web, a tag <address> é utilizada para exibir informações de contato em uma página web. Ela é usada para indicar os detalhes do autor, organização ou empresa que está publicando a página web, documento ou artigo.

Neste laboratório, criaremos uma página web simples e usaremos a tag <address> para exibir informações de contato na parte inferior da página.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Criar um template HTML básico

Crie um arquivo HTML chamado index.html e abra-o em um editor de código.

Adicione o código básico do template HTML ao arquivo:

<!doctype html>
<html>
  <head>
    <title>Contact Information</title>
  </head>
  <body></body>
</html>

Adicionar um título e um parágrafo

Adicione um título e um parágrafo para fornecer uma breve introdução ou resumo sobre a página.

<h1>Contact Information</h1>
<p>Welcome to my webpage. This webpage contains contact information.</p>

Adicionar informações de contato

Crie uma seção para informações de contato e coloque a tag <address> dentro da seção. Adicione as informações de contato relevantes entre as tags de abertura e fechamento <address>. Por exemplo:

<section>
  <h2>Contact Details</h2>
  <address>
    <p>John Doe</p>
    <p>
      123 Main Street <br />
      Anytown, USA 12345
    </p>
    <p><a href="mailto:john@example.com">john@example.com</a></p>
    <p><a href="tel:123-456-7890">123-456-7890</a></p>
  </address>
</section>

No exemplo acima, adicionamos uma seção com o título "Contact Details" (Detalhes de Contato), e dentro dessa seção, criamos uma tag <address> para exibir as informações de contato. Adicionamos o nome, endereço, e-mail e número de telefone dentro da tag <address>.

Adicionar estilo CSS

Adicione alguns estilos CSS à tag <address> para dar-lhe alguma formatação. Por padrão, a tag <address> é estilizada para ser de nível de bloco e em itálico. Vamos alterá-la para centralizá-la e deixá-la em negrito.

<style>
  address {
    display: block;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
</style>

Salve o arquivo index.html e abra-o em um navegador web para ver a página web final com as informações de contato.

Resumo

A tag <address> é um elemento HTML útil que é usado para exibir informações de contato em uma página web. Neste laboratório, aprendemos como usar a tag <address> para criar uma seção para exibir informações de contato em uma página web. Também aprendemos como adicionar alguma estilização CSS à tag <address> para que ela seja formatada visualmente de uma maneira melhor.