linkedin-skill-assessments-quizzes

HTML

Q1. Для чого призначений тег <track> і коли його слід використовувати?

Q2. Які найкращі приклади порожніх елементів?

Q3. Який тег чи теги в HTML5 вбудовують веб-сторінку всередину веб-сторінки?

Q5. Який найкращий спосіб застосувати жирний стиль до тексту?

Q7. Чим слід заповнити два порожні поля в HTML-коді нижче?

<address ______ _____>
  <span itemprop="streetAddress">6410 Via Real</span><br/>
  <span itemprop="addressLocality">Carpinteria</span>,
  <span itemprop="addressRegion">CA</span>
  <span itemprop="addressCode">93013</span>
</address>

Q8. Для чого корисний елемент <aside>?

Q9. З якими тегами пов’язаний елемент <source>?

Q10. Що НЕ є дійсним атрибутом для елемента <textarea>?

Q11. Який найкращий спосіб закодувати показаний зразок?

Sample text

<details>
  <summary>Parmesan Deviled Eggs</summary>
  <p>
    These delectable little bites are made with organic eggs, fresh Parmesan, and chopped pine nuts.
  </p>
</details>

<h4>▸ Parmesan Deviled Eggs</h4>
<p>
  These delectable little bites are made with organic eggs, fresh Parmesan, and chopped pine nuts.
</p>

<details open>
  <summary>Parmesan Deviled Eggs</summary>
  <p>
    These delectable little bites are made with organic eggs, fresh Parmesan, and chopped pine nuts.
  </p>
</details>

<details>
  <h4>▸ Parmesan Deviled Eggs</h4>
  <p>
    These delectable little bites are made with organic eggs, fresh Parmesan, and chopped pine nuts.
  </p>
</details>

Q12. Яке призначення елемента <samp>?

Q13. Коли слід використовувати елементи <ol> і <ul>?

Q14. Яка різниця між методами post і get у формі?

Q15. Яка різниця між тегами <div> і <span>?

Q16. Що має заповнити порожнечу в HTML-коді нижче?

<form method="post" action="mailto:info@linkedin.com" ____="text/plain"></form>

Q17. Яка правильна розмітка для атрибута alt зображення?

<img src="cubism.jpg" alt="Version of ""Whistler's Mother"" in cubist style">

<img src="cubism.jpg" alt="Version of "Whistler's Mother" in cubist style">

<img src="cubism.jpg" alt='Version of "Whistler&apos;s Mother" in cubist style' />

<img src="cubism.jpg" alt="Version of \"Whistler's Mother\" in cubist style">

Q18. Яке призначення атрибута id у коді нижче?

<p id="warning">Be careful when installing this product.</p>

Q19. Яка найкраща семантична розмітка для показаного речення?

On July 21, 1969, Neil Armstrong said, "One small step for man, one giant leap for mankind."

<p>
  On <time datetime="1969-07-21">July 21, 1969</time>, Neil Armstrong said,
  <q cite="https://www.hq.nasa.gov/alsj/a11l/a11.html"
    >One small step for man, one giant leap for mankind.</q
  >
</p>

<p>
  On July 21, 1969, Neil Armstrong said,
  <q cite="https://www.hq.nasa.gov/alsj/a11l/a11.html"
    >"One small step for man, one giant leap for mankind."</q
  >
</p>

<p>
  On July 21, 1969, Neil Armstrong said,
  <q>"One small step for man, one giant leap for mankind."</q>
</p>

<p>
  On <time datetime="07-21-1969">July 21, 1969</time>, Neil Armstrong said,
  <q cite="https://www.hq.nasa.gov/alsj/a11l/a11.html"
    >One small step for man, one giant leap for mankind.</q
  >
</p>

Q20. Що має заповнити порожнечу в цьому HTML-коді?

<a href="https://es.yahoo.com/" hreflang="____" target="_blank">Visita Yahoo</a>

Q21. Перегляньте текст у червоному полі на зображенні. Який найкращий спосіб закодувати це в HTML?

Image of footer

Q22. Який найкращий спосіб закодувати три варіанти у формі, щоб користувач міг вибрати лише один елемент?

<label for="example">Make a choice:</label>
<datalist id="example">
  <option value="Choice 1"></option>
  <option value="Choice 2"></option>
  <option value="Choice 3"></option>
</datalist>

<p>Make a choice:</p>
<input id="choices" name="example" />

<datalist value="choices">
  <option value="Choice 1"></option>
  <option value="Choice 2"></option>
  <option value="Choice 3"></option>
</datalist>

<label for="example">Make a choice:</label>
<input list="example" id="choices" name="choices" />

<datalist id="choices">
  <option value="Choice 1">Choice 1</option>
  <option value="Choice 2">Choice 2</option>
  <option value="Choice 3">Choice 3</option>
</datalist>

<label for="example">Make a choice:</label>
<input list="choices" id="example" name="example" />

<datalist id="choices">
  <option value="Choice 1"></option>
  <option value="Choice 2"></option>
  <option value="Choice 3"></option>
</datalist>

Q23. Як підтвердити, що документ написаний у HTML5?

Q24. Що виконує наведений нижче код?

<picture>
  <source srcset="image1.jpg" media="(min-width: 1000px)" />
  <source srcset="image2.jpg" media="(min-width: 750px)" />
  <img src="image3.jpg" />
</picture>

Джерело: HTML <picture> Tag

Q25. Який код створить цю таблицю?

Table with yellow background

<table>
  <scope cols="2" style="background-color: yellow">
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td>first</td>
    <td>second</td>
    <td>third</td>
  </tr>
</table>

<table>
  <colgroup span="2" style="background-color: yellow">
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td>first</td>
    <td>second</td>
    <td>third</td>
  </tr>
</table>

<table>
  <group cols="2" style="background-color: yellow">
  <tr scope="row">
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
  </tr>
  <tr scope="row">
    <td>first</td>
    <td>second</td>
    <td>third</td>
  </tr>
</table>

<table>
  <columns colspan="2" style="background-color: yellow">
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td>first</td>
    <td>second</td>
    <td>third</td>
  </tr>
</table>

Q26. Для чого зазвичай використовується тег <hr>? / Альт.: Яке семантичне значення тегу <hr>?

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

MDN: Елемент HTML <hr> представляє тематичний розрив між елементами рівня абзацу. Історично його було представлено як горизонтальну лінію. Хоча він все ще може відображатися як горизонтальна лінія візуально у браузерах, цей елемент тепер визначається в семантичних термінах, а не в термінах представлення, тому, якщо ви хочете намалювати горизонтальну лінію, ви повинні зробити це за допомогою відповідного CSS.

Q27. Чим слід заповнити два порожні поля в HTML-коді нижче?

<section itemscope itemtype="http://schema.org/Restaurant">
  <h1 itemprop="name">Nadia's Garden</h1>
  <p itemscope ______ ______>
    <span itemprop="ratingValue">4.5</span> stars - based on
    <span itemprop="reviewCount">120</span> reviews
  </p>
</section>

Q28. Який фрагмент HTML посилається на самий верх веб-сторінки?

<a id="top"></a>

<!-- розміщено у верхній частині сторінки -->

<a href="#top">back to top</a>

<a name="top"></a>

<!-- розміщено у верхній частині сторінки -->

<a href="#top">back to top</a>

<a href="#">back to top</a> <a href="#top">back to top</a>

<button href="#">back to top</button> <button href="#top">back to top</button>

Q29. Які три теги застаріли в HTML4, але повернулися в HTML5?

Q30. Тег _ використовується для розмітки короткого фрагмента коду, тоді як тег _ використовується для розмітки довшого блоку коду

  1. Джерело: MDN Web Docs code
  2. Джерело: MDN Web Docs pre

Q31. Що робить елемент <label>?

Q32. Щоб відкрити посилання в новому вікні чи вкладці, використовуйте атрибут _

Q33. Який семантично найточніший спосіб позначити наведене нижче речення? Примітка: “TLAs” розшифровується як “акроніми з трьох літер”.

We are fond of our TLAs in web design.

<p>We are fond of our <span title="three-letter acronyms">TLAs</span> in web design.</p>

<p>We are fond of our TLAs in web design.</p>

<p>we are fond of our <abbr title="three-letter acronyms">TLAs</abbr> in web design.</p>

<p>we are fond of our <acronym title="three-letter acronym">TLAs</acronym> in web design.</p>

<acronym> видалено в HTML5, і його більше не слід використовувати. Натомість веб-розробники повинні використовувати елемент <abbr>.

