Submitted by Наталья Тосикова on Sat, 07/09/2013 - 15:08
Тема урока: СозданиеWeb– страниц с помощьюHTML.
Цели урока:
1. Обучающая: дать представление основных понятий Web – сервер, Web – сайт, Web – страница, гиперссылка, тег, структура HTML – документа, технология создания Web-страниц;
2. Развивающая: умение сравнивать и обобщать;
3. Воспитательная: воспитание информационной культуры, положительное отношение к знаниям.
Литература:
1. Н. Угринович, Учебник «Информатика и информационные технологии», 10 -11 кл.
2. Журнал «Информатика и образование».
3. Сайт www.1september.ru.
Оборудование:
1. Мультимедиа-проектор, презентация «Создание Web – страниц с помощью HTML»
2. Компьютеры для выполнения индивидуальных практических работ.
Ход урока.
1. Организационный момент.
2. Подготовка к основному этапу урока.Слайд 1. «Тема урока»
· Давайте вспомним, какие услуги предоставляет Internet?
· Какая из перечисленных услуг является самой популярной? (WWW – всемирная паутина, которая позволяет просматривать Web - страницы)
Любой пользователь 21 века должен уметь представлять свою информацию в Internet. Тема, с которой мы сегодня познакомимся, называется: Создание Web – страниц с помощью HTML. Слайд 2. «План урока»
3. Объяснение нового материала.Слайд 3. «WWW»
а) Основные понятия языка гипертекстов.
Web – страницы находятся на Web – сервере.
Web – сервер- компьютер в сети Internet, хранящий
Web-страницы и соответствующие программы для
работы с ними. Информация на Web – сервере
представлена в виде Web – сайта. Web – сайт – это
объединение Web – страниц одной темой.
На Web – страницах находится информация: текстовая, графическая, звуковая, видео. Поэтому Web – страницы являются мультимедийными. Для того, чтобы создать Web – страницу нужно написать программу. А на каком языке мы будем писать программу для создания Web – страницы? (На языке HTML). Слайд 4. «HTML». Слово «HTML» представляет собой сокращение от «HyperTextMarkupLanguage» - «язык разметки гипертекста».
Прежде чем начать писать программу на языке HTML, мы познакомимся с основами языка HTML. Сначала познакомимся с историей создания языка HTML. Проект ученика.
Слайд 6-7. «Тег».Основным понятием языка HTML
является понятие тег. ТЕГ – инструкция браузеру,
указывающая способ отображения информации.
Задание.Даны теги, определить парные и одиночные
теги.<H1> </H1>, <Br>, <Head> </Head>
· Теги пишутся с использованием, какого алфавита? (Латинского)
· При написании тегов используются только буквы? (Нет, еще и цифры)
б) Инструментарий для созданияweb– страниц.Слайд 8.
Существует три класса программных средств, используемых для создания web– страниц и сайтов. Все они имеют свои преимущества и недостатки.
1. Обычные текстовые редакторы, например Блокнот. При этом web– страница полностью создается вручную, путем вставки в требуемый текст необходимых тегов. Это самый трудоемкий и отнимающий много времени способ. Но благодаря ему вам становится понятной вся технология сайтостроения.
2. HTML-редакторы.Это уже специальные программы, с помощью которых создаются web– страницы. Обычно работа в них также производится с текстом HTML-документа, но предусмотрен ряд инструментов, позволяющих автоматически вставлять в текст соответствующие теги. Просмотр окончательного результата производится в браузере. Такая программа – хороший помощник, намного ускоряющий создание страниц. Но при работе с ней вы также должны быть знакомы с основами HTML.
3. WYSIWYG редакторы. Программы для создания web– страниц и сайтов WYSIWYGредакторы(сокращение фразы «WhatYouSeeIsWhatYouGet» - «Что видишь, то и получаешь») позволяют создаватьweb– страницы, даже ни имея никакого понятия о языке HTML, путем визуального редактирования на экране дисплея. При этом страница в окне редактора выглядит почти также, как должна отображаться в браузере, а при сохранении результатов работы в файле программа автоматически генерирует требуемый HTML-код.
в) Структураweb– страницы.Слайд 9 - 12
Заголовки. Слайд 13
<H1> Заголовок первого уровня </H1>
<H2> Заголовок второго уровня </H2>
<H3> Заголовок третьего уровня </H3>
<H4> Заголовок четвертого уровня </H4>
<H5> Заголовок пятого уровня </H5>
<H6> Заголовок шестого уровня </H6>
Цвет фона страницы. Слайд 14
г) Работа с программойHTMLReader.Слайд 15-17
Эта программа относится к HTML-редакторам. Принципы работы с программой показаны на слайдах.
4. Практическое закрепление нового материала.Слайд 18
1. Запустите программу HTMLReader: Пуск – Все программы - HTMLReader.
2. Создайте файл и сохраните его под именем index.html.
3. В файле оформите текст «Перваяweb– страница будет посвящена исследованиям»в виде заголовка первого уровня.
4. Придумайте заголовки для оставшихся пяти уровней и оформите их.
5. Используя документ «Цвет» с палитрой цветов выберете цвет для своей страницы (документ находится на рабочем столе).
5. Инструктаж домашнего задания.
Придумать оформление главной станицы на любую из тем: Мое любимое занятие (урок), Моя семья, Моя школа. Подобрать материал для страницы.
6. Подведение итогов урока.
Подведение итогов: достигнута ли цель урока; выставление оценок.
