Математика
Физика
Химия
География
Биология
Экология
Информатика
Экономика
Русский язык
Литература
Музыка
МХК и ИЗО
ОБЖ
История и
 обществознание

Иностранные языки
Спорт и здоровье
Технология
ТОП 20 статей сайта
Рекомендуем посетить

Преподавание информатики

Использование таблиц для размещения объектов на Web-страницах

Добавлено: 2018.08.26
Просмотров: 3

Добрынина Светлана Игоревна, учитель информатики

Цели урока:

Задачи:

Тип урока:

Ход урока

1. Оргмомент и объяснение хода урока.

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

2. Повторение пройденного материала (Приложение 1).

Заполнить кроссворд и получить ключевое слово в выделенном столбце. Время выполнения 4-5 минут.

3. Практические задания (Приложение 2).

Каждому учащемуся выдается лист с заданием. Дается время (1 минута), чтобы определить структуру, используемую в задании.

Учащиеся должны увидеть:

Затем учитель вместе с классом разбирают структуру в каждом задании (4-5 минут) и учащиеся после разбора на компьютерах выполняют предложенные задания.

a. По 1 заданию учащиеся определяют:

Образец выполнения задания (в папке Приложение 3):

<HTML>
<HEAD>
<TITLE>
Таблица 1
</TITLE>
</HEAD>
<BODY>
<TABLE align=center border=1 bgcolor=#56ADA9>
<TR>
<TD>
ВНИМАНИЕ! ВНИМАНИЕ!
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

b. По 2 заданию учащиеся определяют:

Образец выполнения задания (в папке Приложение 3):

<HTML>
<HEAD>
<TITLE>
Таблица 2
</TITLE>
</HEAD>
<BODY>
<TABLE cellspacing=0 width=100% height=100% border=1>
<TR>
<TD align=center valign=middle>
ВНИМАНИЕ! ВНИМАНИЕ
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

c. По 3 заданию учащиеся определяют:

Образец выполнения задания (в папке Приложение 3):

<HTML>
<HEAD>
<TITLE>
Таблица 3
</TITLE>
</HEAD>
<BODY>
<TABLE cellspacing=0 width=100% height=100% border=30 bordercolor=#77CA99 bgcolor=#808080 cellpadding=25>
<TR>
<TD valign=middle> <font size=7>
ВНИМАНИЕ! ВНИМАНИЕ </font>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

d. По 4 заданию учащиеся определяют:

Образец выполнения задания (в папке Приложение 3):

<HTML>
<HEAD>
<TITLE>
Таблица 4
</TITLE>
</HEAD>
<BODY>
<TABLE height=100%>
<TR >
<TD width=20% rowspan=3></TD>
<TD width=1 border=1 bgcolor=black rowspan=3></TD>
<TD width=80%> <font size=7>
ВНИМАНИЕ!
</TD>
</TR>
<TR>
<TD><font size=7>
ВНИМАНИЕ!
</TD>
</TR>
<TR>
<TD><font size=7>
ВНИМАНИЕ!
</TD>
</TR>
</BODY>
</HTML>

Схема объединения ячеек:

G Напомнить, что при объединении убираем лишние ячейки и в следующей строке используем тег < TD > только один раз.

e. По 5 заданию учащиеся определяют:

Образец выполнения задания (в папке Приложение 3):

<HTML>
<HEAD>
<TITLE>
Таблица 5
</TITLE>
</HEAD>
<BODY>
<TABLE height=100%>
<TR >
<TD width=100 valign=top>ширина колонки 100 пикселов</TD>
<TD width=1 border=1 bgcolor=black></TD>
<TD width=500 valign=top>ширина колонки 500 пикселов</TD>
</TR>
</BODY>
</HTML>

f. Задание с графическим наполнением выполняют без пояснения, так как есть поясняющая таблица

Образец выполнения задания (в папке Приложение 3):

<HTML>
<HEAD>
<TITLE>
Таблица 6
</TITLE>
</HEAD>
<BODY>
<TABLE cellpadding=0 cellspacing=0>
<TR>
<TD rowspan=3><img src=img1.jpg></TD>
<TD ><img src=img2.jpg></TD>
<TD rowspan=3><img src=img5.jpg></TD>
</TR>
<TR>
<TD><img src=img3.jpg></TD>
</TR>
<TR>
<TD><img src=img4.jpg></TD>
</TR>
</TABLE>
</BODY>
</HTML>

4. Подведение итогов урока.

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


x