Создание сайта на чистом HTML: пошаговое руководство для новичков

Пройдите тест, узнайте какой профессии подходите

Сколько вам лет

До 18

От 18 до 24

От 25 до 34

От 35 до 44

От 45 до 49

От 50 до 54

Больше 55

Для кого эта статья:

Новички в веб-разработке, желающие изучить основы HTML и создания сайтов с нуля.
Люди, интересующиеся карьерой в области веб-разработки и ищущие практические советы.
Студенты и самоучки, желающие получить реальные навыки и создать личный проект.
Вы держите в руках ключи от мира веб-разработки, но не знаете, в какую дверь их вставить? HTML — фундамент, на котором стоят миллионы сайтов от простых блогов до сложных порталов. Создание своего первого сайта с нуля — это как собрать конструктор, где каждый тег имеет свое место и назначение. Без фреймворков, без конструкторов, только чистый код и ваша логика. Готовы почувствовать себя настоящим веб-архитектором и увидеть, как ваш цифровой дом обретает форму? Тогда начнем строительство прямо сейчас. 🏗️

Хотите не просто создать сайт, а освоить профессию веб-разработчика с нуля? Обучение веб-разработке от Skypro — это погружение в мир современных технологий под руководством действующих разработчиков. От базового HTML до сложных JavaScript-фреймворков за 9 месяцев. Никакой воды — только практика на реальных проектах и гарантированное трудоустройство. Превратите сегодняшний интерес в завтрашнюю карьеру!

Основы HTML: первые шаги в создании сайта

HTML (HyperText Markup Language) — это язык разметки, который браузеры используют для отображения веб-страниц. Представьте его как скелет вашего сайта, на который потом "нарастут" стили и функциональность. 🦴

Для создания HTML-страницы вам понадобится всего лишь текстовый редактор. Выберите из доступных вариантов:

Notepad++ (Windows) — лёгкий и удобный для начинающих
Visual Studio Code — мощный редактор с подсветкой синтаксиса и множеством плагинов
Sublime Text — быстрый редактор с минималистичным интерфейсом
Atom — настраиваемый редактор с открытым исходным кодом

Я рекомендую начать с Visual Studio Code — он бесплатный, поддерживает подсветку синтаксиса HTML и имеет встроенный предпросмотр веб-страниц.

Дмитрий Волков, старший веб-разработчик Когда я начинал изучать веб-разработку, я совершал классическую ошибку новичков — пытался сразу же создать сложный сайт с множеством функций. Моя первая попытка создать интернет-магазин на чистом HTML без понимания базовых принципов закончилась катастрофой — запутанным кодом и нечитаемой страницей. После нескольких неудач я решил вернуться к основам. Начал с создания простой страницы "Обо мне" с базовой информацией, фотографией и контактами. Это был однофайловый HTML-документ, без изысков, но он работал! Постепенно добавлял новые элементы, изучая их по одному. Этот опыт научил меня важному принципу в программировании — "сначала заставь работать, потом улучшай". Теперь, обучая новичков, я всегда предлагаю им начать с предельно простого проекта и постепенно его наращивать.

Давайте создадим наш первый HTML-документ. Откройте текстовый редактор и введите следующий код:

<!DOCTYPE html>
<html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это мой первый сайт на HTML.</p>
</body>
</html>

Сохраните файл с расширением .html (например, index.html) и откройте его в браузере. Поздравляю! Вы создали свою первую веб-страницу. 🎉

HTML-тег	Назначение	Пример использования
`<h1> – <h6>`	Заголовки разных уровней	`<h1>Главный заголовок</h1>`
`<p>`	Абзац текста	`<p>Это параграф текста.</p>`
`<a>`	Гиперссылка	`<a href="https://example.com">Ссылка</a>`
`<img>`	Изображение	`<img src="image.jpg" alt="Описание">`
`<ul>` и `<li>`	Маркированный список	`<ul><li>Элемент списка</li></ul>`

Теперь, когда вы знаете основные теги, можете начать расширять вашу страницу. Добавьте больше текста, заголовков, изображений и ссылок, чтобы освоиться с синтаксисом HTML.

Структура HTML-документа: разметка будущего сайта

