Методическая разработка по HTML-программированию
методическая разработка по информатике и икт (9 класс) на тему

Булаева Алевтина Викторовна

Методическая разработка по HTML-программированию

Скачать:

ВложениеРазмер
Файл sbornik_prakticheskikh_rabot_po_html_programmirovaniyu.docx139.87 КБ

Предварительный просмотр:

ФГКОУ «МКК «Пансион воспитанниц МО РФ»

«УТВЕРЖДАЮ»

Руководитель отдельной дисциплины

(математика, информатика и ИКТ)

Ю.В. Крылова___________________

«____»______________________2014г.

Сборник практических работ для изучения языка  HTML

Методическая разработка

Преподаватели информатики и ИКТ

Булаевой Алевтины Викторовна

Рассмотрено и рекомендовано к использованию

На заседании ПМО от _______________

Протокол №_________

Москва

2014-2015 учебный год

Введение

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

Данная разработка может быть использована на уроках информатики при изучении соответствующего материала в 9-11 классах. Работы содержат инструкции для самостоятельного освоения учащимися отдельных операций, другая часть работ служит для проверки степени усвоения отработанных навыков. Представленные практические работы могут быть использованы учащимися для самостоятельного освоения языка web-программирования.

Цели и задачи

Цель: знакомство с языком web-программирования HTML и формирование навыков работы с языком программирования  HTML.

Задачи:

Обучающие:

 знакомство с основными командами языка программирования HTML..

Развивающие:

 развитие информационной компетентности, которая включает в себя умение самостоятельно искать, отбирать нужную информацию, анализировать, организовывать, представлять и передавать её;

 развитие навыков моделирования и проектирования объектов;

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

 развитие аналитических и оценочных способностей;

 развитие навыков работы на компьютере.

Воспитывающие:

 формирование навыков индивидуальной работы над мини-проектом;

 формирование навыка самооценки;

 развитие самостоятельности и организованности.

Форма работы: индивидуальная.

Содержание


Практическая работа №1

Тема - Основные тэги HTML.

Задание: Создать Web-страницу, знакомящую с основными тэгами HTML.

1. В своей папке создайте новую папку, имеющую имя: Создание Web-сайта.

2. Запустите текстовый редактор Блокнот (Пуск – Программы – Стандартные - Блокнот).

3. Ввести HTML-код, задающий структуру Web-страницы:

Первое знакомство с тэгами HTML

4. Внести в текст страницы тэги заголовков различных уровней (размеров):

Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

5. Отделить этот фрагмент от остального текста с помощью горизонтальной

    разделительной линии:


6. Внести в текст страницы тэги, задающие списки нумерованные и ненумерованные:

  1. Первый элемент списка
  2. Второй элемент списка
  3. Третий элемент списка


  • Первый элемент списка
  • Второй элемент списка
  • Третий элемент списка

7.Внести в текст страницы тэги, определяющие начертание шрифта. Отделить

   этот фрагмент от текста с помощью горизонтальных разделительных линий:


Обычный текст

Жирный

Курсив

Подчеркнутый

Жирный подчеркнутый курсив


8. Ввести команду Файл - Сохранить, файлу Web-страницы присвоить имя

    proba.htm и сохранить в своей папке Создание Web-сайта, закрыть Блокнот.

9. Откройте созданный документ из своей папки, в заголовке окна браузера

    высвечивается название Web-страницы – Первое знакомство с тэгами HTML.

10. Замените общие фразы следующими (подумайте какие заменить):

Моя личная страница.

Давайте познакомимся.

Немного о себе:

  1. Моё имя…
  2. Мой адрес…
  3. Контактные координаты…

До встречи.

Спасибо за внимание.

Продолжение следует!

11. Сохраните изменения в файле proba.htm.

Основные тэги HTML

Назначение

Формат

Структура Web-страницы

Начало и конец страницы

 

Описание страницы, в том числе ее имя

 

Имя страницы

 

Содержание страницы

 

Форматирование текста

