Полностью рабочий HTML код для простого сайта. Вот базовый шаблон, который вы можете использовать как отправную точку:
html
Copy
Download
Run
<!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; line-height: 1.6; margin: 0; padding: 0; color: #333; background-color: #f4f4f4; } header { background: #35424a; color: white; padding: 20px 0; text-align: center; } nav { background: #e8491d; padding: 10px; } nav ul { padding: 0; list-style: none; text-align: center; } nav li { display: inline; margin: 0 15px; } nav a { color: white; text-decoration: none; } .container { width: 80%; margin: auto; overflow: hidden; padding: 20px; background: white; } footer { background: #35424a; color: white; text-align: center; padding: 20px; margin-top: 20px; } </style> </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> <div class="container"> <section> <h2>О нашем сайте</h2> <p>Это простой HTML сайт, который вы можете использовать как шаблон для создания собственного веб-проекта.</p> <p>Вы можете легко изменить текст, добавить изображения или дополнительные страницы.</p> </section> <section> <h2>Наши услуги</h2> <ul> <li>Веб-дизайн</li> <li>Разработка сайтов</li> <li>SEO оптимизация</li> </ul> </section> </div> <footer> <p>© 2023 Мой первый сайт. Все права защищены.</p> </footer> </body> </html>
Как использовать этот код:
- Скопируйте весь приведенный выше код
- Создайте новый файл с расширением
.html(например,index.html) - Вставьте скопированный код в этот файл
- Сохраните файл
- Откройте его в любом браузере двойным кликом
Что можно изменить:
- Текст внутри тегов (между
<p>и</p>,<h1>и</h1>и т.д.) - Цвета в разделе
<style>(изменяйте hex-коды цветов, например#f4f4f4) - Добавить изображения с помощью тега
<img src="image.jpg" alt="Описание"> - Добавить больше страниц, создав новые HTML-файлы и ссылаясь на них в меню навигации
