From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/uk/learn/html/forms/index.html | 77 ++ .../uk/learn/html/forms/your_first_form/index.html | 298 +++++++ files/uk/learn/html/index.html | 54 ++ .../creating_hyperlinks/index.html | 322 +++++++ .../introduction_to_html/debugging_html/index.html | 186 ++++ .../getting_started/index.html | 522 +++++++++++ .../html_text_fundamentals/index.html | 953 +++++++++++++++++++++ .../uk/learn/html/introduction_to_html/index.html | 55 ++ .../scho_v_head_metadani_v_html/index.html | 276 ++++++ .../learn/html/multimedia_and_embedding/index.html | 55 ++ files/uk/learn/html/tables/index.html | 40 + 11 files changed, 2838 insertions(+) create mode 100644 files/uk/learn/html/forms/index.html create mode 100644 files/uk/learn/html/forms/your_first_form/index.html create mode 100644 files/uk/learn/html/index.html create mode 100644 files/uk/learn/html/introduction_to_html/creating_hyperlinks/index.html create mode 100644 files/uk/learn/html/introduction_to_html/debugging_html/index.html create mode 100644 files/uk/learn/html/introduction_to_html/getting_started/index.html create mode 100644 files/uk/learn/html/introduction_to_html/html_text_fundamentals/index.html create mode 100644 files/uk/learn/html/introduction_to_html/index.html create mode 100644 files/uk/learn/html/introduction_to_html/scho_v_head_metadani_v_html/index.html create mode 100644 files/uk/learn/html/multimedia_and_embedding/index.html create mode 100644 files/uk/learn/html/tables/index.html (limited to 'files/uk/learn/html') 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 +--- +
{{LearnSidebar}}
+ +

Цей модуль містить низку статей, що допоможуть Вам освоїти форми в  HTML. HTML форми  дуже потужний інструмент для взаємодії з користувачами, хоча з історичних та технічних проблем є не завжди очевидним, як повністю використовувати їхній потенціал.  В цьому путівнику ми розкриємо усі аспекти HTML форм, починаючи від структури до стилів, від обробки даних до віджетів користувачів.

+ +

Передумови

+ +

Перед початком цього модуля Вам необхідно щонайменше пройти Вступ до HTML.

+ +
+

Нотатка: Якщо Ви працюєте на компьютері/планшеті/іншому пристрої на якому Ви не маєте можливості створити власні файли, Ви можете спробувати онлайн редактори для написання коду такі як JSBin чи Thimble.

+
+ +

Основні інструкції

+ +

В наступних посібниках Ви зможете вивчити основи HTML форм і пізніше освоїти дещо складніші теми.

+ +

Ваша перша HTML форма

+ +

Перша стаття з нашої серії надасть Вам необхідний досвід в створенні HTML  форми, включаючи проектування простої форми, реалізацїю її використовуючи правильні HTML елементи, додавання деяких дуже простих стілів за допомогою CSS  і відправлення даних на сервер.

+ +

Як структурувати HTML форму

+ +

Спираючись на основи, тепер ми більш детально поглянемо на елементи, які використовуються для забезпечення структури і значення різних частин форми.

+ +
+
Рідні віджети форми
+
+
Тепер ми поглянемо на функціональність різних віджетів форм більш детально, розглянувши які налаштування доступні для одержання різних видів інформації.
+
+
Надсилання даних форми
+
В цій статті розглянемо, що відбувається, коли корисувач надсилає форму — куди надходить інформація, і як ми її обробляємо коли вона туди потрапляє? Ми також розглянемо деякі проблеми безпеки, пов'язані з надсиланням даних форми.
+
Підтвердження даних форми
+
Надсилання даних недостатньо — нам також потрібно впевнитися, що дані, надані користувачем у формі, коректні для їх успішної подальшої обробки і вони не нашкодять нашій програмі. Ми також хочемо допомогти нашим користувачам заповнити наші форми правильно і не розчаруватися під час спроби використання наших додатків. Відправлення форми забезпечує виконання поставлених перед нами цілей - ця стання донесе Вам те, що Ви маєте знати.
+
+ +

Розширені інструкції

+ +

Ці інструкції дозволять поглянути на більш розширені варіанти форм, які Ви знайдете корисними після освоєння основ застосування форм.

+ +
+
Як створювати користувацькі віджети форм
+
Ви стикнетесь з випадками, в яких стандартні віджети форм не зможуть забезпечити Вам всього, чого Ви потребуєте через невідповідний стиль чи недостатню функціональність. В таких випадках Вам потрібно буде створити власний віджет форми використовуючи чистий HTML. У цій статті пояснюється як Ви можете зробити це та що потрібно при цьому знати із практичними прикладами.
+
Надсилання форми використовуючи JavaScript
+
Ця стання покаже Вам шляхи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.)
+
HTML forms in legacy browsers
+
Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.
+
HTML5 form updates
+
This article provides a reference to the new additions we saw added to HTML forms by the HTML5 spec.
+
+ +

Form styling guides

+ +

These guides to styling forms with CSS really belong in the CSS Learning Area topic, but we are keeping them here for now until we find the time to move them.

+ +
+
Styling HTML forms
+
This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.
+
Advanced styling for HTML forms
+
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.
+
Property compatibility table for form widgets
+
This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.
+
+ +

Assessments

+ +

TBD

+ +

See also

+ + 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 +--- +
{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}
+ +

Першa стаття в нашій серії допоможе вам у створенні власної першої інтернет-форми, включаючи розробку простої форми, реалізуючи її за допомогою використання елементів керування формою в HTML і інших HTML елементів, добавляючи деякі дуже прості стилі в CSS, і обписуючи як дані надсилаються на сервер. В цьому модулі ми розгорнемо кожну з вищенаведених тем.

+ + + + + + + + + + + + +
Вимоги:Загальна комп'ютерна грамотність, і базове розуміння HTML.
Мета:Зрозуміти, що таке інтернет-форми, для чого вони використовується, як обдумувати їхнє оформлення, і основні HTML елементи, які потрібні в нескладних випадках
+ +

Що таке інтернет-форми?

+ +

Web forms 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 Sending form data 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).

+ +

A web form's HTML is made up of one or more form controls (sometimes called widgets), plus some additional elements to help structure the overall form — they are often referred to as HTML forms. 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.

+ +

Form controls can also be programmed to enforce specific formats or values to be entered (form validation), and paired with text labels that describe their purpose to both sighted and blind users.

+ +

Designing your form

+ +

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.

+ +

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:

+ + + +

In this article, we'll build a simple contact form. Let's make a rough sketch.

+ +

The form to build, roughly sketch

+ +

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.

+ +

Active learning: Implementing our form HTML

+ +

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")}}.

+ +

Before you go any further, make a local copy of our simple HTML template — you'll enter your form HTML into here.

+ +

The {{HTMLelement("form")}} element

+ +

All forms start with a {{HTMLelement("form")}} element, like this:

+ +
<form action="/my-handling-form-page" method="post">
+
+</form>
+ +

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 action and method attributes:

+ + + +
+

Note: We'll look at how those attributes work in our Sending form data article later on.

+
+ +

For now, add the above {{htmlelement("form")}} element into your HTML {{htmlelement("body")}}.

+ +

The {{HTMLelement("label")}}, {{HTMLelement("input")}}, and {{HTMLelement("textarea")}} elements

+ +

Our contact form is not complex: the data entry portion contains three text fields, each with a corresponding {{HTMLelement("label")}}:

+ + + +

In terms of HTML code we need something like the following to implement these form widgets:

+ +
<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>
+ +

Update your form code to look like the above.

+ +

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 for attribute on all {{HTMLelement("label")}} elements, which takes as its value the id of the form control with which it is associated — this is how you associate a form with its label.

+ +

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 How to structure a web form.

+ +

On the {{HTMLelement("input")}} element, the most important attribute is the type 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 Basic native form controls article later on.

+ + + +

Last but not least, note the syntax of <input> vs. <textarea></textarea>. This is one of the oddities of HTML. The <input> 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 value attribute like this:

+ +
<input type="text" value="by default this element is filled with this text">
+ +

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:

+ +
<textarea>
+by default this element is filled with this text
+</textarea>
+ +

The {{HTMLelement("button")}} element

+ +

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 </form> tag:

+ +
<li class="button">
+  <button type="submit">Send your message</button>
+</li>
+ +

The {{htmlelement("button")}} element also accepts a type attribute — this accepts one of three values: submit, reset, or button.

+ + + +
+

Note: You can also use the {{HTMLElement("input")}} element with the corresponding type to produce a button, for example <input type="submit">. 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.

+
+ +

Basic form styling

+ +

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.

+ +
+

Note: If you don't think you've got the HTML code right, try comparing it with our finished example — see first-form.html (also see it live).

+
+ +

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.

+ +

First of all, add a {{htmlelement("style")}} element to your page, inside your HTML head. It should look like so:

+ +
<style>
+
+</style>
+ +

Inside the style tags, add the following 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;
+}
+ +

Save and reload, and you'll see that your form should look much less ugly.

+ +
+

Note: You can find our version on GitHub at first-form-styled.html (also see it live).

+
+ +

Sending form data to your web server

+ +

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 action and method attributes.

+ +

We provide a name 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.

+ +

To name the data in a form you need to use the name attribute on each form widget that will collect a specific piece of data. Let's look at some of our form code again:

+ +
<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>
+
+  ...
+
+ +

In our example, the form will send 3 pieces of data named "user_name", "user_email", and "user_message". That data will be sent to the URL "/my-handling-form-page" using the HTTP POST method.

+ +

On the server side, the script at the URL "/my-handling-form-page" 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 Sending form data article later on.

+ +

Summary

+ +

Congratulations, you've built your first web form. It looks like this live:

+ +

{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/Forms/Your_first_form/Example') }}

+ +

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.

+ +

{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}

+ +

In this module

+ + + +

Advanced Topics

+ + 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 +--- +
{{LearnSidebar}}
+ +

Щоб створювати сайти, спершу слід вивчити {{Glossary('HTML')}} — це фундаментальна технологія, за допомогою якої створюється структура веб-сторінки. HTML використовується, щоб вказати тип вмісту на сторінці: абзац, список, заголовок, посилання, зображення, мультимедіа-плеєр, формуляр або один з багатьох інших елементів.

+ +

Шлях навчання

+ +

Найкраще розпочати вивчення веб-розробки з HTML. Почніть зі Вступу до HTML. Після цього можна розпочати вивчення більш складних тем, наприклад:

+ + + +

Для початку навчання необхідно мати щонайменше базові знання комп'ютера та досвід в користуванні інтернетом (перегляд сайтів, відео та аудіо). Також потрібно мати основні робочі інструменти описані в розділі Встановлення основного програмного забезпечення та знати, як створювати та керувати файлами, це описано в розділі Робота з файлами. Ці два розділи знаходяться в модулі для початківців Початок роботи з WEB.

+ +

Перед вивченням рекомендується ознайомится зі статтею Початок роботи з WEB, але це необов'язково. Багато матеріалу зі статті Основи HTML більш детально охоплює модуль Вступ до HTML.

+ +

Модулі

+ +

Ця тема містить модулі, які рознашовані в порядку вивчення. Слід розпочати навчання від першого з них:

+ +
+
Вступ до HTML
+
Цей модуль надає базові знання для подальщої роботи. Він знайомить з важливими поняттями синтаксису та вчить застосовувати код HTML до тексту, створювати посилання, та створювати структуру сторінки за допомогою HTML.
+
Вставки мультимедіа
+
Цей модуль навчить використовувати HTML для вставки мультимедіа-файлів на вашу сторінку. Ви навчитеся вставляти на вашу сторінку зображення, відео, аудіо та навіть цілі сторінки.
+
Таблиці HTML
+
Відображення табличних даних на сторінці зрозумілим, {{glossary("Accessibility", "доступним")}} шляхом, може стати викликом. Цей модуль охоплює основи розмітки таблиць, а також більш складні понняття, наприклад, додавання заголовків колонок.
+
Формуляри HTML
+
Формуляри є дуже важливою частиною Web — вони забезпечують переважну частину функціональності для взаємодії з веб-сайтом, наприклад, реєстрація чи вхід, залишення коментаря, покупка продуктів та інше. Цей модуль навчить вас створювати формуляри, якими користується клієнт.
+
+ +

Вирішення основних проблем HTML

+ +

Вирішення основних проблем HTML містить посилання на секції, в яких пояснюється як використовувати HTML для вирішення основних проблем пристворенні веб-сторінки: робота з заголовками, додавання зображень чи відео, підкреслення вмісту, ствонення простого формуляру тощо.

+ +

Дивіться також

+ +
+
+
     
+
     Веб форми
+
Цей модуль містить низку статей, які допоможуть вам засвоїти основи веб-форм. Веб-форми - це дуже потужний інструмент для взаємодії з користувачами - найчастіше вони використовуються для збору даних від користувачів або дозволяють їм контролювати користувальницький інтерфейс. Однак з історичних та технічних причин не завжди очевидно, як використати їх на повний потенціал. Ми охопимо всі основні аспекти веб-форм, включаючи розміщення їх структури HTML, стилі управління формами, перевірку даних форми та подання даних на сервер.
+
+
     HTML (HyperText Markup Language) на MDN
+
Основа документації HTML на MDN. Вона містить детальні описи елементу (тега) та його атрибути — якщо ви хочете знати, які атрибути та значення може мати елемент, вам варто ознайомитися з цим розділом.
+
+
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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
+ +

Гіперпосилання дійсно важливі — це те що робить Інтернет інтернетом. Ця стаття показує необхідний синтаксис для створення гіперпосилання а також практику їхнього використання. 

+ + + + + + + + + + + + +
Передумови:Базове знання HTML (Getting started with HTML). Форматування тексту (HTML text fundamentals).
Мета:Вивчити як користуватись гіперпосиланнями ефективно і з'єднювати декілька файлів разом.
+ +

Що таке гіперпосилання?

+ +

Гіперпосилання це одне з найбільш вражаючих інновацій, що Інтернет може нам запропонувати. Хоча, вони були ще з самогу початку Інтернету, але вони це те що робить Інтернет Інтернетом — вони дозволяють зв'язати наші документи з будь-яким іншим документом (або іншим ресурсом), ми також можем зробити посилання на конкретні частини документу, і можемо зробити наші документи, (сайти, ресурси) доступними використовуючи просту адресу (на відміну від звичайних програм, які повинні буди встановлені і налаштовані). Практично будь-який контент може бути перетворений в посилання. Клік на таке посилання переведе користувача на іншу веб-адресу ({{glossary("URL")}}).

+ +
+

Примітка: URL може посилатись на HTML файли, текстові файли, зображення, текстові документи, відео і аудіо файли, та будь-які інші ресурси які можуть знаходитись в Інтернеті. Якщо браузер не знає як відобразити або опрацювати файл, він запитає у користувача чи він хоче відкрити файл (в такому випадку процес відкриття і обробки файлу передається до відповідної програми) або завантажити файл (в такому випадку користувач може повернутись до завантаженого файлу пізніше.)

+
+ +

Домашня сторінка BBC, для прикладу, містить велику кількість посилань нетільки на новини, але також на різні розділи сайту (навігація), сторінки логіну та реєстрації (інструменти користувача) та інші.

+ +

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

+ + + +

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 Hypertext Reference , or target) that will contain the web address you want the link to point to.

+ +
<p>I'm creating a link to
+<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
+</p>
+ +

This gives us the following result:

+ +

I'm creating a link to the Mozilla homepage.

+ +

Adding supporting information with the title attribute

+ +

Another attribute you may want to add to your links is title; 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>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>
+ +

This gives us the following result (the title will come up as a tooltip when the link is hovered over):

+ +

I'm creating a link to the Mozilla homepage.

+ +
+

Note: 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.

+
+ + + +

Active learning time: we'd like you to create an HTML document using your local code editor (our getting started template would do just fine.)

+ + + + + +

As mentioned before, you can turn just about any content into a link, even block level elements. If you had an image you wanted to turn into a link, you could just put the image between <a></a> tags.

+ +
<a href="https://www.mozilla.org/en-US/">
+  <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage">
+</a>
+ +
+

Note: You'll find out a lot more about using images on the Web in a future article.

+
+ +

A quick primer on URLs and paths

+ +

To fully understand link targets, you need to understand URLs and file paths. This section gives you the information you need to achieve this.

+ +

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 https://www.mozilla.org/en-US/.

+ +

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 creating-hyperlinks directory.)

+ +

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

+ +

The root of this directory structure is called creating-hyperlinks. When working locally with a web site, you will have one directory that the whole site goes inside. Inside the root, we have an index.html file and a contacts.html. In a real website, index.html 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.).

+ +

There are also two directories inside our root — pdfs and projects. These each have a single file inside them — a PDF (project-brief.pdf) and an index.html file, respectively. Note how you can quite happily have two index.html files in one project as long as they are in different locations in the filesystem. Many web sites do. The second index.html would perhaps be the main landing page for project-related information.

+ + + +
+

Note: You can combine multiple instances of these features into complex URLs, if needed, e.g. ../../../complex/path/to/my/file.html.

+
+ +

Document fragments

+ +

It is possible to link to a specific part of an HTML document (known as a document fragment), 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:

+ +
<h2 id="Mailing_address">Mailing address</h2>
+ +

Then to link to that specific id, you'd include it at the end of the URL, preceded by a hash/pound symbol, for example:

+ +
<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>
+ +

You can even use the document fragment reference on its own to link to another part of the same document:

+ +
<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>
+ +

Absolute versus relative URLs

+ +

Two terms you'll come across on the Web are absolute URL and relative URL:

+ +

absolute URL: Points to a location defined by its absolute location on the web, including {{glossary("protocol")}} and {{glossary("domain name")}}. So for example, if an index.html page is uploaded to a directory called projects that sits inside the root of a web server, and the web site's domain is http://www.example.com, the page would be available at http://www.example.com/projects/index.html (or even just http://www.example.com/projects/, as most web servers just look for a landing page such as index.html to load if it is not specified in the URL.)

+ +

An absolute URL will always point to the same location, no matter where it is used.

+ +

relative URL: Points to a location that is relative 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 http://www.example.com/projects/index.html to a PDF file in the same directory, the URL would just be the filename — e.g. project-brief.pdf — no extra information needed. If the PDF was available in a subdirectory inside projects called pdfs, the relative link would be pdfs/project-brief.pdf (the equivalent absolute URL would be http://www.example.com/projects/pdfs/project-brief.pdf.)

+ +

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 index.html file out of the projects directory and into the root of the web site (the top level, not in any directories), the pdfs/project-brief.pdf relative URL link inside it would now point to a file located at http://www.example.com/pdfs/project-brief.pdf, not a file located at http://www.example.com/projects/pdfs/project-brief.pdf.

+ +

Of course, the location of the project-brief.pdf file and pdfs folder won't suddenly change because you moved the index.html file — this would make your link point to the wrong place, so it wouldn't work if clicked on. You need to be careful!

+ + + +

There are some best practices to follow when writing links. Let's look at these now.

+ + + + + +

It's easy to throw links up on your page. That's not enough. We need to make our links accessible to all readers, regardless of their current context and which tools they prefer. For example:

+ + + +

Let's look at a specific example:

+ +

Good link text: Download Firefox

+ +
<p><a href="https://firefox.com/">
+  Download Firefox
+</a></p>
+ +

Bad link text: Click here to download Firefox

+ +
<p><a href="https://firefox.com/">
+  Click here
+</a>
+to download Firefox</p>
+
+ +

Other tips:

+ + + + + +

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 same website (when linking to another website, you will need to use an absolute link):

+ + + +

Linking to non-HTML resources — leave clear signposts

+ +

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:

+ + + +

Let's look at some examples, to see what kind of text can be used here:

+ +
<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>
+ +

Use the download attribute when linking to a download

+ +

When you are linking to a resource that is to be downloaded rather than opened in the browser, you can use the download attribute to provide a default save filename. Here's an example with a download link to the latest Windows version of Firefox:

+ +
<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>
+ +

Active learning: creating a navigation menu

+ +

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.

+ +

You'll need to make local copies of the following four pages, all in the same directory (see also the navigation-menu-start directory for a full file listing):

+ + + +

You should:

+ +
    +
  1. 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.
    2. +
  2. Turn each page name into a link to that page.
    3. +
  3. Copy the navigation menu across to each page.
    4. +
  4. 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.
    5. +
+ +

The finished example should end up looking something like this:

+ +

An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items

+ +
+

Note: If you get stuck, or are not sure if you have got it right, you can check the navigation-menu-marked-up directory to see the correct answer.

+
+ + + +

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 mailto: URL scheme.

+ +

In its most basic and commonly used form, a mailto: link simply indicates the email address of the intended recipient. For example:

+ +
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
+
+ +

This results in a link that looks like this: Send email to nowhere.

+ +

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.

+ +

Specifying details

+ +

In addition to the email address, you can provide other information. In fact, any standard mail header fields can be added to the mailto 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.

+ +

Here's an example that includes a cc, bcc, subject and body:

+ +
<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>
+ +
+

Note: 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 percent-escaped. Also note the use of the question mark (?) to separate the main URL from the field values, and ampersands (&) to separate each field in the mailto: URL. This is standard URL query notation. Read The GET method to understand what URL query notation is more comonly used for.

+
+ +

Here are a few other sample mailto URLs:

+ + + +

Summary

+ +

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.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}

+ +

In this module

+ + 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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+ +

Написати HTML добре, але що, якщо щось піде не так, і ви не можете з'ясувати, де помилка в коді? Ця стаття представить вам деякі інструменти, які допоможуть вам знайти та виправити помилки в HTML.

+ + + + + + + + + + + + +
Передумови:Знайомство з HTML, як наведено в прикладі Початок роботи з HTML, Основи HTML та Створення гіперпосилань.
Мета:Дізнатись основи використання інструментів налагодження (дебаґінга), щоб знайти проблеми в HTML.
+ +

Дебаґінг не страшний

+ +

Коли ви пишете код певного виду, все, як правило, добре, доки не настає страшний момент, коли виникла помилка - ви зробили щось не так, тому ваш код не працює - або взагалі, або не зовсім так, як ви хотіли. Наприклад, наведене нижче показує помилку при спробі {{glossary("compile")}} просту програму, написану на мові "Rust".

+ +

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. Тут повідомлення про помилку досить легко зрозуміти — "неузгоджений подвійний ланцюг кодування". Якщо ви подивитеся на цей список, можливо, ви побачите, як це зробити println!(Hello, world!"); може логічно не вистачати подвійної цитати. Проте повідомлення про помилку можуть швидко ускладнюватися і менш легко інтерпретуватися, коли програми стають більшими, і навіть прості випадки можуть трохи налякати того, хто не знає про Руст.

+ +

Дебаґінг не повинен бути страшним - це ключ до комфортного написання і налагоджування будь-якої мови програмування або коду, знайомство як з мовою так і з інструментами.

+ +

HTML та дебаґінг

+ +

HTML не так складно зрозуміти, як Rust. HTML не компілюється в іншу форму, перш ніж браузер проаналізує його та покаже результат (він інтерпретується, а не компілюється). І синтаксис HTML {{glossary("element")}} набагато легше зрозуміти, ніж "справжню мову програмування", таку як Rust, {{glossary("JavaScript")}}, або {{glossary("Python")}}. Спосіб, за допомогою якого веб-браузери аналізують HTML є набагато більш дозвільним, ніж мови програмування, що є і добре, і погано одночасно.

+ +

Дозвільний код

+ +

Отже, що ми маємо на увазі під дозвільним? Ну, звичайно, коли ви робите щось неправильне в коді, є два основних типи помилок, які ви зустрінете:

+ + + +

Сам по собі HTML не страждає від синтаксичних помилок, оскільки браузери розуміють його належним чином, що означає, що сторінка все одно відображатиметься, навіть якщо є синтаксичні помилки. Браузери мають вбудовані правила, які визначають, як інтерпретувати неправильно написану розмітку, тому ви все одно щось отримаєте, навіть якщо це не те, що ви очікували. Це, звичайно, може бути проблемою!

+ +
+

Примітка: Розібратись в HTML легко, тому що коли веб-мережа була тільки створена, було вирішено, що надання користувачам можливостей публікувати свій вміст було важливішим, ніж переконатися, що синтаксис абсолютно правильний. Веб-мережа, ймовірно, не була б настільки популярною, як є сьогодні, якщо б вона була більш складною від самого початку.

+
+ +

Активне навчання: вивчення допустимого коду

+ +

Настав час вивчити дозвільний характер HTML-коду.

+ +
    +
  1. По-перше, завантажте наш debug-example demo і збережіть його локально. Ця демоверсія спеціально написана, щоб мати деякі помилки в ньому, щоб ми могли їх досліджувати (розмітка HTML, як наголошується, погано сформована, на відміну від добре сформованої).
    2. +
  2. Далі відкрийте його в браузері. Ви побачите щось подібне: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.
    3. +
  3. Це відразу не виглядає чудово; давайте подивимося на вихідний код, щоб побачити, чи зможемо ми зрозуміти, чому (показано лише вміст body); + 
    <h1>Приклади HTML дебаґінга</h1>
+
+<p>Що викликає помилки в HTML?
+
+<ul>
+  <li>Незамкнені елементи: Якщо елемент <strong> не закрито належним чином,
+      його ефект може поширюватися на ті області, які ви не мали наміру ним огортати.
+
+  <li>Погано вкладені елементи:  правильне вставлення елементів також дуже важливо
+      для правильного кодування. <strong>strong <em>виділено strong?</strong>
+      що це таке?</em>
+
+  <li>Незакриті атрибути: Інше поширене джерело HTML-проблем.
+      Давайте розглянемо приклад: <a href="https://www.mozilla.org/>Посилання
+      на домашню сторінку Mozilla</a>
+</ul>
    +
    4. +
  4. Давайте розглянемо проблеми: +
      +
    • {{htmlelement("p","paragraph")}} та {{htmlelement("li","list item")}} елементи не мають закриваючих тегів. Дивлячись на зображення вище, це, здається, не вплинуло на рендеринг розмітки надто погано, оскільки легко визначити, де повинен закінчуватися один елемент, а інший повинен починатися.
      • +
    • Перший {{htmlelement("strong")}} елемент не має закриваючого тега. Це дещо ускладнює, оскільки важко сказати, де елемент повинен закінчуватися. Фактично, всю решту тексту було виділено.
      • +
    • Цей розділ погано вкладено: <strong>strong <em>виділено strong?</strong> що це таке?</em>. Складно сказати, як це було інтерпретовано із-за попередньої проблеми.
      • +
    • {{htmlattrxref("href","a")}} Значення атрибута має відсутні подвійні лапки закриття. Це, здається, викликало найбільшу проблему - посилання взагалі не відображається.
      • +
    +
    5. +
  5. Тепер давайте подивимось на розмітку браузера, на відміну від розмітки в вихідному коді. Для цього ми можемо використовувати інструменти розробника веб-браузера. Якщо ви не знайомі з використанням інструментів розробника веб-браузера, перегляньте кілька хвилин Discover browser developer tools.
    6. +
  6. В інспекторі DOM ви можете дізнатись, як виглядає виділена розмітка: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.
    7. +
  7. Використовуючи інспектора DOM, давайте розглянемо наш код докладно, щоб побачити, як веб-браузер намагався виправити наші помилки HTML (ми зробили огляд у Firefox, інші сучасні браузери повинні дати той самий результат): +
      +
    • У параграфах та пунктах списку були додані закриті теги.
      • +
    • Не зрозуміло, де слід закрити перший елемент <strong>, тому браузер обгорнув кожен окремий блок тексту своїм тегом strong, аж донизу документа!
      • +
    • Неправильне вкладення було виправлено браузером, як це: + 
      <strong>strong
+  <em>виділено strong?</em>
+</strong>
+<em> що це таке?</em>
      +
      • +
    • Посилання з відсутніми подвійними лапками повністю вилучено. Останній елемент списку виглядає так : + 
      <li>
+  <strong>Незакриті атрибути: Інше поширене джерело проблем з HTML.
+  Давайте подивимось на приклад: </strong>
+</li>
      +
      • +
    +
    8. +
+ +

Валідація HTML

+ +

Таким чином, ви можете побачити з наведеного вище прикладу, що ви дійсно хочете, щоб ваш HTML був добре сформований! Але як? У невеликому прикладі, подібному до вищенаведенного, легко пройти по строках та знайти помилки, а як при величезному, складному HTML-документі?

+ +

Найкраща стратегія полягає в тому, щоб запустити HTML-сторінку за допомогою Markup Validation Service — сервісу, що створений та підтримується W3C, організацією, яка стежить за специфікаціями, що визначають HTML, CSS та інші веб-технології. Ця веб-сторінка приймає HTML-документ у вигляді входу, проходить через нього і дає вам звіт, в якому показує, що неправильно з вашим HTML.

+ +

The HTML validator homepage

+ +

Щоб вказати HTML для перевірки, ви можете надати цьому сервісу адресу свого сайту, завантажити файл HTML або безпосередньо ввести якийсь HTML-код.

+ +

Активне навчання: перевірка документа HTML

+ +

Давайте спробуємо це з нашим sample document.

+ +
    +
  1. По-перше, завантажте Markup Validation Service в одній із вкладок браузера, якщо вона ще не відкрита.
    2. +
  2. Перейдіть на вкладку Validate by Direct Input (Перевірити за прямим введенням).
    3. +
  3. Скопіюйте весь приклад коду документу (а не тільки body) і вставте його у велику область тексту, показану в Markup Validation Service.
    4. +
  4. Натисніть кнопку Check (Перевірити).
    5. +
+ +

В результаті з'явиться список помилок та інша інформація.

+ +

A list of of HTML validation results from the W3C markup validation service

+ +

Інтерпретація повідомлень про помилки

+ +

Повідомлення про помилки зазвичай корисні, але іноді вони не настільки корисні; трохи попрактикувавшись, ви зможете розібратися, як інтерпретувати їх, щоб виправити ваш код. Давайте пройдемось по повідомленням про помилку і що вони означають. Ви побачите, що кожне повідомлення містить номер рядка та стовпчика, які допоможуть легко знайти помилку.

+ + + +

Якщо ви не можете з'ясувати, що означає кожне повідомлення про помилку, не хвилюйтеся - хороша ідея - спробувати одночасно виправити кілька помилок. Потім спробуйте повторно підтвердити свій HTML, щоб показати, які помилки залишаються. Іноді виправлення попередньої помилки також позбуває інших повідомлень про помилку - деякі помилки часто можуть бути викликані однією проблемою, що тягне інші, як ефект доміно.

+ +

Ви будете знати, коли всі ваші помилки виправлені, коли ви побачите наступний банер у вашому виводі:

+ +

Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."

+ +

Тобто, "Документ перевірений відповідно до зазначених схем та додаткових обмежень, перевірених валідатором".

+ +

Резюме

+ +

Отже, у нас є вступ до дебаґінга в HTML, який повинен надати вам деякі корисні навички, щоб розраховувати, коли ви почнете налагоджувати CSS, JavaScript та інші типи коду пізніше в своїй кар'єрі. Це також означає завершення вивчення статей "Введення в модулі HTML" - тепер ви можете продовжувати тестування самостійно з нашими оцінками: перший з них за посиланням нижче.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

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 +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

У цій статті ми пояснимо найбільш базові поняття HTML — що таке елементи, атрибути та інші терміни, які ви могли чути, і яке завдання вони виконують. Ми покажемо, як побудований елемент HTML і з чого складається типова HTML-сторінка, а також пояснимо інші особливості мови. В процесі навчання ми будемо трохи бавитися з кодом, щоб вам було цікаво!

+ + + + + + + + + + + + +
Передумови:Базове знання комп'ютера, встановлене основне програмне забезпечення, базове розуміння роботи з файлами.
Мета:Отримати базове розуміння мови HTML і попрактикуватися в написанні кількох HTML-елементів.
+ +

Що таке HTML?

+ +

{{glossary("HTML")}} (Hypertext Markup Language — мова гіпертекстової розмітки) не є мовою програмування. Це мова розмітки, яка каже браузеру, як відобразити сторінку, яку ви відвідуєте. HTML може бути простим чи складним, залежно від бажання його розробника. HTML складається з серії {{glossary("Element", "елементів")}}, які ви використовуєте для того, щоб вкласти, загорнути чи розмітити частини сторінки, щоб вони мали певний вигляд. {{glossary("Tag", "Теги")}} можуть перетворити частину тексту на посилання на іншу сторінку, виділити її курсивом тощо. Наприклад, візьміть такий рядок тексту:

+ +

Мій кіт дуже сердитий

+ +

Якщо ми хочемо, щоб цей рядок був сам по собі, ми можемо вказати, що це параграф (абзац), загорнувши його тегом елементу ({{htmlelement("p")}}):

+ +
<p>Мій кіт дуже сердитий</p>
+ +

Анатомія елементу HTML

+ +

Погляньмо на елемент "параграф" детальніше. 

+ +

+ +

Основні частини елементу такі:

+ +
    +
  1. Початковий тег: містить назву елементу (в цьому випадку, p), загорнену в кутові дужки. Цей тег позначає початок елементу, або місце, де елемент починає діяти. У даному випадку — це місце, де починається параграф. 
    2. +
  2. Кінцевий тег: такий самий тег, як і початковий, тільки тепер він містить скісну риску перед назвою елементу. Цей тег позначає місце закінчення елементу — у цьому випадку, місце, де закінчується параграф. Одна з найпоширеніших помилок початківців — це забути поставити кінцевий тег, що може призвести до несподіваних результатів. 
    3. +
  3. Вміст: вміст елементу, у цьому випадку — просто текст. 
    4. +
  4. Елемент: початковий тег разом із кінцевим тегом та вмістом між ними складають елемент.
    5. +
+ +

Активне навчання: створення вашого першого HTML-елементу

+ +

Відредагуйте рядок нижче у полі Input,  загорнувши його тегами <em> та </em> (поставте <em> на початку, щоб відкрити елемент, та </em> в кінці, щоб закрити елемент) — це має виділити рядок курсивом! Ви маєте побачити зміни в полі Output.

+ +

Якщо ви зробите помилку, ви можете завжди скинути редагування кнопкою Reset. Якщо ви справді застрягнете, натисніть кнопку Show solution, щоб побачити відповідь.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 300) }}

+ +

Вкладені елементи

+ +

Ви можете вкладати одні елементи всередину інших. Це називаєте вкладенням. Якщо ми хочемо наголосити, що наш кіт дуже сумний, ми можемо загорнути слово "дуже" в елемент {{htmlelement("strong")}}, який означає, що слово особливо сильно наголошене:

+ +
<p>My cat is <strong>very</strong> grumpy.</p>
+ +

Важливо пам'ятати правильне вкладення елементів: у прикладі вище ми спершу відкрили елемент {{htmlelement("p")}}, а потім елемент <strong>, що означає, що першим ми маємо закрити внутрішній елемент {{htmlelement("strong")}}, а потім зовнішній {{htmlelement("p")}}. Приклад нижче неправильний:

+ +
<p>My cat is <strong>very grumpy.</p></strong>
+ +

Елемент має закриватися або всередині, або ззовні іншого елемента. Якщо кінцевий тег зовнішнього елемента іде перед кінцевим тегом внутрішнього елемента, ваш браузер спробує здогадатися, що ви хотіли цим сказати, і результати цього можуть бути неочікуваними. Тому не робіть так!

+ +

Блокові та рядкові елементи

+ +

Існують дві важливі категорії елементів у HTML, про які вам слід знати — блокові та рядкові.

+ + + +

Візьміть такий приклад:

+ +
<em>перший</em><em>другий</em><em>третій</em>
+
+<p>четвертий</p><p>п'ятий</p><p>шостий</p>
+ +

{{htmlelement("em")}} є рядковим елементом, тому перші три елементи розміщують в одному рядку, без відстаней між ними. Натомість {{htmlelement("p")}} є блоковим елементом, він розміщується з нового рядка і має відстані над і під ним (ці відстані визначаються у стиляхt CSS, які браузер за замовчанням застосовує до параграфів).

+ +

{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200) }}

+ +
+

Примітка: HTML5 пропонує інший підхід до визначення категорій елементів (див. Element content categories). Хоча нові категорії є більш точними, ніж ті, про які йшлося вище, вони також є значно складнішими для розуміння, ніж "блокові" і "рядкові". Тому ми будемо вживати саме ці дві категорії. 

+
+ +
+

Примітка: ви можете знайти корисні посилання на перелік усіх блокових та рядкових елементів — див. Block-level elements та Inline elements.

+
+ +

Порожні елементи

+ +

Не всі елементи утворюються за шаблоном початковий тег, вміст, кінцевий тег. Деякі елементи мають лише один тег, який зазвичай вставляє щось на певне місце в документі. Це, наприклад, {{htmlelement("img")}}, який вставляє зображення на те місце, куди він поставлений:

+ +
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
+ +

Такий вигляд він має на сторінці:

+ +

{{ EmbedLiveSample('Empty_elements', 700, 300) }}

+ +

Атрибути

+ +

Елементи також можуть мати атрибути, які мають такий вигляд: 

+ +

&lt;p class="editor-note">My cat is very grumpy&lt;/p>

+ +

Атрибути містять додаткову інформацію про елемент, яка не відображається в самому контенті. У прикладі вище class це ім'я атрибута, а editor-note — це значення атрибута. Атрибут class дозволяє надати елементу певний ідентифікатор, який пізніше можна використати для того, щоб доступитися до цього елемента і змінити його стиль.

+ +

Атрибут завжди повинен мати:

+ +
    +
  1. Пробіл між ім'ям атрибута і назвою елементу (або попереднім атрибутом, якщо такий є).
    2. +
  2. Ім'я атрибута, за яким іде знак дорівнює.
    3. +
  3. Значення атрибута, загорнене в прямі лапки.
    4. +
+ +

Активне навчання: додавання атрибута до елемента

+ +

Поглянемо на інший елемент — {{htmlelement("a")}} (від anchor — "якір"), який робить гіперпосиланням текст, загорнений в нього. Цей елемент може мати кілька атрибутів, наприклад: 

+ + + +

Відредагуйте рядок нижче в полі Input,так щоб він став посиланням на ваш улюблений сайт. Спочатку додайте елемент <a>, потім атрибути href і title. Насамкінець вкажіть значення атрибута target, так щоб посилання відкривалося в новій вкладці. Ви побачите свої зміни в полі Output. Ви маєте побачити посилання, яке має відображати заголовок (title) при наведенні курсору, а при кліку — переходити за адресою, вказаною в атрибуті href element. Пам'ятайте ставити пробіли між іменем елемента та кожним атрибутом. 

+ +

Ви завжди можете скинути всі зміни кнопкою Reset. Також ви можете подивитися відповідь, натиснувши кнопку Show solution.

+ + + +

{{ EmbedLiveSample('Playable_code2', 700, 300) }}

+ +

Булеві атрибути

+ +

Іноді ви можете побачити в коді лише назву атрибута, без вказаного значення. Це цілком нормальні атрибути, вони називаються булевими. Вони мають лише одне значення, зазвичай таке ж саме, як і назва самого атрибута. Для прикладу візьмемо атрибут {{htmlattrxref("disabled", "input")}}, який робить поля форми неактивними (засіреними), щоб користувачі не могли їх заповнити. 

+ +
<input type="text" disabled="disabled">
+ +

Скорочений запис цілком може мати такий вигляд (ми також додали активне поле для кращого розуміння): 

+ +
<input type="text" disabled>
+
+<input type="text">
+
+ +

Обидва записи дадуть такий результат: 

+ +

{{ EmbedLiveSample('Boolean_attributes', 700, 100) }}

+ +

Опускання лапок навколо значень атрибутів

+ +

Іноді в мережі ви можете побачити багато різних прикладів дивної розмітки, наприклад, значення атрибутів, записані без лапок. Хоча за деяких обставин такий запис є прийнятним, в інших випадках він може поламати розмітку. Наприклад, у нашому посиланні з прикладу вище ми можемо записати атрибут href так:

+ +
<a href=https://www.mozilla.org/>favourite website</a>
+ +

Однак, якщо ми додамо другий атрибут title, розмітка порушиться:

+ +
<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a>
+ +

Таку розмітку браузер розуміє неправильно, вважаючи, що title — це насправді три атрибути: атрибут "title" зі значенням "The" і два інші атрибути булевого типу, Mozilla і homepage. Така поведінка не є очікуваною і може призвести до помилок, як показано в прикладі нижче. Спробуйте навести курсор на текст, щоб подивитися, який текст у заголовку. 

+ +

{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100) }}

+ +

Ми радимо завжди писати атрибути в лапках, це дозволяє уникнути багатьох проблем і робить код більш читабельним. 

+ +

Лапки подвійні чи одинарні?

+ +

У цій статті всі значення атрибутів загорнені в звичайні прямі лапки. Проте іноді ви можете побачити, що значення загортається прямими апострофами на початку і в кінці (одинарні лапки). Вживання перших і других в 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>
+ +

Однак, не можна змішувати лапки різного типу в одному записі. Наприклад, такий запис є неправильним:

+ +
<a href="http://www.example.com'>A link to my example.</a>
+ +

Якщо ви використали лапки одного типу в записі, всередину ви можете вкласти лапки іншого типу. Наприклад, тут апостроф вживається всередині значення в подвійних лапках:

+ +
<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
+ +

Для вкладення лапок того самого типу потрібно користуватися спеціальними символами, про які піде мова нижче.

+ +

Анатомія HTML-документу

+ +

Все зазначене вище є основами HTML, але окремо взяті елементи самі по собі мало на що здатні. Тепер ми поглянемо на те, як окремі елементи формують цілу веб-сторінку:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

Тут ми маємо:

+ +
    +
  1. <!DOCTYPE html>: Доктайп (тип документу). В ті часи, коли HTML тільки зароджувався (близько 1991/2), доктайпы (doctypes) використовувалися як посилання на набір правил, яким HTML-сторінка повинна була слідувати, щоб вважатись написаною хорошим HTML-кодом, що може означати автоматичну перевірку помилок та інші корисні речі. Доктайп приблизно такий вигляд: + + 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    + Проте в наші дні ніхто справді не дбає про них, і вони насправді є лише історичним артефактом, який потрібно включити в документ, щоб той правильно працював . <!DOCTYPE html> це найкоротший рядок символів, який вважається валідним доктайпом; це все, що вам дійсно потрібно знати.
    2. +
  2. <html></html>: Елемент {{htmlelement("html")}}. Цей елемент огортає весь зміст (контент) на всій сторінці, іноді його називають кореневим (root) елементом.
    3. +
  3. <head></head>: Елемент {{htmlelement("head")}}. Цей елемент діє як контейнер для всього матеріалу, який ви хочете включити в сторінку HTML, але який не є вмістом, що ви надаєте для перегляду відвідувачам вашої сторінки. Він включає в себе такі речі, як ключові слова та опис сторінки, які ви хочете відобразити в результатах пошуку, CSS, щоб стилізувати вміст сторінки, оголошення підтримуваного набору символів тощо. Ви дізнаєтеся більше про це в наступній статті цієї серії.
    4. +
  4. <meta charset="utf-8">: Цей елемент встановлює в якості символьного кодування для вашого документу UTF-8, що включає більшість символів з переважної більшості письмових мов людей. По суті, це дає змогу обробляти будь-який текстовий вміст, який ви можете додати до документу. Немає причин не встановлювати таке кодування, і це допоможе уникнути деяких проблем пізніше.
    5. +
  5. <title></title>: Елемент {{htmlelement("title")}}. Цей елемент встановлює назву вашої сторінки, що є заголовком, який відображається на вкладці веб-браузера, на якій завантажується сторінка, і використовується для опису сторінки під час додавання/уподобання її.
    6. +
  6. <body></body>: Елемент {{htmlelement("body")}}. Цей елемент містить весь контент, який ви хочете показати веб-користувачам під час відвідування вашої сторінки, незалежно від того, чи це є текст, зображення, відео, ігри, відтворювані звукові доріжки тощо.
    7. +
+ +

Активне навчання: додавання деяких функцій у документ HTML

+ +

Якщо ви хочете поекспериментувати з написанням HTML-коду на вашому локальному комп'ютері, ви можете зробити наступне:

+ +
    +
  1. Скопіюйте наведений вище приклад HTML сторінки.
    2. +
  2. Створіть новий файл у текстовому редакторі.
    3. +
  3. Вставте код у новий текстовий файл.
    4. +
  4. Збережіть файл як index.html.
    5. +
+ +
+

Примітка: Ви також можете знайти цей основний HTML шаблон на MDN Learning Area Github repo.

+
+ +

Тепер ви можете відкрити цей файл у веб-браузері, щоб побачити, як має вигляд відображення вірного коду, а потім відредагувати код та оновити веб-браузер, щоб побачити результат. Спочатку це матиме такий вигляд:

+ +

A simple HTML page that says This is my page В цій вправі ви можете редагувати код локально на своєму комп'ютері, як зазначено вище, або можете редагувати його в запропонованому редакторі нижче (у вікні редактора в цьому прикладі показано лише зміст елемента {{htmlelement("body")}}) Спробуйте зробити наступне:

+ + + +

Якщо ви зробите помилку, ви завжди можете скинути її за допомогою кнопки Reset. Якщо ви дійсно заплутались, натисніть кнопку Show solution, щоб побачити відповідь.

+ + + +

{{ EmbedLiveSample('Playable_code3', 700, 600) }}

