path: root/files/uk/learn/html/introduction_to_html/getting_started/index.html

---
title: Початок роботи з HTML
slug: Learn/HTML/Introduction_to_HTML/Getting_started
tags:
  - HTML
  - Мова
  - Основи
  - Розмітка
  - атрибути
  - веб-сторінки
  - для початківців
  - елементи
  - лапки
  - символи
  - теги
  - українською мовою
translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
---
<div>{{LearnSidebar}}</div>

<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>

<p class="summary">У цій статті ми пояснимо найбільш базові поняття HTML — що таке елементи, атрибути та інші терміни, які ви могли чути, і яке завдання вони виконують. Ми покажемо, як побудований елемент HTML і з чого складається типова HTML-сторінка, а також пояснимо інші особливості мови. В процесі навчання ми будемо трохи бавитися з кодом, щоб вам було цікаво!</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Передумови:</th>
   <td>Базове знання комп'ютера, <a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/Installing_basic_software">встановлене основне програмне забезпечення</a>, базове розуміння <a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/Dealing_with_files">роботи з файлами</a>.</td>
  </tr>
  <tr>
   <th scope="row">Мета:</th>
   <td>Отримати базове розуміння мови HTML і попрактикуватися в написанні кількох HTML-елементів.</td>
  </tr>
 </tbody>
</table>

<h2 id="Що_таке_HTML">Що таке HTML?</h2>

<p>{{glossary("HTML")}} (Hypertext Markup Language — мова гіпертекстової розмітки) не є мовою програмування. Це <em>мова розмітки</em>, яка каже браузеру, як відобразити сторінку, яку ви відвідуєте. HTML може бути простим чи складним, залежно від бажання його розробника. HTML складається з серії {{glossary("Element", "елементів")}}, які ви використовуєте для того, щоб вкласти, загорнути чи <em>розмітити</em> частини сторінки, щоб вони мали певний вигляд. {{glossary("Tag", "Теги")}} можуть перетворити частину тексту на посилання на іншу сторінку, виділити її курсивом тощо. Наприклад, візьміть такий рядок тексту:</p>

<p><code>Мій кіт дуже сердитий</code></p>

<p>Якщо ми хочемо, щоб цей рядок був сам по собі, ми можемо вказати, що це параграф (абзац), загорнувши його тегом елементу ({{htmlelement("p")}}):</p>

<pre class="brush: html">&lt;p&gt;Мій кіт дуже сердитий&lt;/p&gt;</pre>

<h2 id="Анатомія_елементу_HTML">Анатомія елементу HTML</h2>

<p>Погляньмо на елемент "параграф" детальніше. </p>

<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>

<p>Основні частини елементу такі:</p>

<ol>
 <li><strong>Початковий тег:</strong> містить назву елементу (в цьому випадку, p), загорнену в <strong>кутові дужки</strong>. Цей тег позначає початок елементу, або місце, де елемент починає діяти. У даному випадку — це місце, де починається параграф. </li>
 <li><strong>Кінцевий тег:</strong> такий самий тег, як і початковий, тільки тепер він містить скісну риску перед назвою елементу. Цей тег позначає місце закінчення елементу — у цьому випадку, місце, де закінчується параграф. Одна з найпоширеніших помилок початківців — це забути поставити кінцевий тег, що може призвести до несподіваних результатів. </li>
 <li><strong>Вміст:</strong> вміст елементу, у цьому випадку — просто текст. </li>
 <li><strong>Елемент:</strong> початковий тег разом із кінцевим тегом та вмістом між ними складають елемент.</li>
</ol>

<h3 id="Активне_навчання_створення_вашого_першого_HTML-елементу">Активне навчання: створення вашого першого HTML-елементу</h3>

<p>Відредагуйте рядок нижче у полі <em>Input, </em> загорнувши його тегами <code>&lt;em&gt; </code>та <code>&lt;/em&gt;</code> (поставте <code>&lt;em&gt;</code> на початку, щоб <em>відкрити елемент</em>, та <code>&lt;/em&gt;</code> в кінці, щоб <em>закрити елемент</em>) — це має виділити рядок курсивом! Ви маєте побачити зміни в полі <em>Output</em>.</p>

