План-конспект урока по информатике
на тему:
«Разработка сайта с использованием Web-редактора»
учитель информатики
Крещик С. А.
Тема урока: «Разработка сайта с использованием Web-редактора»
Цель урока:
Закрепить знания, умения и навыки учащихся по работе в сети Интернет, структуре и созданию простейшихWeb-сайтов.
Задачи урока:
Образовательные:
Закрепить знания об основных способах создания WEB-страниц;
Закрепить знания о языке HTML.
Сформировать навыки и умения создания простейших WEB-сайтов;
Развивающая: Развивать логику, умение анализировать, сравнивать, делать выводы;
Воспитательная: Воспитывать аккуратность, внимательность, вежливость и дисциплинированность, бережное отношение к своему здоровью.
Тип урока: применения знаний, умений и навыков.
Оборудование: мультимедийная установка, программа презентаций Microsoft Office PowerPoint 2007, браузер Internet Explorer 8.0, компоновщик SeaMonkey, раздаточный материал.
Литература: Угринович Л.Л. Информатика: Учебник для 10 класса / Л.Л. Угринович. М.: Бином. Лаборатория знаний, 2013., §2.13., стр. 201-205.
Ожидаемые результаты:
В конце урока ученики смогут:
Дать определение таким понятиям:
Браузер, гипертекст, тег;
WEB-страница, WEB-сайт;
Язык разметки гипертекста HTML;
Использовать команды языка HTML и Web-редактор для создания простых Web-
сайтов.
План урока:
Организационный момент (2 мин)
Актуализация опорных знаний (3 мин)
Тест по знанию языка HTML (10 мин)
Практическая работа «СозданиеWeb-сайта» (20 мин)
Анализ работ (7 мин)
Итоги урока (2 мин)
Домашнее задание (1 мин.)
Ход урока:
Организационный момент.
Приветствие учащихся. Проверка присутствующих. Настрой на урок.
Актуализация опорных знаний.
Что такое браузер?
Какие виды браузеров Вы знаете?
Как называются документы, которые мы можем просматривать в программе-
браузере?
Как можно создать Web-страницу?
Как называют несколько тематически связанных Web-страниц?
Тест по знанию языка HTML.
Анализ выполнения теста, повторение этапов создания Web-сайта.
(Презентация)
Закрепление практических навыков путём выполнения практической работы «Создание Web-сайта»
Создайте на рабочем столе личную папку.
Используя компоновщик SeaMonkey создайте страницу «Праздник На Земле Бояна».
Введите текст, отформатируйте его и вставьте рисунок (папка Sajt).
Сохраните страницу под именем Index.htm в свою личную папку.
Используя компоновщик SeaMonkey, создайте страницу «Боян».
Сохраните страницу под именем Boyan.htm в свою личную папку
Отредактируйте страницы, добавив на них гиперссылки для перехода между страницами.
Переместите свою папку в папку класса в сетевом окружении.
Анализ вместе с учениками выполненных работ, выставление оценок.
Итоги урока. Вопросы учеников.
Домашнее задание: создать собственную страничку с помощью html-языка на свободную тему.
В столбце «/» отмечается наличие парного (закрывающего) тега: + (необходим),- (отсутствует), (имеется, но необязателен).
Тег | / | Описание и назначение |
служебные | ||
<HEAD> | + | «голова»html-документа, здесь располагается служебная информация |
<BODY> | + | «тело» документа link – цвет гиперссылки alink – цвет активной гиперссылки vlink – цвет посещённой гиперссылки text – цвет основного текста bgcolor – цвет фона страницы background – адрес графического файла, который будет использован в качестве фона страницы |
<TITLE> | + | заголовок странички |
абзац | ||
<P> | | начало абзаца align – выравнивание (left,right,center,justify) |
<CENTER> | + | выравнивание содержимого по центру |
<BR> | – | разрыв строки, переход на новую строку |
<H1>..<H6> | + | заголовки (принимает значения в диапазоне 1-6) align – выравнивание |
текст | ||
<FONT> | + | размер и цвет текста color – цвет текста face – имя или список имён шрифтов через запятую size – размер |
<B> | + | полужирное начертание |
<I> | + | курсивное начертание |
<U> | + | подчёркнутый текст |
<S> | + | зачёркнутый текст |
<SUP> | + | верхний индекс |
<SUB> | + | нижний индекс |
<MARQUEE> | + | бегущая строка behavior – типдвижения (alternate,scroll,slide) bgcolor – цвет фона direction – направлениедвижения (left,right,up,down) height – высота строки при вертикальном движении width – ширина строки при горизонтальном движении scrollamount – скорость в пикселях на движение |
таблица | ||
<TABLE> | + | вставка таблицы align – выравнивание таблицы background – адрес фонового изображения bgcolor – цвет фона border – толщина рамки widthиheight |
<TR> | + | строка таблицы |
<TD> | + | ячейка таблицы |
изображение или видеоклип | ||
<IMG> | – | вставка изображения src – адрес графического изображения (файла) align – выравнивание изображения в окружающем тексте (absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, top) alt – замещающий текст border – толщина рамки width и height – ширина и высота изображения hspace и vspace – горизонтальные и вертикальные поля вокруг изображения |
гиперссылка | ||
<A> | + | гиперссылка href – адрес target – место загрузки документа: _blank – новое окно _parent – родительский фрейм _self – текущее окно или фрейм _top – во всё окно браузера |
фрейм | ||
<FRAMESET> | + | разбивает окно браузера на фреймы (кадры или подокна) border – толщина рамки cols и rows – количество частей по вертикали и горизонтали |
<FRAME> | | загружает страницы во фрейм (кадр) src – адрес странички, размещаемой в кадре scrolling – отображение полос прокрутки (auto, no, yes) |
Приложение к п.3.
Тест "Язык программирования HTML. Создание Web-страниц"
Web-страница (документ HTML) представляет собой:
1.Текстовый файл с расширением txt или doc
2.Текстовый файл с расширением htm или html
3.Двоичный файл с расширением com или exe
4.Графический файл с расширением gif или jpg
Для просмотра Web-страниц в Интернете используются программы:
1.MicroSoftWord или WordPad 3.InternetExplorer или Opera
2.MicroSoftAccess или MicroSoftWorks 4.HTMLPad или FrontPage
Тег - это:
1.Стартовый и конечный маркеры элемента
2.Текст, в котором используются спецсимволы
3.Указатель на другой файл или объект
4.Фрагмент программы, включённой в состав Web-страницы
Тег <BODY> - это:
1.Идентификатор заголовка окна просмотра
2.Идентификатор заголовка документа HTML
3.Идентификатор перевода строки
4.Идентификатор HTML-команд документа для просмотра
Для вставки изображения в документ HTML используется команда:
1.<imgsrc="ris.jpg"> 3.<ahref="ris.jpg">
2.<bodybackground="ris.jpg"> 4.<input="ris.jpg">
Гиперссылка задается тегом:
1.<fontcolor="file.htm"> 3.<ahref="file.htm">текст</a>
2.<imgsrc="http://www.chat.ru"> 4.<embed="http://www.da.ru">
Гиперссылки на Web - странице могут обеспечить переход...
1.только в пределах данной web - страницы
2.только на web - страницы данного сервера
3.на любую web - страницу данного региона
4.на любую web - страницу любого сервера Интернет
Ссылка на адрес электронной почты задается тегом:
1.<ahref="marina@mail.ru">текст</a> 3.kompas@email.ru 2.<ahref="mailto:svetla@narod.ru">текст</a> 4.<piter@mailru.com>
Гипертекст - это:
1.Текст очень большого размера
2.Текст, в котором используется шрифт большого размера
3.Структурированный текст, где возможны переходы по выделенным меткам
4.Текст, в который вставлены объекты с большим объемом информации
Для создания Web-страниц используются программы:
1.Текстовые редакторы 3.VisualBasic и ACDSee
2.Графические редакторы 4.Электронные таблицы
Приложение к п.4.
Практическая работа «Создание Web-сайта»
Скопируйте на рабочий стол из папки класса в сетевом окружении, папку Sajt.
Создайте на рабочем столе личную папку.
Скопируйте в неё рисунок из папки Sajt.
Используя компоновщик SeaMonkey, создайте страницу «На Земле Бояна».
Введите текст, отформатируйте его и вставьте рисунок (папка Sajt).
Сохраните страницу под именем Index.htm в свою личную папку.
Используя компоновщик SeaMonkey, создайте страницу «Боян». Отформатируйте текст.
Сохраните страницу под именем Boyan.htm в свою личную папку.
Отредактируйте страницы, добавив на них гиперссылки для перехода между страницами.
Просмотрите HTML-код страничек.
Проверьте работу сайта, откройте страницы перейдите по гиперссылкам.
Переместите свою папку в папку класса в сетевом окружении.
