Для создания простого сайта не требуется сложных инструментов. Достаточно стандартного Блокнота и любого браузера. HTML-файл можно написать вручную, сохранить с нужным расширением и открыть локально для проверки результата.
Создайте новый текстовый файл в Блокноте. Сразу сохраните его с расширением .html, выбрав в окне сохранения тип файла «Все файлы» и указав, например, index.html. Это позволит браузеру распознать содержимое как HTML-документ.
Начальный шаблон может выглядеть так:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Название сайта</title> </head> <body> <h1>Заголовок страницы</h1> <p>Это абзац текста.</p> </body> </html>
После ввода кода сохраните файл. Затем откройте его двойным щелчком – он запустится в браузере. Изменения можно вносить вручную в том же файле и пересохранять его, обновляя страницу в браузере для просмотра результата.
Файлы можно связывать между собой с помощью тегов <a href=»имя_файла.html»>. Чтобы добавить изображение, используйте <img src=»путь_к_файлу» alt=»описание»>. Для оформления – применяйте встроенные или внешние стили через тег <style> в <head> или подключение CSS-файла через <link>.
Такой подход удобен для освоения основ HTML без дополнительных программ. Всё, что нужно – минимальный набор инструментов и понимание структуры разметки.
Выбор места для сохранения файлов сайта
Создай отдельную папку на диске, например C:\MyWebsite. Название должно быть без пробелов и специальных символов.
В этой папке будут храниться все файлы проекта: HTML-документы, изображения, стили, скрипты. Структура должна быть понятной и упрощать навигацию. Пример вложенности:
C:\MyWebsite\index.html
C:\MyWebsite\css\style.css
C:\MyWebsite\js\script.js
C:\MyWebsite\images\logo.png
Избегай сохранения на рабочем столе или в папках с ограниченным доступом. Лучше использовать диск C: или D:, если на нём нет ограничений прав администратора.
Перед началом убедись, что в настройках проводника включено отображение расширений файлов. Это помогает не перепутать, например, index.html с index.html.txt.
Для одностраничного сайта достаточно одного HTML-файла. При добавлении новых страниц сохраняй их в той же папке: about.html, contact.html.
Создание базовой структуры HTML-документа
Файл с расширением .html должен начинаться с обязательной строки <!DOCTYPE html>. Она сообщает браузеру, что используется HTML5.
<html lang="ru">– корневой элемент. Атрибутlangуказывает язык содержимого.<head>– блок с технической информацией: кодировка, заголовок, подключение файлов.<meta charset="UTF-8">– установка кодировки для корректного отображения текста.<title>...– текст в заголовке окна браузера. Кратко описывает содержание страницы.</head>– завершение технического блока.<body>...– область, в которой размещается весь видимый контент.
Пример структуры:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Название страницы</title> </head> <body> Контент страницы </body> </html>
Сохраняйте файл с кодировкой UTF-8 без BOM. Расширение должно быть .html. Имя файла не должно содержать пробелов или кириллицы. Рекомендуется использовать латиницу и символы - или _.
Добавление заголовка и текста на страницу
Откройте файл с расширением .html в Блокноте. Найдите тег <head> и после него добавьте блок <h1> для основного заголовка. Пример: <h1>Мой первый сайт</h1>. Заголовок отображается крупным шрифтом и служит обозначением темы страницы.
Для добавления обычного текста используйте тег <p>. Например: <p>Это пример абзаца на странице.</p>. Абзацы можно размещать несколько раз подряд для структурирования информации.
Заголовки можно использовать разных уровней: от <h1> до <h6>. <h1> применяют один раз, остальные – по мере необходимости. Например, <h2> подходит для подзаголовков внутри основной темы.
Следите за правильным вложением тегов. Все открытые теги должны быть корректно закрыты. Пример: <p>Текст</p>, а не <p>Текст.
Текст в абзацах должен быть коротким, без лишнего форматирования. Если нужен перенос строки внутри абзаца – используйте тег <br>, но не злоупотребляйте им.
Сохраните изменения в файле с кодировкой UTF-8, чтобы текст на русском языке отображался корректно.
Вставка изображений и настройка путей к ним
Для вставки изображения используется тег <img> с обязательным атрибутом src, в котором указывается путь к файлу. Пример: <img src="images/photo.jpg" alt="Описание">.
Если изображение находится в той же папке, что и HTML-файл, достаточно указать имя файла: src="photo.jpg". При размещении изображения в подкаталоге путь указывается относительно HTML-файла: src="images/photo.jpg".
Для перехода на уровень выше используется ../. Пример: src="../img/photo.jpg" – это путь к файлу, который находится в папке img, расположенной на уровень выше текущего документа.
Ссылки на изображения из интернета указываются полностью: src="https://example.com/image.png". Такой вариант требует подключения к сети при загрузке страницы.
Атрибут alt необходим для текстового описания изображения. Это помогает при недоступности файла и улучшает доступность сайта.
Рекомендуется использовать форматы JPG, PNG или WebP. PNG подходит для изображений с прозрачным фоном, WebP – для уменьшения веса без заметной потери качества.
Имена файлов должны быть без пробелов, лучше использовать строчные латинские буквы и дефисы: my-photo.jpg.
Создание ссылок на другие страницы и сайты
Чтобы добавить ссылку на другую страницу сайта или внешний ресурс, используется тег <a>. Обязательный атрибут – href, в котором указывается путь к нужной странице или полному адресу сайта.
Пример ссылки на другую страницу сайта:
<a href="kontakt.html">Связаться с нами</a>Файл kontakt.html должен находиться в той же папке, что и основной HTML-документ. Если файл находится в другой директории, путь указывается относительно текущего файла:
<a href="pages/kontakt.html">Контакты</a>Пример ссылки на внешний сайт:
<a href="https://example.com">Перейти на сайт</a>Чтобы внешний сайт открывался в новой вкладке, добавьте атрибут target="_blank":
<a href="https://example.com" target="_blank">Открыть в новой вкладке</a>Если нужно, чтобы ссылка выглядела как кнопка или иконка, это делается с помощью CSS, но сам тег остаётся тем же.
Ссылки можно использовать и для скачивания файлов. Для этого добавляется атрибут download:
<a href="docs/instruktsiya.pdf" download>Скачать инструкцию</a>Сохранение файла с нужным расширением
При сохранении HTML-файла в Блокноте важно указать правильное расширение, чтобы браузер распознал его как веб-страницу. Нажмите Файл → Сохранить как….
В поле Имя файла введите название с расширением .html, например: index.html. Обязательно добавьте расширение вручную – Блокнот не делает этого автоматически.
В поле Тип файла выберите Все файлы, иначе Блокнот сохранит файл как .txt, даже если указано .html.
Кодировка должна быть UTF-8, чтобы корректно отображались русские символы. Укажите её в выпадающем списке ниже поля имени файла.
После сохранения дважды щёлкните по файлу – он откроется в браузере. Если отображается текст кода, а не веб-страница, проверьте расширение: оно должно быть именно .html, а не .html.txt.
Открытие HTML-файла в браузере для проверки
После сохранения HTML-файла нужно проверить, как он отображается в браузере. Это позволяет выявить ошибки в структуре или отображении элементов.
- Найти файл в проводнике Windows. Расширение должно быть
.html. - Кликнуть правой кнопкой мыши по файлу.
- Выбрать пункт «Открыть с помощью» и указать нужный браузер, например, Chrome, Firefox или Edge.
Альтернативный способ – перетащить файл в окно браузера.
- Если отображаются теги, а не результат – проверить, что файл сохранён с кодировкой UTF-8 и расширением
.html, а не.txt. - Если браузер показывает пустую страницу – убедиться, что в файле есть содержимое между тегами
<html>и</html>, а также<body>.
Для быстрого доступа можно закрепить файл в браузере или создать ярлык на рабочем столе с привязкой к конкретному браузеру.
Загрузка...
