1 files changed, 55 insertions, 0 deletions
diff --git a/files/uk/learn/html/introduction_to_html/index.html b/files/uk/learn/html/introduction_to_html/index.html
new file mode 100644
index 0000000000..9b9ee8d4a6
--- /dev/null
+++ b/files/uk/learn/html/introduction_to_html/index.html
@@ -0,0 +1,55 @@
+---
+title: Вступ до HTML
+slug: Learn/HTML/Introduction_to_HTML
+translation_of: Learn/HTML/Introduction_to_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">{{glossary("HTML")}} є відносно простою мовою. Вона складається з <a href="https://developer.mozilla.org/uk/docs/Glossary/Element">елементів</a>, які можуть застосовуватися до різних частин тексту і надавати їм певного значення в документі (наприклад, цей текст є параграфом, цей — ненумерованим списком, цей — частиною таблиці), розбивати документ на логічні частини (це заголовок, це три колонки контенту, це меню навігації), а також вставляти контент, такий як відео чи зображення, у документ. У цьому розділі ми поговоримо про перші два з цих завдань, а також розглянемо базові поняття і синтаксис, які потрібні для розуміння HTML.</p>
+
+<h2 id="Передумови">Передумови</h2>
+
+<p>Для цього розділу вам не потрібні попередні знання з HTML, але потрібно бути користувачем комп'ютерів і мережі (принаймні на рівні переглядання сайтів). Також вам буде потрібне базове робоче середовище, встановлення якого описане в статті <em><a href="/uk/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення основного програмного забезпечення</a></em>, і розуміння того, як створювати і керувати файлами, як описано в статті <em><a href="/uk/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Робота з файлами</a></em> — обидві статті є частинами розділу <em><a href="/uk/docs/Learn/Getting_started_with_the_web">Початок роботи з вебом</a></em>.</p>
+
+<div class="note">
+<p><strong>Примітка:</strong> якщо ви працюєте на комп'ютері/планшеті/іншому пристрої, на якому не маєте можливості створювати файли, спробуйте писати код в онлайн-програмах, таких як  <a href="http://jsbin.com/">JSBin</a> чи <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Посібники">Посібники</h2>
+
+<p>Статті у цьому розділі пояснюють базову теорію HTML і надають можливість перевірити ваші навички.</p>
+
+<dl>
+ <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Початок роботи з HTML</a></dt>
+ <dd>Стаття пояснює елементарні основи HTML — що таке елементи, атрибути та інші важливі поняття, які ви могли чути, і яке завдання вони виконують. Ми також покажемо, як побудований елемент HTML, як побудована типова сторінка HTML, і пояснимо інші основні особливості мови. В процесі роботи ми трохи пограємо з HTML, щоб вам було цікаво!</dd>
+ <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Що в head? Метадані в HTML</a></dt>
+ <dd><a href="https://developer.mozilla.org/uk/docs/Glossary/Head">Head</a> в HTML-документі є частиною, яка <strong>не відображається</strong> в веб-браузері коли сторінка завантажується. Вона містить інформацію про сторінку, такі як {{htmlelement("title")}}, посилання на {{glossary("CSS")}} (якщо ви хочете надати стиль вашому HTML-змісту за допомогою CSS), посилання до користувальницьких favicons та метаданих (тобто даних про HTML, наприклад, хто його написав (автор) і важливі ключові слова (keywords), що описують документ.)</dd>
+ <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Основи HTML-тексту</a></dt>
+ <dd>Одним із основних завдань HTML є надання текстового значення (також відомого як <a href="https://developer.mozilla.org/uk/docs/Glossary/Semantics">семантика</a>), щоб браузер знав, як правильно відображати його. У цій статті розглядається, як правильно використовувати HTML, щоб розбити блок тексту на структуру заголовків та абзаців (параграфів), додати акцент/важливість слів, створити списки і багато іншого.</dd>
+ <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Створення гіперпосилань</a></dt>
+ <dd>Гіперпосилання дійсно важливі — саме вони роблять Інтернет павутиною. Ця стаття показує синтаксис, необхідний для створення посилання і обговорює кращі практичні поради.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Розширене форматування тексту</a></dt>
+ <dd>В HTML є багато інших елементів для форматування тексту, про які ми не вказали в статті <a href="/uk/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Основи HTML тексту</a>. Елементи, що знаходяться тут, менш відомі, але їх все ж корисно знати. Тут ви дізнаєтесь про позначення цитат, списки опису, комп'ютерний код та інший пов'язаний текст, індекс та верхній індекс, контактну інформацію та багато іншого.</dd>
+ <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Структура документу та веб-сайту</a></dt>
+ <dd>Крім визначення окремих частин вашої сторінки (наприклад "абзац" або "зображення"), HTML також використовується для визначення областей вашого веб-сайту (таких як "заголовок", "навігаційне меню", "колонка основного змісту".) У цій статті розглянуто, як планувати основну структуру веб-сайту, а також написати HTML-код для представлення цієї структури.</dd>
+ <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Відлагодження HTML</a></dt>
+ <dd>Написали HTML-код файно, але що робити, якщо щось йде неправильно і ви не можете з'ясувати, де помилка в коді? В цій статті ви ознайомитесь з деякими інструментами, які зможуть вам допомогти.</dd>
+</dl>
+
+<h2 id="Оцінки">Оцінки</h2>
+
+<p>Наступні оцінки допоможуть перевірити ваше розуміння базових основ HTML, описаних вище в посібниках.</p>
+
+<dl>
+ <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Розмітка/Форматування листа</a></dt>
+ <dd>Ми всі вчимося писати листи рано чи пізно. Це також корисний приклад, щоб перевірити свої навички у форматуванні тексту. Отже, в цій оцінці вам буде надіслано листа для форматування.</dd>
+ <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Структурування сторінки змісту</a></dt>
+ <dd>Ця оцінка перевіряє ваше вміння використовувати HTML для структурування простої сторінки змісту, що містить заголовок (header), нижній колонтитул (footer), навігаційне меню (navigation menu), основний зміст (main content), і бічну панель (sidebar).</dd>
+</dl>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<dl>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Основи веб-грамотності 1</a></dt>
+ <dd>Відмінний курс навчання Mozilla foundation, який навчає та випробовує багато навичок, про які говорилося в модулі <em>Вступ до HTML</em>. Учні знайомляться з читанням, написанням та участю в Інтернеті в цьому шестичастинному модулі. Дізнайтеся про основи Інтернету за допомогою виробництва та співпраці.</dd>
+</dl>