Q34. Яка правильна вкладена розмітка для цього списку?

Sample list

<ul>
  <li>
    office
    <ol style="circle">
      <li>staple</li>
      <li>paper</li>
    </ol>
  </li>
  <li>
    groceries
    <ol style="circle">
      <li>milk</li>
    </ol>
  </li>
</ul>

<ul>
  <li>
    Office Supplies
    <ul>
      <li>Stapler</li>
      <li>Paper clips</li>
    </ul>
  </li>
  <li>
    Groceries
    <ul>
      <li>Milk</li>
    </ul>
  </li>
</ul>

<ul>
  <li>office</li>
  <li>staple</li>
  <li>paper</li>
  <li>groceries</li>
  <li>milk</li>
</ul>

Q35. Чим слід заповнити пусте поле нижче?

<link href="phone.css" rel="stylesheet" _____="print" />

Q36. Який семантично правильний спосіб розмітки цього макета?

quote

<p>
  "Making money is what you have to do to sustain a business—being driven to make something of value
  and purpose is much more powerful."
</p>
<p><em>Lynda Weinman</em></p>

<blockquote>
  <q
    >"Making money is what you have to do to sustain a business—being driven to make something of
    value and purpose is much more powerful."</q
  >
  <cite><em>Lynda Weinman</em></cite>
</blockquote>

<blockquote>
  <p>
    "Making money is what you have to do to sustain a business—being driven to make something of
    value and purpose is much more powerful."
  </p>
  <cite>Lynda Weinman</cite>
</blockquote>

<section>
  <q
    >"Making money is what you have to do to sustain a business—being driven to make something of
    value and purpose is much more powerful."</q
  >
  <cite>Lynda Weinman</cite>
</section>

Q37. У якому варіанті використовується правильна термінологія в описі цієї розмітки: <p>info</p>?

Q38. Яка різниця між <input type="submit" value="Натисни мене"> і <button type="submit">Натисни мене</button>?

Q39. Який найкращий семантичний спосіб вказати, що текст стосується введення з клавіатури?

Q40. Що робить цей код?

<audio controls>
  <source src="sound.mp3" type="audio/mpeg" />
  <source src="sound.ogg" type="audio/ogg" />
  <source src="sound.wav" type="audio/wav" />
</audio>

Q41. Який атрибут застосовує підказку про комбінацію клавіш до поточного елемента?

Q42. Який правильний спосіб закодувати посилання, яке після натискання надсилатиме електронний лист на адресу email@example.com із темою “Hello”?

Q43. Який тег є кореневим елементом документа HTML?

Тег <html> є кореневим елементом документа HTML, що означає, що він містить увесь вміст і теги документа HTML. Елемент HTML представляє корінь документа.

  1. Джерело
  2. Джерело

Q44. Який фрагмент коду створює показаний макет, починаючи з <table> і закінчуючи </table>?

Table

<tr>
  <td>Table cell 1</td>
  <td>Table cell 2</td>
</tr>
<tr>
  <td rowspan="2">Table cell 3</td>
</tr>

<tr>
  <td>Table cell 1</td>
  <td>Table cell 2</td>
  <td>Table cell 3</td>
</tr>

<tr>
  <td>Table cell 1</td>
  <td>Table cell 2</td>
</tr>
<tr>
  <td colspan="2">Table cell 3</td>
</tr>

<tr>
  <td>Table cell 1</td>
  <td>Table cell 2</td>
</tr>
<tr>
  <td>Table cell 3</td>
</tr>

Q45. Який вибір НЕ є допустимим значенням для атрибута name у тегу <meta>?

Q46. Яка форма закодована правильно?

<form>
  <legend>Title</legend>
  <fieldset>
    <label for="name">Your name:</label>
    <input type="text" name="name" id="name" />
    <button type="submit">Submit</button>
  </fieldset>
</form>

<form>
  <fieldset>
    <legend>Title</legend>
    <p>Your name:</p>
    <input type="text" name="name" id="name" />
    <input type="submit" value="Submit" />
  </fieldset>
</form>

<form>
  <fieldset>
    <legend>Title</legend>
    <label for="name">Your name:</label>
    <input type="text" name="name" id="name" />
    <button type="submit">Submit</button>
  </fieldset>
</form>

<form>
  <legend>Title</legend>
  <label for="name">Your name:</label>
  <input type="text" name="name" id="name" />
  <input type="submit" value="Submit" />
</form>

Q47. Що робить атрибут poster у тегу <video>?

Q48. Що робить цей код?

<audio controls src="sound.mp3" type="audio/mpeg">Коли відображається цей текст?</audio>

Q49. Яке основне призначення тегу <canvas>?

Q50. Який варіант містить три дійсні елементи рівня block?

Q51. Яке призначення атрибута lang у коді нижче?

<p lang="en-GB">Welcome to our wonderful website.</p>

Q52. Які формати зображень можуть відображатися всіма веб-браузерами?

Q53. Перегляньте наведений нижче код. Яка абсолютна URL-адреса сторінки під назвою page.html?

<base href="http://www.linkedin.com/dir/" />

Q54. Який правильний спосіб підключити таблицю стилів під назвою style.css у <head> вашого документа?

Q55. Ви хочете мати однаковий інтервал між деякими рядками, як у вірші чи адресі. Який підхід слід використовувати?

З MDN (<br>: елемент розриву рядка):

Проблеми доступності

Створення окремих абзаців тексту за допомогою <br> не тільки погана практика, але й проблематична для людей, які орієнтуються за допомогою технології зчитування з екрана. Програми зчитування екрана можуть повідомляти про присутність елемента, але не про будь-який вміст, що міститься в <br>. Це може заплутати та розчарувати людину, яка використовує програму зчитування з екрана.

Використовуйте елементи <p> та властивості CSS, як-от margin, щоб контролювати інтервали.

Q56. Що робить тег <wbr>?

<nav>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</nav>

<nav>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <ul>
      <li><a href="#">Link 2a</a></li>
    </ul>
    <li><a href="#">Link 3</a></li>
  </ul>
</nav>

<nav>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li>
      <a href="#">Link 2</a>
      <ul>
        <li><a href="#">Link 2a</a></li>
      </ul>
    </li>
    <li><a href="#">Link 3</a></li>
  </ul>
</nav>

<ul>
  <nav>
    <li><a href="#">Link 1</a></li>
    <li>
      <a href="#">Link 2</a>
      <ul>
        <nav>
          <li><a href="#">Link 2a</a></li>
        </nav>
      </ul>
    </li>
    <li><a href="#">Link 3</a></li>
  </nav>
</ul>

<nav>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <nav>
      <ul>
        <li><a href="#">Link 2a</a></li>
      </ul>
    </nav>
    <li><a href="#">Link 3</a></li>
  </ul>
</nav>

Q58. Який правильний спосіб закодувати коментар у HTML?

Q59. Яке твердження є хибним?

Q60. Яка найкраща семантика для використання лапок у HTML?

Steve Kruz said: "He will Win"

Довідка (w3schools)

Q61. Як відео виглядатиме на повністю завантаженій веб-сторінці, якщо використовується тег <video> і не встановлено атрибут autoplay?

Довідка (w3schools)

Q62. Як правильно описати порожній елемент / Альтернативний варіант: Як правильно описати порожній елемент, наприклад тег розриву рядка?

Довідка (MDN Web Docs)

Q63. Яка мета async в цьому коді?

<script async src="myscript.js"></script>

Q64. Що цей код робить на сторінці, яку ви відвідуєте вперше?

<audio autoplay loop src="sound.mp3" type="audio/mpeg"></audio>

  1. (MDN) audio,
  2. (MDN) autoplay

Q65. Яка різниця між тегами <head> і <header>?

Q66. Яка мета defer у цьому коді?

<script defer src="myscript.js"></script>

Q67. Наведений нижче код містить деякі помилки. Який варіант виправляє всі помилки?

<table>
  <tr>
    Cell 1
  </tr>
  <td>Cell 2</td>
  <caption>
    A table
  </caption>
</table>

<caption>
  A table
</caption>
<table>
  <td>
    <tr>
      Cell 1
    </tr>
    <tr>
      Cell 2
    </tr>
  </td>
</table>

<caption>
  A table
</caption>
<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

<table>
  <caption>
    A table
  </caption>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <caption>
    A table
  </caption>
</table>

Q68. Враховуючи наведену тут структуру файлів та каталогів, який елемент потрібно розмістити у файлі profit.html для посилання на info.html?

Image of footer

Q69. Коли слід використовувати елемент <article>?

Довідка (MDN)