Заголовок (уровни от 1 до 6)

 

Абзац

 

Абзац с выравниванием

Перевод строки


Горизонтальный разделитель


Выравнивание по центру

 

Нумерованный список

Ненумерованный список

Форматирование шрифта

Жирный

Курсив

Подчеркнутый

Верхний индекс

Нижний индекс

Размер шрифта (от 1 до 7)

Цвет шрифта (задается названием цвета или его 16-ричным кодом)

Гарнитура шрифта

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

цвет

код

название

цвет

код

название

черный

# 000000

black

фиолетовый

# FF00FF

magenta

белый

# FFFFFF

white

бирюзовый

# 00FFFF

cyan

красный

# FF0000

red

желтый

# FFFF00

yellow

зеленый

# 00FF00

lime

золотой

# FFD800

gold

синий

# 0000FF

blue

оранжевый

# FFA500

orange

серый

# 808080

gray

коричневый

# A82828

brown

Практическая работа №2

Тема - тэги HTML для форматирования Web-страницы.

Задание: Добавьте в документ proba.htm тэги, с помощью которых можно задать  цвет фона и шрифта, различное начертание шрифта, выравнивание.

Откройте созданный документ proba.htm из своей папки, в заголовке окна браузера высвечивается название Web-страницы – Первое знакомство с тэгами HTML. Сверните это окно на Панель задач, для просмотра изменений в своей Web-странице необходимо выполнять команду Вид – Обновить.

1. Запустите текстовый редактор Блокнот, командой Файл – Открыть выведите на экран свой документ proba.htm; после внесения изменений в документе выполнять команду Файл – Сохранить.

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

Первое знакомство с тэгами HTML

TEXT=”#0000FF” BGCOLOR=”#808080”>

3. Допечатав тэги, выровняйте заголовки по центру и сделайте второй заголовок красного цвета:

Моя личная страница.

 Давайте познакомимся.

Немного о себе:

4. Допечатав тэги, измените толщину и цвет горизонтальной  разделительной линии:


SIZE="5" COLOR="#FFD800">

  1. Моё имя…
  2. Мой адрес…
  3. Контактные координаты…


5. Допечатайте текст, выровняйте его по ширине, применив тэги-параграфы для выравнивания; добавьте цветную горизонтальную разделительную линию:

Я совсем недавно начал(а) знакомиться с виртуальной жизнью. Мне тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они смогли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной и у меня появится ещё один виртуальный друг? :)


6. Допечатайте тэги для увеличения отступов маркированного списка:

  • До встречи.
    • Спасибо за внимание.

      • Продолжение следует!

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


Обычный текст


Жирный


Курсив


Подчеркнутый


Жирный подчеркнутый курсив


8. Сохраните изменения в файле proba.htm.

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

цвет

код

название

цвет

код

название

черный

# 000000

black

фуксия

# FF00FF

magenta

белый

# FFFFFF

white

бирюзовый

# 00FFFF

cyan

красный

# FF0000

red

желтый

# FFFF00

yellow

зеленый

# 00FF00

lime

золотой

# FFD800

gold

синий

# 0000FF

blue

оранжевый

# FFA500

orange

серый

# 808080

gray

коричневый

# A82828

brown

бордо

# 800000

maroon

темно-синий

# 000080

navy

зелень

# 008000

green

фиолетовый

# 800080

purple

оливки

# 808000

olive

чирок

# 008080

teal

Практическая работа №3

Тема - тэги HTML для создания гиперссылки и вставки графических изображений.

Задание: Добавьте в документ proba.htm тэги, с помощью которых можно вставить графическое изображение и гиперссылку  на другую Web-страницу.

1. Скопируйте в свою папку Создание Web-сайта понравившуюся картинку или фотографию, имеющую имя файла *.jpg (например, моя фотография.jpg) или другие файлы форматов .bmp, .gif.

2. Запустите текстовый редактор Блокнот; создайте новую Web-страницу, содержащую подробную информацию о вас и ваших увлечениях (текст придумайте сами), а так же  гиперссылку на документ proba.htm,  например:

Автобиография

Моя автобиография.

Я родилась (родился) в г. Светлом в 1989 году 1 апреля. Мою маму зовут Ольга, а папу Сергей. Ещё у меня есть братишка Вовка : ))) и …

Продолжим знакомство: )))

3. Сохраните этот документ в папке Создание Web-сайта под именем автобиография.htm. Закройте этот документ.

Откройте созданный документ proba.htm из своей папки, в заголовке окна браузера высвечивается название Web-страницы – Первое знакомство с тэгами HTML. Сверните это окно на Панель задач, для просмотра изменений в своей Web-странице необходимо выполнять команду Вид – Обновить.

4. Запустите текстовый редактор Блокнот, командой Файл – Открыть выведите на экран свой документ proba.htm; после внесения каждого вида изменений в документе выполнять команду Файл – Сохранить.

5. Допечатав в свой документ тэги, вставьте свою фотографию или картинку:

Первое знакомство с тэгами HTML

<CENTER>

Моя личная страница.

Давайте познакомимся.  

Немного о себе:


  1. Моё имя…
  2. Мой адрес…
  3. Контактные координаты…


6. Допечатав в свой документ тэги, сделайте фразу «почитать обо мне» ссылкой на документ автобиография.htm.

Я совсем недавно начал(а) знакомиться с виртуальной жизнью.

Мне тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они смогли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной и у меня появится ещё один виртуальный друг? :)


  • До встречи.
    • Спасибо за внимание.

      • Продолжение следует!


Обычный текст


Жирный


Курсив


Подчеркнутый


Жирный подчеркнутый курсив


7. Сохраните изменения в файле proba.htm.

Практическая работа №4

Тема - тэги HTML для форматирования графических

изображений, вставки таблицы.

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

1. Скопируйте в свою папку Создание Web-сайта вторую картинку или фотографию, имеющую имя файла *.jpg (например, море.jpg) или другие файлы форматов .bmp, .gif.

2. Откройте документ автобиография.htm из своей папки и с помощью текстового редактора Блокнот. Допечатайте в тэге атрибуты для того, чтобы сделать понравившуюся картинку фоном документа:

Автобиография

BACKGROUND=”море.jpg”>

Моя автобиография.

Я родилась (родился) в г. Светлом в 1989 году 1 апреля. Мою маму зовут Ольга, а папу Сергей. Ещё у меня есть братишка Вовка : )))  и …

Продолжим знакомство  :)))

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

   

   

1x11x21x3
2x1 2x22x3

  1. С помощью гиперссылки «Продолжим знакомство» откройте Web-страницу Первое знакомство с тэгами HTML. Сверните это окно на Панель задач.

5.. В текстовом редакторе Блокнот командой Файл – Открыть выведите на экран свой документ proba.htm; после внесения каждого вида изменений в документе выполняйте команду Файл – Сохранить.

6.. Допечатайте тэг атрибутом для  выравнивания картинки по левому краю экрана и обтекания её текстом справа:

Первое знакомство с тэгами HTML

Моя личная страница.

Давайте познакомимся.  

ALIGN="LEFT">

7. Допечатайте атрибут  для  задания ширины картинки:

WIDTH="400">

8. Допечатайте атрибут  для  задания высоты картинки:

HEIGHT="400">

9. Допечатайте атрибут  для  задания расстояния между текстом и рисунком (по горизонтали), в пикселях:

HSPACE="30">

10. Допечатайте атрибут для задания расстояния между текстом и рисунком (по вертикали):

 HSPACE="30" VSPACE="20">

11. Допечатайте атрибут для создания рамки вокруг картинки:

 HSPACE="30" VSPACE="20" BORDER="2">

12. Допечатайте атрибут для создания всплывающей подсказки к картинке: 

 HSPACE="30" VSPACE="20" BORDER="2" ALT="Моя фотография">

