Як створити просту веб сторінку в блокноті: 15 кроків

З цієї статті ви дізнаєтеся, як створити просту веб-сторінку в блокноті (на комп'ютері з Windows). В якості мови програмування буде використаний HTML.

Частина1З 4:

Як створити HTML-документ

Відкрийте меню " Пуск»
. Натисніть на логотип Windows в нижньому лівому кутку екрану.
Знайдіть Блокнот. введіть блокнот в меню "Пуск". Вгорі меню з'являться результати пошуку.
Клацніть поБлокнот . це синій значок у верхній частині результатів пошуку. Відкриється Блокнот.
Відкрийте менюФайл . воно знаходиться у верхньому лівому кутку вікна Блокнота.
НатиснітьЗберегти як . ця опція знаходиться в меню. Відкриється вікно "Зберегти як".
Відкрийте меню «Тип файлу». воно знаходиться в нижній частині вікна; в ньому відобразиться опція «текстові документи (*.txt)».
Клацніть поВсі файли . ця опція знаходиться в меню. Тепер файл можна зберегти як HTML-документ.
Виберіть папку для збереження. для цього натисніть на потрібну папку на лівій панелі вікна.
- Наприклад, щоб зберегти документ на робочому столі, прокрутіть вгору і натисніть «робочий стіл» на лівій панелі.
Введіть ім'я та розширення «html». Натисніть на текстове поле "Ім'я файлу", введіть ім'я файлу, а потім введіть .html .
- Наприклад, щоб назвати файл веб-сторінки «hello», введітьhello.html .
НатиснітьЗберегти . текстовий документ буде збережений як документ HTML. Тепер можна перейти до створення структури веб-сторінки.
- Якщо Блокнот несподівано закрився або ви хочете повернутися до документа пізніше, клацніть правою кнопкою миші по HTML-файлу і в меню виберіть «Змінити».

Частина2З 4:

Як створити структуру веб-сторінки

Додайте Мовний тег. Перший тег, який потрібно додати в Блокнот, вказує всьому документу, що буде використовуватися мова HTML. В Блокноті введіть наступне:
```
&#lt;!DOCTYPE html&#gt;
&#lt;Html&#gt;
```
Додайте теги "head". ці теги позначають початок і кінець імені сторінки, яку ви створите на наступному кроці. Зараз просто введіть &#lt;head&#gt; після тега &#Lt; html &#gt;, двічі натисніть ↵ Enter, щоб вставити порожні рядки, а потім введіть &#lt;/head&#gt; .
Введіть ім'я сторінки. воно вводиться між тегами &#lt;title&#gt;&#lt;/title&#gt;, які повинні знаходитися всередині тегів «head». Це ім'я буде відображатися на вкладці браузера, коли сторінка буде відкрита. Наприклад, якщо ім'ям вашої сторінки буде «мій сайт», введіть наступне:
```
&#lt;Title&#gt; мій сайт
&#lt;/Title&#gt;
```
Додайте теги "body". Код веб-сторінки буде знаходитися між цими тегами. Під тегом &#lt;/title&#gt; введіть:
```
&#lt;Body&#gt;

&#lt;/Body&#gt;
```
Закрийте тег мови HTML. останнім тегом документа буде закриває тег "html", щоб позначити кінець сторінки. Ввівши &#lt;/html&#gt; під тегом &#lt;/body&#gt;, щоб закрити тег HTML.

Перегляньте HTML-документ. на даному етапі документ повинен виглядати наступним чином:

&#lt;!DOCTYPE html&#gt;
&#lt;Html&#gt;

&#lt;Head&#gt;
&#lt;Title&#gt; мій сайт
&#lt;/Title&#gt;
&#lt;/Head&#gt;

&#lt;Body&#gt;

&#lt;/Body&#gt;

&#lt;/Html&#gt;

Збережіть документ. для цього натисніть Ctrl + S . Тепер можна перейти до додавання елементів сторінки, таких як абзаци і заголовки.

Частина3З 4:

Як додати елементи веб-сторінки

Запам'ятайте, що всі елементи веб-сторінки повинні знаходитися між тегами «body». будь — який елемент — будь то заголовок або абзац-потрібно вводити після тегу &#lt;body&#gt; і перед тегом &#lt;/body&#gt;.
Додайте основний заголовок сайту. введіть &#lt;h1&#gt;&#lt;/h1&#gt; між тегами «body», а потім введіть заголовок всередині тегів &#lt;h1&#gt;&#lt;/h1&#gt;. Наприклад, щоб створити сторінку з заголовком «Ласкаво просимо», введіть наступне:
```
&#lt;H1&#gt; Ласкаво просимо
&#lt;/H1&#gt;
```
- Використовуйте теги від &#Lt;h2&#gt;&#lt;/h2&#gt; до &#lt;h6&#gt;&#lt;/h6&#gt;, щоб створити заголовки меншого розміру.
Додайте текст на сторінку. введіть теги абзацу &#lt; p&#gt;&#lt;/p&#gt;, а потім введіть текст всередині цих тегів. Результат повинен виглядати приблизно так:
```
&#lt;P&#gt; це мій сайт. Голосуйте за мене на виборах!
&#lt;/P&#gt;
```
Вставте розрив абзацу. щоб додати порожні рядки між абзацами або заголовками, на рядку введіть &#lt;br&#gt; після закриття тега. Наприклад, щоб створити розрив рядка після абзацу, введіть наступне:
```
&#lt;P&#gt; це мій сайт. Голосуйте за мене на виборах!
&#lt;/P&#gt;&#lt;Br&#gt;
&#lt;P&#gt; а ще я люблю картоплю
&#lt;/P&#gt;
```
- Після першого тегу &#lt;br&#gt; можна ввести такий же тег, щоб додати ще один розрив рядка, тобто між двома абзацами будуть дві порожні рядки.
Відформатуйте текст. напівжирним, похилим або підкресленим, а також надрядковим і підрядковим можна зробити слово, речення або блок тексту, якщо вони знаходиться між тегами абзацу:
```
&#lt;B&#gt; Напівжирний текст
&#lt;/B&#gt;
&#lt;I&#gt; похилий текст
&#lt;/I&#gt;
&#lt;U&#gt; підкреслений текст
&#lt;/U&#gt;
&#lt;Sub&#gt; Підрядковий текст
&#lt;/Sub&#gt;
&#lt;Sup&#gt; Надрядковий текст
&#lt;/Sup&#gt;
```

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

&#lt;!DOCTYPE html&#gt;
&#lt;Html&#gt;

&#lt;Head&#gt;
&#lt;Title&#gt; це мій сайт
&#lt;/Title&#gt;
&#lt;/Head&#gt;

&#lt;Body&#gt;

&#lt;H1&#gt; Ласкаво просимо!
&#lt;/H1&#gt;
&#lt;P&#gt; це мій сайт. Сподіваюся, він вам сподобається!
&#lt;/P&#gt;
&#lt;P&#gt;&#lt;B&#gt; напівжирним текстом виділені головні моменти.
&#lt;/B&#gt;&#lt;/P&#gt;
&#lt;P&#gt;&#lt;I&#gt; похилий текст повинен кидати в тремтіння.
&#lt;/I&#gt;&#lt;/P&#gt;

&#lt;/Body&#gt;
&#lt;/Html&#gt;

Частина4З 4:

Як відкрити веб-сторінку

Збережіть документ. для цього натисніть Ctrl + S . Тепер, коли ви відкриєте документ HTML, відобразиться остання версія вашої веб-сторінки.
Клацніть правою кнопкою миші на HTML-документі. відкриється меню.
ВиберітьВідкрити за допомогою . ця опція знаходиться в меню. Відкриється нове меню.
Виберіть веб-браузер. HTML-документ можна відкрити в будь-якому браузері, тому в меню виберіть бажаний веб-браузер. HTML-документ відкриється у вікні веб-браузера.
Перегляньте веб-сторінку. якщо все нормально, закрийте Блокнот.
- Якщо ви хочете продовжити редагувати HTML-документ, поверніться в Блокнот і внесіть необхідні зміни, не забуваючи регулярно зберігати їх.