Dominando la información de contacto en HTML

Introducción

En el desarrollo web, la etiqueta <address> se utiliza para mostrar información de contacto en una página web. Se utiliza para indicar los detalles del autor, organización o empresa que está publicando la página web, documento o artículo.

En este laboratorio, crearemos una página web simple y usaremos la etiqueta <address> para mostrar información de contacto al final de la página.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/templating("HTML Templating") subgraph Lab Skills html/basic_elems -.-> lab-70701{{"Información de contacto en HTML"}} html/head_elems -.-> lab-70701{{"Información de contacto en HTML"}} html/text_head -.-> lab-70701{{"Información de contacto en HTML"}} html/para_br -.-> lab-70701{{"Información de contacto en HTML"}} html/layout -.-> lab-70701{{"Información de contacto en HTML"}} html/doc_flow -.-> lab-70701{{"Información de contacto en HTML"}} html/inter_elems -.-> lab-70701{{"Información de contacto en HTML"}} html/templating -.-> lab-70701{{"Información de contacto en HTML"}} end

Crea una plantilla HTML básica

Crea un archivo HTML llamado index.html y úbrelo en un editor de código.

Agrega el código de la plantilla HTML básica al archivo:

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

Agrega un título y un párrafo

Agrega un título y un párrafo para dar una breve introducción o resumen sobre la página.

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

Agrega información de contacto

Crea una sección para la información de contacto y coloca la etiqueta <address> dentro de la sección. Agrega la información de contacto relevante entre las etiquetas <address> de apertura y cierre. Por ejemplo:

<section>
  <h2>Contact Details</h2>
  <address>
    <p>John Doe</p>
    <p>
      123 Main Street <br />
      Anytown, USA 12345
    </p>
    <p><a href="mailto:[email protected]">[email protected]</a></p>
    <p><a href="tel:123-456-7890">123-456-7890</a></p>
  </address>
</section>

En el ejemplo anterior, hemos agregado una sección con el título "Contact Details" y dentro de esa sección, hemos creado una etiqueta <address> para mostrar la información de contacto. Hemos agregado el nombre, la dirección, el correo electrónico y el número de teléfono dentro de la etiqueta <address>.

Agrega estilo CSS

Agrega algunos estilos CSS a la etiqueta <address> para darle un formato. Por defecto, la etiqueta <address> está estilizada para ser de nivel de bloque e italizada. Lo modificaremos para que quede alineada al centro y en negrita.

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

Guarda el archivo index.html y úbrelo en un navegador web para ver la página web final con la información de contacto.

Resumen

La etiqueta <address> es un elemento HTML útil que se utiliza para mostrar información de contacto en una página web. En este laboratorio, hemos aprendido cómo usar la etiqueta <address> para crear una sección para mostrar información de contacto en una página web. También aprendimos cómo agregar algunos estilos CSS a la etiqueta <address> para que se forme visualmente de una manera mejor.