«Создание и использование таблиц на Web-страницах»
| Вид материала | Урок |
- Учебно-методический комплекс факультатива «Использование интернет-технологий в социально-экономической, 155.62kb.
- План занятий Web взгляд изнутри. Вводная часть в курс. Web-страницы, web-сайты, web, 11.42kb.
- Тема урока: Создание Web страниц с помощью html, 39.83kb.
- Моу сош №18 г. Новотроицк, моу сош, 95.86kb.
- Тема: Создание Web-документа с помощью Microsoft Word, 137.29kb.
- «приминение ит в ценообразовании», 240.31kb.
- Создание Web-страниц. Изучение языка html, 186.84kb.
- Создание собственной web-страницы в Internet, 927.61kb.
- Концепция www 4 Создание Web-страницы с помощью языка html 6 1 Язык html 6 Структура, 213.14kb.
- Концепция www 4 Создание Web-страницы с помощью языка html 6 1 Язык html 6 Структура, 214.3kb.
Тема "Основы языка гипертекстовой разметки документов " общим объемом 8 часов , рассматривается в 11-м классе. (Учебник: Н. Угринович, Информатика и информационные технологии, 10 – 11 кл.) Целью данного курса является формирование первичного навыка создания Web-страниц и Web-сайтов. В данной разработке представлен третий урок по теме «Создание и использование таблиц на Web-страницах»
Изучение курса завершается выполнением учащимися индивидуального или группового (2-3 чел.) проекта – разработка web-сайта.
Тема урока: «Создание и использование таблиц на Web-страницах»
Цели урока:
Обучающая: усвоить новые знания и сформировать умения по созданию и использованию таблиц на Web - страницах; научить учащихся красиво и рационально размещать информацию на странице, используя тэги HTML.
Развивающая: Формирование умения работать фронтально и индивидуально; расширение кругозора; развитие навыков применения компьютерных технологий при создании web-сайтов.
Воспитательная: воспитывать положительное отношение к знаниям, добросовестное отношение к труду, дисциплинированность.
Оборудование и материалы, необходимые для проведения урока:
Компьютеры, интерактивная доска, проектор, раздаточный материал, презентация урока, задания для проверочной работы.
Тип урока: Урок изучения нового материала
Ход урока
- Организационный момент.
- Актуализация знаний. Повторение изученного материала.
Учитель. Мы продолжаем воплощать нашу с вами мечту: создание сайта о нашем районе, его истории и о людях, в нём живущих.
Для этого нам предстоит научиться строить таблицы в Web - страницах средствами языка разметки гипертекстовых документов HTML. Тема сегодняшнего урока "Создание и использование таблиц на Web страницах".
Сегодня вы будете работать по подгруппам, перед вами лежат листы оценивания, с помощью которых мы будем судить о результатах работы команды на уроке. Лист оценивания заполняет капитан команды.
| № команды | Этапы работы | ||||
| Ответы по домашнему заданию | Соответствие выполненного задания | Разработка HTML-кода | Допол- нительный балл | Итоговый балл команды | |
| 1 | | | | | |
| 2 | | | | | |
| 3 | | | | | |
| 4 | | | | | |
| 5 | | | | | |
| Баллы | 3 балла за 1 правильный ответ | 5 баллов, если результат соответствует заданию | 4 балла, если в коде нет ошибок | 3 балла за один правильный ответ | |
Слайд. Критерии оценки.
| Набранные баллы | 15–14 | 13–11 | 10–9 | менее 9 |
| Оценка | 5 | 4 | 3 | 2 |
Индивидуальные оценки членов команды будут зависеть от результата деятельности команды на уроке. Таким образом каждый из вас должен быть заинтересован в том, чтобы команда набрала максимальное число баллов.
Для проверки домашнего задания:
1) я попрошу ответить вас на следующие вопросы:
(На обдумывание ответов на вопросы дается 30 секунд. Если команда не знает ответа, то ответ могут дать другие команды. За это команда получает дополнительные баллы. Вопросы предоставляются в виде таблицы. Таблица с правильными ответами на вопросы выводится на экран после окончания опроса. Ребята переносят результат работы на лист оценивания. Критерии оценки на доске).
- Для того, чтобы создать Web – страницу нужно написать программу. А на каком языке мы пишем программу для создания Web – страницы? (На языке HTML)
- Какие две программы необходимо иметь для создания Web – страницы? (Нам необходимо иметь 2 программы: Блокнот для создания текста программ (Пуск – Программы – Стандартные - Блокнот); Браузер Internet Explorer (будет отображать информацию в своём рабочем окне))
- Какова технология создания Web – страницы?
Ответ:
а) набор текста программы;
б) сохранение программы с расширением *.php; в) просмотр в браузере
- Какова структура HTML документа? (страница – шаблон, файл shablon. Html)
Ответ:
Основное содержание страницы
2) А теперь выполняем необычный тест. Вопросы задаю я, а компьютер определит правильность вашего ответа. ( учащиеся отвечают у интерактивной доски)
- С помощью какого контейнера производится разделение текста на абзацы? (<Р> Текст абзаца )
- Какие параметры можно добавить в тэг
для выравнивания текста абзаца? (
Текст абзаца >, где значением атрибута ALIGN могут быть center - выравнивание по центру,
left - выравнивание по левому краю, (задается по умолчанию),
right - выравнивание по правому краю,
justify - выравнивание по ширине)
- Какой тэг используется для размещения на Web-странице заголовков и подзаголовков? (
- Какой тэг используется для задания параметров текста? ( FACE=… SIZE=… COLOR=…> Текст )
- Какие параметры атрибутов FACE, SIZE, COLOR вы знаете? (например, Текст , Текст , Текст )
- Какие тэги определяют начертание шрифта? (… - жирный, … - курсив, … - подчеркивание , комбинация: Жирный курсив с подчеркиванием
Учитель.. Вспомним, что представляют собой таблицы и для чего они нужны.
Ученики. Основными элементами таблицы является столбец, строка, ячейка. Ячейки таблицы могут содержать разную информацию: числа, текст, рисунок, графики.
- Формирование новых знаний и умений.
Учитель. Размещать информацию удобнее в таблице, а не на пустой странице. Поэтому таблицы используются в Web-дизайне чрезвычайно широко — не только для традиционных колонок цифр и прочей информации, которую удобно представлять в таком виде, но и как элемент дизайна.
Посещая Всемирную паутину и внимательно изучая структуру Wed документов, мы можем обнаружить невидимый “скелет” – сложную сетку из крупных и мелких ячеек
(слайд Wed-документа).
Следовательно, мы можем увидеть глядя на WEB-страницу, что она представлена таблицей. Некоторые ячейки таблицы могут объединяться в одну, а внутрь ячеек можно поместить текст, графики, рисунки или другую таблицу. А сегодня мы узнаем как это сделать с помощью языка HTML.
На экране представлены тэги для построения таблицы. (Слайд )
Пример кода простейшей таблицы.
| Первая строка, первый столбец | Первая строка, второй столбец | |||||||||
| Вторая строка, первый столбец | Втора строка, второй столбец |
Учащиеся пишут в конспект теги для построения таблицы и их атрибуты.
Учитель. Таблицу формируют несколько различных тэгов. Таблица задаётся контейнером
Любая таблица состоит из строк, которые задаются контейнером
Формат ячеек и их содержание помещается в контейнер
Толщина разделительных линий в таблице задается с помощью атрибутов BORDER=n (при n=0 граница невидима), а для выравнивания информации внутри ячейки по горизонтали применяют атрибут ALIGN.
- Практическая часть.
Обсуждение и выполнение практической работы. Учащимся раздаётся распечатка c ходом практической работы. Во время практической работы учитель консультирует учащихся.
Ход практической работы
- Используя уже созданную страницу-шаблон необходимо создать Web-страницу с названием «Тема: Таблицы в html».
- В папке WWW откройте файл shablon. Html, вызовите контекстное меню и выберите пункт Просмотр HTML-кода.
- Внесите изменения:
| Первая строка, первый столбец | Первая строка, второй столбец | |||||||||
| Вторая строка, первый столбец | Втора строка, второй столбец |
- Сохраните под именем tab.php в папке WWW. Для этого выполните Файл – Сохранить как… В окне Сохранение документа в списке Тип файла выберите Все файлы (*.*). В поле Имя файла введите tab.php и нажмите кнопку Сохранить.
- Закройте текстовый редактор Блокнот.
- Откройте папку WWW, файл tab.php.(двойным щелчком) для просмотра в браузере. Проанализируйте полученный результат.
2. Задаем таблицу шириной 700 пикселей (точек) и располагаем её посередине страницы. Для этого откроем HTML-код нашей страницы:
- Вызовите контекстное меню и выберите пункт Просмотр HTML-кода.
- Внесите изменения в файл tab.php:
красим ячейку в красный цвет-->
Тоже самое можно сделать для отдельно взятой ячейки: или | выровнять содержимое по верхнему краю ячейки --> | выровнять содержимое по нижнему краю ячейки--> | содержимое по середине ячейки--> | 7. Устанавливаем размер ячеек. Вторая строка, второй столбец | Замечание: Не забываем каждый раз сохранять HTML код таблицы, просмотреть страницу в браузере нажимая кнопку Обновить. Как только мы зададим высоту ячейки, то и вся строка подрастет в высоту до её уровня, т.е. остальным ячейкам указывать этот параметр не обязательно. А вот ширину желательно будет подсчитать и внести в каждую ячейку. 8. Подведем итоги. а) Просмотрите результат. Похож ли он на тот, который вы видите на экране. (Слайд) Посмотрите, как изменилась таблица, вернитесь обратно и пробегитесь взглядом по коду, задавая себе вопрос – а что это мы сделали в этом тэге, а что в следующем и т.д. Задача - убедиться, что Вы всё поняли.
Применение знаний в стандартных ситуациях. Посмотрите внимательно на экран, для каждой команды предлагается свой вариант таблицы. Вам необходимо записать HTML-код, который позволит построить эту таблицу. После написания кода команды выполнят его на ПК. Один из вариантов: Вариант 1 Записать код таблицы со следующими параметрами
Можете ли вы прокомментировать все тэги и их параметры которые мы прошли? (ответы учащихся) Давайте рассмотрим результаты деятельности групп на уроке. Подвести итоги работы каждой группы. На следующем занятии мы ещё немного поговорим о таблицах, научимся вставлять изображения, делать из изображений фон и ссылки. VII. Домашнее задание Разрабатывать тестовые задания для проверки знаний по материалу сегодняшнего урока на следующем уроке.  |