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

User17 в 21:05, 4 ноября 2012

2012-11-04T21:05:01Z

← Предыдущая		Версия 21:05, 4 ноября 2012
Строка 3:		Строка 3:
	<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Посилання як основа гіпертексту.</metakeywords>		<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Посилання як основа гіпертексту.</metakeywords>

-	==Тема==	+	== Тема ==
-	*'''Посилання як основа гіпертексту.'''	+

-	~~==Мета==~~	+	*'''Посилання як основа гіпертексту.'''
-	*~~Пояснити схему дії гіперпосилань.~~	+
-	*Навчити створювати посилання і ефективно використовувати їх.	+

-	==~~Тип уроку~~==	+	== Мета ==
-	*теоретично-практичний	+

-	~~==Хід~~ уроку==	+	*Пояснити схему дії [[Конспект уроку на тему: Гіпертекст. Гіпертекстові сторінки. Служба WWW.\|гіперпосилань]].
		+	*Навчити створювати посилання і ефективно використовувати їх.

-	==~~=Посилання як основа гіпертексту=~~==	+	== Тип уроку ==

-	Як відомо, сайт складається з декількох веб-сторінок або документів. Один з них головний (його рекомендується іменувати як ''index.html'') - він завжди відкривається першим і повинен бути обов'язково присутнім на сервері (в каталозі з сайтом).<br>	+	*теоретично-практичний
		+
		+	== Хід уроку ==
		+
		+	=== Посилання як основа гіпертексту ===
		+
		+	Як відомо, сайт складається з декількох веб-сторінок або документів. Один з них головний (його рекомендується іменувати як ''index.html'') - він завжди відкривається першим і повинен бути обов'язково присутнім на [[Реферат на тему «Сеть»\|сервері]] (в каталозі з сайтом).<br>

	Інші ж документи можна називати як завгодно. Також, усі вони можуть лежати в одній або в різних директоріях.		Інші ж документи можна називати як завгодно. Також, усі вони можуть лежати в одній або в різних директоріях.

-	А зв'язуються ці документи між собою за допомогою '''гіперпосилань.''' Наприклад, з головної сторінки сайту за допомогою посилань можна перейти на іншу сторінку (з фотографіями або інформацією про автора); з цієї сторінки можна перейти назад на головну або ще на яку-небудь і т. д.	+	А зв'язуються ці документи між собою за допомогою '''гіперпосилань.''' Наприклад, з головної сторінки сайту за допомогою посилань можна перейти на іншу сторінку (з [http://xvatit.com/photoredaktor/ фотографіями] або інформацією про автора); з цієї сторінки можна перейти назад на головну або ще на яку-небудь і т. д.

	<br>		<br>
Строка 51:		Строка 54:
	<br>		<br>

-	Отже, видно, що за вставку посилань в документ відповідає тег '''<a>.''' <br>	+	Отже, видно, що за вставку посилань в документ відповідає [[Основные теги. Каркас веб-страницы. Полные уроки\|тег]] '''<a>.''' <br>

	Іншими словами, текст або фраза, розміщена між <a> і </a> стає посиланням. <br>		Іншими словами, текст або фраза, розміщена між <a> і </a> стає посиланням. <br>
Строка 93:		Строка 96:
	<br>		<br>

-	Ще однією цікавою деталлю в цій темі є команда, яка відповідає за виведення підказки посилання при наведенні курсора мишки на посилання.	+	Ще однією цікавою деталлю в цій темі є команда, яка відповідає за виведення підказки посилання при наведенні курсора [[Презентація до теми «Формування навичок роботи з мишею»\|мишки]] на посилання.

	Атрибут '''TITLE''' (не плутайте з тегом <TITLE>) пропонує інформацію про елемент, для якого він встановлюється. Ми можемо встановити його для тега <a>:		Атрибут '''TITLE''' (не плутайте з тегом <TITLE>) пропонує інформацію про елемент, для якого він встановлюється. Ми можемо встановити його для тега <a>:
Строка 101:		Строка 104:
	[[Image:Href5.jpg\|480px\|Посилання як основа гіпертексту]]		[[Image:Href5.jpg\|480px\|Посилання як основа гіпертексту]]

-	===Посилання на електронний ящик===	+	=== Посилання на електронний ящик ===

-	У мові HTML можливо також прописувати посилання на електронну поштову скриньку (e - mail). <br>	+	У мові [[Вступление в HTML. Полные уроки\|HTML]] можливо також прописувати посилання на електронну поштову скриньку (e - mail). <br>

	В цьому випадку, процес створення посилання трохи відрізняється від звичайного, тому треба запам'ятати цю відмінність. <br>		В цьому випадку, процес створення посилання трохи відрізняється від звичайного, тому треба запам'ятати цю відмінність. <br>
Строка 119:		Строка 122:
	<br>		<br>

-	==Самоконтроль==	+	== Самоконтроль ==

	''1. Навіщо потрібні гіперпосилання? ''<br>		''1. Навіщо потрібні гіперпосилання? ''<br>
Строка 129:		Строка 132:
	''4. Як вивести підказку при наведенні курсора мишки на посилання?''<br>		''4. Як вивести підказку при наведенні курсора мишки на посилання?''<br>

-	''5. Посилання на електронну пошту (e - mail) - процес створення. ''	+	''5. Посилання на [[Конспект уроку на тему: Електронна пошта. Поштові стандарти. Електронна адреса.\|електронну пошту]] (e - mail) - процес створення. ''

	<br>		<br>

-	==Список використаної літератури==	+	== Список використаної літератури ==

-	<br> ''1. Урок на тему: «Гіперпосилання в HTML», Пономаренко А. В., м. Чернівці. ''	+	<br> ''1. Урок на тему: «Гіперпосилання в HTML», Пономаренко А. В., м. Чернівці. ''

-	''2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010. ''	+	''2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010. ''

-	''3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010. ''	+	''3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010. ''

	''4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.''		''4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.''

-	''5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007. ''	+	''5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007. ''

		+	<br>

	----		----

-	<br> ''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''	+	<br> ''Скомпоновано та надіслано викладачем Київського національного [http://xvatit.com/vuzi/ університету] імені Тараса Шевченка Соловйовим М. С.''

		+	<br>

	----		----

		+	<br> '''Над уроком працювали'''

-	~~'''Над уроком працювали'''~~	+	Пономаренко А. В.

-	~~Пономаренко А. В.~~	+	Соловйов М. С.
-		+
-	Соловйов М. С.	+

		+	<br>

	----		----

-		+	<br> Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов  высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
-	Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов  высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>	+
-		+

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

User16 в 18:32, 2 ноября 2012

2012-11-02T18:32:43Z

← Предыдущая		Версия 18:32, 2 ноября 2012
Строка 3:		Строка 3:
	<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Посилання як основа гіпертексту.</metakeywords>		<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Посилання як основа гіпертексту.</metakeywords>

-	~~<br>~~ '''~~Тема:~~ Посилання як основа гіпертексту.'''	+	==Тема==
		+	*'''Посилання як основа гіпертексту.'''

-	~~'''~~Мета~~:'''~~ Пояснити схему дії гіперпосилань. Навчити створювати посилання і ефективно використовувати їх.	+	==Мета==
		+	*Пояснити схему дії гіперпосилань.
		+	*Навчити створювати посилання і ефективно використовувати їх.

-	~~'''~~Тип уроку~~:'''~~ теоретично-практичний	+	==Тип уроку==
		+	*теоретично-практичний

-	~~'''~~Хід уроку~~:'''~~	+	==Хід уроку==
		+
		+	===Посилання як основа гіпертексту===

	Як відомо, сайт складається з декількох веб-сторінок або документів. Один з них головний (його рекомендується іменувати як ''index.html'') - він завжди відкривається першим і повинен бути обов'язково присутнім на сервері (в каталозі з сайтом).<br>		Як відомо, сайт складається з декількох веб-сторінок або документів. Один з них головний (його рекомендується іменувати як ''index.html'') - він завжди відкривається першим і повинен бути обов'язково присутнім на сервері (в каталозі з сайтом).<br>
Строка 15:		Строка 21:
	Інші ж документи можна називати як завгодно. Також, усі вони можуть лежати в одній або в різних директоріях.		Інші ж документи можна називати як завгодно. Також, усі вони можуть лежати в одній або в різних директоріях.

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

	<br>		<br>
Строка 35:		Строка 41:
	<br>		<br>

-	Нехай це буде ''foto.html'' - сторінка з чиїмись фотографіями. Тоді фразу "Подивитися фотографії" можна зробити посиланням на foto.html:	+	Нехай це буде '''foto.html''' - сторінка з чиїмись фотографіями. Тоді фразу "Подивитися фотографії" можна зробити посиланням на foto.html:

	''<a href="foto.html">подивитися фотографії</a>'' <br>		''<a href="foto.html">подивитися фотографії</a>'' <br>
Строка 41:		Строка 47:
	<br>		<br>

-	[[Image:Href1.jpg]]	+	[[Image:Href1.jpg\|480px\|Посилання як основа гіпертексту]]

	<br>		<br>
Строка 71:		Строка 77:
	атрибут '''LINK ''' - задає колір простого (неактивного) посилання		атрибут '''LINK ''' - задає колір простого (неактивного) посилання

-	[[Image:Href2.jpg]]	+	[[Image:Href2.jpg\|480px\|Посилання як основа гіпертексту]]

	<br>		<br>
Строка 77:		Строка 83:
	атрибут '''ALINK''' - задає колір активного (натиснутого) посилання		атрибут '''ALINK''' - задає колір активного (натиснутого) посилання

-	[[Image:Href3.jpg]]	+	[[Image:Href3.jpg\|480px\|Посилання як основа гіпертексту]]

	<br>		<br>
Строка 83:		Строка 89:
	атрибут '''VLINK''' - задає колір вже відвіданого посилання. <br>		атрибут '''VLINK''' - задає колір вже відвіданого посилання. <br>

-	[[Image:Href4.jpg]]	+	[[Image:Href4.jpg\|480px\|Посилання як основа гіпертексту]]

	<br>		<br>
Строка 93:		Строка 99:
	''<a href="foto.html" title="Текст підказки"> подивитися фотографії </a>'' <br>		''<a href="foto.html" title="Текст підказки"> подивитися фотографії </a>'' <br>

-	[[Image:Href5.jpg]]	+	[[Image:Href5.jpg\|480px\|Посилання як основа гіпертексту]]

-	~~<br> '''~~Посилання на електронний ящик~~. '''<br>~~	+	===Посилання на електронний ящик===

	У мові HTML можливо також прописувати посилання на електронну поштову скриньку (e - mail). <br>		У мові HTML можливо також прописувати посилання на електронну поштову скриньку (e - mail). <br>
Строка 105:		Строка 111:
	<br>		<br>

-	[[Image:Href6.jpg]]	+	[[Image:Href6.jpg\|480px\|Посилання як основа гіпертексту]]

	<br>		<br>
Строка 113:		Строка 119:
	<br>		<br>

-	~~'''~~Самоконтроль~~:''' <br>~~	+	==Самоконтроль==

-	1. Навіщо потрібні гіперпосилання? <br>	+	''1. Навіщо потрібні гіперпосилання? ''<br>

-	2. Як створити посилання на іншу веб-сторінку? <br>	+	''2. Як створити посилання на іншу веб-сторінку?'' <br>

-	3. За допомогою яких команд можна варіювати колір посилань?<br>	+	''3. За допомогою яких команд можна варіювати колір посилань?''<br>

-	4. Як вивести підказку при наведенні курсора мишки на посилання?<br>	+	''4. Як вивести підказку при наведенні курсора мишки на посилання?''<br>

-	5. Посилання на електронну пошту (e - mail) - процес створення.	+	''5. Посилання на електронну пошту (e - mail) - процес створення. ''

	<br>		<br>

-	''Список використаної літератури~~:''~~	+	==Список використаної літератури==

-	<br> 1. Урок на тему: «Гіперпосилання в HTML», Пономаренко А. В., м. Чернівці.	+	<br> ''1. Урок на тему: «Гіперпосилання в HTML», Пономаренко А. В., м. Чернівці. ''

-	2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.	+	''2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010. ''

-	3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.	+	''3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010. ''

-	4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.	+	''4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.''

-	5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.	+	''5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007. ''
		+
		+
		+	----

	<br> ''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''		<br> ''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''

-	~~<br> <br> ----~~

-	~~'''<u>Над уроком працювали</u>'''~~	+	----

		+
		+	'''Над уроком працювали'''

	Пономаренко А. В.		Пономаренко А. В.
Строка 150:		Строка 160:
	Соловйов М. С.		Соловйов М. С.

-	~~----~~

		+	----

User11 в 10:20, 10 марта 2011

2011-03-10T10:20:23Z

← Предыдущая		Версия 10:20, 10 марта 2011
Строка 141:		Строка 141:
	<br> ''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''		<br> ''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''

-	<br> ~~Якщо у вас є виправлення чи пропозиції до цього уроку~~, [http://xvatit.com/~~index~~.~~php?do=feedback напишіть нам~~].	+	<br> <br> ----
		+
		+	'''<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 в 13:02, 25 января 2011

2011-01-25T13:02:25Z

← Предыдущая		Версия 13:02, 25 января 2011
Строка 19:		Строка 19:
	<br>		<br>

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

	<br>		<br>
Строка 31:		Строка 31:
	<br>		<br>

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

	<br>		<br>
Строка 109:		Строка 109:
	<br>		<br>

-	{{#ev: youtube\|l3TK9YiSknQ}}	+	{{#ev:youtube\|l3TK9YiSknQ}}

	<br>		<br>

User17: Новая страница: «'''Гіпермаркет Знань>>Інформатика>...»

2011-01-11T14:36:38Z

Новая страница: «'''Гіпермаркет Знань>>Інформатика>...»

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

'''[[Гіпермаркет Знань - перший в світі!|Гіпермаркет Знань]]>>[[Інформатика|Інформатика]]>>[[Інформатика 10 клас. Повні уроки|Інформатика 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 и CSS. Основа любого сайта. - Эксмо, 2010.

3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.

4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.

5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.

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

 Якщо у вас є виправлення чи пропозиції до цього уроку, [http://xvatit.com/index.php?do=feedback напишіть нам].

Якщо ви хочете побачити інші виправлення чи пропозиції до уроків, дивіться тут - [http://xvatit.com/forum/ Образовательный форум].

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