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

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

2013-02-02T19:44:47Z

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

2013-02-01T12:48:01Z

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

2011-03-29T13:29:38Z

← Предыдущая		Версия 13:29, 29 марта 2011
Строка 115:		Строка 115:
	''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''		''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''

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

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

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

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

2010-11-15T11:32:36Z

← Предыдущая		Версия 11:32, 15 ноября 2010
Строка 19:		Строка 19:
	[[Image:Img-ss1.jpg]]		[[Image:Img-ss1.jpg]]

-		+	<br>

	Теперь картинка с «мотоциклистом» служит гиперссылкой на страницу «foto.html». Но впечатление от размещения и взаимосвязи текста с картинкой оставляют желать лучшего.		Теперь картинка с «мотоциклистом» служит гиперссылкой на страницу «foto.html». Но впечатление от размещения и взаимосвязи текста с картинкой оставляют желать лучшего.
Строка 27:		Строка 27:
	'''Во-вторых''', нужно выставить параметры обтекания картинки текстом. Делаем это с помощью уже известной команды «align».		'''Во-вторых''', нужно выставить параметры обтекания картинки текстом. Делаем это с помощью уже известной команды «align».

-	Поправляем наш HTML-код:	+	Поправляем наш HTML-код:
-		+
-	~~''<a href="foto.html"><img src="im1.jpg" border="0" align="left"></a>''~~	+

		+	''<a href="foto.html"><img src="im1.jpg" border="0" align="left"></a>''

		+	<br>

-	Вот результат:	+	Вот результат:

	[[Image:Img-ss2.jpg]]		[[Image:Img-ss2.jpg]]
Строка 45:		Строка 45:
	Принцип такой же:		Принцип такой же:

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

	<br> [[Image:Img-ss3.jpg]]		<br> [[Image:Img-ss3.jpg]]

-		+	<br>

	<u>Цвет рамки вокруг картинки</u> можно задавать атрибутом bordercolor, например:		<u>Цвет рамки вокруг картинки</u> можно задавать атрибутом bordercolor, например:

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

	<br>		<br>
Строка 59:		Строка 59:
	[[Image:Img-ss4.jpg]]		[[Image:Img-ss4.jpg]]

-		+	<br>

	'''Цвет рамки.'''		'''Цвет рамки.'''
Строка 75:		Строка 75:
	Блуждая по Интернету, наверняка не раз можно было попасть на ссылки для скачивания музыки, фильмов, документов, фотографий, архивов и т.д. То есть, это означает, что гиперссылки работают не только с файлами с расширением .html, но с многими другими- ''.mp3, .avi, .doc, .jpg, .rar''. Используя картинку-ссылку, можно придать некоторую эстетичность процессу скачивания, например, музыкальной композиции, используя при этом привычную всем иконку аудиофайла:		Блуждая по Интернету, наверняка не раз можно было попасть на ссылки для скачивания музыки, фильмов, документов, фотографий, архивов и т.д. То есть, это означает, что гиперссылки работают не только с файлами с расширением .html, но с многими другими- ''.mp3, .avi, .doc, .jpg, .rar''. Используя картинку-ссылку, можно придать некоторую эстетичность процессу скачивания, например, музыкальной композиции, используя при этом привычную всем иконку аудиофайла:

-	''<a href="music.mp3"><img src="winamp.jpg" border=”0”></a>''	+	''<a href="music.mp3"><img src="winamp.jpg" border=”0”></a>''
-		+
-		+
-	~~[[Image:Img-ss5.jpg]]~~	+

		+	<br> [[Image:Img-ss5.jpg]]

		+	<br>

	При нажатии на такую ссылку, у пользователя появится окно, предлагающее сохранить музыкальную композицию на компьютер.		При нажатии на такую ссылку, у пользователя появится окно, предлагающее сохранить музыкальную композицию на компьютер.
Строка 86:		Строка 85:
	[[Image:Img-ss6.jpg]]		[[Image:Img-ss6.jpg]]

-		+	<br>

	{{#ev:youtube\|QObbQrVsqQk}}		{{#ev:youtube\|QObbQrVsqQk}}

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

2010-11-15T11:31:58Z

← Предыдущая		Версия 11:31, 15 ноября 2010
Строка 1:		Строка 1:
	'''[[Гипермаркет знаний - первый в мире!\|Гипермаркет знаний]]>>[[Информатика]]>>[[Информатика 10 класс. Полные уроки]]>>Информатика: Картинка-ссылка.'''		'''[[Гипермаркет знаний - первый в мире!\|Гипермаркет знаний]]>>[[Информатика]]>>[[Информатика 10 класс. Полные уроки]]>>Информатика: Картинка-ссылка.'''

-	<metakeywords>Информатика, класс, урок, на тему, 10 класс, Картинка-ссылка.</metakeywords>	+	<metakeywords>Информатика, класс, урок, на тему, 10 класс, Картинка-ссылка.</metakeywords>

-	'''Тема: Картинка-ссылка.'''	+	'''Тема: Картинка-ссылка.'''

	'''Цель:''' Обучить процессу создания графических ссылок вместо текстовых.		'''Цель:''' Обучить процессу создания графических ссылок вместо текстовых.
Строка 11:		Строка 11:
	Но сейчас в тэг '''<a></a>''' будет вставляться не текстовая информация, а картинка:		Но сейчас в тэг '''<a></a>''' будет вставляться не текстовая информация, а картинка:

-	''<a href="foto.html"><img src="im1.jpg"></a>''	+	''<a href="foto.html"><img src="im1.jpg"></a>''

	Вот что у нас вышло:		Вот что у нас вышло:

-		+	<br>

	[[Image:Img-ss1.jpg]]		[[Image:Img-ss1.jpg]]

-	Теперь картинка с «мотоциклистом» служит гиперссылкой на страницу «foto.html». Но впечатление от размещения и взаимосвязи текста с картинкой оставляют желать лучшего. Во-первых, нужно убрать рамку с графической ссылки, потому, как она ну никак не придает картинке эстетического вида. Итак, обрамление картинки убирается командой «border» со значением «0». Во-вторых, нужно выставить параметры обтекания картинки текстом. Делаем это с помощью уже известной команды «align». Поправляем наш HTML-код: <a href="foto.html"><img src="im1.jpg" border="0" align="left"></a>

-	Вот результат: [[Image:Img-ss2.jpg]]	+
		+	Теперь картинка с «мотоциклистом» служит гиперссылкой на страницу «foto.html». Но впечатление от размещения и взаимосвязи текста с картинкой оставляют желать лучшего.
		+
		+	'''Во-первых,''' нужно убрать рамку с графической ссылки, потому, как она ну никак не придает картинке эстетического вида. Итак, обрамление картинки убирается командой «border» со значением «0».
		+
		+	'''Во-вторых''', нужно выставить параметры обтекания картинки текстом. Делаем это с помощью уже известной команды «align».
		+
		+	Поправляем наш HTML-код:
		+
		+	''<a href="foto.html"><img src="im1.jpg" border="0" align="left"></a>''
		+
		+
		+
		+	Вот результат:
		+
		+	[[Image:Img-ss2.jpg]]

	<br>		<br>
Строка 27:		Строка 41:
	'''Графическая ссылка на e-mail'''		'''Графическая ссылка на e-mail'''

-	Также можно сделать какое-либо изображение или картинку ссылкой на собственный электронный почтовый ящик.	+	Также можно сделать какое-либо изображение или картинку ссылкой на собственный электронный почтовый ящик.

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

-	''<a href="mailto:user123@ukr.net"><img src="em.jpg" border=”0”></a>''	+	''<a href="mailto:user123 @ ukr. net"><img src="em.jpg" border=”0”></a>''
		+
		+	<br> [[Image:Img-ss3.jpg]]


-	~~[[Image:Img-ss3.jpg]]~~

	<u>Цвет рамки вокруг картинки</u> можно задавать атрибутом bordercolor, например:		<u>Цвет рамки вокруг картинки</u> можно задавать атрибутом bordercolor, например:

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

		+	<br>

	[[Image:Img-ss4.jpg]]		[[Image:Img-ss4.jpg]]

-	'''Цвет рамки.'''	+
		+
		+	'''Цвет рамки.'''

	В данном примере был задан синий цвет рамки.		В данном примере был задан синий цвет рамки.
Строка 52:		Строка 69:
	Поэтому, атрибут''«bordercolor»'' в этом случае не будет влиять на цвет рамки.		Поэтому, атрибут''«bordercolor»'' в этом случае не будет влиять на цвет рамки.

		+	<br>

-		+	'''Графическая ссылка на мулитьмедийные файлы.'''
-	'''Графическая ссылка на мулитьмедийные файлы.'''	+

	Блуждая по Интернету, наверняка не раз можно было попасть на ссылки для скачивания музыки, фильмов, документов, фотографий, архивов и т.д. То есть, это означает, что гиперссылки работают не только с файлами с расширением .html, но с многими другими- ''.mp3, .avi, .doc, .jpg, .rar''. Используя картинку-ссылку, можно придать некоторую эстетичность процессу скачивания, например, музыкальной композиции, используя при этом привычную всем иконку аудиофайла:		Блуждая по Интернету, наверняка не раз можно было попасть на ссылки для скачивания музыки, фильмов, документов, фотографий, архивов и т.д. То есть, это означает, что гиперссылки работают не только с файлами с расширением .html, но с многими другими- ''.mp3, .avi, .doc, .jpg, .rar''. Используя картинку-ссылку, можно придать некоторую эстетичность процессу скачивания, например, музыкальной композиции, используя при этом привычную всем иконку аудиофайла:

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

	[[Image:Img-ss5.jpg]]		[[Image:Img-ss5.jpg]]
		+
		+

	При нажатии на такую ссылку, у пользователя появится окно, предлагающее сохранить музыкальную композицию на компьютер.		При нажатии на такую ссылку, у пользователя появится окно, предлагающее сохранить музыкальную композицию на компьютер.
Строка 66:		Строка 86:
	[[Image:Img-ss6.jpg]]		[[Image:Img-ss6.jpg]]

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

	{{#ev:youtube\|OkRjLiWlmzg}}		{{#ev:youtube\|OkRjLiWlmzg}}

-	<br> '''Вопросы:'''	+	<br> '''Вопросы:'''

	1. Какие команды делают заданную картинку ссылкой?		1. Какие команды делают заданную картинку ссылкой?
Строка 78:		Строка 100:
	3. Можно изменить цвет рамки вокруг картинки?		3. Можно изменить цвет рамки вокруг картинки?

		+	<br>

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

	1. Урок на тему: «Графические ссылки», Шак К. В., г. Харьков.		1. Урок на тему: «Графические ссылки», Шак К. В., г. Харьков.
Строка 86:		Строка 108:
	2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.		2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.

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

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

		+	<br>

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

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

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

2010-11-15T11:29:23Z

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

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

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

<metakeywords>Информатика, класс, урок, на тему, 10 класс, Картинка-ссылка.</metakeywords>

'''Тема: Картинка-ссылка.'''

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

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

Но сейчас в тэг '''<a></a>''' будет вставляться не текстовая информация, а картинка:

''<a href="foto.html"><img src="im1.jpg"></a>''

Вот что у нас вышло:

[[Image:Img-ss1.jpg]]

Теперь картинка с «мотоциклистом» служит гиперссылкой на страницу «foto.html». Но впечатление от размещения и взаимосвязи текста с картинкой оставляют желать лучшего. Во-первых, нужно убрать рамку с графической ссылки, потому, как она ну никак не придает картинке эстетического вида. Итак, обрамление картинки убирается командой «border» со значением «0». Во-вторых, нужно выставить параметры обтекания картинки текстом. Делаем это с помощью уже известной команды «align». Поправляем наш HTML-код: <a href="foto.html"><img src="im1.jpg" border="0" align="left"></a>

Вот результат: [[Image:Img-ss2.jpg]]

<br>

'''Графическая ссылка на e-mail'''

Также можно сделать какое-либо изображение или картинку ссылкой на собственный электронный почтовый ящик.

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

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

[[Image:Img-ss3.jpg]]

<u>Цвет рамки вокруг картинки</u> можно задавать атрибутом bordercolor, например:

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

[[Image:Img-ss4.jpg]]

'''Цвет рамки.'''

В данном примере был задан синий цвет рамки.

Если картинка есть ссылкой, то рамка будет того цвета, который задавался для ссылок в тэге <body> с помощью ''LINK, VLINK, ALINK''.

Поэтому, атрибут''«bordercolor»'' в этом случае не будет влиять на цвет рамки.

'''Графическая ссылка на мулитьмедийные файлы.'''

Блуждая по Интернету, наверняка не раз можно было попасть на ссылки для скачивания музыки, фильмов, документов, фотографий, архивов и т.д. То есть, это означает, что гиперссылки работают не только с файлами с расширением *.html, но с многими другими- ''*.mp3, *.avi, *.doc, *.jpg, *.rar''. Используя картинку-ссылку, можно придать некоторую эстетичность процессу скачивания, например, музыкальной композиции, используя при этом привычную всем иконку аудиофайла:

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

[[Image:Img-ss5.jpg]]

При нажатии на такую ссылку, у пользователя появится окно, предлагающее сохранить музыкальную композицию на компьютер.

[[Image:Img-ss6.jpg]]

{{#ev:youtube|QObbQrVsqQk}}

{{#ev:youtube|OkRjLiWlmzg}}

<br> '''Вопросы:'''

1. Какие команды делают заданную картинку ссылкой?

2. Как убрать рамку вокруг графической гиперссылки?

3. Можно изменить цвет рамки вокруг картинки?

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

1. Урок на тему: «Графические ссылки», Шак К. В., г. Харьков.

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_класс]]