Первый слайд презентации
Гиперссылки и списки © М.Е.Макарова http :// uchinfo. com. ua
Слайд 2: Гиперссылки
Фундаментальное свойство гипертекста состоит в том, что он позволяет связывать документы гиперссылками. С помощью гиперссылок можно указать: На другой HTML - документ; На любой другой документ; На определенное место внутри текущего или какого-либо другого документа; Документы превращаются в точки пересечения нитей информационной паутины и становиться понятным название «Всемирная паутина»
Слайд 3: Создание гиперссылок Тэг <a>
Атрибуты: href=“URL” – адрес перехода. Как задавать адрес? <a href=“2.html”> Перейти на вторую станицу </a> переход к документу, расположенному в той же папке, что и документ-источник. <html> ... <a href=“2.html”> Перейти на вторую станицу </a> … </html> <html> ... </html> 2.html 1.html
Слайд 4
2. <a href=“http://uchinfo.com.ua/lessons.php”> Уроки по информатике </a> Переход к документу, который находится в Интернете по указанному адресу. Для этого перехода нужно, чтобы компьютер был подключен к Интернету. 3. <a href=“mailto:ivanov_i_i@ukr.net”> Пишите мне </a> Щелчок на такой гиперссылке вызывает загрузку почтовой программы с уже заполненным полем адреса электронной почты. 4. <a href=“#chapter1”> Перейти к разделу 1 </a> Ссылка на определенное место в текущем документе. 5. <a href=“2.html#glava1”> Глава 1 </a> Ссылка на определенное место в документе 2.html.
Слайд 5: Гиперссылки внутри одного документа
Создание гиперссылки внутри текущего документа или к определенному фрагменту какого-либо другого документа распадается на 2 части: Создание метки (якоря), которая является целью гиперссылки. Создание самой гиперссылки. Гиперссылки внутри одного документа Ссылка на главу 1. Ссылка на главу 2. Якорь для главы 1 Якорь для главы 2
Слайд 6: Создание метки (якоря)
1 способ: использование атрибута name тэга <a> name=“ Строка символов ” <h3><a name=“glava1”> Глава 1 </a></h3> 2 способ: использования атрибута id в любом тэге id =“ Строка символов ” <h3 id=“glava1”> Глава 1 </h3> Атрибут id можно добавлять в любой тэг для создания якоря. <p id=“label_1”> <address id=“label_8”>
Слайд 7: Использование рисунков в качестве гиперссылки
<a href=“ адрес ссылки “><img src=“ адрес картинки “></a> <a href=“2.html“><img src=“foto.jpeg“ ></a>
Слайд 8
Упорядоченные Списки Неупорядоченные Списки определений Вложенные списки
Слайд 9
Упорядоченные списки Используются для: Оглавлений Перечня предписаний (например инструкции по установке стиральной машины) Последовательных разделов книги Присоединения номеров к кратким фразам, на которые, возможно, придется где-то ссылаться.
Слайд 10: Тэг <ol>…</ol> заголовок списка Тэг <li> элемент списка
Атрибуты start=“ число “ устанавливает номер списка, с которого начинается нумерация Type=” тип ” устанавливает тип номеров в списке Тип Стиль Образец 1 Арабские цифры (по умолчанию) 1, 2, 3, 4,… A Заглавные буквы A, B, C, D,… a Строчные буквы a, b, c, d,… I Заглавные римские I, II, III, IV,… i Строчные римские i, ii, iii, iv,… В тэг <li> можно вставлять атрибуты Type=” тип ” и value=“ число “
Слайд 11
Пример использования упорядоченного списка
Слайд 12
Неупорядоченные списки Используются для перечня элементов, для которых не важен порядок следования: Список гиперссылок; Выделение ключевых фрагментов текста; Список покупок. Тэги <UL>…</UL> заголовок списка <l i > элемент списка Атрибуты ( маркеры для обозначения элементов списка) Disc (по умолчанию) Circle Square
Слайд 13
Пример использования неупорядоченного списка
Слайд 14
Используются для: Словарей; Списка типа имя / значение; Создания маркеров элементов списка. Списки определений устроены как статьи в толковом словаре, которые могут быть заполнены текстом и картинками. Тэг <DL>…</DL> заголовок списка Каждый элемент списка состоит из двух частей – термина и определения: <dd> - термин <dt> - определение или объяснение Списки определений Пример использования списка определений
Слайд 15
Пример Вложенные списки В любой из типов списков можно вкладывать другие списки. Использование небольших рисунков в качестве маркеров списка Пример