Створення таблиць. Частина 1. Повні уроки - История изменений

User17 в 21:13, 4 ноября 2012

2012-11-04T21:13:59Z

← Предыдущая		Версия 21:13, 4 ноября 2012
Строка 3:		Строка 3:
	<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Створення таблиць. Частина 1.</metakeywords>		<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Створення таблиць. Частина 1.</metakeywords>

-	==Тема==	+	== Тема ==
-	*'''Створення таблиць. Частина 1. '''	+

-	~~==Мета==~~	+	*'''Створення таблиць. Частина 1. '''
-	*~~Навчити створювати таблиці і розміщувати в них вміст веб-сторінки~~.	+

-	==~~Тип уроку~~==	+	== Мета ==
-	*теоретично-практичний	+

-	~~==Хід уроку==~~	+	*Навчити створювати таблиці і розміщувати в них вміст веб-сторінки.

-	В процесі створення сайтів таблиці використовуються дуже часто, оскільки картинки, тексти та інший вміст – усе це розміщено один відносно одного за допомогою таблиці. Ось приклад веб-сторінки, який не обійшовся без використання таблиць:	+	== Тип уроку ==
		+
		+	*теоретично-практичний
		+
		+	== Хід уроку ==
		+
		+	В процесі створення [[Структура веб-сайтів, різновиди веб-сайтів\|сайтів]] таблиці використовуються дуже часто, оскільки картинки, тексти та інший вміст – усе це розміщено один відносно одного за допомогою таблиці. Ось приклад веб-сторінки, який не обійшовся без використання таблиць:

	[[Image:Tablдд1.jpg\|480px\|Створення таблиць]]		[[Image:Tablдд1.jpg\|480px\|Створення таблиць]]
Строка 24:		Строка 27:
	Отже, '''таблиця''' задається за допомогою команди або тега '''< TABLE >''' і закривається відповідно - < /TABLE >.		Отже, '''таблиця''' задається за допомогою команди або тега '''< TABLE >''' і закривається відповідно - < /TABLE >.

-	Перед тим, як створюється веб-документ з таблицею, його краще спочатку намалювати на аркуші паперу - потім легше буде створювати їх на комп'ютері.	+	Перед тим, як створюється веб-документ з таблицею, його краще спочатку намалювати на аркуші паперу - потім легше буде створювати їх на [http://xvatit.com/it комп'ютері.]

	Але це ще не все: адже будь-яка таблиця складається з окремих чатинок, розташованих в рядках і стовпцях.		Але це ще не все: адже будь-яка таблиця складається з окремих чатинок, розташованих в рядках і стовпцях.
Строка 36:		Строка 39:
	[[Image:Tabl2.jpg\|240px\|Створення таблиць]]		[[Image:Tabl2.jpg\|240px\|Створення таблиць]]

-	<br> Зараз розберемо детально, як у нас вийшла така таблиця.	+	<br> Зараз розберемо детально, як у нас вийшла така [[Конспект уроку до теми «Робота з таблицями»\|таблиця]].

	'''1)''' Спочатку пишемо такий код - він задає два рядки:		'''1)''' Спочатку пишемо такий код - він задає два рядки:
Строка 80:		Строка 83:
	<br>		<br>

-	'''3)''' Тепер заповнюємо клітинки текстом:	+	'''3)''' Тепер заповнюємо клітинки [[Операции при создании текстов\|текстом]]:

	< table > <br>		< table > <br>
Строка 114:		Строка 117:
	[[Image:Tabl3.jpg\|240px\|Створення таблиць]]<br>		[[Image:Tabl3.jpg\|240px\|Створення таблиць]]<br>

