Практическая работа №2 Использование списков в HTML
advertisement
Практическая работа №2 Использование списков в HTML-документе. Ссылки на другие страницы (гиперссылки). Методические указания к выполнению работы. Список является удобной формой представления данных. Существует три основных вида списков в HTML-документе: нуменрованный ненуменрованный список описаний Вы можете создавать вложенные списки, используя различные тэги списков или повторяя одни внутри других. Для этого просто необходимо разместить одну пару тэгов (стартовый и завершающий) внутри другой. Будут ли элементы вложенного списка иметь те же маркеры, обозначающие элемент списка - зависит от браузера. Более подробно смотри в разделе "Вложенные списки". Нумерованные списки В пронумерованном списке браузер автоматически вставляет номера элементов по порядку. Это означает, что если вы удалите один или несколько элементов пронумерованного списка, то остальные номера автоматически будут пересчитаны. Пронумерованный список начинается стартовым тэгом <OL> и завершается тэгом </OL>. Каждый элемент списка начинается с тэга <LI>. Пример: <OL> <LI> Программирование <LI> Алгоритмизация <LI> Проектирование </OL> 1. Программирование 2. Алгоритмизация 3. Проектирование Тэг <OL> может иметь параметры: <OL TYPE=A|a|I|i|1 START=n> , где TYPE – вид счетчика A - большие латинские буквы (A,B,C...) a - маленькие латинские буквы (a,b,c...) I - большие римские цифры (I,II,III...) i - маленькие римские цифры (i,ii,iii...) 1 - обычные цифры (1,2,3...) START=n – число, с которого начинается отсчет Пример: <OL TYPE=I START=15> <LI> Программирование <LI> Алгоритмизация <LI> Проектирование </OL> Ненумерованные списки. XV. XVI. XVII. Программирование Алгоритмизация Проектирование Для непронумерованных списков браузер обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь браузера. Маркированный список начинается стартовым тэгом <UL> и завершается тэгом </UL>. Каждый элемент списка начинается с тэга <LI>. Пример: <UL> <LI> Программирование <LI> Алгоритмизация <LI> Проектирование </UL> Программирование Алгоритмизация Проектирование Тэг <UL> может иметь параметр: <UL TYPE=disc|circle|square> Тип тэга <UL> определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square). Пример: <UL TYPE=square> <LI> Программирование <LI> Алгоритмизация <LI> Проектирование </UL> Программирование Алгоритмизация Проектирование Вложенные списки Вложенные или многоуровневые списки могут представлять собой комбинации нумерованных и ненумерованных списков (рис. 2.1 – 2.2) Например: Рис. 2.1 – Исходный код Вот, что вы увидите на экране браузера: Рис. 2.2 Созданная WEB-страница Гиперссылки - являются ключевым компонентом, делающим WEB привлекательным для пользователей. Добавляя гипертекстовые ссылки, появляется возможность сделать набор документов связанным и структурированным, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно. Ссылка состоит из двух частей: указателя и адресной части. Указатель ссылки связан с ее представлением на WEB-странице. Указателем ссылки может быть фрагмент текста или изображение. Указатель ссылки всегда выделяется цветом. При наведении указателя мыши на ссылку он принимает вид . Адресная часть ссылки содержит имя документа, на который указывает ссылка, или его электронный адрес для загрузки из Интернета. Для вставки ссылки на другие страницы используется пара тегов <A> и </A>. Данный тег имеет единственный атрибут HREF, значением которого является адресная часть ссылки, т.е. имя документа, на который нужно сослаться, или его электронный адрес для загрузки из Интернета. Указатель ссылки располагается между открывающим <A> и закрывающим</A> тегами. Это может быть фрагмент текста или HTML-код соответствующий рисунку (рис 2.3) Указатель ссылки Адресная часть ссылки Рис. 2.3 – Создание гиперссылки в HTML-документе Следует отметить, что имеется возможность установить нужный цвет указателя ссылки. Атрибут LINK тега <BODY> определяет цвет непросмотренной ссылки, VLINK – цвет просмотренной ссылки. Еще один атрибут ALINK задает цвет ссылки в момент, когда на нее наведен указатель мыши и нажата левая кнопка. ! Самостоятельно: 1. Доработать страницу компании Атлант при помощи списка предоставляемых услуг и товаров по примеру рисунка 2.4 2. Используя теги списков, создать два файла ПК.html и ПО.html, в каждом из которых перечислить компьютеры или комплектующие к ним, имеющиеся в наличии (нумерованный список) и программные продукты (ненумерованный список) соответственно. 3. Каждая страница с перечнем ПК и ПО должна иметь отдельный фон (см. каталог Y:\В41,42\ПОКС\fon) 4. Необходимо предусмотреть изменение цвета у просмотренных и непросмотренных ссылок 5. Все файлы к данной практической работе должны быть сохранены ПОКС/HTML/PR2 Рис 2.4 Примерный образец оформления страницы сайта
