Створюємо візуальний словник у HTML

Цього разу ми розберемо таблиці у HTML і створимо візуальний словник. Користь візуальних словників у вивченні іноземної мови важко переоцінити. За допомогою них можна буде вчити нові слова і відразу запам’ятовувати пов’язану картинку. Наш мозок працює таким чином, що нам простіше пов’язувати нове слово з зображенням або з емоцією, тоді воно надовше залишається в пам’яті.

1: Створіть новий проєкт. Оберіть, для якої мови буде ваш словничок і також оберіть тему для слів. Додайте заголовок :

<h1>Візуальний словник</h1>

2: Створіть таблицю за допомогою тега table та запишіть туди назви стовпчиків (дні тижня). Можна замість <table>поставити  <table border=”1px”>, щоб було видно лінії таблиці на вашій html-сторінці.

<table border="1px">

  <tr>
    <th>Слово</th>
    <th>Підказка-картинка</th>
    <th>Переклад</th>
  </tr>

  <tr>
<!--Тут перший рядок таблиці-->
  </tr>

  <tr>
<!--Тут другий рядок таблиці-->
  </tr>

</table>

3: Давайте додамо перше слово, картинку до нього і його переклад. Для цього замініть коментар <!–Тут перший рядок таблиці–> на  схожий текст:

    <tr>

      <td>excited</td>
      <td>тут картинка</td>
      <td>схвильований, радий </td>

    </tr>

4: Додамо картинку:

    <tr>
      <td>excited</td>
      <td>
        <img src="https://images.healthshots.com/healthshots/en/uploads/2021/01/25132023/overexcited.jpg" height="100px" width="100px" alt="excited">
      </td>
      <td>схвильований, радий </td>
    </tr>

Роздивіться, як і де знаходяться теги таблиці. Будьте уважні, щоб випадково їх не стерти і тримати текст у потрібних комірках таблички.

5: Додамо ще слова. Для цього замініть <!–Тут другий рядок таблиці–> на  нове слово разом з картинкою і перекладом:

    <tr>
      <td>shocked</td>
      <td>
        <img src="https://englishlib.org/dictionary/img/wlibrary/s/604797d0146187.90397760.jpg" height="100px"
          width="180px" alt="excited">
      </td>
      <td>шокований </td>
    </tr>

6: Додайте ще рядки до своєї таблиці. Зробіть словник для 10 слів.

7 (Додаткове): Додайте одне за одним стилі у файл style.css. Можете прописувати по одному рядку (що в середині селектора table) і дивитися, як кожен стиль впливає на таблицю:

table{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid green;
  border-collapse: collapse;
}


td {
  text-align: center; 
  vertical-align: middle;
  background-color: #6ef2b4 ;
}
th {
  background-color: #24a84b;
}

Level Up!

1: Додайте клас невидимості до колонки з перекладом слів, наприклад так: 

<td class="invisible">шокований </td>

Опишіть цей клас у файлі стилів:

.invisible{
  color: rgba(0,0,0,0);
}
.invisible:hover{
  color: #2450a8;
}

Що змінилося ? А що буде, якщо навести мишку на місце, де було слово? Додайте точно такий же ефект до всіх перекладів слів

2: Додайте можливість ховалися для картинок (картинку видно доки не наведуть мишку. Якщо мишку навели – картинку показуємо). Ось тут описано, як це зробити:

img {
  opacity: 😎;
}
img:hover {
  opacity: 😎;
}

Замість 😎 треба буде підставити відповідні цифри.

opacity – властивість прозорості картинки. Якщо 1- картинку видно, якщо 0.5 – картинка трохи прозора, але відображається, якщо 0 – картинка повністю прозора.

:hover – властивість, яка працює тільки при наведенні миші.

Ось тут описано як і чому це працює.

3: До вас на день народження прийшли різні люди, уявіть, що прийшло 16 людей, серед них є ваші друзі, але є і знаменитості. Розсадіть всіх гостей за 4 столи. Створіть таблицю з 4-рма колонками, в кожній по 4 гості (див. приклад внизу). Імена гостей обирайте самі

 Приклад: