Урок посвящен ссылкам (гиперссылкам) и спискам в HTML. Рассмотрим создание ссылок на внешние и внутренние ресурсы, а также различные типы списков: нумерованные, маркированные и определения.
Ссылки и гиперссылки
Ссылки — неотъемлемая часть гипертекстового документа. Их можно разделить на два типа: ссылки на внешние ресурсы и гиперссылки. Гиперссылка связывает текущий ресурс с другим — веб-страницей, веб-сайтом или файлом на сервере.
Создание гиперссылки осуществляется с помощью тега <a>. Для указания адреса используется атрибут href.
Например, для создания ссылки на файл css.html, расположенный в той же директории, используется следующий код:
<a href=»css.html»>CSS</a>
Путь к файлу может быть относительным (относительно текущего файла) или абсолютным (полное местоположение файла, включая корневой диск и все каталоги).
Помимо href, тег <a> может содержать атрибуты:
- name: имя якоря для внутренней ссылки.
- target: определяет, где откроется ссылка: в текущей вкладке или в новой (_blank). Пример: <a href=»https://google.com» target=»_blank»>Google</a>
Ссылки на изображения
Гиперссылки могут быть привязаны к изображениям. В этом случае тег <a> обертывает тег <img>.
Пример создания ссылки на google.com при клике на изображение:
<a href="https://google.com">
<img src="image/html.png" alt="HTML">
</a>
image/html.png — относительный путь к изображению в папке image.
Якоря (внутренние ссылки)
Якорь — внутренняя ссылка, обеспечивающая переход внутри документа. Это удобно для больших страниц, позволяя быстро перейти к нужному блоку.
Якорь создается с помощью атрибута id внутри элемента, на который нужно сослаться, и атрибута href в теге <a>, указывающего на этот id (с префиксом #).
Пример:
<a href="#pr1">Перейти вниз</a>
<p id="pr1">Текст, на который ведёт ссылка.</p>
HTML-списки
HTML-списки служат для упорядочивания и группировки информации. Существуют три типа списков:
Нумерованные списки
Создаются с помощью тега <ol> (ordered list), элементы списка — с помощью <li> (list item). Атрибуты:
- start: задает начальное значение нумерации.
- type: определяет тип нумерации (арабские цифры, латинские буквы и т.д.).
- value: задает начальное значение для конкретного элемента списка.
Маркированные списки
Создаются с помощью тега <ul> (unordered list), элементы — <li>. Атрибут type определяет тип маркера (диск, круг, квадрат).
Списки определений
Создаются с помощью тега <dl> (description list). Элементы:
- <dt> (description term): термин.
- <dd> (description definition): определение.
Вложенные списки создаются путем размещения одного списка внутри другого.
В уроке рассмотрены создание ссылок, включая гиперссылки на внешние и внутренние ресурсы, а также работа с различными типами списков в HTML. Понимание этих элементов — основа для создания структурированных и удобных веб-страниц. Попробуйте самостоятельно создать несколько HTML-документов, связать их ссылками и создать меню с помощью списков.