freeCodeCamp/curriculum/challenges/ukrainian/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
bad87fee1348bd9aede08817	Вставте якірний елемент в Абзац	0	18244	nest-an-anchor-element-within-a-paragraph

--description--

Можна вкласти посилання в інші текстові елементи.

<p>
  Here's a <a target="_blank" href="https://www.freecodecamp.org"> link to www.freecodecamp.org</a> for you to follow.
</p>

Давайте зупинимося на прикладі. Звичайний текст поміщений в елемент:p:

<p> Here's a ... for you to follow. </p>

Далі йде anchor element <a> (який вимагає кінцевого тегу </a>):

<a> ... </a>

target це атрибут прив’язного тегу, який визначає, де відкрити посилання. Значення вказує на відкриття посилання в новій вкладці_blank. href є атрибутом прив’язки, який містить URL адресу посилання:

<a href="https://www.freecodecamp.org" target="_blank"> ... </a>

Текст link to www.freecodecamp.org, усередині aелемента, який називається anchor text буде відображати посилання, на яке потрібно натиснути:

<a href=" ... " target="...">link to freecodecamp.org</a>

Кінцевий результат прикладу буде виглядати наступним чином:

Here's a link to www.freecodecamp.org for you to follow.

--instructions--

Вкласти існуючий aелемент в новий p елемент. Не створюйте нову мітку для прив'язки. У новому абзаці має бути текст із зазначенням View more cat photos де cat photos є посиланням, а решта - простим текстом.

--hints--

У вас має бути тільки один елемент a.

assert(
  $('a').length  === 1 
);

Eлемент a повинен покликатись на https://www.freecatphotoapp.com".

assert(
  $('a[href="https://www.freecatphotoapp.com"]').length  === 1 
);

Ваш a елемент повинен складатися з ідентифікатору cat photos

assert(
  $('a')
    .text()
    .match(/cat\sphotos/gi)
);

Ви повинні створити новий елемент p. У вашому HTML-коді повинно бути не менше трьох тегів.p.

assert($('p') && $('p').length > 2);

Ваш a елемент повинен бути вкладений в новий елемент p.

assert(
  $('a[href="https://www.freecatphotoapp.com"]').parent().is('p')
);

Елемент p повинен мати текст View more (з пропуском після нього).

assert(
  $('a[href="https://www.freecatphotoapp.com"]')
    .parent()
    .text()
    .match(/View\smore\s/gi)
);

Ваш елемент a not не повинен мати текст View more.

assert(
  !$('a')
    .text()
    .match(/View\smore/gi)
);

Кожен з p елементів повинен мати кінцевий тег.

assert(
  code.match(/<\/p>/g) &&
    code.match(/<p/g) &&
    code.match(/<\/p>/g).length === code.match(/<p/g).length
);

Кожен з ваших a елементів повинен мати кінцевий тег.

assert(
  code.match(/<\/a>/g) &&
    code.match(/<a/g) &&
    code.match(/<\/a>/g).length === code.match(/<a/g).length
);

--seed--

--seed-contents--

<h2>CatPhotoApp</h2>
<main>

  <a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>

  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>

--solutions--

<h2>CatPhotoApp</h2>
<main>
  <p>View more <a target="_blank" href="https://www.freecatphotoapp.com">cat photos</a></p>

  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>