Как создать свой первый веб-сайт с использованием HTML и CSS
Создание своего первого веб-сайта — это отличный способ понять основы веб-разработки. В этой статье мы рассмотрим, как создать простой веб-сайт используя только HTML и CSS. Для начала вам нужен текстовый редактор для написания кода и браузер для просмотра результатов.
Шаг 1: Создайте структуру проекта
Создайте новый папку на вашем компьютере, например МойВебсайт. В этой папке создайте два файла: index.html и style.css.
Шаг 2: Напишите HTML-код
Откройте файл index.html в текстовом редакторе и начните с базовой структуры HTML5:
<!DOCTYPE html> <!-- Объявление типа документа HTML -->
<html lang="ru"> <!-- Корневой элемент HTML с языком ru -->
<head>
<meta charset="UTF-8"> <!-- Указание кодировки страницы на UTF-8 для поддержки разных символов -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Настройка просмотра на мобильных устройствах -->
<title>Мой первый веб-сайт</title> <!-- Заголовок страницы -->
<!-- Подключаем файл стилей -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Мой сайт</h1>
</header>
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
<main>
<section>
<h2>Приветствуем!</h2>
<p>Это мой первый веб-сайт. Я здесь, чтобы показать вам, как создавать веб-страницы с HTML и CSS.</p>
</section>
<aside>
<h2>Популярные статьи</h2>
<ul>
<li><a href="#">Статья 1</a></li>
<li><a href="#">Статья 2</a></li>
<li><a href="#">Статья 3</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 Мой сайт. Все права защищены.</p>
</footer>
</body>
</html>
Этот код создает основную структуру веб-сайта с заголовком, навигацией, основным содержимым и подвалом.
Шаг 3: Добавьте стили CSS
Откройте файл style.css и добавьте базовые стили для вашего сайта:
/* Сбросить все межбраузерные стили */
* {
margin: 0; /* Удаление внешних отступов */
padding: 0; /* Удаление внутренних отступов */
box-sizing: border-box; /* Включение внутреннего содержимого в ширину и высоту элемента */
}
body {
font-family: Arial, sans-serif; /* Выбор шрифта */
background-color: #f4f4f4; /* Цвет фона страницы */
color: #333; /* Цвет текста */
}
header, nav, main, footer {
padding: 20px; /* Внутренние отступы для блоков header, nav, main и footer */
}
header {
background-color: #4CAF50; /* Цвет фона заголовка */
color: white; /* Цвет текста в заголовке */
text-align: center; /* Выравнивание текста по центру */
}
nav ul {
list-style-type: none; /* Удаление маркеров списка */
display: flex; /* Использование гибкого макета для отображения списка в строку */
justify-content: center; /* Выравнивание списка по центру */
}
nav ul li {
margin: 0 15px; /* Внутренние отступы между элементами списка */
}
nav ul li a {
text-decoration: none; /* Удаление подчеркивания у ссылок */
color: #333; /* Цвет текста в ссылках */
}
main {
display: flex; /* Использование гибкого макета для отображения основного содержимого и боковой панели */
padding: 20px; /* Внутренние отступы для блока main */
}
section {
flex: 2; /* Ширина основной секции в гибком макете */
background-color: white; /* Цвет фона основной секции */
padding: 20px; /* Внутренние отступы для основной секции */
margin-right: 20px; /* Правый отступ между основной секцией и боковой панелью */
}
aside {
flex: 1; /* Ширина боковой панели в гибком макете */
background-color: #f9f9f9; /* Цвет фона боковой панели */
padding: 20px; /* Внутренние отступы для боковой панели */
}
footer {
background-color: #333; /* Цвет фона подвала */
color: white; /* Цвет текста в подвале */
text-align: center; /* Выравнивание текста по центру */
}
Эти стили делают ваш веб-сайт более привлекательным и удобным для просмотра.
Шаг 4: Просмотр вашего сайта
Сохраните изменения в обоих файлах и откройте index.html в браузере. Вы увидите простой, но стилизованный веб-сайт с заголовком, навигацией, основным содержимым и подвалом.
Дополнительные шаги
- Добавьте изображения: Создайте папку
imagesвнутри вашей папки проекта и добавьте несколько изображений. Обновите код в HTML для использования этих изображений. - Добавьте JavaScript: Для более сложных функций создайте файл
script.jsи подключите его к вашему проекту. - Responsive Design: Добавьте медиа-запросы в CSS, чтобы ваш сайт был адаптивным и выглядел хорошо на разных устройствах.
Теперь у вас есть базовый веб-сайт! Вы можете продолжить добавлять новые страницы, изображения и функциональность.
Шаг 5: Добавьте изображения
Создайте папку images внутри вашей папки проекта и добавьте несколько изображений. Например, скачайте изображения для заголовка и добавьте их в папку images.
Обновите код в HTML для использования этих изображений:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой первый веб-сайт</title>
<!-- Подключаем файл стилей -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="images/header-image.jpg" alt="Заголовок сайта"> <!-- Добавляем изображение для заголовка -->
<h1>Мой сайт</h1>
</header>
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
<main>
<section>
<h2>Приветствуем!</h2>
<p>Это мой первый веб-сайт. Я здесь, чтобы показать вам, как создавать веб-страницы с HTML и CSS.</p>
<img src="images/content-image.jpg" alt="Содержимое страницы"> <!-- Добавляем изображение для содержимого -->
</section>
<aside>
<h2>Популярные статьи</h2>
<ul>
<li><a href="#">Статья 1</a></li>
<li><a href="#">Статья 2</a></li>
<li><a href="#">Статья 3</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 Мой сайт. Все права защищены.</p>
</footer>
</body>
</html>
Шаг 6: Добавьте стили для изображений
Обновите файл style.css для стилизации изображений:
/* Сбросить все межбраузерные стили */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
header, nav, main, footer {
padding: 20px;
}
header img {
width: 100%; /* Ширина изображения для заголовка */
max-width: 600px; /* Максимальная ширина изображения */
margin: 0 auto; /* Центрирование изображения */
}
header h1 {
text-align: center;
}
nav ul {
list-style-type: none;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
text-decoration: none;
color: #333;
}
main {
display: flex;
padding: 20px;
}
section {
flex: 2;
background-color: white;
padding: 20px;
margin-right: 20px;
}
aside {
flex: 1;
background-color: #f9f9f9;
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
}
footer p {
margin-bottom: 0; /* Удаление нижнего отступа для текста в подвале */
}
Шаг 7: Добавьте JavaScript
Для добавления простой функциональности создайте файл script.js и подключите его к вашему проекту:
- Создайте файл
script.js. - Откройте его в текстовом редакторе.
Добавьте следующий код:
// script.js
document.addEventListener('DOMContentLoaded', function() {
// Пример функции, которая меняет цвет фона заголовка при клике
const header = document.querySelector('header');
header.addEventListener('click', function() {
if (header.style.backgroundColor === 'white') {
header.style.backgroundColor = '#4CAF50';
} else {
header.style.backgroundColor = 'white';
}
});
});
Обновите файл index.html для подключения скрипта:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой первый веб-сайт</title>
<!-- Подключаем файл стилей -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="images/header-image.jpg" alt="Заголовок сайта">
<h1>Мой сайт</h1>
</header>
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
<main>
<section>
<h2>Приветствуем!</h2>
<p>Это мой первый веб-сайт. Я здесь, чтобы показать вам, как создавать веб-страницы с HTML и CSS.</p>
<img src="images/content-image.jpg" alt="Содержимое страницы">
</section>
<aside>
<h2>Популярные статьи</h2>
<ul>
<li><a href="#">Статья 1</a></li>
<li><a href="#">Статья 2</a></li>
<li><a href="#">Статья 3</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 Мой сайт. Все права защищены.</p>
</footer>
<!-- Подключаем файл скрипта -->
<script src="script.js"></script>
</body>
</html>
Теперь у вас есть базовый веб-сайт с изображениями и простой функцией, которая меняет цвет фона заголовка при клике.
Шаг 8: Добавьте адаптивный дизайн
Для обеспечения лучшего просмотра на разных устройствах добавьте медиа-запросы в файл style.css:
/* Сбросить все межбраузерные стили */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
header, nav, main, footer {
padding: 20px;
}
header img {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
header h1 {
text-align: center;
}
nav ul {
list-style-type: none;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
text-decoration: none;
color: #333;
}
main {
display: flex;
padding: 20px;
}
section {
flex: 2;
background-color: white;
padding: 20px;
margin-right: 20px;
}
aside {
flex: 1;
background-color: #f9f9f9;
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
}
footer p {
margin-bottom: 0;
}
/* Адаптивный дизайн */
@media (max-width: 768px) {
header img, section img {
max-width: 100%;
}
aside {
flex: none;
width: 100%;
margin-top: 20px;
}
}
Эти медиа-запросы адаптируют дизайн вашего веб-сайта для устройств с меньшим экраном, такие как смартфоны и планшеты.
Заключение
Теперь у вас есть базовый веб-сайт с изображениями, простой функцией и адаптивным дизайном. Вы можете продолжить развивать свой сайт, добавляя больше контента, стилей и функциональности.
Помните, что создание веб-сайта — это процесс, который требует времени и практики. Не бойтесь экспериментировать и изучать новые технологии. Удачи в вашем обучении!