Как создать простую веб страницу в Блокноте

Соавтор(ы): Команда wikiHow

Вас интересует веб-дизайн? Чтобы попробовать свои силы в создании веб-страниц, необязательно пользоваться сложными программами. Веб-страницу можно создать в Блокноте, предустановленном на компьютерах с Windows. В качестве языка программирования будет использован HTML — HyperText Markup Language (язык гипертекстовой разметки). Вы можете написать HTML-код страницы в Блокноте или любом другом текстовом редакторе, а затем просто сохранить файл как HTML-документ. Этот язык легко изучить, даже если у вас нет навыков программирования. Итак, в нашей статье мы расскажем, как создать простую веб-страницу с помощью Блокнота.

Часть 1

Часть 1 из 4:

Как создать HTML-документ

Загрузить PDF

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/77\/533547-1.jpg\/v4-460px-533547-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/77\/533547-1.jpg\/v4-728px-533547-1.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Нажмите на логотип Windows в нижнем левом углу экрана. На экране появится меню «Пуск».
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0c\/533547-2.jpg\/v4-460px-533547-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0c\/533547-2.jpg\/v4-728px-533547-2.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Введите блокнот в меню «Пуск». Вверху меню появятся результаты поиска.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ee\/533547-3.jpg\/v4-460px-533547-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ee\/533547-3.jpg\/v4-728px-533547-3.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Это голубой значок в виде блокнота верхней части результатов поиска. Откроется Блокнот.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3a\/533547-4.jpg\/v4-460px-533547-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3a\/533547-4.jpg\/v4-728px-533547-4.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Оно находится в верхнем левом углу окна Блокнота.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9b\/533547-5.jpg\/v4-460px-533547-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9b\/533547-5.jpg\/v4-728px-533547-5.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Эта опция находится в открывшемся меню «Файл». Откроется окно «Сохранить как».
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cc\/533547-6.jpg\/v4-460px-533547-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cc\/533547-6.jpg\/v4-728px-533547-6.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Оно находится в нижней части окна; в нем отобразится опция «Текстовые документы (*.txt)». Нажмите на нее, чтобы появилось выпадающее меню.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3c\/533547-7.jpg\/v4-460px-533547-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3c\/533547-7.jpg\/v4-728px-533547-7.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Эта опция находится в выпадающем меню. Теперь файл можно сохранить как HTML-документ.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/28\/533547-8.jpg\/v4-460px-533547-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/28\/533547-8.jpg\/v4-728px-533547-8.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

8
Выберите папку для сохранения. Для этого нажмите на нужную папку на левой панели окна.
- Например, чтобы сохранить документ на рабочем столе, прокрутите вверх и нажмите «Рабочий стол» на левой панели.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d8\/533547-9.jpg\/v4-460px-533547-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d8\/533547-9.jpg\/v4-728px-533547-9.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

9
Введите имя файла и расширение «html». Нажмите на текстовое поле «Имя файла», введите имя файла, а затем введите .html .
- Например, чтобы назвать файл веб-страницы «hello», введите hello.html .
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6d\/533547-10.jpg\/v4-460px-533547-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6d\/533547-10.jpg\/v4-728px-533547-10.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

10
Нажмите Сохранить . Текстовый документ будет сохранен как документ HTML. Теперь можно перейти к созданию структуры веб-страницы.
- Если Блокнот неожиданно закрылся или вы хотите вернуться к документу позже, щелкните правой кнопкой мыши по HTML-файлу и в меню выберите «Изменить».
Реклама

Часть 2

Часть 2 из 4:

Как создать структуру веб-страницы

