Задание 2.4
Создать гипертекстовые ссылки, основываясь на структуре разрабатываемого сайта.
В вашем каталоге создать файлы, соответствующие ссылкам.
Создание списков
Для оформления текста в виде списка требуется пара тегов указывающих на тип списка и теги отвечающие за каждый элемент списка. Рассмотрим в качестве примера следующий список:
Толщина металла.
Цвет внутренней облицовки.
Замок.
Тип такого списка называется нумерованным. Чтобы создать нумерованный список, соответствующий текст помещается между парой тегов <OL> и </OL>, для обозначения элементов списка используются теги <LI> и </LI>.
Запишем код HTML для создания приведенного выше примера нумерованного списка.
<OL>
<LI> Толщина металла.</LI>
<LI> Цвет внутренней облицовки.</LI>
<LI> Замок.</LI>
</OL>
Теги <UL> и </UL> указывают на тип маркированного списка. Например, списку:
Обыкновенный.
Сейфовый.
соответствует следующий код HTML:
<UL>
<LI> Обыкновенный. </LI>
<LI> Сейфовый. </LI>
</UL>
Пример 2.5.
Используем рассмотренные теги для оформления списка, представленного на макете главной страницы фирмы «Гепард» (рис. 1.3).
<OL>
<LI> Толщина металла.</LI>
<UL>
<LI> 3 мм. </LI>
<LI> 4 мм. </LI>
</UL>
<LI> Цвет внутренней облицовки.</LI>
<UL>
<LI> Белый. </LI>
<LI> Зеленый. </LI>
</UL>
<LI> Замок.</LI>
<UL>
<LI> Обыкновенный. </LI>
<LI> Сейфовый. </LI>
</UL>
</OL>
Пример 2.6.
Поставим задачу отформатировать левую и правую части макета главной страницы фирмы «Гепард» (рис. 1.3).
Левая часть макета посвящена направлениям деятельности фирмы. Из сопоставления рисунков (рис. 1.3 и рис. 2.3) видно, что слова «Двери», «Решетки», «Рамы оконные» нужно выделить курсивом и полужирным шрифтом. Для этого можно использовать теги <I> и <B>. Кроме того, следует отметить, что слова «Решетки» и «Рамы оконные» играют роль указателей гиперрссылок. Как следует из схемы сайта рис. 1.4, указатель «Решетки» должен использоваться для перехода по адресу iron.html, а указатель «Рамы оконные» на страницу frame.html. Таким образом, фрагмент HTML-кода должен иметь следующий вид:
Изготовление и установка<BR><BR><BR>
<I><B>
Двери<BR><BR>
<A HREF=”iron.html”>Решетки</A><BR><BR>
<A HREF=”frame.html”>Рамы оконные</A>
</B></I>
Правая часть макета связана с оформлением заказа и состоит из трех ссылок. Из схемы сайта (рис. 1.4) следует, что ключевое слово «Прайс-лист» должно играть роль указателя, адресующего посетителя сайта к странице price.html, слова «Оформление Заказа» и «Отзывы и предложения» должны указывать на страницы order.html и recall.html соответственно. Организовать ссылки в правой части макета позволит следующий фрагмент HTML-кода:
<A HREF=” price.html”>Прайс-лист</A><BR><BR>
<A HREF=” order.html”>Оформление<BR>Заказа</A><BR><BR>
<A HREF=” recall.html”>Отзывы и<BR>предложения</A>
Что касается заголовочной части макета страницы, то воспользуемся результатами примера 2.4. Если внести соответствующие коррективы в HTML-документ, описывающий страницу рис. 2.3, то она получит вид, показанный на рис. 2.4.
Рис. 2.5. Главная страница с оформленными списком и ссылками