Методические указания1_2 (1084715), страница 5
Текст из файла (страница 5)
<Р>Второй абзац
</body>
Элемент SPAN, наоборот, предназначен для включения в состав других элементов:
<HEAD>
<STYLE type="text/css">
SPAN.имя { Свойство: значение', ... }
</style>
</head>
<BODY>
<H1> Заголовок </h1>
<P><SPAN class="Имя">Текст 1</span> Текст 2 </p>
</body>
Выводы
Теперь можно сделать некоторые выводы относительно таблиц стилей.
-
Свойства, задаваемые при помощи стилей, позволяют использовать практически неограниченное число вариантов форматирования. Таблицы стилей снимают ограничения, накладываемые традиционной спецификацией HTML
-
С точки зрения синтаксиса, свойства можно задавать разными способами: в одном элементе (inline); для всех одноименных элементов на странице; для класса элементов; для ряда документов, с использованием CSS-файла.
-
Перечень свойств достаточно велик, и в дальнейшем он, видимо, будет расширяться. Для различных групп элементов (текст, списки и т. д.) существуют свои наборы свойств
-
Теперь существует возможность разделить сам документ и стилевое оформление. Иными словами, для страницы можно применять разные стили, не меняя сам документ.
3.5. Списки
Списки (list) были введены в HTML, несомненно, под влиянием успеха текстовых редакторов. Список отличается от обычного текста прежде всего тем, что пользователю не надо думать о нумерации его пунктов: эту задачу программа берет на себя. Если список дополняется новыми пунктами или укорачивается, нумерация корректируется автоматически. В случае ненумерованных списков программа ставит перед каждым пунктом маркеры: кружки, прямоугольники, ромбы или другие изображения. В результате список принимает удобочитаемый, «фирменный» вид. Теги для создания списков можно условно разделить на две группы: одни определяют общий вид списка (и позволяют указывать атрибуты), а другие задают его внутреннюю структуру. В списках можно использовать стандартные атрибуты. Существует несколько разновидностей списков.
<UL><LI></ul>
Самым простым является ненумерованный список (unordered list). Его шаблон представлен ниже:
<UL>
<LI>Пункт 1 списка
<LI>Пункт 2 списка
<LI>Пункт 3 списка
</ul>
Элемент UL является своеобразным обрамлением списка. Он позволяет отделять один список от другого. Элемент LI обозначает каждый из пунктов. Вид ненумерованного списка показан на рис. 3.5.
-
Пункт 1 списка
-
Пункт 2 списка
-
Пункт 3 списка
Рис. 3.5. Ненумерованный список
<OL>><LI></ol>
Структура нумерованного списка (ordered list) похожа на предыдущую:
<OL type="I">
<LI>Пункт 1
<LI>Пункт 2
<LI>Пункт 3
<LI>Пункт 4
</ol>
Для него используется другой внешний тег: OL. В этом случае каждый пункт маркируется элементом упорядоченной последовательности: арабскими или римскими числами, буквами латинского алфавита. На рис. 3.6 показан образец списка по приведенному выше примеру.
I. Пункт 1
II. Пункт 2
III. Пункт 3
IV. Пункт 4
Рис. 3.6. Нумерованный список
Способ нумерации задается при помощи атрибута type. В табл. 3.2 приведены все способы нумерации
Табл. 3.2. Значения атрибута type
Атрибут Вид нумерации
type="1" 1, 2, 3, 4, …
type-"i" i, ii, iii, iv,….
type="I I, II, III, IV, ...
type="a" a, b, c, d,…
type="A" A, B, C, D,...
Существует атрибут, который позволяет задать начальное значение для нумерации списка:
start=номер
Например, если использована буквенная нумерация, то значение атрибута start=4 означает, что нумерация списка начнется с литеры D.
Для элемента LI может быть использован атрибут, который определит номер для текущего пункта списка:
value= номер
Соответственно, следующий пункт списка будет иметь очередной номер и т. д. При помощи атрибута value, если использовать его для первого в списке элемента LI, можно добиться того же эффекта, что и при помощи атрибута start, или нарушить последовательность номеров, если переопределить другие элементы списка.
<DL> <DT> <DD> </dl>
Списки с определениями (definition list) создаются при помощи тегов трех видов:
<DL>
<DТ>Пункт 1
<DD>0пределение пункта 1
<DD>Другое определение пункта 1
<DТ>Пункт 2
<DD>0пределение пункта 2
<DТ>Пункт 3
<DD>0пределение пункта 3
</dl> •
Лучше всего дает представление о смысле списка с определениями рис. 3.7. Каждый пункт списка может быть дополнен одним или несколькими блоками текста при помощи тега (тегов) DD. Каждый блок автоматически размещается с новой строки. Термин «определение» носит условный характер. Абзацы, размещенные в списке, могут быть определениями, дополнениями, разъяснениями пунктов. По сути, пункт представляет собой заголовок, а определение — произвольный текст под заголовком.
Пункт 1
Определение пункта 1
Другое определение пункта 1
Пункт2
Определение пункта 2
Пункт 3
Определение пункта 3
Рис. 3.7. Список с определениями •
Другой способ создания сложных списков — использование принципа вложения. Каждый элемент, определяющий пункт списка, может содержать еще один список. Вложенный список располагается с небольшим отступом вправо относительно списка верхнего уровня. Каждый из списков может быть создан и отлажен отдельно, а затем все составляющие могут быть объединены в один большой список. В том случае, когда структура списка ясна, удобно воспользоваться шаблоном. В нем должны быть указаны все пункты на всех уровнях. Доработка такого шаблона сводится к вписыванию конкретных строк текста в соответствующие пункты. Ниже дан пример такого шаблона: <UL>
<UL>
<LI>Пункт 1
<OL>
< LI >Пункт 1.1
<LI>Пункт 1.2
</ol>
<LI>Пункт 2
<OL>
<LI>Пункт 2. 1
<LI>Пункт 2.2
</ol>
<LI>Пункт 3
<OL>
<LI>Пункт 3. 1
<LI>Пункт 3.2
</ol>
</ul>
В этом шаблоне нумерованные списки размещены внутри пунктов ненумерованного списка. Рис. 3.8 дает представление о том, как выглядит такая конструкция.
-
Пункт 1
-
Пункт 1.1
-
Пункт 1.2
-
Пункт 2
-
Пункт 2.1
-
Пункт 2.2
-
Пункт 3
-
Пункт 3.1
-
Пункт 3.2
Рис. 3.8. Вложенные списки
В таблицах стилей для списков предусмотрены специальные свойства. Например, в секции страницы HEAD можно определить стиль списка с маркерами в виде окружностей (circle):
<STYLE type="text/css">
<OL>c01 {list-style-type: circle}
</style>
Тогда в секции BODY может присутствовать список с маркерами в виде кружков:
<OL class="c01">
<LI> Пункт 1
<LI> Пункт 2
</ol>
ПРИМЕЧАНИЕ
Примеры списков можно найти в файле List.htm
3.6. Гиперссылки
<A></а>
Один из самых важных элементов языка, обеспечивающий создание гиперссылок. Чаще всего используется такой шаблон:
Произвольный текст <А href="Aapec ссылки"> текст для щелчка </а>
Или такой:
<А href="Aepec ссылки"> <IMG src="Ссылка на рисунок"> </а>
Первый шаблон используется в том случае, когда гиперссылка встречается в тексте. Атрибут href может указывать на ресурс Интернета, файл на локальном диске или на метку внутри текущей страницы. Текст, расположенный внутри элемента А, представляет собой видимую часть гиперссылки. На нем должен щелкнуть пользователь, чтобы осуществить переход. Браузер выделяет этот фрагмент цветом, а после использования гиперссылки меняет цвет, чтобы обеспечить подсказку. Второй шаблон задается в том случае, когда видимая часть гиперссылки представляет собой рисунок. Если для последнего определена рамка, то она тоже меняет цвет после использования гиперссылки. Если ссылка указывает на рисунок, который находится на локальном диске, она обязательно должна начинаться со слова file, то есть содержать указание на протокол:
href ="file: //Диск: \Путь к файлу"
или
href ="file: ///Диск: /Путь к файлу"
По умолчанию используется ссылка на файлы текущей папки (той, где расположен файл Web-страницы). В этом случае просто указывается имя файла, например: page2.html, strelka.gif, photo35.jpg.
Часто используются относительные ссылки на папки: это позволяет легко менять местоположение комплекса страниц на диске. Если в текущей папке есть другая, в которой размещены необходимые файлы, ссылка строится по такому шаблону:
href =" . /Папка/Файл. тип"
Здесь на структуру вложенных папок указывает точка перед наклонной чертой. Если необходимо указать папку, которая находится на том же уровне вложения, что и текущая, то добавляют еще одну точку:
href =" .. /Папка/Файл. тип"
Подобно многим другим элементам языка, элемент А требует использования атрибутов. Атрибут гиперссылки мы уже знаем, шаблон его таков:
href="URL"
или
href="Протокол ://Адрес ссылки"
Например:
href="http://www.netscape. com"
Кодовое слово, стоящее в начале URL, обозначает так называемую схему доступа. Она определяет тип сервера, доступный при помощи данной ссылки. Для пользователя это представляется как доступ к одной из разновидностей Интернета. В этом смысле можно сказать, что Интернет — это как бы несколько сетей в одной. У каждой из этих частных сетей существуют свои правила доступа, достоинства, недостатки, свои приверженцы и противники. Но все пользователи используют одни и те же каналы связи. Похожая ситуация наблюдается и в обычных телефонных сетях. Они могут служить для связи голосом, передачи факсов, межкомпьютерной связи и т. д.
WWW как самая современная система, должна обеспечивать совместимость с более старыми системами, поэтому от старых протоколов не отказываются, а стараются приспособить их к современным нуждам (например ftp). Существуют следующие схемы доступа:
-
file — доступ к файлу на локальном диске;
-
ftp — доступ к архивам файлов по протоколу передачи файлов (file transfer
protocol);
-
http — доступ к WWW;
-
mailto — отправка сообщения по электронной почте;
-
news — доступ к новостям USENET;
-
nntp — доступ к новостям USENET по протоколу NNTP;
-
telnet — подключение по протоколу telnet;
-
wais — подключение к системе поиска WAIS.
Когда гиперссылка используется для указания адреса электронной почты, ее выбор обеспечивает не переход к новому документу, а запуск диалога для отправки сообщения указанному адресату. Обычно такую ссылку размещают в конце страницы для обеспечения связи с Web-мастером или автором страницы.
Пример.
<А href="mailto:goncharov@online. ш">Алексей Гончаров</А>
В том случае, когда используются переходы внутри текущей страницы, на ней должны быть расставлены метки:
<А name="Метка"> </a>
В больших сайтах часто используются метки для перехода к определенной части некоторой страницы:
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
