Получить профессию в Skypro
HTML в блокноте: 7 примеров кода для создания веб-страниц с нуля
Для кого эта статья:
- Начинающие веб-разработчики, желающие освоить основы HTML
- Студенты и учащиеся, заинтересованные в изучении веб-технологий
Люди, ищущие практические инструкции по созданию веб-страниц без дополнительных инструментов
Погружение в мир веб-разработки начинается с самых простых инструментов — и блокнот является, пожалуй, самым доступным из них. Никаких сложных редакторов, подсветки синтаксиса или автодополнения — только вы, ваш код и чистый HTML. Именно такой подход даёт глубокое понимание основ и позволяет прочувствовать структуру веб-страниц буквально кончиками пальцев. В этой статье мы рассмотрим 7 практических примеров HTML-кода, которые вы можете создать прямо сейчас, используя только стандартный блокнот вашей операционной системы. 🖥️
Хотите превратить базовые знания HTML в профессиональные навыки веб-разработчика? Обучение веб-разработке от Skypro начинается с простых основ и приводит к созданию сложных интерактивных проектов. Наши студенты сначала осваивают базовый HTML в блокноте, а через несколько месяцев уже работают с современными фреймворками и получают первые коммерческие заказы. Превратите свой интерес к коду в востребованную профессию!
HTML-код для блокнота: почему стоит начать с простого
Разработка в блокноте — это своеобразный "чистый лист" в мире программирования. Многие профессионалы рекомендуют начинать именно с него, и на это есть веские причины. 🚀
Работа с HTML-кодом в стандартном блокноте даёт уникальное преимущество — прямое взаимодействие с языком разметки без посредников. Вы не просто пишете код, вы понимаете его структуру, видите прямую связь между написанным и результатом в браузере.
Михаил Коршунов, технический тренер по веб-разработке
Помню своего студента Алексея, который пришёл на курс уже с опытом работы в визуальных редакторах. Он создавал сайты, но при малейшей ошибке терялся — не понимал, где искать проблему. Я предложил ему вернуться к истокам: неделю работать только с блокнотом. Сначала он сопротивлялся, но потом признался: "Это как разобрать машину и собрать заново — теперь я точно знаю, как всё устроено". Через месяц его скорость разработки выросла вдвое, а отладка кода перестала вызывать панику.
Преимущества использования блокнота для HTML-разработки:
- Отсутствие зависимости от инструментов: вы можете работать на любом компьютере, даже без доступа к специализированному ПО
- Глубокое понимание синтаксиса: когда вам приходится самостоятельно закрывать каждый тег, структура документа отпечатывается в памяти
- Минимальные системные требования: блокнот работает даже на самых слабых компьютерах
- Фокус на сути: нет отвлекающих факторов и лишних функций
- Быстрый старт: не нужно тратить время на установку и настройку среды разработки
| Критерий | Блокнот | Визуальные редакторы |
|---|---|---|
| Скорость запуска | Мгновенная | Требует времени на загрузку |
| Системные требования | Минимальные | Средние или высокие |
| Кривая обучения | Фокус только на HTML | Нужно изучать интерфейс программы |
| Понимание кода | Максимально глубокое | Часто поверхностное |
Конечно, профессиональная веб-разработка в конечном итоге требует специализированных инструментов, но начать с блокнота — это всё равно что научиться плавать без надувных кругов. Сложнее вначале, зато какая уверенность потом! 💪
Базовая структура HTML-документа в блокноте
Прежде чем приступить к созданию полноценных страниц, необходимо разобраться с фундаментом — базовой структурой HTML-документа. Это своего рода скелет, на который впоследствии будут нанизываться все остальные элементы. 📝
Минимальный HTML-код, который должен содержать любой веб-документ, выглядит следующим образом:
<DOCTYPE html>— объявление типа документа<html>— корневой элемент, обрамляющий весь контент<head>— раздел для метаданных, скриптов и стилей<title>— заголовок страницы в браузере<body>— тело документа, содержащее видимый контент
Вот пример базового HTML-документа:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя первая веб-страница</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это мой первый HTML-документ, созданный в блокноте.</p>
</body>
</html>
Обратите внимание на строгую иерархию тегов: каждый открывающий тег должен иметь соответствующий закрывающий, а вложенность должна соблюдаться безукоризненно. В блокноте вы не получите предупреждений о неправильной структуре, поэтому внимательность — ваш главный инструмент. 🔍
Анна Светлова, веб-разработчик
На одном из моих первых проектов клиент жаловался, что сайт отображается некорректно в некоторых браузерах. Я провела часы, настраивая CSS и JavaScript, но проблема не решалась. Отчаявшись, я открыла код в блокноте и просто прочитала его строка за строкой. Оказалось, что у одного div-контейнера отсутствовал закрывающий тег. Именно работа с "голым" кодом в блокноте научила меня видеть структуру HTML-документа как единое целое, а не как набор отдельных элементов.
Особое внимание стоит уделить метатегам в секции <head>. Хотя они и невидимы для пользователя, они критически важны для правильной интерпретации страницы браузером:
- meta charset="UTF-8" — определяет кодировку документа, обеспечивая корректное отображение символов
- meta name="viewport" — управляет отображением страницы на мобильных устройствах
- meta description — описание страницы для поисковых систем
Даже работая в простом блокноте, важно сразу формировать привычку структурировать код с правильными отступами. Это значительно упрощает чтение и редактирование, особенно когда документ становится объёмным. 📊
Пример создания сайта в блокноте HTML: первые шаги
Переходим от теории к практике — создадим простую, но функциональную веб-страницу прямо в блокноте. Этот процесс демонстрирует, насколько доступен HTML даже без специализированных инструментов. 🛠️
Пошаговая инструкция создания первого сайта:
- Откройте стандартный блокнот вашей операционной системы
- Скопируйте базовую структуру HTML-документа (см. предыдущий раздел)
- Дополните его содержимым (заголовки, параграфы, изображения и т.д.)
- Сохраните файл с расширением .html (например, mysite.html)
- Откройте созданный файл в любом браузере двойным щелчком
Важный момент при сохранении: в диалоговом окне выберите "Все файлы" вместо "Текстовые документы", чтобы файл не получил двойное расширение .html.txt, а затем введите имя с явным указанием расширения .html.
Пример простого сайта-визитки, который можно создать в блокноте:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Иван Петров – Веб-разработчик</title>
</head>
<body style="font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px;">
<header>
<h1 style="color: #2c3e50;">Иван Петров</h1>
<h2 style="color: #7f8c8d;">Веб-разработчик</h2>
</header>
<main>
<section>
<h2>Обо мне</h2>
<p>Привет! Я начинающий веб-разработчик с страстью к созданию функциональных и красивых веб-сайтов.</p>
</section>
<section>
<h2>Навыки</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript (основы)</li>
</ul>
</section>
</main>
<footer>
<p>© 2023 Иван Петров. Все права защищены.</p>
</footer>
</body>
</html>
Обратите внимание, что я добавил простые встроенные стили с помощью атрибута style. В профессиональной разработке стили обычно выносятся в отдельный CSS-файл, но для первых шагов встроенные стили вполне допустимы и наглядны. 🎨
Попробуйте экспериментировать с этим кодом, меняя текст, цвета, размеры шрифтов. После каждого изменения сохраняйте файл (Ctrl+S) и обновляйте страницу в браузере (F5), чтобы увидеть результаты своих действий.
Процесс разработки в блокноте можно оптимизировать с помощью нескольких приёмов:
- Используйте табуляцию для создания отступов, повышающих читабельность кода
- Пишите комментарии для сложных фрагментов:
<!-- Комментарий --> - Периодически проверяйте страницу в разных браузерах
- Создайте папку для проекта, где будут храниться все связанные файлы (HTML, изображения и т.д.)
Готовый код HTML в блокноте для разных элементов
В этом разделе я предлагаю библиотеку готовых HTML-компонентов, которые вы можете использовать как конструктор для ваших страниц. Эти фрагменты кода можно просто копировать в блокнот и затем настраивать под свои нужды. 📚
Каждый элемент веб-страницы имеет свою специфику разметки. Давайте рассмотрим наиболее востребованные:
| Элемент | HTML-код | Применение |
|---|---|---|
| Навигационное меню | <nav><ul><li><a href="#">Главная</a></li><li><a href="#">О нас</a></li><li><a href="#">Контакты</a></li></ul></nav> | Верхнее или боковое меню сайта |
| Форма обратной связи | <form action="mail.php" method="post"><label for="name">Имя:</label><input type="text" id="name" name="name" required><label for="email">Email:</label><input type="email" id="email" name="email" required><label for="message">Сообщение:</label><textarea id="message" name="message" rows="4" required></textarea><button type="submit">Отправить</button></form> | Страница контактов, секция обратной связи |
| Галерея изображений | <div class="gallery"><img src="image1.jpg" alt="Описание 1"><img src="image2.jpg" alt="Описание 2"><img src="image3.jpg" alt="Описание 3"></div> | Портфолио, фотоальбомы, каталоги продукции |
| Таблица данных | <table><tr><th>Имя</th><th>Возраст</th><th>Город</th></tr><tr><td>Иван</td><td>25</td><td>Москва</td></tr></table> | Представление структурированных данных |
Отдельно стоит упомянуть элементы для создания привлекательных заголовков и выделения важной информации:
- Заголовок с подчеркиванием:
<h2 style="border-bottom: 2px solid #3498db; padding-bottom: 5px;">Мой заголовок</h2> - Выделение важного текста:
<div style="background-color: #f8f9fa; border-left: 4px solid #e74c3c; padding: 15px;">Важная информация!</div> - Цитата:
<blockquote style="font-style: italic; border-left: 3px solid #95a5a6; padding-left: 10px;">Цитата известного автора</blockquote>
Для тех, кто хочет добавить на страницу немного интерактивности, вот пример кнопки с эффектом наведения (используется встроенный JavaScript):
<button style="background-color: #2ecc71; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer;" onmouseover="this.style.backgroundColor='#27ae60'" onmouseout="this.style.backgroundColor='#2ecc71'">Нажми меня</button>
Помните, что хороший HTML-код — это не только функциональность, но и семантическая корректность. Используйте теги по их прямому назначению: <header> для шапки, <main> для основного содержимого, <footer> для подвала сайта и т.д. 🏗️
Если вы создаете многостраничный сайт, имеет смысл разработать шаблон с общими элементами (шапка, меню, подвал), который будет служить основой для всех страниц. Это упростит поддержание единого стиля и структуры.
7 рабочих примеров веб-страниц на чистом HTML
Теперь перейдем к самому интересному — полноценным примерам веб-страниц, которые вы можете создать с нуля, используя только блокнот. Каждый пример демонстрирует определённую концепцию или тип сайта. 🌟
1. Личная визитка
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Личная страница</title>
</head>
<body style="font-family: Arial; max-width: 800px; margin: 0 auto; padding: 20px;">
<header style="text-align: center; margin-bottom: 40px;">
<h1 style="color: #2c3e50;">Александр Смирнов</h1>
<p style="color: #7f8c8d;">Фотограф | Путешественник | Блогер</p>
</header>
<section>
<h2>Обо мне</h2>
<p>Привет! Я профессиональный фотограф из Москвы. Специализируюсь на пейзажной и travel-фотографии.</p>
</section>
<section>
<h2>Контакты</h2>
<ul>
<li>Email: alex@example.com</li>
<li>Телефон: +7 (900) 123-45-67</li>
</ul>
</section>
</body>
</html>
2. Одностраничный лендинг продукта
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Умный будильник SleepWell</title>
</head>
<body style="font-family: 'Segoe UI', sans-serif; margin: 0; padding: 0; color: #333;">
<header style="background-color: #3498db; color: white; padding: 40px; text-align: center;">
<h1>SleepWell</h1>
<p>Умный будильник для здорового сна</p>
</header>
<section style="padding: 40px; text-align: center;">
<h2>Особенности</h2>
<div style="display: flex; justify-content: space-around; flex-wrap: wrap;">
<div style="margin: 20px; max-width: 300px;">
<h3>Анализ фаз сна</h3>
<p>Будильник определяет оптимальное время для пробуждения.</p>
</div>
<div style="margin: 20px; max-width: 300px;">
<h3>Световая имитация рассвета</h3>
<p>Мягкое пробуждение с постепенным увеличением освещения.</p>
</div>
</div>
</section>
<section style="background-color: #f9f9f9; padding: 40px; text-align: center;">
<h2>Заказать сейчас</h2>
<p>Специальное предложение: 3990 руб. вместо 5490 руб.</p>
<button style="background-color: #e74c3c; color: white; border: none; padding: 15px 30px; font-size: 18px; cursor: pointer;">Купить</button>
</section>
</body>
</html>
3. Блог с несколькими записями
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мой блог о путешествиях</title>
</head>
<body style="font-family: Georgia, serif; max-width: 800px; margin: 0 auto; padding: 20px; line-height: 1.6;">
<header>
<h1 style="color: #2c3e50; text-align: center;">Путешествия и приключения</h1>
<nav style="text-align: center; margin-bottom: 30px;">
<a href="#" style="margin: 0 10px; color: #3498db; text-decoration: none;">Главная</a>
<a href="#" style="margin: 0 10px; color: #3498db; text-decoration: none;">О блоге</a>
<a href="#" style="margin: 0 10px; color: #3498db; text-decoration: none;">Контакты</a>
</nav>
</header>
<article style="margin-bottom: 40px; border-bottom: 1px solid #ecf0f1; padding-bottom: 20px;">
<h2>Неделя в горах Алтая</h2>
<p style="color: #7f8c8d;">Опубликовано: 15 июня 2023 | Автор: Иван</p>
<p>Недавно вернулся из потрясающего путешествия по Алтайским горам. Величественные пейзажи, кристально чистый воздух и удивительная природа оставили неизгладимые впечатления...</p>
<a href="#" style="color: #3498db; text-decoration: none;">Читать далее →</a>
</article>
<article style="margin-bottom: 40px; border-bottom: 1px solid #ecf0f1; padding-bottom: 20px;">
<h2>Гастрономический тур по Италии</h2>
<p style="color: #7f8c8d;">Опубликовано: 2 июня 2023 | Автор: Иван</p>
<p>Две недели итальянской кухни, вина и потрясающих видов. От Венеции до Сицилии — настоящее кулинарное приключение...</p>
<a href="#" style="color: #3498db; text-decoration: none;">Читать далее →</a>
</article>
</body>
</html>
4. Портфолио дизайнера
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Портфолио Марины Ивановой</title>
</head>
<body style="font-family: 'Helvetica Neue', sans-serif; margin: 0; padding: 0; background-color: #f5f5f5;">
<header style="background-color: white; padding: 30px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
<h1 style="color: #333; margin-bottom: 5px;">Марина Иванова</h1>
<p style="color: #888; margin-top: 0;">Графический дизайнер</p>
</header>
<section style="max-width: 960px; margin: 40px auto; padding: 0 20px;">
<h2 style="color: #333; border-bottom: 2px solid #eee; padding-bottom: 10px;">Мои работы</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 30px;">
<div style="background-color: white; border-radius: 5px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
<div style="height: 200px; background-color: #3498db;"></div>
<div style="padding: 15px;">
<h3 style="margin-top: 0; color: #333;">Логотип для кафе "Утро"</h3>
<p style="color: #666;">Разработка фирменного стиля для новой сети кофеен.</p>
</div>
</div>
<div style="background-color: white; border-radius: 5px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
<div style="height: 200px; background-color: #e74c3c;"></div>
<div style="padding: 15px;">
<h3 style="margin-top: 0; color: #333;">Брошюра для выставки</h3>
<p style="color: #666;">Дизайн печатных материалов для художественной галереи.</p>
</div>
</div>
</div>
</section>
</body>
</html>
5. Страница контактов
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Контакты</title>
</head>
<body style="font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px;">
<h1>Связаться с нами</h1>
<div style="display: flex; flex-wrap: wrap;">
<div style="flex: 1; min-width: 300px; margin-right: 20px;">
<h2>Контактная информация</h2>
<p><strong>Адрес:</strong> г. Москва, ул. Примерная, д. 123</p>
<p><strong>Телефон:</strong> +7 (495) 123-45-67</p>
<p><strong>Email:</strong> info@example.com</p>
<h3>Часы работы</h3>
<p>Понедельник – Пятница: 9:00 – 18:00</p>
<p>Суббота – Воскресенье: Выходной</p>
</div>
<div style="flex: 1; min-width: 300px;">
<h2>Напишите нам</h2>
<form>
<div style="margin-bottom: 15px;">
<label for="name" style="display: block; margin-bottom: 5px;">Ваше имя</label>
<input type="text" id="name" name="name" style="width: 100%; padding: 8px; border: 1px solid #ddd;">
</div>
<div style="margin-bottom: 15px;">
<label for="email" style="display: block; margin-bottom: 5px;">Ваш email</label>
<input type="email" id="email" name="email" style="width: 100%; padding: 8px; border: 1px solid #ddd;">
</div>
<div style="margin-bottom: 15px;">
<label for="message" style="display: block; margin-bottom: 5px;">Сообщение</label>
<textarea id="message" name="message" rows="5" style="width: 100%; padding: 8px; border: 1px solid #ddd;"></textarea>
</div>
<button type="submit" style="background-color: #4CAF50; color: white; padding: 10px 15px; border: none; cursor: pointer;">Отправить</button>
</form>
</div>
</div>
</body>
</html>
6. Простой интернет-магазин
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Магазин электроники</title>
</head>
<body style="font-family: 'Roboto', Arial, sans-serif; margin: 0; padding: 0; background-color: #f8f9fa;">
<header style="background-color: #343a40; color: white; padding: 20px 0; text-align: center;">
<h1>ТехноМаркет</h1>
<nav style="max-width: 800px; margin: 0 auto;">
<a href="#" style="color: white; text-decoration: none; margin: 0 15px;">Главная</a>
<a href="#" style="color: white; text-decoration: none; margin: 0 15px;">Каталог</a>
<a href="#" style="color: white; text-decoration: none; margin: 0 15px;">Корзина</a>
</nav>
</header>
<main style="max-width: 1200px; margin: 0 auto; padding: 20px;">
<h2 style="text-align: center; margin-bottom: 30px;">Популярные товары</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px;">
<div style="background: white; border-radius: 5px; padding: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
<div style="height: 150px; background-color: #e9ecef; margin-bottom: 15px;"></div>
<h3 style="margin-top: 0;">Смартфон X-Phone</h3>
<p style="color: #6c757d;">Мощный процессор, 8 ГБ RAM, камера 48 МП</p>
<p style="font-weight: bold; color: #343a40;">29 990 ₽</p>
<button style="background-color: #007bff; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; width: 100%;">В корзину</button>
</div>
<div style="background: white; border-radius: 5px; padding: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
<div style="height: 150px; background-color: #e9ecef; margin-bottom: 15px;"></div>
<h3 style="margin-top: 0;">Ноутбук ProBook</h3>
<p style="color: #6c757d;">Intel Core i5, 16 ГБ RAM, SSD 512 ГБ</p>
<p style="font-weight: bold; color: #343a40;">59 990 ₽</p>
<button style="background-color: #007bff; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; width: 100%;">В корзину</button>
</div>
</div>
</main>
</body>
</html>
7. Резюме / CV
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Резюме – Дмитрий Петров</title>
</head>
<body style="font-family: 'Calibri', Arial, sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px;">
<header style="border-bottom: 2px solid #2980b9; padding-bottom: 20px; margin-bottom: 30px;">
<h1 style="margin-bottom: 5px; color: #2980b9;">Дмитрий Петров</h1>
<h2 style="margin-top: 0; font-weight: normal; color: #7f8c8d;">Frontend-разработчик</h2>
<div style="display: flex; flex-wrap: wrap; margin-top: 20px;">
<div style="margin-right: 40px;">
<p><strong>Телефон:</strong> +7 (900) 123-45-67</p>
<p><strong>Email:</strong> dmitry@example.com</p>
</div>
<div>
<p><strong>Город:</strong> Санкт-Петербург</p>
<p><strong>LinkedIn:</strong> linkedin.com/in/dmitry-petrov</p>
</div>
</div>
</header>
<section>
<h2 style="color: #2980b9; border-bottom: 1px solid #eee; padding-bottom: 5px;">Профессиональный опыт</h2>
<div style="margin-bottom: 25px;">
<h3 style="margin-bottom: 5px;">Frontend-разработчик</h3>
<p style="margin-top: 0; color: #7f8c8d;">ООО "Веб-Технологии" | Сентябрь 2020 – настоящее время</p>
<ul style="padding-left: 20px;">
<li>Разработка пользовательских интерфейсов на React</li>
<li>Создание адаптивных веб-приложений</li>
<li>Оптимизация производительности клиентской части</li>
</ul>
</div>
</section>
<section>
<h2 style="color: #2980b9; border-bottom: 1px solid #eee; padding-bottom: 5px;">Образование</h2>
<div>
<h3 style="margin-bottom: 5px;">Бакалавр информационных технологий</h3>
<p style="margin-top: 0; color: #7f8c8d;">Санкт-Петербургский Государственный Университет | 2016 – 2020</p>
</div>
</section>
<section>
<h2 style="color: #2980b9; border-bottom: 1px solid #eee; padding-bottom: 5px;">Навыки</h2>
<ul style="columns: 2; padding-left: 20px;">
<li>HTML5, CSS3, JavaScript</li>
<li>React, Vue.js</li>
<li>Адаптивная верстка</li>
<li>Git</li>
<li>Webpack</li>
<li>REST API</li>
</ul>
</section>
</body>
</html>
Обратите внимание, что во всех примерах я использовал встроенные стили через атрибут style для наглядности и простоты. В реальных проектах стили обычно выносятся в отдельный CSS-файл. 🎯
Эти примеры демонстрируют, что даже с базовыми знаниями HTML и без использования сложных инструментов можно создавать вполне функциональные и привлекательные веб-страницы. Экспериментируйте, меняйте цвета, тексты и структуру, чтобы глубже понять, как работает HTML.
Изучение HTML с нуля через создание простых страниц в блокноте — это как освоение алфавита перед написанием романа. Каждый базовый навык становится фундаментом для более сложных техник. Когда вы понимаете, как работает каждый тег, как формируется структура документа и как элементы взаимодействуют между собой, вы получаете не просто умение писать код, а способность видеть веб-страницу изнутри. Впереди ждут CSS, JavaScript и современные фреймворки, но именно эти первые шаги с HTML в простом блокноте определят, насколько прочным будет ваш фундамент в профессии веб-разработчика.
Читайте также
- HTML-код для новичков: базовая структура и готовые блоки
- HTML-код: примеры для эффективной разработки веб-страниц
- 15 рабочих примеров HTML-кода для создания веб-страниц с нуля
- 10 HTML-примеров для создания элегантных и функциональных сайтов
- Пошаговое руководство HTML: от простейшей страницы до сложного сайта
- Готовые HTML-структуры для создания разных типов сайтов: обзор шаблонов
- HTML: примеры страниц от простых до продвинутых – изучаем веб-разработку
- 15 примеров HTML-кода для создания веб-страниц с нуля: копируй и адаптируй