ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 06.04.2021

Просмотров: 427

Скачиваний: 1

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
background image

ФЕДЕРАЛЬНОЕ

 

АГЕНТСТВО

 

ПО

 

ОБРАЗОВАНИЮ

 

ГОСУДАРСТВЕННОЕ

 

ОБРАЗОВАТЕЛЬНОЕ

 

УЧРЕЖДЕНИЕ

 

ВЫСШЕГО

 

ПРОФЕССИОНАЛЬНОГО

 

ОБРАЗОВАНИЯ

 

«

ВОРОНЕЖСКИЙ

 

ГОСУДАРСТВЕННЫЙ

 

УНИВЕРСИТЕТ

» 

 
 
 
 
 
 
 
 
 
 

И

.

Д

Коструб

М

.

М

Портнов

 

 

WEB-

ДИЗАЙН

ОСНОВЫ

 

ЯЗЫКА

 HTML 

 

Часть

 2 

 

Методические

 

указания

 

для

 

вузов

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Издательско

-

полиграфический

 

центр

 

Воронежского

 

государственного

 

университета

 

2008 


background image

 

2

 
 
 
 
 
 
 

Утверждено

 

научно

-

методическим

 

советом

 

факультета

 

ПММ

 14 

марта

 

2008 

г

., 

протокол

 

 7 

 
 
 
 
 

Рецензент

 

канд

физ

.-

мат

наук

доцент

 

кафедры

 

математического

 

обеспе

-

чения

 

ЭВМ

 

факультета

 

ПММ

 

ВГУ

 

О

.

Д

Горбенко

 

 
 

Учебное

 

пособие

 

подготовлено

 

на

 

кафедре

 

нелинейных

 

колебаний

 

факуль

-

тета

 

ПММ

 

Воронежского

 

государственного

 

университета

.  

 
 
 

Рекомендуется

 

для

 

студентов

 

четвертого

 

курса

 

факультета

 

ПММ

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Для

 

специальности

: 010501 – 

Прикладная

 

математика

 

и

 

информатика


background image

1. 

Использование

 

списков

 

1.1. 

Зачем

 

нужны

 HTML-

списки

Различные

 

списки

 

играют

 

далеко

 

не

 

последнюю

 

роль

 

в

 

нашей

 

повсе

-

дневной

 

жизни

Возникает

 

вопрос

 – 

а

 

почему

 

мы

 

так

 

часто

 

прибегаем

 

к

 

этому

 

средству

 

представления

 

информации

Во

-

первых

Информация

 

в

 

виде

 

списка

 

позволяет

 

разбить

 

большие

 

мас

-

сивы

 

данных

 

на

 

отдельные

четкие

 

фрагменты

которые

 

человеку

 

гораздо

 

удобнее

 

воспринимать

нежели

 

весь

 

поток

 

целиком

.  

Во

-

вторых

Списки

 

позволяют

 

создавать

 

понятную

 

и

 

логичную

 

внут

-

реннюю

 

структуру

 

информационных

 

данных

ориентироваться

 

в

 

которой

 – 

дело

 

простое

 

и

 

удобное

.  

В

-

третьих

Использование

 

списков

 

удобно

 

для

 

отображения

 

опреде

-

ленных

 

пошаговых

 

и

 

прочих

 

последовательных

 

процессов

.  

При

 

работе

 

с

 

текстом

 

в

 

различных

 

программах

 

типа

 Microsoft Word 

создание

 

списков

 

не

 

представляется

 

сложным

 

делом

 – 

надо

 

всего

 

лишь

 

указать

 

область

 

данных

которую

 

текстовому

 

редактору

 

необходимо

 

пре

-

вратить

 

в

 

список

В

 

языке

 

разметки

 HTML 

за

 

организацию

 

списков

 

отвечает

 

целый

 

ряд

 

тегов

конструкции

 

которых

 

должны

 

соответствовать

 

определенным

 

пра

-

вилам

 

структуризации

 

информационных

 

данных

 

с

 

помощью

 HTML. 

Спецификация

 HTML 

предусматривает

 

три

 

основных

 

типа

 

списков

 

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

 

списки

 

маркированные

 

списки

 

списки

 

определений

Рассмотрим

 

каждый

 

из

 

названных

 

типов

 

более

 

подробно

1.2. 

Нумерованные

 

списки

 

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

 

список

 

часто

 

называется

 

упорядоченным

 (Ordered List) 

и

 

представляет

 

собой

 

определенную

 

последовательность

 

элементов

Для

 

создания

 

нумерованного

 

списка

 

используется

 

тег

-

контейнер

 

<OL>

внутри

 

которого

 

располагаются

 

пункты

 

перечня

 

информационных

 

данных

за

 

указание

 

которых

 

отвечает

 

специальный

 

тег

 

<LI>

 (List Item – 

пункт

 

списка

 

или

 

элемент

 

списка

) (

листинг

 1.1, 

рис

. 1). 

Листинг

 1.1.

 

Пример

 

нумерованного

 

списка

 

<HTML> 

<HEAD> 

<TITLE>

Пример

 

нумерованного

 

списка

</TITLE> 

</HEAD> 

<BODY BGCOLOR="#FFFFFF" TEXT="black"  
      LINK="#00FF00" ALINK="#00FF00" VLINK="blue"> 

<H3>

Пример

 

нумерованного

 

списка

</

Н

3> 


background image

 4

<HR ALIGN="center" NOSHADE WIDTH="98%"> 
<OL> 

<FONT F

АСЕ

="

Та

h

о

m

а

"> 

<B>

Визуальные

 

эффекты

 Adobe Photoshop 7:</B> 

</FONT> 

  <LI>Drop Shadow; 
  <LI>Bevel and Emboss; 

      <LI>Color Overlay. 

</OL> 

</BODY> 
</HTML> 

 

Рис

. 1. 

Пример

 

нумерованного

 

списка

 

 

Как

 

видно

 

из

 

примера

после

 

каждого

 

пункта

 

списка

 

осуществляется

 

перенос

 

строки

причем

 

без

 

указания

 

каких

-

либо

 

структурных

 

тегов

Также

 

следует

 

заметить

что

 

закрывающий

 

тег

 

</LI>

 

отсутствует

хотя

 

и

 

суще

-

ствует

 

в

 

спецификации

 HTML (

Консорциум

 W3C 

признал

 

этот

 

закрываю

-

щий

 

тег

 

необязательным

). 

Если

 

заголовок

 

списка

 «

Визуальные

 

эффекты

 Adobe Photoshop 7:» 

раз

-

мещается

 

между

 

тегом

 

<OL>

 

и

 

первым

 

пунктом

 

списка

 

<LI>

то

 

он

 

будет

 

отделен

 

от

 

начала

 

самого

 

списка

 

одним

 

переносом

 

строки

 

и

 

отступом

 

от

 

левого

 

края

 

документа

 (

как

 

и

 

все

 

пункты

 

списка

). 

При

 

указании

 

заголовка

 

перед

 

тегом

 

<OL>

 

браузер

интерпретируя

 HTML-

код

создаст

 

двойной

 

пе

-

ренос

 

и

 

разместит

 

текст

 

заголовка

 

левее

 

пунктов

 

списка

 (

рис

. 2). 


background image

 5

 

 

Рис

. 2. 

Пример

 

нумерованного

 

списка

 

с

 

заголовком

размещенным

  

перед

 

тегом

 

<OL>

 

 

Иногда

 

может

 

возникнуть

 

ситуация

когда

 

список

 

содержит

 

определен

-

ный

 

разрыв

 

в

 

последовательности

 

представления

 

пунктов

  (

например

по

-

сле

 

пункта

 3 

должен

 

идти

 

пункт

 5). 

Для

 

этой

 

цели

 

используется

 

специаль

-

ный

 

параметр

 

тега

 

<LI>

 – 

VALUE

 (

листинг

 1.2, 

рис

. 3). 

Листинг

 1.2.

 

Пример

 

нумерованного

 

списка

 

с

 

разрывом

 

последовательности

<HTML> 

<HEAD> 
<

Т

I

Т

LE>

Пример

 

нумерованного

 

списка

 

с

 

разрывом

  

       

последовательности

</TITLE> 

</HEAD> 
<BODY BGCOLOR="#FFFFFF" TEXT="black"  

LINK="#00FF00" ALINK="#00FF00" VLINK="blue"> 

<H3>

Пример

 

нумерованного

 

списка

</H3> 

<HR ALIGN="center" NOSHADE WIDTH="98%"> 
<FONT 

РАСЕ

="Tahoma"> 

<

В

>

Визуальные

 

эффекты

 Adobe Photoshop 7: 

</B></FONT> 

<OL> 

<LI>Drop Shadow; 
<LI>Bevel and Emboss; 
<LI>Color Overlay. 
<BR>. . . 
<LI VALUE="5">Stroke 

</OL> 
</BODY> 
</HTML>