Чтобы создать полноценный сайт, необходимо понимать правильную структуру HTML-документа. Современный HTML5 предлагает семантические теги, которые делают код более понятным как для разработчиков, так и для поисковых систем. 📝

Вот базовая структура современного HTML5-документа:

<!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>
<!-- Шапка сайта -->
</header>

<main>
<!-- Основное содержимое -->
</main>

<footer>
<!-- Подвал сайта -->
</footer>
</body>
</html>

Разберем каждую часть документа:

<!DOCTYPE html> — объявление типа документа для HTML5
<html lang="ru"> — корневой элемент с указанием языка страницы
<head> — раздел с мета-информацией о странице
<meta charset="UTF-8"> — указание кодировки для корректного отображения символов
<meta name="viewport"...> — настройка отображения на мобильных устройствах
<title> — заголовок страницы, отображаемый во вкладке браузера
<body> — тело документа, содержащее всё видимое содержимое

Семантические теги помогают структурировать контент логически:

<header> — шапка сайта с логотипом и навигацией
<nav> — навигационное меню
<main> — основное содержимое страницы
<article> — независимый, самодостаточный контент
<section> — логический раздел страницы
<aside> — боковая панель, дополнительная информация
<footer> — подвал сайта с контактами, копирайтом и т.д.

Давайте создадим более детальную структуру для нашего сайта:

<!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>
<h1>Иван Иванов</h1>
<nav>
<ul>
<li><a href="#about">Обо мне</a></li>
<li><a href="#portfolio">Портфолио</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
</header>

<main>
<section id="about">
<h2>Обо мне</h2>
<p>Здесь информация обо мне...</p>
</section>

<section id="portfolio">
<h2>Портфолио</h2>
<div class="project">
<h3>Проект 1</h3>
<img src="project1.jpg" alt="Проект 1">
<p>Описание проекта...</p>
</div>
</section>

<section id="contact">
<h2>Контакты</h2>
<p>Email: example@mail.com</p>
</section>
</main>

<footer>
<p>&copy; 2023 Иван Иванов. Все права защищены.</p>
</footer>
</body>
</html>

Обратите внимание на атрибуты id у секций — они позволяют создавать якорные ссылки для навигации по странице. Такая структура делает ваш код более понятным и поддерживаемым. 🧩

Добавляем стиль: CSS для оформления вашего сайта

HTML задаёт структуру, но без CSS (Cascading Style Sheets) ваш сайт будет выглядеть как документ из 90-х — голый текст без оформления. Давайте добавим стили, чтобы сделать сайт привлекательным. 🎨

Существует три способа добавления CSS к HTML:

Встроенные стили (атрибут style)
Внутренние стили (тег <style> в <head>)
Внешний файл CSS (подключается через <link>)

Для реальных проектов рекомендуется использовать внешний CSS-файл — это обеспечивает разделение структуры и оформления, а также позволяет переиспользовать стили на разных страницах.

Создайте файл style.css в той же папке, что и ваш HTML-файл, и добавьте следующую строку в раздел <head>:

<link rel="stylesheet" href="style.css">

Теперь напишем базовые стили в файле style.css:

/* Сброс стилей и базовые настройки */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

/* Стили для шапки */
header {
background-color: #f4f4f4;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
text-align: center;
}

nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 20px;
margin-top: 10px;
}

nav a {
text-decoration: none;
color: #333;
font-weight: bold;
}

nav a:hover {
color: #0088cc;
}

