<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Картинка-посилання.</metakeywords>
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Картинка-посилання.</metakeywords>
-
'''Тема: Картинка-посилання.'''
+
== Тема ==
-
'''Мета:''' Розглянути процес створення графічних посилань.
+
*'''Картинка-посилання.'''
-
'''Тип уроку:''' теоретично-практичний
+
== Мета ==
-
'''Хід уроку:'''
+
*Розглянути процес створення графічних посилань.
-
<br> Як було вже сказано в попередньому уроці, основою для гіперпосилання може служити не лише текстовий фрагмент, але і будь-який графічний елемент (картинка, малюнок, фотографія тощо). Принцип створення таких посилань практично той же, що і у випадку з текстом.
+
== Тип уроку ==
+
+
*теоретично-практичний
+
+
== Хід уроку ==
+
+
=== Вступ ===
+
+
<br> Як було вже сказано в попередньому уроці, основою для [[Конспект уроку на тему: Гіпертекст. Гіпертекстові сторінки. Служба WWW.|гіперпосилання]] може служити не лише текстовий фрагмент, але і будь-який графічний елемент (картинка, малюнок, фотографія тощо). Принцип створення таких посилань практично той же, що і у випадку з текстом.
Але зараз в тег '''<a></a>''' вставлятиметься не текстова інформація, а картинка:
Але зараз в тег '''<a></a>''' вставлятиметься не текстова інформація, а картинка:
Строка 21:
Строка 29:
<br>
<br>
-
[[Image:Img-ss1.jpg]]
+
[[Image:Img-ss1.jpg|480px|Картинка-посилання]]
<br>
<br>
-
Тепер картинка з «мотоциклістом» служить гіперпосиланням на сторінку «foto.html». Але враження від розміщення і взаємозв'язку тексту з картинкою не дуже приємні.
+
Тепер картинка з «мотоциклістом» служить гіперпосиланням на сторінку «foto.html». Але враження від розміщення і взаємозв'язку [[Операции при создании текстов|тексту]] з картинкою не дуже приємні.
-
''По-перше,'' треба прибрати рамку з графічного посилання, тому що вона абсолютно не надає картинці естетичного вигляду. Отже, обрамлення картинки прибирається командою «border» зі значенням «0».
+
'''По-перше,''' треба прибрати рамку з графічного посилання, тому що вона абсолютно не надає картинці естетичного вигляду. Отже, обрамлення картинки прибирається командою «border» зі значенням «0».
-
''По-друге'', треба виставити параметри обтікання картинки текстом. Робимо це за допомогою вже відомої команди «align».
+
'''По-друге''', треба виставити параметри обтікання картинки текстом. Робимо це за допомогою вже відомої команди «align».
-
Поправляємо наш HTML-код:
+
Поправляємо наш [[Вступление в HTML. Полные уроки|HTML]]-код:
Також можна зробити яке-небудь зображення або картинку посиланням на власну електронну поштову скриньку.
+
Також можна зробити яке-небудь зображення або картинку посиланням на власну електронну [[Конспект уроку на тему: Електронна пошта. Поштові стандарти. Електронна адреса.|поштову скриньку]].
Якщо картинка є посиланням, то рамка буде того кольору, який задавався для посилань біля тегу <body> за допомогою команд ''LINK, VLINK, ALINK''.
+
Якщо картинка є посиланням, то рамка буде того кольору, який задавався для посилань біля [[Основные теги. Каркас веб-страницы. Полные уроки|тегу]] <body> за допомогою команд ''LINK, VLINK, ALINK''.
Тому, атрибут ''«bordercolor»'' в цьому випадку не впливатиме на колір рамки.
Тому, атрибут ''«bordercolor»'' в цьому випадку не впливатиме на колір рамки.
Строка 75:
Строка 83:
<br>
<br>
-
'''Графічне посилання на мультимедійні файли.'''
+
=== Графічне посилання на мультимедійні файли ===
-
Блукаючи по Інтернету, часто можна потрапити на посилання для завантаження музичних файлів, фільмів, документів, фотографій, архівів і т.д. А це означає, що гіперпосилання працюють не лише з файлами з розширенням *.html, але з багатьма іншими - ''*.mp3, *.avi, *.doc, *.jpg, *.rar'' тощо. Використовуючи картинку-посилання, можна надати деяку естетичність процесу завантаження, наприклад, музичної композиції, використовуючи при цьому звичну усім іконку аудіофайлу:
+
Блукаючи по Інтернету, часто можна потрапити на посилання для завантаження музичних файлів, фільмів, документів, фотографій, архівів і т.д. А це означає, що гіперпосилання працюють не лише з файлами з розширенням *.html, але з багатьма іншими - ''*.mp3, *.avi, *.doc, *.jpg, *.rar'' тощо. Використовуючи картинку-посилання, можна надати деяку естетичність процесу завантаження, наприклад,[http://xvatit.com/relax/music-clips/ музичної композиції], використовуючи при цьому звичну усім іконку аудіофайлу:
При натисненні на таке посилання, у користувача з'явиться віконце, яке запропонує зберегти музичну композицію на комп'ютер.
+
При натисненні на таке посилання, у користувача з'явиться віконце, яке запропонує зберегти музичну композицію на [[Оцінювання до теми «Мій комп'ютер»|комп'ютер]].
<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>
-
''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''
+
----
+
+
<br> ''Скомпоновано та надіслано викладачем Київського національного [http://xvatit.com/vuzi/ університету] імені Тараса Шевченка Соловйовим М. С.''
+
+
<br>
+
+
----
+
+
<br> '''Над уроком працювали'''
+
+
Шак До. В.
+
+
Соловйов М. С.
+
+
<br>
-
<br> Якщо у вас є виправлення чи пропозиції до цього уроку, [http://xvatit.com/index.php?do=feedback напишіть нам].
+
----
-
Якщо ви хочете побачити інші виправлення чи пропозиції до уроків, дивіться тут - [http://xvatit.com/forum/ Образовательный форум].
+
<br> Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
Як було вже сказано в попередньому уроці, основою для гіперпосилання може служити не лише текстовий фрагмент, але і будь-який графічний елемент (картинка, малюнок, фотографія тощо). Принцип створення таких посилань практично той же, що і у випадку з текстом.
Але зараз в тег <a></a> вставлятиметься не текстова інформація, а картинка:
<a href="foto.html"><img src="im 1.jpg"></a>
Ось що у нас вийшло:
Тепер картинка з «мотоциклістом» служить гіперпосиланням на сторінку «foto.html». Але враження від розміщення і взаємозв'язку тексту з картинкою не дуже приємні.
По-перше, треба прибрати рамку з графічного посилання, тому що вона абсолютно не надає картинці естетичного вигляду. Отже, обрамлення картинки прибирається командою «border» зі значенням «0».
По-друге, треба виставити параметри обтікання картинки текстом. Робимо це за допомогою вже відомої команди «align».
Якщо картинка є посиланням, то рамка буде того кольору, який задавався для посилань біля тегу <body> за допомогою команд LINK, VLINK, ALINK.
Тому, атрибут «bordercolor» в цьому випадку не впливатиме на колір рамки.
Графічне посилання на мультимедійні файли
Блукаючи по Інтернету, часто можна потрапити на посилання для завантаження музичних файлів, фільмів, документів, фотографій, архівів і т.д. А це означає, що гіперпосилання працюють не лише з файлами з розширенням *.html, але з багатьма іншими - *.mp3, *.avi, *.doc, *.jpg, *.rar тощо. Використовуючи картинку-посилання, можна надати деяку естетичність процесу завантаження, наприклад,музичної композиції, використовуючи при цьому звичну усім іконку аудіофайлу:
При натисненні на таке посилання, у користувача з'явиться віконце, яке запропонує зберегти музичну композицію на комп'ютер.
Самоконтроль
1. За допомогою яких команд картинку можна зробити як посилання?
2. Як прибрати рамку навколо графічного гіперпосилання?
3. Як і чим можна змінювати колір рамки навколо картинки?
Список використаної літератури
1. Урок на тему: «Графічні посилання», Шак До. В., м. Харків.
2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.
3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.
4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.
5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.
Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.
Над уроком працювали
Шак До. В.
Соловйов М. С.
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.
