Мастерство в области HTML Контактной информации

Введение

В веб-разработке тег <address> используется для отображения контактной информации на веб-странице. Он используется для указания деталей автора, организации или компании, которая публикует веб-страницу, документ или статью.

В этом лабе мы создадим простую веб-страницу и используем тег <address> для отображения контактной информации внизу страницы.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

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 Контактная информация"}} html/head_elems -.-> lab-70701{{"HTML Контактная информация"}} html/text_head -.-> lab-70701{{"HTML Контактная информация"}} html/para_br -.-> lab-70701{{"HTML Контактная информация"}} html/layout -.-> lab-70701{{"HTML Контактная информация"}} html/doc_flow -.-> lab-70701{{"HTML Контактная информация"}} html/inter_elems -.-> lab-70701{{"HTML Контактная информация"}} html/templating -.-> lab-70701{{"HTML Контактная информация"}} end

Создайте базовый шаблон HTML

Создайте HTML-файл с именем index.html и откройте его в текстовом редакторе.

Добавьте в файл код базового шаблона HTML:

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

Добавьте заголовок и абзац

Добавьте заголовок и абзац, чтобы дать краткое введение или резюме о странице.

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

Добавьте контактную информацию

Создайте раздел для контактной информации и поместите тег <address> внутри этого раздела. Добавьте соответствующую контактную информацию между открывающим и закрывающим тегами <address>. Например:

<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>

В приведенном выше примере мы добавили раздел с заголовком "Contact Details" (Детали контакта), и внутри этого раздела мы создали тег <address> для отображения контактной информации. Мы добавили имя, адрес, электронную почту и номер телефона внутри тега <address>.

Добавьте стили CSS

Добавьте несколько стилей CSS к тегу <address>, чтобы придать ему определенный формат. По умолчанию тег <address> имеет стиль в виде блока с курсивом. Мы изменим его, чтобы сделать выравнивание по центру и жирным.

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

Сохраните файл index.html и откройте его в веб-браузере, чтобы увидеть конечную веб-страницу с контактной информацией.

Резюме

Тег <address> - это полезный HTML-элемент, который используется для отображения контактной информации на веб-странице. В этом практическом занятии мы узнали, как использовать тег <address> для создания раздела для отображения контактной информации на веб-странице. Мы также узнали, как добавить несколько стилей CSS к тегу <address>, чтобы он был визуально лучше отформатирован.