Главная / Информатика / Конспект урока «Основы Web-дизайна. Создание таблиц»

Конспект урока «Основы Web-дизайна. Создание таблиц»

Название документа metod.doc

Ф.И.О.: Крапивина Ольга Валентиновна

Место работы: МОУ ДОД «Дворец детского (юношеского) творчества»

Объединение «Информатика и информационные технологии»

г. Курган Курганской области

должность: педагог дополнительного образования

квалификация: высшая

e-mail: krapivina_olga45@mail.ru


Основы WEB-дизайна.

Тема занятия: «Создание таблиц»


Ключевые слова: информатика, WEB-дизайн, занятие, программирование, HTML-документ

1. Вводная часть, целевые ориентиры занятия

Одним из наиболее мощных и широко применяемых в НТМL средств являются таблицы. В НТМL таблицы используются не только традиционно, как метод представления данных, но и как средство формирования Web-страниц.

С развитием сфер применения НТМL-документов стала актуальной задача представления данных, для которых типично наличие ряда строк и столбцов. Создание документов, содержащих выровненные по колонкам данные, на первых порах осуществлялось использованием заранее отформатированного текста, внутри которого необходимое выравнивание обеспечивалось введением нужного количества пробелов.

Использование таблиц не ограничивается только данными, состоящими из рядов и колонок. Одним из применений является организация расположения разнообразных данных на странице, которые могут состоять из простого текста, изображений, других таблиц и т.д. Правилам создания таблиц и примерам их использования посвящена данная тема.

2.Объяснение нового материала

Рассмотрим сначала минимальный набор тэгов и их параметров, необходимый для создания несложных таблиц, а затем перейдем к их детальному описанию.

Описание таблиц должно располагаться внутри раздела документа . Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом

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

Как известно, таблица состоит из строк, поэтому должен существовать тэг, “говорящий” браузеру, что является строкой. Отсюда каждая строка начинается тэгом (Тable Row – строка таблицы) и завершается тэгом .

    Отдельная ячейка в строке может быть описана следующим образом:

  • с помощью тэгов

    и (Тable Data – данные таблицы) – таким образом создаются ячейки с данными;
  • используя тэги

    и (Тable Нeader – заголовки таблицы) - применяются для создания ячеек, содержащих заголовки таблицы

    Замечание

    Различие в использовании этих тэгов заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячеек типа

    отображается полужирным шрифтом и располагается по центру (параметры и их значения: ALIGN=CENTER, VALIGN=MIDDLE). Ячейки, определенные тэгом , по умолчанию отображают данные, выровненные влево (ALIGN=LEFT) и посередине (VALIGN=MIDDLE) в вертикальном направлении.

    Тэги

    и не могут появляться вне описания строки таблицы.

    Завершающие тэги

    , и могут быть опущены. В этом случае концом описания строки или ячейки является начало следующей строки или ячейки, или конец таблицы. Завершающий тэг таблицы также может быть опущен. Однако мы настоятельно рекомендуем их использовать с тем, чтобы сделать текст HTML-документа более понятным!

       Количество строк в таблице определяется числом открывающих тэгов .

        Количество столбцов — максимальным количеством

    или среди всех строк.

        Отсюда следует, что построение таблиц, в которых в разных строчках располагается различное количество столбцов одного и того же размера, не разрешается!

        Данные в некоторых ячейках могут отсутствовать. Тогда такие ячейки (их еще называют пустыми) описываются парой следующих подряд тэгов:

    , . А если нужно расположить несколько пустых ячеек в конце какой-нибудь строки? Неужели придется несколько раз писать такую конструкцию: ? В этом случае ничего записывать не нужно, а браузер автоматически добавит требуемое количество пустых ячеек.

    Большинство таблиц имеют заголовки, поэтому должен существовать тэг для их создания. Заголовок таблицы заключается в пару тэгов и , которые располагаются сразу же за тэгом

        По умолчанию текст заголовка таблицы располагается над ней (ALIGN=TOP) и центрируется в горизонтальном направлении.

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

        Этих сведений вполне достаточно для построения элементарных таблиц.

    Пример:


    По умолчанию текст внутри таблицы выравнивается по левому краю, а ширина столбца таблицы определяется наиболее длинным элементом в этом столбце

    <HTML> <HEAD>

    IТLЕ>ТаблицаТIТLЕ> HEAD>

    border=2”> Начало таблицы —>

    colspan=2 align=”center”>

    <В>Заголовок Таблицы.В> TD> TR>

    <TR>

    <TD align="center">

    Первая ячейка первой строки. TD>

    <TD align»"center">

    Вторая ячейка первой строки.

    align="center">

    Первая ячейка второй строки. TD>

    <TD align="center">

    Вторая ячейка второй строки. TD>

    TR>

    TABLE> <•— конец таблицы —>

    BODY>

    HTML>

    hello_html_12bd2a5d.jpg

    Как известно, для задания заголовка таблицы используется тэг . Он имеет единственный допустимый параметр ALIGN, принимающий следующие значения:

  • ТОР (значение по умолчанию) - заголовок располагается над таблицей;

BOTTOM - заголовок находится под таблицей.

   Замечания

Если таблица не имеет заголовка, то тэг не используется!

По горизонтали заголовок таблицы всегда располагается по центру таблицы

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

LEFT – выравнивание заголовка по левому краю таблицы;

CENTER – выравнивание заголовка по центру таблицы;

RIGHT – выравнивание заголовка по правому краю таблицы.

А если требуется задать выравнивание для заголовка, который находится внизу таблицы? Неужели использовать в этом случае два параметра ALIGN???

    Конечно, нет. Как раз для такого случая браузер Мicrosoft Internet Explorer распознает параметр VALIGN, используемый для определения местоположения заголовка таблицы. Он принимает значения TOP (заголовок располагается над таблицей) или BOTTOM (заголовок располагается под таблицей).

    Таким образом, параметр VALIGN используется тогда, когда нужно задать выравнивание заголовка, расположенного внизу таблицы. Во всех остальных случаях можно обойтись параметром ALIGN.

    Например, для заголовка, располагаемого внизу таблицы с выравниванием влево, тэг имеет следующий вид:

Заголовок,

расположенный внизу таблицы с выравниванием влево САРТION>

Ширина таблицы задается атрибутом width=”...” для тега <ТАВLЕ>, а значение ширины таблицы может задаваться в пикселях или в процентах от ширины экрана.

Содержимое каждой ячейки может быть выровнено с помощью атрибутов align="..." (горизонтальное положение) и valign=”...” (вертикальное положение) для тегов <TR> или <TD>.

Атрибут valign=...” может принимать следующие значения:

top - прижать вверх,

bottom - прижать вниз

middle - разместить по центру,

а атрибут align="..." принимает следующие знаhello_html_7bab8421.gifчения:

left - прижать влево,

right - прижать вправо

center -разместить по центру.

Атрибут border=”...” тега <TABLE> рисует рамку вокруг таблицы и каждой ячейки, при этом ширина рамки задается в пикселях. Для отдельной ячейки рамка не задается.

Атрибуты

cell;background: #ffffff"> cellspacing="..." определяют, соответственно, расстояние в пикселях между ячейками.

Следует иметь в виду, что атрибуты colspan=”...и rowspan="..." тегов <TD> и <TR> позволяют объединять ячейки таблицы в группы, вокруг которых рисуется рамка.

Рассмотрим пример таблицы, занимающей по ширине весь экран броузера:


Сложная таблица


<TR>

<TD width="66%" colspan="2">

<P aligns"center">Две ячейки, объединенные по горизонтали

Две ячейки, объединенные по вертикали TD>

no левому краю

по правому краю TD> TR>

TABLE>

Таблицы очень часто используются для позиционирования различных элементов на Web-странице. С помощью таблиц можно создавать обтекание рисунков, упорядочивать элементы форм (об этом речь пойдет на следующих занятиях), а также позиционировать другие элементы HTML-документа.



