Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Конспекты / Календарно-тематическое планирование курса «Основы языка гипертекстовой разметки HTML»

Календарно-тематическое планирование курса «Основы языка гипертекстовой разметки HTML»



Внимание! Сегодня последний день приёма заявок на
Международный конкурс "Мириады открытий"
(конкурс сразу по 24 предметам за один оргвзнос)


  • Информатика

Поделитесь материалом с коллегами:




Календарно-тематическое планирование курса


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

Содержание учебного предмета


Наименование

разделов и тем

Количество часов

Всего

Теория

Практические занятия

1. Типы веб - страниц

1

1


2. Структура веб - страниц

1

1


3. HTML- язык гипертекстовой разметки

1

1


4. Основные правила HTML

2

2


4. Ввод текста

1


1

5. Задание цвета.

1


1

6. Выбор шрифта.

1


1

7. Различные начертания текста.

1


1

8. Работа с таблицами и списками

1


1

9. Формы. Графика.

1


1

3. Гипертекстовый документ.

Бегущая строка.

3

1

2

4.Фреймы

2


2

5. Лабораторная работа№1

«Дополнительные инструменты Web-дизайна»

2


2

6. Лабораторная работа №2

«Создание заготовки для главной страницы сайта»

2


2

7. Лабораторная работа №3

«Создание заготовки для последующих страниц сайта»

2


2

8. Проектирование сайта

6

2

2

9. Размещение и поддержка сайта в сети

1

1


10. Выполнение творческого проекта

6


6

11.Защита проекта

1


1

ВСЕГО:

34

9

25





Календарно-тематическое планирование


урок

Наименование

разделов и тем

Дата

11А

1гр/2гр

Кол.часов

Планируемые

результаты

Виды деятельности

1

Типы веб - страниц


1


Усвоить:

что такое веб-страницы, что делают браузеры.

Познакомятся с некоторыми тегами – командами языка HTML.

Научиться:

изменять цвет шрифта и фона.



В Интернете находят различные виды веб-страниц. Изучают их особенности, отличия и преимущества.

2

Структура веб - страниц


1

Усвоить: структуру веб-страницы.

Научится: понимать основные правила построения веб-страниц.


В Интернете находят различные виды веб-страниц. Изучают их особенности, отличия и преимущества.

3

HTML- язык гипертекстовой разметки


1

Усвоить: основные тэги языка HTML.


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

В Интернете находят различные виды веб-страниц. Изучают их особенности, отличия и преимущества.

4-5

Основные правила HTML



Усвоить: правила написания тэгов их формат, начало и конец тэга.

Научиться: по образцу писать тэги.


Составляют тэги для структуры веб-страницы.

6

Ввод текста


1

Усвоить: набор тэгов для написания текста.

Научиться: выводить элементарный текст.

Составляют HTML-документ для вывода текста.(Пример1.html )

7

Задание цвета.


1

Усвоить: правила задания цвета и кодировку цвета фона и текста.

Научиться: задавать цвет фона и текста.

Составляют HTML-документ для вывода текста и фона различными цветами.(Пример2.html )

8

Выбор шрифта.


1

Усвоить тэги и атрибуты начертаний шрифта и вывода линий.

Научиться изменять шрифт и вставлять линии.


Вносят в HTML-документ изменения для вывода текста различными видами шрифтов(Пример2.html )

9

Различные начертания текста.


1

Усвоить : тэги и атрибуты начертаний шрифта и вывода линий.

Научиться: изменять шрифт и вставлять линии.


Составляют HTML-документ для вывода текста.(Графика.html )

10

Работа с таблицами и списками


1

Усвоить : тэги и атрибуты для работы с таблицами, списками.

Научиться : составлять таблицы, маркированные и нумерованные списки.


Составляют HTML-документ для вывода таблицы.(Игроки.html )


Составляют HTML-документ для вывода маркированного списка(Поэзия.html)


Составляют HTML-документ для вывода нумерованного списка(Музыканты.html)


Составляют HTML-документ для вывода маркированного и нумерованного списка(Списки.html)



11

Формы. Графика.


1

Усвоить: тэги и атрибуты для создания форм и вставки графических объектов.

Научиться выводить формы и вставлять различные графические объекты.


Составляют HTML-документ для вывода форм(Форма.html)


Выбирают любой созданный ранее HTML-документ и вставляют картинку.

12-14

Гипертекстовый документ.

Бегущая строка.


3

Усвоить: тэги и атрибуты для создания гиперссылок и вставки бегущей строки.

Научиться создавать гиперссылки и вставлять бегущую строку.

Составляют оглавление из гиперссылок(link.html)

Вставляют бегущую строку в любой составленный ранее документ.

15-16

Фреймы


2

Усвоить: фреймы это области , которые могут быть созданы в окне браузера для одновременной демонстрации нескольких документов.

Научиться: создавать рамки вертикального и горизонтального деления экрана.

Создают таблицу с горизонтальными и вертикальными рамками. (рамки.html

17-18

5. Лабораторная работа№1

«Дополнительные инструменты Web-дизайна»


2

Усвоить: тэги и дополнительные атрибуты бегущей строки, внедрений звуковых файлов и объектов видео.

Научиться выводить формы и вставлять различные графические объекты.


Выполняют :Лабораторная работа№1

«Дополнительные инструменты Web-дизайна»

19-20

6. Лабораторная работа №2

«Создание заготовки для главной страницы сайта»


2

Усвоить: тэги для создания главной страницы сайты.

Научиться создавать главную страницу сайта.

Создают главную страницу сайта(по образцу)

21-22

7. Лабораторная работа №3

«Создание заготовки для последующих страниц сайта»


2

Усвоить: тэги для создания главной страницы сайты.

Научиться создавать главную страницу сайта.

Создают последующую страницу сайта(по образцу)

23-24

8. Проектирование сайта


2

Усвоить: основные правила планирования и конструирования сайтов.

Научиться: проектировать сайт


Выбирают тему проекта и планируют ее дальнейшую разработку

25-26

9. Размещение и поддержка сайта в сети


1

Усвоить и научиться правильно размещать сайт в Интернете.

Находят в интернете возможности размещения сайтов.

27-33

10. Выполнение творческого проекта


8

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

Создают творческого проекта согласно выбранной темы.

34

11.Защита проекта


1


Защищают свой проект.



Материально-техническое обеспечение образовательного процесса

1.Печатные пособия:

  1. Баричев С. Ваш Office 2000/ С.Баричев, О.Плотников// Москва, 2000.

  2. Валентайн Ч. XHTML/ Ч.Валентайн, К.М.Минник//2001

  3. Интернет. Энциклопедия, 2-е изд./под редакцией Л.Г.Мелиховой.// Санкт-Петербург, ПИТЕР, 2000.

  4. Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова/ Д.Кирсанов// электронный вариант.

  5. Матросов А. HTML 4.0 в подлиннике/ А.Матросов, А.Сергеев, М. Чаунин// БХВ-Петербург.: Санкт-Петербург, 2005.

  6. Миронов Д.Создание Web-страниц в MS Office 2000/Д. Миронов// Санкт-Петербург, 2000.

  7. Пауэл Т. Web-дизайн/ Т.Пауэл// Санкт-Петербург, 2002

  8. Соломенчук В. Интернет: краткий курс, 2-е изд./ В.Соломенчук// Санкт-Петербург, ПИТЕР, 2000.

  9. Усенков Д. Уроки Web-мастера/ Д.Усенков// Москва, Бином, 2003

  10. Шафрин Ю.А. Информационные технологии. 10-11 кл./ Ю.А.Шафрин// Москва, Лаборатория базовых знаний, 1999.


2 Технические средства обучения(средства ИКТ)


  • Рабочее место ученика (моноблок).

  • Рабочее место учителя(моноблок)

  • Колонки (рабочее место учителя).

  • Интерактивная доска

  • Лазерный принтер черно-белый.

  • Сканер.

  • Модем ADSL

  • Локальная вычислительная сеть.

  • Интернет



Цифровые образовательные ресурсы:

  1. http://www.sura.ru/dikov/tests.htm - тесты по HTML

  2. www.webschool.narod.ru – веб-школа Интернет технологии

  3. www.education.kulichki.net – образование на куличках

  4. http://seegix.net – учебник по графике и веб-дизайну












Приложения:

frame




Link

Содержание

Компьютерная графика

Зарубежные композиторы

Баратынский

Занимательные игры





Игроки

Команда КВН

Игроки

ВУЗ

Возраст


Олег

РГУ

20


Aндрей

РГПУ

23

Михаил

РГПУ

22


Сергей

РГУ





Поэзия

<P><H2>Баратынский Е.А.H2>

ПОЭМЫ

Пиры

Эда

Переселение душ

Цыганка



Пример2

Язык гипертекстовой разметка HTML был предложен Тимом Бернерсом-Ли

в 1989 году как один из компанентеов технологии распределенной

гипертекстовой системы Word Wide Web(WWW).


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

Рузвельта В.Бушем в 1945 году в проекте по созданию электромеханической

информационной системы.


Термин "гипертекст" ввел в обращении Т.Нельсон в 1965 году.




html>

рамки2




Сложные списки


Н.Гумилев

ВОЛШЕБНАЯ СКРИПКА

Милый мальчик, ты так весел, так светла твоя улыбка,

Не проси об этом счастье, отравляющем миры.

Ты не знаешь, ты не знаешь, что такое эта скрипка,

Что такое темный ужас начинателя игры!

Тот кто взял ее однажды в повелительные руки,

У того исчез навеки безмятежный свет очей.

Духи ада любят слушать эти царственные звуки,

Бродят бешенные волки по дорогам скрипачей.






<title>Формаtitle>

анкета трудоустройства

Ваше имя:


Адрес:


Телефон:

Пол:

Мужчина

Женщина

Образование:

Школа">Школа

Техникум">Техникум

Институт">Институт

Аспирантура">Аспирантура

Знание иностранных языков:

Английский

Францкзский

Немецкий

Испаснкий

Комментарий:

Задание№1

1)

МОЯ ЖИЗНЬ

В одних садах цветёт миндаль, в других метёт метель.

В одних краях ещё февраль, в других - уже апрель.

Проходит время, вечный счёт: год за год, век за век...

Во всём - его неспешный ход, его кромешный бег.

В году на радость и печаль по двадцать пять недель.

Мне двадцать пять недель февраль, и двадцать пять - апрель.

По двадцать пять недель в туман уходит счёт векам.

Летит мой звонкий балаган куда-то к облакам.

М. Щербаков

Указания к заданию:

Заголовок: По центру, размер самый крупный, фон красный, цвет шрифта белый

Основной текст: размер средний, цвет синий


2)

Ускорение работы сайта

Часть 1

Ускорение загрузки и сокращение кода веб-страниц.

Часть 2

Сжатие графических файлов при сохранении их качества.

Часть 3

Ускорение запуска и выполнения скриптов на языке JavaScript.

Выделенные слова: жирный, средний, зеленый, по левому краю, фон серый
















Задание№2


КРАТКАЯ СПРАВКА ПО УРОКУ

п/п

Если вы хотите...

Выполняйте шаг за шагом...

1

Выполнить завершение работы.

• Щелкните мышью на кнопке Пуск

• В появившемся меню щелкните на строке Завершение работы.

• В открывшемся диалоговом окне Завершение работы с Windows щелкните мышью в кружочке на строке

Выключить компьютер.

• Щелкните мышью на кнопке Да.

• Дождитесь появления на экране монитора сообщения «Теперь питание компьютера можно отключить».

• Нажмите кнопку POWER на системном блоке компьютера.

Задание№3

1. Составьте таблицу для расписания ваших уроков. Пусть эта таблица состоит из восьми столбцов и девяти строк. Ширина таблицы - 100%.

2. В первом столбце укажите время начала и конца ваших уроков. Выравнивание данных в ячейках по левому краю.

3. В остальных столбцах школьные предметы по дням недели.

4. Выравнивание дней недели - по центру ячейки и жирным шрифтом.

5. Выравнивание названий предметов - по левому краю.

6. У всех столбцов фон сделайте разным цветом.

7. Перед таблицей поместите заголовок "РАСПИСАНИЕ УРОКОВ", выделив его тегами

и

. Цвет заголовка - красный.

8. Между заголовком и таблицей поместите рисунок.





Контрольная работа по языку HTML



1-й вариант

  1. Создать документ HTML

  2. Вставить текст: Ф.И.О. ученика, класс, школа

  3. Вставить фоновый рисунок (файл фона)

  4. Вставить таблицу 2 столбца, 3 строки, создать в каждой ячейке свой фон и вставить текст

  5. Вставить картинку в документ HTML

  6. Вставить красную линию длиной 600 пк, шириной 2 пк

  7. Вставить 2 радиокнопки

  8. Создайте гиперссылку на другую страничку в виде картинки

  9. Вставить гиперссылку на адрес электронной почты

    1. Вставить файл мультимедиа *.avi



2-й вариант

  1. Создать документ HTML

  2. Вставить текст: Ф.И.О. ученика, класс, школа

  3. Создать светлосиреневый цвет фона

  4. Вставить таблицу 3 столбца, 2 строки, затем вставить в каждую ячейку свою картинку

  5. Вставить бегущую строку

  6. Вставить синюю линию длиной 700 пк, шириной 3 пк

  7. Вставить кнопку

  8. Создайте гиперссылку на другую страничку в виде текста

  9. Вставить гиперссылку на адрес в интернете

  10. Вставить файл мультимедиа *.avi







Приложения

Ключевые слова


HTML

IP-адрес

Абсолютные адреса

Администрирование

Активные ссылки

Активные элементы

Баннер

Браузер

Веб-страница

Векторный формат

Виды сайтов

Выделенная линия

Выравнивание

Гипертекст

Гипертекстовые ссылки

Гостевая книга

Графика

Графические примитивы

Графический редактор

Дизайн

Динамический язык

Домен

Доступ по коммутируемым каналам

Заголовки

Заголовки страниц

Заголовок

Инструменты

Интерактивность

Интернет

Ключевые слова

Концепция сайта

Критерии оценки

Логотип

Макет

Метатеги

Метафайлы

Модем

Навигация

Навигация

Обтекание

Организация информации

Относительные адреса

Палитра цветов










Поисковые роботы

Поисковые системы

Пользователи

Посещенные ссылки

Провайдер

Протоколы FTP, TCP/IP, HTTP

Разделы

Разметка

Рамка изображения

Растровый формат

Редактор веб-страниц

Рейтинг ресурса

Сервер

Скорость загрузки

Скорость передачи информации

Спам

Списки

Ссылки

Статистика

Структура документа

Структура сайта

Сценарий

Таблицы

Тег

Текст

Тело

Термины

Тестирование сайта

Трафик

Фильтры

Фирменный стиль

Формат графического файла

Формы

Форум

Фреймы

Хостинг

Цели сайта

Чат

Экспертная оценка

Электронная почта

Эргономика

Эффективность рекламы


ТЕСТ «Основы HTML»



1.К атрибутам оформления таблиц относятся:

1. BORDER
2. BGCOLOR
3. ROWSPAN
4. WIDTH
5. TOP
6. VSIDES

7. TH

2. Обязательный атрибут тега <IMG>

1. ALT
2. WIDTH
3. BORDER
4. HEIGHT
5. HREF
6. SRC
7.VSPACE

3. К объектам JavaScript относятся

1. screen
2. history
3. document
4. pictures
5. images
6. form
7.location

4.Код JavaScript может быть размещен

1. в отдельном файле
2. как значение параметра HREF тега гиперссылки
3. в контейнере

5. Тег, создающий в форме радиокнопки (переключатели)

1.
2.
3.
4.
5.
<INPUT TYPE=RADIO NAME="R1" VALUE="V3">
6. <OPTION VALUE=3>

6. Тег, помечающий раздел html-документа для организации списка внутренних гиперссылок

1.
2.

3.
4.
<OL>
5. <IMG SRC="airplane.jpg" USEMAP="#plane">

7. Навигационная панель - это

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

8. Гиперссылка - это

1. элемент веб-страницы, хранящий указатель на ресурс Интернета
2. сведения об информационных источниках
3. анимированной изображение на веб-странице
4. бегущая строка рекламного характера

9. Для построения таблиц используются теги:

1.

COLSPAN>
7. <HSIDES>

10. Нумерованный список предполагает контейнер

1.


