курси програмування для дітей безкоштовно

6 Додаємо відео з YouTube та мапи Google Maps на свій сайт

Сьогодні ми створимо сторінку про подорож нашої мрії. Оберіть собі місто чи країну, куди хочете потрапити та створіть сторінку з інформацією про неї. На сторінку ми навчимося додавати відео з YouTube та мапи Google Maps.

Подорож моєї мрії

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

<h1>Аргентина</h1>

2: Додайте менші заголовки

   <h3> Про країну </h3>
   <h3> Де це? </h3>
   <h3> Відео </h3>
   <h3> Що подивитися? </h3>
   <h3> Що поїсти? </h3>
   <h3> Фотогалерея </h3>
   <h3> Корисні посилання </h3>

3: Додайте інформацію в ці розділи

Додаємо відео з Youtube на сторінку

4: В розділ Відео додайте різні відео про ваше місто чи країну з youtube. Додайте 2-3 відео за інструкціями нижче.

Відкрийте відео і виберіть кнопку “Поділитися” і потім “Вставити“:

Кнопка розташована під відео, далі оберіть Вставити

Скопіюйте код, який бачите і вставте його на сторінку в те місце, де має бути відео за вашим планом. Ось і все. Віконце з відео з’явиться на вашій сторінці.

Додаємо мапи Google Maps на сторінку

 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">

Ось приклад того, як може виглядати іконка сайту:

Залишити коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *