Создание веб-страницы в Блокноте: базовая HTML-структура и стили

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

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

До 18

От 18 до 24

От 25 до 34

От 35 до 44

От 45 до 49

От 50 до 54

Больше 55

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

Новички в веб-разработке, желающие изучить основы HTML
Люди, интересующиеся созданием веб-страниц без использования сложных редакторов
Студенты и начинающие программисты, рассматривающие веб-разработку как карьеру
Создание веб-страницы в Блокноте — это как сборка модели самолёта из простейших деталей. Вместо дорогих редакторов и сложных программ вам понадобится только стандартный текстовый редактор Windows. Удивительно, как с помощью нескольких строк кода можно создать полноценную веб-страницу, которая откроется в любом браузере! 🚀 Этот способ особенно ценен для новичков: вы получите глубокое понимание HTML-разметки, научитесь управлять структурой страницы и заложите фундамент для дальнейшего развития в веб-разработке.

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

Основы HTML для создания веб-страницы в Блокноте

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

Основная концепция HTML строится вокруг тегов — специальных элементов, заключённых в угловые скобки. Теги указывают браузеру, как отображать контент на странице.

Тег	Назначение	Пример использования
`<html>`	Корневой элемент страницы	`<html>...всё содержимое...</html>`
`<head>`	Техническая информация	`<head><title>Мой сайт</title></head>`
`<body>`	Видимое содержимое	`<body><h1>Привет!</h1></body>`
`<h1> – <h6>`	Заголовки разных уровней	`<h1>Главный заголовок</h1>`
`<p>`	Параграф (абзац) текста	`<p>Это абзац текста.</p>`

Большинство тегов парные — имеют открывающую часть <тег> и закрывающую </тег>. Всё, что находится между ними, будет обработано согласно правилам этого тега. Есть и одиночные теги, например <img> для изображений или <br> для переноса строки.

Структура HTML-документа включает следующие обязательные элементы:

Декларация типа документа — <!DOCTYPE html> сообщает браузеру, что мы используем HTML5
Корневой элемент — <html>...</html> охватывает весь документ
Секция заголовка — <head>...</head> содержит метаданные, заголовок страницы, ссылки на CSS
Тело документа — <body>...</body> включает всё видимое содержимое страницы

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

Подготовка Блокнота для разработки первого сайта

Блокнот — стандартное приложение Windows, которое идеально подходит для первых шагов в HTML. Его преимущество в простоте и отсутствии отвлекающих функций. Вы сосредоточитесь на самом коде, а не на изучении интерфейса редактора. 🔍

Прежде чем начать писать код, давайте настроим Блокнот для более комфортной работы:

Запустите Блокнот. Найдите его в меню «Пуск» → «Стандартные» → «Блокнот» или воспользуйтесь поиском.
Включите перенос по словам. В меню выберите «Формат» → «Перенос по словам». Это поможет видеть весь код без горизонтальной прокрутки.
Настройте шрифт. Для удобства чтения кода выберите моноширинный шрифт: «Формат» → «Шрифт» → выберите «Consolas» или «Courier New».
Установите размер шрифта. Рекомендую 12 или 14 пунктов — достаточно крупно для комфортного чтения, но не занимает много места.

Когда ваш Блокнот готов, сразу создайте папку для вашего первого проекта. Это важно для организации файлов:

Создайте папку «МойПервыйСайт» на рабочем столе или в документах
Внутри этой папки создайте подпапку «images» для хранения изображений
Подготовьте несколько картинок в формате JPG или PNG для будущей веб-страницы

Теперь давайте сравним Блокнот с другими инструментами для создания HTML-страниц, чтобы понимать его место в экосистеме:

Критерий	Блокнот	VS Code	Dreamweaver
Стоимость	Бесплатно (предустановлен)	Бесплатно	Платная подписка
Подсветка синтаксиса	Нет	Да	Да
Автодополнение	Нет	Да	Да
Кривая обучения	Минимальная	Средняя	Крутая
Понимание кода	Максимальное	Среднее	Минимальное

Несмотря на отсутствие продвинутых функций, Блокнот имеет важное преимущество: он заставляет вас писать каждую строчку кода вручную, что значительно улучшает понимание структуры HTML-документа и помогает быстрее запомнить основные теги.

Создание базовой 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>
<h1>Привет, мир!</h1>
<p>Это моя первая веб-страница, созданная в Блокноте.</p>
</body>
</html>

Давайте разберём каждый элемент этой структуры:

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

Теперь добавим несколько элементов, чтобы страница стала более интересной:

Подзаголовки и дополнительный текст:

<h2>О чём эта страница</h2>
<p>Здесь я расскажу о своих увлечениях и интересах.</p>

Список:

<h3>Мои хобби:</h3>
<ul>
<li>Программирование</li>
<li>Фотография</li>
<li>Путешествия</li>
</ul>

Ссылка:

<p>Мой любимый поисковик – <a href="https://www.google.com">Google</a></p>

Сергей Викторов, веб-разработчик
В университете у нас была группа энтузиастов, которые решили создать сайт для студенческого научного общества. Проблема была в том, что администрация не выделила бюджет на программное обеспечение, а у нас на компьютерах стоял только стандартный набор Windows.
Я предложил использовать Блокнот, чем вызвал скептицизм у товарищей. "В Блокноте? Серьёзно?" — спрашивали они. Тогда я за 30 минут создал простую, но аккуратную страницу с описанием общества, списком предстоящих мероприятий и формой для вопросов (конечно, без бэкенда, но визуально работающую).
Это произвело впечатление, и мы распределили задачи — каждый отвечал за свой раздел сайта. Через неделю у нас был готовый многостраничный сайт, который мы разместили на бесплатном хостинге. Интересно, что этот опыт стал для трёх участников группы началом карьеры в веб-разработке. А всё началось с простого Блокнота!

Добавление стилей и изображений на вашу страницу

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

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

Встроенные стили — применяются к конкретному элементу через атрибут style
Внутренние стили — размещаются в теге <style> в разделе <head>
Внешние стили — находятся в отдельном файле .css и подключаются ссылкой

Для нашего первого проекта мы используем внутренние стили — они простые и не требуют создания дополнительных файлов. Добавьте следующий код в раздел <head> вашего документа:

HTML

Скопировать код

<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}

h1 {
color: #2c3e50;
text-align: center;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}

h2, h3 {
color: #3498db;
}

ul {
background-color: #fff;
border-left: 3px solid #3498db;
padding: 10px 20px;
}

a {
color: #e74c3c;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

.container {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.profile-image {
display: block;
margin: 20px auto;
max-width: 200px;
border-radius: 50%;
border: 3px solid #3498db;
}
</style>

Теперь модифицируем структуру <body>, добавив контейнер и место для изображения:

HTML

Скопировать код

<body>
<div class="container">
<h1>Привет, мир!</h1>
<img src="images/profile.jpg" alt="Моя фотография" class="profile-image">
<h2>О чём эта страница</h2>
<p>Здесь я расскажу о своих увлечениях и интересах.</p>
<h3>Мои хобби:</h3>
<ul>
<li>Программирование</li>
<li>Фотография</li>
<li>Путешествия</li>
</ul>
<p>Мой любимый поисковик – <a href="https://www.google.com">Google</a></p>
</div>
</body>

Добавление изображений требует особого внимания к путям файлов. Вот основные правила работы с изображениями в HTML:

Тип пути	Пример	Когда использовать
Относительный путь	images/profile.jpg	Для локальных файлов в вашем проекте
Абсолютный путь	/images/profile.jpg	Файлы относительно корня сайта
URL-адрес	https://example.com/image.jpg	Для изображений из интернета

Для нашего проекта:

Поместите выбранное изображение в папку "images"
Переименуйте его в "profile.jpg" (или измените имя в HTML-коде на соответствующее)
Убедитесь, что атрибут src правильно указывает на местоположение изображения

Вы также можете добавить ещё несколько изображений на страницу:

HTML

Скопировать код

<h3>Мои фотографии:</h3>
<img src="images/photo1.jpg" alt="Фотография 1" style="width: 200px; margin: 5px;">
<img src="images/photo2.jpg" alt="Фотография 2" style="width: 200px; margin: 5px;">

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

Сохранение и проверка работы вашего первого сайта

Когда ваша HTML-страница готова, пришло время сохранить её и проверить в действии. Этот процесс критически важен и требует внимания к деталям. 📋

Правильное сохранение файла — залог корректной работы веб-страницы:

Выберите правильное расширение: В Блокноте перейдите в меню «Файл» → «Сохранить как».
Укажите местоположение: Найдите созданную вами папку «МойПервыйСайт».
Задайте имя файла: Введите «index.html» — это стандартное имя для главной страницы сайта.
Установите тип файла: В выпадающем списке «Тип файла» выберите «Все файлы (.)».
Проверьте кодировку: В поле «Кодировка» выберите «UTF-8».
Нажмите «Сохранить».

Если вы не выберете тип «Все файлы», Блокнот может автоматически добавить расширение .txt к вашему файлу (например, index.html.txt), и браузер не сможет правильно его обработать.

После сохранения файла, откройте его для проверки:

Найдите файл index.html в вашей папке
Дважды щелкните на нем — он должен открыться в вашем браузере по умолчанию
Если страница открылась с неотформатированным текстом или отображает HTML-код, проверьте расширение файла

Отладка распространенных ошибок — ключевой навык веб-разработчика:

Текст отображается не на русском языке — проверьте наличие тега <meta charset="UTF-8"> в разделе <head>
Изображения не отображаются — убедитесь, что путь к файлам указан правильно и файлы находятся в указанных папках
Стили не применяются — проверьте синтаксис CSS, особенно наличие закрывающих скобок и точек с запятой
Страница выглядит неправильно — используйте инструменты разработчика в браузере (F12 или Ctrl+Shift+I), чтобы исследовать проблему

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

Вернитесь в Блокнот и внесите необходимые правки
Сохраните файл (Ctrl+S)
Вернитесь в браузер и обновите страницу (F5 или Ctrl+R)

Этот цикл «редактирование-сохранение-просмотр» — основа процесса веб-разработки, даже для профессиональных разработчиков с опытом.

Если вы хотите продолжить развивать свой сайт, вот несколько рекомендаций по следующим шагам:

Создайте дополнительные HTML-файлы и свяжите их гиперссылками
Переместите стили в отдельный CSS-файл и подключите его через <link>
Добавьте простые интерактивные элементы с помощью JavaScript
Изучите более сложные теги HTML для создания форм, таблиц и других структур

Создание веб-страницы в Блокноте — отличный способ погрузиться в основы веб-разработки. Вы не просто получили готовый результат, но и заложили фундамент понимания HTML и CSS. Каждая строчка кода, написанная вручную, помогает лучше усвоить принципы разметки и стилизации. Эти знания останутся с вами надолго и станут основой для более сложных проектов. Продолжайте экспериментировать, добавляйте новые элементы и функции — так вы постепенно перейдёте от простой страницы к настоящему веб-приложению.

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

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

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

Какой текстовый редактор используется для создания веб-страницы в этом руководстве?

1 / 5

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

Основные принципы работы HTTP

6 сентября 2024

Как настроить HTTPS на вашем сайте

6 сентября 2024

Как проверить сайт на работоспособность: пошаговое руководство

6 сентября 2024

Создание веб-страницы в Блокноте: базовая HTML-структура и стили

Основы HTML для создания веб-страницы в Блокноте

Подготовка Блокнота для разработки первого сайта

Создание базовой HTML-структуры веб-страницы

Добавление стилей и изображений на вашу страницу

Сохранение и проверка работы вашего первого сайта

Загрузка...