Embed Size (px)
Citation preview
, 2012Образовательный центр Парка высоких технологий
2012
, 2012Образовательный центрПарка высоких технологий
Ссылки
Анатомия ссылки Средства навигации
, 2012Образовательный центр Парка высоких технологий
Создание гиперссылок
<a href=“http://mysite.com/file123.html”> Текст ссылки
</a> <a href=“file.zip”> Скачать файл</a> <a href=“../../images/index.html”> Галерея
</a>
, 2012Образовательный центр Парка высоких технологий
Создание гиперссылок
<a href=“http://site.by/post.php?post=234&action=edit&message=1”>
Передача запроса </a> <a href=“http://site.by/?
post=234&action=edit&message=1”> Передача запроса
</a>
, 2012Образовательный центр Парка высоких технологий
Создание гиперссылок
http://site.by/pages/2013/10/indexh.tml http://site.by/pages_list.php?param=21
http://site.by/index.asp http://site.by/admin/panel/settings.asp
, 2012Образовательный центр Парка высоких технологий
Цели в ссылках
:Открытие в новом окне браузера <a href=“file123.html” target=“_blank”>ссылка </a> Значение target= “_self” – по умолчанию
:Пустая ссылка <a href=“#”>
ссылка </a>
, 2012Образовательный центр Парка высоких технологий
Описание ссылок
<a href=“file123.pdf”title=“ 15 Файл размером Мб” >скачать
</a>
, 2012Образовательный центр Парка высоких технологий
Интерпретация браузерами
обычные гиперссылки выделяются синим; цветом
, гиперссылки по которым посетитель уже" ", - ; ходил выводятся темно красным цветом
, гиперссылка по которой посетитель в данный (моментщелкает активная ), гиперссылка
- ; выводится ярко красным цветом ; текст любых гиперссылок подчеркивается при помещении курсора мыши на
Web- гиперссылку обозреватель меняет его " ". форму на указующий перст
, 2012Образовательный центр Парка высоких технологий
Сошлёмся на почту!
<a href=“mailto:[email protected]”> Написать
письмо автору</a>
, 2012Образовательный центр Парка высоких технологий
Якоря
<P> ...</Окончание второй главы P> <A ID="chapter3" name="chapter3"> Текстякоря</A>
<P> ...<Начало третьей главы P>
<A HREF="novel.htm#chapter3"> Глава3</A>
, 2012Образовательный центр Парка высоких технологий
Задание «горячих» клавиш
<A HREF="http://file123.html" ACCESSKEY=“k”>Ссылка</A>
Internet Explorer: Alt + k Chrome: Alt + k Opera: Shift + Esc, k Safari: Alt + k Firefox: Shift + Alt + k
, 2012Образовательный центр Парка высоких технологий
Порядок обхода. Атрибут TABINDEX
TABINDEX=“–32 767… 32 767” TABINDEX > 0:
Определён порядок следования TABINDEX=0:
Обход как есть в документе TABINDEX < 0:
.Ссылка исключена из обхода Можно перейти только при помощимыши
, 2012Образовательный центр Парка высоких технологий
TABINDEX. Пример
<A HREF="page1.htm" TABINDEX="3"> 1</Страница A>
<A HREF="page2.htm" TABINDEX="2"> 2</Страница A>
<A HREF="page3.htm" TABINDEX="1"> 3</Страница A>
, 2012Образовательный центр Парка высоких технологий
Изображения-гиперссылки
<A HREF="mailto:[email protected]"> <IMG SRC="email.gif">
</A>
, 2012Образовательный центр Парка высоких технологий
Полоса навигации
<P><A HREF=“page10.html”> 10Страница </A> |
<A HREF=“page11.html”> 11</Страница A> |
<A HREF=“page12.html”> 12 </A></P> Страница
, 2012Образовательный центр Парка высоких технологий
Меню список
<ul> <li><a href="#"> 1</a></li>Пункт <li><a href="#"> 2</a></li>Пункт <li><a href="#"> 3</a></li>Пункт </ul>
, 2012Образовательный центр Парка высоких технологий
Меню список
<ul> <li><a href="#"> 1</a>Пункт
<ul> <li><a href="#"> 1</a></li>Пункт <li><a href="#"> 2</a></li>Пункт </ul>
</li> <li><a href="#"> 2</a></li>Пункт <li><a href="#"> 3</a></li>Пункт </ul>
, 2012Образовательный центр Парка высоких технологий
Тег навигации. <NAV>
Задаёт блок навигации Может быть не один на странице Запрещён внутри <address> Не заменяет <ol> и <ul>
, 2012Образовательный центр Парка высоких технологий
Тег навигации. <NAV>. Примеры
<nav> <p><a href=“/”>Главная</a></p> <p><a href=“/about”> О нас</a></p> </nav>
, 2012Образовательный центр Парка высоких технологий
Тег навигации. <NAV>. Примеры
<nav> <h2>Навигация</h2> <ul>
<li><a href=“/”>Главная</a></li> <li><a href=“/about”> Онас</a></li>
</ul> </nav>
, 2012Образовательный центр Парка высоких технологий
Д/з
Продолжить оформление разделов Программа на Python — 1часть Программа на Python — 2часть Программа на Python — 3часть
Сделать Убрать избыточное форматирование
( )подчёркивание в будущих ссылках Добавить ссылки на страницы Добавить ссылки на разделы страниц Добавить ссылки на оглавление 3 В части ссылки на соответствующие статьи в
вики на тексте Linux, Mac Microsoft Windowsи
, 2012Образовательный центр Парка высоких технологий
ВАШИ ВОПРОСЫ?
21