3. Задания:


1. Создать эту таблицу, сохраняя все оформление.

Участники похода

Ф И О

Данные об участниках похода

Год рожд.

адрес

телефон

Школа

Иванов П. И.

01.03.1989

Ул. Ленина, д.15-26

45-25-12

32

Максимов С. П.

12.05.1987

Ул. Пушкина, д. 106-5

-

27

Петухова С. И.

25.12.1988

Ул. Пролетарская, д.6-25

45-15-56

19

Симонова Е.П.

07.08.1986

Ул. Станционная, д.56-1

91-25-65

5


2.

Наименование

Школа 1

Школа 2

Класс

Получено

Всего

Класс

Получено

Всего

Шоколад

9

20

60

9

25

65

10

25

10

15

11

15

11

25

Лимонад

9

5

18

9

6

21

10

6

10

7

11

7

11

8


Литература

Периодические издания: журналы «Компьютерра», «PC magasin»,

Н. В. Комолова. HTML и XHTML. Языки разметки web-страниц. / Н. В. Комолова. Самоучитель. 1 издание. СПб, Издательство: "Питер", 2009, 272 с.

Фримен Эрик, Фримен Элизабет. HTML и XHTML. Языки разметки web-страниц. / Фримен Эрик, Фримен Элизабет. Бестселлеры O'Reilly. 1 издание. СПб Издательство: "Питер", 2010, 656 с.

А. А. Чиртик. HTML и XHTML. Языки разметки web-страниц. / А. А. Чиртик. Популярный самоучитель. 1 издание. СПб Издательство: "Питер", 2008, 256 с.

Электронные учебники, материалы из сети Интернет.


Название документа автор.doc

Ф.И.О.: Крапивина Ольга Валентиновна

Место работы: МОУ ДОД «Дворец детского (юношеского) творчества»

Объединение «Информатика и информационные технологии»

г. Курган Курганской области

должность: педагог дополнительного образования

квалификация: высшая

e-mail: krapivina_olga45@mail.ru


Название документа таблицы.ppt

Тема занятия: «Создание таблиц» Основы WEB-дизайна. Ф.И.О.: Крапивина Ольга В...
Одним из наиболее мощных и широко применяемых в НТМL средств являются таблицы...
Описание таблиц должно располагаться внутри раздела документа . Документ мож...
Как известно, таблица состоит из строк, поэтому должен существовать тэг, “гов...
Отдельная ячейка в строке может быть описана следующим образом: с помощью тэг...
Замечание Различие в использовании этих тэгов заключается лишь в типе шрифта,...
   Количество строк в таблице определяется числом открывающих тэгов .     Кол...
Пример: По умолчанию текст внутри таблицы выравнивается по левому краю, а шир...
Атрибуты: width=”...” для тега  ширина таблицы, а значение ширины таблицы мож...
3. Задания: Создать эти таблицы, сохраняя все оформление. 1.			Участники похо...
1 из 10

Описание презентации по отдельным слайдам:

№ слайда 1 Тема занятия: «Создание таблиц» Основы WEB-дизайна. Ф.И.О.: Крапивина Ольга Вале
Описание слайда:

Тема занятия: «Создание таблиц» Основы WEB-дизайна. Ф.И.О.: Крапивина Ольга Валентиновна Место работы: МОУ ДОД «Дворец детского (юношеского) творчества» Объединение «Информатика и информационные технологии»

№ слайда 2 Одним из наиболее мощных и широко применяемых в НТМL средств являются таблицы. В
Описание слайда:

Одним из наиболее мощных и широко применяемых в НТМL средств являются таблицы. В НТМL таблицы используются не только традиционно, как метод представления данных, но и как средство формирования Web-страниц.

№ слайда 3 Описание таблиц должно располагаться внутри раздела документа . Документ может
Описание слайда:

Описание таблиц должно располагаться внутри раздела документа <BODY>. Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом <TABLE> и завершаться тэгом </TABLE>. Внутри этой пары тэгов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.

№ слайда 4 Как известно, таблица состоит из строк, поэтому должен существовать тэг, “говоря
Описание слайда:

Как известно, таблица состоит из строк, поэтому должен существовать тэг, “говорящий” браузеру, что является строкой. Отсюда каждая строка начинается тэгом <TR> (Тable Row – строка таблицы) и завершается тэгом </TR>.

№ слайда 5 Отдельная ячейка в строке может быть описана следующим образом: с помощью тэгов
Описание слайда:

Отдельная ячейка в строке может быть описана следующим образом: с помощью тэгов <TD> и <TD> (Тable Data – данные таблицы) – таким образом создаются ячейки с данными; используя тэги <TH> и <TH> (Тable Нeader – заголовки таблицы) - применяются для создания ячеек, содержащих заголовки таблицы

№ слайда 6 Замечание Различие в использовании этих тэгов заключается лишь в типе шрифта, ис
Описание слайда:

Замечание Различие в использовании этих тэгов заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячеек типа <TH> отображается полужирным шрифтом и располагается по центру (параметры и их значения: ALIGN=CENTER, VALIGN=MIDDLE). Ячейки, определенные тэгом <TD>, по умолчанию отображают данные, выровненные влево (ALIGN=LEFT) и посередине (VALIGN=MIDDLE) в вертикальном направлении. Тэги <TD> и <TH> не могут появляться вне описания строки таблицы<TR>.

№ слайда 7    Количество строк в таблице определяется числом открывающих тэгов .     Количе
Описание слайда:

   Количество строк в таблице определяется числом открывающих тэгов <TR>.     Количество столбцов — максимальным количеством <TD> или <TH> среди всех строк.     Отсюда следует, что построение таблиц, в которых в разных строчках располагается различное количество столбцов одного и того же размера, не разрешается!

№ слайда 8 Пример: По умолчанию текст внутри таблицы выравнивается по левому краю, а ширина
Описание слайда:

Пример: По умолчанию текст внутри таблицы выравнивается по левому краю, а ширина столбца таблицы определяется наиболее длинным элементом в этом столбце <HTML> <HEAD> <ТIТLЕ>Таблица</ТIТLЕ> </HEAD> <BODY> <TABLE border=”2”> <!— Начало таблицы —> <TR> <TD colspan=2 align=”center”> <В>Заголовок Таблицы.</В> </TD> </TR> <TR> <TD align="center"> Первая ячейка первой строки. </TD> <TD align»"center"> Вторая ячейка первой строки. </TD> </TR> <TR> <TD align="center"> Первая ячейка второй строки. </TD> <TD align="center"> Вторая ячейка второй строки. </TD> </TR> </TABLE> <•— конец таблицы —> </BODY> </HTML>

№ слайда 9 Атрибуты: width=”...” для тега  ширина таблицы, а значение ширины таблицы может
Описание слайда:

Атрибуты: width=”...” для тега <ТАВLЕ> ширина таблицы, а значение ширины таблицы может задаваться в пикселях или в процентах от ширины экрана. align="..." (горизонтальное положение) и valign=”...” (вертикальное положение) для тегов <TR> или <TD> - выравнивание содержимого ячейки. Атрибут valign=”...” может принимать следующие значения: top - прижать вверх, bottom - прижать вниз middle - разместить по центру, а атрибут align="..." принимает следующие значения: left - прижать влево, right - прижать вправо center -разместить по центру. border=”...” тега <TABLE> рисует рамку вокруг таблицы и каждой ячейки, при этом ширина рамки задается в пикселях. Для отдельной ячейки рамка не задается. cellpadding="..." - определяют, соответственно, расстояние в пикселях между границей ячейки и ее содержимым, cellspacing="..." определяют, соответственно, расстояние в пикселях между ячейками. colspan=”...” и rowspan="..." тегов <TD> и <TR> позволяют объединять ячейки таблицы в группы.

№ слайда 10 3. Задания: Создать эти таблицы, сохраняя все оформление. 1.			Участники похода
Описание слайда:

3. Задания: Создать эти таблицы, сохраняя все оформление. 1. Участники похода 2. Ф И О Данные об участниках похода Год рожд. адрес телефон Школа Иванов П. И. 01.03.1989 Ул. Ленина, д.15-26 45-25-12 32 Максимов С. П. 12.05.1987 Ул. Пушкина, д. 106-5 - 27 Петухова С. И. 25.12.1988 Ул. Пролетарская, д.6-25 45-15-56 19 Симонова Е.П. 07.08.1986 Ул. Станционная, д.56-1 91-25-65 5 Наименование Школа 1 Школа 2 Класс Получено Всего Класс Получено Всего Шоколад 9 20 60 9 25 65 10 25 10 15 11 15 11 25 Лимонад 9 5 18 9 6 21 10 6 10 7 11 7 11 8

Конспект урока «Основы Web-дизайна. Создание таблиц»
  • Информатика
Описание:
. Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом . Внутри этой пары тэгов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.
Как известно, таблица состоит из строк, поэтому должен существовать тэг, «говорящий» браузеру, что является строкой. Отсюда каждая строка начинается тэгом .
Отдельная ячейка в строке может быть описана следующим образом:
  • с помощью тэгов и (Тable Data – данные таблицы) – таким образом создаются ячейки с данными;
  • используя тэги и (Тable Нeader – заголовки таблицы) - применяются для создания ячеек, содержащих заголовки таблицы

    Замечание
    Различие в использовании этих тэгов заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячеек типа

    отображается полужирным шрифтом и располагается по центру (параметры и их значения: ALIGN=CENTER, align="absmiddle"). Ячейки, определенные тэгом , по умолчанию отображают данные, выровненные влево (ALIGN=LEFT) и посередине (align="absmiddle") в вертикальном направлении.
    Тэги и не могут появляться вне описания строки таблицы.
    Завершающие тэги , и могут быть опущены. В этом случае концом описания строки или ячейки является начало следующей строки или ячейки, или конец таблицы. Завершающий тэг таблицы также может быть опущен. Однако мы настоятельно рекомендуем их использовать с тем, чтобы сделать текст HTML-документа более понятным!
    Количество строк в таблице определяется числом открывающих тэгов .
    Количество столбцов — максимальным количеством или среди всех строк.
    Отсюда следует, что построение таблиц, в которых в разных строчках располагается различное количество столбцов одного и того же размера, не разрешается!
    Данные в некоторых ячейках могут отсутствовать. Тогда такие ячейки (их еще называют пустыми) описываются парой следующих подряд тэгов: , . А если нужно расположить несколько пустых ячеек в конце какой-нибудь строки? Неужели придется несколько раз писать такую конструкцию: ? В этом случае ничего записывать не нужно, а браузер автоматически добавит требуемое количество пустых ячеек.
    Большинство таблиц имеют заголовки, поэтому должен существовать тэг для их создания. Заголовок таблицы заключается в пару тэгов и , которые располагаются сразу же за тэгом

    Пример:

    По умолчанию текст внутри таблицы выравнивается по левому краю, а ширина столбца таблицы определяется наиболее длинным элементом в этом столбце

    <ТIТLЕ>ТаблицаТIТLЕ>
     

    Начало таблицы —>
     
    >
     <В>Заголовок Таблицы.В>



    Первая ячейка первой строки.


    Вторая ячейка первой строки.


    >
    Первая ячейка второй строки.


    Вторая ячейка второй строки.


    <•—  конец таблицы —>

Автор Крапивина Ольга Валентиновна
Дата добавления 04.11.2011
Раздел Информатика
Подраздел
Просмотров 2005
Номер материала 608
Скачать свидетельство о публикации

Оставьте свой комментарий:

Введите символы, которые изображены на картинке:

Получить новый код
* Обязательные для заполнения.


Комментарии:

↓ Показать еще коментарии ↓