Сьогодні ми створимо сторінку про подорож нашої мрії. Оберіть собі місто чи країну, куди хочете потрапити та створіть сторінку з інформацією про неї. Ми навчимося додавати відео з YouTube та мапи Google Maps на HTML-сторінку.
Подорож моєї мрії
1: Створіть проєкт. Додай головний заголовок
<h1>Аргентина</h1>2: Додайте менші заголовки
<h3> Про країну </h3>
<h3> Де це? </h3>
<h3> Відео </h3>
<h3> Що подивитися? </h3>
<h3> Що поїсти? </h3>
<h3> Фотогалерея </h3>
<h3> Корисні посилання </h3>
3: Додайте інформацію в ці розділи
Додаємо відео з Youtube на html-сторінку
4: В розділ Відео додайте різні відео про ваше місто чи країну з youtube. Додайте 2-3 відео за інструкціями нижче.
Відкрийте відео і виберіть кнопку “Поділитися” і потім “Вставити“:
Кнопка розташована під відео, далі оберіть Вставити
Скопіюйте код, який бачите і вставте його на сторінку в те місце, де має бути відео за вашим планом. Ось і все. Віконце з відео з’явиться на вашій сторінці.
Додаємо мапи Google Maps на html-сторінку
5: В розділ Де це? додамо мапу з посиланням на наше місто або країну. Для цього зайдіть на ttps://www.google.com.ua/maps або знайдіть розділ в гуглі::
Далі в пошуку введіть назву країни або міста і натисніть Enter:
Вам відкриється частина карти, яка представляє те, що ви шукали. Можна її трохи приблизити чи віддалити, щоб виглядало краще
На панелі зліва оберіть “Поділитися” і далі зверху у вікні “Вставити карту“
Скопіюйте запропонований код, обравши “Скопіювати HTML код” і вставте його на сторінку в розділ “Де це?”.
6: В розділ “Що подивитися?” додайте цікаві місця, які плануєте побачити в місті. В розділ “Що поїсти?” додайте страви, які хотіли б спробувати в подорожі. А розділу “Фотогалерея” треба буде додати кілька фото
7: Ось кілька ідей, які можна використати на сторінці :
<!-- Кольорові заголовки і текст-->
<h3 style = "color: red"> Заголовок </ h3>
<p style = "color: blue"> Текст </ p>
<!-- Цей код гарно закруглить картинку:-->
<img src = "картінка.jpg" alt = "Піца" style = "border-radius: 15px">
<!-- А цей код зробить картинку овальної:-->
<img src = "картінка.jpg" alt = "Піца" style = "border-radius: 50%">
<!-- Картинка-фон:-->
<body style="background-image: url('https://dizziness-and-balance.com/treatment/images/airplane.jpg');">
Level Up
1: Додайте корисні посилання в розділ “Корисні посилання”. наприклад сайт вибору літака, готелю або перекладач:
<a href="https://www.kiwi.com/ "> Обираємо рейс для поїздки </a>2: Додайте картинку favicon для відображення вгорі сторінки. Цей код треба буде додати в середину тега <head>. Картинку варто шукати маленьку і квадратну. Можна так і гуглити по слову favicon
<link rel="icon" type="image/x-icon" href="https://icon-library.com/images/music-icon-ico/music-icon-ico-5.jpg">
Ось приклад того, як може виглядати іконка сайту:
