kopilkaurokov.ru - сайт для учителей

Создайте Ваш сайт учителя Видеоуроки Олимпиады Подготовка к ЕГЭ

Конспект урока по информатике "Добавление таблиц, оформление рисунков на Web-страницах"

Нажмите, чтобы узнать подробности

Урок закрепления полученных знаний по теме "Добавление таблиц, оформление рисунков на Web-страницах" в 10 классе по информатике. Большая часть урока посвещена практической работе за компьютером, в которой обучающие применяют полученные знания на предыдущем уроке. Ход урока прописан в таблице: деятельность учителя, деятельность учащихся, а так же планируемый результат.После таблицы описан подробный сценарий урока. Собрание страниц, объединенных некоторой общей тематикой и помещенных, как правило, на одном компьютере, называют Web-узлом или сайтом. Узлы Web подобны книгам, а Web-страницы - страницам этих книг. Компьютеры, на которых размещаются сайты, а также программы, обеспечивающие поддержку сайтов, называются серверами. На одном сервере может размещаться множество Web-узлов или сайтов.Чтобы опубликовать в Интернете страницу, содержащую некоторую информацию, используется специально разработанный для этого язык HTML.HTML – HyperText Markup Language (Язык разметки гипертекста) представляет собой довольно простой набор команд, описывающих структуру документа. Этот язык разметки позволяет выделить в документе отдельные логические части – заголовки, абзацы, таблицы, списки-перечисления и т.д., но не задает конкретные атрибуты форматирования. Конкретный вид форматирования определяет сам браузер при чтении документа, и именно браузер обеспечивает наилучшее отображение Web-документа на вашем экране.Создавать Web-страницы можно с помощью специальных программ-редакторов, автоматически генерирующих код HTML, работа с которыми не требует знания языка разметки. Однако эти программы часто ограничены в своих возможностях, содержат ошибки и нередко создают плохой HTML-код, который работает не на всех платформах. Поэтому, если вы хотите серьезно освоить Web-дизайн и понять принципы создания Web-страниц, вам не обойтись без знания основ языка HTML, тем более что создавать Web-страницы на нем совсем не трудно.Язык HTML существует в нескольких вариантах или спецификациях. Как и версии программных продуктов, спецификации пронумерованы: 2.0, 3.0, 3.2, 4.0. Каждая последующая спецификация представляет собой расширение и дополнение предыдущей таблицы, списки-перечисления и т.д., но не задает конкретные атрибуты форматирования. Конкретный вид форматирования определяет сам браузер при чтении документа, и именно браузер обеспечивает наилучшее отображение Web-документа на вашем экране. Документ в окне с кодом HTML - это текстовый документ специального формата. Все файлы этого формата имеют расширение .html или .htm. В документе HTML обычный текст сочетается с элементами разметки, заключенными в угловые скобки < и >, например <html>, <head>, <title>, </title>. Такие элементы разметки называются тэгами.Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Для добавления таблицы на веб-страницу используется тег <table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов <tr> и <td>. Таблица должна содержать хотя бы одну ячейку. Допускается вместо тега <td> использовать тег <th>. Текст в ячейке, оформленной с помощью тега <th>, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки.

Просмотр содержимого документа
«Конспект урока по информатике "Добавление таблиц, оформление рисунков на Web-страницах" »

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

Дата: 02.10.2010

Класс: 10

Учитель: Мкртчян Оксана Владимировна

Тема: Добавление таблиц, оформление рисунков на Web-страницах

Тип урока: закрепление знаний

Цели урока:

  • Образовательная:

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

  • Развивающая:

    • Учить строить аналогии, выделять главное, ставить и решать проблемы.

  • Воспитательная:

  • Воспитывать аккуратность, внимательность, дисциплинированность.

Оборудование, материалы, используемая литература: учебник Н. Угринович «Информатика и ИКТ» 9 кл., интерактивная доска, компьютеры, задания для самостоятельной работы за ПК, словарь основных тегов.



План урока:

Наименование этапов урока

Отведенное время

1.

Организационный момент

2 мин.

2.

Проверка домашнего задания

6 мин.

3.

Сообщение темы

1 мин.

4.

  1. Техника безопасности при работе с компьютером.

3 мин.

5.

Разъяснение хода практической работы

3 мин.

6.

Практическая рабата за компьютерами

25 мин.

7.

Оценивание выполнения работы

2 мин.

8.

Сообщение домашнего задания

1 мин.

9.

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

2 мин.


Ход урока:

7.

8. Align

9. title =“Текст“


Этап урока

Решаемая дидактическая задача

Деятельность учителя

Деятельность учащихся

Результат выполнения дидактической задачи

Орг. момент

Подготовка учащихся к работе на уроке

Приветствие, установление дисциплины на уроке, определение отсутствующих в классе

Подготовка учащихся к учебной деятельности

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

Проверка домашнего задания

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

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

1. Какой тег отвечает за вставку изображений в веб-документ?

2. Какой атрибут тега img определяет альтернативный текст, который появляется на месте картинки в окне браузера, если вывод картинки невозможен или заблокирован пользователем?

3. За выравнивание изображения отвечает атрибут…?

4.Как задать размеры вставляемой картинки?

5. Какой тег создает таблицу?

6. Формирует строки тег…?

7. Формирует столбцы тег …?

8. Какой атрибут отвечает за выравнивание таблицы относительно документа?

9. Какой атрибут для тега

означает всплывающую подсказку?

Примерные ответы учащихся:

1. Тег IMG

2.alt=”подсказка”

3.align

4. height, width – высота и ширина изображения в пикселях

5.Тег

6.

Сочетание контроля, самоконтроля для установления правильности выполнения задания и коррекции пробелов

Сообщение темы

Нацеливание учащихся на решение учебной задачи

На прошлом уроке вы познакомились с основами языка гипертекстовой разметки документа. Сегодня будем учиться создавать Web-страницы в текстовом редакторе Блокнот с использованием рисунков и таблиц

Понимание и осмысление целей урока и учебной задачи

Прогнозируемый результат достижения цели урока

Техника безопасности при работе с компьютером

Информирование учащихся о техники безопасности при работе с компьютерами

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

Слушают учителя, читают памятки, расположенные рядом с компьютерами

Знание и понимание учащихся техники безопасности при работе с компьютерами

Разъяснение хода практической работы


Пояснение как будет проходить практическая работа


Разбейтесь на группы по 2-3 человека и садитесь за компьютеры. Задания вы получили на листочках. Вам необходимо создать Web-страницы, используя программу Блокнот

по образцу, а также последовательно выполняя пункты заданий. Для этого необходимо применить знания, полученные на прошлом уроке. А затем откройте созданный файл в Internet Explorer

Слушают учителя, формируют группы, садятся за компьютеры

Понимание как будет проходить практическая работа

Практическая рабата за компьютерами

Развитие навыков создания HTML-документа, создания таблиц и добавление рисунков на веб-страницы,

формирование навыков групповой деятельности

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

Выполнение заданий практической работы

  • Выработка умения создавать на Web-страницах таблицы и рисунки в текстовом редакторе Блокнот


Оценивание выполнения работы

Оценить работу каждого учащегося

Молодцы, все хорошо работали на уроке и заслужили оценки ……

Выставление оценок в дневники и подача их на роспись учителю

Каждый ученик получает оценку

Сообщение домашнего задания

Домашнее задание направлено на подготовку к последующему обучению

Запишите домашнее задание: с. 53, з.3.1, знать определения по HTML, выучить основные теги

Фиксирование в дневниках домашнее задание

Работа по инструктированию в рамках урока

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

Анализ успешности овладения пройденной темы


Сегодня на уроке вы научились создавать на Web-страницах таблицы и добавлять рисунки в текстовом редакторе Блокнот, работать с тегами языка HTML. Спасибо за работу на уроке, можете быть свободны

Проведение самоанализа своей учебной работы на уроке

Краткость и емкость анализа, определение мер для последующей работы


  1. Организационный момент.

Здравствуйте! Прошу всех садиться. Дежурный назовите тех, кто сегодня отсутствует.

  1. Проверка домашнего задания

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

1. Какой тег отвечает за вставку изображений в веб-документ? (Тег IMG)

2. Какой атрибут тега img определяет альтернативный текст, который появляется на месте картинки в окне браузера, если вывод картинки невозможен или заблокирован пользователем? (alt=”подсказка”)

3. За выравнивание изображения отвечает атрибут…? (align)

4.Как задать размеры вставляемой картинки? (height, width – высота и ширина изображения в пикселях)

5. Какой тег создает таблицу? (Тег

)

6. Формирует строки тег…? (…)

7. Формирует столбцы тег …? (…)

8. Какой атрибут отвечает за выравнивание таблицы относительно документа? (Align)

9. Какой атрибут для тега

означает всплывающую подсказку? (title =“Текст“).

3. Сообщение темы

На прошлом уроке вы познакомились с основами языка гипертекстовой разметки документа. Сегодня будем учиться создавать Web-страницы в текстовом редакторе Блокнот с использованием рисунков и таблиц.

4. Техника безопасности при работе с компьютером.

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

  1. Разъяснение хода практической работы.

Разбейтесь на группы по 2-3 человека и садитесь за компьютеры. Задания вы получили на листочках. Вам необходимо создать Web-страницы, используя программу Блокнот

по образцу, а также последовательно выполняя пункты заданий. Для этого необходимо применить знания, полученные на прошлом уроке. А затем откройте созданный файл в Internet Explorer.

6. Практическая рабата за компьютерами.

Вам необходимо создать Web-страницу, используя стандартную программу Блокнот, используя примеры приведенной ниже таблицы. Откройте созданный файл в Internet Explorer


Задание№1

- Создать документ, в котором, в заголовке окна браузера должна быть надпись «Практическая работа» (Практическая работа ),

- Фон и текст документа задать цветом: bgcolor="#9900CC" text="#CCCCCC"

- Заголовок первого уровня (h1) выровнять по центру (align=center)

- Добавить три картинки со следующими параметрами: выравнивание слева (align=left), ширина: 200 пикселей (Width=200), высота: 200 пикселей (height=200), расстояние между картинкой и текстом по вертикали и горизонтали 20 пикселей (hspace=20 vspace=20)

-Подписать название рисунка (Текст)

-Создать всплывающую подсказку-текст при наведении мыши на картинку (alt=”Рисунок1”)

- Между картинками вставить тегbr-разрыв строки

Результат:














Задание №2

Построить таблицу из трех строк, содержащих по три ячейки. Ширина в 90% от ширины окна браузера, выравнивание по правому краю, цвет рамки #00CED1 и рамка толщиной в 1 пиксель.

1ст.: bgcolor=#F5F5DC align=right

3 ячейка 1ст.:bgcolor=#888888

2ст.1я. td bgcolor=#00FFFF height=20. 2я.bgcolor=#00FFFF width=50%

3я. bgcolor=#888888

3ст.1я. bgcolor=#00BFFF 2я. bgcolor=#F0FFFF

3я. bgcolor=#00CED1


Результат:


Задание № 3

COLSPAN - Указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки.

ROWSPAN - Указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки.

Построить таблицу. Толщина внешней рамки5 пикселей(border=5).

Заголовок таблицы задать внизу таблицы (CAPTION ALIGN=bottom)


TRTD ROWSPAN=2TDTH COLSPAN=2Среднее значениеTHTR

TRTHРостTHTHВесTHTR

Мужчины17478

Женщины16556

Результат:


Среднее значение

Рост

Вес

Мужчины

174

78

Женщины

165

56

Таблица №1











Задание № 4

Построить таблицу по образцу.

Результат:

















7. Оценивание выполнения работы

Молодцы, все хорошо работали на уроке и заслужили оценки ……

  1. Сообщение домашнего задания.

Запишите домашнее задание: с. 53, з.3.1, знать определения по HTML, выучить основные теги 9. Подведение итогов урока.

Сегодня на уроке вы научились создавать на Web-страницах таблицы и добавлять рисунки в текстовом редакторе Блокнот, работать с тегами языка HTML. Спасибо за работу на уроке, можете быть свободны.




6




Получите в подарок сайт учителя

Предмет: Информатика

Категория: Уроки

Целевая аудитория: 10 класс

Скачать
Конспект урока по информатике "Добавление таблиц, оформление рисунков на Web-страницах"

Автор: Мкртчян Оксана Владимировна

Дата: 13.06.2014

Номер свидетельства: 104059

ПОЛУЧИТЕ БЕСПЛАТНО!!!
Личный сайт учителя
Получите в подарок сайт учителя


ПОЛУЧИТЕ СВИДЕТЕЛЬСТВО МГНОВЕННО

Добавить свою работу

* Свидетельство о публикации выдается БЕСПЛАТНО, СРАЗУ же после добавления Вами Вашей работы на сайт

Удобный поиск материалов для учителей

Ваш личный кабинет
Проверка свидетельства