Практическая работа пео информатике «Списки в HTML»

Предпросмотр материала:

Практическая работа

 

Тема: Списки

Довольно часто требуется разместить на странице списки (перечни элементов).

Существует три основных вида списков в HTML-документе:

·  нумерованный

·  маркированный

·  список определений

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

Нумерованные списки

В нумерованном списке браузер автоматически вставляет номера элементов по порядку. Это означает, что если вы удалите один или несколько элементов нумерованного списка, то остальные номера автоматически будут пересчитаны.

Нумерованный список начинается стартовым тэгом <OL> и завершается тэгом </OL>. Каждый элемент списка начинается с тэга <LI>.

Пример 1

Раскроем окно текстового редактора «Блокнот» и напишем в нем текст   HTML- программы.

 

<HTML>

 <HEAD>

 <TITLE>Функциональные разделы документа</TITLE>

 </HEAD>

 <BODY>

<OL>

<LI> Программирование

<LI> Алгоритмизация

<LI> Проектирование

</OL>

</BODY>

</HTML>

 Сохраните этот документ  в папке вашей группы с именем PROBA_7.HTML. Просмотрите в браузере.                       

 

Маркированные списки.

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

Маркированный список начинается стартовым тэгом <UL> и завершается тэгом </UL>. Каждый элемент списка начинается с тэга <LI>.

Пример 2

<UL>

<LI> Программирование

<LI> Алгоритмизация

<LI> Проектирование

</UL>

Результат:

·  Программирование

·  Алгоритмизация

·  Проектирование

 

Для нумерованных и маркированных списков можно выбрать способ индексации. Это делается с помощью атрибута TYPE с аргументами:

1- арабские цифры

A- прописные буквы

a- строчные буквы 

i- римские буквы

Атрибут для <OL>

 Можно задать номер, с которого начинается нумерация элементов списка. Для этого служит атрибут START внутри тега <OL>.

Например, <OL TYPE = «a» START =3> …</OL> - начинает нумерацию с буквы «c» - третьей буквы латинского алфавита.

Атрибут для <IL>

VALUE – отменяет предыдущий порядок нумерации и устанавливает новый порядковый номер (или букву). Например, <IL VALUE=«7»> задает номер элемента, равный семи.

Список определений

Список определений начинается с тэга <DL> и завершается тэгом </DL>. Данный список служит для создания списков типа "термин» - «описание". Каждый термин начинается тэгом <DT> , а описание - тэгом <DD>.

Пример 3

<DL>
<DT><B> Отдел маркетинга </B>
<DD> Данный отдел занимается продвижением продуктов и услуг
<DT> <B> Финансовый отдел </B>
<DD> Данный отдел занимается всеми финансовыми операциями
</DL>

Результат:

b

 

Пример 4

Раскроем окно текстового редактора «Блокнот» и напишем в нем текст   HTML- программы.

<HTML>

 <HEAD>

 <TITLE>Списки</TITLE>

 </HEAD>

 <BODY>

<H2>Списки </H2>

<P> Это упорядоченный список. Начальный номер – 5 <BR>

<OL TYPE=1 START=5>

<LI> Первый элемент списка</LI>

<LI> Второй элемент списка</LI>

<LI>Третий элемент списка<L/I>

</OL>

 

<P> Это упорядоченный список. Нумерация – римскими цифрами <BR>

<OL TYPE=i>

<LI> Первый элемент списка</LI>

<LI> Второй элемент списка</LI>

<LI>Третий элемент списка<L/I>

</OL>

 

<P> Это - неупорядоченный список. Здесь используются вводные маркеры <BR>

<UL>

<LI> Первый элемент списка</LI>

<LI> Второй элемент списка</LI>

<LI>Третий элемент списка<L/I>

</UL>

 

<P> Это список определений <BR>

<DL>

<DT>ТЕРМИН 1</DT>

<DD>Пояснение к термину 1<DD/>

<DT> ТЕРМИН 2</DT>

<DD> Пояснение к термину 2<DD/>

<DT> ТЕРМИН 3</DT>

<DD> Пояснение к термину 3<DD/>

</DL>

</Body>

</HTML>

Активизировать браузер, в котором отобразится  Web- страница. Сохранить данную страницу в папке своей группы с именем PROBA_8.HTML

Покажите выполненное задание преподавателю.

 

Краткое описание материала

Практическая работа пео информатике «Списки в HTML»

    DOCX

Файл будет скачан в формате:

    DOCX

Краткое описание материала

Автор материала

Ильясова Лена Нуртдиновна

  • На сайте: 11 лет и 2 месяца
  • Всего просмотров: 5990
  • Подписчики: 0
  • Всего материалов: 2
  • 5990
    просмотров
  • 2
    материалов
  • 0
    подписчиков

Настоящий материал опубликован пользователем Ильясова Лена Нуртдиновна.
Инфоурок является информационным посредником. Всю ответственность за опубликованные материалы несут пользователи, загрузившие материал на сайт. Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете на материал.

ИИ для создания материалов

Создавайте материалы с ИИ

Если готовые материалы не подошли — помогут нейросети

Конспекты, тесты, презентации, рабочие листы и другие материалы по ФГОС — под ваш урок, класс и цели занятия за пару минут.

Попробовать бесплатно

Выберите инструмент

~110

Нейросети могут ошибаться. Обязательно проверяйте ответы.

Другие материалы

Вам будут интересны эти курсы: