Меню сайта

Категории раздела
Язык разметки гипертекста [1]
Создание HTML-документа [7]
Web-графика [0]
Каскадные таблицы стилей [0]

Наш опрос
Оцените мой сайт
Всего ответов: 22

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Форма входа

Главная

Регистрация

Вход
Приветствую Вас Гость | RSS


Учебный сайт


Понедельник, 18.06.2018, 17:50
Главная » Статьи » Создание HTML-документа

Урок 6. Списки

Списки

Списки служат для привлечения внимания к тем частям документа, которые содержат перечисления чего-либо. Списки создаются автоматически. Браузер при выводе текста располагает каждый элемент списка с новой строки, проставляя в их начале соответствующие символы или маркеры. Если список дополняется новыми пунктами или укорачивается, нумерация корректируется автоматически.

Язык HTML позволяет создавать пять видов списков

  • маркированный (UL -unordered list - неупорядоченный),
  • нумерованный (OL - ordered list - упорядоченный),
  • список определений (DL - definition list),
  • список меню (menu) и
  • список каталогов (DIR - directory).

Последние два вида считаются устаревшими и практически не употребляются.

Списки создаются элементами двух типов: одни определяют общий вид списка (UL, OL, DL, MENU, DIR), а другие задают его внутреннюю структуру (LI – элемент списка, DT – термин, DD – описание термина). Все они оформляются тегами контейнерами.

Допустимы вложенные списки.

Формы записи при создании списков следующие:

Маркированный список

<UL type=”disc|square|circle”> <LI>Содержание п. 1 </LI> <LI>Содержание п. 2 </LI> <LI>Содержание п. n </LI> </UL>
type=”disc”
  • Содержание п. 1
  • Сод-е п. 2
  • Сод-е п. n
type=”square”
  • Содержание п. 1
  • Сод-е п. 2
  • Сод-е п. n
type=”circle”
  • Содержание п. 1
  • Сод-е п. 2
  • Сод-е п. n

Атрибут type определяет формат маркера элемента списка: диск (disc), квадрат (square), окружность (circle).
Нумерованный список

<OL type=”1|A|a|I|i” start=”k”> <LI>Сод-е п. 1 </LI>
<LI>Сод-е п. 2 </LI>
<LI value=”j”>Сод-е п. j </LI>
</OL>
type="1"
 
 1.Сод-е п.1
2.Сод-е п.2
3.Сод-е п.j
type="A"
 
A. Сод-е п.1
B. Сод-е п.2
C. Сод-е п. j
type="a"
 
a. Сод-е п.1
b. Сод-е п.2
c. Сод-е п.j
type="I" start="10" X. Сод-е п.1
XI. Сод-е п.2
XII. Сод-е п.j
type="i" value="100"
i. Сод-е п.1
ii. Сод-е п.2
c. Сод-е п. j

Атрибут type определяет формат нумерации элемента списка:
  • 1 (арабские цифры),
  • А (прописные латинские буквы),
  • а (строчные латинские буквы),
  • I (прописные римские цифры),
  • i (строчные римские цифры).

Атрибут start определяет, с какого номера (k) начинается список.

Атрибут value определяет, с какого номера (j) начинается текущий элемент списка.

Список определений
<DL>
<DD>Термин 1 </DD>
 <DT>Описание термина 1 </DT>
<DD>Термин 2 </DD>
 <DT>Описание 1 термина 2 </DT>
 <DT>Описание 2 термина 2 </DT>
</DL>
Термин 1
Описание термина 1
Термин 2
Описание 1 термина 2
Описание 2 термина 2
Текст заключенный внутри контейнер<DD>... </DD> … начинается с новой строки и сдвигается на некоторое количество позиций относительно остального текста.
Список меню

<MENU>
<LI>Содержание пункта 1 </LI>
<LI>Содержание пункта n </LI>
</MENU>
  • Содержание пункта 1
  • Содержание пункта n
  • Список каталогов

    <DIR>
    <LI>Содержание пункта 1 </LI>
    <LI>Содержание пункта n </LI>
    </DIR>
  • Содержание пункта 1
  • Содержание пункта n
  • Практическая работа

     

    1. Создать файл list.htm на основе имеемого шаблона:
      • открыть шаблон для просмотра в браузере – двойной щелчок по файлу template.htm в месте его сохранения,
      • открыть шаблон для редактирования в текстовом редакторе Блокнот - выбрать пункт в меню браузера Вид/ В виде HTML (Просмотр HTML-кода),
      • сохранить шаблон под другим именем – Файл/ Сохранить как/ Тип файла – Все файлы/ Указать место сохранения, требуемое имя и расширение .htm/ Сохранить.
    1. В созданном файле list.htm создать список сложной формы:
      • Откорректировать содержание <title>, записав в него фразу «Списки»,
      • В разделе BODY текст «Список сложной формы», оформить заголовком первого уровня с выравниванием по правому краю,

    <H1 align=”right”> Список сложной формы </H1>

      • Ниже заголовка записать html-код создающий список сложной формы:

    <UL>

    <LI>Пункт 1

    <OL>

    <LI>Пункт 1.1</LI>

    <LI>Пункт 1.2</LI>

    </OL>

    <LI>Пункт 2

    <OL type=”A” start=”5”>

    <LI>Пункт 2.1</LI>

    <LI>Пункт 2.2</LI>

    </OL>

    <LI>Пункт 3

    <OL type=”I”>

    <LI>Пункт 3.1</LI>

    <LI>Пункт 3.2</LI>

    <LI value=”10”>Пункт 3.3</LI>

    </OL>

    </UL>

      • Сохранить внесенные в документ изменения и открыть файл для просмотра в браузере – Файл/ Сохранить, а затем двойной щелчок по файлу list.htm в месте его сохранения.
    1. Создать список определений:
      • Ниже списка сложной формы текст «Список определений» оформить заголовком первого уровня с выравниванием по центру,

    <H1 align=”center”> Список определений </H1>

      • Ниже заголовка записать html-код создающий список определений:

    <DL>

    <DT> Гиперссылка</DT>

    <DD>это объект Web-страницы обычно выделенный подчеркиванием и цветом и служащий для быстрого доступа к другим документам WWW </DD>

    <DT>Браузер </DT>

    <DD>программа просмотра ресурсов Интернет</DD>

    </DL>

      • Сохранить внесенные в документ изменения и просмотреть в браузере сделанные изменения – панель инструментов браузера – щелчок по кнопке Обновить.
    Категория: Создание HTML-документа | Добавил: asan (22.11.2010)
    Просмотров: 1132 | Рейтинг: 0.0/0
    Всего комментариев: 0
    Имя *:
    Email *:
    Код *:
    Поиск

    Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz

  • Copyright MyCorp © 2018 Бесплатный конструктор сайтов - uCoz