42556

Организация текста внутри HTML-документов с помощью списков

Лабораторная работа

Информатика, кибернетика и программирование

Пунктами списка могут быть как элементы уровня текста так и элементы уровня блока за исключением заголовков H1H6 и элементов DDRESS. Пунктами списка могут быть также другие списки. UL ненумерованные списки Для создания ненумерованного списка используется элемент UL. Для этого элемента обязательны открывающий и закрывающий теги которые обеспечивают перевод строки до и после списка отделяя список от остального текста.

Русский

2013-10-30

87.5 KB

3 чел.

Лабораторная работа №3. Организация текста внутри HTML-документов с помощью списков

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

• Для создания оглавления документа, пункты которого указывают на конкретные разделы.

• Для классификации (ранжирования) элементов массива однородной информации. Например, протокол соревнований.

• Для расположения элементов в порядке убывания или возрастания по какому-то параметру, например, по возрасту.

• Когда перечисление равнозначных элементов информации занимает много места и плохо воспринимается. Например, список интересов человека.

• Описание пошагового процесса. Например, инструкция, определяющая порядок действий.

Форматы списков

Существует несколько форматов списков, позволяющих выделять фрагменты информации в тексте. Пунктами списка могут быть как элементы уровня текста, так и элементы уровня блока, за исключением заголовков (H1-H6) и элементов ADDRESS. Пунктами списка могут быть также другие списки.

UL (ненумерованные списки)

Для создания ненумерованного списка используется элемент UL. Для этого элемента обязательны открывающий и закрывающий теги, которые обеспечивают перевод строки до и после списка, отделяя список от остального текста. Для маркировки заголовка или названия списка применяется элемент языка LH (от английского List Heading). Для маркировки отдельного элемента списка применяется элемент языка LI (от английского List Item).
Ненумерованные или неупорядоченные (от английского Unordered Lists) списки имеют вид записи:

<UL>

    <LH>Название списка</LH>

    <LI>Первый пункт списка

    <LI>Второй пункт списка

    ....

</UL>

Тип маркировки (метки) элемента списка определяется атрибутом type. Допустимые значения атрибута и, соответственно, символы маркировки диск, круг, квадрат:

<UL type = "disc|circle|square">


Для всего списка.

<LI type = "disc|circle|square">


Этот и последующие элементы, в теги которых включен атрибут type.

Значение атрибутов в элементах языка HTML рекомендуется записывать строчными буквами и заключать в кавычки.

Например, type="disc".

Для записи списка в более компактном виде может использоваться атрибут compact, практически не влияющий на отображение списка браузером. Например:

Компактный список:

<UL compact>

    <LH>Название списка</LH>

    <LI>Первый пункт списка

    <LI>Второй пункт списка

    ....

</UL>

Примеры списков:

1. Стандартный ненумерованный список

Запись списка в символах языка HTML:

<UL type="square">

    <LH>Конфигурация компьютера:</LH>

    <LI>Процессор

    <LI>ОЗУ

    <LI>Винчестер     

</UL>

2. Компактный ненумерованный список

Запись списка в символах языка HTML:

<UL compact>

    <LH>Конфигурация компьютера:</LH>

    <LI>Процессор 

    <LI type="square">ОЗУ 

    <LI>Винчестер     

</UL>

Тип маркировки второго элемента списка переопределен с помощью атрибута type.

OL (нумерованные списки)

Для создания нумерованного списка используется элемент OL. Для этого элемента обязательны открывающий и закрывающий теги, которые обеспечивают перевод строки до и после списка, отделяя список от остального текста. Для маркировки заголовка или названия списка применяется элемент языка LH. Для маркировки отдельного элемента списка, как и для ненумерованного списка, применяется элемент языка LI.  

Нумерованные или упорядоченные (от английского Ordered Lists) списки имеют вид записи:

<OL>

    <LH>Название списка</LH>

    <LI>Первый пункт списка

    <LI>Второй пункт списка

    ....

</OL>

Тип нумерации элемента списка определяется атрибутом type.

<OL type = "1|A|a|I|i">

Для всего списка.

<LI type = "1|A|a|I|i">

Этот и последующие элементы, в теги которых включен атрибут type.

Пять возможных способов нумерации с помощью атрибута type в открывающем теге <OL> или <LI>:

  •  type=1 Стандартная цифровая нумерация - 1,2,3..
  •  type="А" Прописные буквы - A, B, C, ...
  •  type="a" Строчные буквы - a, b, c, ...
  •  type="I" Римские цифры - I, II, III, IV...
  •  type="i" Строчные римские цифры - i, ii, iii, iv, ...

Атрибут start позволяет начать нумерацию списка не с единицы. Например:
<OL start=4>

Значение атрибута value элемента LI позволяет изменить номер данного элемента списка. При этом изменяется и нумерация всех последующих элементоа списка. Например:


<LI value=5>

Атрибут value может заменять атрибут start, если включен в первый элемент списка.

Для записи списка в более компактном виде может использоваться атрибут compact. Например:

<OL compact>

    <LH>Название списка<LH>

    <LI>Первый пункт списка

    <LI>Второй пункт списка

    ....

</OL>

Примеры списков:

1. Стандартный нумерованный список

Запись списка в символах языка HTML:

<OL type=A>

    <LH>Модели процессоров:</LH>

    <LI>Celeron 2,4 GHz

    <LI type=1>Celeron 2,5 GHz

    <LI>Celeron 2,7 GHz     

</OL>

Тип нумерации второго элемента списка переопределен с помощью атрибута type.

Запись того же списка с другим типом нумерации элементов и началом нумерации списка с 4 за счет использования в открывающем теге списка атрибута start с соответствующим значением:

<OL type=1 start=4>

    <LH>Модели процессоров:</LH>

    <LI>Celeron 2,4 GHz

    <LI >Celeron 2,5 GHz

    <LI>Celeron 2,7 GHz     

</OL>

Запись того же списка с началом нумерации списка с 4 за счет использования в первом элементе списка атрибута value с соответствующим значением:

<OL type=1>

    <LH>Модели процессоров:</LH>

    <LI value=4>Celeron 2,4 GHz

    <LI >Celeron 2,5 GHz

    <LI>Celeron 2,7 GHz     

</OL>

2. Компактный нумерованный список

Запись списка в символах языка HTML:

<OL compact>

    <LH>Модели процессоров:</LH>

    <LI>Celeron 2,4 GHz

    <LI value=5>Celeron 2,5 GHz

    <LI>Celeron 2,7 GHz     

</OL>

Нумерация второго и последующих элементов списка переопределена с помощью атрибута value.

DL (списки определений)

В списке определений для каждого пункта предоставляется не одна, а две строки. Для написания каждого пункта списка применяются два элемента: DT - определяемый термин (Definition Term) и DD - описание определения (Definition Data).

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

<DL>

     <LH>Название списка</LH>

     <DT>Название термина 1

     <DD>Определение термина 1

     <DT>Название термина 2

     <DD>Определение термина 2      

     ....

</DL>

Компактный список определений:

<DL compact>

     <LH>Название списка</LH>

     <DT>Название термина 1

     <DD>Определение термина 1

     <DT>Название термина 2

     <DD>Определение термина 2   

    ....

</DL>

Известное использование списка определений - словарь.


Примеры списков определений:

1. Стандартный список определений

Запись списка определений в символах языка HTML:

<DL>

     <LH> <B>Словарь терминов<B/></LH>

     <DT>Процессор

     <DD>Арифметически-логическое устройство, выполняющее программы

     <DT>ОЗУ

     <DD>Оперативное запоминающее устройство

     <DT>Винчестер  

     <DD>Накопитель информации на жестком диске    

</DL>

 

2. Компактный список определений

Запись компактного списка определений в символах языка HTML:

<DL compact>

     <LH> <B>Словарь<B/> </LH>

     <DT>Disc

     <DD>Диск 

     <DT>Circle

     <DD>Круг 

     <DT>Square

     <DD>Квадрат

</DL>

MENU (меню)

Запись меню ( в сущности маркированного списка ) в символах языка HTML:

<MENU>

    <LH>Название меню<LH>

    <LI>Первый пункт меню

    <LI>Второй пункт меню

    ....

</MENU>

Тип маркировки (метки) элемента меню определяется атрибутом type. Допустимые значения атрибута и, соответственно, символы маркировки - диск, круг, квадрат:

<UL type = "disc|circle|square">


Для всего списка.

Возможно переопределение типа маркера в элементе LI:
<LI type = "disc|circle|square">


Этот и последующие элементы, в теги которых включен атрибут type.

Компактное меню:

<MENU compact>

    <LH>Название меню<LH>

    <LI>Первый пункт меню

    <LI>Второй пункт меню

    ....

</MENU >

Пример записи меню в символах языка HTML:

<MENU>

    <LH>Меню<LH>

    <LI>F1-справка

    <LI type="square">F4-редактор

    <LI type="circle">F5-копирование 

</MENU>

DIR (каталог)

Запись каталога ( в сущности тоже маркированного списка ) в символах языка HTML:

<DIR>

    <LH>Название каталога<LH>

    <LI>Первый пункт каталога

    <LI>Второй пункт каталога

    ....

</DIR>

Тип маркировки (метки) элемента каталога определяется атрибутом type в открывающем теге <DIR>. Допустимые значения атрибута и, соответственно, символы маркировки те же, что и для элемента MENU.

Возможно переопределение типа маркера в элементе LI:
<LI type = "disc|circle|square">

Этот и последующие элементы, в теги которых включен атрибут type.

Компактный каталог:

<DIR compact>

    <LH>Название каталога<LH>

    <LI>Первый пункт каталога

    <LI>Второй пункт каталога

    ....

</DIR >

Пример записи каталога в символах языка HTML:

<DIR>

    <LH>Каталог<LH>

    <LI>Имя файла1

    <LI  type="square">Имя файла2

    <LI>Имя файла3

</DIR>

Вложенные списки

Каждый пункт списка может представлять собой самостоятельный список. Вложение списков в списки создает несколько уровней информации. Можно вкладывать друг в друга разные типы списков. Каждый внутренний список должен иметь открывающий и закрывающий теги UL или OL.
Пример вложенных списков:

Конфигурация компьютера 

  1.  Процессор
    •  Celeron
    •  Pentium
  2.  ОЗУ
    •  256 Мб
    •  512 Мб
  3.  Винчестер
    •  40 Гб
    •  80 Гб

Запись этого примера в символах HTML:

<OL><LH><B>Конфигурация компьютера</B></LH>

 <LI>Процессор

    <UL>

       <LI>Celeron

       <LI>Pentium

    </UL>

 <LI>ОЗУ 

    <UL>

       <LI>256 Мб 

       <LI>512 Мб 

    </UL>

 <LI>Винчестер 

    <UL>

       <LI>40 Гб 

       <LI>80 Гб 

    </UL>

</OL>

Задание к лабораторной работе

Создать HTML-документ.

Применить к тексту в документе форматирование в вида нумерованного списка, ненумерованного списка, списка определений, формат меню, каталога и создать структуру содержащую вложенные списки.


 

А также другие работы, которые могут Вас заинтересовать

39341. Проектирование общественное здание 299 KB
  Для каркасно-панельных зданий применяют эффективные конструкции – сборные крупные панели, объемные блоки, каркасный монолит с применением высокопрочного и легкого бетона и других экономичных материалов, обеспечивающих высокую степень заводской готовности, которые снижают материалоемкость, стоимость производства, увеличивают комфортабельность, долговечность зданий и снижают эксплутационные расходы.
