Для наглядного представления информации на Web-страницах часто используются списки. Списки могут быть нумерованными и ненумерованными. Создадим новую страницу нашего сайта, на которой вставим ненумерованный список.
В окне программы Блокнот создайте структуру Web-документа, напечатав основные теги:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
В качестве заголовка документа в теге < title >< /title > введите: Чем мы занимаемся?
Такой же заголовок для списка введите в теле документа между тегами <body> и</body>, использовав для его отображения теги < h2> и </h2>с атрибутом align=center, выравнивающим заголовок по центру страницы:
<h2 align=center> Чем мы занимаемся?</h2>
Самостоятельно подберите цвет фона страницы и цвет текста, указав соответствующие значения для атрибутов bgcolor и text в открывающемся теге <body>, например, так:
<body bgcolor=aqua text=navy>
Помните, однако, что цвет текста должен быть таким, чтобы текст хорошо читался на выбранном фоне. Если атрибуты цвета не указывать, то по умолчанию текст будет отображаться черным цветом на белом фоне.
|
|
Введенный HTML-код должен иметь вид как на Рис. 1.15.
Рис. 1.15. Код HTML новой Web-страницы
Теперь вставим на страницу ненумерованный список с информацией о сфере деятельности компании ГЕОТОН. Ненумерованные списки создаются с помощью пары тегов< ul >< /ul >, которые ограничивают список. Между ними располагается столько элементов, начинающихся с тега <li>, сколько элементов в списке.
Вставьте пустую строку под строкой с кодом <h2 align=center> Чем мы занимаемся? </h2> и введите в теле документа следующий код:
<li> Созданием новых и развитием существующих автоматизированных систем управления технологическими процессами на промышленных объектах.
<li> Планированием и установкой "под ключ" локальных и глобальных вычислительных систем.
<li> Разработкой и внедрением систем корпоративных сетей с построением кабельных систем (для офисов), а также систем передачи данных с использованием телефонных, оптоволоконных и радиоканалов.
<li> Внедрением проектных решений по созданию и использованию глобальных информационных магистралей для обеспечения совместных работ систем связи, видеоконференций и мультимедиа.
<li> Созданием систем слежения и видеонаблюдения.
<li> Создание систем охранной и пожарной сигнализации, включая системы
пожаротушения и контроля доступа.
Обратите внимание: тег <li> может использоваться как одиночный, т.е. без парного, закрывающего тега </li>.
Полный HTML-код документа должен иметь вид как на Рис. 1.16.
Рис. 1.16. Полный HTML-код документа со списком
|
|
Когда ввод кода будет закончен, сохраните документ в папке Web под именем spisok.html.
Рис. 1.17. Список в окне программы просмотра
Воспользовавшись командой меню Файл • Открыть (File • Open) в браузере Internet Explorer, откройте файл spisok.html из папки Web (Рис. 1.17).
Как видите, каждый элемент ненумерованного списка выделяется специальным маркером. В нумерованном списке каждый элемент будет отмечаться его порядковым номером. Для создания нумерованных списков используются теги < ol >< /ol >, между которыми помещаются элементы <li>.