Q70. Який список складається з трьох порожніх елементів?

<area />
<embed />
<strong></strong>

<input />
<br />
<p></p>

<link>
<meta>
<title>

<wbr />
<base />
<source />

Q71. Після натискання якого фрагмента HTML здійснюється телефонний дзвінок на мобільному пристрої?

Q72. Яке призначення атрибута class?

Довідка (MDN)

Q73. Який вибір не є допустимим атрибутом типу для тегу <input>?

Довідка (MDN)

Q74. Який найбільш семантично вірний спосіб позначити це речення, щоб «happy talk must die» відтворювалося як вбудована цитата?

As Steve Krug once said, happy talk must die.

Джерело: W3Schools

<q> тег Більшість браузерів відображатимуть теги q як вбудовані елементи в лапках

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

<p>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="contact.html">Contact</a>
</p>

<nav>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="contact.html">Contact</a>
</nav>

<nav>
  <ol>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ol>
</nav>

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Q76. Який вибір є найкращим способом розмітки цього макета?

Image of footer

<h4>Mailing Address</h4>
<address>
  6410 Via Real <br />
  Carpinteria, CA 93013<br />
  <a href="mailto:info@linkedin.com">info@linkedin.com</a>
</address>

<h4><strong>Mailing Address</h4>
<address><em>
  6410 Via Real <br>
  Carpinteria, CA 93013<br>
  <a href="mailto:info@linkedin.com">info@linkedin.com</a>
</em></address>

<h4>Mailing Address</h4>
<p>
  <em>
    6410 Via Real <br />
    Carpinteria, CA 93013<br />
    <a href="mailto:info@linkedin.com">info@linkedin.com</a>
  </em>
</p>

<p><strong>Mailing Address</strong></p>
<p>
  <em>
    6410 Via Real <br />
    Carpinteria, CA 93013<br />
    <a href="mailto:info@linkedin.com">info@linkedin.com</a>
  </em>
</p>

Джерело: W3Schools

Тег <address> визначає контактну інформацію автора/власника документа чи статті. Контактною інформацією може бути адреса електронної пошти, URL-адреса, фізична адреса, номер телефону, ідентифікатор соціальної мережі тощо. Текст в елементі <address> зазвичай відображається курсивом, і браузери завжди додають розрив рядка перед і після елементу <address>.

Q77. Яке основне призначення HTML?

Q78. Коли для наведеного нижче HTML-коду у браузері відобразиться «Sample Text»?

<noscript>Sample Text</noscript>

Довідка (MDN)

Q79. Як цей код відображатиметься за замовчуванням у більшості браузерів?

<details>
  <h4>Mixed Berry Tart.</h4>
  <p>
    Raspberries, blueberries, and strawberries on top of a creamy filling served in a crispy tart.
  </p>
</details>

Q80. Яка різниця між <svg> і <canvas>?

Q81. Яка різниця між атрибутами readonly і disabled для елемента <textarea>?

  1. Джерело: readonly
  2. Джерело: disabled

Q82. Що таке target у цьому коді?

<a target="_blank">...</a>

Q83. Який правильний спосіб додати URL-адресу для надсилання до елемента button?

<button submit="http://example.com/process">Process data</button>

<button action="http://example.com/process">Process data</button>

<button formaction="http://example.com/process">Process data</button>

<button method="http://example.com/process">Process data</button>

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

Q84. Яка найкраща розмітка для створення цього тексту?

x<y&z>w

У цьому питанні є проблема, але ця відповідь вважатиметься правильною. Це надто дивне питання, тому що всі ці методи не працюють. Хорошим методом є використання &amp, &lt, &gt.

Q85. Що не так із цим фрагментом коду?

<label>Address:</label> <input type="text" name="address" id="address-input" />

Q86. Який метод подання форми стандартний?

Q87. Яка розмітка є найбільш семантично правильною для бічного коментаря дрібним шрифтом?

Q88. Який варіант дасть іспанське слово canción?

Q89. Яке призначення <caption>?

Q90. З яким набором тегів пов’язано атрибут value?

<li>
  <input />
  <option></option>
</li>

<input>
<option>
<textarea>

<button>
  <input />
  <form></form>
</button>

<input /> <label> <meter></meter></label>

Q91. Що не так з цим кодом?

<img src="https://source.unsplash.com/random">

Q92. Який варіант є найбільш семантично правильною розміткою для визначення першого терміна?

Визначення definition element => <dfn> Елемент HTML використовується для вказівки терміна, який визначається в контексті фрази визначення або речення.
**Елемент Description Term => <dt> HTML визначає термін в описі або списку визначень, і тому має використовуватися всередині елемента <dl>.
**Description Details element => <dd> Елемент HTML надає опис, визначення або значення для попереднього терміну (<dt>) у списку опису (<dl>).

Джерело

Q93. Який варіант є найкращим способом кодування трьох варіантів у формі, щоб користувач міг вибрати кілька елементів?

<input type="radio" name="example" /> Choice 1 <br />
<input type="radio" name="example" /> Choice 2 <br />
<input type="radio" name="example" /> Choice 3

<input type="checkbox" name="example" /> Choice 1 <br />
<input type="checkbox" name="example" /> Choice 2 <br />
<input type="checkbox" name="example" /> Choice 3

<label><input type="checkbox" name="example" /> Choice 1</label><br />
<label><input type="checkbox" name="example" /> Choice 2</label><br />
<label><input type="checkbox" name="example" /> Choice 3</label>

<label><input type="radio" name="example" /> Choice 1</label><br />
<label><input type="radio" name="example" /> Choice 2</label><br />
<label><input type="radio" name="example" /> Choice 3</label>

<input> елементи типу checkbox відображаються за замовчуванням як поля, які позначаються (відзначаються галочками) після активації, як ви можете побачити в офіційній державній паперовій формі. Точний вигляд залежить від конфігурації операційної системи, під якою працює браузер. Зазвичай це квадрат, але він може мати закруглені кути.

Джерело

Q94. Як би ви позначили фрагмент ASCII-арту (смайлик) доступним способом?

Q95. Який приклад є стандартним способом у HTML5 для додавання метаданих автора на сторінку?

Q96. Враховуючи наведені нижче вимоги, виберіть правильну конфігурацію input: input, який дозволяє користувачеві вибирати з діапазону цілих значень від 0 до 100 (включно) з кроком 5

Елементи <input> типу range дозволяють користувачеві вказати числове значення, яке має бути не менше та не більше заданого значення. Атрибут step — це число, яке вказує ступінь деталізації, якої має відповідати значення.

Джерело

Q97. Який варіант є правильною розміткою для елемента <head>?

HTML-елемент <head> містить машиночитану інформацію (метадані) про документ, наприклад його назву. Тег <data> використовується для додавання машинозчитуваного перекладу даного вмісту. Джерело 1/ Джерело 2

Q98. Вам необхідно додавати коментарі в блог компанії. Яка найбільш семантично вірна розмітка для списку коментарів?

<aside>
  <h3>Comments</h3>
  <article>First comment.</article>
  <article>Second comment.</article>
</aside>

<div aria="dpub-comments">
  <h3>Comments</h3>
  <div aria="dpub-comment">First comment.</div>
  <div aria="dpub-comment">Second comment.</div>
</div>

<aside>
  <h3>Comments</h3>
  <aside>First comment.</aside>
  <aside>Second comment.</aside>
</aside>

<div typeof="comments">
  <h3>Comments</h3>
  <div typeof="comment">First comment.</div>
  <div typeof="comment">Second comment.</div>
</div>

HTML-елемент <article> представляє самодостатню композицію в документі, сторінці, програмі чи сайті, яка призначена для незалежного розповсюдження або повторного використання (наприклад, у синдикації). Приклад: коментар, надісланий користувачем. Джерело

Q99. Щоб зробити щось редагованим користувачем, вам потрібно встановити атрибут _ на _

Глобальний атрибут contenteditable — це перерахований атрибут, який вказує, чи має елемент бути доступним для редагування користувачем. Якщо так, браузер змінює свій віджет, щоб дозволити редагування. Атрибут повинен приймати одне з таких значень: true або порожній рядок, який вказує на те, що елемент можна редагувати; false, що означає, що елемент не можна редагувати. Джерело

Q100. Який варіант є стандартним способом включення значення у форму, не роблячи його видимим або редагованим користувачем?

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

Q101. Який семантично вірний спосіб додати ідентифікаційний заголовок до таблиці?

HTML-елемент <caption> визначає заголовок (або назву) таблиці. Джерело

Q102. Який файл зображення, на який посилається атрибут srcset цього елемента img, має завантажувати браузер на маленькому мобільному телефоні?

<img
  srcset="medium.jpg 320w, large.jpg 1280w"
  src="small.jpg"
  alt="Our favorite image"
  sizes="(min-width: 1200px) 640px, 100vw"
/>

Браузер: 1. Перегляне ширину пристрою. 2. Визначить, яка умова носія у списку розмірів є першою вірною. 3. Подивиться на розмір слота, наданого цьому медіа-запиту. 4. Завантажить зображення, указане в списку srcset, яке має той самий розмір, що й слот, або, якщо його немає, перше зображення, яке більше за вибраний розмір слота. Джерело

Q103. Який опис закодовано правильно?

<dl>
  <dt>Server</dt>
  <dd>Software used to serve webpages, like Apache.</dd>
  <dd>Hardware used to provide data to other computers.</dd>
  <!-- Other terms and descriptions -->
</dl>

<dt>
  <dl>Server</dl>
  <dd>Software used to serve webpages, like Apache.</dd>
  <dd> Hardware used to provide data to other computers.</dd>
  <!-- Other terms and descriptions -->
</dt>

<dl>
  <dt>Server</dt>
  <dd>Software used to serve webpages, like Apache.</dd>
  <dt>Hardware used to provide data to other computers.</dt>
  <!-- Other terms and descriptions -->
</dl>

<dl>
  <dd>Server</dd>
  <dt>Software used to serve webpages, like Apache.</dt>
  <dt>Hardware used to provide data to other computers.</dt>
  <!-- Other terms and descriptions -->
</dl>

Джерело 1 Джерело 2

Q104. Що не так з цим кодом?

<ul>
  <h2>Espresso Drinks</h2>
  <li>Espresso</li>
  <li>Latte</li>
  <li>Cappuccino</li>
  <li>Mocha</li>
</ul>

ul content model приймає лише "Нуль або більше li та елементів підтримки скрипта". Джерело

Q105. Дизайнер надав вам код CSS, який має запускатися лише тоді, коли пристрій, що відображає сторінку, перебуває в темному режимі. Як би ви вставили цей код?

Q106. Як би ви розмітили заголовок для рядка таблиці?

<table>
  <thead scope="row">
    <th row="1">Header</th>
  </thead>
  <tr>
    <td>10</td>
    <td>18</td>
  </tr>
</table>

<table>
  <tr>
    <th scope="row">Header</th>
    <td>10</td>
    <td>18</td>
  </tr>
</table>

<table>
  <tr>
    <thead scope="row">
      Header
    </thead>
    <td>10</td>
    <td>18</td>
  </tr>
</table>

<table>
  <tr>
    <th>Header</th>
    <td>10</td>
    <td>18</td>
  </tr>
</table>

Q107. Яке твердження правильне?

Джерело

Q108. Користувачі повідомляють, що форма не працює. У чому проблема?

<form action="/choices" disabled>
  <fieldset disabled>
    <legend>choices</legend>
    <label>Choice 1 <input type="radio" name="choice" value="choice1" /></label>
    <label>Choice 2 <input type="radio" name="choice" value="choice1" /></label>
    <label>Choice 3 <input type="radio" name="choice" value="choice1" /></label>
    <label>Choice 4 <input type="radio" name="choice" value="choice1" /></label>
    <button>Choose!</button>
  </fieldset>
</form>

Вимкнений набір полів непридатний для використання та натискання. Джерело

Q109. Який список описів закодовано правильно?

<dl>
  <dt>Server</dt>
  <dd>Software used to server webpages, like Apache.</dd>
  <dd>Hardware used to provide data to other computers.</dd>
  <!--Other terms and descriptions -->
</dl>

<dl>
  <dd>Server</dd>
  <dt>Software used to server webpages, like Apache.</dt>
  <dt>Hardware used to provide data to other computers.</dt>
  <!--Other terms and descriptions -->
</dl>

<dt>
    <dl>Server</dl>
    <dd>Software used to server webpages, like Apache.</dd>
    <dd>Hardware used to provide data to other computers.</dd>
    <!--Other terms and descriptions -->
</dt>

<dl>
  <dt>Server</dt>
  <dd>Software used to server webpages, like Apache.</dd>
  <dt>Hardware used to provide data to other computers.</dt>
  <!--Other terms and descriptions -->
