GVMproject.info-бесплатные программы, скрипты, шаблоны
Руководство по html

Ссылки

Теперь пора поговорить о ссылках. Наша страничка может состоять из нескольких документов. Один из них главный (index.html или main.html) - он открывается первым и должен обязательно лежать на вашем сайте в интернете.

Остальные документы вы можете называть как угодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Они все могут лежать в одной директории (папке), а могут в разных.

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

Для начала создадим новый документ (в нашем примере prf.html) в той же директории (папке), где находится наш главный документ index.html. Содержание документа выдумайте сами, у вас для этого уже достаточное знание. Пусть prf.html - документ с вашими фотографиями. Тогда мы можем без зазрения совести фразу "посмотреть мои фотографии" сделать ссылкой на prf.html:

< a href="prf.html" > посмотреть мои фотографии < /a >  

Тэг < a > < /a > делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути здесь такие же как в случае с картинками:

(1) - < a href="prf.html" > мои фотографии < /a >
(2) - < a href="/photos/prf.html" > мои фотографии < /a >
(3) - < a href="http://www.homepage.ru/prf.html" > мои фотографии < /a >

В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html, в случае (2) документ лежит в поддиректории /photos, в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ.

Как видите все просто. Но есть один фактор, который нам нужно учесть: цвет ссылки нужно прописывать, а иначе по умолчанию он будет просто безобразным, поэтому вспомним об открывающем тэге боди:

< body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999" >

Разберемся что к чему: link - цвет ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки. В нашем примере цвета одинаковые, но они могут быть разными, также не карается законом, если цвет ссылки такой же как цвет текста документа (ссылка же выделяется чертой). Итак пропишем цвета для ссылки и саму ссылку в нашем документе:

< html >
< head >
< title > Мой первый шаг < /title >
< /head >
< body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999" >
< center >
< H3 > Здравствуйте, это моя первая страница. < /H3 >
< br >
< font color="#CC0000" > Добро пожаловать! < /font > :) < /center >
< p align="justify" >
< img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография" > Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли < a href="prf.html" > посмотреть мои фотографии < /a > , почитать обо мне, черкнуть пару строчек в мою гостевую книгу. < br > < br > А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится < b > еще один виртуальный друг? :) < /b > < br > < br > На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) < br > < br > Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)
< /p >
< /body >
< /html >

Ничего хитрого. Тeперь нам следует запомнить то, что ссылка на ваш почтовый ящик прописывается так:

< a href="mailto:pochta@mail.ru" > pochta@mail.ru - пишите письма < /a >

Запомните это раз и навсегда и не пытайтесь ее прописать по другому. Ссылка на документ, картинку или файл - одно дело, а ссылка на почтовый ящик - другое (да, но цвета всех ссылок в документе одинаковые:).

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

< a href="prf.html" > < img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография" > < /a >

Это мы введем в наш пример, сделав ссылкой на документ с фотографиями (prf.html) картинку pr1.png:

< html >
< head >
< title > Мой первый шаг < /title >
< /head >
< body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999" >
< center >
< H3 > Здравствуйте, это моя первая страница. < /H3 >
< br >
< font color="#CC0000" > Добро пожаловать! < /font > :) < /center >
< p align="justify" >
< a href="prf.html" > < img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография" > < /a > Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли < a href="prf.html" > посмотреть мои фотографии < /a > , почитать обо мне, черкнуть пару строчек в мою гостевую книгу. < br > < br > А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится < b > еще один виртуальный друг? :) < /b > < br > < br > На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) < br > < br > Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)
< /p >
< /body >
< /html >

Теперь посмотрите в Explorer, что у нас получилось. Картинка primtocodephoto.gif стала ссылкой. Если вы заметили (а если не заметили, то обратите внимание): вокруг картинки появилась рамочка. Эту рамочку можно оставить, если вам она нравится, а можно убрать, если вы зададите картинке параметр border="0"

< img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография" border="0" >

Если вы думаете, что на этом ваше мучение с изучением ссылок закончилось, то это зря вы так:)

Если вы уже достаточно попутешествовали по интернету, то вы должны были заметить, что ссылка может быть не только на документ с расширением *.html, но и на многие другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д:) Как это делается? Да все по тому же принципу:

< a href="http://www.melody.ru/music.mp3" > скачать песню < /a >

Если адрес указан таким способом:

< a href="http://www.melody.ru/" > музыкальный сайт < /a >

То это означает, что в указаном каталоге есть файл вроде index.html, который загрузится по умолчанию.

Но поговорим особо о картинках, многие из вас, наверное, сталкивались с таким явлением: когда жмешь на маленькую картинку, то загружается большая в том же или в новом окне. Как это делается? Тут никаких хитростей: делаем ссылкой картинку (допустим small.jpg) и ссылаемся на другую картинку (допустим big.jpg):

< a href="big.jpg" > < img src="small.jpg" > < /a >

В этом случае большая картинка откроется в том же окне. Но как же сделать так, чтобы картинка (или любой другой файл-документ) открылась в новом окне? Дело в том, что у тэга < a > < /a > есть параметр target:

< a href="big.jpg" target="_blank" > < img src="small.jpg" > < /a >

Итак, target="_blank" - указывает на то, что документ (картинка в нашем случае), на который ведет ссылка, откроется в новом окне броузера (Explorer`а). В наш большой пример я это вводить не буду. Т.к. не хочу заводить большие картинки на сайте, и т.к. вы должны уже сами все подставлять и сами эксперементировать:)

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

--------------------------------


Страниц : # « 5 6 7 8 9 10 11 12 13 » #
TEXT +   TEXT -   Печать Опубликовано : 20.12.09 | Просмотров : 49957 | Ваша оценка

Введите слово для поиска :
Популярные файлы
- скрипт форума phpBB2
- Скрипт MLM пирамиды
- Nvu 1.0 визуальный редактор
- Java скрипты
- auto URL submit программа для регистрации сайта в каталогах
- PHP скрипт обменного пункта
 
Популярные статьи
- учебник вебмастеру
- Руководство по html
- Cascading Style Sheets (Таблицы Каскадных Стилей)
- Дорвеи и поисковые системы.
- Клоакинг
 
Реклама
female cialis experience
##Canadian pharcharmy online
##canadadrugcenter com
##
##
##
 
Услуги
 
статистика
Поздравления с Новым годом

Яндекс.Метрика
 
RSS

 
В начало страницы © 2018 www.gvmproject.info CMS Danneo (некоммерческий продукт) - это бесплатная, c открытым исходным кодом система управления сайтами. Разработана на языке программирования PHP и может работать почти на любой платформе(хостинг площадке), используя в качестве базы данных MySQL. Поддерживает SEO-frendly, RSS 2.0 - каналы и Yandex-news, Google SiteMap, экспорт контента с помощью JavaScript и многое другое. А базовая комплектация позволяет построить сайт почти любой сложности и дизайна и эффективно им управлять.Распространяется в соответствии с GNU General Public 2