1. Теги a, href

Не будемо забувати, що ми готуємо з тебе Java-програміста, тому тобі потрібно вивчити лише 5 тегів.

По-перше, це найважливіший тег, який перетворює текст на гіпертекст – посилання. Для створення посилань у HTML використовується тег <a> (від anchor, якір).

Стандартне посилання має такий вигляд:


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

Де синім виділено текст, який бачить користувач, а зеленим – адресу (посилання), на яку він перейде, якщо клікне по тексту посилання.

А типовий HTML-документ, що містить посилання, виглядає так:


<html>
    Звичайний текст
        <a href="http://javarush.com/about">
            Посилання на щось цікаве
          </a>
     ще якийсь текст
</html>
Вебінар JavaRush

Хоча ні, зазвичай це виглядає так:



<html>
    Звичайний текст  <a href="http://javarush.com/about">Посилання на щось цікаве</a> ще якийсь текст
</html>

Світ не є ідеальним.

2. Тег img та атрибут src

Щоб вставити картинку в HTML-сторінку використовується тег <img> (від слова image). Це одинарний тег: закриваючого тега в нього немає. Загальний вигляд тега:


        <img src="посилання на картинку">

Все дуже просто. Щоб відобразити картинку у твоєму HTML-документі, просто потрібно знати посилання на цю картинку та використовувати тег img. Спробуй, тобі сподобається.

3. Елемент table

Також HTML-сторінка може містити таблицю даних. Але в такому випадку одним тегом не обійдешся. Адже таблиця має заголовок, рядки, колонки і осередки. Для них усіх вигадали свої теги:

  • <table> – сама таблиця;
  • <tr>(table row) – рядок таблиця;
  • <th>(table header) – ячейка заголовка таблиці;
  • <td>(table data) – ячейка таблиці.

Ось як виглядатиме таблиця 3 на 3 html (з додатковим рядком-заголовком)


<table>
    <tr> <th>Прізвище</th> <th>Ім'я</th> <th>По-батькові</th> </tr>
    <tr> <td>Мельник</td> <td>Артем</td> <td>Андрійович</td> </tr>
    <tr> <td>Шевченко</td> <td>Дмитро</td> <td>Петрович</td> </tr>
    <tr> <td>Коваленко</td> <td>Михайло</td> <td>Данилович</td> </tr>
</table>

Хоча зараз таблиці почали використовувати рідко. Справа в тому, що при перегляді сторінки з телефону таблицю може бути краще відобразити інакше (вона просто не міститься на екрані). Але знати, як влаштовані таблиці тобі все одно потрібно.

4. Атрибути id та name

Ще два важливі моменти – це атрибути id та name. Це саме атрибути, а не теги, але вони використовуються дуже часто.

Атрибут id в тега дозволяє вказати для нього ім'я, унікальне в межах всього документа. Це буває корисно, якщо в HTML-документі є JavaScript, який змінює значення або параметри цього тега. Тоді за допомогою унікального id можна звернутися до потрібного тега.

Атрибут name виконує схожу функцію, але його значення має бути унікальним у межах сторінки. Тобто, теоретично може бути кілька тегів з однаковими іменами. Це зроблено для зручнішої роботи з групами елементів.

Наприклад, на сторінці є кілька списків, у кожному з яких можна обрати лише один елемент. Тоді під час вибору нового елемента в списку потрібно скинути вибір інших елементів списку. Але водночас інші списки не потрібно чіпати. Це можна легко зробити, якщо всі елементи одного списку матимуть однакові імена.

У будь-якого тега можуть бути одночасно атрибути id та name. Приклад:


<img id="image123" name="avatar" src="посилання на картинку">