Type disk html что это

HTML тег <ul>

В языке разметки гипертекста HTML имеется тег <ul> , используемый для создания маркированных списков. Он поддерживается всеми современными браузерами и позволяет выводить элементы в порядке, не нуждающемся в нумерации. Например, очень часть с помощью него выводятся пункты меню и все что касается списков на странице: блюд, продуктов, оборудования, инструментов и многое другое, что нужно перечислить без указания на приоритетность того или иного пункта.

Синтаксис тега <ul>

Этот код преобразуется в маркированный список на сайте:

• Элемент #1
• Элемент #2
• Элемент #3
• .

Тег <ul> требует обязательного использования закрывающего тега </ul> .

Для формирования элементов списка используется парный тег <li> .. </li> . Между открывающим и закрывающим тегами располагаются отдельные слова, фразы, абзацы, изображения, куски кода и многое другое, являющееся содержимым маркированного списка.

Что может являться содержимым маркированного списка?

Это могут быть различные тексты, включая одиночные слова, фразы и абзацы, изображения, вложенные списки, куски php-кода и многое другое, нуждающееся в простой маркировке.

Каждый элемент маркированного списка отступает по умолчанию на 40 пикселей вправо. Используя стили CSS, мы можем изменить отображение данного списка по своему усмотрению. Тег <ul> является блочным, поэтому он занимает всю доступную для него область, ограниченную краем экрана, рамкой таблицы или другими элементами страницы.

Допускается вложения «список в списке»

Атрибуты и свойства тега <ul>

Широко распространённым атрибутом тега <ul> является атрибут type , указывающий на то, как будет выглядеть маркер списка. Может принимать следующие значения

1. type=»disc» — маркер в виде закрашенного кружка (это значение стоит по умолчанию). Пример с диском был чуть выше.

2. type=»circle» — маркер в виде прозрачного кружка

А вот как это выглядит на странице:

• Элемент #1
• Элемент #2

3. type=»square» — маркер в виде квадратика

А вот как это выглядит на странице:

• Элемент #1
• Элемент #2

В CSS тип маркера задается с помощью атрибута list-style-type :

Рассмотрим какие значения может принимать list-style-type :

• disc — маркер в виде кружка (пример был выше)
• circle — маркер в виде прозрачного кружка (пример был выше)
• square — маркер в виде квадратика (пример был выше)
• decimal — маркер в виде нумереннового списка арабскими цифрами: 1, 2, 3, .
• decimal-leading-zero — маркер в виде нумереннового списка арабскими цифрами с нулем в начале: 01, 02, 03, .
• lower-roman — маркер в виде нумереннового списка римским алфавитом маленькими буквами: i, ii, iii, iv, v
• upper-roman — маркер в виде нумереннового списка римским алфавитом большими буквами: I, II, III, IV, V
• lower-latin — маркер в виде списка латинским алфавитом маленькими буквами: a, b, c, d, .
• upper-latin — маркер в виде списка латинским алфавитом большими буквами: A, B, C, D, .
• lower-greek — маркер в виде списка греческим алфавитом маленькими буквами
• upper-greek — маркер в виде списка греческим алфавитом большими буквами

Атрибут можно назначить как самому тегу <ul> , так и тегам <li> . При задании атрибута тегу <ul> все элементы списка будут отображаться так, как на это указывает атрибут. Но мы можем задать тому или иному элементу своё отображение. Пример на рисунке:

Код при этом выглядит так:

А так это выглядит на странице:

• Элемент #1
• Элемент #2
• Элемент #3

Изменение маркеров тега <ul> с помощью CSS

Элементы маркированного списка, создаваемые тегом <ul> , могут маркироваться произвольными изображениями. Для изменения типа маркера используется CSS. Например

А так это выглядит на странице:

• Элемент #1
• Элемент #2
• Элемент #3

C помощью CSS мы можем задать и другие типы отображения маркеров. Но нужно помнить, что при задании какого-либо стиля тегу <ul>, он распространяется на все элементы списка.

Type disk html что это

Тег <ul> (от англ. unordered list — неупорядоченный список) устанавливает маркированный (неупорядоченный) список.

Каждый пункт списка должен начинаться с элемента <li> .

Синтаксис¶

Закрывающий тег обязателен.

Атрибуты¶

Для этого элемента доступны универсальные атрибуты.

• circle

• disc

• square

• Четвертый тип маркера был определен в интерфейсе WebTV, но не все браузеры поддерживают его: triangle .

Если этот элемент отсутствует, и если к элементу не применяется свойство CSS list-style-type , пользовательский агент выбирает тип маркера в зависимости от уровня вложенности списка.

Списки

В языке HTML предусмотрен специальный набор тегов для представления информации в виде списков. Списки являются одним из наиболее часто употребляемых форм представления данных как в электронных документах, так и в печатных. Со списками мы встречаемся практически ежедневно, — это может быть список необходимых покупок в магазине, учеников в классе или просто дел, которые необходимо выполнить. Возможность организации списковых структур имеется во многих текстовых редакторах, в частности, мощный текстовый процессор Microsoft Word обладает удобными средствами форматирования списков различного вида (возможности создания HTML-списков при помощи Microsoft Word обсуждаются в главе 8). Приведем ряд случаев, для которых использование списков довольно удобно:

Объединение фрагментов информации в единую структуру для придания удобочитаемого вида.

Заметим, что приведенные выше пункты как раз и организованы в виде списковой структуры.

В языке HTML предусмотрены следующие основные типы списков: маркированный, нумерованный и список определений. Для реализации списков различных типов используются следующие тэги: <UL>, <OL>, <DL>, <DIR>, <MENU>. С помощью различных типов встроенных в документ списков могут быть реализованы самые разные возможности, описанию которых и посвящена данная глава. Рассматриваются особенности построения списков различных типов, а также применения вложенных друг в друга списков.

Одним из типов списков, реализованных в языке HTML, является маркированный список. Иначе списки такого типа называют ненумерованными или

неупорядоченными. Последнее название часто используется как формальный перевод названия соответствующего тега <UL>, с помощью которого и организуются списки такого типа в HTML-документах (UL — Unordered List, неупорядоченный список).

В маркированном списке для выделения его элементов используются специальные символы, называемые маркерами списка (часто их называют буллетами, что является формальным озвучением английского термина bullet — пуля). Вид маркеров списка определяется браузером, причем при создании вложенных списков браузеры автоматически разнообразят вид маркеров различного уровня вложенности.

Для создания маркированного списка необходимо использовать тэг-контейнер <UL> </UL>, внутри которого располагаются все элементы списка. Открывающий и закрывающий тэги списка обеспечивают перевод строки до и после списка, отделяя, таким образом, список от основного содержимого документа, поэтому здесь нет необходимости использовать теги абзаца <P> или принудительного перевода строки <BR>.

Каждый элемент списка должен начинаться тэгом <LI> (LI — List Item, элемент списка). Тег <LI> не нуждается в соответствующем закрывающем тэге, хотя его наличие в принципе не возбраняется. Браузеры обычно при отображении документа начинают каждый новый элемент списка с новой строчки.

Приведенных сведений достаточно для построения элементарного маркированного списка. Приведем пример HTML-документа, использующего маркированный список, отображение которого браузером показано на рис. 2.1.

<TITLE>Пример маркированного списка</TITLE>

Рис. 2.1. Отображение браузером маркированного списка

Заметим, что кроме элементов списка, отмечаемых тэгом <LI>, могут присутствовать и другие HTML-элементы. В приведенном выше примере одним из таких элементов является обычный текст, не являющийся пунктом списка, а играющий роль его заголовка.

Примечание

В некоторых учебниках по языку HTML встречается указание, что для задания заголовка списка следует применять тэг-контейнер <LH> (LH — List Header, заголовок списка). В настоящее время этот тег не распознается ни одним из распространенных браузеров и не входит в спецификацию HTML. Таким образом, его применение становится бессмысленным, хотя и не приведет к каким-либо ошибкам.

В тэге <UL> могут быть указаны два параметра: COMPACT и TYPE.

Параметр COMPACT записывается без значений и применяется для указания браузеру, что данный список следует выводить в компактном виде. Например, может быть уменьшен шрифт или расстояние между строчками списка и т. д.

Примечание

В настоящее время наличие параметра COMPACT в тэге <UL> никак не влияет на отображение списков ведущими браузерами. Поэтому применение данного параметра бессмысленно, тем более что его употребление не рекомендуется спецификацией HTML 4. 0 .

Параметр TYPE может принимать следующие значения: disc, circle и square. Этот параметр используется для принудительного задания вида маркеров списка. Конкретный вид маркера будет зависеть от используемого браузера. Типичными вариантами отображения являются следующие:

TYPE = disc — маркеры отображаются закрашенными кружками; TYPE = circle — маркеры отображаются не закрашенными кружками; TYPE = square — маркеры отображаются закрашенными квадратиками. Пример записи: <UL TYPE = circle> .

Значением, используемым по умолчанию, является TYPE = disc. Для вложенных маркированных списков на первом уровне по умолчанию используется значение disc, на втором — circle, на третьем и далее — square. Именно так делается в последних версиях браузеров Netscape и Internet Explorer. Заметим, что иные браузеры могут иначе отображать маркеры. Например, в спецификации HTML 4.0 для вида маркера, отображаемого при значении TYPE = square, указывается незакрашенный квадратик (square outline).

Параметр TYPE с теми же значениями может употребляться для указания вида маркеров отдельных элементов списка. Для этого параметр TYPE с соответствующим значением разрешено указывать в тэге элемента списка <LI>.

Пример записи: <LI TYPE = circle> .

Примечание

Браузеры по-разному интерпретируют указание вида маркера для отдельного элемента списка. Браузер Netscape изменяет вид маркера для данного и всех последующих, пока не встретится очередное переопределение вида маркера. Браузер Internet Explorer изменяет вид маркера только для данного элемента.

Графические маркеры списка

В качестве маркеров списка можно использовать графические изображения, что широко применяется для создания привлекательных, красиво оформленных HTML-документов. На самом деле такая возможность не предоставляется непосредственно языком HTML, а реализуется несколько искусственно. Это вовсе не означает, что так делать не рекомендуется или предосудительно, а лишь означает, что здесь не будут применяться никакие специальные языковые конструкции HTML.

Чтобы понять идею, необходимо разобраться в механизме реализации списков на HTML-страницах. Оказывается, что тег списка <UL> (как, впрочем, и теги списков других типов, рассматриваемых ниже) выполняет единственную задачу — указывает браузеру, что вся информация, располагаемая после данного тега должна отображаться со сдвигом вправо (отступом) на некоторую величину. Теги <LI>, указывающие на отдельные элементы списка, обеспечивают вывод стандартных маркеров элементов списка.

Если же нам требуется построить список с графическими маркерами, то можно вообще обойтись без тегов <LI>. Достаточно будет перед каждым элементом списка вставить желаемое графическое изображение. Единственной задачей, которую нужно при этом решить, будет отделение элементов списка друг от друга. Для этого можно использовать теги абзаца <P> или принудительного перевода строки <BR>. Пример реализации списка с графическими маркерами, отображение которого представлено на рис. 2.2, показан ниже:

Type disk html что это

1 Створення та форматування таблиць

2 Призначення та різновиди списків

3 Створення та робота зі списками

Літратура: Л-5 стор. 47-54, Л-7 стор. 32-39

Табличні теги мови HTML дозволяють подавати дані у зручній для сприйняття формі.

Основним структурним елементом таблиці є комірка, яка містить елемент даних таблиці або заголовок стовпчика даних. Логічно пов’язані комірки групуються разом у рядок таблиці. Рядки, в свою чергу, складають таблицю.

Для створення таблиці використовують тег <TABLE> і відповідний йому закриваючий тег </TABLE>. Між ними розташовані всі теги, необхідні для створення таблиці.

Комірка, яка містить елемент даних, задається парою тегів <TD> і </TD>.

Теги для побудови таблиці

визначає початок таблиці

визначає рядок таблиці

визначає елемент даних таблиці

Тег <TABLE> може мати атрибут рамки BORDER=n, який створює рамку шириною n пікселів. За замовчуванням таблиця не окреслена рамкою. У тегу <TABLE> можна використати атрибут BORDERCOLOR для кольору рамки таблиці. Атрибут BORDERCOLOR дорівнює шістнадцятковому RGB або англійській назві кольору.

У тегу <TD> можна використати атрибут BGCOLOR, який задає колір фону комірки таблиці.

Таблиці будуються з рядків, між тегами <TR> і </TR> розташовуються всі елементи, необхідні для створення рядка таблиці.

Для створення заголовків стовпчиків даних використовуються теги <TH> і </TH>, текст в яких автоматично виводиться жирним шрифтом з вирівнюванням по центру.

Атрибут СОLSPAN (Column Span) дозволяє здійснювати об’єднання стовпчиків. Якщо необхідно створити яку-небудь комірку, ширшу, від верхньої чи нижньої, за допомогою атрибута СОLSPAN= її можна розтягнути над будь- якою кількістю звичайних комірок.

<TD BGCOLOR=WHITE COLSPAN=2>

Приклад застосування атрибута об’єднання комірок

Атрибут UNIT= тега <ТАВLЕ> визначає одиниці вимірювання, які використовуються при зазначенні розмірів як всієї таблиці, так і окремих стовпчиків. Атрибут UNIТ= може приймати такі значення:

— UNIТ=ЕN — це значення надається за замовчуванням і визначає одиницю вимірювання, яка дорівнює еn-пробілу. Еn-пробіл — це друкарська одиниця вимірювання, яка дорівнює ширині літери <n>. Реальний розмір пробілу залежить від обраного шрифту. Як правило, еn-пробіл дорівнює половині розміру шрифта;

— UNIТ=RELATIVE — використовується для визначення відносної ширини стовпчиків у відсотках від загальної ширини таблиці;

— UNIТ=РIXELS – це значення використовується, якщо необхідно точно визначити ширину стовпчика на екрані. Наприклад, тег <ТАВLЕ UNIТ=РIXELS WIDTH=340> сформує таблицю шириною 340 пікселів.

Атрибут СЕLLPADDING= визначає ширину порожнього простору між вмістом комірки і її межами, тобто задає поля всередині комірки.

<TABLE BORDER CELLPADDING=20>

Зображення у таблиці

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

Управління кольором елементів таблиці

Атрибути управління кольором: BORDERCOLOR – колір рамки і BGCOLOR – колір фону, використовуються для тегів : <TABLE>, <TR>, <TH>, <TD>. Відповідно областю їх дії може бути вся таблиця, рядок або окрема комірка.

<TABLE BORDER BORDERCOLOR=RED BGCOLOR=YELLOW>. </TABLE> — колір всієї таблиці.

<TR BORDERCOLOR=RED BGCOLOR=YELLOW></TR> — колір рядка.

<TD BORDERCOLOR=RED BGCOLOR=YELLOW></TD> — колір комірки.

За допомогою таблиць можна створювати виділені цитати. Цитата вміщується в таблицю між двома горизонтальними лініями. Завдяки атрибуту

ALIGN тегу <TABLE> текст, який слідує за таблицею, починає її “обтікати”. Основний текст розташовується праворуч від таблиці і “обтікає” цитату після того, як перевищить її по висоті. Для виступів тексту від меж сторінки можна застосувати тег <BLOCKQUOTE> (навіть декілька разів). Атрибут BORDER в даному випадку використовувати не слід.

Списки реалізують зручну можливість представлення інформації в документах.

Елементи списків всіх типів мають відступ від лівої межі екрана.

Тип Теги списку Теги елементів

Список описів <DL>…</DL> <DD>…</DD> — назва терміну

За замовчуванням елементи впорядкованого списку нумеруються цілими числами, починаючи з 1. До тегу нумерованого списку <OL> існує атрибут TYPE. Встановлюючи TYPE рівним “А”, “а”, “І”, “і”, можна змінити схему нумерації на великі літери, малі літери, великі або малі римські цифри відповідно.

Атрибут START дозволяє задавати початкове значення для нумерації (за замовчуванням START=1, але можна вказати будь-яке додатне число).

Атрибут TYPE тега <UL> дозволяє змінювати вигляд маркера

TYPE=disk — маркер має вигляд диска; TYPE=circle — маркер має вигляд кола; TYPE=square — маркер має вигляд квадрата. ПРИКЛАД (нумерований список)