Методическая разработка по HTML-программированию
методическая разработка по информатике и икт (9 класс) на тему
Методическая разработка по HTML-программированию
Скачать:
Вложение | Размер |
---|---|
![]() | 139.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-страницы:
4. Внести в текст страницы тэги заголовков различных уровней (размеров):
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
5. Отделить этот фрагмент от остального текста с помощью горизонтальной
разделительной линии:
6. Внести в текст страницы тэги, задающие списки нумерованные и ненумерованные:
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
7.Внести в текст страницы тэги, определяющие начертание шрифта. Отделить
этот фрагмент от текста с помощью горизонтальных разделительных линий:
Обычный текст
Жирный
Курсив
Подчеркнутый
Жирный подчеркнутый курсив
8. Ввести команду Файл - Сохранить, файлу Web-страницы присвоить имя
proba.htm и сохранить в своей папке Создание Web-сайта, закрыть Блокнот.
9. Откройте созданный документ из своей папки, в заголовке окна браузера
высвечивается название Web-страницы – Первое знакомство с тэгами HTML.
10. Замените общие фразы следующими (подумайте какие заменить):
Моя личная страница.
Давайте познакомимся.
Немного о себе:
- Моё имя…
- Мой адрес…
- Контактные координаты…
До встречи.
Спасибо за внимание.
Продолжение следует!
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. Допечатав в свой документ тэги, выделенные жирным шрифтом, задайте цвет шрифта для всего текста и цвет фона документа:
TEXT=”#0000FF” BGCOLOR=”#808080”>
3. Допечатав тэги, выровняйте заголовки по центру и сделайте второй заголовок красного цвета:
Моя личная страница.
Давайте познакомимся.
Немного о себе:
4. Допечатав тэги, измените толщину и цвет горизонтальной разделительной линии:
SIZE="5" COLOR="#FFD800">
- Моё имя…
- Мой адрес…
- Контактные координаты…
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. Допечатав в свой документ тэги, вставьте свою фотографию или картинку:
<CENTER>
Моя личная страница.
Давайте познакомимся.
Немного о себе:
- Моё имя…
- Мой адрес…
- Контактные координаты…
6. Допечатав в свой документ тэги, сделайте фразу «почитать обо мне» ссылкой на документ автобиография.htm.
Я совсем недавно начал(а) знакомиться с виртуальной жизнью.
Мне тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они смогли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной и у меня появится ещё один виртуальный друг? :)
- До встречи.
- Спасибо за внимание.
- Продолжение следует!
Обычный текст
Жирный
Курсив
Подчеркнутый
Жирный подчеркнутый курсив
7. Сохраните изменения в файле proba.htm.
Практическая работа №4
Тема - тэги HTML для форматирования графических
изображений, вставки таблицы.
Задание: добавьте в документ proba.htm атрибуты тэгов, с помощью которых можно отформатировать графическое изображение; в файле автобиография.htm сделайте картинку фоном документа, вставьте в него таблицу.
1. Скопируйте в свою папку Создание Web-сайта вторую картинку или фотографию, имеющую имя файла *.jpg (например, море.jpg) или другие файлы форматов .bmp, .gif.
2. Откройте документ автобиография.htm из своей папки и с помощью текстового редактора Блокнот. Допечатайте в тэге атрибуты для того, чтобы сделать понравившуюся картинку фоном документа:
BACKGROUND=”море.jpg”>
Моя автобиография.
Я родилась (родился) в г. Светлом в 1989 году 1 апреля. Мою маму зовут Ольга, а папу Сергей. Ещё у меня есть братишка Вовка : ))) и …
3. Допечатайте тэги для вставки таблицы, состоящей из двух строк и трех столбцов, задайте цвет строкам, впечатайте цифровую информацию в ячейки:
1x1 | 1x2 | 1x3 |
2x1 | 2x2 | 2x3 |
- С помощью гиперссылки «Продолжим знакомство» откройте Web-страницу Первое знакомство с тэгами HTML. Сверните это окно на Панель задач.
5.. В текстовом редакторе Блокнот командой Файл – Открыть выведите на экран свой документ proba.htm; после внесения каждого вида изменений в документе выполняйте команду Файл – Сохранить.
6.. Допечатайте тэг атрибутом для выравнивания картинки по левому краю экрана и обтекания её текстом справа:
Моя личная страница.
Давайте познакомимся.
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="Моя фотография">
Немного о себе:
- Моё имя…
- Мой адрес…
- Контактные координаты…
Я совсем недавно начал(а) знакомиться с виртуальной жизнью.
Мне тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они смогли посмотреть мои фотографии,
почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной и у меня появится ещё один виртуальный друг? :)
- До встречи.
- Спасибо за внимание.
- Продолжение следует!
Обычный текст
Жирный
Курсив
Подчеркнутый
Жирный подчеркнутый курсив
Сохраните изменения в файле proba.htm.
Практическая работа №5
Разработка Web-сайтов. Тема - тэги HTML для форматирования таблицы и вставки бегущей строки; тэги HTML для создания фреймов.
Задание: В файле автобиография.htm вставьте бегущую строку и отформатируйте таблицу.
1. Откройте документ автобиография.htm из своей папки и с помощью текстового редактора Блокнот. Допечатайте тэги для вставки бегущей строки и тэги, указывающие величину шрифта текста в строке:
Моя автобиография.
2. В тэг для вставки бегущей строки допечатайте атрибут для движения текста от правого края страницы к левому и обратно:
3. В тэг для вставки бегущей строки допечатайте атрибут для окраски поверхности бегущей строки в какой-либо цвет:
Я родилась (родился) в г. Светлом в 1989 году 1 апреля. Мою маму зовут Ольга, а папу Сергей. Ещё у меня есть братишка Вовка : ))) и …
4. Допечатайте тэги для выравнивания таблицы по центру страницы, вставки границ и названия таблицы:
ALIGN=CENTER BORDER=5>
5. Допечатайте тэги для вставки заголовков в столбцы таблицы:
Заголовок 1 | Заголовок 2 | Заголовок 3 |
---|---|---|
1x1 | 1x2 | 1x3 |
2x1 | 2x2 | 2x3 |
Практическая работа №6
Разработка Web-сайтов. Тема - тэги HTML для форматирования таблицы и вставки бегущей строки; тэги HTML для создания фреймов.
Задание № 6: Создайте сайт с тремя фреймами (ввод текста и тэгов - в Блокноте).
1. Создайте три страницы, в которых будет изображаться содержимое сайта и сохраните их в файлах 1.htm, 2.htm, 3.htm (подставьте соответствующие номера):
Страница 1 (2, 3)
Это первая (вторая, третья) страница нашего сайта.
2. Создайте страницу заголовка сайта и сохраните в файле заголовок.htm:
Сайт с фреймами
3. Создайте страницу оглавления сайта и сохраните в файле оглавление.htm:
4. Создайте главную страницу сайта и сохраните в файле index.htm:
5. Откройте файл index.htm из своей папки для просмотра полученного сайта.
Справочные материалы
Таблица 1. Название основных цветов и их RGB-значения
Таблица 2. Список ссылок на символы (стандарт ISO8859–1)
Источники информации
По теме: методические разработки, презентации и конспекты

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

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

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

методическая разработка урока биологии в 6 классе по теме "Движения живых организмов" и презентация к ней. Методическая разработка урока биологии в 6 классе по теме "Дыхание растений, бактерий и грибов" и презентация к ней.
Методическая разработка урока с поэтапным проведением с приложениямиПрезентация к уроку биологии в 6 классе по теме "Почему организмы совершают движения? ".Методическая разработка урока с поэтап...
Методическая разработка Методическая разработка (для факультативных занятий по английскому языку для учащихся 10-11 классов) Создание банка дистанционных уроков с использованием инструментов современного интернета (Googl Docs, Delicious/BobrDoobr, Mind
Методическая разработка входит в серию дистанционных уроков английского и немецкого языков , разрабатываемых с целью подготовки учащихся к выполнению письменной части ЕГЭ по указанным дисциплина...

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