Ссылки как основа гипертекста. Полные уроки - История изменений

User17 в 19:39, 2 февраля 2013

2013-02-02T19:39:47Z

User16 в 12:44, 1 февраля 2013

2013-02-01T12:44:00Z

User11 в 13:33, 29 марта 2011

2011-03-29T13:33:34Z

← Предыдущая		Версия 13:33, 29 марта 2011
Строка 11:		Строка 11:
	Остальные же документы можно называть как угодно. Также все они могут лежать в одной или в разных директориях.		Остальные же документы можно называть как угодно. Также все они могут лежать в одной или в разных директориях.

-	А связываются эти документы между собой с помощью '''гиперссылок.''' Например, с главной страницы сайт по ссылкам можно перейти на отдельную страницу (с фотографиями или информацией об авторе); с этой страницы можно перейти обратно на главную или еще на какую-либо и т.д.	+	А связываются эти документы между собой с помощью '''гиперссылок.''' Например, с главной страницы сайт по ссылкам можно перейти на отдельную страницу (с фотографиями или информацией об авторе); с этой страницы можно перейти обратно на главную или еще на какую-либо и т.д.<br>
-		+
-	<br>	+
-		+
-	~~{{#ev:youtube\|arAqiixS2oo&feature=related}}~~	+

	<br>		<br>
Строка 35:		Строка 31:
	''<a href="foto.html">посмотреть фотографии</a>'' <br>		''<a href="foto.html">посмотреть фотографии</a>'' <br>

-		+	<br>

	[[Image:Href1.jpg]]		[[Image:Href1.jpg]]

-		+	<br>

	Итак, из выше изложенного видно, что за вставку ссылок в документ отвечает тэг'''<a>.''' <br>		Итак, из выше изложенного видно, что за вставку ссылок в документ отвечает тэг'''<a>.''' <br>
Строка 63:		Строка 59:
	''< body link="green" alink="red" vlink="blue" >'' <br>		''< body link="green" alink="red" vlink="blue" >'' <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:
	''<a href="foto.html" title="Текст подсказки"> посмотреть фотографии </a>'' <br>		''<a href="foto.html" title="Текст подсказки"> посмотреть фотографии </a>'' <br>

-		+	<br>

	[[Image:Href5.jpg]]		[[Image:Href5.jpg]]

		+	<br>

-		+	<br>
-		+

	'''Ссылки на электронный ящик. '''<br>		'''Ссылки на электронный ящик. '''<br>
Строка 105:		Строка 101:
	''Итак: <a href="mailto:user123 @ ukr. net"> Напишите мне </a>'' <br>		''Итак: <a href="mailto:user123 @ ukr. net"> Напишите мне </a>'' <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/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов  высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
		+
		+

-	Если вы хотите увидеть другие корректировки и пожелания к урокам, смотрите здесь - [http://xvatit.com/forum/ Образовательный форум].

	[[Category:Информатика_10_класс]]		[[Category:Информатика_10_класс]]

User17 в 11:24, 15 ноября 2010

2010-11-15T11:24:32Z

Внесённые изменения

User17: Новая страница: «'''Гипермаркет знаний>>Информатика>>[[Информа...»

2010-11-15T11:21:52Z

Новая страница: «'''Гипермаркет знаний>>Информатика>>[[Информа...»

Новая страница

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

<metakeywords>Информатика, класс, урок, на тему, 10 класс, Ссылки как основа гипертекста.</metakeywords> 

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

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

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

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

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

 

{{#ev:youtube|arAqiixS2oo&feature=related}}

 

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

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

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

 

{{#ev:youtube|pRjgPkplt_8&feature=related}}

 

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

 

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

[[Image: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 '''– задает цвет просто ссылки [[Image:Href2.jpg]]

атрибут '''ALINK''' – задет цвет активной (нажатой) ссылки [[Image:Href3.jpg]]

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

 

[[Image:Href4.jpg]]

 

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

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

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

[[Image:Href5.jpg]]

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

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

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

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

[[Image:Href6.jpg]]

{{#ev:youtube|l3TK9YiSknQ}}

 

'''Вопросы:''' 

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

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

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

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

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

 

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

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

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

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

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

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

Если у вас есть исправления или предложения к данному уроку, [http://xvatit.com/index.php?do=feedback напишите нам].

Если вы хотите увидеть другие корректировки и пожелания к урокам, смотрите здесь - [http://xvatit.com/forum/ Образовательный форум].

[[Category:Информатика_10_класс]]