Немного о себе:


  1. Моё имя…
  2. Мой адрес…
  3. Контактные координаты…


Я совсем недавно начал(а) знакомиться с виртуальной жизнью.

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

почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной и у меня появится ещё один виртуальный друг? :)


  • До встречи.
    • Спасибо за внимание.

      • Продолжение следует!


Обычный текст


Жирный


Курсив


Подчеркнутый


Жирный подчеркнутый курсив


Сохраните изменения в файле proba.htm.


Практическая работа №5

Разработка Web-сайтов.    Тема - тэги HTML для форматирования таблицы и вставки бегущей строки; тэги HTML для создания фреймов.

Задание: В файле автобиография.htm вставьте бегущую строку и отформатируйте таблицу.

1. Откройте документ автобиография.htm из своей папки и с помощью текстового редактора Блокнот. Допечатайте тэги для вставки бегущей строки и тэги, указывающие величину шрифта текста в строке:

Автобиография

Моя автобиография.

ТЕКСТ

2. В тэг для вставки бегущей строки допечатайте атрибут для движения текста от правого края страницы к левому и обратно:

BEHAVIOR=ALTERNATE>ТЕКСТ

3. В тэг для вставки бегущей строки допечатайте атрибут для окраски поверхности бегущей строки в какой-либо цвет:

BGCOLOR=#FFA500> ТЕКСТ

Я родилась (родился) в г. Светлом в 1989 году 1 апреля. Мою маму зовут Ольга, а папу Сергей. Ещё у меня есть братишка Вовка : )))  и …

Продолжим знакомство  :)))

4. Допечатайте тэги для выравнивания таблицы по центру страницы, вставки границ и названия таблицы:

ALIGN=CENTER  BORDER=5>

5. Допечатайте тэги для вставки заголовков в столбцы таблицы:

       

       

Название таблицы
Заголовок 1 Заголовок 2 Заголовок 3
1x11x21x3
2x12x22x3

Практическая работа №6

Разработка Web-сайтов.    Тема - тэги HTML для форматирования таблицы и вставки бегущей строки; тэги HTML для создания фреймов.

Задание № 6: Создайте сайт с тремя фреймами (ввод текста и тэгов - в Блокноте).

1. Создайте три страницы, в которых будет изображаться содержимое сайта и сохраните их в файлах 1.htm, 2.htm, 3.htm (подставьте соответствующие номера):

Содержимое 1 (2, 3)

Страница 1 (2, 3)

Это первая (вторая, третья) страница нашего сайта.

2. Создайте страницу заголовка сайта и сохраните в файле заголовок.htm:

Заголовок

Сайт с фреймами

3. Создайте страницу оглавления сайта и сохраните в файле оглавление.htm:

Оглавление

Страница 1

Страница 2

Страница 3

4. Создайте главную страницу сайта и сохраните в файле index.htm:

Сайт с фреймами

5. Откройте файл index.htm из своей папки для просмотра полученного сайта.


Справочные материалы

Названия основных цветов

Таблица 1. Название основных цветов и их RGB-значения

HTML: Популярный самоучитель - i_144.png

HTML: Популярный самоучитель - i_146.png

Таблица 2. Список ссылок на символы (стандарт ISO8859–1)

HTML: Популярный самоучитель - i_130.png

HTML: Популярный самоучитель - i_131.png

Источники информации

"Краткий HTML – русский словарь"

"Спецификация HTML 4.0"

"Описание команд HTML"

"Изучение HTML 3.2 на примерах"

"Справочник по HTML "

А. Гончаров "Самоучитель HTML"

А.Матросов, А.Сергеев, М.Чаунин "HTML 4.0 в подлиннике"

Айзекс С. "Dynamic HTML"

Байенс Дж. "Примочки программирования в WEB"

Бурсов М. В. и др. "Основы работы с HTML-редактором Dreamweaver. Учебно-методическое пособие"

Велихов В. "Справочник по HTML 4.0"

Вильямсон Х. "Универсальный Dynamic HTML"

