Dark Orbit - учебник HTML3

Ступенька 13-ая.

Развлекательно-познавательный урок с любителем сосисок закончен, и мы переходим к следующему уроку, в котором мы поговорим о ссылках.

Наша страничка может состоять из нескольких документов. Один из них главный (index.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, где лежит нужный нам документ.

Первые два примера (1) и (2) – называют относительными путями. (3) – абсолютный, т.е. указанный полностью, включая имя сайта (в нашем случае - http://www.homepage.ru/). Абсолютный путь мы используем, когда ссылаемся на чужие странички, относительный мы используем, когда ссылаемся на документы внутри нашего сайта.

Для всех ссылок в нашем документе мы можем прописать цвета: link - цвет просто ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки.

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

Как и цвет для всего текста в документе, цвета ссылок мы прописываем в <body>. В нашем примере цвета для просто ссылки, активной и посещенной - одинаковые, но они могут быть разными – это на ваше усмотрение.

Итак, пропишем цвета для ссылки и саму ссылку в нашем документе:

<html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999"> <div align="center"> <H3>Здравствуйте, это моя первая страница.</H3> <br> <font color="#CC0000"> Добро пожаловать!</font> :) </div> <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> (посмотреть)

Как видите, ничего сложного.

Как вы помните, мы можем задать различные цвета для разных блоков текста в нашем документе (<font color="…"></font>). Для текстовых ссылок мы тоже можем задать разный цвет – это делается при помощи тэга <font> и его атрибута color:

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

Обратите внимание, <font color="…"></font> - прописывается внутри тэга <a></a>, если вы пропишите иначе, то у вас не получится задать вашей ссылке цвет отличный от цвета других ссылок в документе.

Давайте теперь перейдем на следующую ступеньку и продолжим знакомства с ссылками.

Ступенька 14-ая.

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

Ссылка на ваш почтовый ящик прописывается немного иначе, чем ссылка на другой документ (страницу, сайт):

<a href="mailto:pochta@mail.ru"> pochta@mail.ru </a>

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

У mailto есть еще некоторые опции:

- ?subject=Тема пиcьма - &Body=Текст вашего сообщения - &cc=copy@mail.ru,copy2@mail.ru (копии письма через запятую) - &bcc=hidden_copy@mail.ru,hidden_copy2@mail.ru (скрытые копии письма через запятую)

Все вместе это будет выглядеть так:

<a href="mailto:pochta@mail.ru?subject=Hello&Body=text&cc=copy@mail.ru&bcc=hidden_copy@mail.ru"> pochta@mail.ru </a>

Теперь если ваш ненаглядный посетитель нажмет такую ссылку, то его почтовая программа выдаст ему бланк нового письма с уже заполнеными полями - удобство да и только :)

Кстати, как-то одна из читательниц задала мне такой вопрос: "Как сделать, чтобы при наведении мышки на ссылку была подсказка?". Я удивилась, зачем это нужно, но тем не менее вопрос был задан, вопрос был интересен, и в новую версию учебника я включаю ответ на него:)

В старых спецификациях Html (3.2 и ниже) такое не предусмотрено, стало быть и старые броузеры того, о чем пойдет речь в этом примечании, не поддерживают (IE ниже 5.0 и NN 4.x и ниже). Зато в спецификации Html 4.0 порывы пользователя задать примечание к тексту учитываются. Итак, господа, знакомьтесь - атрибут title.

Атрибут title (не путать с тэгом <TITLE>) предлагает информацию об элементе, для которого он устанавливается. Мы можем установить его, например, для тэга <a>:

<a href="ssilka.html" title="Ваша подсказка"> текст-ссылка </a>

Наведите курсор мыши на слова "текст-ссылка", и, если ваш броузер поддерживает спецификацию Html 4.0, то вы увидите то самое желанное.

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

Поближе ознакомиться с этим атрибутом, меня побудила статья "Об ACRONYM'е замолвите слово" на сайте "Заметки Html Кодера", поэтому хочу сказать Александру Шуркаеву спасибо, что помог мне встретить во всеоружии очередной вопрос:)

На этом наш разговор о ссылках не заканчивается. Шагаем дальше.

Ступенька 15-ая.

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

<a href="prf.html"><img src="primtocodephoto.gif"></a>

Если вы хотите сделать картинку ссылкой на ваш почтовый ящик, то принцип тот же:

<a href="mailto:pochta@mail.ru"><img src="primtocodephoto.gif"></a>

Итак, сделаем ссылкой картинку primtocodephoto.gif на документ с фотографиями (prf.html):

Ступенька 16-ая.

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

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

Знаете, что будет при нажатии на такую ссылку? У пользователя появится окошко, предлагающее сохранить ему музыкальный файл на его компьютере. Т.е. если файл не является текстовым документом (*.doc, *.txt) или, например, *.html документом, то броузер вашего пользователя обязательно предложит ему скачать такой файл. К чему я это? Отвечаю на очень частый вопрос моих читателей, как предложить посетителю вашей страницы сохранить музыкальный файл или программу :)

Кстати, вы, возможно, удивитесь, но если адрес указан таким способом:

<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" - указывает на то, что документ (картинка в нашем случае), на который ведет ссылка, откроется в новом окне броузера. В наш большой пример я это вводить не буду, т.к. считаю, что вы уже можете и должны самостоятельно подставлять в код изменения.

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

<html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999"> <div align="center"> <H3>Здравствуйте, это моя первая страница.</H3> <br> <font color="#CC0000"> Добро пожаловать!</font> :) </div> <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> (посмотреть)

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

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

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

