diff options
Diffstat (limited to 'files/uk/learn/html/introduction_to_html/getting_started/index.html')
| -rw-r--r-- | files/uk/learn/html/introduction_to_html/getting_started/index.html | 522 |
1 files changed, 522 insertions, 0 deletions
diff --git a/files/uk/learn/html/introduction_to_html/getting_started/index.html b/files/uk/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..d1250c915c --- /dev/null +++ b/files/uk/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,522 @@ +--- +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"><p>Мій кіт дуже сердитий</p></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><em> </code>та <code></em></code> (поставте <code><em></code> на початку, щоб <em>відкрити елемент</em>, та <code></em></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"><h2>Input</h2> +<textarea id="code" class="input">This is my text.</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</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 = '<em>This is my text.</em>'; + 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"><p>My cat is <strong>very</strong> grumpy.</p></pre> + +<p>Важливо пам'ятати правильне вкладення елементів: у прикладі вище ми спершу відкрили елемент {{htmlelement("p")}}, а потім елемент <strong>, що означає, що першим ми маємо закрити внутрішній елемент {{htmlelement("strong")}}, а потім зовнішній {{htmlelement("p")}}. Приклад нижче неправильний:</p> + +<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></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><em>перший</em><em>другий</em><em>третій</em> + +<p>четвертий</p><p>п'ятий</p><p>шостий</p></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"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> + +<p>Такий вигляд він має на сторінці:</p> + +<p>{{ EmbedLiveSample('Empty_elements', 700, 300) }}</p> + +<h2 id="Атрибути">Атрибути</h2> + +<p>Елементи також можуть мати атрибути, які мають такий вигляд: </p> + +<p><img alt='&lt;p class="editor-note">My cat is very grumpy&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><a></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"><h2>Input</h2> +<textarea id="code" class="input">&lt;p&gt;A link to my favourite website.&lt;/p&gt;</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</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 = '<p>A link to my <a href="<code>https://www.mozilla.org/</code>" title="The Mozilla homepage" target="_blank">favourite website</a>.</p>'; + 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><input type="text" disabled="disabled"></pre> + +<p>Скорочений запис цілком може мати такий вигляд (ми також додали активне поле для кращого розуміння): </p> + +<pre class="brush: html"><input type="text" disabled> + +<input type="text"> +</pre> + +<p>Обидва записи дадуть такий результат: </p> + +<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100) }}</p> + +<h3 id="Опускання_лапок_навколо_значень_атрибутів">Опускання лапок навколо значень атрибутів</h3> + +<p>Іноді в мережі ви можете побачити багато різних прикладів дивної розмітки, наприклад, значення атрибутів, записані без лапок. Хоча за деяких обставин такий запис є прийнятним, в інших випадках він може поламати розмітку. Наприклад, у нашому посиланні з прикладу вище ми можемо записати атрибут <code>href</code> так:</p> + +<pre><a href=<code>https://www.mozilla.org/</code>>favourite website</a></pre> + +<p>Однак, якщо ми додамо другий атрибут <code>title</code>, розмітка порушиться:</p> + +<pre class="brush: html"><a href=<code>https://www.mozilla.org/</code> title=The Mozilla homepage>favourite website</a></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"><a href="http://www.example.com">A link to my example.</a> + +<a href='http://www.example.com'>A link to my example.</a></pre> + +<p>Однак, не можна змішувати лапки різного типу в одному записі. Наприклад, такий запис є неправильним:</p> + +<pre class="brush: html"><a href="http://www.example.com'>A link to my example.</a></pre> + +<p>Якщо ви використали лапки одного типу в записі, всередину ви можете вкласти лапки іншого типу. Наприклад, тут апостроф вживається всередині значення в подвійних лапках:</p> + +<pre class="brush: html"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> + +<p>Для вкладення лапок того самого типу потрібно користуватися спеціальними символами, про які піде мова нижче.</p> + +<h2 id="Анатомія_HTML-документу">Анатомія HTML-документу</h2> + +<p>Все зазначене вище є основами HTML, але окремо взяті елементи самі по собі мало на що здатні. Тепер ми поглянемо на те, як окремі елементи формують цілу веб-сторінку:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p>Тут ми маємо:</p> + +<ol> + <li><code><!DOCTYPE html></code>: Доктайп (тип документу). В ті часи, коли HTML тільки зароджувався (близько 1991/2), доктайпы (doctypes) використовувалися як посилання на набір правил, яким HTML-сторінка повинна була слідувати, щоб вважатись написаною хорошим HTML-кодом, <span id="result_box" lang="uk"><span>що може означати автоматичну перевірку помилок та інші</span> <span>корисні речі.</span> <span>Доктайп приблизно такий вигляд</span></span>: + + <pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> + <span id="result_box" lang="uk"><span>Проте в наші дні ніхто справді не дбає про них, і вони насправді є лише історичним артефактом, який потрібно включити в документ, щоб той правильно працював</span></span> . <code><!DOCTYPE html></code> <span id="result_box" lang="uk"><span>це найкоротший рядок символів, який вважається валідним доктайпом;</span> <span>це все, що вам дійсно потрібно знати</span></span>.</li> + <li><code><html></html></code>: Елемент {{htmlelement("html")}}. Цей елемент огортає весь зміст (контент) <span id="result_box" lang="uk"><span>на всій сторінці, іноді його називають кореневим (root) елементом.</span></span></li> + <li><code><head></head></code>: Елемент {{htmlelement("head")}}. <span id="result_box" lang="uk"><span>Цей елемент діє як контейнер для всього матеріалу, який ви хочете включити в сторінку HTML, але який не є вмістом, що ви надаєте для перегляду відвідувачам вашої сторінки.</span> <span>Він включає в себе такі речі, як ключові слова та опис сторінки, які ви хочете відобразити в результатах пошуку, CSS, щоб стилізувати вміст сторінки, оголошення підтримуваного набору символів тощо.</span> <span>Ви дізнаєтеся більше про це в наступній статті цієї серії.</span></span></li> + <li><code><meta charset="utf-8"></code>: <span id="result_box" lang="uk"><span>Цей елемент встановлює в якості символьного кодування для вашого документу UTF-8, що включає більшість символів з переважної більшості письмових мов людей.</span> <span>По суті, це дає змогу обробляти будь-який текстовий вміст, який ви можете додати до документу.</span> <span>Немає причин не встановлювати таке кодування, і це допоможе уникнути деяких проблем пізніше.</span></span></li> + <li><code><title></title></code>: Елемент {{htmlelement("title")}}. <span id="result_box" lang="uk"><span>Цей елемент встановлює назву вашої сторінки, що є заголовком, який відображається на вкладці веб-браузера, на якій завантажується сторінка, і використовується для опису сторінки під час додавання/уподобання її.</span></span></li> + <li><code><body></body></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><h1></code> і закриваючого тега <code></h1></code>.</li> + <li><span id="result_box" lang="uk"><span>Відредагуйте вміст параграфу (абзацу) та додайте текст про те, що вас цікавить.</span></span></li> + <li><span id="result_box" lang="uk"><span>Зробіть важливі слова виділеними жирним шрифтом, обернувши їх у відкриваючий тег </span></span><code><strong></code> і закриваючий тег <code></strong></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"><h2>Input</h2> +<textarea id="code" class="input"> +&lt;p&gt;This is my page&lt;/p&gt;</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</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 = '<p>I really enjoy <strong>playing the drums</strong>. One of my favourite drummers is Neal Peart, who\ + plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.\ + My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ +<img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; + 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"><p>Dogs are silly.</p> + +<p>Dogs are + silly.</p></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><</code>, <code>></code>,<code>"</code>,<code>'</code> та <code>&</code> є спеціальними символами. <span id="result_box" lang="uk"><span>Вони є частинами самого синтаксису HTML, тому як вводити один з цих символів у ваш текст, наприклад, якщо ви дійсно хочете використати амперсанд</span> <span>або знак менше, і не трактувати його як код, як це можуть зробити деякі веб-браузери?</span></span></p> + +<p><span id="result_box" lang="uk"><span>В такому випадку ми повинні використовувати символьні посилання - спеціальні коди, що представляють символи, і можуть використовуватися в конкретних обставинах.</span> <span>Кожне посилання символів починається з амперсанда (&), а закінчується двокрапкою (;).</span></span></p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Буквений символ</th> + <th scope="col">Еквівалентне написання символів</th> + </tr> + </thead> + <tbody> + <tr> + <td><</td> + <td>&lt;</td> + </tr> + <tr> + <td>></td> + <td>&gt;</td> + </tr> + <tr> + <td>"</td> + <td>&quot;</td> + </tr> + <tr> + <td>'</td> + <td>&apos;</td> + </tr> + <tr> + <td>&</td> + <td>&amp;</td> + </tr> + </tbody> +</table> + +<p><span id="result_box" lang="uk"><span>У наведеному нижче прикладі ви можете побачити два абзаци, які говорять про веб-технології:</span></span></p> + +<pre class="brush: html"><p>In HTML, you define a paragraph using the <p> element.</p> + +<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p></pre> + +<p>Нижче наводиться приклад, в якому ви можете побачити, що перший абзац вийшов не так, тому що браузер <span id="result_box" lang="uk"><span>вважає, що другий елемент </span></span><code><p></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><!--</code> та <code>--></code>, наприклад:</p> + +<pre class="brush: html"><p>I'm not inside a comment</p> + +<!-- <p>I am!</p> --></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> |