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

Скачать материал

Выберите документ из архива для просмотра:

metod.doc автор.doc таблицы.ppt ‚ ¦®!.txt Методическая копилка учителя информатики.url

Выбранный для просмотра документ metod.doc

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

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

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

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

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

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

e-mail: krapivina_olga45@mail.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

Замечание

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

Тэги <TD> и <TH> не могут появляться вне описания строки таблицы<TR>.

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

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

Количество столбцов — максимальным количеством <TD> или <TH> среди всех строк.

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

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

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

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

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

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

Пример:

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

<HTML> <HEAD>

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

<BODY>

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

<TR>

<TD colspan=2 align=”center”>

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

<TR>

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

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

<TR>

<TD align="center">

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

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

</TR>

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

</BODY>

</HTML>

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

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

Замечания

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

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

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

LEFT – выравнивание заголовка по левому краю таблицы;
CENTER – выравнивание заголовка по центру таблицы;
RIGHT – выравнивание заголовка по правому краю таблицы.
А если требуется задать выравнивание для заголовка, который находится внизу таблицы? Неужели использовать в этом случае два параметра ALIGN???
Конечно, нет. Как раз для такого случая браузер Мicrosoft Internet Explorer распознает параметр VALIGN, используемый для определения местоположения заголовка таблицы. Он принимает значения TOP (заголовок располагается над таблицей) или BOTTOM (заголовок располагается под таблицей).
Таким образом, параметр VALIGN используется тогда, когда нужно задать выравнивание заголовка, расположенного внизу таблицы. Во всех остальных случаях можно обойтись параметром ALIGN.
Например, для заголовка, располагаемого внизу таблицы с выравниванием влево, тэг <CAPTION> имеет следующий вид:

<CAPTION ALIGN=LEFT VALIGN=BOTTOM> Заголовок,

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

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

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

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

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

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

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

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

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

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

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

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

Атрибуты

cellpadding="..." - определяют, соответственно, расстояние в пикселях между границей ячейки и ее содержимым,

cellspacing="..." определяют, соответственно, расстояние в пикселях между ячейками.

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

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

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

<TABLE border="l" width="100%">

<TR>

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

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

</TD> </TR> <TR>

<TD width= "33%" rowspan= " 2 " valign="middle">

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

<TD width="33%">no левому краю </TD>

</TR>

<TR>

<TD width="33%">

<P align="right">по правому краю </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

Наименование	Школа 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

Литература

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

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

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

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

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

Скачать материал

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

Как учитель может зарабатывать на Инфоуроке?

Выбранный для просмотра документ автор.doc

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

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

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

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

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

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

e-mail: krapivina_olga45@mail.ru

Скачать материал

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

Как учитель может зарабатывать на Инфоуроке?

Выбранный для просмотра документ таблицы.ppt

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

Скачать материал

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

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

1 слайд

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

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

3. Задания:
Создать эти таблицы, сохраняя все оформление.

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

Выбранный для просмотра документ ‚ ¦®!.txt

Данный материал был скачан с сайта www.metod-kopilka.ru

============================================================

!!!!!!!!Орфография и форматирование автора материала!!!!!!!!!!

========================================

Образовательно-информационный ресурс для учителей информатики,

учащихся и всех-всех, кто интересуется ИТ:

http://www.metod-kopilka.ru Методическая копилка учителя информатики

Организационные, методические и нормативные документы,

лабораторно-практические работы (комплекс занятий по MS Word, MS Excel,

MS Access, MS PowerPaint, Paint, Move Maker и др. прикладным программам),

лекции,конспекты, дидактический материал, занимательная информатика,

экзамен, проектная деятельность, презентации.

Все в свободном доступе! Без регистрации!

=========================================

P.S. Единственным источником дохода сайта является переход по рекламным ссылкам.

Если ресурс оказался Вам полезен, потратьте 1 минуту времени и кликните любой рекламный блок на сайте.

Заранее благодарна.

Скачать материал

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

Как учитель может зарабатывать на Инфоуроке?

Краткое описание документа:

. Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом . Внутри этой пары тэгов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек. Как известно, таблица состоит из строк, поэтому должен существовать тэг, «говорящий» браузеру, что является строкой. Отсюда каждая строка начинается тэгом . Отдельная ячейка в строке может быть описана следующим образом: с помощью тэгов и (Тable Data – данные таблицы) – таким образом создаются ячейки с данными; используя тэги и (Тable Нeader – заголовки таблицы) - применяются для создания ячеек, содержащих заголовки таблицы Замечание Различие в использовании этих тэгов заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячеек типа отображается полужирным шрифтом и располагается по центру (параметры и их значения: ALIGN=CENTER, align="absmiddle"). Ячейки, определенные тэгом , по умолчанию отображают данные, выровненные влево (ALIGN=LEFT) и посередине (align="absmiddle") в вертикальном направлении. Тэги и не могут появляться вне описания строки таблицы. Завершающие тэги , и могут быть опущены. В этом случае концом описания строки или ячейки является начало следующей строки или ячейки, или конец таблицы. Завершающий тэг таблицы также может быть опущен. Однако мы настоятельно рекомендуем их использовать с тем, чтобы сделать текст HTML-документа более понятным! Количество строк в таблице определяется числом открывающих тэгов . Количество столбцов — максимальным количеством или среди всех строк. Отсюда следует, что построение таблиц, в которых в разных строчках располагается различное количество столбцов одного и того же размера, не разрешается! Данные в некоторых ячейках могут отсутствовать. Тогда такие ячейки (их еще называют пустыми) описываются парой следующих подряд тэгов: , . А если нужно расположить несколько пустых ячеек в конце какой-нибудь строки? Неужели придется несколько раз писать такую конструкцию: ? В этом случае ничего записывать не нужно, а браузер автоматически добавит требуемое количество пустых ячеек. Большинство таблиц имеют заголовки, поэтому должен существовать тэг для их создания. Заголовок таблицы заключается в пару тэгов и , которые располагаются сразу же за тэгом Пример: По умолчанию текст внутри таблицы выравнивается по левому краю, а ширина столбца таблицы определяется наиболее длинным элементом в этом столбце ТIТLЕ ТаблицаТIТLЕ Начало таблицы — В Заголовок Таблицы.В Первая ячейка первой строки. Вторая ячейка первой строки. Первая ячейка второй строки. Вторая ячейка второй строки. •— конец таблицы —

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 672 174 материала в базе

Найти материалы

Скачать материал

Другие материалы

docx

Сборник практических работ в текстовом редакторе Microsoft Word 2010

Учебник: «Информатика», Босова Л.Л., Босова А.Ю.
Тема: § 3. Ввод информации в память компьютера

30.12.2020
4808
199

docx

Сборник практических работ в текстовом редакторе Microsoft Word 2010

Учебник: «Информатика», Босова Л.Л., Босова А.Ю.
Тема: § 3. Ввод информации в память компьютера

Рейтинг: 5 из 5

30.12.2020
2216
20

rar

Презентация по теме "Основные этапы разработки программы"

Учебник: «Информатика», Босова Л.Л., Босова А.Ю.
Тема: Приложение к Главе 3

30.12.2020
2123
32

pptx

Презентация. Кроссворд "Ульяновцы - Герои Советского Союза"

Учебник: «Информатика», Босова Л.Л., Босова А.Ю.
Тема: 5.2.2. Создание мультимедийной презентации

30.12.2020
2233
3

rar

Материал для стенда в кабинет информатики "Устройство системного блока"

01.12.2020
1973
24

rar

Презентация по информатике "Актуализация познавательной деятельности на уроках информатики"

28.11.2020
2265
2

rar

Разработка урока информатики на тему «Создание и форматирование диаграмм в Microsoft Office W класс)ord» (7

27.11.2020
2939
86

rar

Интеллектуальная игра по информатике "КиВиН-2017"

24.10.2020
1820
10

Вам будут интересны эти курсы:

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

Авторизуйтесь, чтобы задавать вопросы.

Скачать материал
- 24.10.2020 314
- ZIP 214.9 кбайт
- Оцените материал:
Настоящий материал опубликован пользователем Волова Наталия Александровна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Автор материала

Волова Наталия Александровна
- На сайте: 3 года и 4 месяца
- Подписчики: 0
- Всего просмотров: 75697
- Всего материалов: 212