Загрузить PDF

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/96\/533547-11.jpg\/v4-460px-533547-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/96\/533547-11.jpg\/v4-728px-533547-11.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
Добавьте языковой тег. Первый тег, который нужно добавить в Блокнот, указывает всему документу, что будет использоваться язык HTML. В Блокноте введите следующее:
```
 <!DOCTYPE html> 
 < 
 html 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/30\/533547-12.jpg\/v4-460px-533547-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/30\/533547-12.jpg\/v4-728px-533547-12.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

2
Добавьте теги «head». Этот раздел HTML-документа содержит метаданные веб-страницы. В веб-браузере они не отображаются. Здесь может содержаться такая информация, как имя страницы, таблицы стилей (CSS) , скрипты и так далее. Сейчас просто введите <head> после тега <html>, дважды нажмите ↵ Enter , чтобы вставить пустые строки, а затем введите </head> .
- Каждый HTML-элемент должен находиться между двумя тегами. Когда мы добавляем новый элемент, например тег «<head>», открывающий соответствующий раздел, нам нужно добавить и закрывающий тег. В данном случае это «</head>».
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1c\/533547-13.jpg\/v4-460px-533547-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1c\/533547-13.jpg\/v4-728px-533547-13.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

3
Введите имя страницы. Оно должно находиться внутри раздела «head», так что его нужно ввести между открывающим тегом «<head>» и закрывающим «</head>». Чтобы добавить имя, наберите открывающий тег <title> , затем введите текст (собствнно имя) и сразу за ним добавьте закрывающий тег </title> . Например, если именем вашей страницы будет «Мой сайт», введите следующее:
```
 < 
 title 
 > 
Мой сайт </ 
 title 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/90\/533547-14.jpg\/v4-460px-533547-14.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/90\/533547-14.jpg\/v4-728px-533547-14.jpg","smallWidth":460,"smallHeight":258,"bigWidth":728,"bigHeight":409,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

4
Добавьте теги «body». Все, что будет отображаться на вашей странице в веб-браузере, должно находиться между этими тегами. Под тегом </title> введите:
```
 < 
 body 
 > 
 </ 
 body 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d8\/533547-15.jpg\/v4-460px-533547-15.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d8\/533547-15.jpg\/v4-728px-533547-15.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Последним тегом документа будет закрывающий тег «html», чтобы обозначить конец страницы. Введите </html> под тегом </body>, чтобы закрыть тег HTML.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/37\/533547-16.jpg\/v4-460px-533547-16.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/37\/533547-16.jpg\/v4-728px-533547-16.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

6
Просмотрите HTML-документ. На данном этапе документ должен выглядеть следующим образом:
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
Мой сайт </ 
 title 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 </ 
 body 
 > 
 </ 
 html 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8a\/533547-17.jpg\/v4-460px-533547-17.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8a\/533547-17.jpg\/v4-728px-533547-17.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Для этого нажмите «Файл» и затем «Сохранить» на панели меню. В качестве альтернативы для сохранения документа можно нажать Ctrl + S . Не забывайте чаще сохранять его в процессе работы.

Реклама

Часть 3

Часть 3 из 4:

Как добавить элементы веб-страницы

Загрузить PDF

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e7\/533547-18.jpg\/v4-460px-533547-18.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e7\/533547-18.jpg\/v4-728px-533547-18.jpg","smallWidth":460,"smallHeight":258,"bigWidth":728,"bigHeight":409,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Запомните, что все элементы веб-страницы должны находиться между тегами «body». Любой элемент — будь то заголовок или абзац — нужно вводить после тега <body> и перед тегом </body>.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2f\/533547-19.jpg\/v4-460px-533547-19.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2f\/533547-19.jpg\/v4-728px-533547-19.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

2
Добавьте основной заголовок сайта. Введите <h1></h1> между тегами «body», а затем введите заголовок внутри тегов <h1></h1>. Например, чтобы создать страницу с заголовком «Добро пожаловать», введите следующее:
```
 < 
 h1 
 > 
Добро пожаловать </ 
 h1 
 > 
```
- Используйте теги от <h2></h2> до <h6></h6>, чтобы создать заголовки меньшего размера.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b1\/533547-20.jpg\/v4-460px-533547-20.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b1\/533547-20.jpg\/v4-728px-533547-20.jpg","smallWidth":460,"smallHeight":258,"bigWidth":728,"bigHeight":408,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

3
Добавьте текст на страницу. Введите теги абзаца <p></p>, а затем введите текст внутри этих тегов. Результат должен выглядеть примерно так:
```
 < 
 p 
 > 
Это мой сайт. Голосуйте за меня на выборах! </ 
 p 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1c\/533547-21.jpg\/v4-460px-533547-21.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1c\/533547-21.jpg\/v4-728px-533547-21.jpg","smallWidth":460,"smallHeight":258,"bigWidth":728,"bigHeight":409,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

4
Вставьте разрыв абзаца. Чтобы добавить пустые строки между абзацами или заголовками, введите <br> после закрывающего тега строки. Например, чтобы создать разрыв строки после абзаца, введите следующее:
```
 < 
 p 
 > 
Это мой сайт. Голосуйте за меня на выборах! </ 
 p 
 >< 
 br 
 > 
 < 
 p 
 > 
А еще я люблю картошку </ 
 p 
 > 
```
- После первого тега <br> можно ввести такой же тег, чтобы добавить еще один разрыв строки, то есть между двумя абзацами будут две пустые строки.
- Для разрыва абзаца закрывающий тег не нужен.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/58\/533547-22.jpg\/v4-460px-533547-22.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/58\/533547-22.jpg\/v4-728px-533547-22.jpg","smallWidth":460,"smallHeight":258,"bigWidth":728,"bigHeight":409,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

5
Отформатируйте текст. Полужирным, наклонным или подчеркнутым, а также надстрочным и подстрочным можно сделать слово, предложение или блок текста, если они находится между тегами абзаца. Для форматирования используйте следующие теги:
```
 < 
 b 
 > 
Полужирный текст </ 
 b 
 > 
 < 
 i 
 > 
Наклонный текст </ 
 i 
 > 
 < 
 u 
 > 
Подчеркнутый текст </ 
 u 
 > 
 < 
 sub 
 > 
Подстрочный текст </ 
 sub 
 > 
 < 
 sup 
 > 
Надстрочный текст </ 
 sup 
 > 
```
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/01\/533547-23-1.jpg\/v4-460px-533547-23-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/01\/533547-23-1.jpg\/v4-728px-533547-23-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

6
Добавьте на страницу изображение. Чтобы изображение можно было добавить на веб-страницу, оно должно быть загружено на сервер в интернете, и вам нужно знать веб-адрес этого изображения. Наберите <img src= , затем адрес изображения в кавычках. В конце добавьте закрывающий значок > . Вот пример, как это должно выглядеть:
```
 < 
 img 
 src 
 = 
 "https://www.mywebsite.me/images/me.jpg" 
 > 
```
- Если изображение хранится не в интернете, а на вашем компьютере, вместо веб-адреса можете использовать путь к его местоположению. Например: <img src="C:\Users\username\Pictures\me.jpg">
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/45\/533547-24-1.jpg\/v4-460px-533547-24-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/45\/533547-24-1.jpg\/v4-728px-533547-24-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

7
Добавьте на страницу ссылку. Ссылки — важнейший аспект веб-разработки. Они позволяют пользователям переходить с одной страницы на другую. Чтобы добавить ссылку, вам нужно знать адрес веб-страницы, на которую она будет вести. Наберите <a href= , затем веб-адрес нужной страницы в кавычках. В конце добавьте закрывающий значок > . Затем сразу за ним наберите текст ссылки и закрывающий тег </a> . Вот пример того, как добавить на веб-страницу ссылку:
```
 < 
 a 
 href 
 = 
 "https://www.mywebsite.me/ipage2" 
 > 
Вторая страница </ 
 a 
 > 
```
- Вы также можете добавить ссылку на адрес электронной почты или использовать вместо текста ссылки изображение.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fa\/533547-23.jpg\/v4-460px-533547-23.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fa\/533547-23.jpg\/v4-728px-533547-23.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

8
Просмотрите внешний вид веб-страницы. Хотя элементы веб-страницы могут различаться, документ должен выглядеть примерно так:
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
Мой сайт </ 
 title 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
Добро пожаловать! </ 
 h1 
 > 
 < 
 a 
 href 
 = 
 "https://www.mywebsite.me/ipage2" 
 > 
Вторая страница </ 
 a 
 > 
 < 
 img 
 src 
 = 
 "https://www.mywebsite.me/images/me.jpg" 
 > 
 < 
 p 
 > 
Это мой сайт. Надеюсь, он вам понравится! </ 
 p 
 > 
 < 
 p 
 >< 
 b 
 > 
Полужирным текстом выделены главные моменты. </ 
 b 
 ></ 
 p 
 > 
 < 
 p 
 >< 
 i 
 > 
Курсив выглядит зловеще. </ 
 i 
 ></ 
 p 
 > 
 </ 
 body 
 > 
 </ 
 html 
 > 
```
Реклама