Гаевский А. Ю., Романовский В. А. "Создание Web-страниц и Web-сайтов. HTML и JavaScript"

Гончаров А. "Самоучитель HTML"

Городулин В. "HTML-справочник"

Дубаков М. "Веб-мастеринг средствами CSS"

Е.Л. Полонская "Самоучитель по HTML"

Квинт И. "HTML, XHTML и CSS на 100%"

Коллектив авторов "Основы работы с HTML: Учебный курс"

Комолова Н. В. "HTML. Самоучитель "

Комолова Н. Яковлева Е. "HTML: Самоучитель"

Ломов А. Ю. "HTML, CSS, скрипты: практика создания сайтов"

Ломов А. Ю. "HTML, CSS, скрипты: практика создания сайтов"

Мейер Э. А. "CSS – каскадные таблицы стилей. Подробное руководство"

Мержевич В. В. "HTML и CSS на примерах"

Моррис Б. "HTML"

Моррис Б. "HTML в действии."

Муссиано Ч., Кеннеди Б. "HTML и XHTML. Подробное руководство"

Наварро Э "XHTML: учебный курс."

Неизвестен "Справочник по HTML."

Неизвестен "Справочник по XML."

Петюшкин А. В. "HTML. Экспресс-курс"

Полонская Е. Л. "Язык HTML. Самоучитель"

Рева О. Н. "HTML. Просто как дважды два"

Рэй Э. "Изучаем XML"

Спенсер П. "XML. Проектирование и реализация"

Суздалев Д. "Справочник HTML"

Тиге Д. К. "DHTML и CSS для Internet"

Ханикатт Дж., Браун М. "Использование HTML 4"

Хейз Д. "Освой самостоятельно HTML. 10 минут на урок"

Хеник Б. "HTML и CSS: путь к совершенству"

Холзнер С. "XML. Энциклопедия"

Хольцшлаг М. Е. "Языки HTML и CSS: для создания Web-сайтов"

Хольцшлаг М. Э. "Использование HTML и XHTML. Специальное издание"

Чиртик А. А. "HTML. Популярный самоучитель"

Шапошников И. В. "Справочник Web-мастера. XML"


По теме: методические разработки, презентации и конспекты

Методические разработки внеклассных мероприятий по физической культуре и спорту. Методические разработки внеклассных мероприятий по физической культуре и спорту.

Аннотацияк учебно-методическим  разработкам внеклассных мероприятий  по физической культуре с использованием нестандартного оборудования. 1....

Методическая разработка по физкультуре по теме: Методическая разработка внеклассного мероприятия "Веселые старты" для учащихся начальной школы по предмету: "Физическая культура"

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

«Откуда есть пошла земля русская…» методическая разработка интегрированного внеклассного мероприятия, посвященного 1150-летию образования российской государственности «Откуда есть пошла земля русская…» методическая разработка интегрированного внекласс

Данная  работа  посвящена  1150- летию образования российской государственности. В  работе  представлены: история образования российской государственности, история симво...

методическая разработка урока биологии в 6 классе по теме "Движения живых организмов" и презентация к ней. Методическая разработка урока биологии в 6 классе по теме "Дыхание растений, бактерий и грибов" и презентация к ней.

Методическая разработка урока с поэтапным проведением с приложениямиПрезентация к уроку биологии в  6 классе по теме "Почему организмы совершают движения? ".Методическая разработка урока с поэтап...

Методическая разработка Методическая разработка (для факультативных занятий по английскому языку для учащихся 10-11 классов) Создание банка дистанционных уроков с использованием инструментов современного интернета (Googl Docs, Delicious/BobrDoobr, Mind

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

Методическая разработка урока "Амины. Анилин", Методическая разработка урока "Многоатомные спирты"

Урок, разработан для учащихся 10 класса, обучающихся по базовой программе. Учебник "Химия 10" О.С. Габриелян.Урок, разработан для учащихся 10 класса, обучающихся по базовой программе. Учебник "Химия 1...