KNOWLEDGE HYPERMARKET

Ссылки как основа гипертекста. Полные уроки
Строка 11: Строка 11:
Остальные же документы можно называть как угодно. Также все они могут лежать в одной или в разных директориях.  
Остальные же документы можно называть как угодно. Также все они могут лежать в одной или в разных директориях.  
-
А связываются эти документы между собой с помощью '''гиперссылок.''' Например, с главной страницы сайт по ссылкам можно перейти на отдельную страницу (с фотографиями или информацией об авторе); с этой страницы можно перейти обратно на главную или еще на какую-либо и т.д.  
+
А связываются эти документы между собой с помощью '''гиперссылок.''' Например, с главной страницы сайт по ссылкам можно перейти на отдельную страницу (с фотографиями или информацией об авторе); с этой страницы можно перейти обратно на главную или еще на какую-либо и т.д.<br>  
-
 
+
-
<br>  
+
-
 
+
-
{{#ev:youtube|arAqiixS2oo&feature=related}}
+
<br>  
<br>  
Строка 35: Строка 31:
''&lt;a href="foto.html"&gt;посмотреть фотографии&lt;/a&gt;'' <br>  
''&lt;a href="foto.html"&gt;посмотреть фотографии&lt;/a&gt;'' <br>  
-
 
+
<br>
[[Image:Href1.jpg]]  
[[Image:Href1.jpg]]  
-
 
+
<br>
Итак, из выше изложенного видно, что за вставку ссылок в документ отвечает тэг'''&lt;a&gt;.''' <br>  
Итак, из выше изложенного видно, что за вставку ссылок в документ отвечает тэг'''&lt;a&gt;.''' <br>  
Строка 63: Строка 59:
''&lt; body link="green" alink="red" vlink="blue" &gt;'' <br>  
''&lt; body link="green" alink="red" vlink="blue" &gt;'' <br>  
 +
<br>
-
 
+
атрибут '''LINK '''– задает цвет просто ссылки  
-
атрибут '''LINK '''– задает цвет просто ссылки
+
[[Image:Href2.jpg]]  
[[Image:Href2.jpg]]  
 +
<br>
-
 
+
атрибут '''ALINK''' – задет цвет активной (нажатой) ссылки  
-
атрибут '''ALINK''' – задет цвет активной (нажатой) ссылки
+
[[Image:Href3.jpg]]  
[[Image:Href3.jpg]]  
-
 
+
<br>
атрибут '''VLINK''' – задает цвет уже посещенной ссылки. <br>  
атрибут '''VLINK''' – задает цвет уже посещенной ссылки. <br>  
Строка 89: Строка 85:
''&lt;a href="foto.html" title="Текст подсказки"&gt; посмотреть фотографии &lt;/a&gt;'' <br>  
''&lt;a href="foto.html" title="Текст подсказки"&gt; посмотреть фотографии &lt;/a&gt;'' <br>  
-
 
+
<br>
[[Image:Href5.jpg]]  
[[Image:Href5.jpg]]  
 +
<br>
-
 
+
<br>
-
 
+
'''Ссылки на электронный ящик. '''<br>  
'''Ссылки на электронный ящик. '''<br>  
Строка 105: Строка 101:
''Итак: &lt;a href="mailto:user123 @ ukr. net"&gt; Напишите мне &lt;/a&gt;'' <br>  
''Итак: &lt;a href="mailto:user123 @ ukr. net"&gt; Напишите мне &lt;/a&gt;'' <br>  
-
 
+
<br>
[[Image:Href6.jpg]]  
[[Image:Href6.jpg]]  
-
 
+
<br>
{{#ev:youtube|l3TK9YiSknQ}}  
{{#ev:youtube|l3TK9YiSknQ}}  
Строка 143: Строка 139:
''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''  
''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''  
-
Если у вас есть исправления или предложения к данному уроку, [http://xvatit.com/index.php?do=feedback напишите нам].  
+
----
 +
 
 +
'''<u>Над уроком работали</u>'''
 +
 
 +
Костюк В. А.
 +
 
 +
Соловьев М. С.
 +
 
 +
 
 +
----
 +
 
 +
 
 +
 
 +
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов&nbsp; высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
 +
   
 +
 
-
Если вы хотите увидеть другие корректировки и пожелания к урокам, смотрите здесь - [http://xvatit.com/forum/ Образовательный форум].
 
[[Category:Информатика_10_класс]]
[[Category:Информатика_10_класс]]

Версия 13:33, 29 марта 2011

Гипермаркет знаний>>Информатика>>Информатика 10 класс. Полные уроки>>Информатика: Ссылки как основа гипертекста.


Тема: Ссылки как основа гипертекста.

Цель: Объяснить схему действия гиперссылок. Научить создавать ссылки и эффективно использовать их.

Как известно, сайт состоит из нескольких веб-страниц или документов. Один из них главный (его рекомендуется именовать как index.html) - он всегда открывается первым и должен обязательно присутсвовать на сайте в Интернете.

Остальные же документы можно называть как угодно. Также все они могут лежать в одной или в разных директориях.

А связываются эти документы между собой с помощью гиперссылок. Например, с главной страницы сайт по ссылкам можно перейти на отдельную страницу (с фотографиями или информацией об авторе); с этой страницы можно перейти обратно на главную или еще на какую-либо и т.д.


Гиперссылкой может служить как текст, так и картинка. Но в этом уроке изучим только первый вариант.

Для того, чтобы ссылка работала, нужно создать новую веб-страницу в той же директории, где размещен главный документ index.html.

Содержание страницы может быть любым.




Пусть это будет foto.html – страница с чьими-то фотографиями. Тогда фразу "Посмотреть фотографии" можно сделать ссылкой на foto.html:

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


Href1.jpg


Итак, из выше изложенного видно, что за вставку ссылок в документ отвечает тэг<a>.

Другими словами, текст или фраза, заключенная между <a> и </a> становиться ссылкой.

Принципы прописывания пути все те же:

<a href="foto.html">фотографии</a>

<a href="fotos/foto.html">фотографии</a>

<a href="http: //www .sait .com.ua/foto.html">фотографии</a>


Элемент <a> имеет несколько дополнительных атрибутов, но они прописываются вместе с тэгом <body>.

К примеру, можно прописать цвет ссылок в нашем документе.

Код задания цвета ссылками пишется таким образом:

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


атрибут LINK – задает цвет просто ссылки

Href2.jpg


атрибут ALINK – задет цвет активной (нажатой) ссылки

Href3.jpg


атрибут VLINK – задает цвет уже посещенной ссылки.

Href4.jpg


Еще одной интересной деталью в этой теме есть команда, отвечающая за выведения подсказки ссылки при наведении курсора мышки на ссылку.

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

<a href="foto.html" title="Текст подсказки"> посмотреть фотографии </a>


Href5.jpg



Ссылки на электронный ящик.

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

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

Итак: <a href="mailto:user123 @ ukr. net"> Напишите мне </a>


Href6.jpg




Вопросы:

1. Зачем нужны гиперссылки?

2. Как создать ссылку на какую-либо страницу?

3. С помощью каких команд можно варьировать цвет ссылок?

4. Как вывести подсказку при наведении указателя мышки на ссылку?

5. Ссылки на электронную почту (e-mail) – технология создания.


Список использованных источников:

1. Урок на тему: «Гиперссылки в HTML-документе», Костюк В. А., г. Винница.

2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.

3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.

4. Хольцшлаг М. Языки HTML и CSS: для создания Web-сайтов. - М.: ТРИУМФ, 2007 г.


Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.

Над уроком работали

Костюк В. А.

Соловьев М. С.



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

Источник — «http://edufuture.biz/index.php?title=%D0%A1%D1%81%D1%8B%D0%BB%D0%BA%D0%B8_%D0%BA%D0%B0%D0%BA_%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%B0_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0._%D0%9F%D0%BE%D0%BB%D0%BD%D1%8B%D0%B5_%D1%83%D1%80%D0%BE%D0%BA%D0%B8»
Предмети > Информатика > Информатика 10 класс

Авторські права | Privacy Policy |FAQ | Партнери | Контакти | Кейс-уроки

©  Автор системы образования 7W и Гипермаркета Знаний - Владимир Спиваковский

При использовании материалов ресурса
ссылка на edufuture.biz обязательна (для интернет ресурсов - гиперссылка).
edufuture.biz 2008-© Все права защищены.
Сайт edufuture.biz является порталом, в котором не предусмотрены темы политики, наркомании, алкоголизма, курения и других "взрослых" тем.

Разработка - Гипермаркет знаний 2008-

Ждем Ваши замечания и предложения на email:
По вопросам рекламы и спонсорства пишите на email: