Playlist – музика твого настрою

Сьогодні ми спіймаємо хвилю приємної музики і створимо плейліст з піснями, які вам подобаються. А ще розберемо, що таке посилання і як їх використовувати у HTML-сторінках.

HTML-посилання допомагають перенаправити користувача на нову вебсторінку або на потрібне місце в поточній сторінці. Створюються за допомогою тегу <a>.

Для створення посилання необхідно написати такий текст на html-сторінку:

<a href="URL">текст посилання</a>

Види посилань

Існує три види посилань: 

1. Посилання на сайт в інтернеті. Воно виглядає так:
   <a href=”https://www.youtube.com/watch?v=F7WwkftjB7A”>Океан Ельзи</a>
2. Посилання на іншу сторінку твого сайту. Наприклад, є дві сторінки : index.html та contacts.html. Тоді, щоб потрапити з першої сторінки на другу, треба використати такий код:
   <a href=”Contacts.html”>Перехід на сторінку контактів</a>
3. Посилання-якір. Це посилання допомагає  зробити Зміст. Якщо на сайті багато інформації, людина може глянути зміст і натиснути на потрібну тему. Після натиснення її перекине на потрібний абзац. Наприклад:

<h1>Пори року</h1>
<h2>Зміст</h2>

<a href="#p1">Літо</a> <!--створюємо якір, вказуючи #id елемента-->
<a href="#p2">Осінь</a>
<a href="#p3">Зима</a>
<a href="#p4">Весна</a>

<p id="p1">Літо - це чудова пора, канікули і все таке...</p> <!--додаємо відповідний id елемента-->
<p id="p2">...</p>
<p id="p3">...</p>
<p id="p4">...</p>

Такі посилання часто використовуються у вікіпедії, погляньте-но сюди: https://uk.wikipedia.org/wiki/HTML 

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

<a href="http://metanit.com/web/html5/" target="_blank">Підручник з HTML5</a>

Картинки-Посилання

Складаються з двох частин:

– посилання

– картинка

Картинка знаходиться всередині посилання, що дозволяє їй бути клікабельною (тобто якщо натиснути на картинку, то відбудеться перехід за посиланням)

<a href="посилання, на яке треба перейти по кліку">
      <img src="посилання на картинку" />
</a>

Приклад: 

<a href="https://www.youtube.com/watch?v=0AMSLfVwT3g">
    <img src="https://i.ytimg.com/vi/0AMSLfVwT3g/maxresdefault.jpg" />
</a>

Створюємо playlist!

1: Створіть новий проєкт. Додайте головний заголовок і два менших:

<h1>Мій плейліст</h1>
  <h2>Музичні стилі</h2>
  
  <h2>Мої пісні</h2>
  

В підзаголовку “Музичні стилі” ми напишемо про стилі, які подобаються кожному з вас, а у “Мої пісні” вже будуть посилання на пісні плейліста.

2: Додайте посилання на сторінку в інтернеті, яка розповідає про два ваших улюблених стилі в музиці (після “Музичні стилі”). Приклад:

  <a href="https://uk.wikipedia.org/wiki/%D0%A0%D0%BE%D0%BA-%D0%BC%D1%83%D0%B7%D0%B8%D0%BA%D0%B0" target="_blank">Рок музика</a>

target=”_blank” дозволяє відкрити сторінку в новому вікні, що буде дуже зручно, щоб ваша сторінка не закривалася.

3: А зараз трохи магії! Для краси сторінки додамо трошки стилів. Скопіюйте такий код у файл style.css :

a {
  display: inline-block;
  margin: 10px;
}

 body {
	background-color: #efefef;
	font-family: "Comic Sans MS", sans-serif;
	line-height: 1.2;
	text-align: center;
	padding: 40px 0 0 20px;
}

h1 {
	text-transform: uppercase;
	font-size: 40px;
	color: "skyblue";
}

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

4: Настав час додавати пісні. Це будуть картинки-посилання. Якщо натиснути на картинку, відкриється відповідна пісня в youtube.

  <a href="https://www.youtube.com/watch?v=qjxtxUSpdoA&ab_channel=SpivBrativ" target="_blank">
    <img src="https://westnews.info/stuff/news/54082.png" height="200" width="200">
    <p>Ти знаєш, що ти людина</p>
  </a>

Ми тут створили тег посилання, а в середині цього тега додали картинку і підпис.

5: Додайте 6 пісень на ваш смак. В підписі можна ставити назву пісні або виконавця

P.S. Має вийти щось на кшталт:

1: Змініть колір фону на сторінці зі стилями

2: Після картинок додайте на свій сайт заголовок: “Про виконавців” і трохи інформації про кількох виконавців (можете знайти в інтернеті). Назву групи або виконавців виділіть заголовками (тег <h1> … <h6>).

Тепер зверху додайте Зміст. Може вийти, наприклад, так :

   <p>Інформація про виконавця</p>
    <a href="#p1">Океан Ельзи</a> 
    <a href="#p2">Скай</a>
    <a href="#p3">imagine dragons</a>

Тепер додайте посилання-якоря на відповідні абзаци (як це зробити дивіться вище)

3: Створіть ще одну сторінку songs.html. Додайте туди текст пісні або щось на свій смак. Створіть посилання з основної сторінки на цю сторінку (як це зробити дивіться вище у документі)