KNOWLEDGE HYPERMARKET


Создание таблиц. Часть 1. Полные уроки
 
(2 промежуточные версии не показаны)
Строка 3: Строка 3:
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Создание таблиц. Часть 1.</metakeywords>  
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Создание таблиц. Часть 1.</metakeywords>  
-
'''Тема: Создание таблиц. Часть 1. '''
+
== Тема ==
-
'''Цель: '''Научить создавать таблицы и размещать в них содержимое веб-страницы.
+
*'''Создание таблиц. Часть 1. '''
-
В процессе создания сайтов таблицы используются очень и очень часто, так как картинки, тексты и другое содержимое – все размещено относительно друг друга с помощью '''таблиц. '''Вот пример одного сайта, который не обошелся без участия таблиц: [[Image:Tablдд1.jpg]]
+
== Цель  ==
 +
*Научить создавать таблицы и размещать в них содержимое [[Основные теги. Каркас веб-страницы. Полные уроки|веб-страницы]].
 +
== Ход урока  ==
 +
 +
В процессе создания сайтов таблицы используются очень и очень часто, так как картинки, тексты и другое содержимое – все размещено относительно друг друга с помощью '''таблиц. '''Вот пример одного сайта, который не обошелся без участия таблиц:
 +
 +
<br> [[Image:Tablдд1.jpg|500px|Веб-страница]]
<br> {{#ev:youtube|iQWe4VkHQIw}}  
<br> {{#ev:youtube|iQWe4VkHQIw}}  
-
<br>  
+
<br> Итак, [[Что такое электронная таблица|таблица]] задается с помощью команды или тэга '''&lt; TABLE &gt;''' и закрывается соответственно - &lt; /TABLE &gt;.  
-
 
+
-
Итак, '''таблица''' задается с помощью команды или тэга '''&lt; TABLE &gt;''' и закрывается соответственно - &lt; /TABLE &gt;.  
+
Перед тем, как создается сайт с таблицей, его лучше сначала нарисовать на бумаге – потом легче будет создавать их на компьютере.  
Перед тем, как создается сайт с таблицей, его лучше сначала нарисовать на бумаге – потом легче будет создавать их на компьютере.  
Строка 25: Строка 29:
Атрибуты '''&lt; TR &gt; '''и '''&lt; /TR &gt;''' отвечают за строка таблицы Атрибуты '''&lt; TD &gt; '''и '''&lt; /TD &gt; '''- за столбцы таблицы  
Атрибуты '''&lt; TR &gt; '''и '''&lt; /TR &gt;''' отвечают за строка таблицы Атрибуты '''&lt; TD &gt; '''и '''&lt; /TD &gt; '''- за столбцы таблицы  
-
<br>  
+
<br> [[Image:Tabl2.jpg|150px|Tаблица]]  
-
 
+
-
[[Image:Tabl2.jpg]]  
+
-
 
+
-
 
+
-
Сейчас разберем подробно, как у нас вышла такая таблица.  
+
<br> Сейчас разберем подробно, как у нас вышла такая таблица.  
'''1) '''Сначала пишем такой код, задающий две строки:  
'''1) '''Сначала пишем такой код, задающий две строки:  
Строка 75: Строка 75:
<br>  
<br>  
-
'''3)''' Теперь заполняем ячейки текстом:  
+
'''3)''' Теперь заполняем [[Стаття на тему: Внесення формул і функцій у комірки. Абсолютна та відносна адресація|ячейки]] текстом:  
&lt; table &gt; <br>  
&lt; table &gt; <br>  
Строка 103: Строка 103:
<br>  
<br>  
-
Первая цифра - это номер ряда, а вторая - номер ячейки (1х2 - первый ряд, вторая ячейка). Вот что вышло после проделанных действий:
+
Первая цифра - это номер ряда, а вторая - номер ячейки (1х2 - первый ряд, вторая ячейка). Вот что вышло после проделанных действий:  
 +
<br> [[Image:Tabl3.jpg|150px|Tаблица]]
 +
<br> {{#ev:youtube|Nffky8VRROk&feature=related}}
-
[[Image:Tabl3.jpg|86x47px]]
+
<br> '''4)''' Далее создаем фон ячейкам. Для этого существует такая связка команд как '''BGCOLOR'''="цвет". Задать фон для ряда можно с помощью все того же атрибута bgcolor, который нужно прописать в [[Основні теги. Каркас веб-сторінки. Повні уроки|тэге]] &lt;tr&gt;:  
-
 
+
-
 
+
-
 
+
-
{{#ev:youtube|Nffky8VRROk&feature=related}}
+
-
 
+
-
<br> '''4)''' Далее создаем фон ячейкам. Для этого существует такая связка команд как '''BGCOLOR'''="цвет". Задать фон для ряда можно с помощью все того же атрибута bgcolor, который нужно прописать в тэге &lt;tr&gt;:  
+
&lt;tr '''bgcolor'''="pink"&gt;  
&lt;tr '''bgcolor'''="pink"&gt;  
Строка 125: Строка 121:
Вот результат:<br>  
Вот результат:<br>  
-
[[Image:Tabl4.jpg]]  
+
[[Image:Tabl4.jpg|150px|Tаблица]]  
-
<br>  
+
<br> Как видно, этот вариант таблички еще не совсем «взрослый» и его нужно немножко увеличить. <br>  
-
 
+
-
Как видно, этот вариант таблички еще не совсем «взрослый» и его нужно немножко увеличить. <br>
+
-
 
+
-
<br>  
+
-
'''5)''' Итак, задаем высоту и ширину ячейкам таблицы. Здесь пригодятся такие атрибуты как '''HEIGHT '''и'''WIDTH.''' <br>  
+
<br> '''5)''' Итак, задаем высоту и ширину ячейкам таблицы. Здесь пригодятся такие атрибуты как '''HEIGHT '''и '''WIDTH.''' <br>  
Их можно задавать для всей таблицы целиком, для одного ряда или для одной ячейки (столбца). <br>  
Их можно задавать для всей таблицы целиком, для одного ряда или для одной ячейки (столбца). <br>  
Строка 163: Строка 155:
&lt; /table &gt;  
&lt; /table &gt;  
 +
<br> [[Image:Tabl5.jpg|150px|Tаблица]]
-
 
+
<br> '''6) '''Теперь осталcя последний шаг: [[Выравнивание текста. Полные уроки|выравнивание]] содержимого (в нашем случае это текст) внутри таблицы:  
-
[[Image:Tabl5.jpg]]
+
-
 
+
-
<br> '''6) '''Теперь осталcя последний шаг: выравнивание содержимого (в нашем случае это текст) внутри таблицы:  
+
&lt; table &gt;<br>  
&lt; table &gt;<br>  
Строка 194: Строка 184:
Вот та таблица, которая была представлена в начале урока.  
Вот та таблица, которая была представлена в начале урока.  
-
 
-
[[Image:]]
 
<br> {{#ev:youtube|F7AXPyKRpQE}}  
<br> {{#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>  
<br>  
-
''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''  
+
----
 +
 
 +
<br> ''Отредактировано и выслано преподавателем Киевского национального [http://xvatit.com/vuzi/ukraine-ukr/ университета] им. Тараса Шевченко Соловьевым М. С.''  
 +
 
 +
<br>
 +
 
 +
----
 +
 
 +
<br> '''Над уроком работали'''
 +
 
 +
Соловьев М. С.
 +
 
 +
<br>
-
Если у вас есть исправления или предложения к данному уроку, [http://xvatit.com/index.php?do=feedback напишите нам].
+
----
-
Если вы хотите увидеть другие корректировки и пожелания к урокам, смотрите здесь - [http://xvatit.com/forum/ Образовательный форум].  
+
<br> Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов&nbsp; высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
[[Category:Информатика_10_класс]]
[[Category:Информатика_10_класс]]

Текущая версия на 19:48, 2 февраля 2013

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

Содержание

Тема

  • Создание таблиц. Часть 1.

Цель

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

Ход урока

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


Веб-страница



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

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

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

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

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


Tаблица


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

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

< table >

< tr >< /tr >

< tr >< tr >

< /table >


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


< table >

<tr>

< td >< /td >

< td >< /td >

< td >< /td >

< /tr >

< tr >

< td >< /td >

< td >< /td >

< td >< /td >

< /tr >

< /table >


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

< table >

< tr >

< td >1x1< /td >

< td >1x2< /td >

< td >1x3< /td >

< /tr >

< tr >

< td >2x1< /td >

< td >2x2< /td >

< td >2x3< /td >

< /tr >

< /table >


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


Tаблица



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

<tr bgcolor="pink">

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

< table bgcolor="pink" >


Вот результат:

Tаблица


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


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

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

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

< table >

< tr >

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

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

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

< /tr >

< tr >

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

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

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

< /tr >

< /table >


Tаблица


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

< table >

< tr >

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

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

< td width="50" bgcolor="pink" > < 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 >

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

</tr>

< /table >

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


Вопросы

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

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

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


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

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

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

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

4. Хольцшлаг М. Языки HTML и CSS: для создания Web-сайтов. — М.: ТРИУМФ, 2007 г.




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




Над уроком работали

Соловьев М. С.




Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов  высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.

Предмети > Информатика > Информатика 10 класс