Скачать 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 пиксел такого же цвета, как текстовые ссылки, и знаете, как ее убрать в случае необходимости. Цвет ссылок Цвет ссылок можно задать с помощью параметров link, alink, vlink тега body. Об этом Вы знаете из урока 6. Свойства страницы - параметры тега body. Таким способом задается цвет всех ссылок на странице. Если же Вы хотите изменить цвет какой-то конкретной ссылки, Вы можете сделать также, как и для обычного текста, т.е. воспользоваться тегом с параметром color. Только контейнер должен находиться внутри контейнера . Текст ссылки Ссылки внутри страницы В предыдущих разделах этого урока мы говорили о внешних ссылках, т.е. о ссылках на другие документы. Но бывают еще и внутренние ссылки, т.е. ссылки на какое-то место внутри текущего документа. Внутренние ссылки удобно использовать в больших документах для разбиения на главы. Хорошим примером является строение этих уроков. При нажатии на название раздела урока в начале страницы браузер мгновенно переносит Вас в соответствующее место в тексте, и Вам не приходится его искать. Итак, чтобы создать внутреннюю ссылку, надо выполнить 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 и html-редакторы» Все документы для сервиса www пишутся на html (HyperText Markup Language) языке разметки гипертекста. Последний от обычного текста... | Программа по формированию навыков безопасного поведения на дорогах... Проведение нестандартных уроков: уроки-игры, уроки-дискуссии, уроки-соревнования, уроки с групповыми формами работы, уроки взаимообучения... | ||
Обоснование программы Интернет-технологии: язык разметки html, ссылки, абзацы, таблицы, рисунки, объекты; каскадно-стилевые таблицы css, элементы, классы,... | Пояснительная записка к занятиям по робототехнике Интернет-технологии: язык разметки html, ссылки, абзацы, таблицы, рисунки, объекты; каскадно-стилевые таблицы css, элементы, классы,... | ||
Студенческие соревнования по программированию в Югорском государственном университете Интернет-технологии: язык разметки html, ссылки, абзацы, таблицы, рисунки, объекты; каскадно-стилевые таблицы css, элементы, классы,... | Г. Тобольск, тгспа им. Д. И. Менделеева Разработка тестов в среде Adobe Интернет-технологии: язык разметки html, ссылки, абзацы, таблицы, рисунки, объекты; каскадно-стилевые таблицы css, элементы, классы,... | ||
Модульная структура электронной системы для обучения программированию Интернет-технологии: язык разметки html, ссылки, абзацы, таблицы, рисунки, объекты; каскадно-стилевые таблицы css, элементы, классы,... | Уроки html списки Маркированные списки это списки, в которых элементы списка отмечаются маркерами | ||
Возможности it-технологии для организации учебного процесса (урочная деятельность) Интернет-технологии: язык разметки html, ссылки, абзацы, таблицы, рисунки, объекты; каскадно-стилевые таблицы css, элементы, классы,... | Рабочая программа по дисциплине Разработка электронных учебников... Интернет-технологии: язык разметки html, ссылки, абзацы, таблицы, рисунки, объекты; каскадно-стилевые таблицы css, элементы, классы,... | ||
Государственное образовательное учреждение высшего профессионального... Интернет-технологии: язык разметки html, ссылки, абзацы, таблицы, рисунки, объекты; каскадно-стилевые таблицы css, элементы, классы,... | Урок «Оформление списков на Web-страницах» Проверка знаний. Тест по теме «Структура документа html» Тест. Html «Тэги, структура документа» | ||
1 Описание выбранной программной среды(php) Для конкурсной работы я решил создать динамический сайт посвященный урокам по html и css. А почему именно эти уроки? Да потому что... | Программа по формированию навыков безопасного поведения на дорогах... Язык html как средство создания информационных ресурсов. Структура документа на языке html. Форматирование текста. Создание списков... | ||
Программа по формированию навыков безопасного поведения на дорогах... Уроки чтения – это уроки постижения литературно-художественного произведения, уроки развития речи, уроки формирования читательских... | Учебник по физике. Методический материл для учителя по подготовке... Виртуальные занимательные учебники по физике. Оригинальные уроки и приемы обучения. Кроссворды, сканворды, шаржи и шутки |