Создание простого HTML-сайта — это отличный способ начать изучение веб-разработки. Давайте создадим базовую структуру HTML-документа.
Вот пример кода для простого сайта:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой Первый Сайт</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
header {
background-color: #4CAF50;
color: white;
padding: 10px 0;
text-align: center;
}
nav {
margin: 10px 0;
}
nav a {
margin: 0 15px;
text-decoration: none;
color: #fff;
}
section {
padding: 20px;
background-color: white;
margin: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
footer {
text-align: center;
padding: 10px 0;
background-color: #4CAF50;
color: white;
position: relative;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Добро пожаловать на мой сайт!</h1>
<nav>
<a href="#about">О сайте</a>
<a href="#contact">Контакты</a>
</nav>
</header>
<section id="about">
<h2>О сайте</h2>
<p>Это пример простого HTML-документа. Здесь Вы можете разместить любую информацию о Вашем сайте.</p>
</section>
<section id="contact">
<h2>Контакты</h2>
<p>Вы можете связаться со мной по электронной почте: example@example.com.</p>
</section>
<footer>
<p>© 2023 Мой Первый Сайт</p>
</footer>
</body>
</html>
Объяснение структуры кода:
DOCTYPE и <html>: Эта строка определяет тип документа и говорит браузеру, что это HTML5.
<html>обозначает начало HTML-документа и принимает атрибутlang, указывающий на язык содержимого.<head>: В этом разделе размещается метаинформация о странице, такие как кодировка, заголовок и стили. Использование
<meta name="viewport">делает сайт адаптивным для мобильных устройств.<style>: Здесь мы добавили базовые стили для улучшения визуального восприятия. CSS отвечает за оформление и визуальные аспекты HTML-элементов.
<body>: Это основной раздел, который содержит видимую часть веб-страницы.
<header>, <nav>, <section>, <footer>: Семантические элементы, которые помогают структурировать страницу и делают её понятной как пользователям, так и поисковым системам.
Вы можете скопировать этот код в текстовый редактор, сохранить его с расширением .html, например, index.html, и открыть получившийся файл в браузере. Это создаст Ваш первый простой сайт!
