diff options
Diffstat (limited to 'files/uk/learn/html/multimedia_and_embedding')
| -rw-r--r-- | files/uk/learn/html/multimedia_and_embedding/index.html | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/files/uk/learn/html/multimedia_and_embedding/index.html b/files/uk/learn/html/multimedia_and_embedding/index.html new file mode 100644 index 0000000000..6dccf89410 --- /dev/null +++ b/files/uk/learn/html/multimedia_and_embedding/index.html @@ -0,0 +1,55 @@ +--- +title: Вставки мультимедіа +slug: Learn/HTML/Multimedia_and_embedding +translation_of: Learn/HTML/Multimedia_and_embedding +--- +<p>{{LearnSidebar}}</p> + +<p class="summary">До цього часу ми переглянули багато тексту в цьому курсі, але Інтернет буде справді нудним лише за допомогою тексту. Давайте почнемо дивитись на те, як зробити веб-сайт живим, з більш цікавим вмістом! Цей модуль вивчає, як використовувати HTML для включення мультимедійних даних на ваші веб-сторінки, в тому числі різні способи додавання зображень, а також можливість вставки відео, аудіо та навіть цілих веб-сторінок.</p> + +<h2 id="Передумови">Передумови</h2> + +<p>Перш ніж запускати цей модуль, ви повинні мати достатні знання про основи HTML, як це було описано раніше в "Вступ до HTML". Якщо ви не працювали через цей модуль (або щось подібне), спочатку спробуйте його, а потім поверніться!</p> + +<div class="note"> +<p>Примітка: Якщо ви працюєте на комп'ютері / планшеті / іншому пристрої, де ви не можете створювати власні файли, ви можете спробувати (більшість) прикладів коду в онлайн-програмі кодування, наприклад JSBin або Thimble.</p> + +<h2 id="sect1"> </h2> +</div> + +<p class="summary">Довідники</p> + +<p>Цей модуль містить наступні статті, в яких ви знайдете всі основи вставки мультимедіа на веб-сторінках.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Зображення у форматі HTML</a></dt> + <dd>Існують і інші види мультимедійних засобів, але це логічно починати з скромного елемента {{htmlelement ("img")}}, який використовується для вставки простого зображення на веб-сторінку. У цій статті ми подивимося, як використовувати його більш глибоко, включаючи основні, анотований його підписом за допомогою {{htmlelement ("figure")}} і як він відноситься до фонових зображень CSS.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Відео та аудіозапис</a></dt> + <dd>Далі ми розглянемо, як використовувати HTML5 елементи {{htmlelement ("video")}} та {{htmlelement ("audio")}}, щоб вставити відео та аудіо на наші сторінки; включаючи основи, надання доступу до різних форматів файлів до різних веб-переглядачів, додавання субтитрів та субтитрів, а також можливість додавання відмов для застарілих веб-переглядачів.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Від <object> до <iframe> - інші технології вбудовування</a></dt> + <dd>На цьому етапі ми хотіли б трохи побороти крок, поглянувши на кілька елементів, які дозволяють вставляти різноманітні типи вмісту на свої веб-сторінки: {{htmlelement ("iframe")}}, елементи {{htmlelement ("embed")}} і {{htmlelement ("object")}}. <code><iframe></code> для вбудовування інших веб-сторінок, а інші два дозволяють вставляти PDF-файли, SVG і навіть Flash-технологію на виході, але які ви все ще можете побачити напів-регулярно.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Додавання векторної графіки до Інтернету</a></dt> + <dd>Векторна графіка може бути дуже корисною в певних ситуаціях. На відміну від звичайних форматів, таких як PNG / JPG, вони не спотворюють / пікселюються при збільшенні - вони можуть залишатися гладкими при масштабування. Ця стаття знайомить вас із векторною графікою та як включити популярний {{glossary ("SVG")}} формат на веб-сторінках.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Відповідні зображення</a></dt> + <dd>За допомогою настільки різних типів пристроїв, які тепер можуть переглядати веб-сайти - від мобільних телефонів до настільних комп'ютерів - важливим поняттям для оволодіння сучасним веб-сайтом є чудовий дизайн. Це стосується створення веб-сторінок, які можуть автоматично змінювати свої функції відповідно до різних розмірів екрана, дозволів і т. Д. Це буде детально розглянуто в модулі CSS пізніше, але зараз ми розглянемо інструменти HTML доступний для створення чутливих зображень, включаючи елемент {{htmlelement ("picture")}}.</dd> +</dl> + +<h2 id="Оцінки">Оцінки</h2> + +<p>Наступні оцінки допоможуть перевірити розуміння базових основ HTML, описаних вище в посібниках.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Сторінка сплесків Mozilla</a></dt> + <dd>У цій оцінці ми перевіримо ваші знання про деякі методи, описані в статтях цього модуля, що допоможе вам додати деякі зображення та відео на приголомшливу сторінку про все про Mozilla!</dd> +</dl> + +<h2 id="Дивись_також">Дивись також</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Додайте візитну карту догори зображення</a></dt> + <dd>Карти зображень забезпечують механізм створення різних частин посилання на зображення на різні місця (подумайте про карту, посилаючись на додаткову інформацію про кожну країну, на яку ви натискаєте). Ця техніка іноді може бути корисною.</dd> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Основи веб-грамотності 2</a></dt> + <dd> + <p>Відмінний курс навчання Mozilla, який вивчає та випробовує деякі з навичок, про які говорили в модулі мультимедіа та вбудовування. Зануртеся в основу створення веб-сторінок, розробки для доступності, спільного використання ресурсів, використання онлайн-засобів масової інформації та відкритої роботи (це означає, що ваш вміст є вільно доступним і доступним для обміну іншими користувачами).</p> + </dd> +</dl> |