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

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

1

Откройте меню «Пуск»

. Нажмите на логотип Windows в нижнем левом углу экрана. На экране появится меню «Пуск».
2

Найдите Блокнот. Введите блокнот в меню «Пуск». Вверху меню появятся результаты поиска.
3

Щелкните по Блокнот. Это голубой значок в виде блокнота верхней части результатов поиска. Откроется Блокнот.
4

Откройте меню Файл. Оно находится в верхнем левом углу окна Блокнота.
5

Нажмите Сохранить как…. Эта опция находится в открывшемся меню «Файл». Откроется окно «Сохранить как».
6

Откройте выпадающее меню «Тип файла». Оно находится в нижней части окна; в нем отобразится опция «Текстовые документы (*.txt)». Нажмите на нее, чтобы появилось выпадающее меню.
7

Щелкните по Все файлы. Эта опция находится в выпадающем меню. Теперь файл можно сохранить как HTML-документ.
8
Выберите папку для сохранения. Для этого нажмите на нужную папку на левой панели окна.
- Например, чтобы сохранить документ на рабочем столе, прокрутите вверх и нажмите «Рабочий стол» на левой панели.
9
Введите имя файла и расширение «html». Нажмите на текстовое поле «Имя файла», введите имя файла, а затем введите .html.
- Например, чтобы назвать файл веб-страницы «hello», введите hello.html.
10
Нажмите Сохранить. Текстовый документ будет сохранен как документ HTML. Теперь можно перейти к созданию структуры веб-страницы.
- Если Блокнот неожиданно закрылся или вы хотите вернуться к документу позже, щелкните правой кнопкой мыши по HTML-файлу и в меню выберите «Изменить».
Реклама

1
Добавьте языковой тег. Первый тег, который нужно добавить в Блокнот, указывает всему документу, что будет использоваться язык HTML. В Блокноте введите следующее:
```
 <html> 
```
2
Добавьте теги «head». Этот раздел HTML-документа содержит метаданные веб-страницы. В веб-браузере они не отображаются. Здесь может содержаться такая информация, как имя страницы, таблицы стилей (CSS), скрипты и так далее. Сейчас просто введите после тега , дважды нажмите ↵ Enter, чтобы вставить пустые строки, а затем введите .
- Каждый HTML-элемент должен находиться между двумя тегами. Когда мы добавляем новый элемент, например тег «», открывающий соответствующий раздел, нам нужно добавить и закрывающий тег. В данном случае это «».
3
Введите имя страницы. Оно должно находиться внутри раздела «head», так что его нужно ввести между открывающим тегом «» и закрывающим «». Чтобы добавить имя, наберите открывающий тег </kbd>, затем введите текст (собствнно имя) и сразу за ним добавьте закрывающий тег <kbd>. Например, если именем вашей страницы будет «Мой сайт», введите следующее:
```
<title>Мой сайтtitle> 
```
4
Добавьте теги «body». Все, что будет отображаться на вашей странице в веб-браузере, должно находиться между этими тегами. Под тегом введите:
```
<body> body> 
```
5

Закройте тег языка HTML. Последним тегом документа будет закрывающий тег «html», чтобы обозначить конец страницы. Введите под тегом , чтобы закрыть тег HTML.
6
Просмотрите HTML-документ. На данном этапе документ должен выглядеть следующим образом:
```
 <html> <head> <title>Мой сайтtitle> head> <body> body> html> 
```
7

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

Реклама

1

Запомните, что все элементы веб-страницы должны находиться между тегами «body». Любой элемент — будь то заголовок или абзац — нужно вводить после тега и перед тегом .
2
Добавьте основной заголовок сайта. Введите между тегами «body», а затем введите заголовок внутри тегов . Например, чтобы создать страницу с заголовком «Добро пожаловать», введите следующее: <h1>Добро пожаловатьh1> Используйте теги от до , чтобы создать заголовки меньшего размера.
3
Добавьте текст на страницу. Введите теги абзаца , а затем введите текст внутри этих тегов. Результат должен выглядеть примерно так:
```
Это мой сайт. Голосуйте за меня на выборах!p> 
```
4
Вставьте разрыв абзаца. Чтобы добавить пустые строки между абзацами или заголовками, введите после закрывающего тега строки. Например, чтобы создать разрыв строки после абзаца, введите следующее:
```
 Это мой сайт. Голосуйте за меня на выборах!p> А еще я люблю картошкуp> 
```
- После первого тега
 
 можно ввести такой же тег, чтобы добавить еще один разрыв строки, то есть между двумя абзацами будут две пустые строки.
- Для разрыва абзаца закрывающий тег не нужен.
5
Отформатируйте текст. Полужирным, наклонным или подчеркнутым, а также надстрочным и подстрочным можно сделать слово, предложение или блок текста, если они находится между тегами абзаца. Для форматирования используйте следующие теги:
```
Полужирный текстb> Наклонный текстi> Подчеркнутый текстu> Подстрочный текстsub> Надстрочный текстsup> 
```
6
Добавьте на страницу изображение. Чтобы изображение можно было добавить на веб-страницу, оно должно быть загружено на сервер в интернете, и вам нужно знать веб-адрес этого изображения. Наберите , затем адрес изображения в кавычках. В конце добавьте закрывающий значок >. Вот пример, как это должно выглядеть: <img src="https://www.mywebsite.me/images/me.jpg"> Если изображение хранится не в интернете, а на вашем компьютере, вместо веб-адреса можете использовать путь к его местоположению. Например:
7
Добавьте на страницу ссылку. Ссылки — важнейший аспект веб-разработки. Они позволяют пользователям переходить с одной страницы на другую. Чтобы добавить ссылку, вам нужно знать адрес веб-страницы, на которую она будет вести. Наберите , затем веб-адрес нужной страницы в кавычках. В конце добавьте закрывающий значок >. Затем сразу за ним наберите текст ссылки и закрывающий тег . Вот пример того, как добавить на веб-страницу ссылку: <a href="https://www.mywebsite.me/ipage2">Вторая страницаa> Вы также можете добавить ссылку на адрес электронной почты или использовать вместо текста ссылки изображение.

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

 <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>

1

Сохраните документ. Для этого нажмите Ctrl+S. Теперь, когда вы откроете документ HTML, отобразится последняя версия вашей веб-страницы.
2

Щелкните правой кнопкой мыши по HTML-документу. Откроется меню.
3

Выберите Открыть с помощью. Эта опция находится в меню. Откроется новое меню.
4

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

 <html>

<title>Мой сайтtitle>

<body>  body>

 <html>  <head> <title>Мой сайтtitle> head>  <body>  body>  html>

<h1>Добро пожаловатьh1>

<p>Это мой сайт. Голосуйте за меня на выборах!p>

<p> Это мой сайт. Голосуйте за меня на выборах!p><br> <p>А еще я люблю картошкуp>

<b>Полужирный текстb> <i>Наклонный текстi> <u>Подчеркнутый текстu> <sub>Подстрочный текстsub> <sup>Надстрочный текстsup>

<img src="https://www.mywebsite.me/images/me.jpg">

<a href="https://www.mywebsite.me/ipage2">Вторая страницаa>

 <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>