Номер §4.3 № 15

Пример: сделаем одностраничный сайт-визитку с помощью HTML, как описано в пункте ... До создания страницы подготовим фотографию и сохраним её в той же папке под именем photo.jpg. Для учебного образца возьмём вымышленные имя и почтовый ящик; при выполнении своей работы их нужно заменить собственными данными, а фотографию использовать с согласия изображённого человека.

Откроем текстовый редактор и создадим файл index.html. Внутри head укажем название вкладки и стили оформления. В body разместим заголовок, фотографию, приветствие, имя и ссылку для связи:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-">
  <title>Сайт-визитка</title>
  <style>
    body { font-family: Arial, sans-serif; background: #eeffa;
           color: #b; margin: ; }
    main { max-width: px; margin: px auto; padding: px;
           background: white; border-radius: px; }
    h { color: #aa; }
    .card { display: flex; gap: px; align-items: center; }
    img { width: px; height: px; object-fit: cover;
          border-radius: px; }
    a { color: #ae; }
  </style>
</head>
<body>
  <main>
    <h>Привет! Это моя страница</h>
    <div class="card">
      <img src="photo.jpg" alt="Фотография автора страницы">
      <div>
        <p>Рада знакомству! Меня зовут Анна Петрова.</p>
        <p>Я изучаю информатику и люблю фотографировать.</p>
        <p>Для связи: <a href="mailto:anna@example.com">напишите мне</a>.</p>
      </div>
    </div>
  </main>
</body>
</html>

Сохраним файл и откроем его в браузере. Тег h выводит заголовок, img — фотографию, абзацы содержат приветствие и имя, а ссылка с mailto: открывает подготовку электронного письма. Стили располагают фотографию слева от текста и обеспечивают контрастный фон. Проверим, что фотография видна и ссылка работает. Так получится законченная одностраничная визитка.