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

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

2012-11-04T21:19:00Z

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

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

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

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

-	~~==Хід~~ уроку==	+	*Навчити розтягувати і додавати окремі елементи [[Конспект уроку до теми «Копіювання, переміщення, вилучення, форматування таблиці»\|таблиці]] і регулювати відстань між ними.

-	===Розтягування клітинок===	+	== Тип уроку ==
		+
		+	*теоретично-практичний
		+
		+	== Хід уроку ==
		+
		+	=== Розтягування клітинок ===

	Продовжимо вивчення таблиць. Цього разу завдання полягає в тому, щоб розтягнути клітинку 1х1 на два стовпці. Приклад показаний на малюнку внизу:		Продовжимо вивчення таблиць. Цього разу завдання полягає в тому, щоб розтягнути клітинку 1х1 на два стовпці. Приклад показаний на малюнку внизу:
Строка 26:		Строка 29:
	Зараз саме час згадати про такі атрибути як:		Зараз саме час згадати про такі атрибути як:

-	*'''COLSPAN''' - визначає кількість стовпців, на які розтягується потрібний клітинку	+	*'''COLSPAN''' - визначає кількість [[Практическая работа: Табличный процессор Microsoft Excel. Основные понятия. Ввод данных в таблицу\|стовпців]], на які розтягується потрібний клітинку
	*'''ROWSPAN''' - задає кількість рядків, на які розтягується клітинку.		*'''ROWSPAN''' - задає кількість рядків, на які розтягується клітинку.

Строка 53:		Строка 56:
	< /table >		< /table >

-		+	<br> Як видно з результату, клітинка 1х1 розтягнута на довжину двох стовпців.
-	Як видно з результату, клітинка 1х1 розтягнута на довжину двох стовпців.	+

	Звертаємо увагу на те, що нам не потрібно було створювати і прописувати клітинку 1х3.		Звертаємо увагу на те, що нам не потрібно було створювати і прописувати клітинку 1х3.
Строка 92:		Строка 94:
	<br>		<br>

-	===Відстань між елементами таблиці===	+	=== Відстань між елементами таблиці ===

-	Прибрати простір між елементами таблиці можна за допомогою атрибуту cellspacing з параметром «0», яка повинна прописуватися біля тегу TABLE.	+	Прибрати простір між елементами таблиці можна за допомогою атрибуту cellspacing з параметром «0», яка повинна прописуватися біля [[Основные теги. Каркас веб-страницы. Полные уроки\|тегу]] TABLE.

	Спробуємо виконати таку операцію з нашою таблицею:		Спробуємо виконати таку операцію з нашою таблицею:

-		+	<br> < table cellspacing="0" > < tr>
-	< table cellspacing="0" > < tr>	+

	< td height="35" bgcolor="pink" > < center >1x1< /center > < /td>		< td height="35" bgcolor="pink" > < center >1x1< /center > < /td>
Строка 131:		Строка 132:
	<br>		<br>

-	===Збільшення розмірів таблиці===	+	=== Збільшення розмірів таблиці ===

-	Весь цей час дії проводилися з таблицею невеликого розміру. Давайте спробуємо збільшити її.	+	Весь цей час дії проводилися з [[Работа 6. Создаем таблицы\|таблицею]] невеликого розміру. Давайте спробуємо збільшити її.

	Для цього біля того ж таки тегу TABLE прописуємо атрибут cellpadding з будь-яким значенням (візьмемо «30») : ''< table cellspacing="6" cellpadding="30" >''		Для цього біля того ж таки тегу TABLE прописуємо атрибут cellpadding з будь-яким значенням (візьмемо «30») : ''< table cellspacing="6" cellpadding="30" >''
Строка 147:		Строка 148:
	<br>		<br>

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

-	''1. Як розтягнути окрему клітинку по ширині рядка? ''	+	''1. Як розтягнути окрему клітинку по ширині рядка? ''

-	''2. Як розширити стовпець на два рядки? ''	+	''2. Як розширити стовпець на два [[Работа 6. Создаем таблицы\|рядки]]? ''

-	''3. Яким командами регулюється відстань між клітинками? ''	+	''3. Яким командами регулюється відстань між клітинками? ''

-	''4. За допомогою яких атрибутів можна збільшити розмір усієї таблиці? ''	+	''4. За допомогою яких атрибутів можна збільшити розмір усієї таблиці? ''

	<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> '''Над уроком працювали'''

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

-	~~Голубенко Н. С.~~	+	Соловйов М. С.
-		+
-	Соловйов М. С.	+

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

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

2012-11-02T18:47:28Z

← Предыдущая		Версия 18:47, 2 ноября 2012
Строка 88:		Строка 88:
	< /table >		< /table >

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

	<br>		<br>

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

