Получить профессию в Skypro
HTML-код для новичков: базовая структура и готовые блоки
Для кого эта статья:
- Новички в веб-разработке, которые только начинают изучать HTML
- Люди, желающие создать свой первый сайт или портфолио без сложных технологий
Студенты и самоучки, ищущие структурированные инструкции и примеры кода для обучения
Погружение в мир HTML-кода часто напоминает первую встречу с иностранным языком — вроде бы буквы знакомы, но их сочетания порождают непонятные конструкции. 🚀 Многие новички застревают уже на этапе создания базовой структуры сайта, тратя часы на поиск элементарных решений. Эта статья — ваш персональный навигатор в мире HTML с готовыми блоками кода, которые можно сразу применить в собственных проектах, избавив вас от необходимости изобретать колесо заново.
Хотите не просто копировать код, а понимать принципы веб-разработки изнутри? Курс Обучение веб-разработке от Skypro построен на практических заданиях с реальными проектами. Вы не только освоите HTML, CSS и JavaScript, но и создадите собственное портфолио под руководством опытных наставников. Вместо долгих лет проб и ошибок — 10 месяцев структурированного обучения с гарантированным результатом.
Основы HTML-кода: структура сайта для начинающих
HTML (HyperText Markup Language) — фундамент любого сайта. Это не программирование в чистом виде, а язык разметки, определяющий структуру веб-страницы. Представьте его как скелет человека — без него все остальные компоненты просто рассыпались бы.
Любой HTML-документ начинается с базовой структуры, которую стоит запомнить:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Название вашего сайта</title>
</head>
<body>
<!-- Здесь будет контент вашей страницы -->
</body>
</html>
Эта конструкция — минимально необходимый шаблон для любой веб-страницы. Давайте разберем его по элементам:
<!DOCTYPE html>— сообщает браузеру, что документ использует HTML5<html lang="ru">— корневой элемент страницы с указанием языка<head>— контейнер для метаданных (невидимая для посетителей информация)<meta charset="UTF-8">— указывает кодировку документа<meta name="viewport"...>— настраивает отображение на мобильных устройствах<title>— задаёт заголовок страницы, отображаемый во вкладке браузера<body>— содержит всё видимое содержимое страницы
Алексей Петров, старший веб-разработчик Однажды ко мне обратился студент, который две недели пытался создать свой первый сайт-портфолио. Он постоянно сталкивался с проблемами отображения русских букв и странным поведением страницы на телефоне. Оказалось, что в базовом шаблоне он пропустил строки с указанием кодировки и viewport. Я показал ему правильную структуру документа, и большинство проблем решились за 5 минут. Этот случай отлично демонстрирует, насколько важно понимать значение каждого элемента в структуре HTML-документа, даже если они кажутся незначительными.
Чтобы начать работу, создайте текстовый документ с расширением .html (например, index.html) и вставьте в него приведенный выше код. Теперь вы готовы наполнять страницу контентом между тегами <body>.
| Элемент структуры | Назначение | Обязательный? |
|---|---|---|
| DOCTYPE | Определяет версию HTML | Да |
| html | Корневой элемент страницы | Да |
| head | Контейнер для метаданных | Да |
| body | Контейнер для содержимого | Да |
| meta charset | Определяет кодировку символов | Да (для корректного отображения) |
| meta viewport | Управляет отображением на мобильных устройствах | Да (для адаптивности) |
Базовые HTML-элементы с готовыми блоками кода
После создания базовой структуры необходимо наполнить сайт контентом. Для этого используются различные HTML-элементы. Рассмотрим самые важные из них с примерами готового кода. 🧩
1. Заголовки разных уровней
<h1>Главный заголовок страницы</h1>
<h2>Подзаголовок раздела</h2>
<h3>Заголовок подраздела</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
HTML поддерживает 6 уровней заголовков, где h1 — самый крупный и важный, а h6 — наименьший. Используйте их для создания иерархии контента.
2. Параграфы и форматирование текста
<p>Это обычный параграф текста.</p>
<p>Это параграф с <b>жирным текстом</b> и <i>курсивом</i>.</p>
<p>Это текст с <u>подчеркиванием</u> и <s>зачеркиванием</s>.</p>
<p>Здесь есть <mark>выделенный текст</mark> и <small>мелкий текст</small>.</p>
<p>Текст с <sup>верхним</sup> и <sub>нижним</sub> индексом.</p>
3. Списки: маркированные и нумерованные
<!-- Маркированный список -->
<ul>
<li>Элемент маркированного списка 1</li>
<li>Элемент маркированного списка 2</li>
<li>Элемент маркированного списка 3</li>
</ul>
<!-- Нумерованный список -->
<ol>
<li>Первый элемент нумерованного списка</li>
<li>Второй элемент нумерованного списка</li>
<li>Третий элемент нумерованного списка</li>
</ol>
4. Изображения
<img src="путь_к_изображению.jpg" alt="Описание изображения" width="300" height="200">
Атрибут alt важен для доступности и SEO. Он описывает содержимое изображения для поисковых систем и пользователей с нарушениями зрения.
5. Ссылки
<a href="https://www.example.com">Обычная ссылка</a>
<a href="https://www.example.com" target="_blank">Ссылка, открывающаяся в новой вкладке</a>
<a href="mailto:email@example.com">Ссылка для отправки письма</a>
<a href="tel:+71234567890">Ссылка для звонка</a>
6. Блочные элементы для структурирования
<div>Блочный элемент для группировки содержимого</div>
<header>Шапка сайта или раздела</header>
<nav>Навигационное меню</nav>
<main>Основное содержимое</main>
<section>Раздел контента</section>
<article>Независимый, самодостаточный контент</article>
<aside>Боковая колонка, дополнительная информация</aside>
<footer>Подвал сайта или раздела</footer>
Комбинируя эти базовые элементы, вы можете создать практически любую структуру веб-страницы. Вот пример простого блока с информацией о товаре:
<div class="product-card">
<img src="product.jpg" alt="Описание товара" width="200">
<h3>Название товара</h3>
<p>Краткое описание товара, его особенности и преимущества.</p>
<p><b>Цена:</b> 1999 руб.</p>
<a href="product-details.html">Подробнее</a>
</div>
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>
</head>
<body>
<!-- Шапка сайта с навигацией -->
<header>
<div class="logo">Иван Петров</div>
<nav>
<ul>
<li><a href="#about">Обо мне</a></li>
<li><a href="#services">Услуги</a></li>
<li><a href="#portfolio">Портфолио</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
</header>
<!-- Главный баннер -->
<section id="banner">
<h1>Иван Петров</h1>
<h2>Веб-разработчик и дизайнер</h2>
<p>Создаю современные и функциональные сайты для бизнеса</p>
<a href="#contact">Связаться</a>
</section>
<!-- Блок "Обо мне" -->
<section id="about">
<h2>Обо мне</h2>
<img src="profile.jpg" alt="Иван Петров">
<p>Привет! Я Иван, веб-разработчик с 5-летним опытом. Специализируюсь на создании эффективных веб-решений для малого и среднего бизнеса.</p>
<p>Мой подход — сочетание современного дизайна и функциональности, которые помогают вашему бизнесу достигать целей.</p>
</section>
<!-- Блок "Услуги" -->
<section id="services">
<h2>Услуги</h2>
<div class="service">
<h3>Разработка сайтов</h3>
<p>Создание адаптивных веб-сайтов с современным дизайном и удобным интерфейсом.</p>
</div>
<div class="service">
<h3>Дизайн интерфейсов</h3>
<p>Разработка удобных и эстетически привлекательных пользовательских интерфейсов.</p>
</div>
<div class="service">
<h3>SEO-оптимизация</h3>
<p>Повышение видимости вашего сайта в поисковых системах для привлечения целевой аудитории.</p>
</div>
</section>
<!-- Блок "Портфолио" -->
<section id="portfolio">
<h2>Портфолио</h2>
<div class="project">
<img src="project1.jpg" alt="Проект 1">
<h3>Интернет-магазин "Техника+"</h3>
<p>Разработка интернет-магазина электроники с каталогом товаров и системой заказов.</p>
</div>
<div class="project">
<img src="project2.jpg" alt="Проект 2">
<h3>Сайт для ресторана "Вкусно"</h3>
<p>Создание сайта для ресторана с онлайн-меню и системой бронирования столиков.</p>
</div>
</section>
<!-- Блок "Контакты" -->
<section id="contact">
<h2>Контакты</h2>
<p>Свяжитесь со мной для обсуждения вашего проекта.</p>
<p>Email: ivan@example.com</p>
<p>Телефон: +7 (123) 456-78-90</p>
<!-- Форма обратной связи -->
<form action="submit_form.php" method="post">
<input type="text" name="name" placeholder="Ваше имя" required>
<input type="email" name="email" placeholder="Ваш email" required>
<textarea name="message" placeholder="Ваше сообщение" required></textarea>
<button type="submit">Отправить</button>
</form>
</section>
<!-- Подвал сайта -->
<footer>
<p>© 2023 Иван Петров. Все права защищены.</p>
<div class="social-links">
<a href="#">Twitter</a>
<a href="#">LinkedIn</a>
<a href="#">GitHub</a>
</div>
</footer>
</body>
</html>
Этот шаблон содержит все необходимые разделы для профессионального представления ваших услуг и портфолио. Для улучшения внешнего вида вы можете добавить стили CSS, но даже в чистом HTML структура выглядит организованно.
Марина Соколова, фрилансер-разработчик Моя клиентка Елена — фотограф, которая хотела создать сайт-портфолио, но бюджет был ограничен. Мы начали с базового HTML-шаблона, похожего на представленный выше. За один вечер я адаптировала шаблон под её потребности, заменив примеры работ на фотографии из её портфолио. Интересно, что даже без сложного CSS сайт выглядел структурировано и профессионально. Добавив минимальные стили для цветов и отступов, мы получили рабочий сайт за несколько часов работы. Через неделю после запуска Елена получила три новых заказа от клиентов, нашедших её через сайт. Этот случай показывает, что даже простой HTML-шаблон может стать эффективным инструментом для бизнеса, если он хорошо организован.
Для создания корпоративного сайта-визитки можно адаптировать данный шаблон, добавив следующие разделы:
- История компании
- Команда
- Преимущества
- Отзывы клиентов
- Партнеры
- Новости и публикации
| Раздел сайта-визитки | Цель | Ключевые элементы |
|---|---|---|
| Шапка (Header) | Навигация по сайту | Логотип, меню, контакты |
| Баннер (Hero section) | Привлечение внимания | Заголовок, подзаголовок, призыв к действию |
| О себе/компании | Создание доверия | Фото, краткая биография, миссия |
| Услуги/продукты | Представление предложений | Список услуг, преимущества, цены |
| Портфолио/кейсы | Демонстрация опыта | Примеры работ, описания проектов |
| Контакты | Конверсия посетителя | Форма связи, телефон, email, карта |
Формы и таблицы: код HTML для интерактивных элементов
Формы и таблицы — важные компоненты, делающие сайт интерактивным и информативным. Они позволяют собирать данные от пользователей и структурировать информацию соответственно. 📊
HTML-код для создания форм
Формы — основной способ взаимодействия с пользователем. Вот базовая структура HTML-формы:
<form action="обработчик.php" method="post">
<div>
<label for="name">Имя:</label>
<input type="text" id="name" name="user_name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="user_email" required>
</div>
<div>
<label for="message">Сообщение:</label>
<textarea id="message" name="user_message" required></textarea>
</div>
<div>
<button type="submit">Отправить</button>
</div>
</form>
Рассмотрим различные типы полей ввода для форм:
<!-- Текстовое поле -->
<input type="text" name="username" placeholder="Введите имя пользователя">
<!-- Поле для пароля -->
<input type="password" name="password" placeholder="Введите пароль">
<!-- Email-поле -->
<input type="email" name="email" placeholder="Введите email">
<!-- Числовое поле -->
<input type="number" name="age" min="18" max="100" step="1" placeholder="Ваш возраст">
<!-- Телефон -->
<input type="tel" name="phone" pattern="[0-9]{10}" placeholder="Номер телефона (10 цифр)">
<!-- Флажок (чекбокс) -->
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">Подписаться на рассылку</label>
<!-- Переключатель (радиокнопка) -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">Мужской</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Женский</label>
<!-- Выпадающий список -->
<select name="country">
<option value="">Выберите страну</option>
<option value="ru">Россия</option>
<option value="by">Беларусь</option>
<option value="kz">Казахстан</option>
</select>
<!-- Многострочное текстовое поле -->
<textarea name="message" rows="5" cols="30" placeholder="Ваше сообщение"></textarea>
<!-- Загрузка файла -->
<input type="file" name="document">
<!-- Скрытое поле (для служебной информации) -->
<input type="hidden" name="form_id" value="contact_form">
<!-- Кнопка отправки формы -->
<button type="submit">Отправить</button>
<!-- Кнопка сброса формы -->
<button type="reset">Очистить</button>
HTML-код для создания таблиц
Таблицы используются для отображения данных в структурированном виде. Вот пример базовой таблицы:
<table>
<thead>
<tr>
<th>Имя</th>
<th>Возраст</th>
<th>Должность</th>
</tr>
</thead>
<tbody>
<tr>
<td>Иван Петров</td>
<td>28</td>
<td>Веб-разработчик</td>
</tr>
<tr>
<td>Анна Сидорова</td>
<td>32</td>
<td>Дизайнер</td>
</tr>
<tr>
<td>Михаил Иванов</td>
<td>25</td>
<td>SEO-специалист</td>
</tr>
</tbody>
</table>
Для создания более сложных таблиц можно использовать атрибуты объединения ячеек:
<table>
<thead>
<tr>
<th rowspan="2">Название товара</th>
<th colspan="2">Параметры</th>
<th rowspan="2">Цена</th>
</tr>
<tr>
<th>Вес</th>
<th>Размер</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ноутбук Model X</td>
<td>2.1 кг</td>
<td>15.6"</td>
<td>75 000 ₽</td>
</tr>
<tr>
<td>Смартфон Y-Phone</td>
<td>180 г</td>
<td>6.1"</td>
<td>65 000 ₽</td>
</tr>
</tbody>
</table>
Вот пример полной контактной формы, которую можно сразу использовать на сайте:
<form action="process_form.php" method="post">
<h2>Свяжитесь с нами</h2>
<div>
<label for="full_name">Ваше имя:</label>
<input type="text" id="full_name" name="full_name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="phone">Телефон:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10,11}">
</div>
<div>
<label for="subject">Тема обращения:</label>
<select id="subject" name="subject" required>
<option value="">Выберите тему</option>
<option value="question">Вопрос о продукте/услуге</option>
<option value="support">Техническая поддержка</option>
<option value="cooperation">Сотрудничество</option>
<option value="other">Другое</option>
</select>
</div>
<div>
<label for="message">Ваше сообщение:</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<div>
<input type="checkbox" id="agreement" name="agreement" required>
<label for="agreement">Я согласен на обработку персональных данных</label>
</div>
<div>
<button type="submit">Отправить сообщение</button>
<button type="reset">Очистить форму</button>
</div>
</form>
Полезные приёмы HTML-вёрстки для быстрого старта
В этом разделе рассмотрим несколько профессиональных приёмов, которые значительно упростят вашу работу с HTML и помогут создавать более эффективные страницы. 🛠️
1. Используйте семантические теги
Вместо того, чтобы везде применять div и span, используйте семантические теги HTML5, которые лучше описывают содержание:
<!-- Старый подход -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div>
<!-- Семантический подход -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>
2. Создавайте комментарии в коде
Комментарии делают код более понятным и помогают ориентироваться в его структуре:
<!-- ШАПКА САЙТА -->
<header>
<!-- Логотип компании -->
<div class="logo">...</div>
<!-- Главное навигационное меню -->
<nav>...</nav>
</header>
<!-- ОСНОВНОЕ СОДЕРЖИМОЕ -->
<main>
<!-- Секция с преимуществами -->
<section class="features">...</section>
</main>
3. Используйте атрибуты data- для хранения информации
Атрибуты data- позволяют хранить дополнительную информацию в HTML-элементах, которую потом можно использовать через JavaScript:
<div class="product"
data-product-id="123"
data-category="electronics"
data-price="15000">
Ноутбук ASUS
</div>
4. Оптимизируйте изображения с помощью атрибутов
<!-- Задание размеров предотвращает "прыжки" контента при загрузке -->
<img src="image.jpg" alt="Описание" width="300" height="200">
<!-- Атрибут loading="lazy" откладывает загрузку изображений,
которые находятся вне области просмотра -->
<img src="large-image.jpg" alt="Большое изображение" loading="lazy">
5. Создавайте адаптивные элементы с помощью picture
<picture>
<source media="(max-width: 600px)" srcset="small.jpg">
<source media="(max-width: 1200px)" srcset="medium.jpg">
<img src="large.jpg" alt="Адаптивное изображение">
</picture>
6. Используйте шаблоны для повторяющихся элементов
Вместо копирования одинаковых блоков кода создайте шаблон, который можно быстро адаптировать:
<!-- Шаблон карточки продукта -->
<!--
<div class="product-card">
<img src="ИЗОБРАЖЕНИЕ" alt="ОПИСАНИЕ">
<h3>НАЗВАНИЕ</h3>
<p class="description">ОПИСАНИЕ</p>
<p class="price">ЦЕНА ₽</p>
<button>Купить</button>
</div>
-->
<!-- Готовые карточки по шаблону -->
<div class="product-card">
<img src="laptop.jpg" alt="Ноутбук X1">
<h3>Ноутбук X1 Pro</h3>
<p class="description">Мощный ноутбук для профессионалов</p>
<p class="price">75 000 ₽</p>
<button>Купить</button>
</div>
7. Используйте списки определений для терминов
<dl>
<dt>HTML</dt>
<dd>Язык гипертекстовой разметки, используемый для создания веб-страниц.</dd>
<dt>CSS</dt>
<dd>Каскадные таблицы стилей, используемые для оформления веб-страниц.</dd>
</dl>
8. Применяйте микроразметку для SEO
Микроразметка помогает поисковым системам лучше понимать содержимое вашего сайта:
<div itemscope itemtype="http://schema.org/Product">
<h2 itemprop="name">Смартфон Z-Phone 12</h2>
<img itemprop="image" src="zphone.jpg" alt="Z-Phone 12">
<p itemprop="description">Новейший смартфон с уникальными характеристиками.</p>
<p>Цена: <span itemprop="price">55000</span> <meta itemprop="priceCurrency" content="RUB">₽</p>
</div>
Эти приёмы не только упростят вашу работу с кодом, но и сделают сайт более функциональным, доступным и дружелюбным к поисковым системам.
- Идеальная организация кода: Разделяйте код на логические блоки с отступами и комментариями
- Документация для себя: Документируйте неочевидные решения прямо в HTML-комментариях
- Проверка кода: Используйте валидаторы HTML для поиска ошибок в вашем коде
- Постепенное улучшение: Начните с базового HTML, а затем постепенно добавляйте стили и скрипты
- Использование сниппетов: Создавайте библиотеку готовых фрагментов кода для повторного использования
Освоив HTML-код и изучив представленные примеры, вы получили прочный фундамент для создания собственных веб-страниц. Каждый блок кода в этой статье — это кирпичик в строительстве вашего первого сайта. Помните, что даже профессиональные разработчики постоянно обращаются к готовым решениям, адаптируя их под свои задачи. Не бойтесь экспериментировать с представленными примерами, менять их структуру и комбинировать между собой. Практика — лучший способ закрепить знания в веб-разработке. Создайте свой первый HTML-документ уже сегодня, и вы увидите, как быстро растут ваши навыки и понимание принципов построения современных веб-страниц.
Читайте также
- HTML-код: примеры для эффективной разработки веб-страниц
- HTML в блокноте: 7 примеров кода для создания веб-страниц с нуля
- 15 рабочих примеров HTML-кода для создания веб-страниц с нуля
- 10 HTML-примеров для создания элегантных и функциональных сайтов
- Пошаговое руководство HTML: от простейшей страницы до сложного сайта
- Готовые HTML-структуры для создания разных типов сайтов: обзор шаблонов
- HTML: примеры страниц от простых до продвинутых – изучаем веб-разработку
- 15 примеров HTML-кода для создания веб-страниц с нуля: копируй и адаптируй