-	<br> '''4)''' Далі створюємо фон стовпцям. Для цього існує така зв'язка команд як '''BGCOLOR'''="колір". Задати фон для ряду можна за допомогою все того ж атрибуту bgcolor, який треба прописати в тегу <tr>:	+	<br> '''4)''' Далі створюємо фон стовпцям. Для цього існує така зв'язка команд як '''BGCOLOR'''="колір". Задати фон для ряду можна за допомогою все того ж атрибуту bgcolor, який треба прописати в [[Основные теги. Каркас веб-страницы. Полные уроки\|тегу]] <tr>:

	<tr '''bgcolor'''="pink">		<tr '''bgcolor'''="pink">
Строка 168:		Строка 171:
	[[Image:Tabl5.jpg\|240px\|Створення таблиць]]		[[Image:Tabl5.jpg\|240px\|Створення таблиць]]

-	<br> '''6) '''Тепер останній крок: вирівнювання вмісту (у нашому випадку це текст) всередині таблиці:	+	<br> '''6) '''Тепер останній крок: вирівнювання вмісту (у нашому випадку це [[Оформление текста\|текст]]) всередині таблиці:

	< table ><br>		< table ><br>
Строка 196:		Строка 199:
	Ось та таблиця, яка була представлена на початку уроку.		Ось та таблиця, яка була представлена на початку уроку.

-		+	<br> {{#ev:youtube\|F7AXPyKRpQE&feature}}
-	{{#ev:youtube\|F7AXPyKRpQE&feature}}	+

	<br>		<br>

-	==Самоконтроль==	+	== Самоконтроль ==

-	''1. За допомогою якої команди створюється таблиця? ''	+	''1. За допомогою якої команди створюється таблиця? ''

-	''2. Які атрибути визначають рядки і стовпці таблиці? ''	+	''2. Які атрибути визначають рядки і [[Практическая работа: Табличный процессор Microsoft Excel. Основные понятия. Ввод данных в таблицу\|стовпці]] таблиці? ''

-	''3. Як вставити текст в таблицю? ''	+	''3. Як вставити текст в таблицю? ''

	<br>		<br>

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

	''1. Урок на тему: «Вставка і форматування таблиць в HTML», Голубенко Н. С., м. Київ.''		''1. Урок на тему: «Вставка і форматування таблиць в HTML», Голубенко Н. С., м. Київ.''

-	''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>
-		+

	----		----
Строка 240:		Строка 243:
	Соловйов М. С.		Соловйов М. С.

		+	<br>

	----		----

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

2012-11-02T18:43:19Z

← Предыдущая		Версия 18:43, 2 ноября 2012
Строка 34:		Строка 34:
	<br>		<br>

-	[[Image:Tabl2.jpg\|~~480px~~\|Створення таблиць]]	+	[[Image:Tabl2.jpg\|240px\|Створення таблиць]]

	<br> Зараз розберемо детально, як у нас вийшла така таблиця.		<br> Зараз розберемо детально, як у нас вийшла така таблиця.
Строка 112:		Строка 112:
	<br>		<br>

-	[[Image:Tabl3.jpg\|~~480px~~\|Створення таблиць]]<br>	+	[[Image:Tabl3.jpg\|240px\|Створення таблиць]]<br>

	<br> '''4)''' Далі створюємо фон стовпцям. Для цього існує така зв'язка команд як '''BGCOLOR'''="колір". Задати фон для ряду можна за допомогою все того ж атрибуту bgcolor, який треба прописати в тегу <tr>:		<br> '''4)''' Далі створюємо фон стовпцям. Для цього існує така зв'язка команд як '''BGCOLOR'''="колір". Задати фон для ряду можна за допомогою все того ж атрибуту bgcolor, який треба прописати в тегу <tr>:
Строка 126:		Строка 126:
	Ось результат:<br>		Ось результат:<br>

-	[[Image:Tabl4.jpg\|~~480px~~\|Створення таблиць]]	+	[[Image:Tabl4.jpg\|240px\|Створення таблиць]]

	<br>		<br>
Строка 166:		Строка 166:
	<br>		<br>

-	[[Image:Tabl5.jpg\|~~480px~~\|Створення таблиць]]	+	[[Image:Tabl5.jpg\|240px\|Створення таблиць]]

	<br> '''6) '''Тепер останній крок: вирівнювання вмісту (у нашому випадку це текст) всередині таблиці:		<br> '''6) '''Тепер останній крок: вирівнювання вмісту (у нашому випадку це текст) всередині таблиці:

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

2012-11-02T18:42:29Z

← Предыдущая		Версия 18:42, 2 ноября 2012
Строка 3:		Строка 3:
	<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Створення таблиць. Частина 1.</metakeywords>		<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Створення таблиць. Частина 1.</metakeywords>

-	~~<br>~~ '''~~Тема:~~ Створення таблиць. Частина 1. '''	+	==Тема==
		+	*'''Створення таблиць. Частина 1. '''

-	~~'''~~Мета~~: '''~~ Навчити створювати таблиці і розміщувати в них вміст веб-сторінки.	+	==Мета==
		+	*Навчити створювати таблиці і розміщувати в них вміст веб-сторінки.

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

-	~~'''~~Хід уроку~~:'''~~	+	==Хід уроку==

	В процесі створення сайтів таблиці використовуються дуже часто, оскільки картинки, тексти та інший вміст – усе це розміщено один відносно одного за допомогою таблиці. Ось приклад веб-сторінки, який не обійшовся без використання таблиць:		В процесі створення сайтів таблиці використовуються дуже часто, оскільки картинки, тексти та інший вміст – усе це розміщено один відносно одного за допомогою таблиці. Ось приклад веб-сторінки, який не обійшовся без використання таблиць:

-	[[Image:Tablдд1.jpg]]	+	[[Image:Tablдд1.jpg\|480px\|Створення таблиць]]

-	~~<br>~~ <br> {{#ev: youtube\|iQWe4VkHQIw}}	+	<br> {{#ev: youtube\|iQWe4VkHQIw}}

	<br>		<br>

-	Отже, ''таблиця'' задається за допомогою команди або тега '''< TABLE >''' і закривається відповідно - < /TABLE >.	+	Отже, '''таблиця''' задається за допомогою команди або тега '''< TABLE >''' і закривається відповідно - < /TABLE >.

	Перед тим, як створюється веб-документ з таблицею, його краще спочатку намалювати на аркуші паперу - потім легше буде створювати їх на комп'ютері.		Перед тим, як створюється веб-документ з таблицею, його краще спочатку намалювати на аркуші паперу - потім легше буде створювати їх на комп'ютері.
Строка 31:		Строка 34:
	<br>		<br>

-	[[Image:Tabl2.jpg]]	+	[[Image:Tabl2.jpg\|480px\|Створення таблиць]]

	<br> Зараз розберемо детально, як у нас вийшла така таблиця.		<br> Зараз розберемо детально, як у нас вийшла така таблиця.
Строка 109:		Строка 112:
	<br>		<br>

-	[[Image:Tabl3.jpg\|~~86x47px~~\|~~Tabl3.jpg~~]]<br>	+	[[Image:Tabl3.jpg\|480px\|Створення таблиць]]<br>

	<br> '''4)''' Далі створюємо фон стовпцям. Для цього існує така зв'язка команд як '''BGCOLOR'''="колір". Задати фон для ряду можна за допомогою все того ж атрибуту bgcolor, який треба прописати в тегу <tr>:		<br> '''4)''' Далі створюємо фон стовпцям. Для цього існує така зв'язка команд як '''BGCOLOR'''="колір". Задати фон для ряду можна за допомогою все того ж атрибуту bgcolor, який треба прописати в тегу <tr>:
Строка 123:		Строка 126:
	Ось результат:<br>		Ось результат:<br>

-	[[Image:Tabl4.jpg]]	+	[[Image:Tabl4.jpg\|480px\|Створення таблиць]]

	<br>		<br>
Строка 163:		Строка 166:
	<br>		<br>

-	[[Image:Tabl5.jpg]]	+	[[Image:Tabl5.jpg\|480px\|Створення таблиць]]

	<br> '''6) '''Тепер останній крок: вирівнювання вмісту (у нашому випадку це текст) всередині таблиці:		<br> '''6) '''Тепер останній крок: вирівнювання вмісту (у нашому випадку це текст) всередині таблиці:
Строка 191:		Строка 194:
	< /table >		< /table >

-	Ось та таблиця, яка була представлена на початку уроку. {{#ev:youtube\|F7AXPyKRpQE&feature}}	+	Ось та таблиця, яка була представлена на початку уроку.
		+
		+
		+	{{#ev:youtube\|F7AXPyKRpQE&feature}}

	<br>		<br>

-	~~<br> '''~~Самоконтроль~~:'''~~	+	==Самоконтроль==

-	1. За допомогою якої команди створюється таблиця?	+	''1. За допомогою якої команди створюється таблиця? ''

-	2. Які атрибути визначають рядки і стовпці таблиці?	+	''2. Які атрибути визначають рядки і стовпці таблиці? ''

-	3. Як вставити текст в таблицю?	+	''3. Як вставити текст в таблицю? ''

	<br>		<br>

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

-	1. Урок на тему: «Вставка і форматування таблиць в HTML», Голубенко Н. С., м. Київ.	+	''1. Урок на тему: «Вставка і форматування таблиць в HTML», Голубенко Н. С., м. Київ.''

-	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> ''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''
		+

	----		----
Строка 223:		Строка 234:
	<br>		<br>

-	'''~~<u>~~Над уроком працювали~~</u>~~'''	+	'''Над уроком працювали'''

	Голубенко Н. С.		Голубенко Н. С.

-	~~<br>~~ Соловйов М. С.	+	Соловйов М. С.
		+

	----		----

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

2011-03-10T10:32:01Z

← Предыдущая		Версия 10:32, 10 марта 2011
Строка 109:		Строка 109:
	<br>		<br>

-	[[Image:Tabl3.jpg\|86x47px\|Tabl3.jpg]]	+	[[Image:Tabl3.jpg\|86x47px\|Tabl3.jpg]]<br>
-		+
-	<br>	+
-		+
-	~~{{#ev: youtube\|Nffky8VRROk&feature=related}}~~	+

	<br> '''4)''' Далі створюємо фон стовпцям. Для цього існує така зв'язка команд як '''BGCOLOR'''="колір". Задати фон для ряду можна за допомогою все того ж атрибуту bgcolor, який треба прописати в тегу <tr>:		<br> '''4)''' Далі створюємо фон стовпцям. Для цього існує така зв'язка команд як '''BGCOLOR'''="колір". Задати фон для ряду можна за допомогою все того ж атрибуту bgcolor, який треба прописати в тегу <tr>:
Строка 195:		Строка 191:
	< /table >		< /table >

-	Ось та таблиця, яка була представлена на початку уроку.	+	Ось та таблиця, яка була представлена на початку уроку. {{#ev:youtube\|F7AXPyKRpQE&feature}}
-	{{#ev:youtube\|F7AXPyKRpQE&feature}}	+

	<br>		<br>

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

2011-03-10T10:31:12Z

← Предыдущая		Версия 10:31, 10 марта 2011
Строка 196:		Строка 196:

	Ось та таблиця, яка була представлена на початку уроку.		Ось та таблиця, яка була представлена на початку уроку.
-		+	{{#ev:youtube\|F7AXPyKRpQE&feature}}
-	~~[[Image~~:]]	+

	<br>		<br>

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

2011-03-10T10:30:18Z

← Предыдущая		Версия 10:30, 10 марта 2011
Строка 171:		Строка 171:
	<br> '''6) '''Тепер останній крок: вирівнювання вмісту (у нашому випадку це текст) всередині таблиці:		<br> '''6) '''Тепер останній крок: вирівнювання вмісту (у нашому випадку це текст) всередині таблиці:

-	~~{{#ev:youtube\|F7AXPyKRpQE&feature=player_embedded\|2PmWlPjV6n0&NR}}~~
	< table ><br>		< table ><br>

Строка 198:		Строка 197:
	Ось та таблиця, яка була представлена на початку уроку.		Ось та таблиця, яка була представлена на початку уроку.

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

	<br>		<br>

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

2011-03-10T10:30:02Z

← Предыдущая		Версия 10:30, 10 марта 2011
Строка 171:		Строка 171:
	<br> '''6) '''Тепер останній крок: вирівнювання вмісту (у нашому випадку це текст) всередині таблиці:		<br> '''6) '''Тепер останній крок: вирівнювання вмісту (у нашому випадку це текст) всередині таблиці:

		+	{{#ev:youtube\|F7AXPyKRpQE&feature=player_embedded\|2PmWlPjV6n0&NR}}
	< table ><br>		< table ><br>

Строка 197:		Строка 198:
	Ось та таблиця, яка була представлена на початку уроку.		Ось та таблиця, яка була представлена на початку уроку.

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

	<br>		<br>

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

2011-03-10T10:24:41Z

← Предыдущая		Версия 10:24, 10 марта 2011
Строка 227:		Строка 227:
	----		----

-	<br>	+	<br>

	'''<u>Над уроком працювали</u>'''		'''<u>Над уроком працювали</u>'''

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

2011-03-10T10:24:16Z

← Предыдущая		Версия 10:24, 10 марта 2011
Строка 199:		Строка 199:
	[[Image:]]		[[Image:]]

-	<br> ~~{{#ev: youtube\|F7AXPyKRpQE}}~~	+	<br>

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

-	----	+	----

-	~~'''~~<u>~~Над уроком працювали</u>'''~~	+	<br>

-	~~Голубенко Н. С.~~	+	'''<u>Над уроком працювали</u>'''

		+	Голубенко Н. С.

-	Соловйов М. С.	+	<br> Соловйов М. С.

	----		----

-		+	<br>

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

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

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

2011-03-10T10:22:47Z

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

-	<br> ~~Якщо у вас є виправлення чи пропозиції до цього уроку~~, [http://xvatit.com/~~index~~.~~php?do=feedback напишіть нам~~].	+	----
		+
		+	'''<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_клас]]