Вставка изображений в веб-страницу. Полные уроки - История изменений

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

2013-02-02T19:27:00Z

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

2013-02-01T12:34:13Z

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

2011-03-29T13:41:59Z

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

-	~~Если у вас есть исправления или предложения к данному уроку, [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 в 10:07, 12 ноября 2010

2010-11-12T10:07:05Z

← Предыдущая		Версия 10:07, 12 ноября 2010
Строка 43:		Строка 43:
	''<img src="http: // www. sait. com. ua / images/image.jpg"> ''		''<img src="http: // www. sait. com. ua / images/image.jpg"> ''

-	~~[[Image~~:]]	+	{{#ev:youtube\|f9FKTetfvKA}}
-		+

		+	<br>

	На практике, для своего же удобства, картинку всегда нужно класть в одну папку с веб-страницей и никакой путаницы не будет.		На практике, для своего же удобства, картинку всегда нужно класть в одну папку с веб-страницей и никакой путаницы не будет.
Строка 93:		Строка 93:
	*вверху - <img src="image.jpg" align="top">		*вверху - <img src="image.jpg" align="top">

		+	<br>

-		+	{{#ev:youtube\| YKJ60H6dsoE}}
-	~~[[Image~~:]]	+

	<br>		<br>

User17 в 10:04, 12 ноября 2010

2010-11-12T10:04:55Z

← Предыдущая		Версия 10:04, 12 ноября 2010
Строка 43:		Строка 43:
	''<img src="http: // www. sait. com. ua / images/image.jpg"> ''		''<img src="http: // www. sait. com. ua / images/image.jpg"> ''

-	~~<br>~~	+	[[Image:]]
		+
		+

	На практике, для своего же удобства, картинку всегда нужно класть в одну папку с веб-страницей и никакой путаницы не будет.		На практике, для своего же удобства, картинку всегда нужно класть в одну папку с веб-страницей и никакой путаницы не будет.
Строка 51:		Строка 53:
	<br>		<br>

-	<u>Вместе с текстом картинка на веб-странице выглядит так:</u>	+	<u>Вместе с текстом картинка на веб-странице выглядит так:</u>
-		+

		+	<br>

	[[Image:Imggg2.jpg]]		[[Image:Imggg2.jpg]]

-		+	<br>

	<br>		<br>
Строка 69:		Строка 71:
	''<img src="image.jpg" align="left">''		''<img src="image.jpg" align="left">''

-	В таком случае картинка будет прижата к левому краю экрана, а текст будет обтекать '''ее справа.'''	+	В таком случае картинка будет прижата к левому краю экрана, а текст будет обтекать '''ее справа.'''

	<br>		<br>
Строка 81:		Строка 83:
	''<img src="image.jpg" align="right">''		''<img src="image.jpg" align="right">''

		+	<br> [[Image:Imggg4.jpg]]

-	~~[[Image:Imggg4.jpg]]~~	+	<br>
-		+
-		+

	<br> Но это еще не все параметры. <u>Текст может располагаться:</u>		<br> Но это еще не все параметры. <u>Текст может располагаться:</u>
Строка 91:		Строка 92:
	*посередине - <img src="image.jpg" align="middle">		*посередине - <img src="image.jpg" align="middle">
	*вверху - <img src="image.jpg" align="top">		*вверху - <img src="image.jpg" align="top">
		+
		+
		+
		+	[[Image:]]

	<br>		<br>
Строка 104:		Строка 109:
	Например: ''<img src="image.jpg" hspace="30">.''		Например: ''<img src="image.jpg" hspace="30">.''

-		+	<br> [[Image:Imggg6.jpg]]
-	[[Image:Imggg6.jpg]]	+

	<br>		<br>

-	'''ALT''' - краткое описание картинки. Если навести курсором мыши на рисунок и подержать его секунду, то выскочит описание картинки (работает только в Internet Explorer).	+	'''ALT''' - краткое описание картинки. Если навести курсором мыши на рисунок и подержать его секунду, то выскочит описание картинки (работает только в Internet Explorer).

-	Описание картинкам задавать нужно (особенно, если они являются кнопками), потому что есть пользователи, которые бродят по Сети с отключенной графикой.	+	Описание картинкам задавать нужно (особенно, если они являются кнопками), потому что есть пользователи, которые бродят по Сети с отключенной графикой.

	А без атрибута «ALT» им не будет видно на что нажимать - если картинка не отображается, при заданном «alt», можно увидеть надпись о предназначении картинки.		А без атрибута «ALT» им не будет видно на что нажимать - если картинка не отображается, при заданном «alt», можно увидеть надпись о предназначении картинки.
Строка 119:		Строка 123:
	<br> [[Image:Alttt.jpg]]		<br> [[Image:Alttt.jpg]]

-		+	<br>

	'''BORDER''' – задает в пикселях толщину рамки вокруг картинки. <img src="image.jpg" border="4">		'''BORDER''' – задает в пикселях толщину рамки вокруг картинки. <img src="image.jpg" border="4">
Строка 129:		Строка 133:
	'''HEIGHT''' - высота самой картинки в пикселях. Если высоту не задавать, то она будет равна реальной высоте картинки.		'''HEIGHT''' - высота самой картинки в пикселях. Если высоту не задавать, то она будет равна реальной высоте картинки.

		+	<br>

-		+	{{#ev:youtube\|FajRB8rmk-8}}
-	~~{{#ev:youtube\|f9FKTetfvKA}}~~	+
-		+
-	~~{{#ev:youtube\| YKJ60H6dsoE}}~~	+
-		+
-	{{#ev:youtube\|FajRB8rmk-8}}	+

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

User17 в 10:03, 12 ноября 2010

2010-11-12T10:03:11Z

Внесённые изменения

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

2010-11-12T09:58:41Z

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

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

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

<metakeywords>Информатика, класс, урок, на тему, 10 класс, Вставка изображений в веб-страницу.</metakeywords> 

'''Тема: Вставка изображений в веб-страницу. '''

'''Цель: '''Научить вставлять графические изображения в html-документ. Рассказать о дополнительных параметрах обработки картинок посредством языка HTML. 

Графика всегда преобладала над другими видами представления информации. Она же не будет исключением и в сфере веб-программирования.

Включение картинок в веб-страницу всегда приводит к успешным проектам или просто к хорошему и красивому интерфейсу сайта.

С помощью какой же команды можно поместить графический элемент на html-страницу?

Все картинки, фотографические снимки, иллюстрации, графики, схемы вставляются в документ при помощи такого элемента, не требующий закрывающей части:

'''<img src="image.jpg">'''

Где «image.jpg» - это собственно вставляемая картинки с ее именем и расширением.

Вся информация, расположенная между кавычками является ссылкой (путь к картинке). В нашем примере картинка лежит в том же папке, где и сама веб-страница.

[[Image:Imggg1.jpg]]

1. Если же картинка лежит в папке, которая лежит в вашей основной папке, то путь к ней будет выглядеть так:

''<img src="papka/image.jpg"> ''

2. Если картинка лежит еще на уровень выше, а сама страница находится в поддиректории, то ссылка будет другой:

''<img src="../image.jpg"> ''

3. Если картинка размещена на другом сайте, то путь прописывается полностью, вот так:

''<img src="http://www.sait.com.ua/images/image.jpg"> ''

На практике, для своего же удобства, картинку всегда нужно класть в одну папку с веб-страницей и никакой путаницы не будет.

Также важно знать, чтоIMAGE.jpg, image.JPG, image.jpg и IMAGE.JPG – это разные имена файлов и регистр имен всегда нужно учитывать.

Вместе с текстом картинка на веб-странице выглядит так:

[[Image:Imggg2.jpg]]

После вставки картинки возникает вопрос: что нужно сделать, чтобы весь текст располагался рядом с картинкой, а не только одна его строчка?

Вспомним об атрибуте '''»''', который отвечает за выравнивание и используется с множеством других тэгов.

Атрибут «align» есть и у картинок:

''<img src="image.jpg" align="left">''

В таком случае картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа.

[[Image:Imggg3.jpg]]

Чтобы разместить картинку справа, а текст обтекает ее слева) надо прописать'''"Right": '''

''<img src="image.jpg" align="right">''

[[Image:Imggg4.jpg]]

 Но это еще не все параметры. Текст может располагаться:

*внизу картинки - <img src="image.jpg" align="bottom">
*посередине - <img src="image.jpg" align="middle">
*вверху - <img src="image.jpg" align="top">

Кроме параметра «ALIGN» для тэга < img > имеется еще несколько атрибутов:

'''VSPACE''' - определяет расстояние между текстом и рисунком по вертикали, задающееся в пикселях.

Например: ''<img src="image.jpg" vspace="20">'', где 20 – это 20 использованных пикселей экрана монитора.

'''HSPACE''' - задает расстояние между текстом и рисунком по горизонтали. Расстояние задается тоже в пикселях.

Например: ''<img src="image.jpg" hspace="30">.''

[[Image:Imggg6.jpg]]

'''ALT''' - краткое описание картинки. Если навести курсором мыши на рисунок и подержать его секунду, то выскочит описание картинки (работает только в Internet Explorer). Описание картинкам задавать нужно (особенно, если они являются кнопками), потому что есть пользователи, которые бродят по Сети с отключенной графикой. А без атрибута «ALT» им не будет видно на что нажимать - если картинка не отображается, при заданном «alt», можно увидеть надпись о предназначении картинки.

''<img src="image.jpg" alt="гонщик">''

[[Image:Alttt.jpg]]

'''BORDER''' – задает в пикселях толщину рамки вокруг картинки. <img src="image.jpg" border="4">

[[Image:Imggg5.jpg]]

'''WIDTH''' - ширина самой картинки в пикселях. Если ширину не задавать, то она будет равна реальной ширине картинки.

'''HEIGHT''' - высота самой картинки в пикселях. Если высоту не задавать, то она будет равна реальной высоте картинки.

 {{#ev:youtube|f9FKTetfvKA}}

{{#ev:youtube| YKJ60H6dsoE}}

 '''Вопросы:'''

1. Какой элемент отвечает за вставку графики в веб-страницу?

2. Назовите атрибуты, отвечающие за ориентацию картинки в документе.

3. С помощью какой команды можно сделать так, чтобы текст обтекал картинку с обеих сторон?

4. Атрибуты, отвечающие за расстояние между текстом и картинкой.

5. Какая команда задает картинке рамку?

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

1. Урок на тему: «Графика в HTML», Залюбовская М. Н., г. Воронеж.

2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.

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

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

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

Если вы хотите увидеть другие корректировки и пожелания к урокам, смотрите здесь - [http://xvatit.com/forum/ Образовательный форум].

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