/* Стили для секций */
section {
margin-bottom: 30px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

h2 {
color: #0088cc;
margin-bottom: 15px;
}

/* Стили для футера */
footer {
text-align: center;
padding: 20px;
background-color: #f4f4f4;
border-radius: 5px;
font-size: 0.9em;
}

/* Стили для портфолио */
.project {
margin-bottom: 20px;
}

.project img {
max-width: 100%;
height: auto;
border-radius: 5px;
}

Это базовые стили, которые сделают ваш сайт более привлекательным и читаемым. CSS предлагает огромные возможности для оформления — от цветов и шрифтов до анимаций и трансформаций.

Анна Соколова, фронтенд-разработчик Когда я только начинала изучать CSS, самым сложным для меня было понять концепцию "потока" и позиционирования элементов. Я создала свой первый сайт-портфолио, и всё выглядело прекрасно на моем ноутбуке, но стоило открыть его на телефоне или планшете — всё "разваливалось". Переломным моментом стало знакомство с Flexbox. Я переписала весь CSS своего сайта, используя flex-контейнеры, и словно по волшебству мой сайт начал корректно отображаться на всех устройствах! Помню свой восторг, когда я впервые добавила медиа-запросы для адаптивного дизайна. Раньше я создавала отдельные версии сайтов для мобильных устройств, что было крайне неэффективно. Сейчас я советую новичкам сразу изучать современные подходы — Flexbox, Grid и CSS-переменные. Это избавит от множества проблем и сделает разработку более приятной.

Вот несколько важных CSS-свойств, которые стоит освоить в первую очередь:

Категория	Свойство	Пример	Результат
Текст	color	color: #0088cc;	Задает цвет текста
Текст	font-size	font-size: 16px;	Задает размер шрифта
Блоки	margin	margin: 10px;	Задает внешние отступы
Блоки	padding	padding: 20px;	Задает внутренние отступы
Фон	background-color	background-color: #f4f4f4;	Задает цвет фона
Позиционирование	display	display: flex;	Определяет тип отображения
Границы	border	border: 1px solid #ccc;	Задает границы элемента

Для более сложного дизайна изучите Flexbox и CSS Grid — они значительно упрощают создание адаптивных макетов, которые корректно отображаются на разных устройствах. 📱💻

Создание многостраничного сайта на HTML

После создания одностраничного сайта самое время перейти к многостраничной структуре. Для этого нам нужно создать несколько HTML-файлов и связать их между собой с помощью ссылок. 📚

Типичная структура файлов для простого многостраничного сайта:

index.html — главная страница
about.html — страница "Обо мне" или "О компании"
portfolio.html или services.html — портфолио или услуги
contact.html — контактная информация
style.css — общие стили для всех страниц
images/ — папка для изображений

Создайте каждый из этих файлов, используя базовую структуру HTML, которую мы рассмотрели ранее. Важно сохранять единообразие между страницами, особенно в шапке и подвале.

Для навигации между страницами используем теги <a> с относительными путями:

<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="about.html">Обо мне</a></li>
<li><a href="portfolio.html">Портфолио</a></li>
<li><a href="contact.html">Контакты</a></li>
</ul>
</nav>

Чтобы избежать дублирования кода (особенно в шапке и подвале), который повторяется на каждой странице, существуют следующие подходы:

Серверные технологии (PHP, Node.js и т.д.) — позволяют создавать шаблоны
JavaScript — можно загружать повторяющиеся части страниц
Статические генераторы сайтов (Jekyll, Hugo) — автоматизируют сборку страниц

Для начинающих проще всего использовать подход с копированием общей структуры между страницами, внося изменения только в основное содержимое.

Пример организации многостраничного сайта с единым стилем:

Файл 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>
<h1>Мой сайт</h1>
<nav>
<ul>
<li><a href="index.html" class="active">Главная</a></li>
<li><a href="about.html">Обо мне</a></li>
<li><a href="portfolio.html">Портфолио</a></li>
<li><a href="contact.html">Контакты</a></li>
</ul>
</nav>
</header>

<main>
<section>
<h2>Добро пожаловать на мой сайт!</h2>
<p>Это главная страница моего персонального сайта.</p>
<!-- Содержимое главной страницы -->
</section>
</main>

<footer>
<p>&copy; 2023 Мой сайт. Все права защищены.</p>
</footer>
</body>
</html>

Файл about.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>
<h1>Мой сайт</h1>
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="about.html" class="active">Обо мне</a></li>
<li><a href="portfolio.html">Портфолио</a></li>
<li><a href="contact.html">Контакты</a></li>
</ul>
</nav>
</header>

<main>
<section>
<h2>Обо мне</h2>
<p>Здесь информация обо мне...</p>
<!-- Уникальное содержимое страницы "Обо мне" -->
</section>
</main>

<footer>
<p>&copy; 2023 Мой сайт. Все права защищены.</p>
</footer>
</body>
</html>

Аналогично создайте страницы portfolio.html и contact.html, сохраняя общую структуру и меняя только основное содержимое и класс active в навигации.

Обратите внимание на класс active в навигации — его можно использовать в CSS для выделения текущей страницы:

nav a.active {
color: #0088cc;
border-bottom: 2px solid #0088cc;
}

Такая структура создаст ощущение единого сайта с разными разделами, между которыми пользователь может легко перемещаться. 🔄

Публикация сайта: как разместить ваш проект в интернете

Создать сайт на локальном компьютере — это только половина дела. Чтобы ваш проект стал доступен всему миру, его нужно опубликовать в интернете. Существует несколько способов сделать это, от бесплатных до платных вариантов. 🌐

Вот наиболее популярные варианты публикации сайта:

GitHub Pages — бесплатный хостинг для статических сайтов
Netlify — современная платформа для статических сайтов с бесплатным тарифом
Vercel — платформа для размещения JAMstack-проектов
Традиционные хостинги — платные услуги с FTP-доступом
Firebase Hosting — платформа от Google для размещения веб-приложений

Для новичков наиболее удобным вариантом будет GitHub Pages или Netlify — они бесплатны, просты в настройке и обеспечивают надежный хостинг для статических сайтов на HTML и CSS.

Рассмотрим процесс публикации сайта на GitHub Pages:

Создайте аккаунт на GitHub (если у вас его еще нет)
Создайте новый репозиторий с именем username.github.io, где username — ваше имя пользователя на GitHub
Загрузите файлы вашего сайта в этот репозиторий (через веб-интерфейс или с помощью Git)
Дождитесь публикации — обычно это занимает несколько минут
Посетите https://username.github.io — ваш сайт теперь доступен по этому адресу

Для более продвинутых проектов вам может потребоваться собственный домен. Вот шаги для настройки собственного домена:

Купите домен у регистратора доменов (например, REG.RU, Namecheap)
Настройте DNS-записи домена, чтобы они указывали на ваш хостинг
Добавьте домен в настройках хостинга (для GitHub Pages это делается в настройках репозитория)
Дождитесь распространения DNS-записей (может занять до 24 часов)

После публикации важно проверить работу сайта на различных устройствах и в разных браузерах. Обратите внимание на следующие аспекты:

Корректно ли отображаются все элементы?
Работают ли все ссылки?
Загружаются ли изображения?
Как выглядит сайт на мобильных устройствах?
Как быстро загружается сайт?

Для проверки скорости загрузки и других параметров можно использовать инструменты вроде Google PageSpeed Insights или GTmetrix.

Поздравляю! 🎉 Теперь ваш сайт доступен всему миру, и вы можете делиться ссылкой на него с друзьями, коллегами или потенциальными работодателями.

Создание сайта с нуля на HTML — это не просто изучение технической стороны веб-разработки, а ваш первый шаг к пониманию того, как устроен интернет. Начав с простого HTML-документа, вы прошли путь до полноценного многостраничного сайта с современным дизайном и публикацией в интернете. Это фундамент, на котором можно строить более сложные проекты с использованием JavaScript, PHP или современных фреймворков. Помните: каждая строчка кода, которую вы написали — это не просто текст, а шаг к вашему профессиональному росту как веб-разработчика. Продолжайте экспериментировать, изучать новое, и вскоре вы сможете создавать сайты любой сложности.

Читайте также

Проверь как ты усвоил материалы статьи

Пройди тест и узнай насколько ты лучше других читателей

Что такое HTML?

1 / 5

Свежие материалы

История и развитие HTTP и HTTPS

6 сентября 2024

Как установить и настроить Swift на Linux

6 сентября 2024

Коды состояния HTTP: что они значат?

6 сентября 2024

Создание сайта на чистом HTML: пошаговое руководство для новичков

Основы HTML: первые шаги в создании сайта

Структура HTML-документа: разметка будущего сайта

Добавляем стиль: CSS для оформления вашего сайта

Создание многостраничного сайта на HTML

Публикация сайта: как разместить ваш проект в интернете

Загрузка...