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

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

2013-02-02T19:48:38Z

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

2013-02-01T12:53:28Z

← Предыдущая		Версия 12:53, 1 февраля 2013
Строка 3:		Строка 3:
	<metakeywords>Информатика, класс, урок, на тему, 10 класс, Создание таблиц. Часть 1.</metakeywords>		<metakeywords>Информатика, класс, урок, на тему, 10 класс, Создание таблиц. Часть 1.</metakeywords>

-	'''~~Тема:~~ Создание таблиц. Часть 1. '''	+	==Тема==
		+	*'''Создание таблиц. Часть 1. '''

-	~~'''~~Цель~~: '''~~Научить создавать таблицы и размещать в них содержимое веб-страницы.	+	==Цель==
		+	*Научить создавать таблицы и размещать в них содержимое веб-страницы.

-	В процессе создания сайтов таблицы используются очень и очень часто, так как картинки, тексты и другое содержимое – все размещено относительно друг друга с помощью '''таблиц. '''Вот пример одного сайта, который не обошелся без участия таблиц: [[Image:Tablдд1.jpg]]	+	==Ход урока==

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


-	~~<br>~~ {{#ev:youtube\|iQWe4VkHQIw}}	+	[[Image:Tablдд1.jpg\|500px\|Веб-страница]]
		+
		+
		+	{{#ev:youtube\|iQWe4VkHQIw}}

-	~~<br>~~

	Итак, '''таблица''' задается с помощью команды или тэга '''< TABLE >''' и закрывается соответственно - < /TABLE >.		Итак, '''таблица''' задается с помощью команды или тэга '''< TABLE >''' и закрывается соответственно - < /TABLE >.
Строка 25:		Строка 30:
	Атрибуты '''< TR > '''и '''< /TR >''' отвечают за строка таблицы Атрибуты '''< TD > '''и '''< /TD > '''- за столбцы таблицы		Атрибуты '''< TR > '''и '''< /TR >''' отвечают за строка таблицы Атрибуты '''< TD > '''и '''< /TD > '''- за столбцы таблицы

-	~~<br>~~
-
-	~~[[Image:Tabl2.jpg]]~~

		+	[[Image:Tabl2.jpg\|150px\|Tаблица]]


Строка 106:		Строка 109:


-		+	[[Image:Tabl3.jpg\|150px\|Tаблица]]
-	[[Image:Tabl3.jpg\|~~86x47px~~]]	+
-		+


Строка 125:		Строка 126:
	Вот результат:<br>		Вот результат:<br>

-	[[Image:Tabl4.jpg]]	+	[[Image:Tabl4.jpg\|150px\|Tаблица]]

-	~~<br>~~

	Как видно, этот вариант таблички еще не совсем «взрослый» и его нужно немножко увеличить. <br>		Как видно, этот вариант таблички еще не совсем «взрослый» и его нужно немножко увеличить. <br>

-	~~<br>~~

-	'''5)''' Итак, задаем высоту и ширину ячейкам таблицы. Здесь пригодятся такие атрибуты как '''HEIGHT '''и'''WIDTH.''' <br>	+	'''5)''' Итак, задаем высоту и ширину ячейкам таблицы. Здесь пригодятся такие атрибуты как '''HEIGHT '''и '''WIDTH.''' <br>

	Их можно задавать для всей таблицы целиком, для одного ряда или для одной ячейки (столбца). <br>		Их можно задавать для всей таблицы целиком, для одного ряда или для одной ячейки (столбца). <br>
Строка 164:		Строка 163:


-		+	[[Image:Tabl5.jpg\|150px\|Tаблица]]
-	[[Image:Tabl5.jpg]]	+

	<br> '''6) '''Теперь осталcя последний шаг: выравнивание содержимого (в нашем случае это текст) внутри таблицы:		<br> '''6) '''Теперь осталcя последний шаг: выравнивание содержимого (в нашем случае это текст) внутри таблицы:
Строка 195:		Строка 193:
	Вот та таблица, которая была представлена в начале урока.		Вот та таблица, которая была представлена в начале урока.

-	~~[[Image:]]~~

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

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

-	1. С помощью какой команды создается таблица?	+	''1. С помощью какой команды создается таблица? ''

-	2. Какие атрибуты определяют строки и столбцы таблицы?	+	''2. Какие атрибуты определяют строки и столбцы таблицы? ''

-	3. Как вставить текст в ячейку?	+	''3. Как вставить текст в ячейку? ''

	<br>		<br>

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

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

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

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

	----		----

-	'''~~<u>~~Над уроком работали~~</u>~~'''	+
		+	'''Над уроком работали'''

	Соловьев М. С.		Соловьев М. С.
Строка 231:		Строка 232:

	----		----
-

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

2011-03-29T13:08:29Z

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

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

2010-11-15T11:46:12Z

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

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

2010-11-15T11:43:31Z

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

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

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

<metakeywords>Информатика, класс, урок, на тему, 10 класс, Создание таблиц. Часть 1.</metakeywords>

'''Тема: Создание таблиц. Часть 1. '''

'''Цель: '''Научить создавать таблицы и размещать в них содержимое веб-страницы.

В процессе создания сайтов таблицы используются очень и очень часто, так как картинки, тексты и другое содержимое – все размещено относительно друг друга с помощью '''таблиц. '''Вот пример одного сайта, который не обошелся без участия таблиц: [[Image:Tablдд1.jpg]]

<br> {{#ev:youtube|iQWe4VkHQIw}}

<br>

Итак, '''таблица''' задается с помощью команды или тэга '''< TABLE >''' и закрывается соответственно - < /TABLE >.

Перед тем, как создается сайт с таблицей, его лучше сначала нарисовать на бумаге – потом легче будет создавать их на компьютере.

Но это еще не все: ведь любая таблица состоит из ячеек, расположенных в строках и столбцах.

Поэтому, кроме основного тэга, нужно еще указывать и другие:

Атрибуты '''< TR > '''и '''< /TR >''' отвечают за строка таблицы Атрибуты '''< TD > '''и '''< /TD > '''- за столбцы таблицы

<br>

[[Image:Tabl2.jpg]]

Сейчас разберем подробно, как у нас вышла такая таблица.

'''1) '''Сначала пишем такой код, задающий две строки:

< table ><br>

< tr >< /tr ><br>

< tr >< tr ><br>

< /table >

<br>

'''2) '''Следующим шагом задаем по три столбца в каждой строке:

<br>

< table ><br>

<tr><br>

< td >< /td ><br>

< td >< /td ><br>

< td >< /td ><br>

< /tr ><br>

< tr ><br>

< td >< /td > <br>

< td >< /td ><br>

< td >< /td ><br>

< /tr ><br>

< /table > <br>

<br>

'''3)''' Теперь заполняем ячейки текстом:

< table > <br>

< tr > <br>

< td >1x1< /td ><br>

< td >1x2< /td ><br>

< td >1x3< /td > <br>

< /tr ><br>

< tr ><br>

< td >2x1< /td ><br>

< td >2x2< /td ><br>

< td >2x3< /td ><br>

< /tr ><br>

< /table >

<br>

Первая цифра - это номер ряда, а вторая - номер ячейки (1х2 - первый ряд, вторая ячейка). Вот что вышло после проделанных действий: [[Image:Tabl3.jpg]]

{{#ev:youtube|Nffky8VRROk&feature=related}}

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

<tr '''bgcolor'''="pink">

А для задания фона для всей таблицы атрибут bgcolor прописывается в тэге < table >:<br>

< table bgcolor="pink" >

<br>

Вот результат:<br>

[[Image:Tabl4.jpg]]

<br>

Как видно, этот вариант таблички еще не совсем «взрослый» и его нужно немножко увеличить. <br>

<br>

'''5)''' Итак, задаем высоту и ширину ячейкам таблицы. Здесь пригодятся такие атрибуты как '''HEIGHT '''и'''WIDTH.''' <br>

Их можно задавать для всей таблицы целиком, для одного ряда или для одной ячейки (столбца). <br>

Высота и ширина задаются как в пикселях, так и процентах.

< table ><br>

< tr ><br>

< td height="35" width="50" bgcolor="pink" > 1x1 < /td > <br>

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

< td width="50" bgcolor="pink" > 1x3 < /td ><br>

< /tr ><br>

< tr ><br>

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

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

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

< /tr ><br>

< /table >

[[Image:Tabl5.jpg]]

<br> '''6) '''Теперь осталcя последний шаг: выравнивание содержимого (в нашем случае это текст) внутри таблицы:

< table ><br>

< tr ><br>

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

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

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

< /tr ><br>

< tr > <br>

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

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

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

</tr><br>

< /table >

Вот та таблица, которая была представлена в начале урока.

<br> {{#ev:youtube|F7AXPyKRpQE}}

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

1. С помощью какой команды создается таблица?

2. Какие атрибуты определяют строки и столбцы таблицы?

3. Как вставить текст в ячейку?

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

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

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