diff options
Diffstat (limited to 'files/uk/learn/html')
11 files changed, 2838 insertions, 0 deletions
diff --git a/files/uk/learn/html/forms/index.html b/files/uk/learn/html/forms/index.html new file mode 100644 index 0000000000..be1e8bd595 --- /dev/null +++ b/files/uk/learn/html/forms/index.html @@ -0,0 +1,77 @@ +--- +title: Веб-форми +slug: Learn/HTML/Forms +translation_of: Learn/Forms +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Цей модуль містить низку статей, що допоможуть Вам освоїти форми в HTML. HTML форми дуже потужний інструмент для взаємодії з користувачами, хоча з історичних та технічних проблем є не завжди очевидним, як повністю використовувати їхній потенціал. В цьому путівнику ми розкриємо усі аспекти HTML форм, починаючи від структури до стилів, від обробки даних до віджетів користувачів.</p> + +<h2 id="Передумови">Передумови</h2> + +<p>Перед початком цього модуля Вам необхідно щонайменше пройти <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a>.</p> + +<div class="note"> +<p><strong>Нотатка</strong>: Якщо Ви працюєте на компьютері/планшеті/іншому пристрої на якому Ви не маєте можливості створити власні файли, Ви можете спробувати онлайн редактори для написання коду такі як <a href="http://jsbin.com/">JSBin</a> чи <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Основні_інструкції">Основні інструкції</h2> + +<p>В наступних посібниках Ви зможете вивчити основи HTML форм і пізніше освоїти дещо складніші теми.</p> + +<p><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Ваша перша HTML форма</a></p> + +<p>Перша стаття з нашої серії надасть Вам необхідний досвід в створенні HTML форми, включаючи проектування простої форми, реалізацїю її використовуючи правильні HTML елементи, додавання деяких дуже простих стілів за допомогою CSS і відправлення даних на сервер.</p> + +<p><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Як структурувати HTML форму</a></p> + +<p>Спираючись на основи, тепер ми більш детально поглянемо на елементи, які використовуються для забезпечення структури і значення різних частин форми.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Рідні віджети форми</a></dt> + <dt></dt> + <dt>Тепер ми поглянемо на функціональність різних віджетів форм більш детально, розглянувши які налаштування доступні для одержання різних видів інформації.</dt> + <dd></dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Надсилання даних форми</a></dt> + <dd>В цій статті розглянемо, що відбувається, коли корисувач надсилає форму — куди надходить інформація, і як ми її обробляємо коли вона туди потрапляє? <span id="result_box" lang="uk"><span>Ми також розглянемо деякі проблеми безпеки, пов'язані з надсиланням даних форми.</span></span></dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Підтвердження даних форми</a></dt> + <dd>Надсилання даних недостатньо — нам також потрібно впевнитися, що дані, надані користувачем у формі, коректні для їх успішної подальшої обробки і вони не нашкодять нашій програмі. Ми також хочемо допомогти нашим користувачам заповнити наші форми правильно і не розчаруватися під час спроби використання наших додатків. Відправлення форми забезпечує виконання поставлених перед нами цілей - ця стання донесе Вам те, що Ви маєте знати.</dd> +</dl> + +<h2 id="Розширені_інструкції">Розширені інструкції</h2> + +<p>Ці інструкції дозволять поглянути на більш розширені варіанти форм, які Ви знайдете корисними після освоєння основ застосування форм.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Як створювати користувацькі віджети форм</a></dt> + <dd>Ви стикнетесь з випадками, в яких стандартні віджети форм не зможуть забезпечити Вам всього, чого Ви потребуєте через невідповідний стиль чи недостатню функціональність. В таких випадках Вам потрібно буде створити власний віджет форми використовуючи чистий HTML. У цій статті пояснюється як Ви можете зробити це та що потрібно при цьому знати із практичними прикладами.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Надсилання форми використовуючи JavaScript</a></dt> + <dd>Ця стання покаже Вам шляхиThis article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></dt> + <dd>Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/HTML5_updates">HTML5 form updates</a></dt> + <dd>This article provides a reference to the new additions we saw added to HTML forms by the HTML5 spec.</dd> +</dl> + +<h2 id="Form_styling_guides">Form styling guides</h2> + +<p>These guides to styling forms with CSS really belong in the <a href="/en-US/docs/Learn/CSS">CSS</a> Learning Area topic, but we are keeping them here for now until we find the time to move them.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></dt> + <dd>This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></dt> + <dd>Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.</dd> + <dt><a href="/en-US/docs/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></dt> + <dd>This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>TBD</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Element#Forms">HTML forms element reference</a></li> +</ul> diff --git a/files/uk/learn/html/forms/your_first_form/index.html b/files/uk/learn/html/forms/your_first_form/index.html new file mode 100644 index 0000000000..e34ac6a346 --- /dev/null +++ b/files/uk/learn/html/forms/your_first_form/index.html @@ -0,0 +1,298 @@ +--- +title: Your first form +slug: Learn/HTML/Forms/Your_first_form +translation_of: Learn/Forms/Your_first_form +--- +<div>{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</div> + +<p class="summary">Першa стаття в нашій серії допоможе вам у створенні власної першої інтернет-форми, включаючи розробку простої форми, реалізуючи її за допомогою використання елементів керування формою в HTML і інших HTML елементів, добавляючи деякі дуже прості стилі в CSS, і обписуючи як дані надсилаються на сервер. В цьому модулі ми розгорнемо кожну з вищенаведених тем.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Вимоги:</th> + <td>Загальна комп'ютерна грамотність, і базове <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">розуміння HTML</a>.</td> + </tr> + <tr> + <th scope="row">Мета:</th> + <td>Зрозуміти, що таке інтернет-форми, для чого вони використовується, як обдумувати їхнє оформлення, і основні HTML елементи, які потрібні в нескладних випадках</td> + </tr> + </tbody> +</table> + +<h2 id="Що_таке_інтернет-форми">Що таке інтернет-форми?</h2> + +<p><strong>Web forms</strong> are one of the main points of interaction between a user and a web site or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage (see <a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Sending form data</a> later in the module), or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a UI feature).</p> + +<p>A<strong> </strong>web form's HTML is made up of one or more <strong>form controls</strong> (sometimes called <strong>widgets</strong>), plus some additional elements to help structure the overall form — they are often referred to as <strong>HTML forms</strong>. The controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the {{htmlelement("input")}} element, although there are some other elements to learn about too.</p> + +<p>Form controls can also be programmed to enforce specific formats or values to be entered (<strong>form validation</strong>), and paired with text labels that describe their purpose to both sighted and blind users.</p> + +<h2 id="Designing_your_form">Designing your form</h2> + +<p>Before starting to code, it's always better to step back and take the time to think about your form. Designing a quick mockup will help you to define the right set of data you want to ask your user to enter. From a user experience (UX) point of view, it's important to remember that the bigger your form, the more you risk frustrating people and losing users. Keep it simple and stay focused: ask only for the data you absolutely need.</p> + +<p>Designing forms is an important step when you are building a site or application. It's beyond the scope of this article to cover the user experience of forms, but if you want to dig into that topic you should read the following articles:</p> + +<ul> + <li>Smashing Magazine has some <a href="https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-1/" rel="external" title="http://uxdesign.smashingmagazine.com/tag/forms/">good articles about forms UX</a>, including an older but still relevant <a href="https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/" rel="external" title="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/">Extensive Guide To Web Form Usability</a> article.</li> + <li>UXMatters is also a very thoughtful resource with good advice from <a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external" title="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php">basic best practices</a> to complex concerns such as <a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php" title="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">multi-page forms</a>.</li> +</ul> + +<p>In this article, we'll build a simple contact form. Let's make a rough sketch.</p> + +<p><img alt="The form to build, roughly sketch" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; display: block; height: 352px; margin: 0px auto; width: 400px;"></p> + +<p>Our form will contain three text fields and one button. We are asking the user for their name, their e-mail and the message they want to send. Hitting the button will send their data to a web server.</p> + +<h2 id="Active_learning_Implementing_our_form_HTML">Active learning: Implementing our form HTML</h2> + +<p>Ok, let's have a go at creating the HTML for our form. We will use the following HTML elements: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}}, and {{HTMLelement("button")}}.</p> + +<p>Before you go any further, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">simple HTML template</a> — you'll enter your form HTML into here.</p> + +<h3 id="The_HTMLelementform_element">The {{HTMLelement("form")}} element</h3> + +<p>All forms start with a {{HTMLelement("form")}} element, like this:</p> + +<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> + +</form></pre> + +<p>This element formally defines a form. It's a container element like a {{HTMLelement("section")}} or {{HTMLelement("footer")}} element, but specifically for containing forms; it also supports some specific attributes to configure the way the form behaves. All of its attributes are optional, but it's standard practice to always set at least the <a href="/en-US/docs/Web/HTML/Attributes/action"><code>action</code></a> and <a href="/en-US/docs/Web/HTML/Attributes/method"><code>method</code></a> attributes:</p> + +<ul> + <li>The <code>action</code> attribute defines the location (URL) where the form's collected data should be sent when it is submitted.</li> + <li>The <code>method</code> attribute defines which HTTP method to send the data with (usually <code>get</code> or <code>post</code>).</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: We'll look at how those attributes work in our <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a> article later on.</p> +</div> + +<p>For now, add the above {{htmlelement("form")}} element into your HTML {{htmlelement("body")}}.</p> + +<h3 id="The_HTMLelementlabel_HTMLelementinput_and_HTMLelementtextarea_elements">The {{HTMLelement("label")}}, {{HTMLelement("input")}}, and {{HTMLelement("textarea")}} elements</h3> + +<p>Our contact form is not complex: the data entry portion contains three text fields, each with a corresponding {{HTMLelement("label")}}:</p> + +<ul> + <li>The input field for the name is a {{HTMLelement("input/text", "single-line text field")}}.</li> + <li>The input field for the e-mail is an {{HTMLelement("input/email", "input of type email")}}: a single-line text field that accepts only e-mail addresses.</li> + <li>The input field for the message is a {{HTMLelement("textarea")}}; a multiline text field.</li> +</ul> + +<p>In terms of HTML code we need something like the following to implement these form widgets:</p> + +<pre class="brush:html;" dir="rtl"><form action="/my-handling-form-page" method="post"> + <ul> + <li> + <label for="name">Name:</label> + <input type="text" id="name" name="user_name"> + </li> + <li> + <label for="mail">E-mail:</label> + <input type="email" id="mail" name="user_mail"> + </li> + <li> + <label for="msg">Message:</label> + <textarea id="msg" name="user_message"></textarea> + </li> + </ul> +</form></pre> + +<p>Update your form code to look like the above.</p> + +<p>The {{HTMLelement("li")}} elements are there to conveniently structure our code and make styling easier (see later in the article). For usability and accessibility, we include an explicit label for each form control. Note the use of the<a href="/en-US/docs/Web/HTML/Attributes/for"> <code>for</code> </a>attribute on all {{HTMLelement("label")}} elements, which takes as its value the <a href="/en-US/docs/Web/HTML/Attributes/id"><code>id</code></a> of the form control with which it is associated — this is how you associate a form with its label.</p> + +<p>There is great benefit to doing this — it associates the label with the form control, enabling mouse, trackpad, and touch device users to click on the label to activate the corresponding control, and it also provides an accessible name for screen readers to read out to their users. You'll find further details of form labels in <a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">How to structure a web form</a>.</p> + +<p>On the {{HTMLelement("input")}} element, the most important attribute is the <code>type</code> attribute. This attribute is extremely important because it defines the way the {{HTMLelement("input")}} element appears and behaves. You'll find more about this in the <a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Basic native form controls</a> article later on.</p> + +<ul> + <li>In our simple example, we use the value {{HTMLelement("input/text")}} for the first input — the default value for this attribute. It represents a basic single-line text field that accepts any kind of text input.</li> + <li>For the second input, we use the value {{HTMLelement("input/email")}}, which defines a single-line text field that only accepts a well-formed e-mail address. This turns a basic text field into a kind of "intelligent" field that will perform some validation checks on the data typed by the user. It also causes a more appropriate keyboard layout for entering email addresses (e.g. with an @ symbol by default) to appear on devices with dynamic keyboards, like smartphones. You'll find out more about form validation in the <a href="/en-US/docs/Learn/Forms/Form_validation">client-side form validation</a> article later on.</li> +</ul> + +<p>Last but not least, note the syntax of <code><input></code> vs. <code><textarea></textarea></code>. This is one of the oddities of HTML. The <code><input></code> tag is an empty element, meaning that it doesn't need a closing tag. {{HTMLElement("textarea")}} is not an empty element, meaning it should be closed it with the proper ending tag. This has an impact on a specific feature of forms: the way you define the default value. To define the default value of an {{HTMLElement("input")}} element you have to use the <a href="/en-US/docs/Web/HTML/Attributes/value"><code>value</code></a> attribute like this:</p> + +<pre class="brush:html;"><input type="text" value="by default this element is filled with this text"></pre> + +<p>On the other hand, if you want to define a default value for a {{HTMLElement("textarea")}}, you put it between the opening and closing tags of the {{HTMLElement("textarea")}} element, like this:</p> + +<pre class="brush:html;"><textarea> +by default this element is filled with this text +</textarea></pre> + +<h3 id="The_HTMLelementbutton_element">The {{HTMLelement("button")}} element</h3> + +<p>The markup for our form is almost complete; we just need to add a button to allow the user to send, or "submit", their data once they have filled out the form. This is done by using the {{HTMLelement("button")}} element; add the following just above the closing <code></form></code> tag:</p> + +<pre class="brush:html;"><li class="button"> + <button type="submit">Send your message</button> +</li></pre> + +<p>The {{htmlelement("button")}} element also accepts a <code>type</code> attribute — this accepts one of three values: <code>submit</code>, <code>reset</code>, or <code>button</code>.</p> + +<ul> + <li>A click on a <code>submit</code> button (the default value) sends the form's data to the web page defined by the <code>action</code> attribute of the {{HTMLelement("form")}} element.</li> + <li>A click on a <code>reset</code> button resets all the form widgets to their default value immediately. From a UX point of view, this is considered bad practice, so you should avoid using this type of button unless you really have a good reason to include one.</li> + <li>A click on a <code>button</code> button does... nothing! That sounds silly, but it's amazingly useful for building custom buttons — you can define their chosen functionality with JavaScript.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: You can also use the {{HTMLElement("input")}} element with the corresponding <code>type</code> to produce a button, for example <code><input type="submit"></code>. The main advantage of the {{HTMLelement("button")}} element is that the {{HTMLelement("input")}} element only allows plain text in its label whereas the {{HTMLelement("button")}} element allows full HTML content, allowing more complex, creative button content.</p> +</div> + +<h2 id="Basic_form_styling">Basic form styling</h2> + +<p>Now that you have finished writing your form's HTML code, try saving it and looking at it in a browser. At the moment, you'll see that it looks rather ugly.</p> + +<div class="note"> +<p><strong>Note</strong>: If you don't think you've got the HTML code right, try comparing it with our finished example — see <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html">first-form.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html">also see it live</a>).</p> +</div> + +<p>Forms are notoriously tricky to style nicely. It is beyond the scope of this article to teach you form styling in detail, so for the moment we will just get you to add some CSS to make it look OK.</p> + +<p>First of all, add a {{htmlelement("style")}} element to your page, inside your HTML head. It should look like so:</p> + +<pre class="brush: html"><style> + +</style></pre> + +<p>Inside the <code>style</code> tags, add the following CSS:</p> + +<pre class="brush:css;">form { + /* Center the form on the page */ + margin: 0 auto; + width: 400px; + /* Form outline */ + padding: 1em; + border: 1px solid #CCC; + border-radius: 1em; +} + +ul { + list-style: none; + padding: 0; + margin: 0; +} + +form li + li { + margin-top: 1em; +} + +label { + /* Uniform size & alignment */ + display: inline-block; + width: 90px; + text-align: right; +} + +input, +textarea { + /* To make sure that all text fields have the same font settings + By default, textareas have a monospace font */ + font: 1em sans-serif; + + /* Uniform text field size */ + width: 300px; + box-sizing: border-box; + + /* Match form field borders */ + border: 1px solid #999; +} + +input:focus, +textarea:focus { + /* Additional highlight for focused elements */ + border-color: #000; +} + +textarea { + /* Align multiline text fields with their labels */ + vertical-align: top; + + /* Provide space to type some text */ + height: 5em; +} + +.button { + /* Align buttons with the text fields */ + padding-left: 90px; /* same size as the label elements */ +} + +button { + /* This extra margin represent roughly the same space as the space + between the labels and their text fields */ + margin-left: .5em; +}</pre> + +<p>Save and reload, and you'll see that your form should look much less ugly.</p> + +<div class="note"> +<p><strong>Note</strong>: You can find our version on GitHub at <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">first-form-styled.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">also see it live</a>).</p> +</div> + +<h2 id="Sending_form_data_to_your_web_server">Sending form data to your web server</h2> + +<p>The last part, and perhaps the trickiest, is to handle form data on the server side. The {{HTMLelement("form")}} element defines where and how to send the data thanks to the <a href="/en-US/docs/Web/HTML/Attributes/action"><code>action</code></a> and <a href="/en-US/docs/Web/HTML/Attributes/method"><code>method</code></a> attributes.</p> + +<p>We provide a <a href="/en-US/docs/Web/HTML/Attributes/name"><code>name</code></a> to each form control. The names are important on both the client- and server-side; they tell the browser which name to give each piece of data and, on the server side, they let the server handle each piece of data by name. The form data is sent to the server as name/value pairs.</p> + +<p>To name the data in a form you need to use the <code>name</code> attribute on each form widget that will collect a specific piece of data. Let's look at some of our form code again:</p> + +<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> + <ul> + <li> + <label for="name">Name:</label> + <input type="text" id="name" name="user_name" /> + </li> + <li> + <label for="mail">E-mail:</label> + <input type="email" id="mail" name="user_email" /> + </li> + <li> + <label for="msg">Message:</label> + <textarea id="msg" name="user_message"></textarea> + </li> + + ... +</pre> + +<p>In our example, the form will send 3 pieces of data named "<code>user_name</code>", "<code>user_email</code>", and "<code>user_message</code>". That data will be sent to the URL "<code>/my-handling-form-page</code>" using the <a href="/en-US/docs/Web/HTTP/Methods/POST">HTTP <code>POST</code></a> method.</p> + +<p>On the server side, the script at the URL "<code>/my-handling-form-page</code>" will receive the data as a list of 3 key/value items contained in the HTTP request. The way this script will handle that data is up to you. Each server-side language (PHP, Python, Ruby, Java, C#, etc.) has its own mechanism of handling form data. It's beyond the scope of this guide to go deeply into that subject, but if you want to know more, we have provided some examples in our <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Sending form data</span></a> article later on.</p> + +<h2 id="Summary">Summary</h2> + +<p>Congratulations, you've built your first web form. It looks like this live:</p> + +<p>{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/Forms/Your_first_form/Example') }}</p> + +<p>That's only the beginning, however — now it's time to take a deeper look. Forms have way more power than what we saw here and the other articles in this module will help you to master the rest.</p> + +<p>{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Forms/Your_first_form">Your first form</a></li> + <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">How to structure a web form</a></li> + <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Basic native form controls</a></li> + <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></li> + <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Other form controls</a></li> + <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Styling web forms</a></li> + <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced form styling</a></li> + <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-classes</a></li> + <li><a href="/en-US/docs/Learn/Forms/Form_validation">Client-side form validation</a></li> + <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Sending form data</a></li> +</ul> + +<h3 id="Advanced_Topics">Advanced Topics</h3> + +<ul> + <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">How to build custom form controls</a></li> + <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> + <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> +</ul> diff --git a/files/uk/learn/html/index.html b/files/uk/learn/html/index.html new file mode 100644 index 0000000000..708f04d792 --- /dev/null +++ b/files/uk/learn/html/index.html @@ -0,0 +1,54 @@ +--- +title: HTML +slug: Learn/HTML +translation_of: Learn/HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Щоб створювати сайти, спершу слід вивчити {{Glossary('HTML')}} — це фундаментальна технологія, за допомогою якої створюється структура веб-сторінки. HTML використовується, щоб вказати тип вмісту на сторінці: абзац, список, заголовок, посилання, зображення, мультимедіа-плеєр, формуляр або один з багатьох інших елементів.</p> + +<h2 id="Шлях_навчання">Шлях навчання</h2> + +<p>Найкраще розпочати вивчення веб-розробки з HTML. Почніть зі <a href="/en-US/docs/Web/Guide/HTML/Introduction">Вступу до HTML</a>. Після цього можна розпочати вивчення більш складних тем, наприклад:</p> + +<ul> + <li><a href="/en-US/docs/Web/API">HTML5 APIs</a></li> + <li><a href="/en-US/docs/Learn/CSS">CSS</a> і його використання для стилізації HTML (наприклад, зміна шрифту та його розміру, додавання рамок та тіней, розбиття сторінки на декілька колонок, додавання анімації та інших візуальних ефектів.)</li> + <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a> та його викорристання для додавання динамічних функцій веб-сторінкам (наприклад, визначити місце перебування користувача та відмітити його на мапі, додати до інтерфейсу елементи, які з'являються/зникають при натисненні на них, або ж зберегти дані користувача на його комп'ютері та багато іншого.)</li> +</ul> + +<p>Для початку навчання необхідно мати щонайменше базові знання комп'ютера та досвід в користуванні інтернетом (перегляд сайтів, відео та аудіо). Також потрібно мати основні робочі інструменти описані в розділі <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення основного програмного забезпечення</a> та знати, як створювати та керувати файлами, це описано в розділі <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Робота з файлами</a>. Ці два розділи знаходяться в модулі для початківців <a href="/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з WEB</a>.</p> + +<p>Перед вивченням рекомендується ознайомится зі статтею <a href="/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з WEB</a>, але це необов'язково. Багато матеріалу зі статті <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">Основи HTML</a> більш детально охоплює модуль <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a>.</p> + +<h2 id="Модулі">Модулі</h2> + +<p>Ця тема містить модулі, які рознашовані в порядку вивчення. Слід розпочати навчання від першого з них:</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a></dt> + <dd>Цей модуль надає базові знання для подальщої роботи. Він знайомить з важливими поняттями синтаксису та вчить застосовувати код HTML до тексту, створювати посилання, та створювати структуру сторінки за допомогою HTML.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Вставки мультимедіа</a></dt> + <dd>Цей модуль навчить використовувати HTML для вставки мультимедіа-файлів на вашу сторінку. Ви навчитеся вставляти на вашу сторінку зображення, відео, аудіо та навіть цілі сторінки.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables">Таблиці HTML</a></dt> + <dd>Відображення табличних даних на сторінці зрозумілим, {{glossary("Accessibility", "доступним")}} шляхом, може стати викликом. Цей модуль охоплює основи розмітки таблиць, а також більш складні понняття, наприклад, додавання заголовків колонок.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms">Формуляри HTML</a></dt> + <dd>Формуляри є дуже важливою частиною Web — вони забезпечують переважну частину функціональності для взаємодії з веб-сайтом, наприклад, реєстрація чи вхід, залишення коментаря, покупка продуктів та інше. Цей модуль навчить вас створювати формуляри, якими користується клієнт.</dd> +</dl> + +<h2 id="Вирішення_основних_проблем_HTML">Вирішення основних проблем HTML</h2> + +<p><a href="/en-US/docs/Learn/HTML/Howto">Вирішення основних проблем HTML</a> містить посилання на секції, в яких пояснюється як використовувати HTML для вирішення основних проблем пристворенні веб-сторінки: робота з заголовками, додавання зображень чи відео, підкреслення вмісту, ствонення простого формуляру тощо.</p> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<div class="document-head" id="wiki-document-head"> +<dl> + <dt> </dt> + <dt> <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms">Веб форми</a></dt> + <dd>Цей модуль містить низку статей, які допоможуть вам засвоїти основи веб-форм. Веб-форми - це дуже потужний інструмент для взаємодії з користувачами - найчастіше вони використовуються для збору даних від користувачів або дозволяють їм контролювати користувальницький інтерфейс. Однак з історичних та технічних причин не завжди очевидно, як використати їх на повний потенціал. Ми охопимо всі основні аспекти веб-форм, включаючи розміщення їх структури HTML, стилі управління формами, перевірку даних форми та подання даних на сервер.</dd> + <dt></dt> + <dt> <a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> на MDN</dt> + <dd>Основа документації HTML на MDN. Вона містить детальні описи елементу (тега) та його атрибути — якщо ви хочете знати, які атрибути та значення може мати елемент, вам варто ознайомитися з цим розділом.</dd> +</dl> +</div> diff --git a/files/uk/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/uk/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..4d333ac64a --- /dev/null +++ b/files/uk/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,322 @@ +--- +title: Створення гіперпосилань +slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Гіперпосилання дійсно важливі — це те що робить Інтернет <em>інтернетом</em>. Ця стаття показує необхідний синтаксис для створення гіперпосилання а також практику їхнього використання. </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">Getting started with HTML</a>). Форматування тексту (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>).</td> + </tr> + <tr> + <th scope="row">Мета:</th> + <td>Вивчити як користуватись гіперпосиланнями ефективно і з'єднювати декілька файлів разом.</td> + </tr> + </tbody> +</table> + +<h2 id="Що_таке_гіперпосилання">Що таке гіперпосилання?</h2> + +<p>Гіперпосилання це одне з найбільш вражаючих інновацій, що Інтернет може нам запропонувати. Хоча, вони були ще з самогу початку Інтернету, але вони це те що робить Інтернет <em>Інтернетом</em> — вони дозволяють зв'язати наші документи з будь-яким іншим документом (або іншим ресурсом), ми також можем зробити посилання на конкретні частини документу, і можемо зробити наші документи, (сайти, ресурси) доступними використовуючи просту адресу (на відміну від звичайних програм, які повинні буди встановлені і налаштовані). Практично будь-який контент може бути перетворений в посилання. Клік на таке посилання переведе користувача на іншу веб-адресу ({{glossary("URL")}}).</p> + +<div class="note"> +<p><strong>Примітка</strong>: URL може посилатись на HTML файли, текстові файли, зображення, текстові документи, відео і аудіо файли, та будь-які інші ресурси які можуть знаходитись в Інтернеті. Якщо браузер не знає як відобразити або опрацювати файл, він запитає у користувача чи він хоче відкрити файл (в такому випадку процес відкриття і обробки файлу передається до відповідної програми) або завантажити файл (в такому випадку користувач може повернутись до завантаженого файлу пізніше.)</p> +</div> + +<p>Домашня сторінка BBC, для прикладу, містить велику кількість посилань нетільки на новини, але також на різні розділи сайту (навігація), сторінки логіну та реєстрації (інструменти користувача) та інші.</p> + +<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Anatomy_of_a_link">Anatomy of a link</h2> + +<p>A basic link is created by wrapping the text (or other content, see {{anch("Block level links")}}) you want to turn into a link inside an {{htmlelement("a")}} element, and giving it an {{htmlattrxref("href", "a")}} attribute (also known as a <strong>Hypertext Reference</strong> , or <strong>target</strong>) that will contain the web address you want the link to point to.</p> + +<pre class="brush: html"><p>I'm creating a link to +<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>. +</p></pre> + +<p>This gives us the following result:</p> + +<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.</p> + +<h3 id="Adding_supporting_information_with_the_title_attribute">Adding supporting information with the title attribute</h3> + +<p>Another attribute you may want to add to your links is <code>title</code>; this is intended to contain supplementary useful information about the link, such as what kind of information the page contains, or things to be aware of. For example:</p> + +<pre class="brush: html"><p>I'm creating a link to +<a href="https://www.mozilla.org/en-US/" + title="The best place to find more information about Mozilla's + mission and how to contribute">the Mozilla homepage</a>. +</p></pre> + +<p>This gives us the following result (the title will come up as a tooltip when the link is hovered over):</p> + +<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/" title="The best place to find more information about Mozilla's mission and how to contribute">the Mozilla homepage</a>.</p> + +<div class="note"> +<p><strong>Note</strong>: A link title is only revealed on mouse hover, which means that people relying on keyboard controls to navigate web pages will have difficulty accessing title information. If a title's information is truly important to the usability of page, then you should present it in a manner that will be accessible to all users, for example by putting it in the regular text.</p> +</div> + +<h3 id="Active_learning_creating_your_own_example_link">Active learning: creating your own example link</h3> + +<p>Active learning time: we'd like you to create an HTML document using your local code editor (our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">getting started template</a> would do just fine.)</p> + +<ul> + <li>Inside the HTML body, try adding one or more paragraphs or other types of content you already know about.</li> + <li>Turn some of the content into links.</li> + <li>Include title attributes.</li> +</ul> + +<h3 id="Block_level_links">Block level links</h3> + +<p>As mentioned before, you can turn just about any content into a link, even <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Block_versus_inline_elements">block level elements</a>. If you had an image you wanted to turn into a link, you could just put the image between <code><a></a></code> tags.</p> + +<pre class="brush: html"><a href="https://www.mozilla.org/en-US/"> + <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"> +</a></pre> + +<div class="note"> +<p><strong>Note</strong>: You'll find out a lot more about using images on the Web in a future article.</p> +</div> + +<h2 id="A_quick_primer_on_URLs_and_paths">A quick primer on URLs and paths</h2> + +<p>To fully understand link targets, you need to understand URLs and file paths. This section gives you the information you need to achieve this.</p> + +<p>A URL, or Uniform Resource Locator is simply a string of text that defines where something is located on the Web. For example Mozilla's English homepage is located at <code>https://www.mozilla.org/en-US/</code>.</p> + +<p>URLs use paths to find files. Paths specify where in the filesystem the file you are interested in is located. Let's look at a simple example of a directory structure (see the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a> directory.)</p> + +<p><img alt="A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p> + +<p>The <strong>root</strong> of this directory structure is called <code>creating-hyperlinks</code>. When working locally with a web site, you will have one directory that the whole site goes inside. Inside the root, we have an <code>index.html</code> file and a <code>contacts.html</code>. In a real website, <code>index.html</code> would be our home page or landing page (a web page that serves as the entry point for a website or a particular section of a website.).</p> + +<p>There are also two directories inside our root — <code>pdfs</code> and <code>projects</code>. These each have a single file inside them — a PDF (<code>project-brief.pdf</code>) and an <code>index.html</code> file, respectively. Note how you can quite happily have two <code>index.html</code> files in one project as long as they are in different locations in the filesystem. Many web sites do. The second <code>index.html</code> would perhaps be the main landing page for project-related information.</p> + +<ul> + <li> + <p><strong>Same directory</strong>: If you wanted to include a hyperlink inside <code>index.html</code> (the top level <code>index.html</code>) pointing to <code>contacts.html</code>, you would just need to specify the filename of the file you want to link to, as it is in the same directory as the current file. So the URL you would use is <code>contacts.html</code>:</p> + + <pre class="brush: html"><p>Want to contact a specific staff member? +Find details on our <a href="contacts.html">contacts page</a>.</p></pre> + </li> + <li> + <p><strong>Moving down into subdirectories</strong>: If you wanted to include a hyperlink inside <code>index.html</code> (the top level <code>index.html</code>) pointing to <code>projects/index.html</code>, you would need to go down into the <code>projects</code> directory before indicating the file you want to link to. This is done by specifying the directory's name, then a forward slash, then the name of the file. so the URL you would use is <code>projects/index.html</code>:</p> + + <pre class="brush: html"><p>Visit my <a href="projects/index.html">project homepage</a>.</p></pre> + </li> + <li> + <p><strong>Moving back up into parent directories</strong>: If you wanted to include a hyperlink inside <code>projects/index.html</code> pointing to <code>pdfs/project-brief.pdf</code>, you'd have to go up a directory level, then back down into the <code>pdf</code> directory. "Go up a directory" is indicated using two dots — <code>..</code> — so the URL you would use is <code>../pdfs/project-brief.pdf</code>:</p> + + <pre class="brush: html"><p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p></pre> + </li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: You can combine multiple instances of these features into complex URLs, if needed, e.g. <code>../../../complex/path/to/my/file.html</code>.</p> +</div> + +<h3 id="Document_fragments">Document fragments</h3> + +<p>It is possible to link to a specific part of an HTML document (known as a <strong>document fragment</strong>), rather than just to the top of the document. To do this you first have to assign an {{htmlattrxref("id")}} attribute to the element you want to link to. It normally makes sense to link to a specific heading, so this would look something like the following:</p> + +<pre class="brush: html"><h2 id="Mailing_address">Mailing address</h2></pre> + +<p>Then to link to that specific <code>id</code>, you'd include it at the end of the URL, preceded by a hash/pound symbol, for example:</p> + +<pre class="brush: html"><p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p></pre> + +<p>You can even use the document fragment reference on its own to link to <em>another part of the same document</em>:</p> + +<pre class="brush: html"><p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p></pre> + +<h3 id="Absolute_versus_relative_URLs">Absolute versus relative URLs</h3> + +<p>Two terms you'll come across on the Web are <strong>absolute URL</strong> and <strong>relative URL:</strong></p> + +<p><strong>absolute URL</strong>: Points to a location defined by its absolute location on the web, including {{glossary("protocol")}} and {{glossary("domain name")}}. So for example, if an <code>index.html</code> page is uploaded to a directory called <code>projects</code> that sits inside the root of a web server, and the web site's domain is <code>http://www.example.com</code>, the page would be available at <code>http://www.example.com/projects/index.html</code> (or even just <code>http://www.example.com/projects/</code>, as most web servers just look for a landing page such as <code>index.html</code> to load if it is not specified in the URL.)</p> + +<p>An absolute URL will always point to the same location, no matter where it is used.</p> + +<p><strong>relative URL</strong>: Points to a location that is <em>relative</em> to the file you are linking from, more like what we looked at in the previous section. For example, if we wanted to link from our example file at <code>http://www.example.com/projects/index.html</code> to a PDF file in the same directory, the URL would just be the filename — e.g. <code>project-brief.pdf</code> — no extra information needed. If the PDF was available in a subdirectory inside <code>projects</code> called <code>pdfs</code>, the relative link would be <code>pdfs/project-brief.pdf</code> (the equivalent absolute URL would be <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.)</p> + +<p>A relative URL will point to different places depending on where the file it is used inside is located — for example if we moved our <code>index.html</code> file out of the <code>projects</code> directory and into the root of the web site (the top level, not in any directories), the <code>pdfs/project-brief.pdf</code> relative URL link inside it would now point to a file located at <code>http://www.example.com/pdfs/project-brief.pdf</code>, not a file located at <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p> + +<p>Of course, the location of the <code>project-brief.pdf</code> file and <code>pdfs</code> folder won't suddenly change because you moved the <code>index.html</code> file — this would make your link point to the wrong place, so it wouldn't work if clicked on. You need to be careful!</p> + +<h2 id="Link_best_practices">Link best practices</h2> + +<p>There are some best practices to follow when writing links. Let's look at these now.</p> + +<ul> +</ul> + +<h3 id="Use_clear_link_wording">Use clear link wording</h3> + +<p>It's easy to throw links up on your page. That's not enough. We need to make our links <em>accessible </em>to all readers, regardless of their current context and which tools they prefer. For example:</p> + +<ul> + <li>Screenreader users like jumping around from link to link on the page, and reading links out of context.</li> + <li>Search engines use link text to index target files, so it is a good idea to include keywords in your link text to effectively describe what is being linked to.</li> + <li>Visual readers skim over the page rather than reading every word, and their eyes will be drawn to page features that stand out, like links. They will find descriptive link text useful.</li> +</ul> + +<p>Let's look at a specific example:</p> + +<p><em><strong>Good</strong> link text:</em> <a href="https://firefox.com">Download Firefox</a></p> + +<pre class="brush: html"><p><a href="https://firefox.com/"> + Download Firefox +</a></p></pre> + +<p><em><strong>Bad</strong> link text:</em> <a href="https://firefox.com/">Click here</a> to download Firefox</p> + +<pre class="brush: html"><p><a href="https://firefox.com/"> + Click here +</a> +to download Firefox</p> +</pre> + +<p>Other tips:</p> + +<ul> + <li>Don't repeat the URL as part of the link text — URLs look ugly, and sound even uglier when a screen reader reads them out letter by letter.</li> + <li>Don't say "link" or "links to" in the link text — it's just noise. Screen readers tell people there's a link. Visual users will also know there's a link, because links are generally styled in a different colour and underlined (this convention generally shouldn't be broken, as users are so used to it.)</li> + <li>Keep your link label as short as possible — long links especially annoy screen reader users, who have to hear the whole thing read out.</li> + <li>Minimize instances where multiple copies of the same text are linked to different places. This can cause problems for screenreader users, who will often bring up a list of the links out of context — several links all labelled "click here", "click here", "click here" would be confusing.</li> +</ul> + +<h3 id="Use_relative_links_wherever_possible">Use relative links wherever possible</h3> + +<p>From the description above, you might think that it is a good idea to just use absolute links all the time; after all, they don't break when a page is moved like relative links. However, you should use relative links wherever possible when linking to other locations within the <em>same website</em> (when linking to <em>another website</em>, you will need to use an absolute link):</p> + +<ul> + <li>For a start, it is a lot easier to scan your code — relative URLs are generally a lot shorter than absolute URLs, which makes reading code much easier.</li> + <li>Second, it is more efficient to use relative URLs wherever possible. When you use an absolute URL, the browser starts by looking up the real location of the server on the Domain Name System ({{glossary("DNS")}}; see <a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a> for more information), then it goes to that server and finds the file that is being requested. With a relative URL on the other hand, the browser just looks up the file that is being requested, on the same server. So if you use absolute URLs where relative URLs would do, you are constantly making your browser do extra work, meaning that it will perform less efficiently.</li> +</ul> + +<h3 id="Linking_to_non-HTML_resources_—_leave_clear_signposts">Linking to non-HTML resources — leave clear signposts</h3> + +<p>When linking to a resource that will be downloaded (like a PDF or Word document) or streamed (like video or audio) or has another potentially unexpected effect (opens a popup window, or loads a Flash movie), you should add clear wording to reduce any confusion. It can be quite annoying for example:</p> + +<ul> + <li>If you are on a low bandwidth connection, click a link and then a multiple megabyte download starts unexpectedly.</li> + <li>If you haven't got the Flash player installed, click a link and then suddenly get taken to a page that requires Flash.</li> +</ul> + +<p>Let's look at some examples, to see what kind of text can be used here:</p> + +<pre class="brush: html"><p><a href="http://www.example.com/large-report.pdf"> + Download the sales report (PDF, 10MB) +</a></p> + +<p><a href="http://www.example.com/video-stream/" target="_blank"> + Watch the video (stream opens in separate tab, HD quality) +</a></p> + +<p><a href="http://www.example.com/car-game"> + Play the car game (requires Flash) +</a></p></pre> + +<h3 id="Use_the_download_attribute_when_linking_to_a_download">Use the download attribute when linking to a download</h3> + +<p>When you are linking to a resource that is to be downloaded rather than opened in the browser, you can use the <code>download</code> attribute to provide a default save filename. Here's an example with a download link to the latest Windows version of Firefox:</p> + +<pre class="brush: html"><a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US" + download="firefox-latest-64bit-installer.exe"> + Download Latest Firefox for Windows (64-bit) (English, US) +</a></pre> + +<h2 id="Active_learning_creating_a_navigation_menu">Active learning: creating a navigation menu</h2> + +<p>For this exercise, we'd like you to link some pages together with a navigation menu to create a multi-page website. This is one common way in which a website is created — the same page structure is used on every page, including the same navigation menu, so when links are clicked it gives the impression that you are staying in the same place, and different content is being brought up.</p> + +<p>You'll need to make local copies of the following four pages, all in the same directory (see also the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> directory for a full file listing):</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li> +</ul> + +<p>You should:</p> + +<ol> + <li>Add an unordered list in the indicated place on one page, containing the names of the pages to link to. A navigation menu is usually just a list of links, so this is semantically ok.</li> + <li>Turn each page name into a link to that page.</li> + <li>Copy the navigation menu across to each page.</li> + <li>On each page, remove just the link to that same page — it is confusing and pointless for a page to include a link to itself, and the lack of a link acts a good visual reminder of what page you are currently on.</li> +</ol> + +<p>The finished example should end up looking something like this:</p> + +<p><img alt="An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p> + +<div class="note"> +<p><strong>Note</strong>: If you get stuck, or are not sure if you have got it right, you can check the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> directory to see the correct answer.</p> +</div> + +<h2 id="E-mail_links">E-mail links</h2> + +<p>It is possible to create links or buttons that, when clicked, open a new outgoing email message rather than linking to a resource or page. This is done using the {{HTMLElement("a")}} element and the <code>mailto:</code> URL scheme.</p> + +<p>In its most basic and commonly used form, a <code>mailto:</code> link simply indicates the email address of the intended recipient. For example:</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a> +</pre> + +<p>This results in a link that looks like this: <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>.</p> + +<p>In fact, the email address is even optional. If you leave it out (that is, your {{htmlattrxref("href", "a")}} is simply "mailto:"), a new outgoing email window will be opened by the user's mail client that has no destination address specified yet. This is often useful as "Share" links that users can click to send an email to an address of their choosing.</p> + +<h3 id="Specifying_details">Specifying details</h3> + +<p>In addition to the email address, you can provide other information. In fact, any standard mail header fields can be added to the <code>mailto</code> URL you provide. The most commonly used of these are "subject", "cc", and "body" (which is not a true header field, but allows you to specify a short content message for the new email). Each field and its value is specified as a query term.</p> + +<p>Here's an example that includes a cc, bcc, subject and body:</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email"> + Send mail with cc, bcc, subject and body +</a></pre> + +<div class="note"> +<p><strong>Note:</strong> The values of each field must be URL-encoded, that is with non-printing characters (invisible characters like tabs, carriage returns, and page breaks) and spaces <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>. Also note the use of the question mark (<code>?</code>) to separate the main URL from the field values, and ampersands (&) to separate each field in the <code>mailto:</code> URL. This is standard URL query notation. Read <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method">The GET method</a> to understand what URL query notation is more comonly used for.</p> +</div> + +<p>Here are a few other sample <code>mailto</code> URLs:</p> + +<ul> + <li><a href="mailto:">mailto:</a></li> + <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject</a></li> +</ul> + +<h2 id="Summary">Summary</h2> + +<p>That's it for links, for now anyway! You'll return to links later on in the course when you start to look at styling them. Next up for HTML, we'll return to text semantics and look at some more advanced/unusual features that you'll find useful — Advanced text formatting is your next stop.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> 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> diff --git a/files/uk/learn/html/introduction_to_html/getting_started/index.html b/files/uk/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..d1250c915c --- /dev/null +++ b/files/uk/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,522 @@ +--- +title: Початок роботи з HTML +slug: Learn/HTML/Introduction_to_HTML/Getting_started +tags: + - HTML + - Мова + - Основи + - Розмітка + - атрибути + - веб-сторінки + - для початківців + - елементи + - лапки + - символи + - теги + - українською мовою +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">У цій статті ми пояснимо найбільш базові поняття HTML — що таке елементи, атрибути та інші терміни, які ви могли чути, і яке завдання вони виконують. Ми покажемо, як побудований елемент HTML і з чого складається типова HTML-сторінка, а також пояснимо інші особливості мови. В процесі навчання ми будемо трохи бавитися з кодом, щоб вам було цікаво!</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Передумови:</th> + <td>Базове знання комп'ютера, <a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/Installing_basic_software">встановлене основне програмне забезпечення</a>, базове розуміння <a href="https://developer.mozilla.org/uk/docs/Learn/Getting_started_with_the_web/Dealing_with_files">роботи з файлами</a>.</td> + </tr> + <tr> + <th scope="row">Мета:</th> + <td>Отримати базове розуміння мови HTML і попрактикуватися в написанні кількох HTML-елементів.</td> + </tr> + </tbody> +</table> + +<h2 id="Що_таке_HTML">Що таке HTML?</h2> + +<p>{{glossary("HTML")}} (Hypertext Markup Language — мова гіпертекстової розмітки) не є мовою програмування. Це <em>мова розмітки</em>, яка каже браузеру, як відобразити сторінку, яку ви відвідуєте. HTML може бути простим чи складним, залежно від бажання його розробника. HTML складається з серії {{glossary("Element", "елементів")}}, які ви використовуєте для того, щоб вкласти, загорнути чи <em>розмітити</em> частини сторінки, щоб вони мали певний вигляд. {{glossary("Tag", "Теги")}} можуть перетворити частину тексту на посилання на іншу сторінку, виділити її курсивом тощо. Наприклад, візьміть такий рядок тексту:</p> + +<p><code>Мій кіт дуже сердитий</code></p> + +<p>Якщо ми хочемо, щоб цей рядок був сам по собі, ми можемо вказати, що це параграф (абзац), загорнувши його тегом елементу ({{htmlelement("p")}}):</p> + +<pre class="brush: html"><p>Мій кіт дуже сердитий</p></pre> + +<h2 id="Анатомія_елементу_HTML">Анатомія елементу HTML</h2> + +<p>Погляньмо на елемент "параграф" детальніше. </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p>Основні частини елементу такі:</p> + +<ol> + <li><strong>Початковий тег:</strong> містить назву елементу (в цьому випадку, p), загорнену в <strong>кутові дужки</strong>. Цей тег позначає початок елементу, або місце, де елемент починає діяти. У даному випадку — це місце, де починається параграф. </li> + <li><strong>Кінцевий тег:</strong> такий самий тег, як і початковий, тільки тепер він містить скісну риску перед назвою елементу. Цей тег позначає місце закінчення елементу — у цьому випадку, місце, де закінчується параграф. Одна з найпоширеніших помилок початківців — це забути поставити кінцевий тег, що може призвести до несподіваних результатів. </li> + <li><strong>Вміст:</strong> вміст елементу, у цьому випадку — просто текст. </li> + <li><strong>Елемент:</strong> початковий тег разом із кінцевим тегом та вмістом між ними складають елемент.</li> +</ol> + +<h3 id="Активне_навчання_створення_вашого_першого_HTML-елементу">Активне навчання: створення вашого першого HTML-елементу</h3> + +<p>Відредагуйте рядок нижче у полі <em>Input, </em> загорнувши його тегами <code><em> </code>та <code></em></code> (поставте <code><em></code> на початку, щоб <em>відкрити елемент</em>, та <code></em></code> в кінці, щоб <em>закрити елемент</em>) — це має виділити рядок курсивом! Ви маєте побачити зміни в полі <em>Output</em>.</p> + +<p>Якщо ви зробите помилку, ви можете завжди скинути редагування кнопкою <em>Reset</em>. Якщо ви справді застрягнете, натисніть кнопку <em>Show solution</em>, щоб побачити відповідь.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">This is my text.</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 2em; + padding: 10px; + border: 1px solid #0095dd; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<em>This is my text.</em>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 300) }}</p> + +<h3 id="Вкладені_елементи">Вкладені елементи</h3> + +<p>Ви можете вкладати одні елементи всередину інших. Це називаєте <strong>вкладенням</strong>. Якщо ми хочемо наголосити, що наш кіт <strong>дуже</strong> сумний, ми можемо загорнути слово "дуже" в елемент {{htmlelement("strong")}}, який означає, що слово особливо сильно наголошене:</p> + +<pre class="brush: html"><p>My cat is <strong>very</strong> grumpy.</p></pre> + +<p>Важливо пам'ятати правильне вкладення елементів: у прикладі вище ми спершу відкрили елемент {{htmlelement("p")}}, а потім елемент <strong>, що означає, що першим ми маємо закрити внутрішній елемент {{htmlelement("strong")}}, а потім зовнішній {{htmlelement("p")}}. Приклад нижче неправильний:</p> + +<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></pre> + +<p>Елемент має закриватися або всередині, або ззовні іншого елемента. Якщо кінцевий тег зовнішнього елемента іде перед кінцевим тегом внутрішнього елемента, ваш браузер спробує здогадатися, що ви хотіли цим сказати, і результати цього можуть бути неочікуваними. Тому не робіть так!</p> + +<h3 id="Блокові_та_рядкові_елементи">Блокові та рядкові елементи</h3> + +<p>Існують дві важливі категорії елементів у HTML, про які вам слід знати — блокові та рядкові.</p> + +<ul> + <li>Блокові елементи утворюють блок на сторінці — вони розміщуються з нового рядка, незалежно від того, який елемент був перед ними, і кожен наступний після них елемент також буде розміщуватися у новому рядку. Блокові елементи найчастіше є структурними складовими сторінки, які представляють, наприклад, параграфи (абзаци), списки, меню навігації тощо. Блокові елементи не можуть вкладатися в рядковий елемент, але можуть вкладатися в інший блоковий елемент.</li> + <li>Рядкові елементи розміщують в блокових елементах і вони займають лише невеликі частини документу, а не цілі параграфи чи інші блоки. Рядковому елементу не потрібно починатися з нового рядка, зазвичай їх розміщують всередині параграфів, наприклад, посилання {{htmlelement("a")}} чи виділення {{htmlelement("em")}} та {{htmlelement("strong")}}.</li> +</ul> + +<p>Візьміть такий приклад:</p> + +<pre><code><em>перший</em><em>другий</em><em>третій</em> + +<p>четвертий</p><p>п'ятий</p><p>шостий</p></code></pre> + +<p>{{htmlelement("em")}} є рядковим елементом, тому перші три елементи розміщують в одному рядку, без відстаней між ними. Натомість {{htmlelement("p")}} є блоковим елементом, він розміщується з нового рядка і має відстані над і під ним (ці відстані визначаються у стиляхt <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS</a>, які браузер за замовчанням застосовує до параграфів).</p> + +<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200) }}</p> + +<div class="note"> +<p><strong>Примітка</strong>: HTML5 пропонує інший підхід до визначення категорій елементів (див. <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Element content categories</a>). Хоча нові категорії є більш точними, ніж ті, про які йшлося вище, вони також є значно складнішими для розуміння, ніж "блокові" і "рядкові". Тому ми будемо вживати саме ці дві категорії. </p> +</div> + +<div class="note"> +<p><strong>Примітка</strong>: ви можете знайти корисні посилання на перелік усіх блокових та рядкових елементів — див. <a href="/en-US/docs/Web/HTML/Block-level_elements">Block-level elements</a> та <a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a>.</p> +</div> + +<h3 id="Порожні_елементи">Порожні елементи</h3> + +<p>Не всі елементи утворюються за шаблоном початковий тег, вміст, кінцевий тег. Деякі елементи мають лише один тег, який зазвичай вставляє щось на певне місце в документі. Це, наприклад, {{htmlelement("img")}}, який вставляє зображення на те місце, куди він поставлений:</p> + +<pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> + +<p>Такий вигляд він має на сторінці:</p> + +<p>{{ EmbedLiveSample('Empty_elements', 700, 300) }}</p> + +<h2 id="Атрибути">Атрибути</h2> + +<p>Елементи також можуть мати атрибути, які мають такий вигляд: </p> + +<p><img alt='&lt;p class="editor-note">My cat is very grumpy&lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>Атрибути містять додаткову інформацію про елемент, яка не відображається в самому контенті. У прикладі вище <code>class</code> це <em>ім'я</em> атрибута, а <code>editor-note</code> — це <em>значення</em> атрибута. Атрибут <code>class</code> дозволяє надати елементу певний ідентифікатор, який пізніше можна використати для того, щоб доступитися до цього елемента і змінити його стиль.</p> + +<p>Атрибут завжди повинен мати:</p> + +<ol> + <li>Пробіл між ім'ям атрибута і назвою елементу (або попереднім атрибутом, якщо такий є).</li> + <li>Ім'я атрибута, за яким іде знак дорівнює.</li> + <li>Значення атрибута, загорнене в прямі лапки.</li> +</ol> + +<h3 id="Активне_навчання_додавання_атрибута_до_елемента">Активне навчання: додавання атрибута до елемента</h3> + +<p>Поглянемо на інший елемент — {{htmlelement("a")}} (від anchor — "якір"), який робить гіперпосиланням текст, загорнений в нього. Цей елемент може мати кілька атрибутів, наприклад: </p> + +<ul> + <li><code>href</code>: значення цього атрибута визначає веб-адресу, куди саме буде вести посилання. Наприклад, <code>href="https://www.mozilla.org/"</code>.</li> + <li><code>title</code>: цей атрибут містить додаткову інформацію про посилання, а саме назву сторінки, на яку веде посилання. Наприклад, <code>title="The Mozilla homepage"</code>. Ця назва буде з'являтися у вигляді підказки при наведенні курсором на посилання. </li> + <li><code>target</code>: цей атрибут визначає контекст переглядання сторінки в браузері. Наприклад, <code>target="_blank"</code> відобразить посилання в новій вкладці. Якщо ви хочете відкривати посилання в тій самій вкладці, просто опустіть цей атрибут.</li> +</ul> + +<p>Відредагуйте рядок нижче в полі <em>Input,</em>так щоб він став посиланням на ваш улюблений сайт. Спочатку додайте елемент <code><a></code>, потім атрибути <code>href</code> і <code>title</code>. Насамкінець вкажіть значення атрибута <code>target, </code>так щоб посилання відкривалося в новій вкладці. Ви побачите свої зміни в полі <em>Output</em>. Ви маєте побачити посилання, яке має відображати заголовок (title) при наведенні курсору, а при кліку — переходити за адресою, вказаною в атрибуті <code>href</code> element. Пам'ятайте ставити пробіли між іменем елемента та кожним атрибутом. </p> + +<p>Ви завжди можете скинути всі зміни кнопкою <em>Reset</em>. Також ви можете подивитися відповідь, натиснувши кнопку <em>Show solution</em>.</p> + +<div class="hidden"> +<h6 id="Playable_code2">Playable code2</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">&lt;p&gt;A link to my favourite website.&lt;/p&gt;</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 2em; + padding: 10px; + border: 1px solid #0095dd; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<p>A link to my <a href="<code>https://www.mozilla.org/</code>" title="The Mozilla homepage" target="_blank">favourite website</a>.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code2', 700, 300) }}</p> + +<h3 id="Булеві_атрибути">Булеві атрибути</h3> + +<p>Іноді ви можете побачити в коді лише назву атрибута, без вказаного значення. Це цілком нормальні атрибути, вони називаються булевими. Вони мають лише одне значення, зазвичай таке ж саме, як і назва самого атрибута. Для прикладу візьмемо атрибут {{htmlattrxref("disabled", "input")}}, який робить поля форми неактивними (засіреними), щоб користувачі не могли їх заповнити. </p> + +<pre><input type="text" disabled="disabled"></pre> + +<p>Скорочений запис цілком може мати такий вигляд (ми також додали активне поле для кращого розуміння): </p> + +<pre class="brush: html"><input type="text" disabled> + +<input type="text"> +</pre> + +<p>Обидва записи дадуть такий результат: </p> + +<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100) }}</p> + +<h3 id="Опускання_лапок_навколо_значень_атрибутів">Опускання лапок навколо значень атрибутів</h3> + +<p>Іноді в мережі ви можете побачити багато різних прикладів дивної розмітки, наприклад, значення атрибутів, записані без лапок. Хоча за деяких обставин такий запис є прийнятним, в інших випадках він може поламати розмітку. Наприклад, у нашому посиланні з прикладу вище ми можемо записати атрибут <code>href</code> так:</p> + +<pre><a href=<code>https://www.mozilla.org/</code>>favourite website</a></pre> + +<p>Однак, якщо ми додамо другий атрибут <code>title</code>, розмітка порушиться:</p> + +<pre class="brush: html"><a href=<code>https://www.mozilla.org/</code> title=The Mozilla homepage>favourite website</a></pre> + +<p>Таку розмітку браузер розуміє неправильно, вважаючи, що <code>title</code> — це насправді три атрибути: атрибут "title" зі значенням "The" і два інші атрибути булевого типу, <code>Mozilla </code>і <code>homepage</code>. Така поведінка не є очікуваною і може призвести до помилок, як показано в прикладі нижче. Спробуйте навести курсор на текст, щоб подивитися, який текст у заголовку. </p> + +<p>{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100) }}</p> + +<p>Ми радимо завжди писати атрибути в лапках, це дозволяє уникнути багатьох проблем і робить код більш читабельним. </p> + +<h3 id="Лапки_подвійні_чи_одинарні">Лапки подвійні чи одинарні?</h3> + +<p>У цій статті всі значення атрибутів загорнені в звичайні прямі лапки. Проте іноді ви можете побачити, що значення загортається прямими апострофами на початку і в кінці (одинарні лапки). Вживання перших і других в HTML є питанням смаку, ви можете сміливо використовувати ті лапки, які зручно. Обидва записи будуть рівноцінними.</p> + +<pre class="brush: html"><a href="http://www.example.com">A link to my example.</a> + +<a href='http://www.example.com'>A link to my example.</a></pre> + +<p>Однак, не можна змішувати лапки різного типу в одному записі. Наприклад, такий запис є неправильним:</p> + +<pre class="brush: html"><a href="http://www.example.com'>A link to my example.</a></pre> + +<p>Якщо ви використали лапки одного типу в записі, всередину ви можете вкласти лапки іншого типу. Наприклад, тут апостроф вживається всередині значення в подвійних лапках:</p> + +<pre class="brush: html"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> + +<p>Для вкладення лапок того самого типу потрібно користуватися спеціальними символами, про які піде мова нижче.</p> + +<h2 id="Анатомія_HTML-документу">Анатомія HTML-документу</h2> + +<p>Все зазначене вище є основами HTML, але окремо взяті елементи самі по собі мало на що здатні. Тепер ми поглянемо на те, як окремі елементи формують цілу веб-сторінку:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p>Тут ми маємо:</p> + +<ol> + <li><code><!DOCTYPE html></code>: Доктайп (тип документу). В ті часи, коли HTML тільки зароджувався (близько 1991/2), доктайпы (doctypes) використовувалися як посилання на набір правил, яким HTML-сторінка повинна була слідувати, щоб вважатись написаною хорошим HTML-кодом, <span id="result_box" lang="uk"><span>що може означати автоматичну перевірку помилок та інші</span> <span>корисні речі.</span> <span>Доктайп приблизно такий вигляд</span></span>: + + <pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> + <span id="result_box" lang="uk"><span>Проте в наші дні ніхто справді не дбає про них, і вони насправді є лише історичним артефактом, який потрібно включити в документ, щоб той правильно працював</span></span> . <code><!DOCTYPE html></code> <span id="result_box" lang="uk"><span>це найкоротший рядок символів, який вважається валідним доктайпом;</span> <span>це все, що вам дійсно потрібно знати</span></span>.</li> + <li><code><html></html></code>: Елемент {{htmlelement("html")}}. Цей елемент огортає весь зміст (контент) <span id="result_box" lang="uk"><span>на всій сторінці, іноді його називають кореневим (root) елементом.</span></span></li> + <li><code><head></head></code>: Елемент {{htmlelement("head")}}. <span id="result_box" lang="uk"><span>Цей елемент діє як контейнер для всього матеріалу, який ви хочете включити в сторінку HTML, але який не є вмістом, що ви надаєте для перегляду відвідувачам вашої сторінки.</span> <span>Він включає в себе такі речі, як ключові слова та опис сторінки, які ви хочете відобразити в результатах пошуку, CSS, щоб стилізувати вміст сторінки, оголошення підтримуваного набору символів тощо.</span> <span>Ви дізнаєтеся більше про це в наступній статті цієї серії.</span></span></li> + <li><code><meta charset="utf-8"></code>: <span id="result_box" lang="uk"><span>Цей елемент встановлює в якості символьного кодування для вашого документу UTF-8, що включає більшість символів з переважної більшості письмових мов людей.</span> <span>По суті, це дає змогу обробляти будь-який текстовий вміст, який ви можете додати до документу.</span> <span>Немає причин не встановлювати таке кодування, і це допоможе уникнути деяких проблем пізніше.</span></span></li> + <li><code><title></title></code>: Елемент {{htmlelement("title")}}. <span id="result_box" lang="uk"><span>Цей елемент встановлює назву вашої сторінки, що є заголовком, який відображається на вкладці веб-браузера, на якій завантажується сторінка, і використовується для опису сторінки під час додавання/уподобання її.</span></span></li> + <li><code><body></body></code>: Елемент {{htmlelement("body")}}. <span id="result_box" lang="uk"><span>Цей елемент містить <em>весь</em> контент, який ви хочете показати веб-користувачам під час відвідування вашої сторінки, незалежно від того, чи це є текст, зображення, відео, ігри, відтворювані звукові доріжки тощо.</span></span></li> +</ol> + +<h3 id="Активне_навчання_додавання_деяких_функцій_у_документ_HTML"><span id="result_box" lang="uk"><span>Активне навчання: додавання деяких функцій у документ HTML</span></span></h3> + +<p><span id="result_box" lang="uk"><span>Якщо ви хочете поекспериментувати з написанням HTML-коду на вашому локальному комп'ютері, ви можете зробити наступне:</span></span></p> + +<ol> + <li><span class="short_text" id="result_box" lang="uk"><span>Скопіюйте наведений вище приклад HTML сторінки</span></span>.</li> + <li><span class="short_text" id="result_box" lang="uk"><span>Створіть новий файл у текстовому редакторі</span></span>.</li> + <li><span class="short_text" id="result_box" lang="uk"><span>Вставте код у новий текстовий файл</span></span>.</li> + <li>Збережіть файл як <code>index.html</code>.</li> +</ol> + +<div class="note"> +<p><strong>Примітка</strong>: Ви також можете знайти цей основний HTML шаблон на <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p> +</div> + +<p><span id="result_box" lang="uk"><span>Тепер ви можете відкрити цей файл у веб-браузері, щоб побачити, як має вигляд відображення вірного коду, а потім відредагувати код та оновити веб-браузер, щоб побачити результат.</span> <span>Спочатку це матиме такий вигляд:</span></span></p> + +<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;"> <span id="result_box" lang="uk"><span>В цій вправі ви можете редагувати код локально на своєму комп'ютері, як зазначено вище, або можете редагувати його в запропонованому редакторі нижче (у вікні редактора </span></span>в цьому прикладі <span lang="uk"><span>показано лише зміст елемента</span></span> {{htmlelement("body")}}) Спробуйте зробити наступне:</p> + +<ul> + <li>За відкритим тегом елемента {{htmlelement("body")}} додайте головний заголовок для документу. Він повинен бути загорнутий поміж відкриваючого тега <code><h1></code> і закриваючого тега <code></h1></code>.</li> + <li><span id="result_box" lang="uk"><span>Відредагуйте вміст параграфу (абзацу) та додайте текст про те, що вас цікавить.</span></span></li> + <li><span id="result_box" lang="uk"><span>Зробіть важливі слова виділеними жирним шрифтом, обернувши їх у відкриваючий тег </span></span><code><strong></code> і закриваючий тег <code></strong></code>.</li> + <li>Додайте посилання до свого абзацу, як <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">це було описано раніше в статті</a>.</li> + <li>Додайте зображення в свій документ перед абзацем, як <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">це було описано раніше в статті</a>. Ви можете вважати себе крутим хакером, якщо зможете використати іншу картинку (з власного комп'ютера або з Інтернету).</li> +</ul> + +<p><span id="result_box" lang="uk"><span>Якщо ви зробите помилку, ви завжди можете скинути її за допомогою кнопки </span></span><em>Reset</em>. <span id="result_box" lang="uk"><span>Якщо ви дійсно заплутались, натисніть кнопку</span></span> <em>Show solution</em>, щоб побачити відповідь.</p> + +<div class="hidden"> +<h6 id="Playable_code3">Playable code3</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input"> +&lt;p&gt;This is my page&lt;/p&gt;</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; +} + +img { + max-width: 100%; +} + +.output { + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<p>I really enjoy <strong>playing the drums</strong>. One of my favourite drummers is Neal Peart, who\ + plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.\ + My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ +<img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code3', 700, 600) }}</p> + +<h3 id="Пробіли_в_HTML">Пробіли в HTML</h3> + +<p><span id="result_box" lang="uk"><span>У наведених вище прикладах, мабуть, ви помітили, що багато пробілів в коді - це взагалі не обов'язково;</span> <span>два наступні фрагменти коду є еквівалентними</span></span>:</p> + +<pre class="brush: html"><p>Dogs are silly.</p> + +<p>Dogs are + silly.</p></pre> + +<p><span id="result_box" lang="uk"><span>Незалежно від того, скільки пустого місця ви використовуєте (яке може містити пробіл, а також відступи рядків), HTML-аналізатор зменшує кожен з них до одного пробілу під час відтворення коду.</span> <span>Тож навіщо використовувати так багато пробілів?</span> <span>Відповідь - зручність читання - набагато легше зрозуміти, що відбувається у вашому коді, якщо у вас це чудово відформатовано, а не просто зібрано разом у великий хаос.</span> <span>У нашому HTML-коді кожен вкладений елемент має два пробіли, ніж той, в якому він розміщений всередині.</span> <span>Ви самі визначаєте стиль форматування, який ви використовуєте (скільки пробілів для кожного рівня відступу, наприклад), але ви повинні розглянути можливість використання якогось форматування.</span></span></p> + +<h2 id="Посилання_на_обєкт_включаючи_спеціальні_символи_в_HTML"><span id="result_box" lang="uk"><span>Посилання на об'єкт: включаючи спеціальні символи в HTML</span></span></h2> + +<p>В HTML символи <code><</code>, <code>></code>,<code>"</code>,<code>'</code> та <code>&</code> є спеціальними символами. <span id="result_box" lang="uk"><span>Вони є частинами самого синтаксису HTML, тому як вводити один з цих символів у ваш текст, наприклад, якщо ви дійсно хочете використати амперсанд</span> <span>або знак менше, і не трактувати його як код, як це можуть зробити деякі веб-браузери?</span></span></p> + +<p><span id="result_box" lang="uk"><span>В такому випадку ми повинні використовувати символьні посилання - спеціальні коди, що представляють символи, і можуть використовуватися в конкретних обставинах.</span> <span>Кожне посилання символів починається з амперсанда (&), а закінчується двокрапкою (;).</span></span></p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Буквений символ</th> + <th scope="col">Еквівалентне написання символів</th> + </tr> + </thead> + <tbody> + <tr> + <td><</td> + <td>&lt;</td> + </tr> + <tr> + <td>></td> + <td>&gt;</td> + </tr> + <tr> + <td>"</td> + <td>&quot;</td> + </tr> + <tr> + <td>'</td> + <td>&apos;</td> + </tr> + <tr> + <td>&</td> + <td>&amp;</td> + </tr> + </tbody> +</table> + +<p><span id="result_box" lang="uk"><span>У наведеному нижче прикладі ви можете побачити два абзаци, які говорять про веб-технології:</span></span></p> + +<pre class="brush: html"><p>In HTML, you define a paragraph using the <p> element.</p> + +<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p></pre> + +<p>Нижче наводиться приклад, в якому ви можете побачити, що перший абзац вийшов не так, тому що браузер <span id="result_box" lang="uk"><span>вважає, що другий елемент </span></span><code><p></code><span lang="uk"><span> починає новий абзац.</span> <span>Другий абзац виглядає чудово, тому що ми замінили кутові дужки на символьні посилання.</span></span></p> + +<p>{{ EmbedLiveSample('Entity_references_including_special_characters_in_HTML', 700, 200) }}</p> + +<div class="note"> +<p><strong>Примітка</strong>: <span id="result_box" lang="uk"><span>У графіку всіх доступних посилань на об'єкти HTML можна знайти у Вікіпедії</span></span>: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p> +</div> + +<h2 id="Коментарі_HTML">Коментарі HTML</h2> + +<p><span id="result_box" lang="uk"><span>В HTML, як і у більшості мов програмування, існує механізм, доступний для написання коментарів у коді - коментарі браузером ігноруються і невидимі для користувача, їхня мета полягає у тому, щоб дозволити вам додавати коментарі до коду, щоб пояснити, як ваш</span> <span>код працює, що роблять різні частини коду тощо. Це може бути дуже корисним, якщо ви повернетеся до свого коду, над яким ви не працювали, наприклад, протягом шести місяців, і не пам'ятаєте, що ви робили, або якщо над вашим кодом ще хтось працював</span><span>.</span></span></p> + +<p><span id="result_box" lang="uk"><span>Щоб перетворити розділ вмісту всередині вашого HTML-файлу в коментар, вам необхідно обгорнути його спеціальними маркерами</span></span> <code><!--</code> та <code>--></code>, наприклад:</p> + +<pre class="brush: html"><p>I'm not inside a comment</p> + +<!-- <p>I am!</p> --></pre> + +<p><span id="result_box" lang="uk"><span>Як ви можете побачити, перший абзац відображається на сторінці, а другий - ні.</span></span></p> + +<p>{{ EmbedLiveSample('HTML_comments', 700, 100) }}</p> + +<h2 id="Підсумок">Підсумок</h2> + +<p><span id="result_box" lang="uk"><span>Ви досягли кінця статті - ми сподіваємося, що вам сподобалась ваша мандрівка по основах HTML!</span> <span>На цьому етапі ви повинні розуміти, як має вигляд мова, як вона працює на базовому рівні, і вміти писати кілька елементів і атрибутів.</span> <span>Це ідеальне місце, щоб розпочати навчання прямо зараз і продовжити вивчати далі наступні статті модуля. Ви розглянете деякі речі, з якими ви вже ознайомлені, але більш докладно, і дізнаєтесь про деякі нові можливості мови HTML.</span> <span>Залишайтеся на зв'язку!</span></span></p> + +<div class="note"> +<p><strong>Примітка</strong>: <span id="result_box" lang="uk"><span>На цьому етапі, коли ви почнете більше дізнаватися про HTML, ви також можете почати вивчати основи каскадних таблиць стилів або</span></span> <a href="/en-US/docs/Learn/CSS">CSS</a>. <span id="result_box" lang="uk"><span>CSS - це мова, яку ви використовуєте для стилізації веб-сторінок (наприклад, зміна шрифту або кольорів, або зміна макета сторінки). HTML та CSS дуже добре співпрацюють, в чому ви незабаром переконаєтесь</span></span>.</p> +</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> diff --git a/files/uk/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/uk/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..7387e08725 --- /dev/null +++ b/files/uk/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,953 @@ +--- +title: HTML text fundamentals +slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Одне з головних завдань HTML полягає в тому, щоб надати текстову структуру та смислове значення (також відоме як {{glossary("семантика")}}) таким чином, щоб браузер міг відобразити зміст на сторінці коректно. У цій статті пояснюється, у який спосіб можна використовувати {{glossary("HTML")}}, щоб структурувати текст на сторінці, додавши заголовки та параграфи, підкреслюючи слова, створюючи списки та інше.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="uk"><span title="">Передумови</span></span>:</th> + <td><span class="tlid-translation translation" lang="uk"><span title="">Базове знайомство з HTML, як описано в</span></span> <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Початок роботи з HTML</a>.</td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="uk"><span title="">Мета</span></span>:</th> + <td><span class="tlid-translation translation" lang="uk"><span title="">Дізнайтеся, як позначити основну сторінку тексту, щоб надати йому структуру та зміст - включаючи абзаци, заголовки, списки, акцент та цитати.</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Основа_заголовки_та_абзаци"><span class="tlid-translation translation" lang="uk"><span title="">Основа: заголовки та абзаци</span></span></h2> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Найбільш структурований текст складається з заголовків і параграфів, незалежно від того, чи читаєте ви історію, газету, підручник з коледжу, журнал тощо.</span></span></p> + +<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Структурований вміст полегшує та покращує досвід читання.</span></span></p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">У HTML кожен абзац повинен бути загорнутий у елемент {{htmlelement ("p")}}, так:</span></span></p> + +<pre class="brush: html"><p><span class="tlid-translation translation" lang="uk"><span class="alt-edited">Я абзац,о так, це я.</span></span></p></pre> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Кожен заголовок має бути загорнутий в елемент заголовка:</span></span></p> + +<pre class="brush: html"><h1><span class="tlid-translation translation" lang="uk"><span title="">Я назва цієї історії.</span></span></h1></pre> + +<p>Є шість елементів заголовку — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, та {{htmlelement("h6")}}. <span class="tlid-translation translation" lang="uk"><span title="">Кожен елемент представляє інший рівень вмісту документа;</span></span><code><h1></code> <span class="tlid-translation translation" lang="uk"><span title="">являє собою основний заголовок</span></span>, <code><h2></code> <span class="tlid-translation translation" lang="uk"><span title="">представляє підзаголовки</span></span>, <code><h3></code> <span class="tlid-translation translation" lang="uk"><span title="">представляє наступні підзаголовки тощо.</span></span></p> + +<h3 id="Впровадження_структурної_ієрархії"><span class="tlid-translation translation" lang="uk"><span title="">Впровадження структурної ієрархії</span></span></h3> + +<p>Наприклад, у історії <h1> буде представляти назву історії, <h2> s представлятиме назву кожного розділу, а <h3> представлятиме підрозділи кожного розділу тощо.</p> + +<pre class="brush: html"><h1>Нищівна свердловина</h1> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Кріс Міллс</span></span></p> + +<h2>Розділ 1: Темна ніч</h2> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Це була темна ніч.</span> <span title="">Десь, сова вигукувала.</span> <span title="">Дощ обрушився на ...</span></span></p> + +<h2>Розділ 2: <span class="tlid-translation translation" lang="uk"><span title="">Вічна тиша</span></span></h2> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Наш головний герой міг не стільки шепотом вийти з тіньової фігури ...</span></span></p> + +<h3><span class="tlid-translation translation" lang="uk"><span title="">Привид говорить</span></span></h3> + +<p>Минуло ще кілька годин, коли раптово, побачивши привида, випрямився і вигукнув: «Будь ласка, помилуй мою душу!"</p></pre> + +<p>Це дійсно залежить від вас, які саме елементи ви використовуєте, тоді ієрархія має сенс. Вам просто потрібно мати на увазі кілька найкращих практик, коли ви створюєте такі структури:</p> + +<ul> + <li><span class="tlid-translation translation" lang="uk"><span title="">Бажано просто використовувати один</span></span><code><h1></code> на сторінці — це заголовок верхнього рівня, а всі інші знаходяться нижче нього в ієрархії.</li> + <li><span class="tlid-translation translation" lang="uk"><span title="">Переконайтеся, що ви використовуєте заголовки в правильному порядку в ієрархії.</span></span> <span class="tlid-translation translation" lang="uk"><span title="">Не використовуйте</span></span> <code><h3></code> <span class="tlid-translation translation" lang="uk"><span title="">для представлення підзаголовків, за якими йде</span></span><code><h2></code> для представлення підзаголовка - це не має сенсу і призведе до дивних результатів.</li> + <li>З доступних шести заголовків вам слід прагнути використовувати не більше трьох на сторінці, якщо ви відчуваєте, що це необхідно. Документи з багатьма рівнями (тобто глибока ієрархія заголовків) стають громіздкими і важкими для навігації. У таких випадках бажано поширювати вміст на кілька сторінок, якщо це можливо.</li> +</ul> + +<h3 id="Чому_нам_потрібна_структура"><span class="tlid-translation translation" lang="uk"><span title="">Чому нам потрібна структура?</span></span></h3> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Щоб відповісти на це запитання, давайте подивимося на text-start.html - початкову точку нашого запущеного прикладу для цієї статті (хороший рецепт хумусу).</span> <span title="">це потрібно для вправ пізніше.</span> <span title="">В даний час у цьому документі міститься кілька фрагментів вмісту - вони не позначені жодним чином, але розділені проривами рядків (Enter / Return натиснуто, щоб перейти до наступного рядка).</span></span></p> + +<p>Однак, коли ви відкриваєте документ у вашому браузері, ви побачите, що текст з'являється суцільним шматком!</p> + +<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p> + +<p><span class="tlid-translation translation" lang="uk"><span class="alt-edited">Це пояснюється тим, що немає елементів, які б давали структуру контенту, тому браузер не знає, що є заголовок а що є абзацом. Крім того:</span></span></p> + +<ul> + <li><span class="tlid-translation translation" lang="uk"><span title="">Користувачі, які переглядають веб-сторінку, намагаються швидко сканувати, щоб знайти відповідний вміст, часто просто читаючи заголовки (звичайно</span></span> <a class="external external-icon" href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">витрачати дуже короткий час на веб-сторінці</a>). <span class="tlid-translation translation" lang="uk"><span title="">Якщо вони не бачать нічого корисного протягом декількох секунд, вони, швидше за все, будуть розчаровані і підуть в інше місце.</span></span></li> + <li><span class="tlid-translation translation" lang="uk"><span title="">Пошукові системи, які індексують вашу сторінку, розглядають вміст заголовків як важливі ключові слова для впливу на рейтинги пошуку на сторінці.</span> <span title="">Без заголовків ваша сторінка буде працювати слабко</span></span> {{glossary("SEO")}} (Search Engine Optimization).</li> + <li><span class="tlid-translation translation" lang="uk"><span title="">Люди із серйозними порушеннями зору часто не читають веб-сторінки;</span> <span title="">вони слухають їх.</span> <span title="">Це робиться за допомогою програмного забезпечення, що називається </span></span> <a class="external external-icon" href="http://en.wikipedia.org/wiki/Screen_reader" title="screen readers">screen reader</a>. Це програмне забезпечення надає способи отримати швидкий доступ до заданого текстового вмісту. Серед різних методів, які вони використовують, вони надають план документа, читаючи заголовки, дозволяючи користувачам швидко знайти потрібну інформацію. Якщо заголовки не доступні, вони будуть змушені слухати весь документ, прочитаний вголос.</li> + <li><span class="tlid-translation translation" lang="uk"><span title="">Щоб відтворити вміст за допомогою</span></span> {{glossary("CSS")}}, <span class="tlid-translation translation" lang="uk"><span title="">або зробити з нею цікаві речі</span></span>{{glossary("JavaScript")}}, потрібно мати елементи, які відокремлюють відповідний вміст, тому CSS / JavaScript може бути ефективним рішенням.</li> +</ul> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Тому нам необхідно надати нашому контенту структурну розмітку.</span></span></p> + +<h3 id="Активне_навчання_Надання_нашої_структури_змісту">Активне навчання: Надання нашої структури змісту</h3> + +<p>Давайте розглянемо живой приклад. У наведеному нижче прикладі додайте елементи до вихідного тексту у полі Введення так, щоб він з'являвся у вигляді заголовка та двох абзаців у полі Вивід.</p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Якщо ви зробите помилку, ви завжди можете скинути її за допомогою кнопки скидання.</span> <span title="">Якщо ви застрягли, натисніть кнопку Показати рішення, щоб побачити відповідь.</span></span></p> + +<div class="hidden"> +<h6 id="Відтворюваний_код"><span class="tlid-translation translation" lang="uk"><span title="">Відтворюваний код</span></span></h6> + +<pre class="brush: html"><h2><span class="tlid-translation translation" lang="uk"><span title="">Прямий вихід</span></span></h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2><span class="tlid-translation translation" lang="uk"><span title="">Код, що можна редагувати</span></span></h2> +<p class="a11y-label"><span class="tlid-translation translation" lang="uk"><span title="">Натисніть Esc, щоб перемістити фокус в сторону від області кодування (вкладка вставляє символ табуляції).</span></span></p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%"><span class="tlid-translation translation" lang="uk"><span class="alt-edited">Моя коротка історія. Я поліцейський, і мене звуть Тріш.</span></span> + +<span class="tlid-translation translation" lang="uk"><span title="">Мої ноги зроблені з картону, і я одружений на рибі</span></span>.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>My short story</h1>\n<p>I am a policewoman and my name is Trish.</p>\n<p>My legs are made of cardboard and I am married to a fish.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// клавіша зупинки табуляції в текстовій області +// замість цього напишіть tab в позиції каретки + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// <span class="tlid-translation translation" lang="uk"><span title="">Оновлюйте збережений код користувача кожного разу, коли користувач оновлює код текстової області</span></span> +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Чому_нам_потрібна_семантика"><span class="tlid-translation translation" lang="uk"><span title="">Чому нам потрібна семантика?</span></span></h3> + +<p>Семантика всюди навколо нас - ми покладаємося на попередній досвід, щоб розповісти вам, що таке функція повсякденних об'єктів; коли ми щось бачимо, ми знаємо, якою буде її функція. Так, наприклад, ми очікуємо, що червоний світлофор означає "зупинка", а зелений світлофор означає "іти". Речі можуть бути дуже складними дуже швидко, якщо застосовується неправильна семантика (чи будь-яка країна використовує червоний, щоб означати "йти"?</p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">У подібному дусі, ми повинні переконатися, що ми використовуємо правильні елементи, надаючи нашому змісту правильний сенс, функцію або зовнішній вигляд.</span> <span title="">У цьому контексті елемент {{htmlelement ("h1")}} також є семантичним елементом, який надає тексту, який він обертає навколо ролі (або значення) "заголовка верхнього рівня на вашій сторінці".</span></span></p> + +<pre class="brush: html"><h1><span class="tlid-translation translation" lang="uk"><span title="">Це заголовок верхнього рівня</span></span></h1></pre> + +<p>За замовчуванням браузер надасть йому великий розмір шрифту для того, щоб він виглядав як заголовок (хоча ви могли б такий стиль текста, могли отримати, використовуючи CSS). Більш важливо, що його семантичне значення буде використовуватися кількома способами, наприклад, пошуковими системами та програмами для читання з екрана (як згадано вище).</p> + +<p>З іншого боку, ви можете зробити будь-який елемент схожим на елемент верхнього рівня. Розгляньте наступне:</p> + +<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0;"><span class="tlid-translation translation" lang="uk"><span title="">Це заголовок верхнього рівня?</span></span></span></pre> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Це елемент {{htmlelement ("span")}}.</span> <span title="">Вона не має семантики.</span> <span title="">Ви використовуєте його, щоб загорнути вміст, коли ви хочете застосувати до нього CSS (або зробити щось із цим за допомогою JavaScript), не надаючи йому жодного додаткового сенсу (про це пізніше ви знайдете в курсі.) Ми застосували деякі</span> <span title="">CSS, щоб він виглядав як заголовок верхнього рівня, але оскільки він не має семантичного значення, він не отримає жодної з додаткових переваг, описаних вище.</span> <span title="">Це гарна ідея використовувати відповідний елемент HTML для завдання.</span></span></p> + +<h2 id="Списки"><span class="tlid-translation translation" lang="uk"><span title="">Списки</span></span></h2> + +<p>Тепер звернемо увагу до списків. Списки знаходяться в усьому нашому житті - від списку покупок до списку напрямків, які ви підсвідомо дотримуєтеся, щоб дістатися до вашого будинку щодня, до списків інструкцій, які ви дотримуєтеся в цих підручниках! Списки знаходяться всюди в Інтернеті, і ми маємо три різні типи, про які потрібно знати.</p> + +<h3 id="Невпорядкований"><span class="tlid-translation translation" lang="uk"><span title="">Невпорядкований</span></span></h3> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Невпорядковані списки використовуються для позначення списків пунктів, для яких не має значення порядок позицій - візьмемо, наприклад, список покупок.</span></span></p> + +<pre>молоко +<span class="tlid-translation translation" lang="uk"><span title="">яйця</span></span> +хліб +<span class="tlid-translation translation" lang="uk"><span title="">гумус</span></span></pre> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Кожен невпорядкований список починається з елемента {{htmlelement ("ul")}}, який обертається навколо всіх елементів списку:</span></span></p> + +<pre class="brush: html"><ul> +молоко +яйцчя +хліб +гумус +</ul></pre> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Останнім кроком є перенесення кожного елемента списку в елемент {{htmlelement ("li")}} (елемент списку):</span></span></p> + +<pre class="brush: html"><ul> + <li>молоко</li> + <li>яйцчя</li> + <li>хліб</li> + <li>гумус</li> +</ul></pre> + +<h4 id="Активне_навчання_розмітка_невпорядкованого_списку"><span class="tlid-translation translation" lang="uk"><span title="">Активне навчання: розмітка невпорядкованого списку</span></span></h4> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Спробуйте відредагувати живий зразок нижче, щоб створити свій власний HTML-невпорядкований список.</span></span></p> + +<div class="hidden"> +<h6 id="Відтворюваний_код_2"><span class="tlid-translation translation" lang="uk"><span title="">Відтворюваний код</span></span></h6> + +<pre class="brush: html"><h2><span class="tlid-translation translation" lang="uk"><span title="">Прямий вихід</span></span></h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2><span class="tlid-translation translation" lang="uk"><span title="">Код, що можна редагувати</span></span></h2> +<p class="a11y-label">Натисніть Esc для переміщення фокусу з області коду (Tab вставляє символ табуляції).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%"> +молоко +яйця +хліб +гумус +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +//<span class="tlid-translation translation" lang="uk"><span title="">Оновлюйте збережений код користувача кожного разу, коли користувач оновлює код текстової області</span></span> +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Замовлено"><span class="tlid-translation translation" lang="uk"><span title="">Замовлено</span></span></h3> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Упорядковані списки - це списки, в яких має значення порядок елементів - приведемо приклад набору напрямків:</span></span></p> + +<pre><span class="tlid-translation translation" lang="uk"><span title="">Проїдьте до кінця дороги</span></span> +<span class="tlid-translation translation" lang="uk"><span title="">Поверніть праворуч</span></span> +Ідіть прямо по перших двох роз'їздів +<span class="tlid-translation translation" lang="uk"><span title="">На третьому кільці поверніть ліворуч</span></span> +Школа знаходиться справа від вас, 300 метрів вперед по дорозі</pre> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Структура розмітки така ж, як і для невпорядкованих списків, за винятком того, що ви повинні обернути елементи списку в </span></span>елемент {{htmlelement("ol")}},<span class="tlid-translation translation" lang="uk"><span title=""> а не</span></span> <code><ul></code>:</p> + +<pre class="brush: html"><ol> + <li><span class="tlid-translation translation" lang="uk"><span title="">Проїдьте до кінця дороги</span></span></li> + <li><span class="tlid-translation translation" lang="uk"><span title="">Поверніть праворуч</span></span></li> + <li>Ідіть прямо по перших двох роз'їздів</li> + <li><span class="tlid-translation translation" lang="uk"><span title="">На третьому кільці поверніть ліворуч</span></span></li> + <li>Школа знаходиться справа від вас, 300 метрів вперед по дорозі</li> +</ol></pre> + +<h4 id="Активне_навчання_розмітка_впорядкованого_списку"><span class="tlid-translation translation" lang="uk"><span title="">Активне навчання: розмітка впорядкованого списку</span></span></h4> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Спробуйте відредагувати живий зразок нижче, щоб створити свій власний HTML-список.</span></span></p> + +<div class="hidden"> +<h6 id="Відтворюваний_код_3"><span class="tlid-translation translation" lang="uk"><span title="">Відтворюваний код</span></span></h6> + +<pre class="brush: html"><h2><span class="tlid-translation translation" lang="uk"><span title="">Прямий вихід</span></span></h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2><span class="tlid-translation translation" lang="uk"><span title="">Код, що можна редагувати</span></span></h2> +<p class="a11y-label">Натисніть Esc <span class="tlid-translation translation" lang="uk"><span title="">для переміщення фокусу з області коду (Tab вставляє символ табуляції).</span></span></p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%">Drive to the end of the road +<span class="tlid-translation translation" lang="uk"><span title="">Поверніть праворуч</span></span> +Пройдіть прямо по перших двох роз'їздів +<span class="tlid-translation translation" lang="uk"><span title="">На третьому кільці поверніть ліворуч</span></span> +Школа знаходиться справа від вас, 300 метрів вперед по дорозі</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<ol>\n<li><span class="tlid-translation translation" lang="uk"><span title="">Проїдьте до кінця дороги</span></span></li>\n<li>Turn right</li>\n<li>Go straight across the first two roundabouts</li>\n<li>Turn left at the third roundabout</li>\n<li>The school is on your right, 300 meters up the road</li>\n</ol>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Активне_навчання_Розмітка_сторінки_рецепта"><span class="tlid-translation translation" lang="uk"><span title="">Активне навчання: Розмітка сторінки рецепта</span></span></h3> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Таким чином, на даний момент у статті, у вас є вся інформація, необхідна для позначення нашого прикладу сторінки рецептів.</span> <span title="">Ви можете зберегти локальну копію нашої</span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> <span class="tlid-translation translation" lang="uk"><span title="">запустіть файл і виконайте роботу там, або зробіть це в прикладі, що можна редагувати нижче.</span> <span title="">Можливо, це краще робити локально, оскільки ви зможете зберегти роботу, яку ви виконуєте, тоді як, якщо ви заповните її у редагований приклад, вона буде втрачена під час наступного відкриття сторінки.</span> <span title="">Обидва варіанти мають плюси і мінуси.</span></span></p> + +<div class="hidden"> +<h6 id="Відтворюваний_код_4"><span class="tlid-translation translation" lang="uk"><span title="">Відтворюваний код</span></span></h6> + +<pre class="brush: html"><h2><span class="tlid-translation translation" lang="uk"><span title="">Прямий вихід</span></span></h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2><span class="tlid-translation translation" lang="uk"><span title="">Код, що можна редагувати</span></span></h2> +<p class="a11y-label">Натисніть Esc для переміщення фокусу з області коду (Tab вставляє символ табуляції).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%"><span class="tlid-translation translation" lang="uk"><span class="alt-edited">Швидкий рецепт гумусу</span></span> + + <span class="tlid-translation translation" lang="uk"><span class="alt-edited">Цей рецепт робиться швидко</span></span>, смачний гумус, <span class="tlid-translation translation" lang="uk"><span title="">без плутанини</span></span>. <span class="tlid-translation translation" lang="uk"><span title="">Він був адаптований з ряду різних рецептів, які я читав протягом багатьох років.</span></span> + + Гумус - це смачна товста паста, яка широко використовується в стравах грецької та близькосхідної кухні. Це дуже смачно з салатом, м'ясом на грилі та хлібом Пітта. + +Інгредієнти + 1 <span class="tlid-translation translation" lang="uk"><span title="">банку (400 г) гороху (квасолі)</span></span> + 175g <span class="tlid-translation translation" lang="uk"><span title="">тахіні</span></span> + 6 <span class="tlid-translation translation" lang="uk"><span title="">сушених помідорів</span></span> +<span class="tlid-translation translation" lang="uk"><span title=""> Половина червоного перцю</span></span> + <span class="tlid-translation translation" lang="uk"><span title="">Щіпка кайенского перцю</span></span> + <span class="tlid-translation translation" lang="uk"><span title="">1 зубчик часнику</span></span> + Трохи оливкової олії + + <span class="tlid-translation translation" lang="uk"><span title="">Інструкції</span></span> + + Видаліть шкіру з часнику і грубо наріжте + Видаліть все насіння і стебло з перцю і грубо наріжте + <span class="tlid-translation translation" lang="uk"><span title="">Додайте всі інгредієнти в кухонний комбайн</span></span> + Переробіть всі інгредієнти в пасту. + Якщо ви хочете грубий "кремезний" гумус, обробляйте його на короткий час + <span class="tlid-translation translation" lang="uk"><span title="">Якщо ви хочете гладкий хумус, обробляйте його довше</span></span> + + <span class="tlid-translation translation" lang="uk"><span title="">Для іншого смаку, ви можете спробувати змішати в невеликій мірі лимон і коріандр, перець чилі, лайм і chipotle, harissa і м'ята, або шпинат і сир фета.</span> <span title="">Експериментуйте і подивіться, що працює для вас.</span></span> + + <span class="tlid-translation translation" lang="uk"><span title="">Зберігання</span></span> + + Завантажте готовий хумус в герметичний контейнер. Ви маєте можливість використовувати його протягом тижня після того, як ви його зробили. Якщо він починає шипувати, то обов'язково викиньте його. + + Гумус підходить для заморожування; Ви повинні заморозити його і використовувати протягом декількох місяців.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Quick hummous recipe</h1>\n\n<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>\n\n<p>Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>\n\n<h2>Ingredients</h2>\n\n<ul>\n<li>1 can (400g) of chick peas (garbanzo beans)</li>\n<li>175g of tahini</li>\n<li>6 sundried tomatoes</li>\n<li>Half a red pepper</li>\n<li>A pinch of cayenne pepper</li>\n<li>1 clove of garlic</li>\n<li>A dash of olive oil</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Remove the skin from the garlic, and chop coarsely.</li>\n<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>\n<li>Add all the ingredients into a food processor.</li>\n<li>Process all the ingredients into a paste.</li>\n<li>If you want a coarse "chunky" hummus, process it for a short time.</li>\n<li>If you want a smooth hummus, process it for a longer time.</li>\n</ol>\n\n<p>For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>\n\n<h2>Storage</h2>\n\n<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.</p>\n\n<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Якщо ви застрягли, ви завжди можете натиснути кнопку Показувати рішення або перевірити наш</span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> приклад на нашому github репозиторії.</p> + +<h3 id="Вкладені_списки"><span class="tlid-translation translation" lang="uk"><span title="">Вкладені списки</span></span></h3> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Цілком нормально вкласти один список у інший.</span> <span title="">Ви, можливо, захочете, щоб деякі підпункти знаходились під верхным рівнем.</span> <span title="">Візьмемо другий список з нашого прикладу рецептів:</span></span></p> + +<pre class="brush: html"><ol> + <li>Видаліть шкіру з часнику і грубо наріжте.</li> + <li>Видаліть все насіння і стебло з перцю і грубо наріжте.</li> + <li><span class="tlid-translation translation" lang="uk"><span title="">Додайте всі інгредієнти в кухонний комбайн.</span></span></li> + <li>Переробіть всі інгредієнти в пасту.</li> + <li>Якщо ви хочете грубий "кремезний" гумус, переробляйте його короткий час.</li> + <li>Якщо ви хочете гладкий гумус, переробляйте його довше.</li> +</ol></pre> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Оскільки останні дві кулі дуже тісно пов'язані з тією, що була перед ними (вони читаються, як під-інструкції або варіанти, які підходять нижче цієї кулі), може мати сенс вкладати їх у свій власний невпорядкований список і розміщувати цей список всередині</span> <span title="">четверта куля.</span> <span title="">Це виглядатиме так:</span></span></p> + +<pre class="brush: html"><ol> + <li>Видаліть шкіру з часнику і грубо наріжте.</li> + <li>Видаліть все насіння і стебло з перцю і грубо наріжте.</li> + <li><span class="tlid-translation translation" lang="uk"><span title="">Додайте всі інгредієнти в кухонний комбайн.</span></span></li> + <li>Переробіть всі інгредієнти в пасту. + <ul> + <li>Якщо ви хочете грубий "кремезний" гумус, переробляйте його короткий час.</li> + <li>Якщо ви хочете гладкий гумус, переробляйте його довше.</li> + </ul> + </li> +</ol></pre> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Спробуйте повернутися до попереднього активного прикладу навчання та оновити другий список, подібний до цього.</span></span>late</p> + +<h2 id="Акцент_і_важливість"><span class="tlid-translation translation" lang="uk"><span title="">Акцент і важливість</span></span></h2> + +<p><span class="tlid-translation translation" lang="uk"><span title="">У людській мові ми часто підкреслюємо певні слова, щоб змінити зміст речення, і ми часто хочемо позначити певні слова як важливі або різні.</span> <span title="">HTML надає різні семантичні елементи, які дозволяють нам розмічати текстовий вміст з такими ефектами, і в цьому розділі ми розглянемо деякі з найбільш поширених.</span></span></p> + +<h3 id="Акцент"><span class="tlid-translation translation" lang="uk"><span title="">Акцент</span></span></h3> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Коли ми хочемо додати акцент у розмовній мові, ми підкреслюємо певні слова, тонко змінюючи сенс того, що ми говоримо.</span> <span title="">Аналогічно, у письмовій мові ми схильні підкреслювати слова, виділяючи їх курсивом.</span> <span title="">Наприклад, наступні два речення мають різне значення.</span></span></p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Я радий, що ви не запізнилися.</span></span></p> + +<p>Я <em>радий</em>, що ви не <em>запізнилися</em>.</p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Перше речення звуки справді полегшено, що людина не запізнився.</span> <span title="">Навпаки, другий звучить саркастично або пасивно-агресивно, висловлюючи досаду, що людина прибула трохи пізно.</span></span></p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">У HTML ми використовуємо елемент {{htmlelement ("em")}} (вираз) для позначення таких екземплярів.</span> <span title="">Окрім того, що документ є цікавішим для читання, вони розпізнаються читачами екрану та висловлюються іншим тоном голосу.</span> <span title="">Браузери за замовчуванням створюють цей стиль як курсив, але ви не повинні використовувати цей тег, щоб отримати стиль курсиву.</span> <span title="">Для цього потрібно використовувати елемент {{htmlelement ("span")}} і деякий CSS, або, можливо, елемент {{htmlelement ("i")}} (див. Нижче).</span></span></p> + +<pre class="brush: html"><p>Я <em><span class="tlid-translation translation" lang="uk"><span title="">радий</span></span></em>, що ви не <em><em>запізнилися</em></em>.</p></pre> + +<h3 id="Велике_значення"><span class="tlid-translation translation" lang="uk"><span title="">Велике значення</span></span></h3> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Щоб підкреслити важливі слова, ми прагнемо підкреслити їх у розмовній мові і сміливо їх писати.</span> <span title="">Наприклад:</span></span></p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Ця рідина</span></span> <strong>дуже токсична.</strong></p> + +<p>Я розраховую на вас. <strong>Не</strong> запізнюйтеся!</p> + +<p>У HTML ми використовуємо {{htmlelement("strong")}} (strong важливий) елемент для позначення таких випадків. Окрім того, що документ стане більш корисним, вони знову розпізнаються читачами екрану та говорять різним тоном голосу. За умовчанням у браузерах цей текст виділено напівжирним шрифтом, але ви не повинні використовувати цей тег лише для отримання жирного стилю. Для цього потрібно використати {{htmlelement("span")}} елемент і деякі CSS, або, можливо,елемент{{htmlelement("b")}} (дивись нижче.)</p> + +<pre class="brush: html"><p>Ця рідина є <strong>дуже токсичною</strong>.</p> + +<p>Я розраховую на вас. <strong>Не </strong> запізнюйтесь!</p></pre> + +<p><strong><strong>За бажанням можна вмонтовувати strong і акцентувати всередині один одного:</strong></strong></p> + +<pre class="brush: html"><p>Ця рідина є <strong>дуже токсичною</strong> — +якщо ви її вип'єте, <strong>Ви можете <em>померти</em></strong>.</p></pre> + +<h3 id="Активне_навчання_Давайте_будемо_уважними!">Активне навчання: Давайте будемо уважними!</h3> + +<p><span class="tlid-translation translation" lang="uk"><span title="">У цьому розділі активного навчання ми надали приклад, який можна редагувати.</span> <span title="">Усередині неї ми хотіли б, щоб ви спробували додати акцент і важливе значення словам, які ви вважаєте потрібними їм, просто щоб мати певну практику.</span></span></p> + +<div class="hidden"> +<h6 id="Відтворюваний_код_5"><span class="tlid-translation translation" lang="uk"><span title="">Відтворюваний код</span></span></h6> + +<pre class="brush: html"><h2><span class="tlid-translation translation" lang="uk"><span title="">Прямий вихід</span></span></h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2><span class="tlid-translation translation" lang="uk"><span title="">Код, що можна редагувати</span></span></h2> +<p class="a11y-label">Натисніть Esc <span class="tlid-translation translation" lang="uk"><span class="alt-edited">щоб перемістити фокус з області коду (Tab вставить символ табуляції)</span></span>.</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>Important notice</h1> +<p><span class="tlid-translation translation" lang="uk"><span title="">У неділю 9 січня 2010 року була банда готів</span> + <span title="">плямистий крадіжка декількох садових гномів з</span> + <span title="">торговий центр в центрі міста Мілуокі.</span> <span title="">Вони були</span> + <span title="">все носять зелені комбінезони і дурні капелюхи, і</span> + <span title="">здавалося, мав кит часу.</span> <span title="">Якщо хто</span> + <span title="">будь-яка інформація про цей інцидент, будь ласка</span> + <span title="">зараз звертайтеся до поліції.</span></span></p></textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Important notice</h1>\n<p>On <strong>Sunday January 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing <strong><em>several</em> garden gnomes</strong> from a shopping center in downtown <strong>Milwaukee</strong>. They were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. If anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Курсив_жирний_підкреслений_..."><span class="tlid-translation translation" lang="uk"><span title="">Курсив, жирний, підкреслений ...</span></span></h3> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Елементи, які ми обговорювали до цих пір, мають чітко виражену семантику.</span> <span title="">Ситуація з </span></span>{{htmlelement("b")}}, {{htmlelement("i")}}, та {{htmlelement("u")}} <span class="tlid-translation translation" lang="uk"><span title="">дещо складніше. Вони прийшли так, щоб люди могли писати напівжирний, курсив або підкреслений текст в епоху, коли CSS все ще підтримувався погано або зовсім не підтримувався.</span></span> <span class="tlid-translation translation" lang="uk"><span title="">Такі елементи, які впливають лише на презентацію, а не на семантику, відомі як елементи презентації і більше не повинні використовуватися, оскільки, як ми бачили раніше, семантика настільки важлива для доступності, SEO та ін.</span></span></p> + +<p>HTML5 <span class="tlid-translation translation" lang="uk"><span title="">перевизначено</span></span> <code><b></code>, <code><i></code> та <code><u></code> <span class="tlid-translation translation" lang="uk"><span title="">з новими, дещо заплутаними, семантичними ролями.</span></span></p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Ось найкраще правило: скоріше за все доцільно використовувати <b>, <i> або <u>, щоб передати значення, яке традиційно передається жирним шрифтом, курсивом або підкресленням, за умови, що немає більш відповідного елемента.</span> <span title="">Тим не менш, завжди залишається критично важливим збереження мислення доступності.</span> <span title="">Концепція курсиву не дуже корисна людям, які використовують читання з екрану, або людям, які використовують систему письма, окрім латинського алфавіту.</span></span></p> + +<ul> + <li><span class="tlid-translation translation" lang="uk"><span title="">{{HTMLElement ('i')}} використовується для передачі значення, яке традиційно передається курсивом: іноземні слова, таксономічне позначення, технічні терміни, думка ...</span></span></li> + <li><span class="tlid-translation translation" lang="uk"><span title="">{{HTMLElement ('b')}} використовується для передачі значення, яке традиційно передається жирним шрифтом: Ключові слова, назви продуктів, головне речення ...{{HTMLElement ('b')}} використовується для передачі значення, яке традиційно передається жирним шрифтом: Ключові слова, назви продуктів, головне речення ...</span></span></li> +</ul> + +<div class="note"> +<p><span class="tlid-translation translation" lang="uk"><span title="">Попередження про підкреслення: люди пов'язують підкреслення з гіперпосиланнями.</span> <span title="">Тому в Інтернеті краще підкреслити лише посилання.</span> <span title="">Використовуйте елемент <u>, якщо він семантично доречний, але розгляньте можливість використання CSS для зміни підкресленого підкреслення на щось більш доречне в Інтернеті.</span> <span title="">Наведений нижче приклад ілюструє, як це можна зробити.</span></span></p> +</div> + +<pre class="brush: html"><!-- <span class="tlid-translation translation" lang="uk"><span title="">наукові назви </span></span>--> +<p> + <span class="tlid-translation translation" lang="uk"><span title="">Рубінова колібрі (<i> Archilochus colubris </i>)</span> + <span title="">є найбільш поширеним колібром у Східній Північній Америці. +</p> + +<!-- <span class="tlid-translation translation" lang="uk"><span title="">іноземні слова</span></span> --> +<p> + <span class="tlid-translation translation" lang="uk"><span title="">Меню було морем екзотичних слів</span></span> <i lang="uk-latn">ватрушка</i>, + <i lang="id">nasi goreng</i> та <i lang="fr">soupe à l'oignon</i>. +</p> + +<!-- відоме неправильне написання --> +<p> + Коли-небудь я дізнаюся, як це зробити <u>spel</u> better. +</p> + +<!-- Виділіть ключові слова в наборі інструкцій --> +<ol> + <li> + <b>Фрагмент</b> два шматки хліба з буханки. + </li> + <li> + <b>Вставити</b> шматочок томата і лист салату між шматочками хліба. + </li> +</ol> +</span></span> +</pre> + +<h2 id="Підсумок"><strong>Підсумок</strong></h2> + +<p>Ось це зараз! Ця стаття повинна була дати вам гарне уявлення про те, як почати розмітку тексту в HTML, і познайомили вас з деякими з найважливіших елементів у цій області. Існує набагато більше семантичних елементів для висвітлення в цій області, і ми розглянемо набагато більше в нашій статті "Більше семантичних елементів", що пізніше буде в курсі. У наступній статті ми детально розглянемо, як <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks"> створювати гіперпосилання </a>, можливо, найважливіший елемент на Web.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="У_цьому_модулі"><strong>У цьому модулі</strong></h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Початок роботи з HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Що в head? Метадані в HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Основи тексту HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Створення гіперпосилань</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Розширене форматування тексту</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Структура документа та веб-сайту</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Налагодження HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Розмітка літери</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">вмісту</a></li> +</ul> diff --git a/files/uk/learn/html/introduction_to_html/index.html b/files/uk/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..9b9ee8d4a6 --- /dev/null +++ b/files/uk/learn/html/introduction_to_html/index.html @@ -0,0 +1,55 @@ +--- +title: Вступ до HTML +slug: Learn/HTML/Introduction_to_HTML +translation_of: Learn/HTML/Introduction_to_HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{glossary("HTML")}} є відносно простою мовою. Вона складається з <a href="https://developer.mozilla.org/uk/docs/Glossary/Element">елементів</a>, які можуть застосовуватися до різних частин тексту і надавати їм певного значення в документі (наприклад, цей текст є параграфом, цей — ненумерованим списком, цей — частиною таблиці), розбивати документ на логічні частини (це заголовок, це три колонки контенту, це меню навігації), а також вставляти контент, такий як відео чи зображення, у документ. У цьому розділі ми поговоримо про перші два з цих завдань, а також розглянемо базові поняття і синтаксис, які потрібні для розуміння HTML.</p> + +<h2 id="Передумови">Передумови</h2> + +<p>Для цього розділу вам не потрібні попередні знання з HTML, але потрібно бути користувачем комп'ютерів і мережі (принаймні на рівні переглядання сайтів). Також вам буде потрібне базове робоче середовище, встановлення якого описане в статті <em><a href="/uk/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення основного програмного забезпечення</a></em>, і розуміння того, як створювати і керувати файлами, як описано в статті <em><a href="/uk/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Робота з файлами</a></em> — обидві статті є частинами розділу <em><a href="/uk/docs/Learn/Getting_started_with_the_web">Початок роботи з вебом</a></em>.</p> + +<div class="note"> +<p><strong>Примітка:</strong> якщо ви працюєте на комп'ютері/планшеті/іншому пристрої, на якому не маєте можливості створювати файли, спробуйте писати код в онлайн-програмах, таких як <a href="http://jsbin.com/">JSBin</a> чи <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Посібники">Посібники</h2> + +<p>Статті у цьому розділі пояснюють базову теорію HTML і надають можливість перевірити ваші навички.</p> + +<dl> + <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Початок роботи з HTML</a></dt> + <dd>Стаття пояснює елементарні основи HTML — що таке елементи, атрибути та інші важливі поняття, які ви могли чути, і яке завдання вони виконують. Ми також покажемо, як побудований елемент HTML, як побудована типова сторінка HTML, і пояснимо інші основні особливості мови. В процесі роботи ми трохи пограємо з HTML, щоб вам було цікаво!</dd> + <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Що в head? Метадані в HTML</a></dt> + <dd><a href="https://developer.mozilla.org/uk/docs/Glossary/Head">Head</a> в HTML-документі є частиною, яка <strong>не відображається</strong> в веб-браузері коли сторінка завантажується. Вона містить інформацію про сторінку, такі як {{htmlelement("title")}}, посилання на {{glossary("CSS")}} (якщо ви хочете надати стиль вашому HTML-змісту за допомогою CSS), посилання до користувальницьких favicons та метаданих (тобто даних про HTML, наприклад, хто його написав (автор) і важливі ключові слова (keywords), що описують документ.)</dd> + <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Основи HTML-тексту</a></dt> + <dd>Одним із основних завдань HTML є надання текстового значення (також відомого як <a href="https://developer.mozilla.org/uk/docs/Glossary/Semantics">семантика</a>), щоб браузер знав, як правильно відображати його. У цій статті розглядається, як правильно використовувати HTML, щоб розбити блок тексту на структуру заголовків та абзаців (параграфів), додати акцент/важливість слів, створити списки і багато іншого.</dd> + <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Створення гіперпосилань</a></dt> + <dd>Гіперпосилання дійсно важливі — саме вони роблять Інтернет павутиною. Ця стаття показує синтаксис, необхідний для створення посилання і обговорює кращі практичні поради.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Розширене форматування тексту</a></dt> + <dd>В HTML є багато інших елементів для форматування тексту, про які ми не вказали в статті <a href="/uk/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Основи HTML тексту</a>. Елементи, що знаходяться тут, менш відомі, але їх все ж корисно знати. Тут ви дізнаєтесь про позначення цитат, списки опису, комп'ютерний код та інший пов'язаний текст, індекс та верхній індекс, контактну інформацію та багато іншого.</dd> + <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Структура документу та веб-сайту</a></dt> + <dd>Крім визначення окремих частин вашої сторінки (наприклад "абзац" або "зображення"), HTML також використовується для визначення областей вашого веб-сайту (таких як "заголовок", "навігаційне меню", "колонка основного змісту".) У цій статті розглянуто, як планувати основну структуру веб-сайту, а також написати HTML-код для представлення цієї структури.</dd> + <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Відлагодження HTML</a></dt> + <dd>Написали HTML-код файно, але що робити, якщо щось йде неправильно і ви не можете з'ясувати, де помилка в коді? В цій статті ви ознайомитесь з деякими інструментами, які зможуть вам допомогти.</dd> +</dl> + +<h2 id="Оцінки">Оцінки</h2> + +<p>Наступні оцінки допоможуть перевірити ваше розуміння базових основ HTML, описаних вище в посібниках.</p> + +<dl> + <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Розмітка/Форматування листа</a></dt> + <dd>Ми всі вчимося писати листи рано чи пізно. Це також корисний приклад, щоб перевірити свої навички у форматуванні тексту. Отже, в цій оцінці вам буде надіслано листа для форматування.</dd> + <dt><a href="/uk/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Структурування сторінки змісту</a></dt> + <dd>Ця оцінка перевіряє ваше вміння використовувати HTML для структурування простої сторінки змісту, що містить заголовок (header), нижній колонтитул (footer), навігаційне меню (navigation menu), основний зміст (main content), і бічну панель (sidebar).</dd> +</dl> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Основи веб-грамотності 1</a></dt> + <dd>Відмінний курс навчання Mozilla foundation, який навчає та випробовує багато навичок, про які говорилося в модулі <em>Вступ до HTML</em>. Учні знайомляться з читанням, написанням та участю в Інтернеті в цьому шестичастинному модулі. Дізнайтеся про основи Інтернету за допомогою виробництва та співпраці.</dd> +</dl> diff --git a/files/uk/learn/html/introduction_to_html/scho_v_head_metadani_v_html/index.html b/files/uk/learn/html/introduction_to_html/scho_v_head_metadani_v_html/index.html new file mode 100644 index 0000000000..63ac7a8cfa --- /dev/null +++ b/files/uk/learn/html/introduction_to_html/scho_v_head_metadani_v_html/index.html @@ -0,0 +1,276 @@ +--- +title: Що в head? Метадані в HTML +slug: Learn/HTML/Introduction_to_HTML/scho_v_head_metadani_v_HTML +tags: + - CSS + - HTML + - head + - Заголовок + - Мова + - Основи + - Розмітка + - веб-сторінки + - голова + - для початківців + - значки + - мета +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Елемент {{glossary("Head", "head")}} <span id="result_box" lang="uk"><span>документа HTML - це частина, яка не відображається у веб-браузері під час завантаження сторінки</span></span>. Він <span id="result_box" lang="uk"><span>містить таку інформацію, як назва сторінки </span></span>{{htmlelement("title")}}, посилання на файл стилів {{glossary("CSS")}} (якщо ви хочете стилізувати ваш HTML контент за допомогою CSS), посилання на власні іконки та інші метадані (<span id="result_box" lang="uk"><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>.</td> + </tr> + <tr> + <th scope="row">Мета:</th> + <td><span id="result_box" lang="uk"><span>Дізнатись про заголовок (head) в HTML, які в нього задачі, найважливіші елементи, які він може містити, і який вплив він може мати на HTML-документ.</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Що_таке_заголовок_(head)_HTML">Що таке заголовок (head) HTML?</h2> + +<p>Давайте перейдемо до простого <a href="/uk/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">HTML документу, який ми розглянули в попередній статті</a>:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p>Заголовок HTML (head) - це вміст елементу {{htmlelement("head")}} — <span id="result_box" lang="uk"><span>на відміну від вмісту елемента</span></span> {{htmlelement("body")}} (<span id="result_box" lang="uk"><span>яке відображається на сторінці при завантаженні в браузері),</span> <span>вміст head не відображається на сторінці</span></span>. Головним завданням заголовку є містити {{glossary("Metadata", "метадані")}} про документ. <span id="result_box" lang="uk"><span>У наведеному вище прикладі заголовок досить малий</span></span>:</p> + +<pre class="brush: html"><head> + <meta charset="utf-8"> + <title>My test page</title> +</head></pre> + +<p><span id="result_box" lang="uk"><span>Однак у більших сторінках заголовок може містити досить велику кількість інформації - спробуйте перейти на деякі з ваших улюблених веб-сайтів та за допомогою</span></span> <a href="/uk/docs/Learn/Discover_browser_developer_tools">інструментів розробника</a> перевірте вміст заголовку. <span id="result_box" lang="uk"><span>Наша мета полягає не в тому, щоб показати вам, як використовувати все, що може бути поставлено в заголовок, а навчити вас використовувати найочевидніші речі, які ви хочете включити в заголовок і ознайомити з ними.</span> <span>Давайте розпочнемо.</span></span></p> + +<h2 id="Додавання_назви_сторінки">Додавання назви сторінки</h2> + +<p><span id="result_box" lang="uk"><span>Ми вже бачили елемент</span></span> елемент {{htmlelement("title")}} в дії — він<span id="result_box" lang="uk"><span> може бути використаний для додавання назви (title) документа.</span> <span>Однак його можна зплутати з елементом</span></span> {{htmlelement("h1")}}, який <span id="result_box" lang="uk"><span>використовується для додавання заголовка верхнього рівня до вашого вмісту body - його також іноді називають заголовком сторінки.</span> <span>Але це різні речі!</span></span></p> + +<ul> + <li>Елемент {{htmlelement("h1")}} <span id="result_box" lang="uk"><span>з'являється на сторінці, коли завантажується в браузері - зазвичай його слід використовувати лише один раз на сторінці, щоб позначити заголовок вмісту сторінки (заголовок статті, заголовок новин або все, що підходить для змісту).</span></span></li> + <li>Елемент {{htmlelement("title")}} - <span id="result_box" lang="uk"><span>це метадані, які являють собою заголовок (назву) всього документа HTML (а не змісту документа</span></span>).</li> +</ul> + +<h3 id="Активне_навчання_перевірка_простого_прикладу"><span class="short_text" id="result_box" lang="uk"><span>Активне навчання: перевірка простого прикладу</span></span></h3> + +<ol> + <li><span id="result_box" lang="uk"><span>Щоб розпочати це активне навчання, ми хотіли б, щоб ви перейшли на наш</span></span> GitHub репозиторій та завантажили копію нашої <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html сторінки</a>. Для цього також + + <ol> + <li><span id="result_box" lang="uk"><span>Скопіюйте та вставте код із сторінки в новий текстовий файл у редакторі коду, а потім збережіть його в зручному місці</span></span>.</li> + <li>Натисніть кнопку "Raw" на сторінці, <span id="result_box" lang="uk"><span>яка призведе до появи вихідного коду на новій вкладці веб-браузера</span></span>. <span id="result_box" lang="uk"><span>Потім виберіть у меню вашого браузера</span></span> <em>Файл > Зберегти як...</em> <span id="result_box" lang="uk"><span>а потім виберіть місце для збереження файлу</span></span>.</li> + </ol> + </li> + <li><span id="result_box" lang="uk"><span>Тепер відкрийте файл у своєму веб-браузері.</span> <span>Ви повинні побачити щось подібне</span></span>: + <p><img alt="A simple web page with the title set to <title> element, and the <h1> set to <h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;"> <span id="result_box" lang="uk"><span>Тепер повинно бути абсолютно зрозуміло, в чому різниця між </span></span><code><h1></code> та <code><title></code>!</p> + </li> + <li><span id="result_box" lang="uk"><span>Ви також маєте спробувати відкрити код в редакторі коду, відредагувати вміст цих елементів, а потім оновити сторінку у своєму веб-браузері.</span> Поекспериментуйте з<span> кодом, змінюючи його!</span></span></li> +</ol> + +<p>Зміст елементу <code><title></code> також використовується в інший спосіб. Наприклад, якщо ви спробуєте закласти сторінку (Закладки<em> > Закласти цю сторінку </em>або значок зірки в адресному рядку в Firefox), ви побачите зміст <code><title></code> <span id="result_box" lang="uk"><span>заповнений як назва закладки.</span></span></p> + +<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p> + +<p>Вміст <code><title></code> <span id="result_box" lang="uk"><span>також використовується в результатах пошуку, як ви побачите нижче</span></span>.</p> + +<h2 id="Метадані_елемент_<meta>">Метадані: елемент <meta></h2> + +<p><span id="result_box" lang="uk"><span>Метадані - це дані, які описують дані, і HTML має "офіційний" спосіб додавання метаданих до документа - елемент</span></span> {{htmlelement("meta")}}. <span id="result_box" lang="uk"><span>Звичайно, інші речі, про які ми говоримо в цій статті, також можуть розглядатися як метадані.</span> <span>Існує багато різних типів елементів</span></span> <code><meta></code> <span id="result_box" lang="uk"><span>які можуть бути включені в </span></span><head> вашої сторінки, <span id="result_box" lang="uk"><span>але не будемо намагатись пояснити їх усі на даному етапі, оскільки це може вас заплутати.</span> <span>Замість цього ми пояснимо декілька речей, які ви, можливо, зазвичай бачите, щоб розібратись, що до чого.</span></span></p> + +<h3 id="Визначення_кодування_символів_документа"><span class="short_text" id="result_box" lang="uk"><span>Визначення кодування символів документа</span></span></h3> + +<p><span id="result_box" lang="uk"><span>У прикладі, показаному вище, цей рядок також включений</span></span>:</p> + +<pre class="brush: html"><meta charset="utf-8"></pre> + +<p><span id="result_box" lang="uk"><span>Цей елемент просто вказує кодування символів документа - набір символів, який документ може використовувати.</span></span> <code>utf-8</code> <span id="result_box" lang="uk"><span>- це універсальний набір символів, що включає практично будь-які символи з будь-якої людської мови.</span> <span>Це означає, що ваша веб-сторінка зможе обробляти будь-яку мову;</span> <span>тому правильно встановити це кодування на кожній веб-сторінці, яку ви створюєте!</span> <span>Наприклад, ваша сторінка може чудово відображатись англійською та японською мовами:</span></span></p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;"> <span id="result_box" lang="uk"><span>Якщо ви встановите кодування символів, наприклад, </span></span><code>ISO-8859-1</code>, (<span id="result_box" lang="uk"><span>набір символів для латинського алфавіту), виведенний текст сторінок буде зіпсованим:</span></span></p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p> + +<h3 id="Активне_навчання_експеримент_із_кодуванням_символів"><span id="result_box" lang="uk"><span>Активне навчання: експеримент із кодуванням символів</span></span></h3> + +<p><span id="result_box" lang="uk"><span>Щоб спробувати це, перегляньте простий шаблон HTML, який ви отримали в попередньому розділі </span></span> <code><title></code> (the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a>), <span class="short_text" id="result_box" lang="uk"><span>спробуйте змінити значення мета-кодування на</span></span> <code>ISO-8859-1</code>, <span id="result_box" lang="uk"><span>і додайте японську мову на свою сторінку.</span> <span>Це текст, який ми використовували</span></span> (до речі, там написано "рис гарячий"):</p> + +<pre class="brush: html"><p>Japanese example: ご飯が熱い。</p></pre> + +<h3 id="Додавання_автора_та_опису"><span class="short_text" id="result_box" lang="uk"><span>Додавання автора та опису</span></span></h3> + +<p>Багато елементів <code><meta></code> містять атрибути <code>name</code> та <code>content</code>:</p> + +<ul> + <li><code>name</code> <span id="result_box" lang="uk"><span>вказує тип мета-елемента;</span> <span>який тип інформації він містить</span></span>.</li> + <li><code>content</code> вказує актуальний мета контент.</li> +</ul> + +<p><span id="result_box" lang="uk"><span>Два таких мета-елемента, які корисні для включення в сторінку, визначають автора сторінки та надають стислий опис сторінки.</span> <span>Давайте подивимось на приклад:</span></span></p> + +<pre class="brush: html"><meta name="author" content="Chris Mills"> +<meta name="description" content="<span id="result_box" lang="ru"><span>Учбовий центр MDN спрямований на те, +щоб надати всім новачкам в Інтернеті все, що їм необхідно знати, +щоб приступити до розробки веб-сайтів і додатків.</span></span>"></pre> + +<p><span id="result_box" lang="uk"><span>Вказівка імені автора корисна по кількох причинах: корисно вміти розібратися, хто написав сторінку, якщо ви захочете зв'язатися з ним з питаннями про вміст.</span> <span>Деякі системи керування вмістом (CMS) мають можливості для автоматичного виявлення інформації про автора сторінок та надання доступу до них.</span></span></p> + +<p><span id="result_box" lang="uk"><span>Вказування опису, що містить ключові слова, що відносяться до вмісту вашої сторінки, є корисним, оскільки він може призвести до того, що ваша сторінка буде відображатися вище в результатах пошуку, що виконуються пошуковими системами (такі дії називаються </span></span><a href="/uk/docs/Glossary/SEO">Пошуковою оптимізацією</a>, або {{glossary("SEO")}}.)</p> + +<h3 id="Активне_навчання_використання_опису_в_пошукових_системах"><span id="result_box" lang="uk"><span>Активне навчання: використання опису в пошукових системах</span></span></h3> + +<p><span id="result_box" lang="uk"><span>Опис також використовується на сторінках результатів пошуку.</span> <span>Давайте пройдемо вправу, щоб вивчити це</span></span>:</p> + +<ol> + <li>Перейдіть на <a href="https://developer.mozilla.org/uk/">головну сторінку Mozilla Developer Network</a>.</li> + <li>Перегляньте джерело сторінки (клікніть правою кнопкою миші на сторінці, виберіть <em>Програмний код сторінки (View Page Source)</em> із контекстного меню.</li> + <li><span class="short_text" id="result_box" lang="uk"><span>Знайдіть опис метатегів.</span> <span>Він буде виглядати так</span></span>: + <pre class="brush: html"><meta name="description" content="The Mozilla Developer Network (MDN) provides +information about Open Web technologies including HTML, CSS, and APIs for both +Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS."></pre> + </li> + <li>Тепер знайдіть "Mozilla Developer Network" у вашій улюбленій пошуковій системі (Ми використовуємо Yahoo.) <span id="result_box" lang="uk"><span>Ви помітите опис елементів вмісту</span></span> <code><meta></code> та <code><title></code>, <span id="result_box" lang="uk"><span>що використовуються в результатах пошуку</span></span> — безумовно їх варто вказувати! + <p><img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/12347/search-result.png" style="display: block; margin: 0 auto;"></p> + </li> +</ol> + +<div class="note"> +<p><strong>Примітка</strong>: В <span id="result_box" lang="uk"><span>Google ви побачите деякі важливі субсторінки MDN під посиланням на головну сторінку MDN - вони називаються посилання на сайт (</span></span>sitelinks<span lang="uk"><span>) і налаштовуються в інструментах Google для веб-майстрів</span></span> <a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a> — <span id="result_box" lang="uk"><span>це спосіб зробити результати пошуку вашого сайту кращими в пошуковій системі Google.</span></span></p> +</div> + +<div class="note"> +<p><strong>Примітка</strong>: Багато функцій <code><meta></code> більше не використовуються. Наприклад, ключове слово <code><meta></code> елемента (<code><meta name="keywords" content="заповнити, в, ваші, ключові, слова, тут"></code>) — <span id="result_box" lang="uk"><span>який повинен забезпечити ключові слова для пошукових систем, щоб визначити релевантність цієї сторінки для різних пошукових термінів - нині ігноруються пошуковими системами, оскільки спамери просто заповнювали список ключових слів на сторінці сотнями ключових слів, щоб їх сайти з'являлись в результатах пошуку якомога вище.</span></span></p> +</div> + +<h3 id="Інші_типи_метаданих"><span class="short_text" id="result_box" lang="uk"><span>Інші типи метаданих</span></span></h3> + +<p><span id="result_box" lang="uk"><span>Мандруючи Інтернетом ви також можете знайти інші типи метаданих.</span> <span>Багато функцій, які ви бачитимете на веб-сайтах, є власне створеними, призначеними для надання деяким сайтам (наприклад, сайтам соціальних мереж) певної інформації, яку вони можуть використовувати.</span></span></p> + +<p>Наприклад, <a href="http://ogp.me/">Open Graph Data</a> <span id="result_box" lang="uk"><span>є протоколом метаданих, який Facebook винайшов для надання більш багатих метаданих для веб-сайтів.</span> <span>У коді MDN ви знайдете це:</span></span></p> + +<pre class="brush: html"><meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> +<meta property="og:description" content="The Mozilla Developer Network (MDN) provides +information about Open Web technologies including HTML, CSS, and APIs for both Web sites +and HTML5 Apps. It also documents Mozilla products, like Firefox OS."> +<meta property="og:title" content="Mozilla Developer Network"></pre> + +<p><span id="result_box" lang="uk"><span>Одним з ефектів цього є те, що, коли ви посилаєтеся на MDN на Facebook, посилання з'являється разом із зображенням та описом: більш зручно для користувачів</span></span>.</p> + +<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">Twitter <span id="result_box" lang="uk"><span>також має власні аналогічні запатентовані метадані, що мають подібний ефект, коли URL-адреса сайту відображається на twitter.com.</span> <span>Наприклад:</span></span></p> + +<pre class="brush: html"><meta name="twitter:title" content="Mozilla Developer Network"></pre> + +<h2 id="Додавання_власних_іконок_на_сайт"><span class="short_text" id="result_box" lang="uk"><span>Додавання власних іконок на сайт</span></span></h2> + +<p><span id="result_box" lang="uk"><span>Щоб ще більше збагатити дизайн сайту, ви можете в метадані додавати посилання на власні іконки, і вони будуть відображатися у певних контекстах.</span></span></p> + +<p><span id="result_box" lang="uk"><span>Цей скромний значок, який існує протягом багатьох років, був першою піктограмою такого типу, значок 16 x 16 пікселів, який використовується в багатьох місцях.</span> <span>Ви побачите значки, які відображатимуться на вкладці веб-переглядача, що містять кожна відкрита сторінка, а також поруч зі сторінками, закладеними на панелі закладок.</span></span></p> + +<p>Іконка <span id="result_box" lang="uk"><span>може бути додана на сторінку за допомогою</span></span>:</p> + +<ol> + <li><span id="result_box" lang="uk"><span>Зберігаючи її в тому самому каталозі, що й індексна сторінка сайту (index), збережена у форматі </span></span><code>.ico</code><span lang="uk"><span> (більшість браузерів підтримуватиме функцію favicons у більш поширених форматах, наприклад </span></span><code>.gif</code><span lang="uk"><span> або </span></span><code>.png</code><span lang="uk"><span>, але за допомогою формату ICO це гарантує, що він буде працювати ще в Internet Explorer 6</span></span>).</li> + <li>Додайте наступний рядок в <code><head></code> HTML документу, щоб вказати іконку: + <pre class="brush: html"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> + </li> +</ol> + +<p><span class="short_text" id="result_box" lang="uk"><span>Ось приклад піктограми на панелі закладок</span></span>:</p> + +<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p> + +<p><span id="result_box" lang="uk"><span>Також існує безліч інших типів іконок.</span> <span>Наприклад, ви знайдете їх в вихідному коді домашньої сторінки MDN</span></span>:</p> + +<pre class="brush: html"><!-- third-generation iPad with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"> +<!-- iPhone with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"> +<!-- first- and second-generation iPad: --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"> +<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> +<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"> +<!-- basic favicon --> +<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"></pre> + +<p><span id="result_box" lang="uk"><span>У коментарях пояснюється, для чого використовується кожна іконка, наприклад, при додаванні сторінки на головний екран iPad буде використана іконка</span></span><span lang="uk"><span> високої роздільної здатності.</span></span></p> + +<p><span id="result_box" lang="uk"><span>Не хвилюйтеся щодо впровадження всіх цих типів іконок прямо зараз - це досить просунута функція, і від вас не очікується знання про це, щоб просунутися в курсі.</span> <span>Основна мета тут полягає в тому, щоб повідомити вам про такі речі, і не лякайтеся, якщо ви зустрінете їх під час перегляду вихідних кодів інших веб-сайтів.</span></span></p> + +<h2 id="Застосування_CSS_та_JavaScript_в_HTML"><span class="short_text" id="result_box" lang="uk"><span>Застосування CSS та JavaScript в HTML</span></span></h2> + +<p><span id="result_box" lang="uk"><span>Практично всі веб-сайти, якими ви користуєтесь на сьогоднішній день, використовують</span></span> {{glossary("CSS")}} щоб виглядати класно та {{glossary("JavaScript")}} <span id="result_box" lang="uk"><span>для роботи інтерактивних функцій, таких як відеоплеєри</span> <span>, карти, ігри тощо</span></span>. Зазвичай пов'язані стилі додають на сторінку за допомогою елементу {{htmlelement("link")}}, а скрипти за допомогою елементу {{htmlelement("script")}} відповідно.</p> + +<ul> + <li> + <p>Елемент {{htmlelement("link")}} завжди розміщується в середині голови (head) веб-документу. Цей елемент має два атрибути, rel="stylesheet", <span id="result_box" lang="uk"><span>який вказує, що це таблиця стилів документа, а також href, що вказує шлях до файлу стилів (до файлу з розширенням css):</span></span></p> + + <pre class="brush: html"><link rel="stylesheet" href="my-css-file.css"></pre> + </li> + <li> + <p>Елемент {{htmlelement("script")}} не обов'язково має бути в голові сторінки (head); насправді, краще скрипт розміщувати в нижній частині тіла документа (body) (перед закриваючим тегом <code></body></code>), <span id="result_box" lang="uk"><span>щоб переконатися, що весь вміст HTML сторінки був прочитаний браузером, перш ніж він намагатиметься застосувати JavaScript на сторінці</span><span> </span></span> (<span id="result_box" lang="uk"><span>якщо JavaScript намагається отримати доступ до елемента, який ще не існує, браузер видає помилку</span></span>).</p> + + <pre class="brush: html"><script src="my-js-file.js"></script></pre> + + <p><strong>Примітка</strong>: Елемент <code><script></code> <span id="result_box" lang="uk"><span>може виглядати як порожній елемент, але це не так, і тому потрібен закриваючий тег.</span> <span>Замість того, щоб вказувати на зовнішній файл сценарію, ви також можете додати ваш сценарій в елемент </span></span><code><script></code>.</p> + </li> +</ul> + +<h3 id="Активне_навчання_застосування_CSS_та_JavaScript_на_сторінці"><span id="result_box" lang="uk"><span>Активне навчання: застосування CSS та JavaScript на сторінці</span></span></h3> + +<ol> + <li><span id="result_box" lang="uk"><span>Щоб розпочати це активне навчання, візьміть копії наших</span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> та <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> файлів, <span id="result_box" lang="uk"><span>і збережіть їх на своєму комп'ютері в тій же директорії. </span></span><span id="result_box" lang="uk"><span>Переконайтеся, що вони збережені з правильними іменами та розширеннями файлів.</span></span> <span lang="uk"> </span></li> + <li><span id="result_box" lang="uk"><span>Відкрийте файл HTML у вашому браузері та текстовий редактор</span></span>.</li> + <li><span id="result_box" lang="uk"><span>Виконавши ці кроки, додайте до вашого HTML документу елементи</span></span> {{htmlelement("link")}} та {{htmlelement("script")}}, щоб CSS та JavaScript застосувались до HTML-документу.</li> +</ol> + +<p><span id="result_box" lang="uk"><span>Якщо все правильно зроблено, коли ви збережете свій HTML-код і оновите свій браузер, то побачите, що на сторінці все змінилося:</span></span></p> + +<p><img alt="Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>JavaScript <span id="result_box" lang="uk"><span>додав порожній список на сторінку.</span> <span>Тепер, коли ви натиснете де-небудь у списку, з'явиться діалогове вікно з проханням ввести якийсь текст для нового елемента списку.</span> К<span>оли ви натиснете кнопку ОК, новий елемент списку буде додано до списку, що містить текст.</span> <span>Коли ви натискаєте існуючий елемент списку, з'явиться діалогове вікно, що дозволить вам змінити текст об'єкта.</span></span></li> + <li><span id="result_box" lang="uk"><span>CSS змусив фон змінитись зеленим кольором, а текст став більшим.</span> <span>Він також стилізовав деякий вміст, який JavaScript додав на сторінку (червона смужка з чорною рамкою - це стиль, який CSS додав до списку, створений JS).</span></span></li> +</ul> + +<div class="note"> +<p><strong>Примітка</strong>: <span id="result_box" lang="uk"><span>Якщо ви застрягли в цій вправі і не можете застосувати</span></span> CSS/JS на сторінці, то перегляньте нашу сторінку <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> з прикладом.</p> +</div> + +<h2 id="Встановлення_основної_мови_документа"><span class="short_text" id="result_box" lang="uk"><span>Встановлення основної мови документа</span></span></h2> + +<p><span id="result_box" lang="uk"><span>Нарешті, варто зазначити, що ви можете (і це необхідно) встановити мову своєї сторінки.</span></span> Це можна зробити, додавши <a href="/uk/docs/Web/HTML/Global_attributes/lang">lang attribute</a> (атрибут мови) до відкриваючого HTML-тегу (як показано в прикладі <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> і показано нижче).</p> + +<pre class="brush: html"><html lang="en-US"></pre> + +<p>Це корисно в багатьох випадках. <span id="result_box" lang="uk"><span>Ваш HTML-документ буде більш ефективно індексований пошуковими системами, </span></span>які використовують це, щоб ефективніше індексувати сторінки — наприклад, показувати їх користувачам, які використовують відповідну мову <span lang="uk"><span>(дозволяючи їй відображатися належним чином), і це корисно для людей з порушеннями зору, що використовують програми зчитування з екрана - скрінрідери (наприклад, слово</span> <span>"динозавр" говорять як українською, так й іншими мовами, але воно вимовляється по-різному).</span></span></p> + +<p><span id="result_box" lang="uk"><span>Ви також можете встановити підрозділи вашого документа, щоб вони розпізнавались різними мовами.</span> В нашому прикладі з фрагментом японською мовою правильно вказати мову так</span>:</p> + +<pre class="brush: html"><p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p></pre> + +<p><span id="result_box" lang="uk"><span>Ці коди визначаються стандартом</span></span> <a href="https://uk.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a>. <span id="result_box" lang="uk"><span>Ви можете дізнатись більше про них в</span></span> <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a>.</p> + +<h2 id="Підсумок">Підсумок</h2> + +<p>На цьому закінчим наш короткий огляд заголовку HTML — там ще багато всього корисного, але зараз повний перелік буде нудним і заплутає вас. Ви вже маєте загальне уявлення про найпоширеніші і використовуваніші елементи. У наступній статті ми розглянемо основи розмітки тексту в HTML.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p> + +<p> </p> + +<p> </p> diff --git a/files/uk/learn/html/multimedia_and_embedding/index.html b/files/uk/learn/html/multimedia_and_embedding/index.html new file mode 100644 index 0000000000..6dccf89410 --- /dev/null +++ b/files/uk/learn/html/multimedia_and_embedding/index.html @@ -0,0 +1,55 @@ +--- +title: Вставки мультимедіа +slug: Learn/HTML/Multimedia_and_embedding +translation_of: Learn/HTML/Multimedia_and_embedding +--- +<p>{{LearnSidebar}}</p> + +<p class="summary">До цього часу ми переглянули багато тексту в цьому курсі, але Інтернет буде справді нудним лише за допомогою тексту. Давайте почнемо дивитись на те, як зробити веб-сайт живим, з більш цікавим вмістом! Цей модуль вивчає, як використовувати HTML для включення мультимедійних даних на ваші веб-сторінки, в тому числі різні способи додавання зображень, а також можливість вставки відео, аудіо та навіть цілих веб-сторінок.</p> + +<h2 id="Передумови">Передумови</h2> + +<p>Перш ніж запускати цей модуль, ви повинні мати достатні знання про основи HTML, як це було описано раніше в "Вступ до HTML". Якщо ви не працювали через цей модуль (або щось подібне), спочатку спробуйте його, а потім поверніться!</p> + +<div class="note"> +<p>Примітка: Якщо ви працюєте на комп'ютері / планшеті / іншому пристрої, де ви не можете створювати власні файли, ви можете спробувати (більшість) прикладів коду в онлайн-програмі кодування, наприклад JSBin або Thimble.</p> + +<h2 id="sect1"> </h2> +</div> + +<p class="summary">Довідники</p> + +<p>Цей модуль містить наступні статті, в яких ви знайдете всі основи вставки мультимедіа на веб-сторінках.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Зображення у форматі HTML</a></dt> + <dd>Існують і інші види мультимедійних засобів, але це логічно починати з скромного елемента {{htmlelement ("img")}}, який використовується для вставки простого зображення на веб-сторінку. У цій статті ми подивимося, як використовувати його більш глибоко, включаючи основні, анотований його підписом за допомогою {{htmlelement ("figure")}} і як він відноситься до фонових зображень CSS.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Відео та аудіозапис</a></dt> + <dd>Далі ми розглянемо, як використовувати HTML5 елементи {{htmlelement ("video")}} та {{htmlelement ("audio")}}, щоб вставити відео та аудіо на наші сторінки; включаючи основи, надання доступу до різних форматів файлів до різних веб-переглядачів, додавання субтитрів та субтитрів, а також можливість додавання відмов для застарілих веб-переглядачів.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Від <object> до <iframe> - інші технології вбудовування</a></dt> + <dd>На цьому етапі ми хотіли б трохи побороти крок, поглянувши на кілька елементів, які дозволяють вставляти різноманітні типи вмісту на свої веб-сторінки: {{htmlelement ("iframe")}}, елементи {{htmlelement ("embed")}} і {{htmlelement ("object")}}. <code><iframe></code> для вбудовування інших веб-сторінок, а інші два дозволяють вставляти PDF-файли, SVG і навіть Flash-технологію на виході, але які ви все ще можете побачити напів-регулярно.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Додавання векторної графіки до Інтернету</a></dt> + <dd>Векторна графіка може бути дуже корисною в певних ситуаціях. На відміну від звичайних форматів, таких як PNG / JPG, вони не спотворюють / пікселюються при збільшенні - вони можуть залишатися гладкими при масштабування. Ця стаття знайомить вас із векторною графікою та як включити популярний {{glossary ("SVG")}} формат на веб-сторінках.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Відповідні зображення</a></dt> + <dd>За допомогою настільки різних типів пристроїв, які тепер можуть переглядати веб-сайти - від мобільних телефонів до настільних комп'ютерів - важливим поняттям для оволодіння сучасним веб-сайтом є чудовий дизайн. Це стосується створення веб-сторінок, які можуть автоматично змінювати свої функції відповідно до різних розмірів екрана, дозволів і т. Д. Це буде детально розглянуто в модулі CSS пізніше, але зараз ми розглянемо інструменти HTML доступний для створення чутливих зображень, включаючи елемент {{htmlelement ("picture")}}.</dd> +</dl> + +<h2 id="Оцінки">Оцінки</h2> + +<p>Наступні оцінки допоможуть перевірити розуміння базових основ HTML, описаних вище в посібниках.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Сторінка сплесків Mozilla</a></dt> + <dd>У цій оцінці ми перевіримо ваші знання про деякі методи, описані в статтях цього модуля, що допоможе вам додати деякі зображення та відео на приголомшливу сторінку про все про Mozilla!</dd> +</dl> + +<h2 id="Дивись_також">Дивись також</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Додайте візитну карту догори зображення</a></dt> + <dd>Карти зображень забезпечують механізм створення різних частин посилання на зображення на різні місця (подумайте про карту, посилаючись на додаткову інформацію про кожну країну, на яку ви натискаєте). Ця техніка іноді може бути корисною.</dd> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Основи веб-грамотності 2</a></dt> + <dd> + <p>Відмінний курс навчання Mozilla, який вивчає та випробовує деякі з навичок, про які говорили в модулі мультимедіа та вбудовування. Зануртеся в основу створення веб-сторінок, розробки для доступності, спільного використання ресурсів, використання онлайн-засобів масової інформації та відкритої роботи (це означає, що ваш вміст є вільно доступним і доступним для обміну іншими користувачами).</p> + </dd> +</dl> diff --git a/files/uk/learn/html/tables/index.html b/files/uk/learn/html/tables/index.html new file mode 100644 index 0000000000..3e5350587c --- /dev/null +++ b/files/uk/learn/html/tables/index.html @@ -0,0 +1,40 @@ +--- +title: HTML-таблиці +slug: Learn/HTML/Tables +translation_of: Learn/HTML/Tables +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Доволі поширеним завданням в HTML є структуризація табличних даних, і HTML має набір елементів та атрибутів саме для таких цілей. В поєднанні з <a href="/en-US/docs/Learn/CSS">CSS</a> для стилізації, HTML полегшує відображення в інтернеті такої інформації, як шкільний навчальний план, розклад занять у вашому басейні, або статистику про ваших улюблених динозаврів чи футбольні команди. Даний модуль містить усе, що необхідно знати про структуризацію табличних даних за допомогою HTML.</p> + +<h2 id="Передумови">Передумови</h2> + +<p>Перед тим як почати даний модуль, ви повинні пройти базовий курс HTML — дивіться <a href="/uk/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML.</a></p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Зміст">Зміст</h2> + +<p>Даний модуль містить наступні статті:</p> + +<p><a href="/en-US/docs/Learn/HTML/Tables/Basics">Основи HTML таблиць</a></p> + +<dl> + <dd>Дана стаття дозволить вам розпочати роботу з HTML таблицями, ознайомить з такими основними поняттями як рядки та клітини, заголовки, як розширити клітини на декілька колонок та рядків, а також як згрупувати усі клітини разом з метою стилізації.</dd> +</dl> + +<p><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Особливості та доступність HTML таблиць</a></p> + +<dl> + <dd>В другій статті даного модулю ми більш детально розгядаємо особливості HTML таблиць - такі як captions/summaries та групування рядків в head, body та footer секції вашої таблиці - а також розглядаємо доступність таблиць для користувачів з вадами зору.</dd> +</dl> + +<h2 id="Оцінювання">Оцінювання</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Структуризація даних про планети</a></dt> + <dd><br> + У нашій табличній оцінці ми надаємо вам деякі дані про планети в нашій сонячній системі, які ви зможете структурувати в HTML таблицю.</dd> +</dl> |