Урок HTML №12 - теги <dl>, <dt> и <dd> списки определений

В данном уроке HTML я расскажу вам о так называемых списках определений, которые являются отдельным видом списков, при вёрстке кода сайта. Списки определений имеют тег <dl>, <dt> и <dd>. Если сравнивать списки определений с другими списками таким как <ul> или <ol>, которые были описаны в предыдущих моих уроках html, то первые всегда состоят из двух частей. Теги списка определений из трёх. В первой части элемента списка записывается определяемый термин, а во второй части - текст в форме словарной статьи, раскрывающий значение этого термина и всё это помещается в один контейнер <dl>.....</dl>.

Для начала давайте разберём эти теги и узнаем их значение и синтаксис.

• <dl> - Definition List, основной тег контейнер,
• <dt> - Definition Term, в данном теге размещается определяемый термин,
• <dd> - Definition Description, в этом теге размещается абзац с определением термина, расположенного в выше размещённом теге <dt>.

Примечание: для тегов <dt> и <dd> закрывающие теги не обязательны.

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

Визуальный результат:

Урок HTML №10 - теги ul и li

При вёрстке html кода сайта часто бывает необходимо создать список чего либо в виде помеченных абзацев или как их принято называть маркеров. Такой список с виду как и обычный текст, но имеет постоянный отступ слева (часто и сверху и снизу тоже) всего абзаца. Маркеры имеют свой персональный и отличный вид, а именно обозначение каждого пункта списка всего этого контейнера (абзаца) точкой или др. стилевыми атрибутами. Для этой цели и используют теги <ul> и <li>. Такой маркированный списокначинается с тега <ul> и заканчивается закрывающим тегом </ul>, оба эти тега давайте назовём контейнером, внутри которого обязательно должны быть теги-маркеры <li></li>, в которых содержится содержимое текста.

Синтаксис тегов маркера таков:

<ul></ul> - определяют контейнер маркированного HTML списка

<li></li> - определяют элементы (пункты) маркированного HTML списка.

Если к тегу <ul> применяется таблица стилей CSS, то элементы <li> наследуют эти свойства.

Как видим из первого примера применения данного тега, вид точек элементов <li> по умолчанию имеют вид форму круглой чёрной точки, но с помощью атрибута type и его свойств, таких как:

disc - кружок

circle - окружность

square - квадрат

маркированному списку можно задать другой внешний вид, например:

Урок HTML №9 - ссылки (гиперссылки)

В этом уроке по HTML для начинающих, я вам расскажу о гипертекстовых ссылках. На гипертекстовых ссылках основаны, практически все web документы. Основное предназначение гиперссылок, это быстрый переход ( обычно одним кликом мыши), на другую страницу, какого либо сайта или web ресурса.

Если переход по ссылке идёт на этот же web ресурс, то адрес гиперссылки предпочтительнее задавать относительный, например: /papka/document.html

Если переход предназначен на сторонний web сайт, то адрес ссылки обязательно нужно делать полный т.е. абсолютный, например: http://адрес сайта/papka/document.html

Вместо "Видимого текста ссылки" может быть практически любой элемент HTML, чаще всего это либо текст, либо изображение.

Для создания ссылки используется дескриптор <a>, полный синтаксис данного дескриптора выглядит следующим образом:

Пример 1:  Видимый текст ссылки

По умолчанию при клике мышкой по такой ссылке, web ресурс откроется в этом же окне броузера, для того что бы html-страница назначения открылась в новом окне броузера (что чаще более предпочтительнее) нужно к дескриптору <a> применить атрибут target c константой _blank. В наглядном примере, это выглядит так:

Пример 2:  Видимый текст ссылки

В гиперссылках иногда бывает необходимо указать её назначение или описание-подсказку, но так что бы текст описания изначально был скрыт и появлялся тогда, когда к ссылке подносили курсор мышки. Для этого в дескрипторе ссылки <a> используют атрибут title, пример:

Пример 3:  Видимый текст ссылки