Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
Программисты на работе общаются двумя фразами: "непонятно" и "вроде работает".

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

Разговор подруг:
- Мой муж программист - дебил. Сделали сыну прививки и он написал на ребенке маркером: «Вирусная база обновлена 01.10.12 г.»

  Моя группа в контакте:



работаем с ссылками

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

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

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

Для начала создадим новый документ (в нашем примере: primer.html) в той же директории (папке), где находится наш главный документ index.html. Содержание документа не имеет значения, но желательно написать слово «обратно» это слово будет анкером для ссылки на главную страницу.

На главной странице, ссылкой мы сделаем слова «жми сюда» и выглядит это так:

<a href="primer.html">жми сюда</a>

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

      код страницы "index.html"
<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
<div align="center">
Получилось!!! <br/>
Это моя первая страница.<br/>
<font color="red"> Привет!!! </font><br/>
<a href="primer.html">жми сюда</a><br/>
<img src="image/coloboc3.png">
</div>
</body>
</html>
посмотреть
      код страницы "primer.html"
<html>
<head>
<title>Моя первая ссылка</title>
</head>
<body>
<div align="center">
<a href="index.html">обратно</a><br/>
</div>
</body>
</html>
посмотреть

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

vlink - цвет ссылки,
alink - цвет активной ссылки (нажатой),
link - цвет уже посещенной ссылки.

Как и цвет для всего документа, цвета ссылок мы прописываем в <body>:

<body vlink="green" link="gold" alink="red">

<html>
<head>
<title>Моя первая ссылка</title>
</head>
<body vlink="green" link="gold" alink="red">
<div align="center">
<a href="#">Знак "#" просто перезагружает страницу</a><br/>
</div>
</body>
</html>
посмотреть

По умолчанию все страницы, по которым вы переходите, открываются в текущем окне, но при помощи атрибута «TARGET="_blank"» для тэга </a> вы можете сделать так, чтобы загружаемая страница открывалась в новом окне (вкладке) браузера. Пример:

<a href="primer.html" TARGET="_blank">жми сюда</a>

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

<a href="#"><font color="red">Анкер</font></a>

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

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

<a href="primer.html"> <img src="img/coloboc3.png"> </a>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 

Проверьте свою интуицию:


Мобильную версию можно скачать в google play

Комментарии


Нет комментариев. Вы можете стать первым !

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь