KNOWLEDGE HYPERMARKET


Посилання як основа гіпертексту. Повні уроки
Строка 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:  
''&lt;a href="foto.html"&gt;подивитися фотографії&lt;/a&gt;'' <br>  
''&lt;a href="foto.html"&gt;подивитися фотографії&lt;/a&gt;'' <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:
''&lt;a href="foto.html" title="Текст підказки"&gt; подивитися фотографії &lt;/a&gt;'' <br>  
''&lt;a href="foto.html" title="Текст підказки"&gt; подивитися фотографії &lt;/a&gt;'' <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:
Соловйов М. С.
Соловйов М. С.
-
----
 
 +
----

Версия 18:32, 2 ноября 2012

Гіпермаркет Знань>>Інформатика>>Інформатика 10 клас. Повні уроки>> Інформатика: Посилання як основа гіпертексту.

Содержание

Тема

  • Посилання як основа гіпертексту.

Мета

  • Пояснити схему дії гіперпосилань.
  • Навчити створювати посилання і ефективно використовувати їх.

Тип уроку

  • теоретично-практичний

Хід уроку

Посилання як основа гіпертексту

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

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

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




Гіперпосиланням може служити як текст, так і картинка. Але в цьому уроці вивчимо тільки перший варіант.

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

Зміст сторінки може бути будь-яким.




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

<a href="foto.html">подивитися фотографії</a>


Посилання як основа гіпертексту


Отже, видно, що за вставку посилань в документ відповідає тег <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 - задає колір простого (неактивного) посилання

Посилання як основа гіпертексту


атрибут ALINK - задає колір активного (натиснутого) посилання

Посилання як основа гіпертексту


атрибут VLINK - задає колір вже відвіданого посилання.

Посилання як основа гіпертексту


Ще однією цікавою деталлю в цій темі є команда, яка відповідає за виведення підказки посилання при наведенні курсора мишки на посилання.

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

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

Посилання як основа гіпертексту

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

У мові HTML можливо також прописувати посилання на електронну поштову скриньку (e - mail).

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

Отже: <a href="mailto: user123 @ ukr. net"> Напишіть мені </a>


Посилання як основа гіпертексту




Самоконтроль

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.




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




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

Пономаренко А. В.

Соловйов М. С.




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

Предмети > Інформатика > Інформатика 10 клас