 |
Вставка гиперссылок в web-страницы.
|
|
|
|
Вот мы, наконец, и подошли к предмету, который собственно и делает обыкновенный текст гипертекстом. Ссылки, гиперссылки или links, как Вам больше нравится. Без ссылок трудно, наверное, даже представить себе работу в интернете. И уж конечно, она не была бы без них такой увлекательной. Впрочем, что я Вам буду объяснять, если Вы сами, наверняка, кликаете по этим самым ссылкам и баннерам (которые тоже являются ссылками) каждый день (ну, может не каждый, но часто). Лучше сразу перейдем к рассмотрению вопроса об организации ссылок на странице.
В гипертексте ссылки можно делать
- на конкретное место в просматриваемом документе. Удобно использовать, например, в больших документах в оглавлении для быстрого перехода к нужной главе.
- на другую страницу Вашего сайта. Примеры Вы можете найти на каждом сайте в виде меню. Сюда же можно включить ссылки на изображения, звуковые и прочие файлы мультимедиа, находящиеся на Вашем сайте.
- на конкретное место в других страницах Вашего сайта.
- на другие WEB-страницы и сайты.
- на адрес электронной почты.
- на прочие ресурсы интернета: TelNet, WAIS, Gofer, FTP, Newsgroup.
В этой статье мы рассмотрим употребление единственного тега-контейнера <A>...</A>. Рассмотрение остальных тегов, относящихся к этой теме не актуально, поскольку они или малоупотребляемы, или поддерживаются не всеми браузерами. Тег <A>...</A> имеет два параметра: HREF="" и NAME=. Первый из них должен иметь в качестве значения адрес, по которому находится ресурс, на который Вы ссылаетесь. Второй употребляется для обозначения места в документе, на которое Вы хотите поставить ссылку. Естественно, что в одном теге оба параметра употребляться не могут, т.к. служат для обозначения разных действий. Еще один параметр, который может употребляться совместно с параметром HREF="", параметр TARGET="" указывает, как открывать документ, на который ссылаемся.
Рассмотрим примеры.
|
|
|
1. Ссылка на конкретное место в текущем документе. Для ее организации необходимы два шага. Первый: ставим в месте, на которое хотим сослаться тег <A>...</A> с параметром NAME=. В качестве значения этого параметра можно использовать любую надпись, например link1. В данном случае, для наглядности, мы сошлемся на заголовок этой статьи. Заголовок уже поставлен внутри тега, имеющего вид <A NAME=link1>ВСТАВКА...</A>. В переводе на русский, это называется "поставить якорь". Шаг второй: ставим ссылку на заголовок, т.е. вставляем тег вида <A href="#link1">...</A>. Вместо точек ставим слова, которые будут являться указателем ссылки. Браузер будет выделять эти слова из остального текста. Способ выделения зависит от личных настроек пользователя и от установок, данных Вами в теге BODY. Пробуем: "Чтобы перейти к заголовку этой статьи, щелкните мышкой здесь". Щелкаем на слове "здесь". Для того, чтобы переход был нагляднее, можете уменьшить окно браузера. Обращаю Ваше внимание, что во втором теге к слову link1 прибавился значок #. Работает? Хорошо, пошли дальше.
2. Ссылка на другую страницу Вашего сайта. Это проще. Здесь используется только один тег <A>...</A> с параметром HREF="" т.к. нет необходимости обозначать место, на которое ссылаемся. Файл, содержащий страницу или рисунок которые мы хотим показать, уже имеет имя и нам достаточно указать в качестве значения HREF="" путь к этому файлу и его имя. Например, для перехода к статье о форматировании текстов, файл которой находится в том же каталоге (папке, директории, кому как привычнее), что и файл этой статьи, и называется text.html, необходимо вставить тег <A HREF="text.shtml">статья о форматировании текста</A>. Браузер покажет ссылку так: статья о форматировании текста. Щелкнув по ней, Вы можете убедиться, что она работает. (не забудьте потом нажать кнопку браузера "назад":-) Если файл, на который Вы ссылаетесь, находится в другой директории, необходимо указать путь к этому файлу. Например: <A HREF="img/oz2.jpg"> здесь Вы можете полюбоваться прекрасным лесным озером </A>. В данном случае файл oz2.jpg лежит в папке img. Не забывайте, что при указании путей в ссылках необходимо использовать прямой слеш.
Для тех, кто работает с редактором SNK: для того, чтобы вставить ссылку на файл, принадлежащий к рабочему проекту, достаточно кликнуть правой кнопкой по его названию в левом окошке и выбрать "создать ссылку".
|
|
|
3. Ссылка на конкретное место в других страницах Вашего сайта. Состоит из первых двух, т.е. в параметре HREF="" указывается файл, в котором уже должен быть поставлен якорь, и название этого якоря. Например, в статье "знакомство с HTML" я Вам советовал скачать спецификацию HTML. Там (т.е. в статье "знакомство...) поставлен якорь с именем В и теперь для того, чтобы сослаться на этот совет, мне достаточно поставить тег <A HREF="lang.shtml#B">советовал</A>. В чем Вы можете убедиться, кликнув по ссылке.
4. Ссылка на другие WEB-страницы и сайты. Ну, это совсем просто. Задаете в качестве значения параметра HREF URL-адрес ресурса (т.е. адрес, который Вы набираете в окне адресов браузера, когда хотите открыть какую-нибудь интернет-страницу), помещаете внутрь тега указатель ссылки, и - готово! Например, Вы можете посмотреть мой сайт (к сожалению, немного запущенного из-зи нехватки времени), который является по содержанию копией этого, но выполнен без фреймов и с помощью SSI (об SSI позднее) здесь. Для того, чтобы организовать данную ссылку, я поставил такой код: <A HREF="http://www.ronets.hut.ru">здесь.</A>.
Кстати, указателем ссылки могут быть не только текст, но и изображения. Впрочем, всем Вам это знакомо (я имею в виду использование изображений в качестве указателя ссылки). Да, это те самые, всем так надоевшие баннеры! Но баннеры - не единственный, к счастью, пример употребления изображений в качестве указателя ссылки. Например, для того, чтобы показать Вам то самое озеро, я могу использовать такого вида указатель: 
. Для этого в тег А нужно вставить рисунок. Как это сделать, говорилось в предыдущей статье ВСТАВКА РИСУНКОВ НА СТРАНИЦУ. В данном случае я это сделал при помощи такого куска кода: <A HREF="img/oz2.jpg"><IMG SRC="img/oz2.jpg" ALT="Здесь Вы можете полюбоваться прекрасным утренним озером." WIDTH="40" HEIGHT="30" BORDER="2"></A>. Здесь, вроде бы, все должно быть понятно. Если что-то слишком мудрено изложено, напишите мне, я объясню и, кроме того, помещу ответ на страницу ЧаВо.
|
|
|
5. Ссылка на адрес электронной почты. Как Вы можете видеть, в предыдущей фразе "Вы можете написать мне" слово "мне" выделено как ссылка и при наведении на него указателя мышки в подвале браузера появляется адрес моей электронной почты (у тех, у кого эта функция включена). В ссылке на эл.почту параметр HREF имеет значение "mailto:адрес эл.почты". Т.е. в данном случае код выглядит так: <A HREF="mailto:svoisait@narod.ru">мне</A>.
6. Ссылка на прочие ресурсы интернета: TelNet, WAIS, Gofer, FTP, Newsgroup.
Здесь я приведу только значения параметра HREF для каждого случая:
o telnet://имя сайта
o wais://имя сайта
o gopher://имя сайта
o ftp://имя сайта
o news:имя группы новостей
Вот собственно и все о ссылках. Да, вот собственно и почти все о создании своей странички на своем компьютере. В первом приближении, конечно. Есть еще списки, скрипты, фреймы, и еще много чего. Но, если Вы научились пользоваться тем, о чем я рассказал, Вам вполне по силам сделать приличную вещь. По приходящим письмам я вижу, что многие уже сделали первый шаг, т.е. создали страничку на своей машине и теперь им не терпится выложить ее в инет... А кое-кто уже и это сделал. Не хочу Вас пугать, но скоро Вы поймете, что это только начало. Ну что же, жизнь продолжается! В следующих статьях будем разбираться, что же делать с тем, что мы натворили...
ля форматирования текста существует много тегов. Одни их них используются часто (и их вы быстро запомните), другие - редко (их и не надо запоминать).
Здесь мы рассмотрим те, которые используются часто.
|
|
|
Теги, делающие текст заголовками
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Эти теги выделяют текст в виде заголовков. Т.е. каждый заголовок начинается с новой строки, выделен полужирным шрифтом и имеет свой размер (заголовок первого уровня самый большой, шестого - самый маленький).
Эти теги могут использоваться с параметром горизонтального выравнивания align. Возможные значения этого параметра:
- left - слева,
- right - справа,
- center - по центру,
- jastify - по ширине.
Пример кода:
<html>
<head>
<title>Форматирование html</title>
</head>
<body>
<h1>Это заголовок первого уровня</h1>
<h2>Это заголовок второго уровня</h2>
<h3>Это заголовок третьего уровня</h3>
<h4 align="right">Это заголовок четвертого уровня</h4>
<h5 align="center">Это заголовок пятого уровня</h5>
<h6 align="jastify">Это заголовок шестого уровня</h6>
Это просто текст
</body>
</html>
В окне браузера это будет выглядеть так:
Теги разделения на абзацы и переноса строки
Тег <br> - тег принудительного перевода строки. Текст, после этого тега начинается с новой строки.
Теги <p></p> разделяют текст на абзацы. Перед началом каждого абзаца следует поместить тег <p>, закрывающий тег не обязателен. В отличии от тега <br> абзацы отделяются друг от друга пустой строкой.
У тега <p> есть параметр align, который задает способ выравнивания текста внутри параграфа. Возможные значения этого параметра:
- left - слева,
- right - справа,
- center - по центру,
- jastify - по ширине.
Пример кода:
<html>
<head>
<title>Форматирование html</title>
</head>
<body>
<p align="left">Это абзац, он отделен от всего текста
пустыми строками сверху и снизу и выровнен
по левому краю.</p>
<p align="right">Это абзац, он отделен от всего текста
пустыми строками сверху и снизу и выровнен
по правому краю.</p>
<p align="center">Это абзац, он отделен от всего текста
пустыми строками сверху и снизу и выровнен
по центру.</p>
Это просто текст. <br> Это текст с новой строки.
</body>
</html>
В окне браузера это будет выглядеть так:
Теги, выделяющие текст курсивом
<cite></cite>
<dfn></dfn>
<em></em>
<i></i>
Эти теги выделяют текст курсивом, но делают они это по разным причинам.
Теги <cite></cite> используются для логического выделения названий книг, статей и цитат.
Теги <dfn></dfn> используются для выделения определений.
Тегами <em></em> и <i></i> выделяют важные фрагменты текста. Последний не рекомендуется к употреблению.
|
|
|
Пример кода:
<html>
<head>
<title>Форматирование html</title>
</head>
<body>
<cite>
Этот текст в тегах cite
</cite><br>
<dfn>
Этот текст в тегах dfn
</dfn><br>
<em>
Этот текст в тегах em
</em><br>
<i>
Этот текст в тегах i
</i>
</body>
</html>
В окне браузера это будет выглядеть так:
Теги, выделяющие текст полужирным шрифтом
<strong></strong>
<b></b>
Оба используются для выделения важных фрагментов текста, но предпочтительнее использовать первый.
Пример кода:
<html>
<head>
<title>Форматирование html</title>
</head>
<body>
Просто текст<br>
<strong>
Этот текст в тегах strong
</strong><br>
<b>
Этот текст в тегах b
</b>
</body>
</html>
В окне браузера это будет выглядеть так:
Теги, выделяющие текст подчеркиванием
<ins></ins>
<u></u>
Оба используются для подчеркивания важных фрагментов текста, но предпочтительнее использовать первый.
Пример кода:
<html>
<head>
<title>Форматирование html</title>
</head>
<body>
Просто текст<br>
<ins>
Этот текст в тегах ins
</ins><br>
<u>
Этот текст в тегах u
</u>
</body>
</html>
В окне браузера это будет выглядеть так:
Теги, выводящие текст моноширинным шрифтом
<kbd></kbd>
<samp></samp>
<tt></tt>
Выводят текст моноширинным шрифтом, но предпочтительнее использовать первый.
Пример кода:
<html>
<head>
<title>Форматирование html</title>
</head>
<body>
Просто текст<br>
<kbd>
Этот текст в тегах kbd
</kbd><br>
<samp>
Этот текст в тегах samp
</samp><br>
<tt>
Этот текст в тегах tt
</tt>
</body>
</html>
В окне браузера это будет выглядеть так:
Теги, выводящие текст в верхнем и нижнем индексах
Теги <sub></sub> выводят текст ниже уровня строки шрифтом меньшего размера.
Теги <sup></sup> выводят текст выше уровня строки шрифтом меньшего размера.
Удобны для вывода математических и химических формул.
Пример кода:
<html>
<head>
<title>Форматирование html</title>
</head>
<body>
y=x<sup>2</sup> - уравнение параболы.<br><br>
H<sub>2</sub>O - формула воды.
</body>
</html>
В окне браузера это будет выглядеть так:
Тег font и его параметры
Теги <font></font> указывают параметры шрифта текста:
face - название шрифта. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден (вы же не знаете, какие шрифты установлены на компьютере пользователя), браузер станет использовать следующий по списку.
size - размер шрифта в условных единицах от 1 до 7. По умолчанию размер шрифта равен 3.
color - цвет текста (по умолчанию - черный).
Существуют два способа задания цвета: по имени и указанием шестнадцатеричного кода цвета.
С именными цветами (их 156) все просто, смотрим в соответствующую таблицу, выбираем понравившийся цвет и пишем его имя в значение параметра (например, color="blue").
Но гораздо больший выбор предоставляет второй способ. Здесь мы можем выбирать из миллиона цветов, указав его шестнадцатеричный код. Этот код представляет собой 6 цифр и начинается с символа "#". Не будем вдаваться в подробности, как формируется код цвета, укажем лишь на то, что получить его можно, например, в программе Photoshop. О том, как это делать читайте на странице Цвета для web.
Пример кода:
<html>
<head>
<title>Форматирование html</title>
</head>
<body>
Это простой текст.<br>
<font face="Verdana" size=5 color="red">
Этот текст красный, размера 5.
</font><br>
<font face="Arial" size=2 color="blue">
Этот текст синий, размера 2.
</font>
</body>
</html>
В окне браузера это будет выглядеть так:
Тег center
Теги <center></center> предназначен для выравнивания всех элементов внутри него по центру окна браузера.
Пример кода:
<html>
<head>
<title>Форматирование html</title>
</head>
<body>
Это простой текст
<center>Это выровненный по центру текст.</center>
</body>
</html>
Совместное использование тегов
Мы рассмотрели основные теги форматирования текста, но что если вам необходимо сделать какое-нибудь слово в тексте жирным красным курсивом? Для этого вам придется применить теги strong, font и em вместе. Здесь главное соблюдать порядок вложенности тегов. Тег, который открыт первым, должен быть закрыт последним.
Понятнее будет на примере:
Выделим слово "текст" красным цветом:
<font color="red">Текст</font>
Теперь добавим теги курсива (открывающий - слева, закрывающий - справа):
<em><font color="red">Текст</font></em>
А теперь - теги полужирного начертания:
<strong><em><font color="red">Текст</font></em></strong>
Каждый раз все предыдущие теги мы помещаем в новые. Это и называется порядком вложенности. Вы можете использовать разные теги для оформления текста, главное не нарушать порядок вложенности.
На этом третий урок закончен, мы рассмотрели основные способы оформления текста, на следующем уроке мы рассмотрим менее применимые теги форматирования. Тем не менее, ознакомиться с ними будет не лишним.
|
|
|
