diff options
Diffstat (limited to 'files/uk/learn/html/introduction_to_html/debugging_html')
| -rw-r--r-- | files/uk/learn/html/introduction_to_html/debugging_html/index.html | 186 |
1 files changed, 186 insertions, 0 deletions
diff --git a/files/uk/learn/html/introduction_to_html/debugging_html/index.html b/files/uk/learn/html/introduction_to_html/debugging_html/index.html new file mode 100644 index 0000000000..1c6e107e7b --- /dev/null +++ b/files/uk/learn/html/introduction_to_html/debugging_html/index.html @@ -0,0 +1,186 @@ +--- +title: Дебаґінг HTML +slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML +tags: + - HTML + - Розмітка + - валідатор + - веб-сторінок + - виправлення + - дебаґінг + - для початківців + - кодинг + - перевірка + - помилок + - уроки + - як перевірити +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary"><span id="result_box" lang="uk"><span>Написати HTML добре, але що, якщо щось піде не так, і ви не можете з'ясувати, де помилка в коді?</span> <span>Ця стаття представить вам деякі інструменти, які допоможуть вам знайти та виправити помилки в HTML.</span></span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Передумови:</th> + <td>Знайомство з HTML, як наведено в прикладі <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Початок роботи з HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Основи HTML</a> та <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Створення гіперпосилань</a>.</td> + </tr> + <tr> + <th scope="row">Мета:</th> + <td><span id="result_box" lang="uk"><span>Дізнатись основи використання інструментів налагодження (дебаґінга), щоб знайти проблеми в HTML.</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Дебаґінг_не_страшний">Дебаґінг не страшний</h2> + +<p><span id="result_box" lang="uk"><span>Коли ви пишете код певного виду, все, як правило, добре, доки не настає страшний момент, коли виникла помилка - ви зробили щось не так, тому ваш код не працює - або взагалі, або не зовсім так, як ви хотіли.</span> <span>Наприклад, наведене нижче показує помилку при спробі </span></span> {{glossary("compile")}} <span lang="uk"><span> просту програму, написану на мові "Rust".</span></span></p> + +<p><img alt="A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;"> <span id="result_box" lang="uk"><span>Тут повідомлення про помилку досить легко зрозуміти</span></span> — "неузгоджений подвійний ланцюг кодування". <span id="result_box" lang="uk"><span>Якщо ви подивитеся на цей список, можливо, ви побачите, як це зробити</span></span> <code>println!(Hello, world!");</code> <span id="result_box" lang="uk"><span>може логічно не вистачати подвійної цитати.</span> <span>Проте повідомлення про помилку можуть швидко ускладнюватися і менш легко інтерпретуватися, коли програми стають більшими, і навіть прості випадки можуть трохи налякати того, хто не знає про Руст.</span></span></p> + +<p><span id="result_box" lang="uk"><span>Дебаґінг не повинен бути страшним - це ключ до комфортного написання і налагоджування будь-якої мови програмування або коду, знайомство як з мовою так і з інструментами.</span></span></p> + +<h2 id="HTML_та_дебаґінг">HTML та дебаґінг</h2> + +<p><span id="result_box" lang="uk"><span>HTML не так складно зрозуміти, як Rust.</span> <span>HTML не компілюється в іншу форму, перш ніж браузер проаналізує його та покаже результат</span></span> (він <em>інтерпретується</em>, а не <em>компілюється</em>). І синтаксис HTML {{glossary("element")}} набагато легше зрозуміти, ніж "справжню мову програмування", таку як Rust, {{glossary("JavaScript")}}, або {{glossary("Python")}}. Спосіб, за допомогою якого веб-браузери аналізують HTML є набагато більш <strong>дозвільним, </strong>ніж мови програмування, що є і добре, і погано одночасно.</p> + +<h3 id="Дозвільний_код">Дозвільний код</h3> + +<p><span id="result_box" lang="uk"><span>Отже, що ми маємо на увазі під дозвільним?</span> <span>Ну, звичайно, коли ви робите щось неправильне в коді, є два основних типи помилок, які ви зустрінете:</span></span></p> + +<ul> + <li><strong>Синтаксичні помилки</strong>: <span id="result_box" lang="uk"><span>Це орфографічні помилки у вашому коді, які фактично спричиняють непрацездатність програми, як-от помилка Rust, показана вище.</span> <span>Зазвичай їх можна легко виправити, якщо ви знайомі з синтаксисом мови та знаєте, що означає повідомлення про помилку.</span></span></li> + <li><strong>Логічні помилки</strong>: <span id="result_box" lang="uk"><span>Це помилки, коли синтаксис дійсно правильний, але код не є тим, що ви його намірили, а це означає, що програма працює неправильно.</span> <span>Ці помилки важче фіксувати, ніж синтаксичні помилки, тому що немає повідомлення про помилку, яка спрямовує вас до джерела помилки.</span></span></li> +</ul> + +<p><span id="result_box" lang="uk"><span>Сам по собі HTML не страждає від синтаксичних помилок, оскільки браузери розуміють його належним чином, що означає, що сторінка все одно відображатиметься, навіть якщо є синтаксичні помилки.</span> <span>Браузери мають вбудовані правила, які визначають, як інтерпретувати неправильно написану розмітку, тому ви все одно щось отримаєте, навіть якщо це не те, що ви очікували.</span> <span>Це, звичайно, може бути проблемою!</span></span></p> + +<div class="note"> +<p><strong>Примітка</strong>: <span id="result_box" lang="uk"><span>Розібратись в HTML легко, тому що коли веб-мережа була тільки створена, було вирішено, що надання користувачам можливостей публікувати свій вміст було важливішим, ніж переконатися, що синтаксис абсолютно правильний.</span> <span>Веб-мережа, ймовірно, не була б настільки популярною, як є сьогодні, якщо б вона була більш складною від самого початку.</span></span></p> +</div> + +<h3 id="Активне_навчання_вивчення_допустимого_коду"><span class="short_text" id="result_box" lang="uk"><span>Активне навчання: вивчення допустимого коду</span></span></h3> + +<p><span class="short_text" id="result_box" lang="uk"><span>Настав час вивчити дозвільний характер HTML-коду.</span></span></p> + +<ol> + <li>По-перше, завантажте наш <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example demo</a> і збережіть його локально. Ця демоверсія спеціально написана, щоб мати деякі помилки <span id="result_box" lang="uk"><span>в ньому, щоб ми могли їх досліджувати (розмітка HTML, як наголошується, <strong>погано сформована</strong>, на відміну від <strong>добре сформованої</strong>)</span></span>.</li> + <li><span id="result_box" lang="uk"><span>Далі відкрийте його в браузері.</span> <span>Ви побачите щось подібне</span></span>:<img alt="A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li> + <li><span id="result_box" lang="uk"><span>Це відразу не виглядає чудово</span></span>; <span id="result_box" lang="uk"><span>давайте подивимося на вихідний код, щоб побачити, чи зможемо ми зрозуміти, чому (показано лише вміст body)</span></span>; + <pre class="brush: html"><h1>Приклади HTML дебаґінга</h1> + +<p><span class="short_text" id="result_box" lang="uk"><span>Що викликає помилки в HTML</span></span>? + +<ul> + <li>Незамкнені елементи: <span id="result_box" lang="uk"><span>Якщо елемент <strong> не закрито належним чином, + його ефект може поширюватися на ті області, які ви не мали наміру ним огортати.</span></span> + + <li><span id="result_box" lang="uk"><span>Погано вкладені елементи</span></span>: <span id="result_box" lang="uk"><span>правильне вставлення елементів також дуже важливо + для правильного кодування</span></span>. <strong>strong <em>виділено strong?</strong> + що це таке?</em> + + <li>Незакриті атрибути: <span id="result_box" lang="uk"><span>Інше поширене джерело HTML-проблем.</span> + <span>Давайте розглянемо приклад</span></span>: <a href="https://www.mozilla.org/>Посилання + на домашню сторінку Mozilla</a> +</ul></pre> + </li> + <li><span class="short_text" id="result_box" lang="uk"><span>Давайте розглянемо проблеми:</span></span> + <ul> + <li>{{htmlelement("p","paragraph")}} та {{htmlelement("li","list item")}} елементи не мають закриваючих тегів. <span id="result_box" lang="uk"><span>Дивлячись на зображення вище, це, здається, не вплинуло на рендеринг розмітки надто погано, оскільки легко визначити, де повинен закінчуватися один елемент, а інший повинен починатися.</span></span></li> + <li>Перший {{htmlelement("strong")}} елемент не має закриваючого тега. <span id="result_box" lang="uk"><span>Це дещо ускладнює, оскільки важко сказати, де елемент повинен закінчуватися.</span> <span>Фактично, всю решту тексту було виділено.</span></span></li> + <li><span class="short_text" id="result_box" lang="uk"><span>Цей розділ погано вкладено</span></span>: <code><strong>strong <em>виділено strong?</strong> що це таке?</em></code>. Складно сказати, як це було інтерпретовано із-за попередньої проблеми.</li> + <li>{{htmlattrxref("href","a")}} <span id="result_box" lang="uk"><span>Значення атрибута має відсутні подвійні лапки закриття.</span> <span>Це, здається, викликало найбільшу проблему - посилання взагалі не відображається.</span></span></li> + </ul> + </li> + <li><span id="result_box" lang="uk"><span>Тепер давайте подивимось на розмітку браузера, на відміну від розмітки в вихідному коді.</span> <span>Для цього ми можемо використовувати інструменти розробника веб-браузера.</span> <span>Якщо ви не знайомі з використанням інструментів розробника веб-браузера, перегляньте кілька хвилин</span></span> <a href="/en-US/docs/Learn/Discover_browser_developer_tools">Discover browser developer tools</a>.</li> + <li><span id="result_box" lang="uk"><span>В інспекторі DOM ви можете дізнатись, як виглядає виділена розмітка</span></span>:<img alt="The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li> + <li><span id="result_box" lang="uk"><span>Використовуючи інспектора DOM, давайте розглянемо наш код докладно, щоб побачити, як веб-браузер намагався виправити наші помилки HTML (ми зробили огляд у Firefox, інші сучасні браузери повинні дати той самий результат)</span></span>: + <ul> + <li><span id="result_box" lang="uk"><span>У параграфах та пунктах списку були додані закриті теги</span></span>.</li> + <li><span id="result_box" lang="uk"><span>Не зрозуміло, де слід закрити перший елемент </span></span><code><strong></code>, <span id="result_box" lang="uk"><span>тому браузер обгорнув кожен окремий блок тексту своїм тегом strong, аж донизу документа!</span></span></li> + <li><span id="result_box" lang="uk"><span>Неправильне вкладення було виправлено браузером, як це</span></span>: + <pre class="brush: html"><strong>strong + <em>виділено strong?</em> +</strong> +<em> що це таке?</em></pre> + </li> + <li><span id="result_box" lang="uk"><span>Посилання з відсутніми подвійними лапками повністю вилучено.</span> <span>Останній елемент списку виглядає так</span></span> : + <pre class="brush: html"><li> + <strong>Незакриті атрибути: <span class="short_text" id="result_box" lang="uk"><span>Інше поширене джерело проблем з HTML</span></span>. + Давайте подивимось на приклад: </strong> +</li></pre> + </li> + </ul> + </li> +</ol> + +<h3 id="Валідація_HTML">Валідація HTML</h3> + +<p><span id="result_box" lang="uk"><span>Таким чином, ви можете побачити з наведеного вище прикладу, що ви дійсно хочете, щоб ваш HTML був добре сформований!</span> <span>Але як?</span> <span>У невеликому прикладі, подібному до вищенаведенного, легко пройти по строках та знайти помилки, а як при величезному, складному HTML-документі?</span></span></p> + +<p><span id="result_box" lang="uk"><span>Найкраща стратегія полягає в тому, щоб запустити HTML-сторінку за допомогою</span></span> <a href="https://validator.w3.org/">Markup Validation Service</a> — <span id="result_box" lang="uk"><span>сервісу, що створений та підтримується W3C, організацією, яка стежить за специфікаціями, що визначають HTML, CSS та інші веб-технології.</span> <span>Ця веб-сторінка приймає HTML-документ у вигляді входу, проходить через нього і дає вам звіт, в якому показує, що неправильно з вашим HTML</span></span>.</p> + +<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p> + +<p><span id="result_box" lang="uk"><span>Щоб вказати HTML для перевірки, ви можете надати цьому сервісу адресу свого сайту, завантажити файл HTML або безпосередньо ввести якийсь HTML-код</span></span>.</p> + +<h3 id="Активне_навчання_перевірка_документа_HTML"><span class="short_text" id="result_box" lang="uk"><span>Активне навчання: перевірка документа HTML</span></span></h3> + +<p><span class="short_text" id="result_box" lang="uk"><span>Давайте спробуємо це з нашим</span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">sample document</a>.</p> + +<ol> + <li>По-перше, завантажте <a href="https://validator.w3.org/">Markup Validation Service</a> в одній із вкладок браузера, якщо вона ще не відкрита.</li> + <li>Перейдіть на вкладку <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a> (Перевірити за прямим введенням).</li> + <li><span id="result_box" lang="uk"><span>Скопіюйте весь приклад коду документу (а не тільки body) і вставте його у велику область тексту, показану в </span></span> Markup Validation Service.</li> + <li>Натисніть кнопку <em>Check (Перевірити)</em>.</li> +</ol> + +<p><span class="short_text" id="result_box" lang="uk"><span>В результаті з'явиться список помилок та інша інформація</span></span>.</p> + +<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p> + +<h4 id="Інтерпретація_повідомлень_про_помилки"><span class="short_text" id="result_box" lang="uk"><span>Інтерпретація повідомлень про помилки</span></span></h4> + +<p><span id="result_box" lang="uk"><span>Повідомлення про помилки зазвичай корисні, але іноді вони не настільки корисні;</span> <span>трохи попрактикувавшись, ви зможете розібратися, як інтерпретувати їх, щоб виправити ваш код.</span> <span>Давайте пройдемось по повідомленням про помилку і що вони означають.</span> <span>Ви побачите, що кожне повідомлення містить номер рядка та стовпчика, які допоможуть легко знайти помилку</span></span>.</p> + +<ul> + <li>"Кінцевий тег <code>li</code> <span class="short_text" id="result_box" lang="uk"><span>мається на увазі, але були відкриті елементи</span></span>" (2 випадки): <span id="result_box" lang="uk"><span>Ці повідомлення вказують на те, що відкритий елемент, який має бути закритим.</span> <span>Кінцевий тег мається на увазі, але насправді не існує.</span> <span>Інформація про строку/стовпчик вказує на перший рядок після рядка, де дійсно повинен бути тег закриття, але це досить хороша підказка, щоб побачити, що не так.</span></span></li> + <li>"Не закритий елемент <code>strong</code>": Це досить просто зрозуміти — {{htmlelement("strong")}} елемент не є закритим, та інформація про строку/стовпчик вказує на те, де він знаходиться.</li> + <li>"Кінцевий тег <code>strong</code> порушує правила вкладенності": <span id="result_box" lang="uk"><span>Це вказує на неправильно вкладені елементи, а інформація про строку/стовпець вказує, де вона знаходиться.</span></span></li> + <li>"<span id="result_box" lang="uk"><span>Кінець файлу досягнуто, коли знаходиться значення атрибута.</span> <span>Ігнорування тегу</span></span>": Це досить загадково; <span id="result_box" lang="uk"><span>це стосується того, що значення атрибута десь неправильно сформовано, можливо, поблизу кінця файлу, тому що кінець файлу з'являється всередині значення атрибута.</span> <span>Той факт, що браузер не відображає посилання, має дати нам хорошу підказку щодо того, який елемент винен</span></span>.</li> + <li>"Файл переглянуто до кінця і з'явились відкриті елементи": <span id="result_box" lang="uk"><span>Це трохи неоднозначно, але в основному стосується того, що є відкриті елементи, які повинні бути належним чином закриті.</span> <span>Номери рядків вказують на останні кілька рядків файлу, і це повідомлення про помилку поставляється з рядком коду, який вказує на приклад відкритого елемента:</span></span> + <pre>приклад: <a href="https://www.mozilla.org/>Посилання на домашню сторінку Mozilla</a> ↩ </ul>↩ </body>↩</html></pre> + + <p><span id="result_box" lang="uk"><span>Повідомлення про помилки зазвичай корисні, але іноді вони не настільки корисні;</span> <span>трохи попрактикувавшись, ви зможете розібратися, як інтерпретувати їх, щоб виправити ваш код.</span> <span>Давайте пройдемось по повідомленням про помилку і що вони означають.</span> <span>Ви побачите, що кожне повідомлення містить номер рядка та стовпчика, які допоможуть легко знайти помилку</span></span>.</p> + </li> + <li>"Кінцевий тег <code>li</code> <span class="short_text" id="result_box" lang="uk"><span>мається на увазі, але були відкриті елементи</span></span>" (2 випадки): <span id="result_box" lang="uk"><span>Ці повідомлення вказують на те, що відкритий елемент, який має бути закритим.</span> <span>Кінцевий тег мається на увазі, але насправді не існує.</span> <span>Інформація про строку/стовпчик вказує на перший рядок після рядка, де дійсно повинен бути тег закриття, але це досить хороша підказка, щоб побачити, що не так.</span></span></li> + <li>"Не закритий елемент <code>strong</code>": Це досить просто зрозуміти — {{htmlelement("strong")}} елемент не є закритим, та інформація про строку/стовпчик вказує на те, де він знаходиться.</li> + <li>"Кінцевий тег <code>strong</code> порушує правила вкладенності": <span id="result_box" lang="uk"><span>Це вказує на неправильно вкладені елементи, а інформація про строку/стовпець вказує, де вона знаходиться.</span></span></li> + <li>"<span id="result_box" lang="uk"><span>Кінець файлу досягнуто, коли знаходиться значення атрибута.</span> <span>Ігнорування тегу</span></span>": Це досить загадково; <span id="result_box" lang="uk"><span>це стосується того, що значення атрибута десь неправильно сформовано, можливо, поблизу кінця файлу, тому що кінець файлу з'являється всередині значення атрибута.</span> <span>Той факт, що браузер не відображає посилання, має дати нам хорошу підказку щодо того, який елемент винен</span></span>.</li> + <li>"Файл переглянуто до кінця і з'явились відкриті елементи": <span id="result_box" lang="uk"><span>Це трохи неоднозначно, але в основному стосується того, що є відкриті елементи, які повинні бути належним чином закриті.</span> <span>Номери рядків вказують на останні кілька рядків файлу, і це повідомлення про помилку поставляється з рядком коду, який вказує на приклад відкритого елемента:</span></span> + <pre>приклад: <a href="https://www.mozilla.org/>Посилання на домашню сторінк</pre> + </li> + <li> + <div class="note"> + <p><strong>Примітка</strong>: <span id="result_box" lang="uk"><span>Атрибут, який не містить замикаючих </span></span><span lang="uk"><span>лап</span></span>о́<span lang="uk"><span>к, може призвести до відкритого елемента, оскільки решту документа інтерпретують як вміст атрибута.</span></span></p> + </div> + </li> + <li>"Незакритий елемент <code>ul</code>": Це не дуже корисно, як {{htmlelement("ul")}} елемент є закритим правильно. <span class="short_text" id="result_box" lang="uk"><span>Ця помилка виникає через те, що</span></span> {{htmlelement("a")}} елемент є незакритим, через відсутність кінцевих лапо́к.</li> +</ul> + +<p><span id="result_box" lang="uk"><span>Якщо ви не можете з'ясувати, що означає кожне повідомлення про помилку, не хвилюйтеся - хороша ідея - спробувати одночасно виправити кілька помилок.</span> <span>Потім спробуйте повторно підтвердити свій HTML, щоб показати, які помилки залишаються.</span> <span>Іноді виправлення попередньої помилки також позбуває інших повідомлень про помилку - деякі помилки часто можуть бути викликані однією проблемою, що тягне інші, як ефект доміно.</span></span></p> + +<p><span id="result_box" lang="uk"><span>Ви будете знати, коли всі ваші помилки виправлені, коли ви побачите наступний банер у вашому виводі:</span></span></p> + +<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p> + +<p><span id="result_box" lang="uk"><span>Тобто, "Документ перевірений відповідно до зазначених схем та додаткових обмежень, перевірених валідатором</span></span>".</p> + +<h2 id="Резюме">Резюме</h2> + +<p><span id="result_box" lang="uk"><span>Отже, у нас є вступ до дебаґінга в HTML, який повинен надати вам деякі корисні навички, щоб розраховувати, коли ви почнете налагоджувати CSS, JavaScript та інші типи коду пізніше в своїй кар'єрі.</span> <span>Це також означає завершення вивчення статей "Введення в модулі HTML" - тепер ви можете продовжувати тестування самостійно з нашими оцінками: перший з них за посиланням нижче.</span></span></p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> |