KNOWLEDGE HYPERMARKET


Картинка-посилання. Повні уроки
 
Строка 3: Строка 3:
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Картинка-посилання.</metakeywords>  
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Картинка-посилання.</metakeywords>  
-
==Тема==
+
== Тема ==
-
*'''Картинка-посилання.'''
+
-
==Мета==
+
*'''Картинка-посилання.'''
-
*Розглянути процес створення графічних посилань.  
+
-
==Тип уроку==
+
== Мета ==
-
*теоретично-практичний
+
-
==Хід уроку==
+
*Розглянути процес створення графічних посилань.
-
===Вступ===  
+
== Тип уроку ==
-
<br> Як було вже сказано в попередньому уроці, основою для гіперпосилання може служити не лише текстовий фрагмент, але і будь-який графічний елемент (картинка, малюнок, фотографія тощо). Принцип створення таких посилань практично той же, що і у випадку з текстом.  
+
*теоретично-практичний
 +
 
 +
== Хід уроку ==
 +
 
 +
=== Вступ ===
 +
 
 +
<br> Як було вже сказано в попередньому уроці, основою для [[Конспект уроку на тему: Гіпертекст. Гіпертекстові сторінки. Служба WWW.|гіперпосилання]] може служити не лише текстовий фрагмент, але і будь-який графічний елемент (картинка, малюнок, фотографія тощо). Принцип створення таких посилань практично той же, що і у випадку з текстом.  
Але зараз в тег '''&lt;a&gt;&lt;/a&gt;''' вставлятиметься не текстова інформація, а картинка:  
Але зараз в тег '''&lt;a&gt;&lt;/a&gt;''' вставлятиметься не текстова інформація, а картинка:  
Строка 30: Строка 33:
<br>  
<br>  
-
Тепер картинка з «мотоциклістом» служить гіперпосиланням на сторінку «foto.html». Але враження від розміщення і взаємозв'язку тексту з картинкою не дуже приємні.  
+
Тепер картинка з «мотоциклістом» служить гіперпосиланням на сторінку «foto.html». Але враження від розміщення і взаємозв'язку [[Операции при создании текстов|тексту]] з картинкою не дуже приємні.  
'''По-перше,''' треба прибрати рамку з графічного посилання, тому що вона абсолютно не надає картинці естетичного вигляду. Отже, обрамлення картинки прибирається командою «border» зі значенням «0».  
'''По-перше,''' треба прибрати рамку з графічного посилання, тому що вона абсолютно не надає картинці естетичного вигляду. Отже, обрамлення картинки прибирається командою «border» зі значенням «0».  
Строка 36: Строка 39:
'''По-друге''', треба виставити параметри обтікання картинки текстом. Робимо це за допомогою вже відомої команди «align».  
'''По-друге''', треба виставити параметри обтікання картинки текстом. Робимо це за допомогою вже відомої команди «align».  
-
Поправляємо наш HTML-код:  
+
Поправляємо наш [[Вступление в HTML. Полные уроки|HTML]]-код:  
''&lt;a href="foto.html"&gt;&lt;img src="im 1.jpg" border="0" align="left"&gt;&lt;/a&gt;''  
''&lt;a href="foto.html"&gt;&lt;img src="im 1.jpg" border="0" align="left"&gt;&lt;/a&gt;''  
Строка 48: Строка 51:
<br>  
<br>  
-
===Графічне посилання на e - mail===  
+
=== Графічне посилання на e - mail ===
-
Також можна зробити яке-небудь зображення або картинку посиланням на власну електронну поштову скриньку.  
+
Також можна зробити яке-небудь зображення або картинку посиланням на власну електронну [[Конспект уроку на тему: Електронна пошта. Поштові стандарти. Електронна адреса.|поштову скриньку]].  
Принцип такий же:  
Принцип такий же:  
Строка 70: Строка 73:
<br>  
<br>  
-
===Колір рамки===  
+
=== Колір рамки ===
У цьому прикладі був заданий синій колір рамки.  
У цьому прикладі був заданий синій колір рамки.  
-
Якщо картинка є посиланням, то рамка буде того кольору, який задавався для посилань біля тегу &lt;body&gt; за допомогою команд ''LINK, VLINK, ALINK''.  
+
Якщо картинка є посиланням, то рамка буде того кольору, який задавався для посилань біля [[Основные теги. Каркас веб-страницы. Полные уроки|тегу]] &lt;body&gt; за допомогою команд ''LINK, VLINK, ALINK''.  
Тому, атрибут ''«bordercolor»'' в цьому випадку не впливатиме на колір рамки.  
Тому, атрибут ''«bordercolor»'' в цьому випадку не впливатиме на колір рамки.  
<br>  
<br>  
-
===Графічне посилання на мультимедійні файли===
 