39342. Проектирование микропроцессорной системы на основе микроконтроллера 1886ВЕ2 127 KB
  Разработка технического проекта Основу структурной схемы микроконтроллера образует внутренняя двунаправленная 8битная шина которая связывает между собой все основные узлы и устройства: резидентную память АЛУ блок регистров специальных функций устройство управления и порты ввода вывода. 8битное АЛУ может выполнять арифметические операции сложения вычитания умножения и деления; логические операции И ИЛИ исключающее ИЛИ а также операции циклического сдвига сброса инвертирования и т. Простейшие операции автоматически образуют...
39343. Социальные явления, отношения, поведение и деятельность людей в социальной сфере 52.12 KB
  Для достижения целей курсовой работы были поставлены задачи: Проанализировать сущность и характерные черты менеджмента Изучить понятие и значение организации Изучить составные части управления в социальной сфере Глава 1.13]Социальный менеджмент это область управления формирующая у будущих специалистов теоретические и практические навыки позволяющие эффективно воздействовать на социальные процессы влиять на создание благоприятной для человека социальной среды проектировать социальные организации что в свою очередь обеспечивает...
39344. СИНТЕЗ КОМБІНАЦІЙНОЇ СХЕМИ. СХЕМОТЕХНІКА ПРИСТРОЇВ НА ОПЕРАЦІЙНИХ ПІДСИЛЮВАЧАХ 71.35 KB
  ОУ майже завжди використовуються в схемах з глибокої негативним зворотним звязком яка завдяки високому коефіцієнту підсилення ОУ повністю визначає коефіцієнт передачі отриманої схеми.2 Активний алгебраїчний суматор Мікросхеми суматорів призначені для підсумовування двох вхідних двійкових кодів.3 Розробка схеми розрахунки параметрів та аналіз На базі схеми з багатопельовим ЗЗ схема Рауха синтезувати схему фільтра верхніх частот належним вибором двополюсників.1 – схема Рауха Складемо граф схеми Рауха.
39345. Правонарушение и юридическая ответственность 51.28 KB
  Материальная ответственность это вид юридической ответственности состоящий в обязанности одной из сторон трудового договора контракта возместить в соответствии с законодательством материальный ущерб причиненный другой стороне этого договора. Совокупность этих условий называется содержанием договора. Условия договора делятся на три группы: обычные случайные и существенные. Обычные условия – это условия которые на практике включаются в содержание данного договора однако их отсутствие не влияет на его действительность.
39346. Расчет электронного логического автомата 6.39 MB
  Логический автомат – это устройство автоматически выполняющее некоторые функции для задания которых используется аппарат алгебры логики. Функции комбинационной схемы управления КСУ: В двоичном коде функции КСУ представлены в табл. Функции КСУ в двоичном коде Число
39347. Проектирование статического регулятора с промежуточным усилителем и последовательным корректирующим устройством 3.29 MB
  Составление функциональной схемы замкнутой САУ Рис. Обобщенная функциональная схема САУ работающей по отклонению. Принцип управления по отклонению используется в замкнутых САУ и реализуется с помощью отрицательной обратной связи по регулируемой величине. Обобщенная функциональная схема САУ работающего по отклонению представлена на следующем рисунке: На этом рисунке: З – задатчик; P – регулятор; О – объект управления; элемент сравнения сумматор; задание; регулируемая величина; отклонение или ошибка управления; управляющее...
39348. Разработка цифрового логического устройства 4.16 MB
  Структурная схема логического автомата для управления роботом: БУиП блок управления и питания; АС автомат состояний; СИ схема индикации; КСУ комбинационная схема управления; УГ управляющий генератор; ИУ исполнительное устройство; ОУ объект управления; ЛА логический автомат. Минимизация по €œ1€ Минимизация по €œ0€ Рисунок 1.4 Рисунок 1. Рисунок 1.
39349. Измерение результатов национальной экономики 86.5 KB
  Модель кругооборота ресурсов, продукта и доходов в макроэкономике позволяет понять основы современной системы измерения результатов национальной экономики, получившей название система национальных счетов (СНС).