2012-11-02T18:46:50Z

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

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

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

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

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

-	~~<br>~~	+	===Розтягування клітинок===

	Продовжимо вивчення таблиць. Цього разу завдання полягає в тому, щоб розтягнути клітинку 1х1 на два стовпці. Приклад показаний на малюнку внизу:		Продовжимо вивчення таблиць. Цього разу завдання полягає в тому, щоб розтягнути клітинку 1х1 на два стовпці. Приклад показаний на малюнку внизу:
Строка 17:		Строка 20:
	<br>		<br>

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

	<br>		<br>
Строка 25:		Строка 28:
	*'''COLSPAN''' - визначає кількість стовпців, на які розтягується потрібний клітинку		*'''COLSPAN''' - визначає кількість стовпців, на які розтягується потрібний клітинку
	*'''ROWSPAN''' - задає кількість рядків, на які розтягується клітинку.		*'''ROWSPAN''' - задає кількість рядків, на які розтягується клітинку.
-
-	~~<br>~~

	Для створення вказаної таблиці, треба використовувати атрибут ''COLSPAN'' зі значенням "2" для клітинки 1х1:		Для створення вказаної таблиці, треба використовувати атрибут ''COLSPAN'' зі значенням "2" для клітинки 1х1:
Строка 52:		Строка 53:
	< /table >		< /table >

-	~~<br>~~

	Як видно з результату, клітинка 1х1 розтягнута на довжину двох стовпців.		Як видно з результату, клітинка 1х1 розтягнута на довжину двох стовпців.
Строка 62:		Строка 62:
	<br>		<br>

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

	<br> Тепер розберемося з параметром ''ROWSPAN''. Принцип дії тут точно такий:		<br> Тепер розберемося з параметром ''ROWSPAN''. Принцип дії тут точно такий:
Строка 92:		Строка 92:
	<br>		<br>

-	~~'''~~Відстань між елементами таблиці~~. '''~~	+	===Відстань між елементами таблиці===

	Прибрати простір між елементами таблиці можна за допомогою атрибуту cellspacing з параметром «0», яка повинна прописуватися біля тегу TABLE.		Прибрати простір між елементами таблиці можна за допомогою атрибуту cellspacing з параметром «0», яка повинна прописуватися біля тегу TABLE.
Строка 98:		Строка 98:
	Спробуємо виконати таку операцію з нашою таблицею:		Спробуємо виконати таку операцію з нашою таблицею:

-	~~<br>~~

	< table cellspacing="0" > < tr>		< table cellspacing="0" > < tr>
Строка 120:		Строка 119:
	< /table >		< /table >

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

	<br>		<br>
Строка 128:		Строка 127:
	<br>		<br>

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

	<br>		<br>

-	~~'''~~Збільшення розмірів таблиці~~.'''~~	+	===Збільшення розмірів таблиці===

	Весь цей час дії проводилися з таблицею невеликого розміру. Давайте спробуємо збільшити її.		Весь цей час дії проводилися з таблицею невеликого розміру. Давайте спробуємо збільшити її.
Строка 138:		Строка 137:
	Для цього біля того ж таки тегу TABLE прописуємо атрибут cellpadding з будь-яким значенням (візьмемо «30») : ''< table cellspacing="6" cellpadding="30" >''		Для цього біля того ж таки тегу TABLE прописуємо атрибут cellpadding з будь-яким значенням (візьмемо «30») : ''< table cellspacing="6" cellpadding="30" >''

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

-	<br> {{#ev: youtube\|iQWe4VkHQIw}} {{#ev: youtube\|yJCnsRNDj - k}} {{#ev: youtube\|7y8TiqQ50yw}}	+	<br> {{#ev: youtube\|iQWe4VkHQIw}}
		+
		+	{{#ev: youtube\|yJCnsRNDj - k}}
		+
		+	{{#ev: youtube\|7y8TiqQ50yw}}

	<br>		<br>

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

-	1. Як розтягнути окрему клітинку по ширині рядка?	+	''1. Як розтягнути окрему клітинку по ширині рядка? ''

-	2. Як розширити стовпець на два рядки?	+	''2. Як розширити стовпець на два рядки? ''

-	3. Яким командами регулюється відстань між клітинками?	+	''3. Яким командами регулюється відстань між клітинками? ''

-	4. За допомогою яких атрибутів можна збільшити розмір усієї таблиці?	+	''4. За допомогою яких атрибутів можна збільшити розмір усієї таблиці? ''

	<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> <br> ----~~

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

-	~~<br> ----~~

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

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

	Соловйов М. С.		Соловйов М. С.

-	~~----~~

		+	----

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

2011-03-10T10:34:42Z

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

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

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

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

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

2011-01-11T14:41:58Z

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

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

'''[[Гіпермаркет Знань - перший в світі!|Гіпермаркет Знань]]>>[[Інформатика|Інформатика]]>>[[Інформатика 10 клас. Повні уроки|Інформатика 10 клас. Повні уроки]]>> Інформатика: Створення таблиць. Частина 2.'''

<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Створення таблиць. Частина 2.</metakeywords>

<br> '''Тема: Створення таблиць. Частина 2.'''

'''Мета:''' Навчити розтягувати і додавати окремі елементи таблиці і регулювати відстань між ними.

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

'''Хід уроку:'''

<br>

Продовжимо вивчення таблиць. Цього разу завдання полягає в тому, щоб розтягнути клітинку 1х1 на два стовпці. Приклад показаний на малюнку внизу:

<br>

[[Image:Tbl1.jpg]]

<br>

Зараз саме час згадати про такі атрибути як:

*'''COLSPAN''' - визначає кількість стовпців, на які розтягується потрібний клітинку
*'''ROWSPAN''' - задає кількість рядків, на які розтягується клітинку.

<br>

Для створення вказаної таблиці, треба використовувати атрибут ''COLSPAN'' зі значенням "2" для клітинки 1х1:

< table >

< tr >

< td height="35" bgcolor="pink" colspan="2" > < center >1x1< /center > < /td >

< td width="50" bgcolor="green" > < center >1x2< /center > < /td >

< /tr >

< tr >

<td height="35" width="50" bgcolor="green"> < center >2x1< /center > < /td >

<td width="50" bgcolor="pink"> < center >2x2< /center > < /td >

<td width="50" bgcolor="green"> < center >2x3< /center > < /td >

< /tr >

< /table >

<br>

Як видно з результату, клітинка 1х1 розтягнута на довжину двох стовпців.

Звертаємо увагу на те, що нам не потрібно було створювати і прописувати клітинку 1х3.

А якби вона залишилася в коді, то ось що вийшло б:

<br>

[[Image:Tbl2.jpg]]

<br> Тепер розберемося з параметром ''ROWSPAN''. Принцип дії тут точно такий:

< table >

< tr >

< td height="35" bgcolor="pink" > < center >1x1< /center> < /td >

< td width="50" bgcolor="green" > < center >1x2< /center> < /td >

< td width="50" bgcolor="pink" rowspan="2"> < center >1x3< /center> < /td >

< /tr >

< tr >

< td height="35" width="50" bgcolor="green"> < center >2x1< /center> < /td >

< td width="50" bgcolor="pink" > < center >2x2< /center > < /td >

< /tr>

< /table >

<br> [[Image:Tbl3.jpg]]

<br>

'''Відстань між елементами таблиці. '''

Прибрати простір між елементами таблиці можна за допомогою атрибуту cellspacing з параметром «0», яка повинна прописуватися біля тегу TABLE.

Спробуємо виконати таку операцію з нашою таблицею:

<br>

< table cellspacing="0" > < tr>

< td height="35" bgcolor="pink" > < center >1x1< /center > < /td>

< td width="50" bgcolor="green" > < center >1x2< /center > < /td>

< td width="50" bgcolor="pink" rowspan="2"> < center >1x3< /center> < /td >

< /tr >

< tr >

< td height="35" width="50" bgcolor="green" > < center >2x1< /center > < /td >

< td width="50" bgcolor="pink" > < center >2x2< /center > < /td >

< /tr >

< /table >

<br> [[Image:Tbl4.jpg]]

<br>

А для того, щоб навпаки розширити межі прописуємо атрибуту cellspacing зі значенням, наприклад, «6».

<br>

[[Image:Tbl5.jpg]]

<br>

'''Збільшення розмірів таблиці.'''

Весь цей час дії проводилися з таблицею невеликого розміру. Давайте спробуємо збільшити її.

Для цього біля того ж таки тегу TABLE прописуємо атрибут cellpadding з будь-яким значенням (візьмемо «30») : ''< table cellspacing="6" cellpadding="30" >''

[[Image:Tbl6.jpg]]

<br> {{#ev: youtube|iQWe4VkHQIw}} {{#ev: youtube|yJCnsRNDj - k}} {{#ev: youtube|7y8TiqQ50yw}}

<br>

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

1. Як розтягнути окрему клітинку по ширині рядка?

2. Як розширити стовпець на два рядки?

3. Яким командами регулюється відстань між клітинками?

4. За допомогою яких атрибутів можна збільшити розмір усієї таблиці?

<br>

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

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

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

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

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

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

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

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

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

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