Урок информатики в 10Б классе по теме «Основы языка разметки гипертекста»




Скачать 86,52 Kb.
НазваниеУрок информатики в 10Б классе по теме «Основы языка разметки гипертекста»
Дата публикации12.04.2013
Размер86,52 Kb.
ТипУрок
pochit.ru > Информатика > Урок
Урок информатики в 10Б классе

по теме «Основы языка разметки гипертекста»
Дата проведения: 21.04.09 г. (2008-2009 учебный год)

Класс: 10Б

Тема: «Основы языка разметки гипертекста»

Тип урока: урок изучения и первичного закрепления знаний.

Цель: Овладение основными приемами создания Web-страниц на языке HTML.

Задачи:

Образовательные – познакомить с основами языка разметки гипертекста HTML, сформировать представление о структуре HTML-документа, научить применять теги форматирования и атрибуты, отвечающие за цветовое оформление Web-страницы.

Развивающие – формировать умение анализировать, планировать свою деятельность, обобщать и систематизировать.

Воспитательные – развивать эстетическое восприятие цвета и формы, чувства ответственности и дисциплинированности.

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

^ Формы работы на уроке: фронтальная, взаимопроверка, индивидуальная.

Образовательные технологии: информационно-коммуникационная, здоровьесберегающая, дифференцированное обучение.

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

Структура урока:

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

  2. Повторение опорных знаний.

  3. Изучение новых знаний и способов деятельности.

  4. Физминутка.

  5. Первичная проверка усвоения знаний.

  6. Выполнение лабораторного практикума.

  7. Домашнее задание.

  8. Подведение итогов, выставление отметок.


Ход урока:


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

а) Приветствие, проверка отсутствующих.

б) Проверка готовности учащихся к занятию.

в) Запись даты и темы урока. Сообщение цели и задач урока. (Слайд 1)


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

Вступительное слово. На наших уроках информатики мы с вами уже познакомились с такими понятиями как Интернет, Web, браузер, сайт, сервер и т.д. Эти слова прочно вошли в нашу жизнь. Теперь уже мало кто из нас представляет себе жизнь без Интернета.

Проверка теоретических знаний, полученных на предыдущих уроках, осуществляется с помощью теста. Вопросы и варианты ответов демонстрируются классу с помощью проектора. (Слайды 2-11)

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











Взаимопроверка. Учащиеся меняются бланками с ответами.

(Слайды 12). На экране демонстрируются варианты правильных ответов. Ребята проверяют друг у друга работы, выставляют отметки.


  1. ^ Изучение новых знаний и способов деятельности.

(Слайд 13).

Вы видели множество страниц в Интернете и знаете, что они могут выглядеть по-разному и содержать весьма различную информацию: текст, таблицы, рисунки, анимационные ролики, ссылки на другие страницы. Каждая Web-страница – это, по сути, текстовый файл, из которого браузер формирует то, что вы видите на экране.

(Слайд 14).

Слово «сайт» происходит от английского site – участок, то есть. Web –сайт – это участок или раздел на сервере, посвященный какой-либо теме, состоящий из множества страниц. Как, например книга или журнал, только в отличие от

печатных изданий сайт является интерактивным.

Записать в тетради основные понятия.

Web-сайт – совокупность электронных документов, размещенных в сети, объединенных одним адресом, одной темой и стилем оформления.

Гиперссылка – «активная» ссылка на другой документ.

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

^ Браузер – программа для просмотра Web-страниц на экране (Internet Explorer, Mozilla Firefox, Opera).

(Слайд 15).

Для создания странички в Интернете используется язык разметки гипертекста (Hyper Text Markup Language) – HTML.

Для начала работы нам потребуется самый обычный Блокнот.

Для удобства будем сохранять результат работы в отдельной папке, например «HTML».

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

 (Слайд 16).

Элементы языка HTML называются тэгами (tag, метка, дескриптор). Тэги заключаются в угловые скобки, бывают парными – содержат начальный (открывающий) () и конечный (закрывающий) тэг (
) и непарными (). Парные тэги называют контейнером.

(Слайд 17).

Весь HTML код помещается в контейнер . Эти тэги дают понять браузеру, что это HTML документ.

Весь документ делится на две части заголовок (размещается в тэгах ), и тело ()

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

Документ необходимо сохранить с расширением .htm или .html. Можно посмотреть, что получилось.

(Слайд 18).

Рассмотрим некоторые тэги и атрибуты. Атрибуты тэга которые можно применять: bgcolor – цвет фона text –цвет текста. Остальные вы сможете посмотреть, при выполнении практической работы в программе.

(Слайд 19).

Для обозначения заголовка применяют тэги

. Заголовок можно выровнять по центру используя атрибут align=”center”.

Для выделения заголовка можно применить линию - тэг
. Данный тэг может иметь атрибуты: width – длина линии в пикселях или процентах от ширины окна браузера, size – толщина в пикселях, align - выравнивание (значения right - по правому краю, center – по центру, left – по левому), hoshade – линия отображается не вдавленной, color – цвет линии, работает только в Internet Explorer.

(Слайд 20).

- изменяет тип шрифта, размер, цвет, благодаря атрибутам: size – размер шрифта (от 1(маленький) до 7 (большой)), color - цвет шрифта, face – тип шрифта (применяйте только стандартные шрифты Arial, Verdana, Times New Roman, Tahoma, Courier).

(Слайд 21).

Записать в тетрадь обозначения атрибутов стилей оформления шрифта.

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

Для этого загрузите Internet Explorer. В адресной строке наберите адрес Интернет-ресурса:

http://www.cssblok.ru/osnova/index4.html



На загруженной странице найти раздел «Форматирование текста».



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

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

        (Слайд 22).

        Значение атрибута color можно задать названием цвета (black – черный, gray – серый, white – белый, red – красный, green – зеленый, yellow – желтый, blue – синий) или его 16-ричным числом, следует помнить, что первые две цифры отвечают за красный цвет(red), следующие две – за зеленый (green), последние две - за синий (blue), т.е. RRGGBB. Белый цвет обозначается FFFFFF, а черный – 000000.

        Для определения кода цвета вы можете воспользоваться таблицей «безопасных» цветов. Для этого загрузите Internet Explorer. В адресной строке наберите адрес Интернет-ресурса:

        http://www.artlebedev.ru/tools/colors/



        1. Физминутка.

        Зарядка для глаз с элементами релаксации. Под звуки природы следить взглядом за движущимися объектами на экране. (Слайд 23)


        1. ^ Первичная проверка усвоения знаний.

        (Слайд 24).

        Вопросы:

        1) Какие тэги должны присутствовать в HTML-документе обязательно?

        2) Что размещается между тэгами ?

        3) При помощи какого тэга можно изобразить линию на Web-странице?

        4) Какие атрибуты тэга вы запомнили?

        5) Что нужно написать, чтобы цвет фона Web-страницы был зеленым?



        1. ^ Выполнение лабораторного практикума.

        Учащиеся выполняют практическое задание – создают Web-страницу, используя обучающую программу (использован готовый ресурс http://edu-reforma.ru/load/ikt/sozdanie_web_stranic/50-1-0-3581). Программа позволяет пошагово создать мини-сайт. При этом самостоятельно изучаются тэги, которые не звучали в объяснении, исследуется результат их применения.



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

        В программе есть возможность не только продемонстрировать виды тэгов, но и результат того, что получится.

        Результат выполнения



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


        1. ^ Подведение итогов, рефлексия.

        Сегодня на уроке мы познакомились с основами языка разметки гипертекста HTML, научись применять теги форматирования и атрибуты, отвечающие за цветовое оформление Web-страницы. При этом использовали различные способы и приемы работы с учебным материалом. Цвет является основой нашей жизни и сопровождает нас всегда, поэтому знание цветов, их сочетаний может пригодится каждому, например, оформление интерьера, рабочего места, сочетание в одежде и т.д.

        Выставление отметок.


        1. ^ Домашнее задание.

        Знать материал урока.

        Подготовить информацию по теме своей страницы, которую можно было бы представить в виде таблицы (таблицу записать в тетрадь). (Слайд 25)

        Приложение 2

        Тест для проверки первичных знаний


        1. Техническая система, предназначенная для обмена информацией между пользователями компьютеров и доступа к хранящимся на них информационным ресурсам, называется:

          1. Программным обеспечением

          2. Аппаратными средствами компьютера

          3. Компьютерной сетью

          4. Вычислительным комплексом

        1. Выберите из списка протокол передачи сообщений электронной почты (E-mail):

          1. SMTP

          2. HTTP

          3. TCP/IP

          4. FTP

        1. Протокол HTTP служит для:

          1. Передачи сообщений электронной почты (e-mail)

          2. Передачи файлов

          3. Передачи гипертекстовых сообщений (Web-страниц)

          4. Маршрутизации пакетов данных

        1. Какой из видов компьютерных сетей характеризуется небольшой удаленностью компьютеров пользователей?

          1. Глобальная компьютерная сеть

          2. Региональная компьютерная сеть

          3. Локальная компьютерная сеть

        1. Выберите из списка канал связи с ограниченной средой, обладающий наибольшей пропускной способностью:

          1. Коаксиальный кабель

          2. Витая пара

          3. Оптоволоконный кабель

        1. Какое устройство служит для сопряжения канала связи и компьютера пользователя в локальной сети?

          1. Сетевая карта

          2. Модем

          3. Оптоволоконный кабель

          4. Коаксиальный кабель

        1. Протокол – это:

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

          2. Необходимые соглашения между пользователями компьютерной сети для обмена данными

          3. Программы, для просмотра Web-страниц глобальной сети Internet

        1. Для чего служит услуга WWW глобальной сети Internet?

          1. WWW позволяет просматривать Web-страницы

          2. WWW служит для передачи файлов

          3. WWW служит для обмена сообщениями электронной почты (e-mail)

        1. Компьютер, подключенный к Интернету, обязательно имеет:

          1. Web –сервер.

          2. IP –адрес.

          3. Доменное имя.

          4. Домашнюю Web-страницу

        1. Идентификатор некоторого ресурса сети Интернет имеет следующий вид: http://www.ftp.ru.index.html. Какая часть этого идентификатора указывает на протокол, используемый для передачи ресурса?

          1. www

          2. ftp

          3. http

          4. html

      • Похожие:

        Урок информатики в 10Б классе по теме «Основы языка разметки гипертекста» icon9 класс Тест по теме «Основы языка разметки гипертекста html»

        Урок информатики в 10Б классе по теме «Основы языка разметки гипертекста» iconТест по теме «Основы языка разметки гипертекста html»
        Какие тэги помещают название документа в оглавление программы просмотра web-страниц?
        Урок информатики в 10Б классе по теме «Основы языка разметки гипертекста» iconПлан-конспект урока «Основы языка html» 8 класс фио (полностью)
        Урок 1 Коммуникационные технологии. Разработка Web-сайтов с использованием языка разметки гипертекста html. (§ 1, 2)
        Урок информатики в 10Б классе по теме «Основы языка разметки гипертекста» iconУрок №29. Тема урока: Разработка Web-сайтов с использованием языка...
        Познакомить учащихся с языком разметки гипертекста html, структурой Web-страницы и форматированием текста на Web-странице
        Урок информатики в 10Б классе по теме «Основы языка разметки гипертекста» iconУрок информатики в 11 классе по программированию по теме "Циклы"
        Изучение оператора цикла while языка программирования Turbo Pascal 0, его синтаксиса и семантики
        Урок информатики в 10Б классе по теме «Основы языка разметки гипертекста» iconРазработка Web-сайтов с использованием языка разметки гипертекста html структура Web-страницы

        Урок информатики в 10Б классе по теме «Основы языка разметки гипертекста» iconСценарий урока» Урок русского языка в 6 классе по теме «Комплексный анализ текста»
        Урок русского языка в 6 классе по учебнику М. Т. Баранова, Т. А. Ладыженской. Повторение после изучения раздела «Словообразование...
        Урок информатики в 10Б классе по теме «Основы языка разметки гипертекста» icon«Мир моих увлечений: компьютерная игра Aion». Моя работа выполнена...
        ...
        Урок информатики в 10Б классе по теме «Основы языка разметки гипертекста» iconЯзык разметки гипертекста html

        Урок информатики в 10Б классе по теме «Основы языка разметки гипертекста» iconВведение в интернет дизайн на языке
        Коммуникационные технологии который знакомит учащихся с принципами функционирования локальных и глобальных вычислительных сетей,...
        Вы можете разместить ссылку на наш сайт:
        Школьные материалы


        При копировании материала укажите ссылку © 2019
        контакты
        pochit.ru
        Главная страница