SlideShare a Scribd company logo
Создаем гиперссылки
Прежде, чем приступить к следующему уроку произведем
русификацию программы Dreamweaver. Для этого перейдем
на сайт__________________, где находится программа
русификатор, и произведем все необходимые действия по ее
установке.
И так приступаем к созданию гиперссылок. Давайте
вставим в текст нашей web страницы две гиперссылки.
Одну из них на сайт Sevidi (внешняя гиперссылка) и другую
на сайт, созданный в первом цикле уроков "Сайт о сайтах".
Выделим название сайта Sevidi и обратим внимание на
редактор свойств. Мы сразу заметим большой
комбинированный список Ссылка(Link), где задается
интернет-адрес гиперссылки.
Введем в него интернет-адрес сайта Sevidi
htth://sevidi.narod.ru/ и нажмем клавишу <Enter>
Теперь при просмотре страницы в web обозревателе
посетитель может просто щелкнуть мышью по слову Sevidi,
чтобы перейти на этот сайт. После создания ссылки слово
Sevidi изменило цвет на синий и стало подчеркнутым.
Приступим к созданию второй гиперссылке. Выделим
текст "Сайт о сайтах" и опять обратимся к редактору
свойств. Нажмем кнопку указанную на рисунке
На экране появится диалоговое окно Выбрать файл(Select
File)
Выберем файл 28.html, в нашем случае в нем находится
первая страница выше упомянутого сайта.
Нажимаем ОК. Словосочетание "Сайт о сайтах" изменило
цвет и стало подчеркнутым.
Теперь зададим цель гиперссылки с помощью
комбинированного списка Назначение(Target),
находящимся в редакторе свойств.
Он содержит четыре пункта, из которых полезными для
нас в данный момент будут два пункта: blank и self. Первый
из них позволяет вывести целевую страницу в новом окне
web обозревателя, а второй -в том же окне.
Мы можем легко исправить интернет адрес любой
созданной гиперссылки. Для этого поставим текстовой
курсор на текст гиперссылки, изменим интернет-адрес в
комбинированном списке Ссылка(Link) редактора свойств и
нажмем клавишу <Enter>.
Есть еще один способ создания гиперссылки,
позволяющий задать многие ее параметры, не доступные
для задания в редакторе свойств. Для этого щелкнем кнопку
Hyperlink вкладки Общий(Common) на панели
Вставить(Insert). На экране появится диалоговое окно.
В поле ввода Текст этого окна вводится текст
гиперссылки. Интернет адрес задается в поле Ссылка(Link).
Также можно щелкнуть расположенную правее кнопку с
изображением папки и выбрать нужный файл в диалоговом
окне Выбрать файл(Select File). Раскрывающейся список
Целевой объект(Target) задает цель гиперссылки. В поле
Название (Title) вводится пояснение к создаваемой
гиперссылке. В поле ввода Ключ доступа(Access
key)задается клавиша клавиатуры, после нажатия, которой
произойдет переход по этой гиперссылке. Клавиша
вводится в виде ее наименования: А, В, С и т.д.
Поле ввода Индекс вкладки(Tab index) позволяет задать
номер создаваемой гиперссылки в порядке, в котором web-
обозреватель выполняет "обход" гиперссылок при
последовательном нажатии клавиши <Tab>.
Почтовые гиперссылки
Следующая гиперссылка, которую мы создадим, будет
указывать почтовый адрес. Щелчок по ней запустит
программу почтового клиента, установленную в системе по
умолчанию. Интернет адрес такой гиперссылки
записывается следующим образом. Возьмем почтовый
адрес istern24@mail.ru. Cогласно стандарту HTML, этот
почтовый адрес должен быть записан так:
mailtо:istern24@mail.ru, причем между двоеточием после
ввода mailtо и собственно адресом недолжно быть
пробелов. Выделим имя автора и введем почтовый адрес в
комбинированный список Ссылка(Link) редактора свойств.
После нажатия клавиши <Enter> мы получим готовую
гиперссылку, которая по внешнему виду ничем не
отличается от обычной.
Есть другой способ создать почтовую гиперссылку. Для
этого надо переключиться на вкладку Вставить(Common)
панели Общий(Insert) Emаil Link (Insert)
На экране появится диалоговое окно
В поле ввода Текст этого окна вводится текст
гиперссылки. Если перед созданием гиперссылки выделить
фрагмент текста, он уже будет подставлен в поле ввода и
станет текстом гиперссылки. В поле Эл. почта(E-mail) нам
нужно будет ввести почтовый адрес(можно без mailtо:).
Нажимаем ОК.
Якоря
Теперь рассмотрим еще одну разновидность гиперссылок,
так называемые якоря. В отличие от других, они не
указывают на другую web-страницу, а помечают некоторый
фрагмент текущей страницы, чтобы другая гиперссылка
могла на него сослаться.
Для того чтобы научиться работать с якорями, создадим
небольшую учебную страничку, наберем текст, достаточно
большой, чтобы он не помещался на экране полностью. Для
примера возьмем текст из FAQ по HTML. После этого
напишем небольшое оглавление, и создадим первый якорь.
Поместим текстовой курсор в начало первого абзаца текста
и переключимся на вкладку Вставить(Common) панели
Общий(Insert). Нажмем кнопку вставки якоря.
На экране появится диалоговое окно Именованная
привязка (Named Anchor). В поле ввода Имя привязки
введем имя создаваемого якоря par1.
Имена якорей должны состоять из латинских букв цифр,
причем первым символом должна быть буква. Введя имя,
нажмем ОК.
Маркер якоря будет отображен в позиции, где тот был
вставлен. Это делается для удобства web- дизайнера. якоря
на страницах web-обозревателя не отражаются.
Создадим гиперссылку, ссылающуюся на якорь. Выделим
строку "Что такое HTML?" в оглавлении. Интернет-адрес,
на который будет ссылаться гиперссылка, будет выглядеть
так: #par1.
Введем его в комбинированный список Ссылка(Link)
редактора свойств и нажмем клавишу <Enter>. Значок
решетки # обозначает имя якоря. Имя файла web-страницы
не указано. Это значит, что мы ссылаемся на якорь,
расположенный на той же странице. Если мы хотим
сослаться на данный якорь из другой страницы, то должны
сослаться на эту страницу. Например, 1.1.html#par1. Создаем
якоря на оставшийся список оглавления. Как это делать, мы
уже знаем.

More Related Content

Viewers also liked

001
001001
001JIuc
 
038
038038
038JIuc
 
урок 1
урок 1урок 1
урок 1JIuc
 
0037
00370037
0037JIuc
 
0011
00110011
0011JIuc
 
0028
00280028
0028JIuc
 
лекция 12
лекция 12лекция 12
лекция 12JIuc
 
лекция 10
лекция 10лекция 10
лекция 10JIuc
 
007
007007
007JIuc
 
лекция 17
лекция 17лекция 17
лекция 17JIuc
 

Viewers also liked (10)

001
001001
001
 
038
038038
038
 
урок 1
урок 1урок 1
урок 1
 
0037
00370037
0037
 
0011
00110011
0011
 
0028
00280028
0028
 
лекция 12
лекция 12лекция 12
лекция 12
 
лекция 10
лекция 10лекция 10
лекция 10
 
007
007007
007
 
лекция 17
лекция 17лекция 17
лекция 17
 

Similar to урок 5

гиперссылки
гиперссылкигиперссылки
гиперссылкиJIuc
 
Практикум 2
Практикум 2Практикум 2
Практикум 2
Pavel Kallinikov
 
Create a site in a preschool educational
Create a site in a preschool educationalCreate a site in a preschool educational
Create a site in a preschool educationalVictor Filimonov
 
тпцми пр№ 10 создание сайта
тпцми пр№ 10  создание сайтатпцми пр№ 10  создание сайта
тпцми пр№ 10 создание сайтаannuta123
 
Сайт на narod.ru: добавляем скрипты
Сайт на narod.ru: добавляем скриптыСайт на narod.ru: добавляем скрипты
Сайт на narod.ru: добавляем скрипты
proxy-ma
 
создание сайта в системе Ucoz(2012)
создание сайта в системе Ucoz(2012)создание сайта в системе Ucoz(2012)
создание сайта в системе Ucoz(2012)MarcoFill
 
урок 6
урок 6урок 6
урок 6JIuc
 
Основы работы в викивики теория
Основы работы в викивики теорияОсновы работы в викивики теория
Основы работы в викивики теорияJuliaNaz
 
Наполнение сайта. Руководство
Наполнение сайта. РуководствоНаполнение сайта. Руководство
Наполнение сайта. Руководство
Nimax
 
Sozdanie blogov
Sozdanie blogovSozdanie blogov
Sozdanie blogov
MarcoFill
 
урок 7
урок 7урок 7
урок 7JIuc
 
урок 2.2
урок 2.2урок 2.2
урок 2.2JIuc
 
создание сайта
создание сайтасоздание сайта
создание сайтаJIuc
 
Практикум 7
Практикум 7Практикум 7
Практикум 7
Pavel Kallinikov
 
Знакомство с Летописью.ru
Знакомство с Летописью.ruЗнакомство с Летописью.ru
Знакомство с Летописью.ru
JuliaNaz
 
создание сайта в_системе_ucoz(2014)
создание сайта в_системе_ucoz(2014)создание сайта в_системе_ucoz(2014)
создание сайта в_системе_ucoz(2014)MarcoFill
 
Wiki
WikiWiki
Как делиться в СоцСетях
Как делиться в СоцСетяхКак делиться в СоцСетях
Как делиться в СоцСетях
Потребительская компания Premium
 

Similar to урок 5 (20)

гиперссылки
гиперссылкигиперссылки
гиперссылки
 
Практикум 2
Практикум 2Практикум 2
Практикум 2
 
WEB
WEBWEB
WEB
 
Create a site in a preschool educational
Create a site in a preschool educationalCreate a site in a preschool educational
Create a site in a preschool educational
 
тпцми пр№ 10 создание сайта
тпцми пр№ 10  создание сайтатпцми пр№ 10  создание сайта
тпцми пр№ 10 создание сайта
 
Сайт на narod.ru: добавляем скрипты
Сайт на narod.ru: добавляем скриптыСайт на narod.ru: добавляем скрипты
Сайт на narod.ru: добавляем скрипты
 
создание сайта в системе Ucoz(2012)
создание сайта в системе Ucoz(2012)создание сайта в системе Ucoz(2012)
создание сайта в системе Ucoz(2012)
 
урок 6
урок 6урок 6
урок 6
 
Основы работы в викивики теория
Основы работы в викивики теорияОсновы работы в викивики теория
Основы работы в викивики теория
 
Наполнение сайта. Руководство
Наполнение сайта. РуководствоНаполнение сайта. Руководство
Наполнение сайта. Руководство
 
Sozdanie blogov
Sozdanie blogovSozdanie blogov
Sozdanie blogov
 
урок 7
урок 7урок 7
урок 7
 
урок 2.2
урок 2.2урок 2.2
урок 2.2
 
создание сайта
создание сайтасоздание сайта
создание сайта
 
Практикум 7
Практикум 7Практикум 7
Практикум 7
 
Знакомство с Летописью.ru
Знакомство с Летописью.ruЗнакомство с Летописью.ru
Знакомство с Летописью.ru
 
создание сайта в_системе_ucoz(2014)
создание сайта в_системе_ucoz(2014)создание сайта в_системе_ucoz(2014)
создание сайта в_системе_ucoz(2014)
 
Wiki
WikiWiki
Wiki
 
SEO
SEOSEO
SEO
 
Как делиться в СоцСетях
Как делиться в СоцСетяхКак делиться в СоцСетях
Как делиться в СоцСетях
 

More from JIuc

выступление на совет директоров
выступление на совет директороввыступление на совет директоров
выступление на совет директоровJIuc
 
тест по теме системы счисления
тест по теме системы счислениятест по теме системы счисления
тест по теме системы счисленияJIuc
 
тест по теме компьютерные коммуникации
тест по теме компьютерные коммуникациитест по теме компьютерные коммуникации
тест по теме компьютерные коммуникацииJIuc
 
тест по теме аппаратное обеспечение эвм
тест по теме аппаратное обеспечение эвмтест по теме аппаратное обеспечение эвм
тест по теме аппаратное обеспечение эвмJIuc
 
тест по теме устройство компьютера (20 вопросов)
тест по теме  устройство компьютера (20 вопросов)тест по теме  устройство компьютера (20 вопросов)
тест по теме устройство компьютера (20 вопросов)JIuc
 
тест Atutor аппаратное обеспечение
тест Atutor аппаратное обеспечениетест Atutor аппаратное обеспечение
тест Atutor аппаратное обеспечениеJIuc
 
итоговый тест по дисциплине аппаратное обеспечение эвм
итоговый тест по дисциплине аппаратное обеспечение эвмитоговый тест по дисциплине аппаратное обеспечение эвм
итоговый тест по дисциплине аппаратное обеспечение эвмJIuc
 
тест по теме основные устройства компьютера
тест по теме основные устройства компьютератест по теме основные устройства компьютера
тест по теме основные устройства компьютераJIuc
 
тесты сортировка в бд Excel
тесты сортировка в бд Excelтесты сортировка в бд Excel
тесты сортировка в бд ExcelJIuc
 
тест создание и модифиация структуры бд
тест создание и модифиация структуры бдтест создание и модифиация структуры бд
тест создание и модифиация структуры бдJIuc
 
тест система управления базами данных
тест система управления базами данныхтест система управления базами данных
тест система управления базами данныхJIuc
 
тест работа с макросами и внешними данными
тест работа с макросами и внешними даннымитест работа с макросами и внешними данными
тест работа с макросами и внешними даннымиJIuc
 
тест по Sql
тест по Sqlтест по Sql
тест по SqlJIuc
 
тест ключи, связи, индексы поиск и фильтрация
тест ключи, связи, индексы поиск и фильтрациятест ключи, связи, индексы поиск и фильтрация
тест ключи, связи, индексы поиск и фильтрацияJIuc
 
тест запросы
тест запросытест запросы
тест запросыJIuc
 
тест бд
тест бдтест бд
тест бдJIuc
 
тест база данных. основные функции
тест база данных. основные функциитест база данных. основные функции
тест база данных. основные функцииJIuc
 
тестирование по разделу архитектура эвм
тестирование по разделу архитектура эвмтестирование по разделу архитектура эвм
тестирование по разделу архитектура эвмJIuc
 
тест треннинг по архитектуре
тест треннинг по архитектуретест треннинг по архитектуре
тест треннинг по архитектуреJIuc
 
тест треннинг по архитектуре
тест треннинг по архитектуретест треннинг по архитектуре
тест треннинг по архитектуреJIuc
 

More from JIuc (20)

выступление на совет директоров
выступление на совет директороввыступление на совет директоров
выступление на совет директоров
 
тест по теме системы счисления
тест по теме системы счислениятест по теме системы счисления
тест по теме системы счисления
 
тест по теме компьютерные коммуникации
тест по теме компьютерные коммуникациитест по теме компьютерные коммуникации
тест по теме компьютерные коммуникации
 
тест по теме аппаратное обеспечение эвм
тест по теме аппаратное обеспечение эвмтест по теме аппаратное обеспечение эвм
тест по теме аппаратное обеспечение эвм
 
тест по теме устройство компьютера (20 вопросов)
тест по теме  устройство компьютера (20 вопросов)тест по теме  устройство компьютера (20 вопросов)
тест по теме устройство компьютера (20 вопросов)
 
тест Atutor аппаратное обеспечение
тест Atutor аппаратное обеспечениетест Atutor аппаратное обеспечение
тест Atutor аппаратное обеспечение
 
итоговый тест по дисциплине аппаратное обеспечение эвм
итоговый тест по дисциплине аппаратное обеспечение эвмитоговый тест по дисциплине аппаратное обеспечение эвм
итоговый тест по дисциплине аппаратное обеспечение эвм
 
тест по теме основные устройства компьютера
тест по теме основные устройства компьютератест по теме основные устройства компьютера
тест по теме основные устройства компьютера
 
тесты сортировка в бд Excel
тесты сортировка в бд Excelтесты сортировка в бд Excel
тесты сортировка в бд Excel
 
тест создание и модифиация структуры бд
тест создание и модифиация структуры бдтест создание и модифиация структуры бд
тест создание и модифиация структуры бд
 
тест система управления базами данных
тест система управления базами данныхтест система управления базами данных
тест система управления базами данных
 
тест работа с макросами и внешними данными
тест работа с макросами и внешними даннымитест работа с макросами и внешними данными
тест работа с макросами и внешними данными
 
тест по Sql
тест по Sqlтест по Sql
тест по Sql
 
тест ключи, связи, индексы поиск и фильтрация
тест ключи, связи, индексы поиск и фильтрациятест ключи, связи, индексы поиск и фильтрация
тест ключи, связи, индексы поиск и фильтрация
 
тест запросы
тест запросытест запросы
тест запросы
 
тест бд
тест бдтест бд
тест бд
 
тест база данных. основные функции
тест база данных. основные функциитест база данных. основные функции
тест база данных. основные функции
 
тестирование по разделу архитектура эвм
тестирование по разделу архитектура эвмтестирование по разделу архитектура эвм
тестирование по разделу архитектура эвм
 
тест треннинг по архитектуре
тест треннинг по архитектуретест треннинг по архитектуре
тест треннинг по архитектуре
 
тест треннинг по архитектуре
тест треннинг по архитектуретест треннинг по архитектуре
тест треннинг по архитектуре
 

урок 5

  • 1. Создаем гиперссылки Прежде, чем приступить к следующему уроку произведем русификацию программы Dreamweaver. Для этого перейдем на сайт__________________, где находится программа русификатор, и произведем все необходимые действия по ее установке. И так приступаем к созданию гиперссылок. Давайте вставим в текст нашей web страницы две гиперссылки. Одну из них на сайт Sevidi (внешняя гиперссылка) и другую на сайт, созданный в первом цикле уроков "Сайт о сайтах".
  • 2. Выделим название сайта Sevidi и обратим внимание на редактор свойств. Мы сразу заметим большой комбинированный список Ссылка(Link), где задается интернет-адрес гиперссылки.
  • 3. Введем в него интернет-адрес сайта Sevidi htth://sevidi.narod.ru/ и нажмем клавишу <Enter> Теперь при просмотре страницы в web обозревателе посетитель может просто щелкнуть мышью по слову Sevidi, чтобы перейти на этот сайт. После создания ссылки слово Sevidi изменило цвет на синий и стало подчеркнутым.
  • 4. Приступим к созданию второй гиперссылке. Выделим текст "Сайт о сайтах" и опять обратимся к редактору свойств. Нажмем кнопку указанную на рисунке На экране появится диалоговое окно Выбрать файл(Select File) Выберем файл 28.html, в нашем случае в нем находится первая страница выше упомянутого сайта.
  • 5. Нажимаем ОК. Словосочетание "Сайт о сайтах" изменило цвет и стало подчеркнутым.
  • 6. Теперь зададим цель гиперссылки с помощью комбинированного списка Назначение(Target), находящимся в редакторе свойств. Он содержит четыре пункта, из которых полезными для нас в данный момент будут два пункта: blank и self. Первый из них позволяет вывести целевую страницу в новом окне web обозревателя, а второй -в том же окне. Мы можем легко исправить интернет адрес любой созданной гиперссылки. Для этого поставим текстовой курсор на текст гиперссылки, изменим интернет-адрес в
  • 7. комбинированном списке Ссылка(Link) редактора свойств и нажмем клавишу <Enter>. Есть еще один способ создания гиперссылки, позволяющий задать многие ее параметры, не доступные для задания в редакторе свойств. Для этого щелкнем кнопку Hyperlink вкладки Общий(Common) на панели Вставить(Insert). На экране появится диалоговое окно. В поле ввода Текст этого окна вводится текст гиперссылки. Интернет адрес задается в поле Ссылка(Link). Также можно щелкнуть расположенную правее кнопку с изображением папки и выбрать нужный файл в диалоговом окне Выбрать файл(Select File). Раскрывающейся список Целевой объект(Target) задает цель гиперссылки. В поле Название (Title) вводится пояснение к создаваемой гиперссылке. В поле ввода Ключ доступа(Access key)задается клавиша клавиатуры, после нажатия, которой произойдет переход по этой гиперссылке. Клавиша вводится в виде ее наименования: А, В, С и т.д. Поле ввода Индекс вкладки(Tab index) позволяет задать номер создаваемой гиперссылки в порядке, в котором web- обозреватель выполняет "обход" гиперссылок при последовательном нажатии клавиши <Tab>. Почтовые гиперссылки
  • 8. Следующая гиперссылка, которую мы создадим, будет указывать почтовый адрес. Щелчок по ней запустит программу почтового клиента, установленную в системе по умолчанию. Интернет адрес такой гиперссылки записывается следующим образом. Возьмем почтовый адрес istern24@mail.ru. Cогласно стандарту HTML, этот почтовый адрес должен быть записан так: mailtо:istern24@mail.ru, причем между двоеточием после ввода mailtо и собственно адресом недолжно быть пробелов. Выделим имя автора и введем почтовый адрес в комбинированный список Ссылка(Link) редактора свойств. После нажатия клавиши <Enter> мы получим готовую гиперссылку, которая по внешнему виду ничем не отличается от обычной.
  • 9. Есть другой способ создать почтовую гиперссылку. Для этого надо переключиться на вкладку Вставить(Common) панели Общий(Insert) Emаil Link (Insert) На экране появится диалоговое окно
  • 10. В поле ввода Текст этого окна вводится текст гиперссылки. Если перед созданием гиперссылки выделить фрагмент текста, он уже будет подставлен в поле ввода и станет текстом гиперссылки. В поле Эл. почта(E-mail) нам нужно будет ввести почтовый адрес(можно без mailtо:). Нажимаем ОК. Якоря Теперь рассмотрим еще одну разновидность гиперссылок, так называемые якоря. В отличие от других, они не указывают на другую web-страницу, а помечают некоторый фрагмент текущей страницы, чтобы другая гиперссылка могла на него сослаться. Для того чтобы научиться работать с якорями, создадим небольшую учебную страничку, наберем текст, достаточно большой, чтобы он не помещался на экране полностью. Для примера возьмем текст из FAQ по HTML. После этого напишем небольшое оглавление, и создадим первый якорь. Поместим текстовой курсор в начало первого абзаца текста и переключимся на вкладку Вставить(Common) панели Общий(Insert). Нажмем кнопку вставки якоря.
  • 11. На экране появится диалоговое окно Именованная привязка (Named Anchor). В поле ввода Имя привязки введем имя создаваемого якоря par1. Имена якорей должны состоять из латинских букв цифр, причем первым символом должна быть буква. Введя имя, нажмем ОК. Маркер якоря будет отображен в позиции, где тот был вставлен. Это делается для удобства web- дизайнера. якоря на страницах web-обозревателя не отражаются.
  • 12. Создадим гиперссылку, ссылающуюся на якорь. Выделим строку "Что такое HTML?" в оглавлении. Интернет-адрес, на который будет ссылаться гиперссылка, будет выглядеть так: #par1. Введем его в комбинированный список Ссылка(Link) редактора свойств и нажмем клавишу <Enter>. Значок решетки # обозначает имя якоря. Имя файла web-страницы не указано. Это значит, что мы ссылаемся на якорь, расположенный на той же странице. Если мы хотим сослаться на данный якорь из другой страницы, то должны сослаться на эту страницу. Например, 1.1.html#par1. Создаем якоря на оставшийся список оглавления. Как это делать, мы уже знаем.