diff options
Diffstat (limited to 'files/uk/web/guide')
| -rw-r--r-- | files/uk/web/guide/css/getting_started/index.html | 46 | ||||
| -rw-r--r-- | files/uk/web/guide/css/getting_started/what_is_css/index.html | 113 | ||||
| -rw-r--r-- | files/uk/web/guide/html/content_categories/index.html | 168 | ||||
| -rw-r--r-- | files/uk/web/guide/html/html5/index.html | 164 | ||||
| -rw-r--r-- | files/uk/web/guide/html/використання_html-секцій_та_структура_документу/index.html | 337 | ||||
| -rw-r--r-- | files/uk/web/guide/index.html | 66 | ||||
| -rw-r--r-- | files/uk/web/guide/графіка/index.html | 49 |
7 files changed, 943 insertions, 0 deletions
diff --git a/files/uk/web/guide/css/getting_started/index.html b/files/uk/web/guide/css/getting_started/index.html new file mode 100644 index 0000000000..d273ec9d69 --- /dev/null +++ b/files/uk/web/guide/css/getting_started/index.html @@ -0,0 +1,46 @@ +--- +title: Getting started with CSS +slug: Web/Guide/CSS/Getting_started +translation_of: Learn/CSS/First_steps +--- +<p><span class="seoSummary">Це керівництво ознайомить Вас з основними функціями та мовою (синтаксисом) каскадних таблиць стилів (<a href="/uk/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS"><strong>Cascading Style Sheets</strong></a> - CSS). Ви використовуєте CSS, щоб змінити зовнішній вигляд структурованого документу, такого як веб-сторінка. Урок також включає приклади вправ, які ви можете спробувати виконати на власному комп’ютері, щоб побачити ефекти CSS і функції, що реалізуються в сучасних браузерах.</span></p> + +<p>Посібник призначений для початківців і будь-кого, хто б хотів повторити основи CSS. Якщо ви маєте більше досвіду з CSS, основна сторінка CSS містить <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">списки</a> більш просуненого рівня.</p> + +<nav class="fancyTOC"><a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">що таке CSS</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">Навіщо використовувати CSS</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Chapter 'Як працює CSS' of the CSS tutorial">Як працює CSS</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">каскадування та успадковування</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Селектори</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">Читабельний CSS</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Текстові стилі</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Колір</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">Контент</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">Списки</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Boxes</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Layout</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Таблиці</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Медіа</a></nav> + +<h2 id="Що_потрібно_для_початку_роботи">Що потрібно для початку роботи</h2> + +<ul> + <li>Текстовий редактор</li> + <li>Сучасний браузер</li> + <li>Певний досвід роботи з текстовим редактором і браузером</li> +</ul> + +<p>Не зважаючи на те, що вправи можуть допомогти тобі в навчанні, ти не зобов’язаний хз виконувати. Ти можеш просто читати керівництво та розглядати зображення.</p> + +<p><strong>На замітку:</strong> Керівництво розглядає тему як CSS працює з кольором. Буде простіше завершити ці секції з кольоровим дисплеєм та нормальним кольоровим зором. </p> + +<h2 id="Як_використовувати_це_керівництво">Як використовувати це керівництво</h2> + +<p>В опрацюванні цього керівництва читай сторінки уважно і в визначеній послідовності. Якщо ти пропустиш сторінку, надалі може бути важко зрозуміти наступні сторінки підручника. </p> + +<h3 id="Частина_І_основи_CSS">Частина І: основи CSS</h3> + +<p>На кожній сторінці переглянь відділ <em>Інформація,</em> щоб зрозуміти як працює CSS. Спробуй секцію <em>Дія,</em> щоб випробувати CSS на власному комп’ютері.</p> + +<p>To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.</p> + +<p>Щоб глибше зрозуміти CSS, прочитай інформацію, яку ти знайдеш в блоці з заголовком <em>Детальніше</em>. Використай лінки у них, щоб знайти довідникову інформацію про CSS.</p> + +<h3 id="Частина_II_Сфера_CSS">Частина II: Сфера CSS</h3> + +<p>Друга частина підручника надає приклади, які показують сферу CSS з іншими веб- і Mozilla технологіями.</p> + +<ol> + <li><a href="/uk/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></li> + <li><a href="/uk/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="en/CSS/Getting_Started/SVG_graphics">SVG-графіка</a></li> + <li><a href="/uk/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML дані</a></li> + <li><a href="/uk/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL сполучення</a></li> + <li><a href="/uk/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">Користувацбкі інтерфейси ХUL</a></li> +</ol> diff --git a/files/uk/web/guide/css/getting_started/what_is_css/index.html b/files/uk/web/guide/css/getting_started/what_is_css/index.html new file mode 100644 index 0000000000..dfaba8a76d --- /dev/null +++ b/files/uk/web/guide/css/getting_started/what_is_css/index.html @@ -0,0 +1,113 @@ +--- +title: What is CSS? +slug: Web/Guide/CSS/Getting_started/What_is_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<div>{{CSSTutorialTOC}}</div> + +<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Getting started")}} <span class="seoSummary">This first section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">CSS Getting Started</a> tutorial briefly explains Cascading Style Sheets (CSS). You'll also create a simple document to use for CSS exercises in subsequent sections.</span></p> + +<h2 class="clearLeft" id="Інформація_Що_таке_CSS">Інформація: Що таке CSS?</h2> + +<p>Каскадні таблиці стилів (англ. - <em>Cascading Style Sheets </em> <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) - мова, що визначає як вміст сторінки буде візуально офрмлений та представлений користувачам. Складові документу ж описують мовою розмітки, на зразок <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a>.</p> + +<p><em>Документ</em> являє собою інформацію, структуровану для подання з використанням <em>мови розмітки</em>.</p> + +<p><em>Presenting</em> a document to a user means converting it into a usable form for your audience. Browsers, like Firefox, Chrome or Internet Explorer, are designed to present documents visually, for example, on a computer screen, projector or printer.</p> + +<div class="tuto_example"> +<p><strong>Приклади</strong></p> + +<ul> + <li>A web page like the one you are reading is a document.<br> + The information that you see in a web page is usually structured using the markup language HTML (HyperText Markup Language).</li> + <li>Dialogs in an application, also called modal windows, are often documents.<br> + Such dialogs may also be structured using a markup language, like XUL (XML User Interface Language), which you will find in some Mozilla applications.</li> +</ul> +</div> + +<p>In this tutorial, boxes captioned <strong>Детальніше</strong> like the one below contain optional information and links to more resources on a concept or topic covered in a section. Read them as you see them, follow the links, or skip these boxes and return to read them later.</p> + +<div class="tuto_details"> +<div class="tuto_type">Детальніше</div> + +<p>Документ- це не те ж саме, що і файл. Втім, ти можеш зберегти документ у файлі.</p> + +<p>Документ, який ти зараз читаєш не збережений окремим файлом. Коли твій веб-браузер переходить на цю сторінку, сервер робить запит до бази данних та генерує документ, зібравши частини документу з різних фалів. Однак, в цьому уроці ти будеш працювати також і з документами, збереженими у файлах.</p> + +<p>Більше інформації про документи та мови розміток ти можеш знайти в фнших розділах цього веб-сайту:</p> + +<table style="background-color: inherit; margin-left: 2em;"> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></td> + <td>для веб-сторінок</td> + </tr> + <tr> + <td><a href="/en-US/docs/XML" title="/en-US/docs/XML">XML</a></td> + <td>для структурованих документів в загальному</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></td> + <td>для графіки</td> + </tr> + <tr> + <td><a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a></td> + <td>для інтерфейсів користувачів у браузері Mozilla</td> + </tr> + </tbody> +</table> + +<p>У другій частині ціього навчального посібника ти знайдеш приклади цих мов розміток.</p> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Детальніше</div> + +<p>In formal CSS terminology, the program that presents a document to a user is called a <em>user agent</em> (UA). A browser is just one kind of UA. CSS is not just for browsers or visual presentation, but for Part I of this tutorial, you'll only work with CSS in a browser.</p> + +<p>For formal definitions of terminology relating to CSS, see <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definitions</a> in the CSS Specification from the World Wide Web Consortium (W3C), an international community that sets open standards for the web.</p> +</div> + +<h2 id="До_роботи_Створення_документу">До роботи: Створення документу</h2> + +<ol> + <li>Створи нову паку на своєму комп'ютері для того, щоб зберігати та упорядковувати вправи з наших уроків.</li> + <li>Open your text editor and create a new text file. This file will contain the document for the next few tutorial exercises.</li> + <li>Copy and paste the HTML shown below. Save the file using the name <code>doc1.html</code> + <pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + </head> + + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html></pre> + + <p>{{ LiveSampleLink('Action_Creating_a_document', 'View above Demo') }}</p> + </li> + <li>Open a new tab or a new window in your browser, then open the file you just created. + <p>You should see the text with the initial letters bold, like this:</p> + + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> + </tr> + </tbody> + </table> + + <p>What you see in your browser might not look exactly the same because of settings in your browser and in this wiki. Some differences in the font, spacing and colors are not important.</p> + </li> +</ol> + +<h2 id="Що_далі">Що далі?</h2> + +<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Your document does not yet use CSS. In the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS">next section</a> you'll use CSS to style your document.</p> diff --git a/files/uk/web/guide/html/content_categories/index.html b/files/uk/web/guide/html/content_categories/index.html new file mode 100644 index 0000000000..4ec3c5ecbc --- /dev/null +++ b/files/uk/web/guide/html/content_categories/index.html @@ -0,0 +1,168 @@ +--- +title: Категорії вмісту +slug: Web/Guide/HTML/Content_categories +tags: + - Веб + - Навчальний + - ПотребуєОновлення + - Просунутий +translation_of: Web/Guide/HTML/Content_categories +--- +<p><span class="seoSummary">Кожен елемент HTML має дотримуватись правил, що визначають який тип вмісту він може мати. Такі правила згруповано у моделі вмісту, котрі є такими самими по відношенню до кількох елементів. Кожен елемент HTML належить до жодного, одного, або кількох моделей вмісту, кожна з котрих визначає правила, котрих має дотримуватись вміст елемента у документі, написаного за допомогою HTML.</span></p> + +<p>Існує три типи категорій вмісту:</p> + +<ul> + <li>Основні категорії вмісту, котрі визначають основні правила, котрими користується велика кількість елементів;</li> + <li>Категорії вмісту для форм, котрі визначають правила вмісту для елементів в межах форм;</li> + <li>Особливі категорії вмісту, котрі описують рідкісні категорії, що використовуються лише кількома елементами, інколи лише у специфічних випадках.</li> +</ul> + +<div class="note"> +<p><strong>Примітка: </strong><span id="result_box" lang="uk"><span>Більш докладне обговорення цих категорій вмісту та їх порівняльних функцій виходить за межі цієї статті;</span> <span>для цього ви можете прочитати </span></span><a href="https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content">відповідні частини специфікації HTML.</a></p> +</div> + +<div style="width: 50%;"><a href="/@api/deki/files/6244/=Content_categories_venn.png" title="Content_categories_venn.png"><img alt="Content_categories_venn.png" class="default internal" src="/@api/deki/files/6244/=Content_categories_venn.png?size=webview" style="height: 200px; width: 350px;"></a></div> + +<h2 id="Основні_категорії_вмісту">Основні категорії вмісту</h2> + +<h3 id="Вміст_метаданих">Вміст метаданих</h3> + +<p>Елементи, що належать до категорії вмісту метаданих, змінюють презентацію або поведінку цілого документу, налаштовують посилання на інші документи, або ж передають несуть, незалежну інформацію.</p> + +<p>Елементи, що належать до цієї категорії {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} і {{HTMLElement("title")}}.</p> + +<h3 id="Потоковий_вміст">Потоковий вміст</h3> + +<p>До елементів, що належать до потокового вмісту, типовим є текстовий або ж вбудований вміст. Такими елементами є: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} і текст.</p> + +<p>Є іще кілька елементів, що належать до цієї категорії, та лише за певних умов:</p> + +<ul> + <li>{{HTMLElement("area")}}, якщо він є нащадком елемента {{HTMLElement("map")}}</li> + <li>{{HTMLElement("link")}}, якщо присутній атрибут <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a></li> + <li>{{HTMLElement("meta")}}, якщо присутній атрибут <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a></li> + <li>{{HTMLElement("style")}}, якщо присутній атрибут {{htmlattrxref("scoped","style")}}</li> +</ul> + +<h3 id="Секційний_вміст">Секційний вміст</h3> + +<p>Елементи, що належать до секційної моделі вмісту, створюють <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">секцію в заданому документі</a>, котра визначає межі елементів у {{HTMLElement("header")}}, {{HTMLElement("footer")}} і <a href="#Heading_content" title="#heading content">вмісту заголовків</a>.</p> + +<p>Елементами, котрі належать цій категорії є: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} та {{HTMLElement("section")}}. </p> + +<div class="note"> +<p><em>Примітка: </em> Не сплутайте цю модель вмісту з <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="Sections and Outlines of an HTML5 document#sectioning root">кореневою секційною</a> категорією, котра ізолює свій вміст від загального обрису документу.</p> +</div> + +<h3 id="Вміст_заголовку">Вміст заголовку</h3> + +<p>Контент заголовку визначає назву секції, котра явно визначена елементом <a href="#Sectioning_content" title="#sectioning content">секційного вмісту</a> або ж неявно визначена самим елементом вмісту заголовку.</p> + +<p>Елементами, що належать до заданої категорії є: {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} та {{HTMLElement("hgroup")}}.</p> + +<div class="note"> +<p><em>Примітка:</em> попри те, що {{HTMLElement("header")}} елемент швидше за все матиме "вміст заголовку", сам він не відноситься до елементів вмісту заголовку.</p> +</div> + +<h3 id="Фразовий_вміст">Фразовий вміст</h3> + +<p>Фразовий вміст визначає текст та розмітку, котру він вміщує. Фразовий вміст формує абзаци.</p> + +<p>Елементами, що належать до цієї категорії є {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} також чистий текст (в тому числі котрий складається з пробілів).</p> + +<p>Іще кілька елементів, що належать до цієї категорії, та лише за певних умов:</p> + +<ul> + <li>{{HTMLElement("a")}}, якщо вміщує лише фразовий вміст</li> + <li>{{HTMLElement("area")}}, якщо є нащадком елемента {{HTMLElement("map")}}</li> + <li>{{HTMLElement("del")}}, якщо вміщує лише фразовий вміст</li> + <li>{{HTMLElement("ins")}}, якщо вміщує лише фразовий вміст</li> + <li>{{HTMLElement("link")}}, якщо присутній атрибут <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a></li> + <li>{{HTMLElement("map")}}, якщо вміщує лише фразовий вміст</li> + <li>{{HTMLElement("meta")}}, якщо присутній атрибут <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a></li> +</ul> + +<h3 id="Вбудований_вміст">Вбудований вміст</h3> + +<p>Вбудований вміст імпортує інші ресурси, або ж вставляє вміст з інших мов розмітки або простору імен у документ. Елементи, що належать до цієї категорії включають: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.</p> + +<h3 id="Інтерактивний_вміст">Інтерактивний вміст</h3> + +<p>Інтерактивний вміст включає елементи, котрі спроектовано виключно для взаємодії з користувачем. Елементи, котрі належать до цієї категорії: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</p> + +<p>Декотрі елементи належать до цієї категорії лише за певних обставин:</p> + +<ul> + <li>{{HTMLElement("audio")}}, якщо присутній атрибут {{htmlattrxref("controls", "audio")}}</li> + <li>{{HTMLElement("img")}}, якщо присутній атрибут {{htmlattrxref("usemap", "img")}}</li> + <li>{{HTMLElement("input")}}, якщо атрибут {{htmlattrxref("type", "input")}} не у прихованому стані</li> + <li>{{HTMLElement("menu")}}, якщо атрибут {{htmlattrxref("type", "menu")}} у стані "панелі інструментів"</li> + <li>{{HTMLElement("object")}}, якщо присутній атрибут {{htmlattrxref("usemap", "object")}}</li> + <li>{{HTMLElement("video")}}, якщо присутній атрибут {{htmlattrxref("controls", "video")}}</li> +</ul> + +<h3 id="Видимий_вміст">Видимий вміст</h3> + +<p>Вміст є видимим коли він не пустий і не прихований. Елементи чиєю моделлю є потоковий міст або фразовий вміст, повинні мати принаймні один вузол видимого вмісту.</p> + +<h3 id="Вміст_форм">Вміст форм</h3> + +<p>Вміст форм вміщує елементи, котрі мають власника форми, визначеного атрибутом <strong>form</strong>. Власником форми є елемент {{HTMLElement("form")}}, або ж елемент, чий ідентифікатор (id), вказано у атрибуті <strong>form</strong>.</p> + +<ul> + <li>{{HTMLElement("button")}}</li> + <li>{{HTMLElement("fieldset")}}</li> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("keygen")}}</li> + <li>{{HTMLElement("label")}}</li> + <li>{{HTMLElement("meter")}}</li> + <li>{{HTMLElement("object")}}</li> + <li>{{HTMLElement("output")}}</li> + <li>{{HTMLElement("progress")}}</li> + <li>{{HTMLElement("select")}}</li> + <li>{{HTMLElement("textarea")}}</li> +</ul> + +<p> <span class="short_text" id="result_box" lang="uk"><span>Ця категорія містить кілька підкатегорій</span></span>:</p> + +<dl> + <dt><a name="Form_listed">listed</a></dt> + <dd><span class="short_text" id="result_box" lang="uk"><span>Елементи, перелічені в</span></span> <a href="/en-US/docs/DOM/form.elements" title="DOM/form.elements">form.elements</a> та fieldset.elements IDL колекціях. Містять {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, та {{HTMLElement("textarea")}}.</dd> + <dt><a name="Form_labelable">labelable</a></dt> + <dd><span class="short_text" id="result_box" lang="uk"><span>Елементи, що можна пов'язати</span></span> з {{HTMLElement("label")}} елементами. Містять {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, та {{HTMLElement("textarea")}}.</dd> + <dt><a name="Form_submittable">submittable</a></dt> + <dd><span id="result_box" lang="uk"><span>Елементи, які можуть бути використані для побудови набору даних форми, коли відправляється форма</span></span>. Містять {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, та {{HTMLElement("textarea")}}.</dd> + <dt><a name="Form_resettable">resettable</a></dt> + <dd><span id="result_box" lang="uk"><span>Елементи, які можуть бути скинуті при зміні форми.</span></span> Містять {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}}, та {{HTMLElement("textarea")}}.</dd> +</dl> + +<h2 id="Додаткові_категорії">Додаткові категорії</h2> + +<p><span id="result_box" lang="uk"><span>Є деякі вторинні класифікації елементів, які можуть бути корисними та про які вам треба знати.</span></span></p> + +<h3 id="Елементи_підтримки_скрипту">Елементи підтримки скрипту</h3> + +<p><span id="result_box" lang="uk"><span><strong>Елементи підтримки скрипту</strong> є елементами, які безпосередньо не беруть участі у виводі документа.</span> <span>Замість цього вони виконують роль підтримки скриптів, або безпосередньо містять код, або вказувають на нього, або шляхом визначення даних, які будуть використовуватися скриптом.</span></span></p> + +<p>Елементами підтримки скрипту є:</p> + +<p>{{HTMLElement("script")}} {{HTMLElement("template")}}</p> + +<h2 id="Прозора_модель_вмісту">Прозора модель вмісту</h2> + +<p><span id="result_box" lang="uk"><span>Якщо елемент має прозору модель вмісту, його вміст має бути структурований таким чином, щоб він був дійсним HTML5 кодом, навіть якщо прозорий елемент було вилучено і замінено дочірними елементами.</span></span></p> + +<p>Наприклад, {{HTMLElement("del")}} і {{HTMLELement("ins")}} елементи є прозорими:</p> + +<pre><p>We hold these truths to be <del><em>sacred &amp; undeniable</em></del> <ins>self-evident</ins>.</p> +</pre> + +<p>Навіть якщо ці елементи було вилучено, <span id="result_box" lang="uk"><span>цей фрагмент як і раніше буде дійсним HTML</span></span>.</p> + +<pre><p>We hold these truths to be <em>sacred &amp; undeniable</em> self-evident.</p> +</pre> + +<h2 id="Інші_моделі_вмісту">Інші моделі вмісту</h2> + +<p>Секціонування кореню.</p> diff --git a/files/uk/web/guide/html/html5/index.html b/files/uk/web/guide/html/html5/index.html new file mode 100644 index 0000000000..8ae6ab8dcf --- /dev/null +++ b/files/uk/web/guide/html/html5/index.html @@ -0,0 +1,164 @@ +--- +title: HTML5 +slug: Web/Guide/HTML/HTML5 +translation_of: Web/Guide/HTML/HTML5 +--- +<p><span class="seoSummary"><strong>HTML5</strong> є найновішим стандартом,що описує <a href="/en-US/docs/HTML" title="HTML">HTML</a>. </span>Цей термін представляє дві різні концепції:</p> + +<ul> + <li><span class="seoSummary">Це нова версія <em>мови </em>HTML, з новими елементами, атрибутами і поведінкою</span></li> + <li><span class="seoSummary">Це великий стек <strong>технологій, </strong>котрі надають більшого<strong> </strong>різноманіття та потужності Веб-сайтам та додаткам. </span>Цей набір інколи називають <em>HTML5 & friends, </em>але часто скорочують до <em>HTML5</em>.</li> +</ul> + +<p>Спроектована, для використання всіма розробниками Відкритого Вебу (Open Web), ця сторінка надає посилання до численних ресурсів про HTML5 технологї, розсортованні в декілька груп, в залежності від їх функцій.</p> + +<ul> + <li><em>Семантика</em>: дозволяє описати якомога точніше з чого складається ваш контент.</li> + <li><em>Зв'язок</em>: дозволяє вам взаємодіяти з сервером новим та інноваційним шляхом.</li> + <li><em>Оффлайн та сховище</em>: надає можливість веб-сторінкам зберігати дані на стороні клієнта локально та оперувати оффлайном ефективніше.</li> + <li><em>Мультимедіа</em>: робить відео та аудіо першокласними мешканцями Відкритого Вебу.</li> + <li><em>2D/3D графіка та ефекти</em>: дозволяє безліч презентаційних варіантів.</li> + <li><em>Ефективність та інтеграція</em>: надає більшу оптимізацію швидкості та кращого використання заліза (hardware) комп'ютера. </li> + <li><em>Доступ до пристрою</em>: дозволяє використання різноманітних пристроїв вводу/виводу</li> + <li><em>Стилі</em>: Дозволяє авторам створювати більш складні і витончені теми.</li> +</ul> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 id="сЕМАНТиКА" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">сЕМАНТиКА</h2> + +<dl> + <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines in HTML5</a></dt> + <dd>Огляд нових елементів HTML5 для структуризації контенту: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} and {{HTMLElement("aside")}}.</dd> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Використання відео та аудіо в HTML5</a></dt> + <dd>Елементи {{HTMLElement("audio")}} та {{HTMLElement("video")}} вбудовують та дозволяють керування новим мультимедійним контентом.</dd> + <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">Форми в HTML5</a></dt> + <dd>Огляд <span class="gt-baf-term-text"><span class="gt-baf-cell gt-baf-word-clickable">вдосконален</span></span>ь для веб-форм в HTML5: перевірка обмежень API, декілька нових атрибутів, нові значення для атрибуту {{HTMLElement("input")}} {{htmlattrxref("type", "input")}} а також новий елемент {{HTMLElement("output")}} .</dd> + <dt>Нові семантичні елементи</dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Поруч із розділами, носіями(медіа) та елементами форм</span></span>, в HTML5 є численні нові елементи: {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, або {{HTMLElement("meter")}} та {{HTMLElement("main")}}, що збільшують кількість <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">чинних елементів HTML5</a>.</dd> + <dt><span class="gt-baf-term-text"><span class="gt-baf-cell gt-baf-word-clickable">Вдосконалення в</span></span> {{HTMLElement("iframe")}}</dt> + <dd>Використовуючи атрибути {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, та {{htmlattrxref("srcdoc", "iframe")}}, автори зараз можуть бути певними щодо рівня безпеки та бажаної візуалізації елементу {{HTMLElement("iframe")}}.</dd> + <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt> + <dd>Дозволяє безпосередньо вставлені математичні формули.</dd> + <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Знайомство з HTML5</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">У цьому розділі показано, як вказати браузеру, що ви використовуєте HTML5 у своєму веб-дизайні чи веб-програмі.</span></span></dd> + <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-сумісний парсер</a></dt> + <dd>The parser, which turns the bytes of an HTML document into a DOM, has been extended and now precisely defines the behavior to use in all cases, even when faced with invalid HTML. This leads to far greater predictability and interoperability between HTML5-compliant browsers.</dd> +</dl> + +<h2 id="Звязок" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Зв'язок</h2> + +<dl> + <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> + <dd>Allows creating a permanent connection between the page and the server and to exchange non-HTML data through that means.</dd> + <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt> + <dd>Allows a server to push events to a client, rather than the classical paradigm where the server could send data only in response to a client's request.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd> +</dl> + +<h2 id="Оффлайн_та_сховище" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Оффлайн та сховище</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Offline resources: The application cache</a></dt> + <dd>Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt> + <dd>Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.</dd> + <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG client-side session and persistent storage (aka DOM storage)</a></dt> + <dd>Client-side session and persistent storage allows web applications to store structured data on the client side.</dd> + <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd>IndexedDB is a web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.</dd> + <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Using files from web applications</a></dt> + <dd>Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <span style="font-family: monospace;">{{HTMLElement("input")}}</span> of <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> HTML element's new <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> attribute. There also is <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd> +</dl> + +<h2 id="Мультимедіа" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Мультимедіа</h2> + +<dl> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Using HTML5 audio and video</a></dt> + <dd>The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements embed and allow the manipulation of new multimedia content.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.</dd> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt> + <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd> + <dt>Track and WebVTT</dt> + <dd>The {{HTMLElement("track")}} element allows subtitles and chapters. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> is a text track format.</dd> +</dl> + +<h2 id="3D_Графіка_та_ефекти" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D Графіка та ефекти </h2> + +<dl> + <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas tutorial</a></dt> + <dd>Learn about the new <code>{{HTMLElement("canvas")}}</code> element and how to draw graphs and other objects in Firefox.</dd> + <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 Text API for <code><canvas></code> elements</a></dt> + <dd>The HTML5 text API is now supported by {{HTMLElement("canvas")}} elements.</dd> + <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> + <dd>WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements.</dd> + <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt> + <dd>An XML-based format of vectorial images that can directly be embedded in the HTML.</dd> +</dl> +</div> + +<div class="section"> +<h2 id="Ефективність_та_Інтеграція" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Ефективність та Інтеграція</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> + <dd>Allows delegation of JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.</dd> + <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> level 2</dt> + <dd>Allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions. This is the technology behind <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd> + <dt>JIT-compiling JavaScript engines</dt> + <dd>The new generation of JavaScript engines is much more powerful, leading to greater performance.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> + <dd>Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information.</dd> + <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">The contentEditable Attribute: Transform your website to a wiki!</a></dt> + <dd>HTML5 has standardized the contentEditable attribute. Learn more about this feature.</dd> + <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag and drop</a></dt> + <dd>The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.</dd> + <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Focus management in HTML</a></dt> + <dd>The new HTML5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd> + <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web-based protocol handlers</a></dt> + <dd>You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd> + <dt><a href="/en-US/docs/Web/API/Window/requestAnimationFrame" style="font-weight: bold;" title="Web-based_protocol_handlers">requestAnimationFrame</a></dt> + <dd>Allows control of animations rendering to obtain optimal performance.</dd> + <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt> + <dd>Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online and offline events</a></dt> + <dd>In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.</dd> +</dl> + +<h2 id="Доступ_до_пристрою" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 66px; padding-right: 0.5em; vertical-align: middle; width: 77px;">Доступ до пристрою</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Using the Camera API</a></dt> + <dd>Allows using, manipulating, and storing an image from the computer's camera.</dd> + <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Touch events</a></dt> + <dd>Handlers to react to events created by a user pressing touch screens.</dd> + <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Using geolocation</a></dt> + <dd>Let browsers locate the position of the user using geolocation.</dd> + <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detecting device orientation</a></dt> + <dd>Get the information when the device on which the browser runs changes orientation. This can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.</dd> +</dl> + +<h2 id="Стилі" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Стилі</h2> + +<p id="CSS_has_been_extended_to_be_able_to_style_elements_in_a_much_more_complex_way._This_is_often_referred_as_CSS3_though_CSS_is_not_a_monolithic_specification_any_more_and_the_different_modules_are_not_all_at_level_3_some_are_at_level_1_and_others_at_level_4_with_all_the_intermediate_levels_covered."><a href="/en-US/docs/CSS" title="CSS">CSS</a> has been extended to be able to style elements in a much more complex way. This is often referred as <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, though CSS is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered.</p> + +<dl> + <dt>New background styling features</dt> + <dd>It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">multiple backgrounds</a> can be set.</dd> + <dt>More fancy borders</dt> + <dd>Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.</dd> + <dt>Animating your style</dt> + <dd>Using <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> to animate between different states or using <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> to animate parts of the page without a triggering event, you can now control mobile elements on your page.</dd> + <dt>Typography improvement</dt> + <dd>Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, but also can add a <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">shadow</a> to it or control more precisely its <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.</dd> + <dt>New presentational layouts</dt> + <dd>In order to improve the flexibility of designs, two new layouts have been added: the <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layouts</a> and <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd> +</dl> +</div> +</div> diff --git a/files/uk/web/guide/html/використання_html-секцій_та_структура_документу/index.html b/files/uk/web/guide/html/використання_html-секцій_та_структура_документу/index.html new file mode 100644 index 0000000000..84db2e6a76 --- /dev/null +++ b/files/uk/web/guide/html/використання_html-секцій_та_структура_документу/index.html @@ -0,0 +1,337 @@ +--- +title: Використання HTML-секцій та структура документу +slug: Web/Guide/HTML/Використання_HTML-секцій_та_структура_документу +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +<div class="note"> +<p> В перекладі наводяться терміни <em>схема документу</em> та<em> алгоритм схематизації</em> у відповідності до англійських <em>outline </em>та <em>outline algorithm</em>, оскільки на думку перекладача найбільш точно відповідають змісту, вкладеному в поняття на мові оригінлу.</p> + +<p>Також у відповідності до <em>section</em> та <em>subsection</em> використано <em>розділ </em>та <em>підрозділ</em>, так як в змісті даного документу йдеться більше про великі веб-сторінки, порівнювані із книжками.</p> +</div> + +<div class="warning"> +<p><strong>Зверніть увагу</strong>: На даний момент немає відомих реалізацій алгоритму побудови <em>схеми документа</em> в браузерах чи інших агентах користувачів (assistive technology user agents), проте алгоритм реалізований в ішому програмному забезпеченні, наприклад, в засобах перевірки стандартів (conformance checkers). Therefore the <a href="http://www.w3.org/TR/html5/sections.html#outline">outline</a> algorithm cannot be relied upon to convey document structure to users. Автори рекомендують використовувати <a href="http://www.w3.org/TR/html5/sections.html#rank">ранг</a> заголовку (<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>) для опису структури документу.</p> +</div> + +<p>Специфікація HTML 5 вводить ряд нових елементів, що дозволяють веб-розробникам краще описувати структуру веб-документу використовуючи стандартну семантику. Даний документ описує ці елементи та способи їх використання для створення бажаної схеми документу.</p> + +<h2 id="Структура_документу_в_HTML_4">Структура документу в HTML 4</h2> + +<p>Структура документу, тобто семантична структура, що знаходиться між <code><body></code> і <code></body></code>, — основа представлення сторінки. В HTML4 для опису структури документу використовується форма запису із розділів та підрозділів. Розділ визначається за допомогою елемента ({{HTMLElement("div")}}), в який включаються елементи заголовків ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, або {{HTMLElement("h6")}}), які, власне, і слугують заголовками секцій чи підсекцій. Взаєморозміщення даних елементів утворює структуру документу та будує його схему.</p> + +<p>Таким чином наступна розмітка:</p> + +<div style="overflow: hidden;"> +<pre class="brush:xml"><div class="section" id="forest-elephants" > + <h1>Forest elephants</h1> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <div class="subsection" id="forest-habitat" > + <h2>Habitat</h2> + <p>Forest elephants do not live in trees but among them. + ...this subsection continues... + </div> +</div> +</pre> +</div> + +<p>зводиться до наступної схеми:</p> + +<pre>1. Forest elephants + 1.1 Habitat +</pre> + +<p>Елемент {{HTMLElement("div")}} не оголошує нову секцію. Для цього достатньо наявності тегу заголовка. Таким чином фрамент:</p> + +<pre class="brush:xml"><h1>Forest elephants</h1> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <h2>Habitat</h2> + <p>Forest elephants do not live in trees but among them. + ...this subsection continues... + <h2>Diet</h2> +<h1>Mongolian gerbils</h1> +</pre> + +<p>зумовлює наступну схему:</p> + +<pre>1. Forest elephants + 1.1 Habitat + 1.2 Diet +2. Mongolian gerbils +</pre> + +<h2 id="Проблеми_розв'зані_за_допомогою_HTML5">Проблеми, розв'зані за допомогою HTML5</h2> + +<p>Спосіб визначення структури документу в HTML 4 та обробка її алгоритмом схематизації є досить складнм та зумовлює наступні проблеми:</p> + +<ol> + <li>Використання елементу {{HTMLElement("div")}} для оголошення секцій (розділів) без використання спеціальних класів (значень атрибуту <strong>class</strong>) робить неможливим застосування алгоритму схематизації ("Цей {{HTMLElement("div")}} — частина схеми сторінки, що визначає секцію чи підсекцію?" Чи "це звичайний {{HTMLElement("div")}}-елемент, використаний для стилізації?"). Іншими словами, специфікація HTML 4 дуже неточно визначає межі початку та закінчення розділів. Автоматична генерація схеми документу досить важлива, зокрема для <a href="https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%85%D0%BD%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5_%D1%81%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B2%D0%B0_%D1%80%D0%B5%D0%B0%D0%B1%D0%B8%D0%BB%D0%B8%D1%82%D0%B0%D1%86%D0%B8%D0%B8">реабілітаційних технологій</a>, які адаптують та доносять інформацію до людей (<em>від перекл.:</em> як правило, з обмеженими можливостями) базуючись на структурі документу. HTML 5 усуває труднощі обробки елементу {{HTMLElement("div")}} алгоритмом схематизації, оскільки вводить новий елемент для <em>розділів</em>, {{HTMLElement("section")}}, HTML Section Element.</li> + <li>Merging several documents is hard: inclusion of a sub-document in a main document means changing the level of the HTML Headings Element so that the outline is kept. This is solved in HTML5 as the newly introduced sectioning elements ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} and {{HTMLElement("aside")}}) are always subsections of their nearest ancestor section, regardless of what sections are created by internal headings.</li> + <li>In HTML4, every section is part of the document outline. But documents are often not that linear. A document can have special sections containing information that is not part of, though it is related to, the main flow, like an advertisement block or an explanation box. HTML5 introduces the {{HTMLElement("aside")}} element allowing such sections to not be part of the main outline.</li> + <li>Again, in HTML4, because every section is part of the document outline, there is no way to have sections containing information related not to the document but to the whole site, like logos, menus, table of contents, or copyright information and legal notices. For that purpose, HTML5 introduces three new elements: {{HTMLElement("nav")}} for collections of links, such as a table of contents, {{HTMLElement("footer")}} and {{HTMLElement("header")}} for site-related information. Note that {{HTMLElement("header")}} and {{HTMLElement("footer")}} are not sectioning content like {{HTMLElement("section")}}, rather, they exist to semantically mark up parts of a section.</li> +</ol> + +<p>More generally, HTML5 brings precision to the sectioning and heading features, allowing document outlines to be predictable and used by the browser to improve the user experience.</p> + +<h2 id="Алгоритм_схематизації_HTML_5">Алгоритм схематизації HTML 5</h2> + +<p>Let's consider the algorithms underlying the way HTML handles sections and outlines.</p> + +<h3 id="Defining_sections">Defining sections</h3> + +<p>All content lying inside the {{HTMLElement("body")}} element is part of a section. Sections in HTML5 can be nested. Beside the main section, defined by the {{HTMLElement("body")}} element, section limits are defined either explicitly or implicitly. Explicitly-defined sections are the content within {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} tags. </p> + +<div class="note">Each section can have its own heading hierarchy. Therefore, even a nested section can have an {{HTMLElement("h1")}}. See {{anch("Defining headings")}}</div> + +<p>Let's look at an example — here we have a document with a top level section and a footer defined. Inside the top level section we have three subsections, defined by two {{htmlelement("section")}} elements and an {{htmlelement("aside")}} element:</p> + +<pre class="brush:xml"><section> + + <h1>Forest elephants</h1> + + <section> + <h1>Introduction</h1> + <p>In this section, we discuss the lesser known forest elephants.</p> + </section> + + <section> + <h1>Habitat</h1> + <p>Forest elephants do not live in trees but among them.</p> + </section> + + <aside> + <p>advertising block</p> + </aside> + +</section> + +<footer> + <p>(c) 2010 The Example company</p> +</footer></pre> + +<p>This leads to the following outline:</p> + +<pre>1. Forest elephants + 1.1 Introduction + 1.2 Habitat +</pre> + +<h3 id="Defining_headings">Defining headings</h3> + +<p>While the HTML Sectioning elements define the structure of the document, an outline also needs headings to be useful. The basic rule is simple: the first HTML heading element (one of {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) defines the heading of the current section.</p> + +<p>The heading elements have a <em>rank</em> given by the number in the element name, where {{HTMLElement("h1")}} has the <em>highest</em> rank, and {{HTMLElement("h6")}} has the <em>lowest</em> rank. Relative ranking matters only within a section; the structure of the sections determines the outline, not the heading rank of the sections. For example, consider this code:</p> + +<pre class="brush:xml"><section> + <h1>Forest elephants</h1> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <section> + <h2>Habitat</h2> + <p>Forest elephants do not live in trees but among them. + ...this subsection continues... + </section> +</section> +<section> + <h3>Mongolian gerbils</h3> + <p>In this section, we discuss the famous mongolian gerbils. + ...this section continues... +</section></pre> + +<p>This creates the following outline:</p> + +<pre>1. Forest elephants + 1.1 Habitat +2. Mongolian gerbils</pre> + +<p>Note that the rank of the heading element (in the example {{HTMLElement("h1")}} for the first top-level section, {{HTMLElement("h2")}} for the subsection and {{HTMLElement("h3")}} for the second top-level section) is not important. (Any rank can be used as the heading of an explicitly-defined section, although this practice is not recommended.)</p> + +<h3 id="Implicit_sectioning">Implicit sectioning</h3> + +<p>Because the HTML5 Sectioning Elements aren't mandatory to define an outline, to keep compatibility with the existing web dominated by HTML4, there is a way to define sections without them. This is called <em>implicit sectioning</em>.</p> + +<p>The heading elements ({{HTMLElement("h1")}} to {{HTMLElement("h6")}}) define a new, implicit, section when they aren't the first heading of their parent, explicit, sections. The way this implicit section is positioned in the outline is defined by its relative rank with the previous heading in their parent section. If it is of a lower rank than the previous heading, it opens an implicit sub-section of the section. This code:</p> + +<pre class="brush:xml"><section> + <h1>Forest elephants</h1> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <h3 class="implicit subsection">Habitat</h3> + <p>Forest elephants do not live in trees but among them. + ...this subsection continues... +</section></pre> + +<p>leading to the following outline:</p> + +<pre>1. Forest elephants + 1.1 Habitat <em>(implicitly defined by the h3 element)</em> +</pre> + +<p>If it is of the same rank as the previous heading, it closes the previous section (which may have been explicit!) and opens a new implicit one at the same level: </p> + +<pre class="brush:xml"><section> + <h1>Forest elephants</h1> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <h1 class="implicit section">Mongolian gerbils</h1> + <p>Mongolian gerbils are cute little mammals. + ...this section continues... +</section></pre> + +<p>leading to the following outline: </p> + +<pre>1. Forest elephants +2. Mongolian gerbils <em>(implicitly defined by the h1 element, which closed the previous section at the same time)</em> +</pre> + +<p>If it is of a higher rank than the previous heading, it closes the previous section and opens a new implicit one at the higher level:</p> + +<pre class="brush:xml"><body> + <h1>Mammals</h1> + <h2>Whales</h2> + <p>In this section, we discuss the swimming whales. + ...this section continues... + <section> + <h3>Forest elephants</h3> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <h3>Mongolian gerbils</h3> + <p>Hordes of gerbils have spread their range far beyond Mongolia. + ...this subsection continues... + <h2>Reptiles</h2> + <p>Reptiles are animals with cold blood. + ...this section continues... + </section> +</body></pre> + +<p>leading to the following outline:</p> + +<pre>1. Mammals + 1.1 Whales <em>(implicitly defined by the h2 element)</em> + 1.2 Forest elephants <em>(explicitly defined by the section element)</em> + 1.3 Mongolian gerbils <em>(implicitly defined by the h3 element, which closes the previous section at the same time)</em> +2. Reptiles <em>(implicitly defined by the h2 element, which closes the previous section at the same time)</em> +</pre> + +<p>This is not the outline that one might expect by quickly glancing at the heading tags. To make your markup human-understandable, it is a good practice to use explicit tags for opening and closing sections, and to match the heading rank to the intended section nesting level. However, this is not required by the HTML5 specification. If you find that browsers are rendering your document outline in unexpected ways, check whether you have sections that are implicitly closed by heading elements.</p> + +<p>An exception to the rule of thumb that heading rank should match the section nesting level is for sections that may be reused in multiple documents. For example, a section might be stored in a content-management system and assembled into documents at run time. In this case, a good practice is to start at {{HTMLElement("h1")}} for the top heading level of the reusable section. The nesting level of the reusable section will be determined by the section hierarchy of the document in which it appears. Explicit section tags are still helpful in this case.</p> + +<h3 id="Sectioning_roots"><a name="sectioning_root">Sectioning roots</a></h3> + +<p> A <a id="sectioning root" name="sectioning root">sectioning root</a> is an HTML element that can have its own outline, but the sections and headings inside it does not contribute to the outline of its ancestor. Beside {{HTMLElement("body")}} which is the logical sectioning root of a document, these are often elements that introduce external content to the page: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} and {{HTMLElement("td")}}.</p> + +<p>Example:</p> + +<pre class="brush:xml"><section> + <h1>Forest elephants</h1> + <section> + <h2>Introduction</h2> + <p>In this section, we discuss the lesser known forest elephants</p> + </section> + <section> + <h2>Habitat</h2> + <p>Forest elephants do not live in trees but among them. Let's + look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p> + <blockquote> + <h1>Borneo</h1> + <p>The forest element lives in Borneo...</p> + </blockquote> + </section> +</section> +</pre> + +<p>This example results in the following outline:</p> + +<pre>1. Forest elephants + 1.1 Introduction + 1.2 Habitat</pre> + +<p>This outline doesn't contain the internal outline of the {{HTMLElement("blockquote")}} element, which, being an external citation, is a sectioning root and isolates its internal outline.</p> + +<h3 id="Sections_outside_the_outline">Sections outside the outline</h3> + +<p> HTML5 introduces two new elements that allow defining sections that don't belong to the main outline of a web document:</p> + +<ol> + <li>The HTML Aside Section Element ({{HTMLElement("aside")}}) defines a section that, though related to the main element, doesn't belong to the main flow, like an explanation box or an advertisement. It has its own outline, but doesn't belong to the main one.</li> + <li>The HTML Navigational Section Element ({{HTMLElement("nav")}}) defines a section that contains navigation links. There can be several of them in a document, for example one with page internal links like a table of contents, and another with site navigational links. These links are not part of the main document flow and outline, and are generally not initially rendered by screen readers and similar assistive technologies.</li> +</ol> + +<h3 id="Headers_and_Footers">Headers and Footers</h3> + +<p>HTML5 also introduces two new elements that can be used to mark up the header and the footer of a section:</p> + +<ol> + <li>The HTML Header Element ({{HTMLElement("header")}}) defines a page header — typically containing the logo and name of the site and possibly a horizontal menu — or section header, containing perhaps the section's heading, author name, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("header")}}. Despite its name, it is not necessarily positioned at the beginning of the page or section.</li> + <li>The HTML Footer Element ({{HTMLElement("footer")}}) defines a page footer — typically containing the copyright and legal notices and sometimes some links — or section footer, containing perhaps the section's publication date, license information, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("footer")}}. Despite its name, it is not necessarily positioned at the end of the page or section.</li> +</ol> + +<p>These do not create new sections in the outline, rather, they mark up content inside sections of the page.</p> + +<h2 id="Addresses_in_sectioning_elements">Addresses in sectioning elements</h2> + +<p>The author of a document often wants to publish some contact information, such as the author's name and address. HTML4 allowed this via the {{HTMLElement("address")}} element, which has been extended in HTML5.</p> + +<p>A document can be made of different sections from different authors. A section from another author than the one of the main page is defined using the {{HTMLElement("article")}} element. Consequently, the {{HTMLElement("address")}} element is now linked to its nearest {{HTMLElement("body")}} or {{HTMLElement("article")}} ancestor.</p> + +<h2 id="Using_HTML5_elements_in_non-HTML5_browsers">Using HTML5 elements in non-HTML5 browsers</h2> + +<p>Sections and headings elements should work in most non-HTML5 browsers. Though unsupported, they don't need a special DOM interface and they only need a specific CSS styling as unknown elements are styled as <code>display:inline</code> by default:</p> + +<pre class="brush: css">section, article, aside, footer, header, nav, hgroup { + display:block; +} +</pre> + +<p>Of course the web developer can style them differently, but keep in mind that in a non-HTML5 browser, the default styling is different from what is expected for such elements. Also note that the {{HTMLElement("time")}} element has not been included, because the default styling for it in a non-HTML5 browser is the same as the one in an HTML5-compatible one.</p> + +<p>This method has its limitation though, as some browsers do not allow styling of unsupported elements. That is the case of the Internet Explorer (version 8 and earlier), which need a specific script to allow this:</p> + +<pre class="brush:xml"><!--[if lt IE 9]> + <script> + document.createElement("header" ); + document.createElement("footer" ); + document.createElement("section"); + document.createElement("aside" ); + document.createElement("nav" ); + document.createElement("article"); + document.createElement("hgroup" ); + document.createElement("time" ); + </script> +<![endif]--></pre> + +<p>This script means that, in the case of Internet Explorer (8 and earlier), scripting should be enabled in order to display HTML5 sectioning and headings elements properly. If not, they won't be displayed, which may be problematic as these elements are likely defining the structure of the whole page. That's why an explicit {{HTMLElement("noscript")}} element should be added for this case:</p> + +<pre class="brush:xml"><noscript> + <strong>Warning !</strong> + Because your browser does not support HTML5, some elements are simulated using JScript. + Unfortunately your browser has disabled scripting. Please enable it in order to display this page. +</noscript></pre> + +<p>This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:</p> + +<pre class="brush:xml"><!--[if lt IE 9]> + <script> + document.createElement("header" ); + document.createElement("footer" ); + document.createElement("section"); + document.createElement("aside" ); + document.createElement("nav" ); + document.createElement("article"); + document.createElement("hgroup" ); + document.createElement("time" ); + </script> + <noscript> + <strong>Warning !</strong> + Because your browser does not support HTML5, some elements are created using JavaScript. + Unfortunately your browser has disabled scripting. Please enable it in order to display this page. + </noscript> +<![endif]--></pre> + +<h2 id="Підсумок">Підсумок</h2> + +<p>Нові семантичні елементи, що були введені стандартом HTML5 забезпечили можливість описувати структуру документу єдиним стандартеризованим способом. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, with very few burdens, can be made to work also in non-HTML5 browsers. Therefore they should be used without restrictions.</p> + +<div>{{HTML5ArticleTOC()}}</div> diff --git a/files/uk/web/guide/index.html b/files/uk/web/guide/index.html new file mode 100644 index 0000000000..c11dfa4089 --- /dev/null +++ b/files/uk/web/guide/index.html @@ -0,0 +1,66 @@ +--- +title: Довідник веб-розробника +slug: Web/Guide +tags: + - Guide + - Landing + - TopicStub + - Web +translation_of: Web/Guide +--- +<p><strong>Ці статті нададуть Вам практичні рекомендації, що допоможуть з ефективністю використовувати специфічні технології та АРІ. </strong></p> + +<div> +<div> +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt class="landingPageList"><a href="https://developer.mozilla.org/uk/docs/Web/Guide/HTML">Довідник розробника HTML</a></dt> + <dd class="landingPageList"><strong>Мова розмітки гіпертексту (англ. <em>HyperText Markup Language</em> - HTML)</strong> - основна мова майже всього веб-контенту. Більша частина того, що ти бачиш на екрані, описано, в основному, з використанням HTML.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS">Довідник розробника CSS</a></dt> + <dd class="landingPageList">Каскадні таблиці стилів (англ. <em>Cascading Style Sheets</em> - CSS) - мова таблиць стилів, що використовується для опису відображення документу, написанного мовою HTML.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events">Довідник розробника з подій</a></dt> + <dd class="landingPageList">Події відносяться як до шаблонів дизайну, які застосовують для асинхронного регулювання різних інцидентів, що виникають протягом терміну експлуатації веб-сторінки, так і для означення імен, характеристик та застосування великої кількості інцидентів різних типів.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Graphics">Графіка в Мережі</a></dt> + <dd class="landingPageList">Сучасні веб-сайти та додатки часто потребують відобразити графіку різної складності.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API">Путівник до Веб API</a></dt> + <dd class="landingPageList">Список усіх Веб АРІ та що вони роблять.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt> + <dd>JavaScript є потужною скриптовою мовою для створення веб-додатків.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Localizations_and_character_encodings">Локалізація та кодування символів</a></dt> + <dd class="landingPageList">Браузери внутрішньо обробляють текст як Unicode. Однак, спосіб представлення символів в бітовому значенні (кодування символів) використовується для передачі тексту через мережу до браузера. <a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">HTML специфікація рекомендує</a> використання кодування UTF-8 (яке здатне відображати Unicode цілком) і не залежно від того, яке кодування було використано, вимагає від Веб-контенту оголошення цього кодування.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile">Розробка мобільного інтернету</a></dt> + <dd class="landingPageList">Ця сторінка представляє огляд деяких з основних технік, необхідних для оформлення веб-сайтів, що будуть добре працювати на мобільних пристроях. Якщо ви шукаєте інформацію про проект Mozilla's Firefox OS, відвідайте сторінку <a href="https://developer.mozilla.org/en/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a>. Або ж вас може зацікавити <a href="https://developer.mozilla.org/en/Mozilla/Firefox_for_Android" title="Firefox for Android">Firefox для Android</a>.</dd> +</dl> + +<dl> +</dl> +</div> + +<div class="section"> +<dl> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance">Оптимізація та продуктивність</a></dt> + <dd class="landingPageList">Розробляючи сучасні веб-додатки та сайти, важливо забезпечити їх високу продуктивність. Тобто, зробити так, щоб все у них працювало швидко та ефективно. Це дозволяє їм оптимально працювати як у користувачів потужних десктопних систем та і на менш потужних мобільних пристроях. </dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Парсування та серіалізація XML</a></dt> + <dd class="landingPageList">Веб-платформи надають наступні об’єкти для парсування та серіалізації XML:</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/SVG-in-OpenType">SVG-in-OpenType</a></dt> + <dd class="landingPageList">Формат SVG-in-OpenType на даний момент працює в руках <a class="external external-icon" href="http://mpeg.chiariglione.org/">MPEG group</a>. Як тільки ми будемо готові для ширшого затвердження, інформація з <a class="external external-icon" href="https://wiki.mozilla.org/SVGOpenTypeFonts">wiki.mozilla.org</a> буде переміщена сюди, оновлена і розширена.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF">The Web Open Font Format (WOFF)</a></dt> + <dd class="landingPageList"><strong>Відкритий формат шрифту для Веб (англ. </strong><em>the <strong>Web Open Font Format - WOFF</strong></em>) відкритий формат шрифтів, розроблений Mozilla спільно з Type Supply, LettError, та іншими організаціями.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience">Користувацький досвід</a></dt> + <dd class="landingPageList">Якщо ви хочете, щоб користувачі повертались і використовували ваш додаток чи веб-сайт знову і знову, для вас важливо зробити досвід користування ним приємним. Тут ви зможете знайти статті, що зможуть допомогти в цьому. </dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects">Використання об’єктів форм даних</a></dt> + <dd class="landingPageList">Об’єкти <a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData" title="en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> дозволяють вам поєднувати набір ключ/значення для відправки з використанням <code>XMLHttpRequest (запитів)</code>. Спершу призначені для використання в надсиланні форм даних, але можуть бути використані незалежно від форм для передачі зашифрованих даних. Дані, що передаються, мають такий же формат, як і у методі форми <code>submit(), </code>яка була б використана для відправки даних якби кодування форми було визначено як "multipart/form-data".</dd> + <dt class="landingPageList"><a href="/en-US/docs/Glossary">Глоссарій</a></dt> + <dd class="landingPageList">Дає визначення численним технічним термінам, пов’язаним з Мережею та інтернетом.</dd> +</dl> +</div> +</div> +</div> +</div> + +<h2 id="Дивись_також">Дивись також</h2> + +<ul> + <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web Developer Reference</a></li> +</ul> diff --git a/files/uk/web/guide/графіка/index.html b/files/uk/web/guide/графіка/index.html new file mode 100644 index 0000000000..57af0fdbc3 --- /dev/null +++ b/files/uk/web/guide/графіка/index.html @@ -0,0 +1,49 @@ +--- +title: Графіка для Web +slug: Web/Guide/Графіка +tags: + - 2D + - 3D + - Canvas + - HTML5 + - SVG + - WebGL + - WebRTC + - Веб + - Графіка +translation_of: Web/Guide/Graphics +--- +<p><span class="seoSummary">Сучасним сайтам і веб-додаткам потрібне відображення графіки.</span> Статичні зображення легко зобразити використовуючи елемент {{HTMLElement("img")}}, чи налаштувати фон HTML елементів використовуючи властивість {{cssxref("background-image")}}. Ви також можете конструювати графіку на льоту, або модифікувати її після. <span class="seoSummary">В статтях далі сказано як це можна зробити.</span></p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="2D_Графіка">2D Графіка</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Canvas">Canvas</a></dt> + <dd>Елемент {{HTMLElement("canvas")}} надає зручні API для малювання 2D графіки використовуючи JavaScript.</dd> + <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt> + <dd>Scalable Vector Graphics (SVG) дозволяє використовувати лінії, криві, та інші геометричні фігури для рендерингу графіки. З векторів, ви можете створювати зображення які не втрачають якості при маштабуванні.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">Переглянути все...</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" id="3D_Графіка">3D Графіка</h2> + +<dl> + <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dd>Посібник для початку роботи з WebGL, API для роботи з 3D графікою в веб. Ця технологія дає вам можливість використовувати стандартний OpenGL ES в Web контенті.</dd> +</dl> + +<h2 id="Відео">Відео</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">Використання HTML5 аудіо і відео</a></dt> + <dd>Вбудовування відео і/або аудіо в веб-сторінки і керування відтворенням.</dd> + <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt> + <dd>RTC в WebRTC означає Real-Time Communications (комунікація в реальному часі), технологія яка дозволяє передавати потокове аудіо/відео і дані між кліентами браузера (пірами).</dd> +</dl> +</div> +</div> |