Playlist – музика твого настрою
Сьогодні ми спіймаємо хвилю приємної музики і створимо плейліст з піснями, які вам подобаються. А ще розберемо, що таке посилання і як їх використовувати у HTML-сторінках.
HTML-посилання допомагають перенаправити користувача на нову вебсторінку або на потрібне місце в поточній сторінці. Створюються за допомогою тегу <a>.
Для створення посилання необхідно написати такий текст на html-сторінку:
<a href="URL">текст посилання</a>Види посилань
Існує три види посилань:
- Посилання на сайт в інтернеті. Воно виглядає так:
<a href=”https://www.youtube.com/watch?v=F7WwkftjB7A”>Океан Ельзи</a> - Посилання на іншу сторінку твого сайту. Наприклад, є дві сторінки : index.html та contacts.html. Тоді, щоб потрапити з першої сторінки на другу, треба використати такий код:
<a href=”Contacts.html”>Перехід на сторінку контактів</a> - Посилання-якір. Це посилання допомагає зробити Зміст. Якщо на сайті багато інформації, людина може глянути зміст і натиснути на потрібну тему. Після натиснення її перекине на потрібний абзац. Наприклад:
<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
Атрибут target
За замовчанням ресурси, на які ведуть посилання, відкриваються в тому ж вікні. За допомогою атрибута target можна перевизначити цю дію. Атрибут target може приймати наступні значення:
_blank: відкриття html-документа в новому вікні або вкладці браузера
_self: відкриття html-документа в тому ж фреймі (або вікні)
_parent: відкриття документа в батьківському фреймі, якщо посилання розташована у внутрішньому фреймі
_top: відкриття 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. Має вийти щось на кшталт:
Level UP
1: Змініть колір фону на сторінці зі стилями
2: Після картинок додайте на свій сайт заголовок: “Про виконавців” і трохи інформації про кількох виконавців (можете знайти в інтернеті). Назву групи або виконавців виділіть заголовками (тег <h1> … <h6>).
Тепер зверху додайте Зміст. Може вийти, наприклад, так :
<p>Інформація про виконавця</p>
<a href="#p1">Океан Ельзи</a>
<a href="#p2">Скай</a>
<a href="#p3">imagine dragons</a>Тепер додайте посилання-якоря на відповідні абзаци (як це зробити дивіться вище)
3: Створіть ще одну сторінку songs.html. Додайте туди текст пісні або щось на свій смак. Створіть посилання з основної сторінки на цю сторінку (як це зробити дивіться вище у документі)