+ +

Пробіли в HTML

+ +

У наведених вище прикладах, мабуть, ви помітили, що багато пробілів в коді - це взагалі не обов'язково; два наступні фрагменти коду є еквівалентними:

+ +
<p>Dogs are silly.</p>
+
+<p>Dogs        are
+         silly.</p>
+ +

Незалежно від того, скільки пустого місця ви використовуєте (яке може містити пробіл, а також відступи рядків), HTML-аналізатор зменшує кожен з них до одного пробілу під час відтворення коду. Тож навіщо використовувати так багато пробілів? Відповідь - зручність читання - набагато легше зрозуміти, що відбувається у вашому коді, якщо у вас це чудово відформатовано, а не просто зібрано разом у великий хаос. У нашому HTML-коді кожен вкладений елемент має два пробіли, ніж той, в якому він розміщений всередині. Ви самі визначаєте стиль форматування, який ви використовуєте (скільки пробілів для кожного рівня відступу, наприклад), але ви повинні розглянути можливість використання якогось форматування.

+ +

Посилання на об'єкт: включаючи спеціальні символи в HTML

+ +

В HTML символи <, >,",' та & є спеціальними символами. Вони є частинами самого синтаксису HTML, тому як вводити один з цих символів у ваш текст, наприклад, якщо ви дійсно хочете використати амперсанд або знак менше, і не трактувати його як код, як це можуть зробити деякі веб-браузери?

+ +

В такому випадку ми повинні використовувати символьні посилання - спеціальні коди, що представляють символи, і можуть використовуватися в конкретних обставинах. Кожне посилання символів починається з амперсанда (&), а закінчується двокрапкою (;).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Буквений символЕквівалентне написання символів
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
+ +

У наведеному нижче прикладі ви можете побачити два абзаци, які говорять про веб-технології:

+ +
<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>
+ +

Нижче наводиться приклад, в якому ви можете побачити, що перший абзац вийшов не так, тому що браузер вважає, що другий елемент <p> починає новий абзац. Другий абзац виглядає чудово, тому що ми замінили кутові дужки на символьні посилання.

+ +

{{ EmbedLiveSample('Entity_references_including_special_characters_in_HTML', 700, 200) }}

+ +
+

Примітка: У графіку всіх доступних посилань на об'єкти HTML можна знайти у Вікіпедії: List of XML and HTML character entity references.

+
+ +

Коментарі HTML

+ +

В HTML, як і у більшості мов програмування, існує механізм, доступний для написання коментарів у коді - коментарі браузером ігноруються і невидимі для користувача, їхня мета полягає у тому, щоб дозволити вам додавати коментарі до коду, щоб пояснити, як ваш код працює, що роблять різні частини коду тощо. Це може бути дуже корисним, якщо ви повернетеся до свого коду, над яким ви не працювали, наприклад, протягом шести місяців, і не пам'ятаєте, що ви робили, або якщо над вашим кодом ще хтось працював.

+ +

Щоб перетворити розділ вмісту всередині вашого HTML-файлу в коментар, вам необхідно обгорнути його спеціальними маркерами <!-- та -->, наприклад:

+ +
<p>I'm not inside a comment</p>
+
+<!-- <p>I am!</p> -->
+ +

Як ви можете побачити, перший абзац відображається на сторінці, а другий - ні.

+ +

{{ EmbedLiveSample('HTML_comments', 700, 100) }}

+ +

Підсумок

+ +

Ви досягли кінця статті - ми сподіваємося, що вам сподобалась ваша мандрівка по основах HTML! На цьому етапі ви повинні розуміти, як має вигляд мова, як вона працює на базовому рівні, і вміти писати кілька елементів і атрибутів. Це ідеальне місце, щоб розпочати навчання прямо зараз і продовжити вивчати далі наступні статті модуля. Ви розглянете деякі речі, з якими ви вже ознайомлені, але більш докладно, і дізнаєтесь про деякі нові можливості мови HTML. Залишайтеся на зв'язку!

+ +
+

Примітка: На цьому етапі, коли ви почнете більше дізнаватися про HTML, ви також можете почати вивчати основи каскадних таблиць стилів або CSS. CSS - це мова, яку ви використовуєте для стилізації веб-сторінок (наприклад, зміна шрифту або кольорів, або зміна макета сторінки). HTML та CSS дуже добре співпрацюють, в чому ви незабаром переконаєтесь.

+
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+ +

Одне з головних завдань HTML полягає в тому, щоб надати текстову структуру та смислове значення (також відоме як {{glossary("семантика")}}) таким чином, щоб браузер міг відобразити зміст на сторінці коректно. У цій статті пояснюється, у який спосіб можна використовувати {{glossary("HTML")}}, щоб структурувати текст на сторінці, додавши заголовки та параграфи, підкреслюючи слова, створюючи списки та інше.

+ + + + + + + + + + + + +
Передумови:Базове знайомство з HTML, як описано в Початок роботи з HTML.
Мета:Дізнайтеся, як позначити основну сторінку тексту, щоб надати йому структуру та зміст - включаючи абзаци, заголовки, списки, акцент та цитати.
+ +

Основа: заголовки та абзаци

+ +

Найбільш структурований текст складається з заголовків і параграфів, незалежно від того, чи читаєте ви історію, газету, підручник з коледжу, журнал тощо.

+ +

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

+ +

Структурований вміст полегшує та покращує досвід читання.

+ +

У HTML кожен абзац повинен бути загорнутий у елемент {{htmlelement ("p")}}, так:

+ +
<p>Я абзац,о так, це я.</p>
+ +

Кожен заголовок має бути загорнутий в елемент заголовка:

+ +
<h1>Я назва цієї історії.</h1>
+ +

Є шість елементів заголовку — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, та {{htmlelement("h6")}}. Кожен елемент представляє інший рівень вмісту документа;<h1> являє собою основний заголовок, <h2> представляє підзаголовки, <h3> представляє наступні підзаголовки тощо.

+ +

Впровадження структурної ієрархії

+ +

Наприклад, у історії <h1> буде представляти назву історії, <h2> s представлятиме назву кожного розділу, а <h3> представлятиме підрозділи кожного розділу тощо.

+ +
<h1>Нищівна свердловина</h1>
+
+<p>Кріс Міллс</p>
+
+<h2>Розділ 1: Темна ніч</h2>
+
+<p>Це була темна ніч. Десь, сова вигукувала. Дощ обрушився на ...</p>
+
+<h2>Розділ 2: Вічна тиша</h2>
+
+<p>Наш головний герой міг не стільки шепотом вийти з тіньової фігури ...</p>
+
+<h3>Привид говорить</h3>
+
+<p>Минуло ще кілька годин, коли раптово, побачивши привида, випрямився і вигукнув: «Будь ласка, помилуй мою душу!"</p>
+ +

Це дійсно залежить від вас, які саме елементи ви використовуєте, тоді ієрархія має сенс. Вам просто потрібно мати на увазі кілька найкращих практик, коли ви створюєте такі структури:

+ + + +

Чому нам потрібна структура?

+ +

Щоб відповісти на це запитання, давайте подивимося на text-start.html - початкову точку нашого запущеного прикладу для цієї статті (хороший рецепт хумусу). це потрібно для вправ пізніше. В даний час у цьому документі міститься кілька фрагментів вмісту - вони не позначені жодним чином, але розділені проривами рядків (Enter / Return натиснуто, щоб перейти до наступного рядка).

+ +

Однак, коли ви відкриваєте документ у вашому браузері, ви побачите, що текст з'являється суцільним шматком!

+ +

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

+ +

Це пояснюється тим, що немає елементів, які б давали структуру контенту, тому браузер не знає, що є заголовок а що є абзацом. Крім того:

+ + + +

Тому нам необхідно надати нашому контенту структурну розмітку.

+ +

Активне навчання: Надання нашої структури змісту

+ +

Давайте розглянемо живой приклад. У наведеному нижче прикладі додайте елементи до вихідного тексту у полі Введення так, щоб він з'являвся у вигляді заголовка та двох абзаців у полі Вивід.

+ +

Якщо ви зробите помилку, ви завжди можете скинути її за допомогою кнопки скидання. Якщо ви застрягли, натисніть кнопку Показати рішення, щоб побачити відповідь.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Чому нам потрібна семантика?

+ +

Семантика  всюди навколо нас - ми покладаємося на попередній досвід, щоб розповісти вам, що таке функція повсякденних об'єктів; коли ми щось бачимо, ми знаємо, якою буде її функція. Так, наприклад, ми очікуємо, що червоний світлофор означає "зупинка", а зелений світлофор означає "іти". Речі можуть бути дуже складними дуже швидко, якщо застосовується неправильна семантика (чи будь-яка країна використовує червоний, щоб означати "йти"?

+ +

У подібному дусі, ми повинні переконатися, що ми використовуємо правильні елементи, надаючи нашому змісту правильний сенс, функцію або зовнішній вигляд. У цьому контексті елемент {{htmlelement ("h1")}} також є семантичним елементом, який надає тексту, який він обертає навколо ролі (або значення) "заголовка верхнього рівня на вашій сторінці".

+ +
<h1>Це заголовок верхнього рівня</h1>
+ +

За замовчуванням браузер надасть йому великий розмір шрифту для того, щоб він виглядав як заголовок (хоча ви могли б такий стиль текста, могли отримати, використовуючи CSS). Більш важливо, що його семантичне значення буде використовуватися кількома способами, наприклад, пошуковими системами та програмами для читання з екрана (як згадано вище).

+ +

З іншого боку, ви можете зробити будь-який елемент схожим на елемент верхнього рівня. Розгляньте наступне:

+ +
<span style="font-size: 32px; margin: 21px 0;">Це заголовок верхнього рівня?</span>
+ +

Це елемент {{htmlelement ("span")}}. Вона не має семантики. Ви використовуєте його, щоб загорнути вміст, коли ви хочете застосувати до нього CSS (або зробити щось із цим за допомогою JavaScript), не надаючи йому жодного додаткового сенсу (про це пізніше ви знайдете в курсі.) Ми застосували деякі CSS, щоб він виглядав як заголовок верхнього рівня, але оскільки він не має семантичного значення, він не отримає жодної з додаткових переваг, описаних вище. Це гарна ідея використовувати відповідний елемент HTML для завдання.

+ +

Списки

+ +

Тепер звернемо увагу до списків. Списки знаходяться в усьому нашому житті - від списку покупок до списку напрямків, які ви підсвідомо дотримуєтеся, щоб дістатися до вашого будинку щодня, до списків інструкцій, які ви дотримуєтеся в цих підручниках! Списки знаходяться всюди в Інтернеті, і ми маємо три різні типи, про які потрібно знати.

+ +

Невпорядкований

+ +

Невпорядковані списки використовуються для позначення списків пунктів, для яких не має значення порядок позицій - візьмемо, наприклад, список покупок.

+ +
молоко
+яйця
+хліб
+гумус
+ +

Кожен невпорядкований список починається з елемента {{htmlelement ("ul")}}, який обертається навколо всіх елементів списку:

+ +
<ul>
+молоко
+яйцчя
+хліб
+гумус
+</ul>
+ +

Останнім кроком є перенесення кожного елемента списку в елемент {{htmlelement ("li")}} (елемент списку):

+ +
<ul>
+  <li>молоко</li>
+  <li>яйцчя</li>
+  <li>хліб</li>
+  <li>гумус</li>
+</ul>
+ +

Активне навчання: розмітка невпорядкованого списку

+ +

Спробуйте відредагувати живий зразок нижче, щоб створити свій власний HTML-невпорядкований список.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Замовлено

+ +

Упорядковані списки - це списки, в яких має значення порядок елементів - приведемо приклад набору напрямків:

+ +
Проїдьте до кінця дороги
+Поверніть праворуч
+Ідіть прямо по перших двох роз'їздів
+На третьому кільці поверніть ліворуч
+Школа знаходиться справа від вас, 300 метрів вперед по дорозі
+ +

Структура розмітки така ж, як і для невпорядкованих списків, за винятком того, що ви повинні обернути елементи списку в елемент {{htmlelement("ol")}}, а не <ul>:

+ +
<ol>
+  <li>Проїдьте до кінця дороги</li>
+  <li>Поверніть праворуч</li>
+  <li>Ідіть прямо по перших двох роз'їздів</li>
+  <li>На третьому кільці поверніть ліворуч</li>
+  <li>Школа знаходиться справа від вас, 300 метрів вперед по дорозі</li>
+</ol>
+ +

Активне навчання: розмітка впорядкованого списку

+ +

Спробуйте відредагувати живий зразок нижче, щоб створити свій власний HTML-список.

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Активне навчання: Розмітка сторінки рецепта

+ +

Таким чином, на даний момент у статті, у вас є вся інформація, необхідна для позначення нашого прикладу сторінки рецептів. Ви можете зберегти локальну копію нашої text-start.html запустіть файл і виконайте роботу там, або зробіть це в прикладі, що можна редагувати нижче. Можливо, це краще робити локально, оскільки ви зможете зберегти роботу, яку ви виконуєте, тоді як, якщо ви заповните її у редагований приклад, вона буде втрачена під час наступного відкриття сторінки. Обидва варіанти мають плюси і мінуси.

+ + + +

{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Якщо ви застрягли, ви завжди можете натиснути кнопку Показувати рішення або перевірити наш text-complete.html приклад на нашому github репозиторії.

+ +

Вкладені списки

+ +

Цілком нормально вкласти один список у інший. Ви, можливо, захочете, щоб деякі підпункти знаходились під  верхным рівнем. Візьмемо другий список з нашого прикладу рецептів:

+ +
<ol>
+  <li>Видаліть шкіру з часнику і грубо наріжте.</li>
+  <li>Видаліть все насіння і стебло з перцю і грубо наріжте.</li>
+  <li>Додайте всі інгредієнти в кухонний комбайн.</li>
+  <li>Переробіть всі інгредієнти в пасту.</li>
+  <li>Якщо ви хочете грубий "кремезний" гумус, переробляйте його короткий час.</li>
+  <li>Якщо ви хочете гладкий гумус, переробляйте його довше.</li>
+</ol>
+ +

Оскільки останні дві кулі дуже тісно пов'язані з тією, що була перед ними (вони читаються, як під-інструкції або варіанти, які підходять нижче цієї кулі), може мати сенс вкладати їх у свій власний невпорядкований список і розміщувати цей список всередині четверта куля. Це виглядатиме так:

+ +
<ol>
+  <li>Видаліть шкіру з часнику і грубо наріжте.</li>
+  <li>Видаліть все насіння і стебло з перцю і грубо наріжте.</li>
+  <li>Додайте всі інгредієнти в кухонний комбайн.</li>
+  <li>Переробіть всі інгредієнти в пасту.
+    <ul>
+      <li>Якщо ви хочете грубий "кремезний" гумус, переробляйте його короткий час.</li>
+      <li>Якщо ви хочете гладкий гумус, переробляйте його довше.</li>
+    </ul>
+  </li>
+</ol>
+ +

Спробуйте повернутися до попереднього активного прикладу навчання та оновити другий список, подібний до цього.late

+ +

Акцент і важливість

+ +

У людській мові ми часто підкреслюємо певні слова, щоб змінити зміст речення, і ми часто хочемо позначити певні слова як важливі або різні. HTML надає різні семантичні елементи, які дозволяють нам розмічати текстовий вміст з такими ефектами, і в цьому розділі ми розглянемо деякі з найбільш поширених.

+ +

Акцент

+ +

Коли ми хочемо додати акцент у розмовній мові, ми підкреслюємо певні слова, тонко змінюючи сенс того, що ми говоримо. Аналогічно, у письмовій мові ми схильні підкреслювати слова, виділяючи їх курсивом. Наприклад, наступні два речення мають різне значення.

+ +

Я радий, що ви не запізнилися.

+ +

Я радий, що ви не запізнилися.

+ +

Перше речення звуки справді полегшено, що людина не запізнився. Навпаки, другий звучить саркастично або пасивно-агресивно, висловлюючи досаду, що людина прибула трохи пізно.

+ +

У HTML ми використовуємо елемент {{htmlelement ("em")}} (вираз) для позначення таких екземплярів. Окрім того, що документ є цікавішим для читання, вони розпізнаються читачами екрану та висловлюються іншим тоном голосу. Браузери за замовчуванням створюють цей стиль як курсив, але ви не повинні використовувати цей тег, щоб отримати стиль курсиву. Для цього потрібно використовувати елемент {{htmlelement ("span")}} і деякий CSS, або, можливо, елемент {{htmlelement ("i")}} (див. Нижче).

+ +
<p>Я <em>радий</em>, що ви не <em>запізнилися</em>.</p>
+ +

Велике значення

+ +

Щоб підкреслити важливі слова, ми прагнемо підкреслити їх у розмовній мові і сміливо їх писати. Наприклад:

+ +

Ця рідина дуже токсична.

+ +

Я розраховую на вас. Не запізнюйтеся!

+ +

У HTML ми використовуємо {{htmlelement("strong")}} (strong важливий) елемент для позначення таких випадків. Окрім того, що документ стане більш корисним, вони знову розпізнаються читачами екрану та говорять різним тоном голосу. За умовчанням у браузерах цей текст виділено напівжирним шрифтом, але ви не повинні використовувати цей тег лише для отримання жирного стилю. Для цього потрібно використати {{htmlelement("span")}} елемент і деякі CSS, або, можливо,елемент{{htmlelement("b")}} (дивись нижче.)

+ +
<p>Ця рідина є <strong>дуже токсичною</strong>.</p>
+
+<p>Я розраховую на вас. <strong>Не </strong> запізнюйтесь!</p>
+ +

За бажанням можна вмонтовувати strong і акцентувати всередині один одного:

+ +
<p>Ця рідина є <strong>дуже токсичною</strong> —
+якщо ви її вип'єте, <strong>Ви можете <em>померти</em></strong>.</p>
+ +

Активне навчання: Давайте будемо уважними!

+ +

У цьому розділі активного навчання ми надали приклад, який можна редагувати. Усередині неї ми хотіли б, щоб ви спробували додати акцент і важливе значення словам, які ви вважаєте потрібними їм, просто щоб мати певну практику.

+ + + +

{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Курсив, жирний, підкреслений ...

+ +

Елементи, які ми обговорювали до цих пір, мають чітко виражену семантику. Ситуація з {{htmlelement("b")}}, {{htmlelement("i")}}, та {{htmlelement("u")}} дещо складніше. Вони прийшли так, щоб люди могли писати напівжирний, курсив або підкреслений текст в епоху, коли CSS все ще підтримувався погано або зовсім не підтримувався. Такі елементи, які впливають лише на презентацію, а не на семантику, відомі як елементи презентації і більше не повинні використовуватися, оскільки, як ми бачили раніше, семантика настільки важлива для доступності, SEO та ін.

+ +

HTML5 перевизначено <b>, <i> та <u> з новими, дещо заплутаними, семантичними ролями.

+ +

Ось найкраще правило: скоріше за все доцільно використовувати <b>, <i> або <u>, щоб передати значення, яке традиційно передається жирним шрифтом, курсивом або підкресленням, за умови, що немає більш відповідного елемента. Тим не менш, завжди залишається критично важливим збереження мислення доступності. Концепція курсиву не дуже корисна людям, які використовують читання з екрану, або людям, які використовують систему письма, окрім латинського алфавіту.

+ + + +
+

Попередження про підкреслення: люди пов'язують підкреслення з гіперпосиланнями. Тому в Інтернеті краще підкреслити лише посилання. Використовуйте елемент <u>, якщо він семантично доречний, але розгляньте можливість використання CSS для зміни підкресленого підкреслення на щось більш доречне в Інтернеті. Наведений нижче приклад ілюструє, як це можна зробити.

+
+ +
<!-- наукові назви -->
+<p>
+  Рубінова колібрі (<i> Archilochus colubris </i>)
+   є найбільш поширеним колібром у Східній Північній Америці.
+</p>
+
+<!-- іноземні слова -->
+<p>
+  Меню було морем екзотичних слів <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>
+
+
+ +

Підсумок

+ +

Ось це зараз! Ця стаття повинна була дати вам гарне уявлення про те, як почати розмітку тексту в HTML, і познайомили вас з деякими з найважливіших елементів у цій області. Існує набагато більше семантичних елементів для висвітлення в цій області, і ми розглянемо набагато більше в нашій статті "Більше семантичних елементів", що пізніше буде в курсі. У наступній статті ми детально розглянемо, як створювати гіперпосилання , можливо, найважливіший елемент на Web.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

+ +

У цьому модулі

+ + 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 +--- +
{{LearnSidebar}}
+ +

{{glossary("HTML")}} є відносно простою мовою. Вона складається з елементів, які можуть застосовуватися до різних частин тексту і надавати їм певного значення в документі (наприклад, цей текст є параграфом, цей — ненумерованим списком, цей — частиною таблиці), розбивати документ на логічні частини (це заголовок, це три колонки контенту, це меню навігації), а також вставляти контент, такий як відео чи зображення, у документ. У цьому розділі ми поговоримо про перші два з цих завдань, а також розглянемо базові поняття і синтаксис, які потрібні для розуміння HTML.

+ +

Передумови

+ +

Для цього розділу вам не потрібні попередні знання з HTML, але потрібно бути користувачем комп'ютерів і мережі (принаймні на рівні переглядання сайтів). Також вам буде потрібне базове робоче середовище, встановлення якого описане в статті Встановлення основного програмного забезпечення, і розуміння того, як створювати і керувати файлами, як описано в статті Робота з файлами — обидві статті є частинами розділу Початок роботи з вебом.

+ +
+

Примітка: якщо ви працюєте на комп'ютері/планшеті/іншому пристрої, на якому не маєте можливості створювати файли, спробуйте писати код в онлайн-програмах, таких як  JSBin чи Thimble.

+
+ +

Посібники

+ +

Статті у цьому розділі пояснюють базову теорію HTML і надають можливість перевірити ваші навички.

+ +
+
Початок роботи з HTML
+
Стаття пояснює елементарні основи HTML — що таке елементи, атрибути та інші важливі поняття, які ви могли чути, і яке завдання вони виконують. Ми також покажемо, як побудований елемент HTML, як побудована типова сторінка HTML, і пояснимо інші основні особливості мови. В процесі роботи ми трохи пограємо з HTML, щоб вам було цікаво!
+
Що в head? Метадані в HTML
+
Head в HTML-документі є частиною, яка не відображається в веб-браузері коли сторінка завантажується. Вона містить інформацію про сторінку, такі як {{htmlelement("title")}}, посилання на {{glossary("CSS")}} (якщо ви хочете надати стиль вашому HTML-змісту за допомогою CSS), посилання до користувальницьких favicons та метаданих (тобто даних про HTML, наприклад, хто його написав (автор) і важливі ключові слова (keywords), що описують документ.)
+
Основи HTML-тексту
+
Одним із основних завдань HTML є надання текстового значення (також відомого як семантика), щоб браузер знав, як правильно відображати його. У цій статті розглядається, як правильно використовувати HTML, щоб розбити блок тексту на структуру заголовків та абзаців (параграфів), додати акцент/важливість слів, створити списки і багато іншого.
+
Створення гіперпосилань
+
Гіперпосилання дійсно важливі — саме вони роблять Інтернет павутиною. Ця стаття показує синтаксис, необхідний для створення посилання і обговорює кращі практичні поради.
+
Розширене форматування тексту
+
В HTML є багато інших елементів для форматування тексту, про які ми не вказали в статті Основи HTML тексту. Елементи, що знаходяться тут, менш відомі, але їх все ж корисно знати. Тут ви дізнаєтесь про позначення цитат, списки опису, комп'ютерний код та інший пов'язаний текст, індекс та верхній індекс, контактну інформацію та багато іншого.
+
Структура документу та веб-сайту
+
Крім визначення окремих частин вашої сторінки (наприклад "абзац" або "зображення"), HTML також використовується для визначення областей вашого веб-сайту (таких як "заголовок", "навігаційне меню", "колонка основного змісту".) У цій статті розглянуто, як планувати основну структуру веб-сайту, а також написати HTML-код для представлення цієї структури.
+
Відлагодження HTML
+
Написали HTML-код файно, але що робити, якщо щось йде неправильно і ви не можете з'ясувати, де помилка в коді? В цій статті ви ознайомитесь з деякими інструментами, які зможуть вам допомогти.
+
+ +

Оцінки

+ +

Наступні оцінки допоможуть перевірити ваше розуміння базових основ HTML, описаних вище в посібниках.

+ +
+
Розмітка/Форматування листа
+
Ми всі вчимося писати листи рано чи пізно. Це також корисний приклад, щоб перевірити свої навички у форматуванні тексту. Отже, в цій оцінці вам буде надіслано листа для форматування.
+
Структурування сторінки змісту
+
Ця оцінка перевіряє ваше вміння використовувати HTML для структурування простої сторінки змісту, що містить заголовок (header), нижній колонтитул (footer), навігаційне меню (navigation menu), основний зміст (main content), і бічну панель (sidebar).
+
+ +

Дивіться також

+ +
+
Основи веб-грамотності 1
+
Відмінний курс навчання Mozilla foundation, який навчає та випробовує багато навичок, про які говорилося в модулі Вступ до HTML. Учні знайомляться з читанням, написанням та участю в Інтернеті в цьому шестичастинному модулі. Дізнайтеся про основи Інтернету за допомогою виробництва та співпраці.
+
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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
+ +

Елемент {{glossary("Head", "head")}} документа HTML - це частина, яка не відображається у веб-браузері під час завантаження сторінки. Він містить таку інформацію, як назва сторінки {{htmlelement("title")}}, посилання на файл стилів {{glossary("CSS")}} (якщо ви хочете стилізувати ваш HTML контент за допомогою CSS), посилання на  власні іконки та інші метадані (дані про HTML, наприклад, хто його написав, та важливі ключові слова, які описують документ.) У цій статті ми розглянемо все перераховане вище та інше, щоб дати вам гарну основу для роботи з розміткою.

+ + + + + + + + + + + + +
Передумови:Знання основ HTML, як описано в Початок роботи з HTML.
Мета:Дізнатись про заголовок (head) в HTML, які в нього задачі, найважливіші елементи, які він може містити, і який вплив він може мати на HTML-документ.
+ +

Що таке заголовок (head) HTML?

+ +

Давайте перейдемо до простого HTML документу, який ми розглянули в попередній статті:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

Заголовок HTML (head) - це вміст елементу {{htmlelement("head")}} — на відміну від вмісту елемента {{htmlelement("body")}} (яке відображається на сторінці при завантаженні в браузері), вміст head не відображається на сторінці. Головним завданням заголовку є містити {{glossary("Metadata", "метадані")}} про документ. У наведеному вище прикладі заголовок досить малий:

+ +
<head>
+  <meta charset="utf-8">
+  <title>My test page</title>
+</head>
+ +

Однак у більших сторінках заголовок може містити досить велику кількість інформації - спробуйте перейти на деякі з ваших улюблених веб-сайтів та за допомогою інструментів розробника перевірте вміст заголовку. Наша мета полягає не в тому, щоб показати вам, як використовувати все, що може бути поставлено в заголовок, а навчити вас використовувати найочевидніші речі, які ви хочете включити в заголовок і ознайомити з ними. Давайте розпочнемо.

+ +

Додавання назви сторінки

+ +

Ми вже бачили елемент елемент {{htmlelement("title")}} в дії — він може бути використаний для додавання назви (title) документа. Однак його можна зплутати з елементом {{htmlelement("h1")}}, який використовується для додавання заголовка верхнього рівня до вашого вмісту body - його також іноді називають заголовком сторінки. Але це різні речі!

+ + + +

Активне навчання: перевірка простого прикладу

+ +
    +
  1. Щоб розпочати це активне навчання, ми хотіли б, щоб ви перейшли на наш GitHub репозиторій та завантажили копію нашої title-example.html сторінки. Для цього також + +
      +
    1. Скопіюйте та вставте код із сторінки в новий текстовий файл у редакторі коду, а потім збережіть його в зручному місці.
      2. +
    2. Натисніть кнопку "Raw" на сторінці, яка призведе до появи вихідного коду на новій вкладці веб-браузера. Потім виберіть у меню вашого браузера  Файл > Зберегти як... а потім виберіть місце для збереження файлу.
      3. +
    +
    2. +
  2. Тепер відкрийте файл у своєму веб-браузері. Ви повинні побачити щось подібне: +

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element. Тепер повинно бути абсолютно зрозуміло, в чому різниця між <h1> та <title>!

    +
    3. +
  3. Ви також маєте спробувати відкрити код в редакторі коду, відредагувати вміст цих елементів, а потім оновити сторінку у своєму веб-браузері. Поекспериментуйте з кодом, змінюючи його!
    4. +
+ +

Зміст елементу <title> також використовується в інший спосіб. Наприклад, якщо ви спробуєте закласти сторінку (Закладки > Закласти цю сторінку або значок зірки в адресному рядку в Firefox), ви побачите зміст <title> заповнений як назва закладки.

+ +

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

+ +

Вміст <title> також використовується в результатах пошуку, як ви побачите нижче.

+ +

Метадані: елемент <meta>

+ +

Метадані - це дані, які описують дані, і HTML має "офіційний" спосіб додавання метаданих до документа - елемент {{htmlelement("meta")}}. Звичайно, інші речі, про які ми говоримо в цій статті, також можуть розглядатися як метадані. Існує багато різних типів елементів <meta> які можуть бути включені в <head> вашої сторінки, але не будемо намагатись пояснити їх усі на даному етапі, оскільки це може вас заплутати. Замість цього ми пояснимо декілька речей, які ви, можливо, зазвичай бачите, щоб розібратись, що до чого.

+ +

Визначення кодування символів документа

+ +

У прикладі, показаному вище, цей рядок також включений:

+ +
<meta charset="utf-8">
+ +

Цей елемент просто вказує кодування символів документа - набір символів, який документ може використовувати. utf-8 - це універсальний набір символів, що включає практично будь-які символи з будь-якої людської мови. Це означає, що ваша веб-сторінка зможе обробляти будь-яку мову; тому правильно встановити це кодування на кожній веб-сторінці, яку ви створюєте! Наприклад, ваша сторінка може чудово відображатись англійською та японською мовами:

+ +

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine, Якщо ви встановите кодування символів, наприклад, ISO-8859-1,  (набір символів для латинського алфавіту), виведенний текст сторінок буде зіпсованим:

+ +

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

+ +

Активне навчання: експеримент із кодуванням символів

+ +

Щоб спробувати це, перегляньте простий шаблон HTML, який ви отримали в попередньому розділі <title> (the title-example.html page), спробуйте змінити значення мета-кодування на ISO-8859-1, і додайте японську мову на свою сторінку. Це текст, який ми використовували (до речі, там написано "рис гарячий"):

+ +
<p>Japanese example: ご飯が熱い。</p>
+ +

Додавання автора та опису

+ +

Багато елементів <meta> містять атрибути name та content:

+ + + +

Два таких мета-елемента, які корисні для включення в сторінку, визначають автора сторінки та надають стислий опис сторінки. Давайте подивимось на приклад:

+ +
<meta name="author" content="Chris Mills">
+<meta name="description" content="Учбовий центр MDN спрямований на те,
+щоб надати всім новачкам в Інтернеті все, що їм необхідно знати,
+щоб приступити до розробки веб-сайтів і додатків.">
+ +

Вказівка імені автора корисна по кількох причинах: корисно вміти розібратися, хто написав сторінку, якщо ви захочете зв'язатися з ним з питаннями про вміст. Деякі системи керування вмістом (CMS) мають можливості для автоматичного виявлення інформації про автора сторінок та надання доступу до них.

+ +

Вказування опису, що містить ключові слова, що відносяться до вмісту вашої сторінки, є корисним, оскільки він може призвести до того, що ваша сторінка буде відображатися вище в результатах пошуку, що виконуються пошуковими системами (такі дії називаються Пошуковою оптимізацією, або {{glossary("SEO")}}.)

+ +

Активне навчання: використання опису в пошукових системах

+ +

Опис також використовується на сторінках результатів пошуку. Давайте пройдемо вправу, щоб вивчити це:

+ +
    +
  1. Перейдіть на головну сторінку Mozilla Developer Network.
    2. +
  2. Перегляньте джерело сторінки (клікніть правою кнопкою миші на сторінці, виберіть Програмний код сторінки (View Page Source) із контекстного меню.
    3. +
  3. Знайдіть опис метатегів. Він буде виглядати так: + 
    <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.">
    +
    4. +
  4. Тепер знайдіть "Mozilla Developer Network" у вашій улюбленій пошуковій системі (Ми використовуємо Yahoo.) Ви помітите опис елементів вмісту <meta> та <title>, що використовуються в результатах пошуку — безумовно їх варто вказувати! +

    A Yahoo search result for "Mozilla Developer Network"

    +
    5. +
+ +
+

Примітка: В Google ви побачите деякі важливі субсторінки MDN під посиланням на головну сторінку MDN - вони називаються посилання на сайт (sitelinks) і налаштовуються в інструментах Google для веб-майстрів Google's webmaster tools — це спосіб зробити результати пошуку вашого сайту кращими в пошуковій системі Google.

+
+ +
+

Примітка: Багато функцій <meta> більше не використовуються. Наприклад, ключове слово <meta> елемента (<meta name="keywords" content="заповнити, в, ваші, ключові, слова, тут">) — який повинен забезпечити ключові слова для пошукових систем, щоб визначити релевантність цієї сторінки для різних пошукових термінів - нині ігноруються пошуковими системами, оскільки спамери просто заповнювали список ключових слів на сторінці сотнями ключових слів, щоб їх сайти з'являлись в результатах пошуку якомога вище.

+
+ +

Інші типи метаданих

+ +

Мандруючи Інтернетом ви також можете знайти інші типи метаданих. Багато функцій, які ви бачитимете на веб-сайтах, є власне створеними, призначеними для надання деяким сайтам (наприклад, сайтам соціальних мереж) певної інформації, яку вони можуть використовувати.

+ +

Наприклад, Open Graph Data є протоколом метаданих, який Facebook винайшов для надання більш багатих метаданих для веб-сайтів. У коді MDN ви знайдете це:

+ +
<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">
+ +

Одним з ефектів цього є те, що, коли ви посилаєтеся на MDN на Facebook, посилання з'являється разом із зображенням та описом: більш зручно для користувачів.

+ +

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter також має власні аналогічні запатентовані метадані, що мають подібний ефект, коли URL-адреса сайту відображається на twitter.com. Наприклад:

+ +
<meta name="twitter:title" content="Mozilla Developer Network">
+ +

Додавання власних іконок на сайт

+ +

Щоб ще більше збагатити дизайн сайту, ви можете в метадані додавати посилання на власні іконки, і вони будуть відображатися у певних контекстах.

+ +

Цей скромний значок, який існує протягом багатьох років, був першою піктограмою такого типу, значок 16 x 16 пікселів, який використовується в багатьох місцях. Ви побачите значки, які відображатимуться на вкладці веб-переглядача, що містять кожна відкрита сторінка, а також поруч зі сторінками, закладеними на панелі закладок.

+ +

Іконка може бути додана на сторінку за допомогою:

+ +
    +
  1. Зберігаючи її в тому самому каталозі, що й індексна сторінка сайту (index), збережена у форматі .ico (більшість браузерів підтримуватиме функцію favicons у більш поширених форматах, наприклад .gif або .png, але за допомогою формату ICO це гарантує, що він буде працювати ще в Internet Explorer 6).
    2. +
  2. Додайте наступний рядок в <head> HTML документу, щоб вказати іконку: + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

Ось приклад піктограми на панелі закладок:

+ +

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

+ +

Також існує безліч інших типів іконок. Наприклад, ви знайдете їх в вихідному коді домашньої сторінки MDN:

+ +
<!-- 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">
+ +

У коментарях пояснюється, для чого використовується кожна іконка, наприклад, при додаванні сторінки на головний екран iPad буде використана іконка високої роздільної здатності.

+ +

Не хвилюйтеся щодо впровадження всіх цих типів іконок прямо зараз - це досить просунута функція, і від вас не очікується знання про це, щоб просунутися в курсі. Основна мета тут полягає в тому, щоб повідомити вам про такі речі, і не лякайтеся, якщо ви зустрінете їх під час перегляду вихідних кодів інших веб-сайтів.

+ +

Застосування CSS та JavaScript в HTML

+ +

Практично всі веб-сайти, якими ви користуєтесь на сьогоднішній день, використовують {{glossary("CSS")}} щоб виглядати класно та {{glossary("JavaScript")}} для роботи інтерактивних функцій, таких як відеоплеєри , карти, ігри тощо. Зазвичай пов'язані стилі додають на сторінку за допомогою елементу {{htmlelement("link")}}, а скрипти за допомогою елементу {{htmlelement("script")}} відповідно.

+ + + +

Активне навчання: застосування CSS та JavaScript на сторінці

+ +
    +
  1. Щоб розпочати це активне навчання, візьміть копії наших meta-example.html, script.js та style.css файлів, і збережіть їх на своєму комп'ютері в тій же директорії. Переконайтеся, що вони збережені з правильними іменами та розширеннями файлів.
    2. +
  2. Відкрийте файл HTML у вашому браузері та текстовий редактор.
    3. +
  3. Виконавши ці кроки, додайте до вашого HTML документу елементи {{htmlelement("link")}} та {{htmlelement("script")}}, щоб CSS та JavaScript застосувались до HTML-документу.
    4. +
+ +

Якщо все правильно зроблено, коли ви збережете свій HTML-код і оновите свій браузер, то побачите, що на сторінці все змінилося:

+ +

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.

+ + + +
+

Примітка: Якщо ви застрягли в цій вправі і не можете застосувати CSS/JS на сторінці, то перегляньте нашу сторінку css-and-js.html з прикладом.

+
+ +

Встановлення основної мови документа

+ +

Нарешті, варто зазначити, що ви можете (і це необхідно) встановити мову своєї сторінки. Це можна зробити, додавши lang attribute (атрибут мови) до відкриваючого HTML-тегу (як показано в прикладі meta-example.html і показано нижче).

+ +
<html lang="en-US">
+ +

Це корисно в багатьох випадках. Ваш HTML-документ буде більш ефективно індексований пошуковими системами, які використовують це, щоб ефективніше індексувати сторінки — наприклад, показувати їх користувачам, які використовують відповідну мову (дозволяючи їй відображатися належним чином), і це корисно для людей з порушеннями зору, що використовують програми зчитування з екрана - скрінрідери (наприклад, слово "динозавр" говорять як українською, так й іншими мовами, але воно вимовляється по-різному).

+ +

Ви також можете встановити підрозділи вашого документа, щоб вони розпізнавались різними мовами. В нашому прикладі з фрагментом японською мовою правильно вказати мову так:

+ +
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
+ +

Ці коди визначаються стандартом ISO 639-1. Ви можете дізнатись більше про них в Language tags in HTML and XML.

+ +

Підсумок

+ +

На цьому закінчим наш короткий огляд заголовку HTML — там ще багато всього корисного, але зараз повний перелік буде нудним і заплутає вас. Ви вже маєте загальне уявлення про найпоширеніші і використовуваніші елементи. У наступній статті ми розглянемо основи розмітки тексту в HTML.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

+ +

 

+ +

 

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 +--- +

{{LearnSidebar}}

+ +

До цього часу ми переглянули багато тексту в цьому курсі, але Інтернет буде справді нудним лише за допомогою тексту. Давайте почнемо дивитись на те, як зробити веб-сайт живим, з більш цікавим вмістом! Цей модуль вивчає, як використовувати HTML для включення мультимедійних даних на ваші веб-сторінки, в тому числі різні способи додавання зображень, а також можливість вставки відео, аудіо та навіть цілих веб-сторінок.

+ +

Передумови

+ +

Перш ніж запускати цей модуль, ви повинні мати достатні знання про основи HTML, як це було описано раніше в "Вступ до HTML". Якщо ви не працювали через цей модуль (або щось подібне), спочатку спробуйте його, а потім поверніться!

+ +
+

Примітка: Якщо ви працюєте на комп'ютері / планшеті / іншому пристрої, де ви не можете створювати власні файли, ви можете спробувати (більшість) прикладів коду в онлайн-програмі кодування, наприклад JSBin або Thimble.

+ +

 

+
+ +

Довідники

+ +

Цей модуль містить наступні статті, в яких ви знайдете всі основи вставки мультимедіа на веб-сторінках.

+ +
+
Зображення у форматі HTML
+
Існують і інші види мультимедійних засобів, але це логічно починати з скромного елемента {{htmlelement ("img")}}, який використовується для вставки простого зображення на веб-сторінку. У цій статті ми подивимося, як використовувати його більш глибоко, включаючи основні, анотований його підписом за допомогою {{htmlelement ("figure")}} і як він відноситься до фонових зображень CSS.
+
Відео та аудіозапис
+
Далі ми розглянемо, як використовувати HTML5 елементи {{htmlelement ("video")}} та {{htmlelement ("audio")}}, щоб вставити відео та аудіо на наші сторінки; включаючи основи, надання доступу до різних форматів файлів до різних веб-переглядачів, додавання субтитрів та субтитрів, а також можливість додавання відмов для застарілих веб-переглядачів.
+
Від <object> до <iframe> - інші технології вбудовування
+
На цьому етапі ми хотіли б трохи побороти крок, поглянувши на кілька елементів, які дозволяють вставляти різноманітні типи вмісту на свої веб-сторінки: {{htmlelement ("iframe")}}, елементи {{htmlelement ("embed")}} і {{htmlelement ("object")}}.  <iframe> для вбудовування інших веб-сторінок, а інші два дозволяють вставляти PDF-файли, SVG і навіть Flash-технологію на виході, але які ви все ще можете побачити напів-регулярно.
+
Додавання векторної графіки до Інтернету
+
Векторна графіка може бути дуже корисною в певних ситуаціях. На відміну від звичайних форматів, таких як PNG / JPG, вони не спотворюють / пікселюються при збільшенні - вони можуть залишатися гладкими при масштабування. Ця стаття знайомить вас із векторною графікою та як включити популярний {{glossary ("SVG")}} формат на веб-сторінках.
+
Відповідні зображення
+
За допомогою настільки різних типів пристроїв, які тепер можуть переглядати веб-сайти - від мобільних телефонів до настільних комп'ютерів - важливим поняттям для оволодіння сучасним веб-сайтом є чудовий дизайн. Це стосується створення веб-сторінок, які можуть автоматично змінювати свої функції відповідно до різних розмірів екрана, дозволів і т. Д. Це буде детально розглянуто в модулі CSS пізніше, але зараз ми розглянемо інструменти HTML доступний для створення чутливих зображень, включаючи елемент {{htmlelement ("picture")}}.
+
+ +

Оцінки

+ +

Наступні оцінки допоможуть перевірити розуміння базових основ HTML, описаних вище в посібниках.

+ +
+
Сторінка сплесків Mozilla
+
У цій оцінці ми перевіримо ваші знання про деякі методи, описані в статтях цього модуля, що допоможе вам додати деякі зображення та відео на приголомшливу сторінку про все про Mozilla!
+
+ +

Дивись також

+ +
+
Додайте візитну карту догори зображення
+
Карти зображень забезпечують механізм створення різних частин посилання на зображення на різні місця (подумайте про карту, посилаючись на додаткову інформацію про кожну країну, на яку ви натискаєте). Ця техніка іноді може бути корисною.
+
Основи веб-грамотності 2
+
+

Відмінний курс навчання Mozilla, який вивчає та випробовує деякі з навичок, про які говорили в модулі мультимедіа та вбудовування. Зануртеся в основу створення веб-сторінок, розробки для доступності, спільного використання ресурсів, використання онлайн-засобів масової інформації та відкритої роботи (це означає, що ваш вміст є вільно доступним і доступним для обміну іншими користувачами).

+
+
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 +--- +
{{LearnSidebar}}
+ +

Доволі поширеним завданням в HTML є структуризація табличних даних, і HTML має набір елементів та атрибутів саме для таких цілей. В поєднанні з CSS для стилізації, HTML полегшує відображення в інтернеті такої інформації, як шкільний навчальний план, розклад занять у вашому басейні, або статистику про ваших улюблених динозаврів чи футбольні команди. Даний модуль містить усе, що необхідно знати про структуризацію табличних даних за допомогою HTML.

+ +

Передумови

+ +

Перед тим як почати даний модуль, ви повинні пройти базовий курс HTML — дивіться Вступ до HTML.

+ +
+

Note: 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 JSBin or Thimble.

+
+ +

Зміст

+ +

Даний модуль містить наступні статті:

+ +

Основи HTML таблиць

+ +
+
Дана стаття дозволить вам розпочати роботу з HTML таблицями, ознайомить з такими основними поняттями як рядки та клітини, заголовки, як розширити клітини на декілька колонок та рядків, а також як згрупувати усі клітини разом з метою стилізації.
+
+ +

Особливості та доступність HTML таблиць

+ +
+
В другій статті даного модулю ми більш детально розгядаємо особливості HTML таблиць - такі як captions/summaries та групування рядків в head, body та footer секції вашої таблиці - а також розглядаємо доступність таблиць для користувачів з вадами зору.
+
+ +

Оцінювання

+ +
+
Структуризація даних про планети
+

+ У нашій табличній оцінці ми надаємо вам деякі дані про планети в нашій сонячній системі, які ви зможете структурувати в HTML таблицю.
+
-- cgit v1.2.3-54-g00ecf