2.

  1. 3.

  • 4.

  • 5.

    11. Тег, помещающий информацию в заголовок браузера

    1.


    2.


    3.
    4.
    5.

    12. Каждый кадр фреймовой структуры описывается тегом

    1.
    2.
    3.
    4.
    5.
    6.
    <NAME>

    13. Сделать фон страницы цветным можно тегом

    1. <BODY BACKGROUND=AQUA>
    2. #F3C902
    3.
    4.
    <BACKGROUND COLOR=YELLOW>

    14. Фигуры, размечающие изображение-карту

    1. круг
    2. овал
    3. квадрат
    4. прямоугольник
    5. многоугольник
    6. трапеция
    7.треугольник

    15. Изменить цвет шрифта одного абзаца текста можно тегом

    1.
    2.


    3.

    <P color=gold>
    4. <COLOR=springgreen>

    16. HTML - это:

    1. язык структурного программирования
    2. язык разметки гипертекста
    3. разговорный язык
    4. расширяемый язык разметки
    5. стандартный обобщенный язык разметки

    17. Тег, создающий в форме кнопку для отправки данных

    1.
    2.
    3.
    4.
    5.

    18. Для открытия гиперссылки в нужном фрейме используется параметр

    1. SRC
    2. BLANK
    3. HREF
    4. TARGET
    5. FRAME

    19. События, обрабатываемые JavaScript

    1. onLoad
    2. onImageChange
    3. onMouseClick
    4. onClick
    5. onUnload
    6. onMouseOut
    7.onSubmit

    20. Структура HTML-документа состоит из:

    1. основного и заголовочного разделов
    2. описания типа документа и самого документа
    3. иерархического набора элементов
    4. заголовочной, основной и заключительной частей

    21. Проверить установку флажка в элементе "чекбокс" (checkbox) можно следующей строкой

    1. document.forms[0].elements[2].checked
    2. document.check2.checked
    3. doc.checkbox..true
    4. form1.c[3].false

    22. Параметр, задающий способ отправки данных из формы

    1. ACTION
    2. METHOD
    3. FORM
    4. TYPE
    5. VALUE

    23. Изображения-карты

    1. наглядно показывают содержание имеющейся гиперссылки
    2. рисунки, меняющие свое изображение при наведении на них мышиного курсора
    3. объединяют группу ссылок в единое целое
    4. это иерархический список ссылок
    5. украшение веб-страницы

    24. К скриптовым языкам относятся

    1. C++
    2. Delphi
    3. Java
    4. JavaScript
    5. JScript
    6. HTML
    7. XML

    8. CSS
    9. VBScript

    25. К форматам веб-графики принадлежат:

    1. GIF
    2. TIFF
    3. PSD
    4. JPEG
    5. PNG
    6. WMF
    7. PPT
    8. CMX

    26. Обязательный атрибут тега <INPUT>

    1. SRC
    2. LINK
    3. HREF
    4. COLOR
    5. TYPE
    6. onMouseOver
    7.TARGET



    Задания для самостоятельного выполнения

    Моя веб-страничка

    1. Разработайте макет своей «веб-визитки». Найдите необходимые слоганы и их графическое сопровождение.

    2. Разработайте титульную веб-страницу на одну из тем:

    «Наш класс» или самопрезентация

    «Мы – фанаты!» или «Наш фэн-клуб»

    «Интернет – газета» или «Сделай красиво!»

    «Веб-клуб»

    «Служба знакомств»

    «Пункт обмена всякой всячиной»

    «Магазин компьютеров»

    «Цвет и психологическое восприятие»;

    «Виды компьютерной графики»;

    «Сравнительный анализ графических редакторов»;

    «Форматы графических файлов. Характеристики. Назначение»;

    «Принципы создания анимированных изображений» и т.п.


    Графика

    1. Разработайте макет логотипа своей школы (класса) в формате jpeg или gif. Представьте его в цветном и черно-белом вариантах.

    2. Изготовьте два баннера (произвольной тематики) размером 120х60 –анимированный и статичный. Цель баннеров – воздействовать на эмоциональную сферу потенциального зрителя.

    3. Придумайте графическую иллюстрации для раздела юмористической страницы сайта. Иллюстрации необходимы смешные, занимательные и оригинальные. Размер иллюстрации 130х90 пикселей. Формат jpeg или gif.


    Основы веб - дизайна

    1. Проанализируйте цветовой спектр web-страниц, сочетание текста и фона следующих сайтов:

    http://www.astvic.ru — графика, спецэффекты, web-дизайн;

    http://dweb.ru — набор полезных материалов для web-дизайнера;

    http://www.schools.techno.ru — образовательный сервер «Школы в Интернете»

    Сделайте выводы


    Проектирование сайта

    Темы для создания веб-сайтов:

    1. Великие путешественники, покорители морей и океанов.

    1. Покорители северных земель.

    2. Животный мир.

    3. Растительный мир.

    4. Мои кумиры (музыка, кино, литература, спорт и т. д.).

    5. Культурные эпохи (античность, Ренессанс и т. д.).

    6. Исторические личности.

    7. Живая газета (новости, культура и т. д.).

    8. Обзор новинок на видео и музыкальном рынке (клипы, слайды, фотографии, информация, сплетни и т. д.).

    9. Мода: стили и направления.

    10. Уроки литературы (биографии писателей, краткое содержание произведений, иллюстрации и т. д.).

     







57 вебинаров для учителей на разные темы
ПЕРЕЙТИ к бесплатному просмотру
(заказ свидетельства о просмотре - только до 11 декабря)


Автор
Дата добавления 20.12.2015
Раздел Информатика
Подраздел Конспекты
Просмотров268
Номер материала ДВ-273745
Получить свидетельство о публикации
Похожие материалы

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