ЛР №4 Гиперссылки. Маркированные и Нумерованные списки

Лабораторная работа №4. Гиперссылки. Якоря. Маркированные и
Нумерованные списки в HTML-документе.
Гиперссылки
Ссылки – это основа любого гипертекстового документа, которые позволяют
перемещаться с одной страницы на другую либо организовать навигацию внутри
страницы. Для того чтобы добавить ссылку на HTML-страницу, используют тег
<a>. Обязательным атрибутом для данного тега является атрибут «href» - url
адрес ресурса, страницы или файла. Различают абсолютные и относительные
адреса. Абсолютная ссылка обычно ведет на какой-либо внешний ресурс, либо
указывает на адрес файла, который расположен на внешнем ресурсе. Пример
абсолютной ссылки:
<a href="http://www.e-vuz.com">This is Link to www.e-vuz.com</a>
Относительные ссылки (их можно также назвать локальными) строятся
относительно текущего документа. Примеры относительных ссылок указаны
ниже:
1) images/img1.jpg – текущий документ находится в корне сайта, а файл на
который ссылаются, в папке images;
2) ../help.html – текущий документ находится в одной папке, а файл, на
который ссылаются, в корне сайта;
3) HTMLPage2.html – файл на который ссылаются, находится в той же
папке, что и текущий документ.
1. Откройте среду разработки Visual Studio и создайте новый проект (Меню
Файл-Создать-Проект).
2. В левой части окна выберите шаблон «Веб». В средней колонке выберите
пункт «Пустое веб-приложение ASP.Net».
3. В нижней части окна задайте имя проекта и нажмите кнопку «ОК».
4. Создайте первую страницу проекта. Для этого нажмите правой кнопкой мыши
на названии проекта (WebApplication1). Выберите пункты «Добавить-Создать
элемент».
5. В появившейся форме выберите пункт «HTML-страница» и нажмите кнопку
«Добавить».
6. Добавьте на страницу ссылку на сайт www.e-vuz.com. Для этого наберите
следующий HTML-код:
<a href="http://www.e-vuz.com" target="_blank">This is Link to www.e-vuz.com</a>
7. Добавьте к проекту вторую HTML-страницу.
8. На второй странице наберите следующий код:
<h1>This is Second Page</h1>
9. Перейдите на первую страницу и добавьте ссылку на вторую страницу:
<br />
<a href="HTMLPage2.htm" target="_parent">Second Page</a>
10. Запустите проект на выполнение. Проверьте работу ссылок.
Очень часто, когда документ имеет большой размер, имеет смысл сделать
оглавление или навигацию для простоты перемещения по данному документу.
Для этого используют ссылки внутри страницы (якорь). Якорь состоит из
двух элементов: закладки с уникальным именем в каком-либо месте страницы
и ссылки для перехода к ней. Для задания уникального имени закладки
используется атрибут «name» для тега «а».
11. Добавьте на страницу якорь. Для этого наберите следующий HTML-код:
<a name="Top"></a>
<a href="#Top">In The Beginning</a>
В первой строке создается закладка с именем «Top», для которой далее в
документе будет сделана ссылка. Во второй строке создается ссылка с
текстом «In The Begining» и в атрибуте «href» указывается имя ссылки, на
которую будет совершен переход. Значение атрибута «href» начинается с
символа #.
12. Добавьте к проекту три любых изображения (большого размера).
13. Вставьте все три изображения друг за другом между первой и второй
ссылками.
14. Запустите проект на выполнение (Ctrl+F5).
15. Проверьте работу ссылки «In The Begining» внизу страницы (при нажатии
происходит переход к началу документа).
16. Выполните задание.
Создайте разметку страницы по образцу, расположенному ниже.
Маркированные и Нумерованные списки
Для упорядочивания данных и их преставления на web-странице в удобном
для восприятия виде, часто используют нумерованные и маркированные списки.
Для создания списков в HTML-документе используются теги <ol> (для
нумерованного списка) и <ul> (для маркированного списка). Элементы списка
задаются с помощью тега <li>. Также имеется возможность изменять вид
маркеров и нумерации элементов списка.
17. Cоздайте новый проект (Меню Файл-Создать-Проект).
18. В левой части окна выберите шаблон «Веб». В средней колонке выберите
пункт «Пустое веб-приложение ASP.Net».
19. В нижней части окна задайте имя проекта и нажмите кнопку «ОК».
20. Создайте первую страницу проекта. Для этого нажмите правой кнопкой мыши
на названии проекта (WebApplication1). Выберите пункты «Добавить-Создать
элемент».
21. В появившейся форме выберите пункт «HTML-страница» и нажмите кнопку
«Добавить».
22. Добавьте на страницу нумерованный список, состоящий из трех элементов.
<ol>
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
</ol>
Для изменения вида нумерации элементов списка используют атрибут
«type» для тега <ol>. Ниже, в таблице, приведены возможные значения для
атрибута «type».
Таблица 1
Значение атрибута
Описание
type=”1”
type=”A”
type=”a”
type=”I”
type=”i”
Арабские цифры
Прописные буквы латинского алфавита
Строчные буквы латинского алфавита
Римские цифры (верхний регистр)
Римские цифры (нижний регистр)
23. Задайте вид нумерации прописными буквами латинского алфавита.
<ol type="A">
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
</ol>
24. Переключитесь в режим конструктора страницы. Посмотрите на результат
проделанных действий.
25. Добавьте к проекту еще одну HTML-страницу.
26. Добавьте в разметку второй страницы заголовок первого уровня с текстом
«This is the Second Page».
27. Сохраните и закройте втору страницу.
28. Задайте элементы списка на первой странице в виде гиперссылок ведущих на
вторую страницу.
<ol type="A">
<li><a href="HTMLPage2.htm" target="_parent">First element</a></li>
<li><a href="HTMLPage2.htm" target="_parent">Second element</a></li>
<li><a href="HTMLPage2.htm" target="_parent">Third element</a></li>
</ol>
29. Добавьте на страницу маркированный список, состоящий из трех элементов.
<ul>
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
</ul>
Для изменения вида маркеров элементов списка используют атрибут
«type» для тега <ul> (аналогично нумерованному списку). Ниже, в таблице,
приведены возможные значения для атрибута «type».
Таблица 2
Значение атрибута
Описание
type=”disc”
type=”circle”
type=”square”
Круг
Окружность
Квадрат
30. Установите вид маркера в виде квадрата.
<ul type="square">
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
</ul>
31. Создайте двухуровневый список. Добавьте нумерованный список внутри
первого элемента маркированного списка. Для этого используем уже
созданный выше нумерованный список.
<ul
type="square">
<li>First element</li>
<ol type="A">
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
</ol>
<li>Second element</li>
<li>Third element</li>
</ul>
При необходимости, можно создать список с любым количеством уровней
любой сложности.
32. Выполните задание.
Создайте разметку страницы по образцу, расположенному ниже. Разметка
должна содержать следующие элементы: маркированный и нумерованный
списки, таблицу, изображения, ссылки на другую страницу, ссылка-якорь
(возврат к началу страницы).