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

User17 в 20:55, 4 ноября 2012

2012-11-04T20:55:43Z

User16 в 18:24, 2 ноября 2012

2012-11-02T18:24:00Z

User11 в 10:17, 10 марта 2011

2011-03-10T10:17:53Z

← Предыдущая		Версия 10:17, 10 марта 2011
Строка 166:		Строка 166:
	<br> ''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''		<br> ''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''

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

-	Якщо ви хочете побачити інші виправлення чи пропозиції до уроків, дивіться тут - [http://xvatit.com/forum/ Образовательный форум].

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

User17 в 12:58, 25 января 2011

2011-01-25T12:58:10Z

← Предыдущая		Версия 12:58, 25 января 2011
Строка 45:		Строка 45:
	''<img src="http: // www. sait. com. ua / images/image.jpg"> ''		''<img src="http: // www. sait. com. ua / images/image.jpg"> ''

-	{{#ev:youtube\|~~f9Fktetfvka~~}}	+
		+	{{#ev:youtube\|f9FKTetfvKA}}

	<br>		<br>
Строка 97:		Строка 98:
	<br>		<br>

-	{{#ev:youtube\| ~~YKJ60H6dsoe~~}}	+	{{#ev:youtube\| YKJ60H6dsoE}}

	<br>		<br>
Строка 137:		Строка 138:
	<br>		<br>

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

	<br> '''Самоконтроль:'''		<br> '''Самоконтроль:'''

User17 в 14:33, 11 января 2011

2011-01-11T14:33:28Z

← Предыдущая		Версия 14:33, 11 января 2011
Строка 3:		Строка 3:
	<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Вставка зображень у веб-сторінку.</metakeywords>		<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Вставка зображень у веб-сторінку.</metakeywords>

-	'''Тема: Вставка зображень у веб-сторінку.''' '''Мета:''' Навчити вставляти графічні зображення в html-документ. Розповісти про додаткові параметри обробки картинок за допомогою мови HTML.<br>	+	'''Тема: Вставка зображень у веб-сторінку.'''
		+
		+	'''Мета:''' Навчити вставляти графічні зображення в html-документ. Розповісти про додаткові параметри обробки картинок за допомогою мови HTML.<br>

	'''Тип уроку:'''теоретично-пактичний		'''Тип уроку:'''теоретично-пактичний

User17: Новая страница: «'''Гіпермаркет Знань>>Інформатика>...»

2011-01-11T14:32:28Z

Новая страница: «'''Гіпермаркет Знань>>Інформатика>...»

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

'''[[Гіпермаркет Знань - перший в світі!|Гіпермаркет Знань]]>>[[Інформатика|Інформатика]]>>[[Інформатика 10 клас. Повні уроки|Інформатика 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"> ''

{{#ev:youtube|f9Fktetfvka}}

 

На практиці, для своєї ж зручності, картинку завжди потрібно класти в одну папку з веб-сторінкою і ніякої плутанини не буде.

Також важливо знати, що IMAGE.jpg, image.JPG, image.jpg і IMAGE.JPG - це різні імена файлів і регістр імен завжди потрібно враховувати.

 

Разом з текстом картинка на веб-сторінці виглядає так:

 

[[Image:Imggg2.jpg]]

 

 

Після вставки картинки виникає питання: що потрібно зробити, аби увесь текст розташовувався поруч із картинкою, а не тільки один його рядок?

Згадаємо про атрибут ''ALIGN", який відповідає за вирівнювання і використовується з багатьма іншими тегами. ''

Атрибут «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">

 

{{#ev:youtube| YKJ60H6dsoe}}

 

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

'''VSPACE''' - визначає відстань між текстом і малюнком по вертикалі; задається в пікселях.

Наприклад: ''<img src="image.jpg" vspace="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|fajrb8rmk-8}}

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

1. Який елемент відповідає за вставку графічних елементів у веб-сторінку?

2. Назвіть атрибути, які відповідають за орієнтацію картинки в документі.

3. За допомогою якої команди можна зробити так, щоб текст обтікав картинку по з усіх сторін?

4. Атрибути, які відповідають за відстань між текстом і картинкою.

5. Яка команда задає картинці рамку?

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

 1. Урок на тему: «Графіка в HTML», Гайсин М. Н., м. Воронеж.

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

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

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

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

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

 Якщо у вас є виправлення чи пропозиції до цього уроку, [http://xvatit.com/index.php?do=feedback напишіть нам].

Якщо ви хочете побачити інші виправлення чи пропозиції до уроків, дивіться тут - [http://xvatit.com/forum/ Образовательный форум].

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