Создание одностраничного сайта-визитки

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 15
Автор
Рек. время прохождения 4 минуты
Упражнений 12
Комментарии 0
Тренажер HTML
В этом модуле мы перейдем от теории к практике и создадим полноценный проект — одностраничный сайт-визитку. Это отличный способ применить все полученные знания на реальной задаче. Мы не будем писать CSS, он уже готов. Наша цель — сосредоточиться на HTML-структуре и наполнении сайта. Шаг за шагом, от простого к сложному, мы соберем страницу, которая будет содержать фотографию, информацию о себе, контактные данные и ссылки на социальные сети. Вы научитесь использовать семантические теги, такие как семантические теги, правильно структурировать контент, создавать специальные типы ссылок (для звонков и писем) и добавлять важные атрибуты для улучшения доступности и безопасности вашего сайта. В конце у вас будет готовый мини-проект, который отлично смотрится как на компьютере, так и на мобильных устройствах.",
Список тем

Создание основной обертки сайта-визитки

id: 37956_m15-p1-t1

Давайте начнем с создания основного контейнера для нашей визитки. Этот элемент будет служить 'каркасом', внутри которого мы разместим все остальные части сайта. Используйте подходящий блочный тег и присвойте ему класс `card`, чтобы применить базовые стили.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: #f0f2f5;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.card {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 340px;
  overflow: hidden;
  text-align: center;
}
HTML
<input1 class="card">
  <p>Содержимое визитки</p>
</input1>
Для создания основного контейнера используйте тег `<div>`. Это универсальный блочный элемент, который идеально подходит для группировки других элементов. Вам нужно написать открывающий и закрывающий теги `<div>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление шапки сайта

id: 37956_m15-p1-t2

Каждый сайт начинается с шапки. Добавьте семантический тег для верхней части визитки (шапки) внутри нашей карточки. Присвойте ему класс `header`, чтобы применить стили для фона и отступов.

CSS
body { font-family: sans-serif; background-color: #f0f2f5; display: flex; justify-content: center; padding: 20px; }
.card { background-color: #fff; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); max-width: 340px; overflow: hidden; }
.header {
  background-color: #4a90e2;
  color: white;
  padding: 30px 20px;
  text-align: center;
}
HTML
<div class="card">
  <input1 class="header">
    <!-- Здесь будет контент шапки -->
  </input1>
</div>
Используйте семантический тег `<header>`. Он предназначен специально для вводного контента или навигационных ссылок. Этот тег делает ваш код более понятным для поисковых систем и других разработчиков.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Размещение фотографии (аватара)

id: 37956_m15-p1-t3

Визитка без фото — не визитка! Вставьте тег для изображения внутри шапки. Не забудьте добавить атрибут с альтернативным текстом для доступности и для случаев, если картинка не загрузится.

CSS
body { font-family: sans-serif; background-color: #f0f2f5; display: flex; justify-content: center; padding: 20px; }
.card { background-color: #fff; border-radius: 16px; max-width: 340px; text-align: center; }
.header { background-color: #4a90e2; padding: 30px 20px; }
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid white;
  object-fit: cover;
}
HTML
<div class="card">
  <header class="header">
    <input1 src="https://naytikurs.ru/img/1j.jpeg" input2="Фотография Ивана Петрова" class="avatar">
  </header>
</div>
Для вставки изображения используйте тег `<img>`. У него нет закрывающего тега. Обязательный атрибут `src` уже указан. Вам нужно вставить сам тег и добавить атрибут `alt` для альтернативного текста.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Имя и должность

id: 37956_m15-p1-t4

Под фотографией нужно указать имя и профессию. Для имени используйте самый важный заголовок на странице, а для должности — обычный параграф. Присвойте им соответствующие классы `name` и `title`.

CSS
body { font-family: sans-serif; ... }
.card { ... text-align: center; }
.header { background-color: #4a90e2; color: white; padding: 20px; }
.avatar { width: 100px; height: 100px; border-radius: 50%; margin-bottom: 15px; }
.name {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}
.title {
  margin: 5px 0 0;
  font-size: 16px;
  font-weight: 300;
}
HTML
<header class="header">
  <img src="https://naytikurs.ru/img/1j.jpeg" alt="Фото" class="avatar">
  <input1 class="name">Иван Петров</input1>
  <p class="input2">Веб-разработчик</p>
</header>
Для главного заголовка страницы используется тег `<h1>`. Для должности добавьте атрибут `class` к уже существующему тегу `<p>` и укажите значение `title`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Секция 'Обо мне'

id: 37956_m15-p1-t5

Время рассказать о себе. Создайте новую семантическую секцию после шапки. Внутри нее разместите заголовок второго уровня и параграф с коротким текстом о себе.

CSS
body { font-family: sans-serif; ... }
.card { ... }
.about {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
}
.section-title {
  font-size: 18px;
  color: #333;
  margin: 0 0 15px 0;
  text-align: left;
}
.about p {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  margin: 0;
  text-align: left;
}
HTML
<div class="card">
  <header>...</header>
  <input1 class="about">
    <input2 class="section-title">Обо мне</input2>
    <p>Привет! Я создаю современные и удобные веб-сайты.</p>
  </input1>
</div>
Используйте тег `<section>` для создания нового раздела. Внутри него для заголовка используйте тег `<h2>`. Не забудьте закрыть тег `<section>` после параграфа.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Структура блока контактов

id: 37956_m15-p1-t6

Создадим список для контактной информации. Используйте тег для неупорядоченного списка, а внутри него — тег для элемента списка. Это стандартная практика для группировки однотипных данных, таких как контакты.

CSS
body { font-family: sans-serif; ... }
.card { ... }
.contacts {
  padding: 20px;
}
.section-title { font-size: 18px; ... }
.contacts ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contacts li {
  margin-bottom: 10px;
}
HTML
<section class="contacts">
  <h2 class="section-title">Контакты</h2>
  <input1>
    <input2>Первый контакт</input2>
    <input2>Второй контакт</input2>
  </input1>
</section>
Для создания неупорядоченного списка используется тег `<ul>`. Каждый элемент внутри этого списка оборачивается в тег `<li>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Ссылка для звонка

id: 37956_m15-p1-t7

Добавим возможность позвонить вам прямо с сайта. Оберните текст 'Позвонить' в тег ссылки. Используйте специальную схему `tel:` в значении атрибута, чтобы при клике на мобильном устройстве открывалось приложение для звонков.

CSS
.contacts a {
  display: inline-block;
  background-color: #f0f2f5;
  color: #333;
  padding: 10px 15px;
  border-radius: 8px;
  text-decoration: none;
  width: 80%;
}
.contacts a:hover {
  background-color: #4a90e2;
  color: white;
}
HTML
<ul>
  <li>
    <a input1="input2:+11111111">Позвонить</a>
  </li>
</ul>
Для создания ссылки используется тег `<a>`. Главный атрибут для него — `href`. Чтобы сделать ссылку для звонка, значение атрибута `href` должно начинаться со схемы `tel:`, а затем идти номер телефона. Например: `href="tel:+71234567890"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Ссылка для отправки E-mail

id: 37956_m15-p1-t8

Теперь добавим ссылку для отправки письма. Используйте схему `mailto:`, чтобы при клике открывался почтовый клиент пользователя с уже вставленным адресом получателя.

CSS
.contacts a {
  display: inline-block;
  background-color: #f0f2f5;
  color: #333;
  padding: 10px 15px;
  border-radius: 8px;
  text-decoration: none;
  width: 80%;
}
.contacts a:hover {
  background-color: #4a90e2;
  color: white;
}
HTML
<ul>
  <li><a href="tel:+111111111">Позвонить</a></li>
  <li>
    <a href="input1:ivan.petrov@example.com">Написать на почту</a>
  </li>
</ul>
По аналогии со ссылкой для звонка, для создания email-ссылки используется тег `<a>`. Значение атрибута `href` должно начинаться со схемы `mailto:`, а затем идти адрес электронной почты.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Уточнение темы и тела письма

id: 37956_m15-p1-t9

Сделаем ссылку для письма еще удобнее. Добавьте в нее параметры, чтобы автоматически заполнялись тема и тело письма. Параметры в URL добавляются после знака `?` и разделяются знаком `&`.

CSS
.contacts a { display: inline-block; background-color: #f0f2f5; color: #333; padding: 10px 15px; border-radius: 8px; text-decoration: none; width: 80%; }
.contacts a:hover { background-color: #4a90e2; color: white; }
HTML
<ul>
  <li>
    <a href="mailto:ivan.petrov@example.com?input1=Вопрос по сотрудничеству&input2=Здравствуйте, Иван!">Написать на почту</a>
  </li>
</ul>
Чтобы добавить параметры к `mailto:` ссылке, используйте `?` после email. Для темы письма используется параметр `subject`, а для тела письма — `body`. Например: `mailto:test@test.com?subject=Тема&body=Текст`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Блок с иконками соцсетей

id: 37956_m15-p1-t10

Добавим блок для иконок социальных сетей. Создайте `div` с классом `social-links`. Внутри разместите ссылку-иконку. Укажите для ссылки, чтобы она открывалась в новой вкладке браузера.

CSS
.social-links {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
}
.social-icon {
  width: 32px;
  height: 32px;
}
HTML
<div class="input1">
  <a href="#" target="input2">
    <img src="https://naytikurs.ru/img/11s.svg" class="social-icon" alt="Соцсеть 1">
  </a>
  <a href="#">
    <img src="https://naytikurs.ru/img/12s.svg" class="social-icon" alt="Соцсеть 2">
  </a>
</div>
Чтобы ссылка открывалась в новой вкладке, используется атрибут `target` со значением `_blank`. Класс `social-links` нужно присвоить контейнеру `div`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Безопасные внешние ссылки

id: 37956_m15-p1-t11

Когда вы делаете ссылку, открывающуюся в новой вкладке (`target="_blank"`), хорошей практикой является добавление атрибута `rel` со значением `noopener noreferrer`. Это повышает безопасность.

CSS
.social-links { display: flex; justify-content: center; gap: 15px; padding: 20px; }
.social-icon { width: 32px; height: 32px; transition: transform 0.3s; }
.social-icon:hover { transform: scale(1.1); }
HTML
<div class="social-links">
  <a href="#" target="_blank" input1="input2">
    <img src="https://naytikurs.ru/img/11s.svg" class="social-icon" alt="Соцсеть 1">
  </a>
</div>
Добавьте к тегу `<a>` атрибут `rel` и укажите в качестве значения `noopener noreferrer`. `noopener` предотвращает доступ новой страницы к объекту `window.opener`, а `noreferrer` скрывает информацию о том, откуда пришел пользователь.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Создание подвала сайта (footer)

id: 37956_m15-p1-t12

Завершим нашу визитку, добавив подвал. Используйте семантический тег `footer`. Внутри разместите параграф с текстом об авторских правах. Для знака © используйте специальный HTML-символ (HTML-сущность).

CSS
.footer {
  background-color: #f8f9fa;
  padding: 15px 20px;
  font-size: 12px;
  color: #6c757d;
  text-align: center;
}
.footer p { margin: 0; }
HTML
<input1 class="footer">
  <p>&input2; 2024 Иван Петров</p>
</input1>
Для подвала сайта предназначен семантический тег `<footer>`. Чтобы отобразить знак копирайта ©, используется HTML-сущность `&copy;`. Вам нужно вставить название сущности `copy`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру