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

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

Разберем на примерах.

если у вас на сайте есть страничка, рассказывающая о себе, например o-sebe.html, то для того чтобы сделать ссылку на эту страницу, надо написать так:

О себе

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

Вместо текста может быть любая картинка. Тогда нажав на картинку также будет сделан переход по ссылке.

Вернемся к нашему предыдущему примеру и добавим ссылки на этот сайт, вот так

Сегодня замечательный день.
Я сделал свою первую интернет страничку.

я буду богатым и свободным человеком!

Сайт о том как зарабатывать в интернете

Теперь наша страница будет выглядеть ТАК .

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

Скачать песню Киркорова

Скачать программу

при условии, что файлы находятся в той-же папке где и html-файл

А если в другой папке?

Тоже решаемо. Например так

Скачать программу, если файл arhiv.rar находится в папке soft относительно страницы с главной директории сайта. Т.е. мы "говорим", что надо сначала зайти в директорию soft, а из нее взять файл arhiv.rar

назад в каталог , если надо перейти на страницу, которая находится в вышестоящем каталоге, например если файл katalog.html находится в главной директории вашего сайта, а страница с которой вы делаете на него ссылку находится в папке soft. Запись ../ означает возврат в предыдущий каталог, на уровень выше. Такая запись является стандартом еще со времен появления компьютера. Т.е. назад в каталог означает выйти в директорию уровнем повыше и открыть в нем файл katalog.html

Если у вас есть 2 директории в главной директории вашего сайта, и вам надо сделать ссылку из файла находящегося в одной директории на файл в другой директории, то делается типа так

т.е. сначала даем понять, что надо выйти в вышестояющую директорию (../), а затем войти в папку soft и в ней открыть файл soft.html

Все это примеры относительных ссылок, т.е. ссылки относительно страницы с которой делается ссылка.

Или указывайте полный путь к файлу. Т.е. с http://
Например, Каталог
Ссылки, содержащие полный путь к файлу называются абсолютными.

Но в таком случае работу сайта можно будет проверить только когда он выложен на сервер и у вас подключен интернет.

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

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

Как сделать ссылку в HTML, примеры

1. HREF — отвечает за то, куда должна вести ссылка. Стандартная ссылка задается следующим образом: Текст ссылки.

2. TARGET — отвечает за то, в каком окне будет открываться документ. По умолчанию новый документ открывается в текущем окне браузера. Атрибут «target» позволяет открывать ссылку в новом окне браузера. Данный атрибут имеет следующие параметры:

• _blank - загружает страницу в новом окне;
• _self - загружает страницу в текущем окне;
• _parent - загружает страницу во фрейм-родитель;
• _top - отменяет все фреймы и загружает страницу в новом окне.

3. NAME — используется для перехода к конкретной области внутри страницы. После символа «решетка» указывается в кавычках ключевое слово (закладка или метка). Для перехода к этой метке используется ссылка, в которой данная метка прописывается.

Перейти на сайт

Перейти на сайт

Бесплатные уроки по WordPress

Пример 4. Изображения в качестве ссылок.

Перейти к тексту

Текст страницы...

В данном примере на странице ставится метка «list» с помощью атрибута «name». Ссылка на эту метку обеспечит переход в определенную область страницы.

Скачать файл

Написать письмо

Можно задавать цвет ссылок с помощью атрибутов, которые указываются в теге «body» в качестве параметров. Рассмотрим эти атрибуты:

• link — не посещенная ссылка, по умолчанию она отображается синим цветом;
• alink — активная ссылка, по умолчанию имеет красный цвет;
• vlink — посещенная ссылка, имеет по умолчанию фиолетовый цвет.

...

Таким образом, мы разобрались по какому принципу создаются ссылки в HTML. Ссылкам можно придавать определенные стили оформления. Про можно посмотреть в уроке, перейдя по ссылке.

Урок 6: Покоряем html ссылки

будет выглядеть в браузере:

Элемент а (ancor) является как бы якорем, т.е. текст, заключенный между открывающим и закрывающим тегом, будет текстом ссылки.
Атрибут href это сокращение от "hypertext reference/гипертекстовая ссылка", специфирует место, на которое выполняется переход по данной ссылке - обычно это internet-адрес и/или имя файла.

Сделать html ссылку между страницами одного и того же веб-сайта гораздо проще. Например, если у нас есть две страницы(к примеру page1.htm и page2.htm ) расположенные в одной папке, то код ссылки с page1 на page2 будет выглядеть так:

Т.е. надо просто написать название страницы, на которую мы хотим перейти.

Eсли страница page 2 находится в подпапке "subfolder" , код ссылки выглядит так:

Для перехода на page2 щелкни здесь!

Для перехода на page1 щелкни здесь!

Т.е. сочетание "../ " указывает как бы на папку, расположенную на один уровень выше от данной позиции файла, с которого делается ссылка.

Раздел 1

Раздел1:

Теперь вы можете ссылаться на помеченную область(в данном случае Раздел1) простым указанием ее имени после значка #.

Приведу более наглядный пример:

Оглавление

Раздел 1: как стать богатым



Раздел 3: как быть здоровым

Раздел 1: как стать богатым

Для того, чтобы стать богатым необходимо очень много трудиться.....

Раздел 2: как стать счастливым

Раздел3: как быть здоровым

Вот результат в браузере:

Для того чтобы стать богатым необходимо очень много трудится.....

Раздел 2 : как стать счастливым

Для того чтобы стать счастливым, нужно использовать каждую минуту...

Раздел3: как быть здоровым

Для того чтобы быть здоровым нужно много заниматься физкультурой...

Конечно можно..

Написать письмо админу сайт

В браузере будет выглядеть:

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

Парочка дополнительных атрибутов:

TARGET - указывает где открывать страницу на которую ведет html ссылка. По умолчанию она открывается в том же окне. Если хочется чтобы открывалась в новом, следует написать target ="_blank" .

Смотрите пример:

Это ссылка на сайт сайт, откроется в новом окне




Эта - тоже на сайт. При наведении появится заголовок.

Смотрите на результат:

Ну вот в принципе и всё. Можете сильно не зацикливаться, в программе Adobe Dreamweaver любая ссылка делается одним нажатием мышки. Главное для Вас, понять что к чему, а зазубривать не обязательно...

А можно ли изменить цвет ссылок?

Конечно можно. Чтобы изменять цвет ссылок во всем документе, существуют специальные атрибуты элемента BODY .

LINK - цвет просто ссылок.

ALINK (Active Link) - цвет активных ссылок (активная означает в момент нажатия на нее)

VLINK (Visited Link) - цвет уже посещенных ссылок

Все цвета задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

К примеру если при открытии тела документа, элементу body прописать:

Черная ссылка

Доброго всем времени суток, мои дорогие друзья и читатели. Я надеюсь, что вы решили все таки решили принять участие в моем конкурсе и уже пишите про свой блогерский путь. Ну а я хотел бы продолжить наше изучение языка html и сегодня я вам хотел бы рассказать про одну из важнейших составляющих, а именно гиперссылках.

Да, без таких гиперссылок интернет был бы не таким удобным. Нет, вру. Он был бы вообще не удобным в плане навигации. Вы можете представить интернет без них? Я лично нет.

И сегодня мы с вами узнаем, как вставить гиперссылку в html. Но сначала я хотел бы вас спросить: Знаете ли вы, что такое вообще гиперссылка и чем она отличается от обычной ссылки? Тут на самом деле всё просто: ссылка — это простое написание информации ссылающееся на какой-нибудь документ. При этом нажать вы на этот текст не можете (ничего не будет), но зато вы знаете, где искать информацию.

Пример: О том как выделять волосы в фотошопе вы можете узнать по адресу //сайт/adobe-photoshop/kak-vydelit-volosy/

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

О том, как правильно выделять волосы в фотошопе вы можете прочитать в одной из моих .

Ну да ладно. Хорош теории. Теперь перейдем к практике и посмотрим какие и отвечают за все эти дела.

За гиперссылку отвечает парный тег , но сам по себе он ничего из себя не представляет. Он всегда идет в связке с атрибутом. И в данном случае нам нужно постоянно прописывать этот самый href. В значении атрибута мы ставим саму ссылку на желаемый ресурс. А в самом содержимом мы пишем сам текст, который должен стать кликабельным (работать по нажатии). Посмотрите пример и думаю, что вы всё поймете.

Поисковая система Яндекс

Как вы поняли, в этом примере я написал, что при нажатии на кусок текста «Поисковая система Яндекс», человек направится по адресу, написанному в значении атрибута href .

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

Внутренние переходы

Файл в той же папке

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

Файл в другой папке

1. Откройте в Notepad++ файл pushkin.html
2. Теперь найдите слово фото и заключите его в теги<a href> .
3. А теперь внимание! В значении атрибута прописываем путь относительно редактируемого файла, то есть самого pushkin.html. У вас должно будет получиться так:

Фото

Что мы сейчас сделали? А сделали мы следующее: так как путь к фотографии лежит в отдельной папке img, которая находится в одной папке с файлом pushkin.html, то в значении атрибута нам приходится сначала написать название папки, а потом через слеш (/) полное название документа (в нашем случае фотографии).

А вот теперь сохраните и запустите файл pushkin.html в браузере. Вы увидите, что слово «Фото» стало выделено синим цветом и стало кликабельным, а это значит, что нажав на эту ссылку мы попадем на файл fofo.jpg, который находится в папке img.

Ну как? Всё понятно? Вы в случае чего спрашивайте, не стесняйтесь.

Внешние переходы

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

Я буду учиться на мастера социальных проектов .

Здесь мы попадаем на конкретную страницу конкретного сайта.

Открытие в новом окне

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

В этом нам поможет атрибут target со значением «_blank» . Тут сложного ничего нет. Вам просто надо будет вставить это внутри открывающего тега после значения атрибута href . Давайте возьмем тот отрывок из файла lukomorye.html, где мы делали ссылку на страницу pushkin.html, только теперь пропишем этот самый атрибут. Выглядеть это должно так:

Из поэмы Руслан и Людмила (Автор - А.С. Пушкин)

Ну тут всё понятно. Теперь при нажатии на содержимое нужная страница откроется в новом окне. Эта вещь очень нужная, так как если ее не прописать, то пользователь просто напросто уйдет с вашей страницы. А так он в любом случае останется на ней, только если сам специально не закроет ее. Попробуйте проделать всё сами, только делайте всё своими ручками прекрасными. Не надо копировать и вставлять.

Ну вот как-то так. Вроде всё самое важное рассказал, но если вы хотите двигаться в этом направлении и изучить HTML и CSS для создания профессиональных сайтов, блогов и даже интернет-магазинов, то обязательно посмотрите отличный видеокурс на эту тему. Уроки действительно превосходные и рассказывается действительно для людей, которые с сайтостроением еще мало знакомы или незнакомы вовсе.

Ну а на этом наш сегодняшний урок закончен. Я надеюсь, что вам моя статья понравилась и буду рад, если вы станете моим постоянным читателем. Поэтому не забудьте подписаться на обновления моего блога, дабы не пропустить чего-то интересного. Ну а вам я желаю успехов во всем ваших начинаниях. Пока-пока!

С уважением, Дмитрий Костин.