Тема: «Создание списков в HTML»

Цель работы: изучить основные тэги для создания списков в html-документ и для их преобразования.

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

Теоретический материал:

Создание списков в HTML

Нумерованные списки	<OL></OL>	<OL> < LI >пункт1 < LI >пункт2 < LI >пункт 3 </OL>, 1. пункт 1 2. пункт 2 3. пункт 3
Ненумерованные списки	<UL></UL>	<UL> <LI> пункт 1 <LI> пункт <LI> пункт 3 </UL> пункт 1 пункт 2 пункт 3
Вложенные списки		<ul> <li>Глава1 <ul><li>Раздел1 < li >Раздел2</ ul > < li >Глава2 < ul >< li >Раздел1 <li> Разде 2</ul> </ul> Глава 1 Раздел 1 Раздел 2 Глава 2 Раздел 1 Раздел 2

Задание №3.

Организация текста внутри документа.

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

Ненумерованные списки: <ul>……</ul>

Текст, расположенный между метками <ul> и </ul>, воспринимается как ненумерованный список. Каждый новый элемент списка следует начинать с метки <LI>.

Создайте простейший список. Для этого откройте блокнот, сохраните документ под именем 5.html в вашу папку.

Запишите следующий программный код:

<html> <head> </head> <body bgcolor=#edf3ff> < ul > < li >Иван; < li >Данила; < li >Белая кобыла; </ ul > </body> </html>

Нумерованные списки: <OL>……</OL>

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

<html>

<head>

</head>

< ol >

<li>Иван;

<li>Данила;

<li>Белая кобыла;

</ ol >

</body>

</html>

Списки определений: < DL >…..</ DL >

Списки определений отличаются от других видов списков. Вместо меток <li> в списках определений используются метки <DT> и <DD>.

Приведем пример листинг-кода такого списка:

<html> <head> </head> <body bgcolor=#edf3ff> < DL > < DT >HTML < DD >Термин HTML означает ‘язык маркировки гипертекстов’. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли. < DT >HTML-документ < DD >Текстовый файл с расширением *.html </ DL > </body> </html>

HTML

Термин HTML означает ‘язык маркировки гипертекстов’.
Первую версию HTML разработал сотрудник Европейской
лаборатории физики элементарных частиц Тим Бернерс-Ли.

HTML-документ

Текстовый файл с расширением *.html

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

Составить расписание занятий используя списки

Понедельник Русский язык Математика История Вторник Чувашский язык Информатика История Среда Литература Информатика История

Четверг · Русский язык · Геометрия · География Пятница · Алгебра · Геометрия · Информатика Суббота · Литература · История · Математика

Изучаемые предметы 1. Алгебра 2. Геометрия 3. История 4. География 5. Русский язык 6. Литература 7. ОБЖ 8. Информатика 9. Математика

Для выполнения задания создать три HTML документа и сохранить их в свою папку под именами 6.html, 7.html, 8.html; В каждом документе обязательно установить фон и цвет шрифта.

Задание №3.1.

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

Элемент любого списка может содержать в себе целый список любого вида. Число уровней вложенности принципе не ограничено; Вложенные списки очень удобны при подготовке разного вида планов и оглавлений.

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

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

Элементы ненумерованного списка выделяются специальным символом и отступом слева:

· Элемент 1

· Элемент 2

· Элемент 3

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

Элементы нумерованного списка выделяются отступом слева,а также нумерацией:

1. Элемент 1

2. Элемент 2

3. Элемент 3

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

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

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

Откройте блокнот, сохраните документ под именем 9.html

Запишите следующий программный код:

<html> <head> <title>Вложенные списки</title> </head> <body> <h1>HTML поддерживает несколько видов списков</h1> <DL> <DT>Ненумерованные списки <DD>Элементы ненумерованного списка выделяются специальным символом и отступом слева: <UL> <LI>Элемент 1 <LI>Элемент 2 <LI>Элемент 3 </UL> <DT>Нумерованные списки <DD>Элементы нумерованного списка выделяются отступом слева, а также нумерацией: <OL> <LI>Элемент 1 <LI>Элемент 2 <LI>Элемент 3 </OL> <DT>Списки определений <DD>Этот вид списков чуть сложнее, чем два предыдущих, но и выглядит более эффектно. <p>Помните, что списки можно встраивать один в другой, но не следует закладывать слишком много уровней вложенности.</p> <p>Обратите внимание, что внутри элемента списка может находиться несколько абзацев. Все абзацы при этом будут иметь одинаковое левое поле.</p> </DL> </body> </html>

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

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

Создайте стильное оглавление учебного пособия

Дата добавления: 2020-04-25; просмотров: 184; Мы поможем в написании вашей работы!

Поделиться с друзьями:

⇐ Предыдущая 1 234 Следующая ⇒

Мы поможем в написании ваших работ!