Skip to main content

Создание новой веб-страницы с помощью Блокнота

Создание сайта на html. Часть 1 (Июнь 2026)

Создание сайта на html. Часть 1 (Июнь 2026)
Anonim

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

01 из 07

Размещение файлов в новой папке

Чтобы создать новый сайт в «Блокноте», сначала создайте отдельную папку для его хранения. Как правило, вы сохраняете свои веб-страницы в папке с именем HTML в папке «Мои документы», но вы можете хранить их там, где хотите.

  1. ОткройМои документы окно.
  2. Нажмите файл > новый > Папка.
  3. Назовите папку мой веб-сайт.

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

02 из 07

Сохранить страницу как HTML

Как и при имени каталога, при сохранении страницы используйте все строчные буквы и пробелы или специальные символы в имени файла.

  1. В Блокноте нажмите файл а потом Сохранить как.
  2. Перейдите в папку, в которой вы сохраняете файлы своего сайта.
  3. Изменить Сохранить как тип выпадающего меню Все файлы (*.*).
  4. Назовите файл. В этом руководстве используется имя pets.htm.

03 из 07

Начало записи веб-страницы

Первое, что вы должны ввести в свой документ HTML-документа «Блокнот», - DOCTYPE. Это говорит браузерам, какой тип HTML ожидать.

Объявление doctype не является тегом. Он сообщает компьютеру, что документ HTML5 прибывает. Он находится в верхней части каждой страницы HTML5 и принимает эту форму:

Когда у вас есть DOCTYPE, вы можете запустить свой HTML. Введите как начальный тег, так и конечный тег и оставьте некоторое пространство для содержимого вашего веб-страницы. Документ «Блокнот» должен выглядеть следующим образом:

04 из 07

Создание заголовка для вашей веб-страницы

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

Как и в тегах html, оставьте некоторое пространство между ними, чтобы у вас было место для добавления информации о голове.

05 из 07

Добавить название страницы в разделе заголовка

Заголовок вашей веб-страницы - это текст, который отображается в окне браузера. Это также то, что написано в закладках и избранных, когда кто-то сохраняет ваш сайт. Сохраните текст заголовка между тегами заголовка. Он не появится на самой веб-странице, только в верхней части браузера.

Эта страница примера называется «McKinley, Shasta и другие домашние животные».

Мак-Кинли, Шаста и другие домашние животные

Неважно, как долго ваш заголовок или он охватывает несколько строк в вашем HTML, но более короткие заголовки легче читать, а некоторые браузеры обрезают длинные в окне браузера.

06 из 07

Основной элемент вашей веб-страницы

Тело вашей веб-страницы хранится в тегах тела. Он должен появиться после заголовков, но до конечного html-тега. Здесь вы помещаете текст, заголовки, подзаголовки, изображения и графику, ссылки и все остальные материалы. Это может быть так долго, как вам нравится.

Оставьте дополнительное пространство между начальными и конечными телами тела.

Этот же формат можно использовать для написания вашей веб-страницы в «Блокноте».

07 из 07

Создание папки изображений

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

  1. Открой Мои документы окно.
  2. Переход на мой веб-сайт папка.
  3. Нажмите файл > новый > Папка.
  4. Назовите папку изображений.

Сохраните все изображения для своего веб-сайта в папке с изображениями, чтобы вы могли их найти позже. Это позволяет легко загружать их, когда вам нужно.