Уроки html ссылки





Скачать 70.59 Kb.
НазваниеУроки html ссылки
Дата публикации10.08.2014
Размер70.59 Kb.
ТипУрок
Уроки HTML

7. Ссылки

  • Как сделать текст ссылкой

  • Как сделать изображение ссылкой

  • Цвет ссылок

  • Ссылки внутри страницы

  • Ссылка на новое окно

  • Ссылки во фреймах

  • Ссылка на адрес электронной почты

  • Упражнение

Как сделать текст ссылкой

Для создания ссылки используется парный тег . Чтобы сделать текст ссылкой, нужно поместить его между тегами  и  и указать, куда ведет эта ссылка, т.е. адрес документа, где мы окажемся после нажатия на ссылку. Для этого нужно параметру href тега a присвоить адрес документа. Адрес документа, на который мы ссылаемся, называется адрес ссылки.

Вот, например:

Текст ссылки

Такая строчка означает, что при нажатии на фразу Текст ссылки мы перейдем на страничку 1.html, которая лежит в каталоге about сайта http://www.mysite.com.

http://www.mysite.com/
   about/
      1.html

Адрес ссылки может быть абсолютным или относительным. В приведенном выше примере мы использовалиабсолютный адрес, т.е. полный путь до документа 1.html. Относительный адрес - путь к документу, составленный относительно текущего документа. Приведем примеры использования относительных адресов.

Пример 1:

Пример 1

Такая строчка означает, что при нажатии на фразу Пример 1 мы перейдем на страничку 1.html, которая лежит в том же каталоге, что и текущий документ.

текущий каталог/
   текущий документ
   1.html

Пример 2:

Пример 2 или Пример 2

Обе эти строчки означают, что в каталоге, где лежит текущий документ, есть подкаталог about, в котором лежит страничка 1.html, на которую мы перейдем при нажатии на фразу Пример 2.

текущий каталог/
   about/
      1.html
   текущий документ

Пример 3:

Пример 3

Эта строчка означает, что из каталога, где лежит текущий документ, нужно подняться на один уровень выше, и в каталоге, где мы оказались, лежит страничка 1.html, на которую мы перейдем при нажатии на фразу Пример 3.

каталог на 1 уровень выше текущего/
   текущий каталог/
      текущий документ
   1.html

Пример 4:

Пример 4

Эта строчка означает, что из каталога, где лежит текущий документ, нужно подняться на один уровень выше, и в каталоге, где мы оказались, есть подкаталог about, в котором лежит страничка 1.html, на которую мы перейдем при нажатии на фразу Пример 4.

каталог на 1 уровень выше текущего/
   текущий каталог/
      текущий документ
   about/
      1.html

Пример 5:

Пример 5

A если в адресе ссылки после папки не указать имя документа, то такая ссылка будет называться неполной. Она дает команду браузеру при нажатии на фразу Пример 5 открыть файл index.html, лежащий в каталогеabout.

текущий каталог/
   about/
      index.html
   текущий документ

Если файл index.html отсутствует, браузер отобразит список файлов папки about, если в настройках Вашего сервера есть разрешение. Иначе браузер поступит так же, как если бы Вы сделали ссылку на любой другой несуществующий документ, т.е. покажет сообщение "Невозможно отобразить страницу".

Комбинируя эти примеры, Вы сможете создавать сайты со структурой различной степени разветвленности.

В целях безопасности предпочтительнее указывать относительные адреса ссылок, кроме тех случаев, когда Вы на своей страничке ссылаетесь на документы, расположенные на других сайтах.

Как сделать изображение ссылкой

Вместо текста между тегами  и  Вы можете вставить изображение, и изображение будет ссылкой.



Вы уже знаете из урока 5. Изображения, что у изображения, являющегося ссылкой, автоматически появляется рамка тощиной 1 пиксел такого же цвета, как текстовые ссылки, и знаете, как ее убрать в случае необходимости.

Цвет ссылок

Цвет ссылок можно задать с помощью параметров linkalinkvlink тега body. Об этом Вы знаете из урока 6. Свойства страницы - параметры тега body. Таким способом задается цвет всех ссылок на странице.

Если же Вы хотите изменить цвет какой-то конкретной ссылки, Вы можете сделать также, как и для обычного текста, т.е. воспользоваться тегом  с параметром color. Только контейнер  должен находиться внутри контейнера .

Текст ссылки

Ссылки внутри страницы

В предыдущих разделах этого урока мы говорили о внешних ссылках, т.е. о ссылках на другие документы. Но бывают еще и внутренние ссылки, т.е. ссылки на какое-то место внутри текущего документа. Внутренние ссылки удобно использовать в больших документах для разбиения на главы.

Хорошим примером является строение этих уроков. При нажатии на название раздела урока в начале страницы браузер мгновенно переносит Вас в соответствующее место в тексте, и Вам не приходится его искать.

Итак, чтобы создать внутреннюю ссылку, надо выполнить 2 действия:

  1. Сделать закладку в том месте документа, куда Вы будете ссылаться, и дать этой закладке имя. Для этого в нужном Вам месте вставьте контейнер 
     и его парметру name присвойте строковое значение:



Между тегами  и  текст можно не писать, т.к. Вам нужно всего лишь пометить место в документе, куда ведет ссылка.

  1. Ну и собственно сделать ссылку, которая будет ссылаться на эту закладку. Для этого Вы делаете обычную ссылку, только вместо адреса документа пишете знак # и имя закладки:

Ссылка на закладку

Вот пример использования внутренних ссылок:


  1. Раздел 1

  2. Раздел 2




Раздел 1



В городе Стокгольме, на самой обыкновенной улице, в самом обыкновенном доме живет самая обыкновенная шведская семья по фамилии Свантесон. Семья эта состоит из самого обыкновенного папы, самой обыкновенной мамы и трех самых обыкновенных ребят - Боссе, Бетан и Малыша.



Раздел 2



Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.


А еще можно делать ссылку на закладку в другом документе. Например, в документе 1.html есть закладка с именем qqq. Чтобы сделать на нее ссылку из текущего документа, надо сделать обычную ссылку на документ1.html и добавить к адресу знак # и имя закладки qqq:

Ссылка на закладку

Ссылка на новое окно

Все ссылки, заданные выше описанными способами, по умолчанию открываются в текущем окне браузера. Для изменения этого свойства ссылки у тега  существует параметр target.

Если Вы хотите, чтобы документ, на который Вы ссылаетесь открывался в новом окне браузера, присвойте параметру target значение _blank:

Ссылка

Вот как будет выглядеть и работать такая ссылка: 
Ссылка откроется в новом окне

Если Вы хотите конретно указать, что ссылка должна открыться в текущем окне, присвойте параметру targetзначение _self:

Ссылка

Ссылки во фреймах

А теперь предположим, что Вы используете на своей страничке фреймы. Тогда по умолчанию все ссылки будут открываться в текущем фрейме.

Присвоив параметру target значение _parent, Вы укажете браузеру открывать ссылку во фрейме-родителе:

Ссылка

Присвоив параметру target значение _top, Вы укажете браузеру отменить все фреймы и открыть ссылку в полном окне браузера:

Ссылка

А если Вы хотите, чтобы ссылка открывалась в каком-то конкретном фрейме, присвойте параметру target имя нужного фрейма:

Ссылка

Ссылка на адрес электронной почты

Ссылка на адрес электронной почты делается как и обычная ссылка, только вместо адреса документа пишетсяmailto:адрес электронной почты:

Пишите письма

Вот как будет выглядеть работать такая ссылка: Пишите письма

При нажатии на такую ссылку запустится почтовая программа, установленная по умолчанию, и откроется окно создания нового письма. В поле Кому уже будет стоять адрес, на который ведет ссылка.

Если же Вы к адресу элетронной почты присоедините ?subject=какая-то тема сообщения, то при нажатии на эту ссылку в окне нового сообщения в поле Тема будет стоять значение параметра subject:

Пишите письма

Обратите внимание, что значение параметра subject не заключается в кавычки. В кавычки заключается целиком адрес ссылки.

Упражнение

Cоздайте 2 html-документа. Вставьте в первый документ какой-нибудь текст, разбейте его на разделы. Создайте в начале страницы содержание со ссылками на соответствующие разделы. В конце документа вставьте ссылку на второй документ, которая будет открыватся в текущем окне, и ссылку на сайт Яндекс, которая будет открываться в новом окне. Во втором документе сделайте ссылку на свой электронный адрес с темой Упражнение к уроку 7.

Выложите получившиеся документы в личный каталог, составьте линк (посмотреть как) и откройте Вашу страничку в браузере.

Добавить документ в свой блог или на сайт

Похожие:

Уроки html ссылки iconРеферат по информационным технологиям на тему «Интернет, html и html-редакторы»
Все документы для сервиса www пишутся на html (HyperText Markup Language) языке разметки гипертекста. Последний от обычного текста...
Уроки html ссылки iconПрограмма по формированию навыков безопасного поведения на дорогах...
Проведение нестандартных уроков: уроки-игры, уроки-дискуссии, уроки-соревнования, уроки с групповыми формами работы, уроки взаимообучения...
Уроки html ссылки iconОбоснование программы
Интернет-технологии: язык разметки html, ссылки, абзацы, таблицы, рисунки, объекты; каскадно-стилевые таблицы css, элементы, классы,...
Уроки html ссылки iconПояснительная записка к занятиям по робототехнике
Интернет-технологии: язык разметки html, ссылки, абзацы, таблицы, рисунки, объекты; каскадно-стилевые таблицы css, элементы, классы,...
Уроки html ссылки iconСтуденческие соревнования по программированию в Югорском государственном университете
Интернет-технологии: язык разметки html, ссылки, абзацы, таблицы, рисунки, объекты; каскадно-стилевые таблицы css, элементы, классы,...
Уроки html ссылки iconГ. Тобольск, тгспа им. Д. И. Менделеева Разработка тестов в среде Adobe
Интернет-технологии: язык разметки html, ссылки, абзацы, таблицы, рисунки, объекты; каскадно-стилевые таблицы css, элементы, классы,...
Уроки html ссылки iconМодульная структура электронной системы для обучения программированию
Интернет-технологии: язык разметки html, ссылки, абзацы, таблицы, рисунки, объекты; каскадно-стилевые таблицы css, элементы, классы,...
Уроки html ссылки iconУроки html списки
Маркированные списки это списки, в которых элементы списка отмечаются маркерами
Уроки html ссылки iconВозможности it-технологии для организации учебного процесса (урочная деятельность)
Интернет-технологии: язык разметки html, ссылки, абзацы, таблицы, рисунки, объекты; каскадно-стилевые таблицы css, элементы, классы,...
Уроки html ссылки iconРабочая программа по дисциплине Разработка электронных учебников...
Интернет-технологии: язык разметки html, ссылки, абзацы, таблицы, рисунки, объекты; каскадно-стилевые таблицы css, элементы, классы,...
Уроки html ссылки iconГосударственное образовательное учреждение высшего профессионального...
Интернет-технологии: язык разметки html, ссылки, абзацы, таблицы, рисунки, объекты; каскадно-стилевые таблицы css, элементы, классы,...
Уроки html ссылки iconУрок «Оформление списков на Web-страницах»
Проверка знаний. Тест по теме «Структура документа html» Тест. Html «Тэги, структура документа»
Уроки html ссылки icon1 Описание выбранной программной среды(php)
Для конкурсной работы я решил создать динамический сайт посвященный урокам по html и css. А почему именно эти уроки? Да потому что...
Уроки html ссылки iconПрограмма по формированию навыков безопасного поведения на дорогах...
Язык html как средство создания информационных ресурсов. Структура документа на языке html. Форматирование текста. Создание списков...
Уроки html ссылки iconПрограмма по формированию навыков безопасного поведения на дорогах...
Уроки чтения – это уроки постижения литературно-художественного произведения, уроки развития речи, уроки формирования читательских...
Уроки html ссылки iconУчебник по физике. Методический материл для учителя по подготовке...
Виртуальные занимательные учебники по физике. Оригинальные уроки и приемы обучения. Кроссворды, сканворды, шаржи и шутки


Школьные материалы


При копировании материала укажите ссылку © 2013
контакты
100-bal.ru
Поиск