Meisterhaftigkeit in HTML Kontaktinformationen

Einführung

Im Web-Entwicklung wird das <address>-Tag verwendet, um Kontaktinformationen auf einer Webseite anzuzeigen. Es wird verwendet, um die Details des Autors, der Organisation oder des Unternehmens anzugeben, das die Webseite, das Dokument oder den Artikel veröffentlicht.

In diesem Lab werden wir eine einfache Webseite erstellen und das <address>-Tag verwenden, um Kontaktinformationen am Ende der Seite anzuzeigen.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

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{{"HTML Kontaktinformationen"}} html/head_elems -.-> lab-70701{{"HTML Kontaktinformationen"}} html/text_head -.-> lab-70701{{"HTML Kontaktinformationen"}} html/para_br -.-> lab-70701{{"HTML Kontaktinformationen"}} html/layout -.-> lab-70701{{"HTML Kontaktinformationen"}} html/doc_flow -.-> lab-70701{{"HTML Kontaktinformationen"}} html/inter_elems -.-> lab-70701{{"HTML Kontaktinformationen"}} html/templating -.-> lab-70701{{"HTML Kontaktinformationen"}} end

Erstellen eines grundlegenden HTML-Vorlagens

Erstellen Sie eine HTML-Datei namens index.html und öffnen Sie sie in einem Code-Editor.

Fügen Sie den grundlegenden HTML-Vorlagen-Code in die Datei ein:

<!doctype html>
<html>
  <head>
    <title>Kontaktinformationen</title>
  </head>
  <body></body>
</html>

Fügen Sie einen Überschrift und einen Absatz hinzu

Fügen Sie eine Überschrift und einen Absatz hinzu, um eine kurze Einführung oder Zusammenfassung über die Seite zu geben.

<h1>Kontaktinformationen</h1>
<p>
  Willkommen auf meiner Webseite. Diese Webseite enthält Kontaktinformationen.
</p>

Fügen Sie Kontaktinformationen hinzu

Erstellen Sie einen Abschnitt für Kontaktinformationen und platzieren Sie das <address>-Tag innerhalb dieses Abschnitts. Fügen Sie die relevanten Kontaktinformationen zwischen den öffnenden und schließenden <address>-Tags hinzu. Beispielsweise:

<section>
  <h2>Kontaktdetails</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>

Im obigen Beispiel haben wir einen Abschnitt mit dem Titel "Kontaktdetails" hinzugefügt, und innerhalb dieses Abschnitts haben wir ein <address>-Tag erstellt, um die Kontaktinformationen anzuzeigen. Wir haben den Namen, die Adresse, die E-Mail-Adresse und die Telefonnummer innerhalb des <address>-Tags hinzugefügt.

Fügen Sie CSS-Stile hinzu

Fügen Sie einigen CSS-Stilen zum <address>-Tag hinzu, um es eine Formatierung zu geben. Standardmäßig ist das <address>-Tag als Blockelement formatiert und kursiv. Wir werden es ändern, um es zentriert und fett zu gestalten.

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

Speichern Sie die index.html-Datei und öffnen Sie sie in einem Webbrowser, um die endgültige Webseite mit Kontaktinformationen zu sehen.

Zusammenfassung

Das <address>-Tag ist ein nützliches HTML-Element, das zur Anzeige von Kontaktinformationen auf einer Webseite verwendet wird. In diesem Lab haben wir gelernt, wie man das <address>-Tag verwendet, um einen Abschnitt zur Anzeige von Kontaktinformationen auf einer Webseite zu erstellen. Wir haben auch gelernt, wie man einigen CSS-Stil zum <address>-Tag hinzufügt, sodass es visuell besser formatiert wird.