4.1 Теги a, href

Ну, мы все же не забываем, что готовим из тебя Java-программиста, поэтому тебе нужно изучить всего 5 тегов.

Во-первых, это самый важный тег, который превращает текст в гипертекст – ссылка. Для создания ссылок в HTML используется тег <a> (от anchor, якорь).

Стандартная ссылка имеет вид:

<a href="адрес-ссылки">текст ссылки</a>

Где синим отображен текст, который видит пользователь, а зеленым – адрес (ссылка) на которую он перейдет, если кликнет по тексту ссылки.

А типичный HTML-документ, содержащий ссылки выглядит так:

<html>
    Обычный текст
        <a href="http://javarush.com/about">
            Ссылка на что-то интересное
          </a>
     еще какой-то текст
</html>
Java-университет

Хотя нет, обычно это выглядит так:

<html>
    Обычный текст  <a href="http://javarush.com/about">Ссылка на что-то интересное</a> еще какой-то текст
</html>

Мир не идеален.

4.2 Тег img и атрибут src

Для вставки картинки в HTML-страницу используется тег <img> (от слова image). Это одиночный тег, закрывающего тега у него нет. Общий вид тега: 

<img src="ссылка на картинку">

Все очень просто. Для того, чтобы отобразить картинку в твоём HTML-документе, просто нужно знать ссылку на эту картинку и использовать тег img. Попробуй, тебе понравится.

4.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.4 Атрибуты id и name

И еще два важных момента – это атрибуты id и name. Это именно атрибуты, а не теги, но используются они очень часто.

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

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

Например, на странице есть несколько списков в каждом из которых можно выбрать только один элемент. Тогда при выборе нового элемента в списке нужно сбросить выбор остальных элементов списка. Но другие списки при этом не трогать. Это можно легко сделать, если все элементы одного списка будут иметь одинаковые имена.

У любого тега могут быть одновременно атрибуты id и name. Пример:

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