<p>Якщо ви зробите помилку, ви можете завжди скинути редагування кнопкою <em>Reset</em>. Якщо ви справді застрягнете, натисніть кнопку <em>Show solution</em>, щоб побачити відповідь.</p>

<div class="hidden">
<h6 id="Playable_code">Playable code</h6>

<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
&lt;textarea id="code" class="input"&gt;This is my text.&lt;/textarea&gt;
&lt;h2&gt;Output&lt;/h2&gt;
&lt;div class="output"&gt;&lt;/div&gt;
&lt;div class="controls"&gt;
  &lt;input id="reset" type="button" value="Reset" /&gt;
  &lt;input id="solution" type="button" value="Show solution" /&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

.input, .output {
  width: 90%;
  height: 2em;
  padding: 10px;
  border: 1px solid #0095dd;
}

button {
  padding: 10px 10px 10px 0;
}
</pre>

<pre class="brush: js">var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function() {
  textarea.value = '&lt;em&gt;This is my text.&lt;/em&gt;';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code', 700, 300) }}</p>

<h3 id="Вкладені_елементи">Вкладені елементи</h3>

<p>Ви можете вкладати одні елементи всередину інших. Це називаєте <strong>вкладенням</strong>. Якщо ми хочемо наголосити, що наш кіт <strong>дуже</strong> сумний, ми можемо загорнути слово "дуже" в елемент {{htmlelement("strong")}}, який означає, що слово особливо сильно наголошене:</p>

<pre class="brush: html">&lt;p&gt;My cat is &lt;strong&gt;very&lt;/strong&gt; grumpy.&lt;/p&gt;</pre>

<p>Важливо пам'ятати правильне вкладення елементів: у прикладі вище ми спершу відкрили елемент {{htmlelement("p")}}, а потім елемент &lt;strong&gt;, що означає, що першим ми маємо закрити внутрішній елемент {{htmlelement("strong")}}, а потім зовнішній {{htmlelement("p")}}. Приклад нижче неправильний:</p>

<pre class="example-bad brush: html">&lt;p&gt;My cat is &lt;strong&gt;very grumpy.&lt;/p&gt;&lt;/strong&gt;</pre>

<p>Елемент має закриватися або всередині, або ззовні іншого елемента. Якщо кінцевий тег зовнішнього елемента іде перед кінцевим тегом внутрішнього елемента, ваш браузер спробує здогадатися, що ви хотіли цим сказати, і результати цього можуть бути неочікуваними. Тому не робіть так!</p>

<h3 id="Блокові_та_рядкові_елементи">Блокові та рядкові елементи</h3>

<p>Існують дві важливі категорії елементів у HTML, про які вам слід знати — блокові та рядкові.</p>

<ul>
 <li>Блокові елементи утворюють блок на сторінці — вони розміщуються з нового рядка, незалежно від того, який елемент був перед ними, і кожен наступний після них елемент також буде розміщуватися у новому рядку. Блокові елементи найчастіше є структурними складовими сторінки, які представляють, наприклад, параграфи (абзаци), списки, меню навігації тощо. Блокові елементи не можуть вкладатися в рядковий елемент, але можуть вкладатися в інший блоковий елемент.</li>
 <li>Рядкові елементи розміщують в блокових елементах і вони займають лише невеликі частини документу, а не цілі параграфи чи інші блоки. Рядковому елементу не потрібно починатися з нового рядка, зазвичай їх розміщують всередині параграфів, наприклад, посилання {{htmlelement("a")}} чи виділення {{htmlelement("em")}} та {{htmlelement("strong")}}.</li>
</ul>

<p>Візьміть такий приклад:</p>

<pre><code>&lt;em&gt;перший&lt;/em&gt;&lt;em&gt;другий&lt;/em&gt;&lt;em&gt;третій&lt;/em&gt;

&lt;p&gt;четвертий&lt;/p&gt;&lt;p&gt;п'ятий&lt;/p&gt;&lt;p&gt;шостий&lt;/p&gt;</code></pre>

<p>{{htmlelement("em")}} є рядковим елементом, тому перші три елементи розміщують в одному рядку, без відстаней між ними. Натомість {{htmlelement("p")}} є блоковим елементом, він розміщується з нового рядка і має відстані над і під ним (ці відстані визначаються у стиляхt <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS</a>, які браузер за замовчанням застосовує до параграфів).</p>

<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200) }}</p>

<div class="note">
<p><strong>Примітка</strong>: HTML5 пропонує інший підхід до визначення категорій елементів (див. <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Element content categories</a>). Хоча нові категорії є більш точними, ніж ті, про які йшлося вище, вони також є значно складнішими для розуміння, ніж "блокові" і "рядкові". Тому ми будемо вживати саме ці дві категорії. </p>
</div>

<div class="note">
<p><strong>Примітка</strong>: ви можете знайти корисні посилання на перелік усіх блокових та рядкових елементів — див. <a href="/en-US/docs/Web/HTML/Block-level_elements">Block-level elements</a> та <a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a>.</p>
</div>

<h3 id="Порожні_елементи">Порожні елементи</h3>

<p>Не всі елементи утворюються за шаблоном початковий тег, вміст, кінцевий тег. Деякі елементи мають лише один тег, який зазвичай вставляє щось на певне місце в документі. Це, наприклад, {{htmlelement("img")}}, який вставляє зображення на те місце, куди він поставлений:</p>

<pre class="brush: html">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"&gt;</pre>

<p>Такий вигляд він має на сторінці:</p>

<p>{{ EmbedLiveSample('Empty_elements', 700, 300) }}</p>

<h2 id="Атрибути">Атрибути</h2>

<p>Елементи також можуть мати атрибути, які мають такий вигляд: </p>

<p><img alt='&amp;lt;p class="editor-note">My cat is very grumpy&amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>

<p>Атрибути містять додаткову інформацію про елемент, яка не відображається в самому контенті. У прикладі вище <code>class</code> це <em>ім'я</em> атрибута, а <code>editor-note</code> — це <em>значення</em> атрибута. Атрибут <code>class</code> дозволяє надати елементу певний ідентифікатор, який пізніше можна використати для того, щоб доступитися до цього елемента і змінити його стиль.</p>

<p>Атрибут завжди повинен мати:</p>

<ol>
 <li>Пробіл між ім'ям атрибута і назвою елементу (або попереднім атрибутом, якщо такий є).</li>
 <li>Ім'я атрибута, за яким іде знак дорівнює.</li>
 <li>Значення атрибута, загорнене в прямі лапки.</li>
</ol>

<h3 id="Активне_навчання_додавання_атрибута_до_елемента">Активне навчання: додавання атрибута до елемента</h3>

<p>Поглянемо на інший елемент — {{htmlelement("a")}} (від anchor — "якір"), який робить гіперпосиланням текст, загорнений в нього. Цей елемент може мати кілька атрибутів, наприклад: </p>

<ul>
 <li><code>href</code>: значення цього атрибута визначає веб-адресу, куди саме буде вести посилання. Наприклад, <code>href="https://www.mozilla.org/"</code>.</li>
 <li><code>title</code>: цей атрибут містить додаткову інформацію про посилання, а саме назву сторінки, на яку веде посилання. Наприклад, <code>title="The Mozilla homepage"</code>. Ця назва буде з'являтися у вигляді підказки при наведенні курсором на посилання. </li>
 <li><code>target</code>: цей атрибут визначає контекст переглядання сторінки в браузері. Наприклад, <code>target="_blank"</code> відобразить посилання в новій вкладці. Якщо ви хочете відкривати посилання в тій самій вкладці, просто опустіть цей атрибут.</li>
</ul>

<p>Відредагуйте рядок нижче в полі <em>Input,</em>так щоб він став посиланням на ваш улюблений сайт. Спочатку додайте елемент <code>&lt;a&gt;</code>, потім атрибути <code>href</code> і <code>title</code>. Насамкінець вкажіть значення атрибута <code>target, </code>так щоб посилання відкривалося в новій вкладці. Ви побачите свої зміни в полі <em>Output</em>. Ви маєте побачити посилання, яке має відображати заголовок (title) при наведенні курсору, а при кліку — переходити за адресою, вказаною в атрибуті <code>href</code> element. Пам'ятайте ставити пробіли між іменем елемента та кожним атрибутом. </p>

<p>Ви завжди можете скинути всі зміни кнопкою <em>Reset</em>. Також ви можете подивитися відповідь, натиснувши кнопку <em>Show solution</em>.</p>

<div class="hidden">
<h6 id="Playable_code2">Playable code2</h6>

<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
&lt;textarea id="code" class="input"&gt;&amp;lt;p&amp;gt;A link to my favourite website.&amp;lt;/p&amp;gt;&lt;/textarea&gt;
&lt;h2&gt;Output&lt;/h2&gt;
&lt;div class="output"&gt;&lt;/div&gt;
&lt;div class="controls"&gt;
  &lt;input id="reset" type="button" value="Reset" /&gt;
  &lt;input id="solution" type="button" value="Show solution" /&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

.input, .output {
  width: 90%;
  height: 2em;
  padding: 10px;
  border: 1px solid #0095dd;
}

button {
  padding: 10px 10px 10px 0;
}
</pre>

<pre class="brush: js">var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function() {
  textarea.value = '&lt;p&gt;A link to my &lt;a href="<code>https://www.mozilla.org/</code>" title="The Mozilla homepage" target="_blank"&gt;favourite website&lt;/a&gt;.&lt;/p&gt;';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code2', 700, 300) }}</p>

<h3 id="Булеві_атрибути">Булеві атрибути</h3>

<p>Іноді ви можете побачити в коді лише назву атрибута, без вказаного значення. Це цілком нормальні атрибути, вони називаються булевими. Вони мають лише одне значення, зазвичай таке ж саме, як і назва самого атрибута. Для прикладу візьмемо атрибут {{htmlattrxref("disabled", "input")}}, який робить поля форми неактивними (засіреними), щоб користувачі не могли їх заповнити. </p>

<pre>&lt;input type="text" disabled="disabled"&gt;</pre>

<p>Скорочений запис цілком може мати такий вигляд (ми також додали активне поле для кращого розуміння): </p>

<pre class="brush: html">&lt;input type="text" disabled&gt;

&lt;input type="text"&gt;
</pre>

<p>Обидва записи дадуть такий результат: </p>

<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100) }}</p>

<h3 id="Опускання_лапок_навколо_значень_атрибутів">Опускання лапок навколо значень атрибутів</h3>

<p>Іноді в мережі ви можете побачити багато різних прикладів дивної розмітки, наприклад, значення атрибутів, записані без лапок. Хоча за деяких обставин такий запис є прийнятним, в інших випадках він може поламати розмітку. Наприклад, у нашому посиланні з прикладу вище ми можемо записати атрибут <code>href</code> так:</p>

<pre>&lt;a href=<code>https://www.mozilla.org/</code>&gt;favourite website&lt;/a&gt;</pre>

<p>Однак, якщо ми додамо другий атрибут <code>title</code>, розмітка порушиться:</p>

<pre class="brush: html">&lt;a href=<code>https://www.mozilla.org/</code> title=The Mozilla homepage&gt;favourite website&lt;/a&gt;</pre>

<p>Таку розмітку браузер розуміє неправильно, вважаючи, що <code>title</code> — це насправді три атрибути: атрибут "title" зі значенням "The" і два інші атрибути булевого типу, <code>Mozilla </code>і <code>homepage</code>. Така поведінка не є очікуваною і може призвести до помилок, як показано в прикладі нижче. Спробуйте навести курсор на текст, щоб подивитися, який текст у заголовку. </p>

<p>{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100) }}</p>

<p>Ми радимо завжди писати атрибути в лапках, це дозволяє уникнути багатьох проблем і робить код більш читабельним. </p>

<h3 id="Лапки_подвійні_чи_одинарні">Лапки подвійні чи одинарні?</h3>

<p>У цій статті всі значення атрибутів загорнені в звичайні прямі лапки. Проте іноді ви можете побачити, що значення загортається прямими апострофами на початку і в кінці (одинарні лапки). Вживання перших і других в HTML є питанням смаку, ви можете сміливо використовувати ті лапки, які зручно. Обидва записи будуть рівноцінними.</p>

<pre class="brush: html">&lt;a href="http://www.example.com"&gt;A link to my example.&lt;/a&gt;

&lt;a href='http://www.example.com'&gt;A link to my example.&lt;/a&gt;</pre>

<p>Однак, не можна змішувати лапки різного типу в одному записі. Наприклад, такий запис є неправильним:</p>

<pre class="brush: html">&lt;a href="http://www.example.com'&gt;A link to my example.&lt;/a&gt;</pre>

<p>Якщо ви використали лапки одного типу в записі, всередину ви можете вкласти лапки іншого типу. Наприклад, тут апостроф вживається всередині значення в подвійних лапках:</p>

<pre class="brush: html">&lt;a href="http://www.example.com" title="Isn't this fun?"&gt;A link to my example.&lt;/a&gt;</pre>

<p>Для вкладення лапок того самого типу потрібно користуватися спеціальними символами, про які піде мова нижче.</p>

<h2 id="Анатомія_HTML-документу">Анатомія HTML-документу</h2>

<p>Все зазначене вище є основами HTML, але окремо взяті елементи самі по собі мало на що здатні. Тепер ми поглянемо на те, як окремі елементи формують цілу веб-сторінку:</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;My test page&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;This is my page&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>Тут ми маємо:</p>

<ol>
 <li><code>&lt;!DOCTYPE html&gt;</code>: Доктайп (тип документу). В ті часи, коли HTML тільки зароджувався (близько 1991/2), доктайпы (doctypes) використовувалися як посилання на набір правил, яким HTML-сторінка повинна була слідувати, щоб вважатись написаною хорошим HTML-кодом, <span id="result_box" lang="uk"><span>що може означати автоматичну перевірку помилок та інші</span> <span>корисні речі.</span> <span>Доктайп приблизно такий вигляд</span></span>:

  <pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
  <span id="result_box" lang="uk"><span>Проте в наші дні ніхто справді не дбає про них, і вони насправді є лише історичним артефактом, який потрібно включити в документ, щоб той правильно працював</span></span> . <code>&lt;!DOCTYPE html&gt;</code> <span id="result_box" lang="uk"><span>це найкоротший рядок символів, який вважається валідним доктайпом;</span> <span>це все, що вам дійсно потрібно знати</span></span>.</li>
 <li><code>&lt;html&gt;&lt;/html&gt;</code>: Елемент {{htmlelement("html")}}. Цей елемент огортає весь зміст (контент) <span id="result_box" lang="uk"><span>на всій сторінці, іноді його називають кореневим (root) елементом.</span></span></li>
 <li><code>&lt;head&gt;&lt;/head&gt;</code>: Елемент {{htmlelement("head")}}. <span id="result_box" lang="uk"><span>Цей елемент діє як контейнер для всього матеріалу, який ви хочете включити в сторінку HTML, але який не є вмістом, що ви надаєте для перегляду відвідувачам вашої сторінки.</span> <span>Він включає в себе такі речі, як ключові слова та опис сторінки, які ви хочете відобразити в результатах пошуку, CSS, щоб стилізувати вміст сторінки, оголошення підтримуваного набору символів тощо.</span> <span>Ви дізнаєтеся більше про це в наступній статті цієї серії.</span></span></li>
 <li><code>&lt;meta charset="utf-8"&gt;</code>: <span id="result_box" lang="uk"><span>Цей елемент встановлює в якості символьного кодування для вашого документу UTF-8, що включає більшість символів з переважної більшості письмових мов людей.</span> <span>По суті, це дає змогу обробляти будь-який текстовий вміст, який ви можете додати до документу.</span> <span>Немає причин не встановлювати таке кодування, і це допоможе уникнути деяких проблем пізніше.</span></span></li>
 <li><code>&lt;title&gt;&lt;/title&gt;</code>: Елемент {{htmlelement("title")}}. <span id="result_box" lang="uk"><span>Цей елемент встановлює назву вашої сторінки, що є заголовком, який відображається на вкладці веб-браузера, на якій завантажується сторінка, і використовується для опису сторінки під час додавання/уподобання її.</span></span></li>
 <li><code>&lt;body&gt;&lt;/body&gt;</code>: Елемент {{htmlelement("body")}}. <span id="result_box" lang="uk"><span>Цей елемент містить <em>весь</em> контент, який ви хочете показати веб-користувачам під час відвідування вашої сторінки, незалежно від того, чи це є текст, зображення, відео, ігри, відтворювані звукові доріжки тощо.</span></span></li>
</ol>

<h3 id="Активне_навчання_додавання_деяких_функцій_у_документ_HTML"><span id="result_box" lang="uk"><span>Активне навчання: додавання деяких функцій у документ HTML</span></span></h3>

<p><span id="result_box" lang="uk"><span>Якщо ви хочете поекспериментувати з написанням HTML-коду на вашому локальному комп'ютері, ви можете зробити наступне:</span></span></p>

<ol>
 <li><span class="short_text" id="result_box" lang="uk"><span>Скопіюйте наведений вище приклад HTML сторінки</span></span>.</li>
 <li><span class="short_text" id="result_box" lang="uk"><span>Створіть новий файл у текстовому редакторі</span></span>.</li>
 <li><span class="short_text" id="result_box" lang="uk"><span>Вставте код у новий текстовий файл</span></span>.</li>
 <li>Збережіть файл як <code>index.html</code>.</li>
</ol>

<div class="note">
<p><strong>Примітка</strong>: Ви також можете знайти цей основний HTML шаблон на <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p>
</div>

<p><span id="result_box" lang="uk"><span>Тепер ви можете відкрити цей файл у веб-браузері, щоб побачити, як має вигляд відображення вірного коду, а потім відредагувати код та оновити веб-браузер, щоб побачити результат.</span> <span>Спочатку це матиме такий вигляд:</span></span></p>

<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;"> <span id="result_box" lang="uk"><span>В цій вправі ви можете редагувати код локально на своєму комп'ютері, як зазначено вище, або можете редагувати його в запропонованому редакторі нижче (у вікні редактора </span></span>в цьому прикладі <span lang="uk"><span>показано лише зміст елемента</span></span> {{htmlelement("body")}}) Спробуйте зробити наступне:</p>

<ul>
 <li>За відкритим тегом елемента {{htmlelement("body")}} додайте головний заголовок для документу. Він повинен бути загорнутий поміж відкриваючого тега <code>&lt;h1&gt;</code> і закриваючого тега <code>&lt;/h1&gt;</code>.</li>
 <li><span id="result_box" lang="uk"><span>Відредагуйте вміст параграфу (абзацу) та додайте текст про те, що вас цікавить.</span></span></li>
 <li><span id="result_box" lang="uk"><span>Зробіть важливі слова виділеними жирним шрифтом, обернувши їх у відкриваючий тег </span></span><code>&lt;strong&gt;</code> і закриваючий тег <code>&lt;/strong&gt;</code>.</li>
 <li>Додайте посилання до свого абзацу, як <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">це було описано раніше в статті</a>.</li>
 <li>Додайте зображення в свій документ перед абзацем, як <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">це було описано раніше в статті</a>. Ви можете вважати себе крутим хакером, якщо зможете використати іншу картинку (з власного комп'ютера або з Інтернету).</li>
</ul>

<p><span id="result_box" lang="uk"><span>Якщо ви зробите помилку, ви завжди можете скинути її за допомогою кнопки </span></span><em>Reset</em>. <span id="result_box" lang="uk"><span>Якщо ви дійсно заплутались, натисніть кнопку</span></span> <em>Show solution</em>, щоб побачити відповідь.</p>

<div class="hidden">
<h6 id="Playable_code3">Playable code3</h6>

<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
&lt;textarea id="code" class="input"&gt;
&amp;lt;p&amp;gt;This is my page&amp;lt;/p&amp;gt;&lt;/textarea&gt;
&lt;h2&gt;Output&lt;/h2&gt;
&lt;div class="output"&gt;&lt;/div&gt;
&lt;div class="controls"&gt;
  &lt;input id="reset" type="button" value="Reset" /&gt;
  &lt;input id="solution" type="button" value="Show solution" /&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

.input, .output {
  width: 90%;
  height: 10em;
  padding: 10px;
  border: 1px solid #0095dd;
}

img {
  max-width: 100%;
}

.output {
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}
</pre>

<pre class="brush: js">var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function() {
  textarea.value = '&lt;p&gt;I really enjoy &lt;strong&gt;playing the drums&lt;/strong&gt;. One of my favourite drummers is Neal Peart, who\
 plays in the band &lt;a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article"&gt;Rush&lt;/a&gt;.\
 My favourite Rush album is currently &lt;a href="http://www.deezer.com/album/942295"&gt;Moving Pictures&lt;/a&gt;.&lt;/p&gt;\
&lt;img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"&gt;';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code3', 700, 600) }}</p>

<h3 id="Пробіли_в_HTML">Пробіли в HTML</h3>

<p><span id="result_box" lang="uk"><span>У наведених вище прикладах, мабуть, ви помітили, що багато пробілів в коді - це взагалі не обов'язково;</span> <span>два наступні фрагменти коду є еквівалентними</span></span>:</p>

<pre class="brush: html">&lt;p&gt;Dogs are silly.&lt;/p&gt;

&lt;p&gt;Dogs        are
         silly.&lt;/p&gt;</pre>

<p><span id="result_box" lang="uk"><span>Незалежно від того, скільки пустого місця ви використовуєте (яке може містити пробіл, а також відступи рядків), HTML-аналізатор зменшує кожен з них до одного пробілу під час відтворення коду.</span> <span>Тож навіщо використовувати так багато пробілів?</span> <span>Відповідь - зручність читання - набагато легше зрозуміти, що відбувається у вашому коді, якщо у вас це чудово відформатовано, а не просто зібрано разом у великий хаос.</span> <span>У нашому HTML-коді кожен вкладений елемент має два пробіли, ніж той, в якому він розміщений всередині.</span> <span>Ви самі визначаєте стиль форматування, який ви використовуєте (скільки пробілів для кожного рівня відступу, наприклад), але ви повинні розглянути можливість використання якогось форматування.</span></span></p>

<h2 id="Посилання_на_обєкт_включаючи_спеціальні_символи_в_HTML"><span id="result_box" lang="uk"><span>Посилання на об'єкт: включаючи спеціальні символи в HTML</span></span></h2>

<p>В HTML символи <code>&lt;</code>, <code>&gt;</code>,<code>"</code>,<code>'</code> та <code>&amp;</code> є спеціальними символами. <span id="result_box" lang="uk"><span>Вони є частинами самого синтаксису HTML, тому як вводити один з цих символів у ваш текст, наприклад, якщо ви дійсно хочете використати амперсанд</span> <span>або знак менше, і не трактувати його як код, як це можуть зробити деякі веб-браузери?</span></span></p>

<p><span id="result_box" lang="uk"><span>В такому випадку ми повинні використовувати символьні посилання - спеціальні коди, що представляють символи, і можуть використовуватися в конкретних обставинах.</span> <span>Кожне посилання символів починається з амперсанда (&amp;), а закінчується двокрапкою (;).</span></span></p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Буквений символ</th>
   <th scope="col">Еквівалентне написання символів</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>&lt;</td>
   <td>&amp;lt;</td>
  </tr>
  <tr>
   <td>&gt;</td>
   <td>&amp;gt;</td>
  </tr>
  <tr>
   <td>"</td>
   <td>&amp;quot;</td>
  </tr>
  <tr>
   <td>'</td>
   <td>&amp;apos;</td>
  </tr>
  <tr>
   <td>&amp;</td>
   <td>&amp;amp;</td>
  </tr>
 </tbody>
</table>

<p><span id="result_box" lang="uk"><span>У наведеному нижче прикладі ви можете побачити два абзаци, які говорять про веб-технології:</span></span></p>

<pre class="brush: html">&lt;p&gt;In HTML, you define a paragraph using the &lt;p&gt; element.&lt;/p&gt;

&lt;p&gt;In HTML, you define a paragraph using the &amp;lt;p&amp;gt; element.&lt;/p&gt;</pre>

<p>Нижче наводиться приклад, в якому ви можете побачити, що перший абзац вийшов не так, тому що браузер <span id="result_box" lang="uk"><span>вважає, що другий елемент </span></span><code>&lt;p&gt;</code><span lang="uk"><span> починає новий абзац.</span> <span>Другий абзац виглядає чудово, тому що ми замінили кутові дужки на символьні посилання.</span></span></p>

<p>{{ EmbedLiveSample('Entity_references_including_special_characters_in_HTML', 700, 200) }}</p>

<div class="note">
<p><strong>Примітка</strong>: <span id="result_box" lang="uk"><span>У графіку всіх доступних посилань на об'єкти HTML можна знайти у Вікіпедії</span></span>: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p>
</div>

<h2 id="Коментарі_HTML">Коментарі HTML</h2>

<p><span id="result_box" lang="uk"><span>В HTML, як і у більшості мов програмування, існує механізм, доступний для написання коментарів у коді - коментарі браузером ігноруються і невидимі для користувача, їхня мета полягає у тому, щоб дозволити вам додавати коментарі до коду, щоб пояснити, як ваш</span> <span>код працює, що роблять різні частини коду тощо. Це може бути дуже корисним, якщо ви повернетеся до свого коду, над яким ви не працювали, наприклад, протягом шести місяців, і не пам'ятаєте, що ви робили, або якщо над вашим кодом ще хтось працював</span><span>.</span></span></p>

<p><span id="result_box" lang="uk"><span>Щоб перетворити розділ вмісту всередині вашого HTML-файлу в коментар, вам необхідно обгорнути його спеціальними маркерами</span></span> <code>&lt;!--</code> та <code>--&gt;</code>, наприклад:</p>

<pre class="brush: html">&lt;p&gt;I'm not inside a comment&lt;/p&gt;

&lt;!-- &lt;p&gt;I am!&lt;/p&gt; --&gt;</pre>

<p><span id="result_box" lang="uk"><span>Як ви можете побачити, перший абзац відображається на сторінці, а другий - ні.</span></span></p>

<p>{{ EmbedLiveSample('HTML_comments', 700, 100) }}</p>

<h2 id="Підсумок">Підсумок</h2>

<p><span id="result_box" lang="uk"><span>Ви досягли кінця статті - ми сподіваємося, що вам сподобалась ваша мандрівка по основах HTML!</span> <span>На цьому етапі ви повинні розуміти, як має вигляд мова, як вона працює на базовому рівні, і вміти писати кілька елементів і атрибутів.</span> <span>Це ідеальне місце, щоб розпочати навчання прямо зараз і продовжити вивчати далі наступні статті модуля. Ви розглянете деякі речі, з якими ви вже ознайомлені, але більш докладно, і дізнаєтесь про деякі нові можливості мови HTML.</span> <span>Залишайтеся на зв'язку!</span></span></p>

<div class="note">
<p><strong>Примітка</strong>: <span id="result_box" lang="uk"><span>На цьому етапі, коли ви почнете більше дізнаватися про HTML, ви також можете почати вивчати основи каскадних таблиць стилів або</span></span> <a href="/en-US/docs/Learn/CSS">CSS</a>. <span id="result_box" lang="uk"><span>CSS - це мова, яку ви використовуєте для стилізації веб-сторінок (наприклад, зміна шрифту або кольорів, або зміна макета сторінки). HTML та CSS дуже добре співпрацюють, в чому ви незабаром переконаєтесь</span></span>.</p>
</div>

<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>