4.1 Теги a, href
Ну, мы все же не забываем, что готовим из тебя Java-программиста, поэтому тебе нужно изучить всего 5 тегов.
Во-первых, это самый важный тег, который превращает текст в гипертекст – ссылка. Для создания ссылок в HTML используется тег <a> (от anchor, якорь).
Стандартная ссылка имеет вид:
<a href="адрес-ссылки">текст ссылки</a>
Где синим отображен текст, который видит пользователь, а зеленым – адрес (ссылка) на которую он перейдет, если кликнет по тексту ссылки.
А типичный HTML-документ, содержащий ссылки выглядит так:
<html>
Обычный текст
<a href="http://javarush.com/about">
Ссылка на что-то интересное
</a>
еще какой-то текст
</html>
Хотя нет, обычно это выглядит так:
<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="ссылка на картинку">
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