</dl>

Q110. Що означає a в тегу HTML?

Джерело

Q111. Який правильний елемент HTML для вставки розриву рядка?

Q112. Глобальний атрибут HTML contenteditable використовується для

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

Джерело

Q114. Атрибут _ елемента HTML label є механізмом посилань, щоб визначити, до якого input або елемента прив’язана мітка

Джерело

Q115. Що з наведеного нижче забезпечує кодування в HTML?

Q116. Який елемент HTML є контейнером для всіх аспектів документа, які можна відобразити?

Q117. “h” у тегу HTML h1 є скороченням від _

Джерело

Q118. Що є недійсним використанням елемента <a>?

<a href="#additional-information" class="Card">
  <video src="media.mp4" width="400" height="300"></video>
</a>

<a href="#additional-information" class="Card">
  <details>
    <summary>Additional Information</summary>
  </details>
</a>

<a href="#additional-information" class="Card">
  <p>Additional Information</p>
  <p></p
></a>

<a href="#additional-information" class-"Card">
  <img src="media.jpeg" alt="More information"></video>
</a>

Q119. Як відобразити попередньо відформатований текст у HTML?

Q120. Який елемент title є дійсним?

Джерело

Q121. Яке посилання містить дійсну URL-адресу?

Джерело 1 Джерело 2

Q122. У якому прикладі відсутній обов’язковий закриваючий тег, що робить його недійсним?

Джерело

Q123. Який семантично вірний метод позначання відео субтитрами в браузерах, які його підтримують?

Джерело

Q124. Білий аркуш має бічну панель і кінцеві виноски, які доповнюють основний текст. Як би ви позначили їх, щоб зробити їхні різні ролі більш доступними?

<custom-sidebar aria-label-"Sidebar"›Sidebar...</custom-sidebar><custom-footnote aria-
label="Endnotes">Endnotes...</custom-footnote>

<aside role="sidebar">Sidebar...</aside>
<aside role="notes">Endnotes...</aside>

<aside role="complementary">Sidebar...</aside>
<aside role="supplementary">Endnotes...</aside>

<aside aria-label-"Sidebar">Sidebar...</aside><aside aria-label="Endnotes">Endnotes...</aside>

Джерело

Q125. Білий аркуш має бічну панель і кінцеві виноски, які доповнюють основний текст. Як би ви позначили їх, щоб зробити їхні різні ролі більш доступними?

Джерело

Q126. Який приклад відео автоматично відтворюватиметься в більшості браузерів?

Джерело

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

<script type="module" src="module.js"></script>
// external module
<script type="async" src="module.js"></script>
// async
<script type="defer" src="module.js"></script>
// defer
<script type="module" src="module.js">
  // inline module
</script>

Q128. Який зворотно-сумісний метод перетворює коло у SVG на посилання?

Джерело

xlink:href - Застаріле: ця функція більше не рекомендована. Хоча деякі браузери все ще можуть підтримувати її, її можливо, уже вилучено з відповідних веб-стандартів, вона може бути в процесі видалення або збережена лише для цілей сумісності. Уникайте її використання та оновіть існуючий код, якщо можливо;

Q129. Користувачі повідомляють, що форма не працює. Яка причина?

  <form action="/choices" disabled>
    <fieldset disabled>
      <legend>Choices</legends>
      <label>Choice 1 <input type="radio" name="choice" value="choice1" /></label>
      <label>Choice 2 <input type="radio" name="choice" value="choice2" /></label>
      <label>Choice 3 <input type="radio" name="choice" value="choice3" /></label>
      <label>Choice 4 <input type="radio" name="choice" value="choice4" /></label>
      <button>Choose!</button>
    </fieldset>
  </form>

Q130. Що не так з цією таблицею?

<table>
  <legend>A two body table!</legend>
  <col />
  <col />
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 1</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 1</td>
    </tr>
  </tbody>
</table>

Джерело

Q131. Яке призначення атрибута id у цьому коді?

<p id="warning">Be careful when installing this product.</p>

Джерело

Q132. Що представляє елемент HTML <em>?

Джерело

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

Q134. Який атрибут не є суттєвим для <iframe>?

Q135. Що означає HTML?

Q136. Який із наведених нижче елементів HTML використовується для створення невпорядкованого списку?

This site is open source. Improve this page.