-
Блукаючи по Інтернету, часто можна потрапити на посилання для завантаження музичних файлів, фільмів, документів, фотографій, архівів і т.д. А це означає, що гіперпосилання працюють не лише з файлами з розширенням *.html, але з багатьма іншими - ''*.mp3, *.avi, *.doc, *.jpg, *.rar'' тощо. Використовуючи картинку-посилання, можна надати деяку естетичність процесу завантаження, наприклад, музичної композиції, використовуючи при цьому звичну усім іконку аудіофайлу:  
+
=== Графічне посилання на мультимедійні файли ===
 +
 
 +
Блукаючи по Інтернету, часто можна потрапити на посилання для завантаження музичних файлів, фільмів, документів, фотографій, архівів і т.д. А це означає, що гіперпосилання працюють не лише з файлами з розширенням *.html, але з багатьма іншими - ''*.mp3, *.avi, *.doc, *.jpg, *.rar'' тощо. Використовуючи картинку-посилання, можна надати деяку естетичність процесу завантаження, наприклад,[http://xvatit.com/relax/music-clips/  музичної композиції], використовуючи при цьому звичну усім іконку аудіофайлу:  
''&lt;a href="music.mp3"&gt;&lt;img src="winamp.jpg" border="0"&gt;&lt;/a&gt;''  
''&lt;a href="music.mp3"&gt;&lt;img src="winamp.jpg" border="0"&gt;&lt;/a&gt;''  
Строка 89: Строка 93:
<br>  
<br>  
-
При натисненні на таке посилання, у користувача з'явиться віконце, яке запропонує зберегти музичну композицію на комп'ютер.  
+
При натисненні на таке посилання, у користувача з'явиться віконце, яке запропонує зберегти музичну композицію на [[Оцінювання до теми «Мій комп'ютер»|комп'ютер]].  
-
 
+
<br> [[Image:Img-ss6.jpg|480px|Картинка-посилання]]  
-
[[Image:Img-ss6.jpg|480px|Картинка-посилання]]  
+
<br>  
<br>  
Строка 98: Строка 101:
{{#ev:youtube|QObbQrVsqQk}}  
{{#ev:youtube|QObbQrVsqQk}}  
 +
<br> {{#ev:youtube|OkRjLiWlmzg}}
-
{{#ev:youtube|OkRjLiWlmzg}}
+
== Самоконтроль ==
-
 
+
-
==Самоконтроль==
+
-
<br> ''1. За допомогою яких команд картинку можна зробити як посилання? ''
+
<br> ''1. За допомогою яких команд картинку можна зробити як посилання? ''  
-
''2. Як прибрати рамку навколо графічного гіперпосилання? ''
+
''2. Як прибрати рамку навколо графічного гіперпосилання? ''  
-
''3. Як і чим можна змінювати колір рамки навколо картинки? ''
+
''3. Як і чим можна змінювати колір рамки навколо картинки? ''  
<br>  
<br>  
-
==Список використаної літератури==  
+
== Список використаної літератури ==
-
<br> ''1. Урок на тему: «Графічні посилання», Шак До. В., м. Харків. ''
+
<br> ''1. Урок на тему: «Графічні посилання», Шак До. В., м. Харків. ''  
-
''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>  
Строка 127: Строка 129:
----
----
 +
<br> ''Скомпоновано та надіслано викладачем Київського національного [http://xvatit.com/vuzi/ університету] імені Тараса Шевченка Соловйовим М. С.''
-
''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''
+
<br>
-
 
+
----
----
 +
<br> '''Над уроком працювали'''
-
'''Над уроком працювали'''
+
Шак До. В.
-
Шак До. В.
+
Соловйов М. С.  
-
 
+
-
Соловйов М. С.
+
 +
<br>
----
----
-
 
+
<br> Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов&nbsp; высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>  
-
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов&nbsp; высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>  
+
-
 
+
[[Category:Інформатика_10_клас]]
[[Category:Інформатика_10_клас]]

Текущая версия на 21:08, 4 ноября 2012

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

Содержание

Тема

  • Картинка-посилання.

Мета

  • Розглянути процес створення графічних посилань.

Тип уроку

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

Хід уроку

Вступ


Як було вже сказано в попередньому уроці, основою для гіперпосилання може служити не лише текстовий фрагмент, але і будь-який графічний елемент (картинка, малюнок, фотографія тощо). Принцип створення таких посилань практично той же, що і у випадку з текстом.

Але зараз в тег <a></a> вставлятиметься не текстова інформація, а картинка:

<a href="foto.html"><img src="im 1.jpg"></a>

Ось що у нас вийшло:


Картинка-посилання


Тепер картинка з «мотоциклістом» служить гіперпосиланням на сторінку «foto.html». Але враження від розміщення і взаємозв'язку тексту з картинкою не дуже приємні.

По-перше, треба прибрати рамку з графічного посилання, тому що вона абсолютно не надає картинці естетичного вигляду. Отже, обрамлення картинки прибирається командою «border» зі значенням «0».

По-друге, треба виставити параметри обтікання картинки текстом. Робимо це за допомогою вже відомої команди «align».

Поправляємо наш HTML-код:

<a href="foto.html"><img src="im 1.jpg" border="0" align="left"></a>


Ось результат:

Картинка-посилання


Графічне посилання на e - mail

Також можна зробити яке-небудь зображення або картинку посиланням на власну електронну поштову скриньку.

Принцип такий же:

<a href="mailto: user123 @ ukr. net"><img src="em.jpg" border="0"></a>


Картинка-посилання


Колір рамки навколо картинки можна задавати атрибутом bordercolor, наприклад:

<a href="mailto: user123 @ ukr. net"><img src="em.jpg" border="5" bordercolor="blue"></a>


Картинка-посилання


Колір рамки

У цьому прикладі був заданий синій колір рамки.

Якщо картинка є посиланням, то рамка буде того кольору, який задавався для посилань біля тегу <body> за допомогою команд LINK, VLINK, ALINK.

Тому, атрибут «bordercolor» в цьому випадку не впливатиме на колір рамки.


Графічне посилання на мультимедійні файли

Блукаючи по Інтернету, часто можна потрапити на посилання для завантаження музичних файлів, фільмів, документів, фотографій, архівів і т.д. А це означає, що гіперпосилання працюють не лише з файлами з розширенням *.html, але з багатьма іншими - *.mp3, *.avi, *.doc, *.jpg, *.rar тощо. Використовуючи картинку-посилання, можна надати деяку естетичність процесу завантаження, наприклад,музичної композиції, використовуючи при цьому звичну усім іконку аудіофайлу:

<a href="music.mp3"><img src="winamp.jpg" border="0"></a>


Картинка-посилання


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


Картинка-посилання




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


1. За допомогою яких команд картинку можна зробити як посилання?

2. Як прибрати рамку навколо графічного гіперпосилання?

3. Як і чим можна змінювати колір рамки навколо картинки?


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


1. Урок на тему: «Графічні посилання», Шак До. В., м. Харків.

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

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

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

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




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




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

Шак До. В.

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




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

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