Практическая работа № 5 «Создаем список»

Для наглядного представления информации на 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>.


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: