Цели урока:
Образовательная:
- Сформулировать основные принципы добавления графических изображений и таблиц в WEB-страницы;
- Познакомить учеников с тегом вставки картинок, таблиц;
- Продемонстрировать использования этих тегов на конкретных примерах, применить полученные знания на практике.
Развивающая:
- Развивать логику, умение анализировать, сравнивать, делать выводы, высказывать свою мысль.
Воспитательная:
- Воспитывать аккуратность, внимательность, вежливость.
Оборудование, использованная литература и средства наглядности: учебник Н. Угринович “Информатика и ИКТ” 8 кл., мультимедийная система, интерактивная доска, компьютеры, презентация Microsoft PowerPoint.
План урока
| № | Наименование этапов урока | Отведенное время |
| 1. | Организационный момент | 1 мин. |
| 2. | Актуализация опорных знаний | 5 мин. |
| 3. | Сообщение темы | 1 мин. |
| 4. | Изучение нового материала | 20 мин. |
| 5. | Первичное закрепление полученных знаний | 15 мин. |
| 6. | Оценивание деятельности учащихся | 1 мин. |
| 7. | Сообщение домашнего задания | 1 мин. |
| 8. | Подведение итогов урока | 1 мин. |
Ход урока
| Этап урока | Решаемая дидактическая задача | Деятельность учителя | Деятельность учащихся | Результат выполнения дидактической задачи |
| Орг. момент | Подготовка учащихся к работе на уроке | Приветствие, установление дисциплины на уроке, определение отсутствующих в классе | Подготовка учащихся к учебной деятельности | Кратковременность организации начала урока, быстрое включение учащихся в диалоговый режим |
| Актуализация опорных знаний | Формирование познавательной мотивации обучения, культуру общения у учащихся | Ребята, ответьте мне на следующие
вопросы: 1.Как можно изменить шрифт в вашем сайте? 2. Как задать название документа, которое выводится в строке заголовка в программе-браузере? 3. Как установить цвет фона документа? 4. Как поместить в качестве фона изображение? |
Ответы на вопросы, задаваемые учителем. 1. Тег <font> … </font>- изменяет размер, цвет и стиль текста. Атрибуты: size - размер шрифта 1-7. По-умолчанию size=3 color - цвет текста, face - название шрифта 2. (Тег <Title>…</ Title> содержит слова, которые появляются в стоке заголовка браузера 3. Bgcolor – изменяет цвет фона. 4. Background – помещает в качестве фона изображение из файла с картинкой |
Активность каждого ученика в учебной деятельности |
| Сообщение темы и постановка целей урока | Нацеливание учащихся на решение учебной задачи | Все это вы уже изучали ранее, а сегодня мы будем учиться правильно оформлять рисунки на Web- страницах и создавать таблицы | Понимание и осмысление целей урока и учебной задачи | Прогнозируемый результат достижения цели урока |
| Изучение нового материала | Сформировать у учащихся конкретные представления об изучаемых факторах, явлениях, процессах, раскрытие их сущности, связи и выделении главного. | Словесное объяснение темы, демонстрация конкретных примеров, работа с презентацией. | Слушают учителя, отвечают на возникшие по ходу вопросы, конспектируют основные моменты, примеры, просмотр презентации. | При объяснении нового материала
использование различных методических приемов,
оборудования, а также руководство
личностно-ориентированным и компетентностным
подходами способствуют включению учащихся в
активную
познавательную деятельность |
| Первичное закрепление полученных знаний. | Улучшить усвоение материала его практическим применением | Разбейтесь по парам и садитесь за компьютеры. На диске ….. в папке …… для вас есть задание, которое необходимо выполнить за оставшееся время на этом уроке. | Выполнение заданий за ПК | Запоминание выполненной работы, умение объяснять как достигнут результат |
| Оценивание деятельности учащихся. | Объективная оценка деятельности учащихся | За работу на уроке … учащиеся получают … отметки. | Запись своей отметки в дневники | Мотивация к выполнению практических работ |
| Сообщение домашнего задания | Домашнее задание направлено на осмысление нового материала, подготовку к последующему обучению | Ребята, откройте дневники, запишите домашнее задание: выучить новые понятия, теги, атрибуты, выбрать проект (слайд 20) и найти материал по этой теме, принести на следующий урок. | Фиксирование в дневниках домашнее задание | Работа по инструктированию в рамках урока |
| Подведение итогов урока | Анализ успешности овладения пройденной темы | Сегодня на уроке вы узнали, как
правильно оформлять рисунки и создавать
различные таблицы в веб-документе, попробовали
это на практике. Спасибо за работу на уроке, можете быть свободными. |
Проведение самоанализа своей учебной работы на уроке | Краткость и емкость анализа, определение мер для последующей работы |
1. Организационный момент.
Здравствуйте! Прошу всех садиться.
2. Актуализация опорных знаний.
Ребята, ответьте мне на следующие вопросы:
- Как можно изменить шрифт в вашем сайте?
| <b>…</b> | Полужирный шрифт | <big>… </big> | Увеличенный шрифт |
| <i>…</i> | Курсив | <small>…</small> | Уменьшенный шрифт |
| <u>…</u> | Подчеркивание | <sup>… </sup> | Верхний индекс |
| <s>…</s> | Зачеркнутый шрифт | <sub>… </sub> | Нижний индекс |
Тег <font> … </ font>- изменяет размер, цвет и стиль текста. Атрибуты: size - размер шрифта 1-7. По умолчанию size =3 color - цвет текста, face - название шрифта
- Как задать название документа, которое
выводится в строке заголовка в
программе-браузере? (Тег <Title >…</Title>
содержит слова, которые появляются в стоке
заголовка браузера)
- Как установить цвет фона документа? (Bgcolor –
изменяет цвет фона. Цвет задается словом или
кодом RGB <body bgcolor = “red”> <body bgcolor = “#FF0000”>)
- Как поместить в качестве фона изображение? (
Background – помещает в качестве фона изображение из
файла с картинкой <body background = “dog.gif”>)
3. Сообщение темы.
Все это вы уже изучали ранее, а сегодня мы научимся правильно оформлять рисунки на Web- страницах и создавать таблицы (слайд № 1)
4. Изучение нового материала.
Современные браузеры могут работать с различными форматами изображений, но наиболее предпочтительные – .GIF , .JPEG. Для фотографий лучше использовать формат JPEG .
Для рисунков и пиктограмм – GIF (Слайд 2). Тэг <IMG> – вставка изображений (слайд 3).
Атрибуты:
1. Src – обязательный, значение – адрес изображения <img src = “dog .gif”>
Обычно файлы с картинками помещают в ту же папку, что и сама страница или в отдельную папку: <img src = “pict/dog .gif”>
2. Alt – определяет альтернативный текст, который появляется на месте картинки в окне браузера, если вывод картинки невозможен или заблокирован пользователем. Значение alt – строка текста, длиной до 1024 символа. Кавычки обязательны. Alt= “Собака“ Этот текст также появиться в виде всплывающей подсказки, когда указатель мыши направлен на картинку.
3. Align – выравнивание. Положение изображения лучше всегда указывать явно. (слайд 4)
Значения:
- left, right – по левому или по правому краю.
- top – верхняя граница изображения устанавливается на уровне верхнего края самого высокого элемента в строке.
- middle – середина изображения выравнивается с серединой строки.
- bottom – (по умолчанию) нижний край изображения выравнивается с базовой линией текста.
4. border – устанавливает или убирает (для гиперссылок) рамку вокруг изображения (слайд 5)
border = толщина рамки в пикселях.
border=0 – убрать рамку.
5. height, width – высота и ширина изображения в пикселях. Размеры могут быть больше или меньше реальных размеров изображения. Браузер автоматически масштабирует его. Значения можно указывать в % по отношению к окну.
width = “100%” height = 20 – полоса на все окно шириной 20 пикселей.
Если указать только width = “30%”, то высоту браузер подберет сам пропорционально рисунку. Если картинка не загрузилась, то на экране остается пустая область с заданными атрибутами height , width.
6. Hspace, vspace – задают расстояние в пикселях между картинкой и текстом по вертикали и горизонтали.
Центрирование изображения (слайд 6)Выровнять изображение по центру можно, только выделив его из текста тэгами абзацев, раздела <p > или новой строки. Обтекание изображения текстом (слайд 7). Значения left и right атрибута align помещают изображение у левого или правого края документа. Затем браузер выводит оставшееся содержание документа в свободное пространство, смежное с изображением, текст обтекает изображение.
Можно поместить картинки одновременно по обеим сторонам документа. В этом случае картинки задаются перед текстом (слайд 8).
Вот HTML-код этой станицы (слайд 9)
<body bgcolor ="#008080"> <p>
<hr width="50%" size="5"> <p>
<img src="1.jpg" width="25%" hspace="10"
vspace="10" border="0" align="left">
<img src="3.jpg" width="25%" hspace="10"
vspace="10" border="0" align="right">
<font size="+1" color="#C0C0C0">
<p align="center">
Кошки очень забавные животные.
<br>
Они создают уют в доме, радуют нас.
<br clear="all"> Особенно приятно смотреть на
маленьких котят. <p>
<hr width="50%" size ="5"> <p>
</font>
</body>
</html>
Пояснения:
Обе картинки имеют значение атрибута width="25%" , но правая картинка заметно меньше левой. Это происходит потому, что 25% для правой картинку вычисляются от ширины, оставшейся после вывода левой картинки, т.е., от 75% ширины окна браузера.
Для того, чтобы текст выводился после всех картинок, а не между ними, используем <br clear="all">
Создание таблиц в web -документах (слайд 10).
Тег <table>… </table>создает таблицу.
Все прочие элементы таблицы – текст, рисунки, списки - должны быть вложенными в него. Допускается также вложение таблиц одна в другую, т.е. содержимым ячейки может быть другая таблица.
Теги <tr>…</tr> и <td>…</td> – описывают строки и столбцы (ячейки таблицы).
Тег <th> …</t h> – описывает заголовки в первой строке таблицы.
Тег <caption>… </ caption> – описывает заголовок таблицы (слайд 11).
Атрибуты для тега <table>… </table> (слайд 12).
Align – выравнивание таблицы относительно
документа. Возможные значения: center, left, right.
Valign – выравнивает текст в таблице по вертикали.
Значения: top, bottom, middle, baseline.
Background=“имя файла“ – строка, определяющая
рисунок для заднего фона таблицы.
Bgcolor =“цвет” – определяет задний фон таблицы.
Border – толщина внешней рамки в пикселях. Если
атрибут не указан, то таблица выводится без
видимой рамки.
Bordercolor =“цвет” – цвет рамки.
Bordercolorlight =“цвет” – цвет рамки слева и сверху.
Bordercolordark =“цвет” – цвет рамки справа и снизу.
Атрибуты для тега <table>… </table>
Title =“Текст“ – всплывающая подсказка.
Width = число – ширина таблицы в процентах или
пикселях.
Height = число – рекомендуемая высота таблицы
только в пикселях.
Cellspacing = число – расстояние между ячейками.
Cellpadding = число – расстояние между содержимым и
рамкой.
Colls = число – заранее сообщает браузеру
количество столбцов в таблице.
(Слайд 14)
Пример:
<body bgcolor="#008080">
<table border="3" bordercolor="#ff00ff“ cellpadding="10"
cellspacing="10">
<tr>
<td background="4.jpg"> A </td>
<td bgcolor="#C0C0C0"> <img src="6.jpg" > </td>
</tr>
</table>
</body>
Атрибуты для тега <table >…</table> (слайд 15)
Cлайдrules – описывает рамки внутри таблицы. Значения:
| all | Отображает все части рамки внутри таблицы |
| cols | Отображает все вертикальные рамки внутри таблицы |
| none | Удаляет все рамки внутри таблицы |
| rows | Отображает все горизонтальные рамки внутри таблицы |
Атрибуты для тега <table >…</table> (слайд 16)
Frame – описывает параметры внешней рамки. Значения:
| box | Отображает все части рамки вокруг таблицы |
| void | Удаляет все рамки вокруг таблицы |
| above | Рамка только сверху |
| belov | Рамка только снизу |
| lhs | Рамка только слева |
| rhs | Рамка только справа |
| vsides | Рамка только слева и справа |
| hsides | Рамка только сверху и снизу |
Тег <tr>…</tr> – строка таблицы (слайд 17)
В этом теге можно использовать почти все атрибуты, что и в теге таблицы. Но действуют они только в этой строке
<th> – ячейки таблицы с заголовками столбцов.
<td> – ячейки таблицы с данными.
В этих тегах тоже можно применять почти все атрибуты таблицы.
Для оформления текста можно использовать все теги форматирования.
Таблица строится по строкам. Сначала прописываются все ячейки в первой строке, затем – во второй, и т.д. (слайд 18)
Пример:
<table border=2 cols=2 bgcolor=yellow align=center>
<TR>
<TH>Заголовок столбца 1</TH>
<TH>Заголовок столбца 2</TH>
</TR>
<TR>
<TD>Ячейка столбца 1, ряд 1</TD>
<TD>Ячейка столбца 2, ряд 1</TD>
</TR>
<TR>
<TD>Ячейка столбца 1, ряд 2</TD>
<TD>Ячейка столбца 2, ряд 2</TD>
</TR>
</table>
(Слайд 19)
COLSPAN – Указывает, какое количество ячеек будет
объединено по горизонтали для указанной ячейки.
ROWSPAN – Указывает, какое количество ячеек будет
объединено по вертикали для указанной ячейки.
5. Первичное закрепление полученных знаний.
Разбейтесь по парам и садитесь за компьютеры. На диске c:// в папке ://мои документы//8класс для вас есть задание, которое необходимо выполнить за оставшееся время на этом уроке.
6. Оценивание деятельности учащихся.
За работу на уроке … учащиеся получают … отметки.
7. Сообщение домашнего задания.
Ребята, откройте дневники, запишите домашнее задание: выучить новые понятия, теги, атрибуты, выбрать проект (слайд 20) и найти материал по этой теме, принести на следующий урок.
8. Подведение итогов урока.
Итак, сегодня на уроке вы узнали, как правильно оформлять рисунки и создавать различные таблицы в веб-документе, попробовали это на практике.