Итак, вопрос первый: "Как задавать цвет рамки вокруг картинки?”

Цвет рамки вокруг картинки задается атрибутом bordercolor, например:

<img src="picture.gif" border="3" bordercolor="#CC0000">

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

Но, если ваша картинка будет ссылкой, то рамка вокруг нее будет того цвета, который мы задали для ссылок в тэге body с помощью link, vlink, alink, т.е. атрибут bordercolor в этом случае уже не влияет на цвет рамки вокруг картинки.

Вопрос второй: "Используют ли профессионалы рамки?”

Когда как, все зависит от ситуации. Может быть картинка, обрамленная рамкой, придаст аккуратности вашему сайту, и его оформление только выиграет от этого. А может быть наоборот - вам эти рамки совсем не нужны, т.к. портят внешний вид вашего сайта, тогда их можно убрать. "Думайте сами, решайте сами”, использовать рамки вокруг картинок или нет :)

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

Ступенька 17-ая.

Мы уже говорили о картинках и том, как картинку сделать ссылкой. Теперь мы поговорим о картах, но не игральных, к сожалению некоторых.

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

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

Итак, сначала теория.

Навигационные карты задаются тэгом <map></map>. Тэг <map> включает себя тэг(и) <area>, которые определяют геометрические области внутри карты (в этой главе это будут прямоугольники) и ссылки, связанные с каждой областью (т.е. куда вы попадете при нажатии на какую-либо часть нашей карты).

<map> <area ...> <area ...> ... <area ...> </map>

Дальше уже будем тренироваться на кошках :) (на конкретных примерах)

Для начала нам нужна картинка. Возьмем такую:

Картинка простая - всего лишь голубой прямоугольник (240х140 пикселов). Представьте, что прямоугольники №1 и №2, нарисованные на нем, - это изображения каких-либо кнопок, а голубое - какой-то сложный фон. Чтобы не создавать сложную таблицу (о них, о таблицах, мы поговорим немного позднее), вы решили не резать картинку на много частей и не вычленять кнопки, вы решили поступить проще - создать навигационную карту, где области №1 и №2 (прямоугольники) будут ссылками.

Итак, мы уже знаем, что геометрические области и то, куда пользователь попадет при нажатии на них, определяет тэг <area>, естественно, при помощи своих атрибутов. Это атрибуты shape и coords.

Атрибут shape - определяет форму области: будет ли она прямоугольником (shape="rect"), кругом (shape="circle") или многоугольником (shape="poly"). Сейчас мы будем работать с прямоугольной областью, поэтому:

<map> <area shape="rect"> </map>

Атрибут coords - определяет координаты (положение нашей геометрической формы). Число координат и порядок их значений зависят от выбранной нами формы.

"Стоп! стоп!" - скажете вы, - "Какие координаты?" - Те самые, вспоминайте школу и уроки геометрии :)

Полагаю, что это всем должно быть ясно. Отсчет ведется от левого верхнего угла картинки, считайте его началом координат (0;0). Если мы работаем с прямоугольной областью, то нам нужны координаты верхнего-левого и нижнего-правого углов области. Порядок записи координат для атрибута coords следующий:

<area shape="rect" coords="x1,y1,x2,y2">

В нашем примере у прямоугольника №1 координаты такие:

x1=25, y1=36, x2=114, y2=98

Значит, код будет выглядеть следующим образом:

<map> <area shape="rect" coords="25,36,114,98"> </map>

Теперь пропишем, куда будет ссылаться наша область, для этого нам понадобится уже знакомый нам атрибут href:

<map> <area href="drugoy_document.html" shape="rect" coords="25,36,114,98"> </map>

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

У тэга <map> есть атрибут name - имя карты, давайте назовем карту - karta1:

<map name="karta1"> <area href="drugoy_document.html" shape="rect" coords="25,36,114,98"> </map>

Для того, чтобы связать карту с картинкой, надо использовать атрибут usemap="#имя_карты" для картинки:

<img src="bluerects.gif" usemap="#karta1"> ... Куча текста и всякого содержания, или ничего... <map name="karta1"> <area href="drugoy_document.html" shape="rect" coords="25,36,114,98"> </map>

Смотрим результат (нажмите на прямоугольник №1):

Теперь сами пропишите <area> для прямоугольника №2 для тренировки (x1=153, y1=11, x2=219, y2=127), а затем шагайте на следующую ступеньку, где мы продолжим разговор о картах.

Ступенька 18-ая.

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

Укажем тип области:

<map> <area shape="circle"> </map>

Для создания круглой области нам будут нужны координаты ее центра (x и y) и длина радиуса (R) в пикселях. Т.е. порядок записи следующий:

<area shape="circle" coords="x,y,R">

Давайте, будем опять работать с геометрической областью №1. В нашем случае координаты для маленького круга будут такие: x=46, y=48; а длина радиуса - R=35. Запишем:

<map> <area shape="circle" coords="46,48,35"> </map>

Теперь, когда самое главное записано, пропишем имя карты, куда она ссылается, и привяжем карту к рисунку:

<img src="mapcircle.gif" usemap="#karta2"> ... Куча текста и всякого содержания, или ничего... <map name="karta2"> <area href="drugoy_document2.html" shape="circle" coords="46,48,35"> </map>

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

Теперь при наведении на область №1 будет всплывать подсказка. В нашем случае это будут слова "маленький круг".

Давайте, посмотрим результат (нажмите на первый круг):

Теперь вы самостоятельно сделаете ссылкой второй круг (x=158, y=75, R=53), чтобы закрепить пройденное. А затем следующая ступенька ждет вас.